JQuery製做網頁—— 第一章 JavaScript基礎

一、 JavaScript（弱類型語言）：是一種描述性語言，也是一種基於對象（Object）和事件驅動(Event Driven)的,並具備安全性能的腳本語言。

特色：一、主要用來在HTML頁面中添加交互行爲。          2、是一種腳本語言，語法和Java相似。          3、通常用於編寫客戶端的腳本。          4、是一種解釋性語言，邊執行邊解釋。

二、JavaScript的組成：

組成：一、ECMAScript標準：規定了腳本語言的標準，主要描述：語法、變量和數據類型、運算符、邏輯控制語句、關鍵字、保留字、對象，是一個描述，規定了語言腳本的全部屬性、方法和對象的標準，在使用web客戶端腳本語言編碼時必定要遵照此標準；          2、瀏覽器對象模型（Browser Object Model）（BOM）：提供獨立於內容與瀏覽器進行交互的對象；          3、文檔對象模型（Document Object Model）（DOM）：訪問和操縱HTML文檔；

組成：

三、 JavaScript的基本結構：

語法：        <script type="text/javascript">                  JavaScript 語句;        </script > 注：type是<scrip>標籤的屬性，用於指定文本使用的語言類別爲text/javascript     有的網頁中默認type="text/javascript"，這種寫法是正確的，由於HTML5中能夠省略type屬性HTML5默爲"text/javascript"；

JavaScript：寫入 HTML 輸出: document.write("內容");   注：<script>…</script>能夠包含在文檔中的任何地方，只要保證這些代碼在被使用前已讀取並加載到內存便可；        建議放在</body>的前面；

四、JavaScript的執行原理：

分析：★瀏覽器客戶端向服務器發送請求：一個用戶瀏覽器的地址輸入要訪問的頁面（頁面中包含JavaScript程序）；       ★數據處理：服務端將某個包含JavaScript的頁面進行處理；       ★發送響應：服務端將包含有JavaScript的HTML文件處理頁面發送到瀏覽器客戶端，而後由瀏覽器客戶端從上到下逐條解析HTML標籤和JavaScript，並將頁面效果呈現給用戶；

使用客戶端腳本的好處：      ●包含JavaScript的頁面只要下載一次便可，這樣能減小沒必要要的網絡通訊；      ●JavaScript程序由瀏覽器客戶端執行，而不是由服務器執行，所以能減輕服務器的壓力；

網頁中引用JavaScript的方式：           ●內部JavaScript 文件：直接使用<script>標籤將JavaScript代碼加入HTML文檔中；           ●使用外部JavaScript 文件；                      eg：<script src="export.js"  type="text/javascript"></script>           ●直接在HTML標籤中；                      eg：<input name="btn" type="button" value="彈出消息框" onclick="javascript:alert('歡迎你');"/>           注：alert("輸出語句")，提示對話框:prompt( 」提示語句」, 給的默認值)：單引號 雙引號均可以 三種方式的應用場合：       ●內部JavaScript文件適用於JavaScript特效代碼量少，僅用於單個頁面；       ●外部js文件則適用於代碼較多，重複應用於多個頁面；       ●直接在HTML標籤中寫JavaScript則適用於極少代碼，僅用於當前標籤，會增長代碼，不多使用；

五、JavaScript核心語法：

變量(變量名區分大小寫)： ◆var －  用於聲明變量的關鍵字；       ◆變量能夠不經聲明而直接使用，              但這種方法很容易出錯，也很難查找排錯，不推薦使用       ●先聲明變量再賦值             eg： var   width;                     width = 5;       ●同時聲明和賦值變量：             eg：var catName= "皮皮";                    var x, y, z = 10;       ●不聲明直接賦值：             eg：width=5; 數據類型： ●undefined（未定義類型）：             eg：var width；變量width沒有初始值，將被賦予值undefined ●null（空類型）：表示一個空值，與undefined值相等 ●number（數值類型）：              eg：var iNum=23;   //整數                     var iNum=23.0;   //浮點數 ●boolean（布爾類型）：true和false； ●String（字符串類型）：一組被引號（單引號或雙引號）括起來的文本；               eg；var string1="This is a string";

typeof運算符：typeof檢測變量的返回值： 語法：typeof（變量或值）  typeof運算符返回值以下     undefined：變量被聲明後，但未被賦值     String：用單引號或雙引號來聲明的字符串     boolean：true或false     number：整數或浮點數     object：javascript中的對象、數組和null   運算符號：      ===表示恆等（嚴格比較，數據類型不匹配就返回false）；      ！==表示不恆等；

String對象: ●字符串對象.length             Eg:var str="this is JavaScript";                   var strLength=str.length;    //長度是18 方法的調用：         ●字符串對象.方法名();   方法名稱 說      明 charAt(index) 返回在指定位置的字符 indexOf(str，index) 查找某個指定的字符串在字符串中首次出現的位置，找到返回索引值，不然返回-1 substring(index1，index2) 返回位於指定索引index1和index2之間的字符串，而且包括索引index1對應的字符，不包括索引index2對應的字符 split(str) 將字符串分割爲字符串數組 toLowerCase（） 將字符串轉換爲大寫 toUpperCase() 將字符串轉換爲小寫

數組： ●建立數組語法：                eg： var  數組名稱 = new Array(size);//Array：數組的關鍵字；size：表示數組中可存放的元素總數 ●爲數組賦值：聲明數組時能夠爲數組元素直接賦值；              //賦值方式1：                   eg：var fruit= new Array("apple", "orange", " peach","banana");             //賦值方式2：                     eg：var fruit=new Array(1);                              fruit[0]=」apple」;             //賦值方式3：                     eg：var fruit= ["apple", "orange", " peach","banana"];          ●訪問數組元素：                      數組名[下標]   ●數組的經常使用屬性和方法： 類別 描述 屬性 設置或返回數組中元素的數目 方法 把數組的全部元素放入一個字符串，經過一個的分隔符進行分隔 對數組排序 向數組末尾添加一個或更多 元素，並返回新的長度 更多方法可查閱JavaScrpt Array對象參考手冊：http://www.w3school.com.cn/js/jsref_obj_array.asp

邏輯控制語句：

if條件語句      if(條件) {         //JavaScript代碼; } else {         //JavaScript代碼; }

*switch多分支語句 switch (表達式){     case 常量1 :        //JavaScript語句1;     break;    case 常量2 :       //JavaScript語句2;      break;       ...    default :        //JavaScript語句3;    }

*for循環語句   for(初始化;  條件;  增量)  {           JavaScript代碼;  }

*do-while循環語句 do   {           JavaScript代碼; } while(條件)

*while循環語句 while(條件)  {           JavaScript代碼; }

*for-in循環     語法：         for(變量 in 對象){              //JavaSacript語句；           } Eg： var fruit=[ "apple", "orange", "peach","banana"]; for(var i in fruit){ document.write(fruit[i]+"<br/>"); } 結果：

中斷循環： ◆break：     馬上退出整個循環； ◆continue：    退出當前循環，     進入下一次循環；

註釋：    單行註釋以 // 開始，以行末結束    多行註釋以 /* 開始，以 */ 結束，符號 /*…… */ 指示中間的語句是該程序中的註釋；

經常使用的輸入/輸出：   警告：alert()          alert("提示信息");      注意：console.log()；建議使用此方法打印；  提示：prompt()：彈出一個提示你對話框，          等待用戶輸入一行數據； eg：三種方式：    prompt("提示信息", "輸入框的默認信息");    prompt("請輸入你喜歡的顏色","紅色");    prompt("請輸入你喜歡的顏色","");    prompt("請輸入你喜歡的顏色");        注：（第二個參數省略會顯示undefined）   語法約定：  一、代碼區分大小寫：      ★JavaScript的關鍵字，永遠都是小寫；eg：for、if；      ★內置對象；eg：Date、Math都是以大寫字母開頭；      ★對象名一般都小寫；  二、變量、對象和函數的名稱：      ★名稱能夠包括大小寫字母、數字、下劃線、美圓符號；      ★可是必須以字母、下劃線、美圓符號（$）開頭； 三、 分號：       ★JavaScript運行開發這自行決定是否以分號結束一行代碼；       ★若是沒有分號，JavaScript就將行代碼的結尾看做該語句的結尾；

JavaScript關鍵字和保留字： ●不能把關鍵字、保留字、true、false和null用做標識符。 ●js中的關鍵字可用於表示控制語句的開始或結束，或者用於執行特定操做等。按照規則，關鍵字也是語言保留的，不能用做標識符。 如下就是ECMAScription的所有關鍵字（帶*號上標的是第5版新增的關鍵字）：                 break、else、new、var、 case、  finally 、 return、 void 、 catch  、for                  switch 、 while 、 continue、  function  、this 、 with 、default 、 if                 throw 、 delete 、 in 、  try 、do 、 instranceof、  typeof、debugger* ●ECMA還描述了另一組不能用做標識符的保留字。儘管保留字在這門語言中尚未任何特定的用途，但它們有可能未來被用做關鍵字。 下面是ECMA第3版定義的所有保留字：                  abstract 、 enum   、int 、 short 、 boolean  、export  、interface、  static                   byte  、extends 、 long 、 super 、 char 、 final  、native  、synchronized                  class  、float 、 package  、throws 、 const  、goto  、private 、transient                  debugger 、 implements  、protected 、 volatile 、 double  、import  、public ●第5版把在非嚴格模式下運行時的保留字縮減爲下列這些：                  class、enum、extends、super、const、export、import ●在嚴格模式下，第5版還對如下保留字施加了限制：                     implements、package、public、interface、private、static、let、protected、yield 注：let和yield是第5版新增的保留字；其餘保留字都是第3版定義的

六、程序調試：

Chrome開發工具的八個模塊： Element 標籤頁： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。 Network 標籤頁：用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。 Source 標籤頁：用於查看和調試當前頁面所加載的腳本的源文件。 TimeLine 標籤頁： 用於查看腳本的執行時間、頁面元素渲染時間等信息。 Profiles 標籤頁：用於查看 CPU 執行時間與內存佔用等信息。 Resource 標籤頁：用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。 Audits 標籤頁：用於優化前端頁面，加速網頁加載速度等。 Console 標籤頁：用於顯示腳本中所輸出的調試信息，或運行測試腳本等。

Chrome開發人員工具五個圖標表明的含義： ⑴、中止斷點調試 ⑵、單步調試，不進入函數體內部 ⑶、單步調試，進入函數體內部 ⑷、跳出當前函數 ⑸、禁用全部的斷點，不作任何調試

alert()方法：能夠經過此方法將不肯定的數據信息以信息框的方式展現，以此來判斷出現錯誤的位置；

七、 函數：

函數的含義：相似於Java中的方法，是完成特定任務的代碼語句塊   使用更簡單：不用定義屬於某個類，直接使用   函數分類：系統函數和自定義函數

系統函數：   parseInt ("字符串")：將字符串轉換爲整型數字        如: parseInt ("86")將字符串「86「轉換爲整型值86   parseFloat("字符串")：將字符串轉換爲浮點型數字        如: parseFloat("34.45")將字符串「34.45「轉換爲浮點值34.45    isNaN()： 用於檢查其參數是不是非數字

自定義函數： 1、定義函數：   語法：      function 函數名(參數1,參數2,參數3,…){        // function 是定義函數關鍵字必須存在；參數無關緊要：有參函數和無參函數；            //JavaScript語句             [return 返回值]         //無關緊要；return用來規定函數返回的值； }                            //{}定義了函數的開始和結束； 2、調用函數：函數調用通常和表單元素的事件一塊兒使用； 調用格式：事件名＝ "函數名( )" ;

八、變量的做用域：全局變量和局部變量；

九、事件：

名稱	說明
onload	一個頁面或一幅圖像完成加載
onlick	鼠標單擊某個對象
onmouseover	鼠標指導移到某元素上
onkeydown	某個鍵盤按鍵被按下
onchange	域的內容被改變