js语法

2016-09-21  本文已影响0人  饥人谷区子铭

1.CSS和JS在网页中的放置顺序是怎样的?

将CSS link标签放在html文档靠前位置。JS代码放在html文档底部,body结束标签前

2.解释白屏和FOUC

(1)当js文件放在文本的顶部会造成以下两种情况

     1.1脚本会阻塞后面内容的呈现

     1.2脚本会阻塞其后组件的下载

(2)白屏

2.1在 Google Chrome 浏览器中,渲染会等到CSS加载完成后才开始。如果 CSS 文件没有放在页面头部,而是中间的位置,那么在加载 CSS 文件之前的时间段内,页面会呈现出白屏现象。

2.2如果使用@import标签,即使 CSS 放入link标签中,并且放在头部,也可能出现白屏现象。

2.3如果 JS 文件放到文件开始,也会因为等待加载和执行 JS 文件而导致后面的文档元素加载被阻断,页面呈现白屏。

(3)FOUC(Flash of Unstyled Content,无样式内容闪烁)现象。

3.1所谓的无样式闪烁(IE、firefox都有)是浏览器边加载边执行,逐步加载无样式的内容,等CSS加载后页面突然展现样式。

3.2FOUC现象主要体现在firefox浏览器下,firefox为了增强用户体验,选择在加载样式的同时绘制树,导致用户在加载页面的同时会看到渲染绘制的过程,也就出现了FOUC现象。

3.async和defer的作用是什么?有什么区别

(1)一般情况可不加上async/defer,若加上如这样<script async/defer src=""></script>

(2)假设一定想把js文件放顶部,就得加上defer和async来异步加载

(3)如果不加[async]和[defer],浏览器读到script里的脚本就马上加载并且执行,不会去等后续渲染元素

(4)<script async></script>js加载并执行与渲染后续文档并发执行(异步),当时不保证顺序

(5)<script defer></script>js加载后暂不执行,脚本延迟到文档解析和显示后才执行,有顺序之分

4.简述网页的渲染机制

步骤一:解析HTML,构建DOM树

步骤二:解析CSS,构建CSSOM树

步骤三:把DOM、CSSOM组合成渲染树(render tree)

步骤四:在渲染树基础上进行布局,把每一个节点绘制到屏幕上。

5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

简单类型:Null、undefined、Boolean、Number、String      复杂类型:Object

Null:空指针,也就是不存在的东西

undefined:表示变量只是被声明,没有被初始化,有指针,但是不指向任何空间

Boolean:布尔值,只有true和false之分

Number:数字 var a=1,b=0.2,c=1e10

String:Unicode 字符组成的序列,俗称字符串,可以用单引号或者双引号表示。   字符串有一些转义字符。  var str =“ ”

Object对象 :对象是 JavaScript 的核心概念

复杂类型又分为:  function 函数       Array 数组      Data日期

6.NaN、undefined、null分别代表什么?

(1)NaN表示JS的特殊值,表示“非数字”(Not a Nember); NaN不是一种独立的数据类型;

        NaN === NaN //false

(2)undefined本身自成一个数据类型。表示“缺少值”,就是此处应该有一个值,但是还没有定义。

       2.1声明变量后,如果没有给变量赋值,那么变量值等于undefined。

       2.2调用函数时,如果没有给函数提供应有的参数,那么参数值默认为undefined。

       2.3对象的属性没有进行赋值,那么该属性的值为undefined。

       2.4函数没有返回值时,默认返回undefined。

(3)null本身也自成一个数据类型。表示“没有对象”,即该处不应该有值。

7.typeof和instanceof的作用和区别?

(1)typeof是检测简单类型及function检测,但是遇到null无效,null还是要用===        typeof(1)//Number       

typeof(“str”)//string                 

typeof(true)//boolean 

typeof([1,2])//Object   

 typeof (new Object()) //Object       

 typeof (null)  //Object

(2)instanceof 常用作判断对象类型                                                                              

obj(对象)  instanceof  Object(构造系)                                                                        

instanceof运算符返回一个布尔值,表示指定对象是否为某个构造函数的实例。

eg:[1,2] instanceof Array === true                                                                          

eg: new Object() instanceof Array === false

8.代码

1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数

function isNumber(el){

if(typeof(el) === "number"){

return true

}else{

return false

}

}

function isString(el){

if(typeof(el) === "string"){

return true

}else{

return false

}

}

function isBoolean(el){

if(typeof(el) === "boolean"){

return true

}else{

return false

}

}

function isFunction(el){

if(typeof(el) === "function"){

return true

}else{

return false

}

}

var a = 2,

b = "jirengu",

c = false;

console.log( isNumber(a) );  //true

console.log( isString(a) );  //false

console.log( isString(b) );  //true

console.log( isBoolean(c) ); //true

console.log( isFunction(a)); //false

console.log( isFunction( isNumber ) ); //true

2.以下代码的输出结果是?(难度**)

console.log(1+1);  //2   两个数相加,输出数值

console.log("2"+"4");//24  字符串相加等同于拼接,输出字符

console.log(2+"4");//24  一个数字和字符串相加等同于拼接字符串,输出字符

console.log(+newDate());//1474442366638距离1997年1月1日的毫秒数

console.log(+"4");//4      4"转化为数值,最后结果为数值

3.以下代码的输出结果是? (难度***)

var a = 1;

console.log(a+++a);//2

typeofa+2; //number+2

分析:在a+++a表达式当中,后置递增的优先级最高。所以相当于(a++)+a。a一开始赋值为1,a++表示先赋值再自增,所以a++的计算结果为1,且此时a等于2。所以a+++a表达式的计算结果为3。

分析:而typeof a+2中,typeof在js中的优先级比“+”高,所以它会先计算typeof a,得到的输出是字符串"number"。然后是一个字符串加上一个数字,会把数字转换成字符串。所以得到的输出为"number2"的字符串

4.遍历数组,把数组里的打印数组每一项的平方 (难度**)

5,遍历 JSON, 打印里面的值 (难度**)

varobj = { name:'hunger',                                                                                                          

 sex:'male',                                                                                                                                  

age:28}                                                                                                                                     

  //todo ...// 输出 name: hunger, sex: male, age:28

6.下面代码的输出是? 为什么 (难度***)

console.log(a); //undefined                                                                                                             

 var  a =1;                                                                                                                                 

console.log(a);//1                                                                                                          

console.log(b);//is not defined

分析:过程如下

 var a                                                                                                                                           

console.log(a)                                                                                                                                      

 a=1                                                                                                                                       

consolo.log(a)                                                                                                                   

 console.log(b)

由于变量会提升,但还赋值,所以第一个输出为undefined

第二个则会显示为1

第三个由于没有声明变量b,所以会报错

上一篇下一篇

猜你喜欢

热点阅读