JS的基本使用

1.输入输出语句

在JS中我们首先应该在body标签中输入<script></script>

a.输出语句

  用于在浏览器中弹出警告框

    alert('未满18禁止访问')

   用于在控制台输出信息

    console.log("111");

 用于在网页中输出内容

  document.write("三月请对我好一点")

   

b.输入语句

 在网页中弹出一个输入框

   prompt("请输入姓名")

   

   在网页中弹出一个确认框

     confirm("你真的满十八了吗？")

2.JS代码的引入方式

  <!-- js行内写法 -->

    <!-- onclick点击事件 -->

    <button onclick="window.alert('别点了,再点人就傻了')">请点我</button>



    <!-- 嵌入式 -->

    <script>window.alert("内部样式")</script>



    <!-- 外链式 -->

    <script src="./3-外链式.js"></script>

3.运算符

a.算术运算符

 let a=10;

        let b=20;


        //加法运算

        console.log(a+b);//30


        //减法运算

        let c=b-a;

        console.log(c);//10


        //乘法运算

        console.log(c*b);//200


        //除法运算

        b=b/a

        console.log(b);//2


        //取模运算

        console.log(26/5);//1(取余数)


        //幂运算

        console.log(2**10);//1024

        //2*2*2*2*2*2*2*2*2*2


        //自增运算

        m =5;

        n =++m;

        console.log(m);//6

        console.log(n);//6



        m= 5;

        n=m++;

        console.log(m);//6

        console.log(n);//5




        //自减运算

        q=2;

        p=--q;

        console.log(q);//1

        console.log(p);//1



        q=2;

        p=q--;

        console.log(q);//1

        console.log(p);//2



       

b.字符串运算符和隐式转换

     隐式转换，当两个数据类型不同时；JS会按照既定的规则进行转化

     字符串运算符：加号遇上字符串做拼接使用

    <script>

        console.log(1+1);//2

        console.log(1+null);//2

        console.log(1+true);//2

        console.log(1+false);//1



        console.log("12"-0);//12

        console.log(undefined*null);//NaN

        console.log(Infinity++);//Infinity



        console.log(1+"1");//11

        console.log(1+"null")//1null

        console.log(null+"undefined");//nullundefined

c.赋值运算符

 let a=10;

        let b=20;

        let c=a+b;



        //加等于/加并赋值 +=

        a +=b;//a=a+b  30

        console.log(a);//30

        console.log(b);//20



        a-=b;

        console.log(a);//a=a-b; 30-20=10

        console.log(b);//20



        a*=b;//200

        a/=b;//10

        a%=b;//10

        a**=b;//10的20次方

d.比较运算符

  //!= 不等于

        console.log(4!=5);//true

        console.log(4!=4);//false



        //==等于

        console.log(4=="4");//true



        //===全等于

        console.log(4==="4");//false(必须百分之百相等)

e.逻辑运算符

   &&  逻辑与运算符  一假则假

   ||    逻辑或运算符  一真则真

 <script>
        console.log(true&&true);//true
        console.log(false&&true);//false
        console.log(true&&false);//false
        console.log(false&&false);//false

        console.log(true||true);//true
        console.log(true||false);//true
        console.log(false||true);//true
        console.log(false||false);//false

 </script>

f.三元表达式

格式：条件表达式？表达式1:表达式2

        如果条件表达式的值为true，则返回表达式1的执行结果

        如果条件表达式的值为false，则返回表达式2的执行结果

<script>
var age=prompt("请输入你的年龄")
         console.log(age);
         var res=age>=18 ? "你已经是一个优秀的成年人了":"你还太小"
         console.log(res);
</script>

g.运算符优先级

小括号>一元运算符>比较运算符>逻辑运算符(逻辑与>逻辑或)>赋值运算符

   <script>

        let a=3>5&&2<7&&3==4
        console.log(a);//false

        let b=3>5||2>7&&3==="3"
        console.log(b);//false

        let c=2=="2"
        console.log(c);//true
        
        let d=!c&&(b||a)
        console.log(d);//false

    </script>

4.关于变量

a.变量的声明与赋值

 //[先声明后赋值]


        //声明变量

        var boy;

        var girl;


        console.log(boy);//undeginded(未定义的)

        console.log(girl);


        //为变量赋值

        boy="jack";

        girl="lily"



        console.log(boy);//jack

        console.log(girl);//lily



        //[声明的同时并赋值]

        var myage =18;

        var myheight=188;



        console.log(myage);

        console.log(myheight);

b.let声明变量

 let是ES6新引入的关键字，用来代替var关键字

（ES6指2015年推出的ECMAScript语法）

<script>

        var boyfriend="魏大勋";

        var boyfriend="魏晨";

        var boyfriend="白敬亭";

        console.log(boyfriend);




        //let不允许在一个代码块里有变量和他取同一个名字，但是允许修改同一个变量值

        let girlfriend="蔡徐坤";



        girlfriend="马嘉祺";

        console.log(girlfriend);



        {let girlfriend="xxx"}


</script>

c.const声明变量

 Tips： let和var声明的变量可以改变

            const声明的变量不可以改变，即常量

            const必须要在声明的时候就赋值

        //错误写法

        // const a=3;

        // a=5;

        // console.log(a);


        //正确写法

        const a=4

        console.log(a);



       

d.let,var,const声明变量的区别

        (1)初始化要求不同

        使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

        (2)重复声明不同

        使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，而使用const声明的变量,在整个运行过程中不能修改初值

        (3)对块级作用域的支持不同。

        (使用一对花括号括起来的代码称为一个代码块所谓块级作用域，就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。

        使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。

5.关于数据类型

a.数据类型的分类

        简单数据类型存储在栈内存中

        复杂数据类型的内存存储在堆内存中，地址存储在栈内存中

b.基本数据类型

 //boolean-布尔型

        let flag1=true;

        let flag2=false;



        //True,Flase,TRUE,FALSE这些写法都是错的



        console.log(flag1);



        let flag3="true"

        console.log(flag3);



        //number-数字型

        let age=18;

        let date="0306";

        console.log(age);

        console.log(date);



        console.log(Number.MAX_VALUE);//最大值

        console.log(Number.MAX_VALUE*2);//infinity无穷大



        var a=3-"b";

        console.log(a);//NaN(Not a Number) NaN也属于数字类型（非数字）



        console.log(isNaN(a));//ture

        console.log(isNaN(111));//false

        console.log(isNaN("abc"));//ture

        console.log(isNaN(Infinity));//false

        console.log(isNaN("false"));//ture



        //string-字符串

        let demo1="字符串";

        let demo2='字符串';

        let demo3=`字符串`;

        let demo4="老师说'今天不上晚自习'"



        console.log("111\'222");




        //undefinded-未定义型

        //表示声明的变量还未赋值

        let grate;

        console.log(grate);//undefinded




        //null-空型

        var a=null;

        console.log(a);//null

c.数据类型检测

isNaN 检验是否是一个非数字

格式：typeof（）

Tips：布尔类型ture,会在运算中转化为数字1

           布尔类型false。会在运算中转化为数字0

           加号遇上字符串，做拼接使用

        console.log(typeof("123"));//string

        console.log(typeof(false));//boolean

        console.log(typeof(NaN));//Number

        console.log(typeof(Infinity));//Number

        console.log(typeof("true"));//string

        console.log(typeof(null));//object

        console.log(typeof(undefined));//undefined



        console.log(typeof('aaa'*2));//Number

        console.log("aaa"*2);//NaN



        console.log(2-"true");//NaN

        console.log(typeof(2-"true"));//Number


        console.log(2-true);//1

        console.log(typeof(2-true));//Number


        console.log(2+"true");//2true

        console.log(typeof(2+"true"));//string



        console.log(2+true);//3

        console.log(typeof(2+true));//Number

     

d.数据类型的转化

   1. 格式： Boolean()

    Tips：将数据类型转换为布尔类型

               字符串类型和数字类型都会转化为布尔类型的true

               空字符串转为布尔类型的false，空字符串转为ture

               数字0转为布尔类型的false

    2. 将数据转化为字符串类型

     Tips：使用String()或toString进行转换

    3. 将数据转化为数字型

      Tips：Number()用于将数据转化为数字型数据
 

        //Boolean()


        var  a=Boolean("a");

        console.log(a);//true


        console.log(Boolean(123));//true


        console.log(Boolean(""));//false


        console.log(Boolean(" "));//true


        console.log(Boolean(0));//false


        console.log(Boolean(NaN));//false


        console.log(Boolean(undefined));//false


        console.log(Boolean(null));//false



        //将数据转化为字符串类型

        //使用String()或toString进行转换

        let num=123;

        console.log(num);//数字类型的1

        let num2=String(num);

        console.log(num2);//字符串类型的1




        //将数据转化为数字型

        //Number()用于将数据转化为数字型数据

        console.log(Number(123));//123

        console.log(Number("123"));//数字类型123

        console.log(Number(""));//0

        console.log(Number(" "));//0

        console.log(Number(null));//0

        console.log(Number(undefined));//NaN

        console.log(Number(false));//0

        console.log(Number(true));//1

        console.log(Number("true"));//NaN

        console.log(Number("123.1"));//123.1

        console.log(Number("123.a"));//123.a

6.流程控制

一.选择结构

a.if语句(单分支)

   格式：if(条件表达式){代码段}

<script>
let age=prompt("输入年龄")
        if (age>=18) {
            document.write("欢迎进入")
        }
</script>

b.if...else语句(双分支)

格式：if(条件表达式){代码段} else {代码段2}

<script>
 let age=prompt("输入年龄")
        if (age>=18) {
            document.write("欢迎进入")
        }else{
            document.write("不可进入")
        }
</script>

c.if..else if..else语句(多分支)

格式：if (条件表达式1) {

           结果1

        }else if (条件表达式2) {

            结果2

        }else if (条件表达式3) {

            结果3

        }else{

            除去123之后的结果

        }

 <script>
 let num=prompt("输入分数（0~100）不可乱写")
        if (num===100) {
            document.write("奖学金")
        }else if (num>=80&&num<=99) {
            document.write("成绩优秀")
        }else if (num>=60&&num<=80) {
            document.write("成绩合格")
        }else if (num>=40&&num<=60) {
            document.write("有补考机会")
        }else if (num>=20&&num<=40) {
            document.write("挂科")
        }else(
            document.write("留级")
        )
</script>

d.switch语句

   case--情况;  break--跳出语句
       switch (表达式) {
            case 值1:
            代码段
            break;

            case 值2:
            代码段
            break;
       

            case 值3:
            代码段
            break;

            ...
       
       
        default:
            代码段n
       }

二.循环结构

a.for语句

语法：

for(初始化变量;条件表达式;操作表达式){

            循环体

        }

计算0~100所有的偶数和
        初始化一个结果变量
        var a=0;
        for(var i=1;i<=100;i++){
            if (i%2==0) {
                a=a+i;
            }
        }
        console.log(a);

b.while语句

语法：

while(条件表达式){循环体}

输入1-100的整数
        初始化变量
        var i=1;
        while (i<=100) {
            console.log(i);
            i++;
        }

c.do...while语句

语法：

do{循环体}while(表达式)

输入1-100的整数   
let a=1;
        do {
            console.log(a);
            a++;
        } while (a<=100);

区分while和do...while:

while语句先判断条件表达式的值，在根据条件表达式的值决定是否执行循环体 do...while语句会无条件执行1次循环体，然后再判断条件表达式的值再根据判断的值决定是否继续执行

三.跳转语句

a.break和continue语句

1.break语句
        for(var i=1; i<=5; i++){
            
            if (i==3) {
                console.log("吃到个毒的苹果");
                break;//跳出了整个循环
            }

            console.log("第"+i+"个苹果");
        }
2.continue语句
        for(var n=1; n<=5; n++){

            if (n==3) {
                console.log("有虫子的苹果");
                continue;
            }

            console.log("第"+n+"个苹果");
        }

二者的区别：

break语句会立即跳出整个循环，也就是循环结束

continue语句用来立即跳出本次循环，也就是跳过continue语句后面的代码继续下一次循环

7.数组

a.初识数组

定义：

数组是一种复杂数据类型用于将一组数组集合在一起通过一个变量就可以访问一组数据

数组之间用逗号隔开

数组中的“索引/下标”，是从0开始计算的

        声明数组
        let class02 = ['tom','lily','tony']
        打印数组
        console.log(class02);
        打印数组长度
        console.log(class02.length);//3
        打印数组中下标为X的元素
        console.log(class02[0]);//'tom'
        console.log(class02[1]);//'lily'

        数组可以是任意类型的元素，例如字符串，数组，数组
        let arr1=[1,2,3,4.5,6]
        let arr2=['string',NaN,null,undefined,arr1]
        console.log(arr2);

b.创建数组

1.以new Array()方式创建数组
         var arr=new Array();
         console.log(arr);//Array(0)
         var arr=new Array(5)
         console.log(arr);//empty*5
         arr=new Array('tom','tony','bob')
         console.log(arr);//['tom','tony','bob']

2.使用数组字面量创建数组
        var mood=['sad',,,,,,,'happy']
        console.log(mood.length);//8
        console.log(mood[7]);//'happy'
        console.log(mood[6]);//undefined
        console.log(mood[0]);//'sad

c.数组的基本操作

1.获取元素长度
       数组名.length

2.修改数组长度
       数组名.length = number
       var arr=[0,1,2,3]
       arr.length=5
       console.log(arr);//[0，1，2，3，empty]

3.添加数组元素
       arr[4]=3
       console.log(arr);//[0,1,2,empty,3]

4.修改数组元素
       arr[0]=1
       console.log(arr);

5.删除数组元素
       delete 数组名[index] 删除数组中某个元素值
       delete arr[1];
       console.log(arr);//[1,empty,2,empty,3]

6.遍历数组
        需求:得到数组的累加和
        let arr1=[10,20,30,40,50,60]
        var sum=0;
        for(var i=0;i<arr1.length;i++){
            sum+=arr[i]
            //arr[0] 10 sum+10=0+10=10
            //arr[1] 20
            //arr[2] 30
            //arr[3] 40
            //arr[4] 50
            //arr[5] 60
            //arr[6]
        }
        console.log(sum);//210

7.新增数组元素
     push在数组后添加元素
        let arr3=[1,2,3,4]
        arr3.push(5,6)
        console.log(arr3);//[1,2,3,4,5,6]
     unshift在数组前添加元素
        arr3.unshift(-2,-1,0)
        console.log(arr3);

d.二维数组

1.二维数组指的是数组元素的值是一个一维数组
        var arr=[80,100,75]
        var arr1=[
            [80,100,75],
            [90,67,66],
            [99,87,85],
        ]
2.访问二维数组
        console.log(arr1[0]);//[80,100,75]
        console.log(arr1[0][0]);//80

3. 遍历二维数组
        遍历数组arr1
        for(i=0;i<arr1.length;i++){
            //遍历数组arr1的元素
            for(j=0;j<arr1[i].length;j++){
                console.log(arr1[i][j]);
            }
        }

8.函数

a.初识函数

1.[函数定义]
        函数用于封装完成一段特定功能的代码
        相当于将一条或多条语句组成的代码块包裹起来
        用户在使用时只需要关心参数和返回值，就能完成特定的功能，而不用了解具体的实现

2.[内置函数]
        console.log(isNaN("number"));//true
        console.log(parseInt('15.99'));//15

3.[自定义函数]
        提高代码的复用性，降低程序维护的难度

4.[函数格式]
        function name(params) {
        }
        function指这是一个函数语句
        name是函数名
        params是函数参数
        ()内放函数的具体功能

5.[函数的返回值]
        函数的返回值是指函数在调用后获得的数据
        在定义函数时，可以为函数指定一个返回值，函数的返回值可以是任意类型的数据
        在JS中使用return语句的到返回值并退出函数
        [return 表达式]

b.函数内外变量的作用

 全局变量：在函数体外声明的变量或者在函数体内省略var关键字声明的变量(能访问到但没赋值的话会是undefined)，全局变量在函数体内可以被访问，全局变量在函数体外也可以被访问。

局部变量：在函数体内利用了var关键字声明的变量，可以在函数内部被访问，不可以在函数外访问。

块级变量：在es6标准中，新增的let关键字声明的变量为块级变量，一个花括号{}为一个块级，块级变量sex可以在{}内部被访问，不可以在{}外部被访问。

[js三种作用域]

        全局作用域:被全局变量所拥有:在{}外声明的变量

        局部作用域:被局部变量所拥有:在函数内定义的变量

        块级作用域:被块级变量所拥有:在分支语句或者循环大括号中定义的变量 

c.函数进阶

[箭头函数]【esc新语法】
        //删除function关键字
        //在函数和函数体中间放上“=>”
        var fn5=(num1,num2)=>{
            console.log(num1+num2);
        }
        fn5(1,2)

        //当函数只有一句话时可以省略大括号
        var fn6=(num1,num2)=> console.log(num1+num2);
        fn6(1,2)
        //当函数只有一句代码，并且函数的执行结果就是函数的返回值
        //可以省略函数的大括号和return关键字
        var fn7= (num1,num2)=> num1+num2;
        console.log(fn7(1,2));
        //当参数只有1个时，可以省略函数外部的小括号
        var fn8=num1=>num1+num1
        console.log(fn8(9));

d.定时器函数

 setInterval()
        Interval:间隔，间隙
        "时间间隔"一到，代码就会在多少毫秒执行一次

        setInterval(function(){},time)

        setInterval(function(){
            console.log("该上课了");
        },5000)


        setTimeout()
        用来指某个函数或某段代码在多少毫秒以后执行
        setTimeout(function(){
            console.log("该上票了");
        },3000)


        定时器函数属于异步代码
        setTimeout指定的代码，必须等同步代码执行完毕后在执行
        console.log(1);
        setTimeout(function(){
            console.log(2);
        },0)
        console.log(3);
        结果：132

e.闭包函数

闭包[close]：闭包是一种代码形式，内部函数访问外包函数的局部变量

举例：js函数A中有一个函数B，函数B访问了函数A里面定义的局部变量，此时就产生了闭包

          变量所在函数就是闭包函数，在这里A就是闭包函数

闭包的作用：解决变量污染问题，让变量被函数保护起来

f.递归函数

递归函数是一个函数简介或直接地调用自身
        function func(){
           console.log(1);
           func()
        }

        需求：设置一个函数叫做getsum()
        如果传入进去的是n
        return sum = n+(n-1)+(n-2)+..+1

 递归写法
        function getsum3(n){
            //当n=1时
            if(n==1){
                return 1
            }
            //当前数组+比自己小1的数字
            return n+getsum3(n-1)
        }
        // n=5;
        // return 5+getsum3(4)
        // return 5+4+getsum3(3)
        // return 5+4+3+getsum3(2)
        // return 5+4+3+2+getsum3(1)
        // return 5+4+3+2+1

console.log(getsum3(5));//15

9.对象

a.介绍对象

1.对象是什么：对象是一种复杂数据类型
        (复杂数据类型的内容存储在堆内存中，地址存储在栈内存)
        
2.对象作用：以键值对的形式存储多个数据

3.对象
        let Obj={
            name:"张三",
            age:30,
            sex:"男",
            gfs:["小花","小美","小爱"],
            sayhi:function(){
                console.log("111");
            }
        }
        console.log(Obj);//{name:'张三',age:30,sex:'男'}

3.1 对象查询
        console.log(Obj.name);//'张三'
        console.log(Obj.age);//30
        console.log(Obj.sex);//'男'
        console.log(Obj.gfs);//["小花","小美","小爱"]
        console.log(Obj.sayhi);//打印了这个函数
        console.log(Obj.sayhi());//执行函数

3.2 对象新增
        Obj.bf="李四"
        console.log(Obj);

3.3 对象修改
        Obj.bf="王五"
        console.log(Obj)
        对于对像的属性，如果有这个属性是修改属性值，没有则是新增

3.4 对象删除
        delete Obj.age
        console.log(Obj);

3.5 对象遍历
        //遍历数组：for (let i=0;i<arr.length;i++){}
        //遍历对象：for-in循环 for(let key in 对象名){对象名[key]}
        let score={
            math:99,
            history:80,
            english:70,
        }
        for(let key in score){
            console.log(key);//打印属性名
            console.log(score[key]);//打印属性值
        }

b.Math对象

1.内置对象：由JS作者提前编写好的对象，里面存储了一些属性方法，直接使用即可

2：Math数学对象，Date日期对象

a.圆周率:Matn.PI
        console.log(Math.PI);
        const c=2*Math.PI*r
        console.log(C);

b.绝对值：Math.abs
        console.log(Math.abs(-3.5));

c.找最大值/最小值：Math.max()/Math.min()
        console.log(Math.max(1,2,3,4,5));//5
        console.log(Math.min(1,2,3,4,5));//1

d.幂运算Math.pow(x,y)x的y次方
        console.log(Math.pow(2,10));//1024

e.四舍五入：Math.round()
        console.log(Math.round(3.5));//4
        console.log(Math.round(3.2));//3
        console.log(Math.round(-3.5));//-3
        console.log(Math.round(-3.6));//-4

f.向上取整:Math.cell()
        console.log(Math.ceil(3.1));//4
        console.log(Math.ceil(-3.1));//-3

g.向下取整:Math.floor()
        console.log(Math.floor(-1.8));//-2

h.生成0=1之间的随机小数:Math.random
        console.log(Math.random());
  生成0-100之间随机整数
        console.log(Math.round(100*Math.random()));

c.Date对象

时间戳： 从1970年1月1日零时零分零秒到现在的毫秒数
        以下三种写法都会得到时间戳
        console.log(Date.now());
        console.log(+new Date);
        console.log(new Date().getTime());

        console.log(new Date().getFullYear());//获取年份
        console.log(new Date().getMonth());//获取月份；范围0-11
        console.log(new Date().getDate());//范围1-31
        console.log(new Date().getDay());//范围0-6，星期天是0
        console.log(new Date().getHours());
        console.log(new Date().getMinutes());
        new Date().getSeconds()//获取秒

        获取内置date对象
        var date =new Date();
        设置年份，月份，日期
        date.setFullYear(2005);
        date.setMonth(11);
        date.setDate(9);

d.Array对象

var course=["web","java"]

1.push()在数组末尾添加一个元素
        course.push("javascript")
        console.log(course);//['web','java','JavaScript']

2.unshift()在数组开头添加一个元素
        course.unshift("计算机基础")
        console.log(course);//['计算机基础'，'web'，'java'，'JavaScript']

3.pop() 删除数组中最后一个元素
        course.pop()
        console.log(course);//['计算机基础'，'web'，'java']

4.shift()删除数组第一个元素
        course.shift()
        console.log(course);//['web','java']

5.splice(start,deleteCount)
        var arr=[1,2,3,4,5,6,7]
        arr.splice(3,2)//从下标为3(4)的数开始删除后面两个数字删掉了4，5
        console.log(arr);//[1,2,3,6,7]

6.splice(start,deleteCount,item1,item2,item3)
        arr.splice(4,0,666,777,888)//从为第四个元素(6)的数字开始，往后添加一些元素
        console.log(arr);//[1,2,3,6,666,777,888,7]

7.reverse();颠倒数组中元素的索引
        var arr1=[1,2,3,4,5,6,7]
        arr1.reverse()
        console.log(arr1);

8.sort
        升序排序
        var arr2=[19,45,46,85,73]
        arr2.sort(function(a,b){
            return a-b
        })
        console.log(arr2);
        降序排序
        var arr3=[19,45,46,85,73]
        arr3.sort(function(a,b){
            return b-a
        })
        console.log(arr3);

9.获取数组元素索引的方法
        indexOf(element):返回指定元素在数组中第一次出现的索引，不存在则返回-1
        lastIndexOf(element):返回指定元素在数组中最后一次出现的索引，不存在则返回-1
        var color=["green","pink","red","pink","yellow","red"]
        console.log(color.indexOf("red"));//2
        console.log(color.indexOf("white"));//-1
        console.log(color.lastIndexOf("red"));//5

10.将数组转化为字符串
        toString() 将数组转化为字符串用逗号分隔数组中每个元素
        join() 将数组中的所有元素连接成一个字符串，默认用逗号隔开，可指定分隔符
        console.log(color);
        console.log(color.toString());//green,pink,red,pink,yellow,red
        console.log(color.join());//green,pink,red,pink,yellow,red
        console.log(color.join(""));//greenpinkredpinkyellowred
        console.log(color.join("/"));//green/pink/red/pink/yellow/red

        //数组类型检测
        var obj={
            name:"张三"
        }
        console.log(Array.isArray(arr));//true
        console.log(Array.isArray(obj));//false

e.String对象

1.创建字符串对象
        var str=new String("apple")
        console.log(str);//[a,p,p,l,e]

2.访问字符串长度
        console.log(str.length);//5

3.根据索引返回字符串
        var str="helloworld"
        chatAt()
        console.log(str.charAt(7));//"r"

4.字符串截取
        slice(start)
        console.log(str.slice(5));//"world"
        slice(start,end) //从start的下标截取到end的下标(前一位不包括end的那一位)
        console.log(str.slice(1,4));//ell
        console.log(str);//截取后不会改变原数组，//helloworld

5.字符串连接
        var str1="hello";
        var str2="world";
        console.log(str1.concat(str2));//helloworld

6.大小写转换
        toUpperCase() 转化为大写
        toLowerCase() 转化为小写
        console.log(str1.toUpperCase());//HELLO
        console.log(str1.toLowerCase());//hello

7.替换
        replace(str1,str2) 将str2替换str1
        console.log(str);//helloworlld
        console.log(str.replace("world","JS"));//helloJS

8.字符串分隔(将字符串转化为数组)
        split(分隔符)
        console.log(str.split(""));//['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
        console.log(str.split());//['helloworld']
        console.log(str.split("o"));//['hell', 'w', 'rld']

10.DOM（上）

a.获取元素

 1.获取body元素
        var bodyELe=document.body;
        console.log(bodyELe);
 2.获取html元素
        var htmlEle=document.documentElement;
        console.log(htmlEle);
 3.获取或设置当前文档的标题
        console.log(document.title);//hello ,nihao ,hello
        console.log(typeof document.title);//string

        document.documentElement//获取文档的html元素
        document.body//获取文档中的body元素
        document.forms//获取文档中所有包含form元素的集合
        document.images//获取文档中包含的所有image元素的集合
        document.getElementById("id属性值")//根据id属性获取元素
        document.getElementsByTagName("标签名")//根据标签名获取元素

b.注册事件

1.元素对象.事件属性 = 事件处理函数
        element.onclick(单击事件)= function(){}

2.元素样式操作
        element.style,样式属性名 =“样式属性值
        backgroundColor 设置元素的背景颜色

3.根据css选择器获取元素
        document.querySelector("#id名")通过id选择器获取元素对象
        document.querySelector(".类名")通过class类选择器获取元素对象

4.onmouseover 鼠标移入事件
        star.onmouseover=function(){
            //display =“none" 元素被隐藏
            star.style.display="none"
        }
  onmouseout 鼠标移出事件
        star.onmouseout =function(){
            star.style.display ="block"
        }

5.给元素添加类名
        element.classlist.add("类名")
  给元素删除类名
        element.classslist.remove("类名")

11.DOM(下)