学习笔记之JavaScript——知识点（5）

JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

x = 5; // 变量 x 设置为 5var x; // 声明 x

和

var x; // 声明 xx = 5; // 变量 x 设置为 5

是相同的效果。

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

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

var x = 5; // 初始化 xelem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y;           // 显示 x 和 yvar y = 7; // 初始化 y/* y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。*/

和

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

相似。

---

JavaScript 严格模式(use strict)

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

使用 “use strict” 指令

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。

支持严格模式的浏览器:
Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

• 为什么使用严格模式:
  
  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫。
  • “严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
  • 另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

严格模式的限制

不允许使用未声明的变量。对象也是一个变量。不允许删除变量或对象。不允许删除函数。不允许变量重名。不允许使用八进制。不允许使用转义字符。不允许对只读属性赋值。不允许对一个使用getter方法读取的属性进行赋值。不允许删除一个不允许删除的属性。变量名不能使用 "eval" 字符串，不能使用 "arguments" 字符串。由于一些安全原因，在作用域 eval() 创建的变量不能被调用。禁止this关键字指向全局对象。

保留关键字
为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字：
implements
interface
let
package
private
protected
public
static
yield

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

---

JavaScript 使用误区

赋值运算符应用错误

在 JavaScript 程序中如果在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。*赋值语句返回变量的值。

---

比较运算符常见错误

在常规的比较中，数据类型是被忽略的。在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型。

---

加法与连接注意事项

加法是两个数字相加。
连接是两个字符串连接。
JavaScript 的加法和连接都使用 + 运算符。

var x = 10 + 5;          // x 的结果为 15var x = 10 + "5";        // x 的结果为 "105"

---

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定,为解决以上问题，可以用整数的乘除法来解决。

---

JavaScript 字符串分行

JavaScript 允许我们在字符串中使用断行语句:

var x ="Hello World!";

但是，在字符串中直接使用回车换行是会报错的。

var x = "HelloWorld!";

---

错误的使用分号

---

Return 语句使用注意事项

JavaScript 默认是在代码的最后一行自动结束。

---

在 JavaScript 中，分号是可选的 。

由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。注意：不用对 return 语句进行断行。 

---

数组中使用名字来索引

许多程序语言都允许使用名字来作为数组的索引。使用名字来作为索引的数组称为关联数组(或哈希)。

JavaScript 不支持使用名字来索引数组，只允许使用数字索引。

在 JavaScript 中, 对象 使用 名字作为索引。

如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。
执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误。

---

定义数组元素，最后不能添加逗号

定义对象，最后不能添加逗号

---

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。正确的方式是我们需要先使用 typeof 来检测对象是否已定义。

---

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域。
一般各个代码块的作用域都是全局的。

---

JavaScript 表单

JavaScript 表单验证

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

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交。

---

数据验证

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

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

大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证 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 元素

---

JavaScript 表单验证

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

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

必填（或必选）项目

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

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

E-mail 验证

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

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;  }}