WEB前端-JavaScript学习（五）

本文最后更新于：December 3, 2021 pm

JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。所有现代的 HTML 页面都使用 JavaScript，可以用于改进设计、验证表单、检测浏览器、创建cookies等。

目录

1.JavaScript 错误处理

try 语句测试代码块的错误。catch 语句处理错误。throw 语句创建自定义错误。

1.1 JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：可能是语法错误，通常是程序员造成的编码错误或错别字。可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。可能是由于来自服务器或用户的错误输出而导致的错误。当然，也可能是由于许多其他不可预知的因素。

1.2 抛出（throw）错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。描述这种情况的技术术语是：JavaScript 将抛出一个错误。

1.3 try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。JavaScript 语句 try 和 catch 是成对出现的。

语法：

1
2
3
4
5
6
7
8
try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

1.4 Throw 语句

throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么能够控制程序流，并生成自定义的错误消息。

语法：

1
throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

使用实例：检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

如果 getElementById 函数出错，例子也会抛出一个错误。

2.JavaScript 调试

在程序代码中寻找错误叫做代码调试。调试很难，但幸运的是，很多浏览器都内置了调试工具。内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

2.1 console.log() 方法

如果浏览器支持调试，可以使用 console.log() 方法在调试窗口上打印 JavaScript 值。

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

2.2 设置断点

在调试窗口中，你可以设置 JavaScript 代码的断点。在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。在检查完毕后，可以重新执行代码（如播放按钮）。

2.3 debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。如果没有调试可用，debugger 语句将无法工作。

2.4 浏览器的调试工具

通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

3.JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性。

验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否为数字型？

3.1 必填（或必选）项目

函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）。

函数：

1
2
3
4
5
6
7
8
function validateForm(){        
var x=document.forms["myForm"]["fname"].value;        
if (x==null || x=="")        
  {        
  alert("First name must be filled out");        
  return false;        
  }        
}

使用实例：上述函数在 form 表单提交时被调用。

1
2
3
4
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

3.2 E-mail 验证

函数检查输入的数据是否符合电子邮件地址的基本语法。也就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号。

函数：

1
2
3
4
5
6
7
8
9
10
function validateForm(){        
var x=document.forms["myForm"]["email"].value;        
var atpos=x.indexOf("@");        
var dotpos=x.lastIndexOf(".");        
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)        
  {        
  alert("Not a valid e-mail address");        
  return false;        
  }       
}

实例：连同 HTML 表单的完整代码。

1
2
3
4
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

3.3 数字验证

函数检查输入的数据是否是1~10之间的数字。假如输入的不为数字或不是，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）。

实例：

1
2
3
4
5
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 
<strong>请输入1到10之间的数字：</strong>
<input id="number">
<button type="button" onclick="myFunction()">提交</button>
</form>

4.JavaScript 保留关键字

保留关键字在意思上表达成为将来的关键字而保留的单词。在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

* 标记的关键字是 ECMAScript5 中新添加的。

4.1 JavaScript 对象、属性和方法

也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名。

Array Date eval function hasOwnProperty
Infinity isFinite isNaN isPrototypeOf length
Math NaN name Number Object
prototype String toString undefined valueOf

4.2 Java 保留关键字

JavaScript 经常与 Java 一起使用。应该避免使用一些 Java 对象和属性作为 JavaScript 标识符。

getClass java JavaArray javaClass JavaObject JavaPackage

4.3 Windows 保留关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。在 HTML 中，必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名。

alert all anchor anchors area
assign blur button checkbox clearInterval
clearTimeout clientInformation close closed confirm
constructor crypto decodeURI decodeURIComponent defaultStatus
document element elements embed embeds
encodeURI encodeURIComponent escape event fileUpload
focus form forms frame innerHeight
innerWidth layer layers link location
mimeTypes navigate navigator frames frameRate
hidden history image images offscreenBuffering
open opener option outerHeight outerWidth
packages pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin prompt
propertyIsEnum radio reset screenX screenY
scroll secure select self setInterval
setTimeout status submit taint text
textarea top unescape untaint window

4.4 HTML 事件句柄

还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。

onblur onclick onerror onfocus
onkeydown onkeypress onkeyup onmouseover
onload onmouseup onmousedown onsubmit

在JavaScript中关键字不能用作变量名或者函数名，否则可能会得到错误消息，例如“”Identifier Expected”（应该有标识符、期望标识符）”。

4.5 非标准 JavaScript

除了保留关键字，在 JavaScript 实现中也有一些非标准的关键字。一个实例是 const 关键字，用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。
Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。最好不要使用它。

5.JavaScript JSON

JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。

JSON 英文全称 JavaScript Object Notation，是一种轻量级的数据交换格式。JSON是独立的语言、易于理解。JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

5.1 实例

使用实例：定义 employees 对象: 3 条员工记录（对象）的数组。

1
2
3
4
5
{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

5.2 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则：

  1. 数据为 键/值 对。
  2. 数据由逗号分隔。
  3. 大括号保存对象
  4. 方括号保存数组

5.3 JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。键/值对包括字段名称（在双引号中），后面一个冒号，然后是值。

1
"firstName":"John"

5.4 JSON 对象

JSON 对象保存在大括号内。就像在 JavaScript 中, 对象可以保存多个 键/值 对。

1
{"firstName":"John", "lastName":"Doe"}

5.5 JSON 数组

JSON 数组保存在中括号内。就像在 JavaScript 中, 数组可以包含对象。
对象 “employees” 是一个数组。包含了三个对象。每个对象为员工的记录（姓和名）。

1
2
3
4
5
"employees":[        
    {"firstName":"John", "lastName":"Doe"},        
    {"firstName":"Anna", "lastName":"Smith"},     
    {"firstName":"Peter", "lastName":"Jones"}        
]

5.6 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。简单起见，我们网页中直接设置 JSON 字符串。

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

1
2
3
4
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

1
var obj = JSON.parse(text);

最后，在页面中使用新的 JavaScript 对象：

1
2
3
4
5
6
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

6.javascript:void(0) 含义

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

使用实例：创建超级链接，当点击后不会发生任何事。

1
<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

使用实例：点击链接后显示警告信息。

1
2
3
4
5
6
7
8
9
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

6.1 href=”#”与href=”javascript:void(0)”的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。如果要定义一个死链接使用 javascript:void(0) 。

实例：

1
2
3
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p>

void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行。

WEB前端

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/3981308863.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！