java script w3c study notes
来源：互联网 发布：潮阳淘宝美工培训 编辑：程序博客网 时间：2024/04/29 18:26
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!" onclick="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.
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!" onclick="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.
- java script w3c study notes
- Java API Study Notes
- study notes
- Websocket java api (jsr 356) study notes
- Websocket java api (jsr 356) study notes
- MySql study notes [1]
- Portlet Study Notes (1)
- IBM Director study notes
- lucene study notes
- lucene study notes (2)
- Legacy Study notes(Servlet)
- C++ Study Notes
- System Architect Study notes
- flex study notes (2)
- scm515 study notes
- Webkit Timer study notes
- Webkit JNI study notes
- Hash study notes
- ArrayList用法
- HDU_2540 遮挡判断
- cpu超频
- http 基础
- TI公司的H.264 相关资料
- java script w3c study notes
- cocos2d自动检查内存泄漏
- find+*的问题
- windows平台下通过blat发送邮件用法小结
- mysql图文安装教程(详细说明)
- 应用程序连接 SQL2000 数据库失败的一种可能原因
- ORACLE 用ROWID 删除数据竟然的走索引-不得其解
- 从漏测来看项目中各个角色~！
- 驱动工程师
