JS 一些题目 难点

HTML5 都有哪些新的JS API
多媒体：video、audio、
游戏：canvas、webgl、
存储：localstorage、sessonstorage、websql、indexedDB
网络：websocket

冒泡排序的核心原理

冒泡排序原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换,这样一趟过去后,最大

或最小的数字被交换到了最后一位,然后再从头开始进行两两比较交换,直到倒数第二位时结束,其余类似看例子。

     或者可以这样描述冒泡排序：

就是将第一个记录的关键字和第二个记录的关键字进行比较， 

如果后面的比前面的小则交换，然后比较第二个和第三个，依次类推。

比完一趟，最大的那个已经放到了最后的位置，这样就可以对前面N-1个数再循环比较。  

稳定，时间复杂度 O(n^2)

（看到很多介绍冒泡排序的地方，包括教课书上个人感觉很多描述的都不是很清楚，也可能是我个人的理解能力

差一点，但是从网上搜到得这张图看起来很清晰了，转发一下希望能帮助到有的朋友）

 

 

<script > <script saync> <script defer>差异

 

先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：

 

1. <script src="script.js"></script>

   没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

2. <script async src="script.js"></script>

   有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

3. <script defer src="myscript.js"></script>

   有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

 

然后从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

 

接着，我们来看一张图咯：

 

 

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

 

此图告诉我们以下几个要点：

 

1. defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
2. 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
3. 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
4. async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
5. 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

 

结了一下defer和async的特征。

相同点：

· 加载文件时不阻塞页面渲染

· 对于inline的script无效

· 使用这两个属性的脚本中不能调用document.write方法

· 有脚本的onload的事件回调

区别点：

· html的版本html4.0中定义了defer；html5.0中定义了async

· 浏览器

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	(Supported)	(Supported)	(Supported)
asyncattribute	(Supported)	3.6 (1.9.2)	10	–	(Supported)
deferattribute	(Supported)	3.5 (1.9.1)	4	–	(Supported)

 

· 执行时刻 
每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行。

 

简单的来说，使用这两个属性会有三种可能的情况

· 如果async为true，那么脚本在下载完成后异步执行。

· 如果async为false，defer为true，那么脚本会在页面解析完毕之后执行。

· 如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行，

 

标准模式(strict mode)和怪异模式(quirks mode) 的区别

1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。

4、浏览器如何判断何用哪种方式解析CSS？

解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则

•     浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。

•     对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

•     对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：

对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析

在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。

可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

quirks mode和strict mode最大的不同就是提现在对盒模式的解释上

 

 

由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在W3C标准出台之前，不同的浏览器在页面的渲染上没有同一的规范，产生了差异，即Quirks mode(怪异模式或兼容模式)；当W3C标准出台之后，不同浏览器对页面的渲染有了统一的标准,即Strict mode（标准模式或严格模式）；这就是两者之间的区别。

W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，因此在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。

 

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

区别是：

1.在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在怪癖模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2）可以设置行内元素的高宽

    在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

    在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

   body{text-align:center};#content{text-align:left}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

使用$.ajax取后台数据时，指定返回数据类型为JSON

记得先要导入jquery.js。

格式一 $.ajax({"Key1":"value1","key2":"value2",....});

$.ajax({

　　type:"post/get",

     asynch : “false”,//并发访问时异步提交

　　url:"TestAction!execute?time="+Math.random(), 

　　dataType:"json",//指定返回格式，不指定则返回字符串

　　data:{"id":1,"name":"张三"},

　　success:function(data){
　　 　alert("返回结果集="+data);

　　}

});

jQuery如何发起jsonp请求，使用jsonp需要注意什么

 

jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.

 

如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.

 

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

 

jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数

 

Jsonp原理：

 

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。

 

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

 

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

 

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）

 

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

 

原理的示例代码:

 

复制代码代码如下:

 

//客户端的JAVASCRIPT代码 
var script=document.createElement("script"); 
script.src="http://www.pl4cj.com:8888/5/6/action.php?param=123&callback="+fnName; 
document.getElementsByTagName("head")[0].appendChild(script) 

//服务器端的PHP代码，一定要有callback来进行回调，在这里加上括号，是让它以语句块的方式来进行解析 
<?php 
<SPAN style="COLOR: #ff00ff">echo $_GET["callback"]."(".json_encode($_GET).");"; 
</SPAN>?

注意,jquey是不支持post方式跨域的.

 

 

为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..

 

client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案

 

原生js实现几种数据类型判断，包括String Array Object

 

如何判断js中的数据类型：typeof、instanceof、 constructor、 prototype方法比较

 

如何判断js中的类型呢，先举几个例子：

var a = "iamstring.";

var b = 222;

var c= [1,2,3];

var d = new Date();

var e = function(){alert(111);};

var f = function(){this.name="22";};

 

最常见的判断方法：typeof

alert(typeof a)   ------------> string

alert(typeof b)   ------------> number

alert(typeof c)   ------------> object

alert(typeof d)   ------------> object

alert(typeof e)   ------------> function

alert(typeof f)   ------------> function

其中typeof返回的类型都是字符串形式，需注意，例如：

alert(typeof a == "string") -------------> true

alert(typeof a == String) ---------------> false

另外typeof 可以判断function的类型；在判断除Object类型的对象时比较方便。

 

判断已知对象类型的方法： instanceof

alert(c instanceof Array) ---------------> true

alert(d instanceof Date) 

alert(f instanceof Function) ------------> true

alert(f instanceof function) ------------> false

注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

 

根据对象的constructor判断： constructor

alert(c.constructor === Array) ----------> true

alert(d.constructor === Date) -----------> true

alert(e.constructor === Function) -------> true

注意： constructor 在类继承时会出错

eg,

      function A(){};

      function B(){};

      A.prototype = new B(); //A继承自B

      var aObj = new A();

      alert(aobj.constructor === B) -----------> true;

      alert(aobj.constructor === A) -----------> false;

而instanceof方法不会出现该问题，对象直接继承和间接继承的都会报true：

      alert(aobj instanceof B) ----------------> true;

      alert(aobj instanceof B) ----------------> true;

言归正传，解决construtor的问题通常是让对象的constructor手动指向自己：

      aobj.constructor = A; //将自己的类赋值给对象的constructor属性

      alert(aobj.constructor === A) -----------> true;

      alert(aobj.constructor === B) -----------> false; //基类不会报true了;

 

通用但很繁琐的方法： prototype

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;

alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;

alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;

alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;

alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;

alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

 

 

 

了解js的都知道， 有个typeof  用来判断各种数据类型,有两种写法：typeof   xxx   ,typeof(xxx)

       如下实例：

       typeof   2      输出   number
       typeof   null   输出   object

       typeof   {}    输出   object

       typeof    []    输出   object

       typeof   (function(){})   输出  function

       typeof    undefined         输出  undefined

       typeof   '222'                 输出    string

      typeof  true                   输出     boolean

    这里面包含了js里面的五种数据类型  number   string    boolean   undefined     object和函数类型 function

     看到这里你肯定会问了：我怎么去区分对象，数组和null呢?

     接下来我们就用到另外一个利器：Object.prototype.toString.call

     这是对象的一个原生原型扩展函数,用来更精确的区分数据类型。

     var   gettype=Object.prototype.toString

        gettype.call('aaaa')        输出      [object String]

        gettype.call(2222)         输出      [object Number]

        gettype.call(true)          输出      [object Boolean]

        gettype.call(undefined)  输出      [object Undefined]

        gettype.call(null)                  输出   [object Null]

         gettype.call({})                   输出   [object Object]

         gettype.call([])                    输出   [object Array]
         gettype.call(function(){})     输出   [object Function]