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() 方法。
