結構層：HTML 從語義角度，描述頁面結構
樣式層：CSS 從審美的角度，美化頁面
行為層：JavaScript 從交互的角度，提升用戶體驗
語法概述
一、JS引入3種的方式：
1.內嵌引入，但不建議
2.通過`<script async='async'>`標簽引入，可放在head里面，為減少加載時間，一般放在body最后
3.建議通過link引入
type="text/JavaScript"可以省略
Sync:同步，一個人有序的做多件事
Async:異步，多個人有序的做多件事情
async='async'和defer='defer'都是異步下載，區別在：
async='async'是立即異步下載外部JS，不影響頁面其它的操作，js下載完畢立即執行；
defer='defer'是在js，css整個文檔都下載完后再執行，只有外部腳本可以使用
二、五種數據類型：
1.字符串類型string（""）
注意：引號既可以用單引號，也可雙引號 --建議單引號
-
a,如果字符串中有單引號，就用可引號
-
b,如果字符串內容中單雙引號都有，就用轉譯符,在引號前用。常用的轉譯符有：\"、換行\n、縮進\t
2.數值類型number：沒有被引號引起來的數字：整數、負數、小數...(123),表示一種數據的量
3.布爾值類型boolean
boolean在內存中存儲的格式： boolean在存儲的時候會將ture轉成1，false轉成0
var a =ture;
var b ="ture";
var c = a == b;
console.log(c); //輸出false
4.undefined：聲明變量沒有賦值
5、Null:空的對象
特殊：NaN(not a number):number的一種。
// 判斷NaN:IsNaN翻譯：是一個非數字：如果是數字ture
// var a ="abc";
// var b =123;
// console.log(a-b);
// console.log(isNaN(a-b)); // 輸出ture
// 作用：用來表示數字的一種不正常的狀態（一般會在計算出現錯誤時出現）。
// 特殊：特殊到自己都不等於自己
var a =NaN;
var b =NaN;
var c = a === b;
console.log(c); //輸出false
技巧：判斷數據的類型：typeof（變量/直接量） 可省略括號：typeof變量/直接量
三、變量：用來存儲數據的內存
內存：運行內存（電腦運行的同時可以保存數據，斷電后清空）
內存條：加大運行內存
硬盤：存儲空間的大小 4G 32G (斷電不會清空)
輸出的方式：
-
alert()：彈出一個提示信息框 - 位置不能改變，不能拖動，不能關閉。其實瀏覽器的進程已經被暫停了 -- 只能在任務管理器來關閉。
-
console.log() 向控制台輸出內容 作用：用於代碼的調試 應用：招聘
-
prompt()輸入框：使用瀏覽器輸出自己輸入的內容
a.聲明變量：創建變量 var a
var:聲明變量的關鍵字 a:變量名
b.給變量賦值：a="123" =賦值運算符。作用：等號右邊結果賦值等號左邊的變量
var a = "123"
var b = "456+123"
console.log(a);
console.log(b)
console.log(a+b)
c.變量名的命名規則：
1）變量必須以字母開頭
變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
class，id的命名規則：只能由英文字母、數字、下划線以及連接符組成，並且數字不能放在開頭
如果名稱以下划線開頭，那么后面直接跟數字也是可以的；class,id不可以
2）變量的命名，不能使用javascript中的關鍵字和保留字 關鍵字：已經被javascript內部使用過的 保留字：還未被javascript內部使用過，但可能有一天會被用到（備胎）。
3）區分大小寫
d.變量的類型由變量的賦值來決定的
var a ="123";
console.log(typeof a); -- 控制台顯示string
var b =123;
console.log(typeof b); -- 控制台顯示numbe
四.運算符(操作符)：
1.運算符的簡寫：
var a ;
a = 10;
等價於 var a =10;
2.自增自減運算符：b++;//a+=1;a=a+1
var a = 2;
var b = 3;
var c = a++ + b++;
//a++:a = a+1;
//后加：先進行運算，再加1
//var c = a+b;a=a+1;b=b+1;
var d = ++a + ++b;
console.log(a);
console.log(b);
console.log(c); //輸出5
console.log(d); //輸出7
3.邏輯運算符：
優先級：!非 > &&與 > ||或
#&&操作符：求第一個操作數的布爾值，如果這個布爾值為true，那么最終的返回值就是第二個操作數，否則輸出第一個
||操作符：求第一個操作數的布爾值，如果這個布爾值為true，那么最終的返回值就是第yi個操作數，否則最終的返回值為第er個操作數。
短路操作：在&&和||中，如果第一個操作數就已經能確定最終返回的結果，那么就不會去計算第二個操作數了
4.比較運算符(關系運算符)：
1、>
2、<
3、>=
4、<=
5、== 是否相等，僅僅是數據的內容，沒有判斷數據的類型
6、=== 判斷是否全等
7、！= 不等於
8、！== 不全等
5.賦值運算符：= 作用：等號右邊結果賦值等號左邊的變量
6.逗號運算符： --省略var
var a,b,c;
a=b=c=1;
7.條件運算符（三目運算符/三元運算符）
結構：bolean表達式？操作一：操作二；
var a=15;
var b=16;
var c=24;
//判斷a和b的大小
a>b?alert(a):alert(b);
//判斷a是否大於b，如果a大於b成立，輸出a；否則輸出b --即if else的簡寫
//判斷a,b,c的大小
(a > b ? a:b) > c ? alert(a > b ? a:b):alert(c);
//先找出a和b中的大的，再與c比較
注：優先使用全等和不全等的操作符！
六.運算符：
1. +號： 加號的作用:
a,連接兩個字符串，連接作用
b,兩個數值中間的+，是運算作用
c,字符串與數值之間的+，是連接
2.-減：兩個number間的操作
3.*乘：兩個number間的操作
4./除：兩個number間的操作
5.%取余(取模)：兩個number間的操作
6.10取余（取模）3
7.()作用：改變計算優先順序
8.Math對象（面向對象；萬物皆對象）萬物皆盒子
1）Math.pow(a,b); //得到a的b次方
2）Math.round(a); //四舍五入
3）Math.ceil(a); //向上取整
4）Math.floor(a); //向下取整
5）Math.max(a,b,c); //取三個數中的最大值
6）Math.min(a,b,c); //
7）Math.random(); //生成隨機數（0-1之間）
拓展：生成1-50的隨機數
var f =Math.random()*49+1;
console.log(f);
8）Math.pow(a,1/3);//立方根
var a = Math.pow(2,10);
console.log(a);
var b =Math .round(3.38);
console.log(b);
七.運算符的優先級
運算符 描述
++ -- - + ~ ! delete new typeof void 一元運算符、返回數據類型、對象創建、未定義值
* / % 乘法、除法、取模
+ - + 加法、減法、字符串連接
<< >> >>> 移位
< <= > >= instanceof 小於、小於等於、大於、大於等於、instanceof
== != === !== 等於、不等於、嚴格相等、非嚴格相等
&& 邏輯與
邏輯或
?: 條件
= 賦值、運算賦值
下表按從最高到最低的優先級列出JavaScript運算符。具有相同優先級的運算符按從左至右的順序求值。
八.數據類型的轉換：強制轉換和隱形轉換
8.1強制轉換：
8.1.1 轉Number（字符串/boolean）
通過prompt輸入的數據類型是string,不管是123，還是具體的漢字
var a=prompt("請輸入一段內容");//輸入4
var b =a+1;
console .log(b);//輸出41
//想要輸出5：
var a=prompt("請輸入一段內容");
a=number(a);//將原來的字符串a轉換成number類型
var b =a+1;
console .log(b);//輸出5
console.log(typeof (a));//輸出number
特點：
a,如果要轉換成數字，輸入的內容必須是純數字，否則NaN.
b、如果內容是空的，轉換成0
c、如果是小數，小數會保留
d、如果字符串中包含非以上格式，則將其轉換為NaN
8.1.2 轉Number，parseInt 轉換
var a ="123.abc";
a = parseInt(a);
console.log(a);//輸出123
console.log(typeof (a));//輸出number
特點：a、如果有小數，會直接去掉小數。
b、如果第一個是數字，就繼續解析直至字符串完畢或者遇到非數字符號為止
8.1.3 parseFloat():轉數字
與parseInt一樣：唯一區別：能保留小數
8.1.4 boolean轉成number
var a = true;
a = Number(a);
console.log(a);
console.log(typeof (a));
8.2字符串的轉換：
8.2.1 數值轉字符串 法一
var a = 123;
a = a.toString();
console.log(a);
console.log(typeof (a));//string
直接調用.toString方法可以將內容直接轉成字符串
8.2.2 數值轉字符串 法二
var a = 123;
a = string(a);
console.log(a);
console.log(typeof (a));//string
直接將要轉的內容放在string后的括號中
區別：一是直接調用這個變量對象的方法, 第二個是強制轉換
8.2.3 boolean轉string
var a = true;
a = Boolean(a);
console.log(a);
console.log(typeof (a));
注意：除了false、空字符""、0、NaN、undefined在轉換時會轉成false，其余都會轉成true
8.3隱式轉換：不通過程序猿去寫固定代碼，瀏覽器可以直接進行轉換
8.3.1隱式轉換成Number:直接在要轉換的內容前加上+-*\%
+a a-0 a*1 a/1 a%1
var a = "123";
a = +a;
b = a\1;
console.log(a);
console.log(b);
console.log(typeof (a));
console.log(typeof (b));
8.3.2 隱式轉換成string:直接在要轉換的內容hou加上""
var a = 123;
a = a + "";
console.log(a);
8.3.3 隱式轉換成boolean:直接將a = !！a;或者！a
九、代碼注釋：
源碼中被JavaScript引擎忽略的部分就叫做注釋，它的作用是對代碼進行解釋。Javascript提供兩種注釋：一種是單行注釋，用 // 起頭；另一種是多行注釋，放在 /* 和 */ 之間。
只有在js創建的時間，在函數時，推薦使用多行注釋/** */。其余時間多行注釋易出現問題
注：雖然js代碼雖然對空格、換行、縮進不敏感，但一定要注意書寫。建議既加分號，又換行 - 可讀性更強
一、流程控制：
1、if結構 ：用於判斷某些條件是否執行
if_else: 可以判斷2個條件
if_else if_else 判斷多個條件
var a = prompt("帶了多少錢");
if(a>300){
console.log("你的錢超過了300，請吃飯");
}
else if(a>200){
console.log("你的錢不夠300，夠200，請吃快餐");
}
else{
console.log("明天記得帶夠");
}
console.log("程序結束")2016.10.13 18:06:39 2016.10.13 18:06:41 2016.10.13 18:06:43 2016.10.13 18:06:44
注意：
-
大括號后不能加分號
-
程序運行到if之后，判斷if括號里的條件，如果條件滿足，則執行內容；如果不滿足，就不會執行；只會執行一個！
#注意：
-
a、大括號后不能加分號；
-
b、代碼不支持連寫：90<pj<100,只能90<pj&&pj<100;
2、switch case結構:作用是與else if是一樣的，
var a = prompt("請輸入今天星期幾對應的數字");
switch (a) {
case "1":
alert("您輸入的是星期一");
break;
case "2":
alert("您輸入的是星期二");
break;
case "3":
alert("您輸入的是星期三");
break;
case "4":
alert("您輸入的是星期四");
break;
case "5":
alert("您輸入的是星期五");
break;
case "6":
alert("您輸入的是星期六");
break;
case "7":
alert("您輸入的是星期日");
break;
default:
alert("你輸入什么鬼");
}
二、控制台的sources看源碼
a，打開要查看的頁面 b,打斷點，刷新頁面，會發現命中了斷點 c，鼠標放在變量名上，會發現輸入值
JS背景
-1995年，Netscape公司開發一個腳本語言，叫LiveScript,用於做驗證的。為了推廣，利用當時最火的Java詞匯，改名JavaScript.-netscapt是第一款瀏覽器
-
03年以前，牛皮癬廣告，很被排斥
-
04年谷歌用js技術來做ajax技術
-
07年，喬布斯發布第一代蘋果，移動端頁面開始發展
-
10年，html5推出畫布--做游戲。例：切水果
-
11年，node.js誕生，js從移動端鋪開服務器端
瀏覽器是如何工作的：
http://www.2cto.com/kf/201202/118111.html
瀏覽器引擎，用來查詢和操作渲染引擎
渲染引擎：用來顯示請求的內容，負責解析html和css
Javascript interpreter：js解析器，負責執行js
notworking網絡：負責發送網絡請求
JavaScript語言：
-
是世界上用的最多的腳本語言。腳本語言：不需要編譯，直接運行時邊解析邊執行的語言
編譯：一次性把所有代碼轉換成cpu可以看懂的語言，一行一行執行
解釋：一行一行解析，解析一行執行一行
-
js是一種客戶端的腳本語言
js組成：ECMAScript、DOM、BOM
-
ECMAScript:js的語法規范
-
DOM：js操作網頁上元素的API
-
BOM:JS操作瀏覽器部分功能的API