了解JavaScript(1)- Hello World


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 輸出效果如下圖:

20150825003

點擊“嘗試一下”按鈕后,<p> 標簽的內容發生了變化,如下圖:

20150825004

我們看到了 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 函數。


示例下載

HelloWorld.RAR


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM