首頁 > 開發者 > JavaScript
HTML要想使用JavaScript，首先自己要擁有它，有了才可以用，就好像我們學習一樣，先要認，後才知，好了廢話不多說了，下面進入這個問題的解答過程。
JavaScript在HTML的存在方式JavaScript在HTML中存在的方式有兩種，一種是直接存在，一種是間接引用。這兩種方式的利弊就不多講了，都知道，只想說的就是具體的實現。
直接存在就是直接在HTML文檔中寫上相應的javascript代碼，具體如下：
<html><head><!-- 本文檔採用的編碼方式為utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>文檔的標題</title><script language="javascript" type="text/javascript">function Say(){var strWord="Hello World!";alert(strWord);}Say();</script></head><body></body></html>
間接存在
就是在HTML文檔中引入相應的js檔案，具體如下：
<!-- html文檔裡的內容 --><html><head><!-- 本文檔採用的編碼方式為utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>文檔的標題</title><script language="javascript" type="text/javascript" src="Common.js"><!-- 這裡裡面不寫其他的任何東西，因為裡面存放的就是Common.js檔案裡的代碼，雖然現在我們看不見 --></script></head><body></body></html>//下面是Common.js文檔中的代碼function Say(){var strWord="Hello World!";alert(strWord);}alert("aaa");
使用JavaScript
JavaScript的使用分為兩種方式，一種是直接使用，另一種就是通過事件機制使用
直接使用HTML中的javascript代碼塊會讓瀏覽器的控製程序交給相應的javascript解譯器去完成，如果是自訂的函數，javascript是不會將其執行的，除非我們在javascript代碼塊中直接調用了該函數，如：“直接存在”代碼中的Say()函數一樣，處理函數外，其他的凡在javascript代碼塊中存在的javascript語句，都會被直接解釋並執行。
間接使用針對javascript中的函數(自訂和系統內建)說的，通過javascript的事件機制實現，其事件的具體體現就是HTML為響應這個功能而在標籤中添加的一些屬性，其描述的是發生在html元素上的某些行為。具體的事件如：
下面代碼是HTML中間接使用javascript的樣本，通過事件來完成：
<html><head><!-- 本文檔採用的編碼方式為utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>文檔的標題</title><script language="javascript" type="text/javascript">function Say(){var strWord="自訂函數的間接使用";alert(strWord);}//Say();</script></head><!-- 一個事件可以對應多個函數，直接在分號後面寫上:函數名();就可以了 --><input type="button" value="內建函式" onclick="javascript:alert('內建函式的間接使用');" /><input type="button" value="自訂函數" onclick="javascript:Say();"<body></body></html>
JavaScript的文法基礎
資料類型資料類型包括：字串，數字，數組，布爾，對象，null，Undefined
JavaScript中的資料類型沒有相應的關鍵字，只能通過其值的形式來代表這種資料類型，所以稱JavaScript是一種弱類型語言，所以，我們在聲明變來的時候，最好給其賦上相應的值，要不然，電腦不知道這個變數代表什麼資料類型，更要命的是，如果我們在沒有賦初值的情況使用該變數，那麼其結果達不到我們的預期結果。
下面通過代碼來說明一下如何確定一個變數的資料類型。字串：var strName ="";或者var strName;strName=""; 數字：var intCount=0;var floatCount=0.0; 數組：var arr=new Array();arr(0)="adsf"; 布爾：var flag = true;
類型轉化類型轉化分為二種：隱式轉換和顯示轉換。
隱式轉換：運算式中包含不同類型資料則在計算過程中會進行隱式類型轉換，具體的如下。數字 + 字串：數字轉換為字串；數字 + 布爾值：true轉換為1，false轉換為0；字串 + 布爾值：布爾值轉換為字串true或false。
顯示類型轉換：顯示類型用到的函數如下。函數parseInt()：強制轉換成整數，例：parseInt("3.14")等於3；函數parseFloat()：強制轉換成浮點數，例：parseFloat("3.14")等於3.14；函數eval()：將字串強制轉換為運算式並返回結果，例：eval("1+2")等於3，eval("1<2")等於true。
運算子算術運算子：+(可作為字串的串連運算子)，-，*，/，++，--，%(取餘)；賦值運算子：=，+=等；關係運算子：==，!=，===(嚴格等於)，>，<，>=，<=；邏輯運算子：&&，||，！。其他的不說了，具體的也不講了，自己下去試試就知道了。
塊結構順序結構順序結構就是單條的語句連續的集合。break；continue；等等單條的語句。順序結構無處不在，單條語句也可以稱為順序結構。
選擇結構if…else（二選一）格式
//可以嵌套if—else；可以直有if；可以省略{},但if或else之作用於其後一語句if(運算式){//運算式為真執行的代碼}else{//運算式為假執行的代碼}
switch…case(多選一)格式
switch(運算式){ case 匹配1: 語句……;break; case 匹配2: 語句……;break; default://運算式的結果和所有匹配值沒有對上時，就會執行該塊代碼}迴圈結構
for格式
for(初始條件;判斷條件;每次迴圈後動作){ //迴圈代碼塊}
while格式
while(判斷條件){ //迴圈代碼塊}
do……while格式
do{ //第一次，先執行，後判斷}while(判斷條件)
for……in(遍曆數組)
var myArr= new Array("0","1","2");for(var index in myArr){ alert(myArr[index]);}異常處理結構
try……catch……finnally
try{ //手動拋出一個異常 throw new Error("自訂錯誤資訊提示！"); }catch(ex){ //顯示異常錯誤資訊提示 alert("錯誤：" + ex.message);}finally{ alert("無論是否抓到異常都執行該塊的代碼！");}函數
通用的格式，其他的在其物件導向的特點中講解
//方法一：function 函數名(){ //這種方法可以作為“函數”的私人方法}//方法二：var fMethod = function(){ //此時變數名fMethod就是該方法的變數名(不包含括弧)，方法一和方法二的功能是一樣的 //這種方法也可以作為“函數”的私人方法}//方法三：fMethod = function(){ //此方法變數名fMethod就是該方法的變數名(不包括括弧),這種方法作為“函數”的內部方法 //此函數為全域函數，可以作為“函數”內的一個方法，但是沒有意思，其不具有封裝性，外界可以直接通過它的名字就可以訪問到他}//方法四：this.fMethod = function(){ //此方法運用了封裝的技術，this指該函數的對象，也就是說外界不能直接存取到它，需要“對象”才可以}
注意：函數中會有一個隱含的arguments對象來儲存函數的參數，arguments就是一個數組，我們不需要再在函數中聲明參數了，使用參數時，直接往裡面傳送就行了。也就是說，functiona()和functiona(x,y)兩個函數的定義其實是一個函數的定義，我們的參數完全不必用；使用函數，當需要往裡面傳參數的時候，就直接傳就行，當要找到那些傳進去的參數時，就直接使用aruments數組(這個不用我們定函數的時候，聲明這個變來那個，是系統自動給我們提供的)
我們在進行編程的時候，都是先編寫一個函數，然後，那個地方需要的時候，我們就調用它，先編寫的那個函數就是一個模板，不會自動執行，只有當我們調用它的時候他才會執行，ok，知道這個後，我們在看JavaScript，在JavaScript中的函數有個很大的特點，就是可以實現嵌套，就是我A函數除了可以有些變數外，裡面還可以有B函數，因為這個機制，JavaScript就可以實現物件導向的封裝特性，另外，JavaScript中有種變數可以存放函數這麼一個東西，相應於函數指標，也就是說A函數有一個變數，這個變數時之前定義的B函數，這樣，A函數就可以通過這個變數實現對B所有方法和變數的繼承，當然，在A函數也可以通過這個變數把B函數中的函數改變一下，這樣就是先了重寫的機制，當然，函數中也可以實現重載的機制。在這段話的描述中，我們說的那個“函數（A）”和我們物件導向的類差不多，但是，又不是類，不知道他具體叫什麼，知道它的機制就行，我們可以把這個“函數”叫做“類”，在這裡需要注意的時候，這個“函數”也可以當成一般的函數那樣被調用，上面說到的那個“變數（指向其他函數）”，我們稱它為“對象”，好了，具體的不多說了，下面我們看看JavaScript到底怎麼實現了物件導向的封裝，繼承和多態的機制。
封裝封裝使方法和變數具有了一定的界限，達到一種不是任何“東西”說想用就可以用的目的，使用他們時需要通過“門衛”才可以用，這樣使的資料安全性(設想成千上萬個無相關的函數都可以訪問這些變數，這個隱患是多麼的大)大大提供。javascript通過“函數”來實現。
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>封裝測試</title><script language="javascript" type="text/javascript">function Human(name){// 私人屬性 var _name = "qingshan";/* this通常指向的是我們正在執行的函數本身 具有封裝性的公有屬性，對象名.strname 不能strname="青山"這麼定義，這樣外界就可以直接調用了strname，注意雖訪問無限制，但是其生存期受限*/this.strname="qingshan";// 私人方法 function setName() //可轉化為 var setName = function(){_name = name;strname=_name;alert("私人方法，用於設定姓名！");}/* 具有封裝性的公有方法 對象名.sayHello()不能sayHello = function()這樣定義，這樣的話，當他存在後，外界就可以直接sayHello()這樣的調用 */this.sayHello = function(){alert("調用共有方法：Hello, my name is " + strname);}// 類比建構函式，它就是一個私人方法function constructor(){alert("調用建構函式");setName();alert("建構函式調用結束");} //使用定義的函數constructor();//return this;}// 增加類的靜態方法 staticMethod是靜態方法的名稱，可以隨意變Human.staticMethod = function(){alert("通過‘類’直接調用靜態方法");}// 通過原型(prototype)增加公有方法Human.prototype.sayGoodbye = function(){alert("通過原型調用共有方法：Goodbye, " + strname);} // 當成類來使用var m_human = new Human("青山");m_human.sayHello();//m_human.setName();無法調用m_human.sayGoodbye();// 調用類的靜態方法Human.staticMethod();// 直接當成函數使用Human("青山");</script></head><body></body></html>
繼承
對於之前的描述繼承的機制其實不是一種真正的機制，真正的是使用原型鏈的形式弄，在這裡需要知道的是，function函數的對象裡面有一個prototype屬性，這個屬性裡面可以存放其父的引用，我們在定義了一個function的對象後，當使用這個對象的一個方法的時候，它會現在自己的返回內進行尋找看看有沒有相應的方法，如果沒有，系統會順著prototype的引用往父函數中尋找相應的尋找，依次類推，知道找到為止，下面的代碼說的是通過原型鏈的方法進行繼承
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>繼承測試</title><script language="javascript" type="text/javascript">//定義父function Father(){//定義共有屬性this.name ="";this.age = 0;}//通過原型的方式定義共有方法Father.prototype.setName = function(name){this.name = name;}Father.prototype.setAge = function(age){this.age=age;;}Father.prototype.sayHello = function(){alert("父類中的sayHello()方法調用結果：" + this.name + "；" + this.age);}//定義子function Son(name,age){//當Son中沒有相應的方法時，系統會順著prototype中的引用，尋找父類中的prototype方法this.setName(name);this.setAge(age);}//繼承Son.prototype=new Father();//覆蓋父類中的sayHello方法Son.prototype.sayHello = function(){alert("子類中的sayHello()方法調用結果：" + this.name + ";" + this.age);}//測試var c=new Son("青山（子類）",20);c.sayHello();</script></head><body></body></html>
多態
多態的實現包括方法的重載和重寫，關於重寫，上面繼承中已經有了，下面唯寫一個關於重載的執行個體，因為javascript是弱類型語言，其變數只有在輸入的情況下才可以確定其類型，根據這個特點，我們可以實現其多態，具體如下：
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>多態</title><script language="javascript" type="text/javascript">function SayWord(wordType){// 通過typeof函數，判定不同類型的參數。if (typeof(wordType)=="string")alert("我是：string");else if (typeof(wordType)=="number")alert("我是：number");elsealert("我是：others");}//測試SayWord("a");SayWord(12);SayWord(true);</script></head><body></body></html>
閉包
閉包就是函數的嵌套，通過內建函式(閉包)讀取，外部函數裡面的資料。閉包可以讀取外部函數內的變數；閉包使讀取的外部變數的那個值始終保持在記憶體中。
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
