前端JavaScript部分簡單整理

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.原型模式建立對象


定時器
一、setTimeout() 二、setInterval()
setTimeOut()    只在指定時間後執行一次
setInterval()     在指定時間爲週期循環執行


BOM
BOM的常見內置方法和內置對象
彈出系統對話框、打開窗口、關閉窗口

location對象
屬性
    href：跳轉
    hash 返回url中#後面的內容，包含#
    host 主機名，包括端口
    hostname 主機名
    pathname url中的路徑部分
    protocol 協議 通常是http、https
    search 查詢字符串

對象的方法
location.reload()：從新加載

navigator對象
history對象


client、offset、scroll系列