JavaScript 提供了一组内置函数来使用 GUI 与用户进行通信。内置的
函数包括 alert()、confirm() 和 prompt():
警报交互显示一个带有消息的简单对话框。对话框有一个标记为“确定”的按钮,用户必须单击该按钮才能继续。使用全局函数 alert() 启动警报,如以下示例所示。
alert("Hello from JavaScript");
这将启动一个对话框,其中包含消息“来自 JavaScript 的您好”,并等待用户单击“确定”按钮,然后再继续。
警报最多可以显示三行文本。这意味着您可以将文本传递给 alert() 函数,字符串中最多有两个换行符 (\n)。例如,如果要在不同的行上显示上述消息中的三个单词中的每一个,则函数调用将为:
alert("Hello\nfrom\nJavaScript");
第二种类型的交互是要求用户提供是/否响应。确认对话框将打印一条消息,并显示两个按钮标签“确定”和“取消”。用户必须单击这两个按钮之一才能继续。这是通过全局函数 consure() 实现的,如果用户单击“确定”,则返回布尔值 true,如果用户单击“取消”,则返回 false。例如,如果你想问“继续这个话题?”并收到回复,可以这样写:
answer = confirm("Continue with this topic?");
请注意,在这种情况下,如何将确认对话框的结果分配给变量答案。
第三种类型的对话框是提示用户输入文本的位置。此交互打印消息并请求用户的文本字段响应。它显示两个按钮,一个“确定”和一个“取消”按钮。它还允许指定默认文本。提示对话框由 prompt() 全局函数生成,如以下示例所示:
city = prompt("What is the name of your city?", "");
请注意此函数有两个参数。第一个是要显示的提示,第二个是要放置在文本字段中的默认文本。如果用户单击“确定”或只键入 Enter 键,则返回字符串。如果用户单击“取消”按钮,则返回 null。
事件是系统对某事发生的通知(在我们的例子中是浏览器的通知)。在图形环境中,它们可以是任何时间可能发生的许多事件中的任何一个。例如,用户可以单击浏览器窗口中显示的众多字段或小部件中的任何一个。用户可以调整浏览器窗口的大小或完全关闭它。还有来自 Internet 或运行浏览器的计算机的外部事件。
为了应对所有这些可能性,编写了称为事件处理程序的脚本。事件处理程序与每个事件相关联,JavaScript 在每个事件发生时执行事件处理程序。例如,将编写的某些事件处理程序是由窗体控件中的更改触发的。他们将检查表单控件的内容,以确保用户以正确的格式输入数据。
在 JavaScript 中,每个事件都有一个名称,例如单击、选择和提交。这些是在用户与 HTML 文档交互时创建的。例如,当用户单击文档对象时发生单击事件,当用户选择文本或文本区域字段中的文本时发生选择事件,当用户单击表单上的提交按钮时发生提交事件。
JavaScript 中的事件提供了一种在浏览器中发生某些输入操作(事件)时关联要执行的代码(处理程序)的方法。这是通过将函数与事件相关联来实现的,每当事件发生时调用(触发)该函数。该函数被分配为它所应用到的 DOM 元素的属性。
有两种方法可以将事件处理程序(要调用的函数)与元素相关联。第一种是直接将函数调用编码为将应用它的元素的属性。第二种是使用我们在上一节中讨论的 DOM 方法。
例如,当用户在浏览器窗口中单击鼠标时,会发生常见事件。在HTML DOM中,我们可以将鼠标单击事件与文档正文中的每个元素相关联。分配要在鼠标单击时调用的函数的属性是“onclick”。
假设我们有以下函数在用户单击按钮时执行。
function btnHandler(evt) {
alert("Clicked");
}
我们可以将其编码为在单击按钮时调用:
<button onclick="btnHandler()">Click Me</button>
或者,我们可以用 JavaScript 代码分配事件处理程序。假设我们定义了按钮:
<button id="Button1">Click Me</button>
然后我们可以分配相同的事件处理程序:
document.getElementById("Button1").onclick = btnHandler;
我们可以为许多事件分配事件处理程序。其中一些是:
常见事件
- onabort - 当用户通过单击“停止”按钮中止图像加载时调用
- onclick - 当用户单击指定对象时调用
- onfocus - 在目标对象获得焦点时调用
- onblur - 在目标对象失去焦点时调用
- onmouseover - 当用户将鼠标移到目标对象上时调用
- onmouseout - 当鼠标指针离开目标对象时调用
- onsubmit - 当用户单击表单中的“提交”按钮时调用
- onchange - 当用户更改文本字段的内容时调用
- onselect - 当用户选择文本字段的内容时调用
- onreset - 当用户单击窗体中的“重置”按钮时调用
- onload - 在加载目标图像或文档时调用
- onunload - 在卸载目标图像或文档时调用
请注意,所有事件属性都以字符串“on”开头。
到目前为止,我们已经了解了如何将单个事件侦听器分配给 HTML 元素。这对于许多应用程序来说都很好,但是当我们变得更加复杂时,我们通常希望将许多事件侦听器分配给同一事件。当我们通过添加额外的侦听器来增强预先存在的代码时尤其如此,我们将在本单元的后面部分进行。DOM 提供了一种将多个事件侦听器分配给同一事件的 DOM 元素的方法。
要添加事件侦听器,我们使用通用语法:
elt.addEventListener(event, func)
例如,我们可以在上面的按钮中添加一个额外的事件侦听器:
document.getElementById("Button1").addEventListener("click", handler2);
请注意,事件名称字符串不再具有“on”前缀,尽管名称的其余部分保持不变。
我们可以根据需要添加任意数量的事件处理程序。我们还可以使用常规格式删除事件处理程序:
elt.removeEventListener(event, func)
这里的函数名称必须是我们之前添加的名称。例如,我们可以通过以下方式删除上述事件处理程序:
document.getElementById("Button1").removerEventListener("click", handler2);
加载事件-onload event
onload 事件是在加载网页时触发的事件。
请看下面的代码:
<!DOCTYPE html>
<html>
<body onload="sayHi()">
<p>Some page content here....</p>
<script>
function sayHi() {
alert("hi there!");
}
</script>
</body>
</html>
效果如下,点击浏览器的刷新按钮之后,如下图所示:
鼠标悬停和鼠标输出-onmousover和onmouseout事件
onmouseover 和 onmouseout 事件是相关的,通常按如下方式使用 togethor:
- 当鼠标光标移到元素上时,将触发 onmouseover 事件。
- 当鼠标光标移出元素时,将触发 onmouseout 事件。
根据上面的解释,你能猜出下面的代码会做什么吗?
<!DOCTYPE html>
<html>
<body>
<img id="someImage" src="smile.png" onmouseover="mouseOver()" onmouseout="mouseOut()" >
<script>
function mouseOver() {
document.getElementById("someImage").src = "frown.png";
}
function mouseOut() {
document.getElementById("someImage").src = "smile.png";
}
</script>
</body>
</html>
鼠标放置于笑脸图片前,如下图所示:
鼠标离开笑脸图片,默认状态,如下图所示:
更改事件-onchange
我们要看的最后一个事件是onchange事件。请看以下示例:
<!DOCTYPE html>
<html>
<body>
<p>Type your name in the text field below then push the enter button on your keyboard or click somewhere else on the
screen</p>
<input type="text" id="name" onchange="alertUser()">
<script>
function alertUser() {
alert(document.getElementById("name").value);
}
</script>
</body>
</html>
如果您仔细阅读代码,您还会注意到我们引入了一个新属性,那就是值。value 属性允许我们获取或设置输入字段的值。
让我们讨论一下这里还发生了什么:
- 我们在接受用户输入的文本输入上有一个 onchange 事件
- 当用户更改输入的值时,将触发 onchange 事件并调用 alertUser 函数
- 警报用户函数获取 id 为 name 的元素,然后使用 value 属性获取其值。然后,此值将显示在警报中。
根据代码,当用户在文本输入框中输入名称并更改其值时,将触发 onchange 事件。然后,该事件将调用 alertUser 函数。alertUser 函数获取 id 为 name 的元素,并使用 value 属性获取输入字段的值。最后,该值将显示在警报框中,以向用户显示输入的名称。换句话说,这段代码实现了当用户输入名称后,弹出警报框显示输入的名称。
如下图所示:
假设我们要更新下面的代码。为复选框输入添加一个 onchange 事件,该事件在复选框更改时触发警报。
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="bike" name="bike" value="Bike">
<label for="bike">I have a bike</label><br>
</body>
</html>
那么,我们需要进行如下改动:
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="bike" name="bike" value="Bike" onchange="alertUser()">
<label for="bike">I have a bike</label><br>
<script>
function alertUser() {
if (document.getElementById("bike").checked) {
alert("You have a bike.");
} else {
alert("You don't have a bike.");
}
}
</script>
</body>
</html>
点击“I have a bike”前的复选框进行勾选,则如下图所示,关闭alert弹窗后复选框将被勾选。
取消“I have a bike”前的复选框的勾选,则如下图所示,关闭alert弹窗后复选框将不被勾选。
。
其他事件-onclick, onblur
onclick
这里主要展示两个示例:一个简单版与下拉菜单版。
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>单击元素时,onclick事件会触发一个函数。</p>
<p>单击可触发一个功能,该功能将输出“Hello World”:</p>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
界面如下图所示:
点击后如下图所示:
OnClick下拉菜单(主要是很帅)
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>单击按钮打开下拉菜单。</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn">下拉菜单</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">首页</a>
<a href="#about">关于我们</a>
<a href="#contact">联系方式</a>
</div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
</html>
如下图所示:
Onblur
onblur 属性在元素失去焦点的那一刻触发。
Onblur最常与表单验证代码一起使用(例如,当用户离开表单字段时)。
提示:onblur 属性与 onfocus属性相反。
<!DOCTYPE html>
<html>
<body>
<p>当您进入输入字段时,会触发一个功能,将背景颜色设置为黄色。当您离开输入字段时,会触发一个函数,将背景颜色设置为红色。</p>
输入字段: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">
<script>
// Focus = 将输入的背景颜色更改为黄色
function focusFunction() {
document.getElementById("myInput").style.background = "yellow";
}
// No focus = 将输入的背景颜色更改为红色
function blurFunction() {
document.getElementById("myInput").style.background = "red";
}
</script>
</body>
</html>
状态一,初始化:
状态二,输入状态:
状态三,离开输入状态:
对象-Object
JavaScript 对象与其他语言中的大多数数据结构不同,并且构成了语言的重要组成部分。
{name:"Barry", age: 21, address: "Headland Street, Woopi"}
JavaScript 中的对象是命名属性的集合。属性可以是数据或方法。数据属性(仅称为“属性”)可以是基元数据类型,也可以是对另一个对象的引用。方法属性(称为“方法”)是执行某些JavaScript代码的JavaScript函数。要访问对象中的属性或方法,我们使用常见的点表示法:
object_name.property_name
例如,要访问名为 button1 的对象的状态属性,我们编写代码:
button1.status
由于属性也可以是具有属性的对象,因此我们有时需要命名一系列对象来访问所需的属性。为此,我们串联应用 '.“ 运算符。例如,假设上面的对象本身是名为 group2 的对象的属性,我们将访问 button1 状态,如下所示:
group2.button1.status
成员是函数,因此我们在访问它们时也可以使用参数。如果没有参数,那么我们使用一对空括号“()”附加到方法名称。
以下是 JavaScript 中方法访问的示例:
frame2.setSize(20,100);
button1.reset();
可以随时在对象中添加和删除属性。这与面向对象的语言完全不同,面向对象的语言需要继承来添加或更改属性,并且通常会阻止属性被删除。
JavaScript 使用以下语法实例化未定义的对象:
var my_object = new Object();
可以在新调用后将属性和方法分配给对象。
var person = new Object();
person.name = “Some name”;
var my_array = new Array();
JavaScript 还可以使用对象文字创建对象。例如:
var person = {firstName:"John", lastName:"Doe", age:50};
JavaScript 预定义了用于访问对象及其属性的引用变量。调用构造函数时,这是对新创建对象的引用。例如:
var person = { firstName: "Penelope", lastName: "Barrymore", fullName: function () { console.log(this.firstName + " " + this.lastName); // We could have also written this: console.log(person.firstName + " " + person.lastName); } }
JavaScript 对象的另一个有用功能是将函数作为属性。例如,以下对象具有返回其他两个属性的串联的函数:
var me = { firstName: "Reza",
lastName: "Ghanbarzadeh",
fullName: function() {
return this.firstName
+ this.lastName;
};
console.log(me.fullName());
关于此示例,有几点需要注意。关键字“this”是访问同一对象中的其他属性所必需的。此外,调用函数需要括号“()”。
可能可以看到如何使用 JavaScript 对象来创建代码库。例如,数学库是一个 JavaScript 对象,具有许多属性,这些属性既是数据值又是函数。Math.PI 是 pi 值的浮点表示形式,Math.random() 是一个返回 0 到 1 之间的随机数的函数。
表单验证-Form validation(onsubmit)
通常的做法是在客户端输入所有必需的信息并单击“提交”按钮后在服务器上验证表单。如果客户端输入的信息不正确或丢失,服务器必须将整个表单返回给客户端。随后要求客户再次提交正确的信息。这是一个困难且耗时的过程,给服务器带来了很大的压力。
使用JavaScript,表单的数据可以在传输到Web服务器之前在客户端计算机上进行验证。JavaScript 中的表单验证需要两个基本函数。
- 第一步是验证表单上是否填写了所有必填字段。需要对表单中的每个字段进行简单的循环,以确定数据是否存在。
- 验证过程的第二部分是确保输入的数据具有正确的形式和值。为了确保数据正确,必须在代码中包含适当的逻辑。
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
这段代码的主要功能是根据用户输入的值,检查输入是否为数字且介于 1 和 10 之间,并根据不同情况更新页面上指定元素的显示内容。如果输入不合法,则显示 “Input not valid”;否则,显示 “Input OK”。
以下是一个表单验证的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple JavaScript form validation</title>
<style> </style>
</head>
<script>
function validateform() {
var name = document.myform.name.value;
var mobile = document.myform.mobile.value;
var email = document.myform.email.value;
if (name == null || name == "") {
alert("姓名不能为空");
return false;
} else if (mobile.length < 10) {
alert("联系电话至少需要10个长度");
return false;
}
alert("你的表单已经被提交");
return true;
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateform()">
姓名: <input type="text" name="name"><br/><br/>
联系电话: <input type="text" name="mobile"><br/><br/>
邮箱: <input type="email" name="email"><br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
界面如下:
状态一:
状态二:
状态三: