HTML之JS

Posted 2021-01-14 冒泡泡de可乐

   浏览器具有解释javascript的功能

   在html中可以将JavaScript/JS的代码写在head中，被script标签所包裹。当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。

引入JavaScript代码，类似于Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS与body中引入JS区别

html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

单行注释通过 //  多行通过 /* */

JS变量

age = 18; // 默认全局变量 
function func() {
    var name = ‘lihui‘; // 局部变量 
}

JS基本数据类型（JavaScript 声明数据类型通过new）

字符串

//定义字符串 
var str = ‘今天天气真好啊！‘; 
var name = ‘小马‘; 
// 字符串的拼接 
var name_str = name+str;  
//字符串操作 
str = ‘自动化‘ 
str.charAt(0) 根据角标获取字符串中的某一个字符  char字符 
str.substring(1,3) 根据角标获取 （顾头不顾尾）字符串子序列 大于等于x  小于y 
str.length 获取字符串长度 
str.concat(‘Python‘)  拼接字符串 
str.indexOf(‘动‘) 获取子序列的位置 
str.slice(0,2)  切片 (顾头不顾尾) start end 
str.toLowerCase()  变更为小写 
str.toUpperCase() 变更大写 
str.split(‘动‘)    分割 返回数组 
str.split(‘动‘,1) 分割 返回数组 参数2 为取分割后数组的前x个元素

数字类型

数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）
var age = 18;
var score = 89.22; 
number = ‘18‘; 
// 字符串转整数
var n = parseInt(number); 
// 转换成小数 
f =parseFloat(number)

布尔类型

布尔类型（true 或 false）
var t = true;
var f = false;

数组类型（相当于Python中的列表）

// 第一种创建方式 
var list = new Array(); 
list[0] = ‘马小马‘; 
list[1] = ‘乔治‘; 
 
// 第二种创建方式 
var list2 = new Array(‘马小马‘,‘乔治‘); 
 
// 第三种创建方式 
var list3 = [‘马小马‘,‘乔治‘]; 
 
数组操作 
var list3 = [‘马小马‘,‘乔治‘];
 
list3.length 数组的长度 
 
list3.push(‘佩奇‘) //尾部追加数据 
 
list3.shift() //头部获取一个元素 并删除该元素 
 
list3.pop() //尾部获取一个元素 并删除该元素 
 
list3.unshift(‘lh‘) //头部插入一个数据 
 
list3.splice(start, deleteCount, value) //插入、删除或替换数组的元素 
 
list3.splice(n,0,val) //指定位置插入元素 
 
list3.splice(n,1,val) //指定位置替换元素 
 
list3.splice(n,1) //指定位置删除元素 
 
list3.slice(1,2) //切片
 
list3.reverse() //反转 
 
list3.join(‘-‘) //将数组根据分割符拼接成字符串 
 
list3.concat([‘abc‘]) //数组与数组拼接 
 
list3.sort() //排序

对象类型（相当于Python的字典）

var dict = {name:‘粉红猪‘,age:5,sex:‘女‘ };
var age = dict.age; 
var name = dict[‘name‘];
delete dict[‘name‘]  //删除
delete dict.age       //删除

定时器

 

setInterval(alert(‘定时执行‘),5000); //参数1 为定时器执行的功能，第二个参数为定时器工作的间隔时间 毫秒为单位
 
function t1() {
    console.log(‘我是大师兄‘)
}
setInterval(‘t1()‘, 5000);// 可以运行方法

JS条件判断语句

js中两个等号判断，只要值相同则为true；三个等号判断，必须类型和值都相同才为true

//1、if条件判断
if (条件) {
    执行代码块
} else if (条件) {
    执行代码块
} else {
    执行代码块
};
 
 //2、switch 条件判断
switch (a) {
    case 1:
        console.log(111);
        break;
    case 2:
        console.log(222);
        break;
    default:
        console.log(333);
}

JS循环语句

//第一种循环  循环的是角标
tmp = [‘魅族‘, ‘华为‘, ‘小米‘];
tmp = ‘魅族华为小米;
tmp = {‘魅族‘: ‘MEIZU‘, ‘小米‘: ‘XIAOMI‘};

for (var i in tmp) {
    console.log(tmp[i]);
}

//第二种循环  （这种方法不支持字典的循环）
for (var i = 0; i < tmp.length; i++) {
    console.log(tmp[i]);
}

//第三种循环
while (true) {
    console.log(111);
}                                                                                                             

函数

//1、普通函数
function 函数名(形参, 形参, 形参) {
    执行代码块
}
 
//2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递
setInterval(function () {
    console.log(11);
}, 5000);

函数的作用域

Python的作用域是以函数作为作用域的，其他语言以代码块{ }作为作用域的。

JavaScript和python一样是以函数作为作用域