從0到1：JavaScript 快速上手

初學者學，我強烈推薦這樣的書，起碼讓初學者很好上手與理解，深層理解，肯定需要大量的實戰與閱讀內容更深的書籍。 因爲之前在菜鳥和w3c自學過，這本書也算快速翻閱，對於初學者是比較友好的。 學完這個系列，建議學友到b站搜一下Mosh的Javacscript基礎篇，完結版，介紹了es6以及js新語法。比如現在的js用let和const定義變量，而不再推薦var，裏面有很多編程思路，推薦學。 至於是否需要學原生js，我個人認爲非常必要。即便現在是依託框架的年代，想一枝獨秀或是個中高手，那麼基礎之路必不可少。任何的查錯與規避，都來源於對基礎的理解。高手都是理解核心底層，再將代碼寫出花的。另一個必須學的原因在於，你並不知道工作的公司到底用框架還是沒用框架，到底用ie開發還是不用ie開發。因爲，從工作可能與自身突破，都必須學。 另，必須習慣查官方文檔以及看英文提問。 我加油，不是碼農，也可以寫更漂亮的代碼。

應該是目前閱讀過的最適合初學者學習JavaScript的書了，非常推薦初學者閱讀。

確實從0到1 前面因爲有java基礎大同小異看的很快 後面開始上強度 學語言果然還是要多練習 期待明年開始多投入實踐

這本書太老了，很多內容都過時了，初學者還是找本介紹ES6+標準的書看比較好。

ai 時代，沒必要看這種書，跟網上課程學然後練習更重要。

# Text ## Part 1 語法基礎 ### C1 JavaScript簡介 - 嵌入到HTML頁面中的編程語言，由瀏覽器一邊解釋一邊執行 - HTML用於控制網頁的結構，CSS用於控制網頁的外觀，而JavaScript控制着網頁的行爲 - “沒用的知識絕對不會囉唆，但是重要的知識會反覆提醒。”, 很好的學習方式 - 不是“會動”的頁面就叫動態頁面，靜態頁面和動態頁面的區別在於是否與服務器進行數據交互 - 學完JavaScript入門(也就是本書內容)後，不要急於去學習JavaScript進階的內容而應該先去學習jQuery。經過jQuery的學習，可以讓我們對JavaScript的基礎知識有更深一層的理解。學完了jQuery，再去學習JavaScript進階的內容會更好 - 引入 - 外部js, 與CSS不同的時, js既可以在head中引入, 又可以在body中引入 - 內部js, 放在script中間的js代碼 - 元素屬性js, 在元素的事件屬性中直接編寫js或調用函數 - document.write(): 在頁面輸出一個內容 - alert(): 彈出一個對話框 ### C2 語法基礎 - 變量與常量 - 標識符, [a-zA-Z0-9_$], 數字不開頭 - var 變量名=值; - var 大寫常量名=值; - 數據類型 - 基本數據類型, 數字, 字符串, 布爾值, 未定義值, 空值 - 引用數據類型, 對象(數組是對象的一種) - 數字不分整型和浮點型 - 字符串用單引號or雙引號括起來 - 布爾值只有true/false - 未定義值, 聲明瞭但是沒賦值, 不知道什麼類型, 未定義, undefined - var n = null; 空值, 沒給它分配內存空間 - 運算符 - num+num=num, str+str=str, num+str=str - 其他運算符和Java的沒啥區別 - 類型轉換 - 字符串轉數字, Number轉純數字, parseInt和parseFloat接收首字母是數字的串 - 數字轉字符串, 與空串相加, toString() - 轉義字符和註釋也都和Java一樣 ### C3 流程控制 - 同Java ### C4 認識函數 - 定義函數的關鍵字, function - js的函數調用和Java有區別, 4種調用方式 - 直接調用 - 在表達式中調用, 返回值參與表達式運算 - 在超鏈接中調用, a元素的href="javascript: 函數名", 點擊就調用 - 在事件中調用, 比如單擊按鈕, 寫在按鈕的事件屬性裏 - 嵌套函數, 閉包, 都是js有的 ### C5 字符串對象 - 內置對象, 字符串對象String, 數組對象Array, 日期對象Date, 數值對象Math - str.length - str.toLowerCase(), toUpperCase() - str.charAt(n) - str.substring(begin, end), 半開半閉 - str.replace(子串, 想要替換子串的串) - str.replace(正則表達式, 替換串) - str.split("分隔符"), 返回一個數組 - str.indexOf(串), str.lastIndexOf(串), 不存在返回-1 ### C6 數組對象 - var arr = new Array(a1, a2, ..., an); - var arr = [a1, a2, ..., an]; 語法糖 - arr.length - arr.slice(begin, end), 切片[begin, end) - arr.unshift(a1, a2), arr.push(a3, a4), 在開頭添加和在結尾添加 - arr.shift(), arr.pop(), 在開頭/結尾刪一個 - arr.sort(自定義函數名), - arr.reverse(), 顛倒 - arr.join("連接符"), 把arr連接成str ### C7 時間對象 - var date = new Date(); - 方法, getXXX(), setXXX() - 你不需要把所有的知識都記住，記住常用的就可以走得很遠 ### C8 數學對象 - Math.PI, 角度 * Math.PI / 180 -> 弧度制, 實際開發中用的都是弧度 - max/min/floor/ceil/ - sin/cos/atan2 - atan2(x)和atan(x)是不一樣的，atan2(x)能夠精確判斷角度對應哪一個角，而atan(x)不能。因此在高級動畫開發中，我們大多數用的是atan2(x)，基本用不到atan(x) - random, [0, 1) ## Part 2 核心技術 ### C9 DOM基礎 - DOM，全稱是“Document Object Model(文檔對象模型)”，它是由W3C定義的一個標準 - 樹型結構, 我們在操作元素時，其實就是把這個元素看成一個對象，然後使用這個對象的屬性和方法來進行相關操作 - nodeType, 元素節點1, 屬性節點2, 文本節點3 - 獲取元素, getElementBy - Id, getElementById(　)獲取的是一個DOM對象，我們在給變量命名的時候，習慣性地以英文“o”開頭，以便跟其他變量區分開，這可以讓我們一眼就看出這是一個DOM對象 - TagName, 通過標籤名獲取, 返回多個元素, 注意有s, getElementsByTagName() - 返回一個類數組, 只能用下標和length, 方法不能用 - ClassName, 也是s, - querySelector[All]("選擇器") - ByName, 表單元素有name - 實際上，getElementById()和getElementsByTagName　)有以下3個明顯的區別(很重要，認真理解)。 - getElementById()獲取的是1個元素，而getElementsByTagName()獲取的是多個元素(僞數組)。 - getElementById()前面只可以接document，也就是document.getElementById()。getElementsByTagName()前面不僅可以接document，還可以接其他DOM對象 - getElementById()不可以操作動態創建的DOM元素，而getElementsByTagName()可以操作動態創建的DOM元素。 - document.title, document.body - 創建元素, createElement()創建元素節點, createTextNode()創建文本節點 - 在操作動態DOM時，設置元素class用的是className而不是class，這是初學者最容易忽略的地方。爲什麼JavaScript不用class，而是用className呢？其實我們在“2.2變量與常量”這一節介紹過，JavaScript有很多關鍵字和保留字，其中class已經作爲保留字了(可以回顧一下),所以就另外取了一個className來用 - a.appendChild(b), 讓b成爲a的子節點, 插到末尾 - a.insertBefore(b, c), 在c前面插入b - 動態DOM, 以實現動畫效果 - 刪除元素, a.removeChild(b) - 複製元素, obj.cloneNode(bool), bool true/1, 遞歸賦值元素及其子元素 - 替換元素, A.replaceChild(new, old); ### C10 DOM進階 - HTML屬性操作(對象屬性), 使用js來操作一個元素的HTML屬性 - class屬性用className來代替, 因爲class已經作爲js的關鍵字了 - 兩種方式, “對象屬性方式”和“對象方法方式”，這兩種方式都可以操作靜態HTML的屬性，也可以操作動態DOM的屬性。只有“對象方法方式”纔可以操作自定義屬性 - 獲取CSS屬性, getComputedStyle(obj).attr - 爲什麼這麼麻煩要用個方法呢, 因爲css的計算很麻煩, 直接用屬性獲取, 無法獲取外部樣式中的設置 - 設置CSS屬性, obj.style.attr="value" - DOM遍歷, 查找父子兄弟 - innerHTML, innerText - innerHTML後面的字符串可以換行寫, 只需要在字符串每一行後面加上個反斜槓（\）就可以了 ### C11 事件基礎 = 在JavaScript中，一個事件包含3部分 - 事件主角：是按鈕？還是div元素？還是其他？ - 事件類型：是點擊？還是移動？還是其他？ - 事件過程：這個事件都發生了些什麼？ - 鼠標事件 - onclick單擊, 並不是只有按鈕有, 任何元素都可以添加單擊事件 - onmouseover鼠標移入, onmouseout鼠標移出 - onmousedown鼠標按下, onmouseup鼠標鬆開 - 鍵盤事件 - onkeydown鍵盤按下, onkeyup鍵盤松開 - 表單事件 - onfocus獲取焦點, onblur失去焦點, 比如點文本框想輸入東西, 文本框獲取光標, 只有表單和超鏈接有焦點事件 - 編輯事件 - oncopy, onselectstart, oncontextmenu - 頁面事件 - onload, onbeforeunload - 在默認情況下，瀏覽器是從上到下來解析一個頁面的。當解析到“var oBtn = document.getElementById（"btn"）;”這一句時，瀏覽器找不到id爲btn的元素，就會感到很疑惑：怎麼半路殺出個不認識的程咬金來呢, 需要onload來解決 - 瀏覽器從上到下解析HTML文檔，當它解析到函數的定義部分時，它也會直接跳過。如果瀏覽器立刻解析，函數豈不是自動執行了？會自動執行的，這還是函數嗎？ ### C12 事件進階 - 如果我們要給元素添加一個事件，一般會通過操作HTML屬性的方式來實現，這種方式其實也叫作“事件處理器” - 缺點, 不能爲一個元素添加多個相同事件 - 事件監聽器, 可以爲同一個元素添加多個相同的事件 - obj.addEventListener(type, fn, false) - type是個string, 事件類型, 比如"click", 不需要加on - fn是個函數名, 或者是個匿名函數 - false表示事件冒泡階段調用 - ogj.removeEventListener(type, fn, false), 解綁, fn一定需要是函數名, 不能是匿名函數 - 在實際開發中，我們有可能會多次使用window.onload，但是會發現JavaScript只執行最後一次window.onload。爲了解決這個問題，我們可以使用addEventListener（　）來實現 - window.addEventListener("load", fn, false); - 或者用自定義的addLoadEvent - event對象, 一個事件對應一個event對象 - event對象在IE8瀏覽器及以下版本還有一定的兼容性, 可能還需要採取“var e=e||window.event;”來處理 - type事件類型 - keyCode 鍵碼值 - shiftKey 是否按下Shift - ctrlkey 是否按下Ctrl - altKey 是否按下Alt - this - 哪個DOM對象（元素節點）調用了this所在的函數，那麼this指向的就是哪個DOM對象 ### C13 window對象 - 一個窗口就是一個window對象，這個窗口裏面的HTML文檔就是一個document對象，document對象是window對象的子對象 - window對象及下面這些location、navigator等子對象，由於都是用於操作瀏覽器窗口的，所以我們又稱之爲“BOM”，也就是Browser Object Module(瀏覽器對象模型) - 常用方法 - 對於window對象，無論是它的屬性，還是方法，都可以省略window前綴 - window.alert() -> alert(w - window.open(url, target), 返回一個窗口對象w, 這個返回的窗口對象w.document.write, 就可以寫東西啦 - url指的是新窗口的地址，如果url爲空，則表示打開一個空白窗口。空白窗口很有用，我們可以使用document.write()往空白窗口輸出文本，甚至輸出一個HTML頁面 - target表示打開方式，它的取值跟a標籤中target屬性的取值是一樣的，常用取值有兩個：_blank和_self。當target爲“_blank(默認值)”時，表示在新窗口中打開；當target爲“_self”時，表示在當前窗口中打開 - 有一點需要提醒大家：如果你打開的是同一個域名下的頁面或空白窗口，就可以像上面那樣操作新窗口的元素或樣式；但是如果你打開的是另外一個域名下的頁面，是不允許操作新窗口的內容的，因爲涉及跨域的問題 - w.close() - 對話框, alert("abc\n"), comfirm("abc\n")用戶點確定返回true, 點取消返回false, prompt("abc\n")返回一個用戶輸入的字符串 - 定時器 var timer = setTimeOut(code, time), clearTimeout(timer) - code可以放 - 需要引號的, '一段代碼', '函數名()' - 無需引號的, 匿名函數, 函數名 - time的單位是ms - setInterval, clearInterval - location對象 -> 當前窗口的URL - href, -> window.location.href - search ?後面的內容 - hash #後面的內容 - navigator對象, 獲取瀏覽器的類型 ### C14 document對象 - document.title, document.body - document.URL只讀, window.location.href讀寫 - A跳到B, 在B用document.referrer獲取A的地址 - 方法, write, writeln

從零到一系列裏有三合一（html，js，css）也有進階（es6，css3，html5），還有jquery的書，按推薦路線一本一本讀輕鬆入門

先下結論：這本書是一本很好的JS入門書，按部就班的介紹基礎語法、DOM、事件等。 我之前也曾閱讀菜鳥教程等各種網站，但是每次看完都是感覺啥也不記得，這本書看完，我的腦海裏就有了一個Js常用的入門框架，這也許是書籍的魅力所在，更系統，更簡練。

很適合沒有基礎的看，太基礎了，甚至很多基礎但是很重要的知識點並沒有講，想要深入學習還得是看JavaScript高級程序設計。

太好了，比那些網上所謂的神書更好，更適合新手，強力推薦，我看過網上所謂的程序設計和權威指南，只能說不適合新手，再次強烈推薦