JS 语法
2016-07-10 本文已影响0人
王康_Wang
1. CSS 和 JS 在网页中的放置顺序是怎样的？
CSS部分一般放在<head>内，而JS一般放在<body>的最后。因为对于图片或其他网页内容CSS文件通常会与其并发加载，而加载JS时浏览器会禁用并发加载，这就影响了页面加载速度，故而将JS放在HTML文件后面。
2. 解释白屏和FOUC。
- 当CSS文件或链接放在
<body>元素最后时，因为浏览器对于HTML文件是自上而下加载解析，这就导致了在CSS文件的加载解析时机被推后，由于解析完成之前浏览器不能完成页面的渲染，在这种情况下会出现白屏现象。同样，由于@import的加载时机靠后，所以也会出现白屏的问题。 - 同样，当把JS文件放在HTML顶部是，由于JS加载时会禁用并发，所以在JS加载完成之前浏览器无法加载之后的HTML文件，也会导致白屏现象。
- 以上条件在IE浏览器中会出现FOUC（无样式内容闪烁）现象。
3. async和defer的作用是什么？有什么区别
正常情况下，浏览器会加载JS文件并立即执行，这就会导致JS命令执行时相应的HTML文件还未渲染完成；
有了async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）；
同样，**有了defer ** ，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
区别在于有defer的情况下，JS的执行会在所有元素解析完成之后，而有async的情况下JS的加载执行会和后续文档同时进行。
4. 简述网页的渲染机制
- 打开一张网页时，浏览器首先会根据所提供的URL在服务器端找到并加载相应的文件；
- 加载完成后浏览器会将HTML文件解析成DOM树；
- 将CSS文件解析成CSSOM树；
- 将DOM和CSSOM组合成渲染树(render tree);
- 依据渲染树在屏幕上绘制网页。
5. JavaScript 定义了几种数据类型？哪些是简单类型？哪些是复杂类型？
JavaScript定义了6中数据类型，其中有
- 三种原始类型（primitive type）：数值（number），字符串（string），布尔型（boolean）；
- 一种复杂类型（complex type）：对象（object）；
- 还有两个特殊值：undefined和null。
其中对象（object）还可分为3种类型：
- 狭义的对象（object）；
- 数组（array）；
- 函数（function）。
6.NaN、undefined、null分别代表什么？
-
NaN，表示一个值是数字类型但不是具体数字； -
undefined表示此变量未定义或者不存在； -
null表示此变量存在但值为空。
7.typeof和instanceof的作用和区别？
typeof的返回值是数据类型字符串，以确认一个值的数据类型。而instanceof的返回值是布尔型，以确定某一值是否为指定数据类型。
代码题：
1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
function isNumber(el){ // todo ... } function isString(el){ //todo ... } function isBoolean(el){ //todo ... } function isFunction(el){ //todo ... } var a = 2, b = "jirengu", c = false; alert( isNumber(a) ); //true alert( isString(a) ); //false alert( isString(b) ); //true alert( isBoolean(c) ); //true alert( isFunction(a)); //false alert( isFunction( isNumber ) ); //true
###2. 以下代码的输出结果是？
- ```
console.log(1+1); //输出结果是数值相加，输出2
console.log("2"+"4"); //该运算为字符串相连接，输出"24"
console.log(2+"4"); //将2转化为字符串"2"后join，输出"24"
console.log(+new Date());//1468139798410(用new Date() 会转换为从1970.1.1开始的毫秒数)
console.log(+"4");//将字符串"4"转化为数值，输出4
3. 以下代码的输出结果是？
var a = 1;
a+++a;
typeof a+2;
第二行语句中，因为```a++```优先级高于```++a```，故第二行语句也可写成```(a++)+a;```
结果为3,
第三行语句中，```typeof a```的优先级高于```a+2```，```typeof a```的返回值为```'number'```，故代码输出结果是```'number2'```。
###4. 遍历数组，把数组里的打印数组每一项的平方
- ```
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25
1.用for循环：
var arr = [3,4,5]; for ( var a = 0; a < arr.length ; a++ ) { console.log(arr[a]*arr[a]); } // 9 // 16 // 25
2.用while循环：
- ```
<script type="text/javascript">
var arr = [3,4,5];
var a = 0;
while (a<3){
console.log(arr[a]*arr[a]);
a++;
}
// 9
// 16
// 25
5.遍历 JSON, 打印里面的值
var obj = { name: 'hunger', sex: 'male', age: 28 } //todo ... // 输出 name: hunger, sex: male, age:28
使用for...in语句：
- ```
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for (var a in obj){
console.log(a+':'+obj[a])
}
//name:hunger
//sex:male
//age:28
6. 下面代码的输出是? 为什么
console.log(a);//undefined var a = 1;// console.log(a);//1 console.log(b);//Uncaught ReferenceError: b is not defined(…)
第一条：由于变量提升，故存在变量 ```a ```，但变量 ```a ```未被赋值；
第二条：给 ```a``` 赋值；
第三条：打印 ```a``` 的值；
第四条：没有定义变量 ```b```。
***
该教程版权归本人和饥人谷所有，转载请注明来源。
