目录
0. 语法回忆
1. 语句
2. 数据类型
3. 文档模型DOM
4. 浏览器对象模型BOM
根据所在位置分为2种
内部脚本
必须位于 <script> 与 </script> 之间，通常放在<head>中（会先于body解析），也可放在<body>中（解析到该js时执行）
外部脚本
<script src="myScript.js"></script>放在head中
myScript.js文件中不能再写<script></script>
0. 语法回忆
快速回忆
1.获取指定元素（根据ID）
x=document.getElementById("demo");
2.修改元素
x.innerHTML="Hello JavaScript"; // 元素的内容
x.src="/i/eg_bulboff.gif"; // 元素的属性
x.style.color="#ff0000"; // 元素的属性（样式）
3.向HTML写入内容 document.write("")
<p>hello</p>
<script type="text/javascript">
document.write("<h1>world</h1>");
</script>
4.事件
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert('Welcome!')
}
</script>
</head>
<body>
<form id="form1" action="http://.../test.asp" method="post" onsubmit="return login()">
<input type="button" onclick="myFunction()">Try it</button>
<input type="button" onclick="alert('Welcome!')">点击这里</button>
</form>
</body>
</html>
说明：
浏览器会逐行执行脚本代码
一行多个语句时需要；
大小写敏感
会忽略多余的空格
在文本字符串中使用反斜杠对代码行进行换行
document.write("Hello \
World!");
- 注释
单行注释 //
多行注释 /**/
- 输出
document.write("helloWorld"+"<br>");
var mystr="hello";
document.write(mystr+"I love JavaScript"); //
- 消息框
警告框
alert("文本")
确认框(点确认返回true，否则返回false)
confirm("文本")
提示框
prompt("文本","默认值")
<script type="text/javascript">
var message=confirm("hello");
if(message==true)
{ document.write("1!"); }
else
{ document.write("2!"); }
var name=prompt("hello");
if(name!=null)
{ alert("1"+name); }
else
{ alert("2"); }
</script>
- 表达式
由变量和操作符组成
1+2
[1,2]
{x:1,y:2}
(function fun(){})()
str.length
fun()
- 变量
变量必须以字母、$ 和 _ 开头，之后可以使用数字、字母、下划线、$
大小写敏感，不能使用关键字和保留字。
尽量见名知意，规范：先声明再赋值。
var num1,mun2;
var x=2.3;
var y=3;
var z=x+y;
var str="hello";
var name="Gates", age=56, job="CEO";
var name="Gates",
age=56,
job="CEO";
var cc=undefined; 等价于 var cc;
var carname="Volvo";
var carname; 依旧是"Volvo"
关键字、保留字
- 函数
便于复用，减少冗余
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
使用function关键字 定义函数对象
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
</body>
function myFunction(){
var x=5;
return x;
}
function myFunction(var1,var2){
}
- 运算符
算数运算符
+ 加
- 减
* 乘
/ 除
% 求余数 (保留整数)
++ 累加
-- 递减
赋值运算符
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
比较运算符
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
条件运算符
var iablename=(condition)?value1:value2
逻辑运算符
&& 同真为真，有假则假
|| 有真则真，同假则假
！ 取反
位运算符
& AND，按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。
x = 5 & 1 0101 & 0001 0001 十进制：1
| OR，按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。
x = 5 | 1 0101 | 0001 0101 十进制：5
~ 取反，取反是一元运算符，对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0，0 成为 1。
x = ~ 5 ~0101 1010 十进制： -6
^ 异或，按位异或运算，对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1，否则该位为 0。
x = 5 ^ 1 0101 ^ 0001 0100 十进制：4
<< 左移，把 << 左边的运算数的各二进位全部左移若干位，由 << 右边的数指定移动的位数，高位丢弃，低位补 0。
x = 5 << 1 0101 << 1 1010 十进制：10
>> 右移，把 >> 左边的运算数的各二进位全部右移若干位，>> 右边的数指定移动的位数。
x = 5 >> 1 0101 >> 1 0010 十进制：2
>>> 无符号右移，与有符号右移位类似，除了左边一律使用0 补位。
x = 2 >>> 1 0010 >>> 1 0001 十进制：1
“+加号” 拼接字符串
txt1="5";
txt2="5"; 或 txt2=5;
txt3=txt1+txt2; 55
,
var x=1,2,3; // x==3,取最右值
delete
var ob={x:1,y:2};
delete ob.x;
in
var ob={x:1,y:2};
x in obj == true; // 是否拥有该属性
var obj=new Person;
Person.prototype.x=1; // 对象原型上属性
obj.hasOwnProperty('x') // false
obj._proto_.hasOwnProperty('x') // true
instanceof
typeof
var num = 12;
console.log(typeof num); //输出结果: number
优先级
算术操作符 > 比较操作符 > 逻辑操作符 > "="赋值符号
通过（）可以改变优先级
- 事件
事件
单击事件
<form>
<input name="button" type="button" value="点击提交" onclick="uploadData()" />
</form>
<body onload="function()">
</body>
<script type="text/javascript">
window.onunload = onunload_func;
function onunload_func(){
}
</script>
- RegExp
RegExp 是正则表达式的缩写
创建
var patt1=new RegExp("e");
是否含有e
patt1.test("The best things in life are free")
是否含有e，当含有时返回e，没有时返回null
patt1.exec("The best things in life are free")
改变匹配内容（将e改为d）
patt1.compile("d");
- 严格模式
提供更强的错误检查
'use strict' 之后的代码必须符合严格模式
不允许使用with
必须先声明后使用
注意：
(function(x){
'use strict'
arguments[0]=100;
// x==1 严格模式下，arguments为副本
})(1);
(function(obj){
'use strict'
arguments[0].x=100;
// obj.x==100
})({x:1});
严格模式
1. 语句
- 判断语句
if (true){
}
if (true){
}else{
}
if (true){
}else if(true){
}else{
}
switch(n){
case 1:
// ...
break;
case 2:
break;
default:
其他
}
- 循环语句
for (var i=0;i<cars.length;i++){
break;
continue;
}
var i=0,len=cars.length;
for (; i<len; ){
I++;
}
for (x in person){ // 属性的enumberable为false时，不会输出
}
while (true){
}
do{
}while (true);
跳出循环
break;
跳出本次循环，进行下一个循环
continue;
可以对 JavaScript 语句进行标记
label:{
break label;
continue label;
}
- try catch 语句
处理错误
1.语法错误
2.由于浏览器差异
3.由于来自服务器或用户的错误输出而导致的错误
4.其他
try{
// 可能出错的代码
// 或
// 主动抛出
// throw "empty";
}
catch(err){
// 处理错误
}
finally{
// 始终执行
}
指定出错时的错误方法
onerror=handleErr;
- block块
block块（没有作用域）
{
var x=1;
}
x-=2;
for(var x=1;x<3;x++){
}
x=6;
function fun(){
var a=b=1; // b隐式为全局变量
}
b==1; //true
2. 数据类型（6种）
- 原始类型：字符串string、数字number、布尔boolean、null、Undefined
- 对象类型（Function、Array、String、Boolean、Date、Math等）
var x // x 为 undefined
var x = "Bill"; // x 为字符串
var x = 6; // x 为数字
var z = 0xFF; // x 为数字（八进制）
var x = true; // x 为bool
// cars：数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
//
var cars=new Array("Audi","BMW","Volvo");
// 对象
var person={firstname:"Bill", lastname:"Gates", id:5566};
//
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
// 使用对象
name=person.lastname;
name=person["lastname"];
// 清空变量
cars=null;
也可以先声明变量类型，再赋值
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
日期Date
当前日期
var d=new Date();
var d = new Date(2012, 9, 1); //2012年9月1日
重新设置date
d.setDate(myDate.getDate()+5)
从 1970/01/01 至今已过去多少毫秒
d.getTime()
设置年月日
d.setFullYear(1992,10,3)
转换为字符串
d.toUTCString()
返回0～6:周日到周六
d.getDay()
小时 分钟 秒
var h=d.getHours()
var m=d.getMinutes()
var s=d.getSeconds()
比较日期
>
星期、月、日、年、时、分、秒、时区
Date
字符串
是存储字符的变量。用双引号或单引号。
var txt="Hello World!"
长度
txt.length
指定位置的字符
txt.charAt(2)
获取下标（没找到则-1，找到则首次字母下标）
str.indexOf("Hello")
str.indexOf("v",8) // 从8开始找
是否含有指定字符串（含有则返回字符串，不含则反null）
str.match("world")
替换字符串
str.replace(/Microsoft/,"W3School")
分割字符串
str.substr(7) 开始位置
str.substring(7) 开始位置
str.substring(2,6) 开始位置，结束位置
str.substr(7,2) 开始位置，长度
分割为数组
str.split("-", 2) // 数组最大个数为2
str.split("-")
变大
txt.big()
变小
txt.small()
变粗
txt.bold()
斜体
txt.italics()
删除线
txt.strike()
颜色
txt.fontcolor("Red")
大小
txt.fontsize(16)
全小写
txt.toLowerCase()
全大写
txt.toUpperCase()
下标
txt.sub()
上标
txt.sup()
链接
txt.link("http://www.w3school.com.cn")
Math 数字
所有 JavaScript 数字均为 64 位。
可以带小数点，也可以不带。
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确.
四舍五入
Math.round(0.60)
向上舍入（返回的是大于或等于x最接近的整数）
Math.ceil(-5.9) //-5
向下舍入（返回的是小于或等于x最接近的整数）
Math.floor(-5.9)
0～1随机数
Math.random()
比大数
Math.max(5,7)
比小数
Math.min(5,7)
常数
Math.E
圆周率
Math.PI
2的平方根
Math.SQRT2
1/2的平方根
Math.SQRT1_2
2的自然数
Math.LN2
10的自然数
Math.LN10
以2为底e
Math.LOG2E
以10为底e
Math.LOG10E
Math
布尔
布尔（逻辑）只能有两个值：true 或 false。
无初始值或者其值为 0、-0、null、""、false、undefined 或者NaN则为false，否则为true
创建
var myBoolean=new Boolean("e")
数组
数组下标是从零开始的
创建数组
var mycars = new Array()
var mycars = new Array(5)
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
或
var mycars=new Array("Saab","Volvo","BMW")
或
var myarray = [66,80,90,77,59];
数组的大小
myarray.length
访问数组元素
mycars[0]
修改数组元素
mycars[0]="Opel";
遍历数组
for (i=0;i<mycars.length;i++){
}
合并数组（返回一个新数组）
arr.concat(arr2)
拼接数组（默认以,）
arr.join() arr.join(".")
返回一个新数组（开始坐标-结束坐标）
arr.slice(2,4)
按a-z排序
arr.sort()
倒序
arr.reverse()
数字从小到大排序
arr.sort(sortNumber)
function sortNumber(a, b){
return a - b
}
二维数组
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
myarr[0][1]=5;
数组
对象（JavaScript 是面向对象的语言，但 JavaScript 不使用类）
JavaScript 中的所有事物都是对象：字符串、数字、数组、函数、日期，等等。除了这些内置对象，还可以自定义对象。
对象拥有属性和方法：属性（key：字符串类型）（与对象相关的值）、方法（是能够在对象上执行的动作）。
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
Undefined 和 Null
设置为 null 来清空变量
举例：
var txt = "Hello";
txt.length
txt.indexOf(0)
txt.replace()
txt.search()
自定义对象，添加属性并赋值
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
或
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
或
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
方法
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}
}
person=new person("Bill","Gates",56,"blue");
弱类型
var x = 6;
x="hello";
隐式转换
var x="hello"+6; // "hello6"
var x="36"-6; // 30
"36" == 36 // 字符串隐式转换为数字类型
0 == false // boolean隐式转换为数字类型
null == undefined
null === null
undefined === undefined
NaN != NaN
var str="hello"
str.length // 隐式转换为String对象类型，使用完即销毁
类型检测
typeof 10 // number
typeof NaN // number
typeof null // object对象类型
typeof [1,2] // object对象类型
[1,2] instanceof Array // true
Object.prototype.toString
3.文档模型DOM（Document Object Model)
当网页被加载时浏览器会创建一个文档对象模型。通过该文档对象模型，可以够改变页面中的 HTML元素、元素的属性、元素的CSS样式。
DOM 将HTML文档呈现为带有元素（元素节点）、属性（属性节点）和文本（文本节点）的树结构（节点树）。
DOM树
节点的属性
nodeName属性: 节点的名称(只读)。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
nodeValue属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
nodeType属性: 节点的类型(只读)。
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
节点的属性2
var fNode=document.getElementsByTagName("div")[0].childNodes[0];
DOM的操作
示例
<!DOCTYPE html>
<html>
<body>
<script>
改变输出流
document.write(Date());
改变 HTML元素的 文本内容
document.getElementById("p1").innerHTML="New text!";
改变属性
document.getElementById("image").src="landscape.jpg";
改变样式
document.getElementById("p2").style.color="blue";
改变className
document.getElementById("p2").className="otherClassName";
显示/隐藏
document.getElementById("p2").style.display="block"
document.getElementById("p2").style.display="none"
重新设置url地址
document.location.href="/index.html"
</script>
</body>
</html>
获取指定元素
通过 id 获取（唯一）
var x=document.getElementById("intro");
通过标签名获取
var y=document.getElementsByTagName("p");
通过name属性获取
var mynode=document.getElementsByName("name") ;
通过类名获取
获取/设置 标签的属性
var text=pNode.getAttribute("title");
pNode.setAttribute("title","hello")
创建并追加元素
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
删除已有元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
事件
示例：
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>
也可以在js中添加事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
示例2：
1. onload 和 onunload 事件会在用户进入或离开页面时被触发。
<body onload="checkCookies()" onunload ="leave()">
2. 当输入内容改变时，获得焦点时，会调用
<input type="text" id="fname" onchange="upperCase()" onfocus="myFunction(this)">
3. 鼠标移动进入或离开时调用
<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>
4. 鼠标点下或松开时调用
<div onmousedown="mDown(this)" onmouseup="mUp(this)" >请点击这里</div>
计时事件（计时）
var t=setTimeout("javascript语句",毫秒);
clearTimeout(t)；
function timedMsg(){
5s后跳出弹框
var t=setTimeout("alert('5 秒！')",5000);
2s后修改元素内容
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
1s后调用函数
var t=setTimeout("timedCount()",1000)
清空计时器
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
4. 浏览器对象模型BOM（Browser Object Model）
- Window 浏览器窗口对象
Window对象的方法
document是window对象的属性之一
window.document.getElementById("header");
等价于
document.getElementById("header");
获取浏览器窗口的宽高（不包括工具栏和滚动条)
var w=window.innerWidth||document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight|| document.body.clientHeight;
获取网页内容高度和宽度
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)offsetHeight = clientHeight + 滚动条 + 边框
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
ele.scrollLeft: 元素位置x-内容视图x，向左滚动了多少
ele.scrollTop:向上滚动了多少
ele.offsetLeft:相对于页面（设置了offsetParent，则相对该属性值）左侧的距离
ele.offsetTop:相对于页面（设置了offsetParent，则相对该属性值）上侧的距离
打开新窗口
window.open([URL], [窗口名称], [参数字符串])
窗口名称命名
由字母、数字和下划线字符组成；相同 name 的窗口只能创建一个；不能包含有空格
为以下3值时特殊：
_blank：新窗口打开
_self：当前窗口打开
_top：跳出框架
var win=window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
关闭当前窗口
window.close()
关闭指定窗口
win.close()
移动当前窗口
window.moveTo()
调整当前窗口的尺寸
window.resizeTo()
window.open的参数3
计时器
创建
var iden=setInterval("clock()",1000) // 1s
或
var iden=setInterval(clock,1000)
销毁
clearInterval(i)
延迟执行
var t=setTimeout("alert('Hello!')",5000);
取消延迟执行
clearTimeout(t);
Screen对象（window.screen对象）
可用的屏幕宽度（像素）
screen.availWidth
可用的屏幕高度（像素）
screen.availHeight
Screen对象
location对象(window.location对象)
返回当前url
location.href
返回url协议（http:// 或 https://）
location.protocol
返回url域名+端口
location.host
返回url域名
location.hostname
返回url端口 （80 或 443）
location.port
返回当前页面的路径和文件名（域名后面的路径）
location.pathname
返回？后的部分
location.search
加载新页面
location.assign("http://www.w3school.com.cn")
重新加载页面
location.reload()
history对象(window.history对象)
历史列表中url数量
var count = window.history.length;
向前一页
history.back() // 相当于go(-1)
向后一页
history.forward() // 相当于go(1)
跳往指定页面 （相对位置，当前为0）
history.go(0)
navigator 浏览器对象(window.navigator 对象)
浏览器代码名的字符串表示
navigator.appCodeName
浏览器名称
navigator.appName
浏览器版本
navigator.appVersion
浏览器所处操作系统平台
navigator.platform
浏览器是否支持cookie
navigator.cookieEnabled
浏览器信息
navigator.userAgent
示例（区分不同浏览器）
function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("B_name:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
5.
Cookie
<html>
<head>
<script type="text/javascript">
function getCookie(c_name){
判断Cookie长度是否大于0
if (document.cookie.length>0){
获取Cookie
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
添加Cookie（名，值，过期天数）
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie(){
username=getCookie('username')
if (username!=null && username!=""){
alert('Welcome again '+username+'!')
}else {
username=prompt('Please enter your name:',"")
if (username!=null && username!=""){
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
图像映射
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
</html>
JavaScript 表单验证
是否已填写所有必填项目
填写是否合法（正则或日期）
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt){
with (field){
if (value==null||value==""){
alert(alerttxt);return false
}else {
return true
}
}
}
function validate_form(thisform){
with (thisform){
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
function validate_email(field,alerttxt){
with (field){
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
