一. 開發工具
vscode 、sublime 、webstromjavascript
vscode 官網下載,下載插件css
插件 Chinese 中文插件html
在瀏覽器打開 :前端
- view in browser // 在瀏覽器打開 - auto close tag / /自動添加關閉標籤 - JavaScript (ES6) code snippets // ES6片斷 - Bracket Pair Colorizer // 高亮顏色對比 - color highlight // 顏色 - html css support // HTML css 支持 - background // 背景圖片 好看 - live server // (實時刷新)
二.關於瀏覽器
1. 瀏覽器發展
- 1990年:蒂姆·伯納斯-李發明了第一個網頁瀏覽器WorldWideWeb,後更名爲Nexus
- 1993年:馬克 安德森在美國伊利諾大學開發了MOSIAC瀏覽器,顯示圖片,真正意義圖形瀏覽器,必定要記得這個瀏覽器
- 1994年: 馬克 安德森和吉姆 克拉克（硅圖SGI）成立了一個公司MOSIAC comunication corporation 由於商標權問題更名爲Netscape comunication corporation網景通信公司,開發了Netscape navigation(大名鼎鼎網景瀏覽器)
- 1995年:IE收購spy glass,得到了MOSIAC的使用和商標權.更名爲IE瀏覽器
- 1998年,網景競爭失利之後成立了非正式組織Mozilla,網景也別美國在線收購
- 2003年,IE員工與原Netscape成立火狐,同年Opera興起,蘋果也推出Safari
- 2008年:谷歌很空出世
2. 瀏覽器內核分類
1. 谷歌瀏覽器 +大部分手機瀏覽器 weikit/blink內核 2. 火狐瀏覽器 Gecko內核 3. Opera瀏覽器 Presto/blink內核 4. IE瀏覽器 Trident內核 5. Safari瀏覽器 webkit內核
3. 瀏覽器的組成
三. 關於JS
1.JS的發展歷史
-
JS的誕生
在1995 年 Netscape，一位名爲 Brendan Eich 的工程師創造了 JavaScript，隨後在 1996 年初，JavaScript 首先被應用於 Netscape 2 瀏覽器上。最初的 JavaScript 名爲 LiveScript（活力腳本），後來由於 Sun Microsystem 的 Java 語言的興起和普遍使用，Netscape 出於宣傳和推廣的考慮，將它的名字從最初的 LiveScript 更改成 JavaScript——儘管二者之間並無什麼共同點。這即是以後混淆產生的根源。。程序員
幾個月後，Microsoft 隨着 IE 3 推出了一個與之基本兼容的語言 JScript（注意微軟的人生哲學，當它發現別人的東西很好的時候，就必須擰巴的推出本身的，而後本身的又被市場排斥，又開始兼容別人的）。又幾個月後，Netscape 將 JavaScript 提交至 Ecma International（一個歐洲標準化組織）， ECMAScript 標準初版便在 1997 年誕生了，隨後在 1999 年以 ECMAScript 第三版的形式進行了更新，從那以後這個標準沒有發生過大的改動。因爲委員會在語言特性的討論上發生分歧，ECMAScript 第四版還沒有推出便被廢除，但隨後於 2009 年 12 月發佈的 ECMAScript 第五版引入了第四版草案加入的許多特性。第六版標準已經於2015年六月發佈 。web
-
JS的發展
2003年： 頁面上漂浮的廣告、彈窗廣告；因此當時的瀏覽器就推出一個功能，禁用廣告，實際上本質就是禁用JavaScript。瀏覽器
**2004年：**谷歌打開了Ajax這個潘多拉的盒子，今後JavaScript被人重視，不少人開始學習JS語言。服務器
**2007年：**三層分離，iPhone發佈，人們開始重視用戶體驗。你們發現了，JavaScript是web頁面中製做交互效果惟一的語言，因此把JS的重視程度，提到了至關高的一個地位。
2008年：Chrome瀏覽器發佈，V8引擎加快了JS的解析，以前的瀏覽器解析JS的時候卡頓卡頓的，動畫效果是蹦蹦的。在Chrome裏，它的引擎叫作V8，運行JS很流暢。
2009年：jQuery變得流行，解決了瀏覽器兼容問題，製做頁面效果變得簡單，愈來愈多的初學者願意學習JavaScript。
2011年：Node.js獲得普遍應用，實際上就是把JavaScript運行在了服務器上，單線程非阻塞，可以讓企業用最小的成本實現後臺網站，好比以前4萬的服務器都卡，如今用了node以後，4000的機器都很流暢。
2015年：ECMA6發佈，叫作ECMA2015。重量級的改變，把語言的特性顛覆性的一個加強。
2.JS的特色
弱類型,解釋性,單線程
3.JS的三大組成部分
-
ECMAScript 爲JS基本的語法 eama-262
語法 標準( 規定js使用規則 ), js是ECMAScript的實現
-
DOM Document Object Model 文檔對象模型
提供和指定標準的組織是w3c
提供頁面元素和方法的整合工具箱，咱們能夠直接使用裏面關於文檔對象的一系列方法, 這使咱們,能夠操做標籤.
-
BOM Browser Object Model 瀏覽器對象模型
提供操做瀏覽器的方法的整合工具箱. 因此js裏面,有一些東西,是關於瀏覽器的,如彈窗,右鍵的菜單,滾動條.
4.JavaScript用途
前端三層
結構層 html 語義的角度描述頁面的結構
樣式層 css 審美的角度裝飾頁面
行爲層 JavaScript 交互的角度提高用戶體驗
用來製做頁面交互,提高用戶體驗
禁用JavaScript 網頁講不能正常顯示顯示
5. JS代碼存放在位置
-
外鏈 爲告終構,樣式,行爲相分離,通常開發使用外鏈
src引入便可,沒啥好說的 能夠在外部js裏面 寫上window.onload = function(){} 把邏輯寫在這個函數裏
-
內嵌 學習多使用內嵌
存放在
<script>標籤內,js代碼的解析順序,基本從上至下,通常js存在在head裏,或者body結束標籤前,建議所有寫在body結束前.須要不少js代碼的頁面若是把js所有寫在頭部,可能會致使很明顯的延遲.(運行js瞬間 中止對html文檔的渲染) (還有個緣由是 爬蟲還檢索網頁時,一開始爬到不少的js文件,就會放棄掉你這個頁面的主幹,會下降網頁的一個排名)
-
行內 不推薦使用,不利於調試和維護
存在標籤內
<div onclick='alert("我愛你")'></div>
四. 學習方法
- 要多去「品」程序，多去思考內在邏輯，讀懂每一行代碼！
- JS基本沒用重複性勞動,大可能是創造性的勞動。HTML、CSS都是重複的勞動
- 永遠不要背程序，每個程序都必須本身會寫，重複老師的上課案例。認真作做業
五. Hello world
學習任何語言,都要先輸出點什麼,程序員都習慣輸出"Hello world",世界,你好,.
<script type="text/javascript"> alert("Hello world") </script>
1. 內嵌方式的注意
咱們學習就使用內嵌方式
JavaSript程序，要寫在HTML頁面中，運行頁面的時候，這個頁面上的JS也就一塊兒運行了。也就是說，js的運行必須有宿主環境，最最多見的宿主環境，就是瀏覽器。
JS寫在<script>標籤對兒裏面，type屬性就是類型，text/javascript就是純文本的javascript；
注意，這個type必須寫準確，能夠不寫，可是要寫，必定要寫準確，不然失效。
2. alert()語句
alert在英文中是’警報’的意思,是讓頁面彈出警告框.
這條語句是一個內置函數,至於什麼是函數,先不用瞭解,以後會學的,咱們只要知道這是瀏覽器給咱們自帶的一個方法,會使用就OK啦
alert(「hello world」);
3. 控制檯
控制檯是Chrome瀏覽器中檢查功能,快捷鍵是F12,英文是console
程序中的錯誤會在控制檯輸出.是調試程序的利器.
好比有語法錯誤
alert(你好);
若是想本身在控制檯中輸出點什麼,可使用語句
console.log();
console.log就是控制檯,log是日誌的意思,表示打印
好比:
console.log("hello world");
3.行文特性(書寫注意)
- 英文半角符號
- JavaScript語句和語句之間換行、空格、縮進都不敏感。
- 語句後面的分號，不是必須寫的，若是語句是一行一行寫的，那麼分號是沒有必要的。可是壓縮頁面的時候，語句結尾的分號，很是重要。
- 咱們把頁面作好以後，一般都會進行壓縮，用軟件把全部的空格、換行都去掉。此時，語句末尾的分號顯得很是重要，若是去掉分號，將不能執行。
4.註釋方式
註釋給別人看的,對讀程序是一個提示做用
複習HTML和css註釋方式
HTML註釋方式
<!-- HTML註釋方式 -->
CSS註釋方式
/* CSS註釋方式 */
JavaScript註釋方式
- 單行註釋
// 單行註釋
- 多行註釋
/* 我是被註釋的第一行 我是被註釋的第二行 */
JavaScript註釋注意點
多行註釋不能嵌套
我是註釋第一行
/* 註釋錯誤的註釋方式 */