JavaScript基礎

一個頁面分紅三個部分，結構，樣式，行爲。

HTML表明了頁面的結構（骨架），CSS表明了頁面的樣式（皮膚），JavaScript表明了頁面的行爲（這種行爲是被動的）。主動的行爲須要一個大腦，後端做爲咱們的大腦替咱們分析執行數據，執行行爲，咱們和大腦之間的聯繫AJAX（中樞神經）。

 

Paste_Image.png

1.JavaScript是什麼，它能作什麼？

對頁面進行渲染，讓頁面有行爲。讓頁面動起來；

 

Paste_Image.png

JavaScript簡史

JavaScript在設計之初只是爲了作表單驗證的。可是現現在，JavaScript已經成爲了一門功能全面的變成語言，已是WEB中不可或缺的一部分，現在的JavaScript是一門既簡單又複雜的語言，說它簡單是由於學會它，幾乎只要一個小時就能夠了。可是若是你想要真正掌握它，須要幾年的時間。

JavaScript發展

NetScape公司在1995年着手開發一種名爲liveScript的腳本語言， 爲了營銷目的搭上當時媒體熱炒的Java順風車，臨時改名liveScript爲JavaScript。其實JavaScript和Java沒有一點關係。JavaScript1.0得到巨大成功。

NetScape公司趁熱打鐵繼續發佈JavaScript1.1版本，使得Web得到更高的關注，同時奠基了本身在瀏覽器界的霸主地位。

若是事情一直這樣下去那麼NetScape可能依舊使咱們現代瀏覽器的霸主，但是在1996年互聯網巨頭微軟公司進入瀏覽器領域，推出JScript，和NetScape公司開始爭奪霸主地位。

 

Paste_Image.png

最讓人擔憂的問題也所以出現了，當時的JavaScript和JScript是徹底不一樣的兩個版本，這門語言沒有一個標準存在，業內的擔憂（吐槽）日益加重。終於，多方聯合共同制定了一個標準，這個標準也就是ECMAScrip，ECMAScript做爲各自JavaScript實現的基礎。雖然制定標準只花費了幾個月，可是這幾個月卻對將來20年的JavaScript發展起到了不可或缺的做用。

瀏覽器的發展經歷了無數的坎坷，各個瀏覽器發現這塊巨大的蛋糕後誰都不肯放棄，因而激烈的廝殺開始了。

第一次瀏覽器大戰：

原始時期，微軟發佈了IE瀏覽器，和網景netSpace navigator大打出手，最後網景失敗，將公司賣給AOL，核心團隊所有離職，第一回合，微軟獲勝，netSpace昔日霸主隕落。

 

Paste_Image.png

可是NetScape並無放棄，在1998年公開源碼並從新命名爲 Mozilla，並重寫所有程序，在2002年發佈了第一個瀏覽器版本，firefox登場。在2004年已經開始叫板IE瀏覽器，iE推出IE7與之抗衡，拉開了第二次瀏覽器大戰的序幕。

第二次瀏覽器大戰：

第二次瀏覽器大戰再也不是IE和FF的兩家之爭，在現代瀏覽器羣雄並起，同時挪威的 Opera ，幾乎全部的智能手機配備的都是這個瀏覽器，擁有全世界最快V8引擎的Chrom,以及蘋果公司的Safari，所有加入瀏覽器爭奪。至今戰爭還在進行，可是對於瀏覽器大戰咱們看到的結果大可能是推動了瀏覽器的發展，爲更好的用戶體驗作出了很是積極的貢獻。

 

Paste_Image.png

JavaScript的組成
ECMAScript 、BOM 、DOM；

ECMAScript:這是一個標準，它規定了語法、類型、語句、關鍵字、保留字、操做符、對象。（至關於法律 ）

 

Paste_Image.png

BOM（瀏覽器對象模型）：能夠訪問瀏覽器窗口的的瀏覽器對象模型，對瀏覽器窗口進行操做。

 

Paste_Image.png

DOM（文檔對象模型）：DOM把整個頁面映射爲一個多層節點結構。HTML頁面組成都是某種類型 的節點，這些節點又包含着不一樣類型的數據。

 

Paste_Image.png

如何寫JavaScript程序？

script標籤使用

<script></script> 

 src :  外聯script 標籤（當即調用,不能在該標籤內寫代碼）
 
 <script>
     
      //在標籤內書寫內容     
 
 </script>

 <script  src='javascript.js'>// 這裏面不能寫任何內容</script>

一切準備就緒，讓咱們從Hello Word開始吧。

document.write的使用 >>>> HelloWord    >>>  原樣輸出標籤。
 
 註釋 （一份好的代碼，要有三分之二的註釋）

 單行註釋： // 要註釋的內容。

 多行註釋：/* 註釋的內容寫在這裏 */ 

 原樣輸出標籤內容

若是我想在頁面中打印出：<strong>標籤怎麼辦？

若是按照正常的打印方式進行打印，毫無疑問，標籤會被瀏覽器解析。當咱們要打印標籤的時候要對對標籤進行轉義。

&lt  表明 < 

 &gt 表明 >

 document.write('<strong>強大的</strong>');

變量（別稱）

 

Paste_Image.png

他叫翠花，他是一隻熊。
熊的底層是什麼那？ 熊皮、熊掌、熊骨....， 那咱們每次呼叫這隻熊的時候都要叫她什麼？有一張熊皮，500公斤熊肉，第三塊小腳趾骨斷過的，那個玩意？
不！咱們叫她翠花！這就是這隻熊的別稱！放在計算機裏，這就是把這隻熊塞入了一個叫作翠花的變量裏。

怎麼聲明一個變量那？

關鍵字 var 變量名 a = '<strong>強壯的</strong>'

var 聲明變量的底層原理：咱們所寫的程序運行在內存中，當咱們使用關鍵字var 聲明一個變量的時候，計算機會從內存中留出必定儲存空間，爲咱們存放不一樣類型的內容。

分清左右兩側的意義：

JavaScript中的 ‘’=‘’ 和咱們數學中的 ‘’ = ‘’不同，在JavaScript中‘’=‘’的做用是賦值（取別稱）。 
   
 var a = '<strong></strong>';  這句話分紅兩個部分。

 左值：在等號左側，是變量名（同時被賦值）
 
 右值 ：在等號右側，是存放進變量中的東西（給變量賦值）

變量的類型（由於存放進變量中的數據是放在內存中的，計算機只識別0，1，因此須要對不一樣類型的數據進行轉義，轉義的結果會致使所需空間不一樣，因此JavaScript中分紅不少種數據類型，以便計算機儲存時使用）

數字類型(number)：1234567890

 字符類型(string)：'123456','字符串類型',.....（有單引號或者雙引號）

 未定義類型(undefined)：這是一種特殊類型，當變量被聲明可是沒有被賦值的時候，那麼該變量的類型爲undefined；

 布爾值類型：true，false；

 對象類型：object；

怎樣直觀地區分不一樣的數據類型那？

一個關鍵字 typeof
 
 變量使用小技巧: 聲明一串變量:var a=1,b=2,c=3;（不推薦初學者使用這樣的變量聲明方式，由於這樣的變量聲明方式會致使註釋不明確。）

 變量命名規範：（匈牙利命名法：駝峯命名法）

爲何要存在命名規範那？

你的代碼並非只有你一我的看，變量既然是別稱，那麼別稱就要有特殊的含義：
 舉個栗子：翠花，咱們能從這個名字中獲得什麼信息那？
（這個名字的主人性別應該是女的，家中父母的一個美好願景）；

咱們從這些名字中可以讀出不少的含義，是由於咱們的語言常識，一樣，變量也有一套相似的標準，表明了各類各樣的含義，這些含義以下：

 

Paste_Image.png

第二個規則：

開頭必須爲字母或者$ 或 _

想要用break做爲變量可不能夠那？

關鍵字：

這些關鍵字用於執行特定操做等。按照規則，關鍵字也是語言保留的，不能用做標識符。

 

Paste_Image.png

保留字：將來可能做爲，標識符存在。

 

Paste_Image.png

alert()方法

alert()使用 。 中止瀏覽器加載代碼。

瀏覽器解析代碼順序。（從上到下，從左到右）；

邏輯運算符：

var a=1,b=2;

a+b=3 

a - b=-1 

a * b=2

a / b=0.5

 a % b=1


    var  a='1', b='2';

                      a * b=2 ;

    a / b=0.5;

    a - b=-1;

    a + b =???

不一樣：和咱們概念裏的邏輯運算符不少都是不同的。

• = == === 這些都不同。

避免問題出現（一眼就看出來了）：

讓計算機告訴我：typeof 關鍵字；（數據類型的檢測，意義在於確認是否可以被使用）；

編程習慣：分號，雖然不加分號在JavaScript語法上沒有問題，可是建議不要省略分號，加了分號以後能夠用軟件壓縮。良好的變成習慣（JavaScript權威指南）上的理由。

浮點數：

你的電腦作着正確的二進制浮點運算，但問題是你輸入的是十進制的數，電腦以二進制運算，這二者並非老是轉化那麼好的，有時候會獲得正確的結果，但有時候就不那麼幸運了；

alert(0.7+0.1); //輸出0.7999999999999999

類型轉換：alert(0.6+0.2); //輸出0.8；

var a=3,b='10',c=true;

    alert(a+b);

    alert(b+c);

    alert(a+c);

運算結果好像並非咱們想要的：應該怎麼辦那？當咱們想作數學運算的時候，應該先對全部的數據類型進行統一（統一成數字格式），這時候咱們就該用到數據類型的轉換。

數據類型轉換方法：

 parseInt();

 parseFloat()；

咱們嘗試一下數據轉換的結果：

認識NaN：他是一種特殊的Number類型結果，表明意外轉換的數字，NaN和任何東西都是不等的。

關於浮點數：Math.round()四捨五入取整浮點數。

賦值操做：（JavaScript中存在很是多的簡寫）

var a=1;

  a=a+1;

  a+=1;

  alert(a)

這些固然還包括 -= 、*=、/=、%=

這些賦值操做符的結果都是什麼？

一個更簡便的寫法 a++ ; a - -；本文做者祈澈姑娘，轉載請標明做者和文章出處，創做不易。