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变量
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();
