JavaScript的基础

文章列表

JavaScript的基础

文章目录

一、JavaScript 声明提升
二、JavaScript 严格模式(use strict)
三、JavaScript 表单
四、JavaScript 表单验证
五、JavaScript 验证 API
总结

一、JavaScript 声明提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下两个实例将获得相同的结果：

x = 5; // 变量 x 设置为 5elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 xvar x; // 声明 x

var x; // 声明 x
x = 5; // 变量 x 设置为 5elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

要理解以上实例就需要理解 “hoisting(声明提升)”。

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

以下两个实例结果结果不相同：

 var x = 5; // 初始化 x
var y = 7; // 初始化 yelem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

JavaScript的基础

 var x = 5; // 初始化 xelem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 yvar y = 7; // 初始化 y

JavaScript的基础
实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

实例 2 类似以下代码:

var x = 5; // 初始化 x
var y;     // 声明 yelem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 yy = 7;    // 设置 y 为 7

二、JavaScript 严格模式(use strict)

JavaScript 严格模式（strict mode）即在严格的条件下运行。

使用 “use strict” 指令

“use strict” 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

在函数内部声明是局部作用域 (只在函数内使用严格模式):

x = 3.14;       // 不报错
myFunction();function myFunction() {"use strict";y = 3.14;   // 报错 (y 未定义)
}

为什么使用严格模式:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它。

严格模式的限制

不允许使用未声明的变量：

 "use strict";
x = 3.14;                // 报错 (x 未定义)

不允许删除变量或对象。

 "use strict";
var x = 3.14;
delete x;                // 报错

不允许删除函数。

 "use strict";
function x(p1, p2) {};
delete x;                // 报错

不允许变量重名:
"use strict";
function x(p1, p1) {};   // 报错不允许使用八进制:
"use strict";
var x = 010;             // 报错不允许使用转义字符:
"use strict";
var x = \\010;            // 报错不允许对只读属性赋值:
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14;            // 报错不允许对一个使用getter方法读取的属性进行赋值
"use strict";
var obj = {get x() {return 0} };obj.x = 3.14;            // 报错不允许删除一个不允许删除的属性：
"use strict";
delete Object.prototype; // 报错变量名不能使用 "eval" 字符串:
"use strict";
var eval = 3.14;         // 报错变量名不能使用 "arguments" 字符串:
"use strict";
var arguments = 3.14;    // 报错不允许使用以下这种语句:
"use strict";
with (Math){x = cos(2)}; // 报错由于一些安全原因，在作用域 eval() 创建的变量不能被调用：
"use strict";
eval ("var x = 2");
alert (x);               // 报错

禁止this关键字指向全局对象。

function f(){return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是falsefunction f(){ "use strict";return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

function f(){"use strict";this.a = 1;
};
f();// 报错，this未定义

"use strict" 指令只允许出现在脚本或函数的开头。

三、JavaScript 表单

JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段**(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：**


function validateForm() {var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") {alert("需要输入名字。");return false;}
}

以上 JavaScript 代码可以通过 HTML 代码来调用：


<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

forms 集合返回当前页面所有表单的数组集合。
语法
document.forms[].property

JavaScript的基础

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：


<form action="demo_form.php" method="post"><input type="text" name="fname" required="required"><input type="submit" value="提交">
</form>

数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有：

必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML 约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

JavaScript的基础

四、JavaScript 表单验证

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

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

必填（或必选）项目

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


function validateForm()
{var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必须填写");return false;}
}

以上函数在 form 表单提交时被调用:

<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){alert("姓必须填写");return false;}
}
</script>
</head>
<body><form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form></body>

JavaScript的基础

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
JavaScript的基础

<head>
<script>
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("不是一个有效的 e-mail 地址");return false;}
}
</script>
</head>
<body><form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form></body>