1.
JavaScript 变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
以下两个实例将获得相同的结果：
实例 1
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
尝试一下 »实例 2
var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
尝试一下 »要理解以上实例就需要理解 "hoisting(变量提升)"。
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 初始化不会提升
JavaScript 只有声明的变量会提升，初始化的不会。
以下两个实例结果结果不相同：
实例 1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
尝试一下 »实例 2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
尝试一下 »实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。
实例 2 类似以下代码:
var x = 5; // 初始化 x
var y; // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
y = 7; // 设置 y 为 7
在头部声明你的变量
对于大多数程序员来说并不知道 JavaScript 变量提升。
如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。
为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。
 | JavaScript 严格模式(strict mode)不允许使用未声明的变量。
在下一个章节中我们将会学习到 "严格模式(strict mode)" 。 |
|---|
2.JavaScript 严格模式(use strict)
JavaScript 严格模式（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+。 |
|---|
严格模式声明
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
实例中我们可以在浏览器按下 F12 (或点击"工具>更多工具>开发者工具") 开启调试模式，查看报错信息。
Gif 图演示如下：
实例
"use strict";
x = 3.14; // 报错 (x 未定义)
尝试一下 »实例
"use strict";
myFunction();
function myFunction() {
y = 3.14; // 报错 (y 未定义)
}
尝试一下 »在函数内部声明是局部作用域 (只在函数内使用严格模式):
实例
x = 3.14; // 不报错
myFunction();
function myFunction() {
"use strict";
y = 3.14; // 报错 (y 未定义)
}
尝试一下 »
为什么使用严格模式:
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
严格模式的限制
不允许使用未声明的变量：
"use strict";
x = 3.14; // 报错 (x 未定义)
尝试一下 » | 对象也是一个变量。 |
|---|
"use strict";
x = {p1:10, p2:20}; // 报错 (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"就是false
function f(){
"use strict";
return !this;
}
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。
function f(){
"use strict";
this.a = 1;
};
f();// 报错，this未定义
保留关键字
为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字：
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
"use strict";
var public = 1500; // 报错
尝试一下 » | "use strict" 指令只允许出现在脚本或函数的开头。 |
|---|
3.
JavaScript 使用误区
本章节我们将讨论 JavaScript 的使用误区。
赋值运算符应用错误
在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。
if 条件语句返回 false (是我们预期的)因为 x 不等于 10:
if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:
if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:
| 赋值语句返回变量的值。 |
|---|
比较运算符常见错误
在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：
var x = 10;
var y = "10";
if (x == y)
尝试一下 »在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：
var x = 10;
var y = "10";
if (x === y)
尝试一下 »这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:
以下实例会执行 alert 弹窗：
var x = 10;
switch(x) {
case 10: alert("Hello");
}
尝试一下 »以下实例由于类型不一致不会执行 alert 弹窗：
var x = 10;
switch(x) {
case "10": alert("Hello");
}
尝试一下 »
加法与连接注意事项
加法是两个数字相加。
连接是两个字符串连接。
JavaScript 的加法和连接都使用 + 运算符。
接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别：
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"
尝试一下 »
浮点型数据使用注意事项
JavaScript 中的所有数据都是以 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 中精度问题以及解决方案
JavaScript 字符串分行
JavaScript 允许我们在字符串中使用断行语句:
实例 1
var x =
"Hello World!";
尝试一下 »但是，在字符串中直接使用回车换行是会报错的：
实例 2
var x = "Hello
World!";
尝试一下 »我们可以在选择开发工具或按下 F12 来查看错误信息：
字符串断行需要使用反斜杠(\)，如下所示:
实例 3
var x = "Hello \
World!";
尝试一下 »
错误的使用分号
以下实例中，if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误的输出结果。
由于分号使用错误，if 语句中的代码块就一定会执行：
if (x == 19);
{
// code block
}
尝试一下 »
Return 语句使用注意事项
JavaScript 默认是在代码的最后一行自动结束。
以下两个实例返回结果是一样的(一个有分号一个没有):
实例 1
function myFunction(a) {
var power = 10
return a * power
}
尝试一下 »实例 2
function myFunction(a) {
var power = 10;
return a * power;
}
尝试一下 »JavaScript 也可以使用多行来结束一个语句。
以下实例返回相同的结果:
实例 3
function myFunction(a) {
var
power = 10;
return a * power;
}
尝试一下 »但是，以下实例结果会返回 undefined：
实例 4
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 中, 对象 使用 名字作为索引。
如果你使用名字作为索引，当访问数组时，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
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
错误的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)
程序块作用域
在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10，而不是 undefined：
实例
for (var i = 0; i < 10; i++) {
// some code
}
return i;
尝试一下 »
4.完成了任务15
明天计划的事情：
1.继续js的学习
任务总结：
任务名称：CSS-TASK15；
成果链接：https://zhangxinlove.github.io/zhangxin/task15/task15-1.html
任务耗时：2天
技能脑图：
个人：
官网：
任务总结
1:对task15考查的是对页面的整体把握，对页面的布局考察的较多，所以在做页面的过程中会对出现的问题反复修改，耗费时间较多，在以后需要多考虑页面的布局
2: 对于页面的整体布局，和利于维护的架构了解并不深，需要在以后的任务中提高意识；sass基本功能的使用较熟练，更高级的用法没有涉及。
评论