Technorati 标签: 

一、javascript 的简介

    javascript 是一种基于对象和事件驱动并相对安全的客户端脚本语言，同时也是一种广泛用于 web 客户端的脚本语言，常用来给 html 添加动态功能，比如响应用户的各种操作。同时javascript 是一种动态。弱类型，基于原型的语言。另外注意的是，javascript 与 java 语言并没有什么直接的联系。

二、html Dom （文档对象模型）

    javascript 所做的工作几乎都会涉及文档对象模型（Document Object Model，Dom）—— 用来呈现 web 文档的一组标准化对象集的运用。

    DOM 包含用于处理当前文档中各个方面的对象。例如，可以读取表单字段中用户输入的值或者当前页面的文件名。下面有几幅结构图，可参考来理解：

image 

image

三、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.");

    运行效果如下:

image

image

    附:问题:最先运行哪一个javascript 脚本??

    解答:

    (1) 在 html 文档里,先执行 <head> 里定义的一组 <script> 标签。无论该内容是嵌入代码或者指向一个 js 文件。因为这些脚本不能在 web 页面上建立输出，所以在这里定义 js 函数的使用时最为适合。

   （2）在 html 文档中，随后会执行 <body> 里定义的一组<script> 标签，同时 web 页面下载并显示它。如果在 <body> 里有多个脚本，则按照先后顺序执行。

   （3）当事件发生时，事件处理程序被执行。例如，当一个 web 页面的 body 部分被载入时，onload 事件处理程序就被执行。因为 <head> 部分是在所有事件之前载入的，所以在这里定义函数，并在事件处理程序中使用它们。

四、javascript 里的伪协议

image

    可以尝试在浏览器的地址栏里输入：”javascript:alert(“Hello,javascript”)”，你会看到如下效果：

image

    当中前缀“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 Event Handlers
事件句柄 支持的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（）

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: