為什么要學(xué)編程基礎(chǔ)

因?yàn)槟闶紫仁浅绦騿T，其次才是前端。

一個(gè)程序員需要知道

硬件與軟件：計(jì)算機(jī)的運(yùn)行原理（《編碼》），以及大學(xué)計(jì)算機(jī)相關(guān)課程，例如《計(jì)算機(jī)組成原理》、《計(jì)算機(jī)網(wǎng)絡(luò)》，我在上大學(xué)的時(shí)候，老師有講過計(jì)算機(jī)原理

最大的軟件：操作系統(tǒng)（維基百科）了解操作系統(tǒng)由什么構(gòu)成的

自己寫軟件：數(shù)據(jù)結(jié)構(gòu) & 算法（《數(shù)據(jù)結(jié)構(gòu)與算法分析》）數(shù)據(jù)結(jié)構(gòu)與算法分析，排序算法

多人寫軟件：軟件工程（代碼大全）

前端為什么要學(xué)編程基礎(chǔ)?

• 操作系統(tǒng)運(yùn)行在硬件之上
• 瀏覽器運(yùn)行在操作系統(tǒng)之上，不僅僅是瀏覽器，所有的軟件都是運(yùn)行在操作系統(tǒng)之上的。
• HTML/CSS/JS運(yùn)行在瀏覽器之上
• HTML/CSS/JS和數(shù)據(jù)都來自服務(wù)器

存在三層依賴,所以我們前端需要學(xué)習(xí)編程基礎(chǔ),我們才會(huì)知道

• CSS/JS是怎樣運(yùn)行的?
• JS的變量存儲(chǔ)在哪里?
• 數(shù)據(jù)怎么從服務(wù)器獲取?

計(jì)算機(jī): 二進(jìn)制的世界

1. 為什么計(jì)算機(jī)只能存儲(chǔ)0和1？
2. 如何存儲(chǔ)0和1
3. 如何存儲(chǔ)數(shù)字
4. 如何存儲(chǔ)字符
5. 如何存儲(chǔ)中文
6. 如何存儲(chǔ)所有字符
7. 如何用更少的空間來存儲(chǔ)

1. 為什么計(jì)算機(jī)只能存儲(chǔ)0和1？

這其中涉及到很多硬件知識(shí)，簡單的來說，因?yàn)殡娔X是集成電路，內(nèi)存微觀上是無數(shù)小開關(guān)，或者是小電池，而“0”和“1”正好分別代表“開”和“關(guān)”（或者是“通電”和“不通電”），就好像家里的電燈開關(guān)只有開和關(guān)一樣。所以，電腦的本質(zhì)決定了它必須是二進(jìn)制，只能存儲(chǔ)0和1

2. 如何存儲(chǔ)0和1

計(jì)算機(jī)存儲(chǔ)過程，其實(shí)就是給小電池不斷充電的過程，因?yàn)樾‰姵刈陨泶嬖诤碾姡ê帽燃依锏哪湘陔姵胤啪昧瞬挥米约簳?huì)消耗電量一樣）。那么，既然小電池自己會(huì)耗電，又要不斷充電，如何判斷它是的狀態(tài)是0和1呢？規(guī)則是：當(dāng)小電池電量大于50%，為1；電量小于50%，則為0。因?yàn)橛?jì)算機(jī)的充電速率是納秒級（10^{-9）,即一次充電過程為：刷新1次/10}-9S。

計(jì)算機(jī)首先縱向,從上往下選中8個(gè)點(diǎn),然后橫向輸入電量

豎向的認(rèn)為一組晶體管，用來保存如數(shù)字8的值

橫向的電路用來給晶體管充電。

內(nèi)存如何存儲(chǔ)0和1.png

存儲(chǔ)

• 1就充電(變成紅色)
• 0就不充電(不變色)

讀取

• 電量大于50% 就是1
• 電量小于50% 就是0

通過這樣內(nèi)存就實(shí)現(xiàn)可以存儲(chǔ)0和1

3. 如何存儲(chǔ)數(shù)字

計(jì)算機(jī)只存儲(chǔ)0和1,所以存儲(chǔ)數(shù)字,需要將數(shù)字（八進(jìn)制、十進(jìn)制、十六進(jìn)制）轉(zhuǎn)換為二進(jìn)制的0和1

十進(jìn)制 --> 二進(jìn)制

37(10) == 100101(2) 括號里面的數(shù)字代表是什么進(jìn)制

*代表是乘,^代表是多少次方,?代表未知,需要求出來

37(10)  = 3 * 10^1 + 7 * 10^0
        = n1 * 2^? + n2 * 2^?
        = 32 + 4 + 1
        = 1 * 2^5 + 1 * 2^2 + 1 * 2^0
        = 1 * 2^5 + 0 * 2^4 + 0 * 2^3 + 1 * 2^2 + 0 * 2^1 + 1 * 2^0
        = 100101(2)

-37(10) == -100101(2)

負(fù)數(shù)會(huì)以補(bǔ)碼的形式存儲(chǔ),比較復(fù)雜,這里不做多講

0.75(10) == 0.11(2)

0.75(10)  = 7 * 1/10 + 5 * 1/10^2
          = n1 * 1/2 + n2 * 1/4
          = 0.5 + 0.25
          = 1* 1/2 + 1 * 1/4
          = 0.11(2)

小Tips:

為了方便書寫,一般會(huì)將二進(jìn)制寫為十六進(jìn)制

二進(jìn)制 --> 十六進(jìn)制,每四個(gè)二進(jìn)制代表一個(gè)十六進(jìn)制數(shù)

舉個(gè)例子下面的轉(zhuǎn)換可以跟這個(gè)例子推出來:

1111(2) --> F(16)

1111(2) = 2^3 + 2^2 + 2^1 + 2^0 = F(16)

進(jìn)制轉(zhuǎn)換之方法2

• 整數(shù)

  
  
  整數(shù).png

• 小數(shù)

  
  
  小數(shù).png

4. 如何存儲(chǔ)字符

使用ASCII表（用十進(jìn)制數(shù)字來代替經(jīng)常出現(xiàn)的符號和大小寫英文字母）來存儲(chǔ)少量的字符串

將每個(gè)字符編號

ASCII(American Standard Code for Information Interchange,美國信息交換標(biāo)準(zhǔn)代碼)

美國信息交換標(biāo)準(zhǔn)代碼是基于拉丁字母的一套計(jì)算機(jī)編碼系統(tǒng)。它主要用于顯示現(xiàn)代英語，而其擴(kuò)展版本EASCII則可以部分支持其他西歐語言，并等同于國際標(biāo)準(zhǔn)ISO/IEC 646。

你想存儲(chǔ)a,就需要存儲(chǔ)97(10)對應(yīng)的二進(jìn)制

97(10)  = 9 * 10^1 + 7 * 10^0
        = n1 * 2^? + n2 * 2^?
        = 64 + 32 + 1
        = 1 * 2^6 + 1 * 2^5 + 1 * 2^0
        = 01100001(2) == 61(16)

你想存儲(chǔ)A,就需要存儲(chǔ)65(10)對應(yīng)的二進(jìn)制

65(10)  = 6 * 10^1 + 5 * 10^0
        = n1 * 2^? + n2 * 2^?
        = 64 + 1
        = 1 * 2^6  + 1 * 2^0
        = 01000001(2) == 41(16)

通過上面的例子說明計(jì)算機(jī)會(huì)認(rèn)為A和a是不一樣,因?yàn)樗鶎?yīng)的ASCII不同

5. 如何存儲(chǔ)中文

使用GBK

• GB 2312 中國國家標(biāo)準(zhǔn)簡體中文字符集
• 微軟推出的GBK 字符集(存儲(chǔ)生僻字、繁體字、日語、朝鮮語等)
• GB2312 共收錄 6763 個(gè)漢字，同時(shí)收錄了包括拉丁字母、希臘字母、日文平假名及片假名字母、俄語西里爾字母在內(nèi)的 682 個(gè)字符。

6. 如何存儲(chǔ)所有字符

為了將所有字符都能夠在電腦上顯示，然而不同的字符集考慮到兼容性問題，Unicode聯(lián)盟做了這樣一件事，他們將全世界的文字都編在一張表中。

缺點(diǎn)：原來使用ASCII字符編碼進(jìn)行存儲(chǔ)時(shí)，只需要1個(gè)字節(jié)即8位存儲(chǔ)就足夠，但是使用Unicode卻需要4個(gè)字節(jié)即32位來存儲(chǔ)；原來存儲(chǔ)一個(gè)中文字符需要2個(gè)字節(jié)即16位，使用Unicode后需要4個(gè)字節(jié)32位存儲(chǔ)。這樣大大的浪費(fèi)了存儲(chǔ)空間。

• Unicode 字符集
• unciode萬國碼,將全球字符編號,包括中日韓文字、藏文、盲文、楔形文字、 顏文字:-)、 繪文字

7. 如何用更少的空間來存儲(chǔ)

低性價(jià)比

a -> 00000000 00000000 00000000 011000012 = 0061(16)

你 -> 00000000 00000000 01001111 011000002 = 4F60(16)

高性價(jià)比 UTF-8

a -> 01100001

你-> 11100100 10111101 10100000

低性價(jià)比,因?yàn)橛?jì)算機(jī)需要使用4個(gè)字節(jié)來存儲(chǔ)

下面解釋一下"你"的UTF-8

//Unicode
你 -> 00000000 00000000 01001111 011000002
//utf-8
你-> 11100100 10111101 10100000
//1110 表示告訴計(jì)算機(jī),讀取的時(shí)候往后讀三個(gè)字節(jié),每個(gè)字節(jié)開頭都是10,除我之外,10都是表示我跟著前面的

UTF-8 是一種編碼方式，不是字符集

UTF-8的編碼方式

現(xiàn)實(shí)問題

• 為什么有些中文軟件喜歡用GBK,不用Unicode/UTF-8?

  （1）發(fā)展史：當(dāng)時(shí)在國內(nèi)發(fā)明GB 2312的早幾年，微軟的GBK還沒有出現(xiàn)，大家習(xí)慣了使用 GB 2312 和 GB13000 ，而新出來的Unicode雖然全球統(tǒng)一，但是還不完善，沒有采用UTF-8的編碼方式。之后GBK的出現(xiàn)，對原來的GB 2312更加優(yōu)化，深受大家的喜愛。而到后來2000年出現(xiàn)的 GB 18030-2000 ，它統(tǒng)一和兼容了GBK，但是90年到2000年初，代大家還是習(xí)慣性的使用GBK字符集。

  （2）國情：在當(dāng)時(shí)的背景下，信息相對比較閉塞，并不是什么東西像如今Google一下就可找到，所以在國內(nèi)90年代大部分軟件使用的字符集依然是GBK

• Javascript使用Unicode字符集,但是沒有使用UTF-8編碼

  • Javascript用了UCS-2編碼,因?yàn)?995年UTF-16還沒被發(fā)明出來,Javascript也不想使用 UTF-32,Unicode與JavaScript詳解
  • 出現(xiàn)的后果:ES5 無法表示 \uFFFF 之后的字符（如 \u1D306）,某些情況下會(huì)出 bug,Javascript有個(gè)Unicode的天坑

ASCII，Unicode，UTF-8，GBK關(guān)系是什么？

1. 一開始只有ASCII字符集，因?yàn)槌跗谥挥袣W美國家才能指定計(jì)算機(jī)規(guī)則。
2. 中國也需要想計(jì)算機(jī)輸入中文，因此在ASCII127號（127號以下叫半角字符，其他叫全角字符）之后的符號取消，用兩個(gè)大于127字符連在一起，表示一個(gè)漢字，命名為GBK2312，可以認(rèn)為GBK2312就是ASCII的中文擴(kuò)展。
3. 又添加了字符，但是GBK2312已經(jīng)不夠了，所以干脆直接把ASCII127之后的再重新一個(gè)位置放入一個(gè)中文字符，作為GBK字符集
4. 這時(shí)候出現(xiàn)了Unicode，能包括所有的字符。缺點(diǎn)就是無論你是英文還是中文，都必須用兩個(gè)字節(jié)（16個(gè)0和1）來存儲(chǔ)。
5. 這時(shí)候，UTF-8出現(xiàn)了，它可以根據(jù)不同的字節(jié)長度來變化UTF-8的長度，比如當(dāng)字符在ASCII中，就用一個(gè)字節(jié)（字節(jié)：用8個(gè)0或1來表示一個(gè)字符）表示，中文就用3個(gè)字節(jié)表示

兩個(gè)不太熟悉的題目

1. Unicode 字符集中，字符「你」對應(yīng)的16進(jìn)制數(shù)是多少？（答案是四個(gè)字符）參考 [站長工具](http://tool.chinaz.com/tools/unicode.aspx (中文 = > unicode方法)

答案：4f60

2. 字符「你」的 UTF-8 編碼是多少，請用十六進(jìn)制表示（可以百度谷歌，參考 http://graphemica.com/%E4%BD%A0 ）（中文 = > UTF-8 方法）

技巧：ctrl+f，在頁面內(nèi)搜索「UTF-8」,然后翻譯十六進(jìn)制是hex，判斷出答案

答案：e4bda0

拓展思考：

• 編碼方式與字符集的區(qū)別，編碼方式？字符集？
• 如何將Unicode存到計(jì)算機(jī)里面
• 十六進(jìn)制，unicode，UTF-8的區(qū)別
  • unicode（是十六進(jìn)制）是高效 UTF-8 （同樣是十六進(jìn)制）的儲(chǔ)存方法。
• 負(fù)數(shù)會(huì)以補(bǔ)碼的形式存儲(chǔ)
• 小數(shù)會(huì)以浮點(diǎn)數(shù)的形式存儲(chǔ)