JavaScript 簡介
- JavaScript 是一種可以給網頁增加交互性的編程語言。
- 熟悉 JavaScript 的好方法是“站在其他程序員肩膀上”,即Web 上有大量 JavaScript 代碼,復制一下並稍作修改,就可以供自己使用。
- JavaScript 腳本語言,在 HTML 頁面內容是包圍在 <script> 標簽中,不用使用 type=”text/javascript”屬性。JavaScript 是所有現代瀏覽器以及 HTML5 中默認的腳本語言。
- JavaScript 與 Java 無關,市場營銷。
- JavaScript 的微軟版本稱為 JScript,ASP 中可以使用 JScript 腳本語言。
Hello, World
老習慣,我們第一個 JavaScript 是向瀏覽器窗口輸出“Hello, World!”,腳本代碼(HelloWorld.html)如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Hello, World!</title> <script> function SayHello(){ document.getElementById("myMessage").innerHTML = "Hello, World!"; } </script> </head> <body> <script> document.write("<h1>我們的第一個 JavaScript 程序</h1>"); document.write("<p id=\"myMessage\">哦, 試試下面的按鈕...</p>"); </script> <button type="button" onClick="SayHello()">嘗試一下</button> </body> </html>
Firefox 40.0.2 輸出效果如下圖:
點擊“嘗試一下”按鈕后,<p> 標簽的內容發生了變化,如下圖:
我們看到了 document.getElementById(),這個方法是 HTML DOM 中定義的。
DOM(Document Object Model)文檔對象模型,是用於訪問 HTML 元素的正式 W3C 標准。
JavaScript 的局限性
- 不允許寫服務器上的文件。
- 不能關閉不是由它自己打開的窗口。
- 不能從來自另外一個服務器的已經打開的頁面中讀取信息。
使用外部腳本
也可以把腳本保存在外部文件中。外部文件通常包含被多個網頁使用的代碼,會使站點更容易維護。
外部 JavaScript 文件的擴展名是 .js。
如果需要使用外部文件,請在 <script> 標簽中使用 “src”屬性中設置,如下:
<!doctype html> <html> <head> <script src="myScript.js"></script> </head> <body> </body> </html>
在這個外部腳本演示程序中,script_001.html 中引用了外部文件 script_001.js。
script_001.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>外部腳本的使用</title> <script src="script_001.js"></script> </head> <body> <h1 id="helloMessage"></h1> </body> </html>
script_001.js
// JavaScript Document window.onload = writeMessage; function writeMessage(){ document.getElementById("helloMessage").innerHTML = "Hello, World!"; }
windows.onload 是一個事件處理程序,意思是當窗口完成加載時,運行 writeMessage 函數。