JavaWeb - 3 - JavaScript(JS)
JavaScript(JS)官方参考文档：JavaScript 教程
· JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互（脚本语言就不需要编译，直接通过浏览器解析）
· JavaScript和Java是完全不同的语言，无论是概念还是设计。但是基础语法类似
· JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准（ECMA：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。JavaScript是遵守ECMAScript的标准的）
· ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）
一. JS引入方式
· 内部脚本：将JS代码定义在HTML页面中
· JavaScript代码必须位于<script></script>标签之间
· 在HTML文档中，可以在任意地方，放置任意数量的<script></script>
· 一般会把脚本置于<body>元素的底部，可改善显示速度
· 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
· 外部JS文件中，只包含JS代码，不包含<script>标签
· <script>标签不能自闭合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS引入方式</title><!-- 内部脚本 --><!-- <script>alert('Hello JS')</script> --><!-- 外部脚本 --><script src="js/demo.js"></script><!-- <script src="js/demo.js" /> --> <!-- 不能自闭合 --><!-- js/demo.js的内容 --><!-- alert('Hello js'); -->
</head>
<body></body>
</html><!-- 在HTML文档中，可以在任意地方，放置任意数量的<script></script> -->
<!-- <script>alert('Hello JS')
</script> -->二. JS基础语法
2.1 书写语法
· 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
· 每行结尾的分号可有可无
· 注释：
· 单行注释：//注释内容
· 多行注释：/* 注释内容 */
· 大括号代表代码块
2.2 输出语句
· 使用window.alert()写入警告框
· 使用document.write()写入HTML输出
· 使用console.log()写入浏览器控制台
<script>
window.alert("Hello JavaScript"); //浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML，在浏览器显示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>// 单行注释快捷键：ctrl + / // alert('Hello JS'); //单行注释// 多行注释快捷键：ctrl + shift + //* alert('Hello JS')多行注释*/alert('Hello JS'); /* js代码每行结尾的分号可有可无，建议加上 */window.alert("Hello JavaScript"); //浏览器弹出警告框document.write("Hello JavaScript"); //写入HTML，在浏览器显示console.log("Hello JavaScript"); //写入浏览器控制台
</script>
</html>2.3 变量
· JavaScript中用var关键字（variable的缩写）来声明变量
· JavaScript是一门弱类型语言，变量可以存放不同类型的值
· 变量名需要遵循如下规则：
· 组成字符可以是任意字母、数字、下划线（_）或美元符号（$）
· 数字不能开头
· 建议使用驼峰命名
注意事项：
· ECMAScript 6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
· ECMAScript 6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>//JavaScript是一门弱类型语言，变量可以存放不同类型的值var a = 20;a = "张三";alert(a); //张三/* var关键字var特点1：作用域比较大，是全局变量var特点2：可以重复定义的 */{var x = 1;alert(x); //1var x = "A"; //重复定义，后面定义的会把前面定义的覆盖掉}alert(x); //A/* let关键字let关键字定义的是局部变量，只在let关键字所在的代码块内有效，且不允许重复定义 */{let x = 1;alert(x); //1// let x = "A"; //let关键字不允许重复定义，因此加了这行会直接标红}alert(x); //let关键字定义的是局部变量，只在let关键字所在的代码块内有效。因此这里会显示A（上面var定义的x）//const：常量，不能被改变的const pi = 3.14;pi = 3.15;alert(pi); //这里不会显示
</script>
</html>2.4 数据类型
JavaScript中分为：原始类型 和 引用类型
原始类型
Number：数字（整数、小数、NaN（Not a Number））
String：字符串，单双引皆可
Boolean：布尔。true，false
Null：对象为空
Undefined：当声明的变量未初始化时，该变量的默认值是undefined
注：使用typeof运算符可以获取数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>//原始数据类型alert(typeof 3); //numberalert(typeof 3.14); //numberalert(typeof "A"); //stringalert(typeof 'hello'); //stringalert(typeof true); //booleanalert(typeof false); //booleanalert(typeof null); //objectvar a;alert(typeof a); //undefined
</script>
</html>
2.5 运算符
算术运算符：+ ，- ，* ，/ ，% ，++ ，--
赋值运算符：= ，+= ，-= ，*= ，/= ，%=
比较运算符：> ，< ，>= ，<= ，!= ，== ，===
逻辑运算符：&& ，|| ，!
三元运算符：条件表达式 ? true_value : false_value
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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); //truealert(age === _age); //falsealert(age === $age); //true
</script>
</html>
2.6 类型转换
· 字符串String类型转为数字Number：
将字符串字面值转为数字，如果字面值不是数字，则转为NaN
· 其他类型转为Boolean：
Number：0和NaN为false，其他均转为true
String：空字符串("")为false，其他均转为true
Null和Undefined：均转为false
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>//类型转换 - 字符串类型转为数字alert(parseInt("12")); //12alert(parseInt("12A45")); //12（转换到不是数字前的部分）alert(parseInt("A45")); //NaN//类型转换 - Number类型转为Booleanif(0){ //falsealert("0 转换为false");}if(NaN){ //falsealert("NaN 转换为false");}if(1){ //true(因此这里会执行)alert("除了0和NaN，其他数字都转换为true");}//类型转换 - String类型转为Booleanif(""){ //falsealert("空字符串为false，其他都是true");}if(" "){ //true(因此这里会执行)alert("空字符串为false，其他都是true");}//类型转换 - Null和Undefined转为booleanif(null){ //falsealert("null转化为false");}if(undefined){ //falsealert("undefined转化为false");}
</script>
</html>
2.7 流程控制语句
· if…else if…else…
· switch
· for
· while
· do…while
三. JS函数
介绍：函数（方法）是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键字进行定义，语法为：
function functionName(参数1,参数2…){
//要执行的代码
}
定义方式二：
var functionName = function(参数1,参数2…){
//要执行的代码
}
注意：
· 形式参数不需要类型，因为JavaScript是弱类型语言
· 返回值也不需要定义类型，可以再函数内部直接使用return返回即可
注意事项：JS中，函数调用可以传递任意个数的参数
调用：函数名称(实际参数列表)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS函数</title>
</head>
<body></body>
<script>//定义函数方式1//通过function关键字进行定义 function 函数名(形参列表){}//这种方式定义函数,调用的位置可以在函数前面也可以在函数后面var rs = add(1,2);alert(rs);function add(a,b){return a+b;}var rs = add(1,2);alert(rs);//定义函数方式2//通过var关键字进行定义 var 函数名 = function(形参列表){}//这种方式定义函数，调用的位置一定要在函数前面，否则失败var add1 = function(a,b){return a+b;}var rs1 = add1(3,4);alert(rs1);
</script>
</html>四. JS对象
js对象可以分为三类：基础对象（Array、String、JSON等……），BOM对象（浏览器对象模型）、DOM对象（文档对象模型）
4.1 Array数组
JavaScript中Array对象用来定义数组
定义
var 变量名 = new Array(元素列表); //方式一
var arr = new Array(1,2,3,4);
var 变量名 = [元素列表]; //方式二
var arr = [1,2,3,4];
访问
arr[索引] = 值;
arr[10] = "hello";
注意事项：JS中的数组相当于Java中的集合，数组的长度是可变的，而JS是弱类型，所以可以存储任意的类型的数据
Array常见的属性和方法
| 属性 | 描述 |
| length | 设置或返回数组中元素的数量 |
| 方法 | 描述 |
| forEach() | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push() | 将新元素添加到数组的末尾，并返回新的长度 |
| splice() | 从数组中删除元素 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-Array</title>
</head>
<body></body>
<script>//定义数组var arr1 = new Array(1,2,3,4);var arr2 = [5,6,7,8];//length属性(获取数组长度)for (let index = 0; index < arr1.length; index++) {//console.log 快捷输入方式 直接输入logconsole.log(arr1[index]);}for (let index = 0; index < arr2.length; index++) {console.log(arr2[index]);}//JS中的数组类似于Java中的集合//JS中的数组的特点:长度可变,类型可变//长度可变arr1[10] = 50; //索引值10位置有元素后,数组长度变成了11,此时索引值4-9的位置中输出的会是undefined(相当于声明了但是没有初始化)// console.log(arr1); //直接输出数组([1,2,3,4,undefined,undefined,undefined,undefined,undefined,undefined,50])//类型可变arr1[9] = "ABC";arr1[8] = true;arr1[7] = null;// console.log(arr1); //直接输出数组([1,2,3,4,undefined,undefined,undefined,null,true,"ABC",50])//forEach():遍历数组中的每个有值的元素，并调用一次传入的函数arr1.forEach(function(e){document.write(e); //1234nulltrueABC50 (只遍历有值的元素)console.log(e);})//在ES6中提供了箭头函数,可以简化上面的代码//箭头函数: (…) => {…} 简化函数定义arr2.forEach((e) => {console.log(e);})//push():将新元素添加到数组的末尾，并返回新的长度arr1.push(11,12,13); // console.log(arr1); //直接输出数组([1,2,3,4,undefined,undefined,undefined,null,true,"ABC",50,11,12,13])//splice():从数组中删除元素arr1.splice(2,5); //从索引为2的位置开始删除,删除5个元素console.log(arr1); //直接输出数组([1,2,null,true,"ABC",50,11,12,13])
</script>
</html>4.2 String字符串
String字符串对象创建方式有两种
var 变量名 = new String("…"); //方式一
var str = new String("hello world");
var 变量名 = "…"; //方式二
var str = "hello world";
var str = 'hello world'; //双引号和单引号都可以
String字符串常见的属性和方法
| 属性 | 描述 |
| length | 字符串的长度 |
| 方法 | 描述 |
| charAt() | 返回在指定位置的字符 |
| indexOf() | 检索字符串 |
| trim() | 去除字符串两边的空格 |
| substring() | 提取字符串中两个指定的索引号之间的字符（截取字符串） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-String</title>
</head>
<body></body>
<script>//创建字符串对象var str1 = new String("Hello World");console.log(str1); //输出的是String {'Hello World'}（每个索引位置保存一个字符）//var str2 = " hello world ";console.log(str2); //直接输出hello world//length属性：字符串的长度console.log(str2.length);//charAt():返回在指定位置的字符console.log(str2.charAt(2)); //h 返回索引2位置的字符//indexOf():检索字符串console.log(str2.indexOf("lo")); //5（从索引5开始）//trim():去除字符串两边的空格var s = str2.trim();console.log(s);console.log(str2);//substring():提取字符串中两个指定的索引号之间的字符（截取字符串）//substring(start,end) --开始索引，结束索引，含头不含尾console.log(str2.substring(2,7));
</script>
</html>4.3 JSON
4.3.1 JavaScript自定义对象
定义格式：
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
调用格式：
对象名.属性名;
console.log(user.name);
对象名.函数名();
user.eat();
4.3.2 JSON
· 概念：JavaScript Object Notation，JavaScript对象标记法
· JSON是通过JavaScript对象标记书写的文本
· 由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输
· 定义
var 变量名 = '{"key1":value1,"key2":value2}';
var userStr = '{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';
key一定要用双引号包裹，不写或者单引号都是错的
value的数据类型为：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号[]中）、对象（在花括号{}中）、null
JSON字符串转为JS对象
var jsObject = JSON.parse(jsonStr);
JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-JSON</title>
</head>
<body></body>
<script>//自定义对象var user = {name:"Tom",age:19,gender:'男',// eat:function(){// alert("Tom在吃饭");// }//自定义对象中函数的写法可以简化eat(){alert("Tom在吃饭");}}alert(user.name);user.eat();//定义JSONvar jsonStr = '{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';alert(jsonStr.name); //undefined(因为这里的jsonStr其实就是字符串)//JSON字符串转js对象var obj = JSON.parse(jsonStr);alert(obj.name); //Jerry//js对象转JSON字符串var jsonstring = JSON.stringify(obj);alert(jsonstring); //{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}
</script>
</html>4.4 BOM
· 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象
· 组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
4.4.1 Window
· 介绍：浏览器窗口对象
· 获取：直接使用window，其中window可以省略
window.alert("hello");
alert("hello");
· 属性：
· history：对History对象的只读引用
· location：用于窗口或框架的Location对象
· navigator：对Navigator对象的只读引用
· 方法：
· alert()：显示带有一段消息和一个确认按钮的警告框
· confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
· setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
· setTimeout()：在指定的毫秒数后调用函数或计算表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-BOM-window</title>
</head>
<body></body>
<script>//获取window.alert("hello1");alert("hello2");//方法//confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框var flag = confirm("确认删除吗？");console.log(flag); //确认返回true 取消返回false//定时器setTimeout()：在指定的毫秒数后调用函数或计算表达式（延迟指定时间后执行一次）setTimeout(function(){alert("定时器执行了！");},3000);//定时器setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式（周期性的执行某一个函数）var count = 0;setInterval(function(){count++;console.log("定时器执行了"+count+"次");},2000); //2000代表2秒（即2000毫秒）
</script>
</html>4.4.2 Location
· 介绍：地址栏对象
· 获取：使用window.location获取，其中window可以省略
window.location.属性;
location.属性;
· 属性：
· href：设置或返回完整的URL
location.href = "百度一下，你就知道";
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-BOM-location</title>
</head>
<body></body>
<script>//locationalert(location.href);location.href = "https://www.baidu.com";
</script>
</html>4.5 DOM
· 概念：Document Object Model，文档对象模型
· 将标记语言的各个组成部分封装为对应的对象：
· Document：整个文档对象
· Element：元素对象
· Attribute：属性对象
· Text：文本对象
· Comment：注释对象
· JavaScript通过DOM，就能够对HTML进行操作：
· 改变HTML元素的内容
· 改变HTML元素的样式（CSS）
· 对HTML 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>DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1. Core DOM - 所有文档类型的标准模型
· Document：整个文档对象
· Element：元素对象
· Attribute：属性对象
· Text：文本对象
· Comment：注释对象
2. XML DOM - XML文档的标准模型
3. HTML DOM - HTML文档的标准模型
· Image：<img>
· Button：<input type='button'>
· HTML中的Element对象可以通过Document对象获取，而Document对象是通过windows对象获取的
· Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
2. 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
3. 根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
4. 根据class属性值获取，返回Element对象数组
var class = document.getElementsByClassName('cls');
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-DOM</title>
</head>
<body><img id="h1" src="./img/1.jpg"> <br><br><div class="cls">你好前端</div> <br><div class="cls">你好前端三剑客</div> <br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">游戏<input type="checkbox" name="hobby">旅游
</body>
<script>//1.获取Element对象//获取元素-根据id获取var img = document.getElementById("h1");alert(img); //[object HTMLImageElement]//获取元素-根据标签获取var divs = document.getElementsByTagName("div");for (let index = 0; index < divs.length; index++) {alert(divs[index]); //[object HTMLDivElement]}//获取元素-根据name属性获取var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {alert(hobbys[index]); //[object HTMLInputElement]}//获取元素-根据class属性获取var divs_2 = document.getElementsByClassName("cls");for (let index = 0; index < divs_2.length; index++) {alert(divs_2[index]); //[object HTMLDivElement]}//2.查询参考手册，属性、方法var div2 = divs_2[0];div2.innerHTML = "你好前端你好前端";
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-DOM</title>
</head>
<body><img id="h1" src="./img/1.jpg"> <br><br><div class="cls">你好前端</div> <br><div class="cls">你好前端三剑客</div> <br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">游戏<input type="checkbox" name="hobby">旅游
</body>
<script>//1.获取Element对象//获取元素-根据id获取var img = document.getElementById("h1");//点亮图片的效果其实就是切换图片（改变src的属性值）img.src = "./img/2.jpg";//获取元素-根据标签获取var divs = document.getElementsByTagName("div"); for (let index = 0; index < divs.length; index++) {//在所有文本后面加very good(红色字体) --<font color='red'></font>divs[index].innerHTML += "<font color='red'>very good</font>";}//获取元素-根据name属性获取var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {//使所有的复选框呈现选中的状态hobbys[index].checked = true; //选中}
</script>
</html>五. JS事件监听
事件：HTML事件是发生在HTML元素上的“事情”。比如：按钮被点击、鼠标移动到元素上、按下键盘按键等
事件监听：JavaScript可以在事件被侦测到时执行代码
5.1 事件绑定
方式一：通过HTML标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件绑定</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body>
<script>//事件绑定方式1function on(){alert("事件绑定1按钮被点击");}//事件绑定方式2var btn2 = document.getElementById("btn2");btn2.onclick = function(){alert("事件绑定2按钮被点击");}
</script>
</html>5.2 常见事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
<!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 onload="load()"><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="b1" type="submit" value="提交"><input id="b1" type="button" value="单击事件" onclick="fn1()"></form> <br><br><br><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table></body><script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}</script>
</html>5.3 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-DOM</title>
</head>
<body><img id="h1" src="./img/1.jpg" width="300px"> <br><br><input type="button" id="btn1" value="点亮" onclick="fc1()"><input type="button" id="btn2" value="熄灭" onclick="fc2()"><br><br><input type="text" id="textbox" value="ABC" onfocus="fc3()" onblur="fc4()"><br><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">游戏<input type="checkbox" name="hobby">旅游<br><br><input type="button" id="btn3" value="全选" onclick="fc5()"><input type="button" id="btn4" value="反选" onclick="fc6()">
</body>
<script>//fc1和fc2实现切换图片function fc1(){var img = document.getElementById("h1");img.src = "./img/2.jpg";console.log("点击点亮按钮切换到图片2");}function fc2(){var img = document.getElementById("h1");img.src = "./img/1.jpg";console.log("点击熄灭按钮切换到图片1");}//fc3获得焦点的时候文本变成小写 fc4失去焦点的时候文本变成大写function fc3(){var text = document.getElementById("textbox");text.value = text.value.toLowerCase(); //字符串的toLowerCase()方法console.log("获得焦点的时候文本变成小写");}function fc4(){var text = document.getElementById("textbox");text.value = text.value.toUpperCase(); //字符串的toUpperCase()方法console.log("失去焦点的时候文本变成大写");}//fc5点击按钮全选，fc点击按钮全不选function fc5(){var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {hobbys[index].checked = true;}console.log("已经全选");}function fc6(){var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {hobbys[index].checked = false;}console.log("已经全不选");}
</script>
</html>相关文章：
JavaWeb - 3 - JavaScript(JS)
JavaScript(JS)官方参考文档：JavaScript 教程 JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互（脚本语言就不需要编译，直接通过浏览器…...
基于springboot+vue的美食烹饪互动平台
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作 主要内容：毕业设计(Javaweb项目|小程序|Pyt…...
linux中操作服务器常用命令
在Linux中操作服务器时，常用的命令包括： ls：列出目录内容。 cd：切换目录。 pwd：显示当前所在的目录路径。 mkdir：创建一个新的目录。 rmdir：删除一个空的目录。 cp：复制文件或目录。…...
最简k8s部署（AWS Load Balancer Controller使用）
问题 我需要在k8s集群里面部署springboot服务，通过k8s ingress访问集群内部的springboot服务，应该怎么做？ 这里假设已经准备好k8s集群，而且也准备好springboot服务的运行镜像了。这里我们将精力放在k8s服务编排上面。 一图胜千言…...
差距拉开了！量化大厂最新业绩排行曝光！
经历了一月份的失落和二月份绝地反攻，量化大厂们的整体业绩备受关注。 而今年2月份的量化战绩，甚为关键！ 毕竟市场指数“前低后高”，基金经理与投资人开年以来，共同经历了“惊心动魄”的考验。 量化大厂，…...
【Web前端】Vue核心基础
文章目录 1. Vue简介2. Vue官网使用指南3. 初识Vue3.1 搭建Vue开发环境3.2 HelloWorld案例3.3 el与data的两种写法3.4 MVVM模型3.5 模板语法 4. 数据绑定4.1 v-bind单向数据绑定4.2 v-model双向数据绑定 5. 事件处理5.1 v-on绑定事件5.2 事件修饰符5.3 键盘事件 6. 计算属性6.1…...
Linux操作系统项目上传Github代码仓库指南
文章目录 1 创建SSH key2.本地git的用户名和邮箱设置3.测试连接4.创建仓库5.终端项目上传 1 创建SSH key 1.登录github官网,点击个人头像,点击Settings,然后点击SSH and GPG keys,再点击New SSH key。 Title 可以随便取，但是 key 需要通过终端生成。 Linux终端执行…...
机器学习--循环神经网路（RNN）2
在这篇文章中，我们介绍一下其他的RNN。 一.深层RNN 循环神经网络的架构是可以任意设计的，之前提到的 RNN 只有一个隐藏层，但 RNN 也可以是深层的。比如把 xt 丢进去之后，它可以通过一个隐藏层，再通过第二个隐藏层&am…...
sheng的学习笔记-AI-多分类学习:ECOC,softmax
目录：sheng的学习笔记-AI目录-CSDN博客 基本术语： 若我们欲预测的是离散值，例如“好瓜”“坏瓜”，此类学习任务称为“分类”(classification)； 若欲预测的是连续值，例如西瓜成熟度0.95、0.37，…...
ChatGPT Plus 支付出现「您的银行卡被拒绝/your card has been declined」怎么办？
ChatGPT Plus 支付出现「您的银行卡被拒绝/your card has been declined」怎么办？ 在订阅 ChatGPT Plus 或者 OpenAI API 时，有时候会出现已下报错 ： Your card has been declined. 您的银行卡被拒绝 出现这种错误，有以下几个解…...
typescript学习(更新中)
目录 开发环境搭建类型如何声明有哪些类型编译配置文件 开发环境搭建 npm i -g typescripttsc检查是否安装成功 类型如何声明 // 先声明再赋值 let a: number a 1// 直接赋值 let b 1function sum(a: number, b: number): number {return a b } console.log(sum(1, 2))有…...
T2 小美的平衡矩阵(25分) - 美团编程题 题解
考试平台： 牛客网 题目类型： 30道单选题（60分） 2 道编程题 （15分 25分） 考试时间： 2024-03-09 （两小时） 题目描述 小美拿到了一个n*n的矩阵，其中每个元素是…...
13:大数据与Hadoop｜分布式文件系统｜分布式Hadoop集群
大数据与Hadoop｜分布式文件系统｜分布式Hadoop集群 Hadoop部署Hadoop HDFS分布式文件系统HDFS部署步骤一：环境准备HDFS配置文件 查官方手册配置Hadoop集群 日志与排错 mapreduce 分布式离线计算框架YARN集群资源管理系统步骤一：安装…...
前端知识点、技巧、webpack、性能优化（持续更新~）
1、 请求太多 页面加载慢 （webpack性能优化） 可以把 图片转换成 base64 放在src里面 减少服务器请求 但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack 进行 性能优化 （官网有详细描述）...
红队专题-开源漏扫-巡风xunfeng源码剖析与应用
开源漏扫-巡风xunfeng 介绍主体两部分：网络资产识别引擎，漏洞检测引擎。代码赏析插件编写JSON标示符Python脚本此外系统内嵌了辅助验证功能文件结构功能 模块添加IP三. 进行扫描在这里插入图片描述 
统计接口调用耗时情况设计思路（大厂面试题）
gateway统计接口调用耗时情况设计思路（大厂面试题） 详情视频可以去看尚硅谷2024周阳老师的springCloud P86 知识出处自定义全局过滤器官网https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#gateway-combined-global-filter-…...
Elasticsearch：什么是 DevOps？
DevOps 定义 DevOps 是一种现代软件开发方法，它将公司软件开发 (Dev) 和 IT 运营 (Ops) 团队的工作结合起来并实现自动化。 DevOps 提倡这样一种理念：这些传统上独立的团队在协作方面比在孤岛中更有效。 理想情况下，DevOps 团队共同努力改进…...
C语言基础练习——Day03
目录 选择题 编程题 记负均正 旋转数组的最小数字 选择题 1、已知函数的原型是：int fun(char b[10], int *a);，设定义：char c[10];int d;，正确的调用语句是 A fun(c,&d);B fun(c,d);C fun(&c,&d);D fun(&c,d); 答…...
膜厚测量仪在半导体应用中及其重要
随着科技的不断发展，半导体行业已成为当今世界的核心产业之一。在这个领域中，半导体膜厚测量仪作为关键设备，其精度和可靠性对于产品质量和生产效率具有至关重要的作用。本文将详细介绍半导体膜厚测量仪的工作原理、应用领域以及其在半导体制…...
【前端】-初始前端以及html的学习
💖作者：小树苗渴望变成参天大树🎈 🎉作者宣言：认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏：C语言,数据结构初阶,Linux,C 动态规划算法🎄 如 果 你 …...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
大语言模型如何处理长文本？常用文本分割技术详解
为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生，小白用户，想学习知识的 有点基础，想要通过项…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程 触发条件：当其他组件（如Activity、Service）通过ContentR…...
Chrome 浏览器前端与客户端双向通信实战
Chrome 前端（即页面 JS / Web UI）与客户端（C 后端）的交互机制，是 Chromium 架构中非常核心的一环。下面我将按常见场景，从通道、流程、技术栈几个角度做一套完整的分析，特别适合你这种在分析和改…...