【JavaWeb】JavaScript

电玩女神 2024-04-26 02:59 61阅读 0赞

> ? 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> ? 系列专栏：[JavaWeb开发][JavaWeb]  
> ? 首发时间：2024年2月1日  
> ? 欢迎关注?点赞?收藏?留言?

#### 目录 ####

*  js介绍
 *  js引入方式
 *  js基础语法
 *   *  书写语法
     *  变量
     *  数据类型、运算符、流程控制语句
 *  js函数
 *  js对象
 *   *  Array
     *  String
     *  JSON
     *  BOM
     *  DOM
 *  js事件监听
 *   *  事件监听
     *  事件绑定
     *  常见事件
     *  案例

## js介绍 ##

*  JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互
 *  JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，但是基础语法类似
 *  JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准
 *  ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)
 *  ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而 JavaScript 是遵守 ECMAScript 的标准的

## js引入方式 ##

JS 有两种引入方式

*  内部脚本：将 JS 代码定义在 HTML 页面中
    
     *  JavaScript 代码必须位于`<script></script>`标签之间
     *  在HTML文档中，可以在任意地方，放置任意数量的`<script>`
     *  一般会把脚本置于`<body>`元素的底部，可改善显示速度
 *  外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中
    
     *  外部 JS 文件中，只包含 JS 代码，不包含`<script>`标签
     *  `<script>`标签不能自闭合，自闭合就是 `<script src="js/demo.js"/>` 这种形式，末尾存在 `/`

**代码演示**

**01. JS-引入方式.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-引入方式</title>
        
    </head>
    <body>
        
        
        
        
        
        <script src="js/demo.js"></script>
    </body>
    </html>

**外部脚本需要在外部定义一个JS文件，内容如下**

![在这里插入图片描述][3805c42573f844e49696b86c1f643d63.png]

**效果图**

![在这里插入图片描述][ea61381034e64858856b76aa62a5347d.png]

## js基础语法 ##

### 书写语法 ###

*  区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
 *  每行结尾的分号可有可无
 *  注释：
    
     *  单行注释：// 注释内容
     *  多行注释：/\* 注释内容 \*/
 *  大括号表示代码块
    
        //判断
        if(count == 3){
              
            alert(count);
        }

JS 中的三种输出语句

*  使用 `window.alert()` 写入警告框
 *  使用 `document.write()` 写入 HTML 输出
 *  使用 `console.log()` 写入浏览器控制台

**代码演示**

**02. JS-基础语法-输出语句.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-基本语法</title>
    </head>
    <body>
       
        
       <script>
        window.alert("Hello JS"); //弹出框
    
        document.write("Hello JS"); //写入HTML页面
    
        console.log("Hello JS"); //浏览器控制台
       </script>
    </body>
    </html>

**效果图**

*  弹出框
    
    ![在这里插入图片描述][7ae1ad9d61114f8f9c52115d2109a006.png]
 *  写入 HTML 页面
    
    ![在这里插入图片描述][0c93c92e0b604e74bde342278635be68.png]
 *  写入浏览器控制台
    
    ![在这里插入图片描述][80818f6b8be4477985a001407bc77a34.png]

### 变量 ###

*  JavaScript 中用 `var` 关键字（variable 的缩写）来声明变量
 *  JavaScript 是一门弱类型语言，变量可以存放不同类型的值
 *  变量名需要遵循如下规则：
    
     *  组成字符可以是任何字母、数字、下划线（\_）或美元符号（$）
     *  数字不能开头
     *  建议使用驼峰命名

注意事项

*  ECMAScript 6 新增了 `let` 关键字来定义变量。它的用法类似于 `var`，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明
 *  ECMAScript 6 新增了 `const` 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

**代码演示**

**03. JS-基础语法-变量.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-基础语法</title>
    </head>
    
    <body>
        <script>
            //定义变量
            // var a = 0;
            // a = "A";
    
            // alert(a);
    
            // var 定义的是一个全局变量， 还可以重复声明
            // {
          
            //     var a = 0;
            //     var a = "A";
            // }
            // alert(a);
    
    
            // let 定义的是一个局部变量， 不可以重复声明
            // {
          
            //     let a = 0;
            //     a = "A";
    
            //     alert(a);
            // }
    
            //const 定义的是一个常量
            const pi = 3.14;
            //pi = 3.15;
    
            alert(pi);
    
        </script>
    </body>
    
    </html>

### 数据类型、运算符、流程控制语句 ###

**数据类型**

JavaScript中分为：原始类型和引用类型

**原始类型**

*  number：数字（整数、小数、NaN (Not a Number)）
 *  string：字符串，单双引皆可
 *  boolean：布尔，true 或 false
 *  null：对象为空
 *  undefined：当声明的变量未初始化时，该变量的默认值是 undefined

注意：使用 typeof 运算符可以获取变量的数据类型

**运算符**

*  算术运算符：+ , - , \* , / , % , ++ , –
 *  赋值运算符：= , += , -= , \*= , /= , %=
 *  比较运算符：> , < , >= , <= , != , == , === 
 *  逻辑运算符：&& , || , !
 *  三元运算符：条件表达式 ? true\_value: false\_value

**== 与 === 的区别**

== 会进行类型转换，=== 不会进行类型转换

**类型转换**

*  字符串类型转为数字：
    
     *  将字符串字面值转为数字。 如果字面值不是数字，则转为NaN
 *  其他类型转为boolean：
    
     *  Number：0 和 NaN 为 false，其他均转为 true
     *  String：空字符串为 false，其他均转为 true
     *  Null 和 undefined ：均转为false

**流程控制语句**

*  if…else if …else…
 *  switch
 *  for
 *  while
 *  do … while

**代码演示**

**04. JS-基础语法-数据类型.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-数据类型</title>
    </head>
    <body>
    
    </body>
    <script>
    
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14);//number
    
        alert(typeof "A"); //string
        alert(typeof 'Hello');//string
    
        alert(typeof true);//boolean
        alert(typeof false);//boolean
    
        alert(typeof null);//object
    
        var a ;
        alert(typeof a);//undefined?
            
    </script>
    </html>

**05. JS-基础语法-运算符.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-运算符</title>
    </head>
    <body>
        
    </body>
    <script>
        // var age = 20;
        // var _age = "20";
        // var $age = 20;
        
        // alert(age == _age); //true
        // alert(age === _age); //false
        // alert(age === $age); //true
    
        // 类型转换 - 其他类型转为数字
        // alert(parseInt("12")); //12
        // alert(parseInt("1222A45")); //1222
        // alert(parseInt("A45")); //NaN
    
        // if(0){
          
        //     alert("If");
        // }
    
        // 类型转换 - 其他类型转为boolean
        // if(0){ //false
        //     alert("0 转换为false");
        // }
    
        // if(NaN){ //false
        //     alert("NaN 转换为false");
        // }
    
        // if(-1){ //true
        //     alert("除0和NaN其他数字都转为 true");
        // }
    
        // if(""){ //false
        //     alert("空字符串为 false, 其他都是true");
        // }
            
        // if(null){ //false
        //     alert("null 转化为false");
        // }
    
        // if(undefined){ //false
        //     alert("undefined 转化为false");
        // }
    
        /*
            false：
                0    NaN
                ""
                null
                undefined
        */
    </script>
    </html>

## js函数 ##

*  介绍：函数（方法）是被设计为执行特定任务的代码块
 *  定义：JavaScript 函数通过 function 关键字进行定义，语法为：
    
        function functionName(参数1,参数2..){
              
        	//要执行的代码
        }
 *  示例
    
        function add(a , b){
              
            return a + b;
        }
 *  注意：
    
     *  形式参数不需要类型，因为 JavaScript 是弱类型语言
     *  返回值也不需要定义类型，可以在函数内部直接使用 return 返回即可
     *  调用：函数名称(实际参数列表)

**函数的另一种定义方式**

*  语法
    
        var functionName = function (参数1,参数2..){
              
           //要执行的代码
        }
 *  示例
    
        var add = function(a , b){
              
            return a + b;
        }

注意：JS中，函数调用可以传递任意个数的参数。

**代码演示**

**06. JS-函数.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-函数</title>
    </head>
    
    <body>
    
    </body>
    <script>
    
        //定义函数方式1
        // function add(a,b){
          
        //    return  a + b;
        // }
    
        //定义函数方式2
        var add = function (a, b) {
          
            return a + b;
        }
    
        //函数调用
        var result = add(10, 20);
        alert(result);
    
    </script>
    
    </html>

## js对象 ##

### Array ###

*  JavaScript 中 Array 对象用于定义数组
 *  定义：
    
        var 变量名 = new Array(元素列表); //方式一
    
        var 变量名 = [ 元素列表 ]; 		//方式二
 *  访问：
    
        arr[ 索引 ] = 值;
 *  注意：JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
 *  属性  
    ![在这里插入图片描述][7c62674177c241baa4b47110ad6c660a.png]
 *  方法  
    ![在这里插入图片描述][f86788c00d294c79a54dad40adbd0e52.png]
 *  箭头函数 (ES6)：是用来简化函数定义语法的。具体形式为: `(…) => { … }` ，如果需要给箭头函数起名字： `var xxx = (…) => { … }`，可以用来简化 forEach() 遍历数组
 *  **代码演示**
    
    **07. JS-对象-Array.html**
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>JS-对象-Array</title>
        </head>
        
        <body>
        
        </body>
        <script>
            //定义数组
            // var arr = new Array(1,2,3,4);
            // var arr = [1,2,3,4];
        
            // console.log(arr[0]);
            // console.log(arr[1]);
        
            //特点: 长度可变 类型可变
            // var arr = [1,2,3,4];
            // arr[10] = 50;
        
            // console.log(arr[10]);
            // console.log(arr[9]);
            // console.log(arr[8]);
        
            // arr[9] = "A";
            // arr[8] = true;
        
            // console.log(arr);
        
            var arr = [1, 2, 3, 4];
            arr[10] = 50;
            // for (let i = 0; i < arr.length; i++) {
                
            //     console.log(arr[i]);
            // }
        
            // console.log("==================");
        
            //forEach: 遍历数组中有值的元素
            // arr.forEach(function(e){
                
            //     console.log(e);
            // })
        
            // //ES6 箭头函数: (...) => {...} -- 简化函数定义
            // arr.forEach((e) => {
                
            //     console.log(e);
            // }) 
        
            //push: 添加元素到数组末尾
            // arr.push(7,8,9);
            // console.log(arr);
        
            //splice: 删除元素
            arr.splice(2, 2);
            console.log(arr);
        
        </script>
        
        </html>

### String ###

*  String字符串对象创建方式有两种：
    
        var 变量名 = new String("…") ; //方式一
    
        var 变量名 = "…" ; 			  //方式二
 *  属性  
    ![在这里插入图片描述][badae67b65c84e14938f2086456aa626.png]
 *  方法  
    ![在这里插入图片描述][b49bf3713e974354949adfa426ea72ea.png]
 *  **代码演示**
    
    **08. JS-对象-String.html**
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>JS-对象-String</title>
        </head>
        
        <body>
        
        </body>
        <script>
            //创建字符串对象
            //var str = new String("Hello String");
            var str = "  Hello String    ";
        
            console.log(str);
        
            //length
            console.log(str.length);
        
            //charAt
            console.log(str.charAt(4));
        
            //indexOf
            console.log(str.indexOf("lo"));
        
            //trim
            var s = str.trim();
            console.log(s);
        
            //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
            console.log(s.substring(0, 5));
        
        </script>
        
        </html>
 *  **效果图**
    
    ![在这里插入图片描述][8179ab6317a54e0b8aaecb59bd2ad186.png]

### JSON ###

在学习 JSON 之前，我们需要了解一下 JavaScript 的自定义对象

**JavaScript自定义对象**

*  定义格式：  
    ![在这里插入图片描述][ff2c1db932734422abbe9c23340e0906.png]
 *  调用格式：  
    ![在这里插入图片描述][a0d51da018bf4b9ea380ec116f4cdb35.png]

**JSON**

*  概念：JavaScript Object Notation，JavaScript对象标记法
 *  JSON 是通过 JavaScript 对象标记法书写的文本
 *  由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

**JSON基础语法**

*  定义：  
    ![在这里插入图片描述][ab4c302c0d7d4a97a06390c3fa01f20c.png]
 *  value的数据类型：  
    ![在这里插入图片描述][cd2620547def461eb91930ddab583ab1.png]
 *  示例  
    ![在这里插入图片描述][3789f69e5ee448f2b4a3741ec546745e.png]
 *  将JSON字符串转为JS对象  
    ![在这里插入图片描述][e770c0182ac84320957bb83f3f2b35f5.png]
 *  将JS对象转为JSON字符串  
    ![在这里插入图片描述][45b919d9e2d949eba104da81eb3f5d06.png]

**代码演示**

**09. JS-对象-JSON.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-对象-JSON</title>
    </head>
    
    <body>
    
    </body>
    <script>
        //定义json
        var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    
        //将json字符串转为js对象
        var obj = JSON.parse(jsonstr);
        alert(obj.name);
    
        //将js对象-转为json字符串
        alert(JSON.stringify(obj));
    
    
    </script>
    
    </html>

**效果图**

![在这里插入图片描述][fd236a493f4c48c7b54a3e00a33300ce.png]

![在这里插入图片描述][413c2f95760b47828acfb5c6af158246.png]

### BOM ###

![在这里插入图片描述][1ebe5147e5674bbe899e110b3418d994.png]

*  概念：Browser Object Model，浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象
 *  组成：
    
     *  Window：浏览器窗口对象
     *  Navigator：浏览器对象
     *  Screen：屏幕对象
     *  History：历史记录对象
     *  Location：地址栏对象

对于 Java 开发人员来说，我们只需要了解 Window 和 Location 两个对象即可

**Window**

*  介绍：浏览器窗口对象
 *  获取：直接使用window，其中 window. 可以省略
 *  属性
    
     *  history：对 History 对象的只读引用。请参阅 [History 对象][History]
     *  location：用于窗口或框架的 Location 对象。请参阅 [Location 对象][Location]
     *  navigator：对 Navigator 对象的只读引用。请参阅 [Navigator 对象][Navigator]
 *  方法
    
     *  alert()：显示带有一段消息和一个确认按钮的警告框
     *  confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
     *  setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
     *  setTimeout()：在指定的毫秒数后调用函数或计算表达式

**Location**

*  介绍：地址栏对象
 *  获取：使用 window.location 获取，其中 window. 可以省略
 *  属性：
    
     *  href：设置或返回完整的URL
 *  设置属性的方法：`location.href = "https://www.itcast.cn";`

**代码演示**

**10. JS-对象-BOM.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-对象-BOM</title>
    </head>
    
    <body>
    
    </body>
    <script>
        // alert("Hello BOM Window");
    
        // 方法
        // confirm - 对话框，有返回值 -- 确认返回值: true , 取消返回值: false
        // var flag = confirm("您确认删除该记录吗?");
    
        //定时器 - setInterval -- 周期性的执行某一个函数
        // var i = 0;
        // setInterval(function () {
          
        //     i++;
        //     console.log("定时器执行了" + i + "次");
        // }, 2000);
    
        //定时器 - setTimeout -- 延迟指定时间执行一次
        // setTimeout(function () {
          
        //     alert("JS");
        // }, 3000);
    
        //location
        alert(location.href);
        location.href = "https://www.baidu.com";
    
    </script>
    
    </html>

**效果图**

*  对话框
    
    ![在这里插入图片描述][fc22f52a891f48ae96ed0fb08d7219ba.png]
 *  定时器
    
    ![在这里插入图片描述][607b0be5ece34d51b90260d374ab741d.png]
 *  获取当前 href
    
    ![在这里插入图片描述][717d09c3050b4547964e803ff3885b2e.png]
 *  将 href 设置完，会自动跳转到对应的网页：
    
    ![在这里插入图片描述][19bb8800aeda475d8769762b75180fc9.png]

### DOM ###

*  概念：Document Object Model ，文档对象模型
 *  DOM 可以将标记语言的各个组成部分封装为对应的对象：
    
     *  Document：整个文档对象
     *  Element：元素对象，每个标签都可以封装为一个元素对象
     *  Attribute：属性对象，标签里面的属性可以封装为属性对象
     *  Text：文本对象
     *  Comment：注释对象
 *  JavaScript 通过DOM，就能够对 HTML（超文本标记语言）进行操作：
    
     *  改变 HTML 元素的内容
     *  改变 HTML 元素的样式（CSS）
     *  对 HTML DOM 事件作出反应
     *  添加和删除 HTML 元素

这里，我们准备了一个简单的程序，可以更加直观地感受 DOM 的作用：

**11. JS-对象-DOM-演示.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-对象-DOM演示</title>
    </head>
    
    <body>
        <div style="font-size: 30px; text-align: center;" id="tb1">课程表</div>
        <table width="800px" border="1" cellspacing="0" align="center">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
                <th>评语</th>
            </tr>
            <tr align="center" class="data">
                <td>001</td>
                <td>张三</td>
                <td>90</td>
                <td>很优秀</td>
            </tr>
            <tr align="center" class="data">
                <td>002</td>
                <td>李四</td>
                <td>92</td>
                <td>优秀</td>
            </tr>
            <tr align="center" class="data">
                <td>003</td>
                <td>王五</td>
                <td>83</td>
                <td>很努力,不错</td>
            </tr>
            <tr align="center" class="data">
                <td>004</td>
                <td>赵六</td>
                <td>98</td>
                <td>666</td>
            </tr>
        </table>
        <br>
        <div style="text-align: center;">
            <input id="b1" type="button" value="改变标题内容" onclick="fn1()">
            <input id="b2" type="button" value="改变标题颜色" onclick="fn2()">
            <input id="b3" type="button" value="删除最后一个" onclick="fn3()">
        </div>
    </body>
    
    <script>
        function fn1() {
          
            document.getElementById('tb1').innerHTML = "学员成绩表";
        }
    
        function fn2() {
          
            document.getElementById('tb1').style = "font-size: 30px; text-align: center; color: red;"
        }
    
        function fn3() {
          
            var trs = document.getElementsByClassName('data');
            trs[trs.length - 1].remove();
        }
    </script>
    
    </html>

可以自己运行并点击相应的按钮感受一下

![在这里插入图片描述][d27d10ca54704ac89f99dd801941a554.png]

![在这里插入图片描述][d630636c534e456296bfb413bcb92fb6.png]

**DOM 的组成**

DOM是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为3个不同的部分：

*  Core DOM  → \\rightarrow → 所有文档类型的标准模型
    
     *  Document：整个文档对象
     *  Element：元素对象
     *  Attribute：属性对象
     *  Text：文本对象
     *  Comment：注释对象
 *  XML DOM  → \\rightarrow → XML 文档的标准模型
 *  HTML DOM  → \\rightarrow → HTML 文档的标准模型
    
     *  Image：`<img>`
     *  Button ：`<input type='button'>`
     *  [点击此处可以查看 HTML 所有对象][HTML]

**通过 DOM 获取元素对象**

*  HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
 *  Document对象中提供了以下获取Element元素对象的函数：
    
     *  根据id属性值获取，返回单个Element对象
        
            var h1 = document.getElementById('h1');
     *  根据标签名称获取，返回Element对象数组
        
            var divs = document.getElementsByTagName('div');
     *  根据name属性值获取，返回Element对象数组
        
            var hobbys = document.getElementsByName('hobby');
     *  根据class属性值获取，返回Element对象数组
        
            var clss = document.getElementsByClassName('cls');

**获取元素对象**

**12. JS-对象-DOM-获取元素.html**

效果图如下：

![在这里插入图片描述][8b54c0f5079c48cbbfba2cd4019ea32f.png]

**DOM 案例**

通过DOM操作，完成如下效果实现

*  点亮灯泡
 *  将所有的div标签的标签体内容后面加上：very good
 *  使所有的复选框呈现被选中的状态

完整代码如下：

**13. JS-对象-DOM-案例.html**

效果图如下：

![在这里插入图片描述][35ec1bafba3741a98c8959ca46500a46.png]

## js事件监听 ##

### 事件监听 ###

*  事件：HTML事件是发生在HTML元素上的 “事情”，比如：
    
     *  按钮被点击
     *  鼠标移动到元素上
     *  按下键盘按键
 *  事件监听：JavaScript 可以在事件被侦测到时执行代码

### 事件绑定 ###

方式一：通过 HTML 标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
    
    <script>
        function on(){
          
            alert('我被点击了!');
        }
    </script>

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
    
    <script>
        document.getElementById('btn').onclick=function(){
          
            alert('我被点击了!');
        }
    </script>

### 常见事件 ###

![在这里插入图片描述][9e58b0ebb99f4c8a847326f1e8547f28.png]

### 案例 ###

通过事件监听及 DOM 操作，完成如下效果实现：

*  点击 “点亮” 按钮点亮灯泡，点击 “熄灭” 按钮熄灭灯泡
 *  输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写
 *  点击 “全选” 按钮使所有的复选框呈现被选中的状态，点击 “反选” 按钮使所有的复选框呈现取消勾选的状态

**代码演示**

**14. JS-事件-案例.html**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-事件-案例</title>
    </head>
    
    <body>
    
        <img id="light" src="img/off.gif"> <br>
    
        <input type="button" value="点亮" onclick="on()">
        <input type="button" value="熄灭" onclick="off()">
    
        <br> <br>
    
        <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
        <br> <br>
    
        <input type="checkbox" name="hobby"> 音乐
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 电影
        <br>
    
        <input type="button" value="全选" onclick="checkAll()">
        <input type="button" value="反选" onclick="reverse()">
    
    </body>
    
    <script>
    
        //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
        function on() {
          
            //a. 获取img元素对象
            var img = document.getElementById("light");
    
            //b. 设置src属性
            img.src = "img/on.gif";
        }
    
        function off() {
          
            //a. 获取img元素对象
            var img = document.getElementById("light");
    
            //b. 设置src属性
            img.src = "img/off.gif";
        }
    
    
        //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
        function lower() {
          //小写
            //a. 获取输入框元素对象
            var input = document.getElementById("name");
    
            //b. 将值转为小写
            input.value = input.value.toLowerCase();
        }
    
        function upper() {
          //大写
            //a. 获取输入框元素对象
            var input = document.getElementById("name");
    
            //b. 将值转为大写
            input.value = input.value.toUpperCase();
        }
    
    
        //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
        function checkAll() {
          
            //a. 获取所有复选框元素对象
            var hobbys = document.getElementsByName("hobby");
    
            //b. 设置选中状态
            for (let i = 0; i < hobbys.length; i++) {
          
                const element = hobbys[i];
                element.checked = true;
            }
    
        }
    
        function reverse() {
          
            //a. 获取所有复选框元素对象
            var hobbys = document.getElementsByName("hobby");
    
            //b. 设置未选中状态
            for (let i = 0; i < hobbys.length; i++) {
          
                const element = hobbys[i];
                element.checked = false;
            }
        }
    
    
    </script>
    
    </html>

**效果图**

![在这里插入图片描述][4c880550692c4736adc5355cd8e4dceb.png]

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[JavaWeb]: https://blog.csdn.net/weixin_62511863/category_12511257.html?spm=1001.2014.3001.5482
[3805c42573f844e49696b86c1f643d63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b862dbd943314c71b0eb3cfb878d7b9b.png
[ea61381034e64858856b76aa62a5347d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/aad81d0b705749eaae3eb57000f0300a.png
[7ae1ad9d61114f8f9c52115d2109a006.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b7b1bd71e8cb42d49ffc3180ffcf22fd.png
[0c93c92e0b604e74bde342278635be68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4325e33d2fb74cef8be36def6affc1b1.png
[80818f6b8be4477985a001407bc77a34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4e73c9ecafe441b9aed81481ad8dfbeb.png
[7c62674177c241baa4b47110ad6c660a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/08d2b3d271334da1a8475b3801e77360.png
[f86788c00d294c79a54dad40adbd0e52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/259b580eb1494cb6bf3faee0a9ee898b.png
[badae67b65c84e14938f2086456aa626.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/27831a4f7d434e988f0cbe25e062b6a0.png
[b49bf3713e974354949adfa426ea72ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1e71f782cf8f4c28b876bf7d0de0c60c.png
[8179ab6317a54e0b8aaecb59bd2ad186.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/63143de2ce5c4c39bad10ef3f0fe004b.png
[ff2c1db932734422abbe9c23340e0906.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6e068eb107f94a738d4b51e1a698fd5b.png
[a0d51da018bf4b9ea380ec116f4cdb35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/21d3a9920dba40b889d7b991d393c7ab.png
[ab4c302c0d7d4a97a06390c3fa01f20c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7bbfb2f7636b419d8c70ff90d0e9da85.png
[cd2620547def461eb91930ddab583ab1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/446ee7c9e3944f2db9de56e3769fa5e6.png
[3789f69e5ee448f2b4a3741ec546745e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7e65484473fd4788a05e67a63c5cc8a0.png
[e770c0182ac84320957bb83f3f2b35f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d3ce504c67534b8492b441ae533f394b.png
[45b919d9e2d949eba104da81eb3f5d06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6e55f7b0033e409abd8ee8ce088cb5af.png
[fd236a493f4c48c7b54a3e00a33300ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/42ac751b26ef454f9ad3e1289ad90347.png
[413c2f95760b47828acfb5c6af158246.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a4e0474dad07403897aaed3fc9f0df86.png
[1ebe5147e5674bbe899e110b3418d994.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4419485df67b4d9f99ff08f06085e78a.png
[History]: http://www.w3school.com.cn/js/js_window_history.asp
[Location]: http://www.w3school.com.cn/js/js_window_location.asp
[Navigator]: http://www.w3school.com.cn/js/js_window_navigator.asp
[fc22f52a891f48ae96ed0fb08d7219ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d6839029e19b4688b170833250eded75.png
[607b0be5ece34d51b90260d374ab741d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a4ed9828a29a41f2b40e6a8928911e71.png
[717d09c3050b4547964e803ff3885b2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c164438b761a4434857ce48497cf21b2.png
[19bb8800aeda475d8769762b75180fc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/13ff7101f42c4372b8db4b1b33432685.png
[d27d10ca54704ac89f99dd801941a554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2b6ff92dd1624200a1ee92bf372700f9.png
[d630636c534e456296bfb413bcb92fb6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9b60c97a2e18497ca8415bfdb34a19fd.png
[HTML]: http://www.w3school.com.cn/jsref/dom_obj_anchor.asp
[8b54c0f5079c48cbbfba2cd4019ea32f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9370eafaa31a485bb45d3c95f460a8b6.png
[35ec1bafba3741a98c8959ca46500a46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/66234f7d8e4d4a34b9604e67311cba5c.png
[9e58b0ebb99f4c8a847326f1e8547f28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6c2eee60762741c58a02ffb7284a3138.png
[4c880550692c4736adc5355cd8e4dceb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1420fd64cd434be48f3871bd24622f91.png

【JavaWeb】JavaScript

发表评论取消回复

还没有评论，来说两句吧...

相关阅读