Web-JavaScript对象、HTML DOM事件、alert提示和表单验证

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 或运行浏览器的计算机的外部事件。

扫描二维码关注公众号，回复： 16932765 查看本文章

为了应对所有这些可能性，编写了称为事件处理程序的脚本。事件处理程序与每个事件相关联，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>

界面如下：

状态一：

状态二：

状态三：