很详细的JS底层分析

序言
准备
如何嵌入网页?
写在网页中
在链接上使用伪协议
使用独立的js脚本
语言核心
关于分号
输出Html最简单的方式
alert : 弹出窗口,调试必备
命名规则
基本类型
字符串
十六进制
浮点
特殊常量
布尔值
基于对象
创建
构造函数
成员函数
继承
公共基类的属性
数组
创建
数组的函数
Date对象
null 和 undefined
函数
定义函数
一个函数,多个函数名
函数嵌套函数
函数参数
函数自身的length
arguments.callee : 递归无名函数
函数的静态变量
作用域
引用
等于
全等 (否定为!==)
+加
比较大小
in
instanceof
typeof
new
delete
void
[]
switch
label(标签)/break/continue
throw / try...catch...finally
正值表达式
浏览器中的Javascript概览
window对象
简单的对话框
状态栏
定时器
错误处理onerror
浏览器信息navigator
屏幕screen
打开窗口open
移动窗口/改变大小moveTo , moveBy , resizeTo , resizeBy
焦点控制 focus 和 blur
文档滚动
当前地址栏 location
历史History
框架
文档Documents
基本常识
属性
数组
DOM树
搜索文档的特定元素
动态改变文档内容
一个动态改变Document内容的演示
一个把文章中字母都变为大写的演示
把指定标签改为粗体
更改属性
临时容器DocumentFragment
选中内容 getSelection
CSS
当前的CSS设置
指定样式表
事件驱动
HTML中事件设置
Javascript中事件设置
事件列表
原始事件vs语义事件
同时执行原有动作和自定义动作
事件的返回值
this关键字
2级DOM标准的消息机制
Event事件对象
UIEvent事件对象
MouseEvent事件对象
MutationEvent
IE事件模型
Key Event事件对象
加载事件 onload Event
合成事件 Synthetic Events
cookie
JS库:prototype
$()等价getElementById()
$F()返回输入控件的值
$A()参数转Array
$H()转类似联合数组的Hash对象
Try.these()尝试直到一个成功


1. 序言
现在学的东西很容易忘记,写这篇文章的目的是能让我在需要时快速找回当时的感觉.

入门学习和参考手册建议翻阅JavaScript.The.Definitive.Guide.5th.Edition的附录(有电子版).


2. 准备
设置服务器*.xml的MIME为text/xml ,Windows Xp自带的IIS的设置如下图 js_0000.png

Firefox上有许多插件是开发必备的,用法大家Google,我列一下名称

FireBug

Web Developer Toolbar 
GreaseMonkey 和 XmlHttpRequestDebugging

Html Validator 
另外建议安装一下DreamWaver和EditPlus. EditPlus中可以快速切换IE和Js脚本,快捷键Ctrl+B 强烈建议学习时便学边调试

3. 如何嵌入网页?

3.1. 写在网页中

3.2. 在链接上使用伪协议
Open


3.3. 使用独立的js脚本

* referrer 如果该属性存在,则返回一个链接,表示用户是由哪个网页链接到该页的

5.2.1.2. 数组
* title 文档标题 * URL 等同于window的location.href * anchors[] 所有有name属性的a标记 * forms[] 所有form标记,每个form还有一个element[]数组 * images[] 所有的标签,可以改变它的src属性来改变图象 * link[] 文档中所有的超链接,和window的location一样有protocol, hostname,pathname等属性


//如果一个元素有name还可以这样访问
document.forms.f1    
document.forms["f1"] 

//对于它的子元素可以这样访问
document.shipping.zipcode

//如果有重名的元素,以上的引用方法将返回一个数组

5.2.2. DOM树
见图js_0005.png 对于树上的节点可以用firstChild, lastChild, nextSibling, previousSibling, 和 parentNode属性来历遍

appendChild(), removeChild(), replaceChild(), 和 insertBefore() 可以在文档中动态的添加/删除节点

每个节点都有一个nodeType属性,表明了它的类型

Interface                       nodeType constant                       nodeType value

Element                 Node.ELEMENT_NODE                        1
Text                            Node.TEXT_NODE                           3 
Document                        Node.DOCUMENT_NODE                       9
Comment                 Node.COMMENT_NODE                        8
DocumentFragment  Node.DOCUMENT_FRAGMENT_NODE 11
Attr                            Node.ATTRIBUTE_NODE                      2

getAttribute(), setAttribute(), removeAttribute() 可以用来操作属性,标准的Html元素的属性也可以通过这种方式访问 getAttributeNode()可以返回一个Attr对象,它有一个specified属性,可以判断文档是否指定了该属性,或判断它是否是默认值


//历便一个DOM树
function countTags(n) {                         // n is a Node
    var numtags = 0;                            // Initialize the tag counter
    if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)  // Check if n is an Element
        numtags++;                              // Increment the counter if so
    var children = n.childNodes;                // Now get all children of n
    for(var i=0; i < children.length; i++) {    // Loop through the children
        numtags += countTags(children[i]);      // Recurse on each one
    }
    return numtags;                             // Return the total
}
alert('This document has ' + countTags(document) + ' tags');

5.2.2.1. 搜索文档的特定元素
* document.getElementsByTagName() 返回指定标签名的数组

//虽然只有一个body,还是返回一个数组
document.getElementsByTagName("body")[0];

//有多少表格
var tables = document.getElementsByTagName("table");
alert("This document contains " + tables.length + " tables");

* document.getElementById() 返回id号为指定值元素,因为每个id应该的独一无二的,所以该方法最多返回一个元素


var myParagraph = document.getElementById("specialParagraph");
* document.getElementsByName() 返回name属性为指定值的元素的数组

// Find
var link = document.getElementsByName("top")[0];
// Find all elements
var choices = document.getElementsByName("shippingMethod");

5.2.2.2. 动态改变文档内容
* Document.createElement() * Document.createTextNode() * Node.appendChild() * Node.insertBefore() * Node.replaceChild()


5.2.2.3. 一个动态改变Document内容的演示





test



  • one
  • two
  • three
  • four




5.2.2.4. 一个把文章中字母都变为大写的演示

// This function recursively looks at Node n and its descendants,
// converting all Text node data to uppercase
function upcase(n) {
    if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
        // If the node is a Text node, change its text to uppercase.
        n.data = n.data.toUpperCase();
        //你也可以用appendData(), insertData(), deleteData(), replaceData()来更改数据
    }
    else {
        // If the node is not a Text node, loop through its children
        // and recursively call this function on each child.
        var kids = n.childNodes;
        for(var i = 0; i < kids.length; i++) upcase(kids[i]);
    }
}


5.2.2.5. 把指定标签改为粗体


This is paragraph #1.


This is paragraph #2.



 

5.2.2.6. 更改属性

var headline = document.getElementById("headline");  // Find named element
headline.setAttribute("align", "center");            // Set align='center'

5.2.2.7. 临时容器DocumentFragment
DocumentFragment是一个用来装载DOM对象的临时容器,将他写入文档其实是将它的子元素写入节点

// 翻转元素
function reverse(n) {
    // Create an empty DocumentFragment as a temporary container
    var f = document.createDocumentFragment();
    // Now loop backward through the children, moving each one to the fragment.
    // The last child of n becomes the first child of f, and vice-versa.
    // Note that appending a child to f automatically removes it from n.
    while(n.lastChild) f.appendChild(n.lastChild);

    // Finally, move the children of f all at once back to n, all at once.
    n.appendChild(f);
}
==== 直接插入Html代码innerHTML ==== 虽然不是W3C的标准,但是事实上的标准,类似的还有outerHTML, innerText, 和outerText 
var table = document.createElement("table");  // Create the

element
table.border = 1;                             // Set an attribute
// Add a Name|Type|Value header to the table

5.2.2.8. 选中内容 getSelection
还不是标准,但还是可用的,参考 http://www.quirksmode.org/js/selected.html

Hi , everybody . My name is Zsp .
function getSelectedText() {
    if (window.getSelection) {
        // This technique is the most likely to be standardized.
        // getSelection() returns a Selection object, which we do not document.
        return window.getSelection().toString();
    }
    else if (document.selection) {
        // This is the IE-specific technique.
        // We do not document the IE selection property or TextRange objects.
        return document.selection.createRange().text;
    }
    //现在可以省略了
    else if (document.getSelection) {
        // This is an older, simpler technique that returns a string
        return document.getSelection();
    }
}

//一个实际使用的演示

Look Up Selected Text In Wikipedia

5.2.3. CSS

//一个用来隐藏广告代码的演示
var imgs = document.getElementsByTagName("img");  // Find all images
for(var i = 0; i < imgs.length; i++) {            // Loop through them
    var img=imgs[i];
    if (img.width == 468 && img.height == 60)     // If it's a 468x60 banner...
        img.style.visibility = "hidden";          // hide it!
}
* javascript与css的名字映射,如font-family映射为fontFamily,诸如此类.另外css中的float映射为cssFloat,如此类推

e.style.position = "absolute";
e.style.fontFamily = "sans-serif";
e.style.backgroundColor = "#ffffff";
e.style.left = "300px";
e.style.margin = topMargin + "px " + rightMargin + "px " +
                 bottomMargin + "px " + leftMargin + "px";

5.2.3.1. 当前的CSS设置
W3C规定了getComputedStyle()函数来获取CSS元素的经过各种效果复合过后的当前值

但是IE不支持标准,但它有每个元素都有一个currentStyle属性,可以取得同样的效果

//一段兼容的代码


Look Up Selected Text In Wikipedia

5.2.3.2. 指定样式表






      id="ss1" title="Large Type">
      id="ss2" title="High Contrast">







Basics

Large Type

Contrast


Sans Serif

 

5.2.4. 事件驱动

5.2.4.1. HTML中事件设置
html元素对事件进行响应(不要放在


       

This is a paragraph




       

This is another paragraph


6.2. $F()返回输入控件的值


 

6.3. $A()参数转Array
这个方法加上对Array类的扩展,可以很容易的转换或者复制任意的列举列表到Array对象, 一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里,可以被更广泛高效的使用, 看下面的例子。

6.4. $H()转类似联合数组的Hash对象
$H()方法把对象转化成可枚举的貌似联合数组Hash对象。


==$R()简单的遍历 == 用方法$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一个简单快捷的使用方式。

6.5. Try.these()尝试直到一个成功
方法Try.these() 方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易, 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行,返回成功执行的那个方法的返回值。

在下面的例子中, xmlNode.text在一些浏览器中好用,但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法我们可以得到正常工作的那个方法的返回值。


== Ajax.RequestXML响应==

如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程,然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML响应。






1234
1998-01
$8,115.36


1234
1998-02
$11,147.51




用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。






你注意到传入 Ajax.Request构造方法的第二个对象了吗? 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性,另一个属性名为 parameters 包含HTTP请求的查询字符串,和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置,如 asynchronous,可以为true 或 false 来决定AJAX对服务器的调用是否是异步的(默认值是 true)。

这个参数定义AJAX调用的选项。在我们的例子中,在第一个参数通过HTTP GET命令请求那个url,传入了变量 pars包含的查询字符串, Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。

也许你知道, XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段:Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ,Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用,这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法,当AJAX无误的执行完后调用, 相反的,也可以在onFailure选项处传入一个方法,当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样,这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

我们的例子没有用任何有趣的方式处理这个 XML响应, 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息,然后更新页面中的某些元素, 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

在1.4.0版本中,一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行,而不管是哪个AJAX调用引发它,那么你可以使用新的Ajax.Responders对象。 
假设你想要在一个AJAX调用正在运行时,显示一些提示效果,像一个不断转动的图标之类的,你可以使用两个全局事件Handler来做到,其中一个在第一个调用开始时显示图标,另一个在最后一个调用完成时隐藏图标。看下面的例子。


Loading...

更完全的解释,请参照 Ajax.Request 参考 和 Ajax选项参考。

MoinMoin PoweredPython PoweredValid HTML 4.01 
推荐使用支持W3C标准的浏览器进行阅读,获得最佳页面效果,谢绝IE的混乱解析!   Searching all CPUG sites and mailist::
  
 Web 
getACL = 0.006s getPageList = 0.204s loadLanguage = 0.005s load_multi_cfg = 0.003s run = 0.364s send_page = 0.112s send_page_content = 0.052s total = 0.378s  

你可能感兴趣的:(js,ajax,脚本语言)