<script type="text/javascript">document.write("开启JS之旅!");</script>
外部引入javascript文件
<script src="script.js"></script>
常用互动方法：
document.write()alert()confirm()prompt()window.open()window.close()
DOM（文档对象模型）
var obj = document.getElementById("id")document.bodyobj.innerHTMLobj.style.colorobj.style.fontSizeobj.style.displayobj.className
创建数组语法：
var myarray=new Array();var myarray = new Array(66,80,90,77,59);//创建数组同时赋值var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
定义函数
function add2(x,y){sum = x + y;return sum; //返回函数值,return后面的值叫做返回值。}
主要事件表
onclick | 鼠标单击事件 |
| onmouseover | 鼠标经过事件 |
| onmouseout | 鼠标离开事件 |
| onchange | 文本框内容改变事件 |
| onselect | 文本框内容被选中事件 |
| onfocus | 光标聚集 |
| onblur | 光标离开 |
| onload | 网页载入 |
| onunload | 网页关闭 |
get/setDate()get/setFullYear()get/setYear()get/setMonth()get/setHours()get/setMinutes()get/setSeconds()get/setTime()
parseInt()
字符串
charAt()
toUpperCase()
toLowerCase()
indexOf(subString, startIndex)
split(separator, limit)
substring(startpos, endpos)
substr(startPos, length)
Math对象，无需创建，直接使用
Array数组对象
| concat() | 连接两个或更多数组 |
| join() | 把数组所有元素放进字符串，可用指定分隔符进行分隔 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，返回新的长度 |
| reverse() | 颠倒数组中的元素顺序 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素并向数组添加新元素 |
| toSource() | 返回该对象的源代码 |
| toString() | 把数组转换为字符串，返回结果 |
| toLocaleString() | 把数组转换为本地数组 |
| unshift() | 向数组的开头添加一个或更多元素 |
| valueOf() | 返回数组对象的原始值 |
| alert() | 显示带有一段消息和一个确认按钮的对话框 |
| prompt() | 显示可提示用户输入的对话框 |
| confirm() | 显示带有一段消息和一个确认按钮、一个取消按钮的对话框 |
| open() | 打开一个新的浏览器窗口 |
| close() | 关闭浏览器窗口 |
| print() | 打印当前窗口的内容 |
| focus() | 把焦点给予一个窗口 |
| blur() | 把键盘焦点从顶层窗口移开 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标 |
| resizeBy() | 按照指定的像素重新调整窗口的大小 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度 |
| scrollBy() | 按照指定的像素滚动内容 |
| scrollTo() | 将内容滚动到指定的坐标 |
| setInterval() | 每隔指定的时间执行代码 |
| setTimeout() | 在一定的延迟后执行代码 |
| clearInterval() | 清除setInterval()设置 |
| clearTimeout() | 清除setTimeout()设置 |
window.history.[属性 | 方法]
window.history.length
window.history.back() 等价于window.history.go(-1)
window.history.forward() 等价于window.history.go(1)
window.history.go()
Location对象
location.[属性 | 方法]
属性
| hash | 设置或返回从#开始的url |
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| port | 设置或返回当前URL的端口号 |
| href | 设置或返回完整的URL |
| pathname | 设置或返回当前URL的路径部分 |
| protocol | 设置或返回当前URL的协议 |
| search | 设置或返回从？开始的URL部分 |
| assign() | 加载新的文档 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
Navigator对象
navigator.[属性]
| appCodeName | 浏览器代码名的字符串显示 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| platform | 返回运行浏览器的系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent头部的值 |
Screen对象
用于获取用户的屏幕信息
window.screen.属性 也可以不使用window这个前缀
| availHeight | 窗口可以使用的屏幕高度，单位像素 |
| availWidth | 窗口可以使用的屏幕宽度，单位像素 |
| colorDepth | 用户浏览器表示的颜色位数，通常为32位（每像素的位数） |
| pixelDepth | 用户浏览器表示的颜色位数，通常为32位（每像素的位数） |
| height | 屏幕的高度，单位像素 |
| width | 屏幕的宽度，单位像素 |
DOM对象
元素节点，属性节点，文本节点
节点属性
| nodeName | 返回一个字符串，其内容是给定节点的名字 |
| nodeType | 返回一个整数，这数值代表给定节点的类型 |
| nodeValue | 返回给定节点的当前值 |
| childNodes | 返回数组，这个数组由给定节点的子节点组成 |
| firstChild | 返回第一个子节点 |
| lastChild | 返回最后一个子节点 |
| parentNode | 返回一个给定节点的父节点 |
| nextSibling | 返回给定节点的下一个子节点 |
| previousSibling | 返回给定节点的上一个子节点 |
| createElement(element) | 创建一个新的元素节点 |
| createTextNode() | 创建一个包含指定文本的文本节点 |
| appendChild() | 指定节点的最后一个子节点列表后添加一个子节点 |
| insertBefore() | 将一个给定节点插入到一个给定节点的子节点后面 |
| removeChild() | 删除一个给定节点的子节点 |
| replaceChild() | 把一个父节点的子节点替换为另一个子节点 |
document.getElementsByName() //返回给定名字的元素标签数组
document.getElementsByTagName() //返回相应标签名的元素标签数组
elementNode.getAttribute(name) //通过元素节点的属性名称获取属性的值
elementNode.setAttribute(name, value) //增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值
在超链接中加入javascript
<a href="javascript:replaceMessage()">...</a>
点击按钮时加入javascript
浏览器窗口可视区域大小
window.innerWidthwindow.innerHeight
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;网页尺寸scrollHeight
var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
var w= document.documentElement.offsetWidth || document.body.offsetWidth;
var h= document.documentElement.offsetHeight || document.body.offsetHeight;
网页卷去的距离与偏移量
scrollLeft、scrollTop、offsetLeft、offsetTop
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
编程挑战示例（选项卡切换）
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>实践题 - 选项卡</title><style type="text/css">*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}#tabs {width:290px;padding:5px;height:150px;margin:20px;}#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}.hide{display: none;}</style><script type="text/javascript">window.onload = function(){var oTab = document.getElementById("tabs");var oUl = oTab.getElementsByTagName("ul")[0];var oLis = oUl.getElementsByTagName("li");var oDivs= oTab.getElementsByTagName("div");for(var i= 0,len = oLis.length;i<len;i++){oLis[i].index = i;oLis[i].onclick = function() {for(var n= 0;n<len;n++){oLis[n].className = "";oDivs[n].className = "hide";}this.className = "on";oDivs[this.index].className = "";}};}</script></head><body><div id="tabs"><ul><li class="on">房产</li><li>家居</li><li>二手房</li></ul><div>275万购昌平邻铁三居 总价20万买一居<br>200万内购五环三居 140万安家东三环<br>北京首现零首付楼盘 53万购东5环50平<br>京楼盘直降5000 中信府 公园楼王现房<br></div><div class="hide">40平出租屋大改造 美少女的混搭小窝<br>经典清新简欧爱家 90平老房焕发新生<br>新中式的酷色温情 66平撞色活泼家居<br>瓷砖就像选好老婆 卫生间烟道的设计<br></div><div class="hide">通州豪华3居260万 二环稀缺2居250w甩<br>西3环通透2居290万 130万2居限量抢购<br>黄城根小学学区仅260万 121平70万抛!<br>独家别墅280万 苏州桥2居优惠价248万<br></div></div></body></html>