Web前端相关知识(一)

var reg=/^[a-zA-Z]{1}\w{6,30}$/;

var sum=function(num){
    if(num<=1){
        return num;
    }
    else{
        return arguments.callee(num-1)*num;
    }
}

console.log("10!=="+sum(10));

答案：apply固定是两个参数，第一个是调用的对象，第二个是一个带有下标的数组
call接受的参数是不固定的，第一个是对象 ，第二个参数数量不确定

var Obj=function(msg){
                    this.msg=msg;
                    this.shout=function(){
                                  alert(this.msg);
                   }
                  this.waitAndShout=function(){
                                  
                                setTimeout(this.shout, 2000);
                 }
        }
        var aa=new Obj("abc");
        aa.waitAndShout();

var arr=new Array("a","b","c","d","e","a","c");
        Array.prototype.selectSingle=function(){
                          var newArr=new Array();

                        for(var i=0;i<arr.length;i++)
                       {
                                              if(!isIn(newArr,arr[i])){
                                                               newArr.push(arr[i]);
                                       }        
                       }
                      return newArr;
        }
        function isIn(arr,value){
                          for(var i=0;i<arr.length;i++){
                                      if(value==arr[i])
                                     {
                                                   return true;
                                     }
                             }
                    return false;
        }
        arr=arr.selectSingle();
        for(var i=0;i<arr.length;i++)
        {
                          console.log(arr[i]);
        }

var t=true;
setTimeout(function(){
       console.log(123);
        t=false;
    },1000);

while(t)
{ }
console.log(‘end‘);

http://blog.csdn.net/xianghongai/article/details/9241549

<div>
        <div id=”aId”>a</div>
        <div id=”bId”>b</div>
        <div id=”cId”>c</div>
        <div id=”dId”>d</div>
</div>

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

内联 内嵌 外链 导入   
区别 ：同时加载
       前者无兼容性，后者CSS2.1以下浏览器不支持
   Link 支持使用javascript改变样式，后者不可

标签选择符  类选择符 id选择符

继承不如指定   Id>class>标签选择

后者优先级高

结构层 Html 表示层 CSS 行为层 js

选择器{属性1:值1;属性2:值2;……}

e(Ie内核)  火狐（Gecko） 谷歌（webkit） opear(Presto)

1.双边距BUG float引起的  使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px  
3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

Reset重置浏览器的css默认属性        浏览器的品种不同，样式不同，然后重置，让他们统一

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

直观的认识标签  对于搜索引擎的抓取有好处

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

Object number function boolean underfind

强制（parseInt,parseFloat,number）
隐式（== – ===）

前者是切割成数组的形式，后者是将数组转换成字符串

Push()尾部添加 pop()尾部删除
Unshift()头部添加  shift()头部删除

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

使用eval parse 鉴于安全性考虑 使用parse更靠谱

function getStyle(obj,attr,value)

        {

            if(!value)

            {

                if(obj.currentStyle)

                {

                    return obj.currentStyle(attr)

                }

                else

                {

                    obj.getComputedStyle(attr,false)

                }

            }

            else

            {

                obj.style[attr]=value

            }

        }

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

闭包就是能够读取其他函数内部变量的函数。

canceBubble   return false

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

前者会自动转换类型
后者不会

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

function oSort(arr)

        {

            var result ={};

            var newArr=[];

            for(var i=0;i<arr.length;i++)

            {

                if(!result[arr[i]])

                {

                    newArr.push(arr[i])

                    result[arr[i]]=1

                }

            }

            return newArr

        }

快速排序function oSort(arr)

        {

            if(arr.length<=1)

            {

                return arr

            }

            var left=[];

            var right=[];

            var oNum = Math.floor(arr.length/2);

            var oNumVode = arr.splice(oNum,1);

            for(var i=0;i<arr.length;i++)

            {

                if(arr[i]<oNumVode)

                {

                    left.push(arr[i])

                }

                else

                {

                    right.push(arr[i])

                }

            }

            return oSort(left).concat([oNumVode],oSort(right))

        }

冒泡排序 var array = [5, 4, 3, 2, 1];

var temp = 0;

for (var i = 0; i < array.length; i++)

{

for (var j = 0; j < array.length - i; j++)

{

if (array[j] > array[j + 1])

{

temp = array[j + 1];

array[j + 1] = array[j];

array[j] = temp;

}

}

}

什么是ajax：
AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术：
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
2、AJAX最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

HTML，css，dom，xml，xmlHttpRequest，javascript

在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。
在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。
在 Ajax应用中信息是如何在浏览器和服务器之间传递的
      通过XML数据或者字符串

XMLHttpRequest对象的responseXMl属性

有，IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到

open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求    方式可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
    send()方法，发送具体请求
    abort()方法，停止当前请求
    readyState属性   请求的状态 有5个可取值0=未初始化 ，1=正在加载
    2=以加载，3=交互中，4=完成
    responseText 属性  服务器的响应，表示为一个串
    reponseXML 属性 服务器的响应，表示为XML
    status   服务器的HTTP状态码，200对应ok  400对应not found

XML是扩展标记语言，能够用一系列简单的标记描述数据

常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优点是操作方便，但是比较耗内存。Sax是按事件驱动的方式解析的，占用内存少，但是编程复杂

这题是必问的，一般也是最开始就会问到。
   在java中比较流行的有 dojo, Prototype , JQuery, Dwr, extjs  等等

DWR框架介绍
    DWR(DirectWeb Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).
   DWR的实现原理是通过反射，将java翻译成javascript，然后利用回调机制，从而实现了javascript调用Java代码

$() 方法是在DOM中使用过于频繁的document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。
$F()函数是另一个大收欢迎的“快捷键”，它能用于返回任何表单输入控件的值，比如textbox,drop-down list。这个方法也能用元素id或元素本身做为参数。
$A()函数能把它接收到的单个的参数转换成一个Array对象。

通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
AJAX开始流行始于Google在2005年使用的”Google Suggest”。
“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口：
当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。
XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

AJAX的全称是Asynchronous JavaScript And XML.
AJAX是2005年由Google发起并流行起来的编程方法， AJAX不是一个新的编程语言，但是它是一个使用已有标准的新的编程技术。
使用AJAX可以创建更好，更快，更用户界面友好的Web应用。
AJAX技术基于Javascript和HTTP Request.

Ajax（Asynchronous JavaScript + XML）的定义
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。

var each = function(obj, fn){
        //+++++++++++答题区域+++++++++++
        



        //+++++++++++答题结束+++++++++++
};

try{
        
        var data1 = [4,5,6,7,8,9,10,11,12];
        var data2 = {
                "a": 4,
                "b": 5,
                "c": 6
        };
        
        console.group(data1);
        
        each(data1, function(o){
                if( 6 == this )
                        return true;
                else if( 8 == this )
                        return false;
                console.log(o + ": \"" + this + "\"");
        });
        
        console.groupEnd();

        /*------[执行结果]------

        1: "4"
        2: "5"
        4: "7"

        ------------------*/
        
        console.group(data2);
        
        each(data2, function(v, n){
                if( 5 == this )
                        return true;
                console.log(n + ": \"" + v + "\"");
        });
        
        console.groupEnd();

        /*------[执行结果]------

        a: "4"
        c: "6"

        ------------------*/
        
}catch(e){
        console.error("执行出错，错误信息: " + e);
}

var Man;
//+++++++++++答题区域+++++++++++





//+++++++++++答题结束+++++++++++

try{
        
        var me = Man({ fullname: "小红" });
        var she = new Man({ fullname: "小红" });
        
        console.group();
        console.info("我的名字是：" + me.attr("fullname") + "\n我的性别是：" + me.attr("gender"));
        console.groupEnd();
        /*------[执行结果]------

        我的名字是：小红
        我的性别是：<用户未输入>

        ------------------*/

        me.attr("fullname", "小明");
        me.attr("gender", "男");
        me.fullname = "废柴";
        me.gender = "人妖"; 
        she.attr("gender", "女");
        
        console.group();
        console.info("我的名字是：" + me.attr("fullname") + "\n我的性别是：" + me.attr("gender"));
        console.groupEnd();
        /*------[执行结果]------

        我的名字是：小明
        我的性别是：男

        ------------------*/
        
        console.group();
        console.info("我的名字是：" + she.attr("fullname") + "\n我的性别是：" + she.attr("gender"));
        console.groupEnd();
        /*------[执行结果]------

        我的名字是：小红
        我的性别是：女

        ------------------*/

        me.attr({
                "words-limit": 3,
                "words-emote": "微笑"
        });
        me.words("我喜欢看视频。");
        me.words("我们的办公室太漂亮了。");
        me.words("视频里美女真多！");
        me.words("我平时都看优酷！");
        
        console.group();
        console.log(me.say());
        /*------[执行结果]------

        小明微笑："我喜欢看视频。我们的办公室太漂亮了。视频里美女真多！"

        ------------------*/

        me.attr({
                "words-limit": 2,
                "words-emote": "喊"
        });

        console.log(me.say());
        console.groupEnd();
        /*------[执行结果]------

        小明喊："我喜欢看视频。我们的办公室太漂亮了。"

        ------------------*/
        
}catch(e){
        console.error("执行出错，错误信息: " + e);
}

function urlParser(s){
        //+++++++++++答题区域+++++++++++



                
        //+++++++++++答题结束+++++++++++
}

try{
        var url1 = "http://www.abc.com/m/s/#page/2/?type=latest_videos&page_size=20";
        var url2 = "http://www.abc.com/m/s/#type=latest_videos&page_size=20";
        var url3 = "http://www.abc.com/m/s/#page?type=latest_videos&page_size=20";

        console.group();
        console.info( urlParser(url1) );
        console.info( urlParser(url2) );
        console.info( urlParser(url3) );
        console.groupEnd();
        /*------[执行结果]------

        ["page", "2", { "type": "latest_videos", "page_size": 20 }]
        [{ "type": "latest_videos", "page_size": 20 }]
        ["page", { "type": "latest_videos", "page_size": 20 }]
        
        ------------------*/
        
}catch(e){
        console.error("执行出错，错误信息: " + e);
}

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");

var str = "abcdefg";
if (/efg/.test(str)) {
     var efg = str.substr(str.indexOf("efg"), 3);
     alert(efg);
}

//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数
var str = "abcdefgaddda";
var obj = {};
for (var i = 0, l = str.length; i < l; i++) {
        var key = str[i];
              if (!obj[key]) {
                 obj[key] = 1;
            } else {
                 obj[key]++;
              }
}
 
/*遍历这个hash table，获取value最大的key和value*/
var max = -1;
var max_key = "";
var key;
for (key in obj) {
         if (max < obj[key]) {
                   max = obj[key];
                   max_key = key;
       }
}
 
alert("max:"+max+" max_key:"+max_key);

(1) window.event：
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源
IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]
IE；document.getElementByName()和document.all[name]均不能获取div元素
FF：可以

(6) input.type的属性
IE：input.type只读
FF：input.type可读写

(7) innerText textContent outerHTML
IE：支持innerText, outerHTML
FF：支持textContent

(8) 是否可用id代替HTML元素
IE：可以用id来代替HTML元素
FF：不可以

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok

function Animal(name) {
   this.name = name;
}
 
Animal.prototype.getName = function() {alert(this.name)}
function Dog() {};
Dog.prototype = new Animal("Buddy");
Dog.prototype.constructor = Dog;
var dog = new Dog();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>获取outerHMTL</title>
<style>
div{ background:#0000FF;width:100px;height:100px;}
span{ background:#00FF00;width:100px;height:100px;}
p{ background:#FF0000;width:100px;height:100px;}
</style>
</head>
<body>
<div id="a"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
<script type="text/javascript">
function getOuterHTML(id){
 var el = document.getElementById(id);
 var newNode = document.createElement("div");
 document.appendChild(newNode);
 var clone = el.cloneNode(true);
 newNode.appendChild(clone);
 alert(newNode.innerHTML);
 document.removeChild(newNode);
}
getOuterHTML("a");
</script>
</body>
</html>

function GetBytes(str){
         var len = str.length;
         var bytes = len;
      for(var i=0; i<len; i++){
                    if (str.charCodeAt(i) > 255) bytes++;
      }
         return bytes;
}
alert(GetBytes("你好,as"));

var arr = [1 ,1 ,2, 3, 3, 2, 1];
Array.prototype.unique = function(){
         var ret = [];
         var o = {};
         var len = this.length;
         for (var i=0; i<len; i++){
                   var v = this[i];
                   if (!o[v]){
                                o[v] = 1;
                                ret.push(v);
                  }
       }
        return ret;
};
alert(arr.unique());

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

function Animal(name, color) {
         this.name = name;
         this.color = color;
}

<input type="button" id="text" value="点击一下" />
<script type="text/<a href="http://www.bairuiw.com/tag/javascript" class="st_tag internal_tag" rel="tag" title="Posts tagged with Javascript">javascript</a>">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此处的this是按钮元素
}
</script>

<table width="100px" height="100px">
     <tr>
              <td>
             <div style="width:expression(this.parentNode.width);">div element</div>
             </td>
     </tr>
</table>

el.style.display = "";
el.style.display = "none";

function IsString(str){
           return (typeof str == "string" || str.constructor == String);
}
var str = "";
alert(IsString(1));
alert(IsString(str));
alert(IsString(new String(str)));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>倒计时</title>
</head>
<body>
<input type="text" value="" id="input" size="1000"/>
<script type="text/javascript">
   function counter() {
      var date = new Date();
      var year = date.getFullYear();
      var date2 = new Date(year, 12, 31, 23, 59, 59);
      var time = (date2 - date)/1000;
      var day =Math.floor(time/(24*60*60))
      var hour = Math.floor(time%(24*60*60)/(60*60))
      var minute = Math.floor(time%(24*60*60)%(60*60)/60);
      var second = Math.floor(time%(24*60*60)%(60*60)%60);
      var str = year + "年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";
      document.getElementById("input").value = str;
   }
   window.setInterval("counter()", 1000);
</script>
</body>
</html>

<div> <input type=”button” id =”button1″ value=”1″ onclick=”???”>
<input type=”button” id =”button2″ value=”2″ /”> </div>

<div>
          <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
           <input type="button" id ="button2" value="2" />
</div>
<script type="text/javascript">
function moveBtn(obj) {
          var clone = obj.cloneNode(true);
          var parent = obj.parentNode;
          parent.appendChild(clone);
          parent.removeChild(obj);
}
</script>

简单：Number，Boolean，String，Null，Undefined
复合：Object，Array，Function

borderLeftColor
mozViewport

function cloneObject(o) {
        if(!o || ‘object‘ !== typeof o) {
            return o;
       }
       var c = ‘function‘ === typeof o.pop ? [] : {};
       var p, v;
       for(p in o) {
                     if(o.hasOwnProperty(p)) {
                         v = o[p];
                                     if(v && ‘object‘ === typeof v) {
                                         c[p] = Ext.ux.clone(v);
                                    }
                                    else {
                                       c[p] = v;
                         }
        }
    }
    return c;
};

\n alert(“p\np”);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标点击页面中的任意标签，alert该标签的名称</title>
<style>
div{ background:#0000FF;width:100px;height:100px;}
span{ background:#00FF00;width:100px;height:100px;}
p{ background:#FF0000;width:100px;height:100px;}
</style>
<script type="text/javascript">
document.onclick = function(evt){
 var e = window.event || evt;
 var tag = e["target"] || e["srcElement"];
 alert(tag.tagName);
};
</script>
</head>
<body>
<div id="div"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
</html>

function parseQueryString(url){
           var params = {};
           var arr = url.split("?");
           if (arr.length <= 1)
                           return params;
           arr = arr[1].split("&");
           for(var i=0, l=arr.length; i<l; i++){
                           var a = arr[i].split("=");
                           params[a[0]] = a[1];
           }
           return params;
}
 
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
alert(ps["key1"]);

Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：
XHTML：对应W3C的XHTML规范，目前是XHTML1.0。

CSS：对应W3C的CSS规范，目前是CSS2.0
DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中
JavaScript：对应于ECMA的ECMAScript规范
XML：对应W3C的XML DOM、XSLT、XPath等等规范
XMLHttpRequest：对应WhatWG的Web Applications1.0规范（http://whatwg.org/specs/web-apps/current-work/）

同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复

跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下：

PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的

(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法：
(1) document.domain+iframe
(2) 动态创建script标签

<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

(function A() {
        var index = 0;
        var ul = document.getElementById("test");
        var obj = {};
        for (var i = 0, l = ul.childNodes.length; i < l; i++) {
                    if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
               var li = ul.childNodes[i];
                                  li.onclick = function() {
                                    index++;
                                    alert(index);
                                }
                   }
        }
})();

function loadScript(url, callback){
             var script = document.createElement("script")
             script.type = "text/javascript";
                            if (script.readyState){ //IE
                                         script.onreadystatechange = function(){
                                            if (script.readyState == "loaded" ||
                                                        script.readyState == "complete"){
                                                        script.onreadystatechange = null;
                                                        callback();
                                                     }
                                          };
                           } else { //Others: Firefox, Safari, Chrome, and Opera
                                   script.onload = function(){
                                     callback();
                              };
     }
    script.src = url;
    document.body.appendChild(script);
}

var n = document.createElement("script");
n.type = "text/javascript";
//以上省略部分代码
//ie支持script的readystatechange属性
if(ua.ie){
   n.onreadystatechange = function(){
       var rs = this.readyState;
       if(‘loaded‘ === rs || ‘complete‘===rs){
           n.onreadystatechange = null;
           f(id,url); //回调函数
       }
};
//省略部分代码
//safari 3.x supports the load event for script nodes(DOM2)
   n.addEventListener(‘load‘,function(){
       f(id,url);
   });
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
//nodes.
}else{
   n.onload = function(){
       f(id,url);
   };
}

Ele.className = “***”; //***在css中定义，形式如下：.*** {…}
A.prototype.B = C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值

（1） 为HTML元素的事件属性赋值
（2） 在JS中使用ele.on*** = function() {…}
（3） 使用DOM2的添加事件的方法 addEventListener或attachEvent

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

（1） navigator.userAgent
（2） 不同浏览器的特性，如addEventListener

String,Number,Boolean

Window:
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性：name,parent,screenLeft,screenTop,self,top,status

Document
方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性：cookie,doctype,domain,documentElement,readyState,URL,

（1） 减少http请求次数：css spirit,data uri
（2） JS，CSS源码压缩
（3） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（4） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
（5） 用setTimeout来避免页面失去响应
（6） 用hash-table来优化查找
（7） 当需要设置的样式很多时设置className而不是直接操作style
（8） 少用全局变量
（9） 缓存DOM节点查找的结果
（10） 避免使用CSS Expression
（11） 图片预载
（12） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

Ajax的优势
（1） 可搜索性
（2） 开放性
（3） 费用
（4） 易用性
（5） 易于开发

Flash的优势
（1） 多媒体处理
（2） 兼容性
（3） 矢量图形 比SVG，Canvas优势大很多
（4） 客户端资源调度，比如麦克风，摄像头