html基础：js

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 = '';

// 字符串转

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>

巴特西

html基础：js

最新文章

热门文章