前端不像是后端有那么多選擇蝎亚，像Python、PHP先馆、JAVA发框、C#等等。學(xué)前端煤墙，JavaScript可以說是必學(xué)的一門語言梅惯。而在現(xiàn)在的21世紀(jì)，編程重要仿野，還有另外一門技術(shù)同樣很重要铣减。那就是英語！英語+互聯(lián)網(wǎng)是最完美的組合脚作，如果再加上金融葫哗，那就是真的幾乎可以上天了。當(dāng)然球涛，劣针，我這里說的金融不是股票什么的，而是最低資金成本宾符，金融也不是一般人能玩得起的酿秸，除非你有能力，有財力魏烫， 對金融也足夠了解辣苏。
JavaScript瀏覽器發(fā)展及入門
瀏覽器組成
有兩部分，一是shell哄褒，另外一部分是內(nèi)核稀蟋，當(dāng)然，內(nèi)核是最值錢的呐赡。
shell：指的是我們能夠看見的瀏覽器的標(biāo)簽退客、頁面、設(shè)置链嘀、書簽管理器萌狂、導(dǎo)航等等。凡是我們能看見的都可稱之為shell怀泊。
-
內(nèi)核（大致分為三個模塊）：
內(nèi)核就是用來處理我們的各種請求的代碼茫藏，那些高難度的資源處理都是內(nèi)核完成。- 渲染引擎（HTML霹琼、CSS等語法規(guī)則和渲染）
- JS引擎
- 其他模塊
現(xiàn)時主要的四大排版引擎為：
- Trident（應(yīng)用于Internet Explorer）务傲；
- Gecko（應(yīng)用于Mozilla Firefox）凉当；
- Blink（應(yīng)用于Chrome ）；
- WebKit （應(yīng)用于Apple Safari和早期版本的Google Chrome）比較火熱售葡。
瀏覽器幾大內(nèi)核問題看杭，可 參照這里
JavaScript的兩大特點
- 編譯性 和 解釋性
計算機在執(zhí)行程序員編寫的代碼時，計算機認(rèn)識這些代碼嗎挟伙？答案肯定是否定的楼雹，那么怎么讓它讀取并執(zhí)行？那就需要轉(zhuǎn)譯尖阔。JavaScript代碼轉(zhuǎn)換為機械碼的兩種方式烘豹，編譯性翻譯和解釋性翻譯。這兩種方式只是其翻譯的方式不同诺祸，其本質(zhì)是相同的。
1祭芦、編譯性翻譯
方式：編譯性翻譯是通篇看完文件后再翻譯筷笨，翻譯完成后生成翻譯完的文件，程序最終執(zhí)行的是這個翻譯完的文件龟劲。
比如C-->.obj胃夏，JAVA-->.class。優(yōu)點：快昌跌。
就像讀書一樣仰禀，是通篇讀完理解再寫快還是看一句寫一句快？當(dāng)然是前者快蚕愤，它節(jié)省了多次抬頭低頭的時間答恶。不足：移植性不好，不跨平臺萍诱。
不跨平臺是什么意思悬嗓？比如在windows上生成的翻譯文件，在Linux上不能執(zhí)行裕坊，Linux系統(tǒng)不認(rèn)識包竹，那就得單獨為Linux重新寫一個。大多家用配置都是windows籍凝，但服務(wù)器用的是Linux周瞎、UNIX，因為它比較穩(wěn)定饵蒂。UNIX比較有故事 声诸，它是黑客和工程師共同開發(fā)的，所以黑客很難攻進(jìn)去苹享。（服務(wù)器其實就是電腦双絮，只是它提供的接口不一樣而已浴麻。）C、C++都是編譯性語言
2囤攀、解釋性語言
方式：翻譯一行執(zhí)行一行软免，不生成文件。
優(yōu)點：跨平臺焚挠。
缺點：稍微慢一點膏萧。
JavaScript、PHP蝌衔、Python都是解釋性語言
注意：JAVA既不是編譯性語言也不是解釋性語言榛泛，JAVA的翻譯過程是:.java通過javac進(jìn)行編譯-->.class-->JVM(虛擬機)-->解釋執(zhí)行。JAVA原來是oracle語言噩斟。
線程
- 單線程：同一時間只能干一件事
- 多線程：同一時間可以干多件事曹锨。比如左手畫圓右手畫方，當(dāng)然我是做不到的剃允。
標(biāo)準(zhǔn)(ECMA)
每一門語言都有他的標(biāo)準(zhǔn)沛简，JavaScript兼容于ECMA標(biāo)準(zhǔn)，因此也被稱為ECMAScript斥废，JavaScript到現(xiàn)在做了很大的改變椒楣，還推出了DOM和BOM。
關(guān)于ES6標(biāo)準(zhǔn)牡肉，可以參考這里
JavaScript三大部分
- ECMAScript：這是JavaScript原始部分捧灰，能夠進(jìn)行加減乘除。
- DOM：操作文檔（html统锤、css）
- BOM ：操作瀏覽器對象毛俏。
JavaScript執(zhí)行隊列
單線程的執(zhí)行有一個專業(yè)名詞：輪轉(zhuǎn)時間片。
下面舉個栗子：
比如現(xiàn)在同時執(zhí)行兩個任務(wù)跪另，task1和task2拧抖。它會把兩個任務(wù)切成無數(shù)片段，以微秒或毫秒為單位免绿，吧這些片段排成隊列唧席，但是誰排前面誰排后面完全隨機，誰排第一頁不一定嘲驾，這就叫爭搶時間片淌哟，完全看概率。排完后一個片段一個片段地往JavaScript引擎送辽故，JavaScript一2一個時間片為基準(zhǔn)單位來執(zhí)行這個時間片段徒仓，然后把task1和task2按時間片段來執(zhí)行。大概類似下圖：
面試常被問到的問題
1誊垢、主流瀏覽器及內(nèi)核掉弛、
- IE ---- trident
- chrome ---- 以前是webkit症见，2014年新出blink
- firefox ---- Gecko
- opera ---- presto
- safari ---- webkit
2、面試最后面試官通常會問：你還有什么問題想問我殃饿？
問這個問題的原因是什么呢谋作，面試官希望通過這個問題看出你的學(xué)習(xí)能力和學(xué)習(xí)現(xiàn)狀，包括探究方向
開始學(xué)習(xí)JavaScript
1乎芳、引用js遵蚜。
這個也就內(nèi)部JS及外部JS文件引用，引用方式都可以百度到奈惑，我只強調(diào)一點捡鱼，對于type屬性 璧疗，你可以不寫告私，但是不能寫錯咨油。
為符合web結(jié)構(gòu)(html)、樣式(css)原在、行為(js)相分離的標(biāo)準(zhǔn)不撑，通常采用外部引入。
相分離晤斩，主要是為了在需要看得時候更加清晰，改的時候更加方便姆坚，移植性也會比較好澳泵。
2、JS基本語法
- 變量
- 變量聲明
- 聲明兼呵、賦值分解兔辅。也就是說聲明和賦值是可以分開 進(jìn)行的，你可以先聲明變量击喂，之后再賦值维苔。
- 單一var聲明變量
- 命名規(guī)則
- 變量名必須以英文字母、_懂昂、$開頭
- 可以包括英文字母介时、_、$凌彬、數(shù)字
- 不可用關(guān)鍵字和保留字作變量名沸柔。JS關(guān)鍵字和保留字匯總
- 變量聲明
var a = 10,
b = 20;
c = 30;
d;
document.write(a,b,c,d);
//102030Undefined
3、基本類型
- 值類型——數(shù)據(jù)類型
- 不可變的原始值(stack棧數(shù)據(jù))
- Number铲敛、String褐澎、Boolean、Undefined(聲明變量未賦值時就是undefined)伐蒋、Null
- 引用值(heap堆數(shù)據(jù))
- array工三、object迁酸、function
- 引用這和原始值唯一的不同就是賦值形式的不同。
- 不可變的原始值(stack棧數(shù)據(jù))
1俭正、語言分為兩大類奸鬓，一類是靜態(tài)語言，一類是動態(tài)語言段审。動態(tài)語言基本是解釋性語言全蝶，解釋性語言基本是腳本語言。
2寺枉、解釋性語言特點是：聲明變量的關(guān)鍵字只有一個抑淫，比如JS聲明變量，只有var姥闪。不像java始苇，有int、float筐喳、char催式、string。
3避归、為什么只需要var聲明變量荣月，而不需要聲明變量類型？因為解釋性語言是解釋一行執(zhí)行一行梳毙，不會通篇翻譯哺窄。
4、如果你還不知道什么是解釋性語言账锹，請看這里
關(guān)于JavaScript
- JavaScript是動態(tài)語言萌业，javascript的數(shù)字類型天生就是浮點型。
- JavaScript是由值決定類型奸柬，其他的比如java生年，是由類型決定值，比如你定義了一個int a;你就必須給a賦一個int類型的值廓奕。
- 原始值是存在棧里抱婉，棧是first-in-last-out。站內(nèi)存之間愛你的賦值都是拷貝桌粉。
var a = 10;
var b = a; //是對a值得一個拷貝
a = 20; //重新賦值時授段，并不止在原基礎(chǔ)上改變的，而是申請了一個內(nèi)存空間番甩，再把a指向這個心的地址空間
document.write(b);
//10
- 引用值存在heap堆里侵贵，堆是先進(jìn)先出。引用值得棧內(nèi)存的是堆內(nèi)存的地址缘薛，真是的數(shù)據(jù)時存放在堆里的窍育。而引用值賦值的時候只是拷貝地址卡睦，不拷貝原始數(shù)據(jù)。
var arr = [1];
var arr1 = arr;
arr.push(2);
document.write(arr1);
//1,2
//引用值arr1跟著變化了 漱抓，因為它指向的本身就是arr的地址表锻。
注意：
var arr = [1];
var arr1 = arr;
arr = [1,3]; //這里新申請了一個內(nèi)存空間，不會覆蓋原有的地址空間乞娄，也就是說原來的[1,2]地址還在瞬逊，且arr1指向了它。
document.write(arr1);
//1,2
4仪或、JS運算符
但凡是運算确镊，就要求結(jié)果。
運算操作符
- +
- 數(shù)學(xué)運算范删、字符串連接
- **任何數(shù)據(jù)類型加字符串都等于字符串**
- "-"蕾域、"*"、"/"到旦、"%"旨巷、"="、"()"
- 優(yōu)先級"="最弱添忘，"()"最強
- "--"采呐、"++"、"+="搁骑、"-="懈万、"%="、"*="等
//示例：
var a = a+1; //a1
var a = 1 + 1 + a; //11a
var a = a + 1 + 1; //a11
除號"/"的一些注意事項：
- 1/0 結(jié)果是Infinity(Infinity是Number型)
- 0/0 結(jié)果是 Nan(not a number)靶病。但是Num也是number的一員
- -1/0 結(jié)果是-Infinity
- 記住運算順序：先括號， 再乘除口予，最后加減
先看一個練習(xí)題娄周，很簡單，給定兩個數(shù)a沪停、b煤辨，交換兩個數(shù)。
常見方法木张，引入新變量
var a = 123;
var b = 234;
var c = a;
a = b;
b= c;
上面的方法可以實現(xiàn)众辨，但是可以用另外一個更上一層的方法。
var a = 123;
var b = 234;
a = a + b;
b = a - b;
a = a - b;
//這樣寫的好處是舷礼，如果a鹃彻、b變化了，仍然使用妻献。
比較運算符
-
>蛛株、<团赁、==、<=谨履、>=欢摄、！=; - 比較結(jié)果為Boolean值笋粟。
任何東西都能比較怀挠，只是規(guī)則不同，例如字符串之間比較的是ASC碼順序害捕。
- ASC I碼是七位二進(jìn)制數(shù)（0~128）绿淋。
- ASC II碼是八位二進(jìn)制數(shù)（1~255）。
邏輯運算符
- $$吨艇、||躬它、！东涡。
- 運算結(jié)果為真實值冯吓。
被認(rèn)定為false的值。
undefined疮跑、null组贺、NaN、""祖娘、0失尖、false。
特殊原則：
NaN = NaN; //false
也就是非數(shù)NaN不等于任何東西渐苏，包括自己掀潮。
下面重點說一下邏輯運算符：
先打破一下的傳統(tǒng)的觀念：
var a = 1&&2;
document.write(a);
//猜一下結(jié)果是多少呢？
//結(jié)果是2琼富，是不是超出意外仪吧。
&&運算
-
&&運算符，有兩個表達(dá)式的情況鞠眉，先看第一個表達(dá)式轉(zhuǎn)換成布爾值的結(jié)果薯鼠，如果結(jié)果為真，那么它會看第二個表達(dá)式轉(zhuǎn)換為布爾值的結(jié)果械蹋，然后如果只有兩個表達(dá)式的話出皇，只要看到第二個表達(dá)式，就可以返回該表達(dá)式的值哗戈；如果第一個表達(dá)式轉(zhuǎn)換為布爾值為false郊艘，直接返回第一個表達(dá)式的值。 - 如果有兩個以上表達(dá)式的話，只要為真就往后走暇仲，為假時返回假的位置的表達(dá)式的值步做。
實際應(yīng)用
//實際應(yīng)用
var data = "這里是從后臺傳過來的數(shù)據(jù)";
data && fn(data);
//這里的意思是說，當(dāng)data有意義時奈附，才執(zhí)行fn(data)調(diào)用全度，否則會造成系統(tǒng)的癱瘓。
||運算
遇到false就一直走斥滤，直到遇見ture或最后一個表達(dá)式則返回表達(dá)式的值将鸵。
var num = 0 || false || 1;
document.write(num);
//false
寫兼容。注意佑颇，在IE瀏覽器里面顶掉，window.event里面有值，e是undefined挑胸；在非IE瀏覽器里面痒筒，window.event里面為undefined，e是有值得茬贵。
div.onclick = function(e){
var event = e || window.event;
}
!運算
var a = !123; //先把a變成布爾值再取反簿透。
var b = !!null;
var c = !!"";
var d = !!NaN;
//b、c解藻、d都返回false
//這里現(xiàn)將后面的值變成布爾值再取反老充。
