JavaScript 簡介

JavaScript 是什麼？

JavaScript 是一種廣泛應用於用戶端網頁（瀏覽器）開發的腳本語言，如用來為HTML 網頁新增動態功能，例如回應使用者的各種操作等。

JavaScript 是一種基於物件(Object)和事件驅動(Event Driven)並具有安全效能的腳本語言，大部分情況下是由網頁瀏覽器來執行的。

JavaScript 是美國Sun 公司的註冊商標，目前Javascript 的最新版本為1.9 版，遵循Ecma 國際（前身為歐洲電腦製造商協會）的ECMA-262標準（即ECMAScript），該版本還在不斷發展中。

JavaScript 特性

腳本編寫語言

JavaScript 是一種腳本語言，它採用小程式段的方式實作程式設計。就像其它腳本語言一樣，JavaScript 是一種解釋性語言，在瀏覽器執行的時候被逐行的翻譯。

基於物件的語言

JavaScript 是一種基於物件的語言，同時也可以看作是物件導向的，這意味著它能運用自己已經創建的物件。因此，許多功能可以來自於腳本環境中物件的方法與腳本的互動。

簡單性

要使用了編寫JavaScript 是非常簡單的，您不需要安裝特定的開發環境，只需要一個簡單的記事本即可編寫JavaScript 腳本。它具有基本的程式語法和語言結構以及弱資料類型，而這些都是很容易學習和使用的。

安全性

JavaScript 是一種安全性語言，它不允許存取本地的硬碟，並且不能將資料存入到伺服器上，不允許對網頁文件進行修改和刪除，只能透過瀏覽器實現資訊瀏覽或動態交互，從而有效地防止資料的遺失。

動態性

JavaScript 是動態的，它可以直接對使用者的輸入做出回應，無須經過Web 服務程序。它對使用者的反映回應，是採用以事件驅動的方式進行的。所謂事件驅動，是指在網頁中執行了某種操作所產生的動作，就稱為「事件」(Event)：例如按下滑鼠、移動視窗、選擇選單等都可以視為事件。當事件發生後，可能會引起對應的 JavaScript 事件回應。

###跨平台性###############JavaScript 是由網頁瀏覽器來執行，與作業系統環境無關，只要能執行瀏覽器的計算機，並支援JavaScript 的瀏覽器就可正確執行。 ############

直接寫入HTML 輸出

<html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
  <p>...</p>
</body>
</html>

#對事件的反應

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
  <button type="button" onclick="alert('你好!')">点我!</button>
</body>
</html>

改變HTML 內容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
    <p id="demo">
    内容。
    </p>
    <script>
    function myFunction()
    {
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
    }
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

改變HTML 圖片

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
    <script>
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
     {
      element.src="/images/pic_bulboff.gif";
      }
    else
       {
      element.src="/images/pic_bulbon.gif";
       }
    }
    </script>
    <img id="myimage" onclick="changeImage()"
    src="/images/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡查看效果</p>
</body>
</html>

改變HTML 樣式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">
改变 HTML 的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="blue";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

驗證輸入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2) 
     {alert(alerttxt);return false}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
     {email.focus();return false}
    }
    }
    </script>
</head>
<body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit"> 
    </form>
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear