| 第一章：
JavaScript是一种脚本语言，通常只能通过web浏览器去执行某种操作。DOM是一套对文档内容进行抽象和概念化的方法。DHTML 利用HTML进行布局 利用CSS设计样式 利用JavaScript动态改变样式
第二章：
JavaScript的两种嵌入方式：1、HTML页面内部代码<script type="text/javascript"> Javascript goes here ...</script>2、导入外部js文件<script type="text/javascript" src="file.js"></script>
JavaScrip语言为解释性语言，非编译型语言。
语法重点：1、 数组与关联数组数组声明：var beatles = Array("John","Paul","George","Ringo");关联数组声明：var lennon = Array();lennon["name"] = "John";lennon["year"] = 1940;lennon["living"] = false;2、 条件语句：if{}else{}没有else if 语句3、 对象内建对象宿主对象（host object）：web浏览器提供的预定对象 如：Form、Image、Element。通过document对象可以获得给定网页上的元素
第3章：
DOM中的节点<p title = "a gentle reminder">Don't forget to ...</p>p为元素节点 title为属性节点 Don't forget to ...为文本节点
四个实用的DOM方法：1、 document.getElementById("id_string")返回对象2、 document.getElementsByTagName("tagName_String")返回对象组 允许通配符作参数：如：得到节点数 document.getElementsByTagName("*").length;3、 object.getAttribute("attributeName")4、 object.setAttribute("attributeName")
第四章：
问题：在onclick事件响应时，链接被点击的默认行为也会发生.。解决方法：添加返回值false，阻止默认行为发生。onclick = "showPic(this);return false;"
node.nodeType 属性元素节点属性值：1属性节点属性值：2文本节点属性值：3
第五章：
预留退路：确保网页在没有javascript的情况下也能正常工作。<a href="http://www.example.com" onclick = "popUp(this.href);return false;">example</a>
向CSS学习：文档结构与文档样式分离。
第六章：
window.onload 函数（代码见：附录）
第七章：
使用Javascript改变网页的结构和内容Document.write()方法破换了Javascript分离原则，应避免使用。MIME类型为 application/xhtml + xml 与 document.wirte()方法不兼容。innerHTML属性也是非标准的DOM。1、 Element document.createElement("tagName");2、 Text document.createTextNode("textData"); 3、 oElement = object.appendChild(oNode)； 4、 oElement = object.insertBefore(oNewNode [, oChildNode])； 如：node_old.parentNode.insertBefore(node_new,node_old);5、 DOM没有提供insertAfter()方法；（insertAfter方法代码见：附录）
第八章：
For-in 循环：可以把某个数组的下标（或：关联数组中的关键字）临时地赋给一个变量。
<abbr>与<acronym> IE不支持<abbr>
第九章：
网页的构成: 结构层：HTML XHTML 表示层：CSS 行为层：Javascript&DOM
style属性：文档的每个元素节点都有一个style属性，包括元素的样式信息。查询这个属性会返回一个对象，而不是一个简单的字符串。element.style.propertyeg: para.style.color; element.style.fontFamily;style属性只能检索到内嵌于HTML的样式信息，单独的css表或文件中的信息不能被检索到。
可以用元素的style属性改变元素样式，更简单的方式是通过改变元素的class属性值。
当需要为元素追加样式时，使用addClass函数 （addClass方法代码见：附录）
第十章：
position属性的4种取值static：默认值，有关元素安装在HTML文档中的出现顺序在浏览器窗口中显示relative：与static相似，区别在于可以在float属性的作用下从文档的正常显示顺序中脱离出来。 absolute：可放置的位置与元素在文档中出现的位置无关，为了避免冲突。只left / right 和top / buttom 。
时间动画： setTimeout("function",interval);
function changePosition(){ . . . movement = setTimeout("changePosition()",5000);} movement为全局变量，可以在函数以外取消。clearTimeout(movement);
parseInt函数用于从字符串中提取数值信息。 Eg：parseInt("15px") == 15;
parseInt和toString方法都可以进行数制转换
//10进制转16进制var n = 123;alert(n.toString(16));
//16进制转2进制var n = 0xff;alert(n.toString(2));
//16进制字符串转10进制var n = "ff"alert(parseInt(n,16));
使用overflow属性进行裁剪： Overflow：显示区域小于包含内容的情况。overflow的4种属性值： visible：不裁剪溢出内容，全部内容可见 hidden：裁剪溢出内容，溢出部分不可见 scroll：裁剪溢出内容，但有滚动条 auto：与scroll相似，只有在发生溢出的情况才有滚动条
注意：如果吧position属性为absolution的元素载入一个position属性为relative的元素，后者就成为前者的容器，而前者在后者的区域里按absolute方式摆放。
第十二章：
Ajax技术： 服务器端处理是异步发生的，用户发出的每一个请求不见得会导致整个页面的刷新，服务器可以在后台进行处理。 Ajax技术核心是在客户端和服务器之间插入一个中转站：javascript脚本先把请求从客户端发到中转站，中转站再把请求转发给服务器。服务器响应也通过中转站转给javascript处理。这个中转站就是XMLRequest对象。
DOM方法和属性：
insertBefore和appendChild函数在插入节点时，如果将要插入的节点本身就在文档中，那么将自动条用removeChild方法清楚原始位置。因此都可以用于转移文档内节点。
DOM属性： 元素节点 属性节点 文本节点nodeName 元素名 属性名 "#text"nodeType 1 2 3nodeValue null 属性值 文本内容
遍历DOM数节点： childNodes firstNode lastNode previousSibling nextSibling parentNode
第11章：
整站设计：/images/styles/script layout.css color.css typography.css
basic.css @import url (layout.css); @import url (color.css); @import url (typography.css);
在页面中，只需要导入basic.css ：<link rel="styleSheet" type="test/css" media="screen" href="style/basic.css" />
注意： 颜色：如果为某种元素设置了某种前景色，就应为它设置一种背景色。如果不注意这个细节，可能导致某些文本内容变成“隐形”文字。 a:link { color:#445; background-color:#e66;}
布局：用通配符把每个元素的均空和间距都设置为0，这样做可以让页面不受浏览器默认设置的影响。 *{ padding 0; margin 0;}
推荐：均空信息放入layout.css，间距信息放入typography.css里。
附录：addLoadEvent insertAfteraddClassStripTable
function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != ‘function') {window.onload = func;} else {window.onload = function() {oldonload();func();}}}
function insertAfter(newElement,targetElement) {var parent = targetElement.parentNode;if (parent.lastChild == targetElement) {parent.appendChild(newElement);} else {parent.insertBefore(newElement,targetElement.nextSibling);}}
function addClass(element,value) {if (!element.className) {element.className = value;} else {newClassName = element.className;newClassName+= " ";newClassName+= value;element.className = newClassName;}}
function stripeTables() {if (!document.getElementsByTagName) return false;var tables = document.getElementsByTagName("table");for (var i=0; i<tables.length; i++) {var odd = false;var rows = tables[i].getElementsByTagName("tr");for (var j=0; j<rows.length; j++) {if (odd == true) {rows[j].style.backgroundColor = "#ffc";odd = false;} else {odd = true;}}}}
addLoadEvent(stripeTables); |
