【JavaScript学习】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();