java script w3c study notes

134 阅读 0 评论 89 点赞

我是靠谱客的博主迅速洋葱，最近开发中收集的这篇文章主要介绍java script w3c study notes，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JavaScript简介
1.js
JavaScript 可以将动态的文本放入 HTML 页面
JavaScript 可以对事件作出响应
JavaScript 可以读写 HTML 元素
JavaScript 可被用来验证数据
JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来创建 cookies
JavaScript 的正式名称是 "ECMAScript"
2.实现
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
3.放置
head，可以确保调用函数之前，该脚本已经被加载
body
外部
<html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>
4.常用
a.alert("文本");
b.confirm("文本");
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
c.prompt("文本","默认值");
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好！" + name + " 今天过得怎么样？")
}
}
c.调用函数
<input type="button" value="Click me!" οnclick="displaymessage()" >
d.for in
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
4.事件
onload 和 onUnload
onFocus, onBlur 和 onChange
onSubmit
onMouseOver 和 onMouseOut

JavaScript对象
1.Date
var myDate=new Date()
myDate.setFullYear(2008,7,9)
2.Array
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
或者
var mycars=new Array("Saab","Volvo","BMW")
方法：
a.document.write(arr.concat(arr2))
b.var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
c.
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
d.Boolean
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
e.Math
E/LN2/LN10/LOG10E/PI/SQRT1_2/SQRT2
f.RegExp
var patt1=new RegExp("e");
RegExp.test("e");//返回true or false
RegExp.exec();//返回找到的值
5.DOM 对象
Wiindow,顶层对象
Navigator，客户浏览器
Screen包含客户端显示屏的信息。
History包含了浏览器窗口访问过的 URL。
Location包含了当前URL的信息。

Document代表整个 HTML 文档，用来访问页面中的所有元素。
Anchor代表 <a> 元素。
Area 代表图像地图中的 <area> 元素。
Base 代表 <base> 元素。
Body 代表图像地图中的 <body> 元素。
Button代表 <button> 元素。
Event代表事件的状态
Form 代表 <form> 元素
Frame代表 <frame> 元素
Frameset代表 <frameset> 元素
Iframe代表 <iframe> 元素
Image代表 <img> 元素
Input button代表 HTML 表单中的按钮
Input checkbox代表 HTML 表单中的选择框
Input file代表 HTML 表单中的 fileupload 。
Input hidden代表 HTML 表单中的隐藏域。
Input password代表 HTML 表单中的密码域。
Input radio代表 HTML 表单中的单选框。
Input reset代表 HTML 表单中的重置按钮。
Input submit代表 HTML 表单中的确认按钮。
Input text代表 HTML 表单中的文本输入域。
Link 代表 <link> 元素
Meta 代表 <meta> 元素
Object代表一个 <Object> 元素
Option代表 <option> 元素
Select代表 HTML 表单中的选择列表。
Style代表某个单独的样式声明。
Table代表 <table> 元素。
TableData代表 <td> 元素。
TableRow代表 <tr> 元素。
Textarea代表 <textarea> 元素。

6.图像区域
<img src ="planets.gif" width ="145" height ="126"
alt="Planets"usemap ="#planetmap" />

<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank"
alt="Venus" />
</map>

7.计时器
var t=setTimeout("javascript语句",毫秒)
clearTimeout(setTimeout_variable)

HTML DOM in w3c
1.w3c访问节点
getElementById(),js中document.getElementById("ID");
getElementsByTagName()，js中document.getElementsByTagName("p");
2.DOM 节点信息
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
a、nodeName
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
b、nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
c、nodeType
元素 1
属性 2
文本 3
注释 8
文档 9

JavaScript 程序设计
1.JavaScript组成
核心 ECMAScript
文档对象模型 DOM
浏览器对象模型 BOM
2.JavaScript访问
var returnnode = someNode.appendChild(someNode.firstChild) 将第一个节点插入到最后并且返回
var returnedNode = someNode.insertBefore(newNode,null); 插入到最后一个
var returnedNode = someNode.insertBefore(newNode,someNode.firstChild); 插入到第一个

var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); 替换第一个节点
var returnedNode = someNode.replacedChild(newNode,someNode.lastChild); 替换最后一个节点

var formerFirstChild = someNode.removeChild(someNode.firstChild); 删除第一个节点
var formerLastChild = someNode.removeChild(someNode.lastChild); 删除最后一个节点
3. HTML
<html>
<body>
</body>
</html>
document.documentElement/document.childNodes[0]/document.firstChild
都是返回HTML元素
document.body返回body
4. CSS
a.获取默认样式表
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
computedStyle.backgroundColor
computedStyle.width
computedStyle.height
computedStyle.border
b.获取样式表
var sheets = docuemnt.styleSheets;
var sheet = document.styleSheets[0];
var rules = sheet.cssRules;
var rule = rules[0];
rule.style.backgroundColor = "red";
sheet.addRule("body", "background-color: silver",0);
sheet.deleteRule(0);
c.获取偏移量
element.offsetLeft
element.offsetParent
element.offsetTop
element.offsetHeight
element.offsetWidth

5.createNodeIterator()
a.four parameters
root, whatToShow, filter, entityReferenceExpansion(useless in HTML)
whatToShow:
NodeFilter.SHOW_ALL
NodeFilter.SHOW_ELEMENT
NodeFilter.SHOW_TEXT
NodeFilter.SHOW_COMMENT
NodeFilter.SHOW_DOCUMENT
NodeFilter.SHOW_DOCUMENT_TYPE
b.
var filter = {
acceptNode:function(node){
return node.tagName.toLowerCase()=="p"?
NodeFilter.FILTER_ACCEPT:
NodeFilter.FILTER_SKIP;
}
};
var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT,
filter,false);
var filter = function(node){
return node.tagName.toLowerCase() == "p" ?
NodeFilter.FILTER_ACCEPT:
NodeFilter.FILTER_SKIP;
}
create an Iterator without a Filter
var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL,
null, false);
c. nextNode() previousNode()
nextNode() first return the rootNode, till the last one which return null;
previousNode() works the same.
javascript for Nodeiterator
var div = document.getElementById("div1");
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null,

false);
var node = iterator.nextNode();
while (node!==null)
{
alert(node.tagName);
node = iterator.nextNode();
}

6.TreeWalker
no iterator can over it's root
a.functions
nextNode()
previousNode()
parentNode()
firstChild()
lastChild()
nextSlibling()
previousSlibing();
b. show all element
var div = document.getElementById("div1");
var iterator = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while (node!==null)
{
alert(node.tagName);
node = iterator.nextNode();
}
//works the same result as NodeIterator.

<div id="div1">
<p><b>Hello</b> world!</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>

var div = document.getElementById("div1");
var iterator = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.firstChild();
alert(node.tagName)
var node = iterator.nextSibling();
alert(node.tagName)
var node = iterator.parentNode();
alert(node.tagName)
var node = iterator.lastChild();
alert(node.tagName)

7.Range
Range consistes of two boundary-point.
A boundary-point is characterized by a node and an offset. It must have a common

ancestor container. (the content of the Range must be entirely with the subtree)
Node is called container.
Offset is the offset of the boundary-point.
offset is between nodes if the container is Atrr, Document, DocumentFragment,Element

or EntityReference node; and it is between the 16-bit units if the container is a

CharacterData, Comment and so on.

javascript's event
1.add event basic
a.add event with anonymous function
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function{},false)
anonymous function can't be removed
b.btn.addEventListener("click", handler, false);
btn.addEventListener("click", handler, false);
c.event object
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break:
case "mouseout":
event.target.style.backgroundColor="red";
break;
}
}
btn.addEventListener("click", handler, false);
d.eventPhase
capture，1
handle，2 //target=currenttarget
bubbling，3
e.Event
UI,Mouse,KeyBoard,HTML,mutation

2.MouseEvent:
click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove
event.clientX,event.clientY
event.screenX,event.screenY
event.shiftKey,event.ctrlKey,event.altKey,event.metaKey
for "mouseover" and "mouseout", there is another object called "event.relatedTarget"
event.toElement event.fromElement

3.keyEvent
keydown triggered when any key is pressed
keypress triggered after a character key.
keyup triggered after release anykey.
long press character key: keydown keypress .. keydown keypress ... keypress keyup
long press other key: keydown keydown ... keydown keyup
keycode, event.keyCode

4.HTML event
load unload abort error select change submit reset resize scroll focus blur
mutation
DOMSubtreeModified, DOMNodeInserted,DOMNodeRemoved,DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument,DOMAttrModified,DOMCharracterDataModified

deal event with switch case in the parent node, rather than add eventhandler for

every subelement

DOM create Event very complex.