JS语法

问答

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

一般把css放在标签内,</code>标签的后面;js放在<code><body></code>标签的尾部。这样做可以避免白屏和FOUC出现。</p> <h1>2.解释白屏和FOUC</h1> <ul> <li>白屏:1、对于有些浏览器,浏览器先把样式加载完全,才渲染页面,展示页面的内容。对于这样的浏览器,把<code><link href='xxx" rel= "stylesheet" type="text/css></code>标签放在<code><body></code>尾部时,页面从上到下开始加载。如果<code><body></code>前面部分的内容很复杂,很长,需要加载一段时间,然后外联的css加载还需要一段时间,这样在等待页面加载的过程中,页面上没有内容显示,页面会出现白屏。<br> 2、把js文件放在页面头部,也会导致页面出现白屏。页面从上到下加载。js文件是不能并行加载(即同一时间只能加载这一个js文件,其它的js文件、样式等都不能加载)的,而且加载后立即执行。js执行时,页面可能还没有表现出样式,出现白屏。</li> <li>FOUC:是Flash of Unstyled Content的缩写,译为无样式闪烁。对于有些浏览器是先把内容显示出来,再用外部css文件改变内容的样式。这时如果把css文件放在页面尾部,则页面先显示初始内容,然后加载css,一边加载一边改变页面的样式,页面的背景、字体等可能会有较大变化,页面会出现无样式闪烁。<br> 举例:<br> 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .</li> </ul> <h1>3.async和defer的作用是什么?有什么区别</h1> <p>js文件在被加载时,有加载后立即执行的特点。“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。这样把js放在页面头部,会出现白屏。<br> 可以在写入js文件时加上async或者defer避免这种情况。<br> <code><script async src="script.js"></script></code><br> 表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。但这种方法只对外部脚本文件生效。<br> <code><script defer src="script.js"></script></code><br> 表示脚本可以延迟到文档完全被解析和显示之后再执行。有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。只对外部脚本文件有效。 IE7 及更早版本对嵌入脚本也支持这个属性。<br> 区别:</p> <ul> <li>defer:脚本延迟到文档解析和显示后执行,有顺序。</li> <li>async:不保证顺序,如果</li> </ul> <pre><code><script async src="example1.js"></script> <script async src="example2.js"></script> </code></pre> <p>两个脚本都设置async,第二个脚本也可能在第一个脚本之前执行。</p> <h1>4.简述网页的渲染机制</h1> <p>1.解析 HTML 标签, 构建 DOM 树<br> 2.解析 CSS 标签, 构建 CSSOM 树<br> 3.把 DOM 和 CSSOM 组合成 渲染树 (render tree)<br> 4.在渲染树的基础上进行布局, 计算每个节点的几何结构把每个节点绘制到屏幕上 (painting)</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 537px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/0736b7c90919402fb76ee8d216dec78d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/0736b7c90919402fb76ee8d216dec78d.jpg" width="650" height="304" alt="JS语法_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 图示 </div> </div> <blockquote> <p>1.参考 课件<br> 2.参考浏览器的渲染原理简介</p> </blockquote> <h1>5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?</h1> <p>number,undefined,blooean,string,null,object六种数据类型。<br> 简单类型:</p> <table> <thead> <tr> <th>名称</th> <th>介绍</th> </tr> </thead> <tbody> <tr> <td>number</td> <td>数值类型,包括整数和小数,比如4,3.3。</td> </tr> <tr> <td>boolean</td> <td>布尔型,有两个值true和false。</td> </tr> <tr> <td>string</td> <td>字符串型,放在引号中,比如"abc"。</td> </tr> <tr> <td>null</td> <td>表示空缺,即此处应该有一个值,但目前为空。</td> </tr> <tr> <td>undefined</td> <td>表示“未定义”或不存在,即此处目前没有任何值。</td> </tr> </tbody> </table> <p>复杂类型:object,对象,各种值组成的集合。包括数组,函数,狭义的对象。</p> <h1>6.NaN、undefined、null分别代表什么?</h1> <p>1.NaN代表not a number,非数字。不等于任何数包括它自身。<br> 当数字运算没有意义或者不合法时可以得到NaN。<br> 举例:</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 285px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/27a0f40534bc4ecaace577210a3dcecd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/27a0f40534bc4ecaace577210a3dcecd.jpg" width="650" height="247" alt="JS语法_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 结果是NaN的值 </div> </div> <ul> <li> <p>NaN不等于任何值,包括它本身。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 281px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2377fe5816c04558a19aac63f54f51d0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2377fe5816c04558a19aac63f54f51d0.jpg" width="650" height="245" alt="JS语法_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> <li>任何涉及NaN的运算都会返回NaN。<br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 333px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/8ce0ac43a55e4a918741b9838723a4aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/8ce0ac43a55e4a918741b9838723a4aa.jpg" width="650" height="254" alt="JS语法_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 2.undefined表示“未定义”或不存在,即此处目前没有任何值。<br> 典型用法是:<br> (1)变量被声明了,但没有赋值时,就等于undefined。<br> <div class="image-package"> <div class="image-container" style="max-width: 612px; max-height: 275px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a011f6ec0ad7425f9c548fcc88339889.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/a011f6ec0ad7425f9c548fcc88339889.jpg" width="612" height="275" alt="JS语法_第5张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。<br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 280px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a90cb39c861a4bca86817e42bebd22c9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/a90cb39c861a4bca86817e42bebd22c9.jpg" width="650" height="220" alt="JS语法_第6张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> (3)对象没有赋值的属性,该属性的值为undefined。<br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 281px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/21a5d4abd86c4d51af029dfd98fa7e56.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/21a5d4abd86c4d51af029dfd98fa7e56.jpg" width="650" height="228" alt="JS语法_第7张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> (4)函数没有返回值时,默认返回undefined。<br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 281px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/62cb47ee8dd84ba69d696f63cdb99b1b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/62cb47ee8dd84ba69d696f63cdb99b1b.jpg" width="650" height="248" alt="JS语法_第8张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 3.null表示空缺, 表示一个值被定义了,定义为“空值”。<br> 典型用法是:<br> (1) 作为函数的参数,表示该函数的参数不是对象。<br> (2) 作为对象原型链的终点。<br> null还有一个特点<code>typeof null</code>的值是object。<br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 284px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/dc7fca5611534fb2ba144d7be37cec18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/dc7fca5611534fb2ba144d7be37cec18.jpg" width="650" height="255" alt="JS语法_第9张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 这是一个历史遗留问题。在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是0。由于 null代表的是空指针(大多数平台下值为0x00),因此,null的类型标签也成为了0,typeof null<br> 就错误的返回了"object".</li> <li> <p>NaN,null和undefined的相似点:<br> 都可以当做false处理函数。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 275px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/757894109b8348e7820a9cfde6d351da.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/757894109b8348e7820a9cfde6d351da.jpg" width="650" height="234" alt="JS语法_第10张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> <li>null和undefined还相等。<br> <div class="image-package"> <div class="image-container" style="max-width: 691px; max-height: 273px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2dfff5109afc430681b0223ffdbd0d39.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2dfff5109afc430681b0223ffdbd0d39.jpg" width="650" height="257" alt="JS语法_第11张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> null、undefined </div> </div> <br> 可以看出,null、undefined是等于自身的。<code>null==undefined</code>,但不严格相等。</li> </ul> <blockquote> <p>参考 JavaScript 标准参考教程(alpha)</p> </blockquote> <h1>7.typeof和instanceof的作用和区别?</h1> <p>typeof和instanceof都可以判断数据类型。<br> 区别在于:<br> typeof对于简单类型数值、字符串、布尔值分别返回number、string、boolean;undefined返回undefined。null返回object。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 244px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/6f990885de794b2abb64c2a5d49e6866.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/6f990885de794b2abb64c2a5d49e6866.jpg" width="650" height="214" alt="JS语法_第12张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <p>对于object(对象),除了函数返回function外,其它返回object。</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 479px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/81c8f71847dc41a786f6f46f6b0cc59f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/81c8f71847dc41a786f6f46f6b0cc59f.jpg" width="650" height="256" alt="JS语法_第13张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 对于数组、其它狭义的对象,可以用instanceof区分开。instanceof用来判断某个变量是否是某个对象的实例。 <br> instanceof用来检测对象的类型(也可叫做引用类型。包含Object、Array、Date、RegExp、Function、基本包装类型(含Boolean、Number、String))。 <br> <div class="image-package"> <div class="image-container" style="max-width: 544px; max-height: 403px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/69150cfab7d545c0bf56e1e34b93b16e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/69150cfab7d545c0bf56e1e34b93b16e.jpg" width="544" height="403" alt="JS语法_第14张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> numberValue是number基础数据类型,不属于任何引用类型。 <br> <p>numberObject是object基础数据类型,属于Number引用类型(所有引用类型都从Object引用类型继承而来)。</p> <blockquote> <p>参考关于javascript中的typeof和instanceof介绍</p> </blockquote> <h1>代码题</h1> <h2>1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数 (难度*)</h2> <p>ps: 做完后可参考 underscore.js 源码中部分实现</p> <pre><code class="javasript">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 </code></pre> <p>代码:</p> <pre><code class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>任务16-1

预览

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

 console.log(1+1);//2
 console.log("2"+"4");//24
 console.log(2+"4"); //24
 console.log(+new Date());//从1971年到现在的毫秒数。
 console.log(+"4");//4
JS语法_第15张图片

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

var a = 1;
a+++a;


typeof a+2;//number2
JS语法_第16张图片

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

var arr = [3,4,5]
// todo..// 输出 9, 16, 25 

代码:




  
  Document


  


预览

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

var obj = { name: 'hunger', sex: 'male', age: 28}
//todo ...
// 输出 name: hunger, sex: male, age:28

代码:




 
 Document


 


预览

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

console.log(a);//undefined,变量提升。
var a = 1;
console.log(a);//1
console.log(b);//没被定义

JS语法_第17张图片

JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。
a在第二句代码 var a=1中被声明,变量a被提升到代码的头部,所以第一句中a变为已定义但未声明的变量, console.log(a);输出是undefined。

本文版权归本人和饥人谷所有,转载请注明出处

你可能感兴趣的:(JS语法)