第1章 JavaScripts简介

1.1什么是JS？

1.     JS是web的编程语言，所有现代在html中都是用JS

2.     JS是一种轻量级的编程语言，是可插入HTML的编程代码

3.     JS插入HTML页面后，可由所有浏览器执行

1.2为什么要用JS？

1.     HTML定义了网页的内容

2.     CSS描述了网页的布局

3.     JS则是网页的行为，或者说与用户进行交互

第2章 JS如何引入及基本书写规范

2.1JS一般在head和body后面都可以写，但是建议写在body后面

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    Js文件体
<script>
    alert('弹出警告')
</script>
</body>
</html>

2.2JS的注释方式：

<script>

    //alert('弹出警告')
    /**
     * 注视内容
     */
</script>

2.3如何引入第三方JS文件？

<script src="js/test.js"></script>

第3章 JS语法

3.1变量声明

<script>

    varnum=123;
    console.log(num,typeof (num));
    var s='jiang';
    console.log(s,typeof s);
    var b=true;
    console.log(b,typeof b);
</script>

3.2JS的类型转换

<script>

    console.log('10'==10); //值比较
    console.log('10'===10); //值与类型的比较
    var res='100' -5;
    console.log(res);
</script>

3.3数字转换为字符串

<script>

    var res =111 +''; //数字转换为字符串
    res=111..toString()
    console.log(typeof res)
</script>

3.4字符串转换为数字：

<script>

    var res='111';
    res='111' - 0;
    console.log(typeof res)
</script>

3.5parse方法

<script>

    res=parseFloat('3.1.3ab')
    console.log(res)
    res=parseInt('3.2.2')
    console.log(res)
</script>

第4章 JS类型的使用

4.1如何表示多个数据的值以及数组的增删改查操作

<script>

    var arr=[1,2,3];
    console.log(arr)
    console.log(arr[0]);
    delete arr[0]; //删除
    console.log(arr)
    arr[0]=7; //修改
    console.log(arr)
    arr.unshift('111') //头增
    console.log(arr)
    arr.shift('111') //头删
    console.log(arr)
    arr.push('111') //末尾增
    console.log(arr)
    arr.pop('234') //末尾删
    console.log(arr)
</script>

4.2splice方法：

<script>

    var arr=[1,2,3];
    console.log(arr)
    //splice  从什么索引开始，操作多少位，操作成什么
    arr.splice(0,1,8)
    console.log(arr)

    arr.splice(0,2) //如果第三个参数省略，表示为删除

    console.log(arr)
</script>

4.3slice方法：

<script>

    var arr=[1,2,3];
    console.log(arr)

//slice（n，m）从索引n开始到m之前

    newarr=arr.slice(0,2);
    console.log(newarr)
</script>

4.4组合字符串以及字符串的逆运算

<script>

    var arr=[1,2,3];
    console.log(arr)
    var str=arr.join('@')
    console.log(str, typeof str)
    var r=str.split('@')
    console.log(r)
</script>

4.5JS中没有字典，但是可以用对象来完全取代字典：

<script>

    var dic ={
        name:'jiang',
        age:'20',
    }
    console.log(dic.name)
//字典的增删改查
    dic.sex='nihao';
    console.log(dic)
    dic.age='77'
    console.log(dic)
    delete dic.age
    console.log(dic)
</script>

第5章 JS的函数

5.1函数的定义：

正常定义方式

    f1()

匿名函数的定义方式

    f2()

立即调用函数的方式

5.2函数的返回值：JS函数有且只有一个返回值

1.     没有明确返回值将返回undefined

2.     空返回将返回undefined

3.     return

4.     正常返回一个值

5.     如果返回多个值，取最后一个值

6.     如果返回多个值，需要借助字典或者数组

<script>

    function f1() {
//       console.log('函数1')
        return [10,20];
    }
    var res=f1()
    console.log(res)
</script>

5.3函数的参数

1.     形参与实参个数不需要统一，但一定按照位置传参

2.     形参不足就会显示形参违背赋值，实参多传就会被丢弃

<script>

    function f1(a,b,c=4,d=2) {
        console.log(a,b,c,d)
    }
    f1(1,2)
</script>

3.     …args为不定长形参

<script>

    function f1(a,...b) {
        console.log(a,b)
    }
    f1(1,2,3,4)
</script>

5.4常见模块和常用方法：

日期类Date

<script>

    var d=new Date()
    console.log(d.getDate())//从date对象中返回一个月中的某一天
    console.log(d.getFullYear())//从date对象中以四位数字返回年份
    console.log(d.getMonth())//从date对象返回月份
    console.log(d.getDate())//从date对象返回一个月中的某一天
    console.log(d.getDay())//从date对象中返回一周中的某一天
    console.log(d.getHours())/返回date对象的小时
    console.log(d.getMinutes())//分钟
    console.log(d.getSeconds())//秒数
</script>

Json的序列化和反序列化

<script>

    var str1='{"name":"jiang","age":20}';
    var str2={
"name":"jiang","age":20}
    console.log(str1,str2)
    var obj=JSON.parse(str1)//序列化
    console.log(obj)
    var str=JSON.stringify(obj)//反序列化
    console.log(str)
</script>

url转义

decodeURI()     解码URI

decodeURIComponent()  解码URI中的组件部分
encodeURI()     编码URI
encodeURIComponent()  编码URI中的组件部分
escape()        对字符串进行转义
unescape()      对字符串进行解码

第6章 JS页面交互

6.1通过JS选择器获取页面标签对象

<body>

    <div class="test">hello</div>
</body>
<script>
    var res=document.querySelector('body .test');
    var box=document.querySelectorAll('.test');
    console.log(res)
    console.log(box)
</script>

6.2为该目标标签对象绑定交互的方式

<body>

    <div class="test">hello</div>
    <div class="test">hello</div>
</body>
<script>
    var res=document.querySelector('body .test');
    var box=document.querySelectorAll('.test');
    console.log(res)
    console.log(box)
    res.onclick=function () {
        console.log('test被点击')
    }
    box[1].onmouseover=function () {
        console.log('box被悬浮')
    }
</script>

6.3在事件内部完成具体交互的业务逻辑

    <style>

        .test{
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="test">hello</div>
    <div class="test">hello</div>
</body>
<script>
    var res=document.querySelector('body .test');
    var box=document.querySelectorAll('.test');
    console.log(res)
    console.log(box)
    res.onclick=function () {
        console.log('test被点击',this)
        //获取内容
        var msg=this.innerText;
        //修改内容
        console.log(msg)
        this.innerHTML="<p>你好</p>"
        //获取样式
        var fontSize=getComputedStyle(this,null),fontSize;
        console.log(fontSize);
        //设置样式
        this.style.backgroundColor="red"
        //获取类名
        var className=this.className;
        console.log(className)
        //设置类名
        this.className=+"big";
    }
    box[1].onmouseover=function () {
        console.log('box被悬浮')
    }
</script>

第7章 JS流程控制

7.1If判断

<body>

    <input class="inp" type="text">
    <button class="btn">判断字符串是否为数字</button>
</body>
<script>
    varinp=document.querySelector('.inp')
    varbtn=document.querySelector('.btn')
    btn.onclick=function () {
        v=inp.value;
        num=+v;
        if (!isNaN(num)) {
            alert('是数字')
        } else{
            alert('不是数字')
        }
        inp.value=""
    }
</script>

7.2while循环：不知道循环次数的情况

<script>

    num=0
    while(num < 5){
        console.log("nihao");
        num=num+1;
    }
</script>

7.3for 循环：明确知道循环的次数

<script>

    for(vari=0; i < 5;i=i+1){
        console.log(i);
    }
</script>

7.4do while循环：在条件判断之前就需要执行一次循环体

<script>

    count=0
    do{
        console.log(count);
        count=count+1;
    }while (count < 5)
</script>