HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。
在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。
一、js变量
1 name = \'大师兄\'; // 默认全局变量
2 function func() {
3 var name = \'niuniu\'; // 局部变量
4 }
二、js基本数据类型
1、字符串
1 //字符串 2 var name = \'你开心就好\'; 3 var str = \'双鱼座\'; 4 name_str = name + str ; //拼接字符串 5 name.concat(str); //拼接字符串 6 name.charAt(0); //根据角标获取字符串的某一字符 7 name.substring([0,2]); //根据角标获取字符串序列，顾头不顾尾，和Python的切片类似 8 name.slice(0,2); //切片，与上面一样 9 name.length //获取字符串的长度 10 name.indexOf(\'开心\'); //根据字符获取角标，只匹配第一个字符 11 name.toUpperCase(); //变为大写 12 name.toLowerCase(); //变为小写 13 name.split(\'心\'); //根据字符分割，返回的是数组 14 //数字类型 15 var age = 20; 16 var score = 88.88; 17 var strNum = \'88.88\'; 18 parseInt(strNum); //将字符串类型的数字转换成整数，去掉小数部分 19 parseFloat(strNum); //将字符串类型的数字转换成小数 20 //布尔类型 21 var t = true; //小写 22 var f = false; //小写
2、数组类型（相当于Python的list）
1 //数组 2 var list = []; //创建空数组 3 var list1 = [1,2,3]; 4 var list2 = new Array();//创建空数组 5 var list3 = new Array(1,2,3); 6 list1.length //数组的长度 7 list.push(4,5); //尾部增加元素，相当于Python的append 8 list.unshift(0,0); //从头部增加元素 9 list.shift(); //从头部获取一个元素并删除 10 list.pop(); //从尾部获取一个元素并删除 11 list.splice(start,deletecount,val); //插入、删除或替换数组的元素 12 //start代表起始位置 13 //deletecount代表删除元素的个数 14 //value代表插入的元素 15 list.splice(n,0,val); //指定位置插入元素 16 list.splice(n,1,val); //指定位置替换元素 17 list.splice(n,1); //指定位置删除元素 18 list.slice(1,2); //切片，与Python的切片类似，顾前不顾后 19 list.reverse(); //反转 20 list.join(\'-\'); //将数组根据分割符拼接成字符串 21 list.concat(list1); //数组与数组拼接 22 list.sort(); //排序
3、对象类型（相当于Python的字典）
1 //对象（Python中叫字典）
2 var dict = {name:\'dsx\',age:18,sex:\'男\' };
3 dict.age; //取值
4 dict[\'name\']; //取值
5 dict.age = 22; //修改
6 dict[\'name\'] = \'大师兄\'; //修改
7 delete dict[\'name\']; //删除
8 delete dict.age; //删除
三、js条件判断语句
1、if条件判断
1 //if条件判断
2 if (\'1\'==1){ //两个等号不校验数据类型是否相同
3 console.log(\'A\') //打印，等同于Python的print
4 }else if (\'2\'===2) { //三个等号会校验数据类型
5 console.log(\'B\');
6 }else if (3===3 && 4===4){ //相当于and
7 console.log(\'C\')
8 }else if (1==1 || 2==3){ //相当于or
9 console.log(\'D\')
10 }else {
11 console.log(\'E\')
12 }
2、switch条件判断
1 //switch条件判断
2 switch (2){
3 case 1:
4 console.log(\'A\');
5 break;
6 case 2:
7 console.log(\'B\');
8 break;
9 default:
10 console.log(\'C\');
11 }
四、js循环语句
1、第一种循环
1 //循环字符串
2 var name = \'这是为 什么？\';
3 for (var a in name){
4 console.log(name[a])
5 }
6 //循环数组
7 var list = [\'大师兄\',\'牛牛\',\'安大叔\'];
8 for (var i in list){
9 console.log(list[i])
10 }
11 //循环对象
12 var dict = {\'a\':\'1\',\'b\':\'2\'};
13 for (var d in dict){
14 console.log(d);
15 console.log(dict[d])
16 }
2、第二种循环（不支持字典的循环）
1 //循环字符串
2 var name = \'这是为 什么？\';
3 for(var i=0;i<name.length;i++){
4 console.log(name[i])
5 }
6 //循环数组
7 var list = [\'大师兄\',\'牛牛\',\'安大叔\'];
8 for (var i=0;i<list.length;i++){
9 console.log(list[i])
10 }
3、第三种循环（死循环）
1 while (1==1){
2 console.log(\'AAA\')
3 }
五、函数定义
1 //常规函数
2 function f(name,age) {
3 console.log(name);
4 console.log(age);
5 }
6 f(\'dsx\',18);
7 //匿名函数，函数没有名字，无法调用时找到，将整个函数当作一个参数传递
8 var func = function () { //将匿名函数赋值给一个变量
9 alert(\'这是一个匿名函数\')
10 };
11 func()
12 //自执行函数
13 (function () {
14 console.log(\'自执行函数\')
15 })();
16
17 //函数作用域
18 var name = \'nhy\';
19 function f() {
20 var name = \'dsx\';
21 console.log(\'in-->\'+name); //dsx
22 }console.log(\'out-->\'+name); //nhy
23 f();
六、面向对象
1 //面向对象
2 function f(name) {
3 this.name = name; //this相当于Python中的self，代指本类
4 this.say = function () {
5 console.log(\'say-->\'+this.name)
6 }
7 }
8 var obj = new f(\'dsx\'); //实例化
9 console.log(obj.name); //调用类里面的变量
10 obj.say();