js基础二

ops/2025/3/3 9:34:43/
htmledit_views">

JavaScript基础下

1 事件处理

JS 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。

一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件。

1.2 事件绑定

事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><button type="button" οnclick="myBtn()">按钮</button><script type="text/html" title=javascript>javascript">function myBtn(){alert("Hello World!");}</script>
</body>
</html>

我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><button type="button" id="myBtn">按钮</button><script>function sayHello() {alert('Hello World!');}document.getElementById("myBtn").onclick = sayHello;</script>
</body>
</html>

1.3 事件示例

一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。

  • onmouseover事件

onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><button type="button" οnmοuseοver="alert('鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br><a href="#" οnmοuseοver="myEvent()">请将鼠标移动至此处</a><script>function myEvent() {alert('鼠标已经移动到了该链接上');}</script>
</body>
</html>

  • onmouseout事件

onmouseout 事件会在鼠标从元素上离开时触发，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div><script>function myEvent() {alert('您的鼠标已经离开指定元素');}document.getElementById("myBox").onmouseout = myEvent;</script>
</body>
</html>

  • onkeydown事件

onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><input type="text" οnkeydοwn="myEvent()"><script>function myEvent() {alert("您按下了键盘上的某个按钮");}</script>
</body>
</html>

  • onkeyup事件

onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><input type="text" οnkeyup="myEvent()"><script>function myEvent() {alert("您按下了键盘上的某个按钮，并将其释放了");}</script>
</body>
</html>

2 作用域

在 JavaScript 中，您可以在任意位置声明变量，但不同的位置会影响变量的可用范围，这个范围称为作用域。作用域可以大致分为两种类型，分别是全局作用域和局部作用域。下面就来分别介绍一下。

2.1 全局作用域

全局作用域是指变量可以在当前脚本的任意位置访问，拥有全局作用域的变量也被称为“全局变量”，一般情况下拥有以下特征的变量具有全局作用域：

  • 最外层的函数和在最外层函数外面定义的变量拥有全局作用域；

  • 所有未定义直接赋值的变量拥有全局作用域；

  • 所有 window 对象的属性拥有全局作用域，例如 window.name、window.location、window.top 等。

示例代码如下：

var str = "Hello World!";
function myFun(){document.write(str);    // 输出：Hello World!
}
myFun();
document.write(str);        // 输出：Hello World!

2.2 局部作用域

在函数内部声明的变量具有局部作用域，拥有局部作用域的变量也被称为“局部变量”，局部变量只能在其作用域中（函数内部）使用。示例代码如下：

function myFun(){var str = "Hello World!";document.write(str);    // 输出：Hello World!
}
document.write(str);        // 报错：str is not defined

在函数内定义的局部变量只有在函数被调用时才会生成，当函数执行完毕后会被立即销毁。

3 js定时器

JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。

在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。

JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()，它们之间的区别如下：

方法说明
setTimeout()在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次
setInterval()按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

3.1 setTimeout()

JS setTimeout() 函数用来在指定时间后执行某些代码，代码仅执行一次。

JS setTimeout() 函数的语法格式如下：

setTimeout(function[, delay, arg1, arg2, ...]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);

参数说明如下：

  • function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

  • code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

  • delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则表示立即执行；

  • arg1、arg2、...、argN：要传递给函数的参数。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><script type="text/html" title=javascript>javascript">var myFun = function (str = '这是第一个计时器，计时一秒'){document.write(str + "<br>");};var myFun1 = function (str = '这是第一个计时器，计时一秒'){document.write(str + "<br>");};var myFun2 = function (str = '这是第二个计时器，计时两秒'){document.write(str + "<br>");};var myFun3 = function (str = '这是第三个计时器，计时三秒'){document.write(str + "<br>");};setTimeout(myFun1, 1000);setTimeout(myFun2, 2000);setTimeout(myFun3, 3000);
​</script>
</body>
</html>

运行上面的代码，会间隔 1000 毫秒，依次输出下面的内容：

3.2 setInterval()

JS setInterval() 函数可以定义一个能够重复执行的定时器，每次执行需要等待指定的时间间隔。

JS setInterval() 函数的语法格式如下：

setInterval(function, delay, [arg1, arg2, ...]);
setInterval(code, delay);

参数说明如下：

  • function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

  • code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

  • delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则表示立即执行；

  • arg1、arg2、...、argN：要传递给函数的参数。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><p id="one"></p><p id="two"></p><script type="text/html" title=javascript>javascript">var num = 1;var myFun = function (){document.getElementById('one').innerHTML += num + "&nbsp;";num ++;};setInterval(myFun, 500);setInterval(function(){var d = new Date();document.getElementById('two').innerHTML = d.toLocaleTimeString();}, 1000);</script>
</body>
</html>

3.3 JS取消定时器

当使用 setTimeout() 或 setInterval() 设置定时器时，这两个方法都会产生一个定时器的唯一 ID，ID 为一个正整数值，也被称为“定时器标识符”，通过这个 ID，我们可以清除 ID 所对应的定时器。

我们可以借助 clearTimeout() 或 clearInterval() 函数来分别清除由 setTimeout() 或 setInterval() 函数创建的定时器。调用 clearTimeout() 或 clearInterval() 函数需要提供定时器的唯一 ID 作为参数，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript</title>
</head>
<body><p>当前时间为：<span id="clock"></span></p><button οnclick="stopClock();">停止</button><hr><script type="text/html" title=javascript>javascript">var intervalID;function showTime() {var d = new Date();document.getElementById("clock").innerHTML = d.toLocaleTimeString();}
​function stopClock() {clearInterval(intervalID);// 设置指定元素上的某个属性值  disabled为禁用this.setAttribute('disabled', true)}intervalID = setInterval(showTime, 1000);</script>
</body>
</html>

4、表单验证

表单是 Web 应用（网站）的重要组成部分，通过表单可以收集用户提交的信息，例如姓名、邮箱、电话等。由于用户在填写这些信息时，有可能出现一些错误，例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力，我们可以使用 JavaScript 在提交数据之前对数据进行检查，确认无误后再发送到服务器。

使用 JavaScript 来验证提交数据（客户端验证）比将数据提交到服务器再进行验证（服务器端验证）用户体验要更好，因为客户端验证发生在用户浏览器中，无需向服务器发送请求，所以速度更快，而服务器端验证，需要先将数据提交到服务器，然后服务器再将结果返回给浏览器，用户需要等待服务器响应结果才能知道哪里出了问题。

表单验证通常由两个部分组成：

  • 必填字段验证：确保必填的字段都被填写；

  • 数据格式验证：确保所填内容的类型和格式是正确的、有效的。

4.1 必填字段验证

必填字段验证在用户注册时比较常见，通过必填字段验证，能够确保表单中的必填字段都被填写，例如用户名、密码、邮箱等。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>必填字段验证</title><style>.error{color: red;}</style>
</head>
<body>
<form οnsubmit="return validateForm()" action="" method="post"><fieldset style="text-align: center;width: 300px;position: relative"><legend>注册:</legend><div class="row"><label>账&emsp;号：</label><input type="text" name="name"><span class="error" id="nameErr"></span></div><div class="row"><label>密&emsp;码：</label><input type="password" name="pwd"><span class="error" id="pwdErr"></span></div><div class="row"><label>邮&emsp;箱：</label><input type="text" name="email"><span class="error" id="emailErr"></span></div><div class="row"><label>电&emsp;话：</label><input type="text" name="mobile" maxlength="11"><span class="error" id="mobileErr"></span></div><div class="row"><label>验证码：</label><input type="text" name="captcha" maxlength="4" style="width: 120px;"><span id="captcha" οnclick="getCaptcha()"></span><span class="error" id="captchaErr"></span></div><div class="row"><input type="submit" value="注册"></div></fieldset></form>
<script>// 生成验证码var captcha = getCaptcha();// 获取验证码function getCaptcha(){var cap = Math.floor(Math.random()*10000).toString();if(cap.length != 4) cap += "0";captcha = cap;document.getElementById("captcha").innerHTML = cap;}
​// 显示错误消息function printError(elemId, hintMsg) {document.getElementById(elemId).innerHTML = hintMsg;}// 验证表单数据function validateForm() {// 获取表单元素的值var name = document.querySelector("input[name='name']").value;var pwd = document.querySelector("input[name='pwd']").value;var email = document.querySelector("input[name='email']").value;var mobile = document.querySelector("input[name='mobile']").value;var captcha = document.querySelector("input[name='captcha']").value;
​if(name == "" || name == null){printError("nameErr", "用户名不能为空");return false;}if(pwd == "" || pwd == null){printError("pwdErr", "密码不能为空");return false;}if(email == "" || email == null){printError("emailErr", "邮箱不能为空");return false;}if(mobile == "" || mobile == null){printError("mobileErr", "手机号不能为空");return false;}if(captcha == "" || captcha == null){printError("captchaErr", "验证码不能为空");return false;}}
​// 清空 input 标签后的提示信息var tags = document.getElementsByTagName('input');for (var i = 0; i < tags.length; i++) {//元素内容发生改变触发onchange事件tags[i].onchange = function(){//this.name 获取标签的name属性var idname = this.name + "Err";document.getElementById(idname).innerHTML = '';}}</script>
</body>
</html>

4.2 数据格式验证

数据格式验证就是通过正则表达式来验证用户所填的数据，是否符合要求，以邮箱地址为例，正确的邮箱地址中要包含一个@和一个.，而且@不能是邮箱地址的第一个字符，.要出现在@之后。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据格式验证</title><style>.error{color: red;font-size: 10px;}
​</style>
</head>
<body>
<form οnsubmit="return validateForm()" action="" method="post"><fieldset style="text-align: center;width: 350px;position: relative"><legend>注册:</legend><div class="row"><label>账&emsp;号：</label><input type="text" name="name"><br><span class="error" id="nameErr"></span></div><div class="row"><label>密&emsp;码：</label><input type="password" name="pwd"><br><span class="error" id="pwdErr"></span></div><div class="row"><label>邮&emsp;箱：</label><input type="text" name="email"><br><span class="error" id="emailErr"></span></div><div class="row"><label>电&emsp;话：</label><input type="text" name="mobile" maxlength="11"><br><span class="error" id="mobileErr"></span></div><div class="row"><label>验证码：</label><input type="text" name="captcha" maxlength="4" style="width: 120px;"><span id="captcha" οnclick="getCaptcha()"></span><br><span class="error" id="captchaErr"></span></div><div class="row"><input type="submit" value="注册"></div></fieldset></form>
<script>// 生成验证码var capCode = getCaptcha();// 获取验证码function getCaptcha(){var cap = Math.floor(Math.random()*10000).toString();if(cap.length != 4) cap += "0";document.getElementById("captcha").innerHTML = cap;return capCode = cap;}// 清空 input 标签后的提示信息var tags = document.getElementsByTagName('input');for (var i = 0; i < tags.length; i++) {tags[i].onchange = function(){var idname = this.name + "Err";document.getElementById(idname).innerHTML = '';}}// 显示错误消息function printError(elemId, hintMsg) {document.getElementById(elemId).innerHTML = hintMsg;}// 验证表单数据function validateForm() {// 获取表单元素的值var name = document.querySelector("input[name='name']").value;var pwd = document.querySelector("input[name='pwd']").value;var email = document.querySelector("input[name='email']").value;var mobile = document.querySelector("input[name='mobile']").value;var captcha = document.querySelector("input[name='captcha']").value;
​if(name == "" || name == null){printError("nameErr", "用户名不能为空");return false;}if(pwd == "" || pwd == null){printError("pwdErr", "密码不能为空");return false;}if(email == "" || email == null){printError("emailErr", "邮箱不能为空");return false;} else {var regex = /^\S+@\S+\.\S+$/;if(regex.test(email) === false) {printError("emailErr", "请输入正确的邮箱地址");return false;}}if(mobile == "" || mobile == null){printError("mobileErr", "手机号不能为空");return false;}if(captcha == "" || captcha == null){printError("captchaErr", "验证码不能为空");return false;} else {console.log(capCode);console.log(captcha);if(capCode != captcha){printError("captchaErr", "验证码有误");return false;}}}
​</script>
</body>
</html>

http://www.ppmy.cn/ops/162729.html

相关文章

【Elasticsearch】网络配置

【Elasticsearch】网络配置

Elasticsearch 的网络配置是集群管理和性能优化的重要组成部分。它涉及多个层面的设置&#xff0c;包括节点间通信、客户端访问、安全性以及网络性能优化。以下是结合上述翻译内容对 Elasticsearch 网络配置的详细总结&#xff1a; --- 1.Elasticsearch 网络接口概述 Elasti…
阅读更多...
Linux的部分常用基础指令

Linux的部分常用基础指令

目录 1. ls 指令 2. pwd命令 3. cd 指令 4. touch 指令 5. mkdir指令 6. rmdir指令&&rm指令 7. rm命令可以同时删除文件或目录 8. man指令 9. cp指令 10. mv指令 11. cat 指令 12. more指令 13. less 指令 14. head指令 15. tail 指令 16. find 指令 17. whi…
阅读更多...
MySQL并发知识（面试高频）

MySQL并发知识（面试高频）

mysql并发事务解决 不同隔离级别下&#xff0c;mysql解决并发事务的方式不同。主要由锁机制和MVCC(多版本并发控制)机制来解决并发事务问题。 1. mysql中的锁有哪些&#xff1f; 表级锁&#xff1a; 场景&#xff1a;表级锁适用于需要对整个表进行操作的情况&#xff0c;例如…
阅读更多...
线性代数在机器学习中的理论与实践

线性代数在机器学习中的理论与实践

线性代数在机器学习中的理论与实践 1. 向量空间与特殊矩阵 向量空间 在机器学习中&#xff0c;数据通常以向量的形式表示。一个向量空间 R n {\mathbb{R}^n} Rn 包含了所有 n {n} n 维实数向量&#xff0c;这些向量满足加法和数乘的封闭性。若 x , y ∈ R n {\mathbf{x}, …
阅读更多...
前端数据缓存的几种方式详细讲解

前端数据缓存的几种方式详细讲解

以下是前端数据缓存的完整解决方案&#xff0c;涵盖策略设计、技术实现和性能优化&#xff1a; 一、缓存策略分层设计 #mermaid-svg-JWUoiAatYutz7dug {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JWUoiAatYutz7d…
阅读更多...
16.4 LangChain LCEL 接口全解析：同步、异步与批处理的正确打开方式

16.4 LangChain LCEL 接口全解析：同步、异步与批处理的正确打开方式

LangChain LCEL 接口全解析：同步、异步与批处理的正确打开方式 关键词：LCEL 接口设计、同步异步编程、批量处理优化、生产级并发控制、流式传输原理 1. 三大接口核心定位与性能特征 1.1 接口对比矩阵 接口类型调用方法适用场景吞吐量资源消耗同步接口invoke()实时交互、低并…
阅读更多...
常见的正则匹配规则

常见的正则匹配规则

目录 1&#xff0c;匹配数字2&#xff0c;匹配字母3&#xff0c;匹配字母和数字4&#xff0c;匹配邮箱地址5&#xff0c;匹配URL6&#xff0c;匹配身份证号7&#xff0c;匹配手机号8&#xff0c;匹配日期9&#xff0c;匹配IP地址10&#xff0c;匹配密码强度11&#xff0c;匹配空…
阅读更多...
新时代，科技助力运动旅游开启新潮流

新时代，科技助力运动旅游开启新潮流

新时代&#xff0c;科技助力运动旅游开启新潮流 运动&科技旅游&科技 其实说到运动旅游&#xff0c;这应该是两个方面&#xff1a;运动和旅游&#xff0c;那么下面就从运动和旅游两个方面来理解一下个人认为的哪些科技手段可以助力行程。 运动&科技 说到运动&…
阅读更多...
最新文章

Copyright @ 2022~2023