一、javascript 的简介
javascript 是一种基于对象和事件驱动并相对安全的客户端脚本语言，同时也是一种广泛用于 web 客户端的脚本语言，常用来给 html 添加动态功能，比如响应用户的各种操作。同时javascript 是一种动态。弱类型，基于原型的语言。另外注意的是，javascript 与 java 语言并没有什么直接的联系。
二、html Dom （文档对象模型）
javascript 所做的工作几乎都会涉及文档对象模型（Document Object Model，Dom）—— 用来呈现 web 文档的一组标准化对象集的运用。
DOM 包含用于处理当前文档中各个方面的对象。例如，可以读取表单字段中用户输入的值或者当前页面的文件名。下面有几幅结构图，可参考来理解：
三、javascript 语法
1、基本语法原则
（1）每一个 javascript 语句都以 “；”结束
（2）javascript 是大写写敏感的
（3）在javascript 里支持两种注释。行注释附：“//" ；段注释附"/*…*/”;如下：
// 行注释
/*
这是
段注释
*/
2、访问 DOM 里的元素
（1）使用“点”访问
如：window.document.loginform
如果 loginform 是 网页里的第一个 form 表单，也可以这样访问，其他的类推：
window.document.forms[0]
（2）方括号“[]”访问
1: window['document']['loginform']
2: windows['document']['form'][0]
3、内置对象 window
因为对象 window 是DOM 的顶层对象，所以可以省略不写，如 window.document.loginform 可以写成 document.loginform。
4、javascript 代码的位置
（1）可以直接内嵌在 html 里，<script type="text/javascript"></script>
（2）也可以单独写在 js 文件，之后再对应的 html 里引用即可，<script type="text/javascript" src="…"></script>
如：
1: //example.html
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <title>JavaScript Page</title>
7: <link href="style.css" rel="stylesheet" type="text/css">
8: <script type="text/javascript">
9: window.alert("this page is loading");
10: </script>
11: </head>
12: <body>
13:
14: <button onclick="document.bgColor='red';">Red</button>
15: <button onclick="document.bgColor='white';">White</button>
16:
17: <script type="text/javascript" src="other.js"></script>
18:
19: </body>
20: </html>
21:
22: //other.js
23: document.write("Hello,this is javascript.");
运行效果如下:
附:问题:最先运行哪一个javascript 脚本??
解答:
(1) 在 html 文档里,先执行 <head> 里定义的一组 <script> 标签。无论该内容是嵌入代码或者指向一个 js 文件。因为这些脚本不能在 web 页面上建立输出，所以在这里定义 js 函数的使用时最为适合。
（2）在 html 文档中，随后会执行 <body> 里定义的一组<script> 标签，同时 web 页面下载并显示它。如果在 <body> 里有多个脚本，则按照先后顺序执行。
（3）当事件发生时，事件处理程序被执行。例如，当一个 web 页面的 body 部分被载入时，onload 事件处理程序就被执行。因为 <head> 部分是在所有事件之前载入的，所以在这里定义函数，并在事件处理程序中使用它们。
四、javascript 里的伪协议
可以尝试在浏览器的地址栏里输入：”javascript:alert(“Hello,javascript”)”，你会看到如下效果：
当中前缀“javascript”就叫做伪协议，类似于 http，ftp等，这种方式提供了一种非常简单方式来测试浏览器是够支持 javascript。类似的，也可以应用与一个超链接里，如下：
1: //其他代码省略
2: <body>
3:
<a href="javascript:alert('Hello world!');">Say hello
4: </body>
怎么说呢，上面这种超链接使用的并不好，因为当浏览器不支持 js 时，这个超链接就会失效。一种比较好的代替方式是使用属性 href ，指向一个新的页面，用来来完成 js 的功能，如下：
1: <body>
2:
<a href="hello.html;" onclick="alert('hello world'); return false;">Say hello
3: </body>
如上，用户点击“Say hello”时，如果浏览器支持 js，则会如上文谈到的弹出一个方框，“return false”表明忽略超链接的默认行为。当浏览器不支持 js 时，回转到 hello.html 页面。
四、javascript 里的对象、方法与参数
其实 javascript 里的对象、方法与参数的定义和 java 语言的定义参不多，下面通过一个 Demo 来简单讲解一下：
1: //html 文档
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <title>JavaScript Page</title>
7: <link href="style.css" rel="stylesheet" type="text/css">
8: <script type="text/javascript">
9: window.alert("The page is loading");
10: </script>
11: </head>
12: <body>
13:
14: <button onclick="document.bgColor = 'red';">Red</button>
15: <button onclick="document.bgColor = 'white';">white</button>
16: <button onclick="document.bgColor = 'blue';">blue</button>
17: <button onclick="document.bgColor = 'black';">black</button>
18:
19:
20: <script type="text/javascript" src="other.js"></script>
21: </body>
22: </html>
23:
24: //other.js 如下
25: document.write("Hello,this is javascript.");
（1）方法：
在Demo 里用到里了两个方法，window.alert( msg),document.write(msg)。方法 document.write("Hello,this is javascript.") 会在页面弹出一个警告框，并暂停处理下面的其下的代码，直到用户点击 “ok” 按钮之后才会就行执行。
方法document.write("Hello,this is javascript.") 用来在 web 页面里写入一段文本，常用来写入一些动态的文本，如日期时间等。
（2）参数
在方法内部里填写的就是参数了，如上的 msg 就是alert的参数，方法与参数的语法格式如下：
object.method(argument1, argument2);
五、事件处理
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
| 事件句柄 | 支持的html元素 | 描述 |
|---|---|---|
onblur |
a, area, button, input, label, select, textarea |
元素失去焦点 |
onchange |
input, select, textarea |
元素的内容的发生改变 |
onclick |
所有 html 元素， 除了applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标点击某个元素 |
ondblclick |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标双击某个元素 |
onfocus |
a, area, button, input, label, select, textarea |
元素获得焦点 |
onkeydown |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
某个键盘键被按下 |
onkeypress |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
某个键盘键被按住或者按下 |
onkeyup |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
某个键盘键被松开 |
onload |
frameset ，body |
某个页面或图像被完全加载 |
onmousedown |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标按键被按下 |
onmousemove |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标移动 |
onmouseout |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标从某元素离开 |
onmouseover |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标停在某个元素上 |
onmouseup |
所有 html 元素， 除了 applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title |
鼠标按键被松开 |
onreset |
form |
重置按钮被点击 |
onselect |
input, textarea |
文本被选定 |
onsubmit |
form |
提交按钮被点击 |
onunload |
frameset |
用户退出页面 |
onunload |
body |
the document has been removed |
另外谈一下一个经常被使用的方法 getElementById（）
| 描述 | 语法格式 | 参数 |
|---|---|---|
| 用来访问或操作某个html 元素 | document.getElementById("id") |
参数“id”是必须的要的，指向 html 元素的id |
Demo：
1:
2: <button onclick="document.getElementById('divRed').bgColor = 'red';">red</button>
3: <button onclick="document.getElementById('divOrange').bgColor = 'orange';">orange</button>
4: <button onclick="document.getElementById('divGreen').bgColor = 'greebn';">green</button>
5: <button onclick="document.getElementById('divBlue').bgColor = 'blue';">blue</button>
6:
7: <table>
8: <tr id="divRed">Red
9: <tr id="divOrange">Orange
10: <tr id="divGreen">Green
11: <tr id="divBlue">Blue
12:
