山东手机网站建设电话,个人主页网页介绍,wordpress wp_footer在哪里定义,安卓应用市场appJavaScript基础下
1 事件处理
JS 事件#xff08;event#xff09;是当用户与网页进行交互时发生的事情#xff0c;例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时#xff0c;您可以使用 JavaScript 中的事件处理程序event是当用户与网页进行交互时发生的事情例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时您可以使用 JavaScript 中的事件处理程序也可称为事件监听器来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词on开头的例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件。 1.2 事件绑定
事件只有与 HTML 元素绑定之后才能被触发为 HTML 元素绑定事件处理程序的方法由很多最简单的就是通过 HTML事件属性来直接绑定事件处理程序例如 onclick、onmouseover、onmouseout 等属性。
以 onclick 属性为例通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件即在该元素上单击鼠标左键时触发的事件示例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodybutton typebutton οnclickmyBtn()按钮/buttonscript typetext/javascriptfunction myBtn(){alert(Hello World!);}/script
/body
/html
我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序如下例所示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodybutton typebutton idmyBtn按钮/buttonscriptfunction sayHello() {alert(Hello World!);}document.getElementById(myBtn).onclick sayHello;/script
/body
/html
1.3 事件示例
一般情况下事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。 onmouseover事件 onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodybutton typebutton οnmοuseοveralert(鼠标已经移动到了该按钮上);请将鼠标移动至此处/buttonbra href# οnmοuseοvermyEvent()请将鼠标移动至此处/ascriptfunction myEvent() {alert(鼠标已经移动到了该链接上);}/script
/body
/html onmouseout事件 onmouseout 事件会在鼠标从元素上离开时触发示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodydiv stylewidth: 350px; height: 200px; border:1px solid black idmyBox/divscriptfunction myEvent() {alert(您的鼠标已经离开指定元素);}document.getElementById(myBox).onmouseout myEvent;/script
/body
/html onkeydown事件 onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyinput typetext οnkeydοwnmyEvent()scriptfunction myEvent() {alert(您按下了键盘上的某个按钮);}/script
/body
/html onkeyup事件 onkeyup 事件是指当用户按下键盘上的某个按键并将其释放即按下并松开某个按键时触发的事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyinput typetext οnkeyupmyEvent()scriptfunction 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 langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar 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 langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyp idone/pp idtwo/pscript typetext/javascriptvar 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() 设置定时器时这两个方法都会产生一个定时器的唯一 IDID 为一个正整数值也被称为“定时器标识符”通过这个 ID我们可以清除 ID 所对应的定时器。
我们可以借助 clearTimeout() 或 clearInterval() 函数来分别清除由 setTimeout() 或 setInterval() 函数创建的定时器。调用 clearTimeout() 或 clearInterval() 函数需要提供定时器的唯一 ID 作为参数示例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyp当前时间为span idclock/span/pbutton οnclickstopClock();停止/buttonhrscript typetext/javascriptvar 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 langen
headmeta charsetUTF-8title必填字段验证/titlestyle.error{color: red;}/style
/head
body
form οnsubmitreturn validateForm() action methodpostfieldset styletext-align: center;width: 300px;position: relativelegend注册:/legenddiv classrowlabel账emsp;号/labelinput typetext namenamespan classerror idnameErr/span/divdiv classrowlabel密emsp;码/labelinput typepassword namepwdspan classerror idpwdErr/span/divdiv classrowlabel邮emsp;箱/labelinput typetext nameemailspan classerror idemailErr/span/divdiv classrowlabel电emsp;话/labelinput typetext namemobile maxlength11span classerror idmobileErr/span/divdiv classrowlabel验证码/labelinput typetext namecaptcha maxlength4 stylewidth: 120px;span idcaptcha οnclickgetCaptcha()/spanspan classerror idcaptchaErr/span/divdiv classrowinput typesubmit 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[namename]).value;var pwd document.querySelector(input[namepwd]).value;var email document.querySelector(input[nameemail]).value;var mobile document.querySelector(input[namemobile]).value;var captcha document.querySelector(input[namecaptcha]).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 langen
headmeta charsetUTF-8title数据格式验证/titlestyle.error{color: red;font-size: 10px;}
/style
/head
body
form οnsubmitreturn validateForm() action methodpostfieldset styletext-align: center;width: 350px;position: relativelegend注册:/legenddiv classrowlabel账emsp;号/labelinput typetext namenamebrspan classerror idnameErr/span/divdiv classrowlabel密emsp;码/labelinput typepassword namepwdbrspan classerror idpwdErr/span/divdiv classrowlabel邮emsp;箱/labelinput typetext nameemailbrspan classerror idemailErr/span/divdiv classrowlabel电emsp;话/labelinput typetext namemobile maxlength11brspan classerror idmobileErr/span/divdiv classrowlabel验证码/labelinput typetext namecaptcha maxlength4 stylewidth: 120px;span idcaptcha οnclickgetCaptcha()/spanbrspan classerror idcaptchaErr/span/divdiv classrowinput typesubmit 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[namename]).value;var pwd document.querySelector(input[namepwd]).value;var email document.querySelector(input[nameemail]).value;var mobile document.querySelector(input[namemobile]).value;var captcha document.querySelector(input[namecaptcha]).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
