JavaScript 使用误区
赋值运算符应用错误
if 条件语句返回 false (是我们预期的)因为 x 不等于 10
var x = 0;
if (x == 10)
if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true
var x = 0;
if (x = 10)
if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false
var x = 0;
if (x = 0)
赋值语句返回变量的值
比较运算符常见错误
在常规的比较中，数据类型是被忽略的
if 条件语句返回 true
var x = 10;
var y = "10";
if (x == y)
在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false
var x = 10;
var y = "10";
if (x == y)
switch 语句会使用恒等计算符(===)进行比较
以下实例会执行 alert 弹窗
var x = 10;
switch(x) {
case 10: alert("Hello");
}
以下实例由于类型不一致不会执行 alert 弹窗
var x = 10;
switch(x) {
case "10": alert("Hello");
}
加法与连接注意事项
加法是两个数字相加。
连接是两个字符串连接。
加法和连接都使用 + 运算符
var x = 10 + 5; // x 的结果为 15
var x = 10 + "5"; // x 的结果为 "105"
使用变量相加结果也不一致
var x = 10;
var y = 5;
var z = x + y; // z 的结果为 15
var x = 10;
var y = "5";
var z = x + y; // z 的结果为 "105"
浮点型数据使用注意事项
avaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false
可以用整数的乘除法来解决
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
JavaScript 字符串分行
字符串中可以使用断行语句
var x =
"Hello World!";
在字符串中 不能直接使用回车换行，会报错
断行需要使用反斜杠()
var x = "Hello \
World!";
错误的使用分号
if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误输出结果
由于分号使用错误，if 语句中的代码块就一定会执行
if (x == 19);
{
// code block
}
Return 语句使用注意事项
JavaScript 默认是在代码的最后一行自动结束
function myFunction(a) {
var power = 10
return a * power
}
function myFunction(a) {
var power = 10;
return a * power;
}
两个实例返回结果是一样的(一个有分号一个没有)
也可以使用多行来结束一个语句
function myFunction(a) {
var
power = 10;
return a * power;
}
但是，以下实例结果会返回 undefined
function myFunction(a) {
var
power = 10;
return
a * power;
}
因为在 JavaScript 中，实例 4 的代码与下面的代码一致
function myFunction(a) {
var
power = 10;
return; // 分号结束，返回 undefined
a * power;
}
解析
如果是一个不完整的语句，如下所示:
var
JavaScript 将尝试读取第二行的语句：
power = 10;
但是由于这样的语句是完整的:
return
JavaScript 将自动关闭语句:
return;
在 JavaScript 中，分号是可选的 。
由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。
不用对 return 语句进行断行
数组中使用名字来索引
使用名字来作为索引的数组称为关联数组(或哈希)
JavaScript 不支持使用名字来索引数组，只允许使用数字索引
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length 返回 3
var y = person[0]; // person[0] 返回 "John"
对象 使用 名字作为索引
使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。
执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length 返回 0
var y = person[0]; // person[0] 返回 undefined
定义数组元素，最后不能添加逗号
添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果
var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
正确的定义方式
points = [40, 100, 1, 5, 25, 10];
定义对象，最后不能添加逗号
错误的定义方式
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}
正确的定义方式
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}
Undefined 不是 Null
null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错
错误的使用方式
if (myObj !== null && typeof myObj !== "undefined")
正确的方式是我们需要先使用 typeof 来检测对象是否已定义
if (typeof myObj !== "undefined" && myObj !== null)
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的
for (var i = 0; i < 10; i++) {
// some code
}
return i;
代码的的变量 i 返回 10，而不是 undefined
JavaScript 表单
JavaScript 表单验证
以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交
JavaScript 实例
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
以上 JavaScript 代码可以通过 HTML 代码来调用
HTML 表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
JavaScript 验证输入的数字
JavaScript 常用于对输入数字的验证
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证
数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：
- 必需字段是否有输入?
- 用户是否输入了合法的数据?
- 在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。
HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：
- HTML 输入属性
- CSS 伪类选择器
- DOM 属性和方法
约束验证 HTML 输入属性
disabled 规定输入的元素不可用
max 规定输入元素的最大值
min 规定输入元素的最小值
pattern 规定输入元素值的模式
required 规定输入元素字段是必需的
type 规定输入元素的类型
约束验证 CSS 伪类选择器
:disabled 选取属性为 "disabled" 属性的 input 元素
:invalid 选取无效的 input 元素
:optional 选择没有"required"属性的 input 元素
:required 选择有"required"属性的 input 元素
:valid 选取有效值的 input 元素
