HTML学习之==>JS

　　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变量

 name = '大师兄'; // 默认全局变量
 function func() {
     var name = 'niuniu'; // 局部变量
 }

二、js基本数据类型

1、字符串

 //字符串
 var name = '你开心就好';
 var str = '双鱼座';
 name_str = name + str ; //拼接字符串
 name.concat(str);       //拼接字符串
 name.charAt(0);         //根据角标获取字符串的某一字符
 name.substring([0,2]);  //根据角标获取字符串序列，顾头不顾尾，和Python的切片类似
 name.slice(0,2);        //切片，与上面一样
 name.length             //获取字符串的长度
 name.indexOf('开心');   //根据字符获取角标，只匹配第一个字符
 name.toUpperCase();     //变为大写
 name.toLowerCase();     //变为小写
 name.split('心');       //根据字符分割，返回的是数组
 //数字类型
 var age = 20;
 var score = 88.88;
 var strNum = '88.88';
 parseInt(strNum);       //将字符串类型的数字转换成整数，去掉小数部分
 parseFloat(strNum);     //将字符串类型的数字转换成小数
 //布尔类型
 var t = true;           //小写
 var f = false;          //小写

2、数组类型（相当于Python的list）

 //数组
 var list = [];          //创建空数组
 var list1 = [1,2,3];
 var list2 = new Array();//创建空数组
 var list3 = new Array(1,2,3);
 list1.length            //数组的长度
 list.push(4,5);         //尾部增加元素，相当于Python的append
 list.unshift(0,0);      //从头部增加元素
 list.shift();           //从头部获取一个元素并删除
 list.pop();             //从尾部获取一个元素并删除
 list.splice(start,deletecount,val); //插入、删除或替换数组的元素
 //start代表起始位置
 //deletecount代表删除元素的个数
 //value代表插入的元素
 list.splice(n,0,val);   //指定位置插入元素
 list.splice(n,1,val);   //指定位置替换元素
 list.splice(n,1);       //指定位置删除元素
 list.slice(1,2);        //切片，与Python的切片类似，顾前不顾后
 list.reverse();         //反转
 list.join('-');         //将数组根据分割符拼接成字符串
 list.concat(list1);     //数组与数组拼接
 list.sort();            //排序

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

 //对象（Python中叫字典）
 var dict = {name:'dsx',age:18,sex:'男' };
 dict.age;                //取值
 dict['name'];            //取值
 dict.age = 22;           //修改
 dict['name'] = '大师兄';  //修改
 delete dict['name'];     //删除
 delete dict.age;         //删除

三、js条件判断语句

1、if条件判断

 //if条件判断
 if ('1'==1){                //两个等号不校验数据类型是否相同
     console.log('A')        //打印，等同于Python的print
 }else if ('2'===2) {        //三个等号会校验数据类型
     console.log('B');
 }else if (3===3 && 4===4){  //相当于and
     console.log('C')
 }else if (1==1 || 2==3){    //相当于or
     console.log('D')
 }else {
     console.log('E')
 }

2、switch条件判断

 //switch条件判断
 switch (2){
     case 1:
         console.log('A');
         break;
     case 2:
         console.log('B');
         break;
     default:
         console.log('C');
 }

四、js循环语句

1、第一种循环

 //循环字符串
 var name = '这是为 什么？';
 for (var a in name){
     console.log(name[a])
 }
 //循环数组
 var list = ['大师兄','牛牛','安大叔'];
 for (var i in list){
     console.log(list[i])
 }
 //循环对象
 var dict = {'a':'1','b':'2'};
 for (var d in dict){
     console.log(d);
     console.log(dict[d])
 }

2、第二种循环（不支持字典的循环）

 //循环字符串
 var name = '这是为 什么？';
 for(var i=0;i<name.length;i++){
     console.log(name[i])
 }
 //循环数组
 var list = ['大师兄','牛牛','安大叔'];
 for (var i=0;i<list.length;i++){
     console.log(list[i])
 }

3、第三种循环（死循环）

 while (1==1){
     console.log('AAA')
 }

五、函数定义

 //常规函数
 function f(name,age) {
     console.log(name);
     console.log(age);
 }
 f('dsx',18);
 //匿名函数，函数没有名字，无法调用时找到，将整个函数当作一个参数传递
 var func = function () {  //将匿名函数赋值给一个变量
     alert('这是一个匿名函数')
 };
 func()
 //自执行函数
 (function () {
     console.log('自执行函数')
 })();

 //函数作用域
 var name = 'nhy';
 function f() {
     var name = 'dsx';
     console.log('in-->'+name);  //dsx
 }console.log('out-->'+name);    //nhy
 f();

六、面向对象

 //面向对象
 function f(name) {
     this.name = name;    //this相当于Python中的self，代指本类
     this.say = function () {
         console.log('say-->'+this.name)
     }
 }
 var obj = new f('dsx');  //实例化
 console.log(obj.name);   //调用类里面的变量
 obj.say();