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

版权声明:本文为gtea原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/gtea/p/12715718.html