標籤：不同 刪除 onclick meta 代碼 ons 變數 方法表 資訊處理
前言：前面學習了html和css的基本使用，今天開始學習JavaScript的使用。
什麼是JavaScriptJavaScript是一種基於對象(Object)和事件驅動(Event Driven)並具有安全效能的指令碼語言。使用它的目的是與 HTML超文字標記語言 (HTML)、Java 指令碼語言（Java小程式）一起實現在一個Web頁面中連結多個對象，與Web客戶互動 作用。從而可以開發用戶端的應用程式等；
具有以下幾個基本特點：
指令碼編寫語言
JavaScript是一種指令碼語言，它採用小程式段的方式實現編程。像其它指令碼語言一樣,JavaScript同樣已是一種解 釋性語言，它提供了一個易的開發過程。它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程式運行過程 中被逐行地解釋。它與HTML標識結合在一起，從而方便使用者的使用操作。
基於對象的語言
JavaScript是一種基於對象的語言，同時以可以看作一種物件導向的。這意味著它能運用自己已經建立的對象。因 此，許多功能可以來自於指令碼環境中對象的方法與指令碼的相互作用。
簡單性
JavaScript的簡單性主要體現在：首先它是一種基於Java基本語句和控制流程之上的簡單而緊湊的設計, 從而對於 學習Java是一種非常好的過渡。其次它的變數類型是採用弱類型，並未使用嚴格的資料類型。
安全性
JavaScript是一種安全性語言，它不允許訪問本地的硬碟，並不能將資料存入到伺服器上，不允許對網路文檔進 行修改和刪除，只能通過瀏覽器實現資訊瀏覽或動態互動。從而有效地防止資料的丟失。
動態性
JavaScript是動態，它可以直接對使用者或客戶輸入做出響應，無須經過Web服務程式。它對使用者的反映響應， 是採用以事件驅動的方式進行的。所謂事件驅動，就是指在首頁(Home Page)中執行了某種操作所產生的動作，就稱為“事件”(Event)。比如按下滑鼠、移動視窗、選擇菜單等都可以視為事件。當事件發生後，可能會引起相應的事件響應。
跨平台性
JavaScript是依賴於瀏覽器本身，與作業環境無關，只要能運行瀏覽器的電腦，並支援JavaScript的瀏覽器就 可正確執行。從而實現了“編寫一次，走遍天下”的夢想。 實際上JavaScript最傑出之處在於可以用很小的程式做大量的事。無須有高效能的電腦，軟體僅需一個文書處理軟 件及一瀏覽器，無須WEB伺服器通道，通過自己的電腦即可完成所有的事情
基於上面的解釋我們先來編寫一個JavaScript程式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>這是一個JavaScript小程式</title> <script language="JavaScript"> alert(‘這是一個JavaScript小程式‘) </script></head><body></body></html>
根據上面的例子可以看出，JavaScript如同HTML標識語言一樣， JavaScript程式碼是一些可用文書處理軟體瀏覽的文本，它在描述頁面的HTML相關地區出現。 JavaScript代碼由 <Script Language ="JavaScript">...</Script>說明。在標識<Script Language ="JavaScript">...</Script>之間就可加入JavaScript指令碼。
JavaScript基礎資料型別 (Elementary Data Type)JavaScript指令碼語言同其它語言一樣，有它自身的基礎資料型別 (Elementary Data Type)、運算式和算術運算子以及程式的基本架構結構。 JavaScript提供了四種基本的資料類型用來處理數字和文字, 而變數提供存放資訊的地方, 運算式則可以完成較複雜的 資訊處理。
1、基礎資料型別 (Elementary Data Type)在JavaScript中四種基本的資料類型：數值（整數和實數）、字串型（用“”號或‘’括起來的字元或數值）、布爾 型（使True或False表示）和空值。在JavaScript的基本類型中的資料可以是常量，也可以變數。由於JavaScript采 用弱類型的形式，因而一個資料的變數或常量不必首先作聲明，而是在使用或賦值時確定其資料的類型的。當然也可以 先聲明該資料的類型，它是通過在賦值時自動說明其資料類型的。
2、常量整型常量
JavaScript的常量通常又稱字面常量，它是不能改變的資料。其整型常量可以使用十六進位、八進位和十進位表示其值。
實型常量
實型常量是由整數部分加小數部分表示，如12.32、193.98 。可以使用科學或標準方法表示：5E7、4e5等。布爾值 布爾常量只有兩種狀態：True或False。 它主要用來說明或代表一種狀態或標誌，以說明操作流程。它與Ｃ＋＋是不一 樣的,Ｃ＋＋可以用１或０表示其狀態,而JavaScript只能用True或False表示其狀態。
字元型常量
使用單引號（‘）或雙引號（“）括起來的一個或幾個字元。如 "This is a book of JavaScript " 、"3245" 、"ewrt234234" 等。空值 JavaScript中有一個空值null,表示什麼也沒有。如試圖引用沒有定義的變數,則返回一個Null值。特殊字元 同Ｃ語言一樣，JavaScript中同樣以有些以反斜線（／）開頭的不可顯示的特殊字元。通常稱為控制字元。
3、變數變數的主要作用是存取資料、提供存放資訊的容器。對於變數必須明確變數的命名、變數的類型、變數的聲明及其變 量的範圍。
變數的命名
JavaScript中的變數命名同其電腦語言非常相似，這裡要注意以下兩點：
變數的類型 在JavaScript中，變數可以用命令Var作聲明:例如var name=‘whoislcj‘;在JavaScript中，變數以可以不作聲明，而在使用時再根據資料的類型來確其變數的類型: 例如name=‘whoislcj‘
變數的聲明及其範圍
JavaScript變數可以在使用前先作聲明，並可賦值。通過使用var關鍵字對變數作聲明。對變數作聲明的最大好處就是 能及時發現代碼中的錯誤；因為JavaScript是採用動態編譯的，而動態編譯是不易發現代碼中的錯誤，特別是變數命 名的方面。 對於變數還有一個重要性──那就是變數的範圍。在JavaScript中同樣有全域變數和局部變數。全域變數是定義在所有 函數體之外，其作用範圍是整個函數；而局部變數是定義在函數體之內，只對其該函數是可見的，而對其它函數則是 不可見的。
運算式和運算子 １、運算式在定義完變數後，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常又叫稱一個叫運算式來完成， 可以說它是變數、常量、布爾及運算子的集合，因此運算式可以分為算術表述式、字串運算式、賦值運算式以及布爾表達 式等
２、運算子運算子完成操作的一系列符號，在JavaScript中有算術運算子，如＋、 -、 *、 /等；有比較子如!＝、＝＝等; 有邏 輯布林運算子如！（取反）、|、||; 有字串運算如＋ 、 ＋＝等。
舉例說明一下
<script language="JavaScript"> document.write("<div><p>"+name+"</p></div>"); var x,y; x=5; y=10; function plus(x,y) { return x+y; } var plusResult = plus(x, y); if(plusResult>15){ document.write("<div><p>x+y>"+ 15+"</p></div>"); }else{ document.write("<div><p>x+y="+ plusResult+"</p></div>"); }</script>JavaScript程式構成
JavaScript指令碼語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。
一、程式控制流程if條件陳述式
For迴圈語句
while迴圈
break和continue語句
綜合舉例說明一下
<script language="JavaScript"> var maxCount = 5; var list = new Array(); if (maxCount >= 5) { for (var i = 0; i < maxCount; i++) { list.push(i); } while (list.length > 0) { var temp = list.pop(); document.write("<div><p></p>temp=" + temp + "</p></div>"); switch (temp) { case 0: document.write("<div><p></p>第一行</p></div>"); break; case 1: document.write("<div><p></p>第二行</p></div>"); break; case 2: document.write("<div><p></p>第三行</p></div>"); break; case 3: document.write("<div><p></p>第四行</p></div>"); break; case 4: document.write("<div><p></p>第五行</p></div>"); break; } } }</script>二、函數
函數為程式設計人員提供了一個豐常方便的能力。通常在進行一個複雜的程式設計時，總是根據所要完成的功能， 將程式劃分為一些相對獨立的部分，每部分編寫一個函數。從而，使各部分充分獨立，任務單一，程式清晰，易懂、易 讀、易維護。 JavaScript函數可以封裝那些在程式中可能要多次用到的模組。並可作為事件驅動的結果而調用的程式。從 而實現一個函數把它與事件驅動相關聯。這是與其它語言不樣的地方。
１、JavaScript函數定義
Function 函數名 （參數,變元）{ 函數體;. Return 運算式; }
說明：
２、函數中的形式參數
在函數的定義中，我們看到函數名後有參數表，這些參數變數可能是一個或幾個。那麼怎樣才能確定參數變數的個 數呢？在JavaScript中可通過arguments .Length來檢查參數的個數。
<script language="JavaScript"> function dealData(srcData, desData) { var number = arguments.length; return srcData + desData; }</script>三、事件驅動及事件處理
１、基本概念
JavaScript是基於對象(object-based)的語言。這與Java不同,Java是物件導向的語言。而基於對象的基本特 征，就是採用事件驅動(event-driven)。它是在用形介面的環境下，使得一切輸入變化簡單化。通常滑鼠或熱鍵的動作 我們稱之為事件（Event），而由滑鼠或熱鍵引發的一連串程式的動作，稱之為事件驅動（Event Driver）。而對事件 進行處理常式或函數，我們稱之為事件處理常式（Event Handler）。
２、事件處理常式
在JavaScript中對象事件的處理通常由函數(Function)擔任。其基本格式與函數全部一樣，可以將前面所介紹的 所有函數作為事件處理常式。 格式如下：
function 事件處理名（參數表）{ 事件處理語句集；……
}
３、事件驅動
JavaScript事件驅動中的事件是通過滑鼠或熱鍵的動作引發的。它主要有以下幾個事件：
（１）單擊事件onClick
當使用者單擊滑鼠按鍵時，產生onClick事件。同時onClick指定的事件處理常式或代碼將被調用執行。
<script language="JavaScript"> function submitUserData() { }</script><input type="submit" onclick="submitUserData()"/>
（２）onChange改變事件
當利用text或texturea元素輸入字元值改變時發該事件，同時當在select表格項中一個選項狀態改變後也會引 發該事件。
<script language="JavaScript"> function desTextAreaChanged() { var userTextArea = document.getElementById("userDes"); var userDesDiv=document.getElementById("userDesDiv"); userDesDiv.innerHTML="<div><p>" + userTextArea.value + "</p></div>"; }</script><div><textarea name="userDes" id="userDes" cols="50" rows="15" style="margin-top: 5pt" onchange="desTextAreaChanged()"/></textarea></div><div id="userDesDiv"></div>
（３）選中事件onSelect
當Text或Textarea對象中的文字被加亮後，引發該事件。
（４）獲得焦時間點事件onFocus
當使用者單擊Text或textarea以及select對象時，產生該事件。此時該對象成為前台對象。
（５）失去焦點onBlur
當text對象或textarea對象以及select對象不再擁有焦點、而退到後台時，引發該檔案，他與onFocas事件是 一個對應的關係。
（６）載入檔案onLoad
當文檔載入時，產生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，並用一個變數為其 賦值，使它可以被原始碼使用。
（７）卸載檔案onUnload
當Web頁面退出時引發onUnload事件，並可更新Cookie的狀態。
總結：今天學習了JavaScript的基礎知識。後續學習一下更多相關JavaScript的知識。
Hybrid App開發之JavaScript基礎
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
