泰牛程序員 韓順平 PHP 大牛班 javascript課程 完整筆記

1、泰牛程序員 php 學院 htpp:/ 第 i 頁 javascript 第第 1 章章javascript 課程介紹課程介紹.1 1.1js可以做什么?1 1.2js的一些特點（了解）1 1.3js的小故事2 1.4js運行的原理圖2 1.5javascript的文檔哪里找?3 1.6第一個js程序,hello,world!3 1.7一個非常簡單的js加法運算4 1.8js是弱數(shù)據(jù)類型語言，變量類型有js引擎來決定.5 1.9js變量的命名規(guī)范5 第第 2 章章js 的數(shù)據(jù)類型介紹的數(shù)據(jù)類型介紹.7 2.1js的數(shù)據(jù)類型分類7 2.2舉例說明7 2.3小練習8 2.4js數(shù)據(jù)類型的轉換9 第

2、第 3 章章js 的運算符的運算符.10 3.1js運算符的分類:10 3.2算術運算符10 3.3關系運算符12 3.4關系運算符的小案例13 3.5邏輯運算符14 3.6關于邏輯運算的測試題15 3.7邏輯非的說明題16 第第 4 章章三大流程控制三大流程控制.17 4.1概述:17 4.2分支控制17 4.2.1if 分支.17 4.2.2if.else 雙分支 .18 4.2.3多分支控制結構 if . else if .else.20 4.2.4多分支的案例.22 4.3多分支語句-swith23 4.3.1一個小的練習題.25 4.3.2關于 switch 的一個小練習.25 4.

3、4循環(huán)控制26 泰牛程序員 php 學院 htpp:/ 第 ii 頁 4.4.1for 循環(huán)控制 .26 4.5for循環(huán)的練習題28 第第 5 章章函數(shù)函數(shù).30 5.1函數(shù)的必要性30 5.2函數(shù)的基本概念33 5.3函數(shù)的基本語法33 5.4函數(shù)的調用方式34 5.4.1方式 1:.34 5.4.2形參和實參的概念.35 5.4.3函數(shù)調用和返回的說明.35 5.5變量的作用域36 5.6函數(shù)的其它說明37 5.7就是三目運算符的補充講解37 第第 6 章章數(shù)組數(shù)組.38 6.1為什么需要數(shù)組38 6.2使用數(shù)組解決上面的問題39 6.3數(shù)組的基本概念39 6.4數(shù)組的傳遞方式40 6.

4、5數(shù)組使用41 6.6數(shù)組的遍歷42 6.7二維數(shù)組了解43 6.7.1關于二維數(shù)組的訪問說明.43 6.7.2快速入門案例.44 6.7.3快速入門案例 2.44 6.7.4二維數(shù)組的平均值.45 第第 7 章章js 的內(nèi)置對象的內(nèi)置對象.46 7.1概述46 7.2js內(nèi)部類的分類46 7.3math對象47 7.3.1介紹:.47 7.3.2快速入門案例.48 7.4date對象49 7.4.1提出問題.49 7.4.2date 對象的快速入門.49 7.5一個string的案例50 7.6array對象51 7.7number對象53 泰牛程序員 php 學院 htpp:/ 第 iii

5、 頁 7.8全局函數(shù)55 第第 8 章章事件及事件驅動編程事件及事件驅動編程.57 8.1概述:57 8.2js的事件驅動機制的理解57 8.3事件的分類58 8.3.1鼠標事件.58 8.3.2鍵盤事件.58 8.3.3html 事件.58 8.3.4其它事件.58 8.4事件驅動機制編程的進一步理解案例58 8.5一個事件可以被多個函數(shù)處理61 第第 9 章章dom 編程編程.62 9.1dom的分類和介紹62 9.2dom到底和html文件是什么關系62 9.3dom編程的框架介紹63 9.4bom64 9.5dom編程的分類說明64 9.6bom 和dom的關系65 9.7dom編程的

6、一個體驗案例65 9.8window對象66 9.8.1window 對象的常用方法舉例.66 9.8.2股票撤回案例.67 9.9窗口的打開和關閉67 9.10window案例-登錄成功后跳轉到指定頁面68 泰牛程序員 php 學院 htpp:/ 第 1 頁 第 1 章javascript 課程介紹 1.1js 可以做什么? 1. 游戲 2. 網(wǎng)頁的特性 3. web 聊天 4. 地圖 php 程序員后面大量的使用 js 1.2js 的一些特點（了解） 1. js 是一個腳本編程語言 2. 腳本語言相對傳統(tǒng)的編程語言而已，語法和規(guī)則相對沒有那么嚴格。 3. js 是解釋執(zhí)行。即 js 在執(zhí)行

7、的時候，不會編譯成二進制代碼。而是將 js 代碼調 入引擎，然后解釋執(zhí)行. 4. js 的主要的作用，可以對網(wǎng)頁的元素動態(tài)編程 體驗案例: 代碼 ： 泰牛程序員 php 學院 htpp:/ 第 2 頁 5. js 文件是和其它編程語言一起使用(html, php , jsp , ) 1.3js 的小故事 1.4js 運行的原理圖 泰牛程序員 php 學院 htpp:/ 第 3 頁 1.5javascript 的文檔哪里找? 1.6第一個 js 程序,hello,world! 泰牛程序員 php 學院 htpp:/ 第 4 頁 1.7一個非常簡單的 js 加法運算 補充說明：在 js 中，我們查

8、看一個數(shù)據(jù)的類型可以使用 typeof 變量名 ,或者 typeof(變量名); 泰牛程序員 php 學院 htpp:/ 第 5 頁 1.8js 是弱數(shù)據(jù)類型語言，變量類型有 js 引擎來決定. 1.9js 變量的命名規(guī)范 (1) 變量變量可以由任意順序的大小字母、下劃線, 美元符號($)組成，但不能以數(shù)字開 頭，不能是 javascript 中的保留關鍵字 (2) javascript 變量是區(qū)分大小寫 (3) javascript 程序的注釋 /*/ 或者 /注釋 案例說明: 泰牛程序員 php 學院 htpp:/ 第 6 頁 如何使用 firefox 中對 js 代碼進行調式 使用快捷接

9、 ctrl+shift+j 彈出我們的 js 的提示信息 泰牛程序員 php 學院 htpp:/ 第 7 頁 第 2 章js 的數(shù)據(jù)類型介紹 2.1js 的數(shù)據(jù)類型分類 (1) 基本數(shù)據(jù)類型：數(shù)值類型整數(shù)、浮點型，布爾型(true , false) , 字符串 (2) 復合數(shù)據(jù)類型： 數(shù)組, 對象 (3) 特殊數(shù)據(jù)類型：null undefined; 2.2舉例說明 泰牛程序員 php 學院 htpp:/ 第 8 頁 2.3小練習 泰牛程序員 php 學院 htpp:/ 第 9 頁 2.4js 數(shù)據(jù)類型的轉換 泰牛程序員 php 學院 htpp:/ 第 10 頁 第 3 章js 的運算符 3.

10、1js 運算符的分類: (1) 算術運算符 x = 5 + 6; (2) 賦值運算符 x = 7; (3) 比較運算符 x 5; (4) 邏輯運算符 x 6 就是先 自加，再賦值, 如果是 a+ ，則是 先賦值 在自加 3. - 分為 前 - 和 后- 4. 如果是前 - 比如 -a; 就是先 自減，再賦值, 如果是 a- ，則是 先賦值在自 減 3.3關系運算符 泰牛程序員 php 學院 htpp:/ 第 13 頁 強調：= = 等于 = = = 全等 3.4關系運算符的小案例 泰牛程序員 php 學院 htpp:/ 第 14 頁 3.5邏輯運算符 案例: 泰牛程序員 php 學院 htpp

11、:/ 第 15 頁 小結： 1. 在邏輯運算中，0、false、null、undefined、nan 均表示 false 2. 在邏輯運算中，非 0 表示 ture , 比 1 ,或者 -4 3.6關于邏輯運算的測試題 泰牛程序員 php 學院 htpp:/ 第 16 頁 3.7邏輯非的說明題 泰牛程序員 php 學院 htpp:/ 第 17 頁 第 4 章三大流程控制 4.1概述: 順序控制：沒有加控制，默認就是從上到下，從左到右的執(zhí)行順序. 分支控制: 根據(jù)不同的情況，來執(zhí)行不同的語句 循環(huán)控制: 更加用戶的輸入，來反復的執(zhí)行某段代碼. 4.2分支控制 4.2.1 if 分支 基本語法:

12、if(條件判斷) /語句塊. 說明:當條件判斷為真時，則執(zhí)行內(nèi)的代碼,否則不執(zhí)行. 快速入門案例: 編寫一個程序,可以輸入人的捐款,如果該同志 的捐款大于 1000 元,則輸出 “你的捐款大于 1000,為您愛心點贊!” 代碼 ： 泰牛程序員 php 學院 htpp:/ 第 18 頁 流程圖 ： 4.2.2 if.else 雙分支 基本語法 泰牛程序員 php 學院 htpp:/ 第 19 頁 if(條件判斷 a) /語句塊 a else /語句塊 b: 說明：如果判斷條件 a 成立，則執(zhí)行語句塊 a,否則，執(zhí)行語句塊 b. 快速入門案例: 流程圖: 泰牛程序員 php 學院 htpp:/ 第

13、 20 頁 4.2.3 多分支控制結構 if . else if .else. 基本語法: if(條件判斷 a) /語句塊 a else if(條件判斷 b) /語句塊 b else if(條件判斷 c) /語句塊 c else 泰牛程序員 php 學院 htpp:/ 第 21 頁 /語句塊 c 說明：條件判斷 a 成立,則執(zhí)行/語句塊 a., 如果判斷條件 b 成立，則執(zhí)行 b 語句 塊，如果所有的判斷條件都不成立，就執(zhí)行 else 的語句塊. 快速入門： 代碼 ： 流程圖: 泰牛程序員 php 學院 htpp:/ 第 22 頁 4.2.4 多分支的案例 泰牛程序員 php 學院 htpp:

14、/ 第 23 頁 4.3多分支語句-swith 基本語法: switch(表達式) case 常量/變量: 語句塊; break; case 常量/變量: 語句塊; break; case 常量/變量: 語句塊; break; . default: 語句塊; break; 快速入門案例: 泰牛程序員 php 學院 htpp:/ 第 24 頁 小結: 1. 選擇 switch 還是 if else 答：如果是判斷某幾個值的范圍，比如 a b, 選擇使用 switch, 如果是一個 范圍比較，我們選擇使用 if. else if .else 泰牛程序員 php 學院 htpp:/ 第 25 頁 4

15、.3.1 一個小的練習題 4.3.2 關于 switch 的一個小練習 泰牛程序員 php 學院 htpp:/ 第 26 頁 4.4循環(huán)控制 4.4.1 for 循環(huán)控制 基本語法是 for(var i = 0; i 值; i+) 語句; for(循環(huán)初值循環(huán)初值;循環(huán)條件循環(huán)條件;步長步長) 語句語句;/循環(huán)體循環(huán)體 快速入門案例快速入門案例: 泰牛程序員 php 學院 htpp:/ 第 27 頁 執(zhí)行分析過程 如何使用 firebug 來進行調試功能 泰牛程序員 php 學院 htpp:/ 第 28 頁 4.5for 循環(huán)的練習題 代碼如下: 泰牛程序員 php 學院 htpp:/ 第 2

16、9 頁 泰牛程序員 php 學院 htpp:/ 第 30 頁 第 5 章函數(shù) 5.1函數(shù)的必要性 舉例一個案例: 輸入兩個數(shù),再輸入一個運算符(+,-,*,/)，得到結果 代碼 ： 泰牛程序員 php 學院 htpp:/ 第 31 頁 從這個案例，我們提出一個新的問題? 請思考,如果在另外的 html 文件比如 a.html,b.html,c.html 中也需要完成: 入兩個數(shù),再輸入一個運算符(+,-,*,/)，得到結果. 又該怎么辦? 提出一個解決方案-函數(shù) 建議： 當一段代碼重復使用，超過 3 次以上，我們應該考慮封裝成函數(shù) 使用函數(shù)來解決上面的問題 fun.js 泰牛程序員 php 學

17、院 htpp:/ 第 32 頁 在需要的文件中，比如 xxx.html 泰牛程序員 php 學院 htpp:/ 第 33 頁 5.2函數(shù)的基本概念 概念: 為完成某一個功能的程序指令(語句)的集合. 分類: 自定義函數(shù)，系統(tǒng)函數(shù) 5.3函數(shù)的基本語法 泰牛程序員 php 學院 htpp:/ 第 34 頁 5.4函數(shù)的調用方式 在調用函數(shù)的時候，需要在后面寫上 分號; 這里說一下,js 代碼在頁面中的使用的方式： 5.4.1 方式 1: 基本語法是: 函數(shù)名(實參 1, 實參 2, .); 比如: 泰牛程序員 php 學院 htpp:/ 第 35 頁 5.4.2 形參和實參的概念 我們可以這樣來

18、區(qū)分 ： 當我們定義一個函數(shù)時，則該函數(shù)的()內(nèi)的，我們稱為形參. 當我們調用一個函數(shù)時，我們傳入的參數(shù)，已經(jīng)確定了，則我們講這個傳入的值， 稱為實參 5.4.3 函數(shù)調用和返回的說明 說明: 1. 對于有返回值的函數(shù)調用，也可以在程序中直接使用返回的結果，例如： alert(“res=“ + sum(2,3); 2. 沒有返回值的函數(shù)，則返回 undefined。 舉例說明: 3. 關于函數(shù) return 的說明 (1) 是否有返回，由程序員的業(yè)務邏輯 泰牛程序員 php 學院 htpp:/ 第 36 頁 (2) 返回的數(shù)據(jù)類型，可以是數(shù)值，字符串，數(shù)組或其他 5.5變量的作用域 全局變量和

19、局部變量的小結: 1. 全局變量可以在函數(shù)外使用，也可以在函數(shù)內(nèi)部使用 2. 局部變量只可以在函數(shù)內(nèi)部使用 3. 全局變量有三種方式 , 看上面的代碼 4. 局部變量的定義有一種, 在函數(shù)內(nèi)， var 變量名 = 值; 5. 全局變量的隱式定義，我們要避免，這樣代碼更干凈. 泰牛程序員 php 學院 htpp:/ 第 37 頁 5.6函數(shù)的其它說明 5.7就是三目運算符的補充講解 泰牛程序員 php 學院 htpp:/ 第 38 頁 第 6 章數(shù)組 數(shù)組: 就是把多個數(shù)據(jù)放在一起管理，就是數(shù)組。 6.1為什么需要數(shù)組 代碼: 思考: 上面的問題是，如果烏龜很多，就沒有玩了。-數(shù)組. 泰牛程序員

20、 php 學院 htpp:/ 第 39 頁 6.2使用數(shù)組解決上面的問題 代碼 ： 6.3數(shù)組的基本概念 泰牛程序員 php 學院 htpp:/ 第 40 頁 6.4數(shù)組的傳遞方式 結論是： js 中，數(shù)組是引用傳遞: 泰牛程序員 php 學院 htpp:/ 第 41 頁 在一個案例說明數(shù)組的引用傳遞 6.5數(shù)組使用 泰牛程序員 php 學院 htpp:/ 第 42 頁 如果我們使用數(shù)組，其實就是使用數(shù)組的元素: 數(shù)組名下標名 ; 比如 a10; 表示訪問 a 數(shù)組的第 11 個元素. 數(shù)組的使用案例 6.6數(shù)組的遍歷 泰牛程序員 php 學院 htpp:/ 第 43 頁 6.7二維數(shù)組了解

21、概念: 一維數(shù)組的元素，又是數(shù)組，這樣的數(shù)組，就是二維數(shù)組。 6.7.1 關于二維數(shù)組的訪問說明 泰牛程序員 php 學院 htpp:/ 第 44 頁 6.7.2 快速入門案例 6.7.3 快速入門案例 2 泰牛程序員 php 學院 htpp:/ 第 45 頁 6.7.4 二維數(shù)組的平均值 泰牛程序員 php 學院 htpp:/ 第 46 頁 第 7 章js 的內(nèi)置對象 7.1概述 7.2js 內(nèi)部類的分類 說，在 js 中有提供好的類，我們成為內(nèi)部類array, string , number , boolean, date, math, 通過類，我們可以創(chuàng)建對應的實例，這個實例我們稱為一個

22、對象。該對象有對 應的屬性和方法。 說明了一下靜態(tài)類和動態(tài)類的特性 泰牛程序員 php 學院 htpp:/ 第 47 頁 7.3math 對象 7.3.1 介紹: 泰牛程序員 php 學院 htpp:/ 第 48 頁 7.3.2 快速入門案例 泰牛程序員 php 學院 htpp:/ 第 49 頁 7.4date 對象 7.4.1 提出問題 d = new date()獲取當前時間，year=date.getfullyear()獲取當前年， month=date.getmonth()獲取當前月，day=date.getdate()獲取當前日期，然后 d year- month-day 00:00

23、:00 來判斷 7.4.2 date 對象的快速入門 泰牛程序員 php 學院 htpp:/ 第 50 頁 7.5一個 string 的案例 泰牛程序員 php 學院 htpp:/ 第 51 頁 小結: 1. 如果我們需要取出從第幾個位置，到第幾個位置的字符串，則使用 substring 2. 如果我們需要取出從第幾個位置開始，取多少個字符，則使用 substr 7.6array 對象 數(shù)組的基本介紹: 泰牛程序員 php 學院 htpp:/ 第 52 頁 案例 1-講解 array 的基本用法: 關于數(shù)組的一個作業(yè): 泰牛程序員 php 學院 htpp:/ 第 53 頁 7.7number

24、對象 快速入門案例 泰牛程序員 php 學院 htpp:/ 第 54 頁 案例說明 泰牛程序員 php 學院 htpp:/ 第 55 頁 7.8全局函數(shù) encodeuri 和 decodeuri 在以前 http:/?index.php?name=泰牛 isnan eval 案例 泰牛程序員 php 學院 htpp:/ 第 56 頁 泰牛程序員 php 學院 htpp:/ 第 57 頁 第 8 章事件及事件驅動編程 8.1概述: 8.2js 的事件驅動機制的理解 泰牛程序員 php 學院 htpp:/ 第 58 頁 8.3事件的分類 8.3.1 鼠標事件 8.3.2 鍵盤事件 8.3.3 h

25、tml 事件 8.3.4 其它事件 8.4事件驅動機制編程的進一步理解案例 泰牛程序員 php 學院 htpp:/ 第 59 頁 代碼: 泰牛程序員 php 學院 htpp:/ 第 60 頁 泰牛程序員 php 學院 htpp:/ 第 61 頁 8.5一個事件可以被多個函數(shù)處理 泰牛程序員 php 學院 htpp:/ 第 62 頁 第 9 章dom 編程 9.1dom 的分類和介紹 dom 包括 html dom 、xml dom 和 css dom ,event dom 9.2dom 到底和 html 文件是什么關系 new document 我的標題 點擊跳轉到泰牛 該文檔，對應額 dom

26、 樹是如下的情況 ： 泰牛程序員 php 學院 htpp:/ 第 63 頁 9.3dom 編程的框架介紹 泰牛程序員 php 學院 htpp:/ 第 64 頁 9.4bom bom 是瀏覽器對象模型,將瀏覽器的各個組件看成對象，: 主要提供了訪問和操作 瀏覽器各組件(比如 window、history、location、navigator、screen、document)的 方法。因為 document 對象占的比例很大。因此 doucment 編程的核心就是 bom 的 核心。 9.5dom 編程的分類說明 泰牛程序員 php 學院 htpp:/ 第 65 頁 9.6bom(瀏覽器對象模型)

27、 和 dom 的關系 9.7dom 編程的一個體驗案例 泰牛程序員 php 學院 htpp:/ 第 66 頁 9.8window 對象 window 對象是全局對象，在使用它的方法和屬性時，不需要帶 window. 可以直 接使用其方法和屬性. 9.8.1 window 對象的常用方法舉例 setinterval 和 clearinterval / settimeout / cleartimeout 小鬧鐘 泰牛程序員 php 學院 htpp:/ 第 67 頁 9.8.2 股票撤回案例 9.9窗口的打開和關閉 window.open(url, 窗口名 _self _blank, 設置窗口的樣式

28、); window.close(); 泰牛程序員 php 學院 htpp:/ 第 68 頁 9.10 window 案例-登錄成功后跳轉到指定頁面 泰牛程序員 php 學院 htpp:/ 第 69 頁 思路 ： 編寫 login.html loginok.html manage.html login.html 泰牛程序員 php 學院 htpp:/ 第 70 頁 loginok.html manage.html 泰牛程序員 php 學院 htpp:/ 第 71 頁 第 10 章 document 對象 10.1 概述： document 對象是 dom 的編程核心，內(nèi)容很多，涉及的知識點很雜，

29、而且不同的瀏 覽器還存在兼容性問題。這里我們主要對 document 核心內(nèi)容和框架做一個介紹. 10.2 document 的案例 泰牛程序員 php 學院 htpp:/ 第 72 頁 10.3 關于 css 的屬性和 js dom 編程中對 css 屬性的對應關系 10.4 document 的計算器 泰牛程序員 php 學院 htpp:/ 第 73 頁 泰牛程序員 php 學院 htpp:/ 第 74 頁 10.5 history 對象(了解) 泰牛程序員 php 學院 htpp:/ 第 75 頁 簡述:該對象保存了用戶訪問瀏覽器的記錄，通過這個對象，我們可以去訪問改用 曾經(jīng)訪問過的某個頁面，比如向前，或者向后。 10.5.1histroy 的常用方法 10.5.2舉例說明 ： 代碼 ： 泰牛程序員 php 學院 htpp:/ 第 76 頁 test.html b.html 泰牛程序員 php 學院 htpp:/ 第 77 頁 10.6 location 對象 概述: 即:該對象包含客戶端當前的 url 信息。