一.JavaScript 基础

1.JS位置
(1)head 部分
<script type="text/javascript">
<!--
document.write("<h1>head部分</h1>")
-->
</script>
Html里面script加入注释的原因是防止老版本浏览器不支持script

(2)body 部分
<script type="text/javascript">
....
</script>

(3)使用外部 JavaScript
<script src="xxx.js">....</script>


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


3.变量
JavaScript 变量名称的规则：
    变量对大小写敏感（y 和 Y 是两个不同的变量）
    变量必须以字母或下划线开始
(1)声明（创建） JavaScript 变量
通过 var 语句来声明 JavaScript 变量
var x;
var carname;
(2)向未声明的 JavaScript 变量赋值
如果所赋值的变量还未进行过声明，该变量会自动声明。
(2)重新声明 JavaScript 变量
如果您再次声明了 JavaScript 变量，该变量也不会丢失其原始值。


4.JavaScript 运算符
(1)运算符 = 用于赋值

(2)JavaScript 算术运算符
运算符     描述                                          例子              结果
+       加                                           x=y+2      x=7
-       减                                           x=y-2      x=3
*       乘                                           x=y*2      x=10
/       除                                           x=y/2      x=2.5
%       求余数(保留整数)   x=y%2      x=1
++      累加                                      x=++y      x=6
--      递减                                      x=--y      x=4

(3)JavaScript 赋值运算符
运算符  例子     等价于  结果
=       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
(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")?"Dear President ":"Dear ";
如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。


6.JavaScript 条件语句
If...Else 语句
在 JavaScript 中，我们可以使用下面几种条件语句：
if 语句
    在一个指定的条件成立时执行代码。
if...else 语句
    在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if...else if....else 语句
    使用这个语句可以选择执行若干块代码中的一个。
switch 语句
    使用这个语句可以选择执行若干块代码中的一个。
Switch 语句   
switch (n) {
    case 1 :
        do 1;
        break;
    case 2 :
        do 2;
        break;
    default :
        do default;
} 


7.JavaScript 消息框
(1)警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert("文本")

(2)确认框
confirm("文本")
例
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
var r = confirm("Press a button!");
if (r == true) {
} else {
}

(3)提示框
prompt("文本","默认值")
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
例
<input type="button" onclick="disp_prompt()" value="显示提示框" />
function disp_prompt() {
    var name = prompt("请输入您的名字", "Bill Gates")
    if (name != null && name != "") {
        document.write("你好！" + name + " 今天过得怎么样？")
    }
}


8.JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
将脚本编写为函数，就可以避免页面载入时执行该脚本。
函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。
(1)定义函数
创建函数的语法：
function 函数名(var1,var2,...,varX){
    code...
}
var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。
注意：
1)无参数的函数必须在其函数名后加括号：
2)别忘记 JavaScript 中大小写字母的重要性。"function" 这个词必须是小写的，否则 JavaScript 就会出错。
3)必须使用大小写完全相同的函数名来调用函数。
例:
<input type="button" value="the input value" onclick="functionName('value')" />
function functionName(value) {
    alert(value);
    return value;
}

(2)return 语句
return 语句用来规定从函数返回的值。
因此，需要返回某个值的函数必须使用这个 return 语句。
例:下面的函数会返回两个数相乘的值（a 和 b）：
function prod(a, b) {
    x = a * b
    return x
}
当您调用上面这个函数时，必须传入两个参数：
product=prod(2,3)
而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。

(3)JavaScript 变量的生存期
本地变量:当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。
您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。
全局变量:如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。
这些变量的生存期从声明它们之后开始，在页面关闭时结束。


9.JavaScript 循环
JavaScript 有两种不同种类的循环：
for
    将一段代码循环执行指定的次数
while
    当指定的条件为 true 时循环执行代码

(1)for 循环
for (var 变量=开始值;变量<=结束值;变量=变量+步进值){
    code;
}
var mycars = new Array()
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)JavaScript Break 和 Continue
有两种可以用在循环中的语句：break 和 continue。
break:使用 break 语句来终止循环。然后继续执行循环之后的代码（如果循环之后有代码的话）。
continue:使用 continue 语句来终止当前的循环，然后从下一个值继续执行。

(5)for...in 语句 (类似Java for each)
语法：
for (变量 in 对象) {
    code;
}
实例:
var x;
var mycars = new Array();
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"

for (x in mycars) {
    document.write(mycars[x] + "<br />")
}


10.JavaScript 事件
JavaScript      事件参考手册
属性                                 当以下情况发生时，出现此事件       FF  N   IE
onabort         图像加载被中断                                             1   3   4
onblur          元素失去焦点                                                  1   2   3
onchange        用户改变域的内容                                        1   2   3
onclick         鼠标点击某个对象                                        1   2   3
ondblclick      鼠标双击某个对象                                        1   4   4
onerror         当加载文档或图像时发生某个错误     1   3   4
onfocus         元素获得焦点                                                  1   2   3
onkeydown       某个键盘的键被按下                                   1   4   3
onkeypress      某个键盘的键被按下或按住                    1   4   3
onkeyup         某个键盘的键被松开                                   1   4   3
onload          某个页面或图像被完成加载                    1   2   3
onmousedown     某个鼠标按键被按下                                   1   4   4
onmousemove     鼠标被移动                                                       1   6   3
onmouseout      鼠标从某元素移开                                        1   4   4
onmouseover     鼠标被移到某元素之上                              1   2   3
onmouseup       某个鼠标按键被松开                                   1   4   4
onreset         重置按钮被点击                                             1   3   4
onresize        窗口或框架被调整尺寸                              1   4   4
onselect        文本被选定                                                       1   2   3
onsubmit        提交按钮被点击                                             1   2   3
onunload        用户退出页面                                                  1   2   3
FF: Firefox, N: Netscape, IE: Internet Explorer

事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件举例：
    鼠标点击
    页面或图像载入
    鼠标悬浮于页面的某个热点之上
    在表单中选取输入框
    确认表单
    键盘按键
注意：事件通常与函数配合使用，当事件发生时函数才会执行。

(1)onload 和 onUnload 某页面或图像加载完成/用户退出页面
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。
例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

(2)onFocus, onBlur 和 onChange 元素获得焦点/元素失去焦点/用户改变域的内容
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
案例:onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。
<input type="text" size="30" id="email" onchange="checkEmail()">

(3)onSubmit 提交按钮被点击
onSubmit 用于在提交表单之前验证所有的表单域。
案例:当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。
checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

(4)onMouseOver 和 onMouseOut 鼠标被移到某元素之上/鼠标从某元素移开
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
案例:使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：
<a href="http://www.w3school.com.cn" onmouseover="alert('An onMouseOver event');return false">
    <img src="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+、Mozilla 1.0、和 Netscape 6 中可用)
    使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)
   
(1)Try...Catch 语句
try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。
语法：
try{
   //在此运行代码
}catch(err){
   //在此处理错误
}
案例:击按钮时调用的函数message() 函数中的 alert() 被误写为 adddlert()。来创造BUG。
用 try...catch 语句捕获到了错误后可以弹出错误信息,或确认框来返回首页
弹出错误信息
function message() {
    try {
        adddlert("Welcome guest!")
    } catch (err) {
        txt = "此页面存在一个错误。\n\n"
        txt += "错误描述: " + err.description + "\n\n"
        txt += "点击OK继续。\n\n"
        alert(txt)
    }
}
或
确认框选择返回首页
function message() {
    try {
        adddlert("Welcome guest!")
    } catch (err) {
        txt = "There was an error on this page.\n\n"
        txt += "Click OK to continue viewing this page,\n"
        txt += "or Cancel to return to the home page.\n\n"
        if (!confirm(txt)) {
            document.location.href = "http://www.w3school.com.cn/"
        }
    }
}

(2)JavaScript Throw 声明
throw 声明的作用是创建 exception（异常或错误）。
可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。
语法： throw(exception)
exception 可以是字符串、整数、逻辑值或者对象。
注意：使用小写字母编写 throw。使用大写字母会出错！
案例:测定变量 x 的值。如果 x 的值大于 10 或者小于 0，错误就会被抛出 (throw)。
这个错误被 catch 的参数捕获后，就会显示出自定义的出错信息。
var x = prompt("Enter a number between 0 and 10:", "")
try {
    if (x > 10)
        throw "Err1"
    else if (x < 0)
        throw "Err2"
} catch (er) {
    if (er == "Err1")
        alert("Error! The value is too high")
    if (er == "Err2")
        alert("Error! The value is too low")
}

(3)JavaScript onerror 事件
使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。
语法：
onerror=handleErr
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
只要页面中出现脚本错误，就会产生 onerror 事件。
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。
你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。
这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
案例:调用message方法时发生错误，产生onerror事件,由事件处理器handleErr打印msg,url,line
onerror = handleErr
var txt = ""

function handleErr(msg, url, l) {
    txt = "There was an error on this page.\n\n"
    txt += "Error: " + msg + "\n"
    txt += "URL: " + url + "\n"
    txt += "Line: " + l + "\n\n"
    txt += "Click OK to continue.\n\n"
    alert(txt)
    return true
}

function message() {
    adddlert("Welcome guest!")
}


12.JavaScript 特殊字符
你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
插入特殊字符
反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。
案例:
var txt="We are the so-called \"Vikings\" from the north."
document.write ("You \& me are singing!")  → You & me are singing!
代码              输出
\'      单引号
\"      双引号
\&      和号
\\      反斜杠
\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 \
("Hello World!")




样式里面很多IE的兼容问题，JS里面的话IE下面就事件需要特殊处理下
其他Dom操作的话也需要注意点就可以了