一.JavaScript 基础

1.JS位置

(1)head部分

<scripttype="text/javascript">

<!--

document.write("<h1>head部分</h1>")

-->

</script>

Html里面script加入注释的原因是防止老版本浏览器不支持script

(2)body部分

<scripttype="text/javascript">

....

</script>

(3)使用外部JavaScript

<scriptsrc="xxx.js">....</script>

2.注释

(1)单行//

(2)多行注释/*开头，以*/结尾

3.变量

JavaScript变量名称的规则：

变量对大小写敏感（y和Y是两个不同的变量）

变量必须以字母或下划线开始

(1)声明（创建）JavaScript变量

通过var语句来声明JavaScript变量

varx;

varcarname;

(2)向未声明的JavaScript变量赋值

如果所赋值的变量还未进行过声明，该变量会自动声明。

(2)重新声明JavaScript变量

如果您再次声明了JavaScript变量，该变量也不会丢失其原始值。

4.JavaScript运算符

(1)运算符=用于赋值

(2)JavaScript算术运算符

运算符描述例子结果

+加x=y+2x=7

-减x=y-2x=3

*乘x=y*2x=10

/除x=y/2x=2.5

%求余数(保留整数)x=y%2x=1

++累加x=++yx=6

--递减x=--yx=4

(3)JavaScript赋值运算符

运算符例子等价于结果

=x=yx=5

+=x+=yx=x+yx=15

-=x-=yx=x-yx=5

*=x*=yx=x*yx=50

/=x/=yx=x/yx=2

%=x%=yx=x%yx=0

(4)用于字符串的+运算符

+运算符用于把文本值或字符串变量加起来（连接起来）。

x=5+5;

document.write(x);

10

x="5"+"5";

document.write(x);

55

x=5+"5";

document.write(x);

55

x="5"+5;

document.write(x);

55

5.JavaScript比较和逻辑运算符

比较和逻辑运算符用于测试true或false。

(1)比较运算符

运算符描述例子

==等于x==8为false

===全等（值和类型）x===5为true；x==="5"为false

!=不等于x!=8为true

>大于x>8为false

<小于x<8为true

>=大于或等于x>=8为false

<=小于或等于x<=8为true

(2)逻辑运算符

例假设x=6以及y=3

运算符描述例子

&&and(x<10&&y>1)为true

||or(x==5||y==5)为false

!not!(x==y)为true

(3)条件运算符

JavaScript还包含了基于某些条件对变量进行赋值的条件运算符。

variablename=(condition)?value1:value2

例子greeting=(visitor=="PRES")?"DearPresident":"Dear";

如果变量visitor中的值是"PRES"，则向变量greeting赋值"DearPresident"，否则赋值"Dear"。

6.JavaScript条件语句

If...Else语句

在JavaScript中，我们可以使用下面几种条件语句：

if语句

在一个指定的条件成立时执行代码。

if...else语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if...elseif....else语句

使用这个语句可以选择执行若干块代码中的一个。

switch语句

使用这个语句可以选择执行若干块代码中的一个。

Switch语句

switch(n){

case1:

do1;

break;

case2:

do2;

break;

default:

dodefault;

}

7.JavaScript消息框

(1)警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert("文本")

(2)确认框

confirm("文本")

例

<inputtype="button"onclick="show_confirm()"value="Showaconfirmbox"/>

varr=confirm("Pressabutton!");

if(r==true){

}else{

}

(3)提示框

prompt("文本","默认值")

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false。

例

<inputtype="button"onclick="disp_prompt()"value="显示提示框"/>

functiondisp_prompt(){

varname=prompt("请输入您的名字","BillGates")

if(name!=null&&name!=""){

document.write("你好！"+name+"今天过得怎么样？")

}

}

8.JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

将脚本编写为函数，就可以避免页面载入时执行该脚本。

函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。

(1)定义函数

创建函数的语法：

function函数名(var1,var2,...,varX){

code...

}

var1,var2等指的是传入函数的变量或值。{和}定义了函数的开始和结束。

注意：

1)无参数的函数必须在其函数名后加括号：

2)别忘记JavaScript中大小写字母的重要性。"function"这个词必须是小写的，否则JavaScript就会出错。

3)必须使用大小写完全相同的函数名来调用函数。

例:

<inputtype="button"value="theinputvalue"onclick="functionName('value')"/>

functionfunctionName(value){

alert(value);

returnvalue;

}

(2)return语句

return语句用来规定从函数返回的值。

因此，需要返回某个值的函数必须使用这个return语句。

例:下面的函数会返回两个数相乘的值（a和b）：

functionprod(a,b){

x=a*b

returnx

}

当您调用上面这个函数时，必须传入两个参数：

product=prod(2,3)

而从prod()函数的返回值是6，这个值会存储在名为product的变量中。

(3)JavaScript变量的生存期

本地变量:当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。

您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

全局变量:如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。

这些变量的生存期从声明它们之后开始，在页面关闭时结束。

9.JavaScript循环

JavaScript有两种不同种类的循环：

for

将一段代码循环执行指定的次数

while

当指定的条件为true时循环执行代码

(1)for循环

for(var变量=开始值;变量<=结束值;变量=变量+步进值){

code;

}

varmycars=newArray()

mycars[0]="宝马"

mycars[1]="奔驰"

mycars[2]="宾利"

for(i=0;i<mycars.length;i++){

document.write(mycars[i]+"<br/>")

}

(2)While循环

while循环用于在指定条件为true时循环执行代码。

while(condition){

code;

}

(3)do...while循环

do...while循环是while循环的变种。

该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为true时，它会继续这个循环。

do{

code;

}

while(condition)

(4)JavaScriptBreak和Continue

有两种可以用在循环中的语句：break和continue。

break:使用break语句来终止循环。然后继续执行循环之后的代码（如果循环之后有代码的话）。

continue:使用continue语句来终止当前的循环，然后从下一个值继续执行。

(5)for...in语句(类似Javaforeach)

语法：

for(变量in对象){

code;

}

实例:

varx;

varmycars=newArray();

mycars[0]="宝马"

mycars[1]="奔驰"

mycars[2]="宾利"

for(xinmycars){

document.write(mycars[x]+"<br/>")

}

10.JavaScript事件

JavaScript事件参考手册

属性当以下情况发生时，出现此事件FFNIE

onabort图像加载被中断134

onblur元素失去焦点123

onchange用户改变域的内容123

onclick鼠标点击某个对象123

ondblclick鼠标双击某个对象144

onerror当加载文档或图像时发生某个错误134

onfocus元素获得焦点123

onkeydown某个键盘的键被按下143

onkeypress某个键盘的键被按下或按住143

onkeyup某个键盘的键被松开143

onload某个页面或图像被完成加载123

onmousedown某个鼠标按键被按下144

onmousemove鼠标被移动163

onmouseout鼠标从某元素移开144

onmouseover鼠标被移到某元素之上123

onmouseup某个鼠标按键被松开144

onreset重置按钮被点击134

onresize窗口或框架被调整尺寸144

onselect文本被选定123

onsubmit提交按钮被点击123

onunload用户退出页面123

FF:Firefox,N:Netscape,IE:InternetExplorer

事件是可以被JavaScript侦测到的行为。

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。

比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。

事件举例：

鼠标点击

页面或图像载入

鼠标悬浮于页面的某个热点之上

在表单中选取输入框

确认表单

键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

(1)onload和onUnload某页面或图像加载完成/用户退出页面

当用户进入或离开页面时就会触发onload和onUnload事件。

onload事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload和onUnload事件也常被用来处理用户进入或离开页面时所建立的cookies。

例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在cookie中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："WelcomeJohnDoe!"。

(2)onFocus,onBlur和onChange元素获得焦点/元素失去焦点/用户改变域的内容

onFocus、onBlur和onChange事件通常相互配合用来验证表单。

案例:onChange事件的例子。用户一旦改变了域的内容，checkEmail()函数就会被调用。

<inputtype="text"size="30"id="email"onchange="checkEmail()">

(3)onSubmit提交按钮被点击

onSubmit用于在提交表单之前验证所有的表单域。

案例:当用户单击表单中的确认按钮时，checkForm()函数就会被调用。假若域的值无效，此次提交就会被取消。

checkForm()函数的返回值是true或者false。如果返回值为true，则提交表单，反之取消提交。

(4)onMouseOver和onMouseOut鼠标被移到某元素之上/鼠标从某元素移开

onMouseOver和onMouseOut用来创建“动态的”按钮。

案例:使用onMouseOver事件的例子。当onMouseOver事件被脚本侦测到时，就会弹出一个警告框：

<ahref="http://www.w3school.com.cn"onmouseover="alert('AnonMouseOverevent');returnfalse">

<imgsrc="w3school.gif"width="100"height="30">

</a>

Html事件列表
一般事件:
onClick HTML:  鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 鼠标双击事件
onMouseDown HTML: 鼠标上的按钮被按下了
onMouseUp HTML:  鼠标按下后，松开时激发的事件
onMouseOver HTML: 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 鼠标移动时触发的事件
onMouseOut HTML:  当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML:  当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

页面相关事件:
onAbort HTML:  图片在下载时被用户中断
onBeforeUnload HTML: 当前页面的内容将要被改变时触发的事件
onError HTML: 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad HTML:  页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove HTML:  浏览器的窗口被移动时触发的事件
onResize HTML:  当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML:  当前页面将被改变时触发的事件

表单相关事件:
onBlur HTML:  当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 当某个元素获得焦点时触发的事件
onReset HTML: 当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 一个表单被递交时触发的事件

滚动字幕事件:
onBounce HTML:  在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 当Marquee元素开始显示内容时触发的事件

编辑事件:
onBeforeCopy HTML:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut HTML: 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus HTML: 当前元素将要进入编辑状态
onBeforePaste HTML: 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate HTML:  当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu HTML: 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy HTML: 当页面当前的被选择内容被复制后触发的事件
onCut HTML: 当页面当前的被选择内容被剪切时触发的事件
onDrag HTML: 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop HTML: 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd HTML:当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter HTML:  当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave HTML:  当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver HTML: 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart HTML:  当某对象将被拖动时触发的事件
onDrop HTML: 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture HTML:  当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste HTML: 当内容被粘贴时触发的事件
onSelect HTML:  当文本内容被选择时的事件
onSelectStart HTML当文本内容选择将开始发生时触发的事件

数据绑定:
onAfterUpdate HTML: 当数据完成由数据源到对象的传送时触发的事件
onCellChange HTML:当数据来源发生变化时
onDataAvailable HTML: 当数据接收完成时触发事件
onDatasetChanged HTML:  数据在数据源发生变化时触发的事件
onDatasetComplete HTML: 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate HTML: 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter HTML:当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit HTML:当前数据源的数据将要发生变化时触发的事件
onRowsDelete HTML:  当前数据记录将被删除时触发的事件
onRowsInserted HTML:  当前数据源将要插入新数据记录时触发的事件

外部事件:
onAfterPrint HTML: 当文档被打印后触发的事件
onBeforePrint HTML: 当文档即将打印时触发的事件
onFilterChange HTML: 当某个对象的滤镜效果发生变化时触发的事件
onHelp HTML: 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange HTML: 当对象的属性之一发生变化时触发的事件
onReadyStateChange HTML: 当对象的初始化属性值发生变化时触发的事件

11.JavaScript捕获错误

有两种在网页中捕获错误的方法：

使用try...catch语句。(在IE5+、Mozilla1.0、和Netscape6中可用)

使用onerror事件。这是用于捕获错误的老式方法。(Netscape3以后的版本可用)

(1)Try...Catch语句

try...catch可以测试代码中的错误。try部分包含需要运行的代码，而catch部分包含错误发生时运行的代码。

语法：

try{

//在此运行代码

}catch(err){

//在此处理错误

}

案例:击按钮时调用的函数message()函数中的alert()被误写为adddlert()。来创造BUG。

用try...catch语句捕获到了错误后可以弹出错误信息,或确认框来返回首页

弹出错误信息

functionmessage(){

try{

adddlert("Welcomeguest!")

}catch(err){

txt="此页面存在一个错误。\n\n"

txt+="错误描述:"+err.description+"\n\n"

txt+="点击OK继续。\n\n"

alert(txt)

}

}

或

确认框选择返回首页

functionmessage(){

try{

adddlert("Welcomeguest!")

}catch(err){

txt="Therewasanerroronthispage.\n\n"

txt+="ClickOKtocontinueviewingthispage,\n"

txt+="orCanceltoreturntothehomepage.\n\n"

if(!confirm(txt)){

document.location.href="http://www.w3school.com.cn/"

}

}

}

(2)JavaScriptThrow声明

throw声明的作用是创建exception（异常或错误）。

可以把这个声明与try...catch声明配合使用，以达到控制程序流并产生精确错误消息的目的。

语法：throw(exception)

exception可以是字符串、整数、逻辑值或者对象。

注意：使用小写字母编写throw。使用大写字母会出错！

案例:测定变量x的值。如果x的值大于10或者小于0，错误就会被抛出(throw)。

这个错误被catch的参数捕获后，就会显示出自定义的出错信息。

varx=prompt("Enteranumberbetween0and10:","")

try{

if(x>10)

throw"Err1"

elseif(x<0)

throw"Err2"

}catch(er){

if(er=="Err1")

alert("Error!Thevalueistoohigh")

if(er=="Err2")

alert("Error!Thevalueistoolow")

}

(3)JavaScriptonerror事件

使用onerror事件是一种老式的标准的在网页中捕获Javascript错误的方法。

语法：

onerror=handleErr

functionhandleErr(msg,url,l)

{

//Handletheerrorhere

returntrueorfalse

}

只要页面中出现脚本错误，就会产生onerror事件。

如果需要利用onerror事件，就必须创建一个处理错误的函数。

你可以把这个函数叫作onerror事件处理器(onerroreventhandler)。

这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的url）、line（发生错误的代码行）。

案例:调用message方法时发生错误，产生onerror事件,由事件处理器handleErr打印msg,url,line

onerror=handleErr

vartxt=""

functionhandleErr(msg,url,l){

txt="Therewasanerroronthispage.\n\n"

txt+="Error:"+msg+"\n"

txt+="URL:"+url+"\n"

txt+="Line:"+l+"\n\n"

txt+="ClickOKtocontinue.\n\n"

alert(txt)

returntrue

}

functionmessage(){

adddlert("Welcomeguest!")

}

12.JavaScript特殊字符

你可以在JavaScript中使用反斜杠来向文本字符串添加特殊字符。

插入特殊字符

反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。

案例:

vartxt="Wearetheso-called\"Vikings\"fromthenorth."

document.write("You\&mearesinging!")→You&mearesinging!

代码输出

\'单引号

\"双引号

\&和号

\\反斜杠

\n换行符

\r回车符

\t制表符

\b退格符

\f换页符

13.JavaScript指导方针

在使用JavaScript进行编码的过程中，其他一些需要了解的重要事项。

(1)JavaScript对大小写敏感

名为"myfunction"的函数和名为"myFunction"的函数是两个不同的函数，同样，变量"myVar"和变量"myvar"也是不同的。

JavaScript对大小写敏感-所以当您创建或使用变量、对象及函数时，请注意字符的大小写。

(2)空格

JavaScript会忽略多余的空格。所以您可以在代码中添加适当的空格，使得代码的可读性更强。下面的两行是等效的：

name="Hege"

name="Hege"

(3)换行

您可以在文本字符串内部使用反斜杠对代码进行折行。

正确

document.write("Hello\

World!")

错误

document.write\

("HelloWorld!")

样式里面很多IE的兼容问题，JS里面的话IE下面就事件需要特殊处理下

其他Dom操作的话也需要注意点就可以了