js01

web 開發

前端

       HTML 數據顯示，負責內容

       css     頁面美化，負責樣式

       js        頁面特效，與用戶交互，負責行爲

後端

       PHP  /  JAVA  /  asp.net / python / Ruby /  node.js /

----------------------------------------------------------------------------------------------------------------

1. javascript 簡介
1.1 什麼是javascript
1.1.1 概念： javascript是 基於對象 和 事件驅動 並具備相對安全性的 客戶端 腳本語言
1.1.2 發展簡史：
① Nombas公司1992年開發 嵌入式腳本語言 C-- 後更名 ScriptEase
② Netscape公司 1995年發佈LiveScript 後更名javascript1.0
③ 三足鼎立 NetScape推出javascript1.1後，Microsoft推出Jscript, 加上 ScriptEase
④ 標準化 1997javascript1.1 做爲草案 提交給 ECMA（歐洲計算機制造商協會） 。由來自 Netscape、Sun、
微軟、Borland 和其餘一些對腳本編程感興趣的公司的程序員組成的 TC39 錘鍊出了 ECMA-262，該標準
定義了名爲 ECMAScript 的全新腳本語言.

--------------------------------------------------------------------------------------------------------------------

1.1.3 組成： 核心（ECMAScript）瀏覽器對象模型（BOM） 文檔對象模型（DOM）
1.1.4 客戶端瀏覽器上執行的腳本 JavaScript VBScript applet（須要安裝JDK）
1.1.5 ECMAScript核心: JavaScript ActionScript ScriptEase
1.1.6 擴展：node.js 服務端開發（apache+php）手機app： phonegap框架
1.1.7 課程 內容：
JS 基本語法
JS 函數/數組/對象
JS 內置對象
JS 事件
BOM
DOM
AJAX
JQuery 類庫

-----------------------------------------------------------------

1.1.8 瀏覽器
IE IE6 7 8 / IE9+
非IE Chrome firefox opera Safari ...

---------------------------------------------------

1.2 javascript的特色
①.javascript是一種腳本編程語言，也是一種解釋性語言
②.javascript的語法結構與C++、java十分相似
③.javascript是一種基於對象的語言
④.javascript具備跨平臺性。
⑤.安全性與簡單性
⑥ 基於對象（真正的對象 封裝 繼承 多態）
1.3 javascript 和 java的區別
雷鋒和雷峯塔

1.4 javascript 程序運行開發環境
1.NetScape.3.0 以上版本和IE3.0 以上版本
2.用於編輯HTML的字符編輯器

1.5 javascript 優勢與侷限
1.5.1 優勢
①使用javascript在客戶端進行驗證，節省服務器資源
②方便的操控頁面中的各個對象，使網頁更加友好
③使多種任務僅在客戶端就能夠完成而不須要網絡和服務器的參與，從而支持分佈式的運算和處理
1.5.2 侷限
①兼容性
②javascript不能打開，讀寫和保存計算機上的文件

2. javascript基本語法
2.1 在HTML中使用javascript

①JS應該寫在HTML中那個位置??
② 寫在header 中的 script標籤內
③ 外部文件導入 script標籤導入 <script src="script.js"></script> 標籤內不能寫代碼
④ 經過事件 寫在標籤內 <tag onclick="code...."></tag>

2.2 基本語法
2.2.1 區分大小寫
一切都區分大小寫
2.2.2 標示符
不能一數字開頭,能夠由 數字/字母/下劃線/$ 組成

2.3 註釋
單行註釋： //
多行註釋： /* */

2.4 語句（指令結束符）
; 或 換行

2.5 關鍵字和保留字
break else new var
case finally return void
catch for switch while
abstract enum int short

······

-----------------------------------------
2.4 變量
var 變量 = '值';
var 變量 = '值',變量 = '值',變量 = '值';
var 變量1 = 變量2 = '值';

---------------------------------------------------

2.5 數據類型 typeof() 返回一個值或變量 的數據類型
2.5.0 分類
基本類型
String(字串) Boolean(布爾) Number(數值)
複合類型
Object(對象) Array(數組)
特殊類型
Null(空) undefined(未定義) function(函數)

2.5.2字符串類型

字符串鏈接符 +

定義字符串  " "        ' '

不管是單引號仍是雙引號  均可以解析  轉義字符,  都不能解析變量

2.5.2 數值類型
① 整數類型 十進制 十六進制 八進制
② 浮點型 科學計數法 浮點數的精度問題
③ 數值範圍 5e324 ~ 1.7976931348623157e+308 超過範圍回自動轉換成 infinity(正無窮) -infinity(負無窮)

----------------------------------------------

js02

 

學JS從特效入手>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

1. 獲取頁面中的一個元素
document.getElementById('id');

將獲取到的元素寫入值在HTML裏
必定要在html元素以後獲取,或寫在函數以內.

2. 獲取或設置 元素的css屬性
element.style.color = ''
element.style.backgroundColor = ''

3. 元素的屬性(全部的元素都具備的屬性)
style
innerHTML (雙標籤)
HTML元素具備什麼屬性,當它被獲取爲對象後,該屬性會自動變爲該對象的屬性
(如 img: src width height alt title)

4. 定時函數
4.1 單次定時
// 參1 字串,JS代碼, 參2 時間(毫秒)
setTimeout('', time);
clearTimeout();
4.2 屢次定時
setInterval();
clearInterval();

屢次定時實驗：

單次定時實驗：

JS 函數
=============================================================
1. 函數的聲明
1). function關鍵字
function 函數名([形參]){ JS code ... }

2). 表達式方式
var 函數名 = function([形參]){ JS code ... }

3). Function構造函數方式  理解爲類和構造方法的結合體 
var 函數名 = new Function('參數1',"func...");

 

2. 調用函數
加括號纔算真真的調用
不加括號是 函數引用

3. JS函數特色
能夠重複定義

4. JS中的參數
1). 形參與實參
實參個數 > 形參 不受影響
實參個數 < 形參 undefined
2). 參數的默認值
在函數內部 判斷 是不是 undefined,若是是則賦值

3). 可變參數個數的函數
arguments 獲取到一個數組,內含全部傳遞的參數

5. JS中的變量做用域 全局和局部變量
    在函數內 使用var 定義的是 局部變量
    在函數外 使用var 定義的是 全局變量
    在函數內 不使用var 定義的是 全局變量

6. JS的做用域鏈
函數的執行 依賴於變量的做用域, 這個做用域是在 函數定義聲明時決定的,而不是 函數調用時決定的!
若是當前做用域裏 沒有聲明變量,則向上一層做用域裏面找.
若是直到找到全局裏 還都未找到 則在執行函數時 會報錯.

 小案例以下：

7. 自執行函數 與 閉包
自執行
( function(){console.log(1)} )()
( function(){console.log(2)} () )
這種寫法的含義是 將函數聲明 轉換成 函數表達式，消除了JS引擎識別函數表達式 和 函數聲明的歧義.
告訴JS引擎 這是一個函數表達式，不是函數聲明，而且能夠在後面 加括號，當即執行 函數的內的代碼.

閉包
簡單說,閉包就是 可以讀取 其餘函數內部變量的 函數。
因爲在JS中，只有函數內部的 子函數 才能讀取 局部變量，
所以能夠把閉包 簡單理解成 "定義在一個 函數內部的 函數"。
因此，在本質上，閉包就是將 函數內部 和 函數外部 鏈接起來的一座橋樑。

閉包的最大用處有兩個，一個是能夠讀取 函數內部的變量，另外一個就是 讓這些變量的值 始終保持在內存中。

三中案例

案例一：

案例二：

方案三：

js對象>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>