html基础：js

Posted 2020-11-21 study!!!

js是一种脚本语言。在html中起到操控行为的作用。在html中，html代码如果是一个人的话，那么js就是这个人的行为

js在html的head中被引用，也可以在body中被引用。引用方式用<script></script>标签：<script src="public.js" type="text/javascript"></script>

放在head和body中的区别：因为h‘tml代码在解析时，是按顺序从上倒下运行的。如果放在head中，就会先执行js，js执行忘了才会继续body中的html，显示在页面。所以这种情况下，我们打开页面会先看见长时间的空白。因为正在加载js.用户体验不好。。而如果放在body中。在执行时，先执行body中的html代码，将页面先呈现在用户面前， 最后执行到js时，js可以在后台慢慢加载。用户体验比较好

一、字符串操作

//定义字符串 
var str = ‘你开心就好！‘; 
var name = ‘aaaaaa‘; 
// 字符串的拼接 
var name_str = name+str;  
//字符串操作 
str = ‘aaaaajijiji‘ 
str.charAt(0) 根据角标获取字符串中的某一个字符  char字符 
str.substring(1,3) 根据角标获取 字符串子序列 大于等于x  小于y 
str.length 获取字符串长度 
str.concat(‘第一个字符串‘)  拼接字符串 
str.indexOf(‘大师‘) 获取子序列的位置 
str.slice(0,1)  切片 start end 
str.toLowerCase()  变更为小写 
str.toUpperCase() 变更大写 
str.split(‘师‘,1) 切片 返回数组 参数2 为取分割后数组的前x个元素
 
数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）
 
var age = 18;
var score = 89.22; 
number = ‘18‘; 
// 字符串转
var n = parseInt(number); //如果number带小数点，则会直接去掉小数点后内容
// 转换成小数 
f =parseFloat(number)
布尔类型（true 或 false）
var t = true; var f = false;//python中都是大写的，js中都是小写的

二、数组

// 第一种创建方式 var list = new Array(); 
list[0] = ‘第一个元素‘; 
list[1] = ‘第二个元素‘; 
 
// 第二种创建方式 
var list2 = new Array(‘第一个元素‘,‘第二个元素‘); 
 
// 第三种创建方式 
var list3 = [‘第一个元素‘,‘第二个元素‘]; 
 
数组操作 
 
list3.length 数组的长度 
 
list3.push(‘dsx‘) 尾部追加参数 
 
list3.shift() 头部获取一个元素 并删除该元素 
 
list3.pop() 尾部获取一个元素 并删除该元素 
 
list3.unshift(‘dsx‘) 头部插入一个数据 
 
list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素 
 
list3.splice(n,0,val) 指定位置插入元素 
 
list3.splice(n,1,val) 指定位置替换元素 
 
list3.splice(n,1) 指定位置删除元素 
 
list3.slice(1,2) 切片;
 
list3.reverse() 反转 
 
list3.join(‘-‘) 将数组根据分割符拼接成字符串 
 
list3.concat([‘abc‘]) 数组与数组拼接 
 
list3.sort() 排序

三、对象

类似python中的字典

var dict = {name:‘dsx‘,age:18,sex:‘男‘ };
var age = dict.age; //通过key，获取到value
var name = dict[‘name‘];
delete dict[‘name‘] 删除
delete dict.age 删除

四、循环

//        if(1==2){
//            console.log(1111111)
//        }
//        else if(2==2){
//            console.log(2222)
//        }
//        else{
//            console.log(‘最后了‘)
//        }

//javascript当中如果是两个等号，代表不去校验数据类型是否相同.三个等号会判断数据类型
//        if (‘1‘==1){
//            console.log(11111)
//        }
// 以上代码会打印出11111

        if(‘1‘===1){
            console.log(1111111)
        }
        else{
            console.log(222222)
        }
//        以上代码会打印出222


//switch
        switch(2){
            case 1:
                console.log(1111);//多行代码的情况，必须加上分号
                break;//每个分支都必须加break
            case 2:
                console.log(22222);
                break;
            default:
                console.log(33333)

        }

//        for循环--字符串
        var name=‘dsx nhy‘;
        for(var a in name){//循环的是角标，0，1，2，3.。。
            console.log(name[a])
        }
// 数组，循环的还是角标
        var list=[‘大师兄‘,‘怒牛‘,‘andas‘];
        for(var i in list){
            console.log(list[i])
        }
//字典，循环的是key
        var dict={‘宝马‘:‘BMW‘,‘奔驰‘:‘bc‘};
        for (var d in dict){
            console.log(d);
            console.log(dict[d])
        }

//        下面这种方法，不支持字典的循环
        var list=[‘大师兄‘,‘怒牛‘,‘andas‘];
        for(var i=1;i<=list.length;i++){
            console.log(i);
            console.log(list[i])
        }

//        while循环
        while(1==1){//死循环
            console.log(111111)
        }

五、函数

//        常规函数
        function f(name,age){//可传参，也可不传
            console.log(name);
            console.log(age);

        }
        f(‘dsx‘,19)//        自执行函数
        (function (name) {
            console.log(‘自执行函数‘)

        })(‘实参name‘)
        //相当于先（function()），function函数外层括号成一个变量f，然后变量f后加上括号，可以自动执行f().等同下面代码
//        f=(function(){console.log(‘fdfd‘)});
//        f()

六、对象

通过new关键字创建对象

在js中，方法和类的区别在于是否有this.如果方法用到了js，将自动解析为类

<script>
    function f(name) {
        this.name=name;//函数中写了this,js就自动将函数当作一个类。this等同python中的self
        this.say=function(){//匿名函数
            console.log(‘say‘+this.name)
        }

    }
    var obj=new f(‘dfdf‘);//通过new创建对象
    console.log(obj.name);
    obj.say()
</script>