什么是JavaScript语言?
- JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O（输入/输出）相关的 API，都要靠宿主环境（host）提供，所以 JavaScript 只合适嵌入更大型的应用程序环境，去调用宿主环境提供的底层 API;当前五个主要浏览器:IE / Firefox / Chrome / Safari /Opera;
学习的内容主要有七部分!
- 语法
- 标准库
- 面向对象编程
- 语法专题
- Dom模型
- 浏览器环境
语法
- 语句
- 在计算机语言中,语句指的就是为了完成某种任务而进行的操作
- 语句与表达式的区别在于,前者主要是为了进行某种操作,一般情况下不需要值;后者则是为了得到值,一定会得到一个值
- 变量提升
- 变量的声明和赋值是分开的两个步骤,已声明却未赋值,值为undefined;未声明却使用则报错
- var a = 1; 实际上是两句话 var a; a = 1;
- 在JavaScript众,变量重新声明是无用的,重新声明并且赋值则会覆盖前面代码
- 不用var声明变量,不利于表达意图,容易不知不觉地创造全局变量
- JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
- JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升
- 标识符
- 第一个字符，可以是任意Unicode字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
- 第二个字符及后面的字符，除了Unicode字母、美元符号和下划线，还可以用数字0-9。
- 下面这些则是不合法的标识符。
1a // 第一个字符不能是数字
23 // 同上
*** // 标识符不能包含星号
a+b // 标识符不能包含加号
-d // 标识符不能包含减号或连词线 - JavaScript 除了保留字外,Infinity,NaN,undefined 也不能用作标识符
- 注释
- JavaScript中注释有三种// ; /**/ ;
- 三种注释都是'包裹形式'的注释
- 区块
- 与大多数编程语言不一样，JavaScript的区块不构成单独的作用域
- 区块往往用来构成其他更复杂的语法结构，比如for、if、while、function等。
- 条件语句
- JavaScript提供if结构和switch结构，完成条件判断。
- 范式: if(){}; ()后面可以不跟{},但是判断为true后,只能执行一句语句
- if else 语句注意else的位置,它和距离最近的if响应
- 存在多重if else组合,最好用swich语句代替写swich 语句别漏了break,不然每个case代码块都会执行一遍,直至执行完default才结束
switch (fruit) {
case "banana":
// ...
break;
case "apple":
// ...
break;
default:
// ...
}
- 循环语句
- 三元运算符 var even = (n % 2 === 0) ? true : false; 范式: (condition)?express1:express2
- 下面是while语句的一个例子。
var i = 0;
while (i < 100) {
console.log('i当前为：' + i);
i += 1;
} - 下面是一个for循环语句例子。
var x = 3;
for (var i = 0; i < x; i++) {
console.log(i);
}
// 0
// 1
// 2 - 下面是一个do while循环语句例子。
var x = 3;
var i = 0;
do {
console.log(i);
i++;
} while(i < x);
将JavaScript插入到HTML页面要使用<script>元素,让脚本与标记混合在一起,也可以包含外部的JavaScript文件
- 在包含外部JavaScript文件的时候,必须将src属性设置为指向相应文件的URL(最好用//的形式开头,避免日后升级的麻烦). 这个文件可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中文件
- 所有<script>元素都会按照他们在页面中出现的先后顺序依次被解析,在不使用defer 和async 属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码
- 由于浏览器会先解析完,不使用defer属性的<script>元素中的代码,然后再解释后面的内容,所以一般把<script>元素放在页面的最后,</body>标签的前面
- 使用defer属性可以让脚本在文档中完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行
- 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现.不能保证异步脚本按照它们在页面中出现顺序执行.
- <noscript>元素用于在不支持脚本浏览器中显示代替内容,现在基本灭绝~~~~~没人用.
在这个章节中,会涉及'白屏闪烁' 和 '浏览器渲染机制'两个知识点
白屏
- 白屏的根本原因是浏览器在渲染的时候没有请求到或请求时间过长造成的。
- 浏览器对于图片和CSS，在加载时会并发加载（比如一个域名下同时加载多个文件），浏览器对于JavaScript，在加载时会禁用并发，并且阻止其后的文件及组件的下载。所以将js放在页面的顶部也可能会导致白屏。
- 不同浏览器的处理CSS和HTML的方式是不同的：
比如，IE、chrome浏览器的渲染机制，采用的是等CSS全部加载解析完后再渲染展示页面。
Firefox则是在CSS未加载前先展示html的内容，等CSS加载后重新对样式进行修改。
由此我们可以推断出的结果是：
白屏的出现情况往往因为CSS样式被置于底部（最后加载）,当新窗口打开,刷新等的时候，页面会出现白屏。如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载，也可能出现白屏。
所以解决的办法是css使用 link 标签将样式表放在顶部，防止白屏问题出现。白屏不是bug，而是由于浏览器的渲染机制。
FOUC
FOUC (Flash of Unstyled Content) 无样式内容闪烁：
- 如果把样式放在底部，对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面才突然展现出样式)。对于 Firefox 会一直表现出 FOUC 。
- 脚本会阻塞后面内容的呈现
- 脚本会阻塞其后组件的下载
- 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。
所以所以尽量把 JavaScript 放入页面body底部。
其他相关知识,以及浏览器渲染机制http://www.jianshu.com/p/b3d090a7df24
对应章节,饥人谷测验笔记补充
- JavaScript很多语句都不用加{}符号,{}只是判断后执行多行语句用的.
- JavaScript常常被嵌入浏览器环境,或者Node环境
- JavaScript并不是纯粹的'面向对象编程语言',还支持其他的编程范式,比如函数式编程
- 注意!! JavaScript中一切都是对象这句话是绝对错误的!(方方说的)
- JavaScript的语句不是一定要分号结尾的,如果一行写两个语句,就加上分号作为间隔.如果一行只有一个语句,可以加也可以不加,加上分号就是显式地断行,不加分号也没问题.很多人加分号是因为以前写C,java的习惯
- JavaScript代码中有很多回车是可以忽视的
