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