JavaScript簡介

JavaScript簡介

瀏覽器

歷史

• 1990年末，歐洲核能研究組織（CERN）科學家Tim Berners-Lee(蒂姆·伯納斯-李)，在全世界最大的電腦網絡——互聯網的基礎上，發明了萬維網（World Wide Web），今後能夠在網上瀏覽網頁文件。最先的網頁只能在操做系統的終端裏瀏覽，也就是說只能使用命令行操做，網頁都是在字符窗口中顯示。

• 1992年末，美國國家超級電腦應用中心（NCSA）開始開發一個獨立的瀏覽器，叫作Mosaic。這是人類歷史上第一個瀏覽器，今後網頁能夠在圖形界面的窗口瀏覽。

• 1994年10月，NCSA的一個主要程序員Marc Andreessen(馬克·安德森)聯合風險投資家Jim Clark(吉姆·克拉克)，成立了Mosaic通訊公司（Mosaic Communications），不久後更名爲Netspace(網景)。這家公司的方向，就是在Mosaic的基礎上，開發面向普通用戶的新一代的瀏覽器Netscape Navigator。

• 1994年12月，Navigator發佈了1.0版，市場份額一舉超過90%。

• 1995年，網景公司爲了進行客戶端驗證，減小沒必要要的網絡請求，提升網絡效率，JS做者在10天以內，寫出LiveScript。

• 1995年12月，當時正逢Java比較火，爲了「榜大牌」，因此更名「JavaScript」。

• 1996年3月，Navigator 2.0瀏覽器正式內置了JavaScript腳本語言。

• 瀏覽器的一戰，微軟爲了推廣本身的IE瀏覽器，把IE捆綁到了Windows操做系統中，JScript，而且逐漸將網景公司擊敗。

• 一打敗利的果實：ECMAScript標準的確立；就是一個語言規範；只規定了如何進行分支判斷、如何定義變量、如何定義方法.....

• 短暫的和平期：微軟發現本身已經天下無敵了，而後就把IE6的開發團隊給解散了，在和平期間，JS這門語言主要作：表單驗證、簡單的特效、狗皮膏藥（廣告，當時被稱爲腳本語言）

• 瀏覽器的二戰：主角：谷歌、IE、火狐（網景的後代）。谷歌在2008年，藉助於ajax，開始火起來了，一方面提高渲染引擎的效率、另外一方面，提高JS解析引擎的效率，最終，二戰以谷歌的勝利結束。谷歌有了一款世界上效率最快的JS解析引擎，叫作chrome V8引擎。

• 注意：谷歌的 v8 引擎是用來解析執行JS代碼的。

五大瀏覽器

• 第一IE，微軟開發

• 第二火狐Firefox是網景的後代

• 第三谷歌Google

• 第四蘋果Safari

• 第五歐朋Opera

工做原理

• UserInterface 用戶界面，咱們所看到的瀏覽器

• Browser engine 瀏覽器引擎，用來查詢和操做渲染引擎

• Render engine 用來顯示瀏覽器內容，負責解析 HTML，CSS

• Networking 網絡，負責發送網絡請求

• JavaScript Interpreter JavaScript解析器，負責執行 JavaScript 的代碼

• UI Backend UI 後端，用來繪製相似組合框和彈出窗口

• Data Persistence 數據持久化，數據存儲，cookie，HTML5 中的 sessionStorage

什麼是JavaScript

• 是一門弱類型的解釋型的編程語言

• 編程語言的特色就是具備邏輯處理能力

JavaScript組成

• ECMAscript 制定了JavaScript 的語法規範

• DOM(document object model) 是一個工具庫，提供JavaScript 操做頁面上元素的 API

• BOM(borwer object model) 是一個工具庫，提供JavaScript 操做瀏覽器部分功能的 API

JavaScript書寫位置

內部引用

<script>
  console.log('hello word');
  alert('hello word');
</script>

外部引用

通常選擇這種方式

<script src="main.js"></script>

內嵌語句

<input type="button" value="baidu" onclick="window.location.href='http://www.baidu.com'">

JavaScript 輸出

有多種輸出方式，有 alert，document.write，prompt，console 等

<script>
    console.warn("警告框 通常在系統使用");
    console.error("錯誤提示信息 通常在系統使用");
    console.info("輸出信息");
</script>

script標籤屬性

• language 已廢棄。原來用於代碼使用的腳本語言，大多數瀏覽器忽略它，不用了

• src 要引入的外部文件

• type 表示腳本語言的類型

• async 值能夠省略，當即異步下載外部 JS，不影響頁面其餘的操做，JS 下載完當即執行

• defer 只能夠省略，腳本延遲文檔徹底被解析和顯示後再執行，只有外部腳本可使用

數據類型

數值型

• 進行算數計算時，八進制和十六進制表示的數值最終都將被轉換成十進制數值

• 不能判斷兩個浮點數是否相等

• 最小值：Number.MIN_VALUE，這個值爲 5e-324

• 最大值：Number.MAX_VALUE，這個值爲 1.7976931348623157e+308

• 無窮大：Infinity

• 無窮小：-Infinity

<script>
  console.log(Number.MIN_VALUE);//5e-324
  console.log(Number.MAX_VALUE);//1.7976931348623157e+308
  console.log(1.8e+308);//Infinity
  console.log(5e-325);//0
</script>

NaN

NaN!=NaN，NAN 是 number 類型，表示非數字

<script>
  var a=123;
  var b="qwe";//是NaN類型
  var c="123";
  var d=true;
  var e;//是NaN類型
  var f="";
  var g=NaN;//是NaN類型
  var h=null;
  var i=undefined;//是NaN類型
  console.log(isNaN(a));//false
  console.log(isNaN(b));//true
  console.log(isNaN(c));//false
  console.log(isNaN(d));//false
  console.log(isNaN(e));//true
  console.log(isNaN(f));//false
  console.log(isNaN(g));//true
  console.log(isNaN(h));//false
  console.log(isNaN(i));//true
</script>

轉義符

• \n 換行

• \t 製表

• \b 空格

• \r 回車

• \f 進制

• \ \ 斜槓

• \ ` 單引號

• \" 雙引號

• \xnn 十六進制

• \unnnn 十六進制

• 轉義符和實體不同

<script>
  console.log('我很喜歡"傳\'智\'播客"');
  alert("你好\n世界");
</script>

轉換字符串

• 轉換成字符串有三種方法：toString()、String()、字符串拼接

• 轉換成字符串時，toString()方法對undefined和null不適用，String()對全部數據類型都適用

轉換數值

• 轉換成數值有三種方法：Number()、parseInt()、parseFloat()

• 使用減乘除（加是拼接字符串）均可以。

• 值-0 不會使原數值發生改變

• Number()方法是轉換成數字，parseInt()是轉換成數字整數，parseFloat()是轉換成浮點型整數（小數）

• 下面幾種狀況轉換成數值類型：true 返回 1，false 返回 0，"hello" 返回 NaN，"" 返回 0，123 返回 123，"123abc" 返回 NaN，"abc123" 返回 NaN

• 字符串是數字類型的字符串，會轉變成數值，或者是數字兩邊有空格的字符串，也會轉變成數值。若是是數字之間有空格的字符串，會轉變成NaN。

轉換布爾值

• 強制轉換 Boolean()；隱式轉換!!(兩個感嘆號，取反再取反，原值不變，可是類型已經變成布爾型)

• Number 類型中，非0數字爲真，0爲假

• String 類型中，非空字符串爲真，空字符串爲假

• 布爾類型中，true 爲真，false 爲假

• undefined 爲假，null 爲假，object 爲真

邏輯運算符

短路操做

• &&(與)短路操做，若是第一個操做數可以決定結果，那麼就不會對第二個操做數求值

• ||(或)短路操做，若是第一個操做數的求值結果爲 true，就不會對第二個操做數求值了

優先級

• ()優先級最高

• 一元運算符 ++ -- !

• 算數運算符 先乘除膜 後加減

• 關係運算符 > >= < <=

• 相等運算符 == != === !==

• 邏輯運算符 先&& 後 ||

變量

概念規則

• 變量聲明未賦值，其值爲 undefined；變量能夠連續聲明而且賦值

• 變量時在計算機中存儲數據的一個標識符，根據變量名稱能夠獲取內存中存儲的數據。使用變量能夠方便的獲取或者修改內存中的數據。

• 規則：由字母、數字、$組成，區分大小寫，不能是關鍵字和保留字

• 規範：變量名稱要有意義，變量命名遵照駝峯命名法，首字母小寫，第二個單詞的首字母大寫

弱類型

• JS的變量所存儲的數據類型不在定義的時候肯定，而在賦值的時候肯定。因此被稱爲弱類型。

數組

數組遍歷

正向遍歷

<script>
  for (var i=0;i<arr.length;i++) {
    console.log(arr[i]);
  }
</script>

反向遍歷

<script>
  for (var i=arr.length;i>=0;i--) {
    console.log(arr[i]);
  }
  </script>

數組的 length 屬性

• 數組的 length 屬性能夠進行手動設置，數組的 length 屬性可讀可寫，字符串的 length 屬性可讀不可寫

冒泡排序

• 外層比較 arr.length-1 次，內層比較 arr.length-1 次

• 內層優化：外層比較arr.length-1次，內層比較arr.length1-1-i次

• 外層優化，加一個判斷條件，一旦符合判斷條件，馬上中止，省去冗餘的步驟