0003.JavaScript

一、JavaScript介绍

作用：如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为；

书写：JS代码可以直接写在script标签里面，或者写在其他的.js后缀文件中，并通过script标签引入。

要求：1. 一般把script标签写在head或者body里；2. 要注意的是是否需要加上window.onload；3. 如果没有特殊要求，一般script标签放在body结束之前。

1. 在body之前书写；2. 在head中书写；3. 在js文件中书写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的使用方式</title>
<!-- 2. 写在head标签里面,需要以window.onload引入-->
    <script>
        /*加载完当前页面的HTML元素后再加载这个方法里面的代码*/
        window.onload = function () {
            alert(456)
            console.log(456)
            console.log(456);
        }

    </script>
</head>
<body>
<!-- 1. 写在body标签里面 ！！！推荐使用！！！-->
<script>
    alert(123)
    console.log(123)
</script>
<!-- 3. 写在外部js文件里面，用script标签引入-->
<script src="js/demo_js.js"></script>
</body>
</html>

二、JS获取元素

意义：在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素。

JS获取独有标签：

document.title 获取标题

document.head 获取头部信息

document.body 获取body内容

其他标签的获取：

1. 通过id获取元素：document.getElementById("idname");

2. 通过class获取元素：document.getElemnetByClassName("classname");

3. 通过标签名获取元素：document.getElementByTagName("tagname");

4. 表单中的name：document.getElementsByName("name");

5. selector选择器（不兼容IE7及以下）：

①. document.querySelector(" "); 通过CSS选择器获取一个

②. documnet.querySelectorAll(" "); 通过CSS选择器获取所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="p1">山有木兮木有枝，心悦君兮君不知</p>
<p class="p2">人生若只如初见，何事秋风悲画扇</p>
<p>只愿君心似我心，定不负相思意。</p>
<p class="p2">入我相思门，知我相思苦。</p>
<p>玲珑骰子安红豆，入骨相思知不知。</p>
<p class="p2">愿得一心人，白头不相离。</p>
<p>玲珑骰子安红豆，入骨相思知不知。</p>
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" value="lili">
性别：<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="-1">保密

<ul>
    <li id="li1">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>


<script>
    /*通过id获取元素，只有id不需要加下标*/
    var p_id = document.getElementById("p1")  /*通过var定义一个变量接受获取到的元素*/
    console.log(p_id)
    p_id.innerText='十年生死两茫茫，不思量，自难忘'
    /*通过class获取元素*/
    var p_class=document.getElementsByClassName("p2")[2]
    console.log(p_class)
    //通过标签名获取元素
    var p_tag=document.getElementsByTagName("p")[4]
    console.log(p_tag)
    //通过name属性获取元素
    var ipt_name=document.getElementsByName('username')[0]
    console.log(ipt_name)
    //获取元素的值（ipt_name.value）
    var ipt_value=ipt_name.value
    console.log(ipt_value)
    /*通过css选择器获取元素（只能获取选择器的第一个元素，且只能获取第一个元素，加下标没有作用）*/
    var p_123=document.querySelector('.p2')
    console.log(p_123)
    //通过CSS选择器获取所有元素
    var p_234=document.querySelectorAll('.p2')
    console.log(p_234[0])


    /*了解即可*/
    var uli=document.getElementsByTagName('ul')
    // var li2=uli[0].getElementsByTagName('li')[0]
    // console.log(li2)
     // var li1=document.getElementById('li1')
    var li1=uli[0].getElementById('li1')
    console.log(li1)

</script>
</body>
</html>

三、JS基础事件

含义：所谓事件，是指Javascript捕获到用户的操作，并做出正确的响应

使用：在事件函数里，有一个关键字this，代表当前事件的这个元素

鼠标事件：

1. 左键单击 onclick

2. 左键双击 ondbclick

3. 鼠标移入 onmouseover/onmouseenter

4. 鼠标移出 onmouseout/onmouseleave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件</title>
</head>
<body>
<p id="p1">山有木兮木有枝，心悦君兮君不知</p>
<p class="p2">人生若只如初见，何事秋风悲画扇</p>
<p>只愿君心似我心，定不负相思意。</p>
</body>
<script>

    var p_id = document.getElementById('p1')
     <!--    鼠标点击事件-->
    p_id.onclick = function () {
        p_id.innerText = "玲珑骰子安红豆，入骨相思知不知"
    }
    /*鼠标双击事件*/
    p_id.ondblclick = function () {
        /*this代表事件发生的当前元素*/
        /*style.  修改单个css样式*/
        /*样式中存在用-连接的。例：background-color需要用中括号或者用驼峰命名法。改-为大写backgroundColor*/
        this.style.backgroundColor = "blue"
    }

    var p_class=document.getElementsByClassName('p2')[0]
    /*鼠标移入事件*/
    p_class.onmouseenter=function (){
        this.style["color"]="red"
        p_class.style["font-size"]="24px"
    }
    /*鼠标移出事件*/
    p_class.onmouseout=function (){
        console.log(555)
        //修改多个css样式 分号结束  属性跟属性值直接用冒号隔开
        p_class.style.cssText='color:blue;font-size:16px;'

    }
</script>
</html>

四、JS修改样式

解释：js可以修改规范和不规范的标签样式，也可以配合点击事件等一起使用

规范标签：

1. 规范标签属性：符号直接操作（可读可写）

2. 不规范（自定义）标签属性：

① 获取：.getAttribute()

② 设置：.setAttribute()

③ 移除：.removeAttribute()

注意项：

1. 所有的路径、颜色获取的结果不一定是你写的内容

2. 通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素

3. 自定义标签属性的操作方式，同样可以操作符合规范的标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS修改式样</title>
    <style>
        .p1{
            background-color: cornflowerblue;
            font-size: 24px;
        }
    </style>
</head>
<body>
<p class="p1">山有木兮木有枝，心悦君兮君不知</p>
<ul>
    <li class="li1">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var p_id=document.getElementsByClassName('p1')[0]
    /*获取属性值*/
    console.log(p_id.getAttribute("class"));
    var uli=document.getElementsByTagName("li")[0]
    /*有则改  无则增*/
    //设置属性
    uli.setAttribute('class','p1')
    //移出属性
    p_id.removeAttribute("class")

    var uli2 = document.getElementsByTagName("li")[1]
    uli2.setAttribute('class', 'p2')   //增，增加class属性
    uli2.setAttribute('class', 'p2-2')   //改，修改class属性
    console.log(uli2.hasAttribute('class'))  //查是否有class属性
    uli2.removeAttribute('class', 'p2-2')   //删，删除class属性
    // 增、改、删依次进行后仍然没有，即代码依次执行
    var a=10
    /*js的基本数据类型*/
    console.log(typeof 123)
    console.log(typeof 12.3)
    console.log(typeof 'lili')
    console.log(typeof true)
    console.log(typeof [1,2,3,4])
    console.log(typeof null)
    console.log(typeof a)
</script>
</body>
</html>

通过变更元素属性名，调用不同属性设置，从而达到变更表示样式，或者直接变更对应属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background: cadetblue;
        }
        .box1{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    
    // 方式1修改
    <script>
        var OBox = document.querySelector("div");
        OBox.onclick = function (){
            OBox.style.width = "100px";
　　　　　　　// OBox.style["width"] = "100px";  //效果一样，但该种用法可接受来自form的属性信息
            OBox.style.height = "100px";
            OBox.style.background = "red";
        };
    </script>
    // 方式2修改
    <script>
        var OBox = document.querySelector("div");
        OBox.onclick = function (){
            OBox.className = 'box1';
            // OBox.setAttribute('class', 'box1');
        };
    </script>
</body>
</html>

五、JS基本数据类型

number：数字，在js里面的小数和整数统一都是数字，-2^53~2^53超出范围之后精度就会不精确

boolean：布尔值（True、False）

undefined：未定义，一个变量声明之后没有赋值就是undefined

string：字符串

null：空值，在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单一类的数据类型null

object：对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS数据类型</title>
</head>
<body>
<script>
    // number  数字
    var a =123;
    console.log(typeof a);
    // string 字符串
    var b ='123';
    console.log(typeof b);
    // boolean 布尔型
    var c = true;
    console.log(typeof c);
    //undefined 未定义
    var d;
    console.log(typeof d);
    // null 空
    var e = null;
    console.log(typeof e);
    // object 对象
    var f = [1,2,3,4]
    console.log(typeof f);
</script>
</body>
</html>

六、JS操作符

1. 算数运算符：+、 -、 * 、 / 、 % 、加减乘除求余

① 当不是数字之间的运算的时候，+号两边一旦有字符串（引号引起的部分），那么+号就不在是数学运算了，而是拼接，最终结果是字符串

② - / * % 尽量将字符串转换成数字（隐式类型转换，会自行进行强制转换）

③ NaN： Not a Number number、

2. 赋值运算符：+=、 -=、 *=、 /=、 = 、++、--、**、//

z这些是基本的赋值运算符，除此之外还有++、 --，这两个都存在隐式类型转换，会全部转成数字

3. 逻辑运算符：&&（and）、||（or）、！（not）来表示。

&& 和|| 不会进行类型转换，！则会进行类型转换，将后面的数据线转换为布尔型在取反

4. 比较运算符：>、<、 !=、 >=、 <=、 ==、 ===

① 如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较

② 如果等号两边出现了null或undefined，null和undefined除了和自己相等，就彼此相等

③ NaN==NaN 返回False，Nan和所有值包括自己都不相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS运算符</title>
</head>
<body>
<script>
    // document.write()  直接在页面上显示最终结果
    // 算术运算符
    document.write(1+'2'+ "<br>");   // 按数字与字符串拼接
    document.write(1-'2'+ "<br>");   // 将’2‘隐式转换为数字后在相减
    document.write(1+true+ "<br>");  // true为1
    document.write(1+null+ "<br>");  // null为空
    document.write(1+undefined+ "<br>"); // undefined为定义，无法相加
    document.write(1+NaN+ "<br>");   // NaN 无法相加
    //  /、*、% 同 -

    // 赋值运算符
    var a = 1;
    var b = null;
    document.write(a++ +"<br>");  // 结果为1，先执行a打印，再执行a++
    document.write(a +"<br>");  // 结果为2，上一步计算完成的a值进行打印
    document.write(++a +"<br>"); //结果为3，先执行++a，在执行a值打印
    document.write(++b +"<br>"); //结果为1，先执行++b，在执行b值打印
    // 其他同样用法

    // 比较运算符
    document.write((2 == '2') +"<br>"); //等于，不全等（只判断值是否相等）
    document.write((2 === '2') +"<br>"); //全等（先判断类型是否一致，再判断值是否相等）
    
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // js运算符
    // 转字符串
    // var a = 19
    // console.log(typeof toString(a));
    // console.log(typeof String(a));
    // // 字符串转 number
    // var b = "20"
    // console.log(typeof parseInt(b));
    // console.log(typeof parseFloat(b));
    //
    // // 字符串拼接 +
    // age = "19岁"
    // console.log(`北斗帅帅今年${age}`) // 反引号
    //
    // // js运算符  减法  乘法 除 取余 隐式转换
    // console.log(b + a);

    // 比较运算符  ==  ===  !=  !==
    // var aa = "2"
    // var bb = 2
    // console.log(aa == bb);  //== 只比较值
    // console.log(aa === bb);  //== 比较值  比较类型

    // 赋值运算符  ++  加一  --
    //  ++ 在前  先相加  后输出
    // ++  在后  先输出  后相加
    // var cc = 2
    // // console.log(cc++); // 先输出值2  在进行加一
    // // console.log(cc + 2); //5 = 3+2
    // console.log(++cc); //先相加 3  在输出值 3
    // console.log(cc);
    //

    // && 与   ||  !
    console.log(5 > 3 && 5 < 10);
    console.log(5 > 3 && 5 > 10);
    console.log(5 > 3 || 5 > 10);
    console.log(!(true));

</script>

</body>
</html>

七、JS流程控制

JS中流程控制是if判断和switch选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制语句</title>
</head>
<body>
<script>
    var weather = 'cloudy'
    if (weather == 'sunny') {
        console.log('照常上班')
    } else if (weather == 'cloudy') {
        console.log('去湖南省植物公园')
    } else {
        console.log('在家休息')
    }


    switch (weather) {
        case "cloudy":
            console.log('去湖南省植物公园');
            break;
        case "sunny":
            console.log('照常上班');
            break;
        case "rain":
            console.log('在家休息');
            break;
        case "thunder":
            console.log("在家睡觉");
            break;
        case "snow":
            console.log("出去看雪景");
            break
        default:
            console.log("捉迷藏")
    }

    var a=1
    //判断条件  问号  为真的结果  冒号   为假的结果
    console.log(a > 4 ? 2 : 3);
</script>
</body>
</html>

八、JS循环

1. for循环，JS中的for循环相当于while的简写，更加方便。for(initialize；test；increment){statment}

2. while循环，while是一个基本的循环语句，expression、为真的时候，就会执行循环体。while(expression){statement}

3. for in循环，JS中的for也支持类似于python中的用法，可以遍历对象所有的属性

4. do/while循环，do/while和while类似，只是会先执行一个循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js循环</title>
</head>
<body>
<script>
    //for循环
    /*多行注释快捷键 Ctrl+shift+/*/
    //单行注释快捷键 Ctrl+/
    for (var i=0;i<10;i++){
        if(i==6){
            continue;   // 跳出本次循环，继续下次循环
        }
        document.write(i + '<br>')
    }

    //while循环
    var i=5
    while (i<10){
        i++
        document.write(i + '<br>')
    }
    //for循环跟while循环都是先判断再执行
    //已知循环次数用for  未知循环次数用while
    for (var i=0;i<3;i++){
        var age=prompt("你今年多大了","请在这里输入年龄")
        document.write(age + '<br>')
    }
    var age=prompt("你今年多大了","请在这里输入年龄")
    while (age<0 || age>100){
        age=prompt("你今年多大了","请在这里输入年龄")
        document.write(age + '<br>')
    }

    //do/while循环
    var i=5
    do {
        i++
        document.write(i + '<br>')
    }while (i<3)
    //先执行再判断 不管对错 至少先执行一次
    //for in循环
    var arry=[1,2,3,4,5,6,7]
    for (var i in arry){
        document.write(i,arry[i] + '<br>')//跟python不一样 得到的是下标值 不是数组里面的内容
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<body>

<script>
    var OL = document.querySelectorAll("ul li");
    // console.log(OL)
    // var没有块级作用域的概念，let具备，故按alert(i)时，var一直显示OL.lenght，let才会依次显示下标
/*    for(let i=0;i<OL.length;i++){
        OL[i].onclick = function (){
            alert(this.innerText);
            alert(i);
        }
    }*/
    // 另一种解决方式,提前存储下标值
    for(var i=0;i<OL.length;i++){
        OL[i].index_num = i    // 提前存储下标值
        OL[i].onclick = function (){
            alert(this.index_num);
        }
    }
</script>
</body>
</html>

九、JS字符串方法

length：长度

slice：切片

indexOf：索引

split：分割

substr：截取

replace：替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串常用方法</title>
</head>
<body>
<script>
    var str='qwertyuiop123451678190'
    document.write(str.length + '<br>')//获取字符串的长度
    document.write(str[19] + '<br>')//通过下标获取值
    document.write(str.substring(1,7) + '<br>')//左闭右开  下标为7的字符获取不到
    document.write(str.slice(1,7) + '<br>')
    document.write(str.slice(-7,-1) + '<br>')
    document.write(str.substr(1,9) + '<br>')//第一个参数为下标，第二个参数为数值

    document.write(str.split('t') + '<br>')//分割
    document.write(str.indexOf('i') + '<br>')//通过字符串里面的字符获取到对应的下标值
    document.write(str.replace('1',"****") + '<br>')//默认替换第一个
    document.write(str.replaceAll("1","###") + '<br>')//替换所有
    document.write(Object.keys(str) + '<br>')//获取所有的键  也就是下标
    document.write(Object.values(str) + '<br>')//获取所有的值


    var num=123
    document.write(typeof toString(num) + '<br>')//数字转换成字符串
    var str1='123'
    document.write(typeof parseInt(str1) + '<br>')//字符串转数字
</script>
</body>
</html>

十、数组方法

length：长度

push：追加

unshift：添加

pop/shift：删除

indexOf：查找

slice/join/sort/reverse：改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的数组方法</title>
</head>
<body>
<script>
    var arry=["葡萄","西瓜","桃子","草莓","芒果"]
    console.log(arry.length)
    arry.push("橘子","火龙果")//在后头添加
    console.log(arry)
    arry.unshift("香蕉","车厘子")//在前面添加
    console.log(arry)
    arry.shift()//删除前面的
    console.log(arry)
    arry.pop()//删除后面的
    console.log(arry)
    console.log(arry[2])//通过下标查找内容
    console.log(arry.indexOf("草莓"))
    // console.log(arry.slice(1,5))//切片
    // console.log(arry.splice(4))//删除到数组只剩下四个内容
    // console.log(arry)
    // console.log(arry.splice(1,2))//第一个参数为下标，第二个为删除的个数
    // console.log(arry)
    console.log(arry.splice(1,0,"枇杷"))//不改变原有的数组的组成 插入一个值
    console.log(arry)

    var li=[8,2,6,3,5]
    console.log(li.sort())//排序
    console.log(li.reverse())//反向 单纯的反方向排列
    console.log(li.join("**"))//拼接
</script>
</body>
</html>

十一、JS的内置对象

JS内置对象：JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用

Math对象：Math对象是一个处理数学相关的对象，可以用来执行在数学相关的内容

Math.pow(2, 4) 2的4次方

Math.round(5.5) 四舍五入

Math.ceil(1.5) 向上取整

Math.floor(1.5) 向下取整

Math.max() 取参数中的最大值

Math.min() 取参数中的最小值

Math.random() 0-1的随机数[0,1)

Math.random()*m+n 生成n~ （m+n）

Math.PI π

Math.abs() 求绝对值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math对象</title>
</head>
<body>
<script>
    console.log(Math.sqrt(9))//开平方
    console.log(Math.pow(4,2))//幂运算 x的y次方
    console.log(Math.abs(-5))//绝对值 负数的绝对值为正数  正数的绝对值为正数
    console.log(Math.PI)//数学中的π
    console.log(Math.round(3.9))//四舍五入
    console.log(Math.ceil(3.2))//向上取整
    console.log(Math.floor(3.9))//向下取整
    console.log(Math.random()*10)//随机数 默认生成0~1
    console.log(Math.round(Math.random()*10))//0~10的随机整数
    console.log(Math.random()*40+30)//30~70的随机数  生成n~m+n
    //0*40=0+30=30   1*40=40+30=70
    console.log(Math.max(1,5,6,9,2))//最大值
    console.log(Math.min(1,5,6,9,2))//最小值
</script>
</body>
</html>

日期对象：日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉

var data = new Data();

var strap = data.getTime();

var year = data.getFullYear();

var month = data.getMonth();

var date = data.getDate();

var hour = data.getHours();

var min = data.getMinutes();

var sec = data.getSeconds();

var day = data.getDay();

document.body.innerHTML = year + "年" + month + "月" + date + "日" + hour + "时" + min + "分" + sec + "秒‘ + “星期” + day；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date对象</title>
</head>
<body>
<script>
    var time=new Date()
    console.log(time.getFullYear())//年
    console.log(time.getMonth()+1)//月
    console.log(time.getDate())//日
    console.log(time.getDay())//星期
    console.log(time.getHours())//时钟
    console.log(time.getMinutes())//分钟
    console.log(time.getSeconds())//秒钟
    console.log(time.getTime())//时间戳
</script>
</body>
</html>

十二、JS的Window对象

Window对象：即所有客户端JS特性和API的主要接入点。它表示Web浏览器的一个窗口或者窗体，并且可以用标识符window来引用它

Window属性和方法：Window对象定义了一些属性和方法，比如：alert()方法、非常重要的document属性等

计时器：就是Window中的一个方法，可以用来实现计时的一些操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象（定时器）</title>
</head>
<body>
<span class="text">我在</span>
<span id="num">5</span>
<span class="text">秒之后就要去其他网页了</span>
<script>
    //settimeout在指定的时间之后执行一次，且只执行一次
    var timer1=setTimeout(function (){
        console.log(666)
    },5000)
    //setInterval以指定的时间为周期，一个周期就执行一次
    var timer2=setInterval(function (){
        console.log(111)
    },1000)
    //清除定时器
    clearTimeout(timer1)
    clearInterval(timer2)

    // var text=document.getElementsByClassName("text")
    var numer=document.getElementById("num")
    var num=5
    var timer3=setInterval(function (){
        num--
        numer.innerText=num
        if (num==0){
           clearInterval(timer3)
            // window.location.href="https://www.veer.com/"//传统方式在当前窗口进行页面跳转
            window.open("https://www.veer.com/")//会新建一个窗口打开
        }

    },1000)

</script>
</body>
</html>

十三、JS的函数

JS函数介绍：JS的函数包裹在花括号当中，使用关键词function来定义。函数可以挂载在一个对象上，作为一个对象的属性，称为对象的方法

JS函数特性：在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值变量，或者作为参数传递给其他的函数，甚至可以设置属性，调用它们的方法

JS有名函数和匿名函数：

有名函数：有名字的函数，使用时是：函数名加上括号执行，充当时间函数执行

匿名函数：没有名字的函数，匿名函数不能单独出现，一般充当事件函数，比如点击事件调用的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有名函数充当事件函数写在标签里面需要加上（）-->
<div onclick="func()" id="box" style="width: 200px;height: 200px;background-color: cornflowerblue"></div>
<script>
    //有名函数  小括号前面 function后面就是函数的名字
    function func(){
        console.log(666)
    }
    //有名函数的调用 函数名加括号
    func()
    //匿名函数的调用 触发事件就会调用
    document.onclick=function (){
        console.log(555)
    }

    var box=document.getElementById("box")
    box.onclick=function (){
        console.log(444)
    }
    //有名函数充当事件函数的时候 不能加上（）  加上会立即执行
     box.onclick=func
</script>
</body>
</html>

函数的传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的传参</title>
</head>
<body>
<script>
    /*参数匹配事从左项右进行匹配，如果实参个数少于形参，后面的参数对应赋值undefined*/
    function fun1(x){//形参就是声明函数时的变量
        console.log(x)
    }
    fun1(2)//实参就是我们调用函数传入改函数的具体的值
    function fun2(x,y){//数量没有限制可以写多个,用逗号隔开
        console.log(x+y)
        console.log(arguments)//不定参
    }
    fun2(5,6)
    fun2(1,2,3,4,5,6)

    var s=0
    function add(){
        console.log(arguments)
        for (var i=0;i<arguments.length;i++){
            console.log(arguments[i])
            s+=arguments[i]
        }
        console.log(s)
    }
    add(5,6,8,9)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>456</button>
<script>
    //函数的返回值 默认为undefined
    //了解即可
    /*
    //功能性函数是没有返回值的，所以得到结果是undefined
    var a=alert(1)
    console.log(a)
    var b=console.log(2)
    console.log(b)
    //返回性函数 会返回结果
    var btn=document.getElementsByTagName('button')[0]
    console.log(btn)
    */
    function ret(){
        console.log(6)
        return "ok"
        //返回值 会直接结束这个函数，后面的代码不会执行
        console.log(888)
    }


    var a=ret()
    console.log(a)
    function add(x,y){
        console.log(x+y)
        return x+y//return 后的值将会作为函数执行结果返回，结果返回，我们可以定义变量接收

    }
    var z=add(5,6)
    add(z,8)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的作用域</title>
</head>
<body>
<script>
    /*
    * 局部作用域：在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量的作用域是局部的：只能在函数内部访问它们。
    * 全局作用域：函数之外声明的变量，会成为全局变量。全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。
    * 自动全局：如果给没有未声明的变量赋值，这个变量会自动成为全局变量。
    * */
    var a=10 //全局变量
    function fun1(){
         var a=20 //在函数里面定义的是局部变量 如果没有写var则自动成为全局变量
        function fun2(){
            // 子作用域只会改变父作用域的值
            var a=30
        }
        fun2()
        alert(a)
    }
    /*alert(a) //10 去掉var的结果10    10
    fun1() //20    去掉var的结果30   20
    alert(a)//10  去掉var的结果20    10*/

    {
        var i=10//全局变量的作用域是全局的：网页的所有脚本跟函数都可以访问它
    }
    console.log(i)

    {
        let j=20//局部变量的作用域是局部的：只能在这个函数里面或者{}里面访问它
        console.log(j)
    }

    //函数的表达式  了解即可  函数的自调用
    ~function (){
        console.log(1);
    }();     //自定义函数，“~” 波浪号表示，直接在自定义函数后方加上（即可实现自调用）
    (function (){
        console.log(2);
    })()
    (function (){
        console.log(3);
    }());

</script>
</body>
</html>

十四、JS异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS异常</title>
</head>
<body>
<script>
    // function fun(){
    //    // var a=10
    //   try{//写可能会出现错误的代码
    //     alert(a)
    //   }catch (e) {//如果try里面的代码出现错误，则执行catch里面的代码
    //     alert("错误类型"+e.name+"错误信息"+e.message)
    //   }finally {//不管try/catch结果如何，都会执行
    //     alert("执行结束")
    //   }
    // }
    function fun() {
        var a = 5;
        try {//写可能会出现错误的代码
            if (a < 10) throw "a太小了";//throw自定义异常信息 可以抛出异常
            if (a > 10) throw "a太大了";
            if (a == 10) throw "a刚刚好";
        } catch (e) {//如果try里面的代码出现错误，则执行catch里面的代码
           // alert("错误类型" + e.name + "错误信息" + e.message)
          alert(e)
        } finally {//不管try/catch结果如何，都会执行
            alert("执行结束")
        }
    }

    fun()
</script>
</body>
</html>

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            margin-top: 50px;
            margin-left: 50px;
        }
        #div {
            width: 200px;
            background-color: lightskyblue;
            text-align: center;
            padding-top: 80px;
            padding-bottom: 80px;
            color: red;
            margin-left: 50px;
        }
        #div:after {
            display: block;
            clear: both;
            content: "";
        }
        .sx1,.sx2,.sx3 {
            height: 50px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .sx3:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<form action="#" method="post" >
    <label for="sx">属&emsp;性:</label>
    <input type="text" class="sx1" id="sx" placeholder="请输入属性"><br>
    <label for="sxz">属性值:</label>
    <input type="text" class="sx2" id="sxz" placeholder="请输入属性值"><br>
    <input type="button" value="设置属性" class="sx3">
</form>
<div id="div">JavaScript有点意思！</div>
<script>
    var sx1 = document.getElementsByClassName("sx1")[0]
/*    console.log(sx1);*/
    var sx2 = document.getElementsByClassName("sx2")[0]
/*    console.log(sx2);*/
    var sx3 = document.getElementsByClassName("sx3")[0]
/*    console.log(sx3);*/
    var S = document.getElementById("div")
/*    console.log(S);*/
    sx3.onclick = function (){
        S.style[sx1.value] = sx2.value
        sx1.value = ""
        sx2.value = ""
    }

</script>
</body>
</html>

作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        /*父级盒子*/
        #box {
            width: 530px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative; /*相对定位*/
        }

        /*图片样式*/
        .limg {
            width: 530px;
            height: 300px;
        }

        /*清除浏览器样式*/
        * {
            margin: 0;
            padding: 0;
        }

        ul > li {
            list-style: none; /*清除小黑点*/
        }

        .pic {
            position: absolute; /*绝对定位*/
        }

        .pic li { /*隐藏所有图片*/
            display: none;
        }

        .pic li.show { /*提前定义好一个show的class样式*/
            display: block;
        }


        /*左右箭头的ul */
        .btn > li {
            position: absolute; /*绝对定位*/
            width: 50px;
            height: 50px;
            /*background-color: red;*/
            /*top: 125px;*/
            top: 50%;
            line-height: 50px;
            text-align: center;
            transform: translateY(-25px);
            font-size: 36px;
            color: white;
        }

        .btn .left {
            left: 0;
        }

        .btn .right {
            right: 0;
        }

        .btn > li:hover {
            background-color: #888888;

        }

        /*小圆点ul*/
        .tab {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        /*小圆点li浮动*/
        .tab li {
            float: left;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            margin-left: 5px;
        }

        /*小圆点鼠标悬浮式*/
        .tab li:hover {
            background-color: skyblue;

        }

        .tab li.on { /*小圆点*/
            background-color: orange;
        }

    </style>
</head>
<body>


<div id="box">
    <!--    图片-->
    <ul class="pic">
        <li class="show"><img src="./img/01.jpg" class="limg"></li>
        <li><img src="./img/02.jpg" class="limg"></li>
        <li><img src="./img/03.jpg" class="limg"></li>
        <li><img src="./img/04.jpg" class="limg"></li>
    </ul>
    <!--    左右箭头-->
    <ul class="btn">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>

    <ul class="tab">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
    // 点击小圆点  展示对应图片
    // 获取元素  图片li的元素
    var apic = document.querySelectorAll(".pic li")
    // 获取元素  小圆点li的元素
    var atab = document.querySelectorAll(".tab li")

    // 给小圆点加点击事件
    for (let i = 0; i < apic.length; i++) { // 循环4次 0-1-2-3
        //最后一个值
        atab[i].onmouseenter= function () {
            console.log(i);
            // 清除未点击到的图片的class   清除全部的图片 li的class
            for (let j = 0; j < apic.length; j++) {
                apic[j].removeAttribute("class") // 删除图片class
                atab[j].removeAttribute("class") // 删除小圆点class
            }
            // 加class
            apic[i].className = "show"  // 加class 展示图片
            atab[i].className = "on"  // 加class 展示图片
        }
    }
    // console.log(i)
    // if  for {} 块级作用域
    //  js循环中  var 全局作用域  只拿最后一个结果
    // js 循环中  let 每次执行的时候都是一个全新的块级作用域 每次重新拿结果
    //ctrl alt l
</script>

</body>
</html>

作业3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            font:30px 宋体;
        }
        .box2 {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <div class="box" align="center">
        <span class="box1">距离上课还有</span>
        <span id="num" class="box2" >10</span>
        <span class="box1">秒！</span><br>
        <span class="time"></span>
    </div>
    <script>
        var time=new Date()
        var year=time.getFullYear()
        var month=time.getMonth()
        var date=time.getDate()
        var hour=time.getHours()
        var min=time.getMinutes()
        var sec=time.getSeconds()
        var Time=document.getElementsByClassName("time")[0]
        Time.innerText=("北京时间："+year+"年"+month+"月"+date+"日"+hour+":"+min+":"+sec)
        var Text1 = document.getElementsByClassName("box1")[0]
        var Text2 = document.getElementsByClassName("box1")[1]
        var Num = document.getElementById("num")
        var Num1 = 10
        var timer1=setInterval(function(){
            Num1--
            Num.innerText=Num1
            var time=new Date()
            var year=time.getFullYear()
            var month=time.getMonth()
            var date=time.getDate()
            var hour=time.getHours()
            var min=time.getMinutes()
            var sec=time.getSeconds()
            Time.innerText=("北京时间："+year+"年"+month+"月"+date+"日"+hour+":"+min+":"+sec)
            if(Num1==0){
                clearInterval(timer1)
                Text1.innerText='上课，起立！'
                Text1.style["color"]="red"
                Num.innerText=''
                Text2.innerText=''
            }
        },1000)

    </script>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .word {
            font-size: 36px;
        }

        .time {
            font-size: 36px;
            color: red;
        }

        .hour {
            font-size: 14px;
            color: #888888;
        }


    </style>
</head>
<body>
<p>
    <span class="word"></span>
    <span class="time"></span>
    <span class="word"></span>
</p>
<p>
    <span class="word"></span>
    <span class="hour"></span>
</p>

<script>
    var aspan = document.getElementsByTagName("span")
    var ap = document.getElementsByTagName("p")
    // 定义初始时间
    var time = 10
    //通过定时器  每隔1s time 减一
    // 吧time  通过 文本修改 span的内容
    // 修改时间的功能函数
    function cndown() {
        if (time > 0) {
            time-- //time自减一
            aspan[0].innerText = "距离上课还有" // 修改html文本
            aspan[1].innerText = time // 修改html文本
            aspan[2].innerText = "秒！" // 修改html文本

        } else {
            ap[0].innerText = "上课！起立！"
            ap[0].className = "time"
            clearInterval(time2) // 清除定时器

            // aspan[0].innerText = "上课！起立！"
            // aspan[0].className = "time"
            // aspan[1].innerText = "" // 修改html文本
            // aspan[2].innerText = "" // 修改html文本
            //
        }

    }

    cndown()

    // 控制年月日的功能函数
    function tdown() {
        var today = new Date()
        var year = today.getFullYear()
        var month = today.getMonth() + 1
        var date = today.getDate()
        var hour = today.getHours()
        var min = today.getMinutes()
        var sec = today.getSeconds()
        if(sec<10){
            sec = "0"+sec
        }
        aspan[3].innerText = `北京时间${year}年${month}月${date}日`
        aspan[4].innerText = `${hour}:${min}:${sec}`


    }

    // 通过定时器控制时间
    window.setInterval(cndown, 1000)
    tdown()
    time2 = window.setInterval(tdown, 1000)


</script>
</body>
</html>

posted on 2022-11-17 20:03 興華阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 0004.JQuery介绍

· 0005.Ajax概念

· JavaScript调研

· JS 基础语法

· 3--JavaScript基础

lxinghua

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜