前端JavaScript部分簡單整理
阿新 • • 發佈：2018-08-15
前端 settime type 獲得 滾動 輪播 scroll 克隆 參考
Web前端有三層：
HTML：從語義的角度，描述頁面結構
CSS：從審美的角度，描述樣式（美化頁面）
JavaScript：從交互的角度，描述行為（提升用戶體驗）
發明人：布蘭登 ? 艾奇
JavaScript入門易學性
JavaScript對初學者比較友好。
JavaScript是有界面效果的（比如C語言只有白底黑字）。
JavaScript是弱變量類型的語言，變量只需要用var來聲明。而Java中變量的聲明，要根據變量的類型來定義。
JavaScript是前臺語言
JavaScript的組成
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
BOM：操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
JavaScript的特點
（1）簡單易用：可以使用任何文本編輯工具編寫，只需要瀏覽器就可以執行程序。
（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。
（3）基於對象：內置大量現成對象，編寫少量程序可以完成目標
# alert彈出“警告框”
console.log("")控制臺輸出
用戶輸入：prompt()語句
語法規則
（1）JavaScript對換行、縮進、空格不敏感。
備註：每一條語句末尾要加上分號，雖然分號不是必須加的，但是為了程序今後要壓縮，如果不加分號，壓縮之後將不能運行。
（2）所有的符號，都是英語的。比如括號、引號、分號。
（3）JavaScript的註釋：
單行：//
多行：/* */
變量
變量名有命名規範：只能由英語字母、數字、下劃線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字。
變量的類型
數值型：number
字符串型：string
變量格式轉換
parseInt()：字符串轉數字
數據類型
數據類型包括：基本數據類型和引用數據類型
基本數據類型
number、string、boolean、null、undefined
引用數據類型
Function、Object、Arrray、String、Date
運算符
賦值運算符、算數運算符、比較運算符、特殊情況（字符串拼接+字符串運算 ）
賦值運算符
算數運算符
比較運算符
數據類型轉換
1.將數值類型轉換成字符串類型
2.將字符串類型轉換成數值類型
3.任何數據類型都可以轉換為boolean類型
流程控制
if 、if-else、if-else if-else
邏輯與&&、邏輯或||
switch
while循環
do_while
for循環
雙重fo循環
常用內置對象
數組Array
數組的常用方法
字符串String
Date日期對象
Math 內置對象
函數
就是將一些語句進行封裝，然後通過調用的形式，執行這些語句。
函數的作用：
將大量重復的語句寫在函數裏，以後需要這些語句的時候，可以直接調用函數，避免重復勞動。
簡化編程，讓編程模塊化。
定義
function 函數名字(){}
調用
函數名字();
偽數組 arguments
DOM的事件操作
事件 JS是以事件驅動為核心的一門語言。
事件的三要素：事件源、事件、事件驅動程序。
事件源：引發後續事件的html標簽。
事件：js已經定義好了（見下圖）。
事件驅動程序：對樣式和html的操作。也就是DOM。
常見事件
獲取事件源的方式
var div1 = document.getElementById("box1"); // 方式一：通過id獲取單個標簽
var arr1 = document.getElementsByTagName("div1"); // 方式二：通過標簽名 獲得 標簽數組，所以有s
var arr2 = document.getElementsByClassName("hehe"); // 方式三：通過類名 獲得 標簽數組，所以有s
綁定事件的方式
方式一：直接綁定匿名函數
方式二：先單獨定義函數，再綁定
方式三：行內綁定
事件驅動程序
onload事件
當頁面加載（文本和圖片）完畢的時候，觸發onload事件。
DOM介紹
DOM：文檔對象模型。DOM 為文檔提供了結構化表示，並定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規範。
DOM就是由節點組成的。
解析過程
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然後操作的時候修改的是該元素的屬性。
DOM樹（一切都是節點）
在HTML當中，一切都是節點：（非常重要）
元素節點：HMTL標簽。
文本節點：標簽中的文字（比如標簽之間的空格、換行）
屬性節點：：標簽的屬性。
整個html文檔就是一個文檔節點。所有的節點都是Object。
DOM可以做什麽
找對象（元素節點）
設置元素的屬性值
設置元素的樣式
動態創建和刪除元素
事件的觸發響應：事件源、事件、事件的驅動程序
DOM節點的獲取
var div1 = document.getElementById("box1"); // 方式一：通過id獲取單個標簽
var arr1 = document.getElementsByTagName("div1"); // 方式二：通過標簽名 獲得 標簽數組，所以有s
var arr2 = document.getElementsByClassName("hehe"); // 方式三：通過類名 獲得 標簽數組，所以有s
獲取父節點
獲取單個的子節點
獲取所有的子節點
nodeType
nodeType == 1 表示的是元素節點（標簽） 。記住：元素就是標簽。
nodeType == 2 表示是屬性節點
nodeType == 3 是文本節點
DOM節點操作
創建節點
新的標簽(元素節點) = document.createElement("標簽名");
插入節點
方式一:
父節點.appendChild(新的子節點);
方式二:
父節點.insertBefore(新的子節點,作為參考的子節點);
刪除節點
父節點.removeChild(子節點);
復制節點（克隆節點）
要復制的節點.cloneNode(); // 括號裏不帶參數和帶參數false，效果是一樣的。
要復制的節點.cloneNode(true);
設置節點的屬性
獲取節點的屬性值
方式1：
元素節點.屬性;
元素節點[屬性];
方式2：（推薦）
元素節點.getAttribute("屬性名稱");
設置節點的屬性值
方式1舉例：（設置節點的屬性值）
myNode.src = "images/2.jpg" //修改src的屬性值
myNode.className = "image2-box"; //修改class的name
方式2：（推薦）
元素節點.setAttribute(屬性名, 新的屬性值);
刪除節點的屬性
元素節點.removeAttribute(屬性名);
innerHTML、innerText 、value
JS中的面向對象
創建對象的幾種常用方式
1.使用Object或對象字面量創建對象
2.工廠模式創建對象
3.構造函數模式創建對象
4.原型模式創建對象
定時器
1、setTimeout() 2、setInterval()
setTimeOut() 只在指定時間後執行一次
setInterval() 在指定時間為周期循環執行
BOM
BOM的常見內置方法和內置對象
彈出系統對話框、打開窗口、關閉窗口
location對象
屬性
href：跳轉
hash 返回url中#後面的內容，包含#
host 主機名，包括端口
hostname 主機名
pathname url中的路徑部分
protocol 協議 一般是http、https
search 查詢字符串
對象的方法
location.reload()：重新加載
navigator對象
history對象
client、offset、scroll系列
前端JavaScript部分簡單整理