01-07JavaScript
- JavaScript概念
- 变量
- 原始数据类型
- 运算符
- 打印方式
- Date 对象
- 流程控制
- 函数
- JavaScript对象
- BOM
- DOM
- Ajax
JavaScript
概念：JavaScript是一种解释性脚本语言（代码不进行预编译），由浏览器解释执行，用来向页面添加交互行为
组成：
ECMAScript（核心）描述了Js的基本语法：类型、语句、关键字、保留字、运算符和对象等
BOM（浏览器对象模型）浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小等
DOM（文档对象模型）把整个文档中的所有节点解析成一个一个对象，并且这些对象之间会形成一个层级关系，通过DOM可以对文档中所有节点做CRUD操作
JavaScript三种写法：
- 内联使用
<a href="javascript:alert('这是行内JS');">点我召唤神龙！</a>
alert(参数值)：是用来弹出一个提示框，弹框中的提示信息即为传入的参数值
上述代码中，我们将JS代码写在href属性中，这样我们在点击链接的时候，执行的就不是跳转地址，而是其中的JS代码：
也可以用console.log()将信息打印到浏览器的控制台
- 内部使用 写在一组
<script type="text/javascript">
alert("hello，这是内部JS");
</script>
- 外部使用 先单独定义一个JS文件，然后将这个JS文件作用于当前项目，只需引入就好。
注意：
引用JS代码的script标签里面不能再写JS代码
变量
命名规范：
变量名规范：跟Java一样
必须:
- 由数字，字母，下划线，$组成，数字不能开头
- 不能使用关键字
- 严格区分大小写
建议：
- 遵循驼峰命名
- 见名知意
- 中文可以使用，但是不建议
在js中声明变量: 他们所有只要在function里面声明，它们的作用域都是 局部的:
var:声明是函数级别（在方法里面声明的是局部变量）允许重复声明，可以进行重新赋值。
// 声明一个变量 var a; // 如果未提前赋值，那么变量的值将为undefined var a = 1; // 声明一个a变量，里面放入整数 var a = 1.5; var a = "abc"; var a = 'd'; console.log(a); // 输出 d // var可以装任何类型的值 允许相同变量重复声明，后面的值会覆盖前面的值 ---------------------------------------------------------------------- // 使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。 { var x = 2; } // 这里可以使用 x 变量 例子： var i = 5; for (var i = 0; i < 10; i++) { // 一些代码... } // 这里输出 i 为 10 // 在这个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。let:声明是块级级别（在语句中声明变量） 不允许重复声明，重新赋值。
let b = "老王,掉了啥..."; b = 23; console.log(b); // 输出23 let不允许重复声明相同的变量 ---------------------------------------------------------------------- // let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。 { let x = 2; } // 这里不能使用 x 变量 例子： var i = 5; for (let i = 0; i < 10; i++) { // 一些代码... } // 这里输出 i 为 5 // 在这个实例中，使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响。const：用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：
const NUM = 10; // 变量名要大写 ---------------------------------------------------------------------- const定义常量与使用let 定义的变量相似： 二者都是块级作用域 都不能和它所在作用域内的其他变量或函数拥有相同的名称 两者还有以下两点区别： const 声明的常量必须初始化，而let声明的变量不用 const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。
JavaScript原始数据类型
JavaScript中的原始数据类型相当于Java的基本数据类型：number，boolean，string，null，undefined
-
number数值类型
1.无穷数
数字是有取值边界的，超出最大数取值为Infinity（正无穷），超出最小数取值为-Infinity（负无穷）
2.非数
非数：不是数字，在JS中采用NAN来表示，同样在JS中采用了isNaN()函数来判定当前字符是否真的不是数字
(1) 与任何值均不相等，包括自己本身
(2) 任何涉及NaN的操作都会返回NaN
typeof 和typeof()判断当前变量属于那种数据类型
var username = "rose";
var sal = 5632.3;
var isGirl = true;
var wifi = null; //空对象 所有的对象都是object
var a = undefined; //未定义
console.log(typeof username); //string
console.log(typeof sal); //number
console.log(typeof isGirl); //boolean
console.log(typeof wifi); //object
console.log(typeof a); //undefined
console.log(typeof(b)); //undefined
- boolean布尔类型 布尔类型和Java一样，采用true和false表示
- string字符串类型 JS语法中不存在char类型，所以由单引号或双引号括起来的字符序列，任何字符串的长度都可以通过访问length属性获得
- null空对象 表示一个不存在的对象，只有一个值null。null被认为是空对象，所有typeof出来的结果是object
- undefined未定义或未初始化 声明之后未赋值，或未申明的都是undefined
JavaScript运算符
JS中同样存在算术运算符、比较运算符、逻辑运算符的操作，这些运算符的操作和JAVA一样
-
赋值运算符
-
算术运算符
-
关系/比较运算符
比较运算符用于判断两个变量大小关系：>、<、、<=、>=、=、!=、!===
(1) == ：代表相等(它只比较内容，不比较类型)
var x=10; var y="10"; console.debug(x==y); //true console.debug(x===y); //false console.debug(x!==y); //true(2) ===：绝对相等(先比较类型，再比较内容)
(3) !==：绝对不等
-
逻辑运算符
&& ：逻辑AND运算符，一假遍假
|| ：逻辑OR运算符 ，一真遍真
! ：逻辑NOT运算符，真为假，假为真
打印方式
- alert():弹出
var a = 1; alert("a = " + a);
- 通过document.write()向页面写入 document.writeln() 可以在输出内容后面加一个空格
let a = false; document.write(a); a = "去百度"; document.write("" + a + "");
- 通过浏览器的控制台打印
console.log(a); console.log("dsgfdg");
Date 对象
Date 对象用于处理日期与时间。
创建 Date 对象： new Date()
var d = new Date(); var d = new Date(milliseconds); // 参数为毫秒 var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); // milliseconds 参数是一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。 // dateString 参数表示日期的字符串值。 // year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。
流程控制
分支：
(1) if语句
(2) switch语句
循环：
(1) while语句
(2) do-while语句
(3) for循环break/continue语句
三目表达式
注意：在js中，所有的变量都可以直接判断真假，只要有内容或定义了的对象（值、对象，0除外）进行判断时就是true（包括{}、[]）
没有内容或不存在的，如 0、“”、undefined、NaN (not a number)、null、false(基本数据类型的false)。他们都是false
函数
概念：函数是一组可以随时运行的代码语句，可以理解为方法
函数作用：可以避免载入时执行，可以被多次调用
- 语法：
function 函数名：小驼峰(参数列表...){
JS代码;
[return 返回值;]
}
// JS中函数的定义使用function关键字，这一点是和Java不一样的地方，同时允许函数具备返回值，返回值采用关键字return，如果函数没有定义返回值，接收到的将是一个undefined
例：
function $action(){
console.debug(“函数定义测试”);
}
var x = $action(); //使用函数名完成函数调用，并定义一个变量接收返回值console.debug(“函数定义测试”);
//输出undefined，因为函数中并没有定义返回值
- 全局变量和局部变量
概念：全局变量：函数外面声明，局部变量：函数里面声明的
作用：JavaScript 全局属性和方法可用于创建Javascript对象。
- 匿名函数
概念：就是一个没有定义名称的函数
var 变量名 = function() {
}
匿名函数的调用，声明变量名() ：
// 1
var action = function(){
console.debug(“前方高能，请非战斗人员迅速撤离”);
}
action(); // 调用匿名函数
// 2
(function){
})(); // 自己调用自己
JavaScript对象
注意：在ES5中没有类的概念，它的对象就是Java中的类。new出来的可以称为实例
js的对象有三大类，内部对象（本地对象和内置对象）、宿主对象和自定义对象
内部对象包括本地对象和内置对象；
- 本地对象可以new实例，方法或函数式通过实例调用的
- 内置对象不能使用new关键字创建实例，方法调用也不需要通过实例去调用
- 宿主对象指的是BOM和DOM中的所有对象
- 自定义对象就是开发人员自己定义的对象
- 本地对象
本地对象就是 ECMA-262 定义的类（引用类型）
这些引用类型在运行过程中需要通过new来创建所需的实例
包括：Object、Boolean、Number、Date、String、Array等，重点掌握Date和String，其它的到API文档里去找即可
1.1 Date日期
需求：将转换日期的代码封装成方法，重复使用:
//1.创建一个对象
var date = new Date();
//2.给这个对象添加方法
date.dateFormat = function() {
var d = new Date();
var year = d.getFullYear();
//返回的月份是从0开始11结束
var month = d.getMonth() + 1;
//月中的天数是从1到31
var day2 = d.getDate();
//取值范围0到23
var hour = d.getHours();
//取值范围是0到59
var minute = d.getMinutes();
//取值范围是0到59
var second = d.getSeconds();
//yyyy/MM/mm HH:mm:ss
console.debug(year + '/' + month + '/' + day2);
}
1.2. String字符串
split()：用于把一个字符串分割成字符串数组
var str ="a.b.c.D.e.F"; console.debug(str.split('.')); console.debug(str.toLowerCase()); console.debug(str.toUpperCase());toLowerCase()：用于把字符串转换为小写
toUpperCase()：用于把字符串转换为大写
substring()：用于提取字符串中介于两个指定下标之间的字符，不包括结束位置的字符var str="01234567"; //主要是为了能和下标相对应 console.debug(str5.substring(3));//34567 console.debug(str5.substring(3, 2));charCodeAt(index)：返回指定位置的unicode码
var str1 = "abcde"; console.debug(str1.charCodeAt(0));//取到对应索引处的unicode码fromCharCode()：相当于静态方法，用法：String.fromCharCode(65);可接受一个指定的 Unicode 值，然后返回一个字符
console.debug(String.fromCharCode(65));
- 内置对象
概念：内置对象也是 ECMA-262 提供的。这些对象不需要通过new来创建所需的实例
包括：Global全局对象、Math数学对象这两个
Global：全局对象
//parseInt()函数的使用
var b = '123aaa';
//当遇到不能解析的内容的时候，parseInt会直接从该处放弃
console.debug(parseInt(b)); //123
var c='aa123aa';
console.debug(parseInt(c));//NaN
Math：数学计算对象
//1向上舍入 举例：假设数字为5.1 向上舍入的结果为6
//使用场景 分页 假设现在有11组数据，每两条数据分为一个部分，请问会有多少个部分？
console.debug(Math.ceil(5.1)); //6
console.debug(Math.ceil(11/2));//6
//2向下舍入 举例：假设数字为5.6 向下舍入的结果为5
console.debug(Math.floor(5.6)); //5
//3四舍五入 算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下取整
console.debug(Math.round(5.5));//6
console.debug(Math.round(5.4));//5
面试题:
Math.round(11.5)的结果是多少?;//12
Math.round(-11.5)的结果是多少?;//-11
- 自定义对象
概念：ES5中没有像Java中一样专门的class关键字定义类（ES6中可以用class定义类），所以在ES5中创建类其实和创建函数是一样的语法:
function 对象名/类名/方法名(){ // 方法名称小写，类或对象名称首字母大写
}
类中定义方法，有下列形式：
(1) 通过new的实例化对象添加方法
(2) 在对象中使用this关键字
(3) 通过prototype添加方法
- 通过实例
创建实例，动态的为实例赋值
function Foo(){}
var f1 = new Foo();
f1.name = "张三";
//添加方法
f1.say = function(){
console.log(11);
}
console.log(f1.name);
//调用方法
f1.say();
- 使用this
使用this关键字在对象中定义方法：
function Cat(){
this.name="小花";
this.age=1;
this.run = function(){
alert("run ... run ...")
}
}
function Person(name, age) {
this.name = name;
this.age = age;
this.talk = function(){
console.log(11);
}
}
var p=new Person('zs',21);
p.talk();
特点：这种方式添加的属性和方法属于所有实例
- prototype属性
- prototype对象是实现面向对象的一个重要机制
- 每个函数也是一个对象，它们对应的类就是function，每个函数对象都具有一个子对象prototype。
- Prototype 表示了该函数的原型，prototype表示了一个类的属性的集合。当通过new来生成一个类的对象时，prototype对象的属性就会成为实例化对象的属性
若在后面每次实例化的对象都有say方法，应当怎么添加方法?
Person.prototype.say=function(){ // 为Person类添加say方法
console.log("sayHi...");
}
var f2=new Person(); // 创建对象实例
f2.say(); // 调用say()方法
Person.prototype.gender; // 为Person类添加gender属性
<!-- 扩展Date对象，加一个方法 -->
<script>
Date.prototype.format = function() {
var y = this.getFullYear();
var m = this.getMonth() + 1;
var d = this.getDate();
var h = this.getHours();
var mm = this.getMinutes();
var s = this.getSeconds();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
h = h < 10 ? "0" + h : h;
mm = mm < 10 ? "0" + mm : mm;
s = s < 10 ? "0" + s : s;
var rq = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
return rq;
}
var d = new Date();
// console.log(d.format());
console.log(d.toDateString()); // 把 Date 对象的日期部分转换为可读字符串
console.log(d.toLocaleDateString()); // 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
console.log(d.toLocaleTimeString()); // 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
</script>
特点：这种动态添加的属性和方法属于所有实例，而且不会影响以前的功能
BOM: 浏览器对象模型 (Browser Object Model)
所有的BOM和DOM中的对象都称之为宿主对象；这个BOM有如下内容:
(1) 打开一个窗口就是一个window对象
(2) 窗口里面使用location表示地址栏
(3) 窗口的历史记录使用history来表示
(4) 浏览器的信息使用navigator来表示
(5) 窗口里面的内容使用document来表示
注意：BOM是包括DOM的
- window窗口对象
window对象是BOM中的顶级对象，默认可以省略（即调用其函数时可以省略window.）
window.alert("呵呵"); //等价于alert("呵呵");
注意：全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象
1.1. API
- alert() 提示框 confirm() 确认框
//消息框 alert('我是alert'); //确认框 参数：确认框中的提问信息 返回值：boolean var res = confirm('你能做我女朋友吗？'); console.debug(res);
- setTimeout() 定时器 setInterval() 周期性定时器
// setTimeout() 在指定的毫秒数后调用函数或计算表达式 setTimeout('document.getElementById("txt1").value=1', 5000); var res; // 创建了一个未定义的变量res //JS中不能同时使用单引号或者双引号进行嵌套 function start() { res = setInterval("document.getElementById('txt2').value = new Date();", 1000); //设置周期调用函数 } function stop() { clearTimeout(res); // 清除setInterval设置的定时器，这玩意也能取消setTimeout设置的定时器 } <input type="button" id="btn1" value="开始" onclick="start();" /> // 点击后调用start()函数，清除setInterval设置周期调用函数 <input type="text" id="txt1" value="" /> <input type="text" id="txt2" value="" /> <input type="button" id="btn2" value="停止" onclick="stop();" /> // 点击后调用stop()函数，清除setInterval设置周期调用函数
- location地址对象
概念：当前访问的网址的相关信息
2.1. API
var loc = window.location.href;//获取地址栏的url地址
alert(loc);
location.href = "http://www.baidu.com"; //前端js跳转 - 当前窗口跳转
window.open("http://www.baidu.com");//前端js跳转 - 新窗口跳转
DOM：文档对象模型（Document Object Model）
1. DOM概述
概念：DOM就是操作的是硬盘中的标签(对象)，叫DOM对象或节点对象
简称 DOM，将页面所有的内容表示为可以修改的对象
浏览器将我们编写在HTML中的每一个元素（Element）都变成了一个一个的对象
所有这些对象都可以通过JavaScript来对其进行访问，可以通过JavaScript来操作页面
这个将元素变为对象的过程称之为 文档对象模型（Document Object Model）
DOM树结构：通过DOM，树中的所有节点均可通过JS进行访问，所有的HTML元素均可被修改，也可以创建或删除节点
- 文档：一个页面就是一个文档，DOM中使用Document表示
- 元素：页面中所有标签都是元素，DOM中使用Element表示，元素是对于标签的统称
- 属性：标签中的所有属性在DOM中使用Attribute表示
- 文本：标签中的所有文本在DOM中使用Text表示
- 节点：通过DOM获取到的所有内容，例如：标签、标签属性、标签文本等，在DOM中使用node表示，也就是节点
DOM把以上内容都看做是对象
2. 元素操作
2.1 查询元素:
- getElementById()：通过标签元素的ID获取到标签对象
- getElementsByName()：通过标签元素的name属性获取到标签对象，返回的是数组
- getElementsByTagName()：通过标签名称获取到标签对象，返回的是数组
- document.documentElement:获取根节点html
- clientWidth：获取页面宽度 通过上方生成的对象来.这个方法
- clientHeight：获取页面高度
- document.body: 获取body节点body body专属获取方式
- parentNode：获取指定元素的父节点，返回Node
2.2 创建元素
创建新的元素：document.createElement(元素名称)
父节点追加子节点：appendChild(元素对象)
父节点删除子节点：父节点对象.removeChild(元素对象)：
修改元素：就是先删除再创建
2.3 文本操作
- innerHTML：设置或者获取双标签中的HTML文本
- innerText：设置或者获取双标签中的纯文本
- 区别
- HTML可以解析标签：如果输入的内容是标签包裹，可以解析
- Text原样展示输入的内容
- value：获取value属性值【所有的input，select下拉框，textarea等】
// 1、创建标签 // for(var i = 0; i < 10; i++) { // // document.createElement("标签名"); // 创建标签 // var spanElement = document.createElement("span"); // console.log(spanElement); // // 在双标签中放入内容：innerText:文本 innerHTML：标签 // spanElement.innerText = "你好"; // 在创建好的标签对象当中放入你好的文本 // // 将创建标签放入页面存在节点里面去 // var pElement = document.querySelector("p"); // pElement.appendChild(spanElement); // 将span 放到p标签里面 // } // 2、删除标签 // var divElment = document.querySelector("div"); // var aElement = document.querySelector("a"); // divElment.removeChild(aElement); // 从父节点中删除子节点 // 自删 var aElement = document.querySelector("a"); aElement.remove(); // 修改标签 var pElement = document.createElement("p"); pElement.innerHTML = "从持续创新"; var divElement = document.querySelector("div"); divElement.appendChild(pElement); console.log(divElement);
2.4 属性操作
- 方式一：元素对象.setAttribute(属性名称,属性值)
- 可以修改元素中本身不存在的属性
- 方式二：元素对象.属性名称 = 属性值
- 只能修改元素中本身存在的属性
3. onload
因为我们页面是从上至下执行，所以如果JS代码在元素标签前面，那么我们是获取不到元素对象的，因为页面还未执行到元素标签
两种解决方案
- 第一种：我们可以将JS代码写在标签后面
- 第二种：使用window.onload方法
- onload：延迟执行，等页面全都执行完成之后，再执行其中的JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 页面是从上至下执行的，如果我们的js代码在元素前面，那么我们是获取不到元素对象的，因为还没执行
// 解决办法：通过window下面的load方法，就可以解决
// onload：延迟执行，如果调用了他，那么你的JS代码会在页面全部加载完成之后，去执行
window.onload = function () {
var myDiv = document.getElementById("myDiv");
console.debug(myDiv);
}
</script>
</head>
<body>
<div id="myDiv" style="background: red; width: 200px; height: 200px;"></div>
</body>
</html>
4.事件注册
4.1 注册事件两种方式
- 第一种：元素上直接注册
- 第二种：元素.事件名称
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 单击事件第一种方式 */
var say = function () {
alert("这是一个单击事件")
}
/* 单击事件第二种方式 */
window.onload = function name() {
// 通过id值获取标签
var mybut = document.getElementById("mybut");
// 利用标签的onclick方法，给标签动态的添加一个单击事件
mybut.onclick = function () {
alert("这是第二种方式哦！！！")
}
}
</script>
</head>
<body>
<button onclick="say()">点我啊！！！</button>
<button id="mybut">第二种方式！！！</button>
</body>
</html>
4.2 事件部分API
onblur： 用户离开对象。失去焦点 - 【常用】
onfocus： 用户获得焦点 - 【常用】
onclick： 用户点击对象 - 【常用】
ondblclick： 用户双击对象 - 【常用】onkeydown： 按下键盘 - 【常用】
onkeypress： 按压键盘
onkeyup： 松开键盘onmousedown：用户按鼠标按钮
onmouseover：鼠标指针移动到对象上 - 【常用】
onmouseout： 鼠标指针移出对象 - 【常用】
onmouseup： 用户释放鼠标按钮onreset： 用户重置表单
onsubmit： 用户提交表单
onselect： 用户选取页面上的内容
onchange： 用户改变对象的值 - 【常用】
onunload： 用户关闭页面
onabort： 用户终止页面加载
onload： 页面完成加载 - 【常用】
<!-- 讲解为标签绑定事件：3种方式 -->
<!-- 1、直接在标签上加入 -->
<!-- <input type="text" name="username" onfocus="alert('获取焦点事件')" onblur="alert('失去焦点事件')" /> -->
<!-- <input type="text" name="username" onfocus="change()" onblur="resetColor()" />
<script>
function change() {
var inputElement = document.querySelector("input");
inputElement.setAttribute("style","color:red");
}
function resetColor() {
var inputElement = document.querySelector("input");
inputElement.setAttribute("style","color:gray");
}
</script> -->
<!-- 2、在标签对象上绑定 -->
<!-- <p>dsfdslfjdskf</p>
<script>
var pElement = document.querySelector("p");
// 给对象绑定事件
pElement.onclick = function() {
this.style.fontSize = "30px";
}
</script> -->
<!-- 3、addEventListener("事件名称",function(){}) -->
<img src="https://p6-pc-sign.douyinpic.com/tos-cn-i-0813/oAoATCfzAEzUbCAAZhAgt1hxybIdexSANALbbC~tplv-dy-aweme-images:q75.webp?biz_tag=aweme_images&from=3213915784&s=PackSourceEnum_SEO&sc=image&se=false&x-expires=1707274800&x-signature=VBe5aehaVxeecAbL7Pc9dgtevx4%3D" />
<script>
var imgElement = document.querySelector("img");
// 注册监听事件
imgElement.addEventListener('click',function() {
this.src = "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F82cfa2c0j00s6akxv001cd000hs00frp.jpg&thumbnail=660x2147483647&quality=80&type=jpg";
});
</script>
--------------------------------------------------------------------------------------------------------------------------------
<!-- 常用事件 -->
<!-- <script>
document.body.onkeydown = function() {
// event.keyCode; // 获取按键的键码
// console.log(event.keyCode);
if(event.keyCode == 38 || event.keyCode == 40) {
alert("老王好剑");
}
}
</script> -->
<div style="width: 200px; height: 200px; background-color: lime;">
</div>
<select name="select">
<option value="翠绿色">翠绿色</option>
<option value="老王黄">老王黄</option>
<option value="辰绿">辰绿</option>
<option value="蘋粉">蘋粉</option>
</select>
<script>
document.querySelector("select").onchange = function() {
var val = this.value;
if(val == "翠绿色") {
document.querySelector("div").style.backgroundColor = "lime";
} else if(val == "老王黄") {
document.querySelector("div").style.backgroundColor = "yellow";
}
else if(val == "辰绿") {
document.querySelector("div").style.backgroundColor = "green";
}
else if(val == "蘋粉") {
document.querySelector("div").style.backgroundColor = "pink";
}
}
</script>
打地鼠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打地鼠</title>
</head>
<body>
<p>分数：<span>0</span>分,还是剩余:<label>20</label>秒</p>
<script>
var score = 0;
var interval = setInterval(() => {
var dd = document.documentElement;
var imgElement = document.createElement("img");
imgElement.src = "./1.png";
imgElement.style = "width:100px;height:100px;border-radius:50px;position:absolute;";
imgElement.style.top = Math.random() * (dd.clientHeight - 150)+ "px";
imgElement.style.left = Math.random() * (dd.clientWidth - 100) + "px";
imgElement.ondblclick = function() {
this.remove();
score += 10;
}
document.body.appendChild(imgElement);
document.querySelector("span").innerText = score;
},100);
</script>
</body>
</html>
Ajax
- 概念：Ajax：Asynchronous Javascript And XML，即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式
异步的JavaScript：它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。简单来说Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新
XML：是前后端数据通信时传输数据的一种格式，现在已经多用于编写框架的配置文件，前后端交互数据现在比较常用的是 JSON
- 为什么使用Ajax
- 无刷新：不刷新整个页面，只刷新局部
- 无刷新的好处
- 只更新部分页面，有效利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果，操作更方便
- 互联网百分之99以上的项目都是使用Ajax异步请求
- 同步与异步请求区别
同步请求: 就是在发送一个请求之后，需要等待服务器响应返回，才能够发送下一个请求，通过浏览器地址栏发送请求，这种方式就是属于同步请求
正常情况下在网页中我们填写完表单后提交表单发起GET/POST请求时浏览器重新向服务器发起整个界面的请求，这就导致会刷新网页整个界面，可是有时候这是不需要的，比如注册账号时严重用户名是否重复，此时就不是要刷新整个页面
缺点：
- 请求必须要等待响应，如果遇到请求阻塞，网络延迟，用户需要等待，这样用户体验效果不好
- 请求时会携带所有的信息：比如说一个form表单，需要填入用户名，密码，手机号，等多个信息，如果其中有一个信息填写错了，请求失败，又要全部重新填写，会很麻烦繁琐，其实只需要修改填错了的就好了，如何解决这个问题？就需要引入异步的概念了
异步请求:和同步请求相对，异步不需要等待响应，随时可以发送下一次请求
如果是同步请求，需要将信息填写完整，再发送请求，服务器响应填写是否正确，再做修改，但是异步请求是局部页面更新，比如上述的手机号、密码，邮箱名，在填写时就会发送一个异步请求，若是格式不正确，会提醒修改，而其它已经填写的正确信息不受影响
4.Ajax的API
5.Ajax发送请求实现步骤
<body>
<input type="text" name="username" onblur="checkUsername()" />
<script>
function checkUsername() {
// 1.创建ajax对象
const ajax = new XMLHttpRequest();
// 2.准备请求
ajax.open("get","https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/verifyName");
ajax.open("post", "https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/register")
// 3.监听
ajax.onreadystatechange = function() {
console.log("我是监听。。。。")
// 状态的判断
if(ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); // 如果前面是post发送请求就要写这个请求头
// 4.发送
ajax.send();
console.log("我是异步的后续代码。。。。")
}
</script>
</body>
…(img-qh26C2Tx-1705329595394)]
4.Ajax的API
[外链图片转存中…(img-Q2YS5Bev-1705329595395)]
5.Ajax发送请求实现步骤
<body>
<input type="text" name="username" onblur="checkUsername()" />
<script>
function checkUsername() {
// 1.创建ajax对象
const ajax = new XMLHttpRequest();
// 2.准备请求
ajax.open("get","https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/verifyName");
ajax.open("post", "https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/register")
// 3.监听
ajax.onreadystatechange = function() {
console.log("我是监听。。。。")
// 状态的判断
if(ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); // 如果前面是post发送请求就要写这个请求头
// 4.发送
ajax.send();
console.log("我是异步的后续代码。。。。")
}
</script>
</body>