WebDay03 JavaScript基础基础语法函数事件内置对象

本文链接：https://blog.csdn.net/m0_46690280/article/details/106318556

JavaScript基础

一 JavaScript基础语法
二 JS函数【方法】
三 JS事件【重点】
四 JS常用内置对象【知道】

一 JavaScript基础语法

1.1 JS运算符

js与java的运算符基本一样，什么算数运算符、赋值运算符、逻辑运算符等等，不需要死记硬背，写程序会用就行：

1. 算数运算符
		+ - * / % ++ --
2. 赋值运算符
		= += -= *= /= %=
		eg. a+=1 -> a= a+1 
3. 比较运算符
		>   < 	==(===恒等于) 	!=(!==不恒等于)
4. 逻辑运算符
		&& ||  !(非)
5. 三元（目）运算符
		条件表达式？为真:为假

关注js与java区别的运算符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-JS运算符</title>

</head>
<body>

    <script>
            /*
            *   js运算符: 讲与java不同的地方
            *
            *   # 在js中,任意类型都能用运算(以+号为例)
            *       1. string
            *       2. number
            *       3. null
            *       4. boolean
            *       5. undefined
            *
            *     规则:
            *       1. 任意类型 + string = string
            *       2. 如果其他类型(非string), 跟number相加,结果也是number
            *           a. boolean  true=1 false=0
            *           b. null = 0
            *           c. undefined -> NaN (not a number)
            * */
            let i = 100;
            let j;
            console.log(i + j)
    </script>
    <script>
        /*
        *  比较运算符:
        *      1.  ==(===恒等于)
        *        a. == 是比较两个变量的字面值(常用)
        *        b. === 不仅比较两个变量的字面值,也比较类型
        *
        *      2.  !=(!==不恒等于)
        *        a. !=  字面值是否相等
        *        b. !== 字面值或类型是否相同(只要一个不同就为true)
        *
        * */
        // let a = 1; // number
        // let b = true; // boolean  true=1

        let a = 100; // number
        let b = "100"; // string

        console.log(a == b) // true
        console.log(a === b)// false
    </script>
    <script>
        /*
        * # 三元（目）运算符
		        条件表达式？为真:为假
        * */
        let c = 2;
        let d = 1;
        let result = c > d? true : false
        console.log(result);
    </script>
</body>
</html>

1.2 JS流程控制

高级语言中的三种基本结构：顺序、分支、循环
① 条件判断

1. if判断
		if (条件表达式) {
            代码块;
        } else if(条件表达式) {
            代码块;
        } else {
            代码块;
        }
		
2. switch判断	
		switch(条件表达式){
            case 满足条件1 :
            	代码块 
            	break;
            case 满足条件2 :
            	代码块
                break;
            default:
            	默认代码块;
		}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-条件判断</title>

</head>
<body>

    <script>
        /*
            var : es6之前的变量声明 后来被es6的 let/const替代
                es6(所有主流浏览器都支持)

        *   java中判断条件是 结果为boolean的表达式
        *       js跟java不同的是: 任意类型都能当成判断条件
        *
        *       1. string -> 空串为false,非空串true
        *       2. number -> 非0为true,0为false
        *       3. boolean
        *       4. null  -> false
        *       5. undefined -> false
        * */
        let result
        if(result){
            console.log(true)
        }else{
            console.log(false)
        }
    </script>
</body>
</html>

② 循环语句

1. 普通for循环
		for(let i= 0; i<10; i++){
    		需要执行的代码;
		}

2. 增强for循环
		for(let element of array){
            需要执行的代码;
		}
		
3. 索引for循环
		for(let index in array){
            需要执行的代码;
		}

4. while循环
		while (条件表达式) {
			需要执行的代码;
		}
		
5. do..while循环
		do{
            需要执行的代码;
		}while(条件表达式);
		
6. break和continue
		break: 跳出整个循环
		continue：跳出本次循环

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-循环语句</title>

</head>
<body>

<script>
    /*
    * 1. 普通for循环
		for(let i= 0; i<10; i++){
    		需要执行的代码;
		}

    2. 增强for循环(for of)
            for(let obj of array){
                需要执行的代码;
            }

    3. 索引for循环(for in) -> 了解
            for(let index in array){
                需要执行的代码;
            }
    * */
        /*
        *   java 数组:
        *       String[] array = {"张三","李四","王五"}
        *   js 数组:
        *       let array = ['张三','李四','王五']
        *
        * */
    let array = ['张三','李四','王五']
    for(let i= 0; i<array.length; i++){
        console.log(array[i])
    }
    for(let element of array){
        console.log(element); // 数组中的每个元素
    }

    for(let index in array){
        console.log(index); // 数组中的每个元素索引
    }

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

1.3案例: 乘法表

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            /* 边框不包裹内容的话,折叠*/
        }
    </style>
</head>
<body>
<!--   <table border="1px" cellspacing="0px" cellpadding="5px">
        <tr>
            <td>
                   1x1=1
            </td>
        </tr>
    </table>-->

    <script >
        /*
        * 99乘法表:
        *   外层循环 for i=1~9  //行
        *   内层循环 for j=1~i // 列
        * */
        /*
        *   js字符串用双引, html属性值用单引
        * */
        document.write("<table border=\"1px\" cellspacing='0px' cellpadding='5px'")
        for (let i=1; i<=9; i++){
            document.write("<tr>")
            for(let j=1; j<=i; j++){
                document.write("<td>")
                document.write(j+"x"+i+"="+i*j)
                document.write("</td>")
            }
            // document.write("<br>")
            document.write("</tr>")
        }
        document.write("</table>")
    </script>

</body>
</html>

二 JS函数【方法】

功能：js函数用于执行特定功能的代码块，为了方便理解也可以称为js方法

2.1 普通函数【重点】

语法

function 函数名(参数列表){
    函数体;
    [return 返回值;] // 中括号意思表示内容可以省略....
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-普通函数</title>

</head>
<body>
    <script>
        /*
        * js中叫函数, java一般叫方法
        *    1. java的方法
        *       public static void main(String[] args){
        *           方法体
        *       }
        *
        *       修饰符 返回值类型 方法名(参数列表){
        *           方法体
        *       }
        *
        *       接口: @FunctionalInterface
        *
        *    2. js的函数
        *       function 函数名(参数列表){
        *           函数体
        *       }
        *       a. 参数列表的类型不写(let强制不写)
        *       b. 如果有返回值,直接写return
        *       c. js函数的参数可以传多个,跟参数列表可以不匹配数量, 按顺序赋值(没有重载)
        *       d. js函数体中特殊变量: arguments (默认存在的数组,会接收传入的所有参数)
        * */
            //无参无返回
        function method01(){
            document.write("呵呵")
        }
        // method01()
            //有参无返回
        function method02(a,b){
            document.write(a + b)
        }
        // method02(1,2)

        //有参有返回
        function method03(a,b){
           return a + b
        }
        let result = method03(1,2)
        // document.write("有返回:" + result)

        //js函数的参数可以传多个,跟参数列表可以不匹配数量, 按顺序赋值
        //
        function method04(a,b) {
            return a + b
        }
        //js有重载方法的必要吗? 没有 (再写就覆盖之前的)
        function method04(a,b,c) {
            return a + b + c
        }
        let result2 = method04(1,2) // a=1, b=undefined  a+b=NaN
        // document.write(result2)

        //js函数体中特殊变量: arguments (默认存在的数组,会接收传入的所有参数)
        function method05() {
            let sum = 0;// 初始值必须给,不然是undefined
            for(let i=0; i<arguments.length; i++){
                sum += arguments[i]
            }
            return sum
        }
        let result3 = method05(1,2,3,4,5)
        document.write(result3)
    </script>

</body>
</html>

2.2 匿名函数

通常与事件结合使用，咱们现在先来看一下语法。。。。

function (参数列表){
    函数体;
    [return 返回值;] // 中括号意思表示内容可以省略....
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05-匿名函数</title>

</head>
<body>
    <script>
        /*
        * js中的函数格式有两种
        *   1. 普通函数
        *       function 函数名(参数列表){
        *           函数体
        *       }
        *   2. 匿名函数
        *      变量 = function(参数列表){
        *           函数体
        *      }
        *
        *      a. 匿名函数没有函数名
        *      b. 匿名函数必须给变量赋值
        *
        *    补充:
        *       1. 在js,函数是一种特殊的变量类型(对象)!!!
        *       2. 匿名函数一般是用来注册事件
        * */
        function method01(a,b) {
            document.write(a + b + "哈哈")
        }
        method01(1,2)
        document.write("<br>")

        let method02 = function (a,b) {
            document.write(a + b + "呵呵")
        }
        method02(1,5)
        document.write("<br>")
        document.write(typeof method02)
        document.write("<br>")
    </script>
</body>
</html>

2.3箭头函数和系统函数.小练习

箭头函数：函数的更简单的写法
(参数列表)=>{ }
系统函数：js提供的函数，不用自己定义，直接用
eval：将传入的字符串当作JavaScript代码来执行
parseInt：将输入的字符串中的整数部分提取出来并做转换，返回整数部分

需求：随机输入5个数，然后输出比平均值大的数
技术要点：
1：如何输入：prompt
2:如何保存：保存到数组中
3：如何求平均值：遍历数组求和/数组的长度
4：如何筛选比平均值大的数：遍历数组，拿每个元素和平均值做比较

let input = [];
     for(let i=0;i<5;i++){
        let a = prompt("请输入第"+(i+1)+"个数据")
        input[i] = parseInt(a);
     }

     //求平均值
     let sums = 0;
     input.forEach((element,index)=>{
        sums += element;
     });
     let avg = sums/input.length;

     //筛选数据
     let output = [];

     input.forEach((element,index)=>{
        if(element > avg){
            output.push(element);
        }
     });
     document.write("最终的结果:"+output);

三 JS事件【重点】

事件(event)：JS可以监听用户的行为,并调用函数来完成用户交互功能.

事件中的四个重要概念

        事件源：事件发生在谁身上谁就是事件源
        事件：用户的操作行为
        事件处理器：事件触发后会调用一个函数来执行，在函数中进行一些业务处理
        注册监听：将事件处理函数和事件源绑定到一起

    代码的编写流程：
        1：获取事件源
        2：给事件源绑定事件
        3：定义事件触发的函数
        4：编写函数具体的业务代码

3.1 常用事件

1. 点击事件：
        1. onclick：单击事件
        2. ondblclick：双击事件 (double: 时间间隔很短两次单击)
        
2. 焦点事件
        1. onblur：失去焦点
        2. onfocus:元素获得焦点。

3. 加载事件：
        1. onload：页面加载完成后立即发生。

4. 鼠标事件：
        1. onmousedown	鼠标按钮被按下。
        2. onmouseup	鼠标按键被松开。
        3. onmousemove	鼠标被移动。
        4. onmouseover	鼠标移到某元素之上。
        5. onmouseout	鼠标从某元素移开。
        
5. 键盘事件：
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

6. 改变事件
        1. onchange	域的内容被改变。

7. 表单事件：
        1. onsubmit	提交按钮被点击。

3.2 事件绑定

将事件与html标签进行绑定，实现交互功能

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

    <script>
        /*
        *   事件 : event
        *       0. 在网页上发生的一切能被浏览器检测到的行为 -> 事件
        *           1. 人为触发的
        *           2. 浏览器触发的
        *
        *   学事件是为了实现交互效果
        *       JS: 事件驱动型语言
        *
        *    某个事件被触发了,执行某个代码
        *
        *    点击事件为例 : onclick
        *
        *    给某个标签的某个事件属性赋值某个函数 : 事件注册
        *    1. 命名注册
        *       1. 在标签内声明 某个事件属性 = "函数调用"
        *
        *    2. 匿名注册
        *
        * */
        function method01(a) {
            alert("班主任来了,快跑啊!!" + a)
        }

        function method02() {
            alert("呵呵")
        }

    </script>


</head>
<body>
    <input type="button" value="点击有惊喜" onclick="method01('啊')" onmouseover="method02()"> <br> <br>

<input type="button" value="点击有惊喜2"  id="myid">
</body>
<script>
    /*
        document : 当前html页面
            getElementById(id值) : 通过某个id值获得元素

        script标签
            1. 写head里面(好看)
            2. body之后(省事)
     */
    var btn = document.getElementById("myid");
    /*
        当btn的点击事件被触发的时候,调用这个匿名函数

        ev : event 包含该事件触发时一些参数

        跟事件绑定的函数: 回调函数 (callback)
            将一个函数A 赋值给一个指针, 然后指针传给别的函数B或者系统C,B或C通过指针调用A
            此时A 称之为回调函数
     */
    btn.onclick = function (ev) {
        // alert("嘻嘻")
        //在控制台输出内容
        console.log(ev.clientX + "," + ev.clientY)
    }

</script>
</html>

3.3 案例：轮播图

需求

一共5张图片，实现每过3秒中切换一张图片的效果。
在这里插入图片描述
找5张图,名字命名为0.jpg,1.jpg这样有规律的,方便使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06-案例：轮播图</title>
</head>
<body>
    <!--
        轮播图 : 每隔1秒,顺序播放图片(无限循环)

            1. java:
                int i = 0;
                while(true){
                    Thread.sleep(1000)
                    //先找到img标签对象,修改src属性
                    let img = document.getElementById("myImg")
                    i++;
                    img.src = "../img/"+i+".jpg"
                    if(i==4){
                        i = -1
                    }
                }

            2. js:
                0. js中没有Thread,没有多线程(多线程带来的并发问题,比带来的好处还多)
                了解 定时器 !(明天详细了解)
                # setInterval(value1,value2)
                    1. value1 = "函数调用"
                    2. value2 = time
                    3. 效果: 每隔time时间执行一次函数调用(无限)

                定时器不仅替代了Thread.sleep(1000),还替代了while(true)

                浏览器有个特点:
                    如果网页上的某个标签属性改变了,浏览器检测到会自动刷新网页

    -->
<div>
    <img id="myImg" src="../img/0.jpg" width="500px">
</div>
    <!--<script>
        function method01(){
            document.write("哈")
        }
        setInterval("method01()",1000)
    </script>-->

    <script>
        let i = 0;
        function method01(){
            //先找到img对象
            let img = document.getElementById("myImg")
            i++;
            img.src = "../img/"+i+".jpg"
            if(i == 4){
                i = -1
            }
        }
       setInterval("method01()",1000)
    </script>

</body>
</html>

四 JS常用内置对象【知道】

内置对象: js提供好的对象, 开发者直接可以创建对象,并使用

4.1 String 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10-字符串</title>

</head>
<body>
<!--

1. 构造字符串对象可以使用
    a. 双引号
    b. 单引号
    c. 反引号(重音符) 键盘左上角 esc下面 (es6字符串模板)
        经常用在拼接字符串: 避免单双引手动拼接
            '字符串${变量名}字符串'

2. 字符串常用方法
      substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。  包头不包尾
      toLowerCase() 把字符串转换为小写。
      toUpperCase() 把字符串转换为大写。
      split() 把字符串分割为字符串数组。
      trim() 去掉首尾空格

-->
<script type="text/javascript">
    // ------------ 1. 构造字符串对象可以使用  双引号,单引号,反引号
    // let str2 = new String("abc")
    let str = "abc"
    let str2 = 'abc'
    let str3 = `abc`
    console.log(str);
    console.log(str2);
    console.log(str3);

    let i = 100; // 效果: 小丽体重i斤
    let str4 = '小丽体重' + i + '斤'
    console.log(str4);

    let str5 = `小张体重${i}斤`
    console.log(str5);
    // ------------ 2. 字符串常用方法
    
    let str6 = "askfdjASDFAJSDLas"
    var s = str6.toLowerCase();
    console.log(s)
</script>
</body>
</html>

4.2 Array 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>11-数组</title>

</head>
<body>
<!--

数组
    查询手册完成:
       1. 创建数组
           a.  let array = new Array('a','b','c')
           b.  let array = ['a','b','c']  -> 中括号 (常用)

           js的数组更像java中的集合,长度可以变化的,元素类型不必一致

       2. 数组常用方法
            concat() 连接两个或更多的数组，并返回结果。
            push() 向数组的末尾添加一个或更多元素，并返回新的长度。
            pop() 删除并返回数组的最后一个元素
            join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
                与 字符串.split()切割为数组 方法相反
            sort() 对数组的元素进行排序
-->
<script>
    let array1 = new Array('a','b','c')
    let array2 = ['d','e','f']

    console.log(array1);
    console.log(array2);

    for (let i = 0; i < array1.length; i++) {
        console.log(array1[i]);
    }

    // 常用方法
        //concat: 两个数组拼接, 产生新数组
    let array3 = array1.concat(array2)
    console.log(array3);

    console.log(array1.length)
        //往数组添加一个元素
    array1.push(100)
    console.log(array1.length)
    console.log(array1)
        //删除并返回最后一个元素
    let s = array1.pop();
    console.log(array1)
    console.log(s)
        //将数组转成字符串,元素之间用参数中的内容隔开(string的split方法相反)
    let str = array1.join(",");
    console.log(str);

    let arr = str.split(",")
    console.log(arr);

    let arr2 = [4, 3, 1, 2]
    console.log(arr2.sort()) // 默认升序
    console.log(arr2.sort().reverse()) // 降序

    var f = function(o1,o2){
        // return o1-o2; // 升序
        return o2-o1; // 降序
    }
    let arr3 = arr2.sort(f) // 传参: 参数还是函数类型的变量
    console.log(arr3);

    console.log(arra2.sort(function (a,b) {
        return a-b;
    }))

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

4.3 Date 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12-日期</title>
</head>
<body>
<!--
    日期  Date
        1. 创建对象
             let date = new Date(); 获取当前时间时间

        2. 常用方法
            toLocaleString()      转换为本地日期格式的字符串
            getFullYear() 获取日期中的year
            getMonth()   获取日期中的month
            getDate()    获取日期中的 号
            getTime()   获取时间毫秒值(时间原点: 1970年1月1号0时分秒)
-->

    <script>
        let date = new Date();
        //Sun May 24 2020 14:38:34 GMT+0800 (中国标准时间:东八区)
        console.log(date);
        console.log(date.toLocaleString()); // 转换为本地日期格式的字符串
        console.log(date.getFullYear()); // 年 四位
        console.log(date.getMonth()+1);// 月 范围：0~11
        console.log(date.getDate()); // 日
        console.log(date.getTime()); // 1970年~今毫秒值
    </script>

</body>
</html>

4.4 Math 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13-数学</title>

</head>
<body>
<body>
<!--
数学运算
    查询手册完成
    1. 四舍五入 round()
    2. 向下取整 floor() 地板
    3. 向上取整 ceil()  天花板
    4. 产生随机数 random() ：返回 [0,1) 之间的随机数。
            [0,1) 左闭右开区间,包含0不包含1

-->
<script >
    let n = 1234.567
    //1. 四舍五入取整
    console.log(Math.round(n));
    //2. 向下取整
    console.log(Math.floor(n));
    //3. 向上取整
    console.log(Math.ceil(n));
    //4. 产生随机数
    for (let i = 0; i < 10 ; i++) {
        console.log(Math.random());
    }
</script>
</body>
</html>

4.5 全局函数

我们不需要通过任何对象，可以直接调用的就称为全局函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>14-全局函数</title>

</head>
<body>
<!--
全局函数 : 在js中不需要对象,直接调用的函数

    1. 字符串转为数字
        a. parseInt() 解析一个字符串并返回一个整数。
            规则: 从左自右解析,碰到非数字解析结束,并返回已结束的结果

        b. parseFloat() 解析一个字符串并返回一个浮点数。
            (保留小数)

            NaN  not a number 这不是一个数  （这哥们六亲不认）
        c. isNaN()  判断一个字符串  如果不是数值返回true 否则返回false

    2. 对字符串编码和解码 (了解)
        encodeURI() 把字符串编码为 URI。
        decodeURI() 解码某个编码的 URI 。

        前端发送数据参数到服务器, 有专门的编码: url编码
           word=%E6%9D%AF%E5%AD%90

           浏览器会将我们输入的内容进行编码(url编码表)
                         看得懂  -> 看不懂    杯子 -> %E6%9D%AF%E5%AD%90
           服务器接收到之后要进行解码
                        看不懂 -> 看得懂    %E6%9D%AF%E5%AD%90 ->  杯子


    3. 把字符串当做js表达式来执行
        eval()  解析 JavaScript 字符串，并把它作为脚本代码来执行。

-->
<script >
        let str = '100.12px'
        let number = parseInt(str);
        console.log(number);

        let number2 = parseFloat(str);
        console.log(number2);

        let u; //undefined
        let i = 100;
        console.log(u + 100); // NaN
        console.log(isNaN(u+ 100)) //true
        console.log(isNaN("abc")) //true
        console.log(isNaN(100)) //false
</script>
<script>
    let str3 = '杯子'
    var result = encodeURI(str3); //编码
    console.log(result);

    console.log(decodeURI(result)) //解码

</script>
<script>

    let str4 = '<h1>呵呵</h1>'
    document.write(str4)

    /*
    *   浏览器 访问 服务器, 服务器会返回一段 字符串命令(js)
    * */
    let str5 = 'console.log(1234)' //js代码的字符串
    eval(str5) // 解析js代码的字符串, 然后执行js

    // console.log(1234)
</script>
</body>
</html>

在这里插入图片描述

4.6 Json【重要】

JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
</head>
<body>
    
</body>
<script>
    //定义天气对象
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10° ~ 23°",
        shidu : "22%"
    };

    //1.将天气对象转换为JSON格式的字符串
    let str = JSON.stringify(weather);
    document.write(str + "<br>");

    //2.将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "<br>");
    document.write("日期：" + weather2.date + "<br>");
    document.write("温度：" + weather2.wendu + "<br>");
    document.write("湿度：" + weather2.shidu + "<br>");
</script>
</html>