1.JS基本概念
标识符
- 所谓标识符是指变量、函数、属性的名字，或者函数的参数。
- 标识符的书写有几个特征：
1.区分大小写。
2.第一个字符必须是字母、下划线（_）、或者是$。
3.后面的可以是字母、数字、下划线、$。
4.标识符可以使用中文，但是一般不推荐这么做。
命名规约
- 使用是实际意义的单词。
- 变量使用驼峰规则，第一个单词首字母小写，后面单词首字母大写。
- 变量使用名词，方法函数使用动词开头，常量全部用大写字母，函数创建对象首字母大写。
var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}
变量
在JavaScript中变量是用来保存值的占位符，定义变量的时候要使用var运算符， 后面跟一个作为名称的标识符即可。
var message;
弱类型
- 在一些编译语言（C、Java、C#）等变量的类型是固定的，在声明变量的时候就要标识其类型，在程序执行前编译阶段变量的类型就确定了，而且不能改变，我们称之为强类型。
int a = 2;
string b = "hello";
- 一些常见的解释型语言（PHP、JavaScript）等变量的类型是松散的，一个变量可以用来保存任何类型的数据，变量的类型不是由声明时决定（声明的时候只是用了var运算符），而是在程序执行阶段由其值的类型决定，随着程序运行其值类型改变，变量类型也会发生改变。
var message = 1; //message 类型就是数字
message = "hello world!"; //message 类型变为字符串
语句
- 语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。
var a = 1 + 2;
- 这条语句先用var运算符，声明了变量a，然后将 1+2 的运算结果赋值给变量a。
JavaScript中语句以;结束，一行可以包含多条语句，如果省略分号不会产生语法错误，解释器会自动判断语句结束。
var sum = 1 + 2
var diff = 3 - 4;
变量提升
- JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
我们写了一个赋值语句。
var a = 2;
- 实际上执行过程是解释器在未执行的时候先解析出变量声明，然后给他初始值undefined，然后才逐句执行程序。
var a;
a = 2;
注释
- 并不是所有的语句都会执行，我们可以通过注释功能让js引擎忽略部分语句，这个功能经常用来解释我们的部分语句，和读书做标注一样。
- Javascript提供两种注释：一种是单行注释，用//起头；另一种是多行注释，放在/* 和 */之间。
//为变量赋值
var a = 1; //赋值成功
/*
下面定义个函数
至于什么是函数
且听下回分解
*/
function getName(id){
return 'Byron';
}
关键字和保留字
- 关键字是JavaScript引擎会用到的一些字，我们标识符不能再使用，比如定义变量的关键字var，关键字有：
break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof - 除了这些不能用作标识符的关键字，js还规定了一些不能用作标识符的保留字，这些字符没有什么意义，但是未来会用到：
abstract、enum、int、short、boolean、export、interface、static、bye、extends、long、super、char、final、native、synchronized、
class、float、package、throws、const、goto、private、transient、
debugger、implements、protected、volatile、doubler、import、public
实际上一些保留字在新的ECMAscript已经得到使用
2.认识Javascript
网页的组成：
网页 = Html+CSS+JavaScript
- Html: 网页元素内容
- CSS: 控制网页样式
- JavaScript：操作网页内容，实现功能或者效果
javascript
- javascript和java没有任何关系。
- 是客户端脚本语言。
-
ECMAScript, DOM, BOM, NodeJS。
引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link href="index.css" rel="stylesheet">
<style>
body{
background: red;
}
</style>
</head>
<body>
<p>
</p>
<script src="index.js"></script>
<script>
alert(1);
</script>
</body>
</html>
浏览器渲染机制
- 解析 HTML 标签, 构建 DOM 树。
- 解析 CSS 标签, 构建 CSSOM 树。
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)。
- 在渲染树的基础上进行布局, 计算每个节点的几何结构。
- 把每个节点绘制到屏幕上 (painting)。
- 参考：How browsers work
白屏问题
- 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
- 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
- 因此我们使用 link 标签将样式表放在顶部。
FOUC (Flash of Unstyled Content) 无样式内容闪烁
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC。
Javascript的放置位置
- JS放在底部
1.脚本会阻塞后面内容的呈现。
2.脚本会阻塞其后组件的下载。 - 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。
加载异步
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
网友评论