js学习笔记

最新推荐文章于 2025-05-27 09:23:26 发布

果然途游

最新推荐文章于 2025-05-27 09:23:26 发布

阅读量975

点赞数 18

文章标签： javascript 学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_63445900/article/details/134708636

版权

0、javascript的历史的演变过程

1995年：Netscape 公司的 Brendan Eich 创造了 JavaScript，当时它被称为 LiveScript。作为 Netscape Navigator 浏览器的一部分，它被设计为用于增强网页的交互性。
1996年：Netscape 将 JavaScript 提交给 ECMA（European Computer Manufacturers Association）进行标准化。ECMA 将其命名为 ECMAScript，并发布了第一个 ECMAScript 规范（ECMAScript 1）。
1997年：ECMAScript 2 规范发布，对 ECMAScript 1 进行了一些修订和修改。
1999年：ECMAScript 3 规范发布，引入了一些新特性，如正则表达式、try-catch 异常处理等。ECMAScript 3 版本被广泛支持，并成为 JavaScript 的主要版本。
2000年：Microsoft 推出了 Internet Explorer 5.5，其中包含了 JScript 5.5，它对 ECMAScript 3 进行了一些自有的扩展和改进。
2005年：Ajax（Asynchronous JavaScript and XML）的概念被引入，使得网页可以异步请求数据并动态更新内容，提升了用户体验。
2009年：ECMAScript 5 规范发布，引入了一些重要的语言特性，如严格模式、JSON 对象、Array 新方法等。这个版本进一步巩固了 JavaScript 作为一种强大的脚本语言的地位。
2015年：ECMAScript 6（ES6 或 ECMAScript 2015）发布，引入了许多新的语言特性，如箭头函数、模块化、类等。这个版本标志着 JavaScript 的重大升级，并在许多现代浏览器中得到支持。
之后的版本：自 ES6 发布以来，ECMAScript 每年发布一次新版本，增加了更多的新特性和改进。例如，ES7（2016年）、ES8（2017年）和 ES9（2018年）依次引入了异步函数、展开操作符、异步迭代器等功能。

1、JS简介

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

2、组成部分

组成部分作用 ECMA Script 构成了JS核心的语法基础 BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 DOM Document Obiect Model 文档对象模型，用来操作网页中的元素（1）核心（ECMAScript）：描述了该语言的语法和基本对象。（2）DOM：Document Object Model（文档对象模型）：描述处理网页内容的方法和接口。

html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（3）BOM：Brower Object Model（浏览器对象模型与浏览器进行交互的方法和接口。

例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

3、特点

（1）开发工具简单，记事本即可（2）无需编译，直接由数据 JS引擎负责执行（3）弱类型语言由数据来决定数据类型（4）面向对象

4、作用

（1）嵌入动态文本与HTML页面（2）对浏览器时间做出相应（3）读写HTML元素（4）在数据被提交到服务器之前验证数据（5）检测访客的浏览器信息（6）控制cookies，包括创建和修改等。（7）基于node.js技术进行服务器端编程。

5、JS三种添加方式

（1）行内式

//在游览器上弹出的提示框（在页面上显示'行内js'）（一般不推荐使用（代码多会使网页臃肿））
<button onclick="alert('行内js')">单击试试</button>

（2）内嵌式

<script>
     //在游览器的页面上弹出的提示框（显示'内嵌js'）
alert('内嵌js');
</script>

（3）外链式

 //使用script标签src属性引入指定的代码书写在一个.js文件中，
<script src="js文件路径地址">这里不能写js语句</script>

6、 script 标签可以放置的位置

在 <head> 标签内部：

<head>
  <script type="text/javascript">
    // 这里可以放置你的 JavaScript 代码
  </script>
</head>

放置在 <head> 标签内部的脚本会在浏览器加载页面时执行。这通常用于在页面加载之前定义一些全局变量、函数或引入外部 JavaScript 文件。

在 <body> 标签的末尾：

<body>
  <script type="text/javascript">
    // 这里可以放置你的 JavaScript 代码
  </script>
</body>

将脚本放置在 <body> 标签的末尾可以确保页面内容先加载，然后再执行脚本。这样可以避免因脚本执行时间过长而导致页面加载缓慢的问题。

3、可以将 <script> 标签放在其他位置

但上述两种位置是最常见和推荐的用法。选择脚本放置的位置取决于你的需求和页面的结构。如果需要在页面加载前执行脚本，将其放置在 <head> 标签内；如果需要在页面加载后执行脚本，将其放置在 <body> 标签的末尾。

7、变量

定义：就是内存中的一段存储空间

1、声明变量：

<script>
var 变量名称 = 存储的数据;       (variable 变量)
//如下所示
     //定义整数变量
     var num1 = 100;  //正数
    var num2 = -100;  //负数
    //定义浮点数类型
    var num3 = 100.234 //
    var num4 = -100.234 
    //相当于2乘以10的五次方
    var num5 = 2e5 
    //0X开头表示十六进制的100数字
     var num6 =0x100
    //0o开头表示八进制的100数字
     var num7 = 0o100
    //0b开头表示二进制的100数字
    var num8 = 0b100 
    //字符串类型
    var s1 = 'hello World';
    var s2 = '来一口红酒'
    //布尔类型
    var b1 = true //真
    var b2 = false //假
    //空类型
    var k1 = null; //表示有值，有一个空值
    var k2 = undefined //表示没有值
    
    alert(num);      //在页面显示框中弹出变量值
    console.log(num) //把内容输出在游览器的控制台上
    document.write(num) //把内容直接输出在页面上
</script>

2、变量命名规范

1.只能由字母、数字、_（下划线）、$（美元符号）组成。

2.不能以数字开头。

3.命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

3、js是弱类型语言，不重视类型的定义，js会根据为变量赋值的情况自定判断该变量是何种类型

8、数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）字符串：string（凡是引号包括起来的内容全部都是字符串）布尔：boolean（true、false）对象类型：object（声明对象未赋值取值null）未定义型：undefined

<script>
    //定义整型类型
    var n1 = 100;/
    var result1 = typeof n1; //typeof来检测是什么类型
    console.log(result)  //就会在控制台出现number（整数）数值类型
    //定义字符串类型
    var v2 = '江河湖海';
    var result2 = typeof n2
    console.log(retsult2)//就会在控制台出现string（字符串）数值类型
    //定义布尔类型
    var v3 =true;
    var result3 = typeof n3;
    console.log(result3);//就会在控制台出现boolean（布尔）数值类型
    //定义空类型
    var k1；
    var tesult4 = typeof n4;
    console.log (tesult4);//就会在控制台出现undefined(没有值)数值类型    
    var k2 = null;
    var tesult5 = typeof n5;
    console.log(tesult5);//就会在控制台出现object(空值)数值类型
</script>

9、逗号运算符

使用逗号可以在一条语句中执行多次操作

<script>
var age1=16,age2=17,age3=18;
</script>

使用逗号运算符分隔的语句会从左到右依次执行

10、算术运算符

加法运算（+）

（1）当符号两边都是数字或者布尔的时候，会进行数学运算；

（2）但只要任意一边是字符串的时候，就会进行字符串拼接。

减法运算（-）、加法运算（*）、除法运算（/）、取余运算（%）：

只能数学运算。

<script>
    
alert(1234 / 1000 * 1000); // 1234
  
var s = "12";
 s -= 10;
alert(s);  //字符串可以被解析为数字，这里"12"会被解析为12，然后再减去10得到结果2 
 
var s = "aa";
s -= 10;
alert(s);  // 但由于字符串"aa"不能解析为数字，所以操作失败，结果为NaN（Not a Number）。
 
var s = "12";
s += 10;
alert(s);       // 10转换为字符串并将其附加到变量s的末尾，得到字符串"1210"。 
</script>

注意

js中的小数和整数都是number类型，不存在整数除以整数还是整数的结论。
字符串和其他的数据使用+号运算，会连接成一个新的字符串。
字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

11、比较运算符

＞：大于比较

＜：小于比较

＞＝：大于等于

＜＝：小于等于

＝＝：等于比较（只比较值是否相等，不考虑数据类型）

＝＝＝：全等于比较（必须要值和数据类型都相等）

！＝　：不等于比较（只比较值是不是不相等）

！＝＝：不全等于比较（只要值和数据类型有任意一个不相等就是不等）

<script>
//相等运算符（==）：等于比较（只比较值是否相等，不考虑数据类型）
console.log(5 == 5); // true
//全等运算符（===）：全等于比较（必须要值和数据类型都相等）
console.log(5 === '5'); // false
//不等运算符（!=）：不等于比较（只比较值是不是不相等）
console.log(5 != 6); // true
//不全等运算符（!==）：不全等于比较（只要值和数据类型有任意一个不相等就是不等）
console.log(5 !== '5'); // true
//大于运算符（>）：大于比较
console.log(5 > 3); // true
//小于运算符（<）：小于比较
console.log(5 < 10); // true
//大于等于运算符（>=）：大于等于
console.log(5 >= 3); // true
//小于等于运算符（<=）：小于等于
console.log(5 <= 10); // true）
</script>

12、逻辑运算符

&& 逻辑与 true&&false ====>false || 逻辑或 true||false ====>true ！逻辑非 !true ====>false

针对 && : 有一个假即为假。针对 || : 有一个真即为真。

true（理解）： true, 非0, 非null, 非undefined false（理解）：false, 0, null, undefined

<script>
//&&　：与运算
console.log(true && true)//true
console.log(true && false)//false
console.log(false && true)//false
console.log(false && false)//false

//||　：或运算
    console.log(true || true)//true
	console.log(true || false)//true
	console.log(false || true)//true
	console.log(false || false)//false

//！：非运算
    console.log(!true)//false
    console.log(!false)//false

 请问 1:  8 < 7 && 3 < 4,结果为 ?
alert(8 < 7 && 3 < 4);  // false
 
// 请问 2:  -2 && 6 + 6 && null 结果为 ?
alert(-2 && 6 + 6 && null); // null
 
// 请问 3:  1 + 1 && 0 && 5  结果为 ?
alert(1 + 1 && 0 && 5); // 0
 
// 请问1 :  0 || 23 结果为 ?
alert(0 || 23); // 23
 
// 请问2 :  0 || false || true  结果为 ?
alert(0 || false || true); // true
 
// 请问3 :  null || 10 < 8 || 10 + 10 结果为 ?
alert(null || 10 < 8 || 10 + 10);  // 20
 
// 请问4 :  null || 10 < 8 || false 结果为 ?
alert(null || 10 < 8 || false); // false 
</script>

13、三目运算符

语法 条件?表达式1:表达式=2 如果条件为true，返回表达式1的结果如果条件为false，返回表达式2的结果

实例

<script>
    // 请问1 :  var score=80 >= 60 ? "合格" : "不合格"  结果为 ?
    alert(var score=80 >= 60 ? "合格" : "不合格");  // 合格
// 请问2 :  1 > 5 ? "是的" : "不是" 结果为 ?
alert(1 > 5 ? "是的" : "不是");       // 不是
</script>

14、赋值运算符

＝　：进行赋值操作

＋＝　：加等于运算符（相当于）

－＝　：减等于运算符

＊＝　：乘等于运算符

／＝　：除等于运算符

％＝　：等取余等于运算符

运算符    x=10 y=5      结果
=	    x=y		        x=5	
+=	   x+=y	   x=x+y	x=15	
-=	   x-=y	   x=x-y	x=5
*=	   x*=y	   x=x*y	x=50	
/=	   x/=y	   x=x/y	x=2	
%=	   x%=y	   x=x%y	x=0

15、自定义函数

语法 function 函数名(形式参数){函数体} 调用函数：函数名(实际参数); 函数只有被调用后才会执行如果函数需要返回值、直接使用return 返回

<script type="text/javascript">
// 定义一个函数 : function
function demo1() {
    return 你好生活;
}
 
// 调用函数 :
alert(demo1());
</script>

如果函数需要传递参数、不需要指定参数的类型、直接使用变量即

<script type="text/javascript">
// 定义一个函数 : function
function demo2(a, b) {
    return a + b;
}
 
// 调用函数 :
alert(demo2(20, 20));//调用函数后显示40
</script>

JS如果出现二个重名的函数名、后者会把前者的覆盖掉

<script type="text/javascript">
// 定义一个函数 : function
function demo3() {
    alert("调用...");
}
function demo3() {
       alert("你好");
   }
 	//这里不会显示"调用..."，而是显示"你好"
</script>

16、匿名函数

定义：即没有名字的函数

语法:

function(形式参数){函数体} 定义函数并赋值给变量：var fn = function(形式参数){函数体}

调用方式：将匿名函数赋值给一个变量，通过变量名调用函数调用函数：fn(实际参数); 实例

<script>
// 匿名函数 : 即没有名称的函数
var func = function(i, u) {
    alert(i + " 喜欢 " + u);
}
 
// 调用函数 :
  func("我", "你");//显示 我喜欢你

</script>

17、条件语句

（1） if…else语句 1、形式一:

if( 条件 ){...}条件满足就执行，不满足就不执行

</script>
var age = 17;
if (age < 18) {
    console.log("未成年");
}
</script>

2、形式二

（2）if（条件）{...}else {....}条件满足就执行if 的{}，不满足就执行else的 {}

<script>
var age = 17;
if (age < 18) {
    console.log("未成年");
} 
else {
    console.log("已成年");
}t
</script>

3、形式三

（3）if（条件1）{...}else if(条件2 ) {....} 满足哪一个if就执行哪一个if的{}，前面有条件满足，所有条件不满足的时候，就会执行else后面的{}

<script>
var age = 18;
if (age < 18) {
    console.log("小于18岁");
} else if (age == 18) {
    console.log("刚好18岁");
} else {
    console.log("大于18岁")
}
</script>

（2）switch…case语句 switch语句更适用于多条分支使用同一条语句的情况 switch (语句) { case 表达式1: 语句... case 表达式2: 语句... case 表达式3: 语句... default: 语句... }

case ：根据已知条件找到一个完全区配的选项，执行对应的代码

break：结束语句；不写它会向下穿透

default：当所有选项都和已知条件不符合的时候会执行默认代码

注意：一旦符合case的条件，所以我们一般会在case中添加break作为语句的结束。

<script>
var today = 7;
switch (today) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("输入错误");
}
    </script>

18、循环语句

（1）for语句for((1)定义初始变量；(2)条件判断；(4)改变初始值){

(3)重复执行的代码

}

循环顺序（1）（2）（3）（4）

实例：输出1-5

<script>
for (var i = 1; i <= 5; i++) {
    console.log(i);
}
      </script>

（2） while语句 while(条件表达式){ 语句 }

1.while会重复的执行一段代码，直到重复结束才会继续执行后续代码

2.千万要书写改变初始值的代码，不然会出现死循环

3.再循环内，初始值、条件判断和改变初始值都能控制循环的次数

实例：输出1-5

<script>
var i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}
 </script>

（3）do…while语句 do…while循环会至少执行一次。 do{ 语句 }while(条件表达式);

1..当变量在以外时，相较于while循环，他会执行一次再判断

2.当变量在以内时，while与do...while循环是一样的

实例：输出1-5

<script>
var i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);
  </script>

19、数组

数组是用于储存多个相同类型数据的集合数组内的各个值被称作元素，每一个元素都可以通过索引来读取，索引是从零开始的整数（1）数组的创建

<script>
形式一  使用字面量创建
同类型数组创建

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

不同类型数组创建
var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];
形式二  使用对象创建数组
var arr = new Array();
arr[0] = 1;
arr[1] = "2";
arr[2] = 3;
arr[3] = "4";
arr[4] = 5;
arr[5] = "6";
arr[6] = 7;
arr[7] = "8";
arr[8] = 9;
</script>

（2）遍历数组

<script>
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
</script>

（3）检测数组属性

<script>
var arr = [1,2,3,4];
console.log(arr.constructor);

constructor：返回创建数组对象的原型函数
</script>

20、DOM

（1）什么是DOM?

DOM (文档对象模型)
DOM是W3C(万维网联盟)的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
对网页进行增删改查的操作。

HTML DOM 模型被构造为对象的树：在这里插入图片描述

（2）DOM查找 1、按id属性查找

<ul id="id属性名">//id
<script>
var elem=documentgetElementById("id属性名")
</script>

只用于精确查找一个元素 getElementById只能用在document上实例：

<ul id="myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</i><li id="m3">联系我们</i>
</ul>
<script>
var ul = document.getElementById('myList') 
console.log(ul);
</script>

2、按标签名查找元素

 <h1>Title </h1>
<script>
var elems=parentgetElementsByTagName("h1元素名");
</script>

不仅查直接子节点，而且查所有子代节点返回一个动态集合即使只找到一个元素，也返回集合；必须用[0],取出唯一元素实例：

<ul id= "myList">
<li id="m1">首页</li>
<li id="m2">企业介绍</li><li id="m3">联系我们</i>
</ul>
<script>
var ul =documentgetElementById('menuList'); 
var list = ul.getElementsByTagName('li'); 
console.log(list);
</script>

3、通过name属性查找 document.getElementsByName(name属性值’)

可以返回DOM树中具有指定name属性值的所有子元素集合

<form id="registerForm">
<input type="checkbox" name="boy"/>
<input type="checkbox" name="boy"/>
<input type="checkbox" name="boy"/>
</form>
<script>
var list = document.getElementsByName( 'boy');
console.log( typeof list);
</script>

4、通过class查找 var elems=parentgetElemnetsByClassName("class") 1 查找父元素下指定class属性的元素实例：

<div id="news">
<p class="mainTitle">新闻标题1</p >
<p class="subTitle">新闻标题2</p >
<p class=" mainTitle">新闻标题3</p >
</div>
<script>
var div=documentgetElementById('news');
var list =div.getElementsByClassName('mainTitle'); //class属性名
console.log(list);
</script>

（3）DOM修改 1、读取属性值（了解即可）第一种先获得属性节点对象，再获得节点对象的值

<script>
var attrNode=elemattributes[下标/属性名];
var attrNode=elemgetAttributeNode(属性名)
</script>
attrNodevalue   属性值

第二种直接获得属性值

<script>
var value=elemgetAttribute("属性名");
</script>

2、修改属性值

<script>
elem.setAttribute("属性名"，value); 
</script>

1.实例：找到id为al的元素，修改name属性对应的属性值。

<script>
var hl=document.getElementById(“al"); 
hl.setAttributeNode(“name”， zhangji);
</script>

3、判断是否包含指定属性

<script>
var bool=elem.hasAttribute("属性名")
</script>

返回 true 或 false 4、移除属性

<script>
elem.removeAttribute("属性名")
</script>

2、实例：删除 id 为 alink 元素的class属性

<a id="alink" class="slink" href=
"javascript:void(0)">百度搜索</ a>
<script>
var a=documentgetElementById('alink'); 
a.removeAttribute('class');
</script>

5、修改样式内联样式: elem.style.属性名强调: 属性名:去横线，变驼峰比如: css: background-color=>backgroundColor list-style-type=>listStyleType （4）DOM添加在DOM中，添加元素有三步：

创建空元素设置关键属性将元素添加到DOM树中 1、创建空元素

<script>
var elem=document.createElement(“元素名”)
var tr=document.createElement(“tr”)
var td=document.createElement(“td”)
</script>

2、设置关键属性在创建好空元素之后要给空元素设置样式（1）设置关键属性元素.属性名

<script>
  var a = document.createElement("a");
  a.innerHTML = "go to csdn";
  a.href = "https://mp.youkuaiyun.com";
  document.body.appendChild(a);
</script>

结果为：

<a href="优快云">go back csdn</a>

（2）设置关键样式

<script>
a.style.opacity="1";//单独设置样式
a.style.cssText="width: 100px;height:100px";//统一设置样式
</script>

3、将元素添加在DOM树中

(1)parentNode .appendChild(childNode)

<script>
var div=document.createElement("div");
var txt=document.createTextNode("版权声明")；
div.appendChild(txt);
document.body.appendChild(div);
</script>

(2) parentNode.insertBefore(newChild,pos) 用于在父元素中的指定子节点之前添一个新的子节点（li）：

<body>
<ul id="menu">
		<li>the first page</li>
		<li>connect with us</li>
	</ul>
<script type="text/javascript">
	var ul=document.getElementById("menu");
	var newLi=document.createElement("li");
	ul.insertBefore(newLi,ul.lastChild);
</script>
</body>

由于每次修改DOM树都会展开搜索一遍（layout）这样一来会导致时间空间开销，所以我们尽量在插入之前处理好子节点以达到优化的目的 :

(1)若同时创建父元素和子元素时，在内存中先将子元素添加到父元素节点上，再将父节点插入DOM树中。

（2）若只添加多个同级子元素，我们可以先将所有子元素临时添加到一个虚拟文档片段中（即为临时父节点），然后将文档片段整体添加到页面中:

1、先创建文档片段：

<script>
    var frag=document.createDocumentFragment（）;
</script>

2、将子元素加入frag中：

frag.appendChild(child);

3、将frag插入到DOM中

parent.appendChild(frag);

append之后frag会自动释放，不会占用元素。

<script>
//var arr=document.querySelectorAll(".page");
var arr=document.getElementsByClassName("page");//通过css选择器或类名来查找
for(var i=0;i<arr.length;i++)
{
	for(var j=0;j<4;j++)
	{
		for(var k=0;k<4;k++)
		{
			//创建元素
			var divs=document.createElement("div");
		divs.style.cssText=="width:100px;height:100px;border:1px solid white;position:absolute;background-image:url(images/"+(i+1)+".png);background-size:400px 400px;box-shadow:0px 0px 50px white";				
		divs.style.top=j*100+"px";
		divs.style.left=k*100+"px";
			
		divs.style.backgroundPositionX=-k*100+"px";
		divs.style.backgroundPositionY=-j*100+"px";

		arr[i].appendChild(divs);
	}
}   
}    
</script>

21、BOM

（1）什么是BOM？（Browser Object Model）专门操作浏览器窗口的API——没有标准，有兼容性问题（2）浏览器对象模型

window: 代表整个窗口
history: 封装当前窗口打开后，成功访问过的历史url记录
navigator: 封装浏览器配置信息
document: 封装当前正在加载的网页内容
location: 封装了当前窗口正在打开的url地址
screen: 封装了屏幕的信息
event: 定义了网页中的事件机制

（3）获取窗口大小获取当前窗口大小完整窗口大小:

window.outerWidth/outerHeight

文档显示区大小:

windowinnerWidth/innerHeight

（4）定时器定义：让程序按指定时间间隔自动执行任务——网页动态效果、计时功能等如何选择定时器？

只要反复执行，就用周期性只要只执行一次，就用一次性 1、周期性定时器让程序按指定的时间间隔反复执行一项任务语法：

setInterval(exp,time):周期性触发代码exp 
exp:执行语句
time:时间周期，单位为毫秒
<script>
setInterval(function(){
console.log("Hello World");},1000);
</script

2、一次性定时器让程序延迟一段时间执行语法：

setTimeout(exptime):一次性触发代码exp
exp:执行语句
time:间隔时间，单位为毫秒
<script>
setTimeout(function(){
alert("恭喜过关");
},3000);
</script>

3、停止定时器暂停定时器执行

<script>
1、给定时器取名 
var timer =setInterval(function(){ 
console.log("Hello World");},1000);
</script>
2、停止定时器 
clearInterval(timer);
</script>

22、JS事件实例

（0）JS事件 HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。常见的JS事件和小实例：

1、点击事件（onclick）：当元素被点击时触发。
<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
  // 处理点击事件的代码
  console.log("Button clicked!");
}
</script>

2、鼠标移入事件（onmouseover）：当鼠标移入元素时触发。
<div onmouseover="myFunction()">Hover over me</div>

<script>
function myFunction() {
  // 处理鼠标移入事件的代码
  console.log("Mouse over");
}
</script>

3、鼠标移出事件（onmouseout）：当鼠标从元素移出时触发。
<div onmouseout="myFunction()">Move mouse out</div>

<script>
function myFunction() {
  // 处理鼠标移出事件的代码
  console.log("Mouse out");
}
</script>

4、键盘按下事件（onkeydown）：当按下键盘的某个键时触发。
<!-- 键盘按下事件（onkeydown） -->
<input type="text" onkeydown="myFunction(event)">

<script>
function myFunction(event) {
  // 处理键盘按下事件的代码
  var key = event.keyCode;
  console.log("Key pressed: " + key);
}
</script>

5、表单提交事件（onsubmit）：当提交表单时触发。
<!-- 表单提交事件（onsubmit） -->
<form onsubmit="myFunction(event)">
  <input type="submit" value="Submit">
</form>

<script>
function myFunction(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();

  // 处理表单提交事件的代码
  console.log("Form submitted");
}
</script>

6、页面加载事件（onload）：当页面完全加载时触发。
<!-- 页面加载事件（onload） -->
<body onload="myFunction()">

<script>
function myFunction() {
  // 处理页面加载事件的代码
  console.log("Page loaded");
}
</script>
    
7、输入框内容改变事件（onchang）：当输入框的内容发生改变时触发。
<!-- 输入框内容改变事件（onchang） -->
<input type="text" onchang="myFunction()" id="myInput">

<script>
function myFunction() {
  // 处理输入框内容改变事件的代码
  var value = document.getElementById("myInput").value;
  console.log("Input value changed: " + value);
}
</script>

8、（onscroll）：当滚动页面时触发
<!-- 滚动事件（onscroll） -->
<div onscroll="myFunction()">Scroll me</div>

<script>
function myFunction() {
  // 处理滚动事件的代码
  console.log("Page scrolled");
}
</script>

（1）JS直接写入html输出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>

输出结果：

在这里插入图片描述

（2）JS对事件的反应

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
	
</body>
</html>

输出结果：

在这里插入图片描述

（3）JS改变html中的内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

输出结果：

在这里插入图片描述

（4）JS改变html的样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

输出结果：在这里插入图片描述

（5）JS验证输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

输出结果：在这里插入图片描述

23、练习熟悉js案例

计算器：

<script>
function calculator(operator, num1, num2) {
  let result;
  switch (operator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      if (num2 === 0) {
        result = 'Error: division by zero';
      } else {
        result = num1 / num2;
      }
      break;
    default:
      result = 'Error: invalid operator';
  }
  return result;
}

console.log(calculator('+', 5, 3)); // 输出 8
console.log(calculator('-', 9, 4)); // 输出 5
console.log(calculator('*', 2, 6)); // 输出 12
console.log(calculator('/', 10, 2)); // 输出 5
console.log(calculator('/', 8, 0)); // 输出 Error: division by zero
console.log(calculator('%', 5, 3)); // 输出 Error: invalid operator
</script>

猜数字游戏：

<script>
function guessNumber(guess) {
  const randomNumber = Math.floor(Math.random() * 10) + 1;
  if (guess === randomNumber) {
    return '恭喜你，猜对了！';
  } else if (guess > randomNumber) {
    return '猜大了！';
  } else {
    return '猜小了！';
  }
}

console.log(guessNumber(5)); // 根据生成的随机数给出相应的提示
</script>

Todo 列表：

<script>
const todoList = [];

function addTodoItem(item) {
  todoList.push(item);
}

function removeTodoItem(index) {
  todoList.splice(index, 1);
}

function markTodoItemComplete(index) {
  todoList[index] = todoList[index] + ' (完成)';
}

addTodoItem('购物');
addTodoItem('打扫房间');
console.log(todoList); // 输出 ['购物', '打扫房间']

removeTodoItem(0);
console.log(todoList); // 输出 ['打扫房间']

markTodoItemComplete(0);
console.log(todoList); // 输出 ['打扫房间 (完成)']
</script>

验证表单：

<script>
function validateForm(username, password) {
  if (username.length < 6 || username.length > 12) {
    return '用户名长度应为 6 到 12 个字符！';
  }
  if (password.length < 8) {
    return '密码长度至少为 8 个字符！';
  }
  return '验证通过！';
}

console.log(validateForm('johndoe', 'password')); // 输出 验证通过！
console.log(validateForm('john', 'password')); // 输出 用户名长度应为 6 到 12 个字符！
console.log(validateForm('johndoe', 'pass')); // 输出 密码长度至少为 8 个字符！
</script>

绘制图形：

<!DOCTYPE html>
<html>
<head>
  <title>绘制图形</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);

    // 绘制圆形
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(150, 150, 50, 0, 2 * Math.PI);
    ctx.fill();
  </script>
</body>
</html

倒计时器：

<script>
function countdownTimer(duration) {
  let timeLeft = duration;
  const countdown = setInterval(function() {
    console.log(timeLeft);
    timeLeft--;
    if (timeLeft < 0) {
      clearInterval(countdown);
      console.log('倒计时结束！');
    }
  }, 1000);
}

countdownTimer(10); // 倒计时从 10 开始，每秒递减，直到 0 结束
</script>

请求数据：

<script>
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
</script>

简易网站导航：

<!DOCTYPE html>
<html>
<head>
  <title>简易网站导航</title>
</head>
<body>
  <ul id="navList">
    <li><a href="https://www.example.com">Example</a></li>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.github.com">GitHub</a></li>
  </ul>

  <script>
    const navList = document.getElementById('navList');
    navList.addEventListener('click', function(event) {
      const targetUrl = event.target.href;
      window.open(targetUrl, '_blank');
    });
  </script>
</body>
</html>

轮播图：

<!DOCTYPE html>
<html>
<head>
  <title>轮播图</title>
  <style>
    .slider {
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    .slider img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>

  <script>
    const slider = document.querySelector('.slider');
    let currentImageIndex = 0;
    const images = slider.getElementsByTagName('img');
    const totalImages = images.length;

    function showNextImage() {
      images[currentImageIndex].style.display = 'none';
      currentImageIndex = (currentImageIndex + 1) % totalImages;
      images[currentImageIndex].style.display = 'block';
    }

    setInterval(showNextImage, 3000);
  </script>
</body>
</html>

时间显示：

<!DOCTYPE html>
<html>
<head>
  <title>时间显示</title>
</head>
<body>
  <div id="timeDisplay"></div>

  <script>
    function updateTime() {
      const currentTime = new Date();
      const formattedTime = currentTime.toLocaleTimeString();
      document.getElementById('timeDisplay').textContent = formattedTime;
    }

    updateTime();
    setInterval(updateTime, 1000);
  </script>
</body>
</html>

以上是关于每个案例的简单示例代码，你可以运行它们或作为你练习的起点进行修改和扩展。希望这些案例对你们有所帮助，并能够加深你们对 JavaScript 的理解和熟练程度。加油伙伴们