JavaScript
1.JS和DOM的關係
瀏覽器有渲染html程式碼的功能，把html源碼在記憶體裡形成一個DOM對象，就是文件對象
瀏覽器內部有一個JS的解釋器/執行/引擎，如chrome用v8引擎
我們在html裡面寫一個JS程式碼，JS程式碼被引擎執行，而執行的結果就是對DOM的操作，也就是我們常看到的特效，例如 圖片漂浮，文字變色
瀏覽器執行時，遇到html程式碼就渲染，遇到js就解釋執行，所以為了確保頁面整體的顯示，一般把js寫在最後，即先渲染頁面，再操作DOM
2.變數的宣告
var name = 'jquery';
註:
嚴格區分大小寫;
變數名稱:數字,字母,底線.其中數字不能作為變數名稱的起始.變數名稱也可以以$來作為起始(不建議使用)
不使用var 會污染全域變數;
## 加var 表示在函數內部宣告一個局部變數且賦值，若沒有則單單為這個變數調試： console.log(); document.write(string); alert(string);3.變數型別 三大類(八種資料型別) - 傳統型別 Number(數位型別讀 串串類型) Boolean(布林類型) - 複合型別 tom', age: 18} Array (陣列型態) ['a', 3, true] 不管中途去掉某值，索引總是從0...N 編排## (函數型別)
- 特殊型別
undefined (未定義型別)
## 沒有原生資料 null 函數的組成: 1.函數名稱 - 數字,字母,底線,數字不能作為函數名稱的起始.
- 函數名稱要盡量起的意義.函數名稱建議採用小駝峰式命名規則.
2.參數(可選),一個函數最多有255個參數.
# 3.函數本體.
4.傳回值(可選)
函數的宣告
1.function 函數名稱([參數...]){
函數體;
將值相給;
}
3.匿名函數 var test = function([參數...]){ 函數本體;
}
函數的呼叫
1.以超連結的形式呼叫自訂函數名稱。
2.以超連結的形式呼叫自訂函數.
# 例如：
<a href='javascript:自訂函數名稱([參數...])'>文字</a>
## 3. 呼叫自訂函數. 變數的作用域 全域作用域與局部作用域 1.全域作用域 1.全域作用域 變數,作用域是全域作用域. 2.局部作用域 在函數體內宣告的變數,作用域為局部作用域.#4.運算 依照運算功能劃分 -算術運算 - * / % -- ( -邏輯運算(JS，邏輯運算，返回的是最早能判斷表達式結果的那個值) &&& || ! ## || ! ## || ! -比較運算 > < >= <= != === !== ==## -賦值運算
= /= %= -連結運算(一旦遇到非法數字時，後面的一律理解為「拼接」) 運算數目來分割 - 單目運算#
-- (正) -(負) !(非)
- 雙眼運算
exp2:exp3
當exp1為真時,執行exp2,否則執行exp3.
5.分支語句
if# ....
## if...elseif.... switch()6.迴圈 # while do...while... while在循環條件不滿足的情況下也會執行一次循環體.while在循環條件不滿足的情況下不執行循環體.7.JavaScript內建物件 js中一切都可以理解為對象，在呼叫方法時，那一瞬間被包裝成對象 1.對象的宣告 var o = new Object();# var o = {}; var o = {name:'tom',age:10} 2.## 2.中存取成員中存取成員的方法 物件名稱.物件中的成員(屬性與方法)- 字串物件 var s = new String(); var s = new String("hello"); var s = "hello"; 屬性與方法
## 屬性:
# length 取得字串的長度
方法:
物件.indexof(子字串)
功能:判斷子字串在物件中首次出現的位置.從0開始
返回:位置.如果子字串在物件中沒有出現,則回傳-1.
物件.toUpperCase();
功能:將物件轉換為大寫
物件.toLowerCase();
功能:將物件轉換為小寫
物件.substr(start [,length])#
o:字串的截斷.從start位置開始截取length長度. length可選參數不將預設截取至字串尾. 物件.slice(start[,end]) 功能:字串的截斷.從start位置開始截取,截斷到第end位置為止.end可選參數不給預設截取到字串尾.物件.replace(str1,str2)
- 陣列物件
宣告:
var a = new Array(); = [];
var a = new Array('team',1);
var a = ['team',1...];
var a = new Array(7); //7 是陣列的長度
陣列的輸出:
document.write(陣列的名稱);
# 陣列的賦值
a[0] = 'nico';
屬性:
length 陣列的長度
方法:
(數組物件) 功能:連接兩個陣列物件. 返回:新合併的陣列,新陣列中元素的順序取決於合併時兩個陣列的順序.陣列物件.pop() 功能:將陣列物件中的最後一個元素彈出. 返回:被彈出(刪除)的陣列元素.## 陣列物件.push(陣列元素) 功能:新增元素在陣列末端.
## 返回:被新增元素後的陣列的長度.
## 返回:被新增元素後的陣列的長度. 數組物件.shift()## 功能:彈出陣列頭部一個元素
返回:被彈出的陣列元素.
數組物件.
## 功能:在陣列的頭部新增元素## 返回:被加元素後的陣列的長度.
陣列物件.join(',')
陣列物件.join(',')
#
數組物件.split(',')
數組物件.reverse()
var d = new Date()
方法:
年份
物件.getMonth()
功能:取得月份,月份(0~11)
物件.getDate()
#Oate()##. ## 功能:取得日
物件.getHours()
功能:取得小時數
## # 功能:取得分鐘 物件.getSeconds() 功能:取得秒值. 物件.getDay()
功能:取得目前的星期值(0週日~6週六)
- 數學(Math)物件
# 沒有實例化，相當於PHP中的透過類別名稱靜態呼叫
屬性:
PI 派值
方法:# PI 派值
方法:# PI 派值
方法:#
功能:向上抽取
# Math.floor(變數)
功能:向下取整
Math.r」(變數)：向下取整
Math.r
# 功能:四捨五入 Math.abs(變數) 功能:取絕對值 Math.random()##隨機值.大於等於0小於1 [0,1).
## Math.max(變數..) 功能:回傳變數中的較大者.# Math.min(變數..) 功能:返回變數中的較小者.8.瀏覽器window物件 註：window物件是瀏覽器宿主物件 與JS語言無關 window物件的方法： window.alert(message); window.alert(message); window.confirm(message);#om(message);# window.confirm(message);# window.confirm(message);## window.prompt();
window.open();
window.close();
window.print();
window.setInterval();
window.setTimeout();
window.clearInterval();
# window.clearTimeout();
oTime window物件的子物件： 1.navigator 瀏覽器資訊物件#o.
## 3.history 歷史記錄 # 畫面#p##1# campo# | #
5.document 物件（DOM物件）
# 儲存API 提供了sessionStorage （會話儲存） 和localStorage（本機儲存）兩個儲存物件來對網頁的資料進行新增、刪除、修改、查詢操作。 sessionStorage 用於暫時儲存相同視窗(或標籤頁)的數據，並在關閉視窗或標籤頁之後刪除這些資料。
#
localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動移除。
9.DOM物件操作
DOM(Document Object Model 文件物件模型)
Document HTML/XML#
## eXtensionable Markup Language (擴充標記 特性:不作為.# Object 將HTML轉換為JavaScript物件. Model 模型 找物件 -#document.getElementsByTagName(HTML# -#document。 # 返回:物件組成的陣列.
- document.getElementsByName(HTML標籤的name屬性值)
傳回:物件組成的陣列.
# HTML標籤的id屬性值) 傳回:物件.# - document.getElementsByClassName(HTML標籤的class屬性值) :物件組成的陣列. window.document為什麼可以省略前面的window? 答：還是作用域的問題，內部找不到往外層找，全域下有window.document# #
## 中的HTML標籤,文本,註解,屬性都可以被視為樹型結構上的節點.節點之間是有關聯的.找到其中的一個節點.就可以找到樹型結構上的全部節點.
註：一個空白、註解都是一個節點;
節點:節點名稱(nodeName),
節點類型(nodeType).
## 節點類型(nodeType).# 編號(nodeValue).
父節點: 節點物件.parentNode
子節點:
節點物件.child使用與陣列（包含空白節點）編號
節點物件.children 非標準屬性，但相容於良好，不含空白節點
與子lastChild
節點物件的最後一個子節點
同胞節點:
節點物件.previousSibling
節點物件. nextSibling
下一個同胞節點
document.createElement(HTML tag 標籤)##
父物件.appendChild(子物件) 功能:將子物件新增至父物件.##
## ## 父物件.removeChild(父物件.lastChild) 功能:刪除物件的最後一個子節點. 操作物件##o# 屬性## # 屬性#
1.屬性的讀取
對象.屬性名稱
2.屬性的修改
對象.屬性名稱= 屬性值
文字
1.讀取
## 物件.innerText 物件.innerHTML#物件.innerText = 修改的文字
物件.innerHTML = 修改後的文字
innerHTML解析HTML標籤,inner解析不解析樣式不解析樣式標籤.不解析樣式
1.讀(因為style屬性後面還是物件,所以要用. 繼續訪問，只能去讀內連樣式的值，無法讀取<style>中的值) 對象。後將下一個單字首字母大寫,即小駝峰式屬性名稱. 3.批次修改樣式3.批次修改樣式
|className = class樣式名稱 取得執行階段的物件.className = class樣式名稱 取得執行時間的物件.className style對象：
obj.currentStyle[attr] 和 getComputedStyle(obj, null)[attr] 來取得
前者只有ie和opera支持，後者標準瀏覽器中使用ie9以上也支援,第二個參數是偽元素
10.事件
1.事件來源
所有的HTML標籤視為事件來源
2.事件」
2.事件##'# 滑鼠click 點選事件
dblclick 以雙擊事件
•
## 滑鼠#10over#
# 鍵盤 keyup 鍵盤抬高 keydown 鍵盤按下 keypresspress 鍵盤按## 關閉前
表單 focus 取得焦點
blur 失去焦點
change 表單變更中
3.事件處理程序 - <tag on事件="事件處理程序"> 事件處理程序可以是javascript代碼,也可以是自定義函數的名稱. - 物件.on事件= 事件處理程序 事件處理程序為匿名函數.11.定時器## 定時器
clearTimeout() 方法可取消由 setTimeout() 方法設定的定時操作。
clearTimeout() 方法的參數必須是由 setTimeout() 傳回的 ID 值。
注意: 要使用clearTimeout() 方法, 建立執行定時作業時要使用全域變數：
每隔n秒執行的計時器
# setInterval() 方法可依照指定的週期（以毫秒計）來呼叫函數或計算表達式。
setInterval() 方法會不停地呼叫函數，直到 clearInterval() 被呼叫或視窗關閉。由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想執行一次可以使用 setTimeout() 方法。
