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