版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
搭建互聯(lián)網(wǎng)系統(tǒng)目錄\h1無處不在的HTML\h1.1html的hello,world\h1.1.1調(diào)試hello,world\h1.1.2說說hello,world\h1.1.3想用中文？\h1.2其他html標記\h1.2.1美妙之處\h1.2.3更多\h２無處不在的Javascript\h2.1Javascript的Hello,world\h2.2更js一點\h從數(shù)學(xué)出發(fā)\h2.3設(shè)計和編程\h2.3.1函數(shù)\h2.3.2重新設(shè)計\h2.3.3object和函數(shù)\h2.3.4面向?qū)ο骪h3無處不在的CSS\h3.1CSS\h3.2關(guān)于CSS\h3.3代碼結(jié)構(gòu)\h3.4樣式與目標\h3.4.1選擇器\h3.5更有趣的CSS\h4無處不在的三劍客\h4.1Hello,Geek\h4.2從源碼學(xué)習(xí)\h4.3瀏覽器渲染過程\h4.3.1HTML\h4.4DOM樹形結(jié)構(gòu)圖\h4.4.1javascript\h4.4.2CSS\h4.5CSS盒模型圖\h4.6筆記\h5GNU/Linux\h5.1什么是Linux\h5.2操作系統(tǒng)\h5.2.1Linux架構(gòu)圖\h5.2.2Shell\h5.2.3GCC\h5.2.4啟動引導(dǎo)程序\h5.3從編譯開始\h5.3.1開始之前\h5.3.2編譯Nginx\h5.3.3其他\h5.4包管理\h5.5UbuntuLNMP\h5.4.1Update軟件包列表\h5.4.2安裝MySQL\h5.4.3安裝Nginx\h5.4.4安裝PHP\h6Arduino\h6.1極客的玩具\h6.2硬件熟悉\h6.3開發(fā)環(huán)境\h6.4點亮一個LED\h6.5串口通信\h6.5.1關(guān)于ArduinoSetup()\h7Python\h7.1代碼與散文\h7.1.1開始之前\h7.1.2Python的Hello,World\h7.1.3我們想要的Hello,World\h7.2算法\h7.3實用主義哲學(xué)\h7.4包管理\h7.4.1pythonrequests\h8RaspberryPi\h8.1Geek的盛宴\h8.2RaspberryPi初始化\h8.3RaspberryPiGPIO\h9Server\h9.1服務(wù)器\h9.2Web服務(wù)器\h9.3LNMP\h10Web服務(wù)\h10.1SOAPVSRESTful\h11HTTP與RESTful\h11.1你所沒有深入的HTTP\h11.1.1打開網(wǎng)頁時發(fā)生了什么\h11.1.2URL組成\h11.2一次HTTPGET請求\h11.2.1HTTP響應(yīng)\h12設(shè)計RESTfulAPI\h12.1REST關(guān)鍵目標\h12.2判斷是否是RESTful的約束條件\h12.3設(shè)計RESTful資源\h12.4設(shè)計RESTfulURI\h12.5JSON\h12.6REST\h12.6.1資源\h13REST服務(wù)準備\h13.1Laravel\h13.1.1為什么是Laravel\h13.2安裝Laravel\h13.2.1GNU/Linux安裝Composer\h13.3MySQL\h13.3.1安裝MySQL\h13.3.2配置MySQL\h14創(chuàng)建REST服務(wù)\h14.1數(shù)據(jù)庫遷移\h14.1.1創(chuàng)建表\h14.1.2數(shù)據(jù)庫遷移\h14.2創(chuàng)建RESTful\h14.3LaravelResources\h14.3.1修改Create()\h14.3.2創(chuàng)建表單\h14.3.4編輯模板\h15RESTfulEvertywhere\h15.1Javascript與ajax\h15.1.1jQuery\h15.2Java與json\h15.2.1Android\h15.3Python與json\h15.3.1requests\h16前端顯示\h16.1庫與車輪子\h16.2庫\h16.2.1jQueryMobile\h16.3網(wǎng)站前臺顯示\h16.3.1Highcharts\h17構(gòu)建基于CoAP協(xié)議的物聯(lián)網(wǎng)系統(tǒng)\h17.1CoAP:嵌入式系統(tǒng)的REST\h17.2CoAP命令行工具\h17.2.1NodeCoAPCLI\h17.2.2libcoap\h17.2.3FirefoxCopper\h17.3CoAPHello,World\h17.3CoAP數(shù)據(jù)庫查詢\h17.3.1NodeModule\h17.3.2Node-Sqlite3\h17.3.3查詢數(shù)據(jù)\h17.4CoAPBlock\h17.4.1CoAPPOST\h17.4.2CoAPContentTypes\h17.5CoAPJSON\h17.6使用IoT-CoAP構(gòu)建物聯(lián)網(wǎng)\h18簡單物聯(lián)網(wǎng)\h18.1硬件通信\h18.1.1串口通信\h18.1.2I2C通信\h18.2硬件\h18.2.151單片機\h18.2.2Arduino\h18.2.3RaspberryPi\h18.2.4ARM\h18.2.5繼電器\h18.3協(xié)議間通訊\h19Android簡單示例
1無處不在的HTML之所以從html開始，是因為我們不需要配置一個復(fù)雜的開發(fā)環(huán)境，也許你還不知道開發(fā)環(huán)境是什么東西，不過這也沒關(guān)系，畢竟這些知識需要慢慢的接觸才能有所了解，尤其是對于普通的業(yè)余愛好者來說，當(dāng)然，對于專業(yè)選手言自然不是問題。HTML是Web的核心語言，也算是比較基礎(chǔ)的語言。1.1html的hello,worldHello,world是一個傳統(tǒng)，所以在這里也遵循這個有趣的傳統(tǒng)，我們所要做的事情其實很簡單，雖然也有一點點hack的感覺。——讓我們先來新建一個文并命名為"helloworld.html"。(PS:大部分人應(yīng)該都是在windows環(huán)境下工作的，所以你需要新建一個文本，然后重命名，或者你需要一個編輯器，在這里我們推薦用sublimetext。破解不破解，注冊不注冊都不會對你的使用有太多的影響。)新建文件輸入hello,world
保存為->"helloworld.html"，雙擊打開這個文件。正常情況下都應(yīng)該是用你的默認瀏覽器打開。只要是一個正常工作的現(xiàn)代瀏覽器，都應(yīng)該可以看到上面顯示的是"Hello,world"。這才是最短的hello,world程序，但是呢？在ruby中會是這樣子的2.0.0-p353:001>p"hello,world"
"hello,world"
=>"hello,world"
2.0.0-p353:002>
等等，如果你了解過html的話，會覺得這一點都不符合語法規(guī)則，但是他工作了，沒有什么比安裝完Nginx后看到Itworks!更讓人激動了。遺憾的是，它可能無法在所有的瀏覽器上工作，所以我們需要去調(diào)試其中的bug。1.1.1調(diào)試hello,world我們會發(fā)現(xiàn)我們的代碼在瀏覽器中變成了下面的代碼，如果你和我一樣用的是chrome，那么你可以右鍵瀏覽器中的空白區(qū)域，點擊審查元素，就會看到下面的代碼。<html>
<head></head>
<body>hello,world</body>
</html>
這個才是真正能在大部分瀏覽器上工作的代碼，所以復(fù)制它到編輯器里吧。1.1.2說說hello,world我很不喜歡其中的<*></*>，但是我也沒有找到別的方法來代替它們，所以這是一個設(shè)計得當(dāng)?shù)恼Z言。甚至大部分人都說這算不上是一門真正的語言，不過html的原義是超文本標記語言所以我們可以發(fā)現(xiàn)其中的關(guān)鍵詞是標記——markup，也就是說html是一個markup，head是一個markup，body也是一個markup。然而，我們真正工作的代碼是在body里面，至于為什么是在這里面，這個問題就太復(fù)雜了。打個比方來說：我們所使用的漢語是人類用智慧創(chuàng)造的，我們所正在學(xué)的這門語言同樣也是人類創(chuàng)造的。我們在自己的語言里遵循著桌子是桌子，凳子是凳子的原則，很少有人會問為什么。1.1.3想用中文？所以我們也可以把計算機語言與現(xiàn)實世界里用于交流溝通的語言劃上一個等號。而我們所要學(xué)習(xí)的語言，并不是我們最熟悉的漢語語言，所以我們便覺得這些很復(fù)雜，但是如果我們試著用漢語替換掉上面的代碼的話<語言>
<頭><結(jié)束頭>
<身體>你好，世界<結(jié)束身體>
<結(jié)束語言>
這看上去很奇怪，只是因為是直譯過去的原因，也許你會覺得這樣會好理解一點，但是輸入上可就一點兒也不方便，因為這鍵盤本身就不適合我們?nèi)ポ斎霛h字，同時也意味著可能你輸入的會有問題。讓我們把上面的代碼代替掉原來的代碼然后保存，打開瀏覽器會看到下面的結(jié)果<語言><頭><結(jié)束頭><身體>你好，世界<結(jié)束身體><結(jié)束語言>
更不幸的結(jié)果可能是<璇█><澶?><緇撴潫澶?><韜綋>浣犲ソ錛屼笘鐣?<緇撴潫韜綋><緇撴潫璇█>
這是一個編碼問題，對中文支持不友好。我們把上面的代碼改為和標記語言一樣的結(jié)構(gòu)<語言>
<頭></頭>
<身體>你好，世界</身體>
<結(jié)束語言>
于是我們看到的結(jié)果便是<語言><頭><身體>你好，世界
被chrome瀏覽器解析成什么樣了？<html><head></head><body><語言>
<頭><!--頭-->
<身體>你好，世界<!--身體-->
<!--語言-->
</body></html>
以<!--開頭，-->
結(jié)尾的是注釋，寫給人看的代碼，不是給機器看的，所以機器不會去理解這些代碼。但是當(dāng)我們把代碼改成<whatwewanttosay>你好世界</whatwewanttosay>
瀏覽器上面顯示的內(nèi)容就變成了你好世界
或許你會覺得很神奇，但是這一點兒也不神奇，雖然我們的中文語法也遵循著標記語言的標準，但是我們的瀏覽器不支持中文標記。結(jié)論:瀏覽器對中文支持不友好。瀏覽器對英文支持友好。剛開始的時候不要對中文編程有太多的想法，這是很不現(xiàn)實的:現(xiàn)有的系統(tǒng)都是基于英語語言環(huán)境構(gòu)建的，對中文支持不是很友好。中文輸入的速度在某種程度上來說沒有英語快。我們離開話題已經(jīng)很遠了，但是這里說的都是針對于那些不滿于英語的人來說的，只有當(dāng)我們可以從頭構(gòu)建一個中文系統(tǒng)的時候才是可行的，而這些就要將cpu、軟件、硬件都包含在內(nèi)，甚至我們還需要考慮重新設(shè)計cpu的結(jié)構(gòu)，在某種程度上來說會有些不現(xiàn)實?；蛟S，需要一代又一代人的努力。忘記那些吧，師夷長之技以治夷。1.2其他html標記添加一個標題，<html>
<head>
<title>標題</title>
</head>
<body>hello,world</body>
</html>
我們便可以在瀏覽器的最上方看到“標題”二字，就像我們常用的淘寶網(wǎng)，也包含了上面的東西，只是還包括了更多的東西，所以你也可以看懂那些我們可以看到的淘寶的標題。<html>
<head>
<title>標題</title>
</head>
<body>
hello,world
<h1>大標題</h1>
<h2>次標題</h2>
<h3>...</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</body>
</html>
更多的東西可以在一些書籍上看到，這邊所要說的只是一次簡單的語言入門，其他的東西都和這些類似。1.2.1美妙之處我們簡單地上手了一門不算是語言的語言，瀏覽器簡化了這其中的大部分過程，雖然沒有C和其他語言來得有專業(yè)感，但是我們試著去開始寫代碼了。我們可能在未來的某一篇中可能會看到類似的語言，諸如python，我們所要做的就是$pythonfile.py
=>hello,world
然后在終端上返回結(jié)果。只是因為在我看來學(xué)會html是有意義的，簡單的上手，然后再慢慢地深入，如果一開始我們就去理解指針，開始去理解類。我們甚至還知道程序是怎么編譯運行的時候，在這個過程中又發(fā)生了什么。雖然現(xiàn)在我們也沒能理解這其中發(fā)生了什么，但是至少展示了中文編程語言在當(dāng)前意義不大，不現(xiàn)實，效率不高兼容性差語言的語法是固定的。（ps:雖然我們也可以進行擴充，我們將會在后來支持上述的中文標記。）已經(jīng)開始寫代碼，而不是還在配置開發(fā)環(huán)境。隨身的工具才是最好的，最常用的code也才是實在的。1.2.3更多我們還沒有試著去解決“某商店里的糖一顆5塊錢，小明買了3顆糖，小明一共花了多少錢”的問題。也就是說我們學(xué)會的是一個還不能解決實際問題的語言，于是我們還需要學(xué)點東西，比如javascript,css。我們可以將Javascript理解為解決問題的語言，html則是前端顯示，css是配置文件，這樣的話，我們會在那之后學(xué)會成為一個近乎專業(yè)的程序員。我們剛剛學(xué)習(xí)了一下怎么在前端顯示那些代碼的行為，于是我們還需要Javascript。
２無處不在的JavascriptJavascript現(xiàn)在已經(jīng)無處不在了，也許你正打開的某個網(wǎng)站，他便可能是node.js+json+javascript+mustache.js完成的，雖然你還沒理解上面那些是什么，也正是因為你不理解才需要去學(xué)習(xí)更多的東西。但是你只要知道Javascript已經(jīng)無處不在了，它可能就在你手機上的某個app里，就在你瀏覽的網(wǎng)頁里，就運行在你IDE中的某個進程里。2.1Javascript的Hello,world這里我們還需要有一個helloworld.html，Javascript是專為網(wǎng)頁交互而設(shè)計的腳本語言，所以我們一點點來開始這部分的旅途，先寫一個符合標準的helloworld.html<!DOCTYPEhtml>
<html>
<head></head>
<body></body>
</html>
然后開始融入我們的javascript，向HTML中插入Javascript的方法，就需要用到html中的<script>標簽，我們先用頁面嵌入的方法來寫helloworld。html
<!DOCTYPEhtml>
<html>
<head>
<script>
document.write('hello,world');
</script>
</head>
<body></body>
</html>
按照標準的寫法，我們還需要聲明這個腳本的類型<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript">
document.write('hello,world');
</script>
</head>
<body></body>
</html>
沒有顯示hello,world?試試下面的代碼<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript">
document.write('hello,world');
</script>
</head>
<body>
<noscript>
disableJavascript
</noscript>
</body>
</html>
2.2更js一點我們需要讓我們的代碼看上去更像是js，同時是以js結(jié)尾。就像C語言的源碼是以C結(jié)尾的，我們也同樣需要讓我們的代碼看上去更正式一點。于是我們需要在helloworld.html的同一文件夾下創(chuàng)建一個app.js文件，在里面寫著document.write('hello,world');
同時我們的helloworld.html還需要告訴我們的瀏覽器js代碼在哪里<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript"src="app.js"></script>
</head>
<body>
<noscript>
disableJavascript
</noscript>
</body>
</html>
從數(shù)學(xué)出發(fā)讓我們回到第一章講述的小明的問題，從實際問題下手編程，更容易學(xué)會編程。小學(xué)時代的數(shù)學(xué)題最喜歡這樣子了——某商店里的糖一個5塊錢，小明買了3個糖，小明一共花了多少錢。在編程方面，也許我們還算是小學(xué)生。最直接的方法就是直接計算3x5=?document.write(3*5);
document.write實際也我們可以理解為輸出，也就是往頁面里寫入3*5的結(jié)果，在有雙引號的情況下會輸出字符串。我們便會在瀏覽器上看到15，這便是一個好的開始，也是一個糟糕的開始。2.3設(shè)計和編程對于實際問題，如果我們只是止于所要得到的結(jié)果，很多年之后，我們就成為了codemonkey。對這個問題進行再一次設(shè)計，所謂的設(shè)計有些時候會把簡單的問題復(fù)雜化，有些時候會使以后的擴展更加簡單。這一天因為這家商店的糖價格太高了，于是店長將價格降為了4塊錢。document.write(3*4);
于是我們又得到了我們的結(jié)果，但是下次我們看到這些代碼的時候沒有分清楚哪個是糖的數(shù)量，哪個是價格，于是我們重新設(shè)計了程序tang=4;
num=3;
document.write(tang*num);
這才能叫得上是程序設(shè)計，或許你注意到了";"這個符號的存在，我想說的是這是另外一個標準，我們不得不去遵守，也不得不去fuck。2.3.1函數(shù)記得剛開始學(xué)三角函數(shù)的時候，我們會寫sin30=0.5
而我們的函數(shù)也是類似于此，換句話說，因為很多搞計算機的先驅(qū)都學(xué)好了數(shù)學(xué)，都把數(shù)學(xué)世界的規(guī)律帶到了計算機世界，所以我們的函數(shù)也是類似于此，讓我們做一個簡單的開始。functionhello(){
returndocument.write("hello,world");
}
hello();
當(dāng)我第一次看到函數(shù)的時候，有些小激動終于出現(xiàn)了。我們寫了一個叫hello的函數(shù)，它返回了往頁面中寫入hello,world的方法，然后我們調(diào)用了hello這個函數(shù)，于是頁面上有了hello,world。functionsin(degree){
returndocument.write(Math.sin(degree));
}
sin(30);
在這里degree就稱之為變量。于是輸出了-0.9880316240928602，而不是0.5，因為這里用的是弧度制，而不是角度制。sin(30)
的輸出結(jié)果有點類似于sin30。寫括號的目的在于，括號是為了方便解析，這個在不同的語言中可能是不一樣的，比如在ruby中我們可以直接用類似于數(shù)學(xué)中的表達:2.0.0-p353:004>Math.sin30
=>-0.9880316240928618
2.0.0-p353:005>
我們可以在函數(shù)中傳入多個變量，于是我們再回到小明的問題，就會這樣去編寫代碼。functioncalc(tang,num){
result=tang*num;
document.write(result);
}
calc(3,4);
但是從某種程度上來說，我們的calc做了計算的事又做了輸出的事，總的來說設(shè)計上有些不好。2.3.2重新設(shè)計我們將輸出的工作移到函數(shù)的外面，functioncalc(tang,num){
returntang*num;
}
document.write(calc(3,4));
接著我們用一種更有意思的方法來寫這個問題的解決方案functioncalc(tang,num){
returntang*num;
}
functionprintResult(tang,num){
document.write(calc(tang,num));
}
printResult(3,4)
看上去更專業(yè)了一點點，如果我們只需要計算的時候我們只需要調(diào)用calc，如果我們需要輸出的時候我們就調(diào)用printResult的方法。2.3.3object和函數(shù)我們還沒有說清楚之前我們遇到過的document.write以及Math.sin的語法為什么看上去很奇怪，所以讓我們看看他們到底是什么，修改app.js為以下內(nèi)容document.write(typeofdocument);
document.write(typeofMath);
typeofdocument會返回document的數(shù)據(jù)類型，就會發(fā)現(xiàn)輸出的結(jié)果是objectobject
所以我們需要去弄清楚什么是object。對象的定義是無序?qū)傩缘募?，其屬性可以包含基本值、對象或者函?shù)。創(chuàng)建一個object，然后觀察這便是我們接下來要做的store={};
store.tang=4;
store.num=3;
document.write(store.tang*store.num);
我們就有了和document.write一樣的用法，這也是對象的美妙之處，只是這里的對象只是包含著基本值，因為typeofstory.tang="number"
一個包含對象的對象應(yīng)該是這樣子的。store={};
store.tang=4;
store.num=3;
document.writeln(store.tang*store.num);
varwall=newObject();
wall.store=store;
document.write(typeofwall.store);
而我們用到的document.write和上面用到的document.writeln都是屬于這個無序?qū)傩约现械暮瘮?shù)。下面代碼說的就是這個無序?qū)傩约兄械暮瘮?shù)。varIO=newObject();
functionprint(result){
document.write(result);
};
IO.print=print;
IO.print("aobejctwithfunction");
IO.print(typeofIO.print);
我們定義了一個叫IO的對象，聲明對象可以用varstore={};
又或者是varstore=newObject{};
兩者是等價的，但是用后者的可讀性會更好一點，我們定義了一個叫print的函數(shù)，他的作用也就是document.write，IO中的print函數(shù)是等價于print()函數(shù)，這也就是對象和函數(shù)之間的一些區(qū)別，對象可以包含函數(shù)，對象是無序?qū)傩缘募?，其屬性可以包含基本值、對象或者函?shù)。復(fù)雜一點的對象應(yīng)該是下面這樣的一種情況。varPerson={name:"phodal",weight:50,height:166};
functiondream(){
future;
};
Person.future=dream;
document.write(typeofPerson);
document.write(Person.future);
而這些會在我們未來的實際編程過程中用得更多。2.3.4面向?qū)ο箝_始之前先讓我們簡化上面的代碼，Person.future=functiondream(){
future;
}
看上去比上面的簡單多了，不過我們還可以簡化為下面的代碼。。。varPerson=function(){
="phodal";
this.weight=50;
this.height=166;
this.future=functiondream(){
return"future";
};
};
varperson=newPerson();
document.write(+"<br>");
document.write(typeofperson+"<br>");
document.write(typeofperson.future+"<br>");
document.write(person.future()+"<br>");
只是在這個時候Person是一個函數(shù)，但是我們聲明的person卻變成了一個對象一個Javascript函數(shù)也是一個對象，并且，所有的對象從技術(shù)上講也只不過是函數(shù)。這里的"\
"是HTML中的元素，稱之為DOM，在這里起的是換行的作用，我們會在稍后介紹它，這里我們先關(guān)心下this。this關(guān)鍵字表示函數(shù)的所有者或作用域，也就是這里的Person。上面的方法顯得有點不可取，換句話說和一開始的document.write(3*4);
一樣，不具有靈活性，因此在我們完成功能之后，我們需要對其進行優(yōu)化，這就是程序設(shè)計的真諦——解決完實際問題后，我們需要開始真正的設(shè)計，而不是解決問題時的編程。varPerson=function(name,weight,height){
=name;
this.weight=weight;
this.height=height;
this.future=function(){
return"future";
};
};
varphodal=newPerson("phodal",50,166);
document.write(+"<br>");
document.write(phodal.weight+"<br>");
document.write(phodal.height+"<br>");
document.write(phodal.future()+"<br>");
于是，產(chǎn)生了這樣一個可重用的Javascript對象,this關(guān)鍵字確立了屬性的所有者。2.4其他Javascript還有一個很強大的特性，也就是原型繼承，不過這里我們先不考慮這些部分，用盡量少的代碼及關(guān)鍵字來實際我們所要表達的核心功能，這才是這里的核心，其他的東西我們可以從其他書本上學(xué)到。所謂的繼承，varChinese=function(){
this.country="China";
}
varPerson=function(name,weight,height){
=name;
this.weight=weight;
this.height=height;
this.futrue=function(){
return"future";
}
}
Ctotype=newPerson();
varphodal=newChinese("phodal",50,166);
document.write(phodal.country);
完整的Javascript應(yīng)該由下列三個部分組成:核心(ECMAScript)——核心語言功能文檔對象模型(DOM)——訪問和操作網(wǎng)頁內(nèi)容的方法和接口瀏覽器對象模型(BOM)——與瀏覽器交互的方法和接口我們在上面講的都是ECMAScript，也就是語法相關(guān)的，但是JS真正強大的，或者說我們最需要的可能就是對DOM的操作，這也就是為什么jQuery等庫可以流行的原因之一，而核心語言功能才是真正在哪里都適用的，至于BOM，真正用到的機會很少，因為沒有完善的統(tǒng)一的標準。一個簡單的DOM示例,<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<noscript>
disableJavascript
</noscript>
<pid="para"style="color:red">Red</p>
</body>
<scripttype="text/javascript"src="app.js"></script>
</html>
我們需要修改一下helloworld.html添加<pid="para"style="color:red">Red</p>
同時還需要將script標簽移到body下面，如果沒有意外的話我們會看到頁面上用紅色的字體顯示Red，修改app.js。varpara=document.getElementById("para");
para.style.color="blue";
接著，字體就變成了藍色，有了DOM我們就可以對頁面進行操作，可以說我們看到的絕大部分的頁面效果都是通過DOM操作實現(xiàn)的。2.5美妙之處這里說到的Javascript僅僅只是其中的一小小部分，忽略掉的東西很多，只關(guān)心的是如何去設(shè)計一個實用的app，作為一門編程語言，他還有其他強大的內(nèi)制函數(shù)，要學(xué)好需要一本有價值的參考書。這里提到的只是其中的不到20%的東西，其他的80%或者更多會在你解決問題的時候出現(xiàn)。我們可以創(chuàng)建一個對象或者函數(shù)，它可以包含基本值、對象或者函數(shù)。我們可以用Javascript修改頁面的屬性，雖然只是簡單的示例。我們還可以去解決實際的編程問題。
3無處不在的CSS或許你覺得CSS一點兒也不重要，而事實上，如果說HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。3.1CSS下面就是我們之前說到的代碼，css將Red三個字母變成了紅色。<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<pid="para"style="color:red">Red</p>
</body>
<scripttype="text/javascript"src="app.js"></script>
</html>
只是，varpara=document.getElementById("para");
para.style.color="blue";
將字體變成了藍色，CSS+HTML讓頁面有序的工作著，但是Javascript卻打亂了這些秩序，有著唯恐世界不亂的精彩，也難怪被冠以小三之名了——或許終于可以理解，為什么以前人們對于Javascript沒有好感了——不過這里要講的是正室，也就是CSS，這時還沒有Javascript。3.2關(guān)于CSS這不是一篇專業(yè)講述CSS的書籍，所以我不會去說CSS是怎么來的，有些東西我們既然可以很容易從其他地方知道，也就不需要花太多時間去重復(fù)。諸如重構(gòu)等這些的目的之一也在于去除重復(fù)的代碼，不過有些重復(fù)是不可少的，也是有必要的，而通常這些東西可能是由其他地方復(fù)制過來的。到目前為止我們沒有依賴于任何特殊的硬件或者是軟件，對于我們來說我們最基本的需求就是一臺電腦，或者可以是你的平板電腦，當(dāng)然也可以是你的智能手機，因為他們都有個瀏覽器，而這些都是能用的，對于我們的CSS來說也不會有例外的。CSS(CascadingStyleSheets)，到今天我也沒有記得他的全稱，CSS還有一個中文名字是層疊式樣式表，事實上翻譯成什么可能并不是我們關(guān)心的內(nèi)容，我們需要關(guān)心的是他能做些什么。作為三劍客之一，它的主要目的在于可以讓我們方便靈活地去控制Web頁面的外觀表現(xiàn)。我們可以用它做出像淘寶一樣復(fù)雜的界面，也可以像我們的書本一樣簡單，不過如果要和我們書本一樣簡單的話，可能不需要用到CSS。HTML一開始就是依照報紙的格式而設(shè)計的，我們還可以繼續(xù)用上面說到的編輯器，又或者是其他的。如果你喜歡DreamWeaver那也不錯，不過一開始使用IDE可無助于我們寫出良好的代碼。忘說了，CSS也是有版本的，和windows，Linux內(nèi)核等等一樣，但是更新可能沒有那么頻繁，HTML也是有版本的，JS也是有版本的，復(fù)雜的東西不是當(dāng)前考慮的內(nèi)容。3.3代碼結(jié)構(gòu)對于我們的上面的Red示例來說，如果沒有一個好的結(jié)構(gòu)，那么以后可能就是這樣子。<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<pstyle="font-size:22px;color:#f00;text-align:center;padding-left:20px;">如果沒有一個好的結(jié)構(gòu)</p>
<pstyle="font-size:44px;color:#3ed;text-indent:2em;padding-left:2em;">那么以后可能就是這樣子。。。。</p>
</body>
</html>
雖然我們看到的還是一樣的:于是我們就按各種書上的建議重新寫了上面的代碼<!DOCTYPEhtml>
<html>
<head>
<title>CSSexample</title>
<styletype="text/css">
.para{
font-size:22px;
color:#f00;
text-align:center;
padding-left:20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent:2em;
padding-left:2em;
}
</style>
</head>
<body>
<pclass="para">如果沒有一個好的結(jié)構(gòu)</p>
<pclass="para2">那么以后可能就是這樣子。。。。</p>
</body>
</html>
總算比上面好看也好理解多了，這只是臨時的用法，當(dāng)文件太大的時候，正式一點的寫法應(yīng)該如下所示:<!DOCTYPEhtml>
<html>
<head>
<title>CSSexample</title>
<styletype="text/css"href="style.css"></style>
</head>
<body>
<pclass="para">如果沒有一個好的結(jié)構(gòu)</p>
<pclass="para2">那么以后可能就是這樣子。。。。</p>
</body>
</html>
我們需要<!DOCTYPEhtml>
<html>
<head>
<title>CSSexample</title>
<linkhref="./style.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<pclass="para">如果沒有一個好的結(jié)構(gòu)</p>
<pclass="para2">那么以后可能就是這樣子。。。。</p>
</body>
</html>
然后我們有一個像app.js一樣的style.css放在同目錄下，而他的內(nèi)容便是.para{
font-size:22px;
color:#f00;
text-align:center;
padding-left:20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent:2em;
padding-left:2em;
}
這代碼和JS的代碼有如此多的相似varpara={
font_size:'22px',
color:'#f00',
text_align:'center',
padding_left:'20px',
}
而22px、20px以及#f00都是數(shù)值，因此：varpara={
font_size:22px,
color:#f00,
text_align:center,
padding_left:20px,
}
目測差距已經(jīng)盡可能的小了，至于這些話題會在以后討論到，如果要讓我們的編譯器更正確的工作，那么我們就需要非常多這樣的符號，除非你樂意去理解:(dotimes(i4)(printi))
總的來說我們減少了符號的使用，但是用lisp便帶入了更多的括號，不過這是一種簡潔的表達方式，也許我們可以在其他語言中看到。\d{2}/[A-Z][a-z][a-z]/\d{4}
上面的代碼，是為了從一堆數(shù)據(jù)中找出“某日/某月/某年”。如果一開始不理解那是正則表達式，就會覺得那個很復(fù)雜。這門語言可能是為設(shè)計師而設(shè)計的，但是設(shè)計師大部分還是不懂編程的，不過相對來說這門語言還是比其他語言簡單易懂一些。3.4樣式與目標如下所示，就是我們的樣式.para{
font-size:22px;
color:#f00;
text-align:center;
padding-left:20px;
}
我們的目標就是如果沒有一個好的結(jié)構(gòu)
所以樣式和目標在這里牽手了，問題是他們是如何在一起的呢？下面就是CSS與HTML溝通的重點所在了:3.4.1選擇器我們用到的選擇器叫做類選擇器，也就是class，或者說應(yīng)該稱之為class選擇器更合適。與類選擇器最常一起出現(xiàn)的是ID選擇器，不過這個適用于比較高級的場合，諸如用JS控制DOM的時候就需要用到ID選擇器。而基本的選擇器就是如下面的例子:p.para{
color:#f0f;
}
將代碼添加到style.css的最下面會發(fā)現(xiàn)“如果沒有一個好的結(jié)構(gòu)”變成了粉紅色，當(dāng)然我們還會有這樣的寫法p>.para{
color:#f0f;
}
為了產(chǎn)生上面的特殊的樣式，雖然不好看，但是我們終于理解什么叫層疊樣式了，下面的代碼的重要度比上面高，也因此有更高的優(yōu)先規(guī)則。而通常我們可以通過一個p{
text-align:left;
}
這樣的元素選擇器來給予所有的p元素一個左對齊。還有復(fù)雜一點的復(fù)合型選擇器，下面的是HTML文件<!DOCTYPEhtml>
<html>
<head>
<title>CSSexample</title>
<linkhref="./style.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<pclass="para">如果沒有一個好的結(jié)構(gòu)</p>
<divid="content">
<pclass="para2">那么以后可能就是這樣子。。。。</p>
</div>
</body>
</html>
還有CSS文件.para{
font-size:22px;
color:#f00;
text-align:center;
padding-left:20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent:2em;
padding-left:2em;
}
p.para{
color:#f0f;
}
div#contentp{
font-size:22px;
}
3.5更有趣的CSS一個包含了para2以及para_bg的例子<divid="content">
<pclass="para2para_bg">那么以后可能就是這樣子。。。。</p>
</div>
我們只是添加了一個黑色的背景.para_bg{
background-color:#000;
}
重新改變后的網(wǎng)頁變得比原來有趣了很多，所謂的繼承與合并就是上面的例子。我們還可以用CSS3做出更多有趣的效果，而這些并不在我們的討論范圍里面，因為我們討論的是beageek。或許我們寫的代碼都是那么的簡單，從HTML到Javascript，還有現(xiàn)在的CSS，只是總有一些核心的東西，而不是去考慮那些基礎(chǔ)語法，基礎(chǔ)的東西我們可以在實踐的過程中一一發(fā)現(xiàn)。但是我們可能發(fā)現(xiàn)不了，或者在平時的使用中考慮不到一些有趣的用法或者說特殊的用法，這時候可以通過觀察一些精致設(shè)計的代碼中學(xué)習(xí)到。復(fù)雜的東西可以變得很簡單，簡單的東西也可以變得很復(fù)雜。
4無處不在的三劍客這時我們終于了解了我們的三劍客，就這么可以結(jié)合到一起了，HTML+Javascript+CSS是這一切的基礎(chǔ)。而我們用到的其他語言如PHP、Python、Ruby等等的最后都會變成上面的結(jié)果，當(dāng)然還有Coffeescript之類的語言都是以此為基礎(chǔ)，這才是我們需要的知識。4.1Hello,Geek有了一些些的基礎(chǔ)之后，我們終于能試著去寫一些程序了。也是時候去創(chuàng)建一個像樣的東西，或許你在一些見面設(shè)計方面的書籍看過類似的東西，可能我寫得也沒有那些內(nèi)容好，只是這些都是一些過程。過去我們都是一點點慢慢過來的，只是現(xiàn)在我們也是如此，技術(shù)上的一些東西，事實上大家都是知道的。就好比我們都覺得我們可以開個超市，但是如果讓我們?nèi)ラ_超市的話，我們并不一定能賺錢。學(xué)習(xí)編程的目的可能不在于我們能找到一份工作，那只是在編程之外的東西，雖然確實也是很確定的。但是除些之處，有些東西也是很重要的。過去沒有理解為什么會一些人會不厭其煩地去回答別人的問題，有時候可能會想是一種能力越大責(zé)任越大的感覺，但是有時候在寫一些博客或者回答別人的問題的時候我們又重新思考了這些問題，又重新學(xué)習(xí)了這些技能。所以這里可能說的不是關(guān)于編程的東西而是一些編程以外的東西，關(guān)于學(xué)習(xí)或者學(xué)習(xí)以外的東西。4.2從源碼學(xué)習(xí)過去總會覺得學(xué)了一種語言的語法便算是學(xué)了一種語言，于是有一天發(fā)現(xiàn)到了這個語言的項目上的時候，雖然會寫上幾行代碼，但是卻不像這語言的風(fēng)格。于是這也是這一篇的意義所在了：4.3瀏覽器渲染過程基本的渲染引擎的過程如下圖所示:解析HTML去構(gòu)建DOM樹渲染樹形結(jié)構(gòu)生成渲染的樹形圖布局繪制樹形圖對于Webkit瀏覽器來說，他的過程如下所示:4.3.1HTML寫好HTML的一個要點在于看別人寫的代碼，這只是一方面，我們所說的HTML方面的內(nèi)容可能不夠多，原因有很多，很多東西都需要在實戰(zhàn)中去解決。讀萬卷書和行萬里路，分不清哪個有重要的意義，但是如果可以同時做好兩個的話，成長會很快的。寫好HTML應(yīng)該會有下面的要點了解標準及遵守絕大多數(shù)標準注重可讀性，從ID及CLASS的命名關(guān)注SEO與代碼的聯(lián)系或許在這方面我也算不上很了解，不過按筆者的經(jīng)驗來說，大致就是如此。多數(shù)情況下我們的HTML是類似于下面這樣子的<divclass="col-md-3right">
{%nevercache%}
{%include"includes/user_panel.html"%}
{%endnevercache%}
<divclass="panelpanel-default">
<divclass="panel-body">
{%blockright_panel%}
{%ifinstalledmezzanine.twitter%}
{%include"twitter/tweets.html"%}
{%endifinstalled%}
{%endblock%}
</div>
</div>
</div>
換句話說HTML只是基礎(chǔ)，而不是日常用到的。我們的HTML是由template生成的，我們可以借助于mustache.js又或者是angluarjs之類的js庫來生成最后的HTML，所以這里只是一個開始。還需要了解的一部分就是HTML的另外一個重要的部分，DOM樹形結(jié)構(gòu)4.4DOM樹形結(jié)構(gòu)圖DOM是文檔對象化模型（DocumentObjectModel）的簡稱。DOMTree是指通過DOM將HTML頁面進行解析，并生成的HTMLtree樹狀結(jié)構(gòu)和對應(yīng)訪問方法。4.4.1javascript這里以未壓縮的jQuery源碼和zepto.js作一個小小的比較，zepto.js是兼容jQuery的，因此我們舉幾個有意思的函數(shù)作一簡單的比較，關(guān)于源碼可以在官網(wǎng)上下載到。在zepto.js下面判斷一個值是否是函數(shù)的方面如下，functionisFunction(value){returntype(value)=="function"}
而在jQuery下面則是這樣的isFunction:function(obj){
returnjQuery.type(obj)==="function";
}
而他們的用法是一樣的，都是$.isFunction();
jQuery的作法是將諸如isFunction,isArray這些函數(shù)打包到j(luò)Query.extend中，而zepto.js的則是也是這樣的，只不過多了一行$.isFunction=isFunction
遺憾的是我也沒去了解過為什么，之前我也沒有看過這些庫的代碼，所以這個問題就要交給讀者去解決了。jQuery里面提供了函數(shù)式編程接口，不過jQuery更多的是構(gòu)建于CSS選擇器之上，對于DOM的操作比javascript自身提供的功能強大得多。如果我們的目的在于更好的編程，那么可能需要諸如Underscore.js之類的庫。或許說打包自己常用的函數(shù)功能為一個庫，諸如jQueryfunctionisFunction(value){returntype(value)=="function"}
functionisWindow(obj){returnobj!=null&&obj==obj.window}
functionisDocument(obj){returnobj!=null&&obj.nodeType==obj.DOCUMENT_NODE}
functionisObject(obj){returntype(obj)=="object"}
我們需要去了解一些故事背后的原因，越來越害怕GUI的原因之一，在于不知道背后發(fā)生了什么，即使是開源的，我們也無法了解真正的背后發(fā)生什么了。對于不是這個工具、軟件的用戶來說，開源更多的意義可能在于我們可以添加新的功能，以及免費。如果沒有所謂的危機感，以及認為自己一直在學(xué)習(xí)工具的話，可以試著去打包自己的函數(shù)，打包自己的庫。varcalc={
add:function(a,b){
returna+b;
},
sub:function(a,b){
returna-b;
},
dif:function(a,b){
if(a>b){
returna;
}else{
returnb;
}
}
}
然后用諸如jslint測試一下代碼。$./jsl-confjsl.default.conf
JavaScriptLint0.3.0(JavaScript-C1.52004-09-24)
DevelopedbyMatthiasMiller(http://www.JavaScriptL)
app.js
/Users/fdhuang/beageek/chapter4/src/app.js(15):lintwarning:missingsemicolon
}
^
0error(s),1warning(s)
于是我們需要在第15行添加一個分號。最好的方法還是閱讀別人的代碼，而所謂的別人指的是一些相對較大的網(wǎng)站的，有好的開發(fā)流程，代碼質(zhì)量也不會太差。而所謂的復(fù)雜的代碼都是一步步構(gòu)建上去的，羅馬不是一天建成的。有意思的是多數(shù)情況下，我們可能會用原型去開發(fā)我們的應(yīng)用，而這也是我們需要去了解和掌握的地方，functionCalc(){
}
Ctotype.add=function(a,b){
returna+b;
};
Ctotype.sub=function(a,b){
returna-b;
};
我們似乎在這里展示了更多的Javascript的用法，但是這不是一好的關(guān)于Javascript的介紹，有一天我們還要用諸如qunit之類的工具去為我們的function寫測試，這時就是一個更好的開始。如果我們樂意的話，我們也可以構(gòu)建一個類似于jQuery的框架，以用來學(xué)習(xí)。作為一門編程語言來說，我們學(xué)得很普通，在某種意義上來說算不上是一種入門。但是如果我們可以在其他的好書在看到的內(nèi)容，就沒有必要在這里進行復(fù)述，目的在于一種學(xué)習(xí)習(xí)慣的養(yǎng)成。4.4.2CSSCSS有時候很有趣，但是有時候有很多我們沒有意識到的用法，這里以Bootstrap為例，這是一個不錯的CSS庫。最令人興奮的是沒有閉源的CSS，沒有閉源的JS，這也就是前端好學(xué)習(xí)的地方所在了，不過這是一個開源的CSS庫，雖然是這樣叫的，但是稱之為CSS庫顯然不合適。a,
a:visited{
text-decoration:underline;
}
a[href]:after{
content:"("attr(href)")";
}
abbr[title]:after{
content:"("attr(title)")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after{
content:"";
}
這里有一些有趣的，值得一講的CSS用法。偽類選擇器,如a:visited這樣需要其他條件來對元素應(yīng)用樣式，用于已訪問的鏈接。屬性選擇器,如a[href]這樣當(dāng)a元素存在href這樣的屬性的時候來尋找應(yīng)用元素。其他的還需要去好好了解的就是CSS的盒模型，作為CSS的基石之一。4.5CSS盒模型圖(ps:以下內(nèi)容來自于MozillaDeveloperNetWorks)CSS下這些矩形盒子由標準盒模型描述。這個模型描述元素內(nèi)容占用空間。盒子有四個邊界：外邊距邊界marginedge,邊框邊界borderedge,內(nèi)邊距邊界paddingedge與內(nèi)容邊界contentedge。內(nèi)容區(qū)域contentarea是真正包含元素內(nèi)容的區(qū)域。位于內(nèi)容邊界的內(nèi)部，它的大小為內(nèi)容寬度或content-box寬及內(nèi)容高度或content-box高。如果box-sizing為默認值，width,min-width,max-width,height,min-height與max-height控制內(nèi)容大小。內(nèi)邊距區(qū)域paddingarea用內(nèi)容及可能的邊框之間的空白區(qū)域擴展內(nèi)容區(qū)域。它位于內(nèi)邊距邊界內(nèi)部，通常有背景——顏色或圖片（不透明圖片蓋住背景顏色）.它的大小為padding-box寬與padding-box高。內(nèi)邊距與內(nèi)容邊界之間的空間可以由padding-top,padding-right,padding-bottom,padding-left和簡寫屬性padding控制。邊框區(qū)域borderarea是包含邊框的區(qū)域，擴展了內(nèi)邊距區(qū)域。它位于邊框邊界內(nèi)部，大小為border-box寬和border-box高。由border-width及簡寫屬性border控制。外邊距區(qū)域marginarea用空白區(qū)域擴展邊框區(qū)域，以分開相鄰的元素。它的大小為margin-box的高寬。外邊距區(qū)域大小由margin-top,margin-right,margin-bottom,margin-left及簡寫屬性margin控制。在外邊距合并的情況下，由于盒之間共享外邊距，外邊距不容易弄清楚。最后注意，對于行內(nèi)非替換元素，其占用空間（行高）由line-height決定，即使有內(nèi)邊距與邊框。諸如*{
margin:0px;
padding:0px;
font-family:Helvetica;
}
這樣的通用器用來進行全局選擇的工具和我們用于抵消某個body對于子選擇器的影響一樣值得注意得多。4.6筆記寫博客似乎是一個不錯的好習(xí)慣，作為一個不是很優(yōu)秀的寫手。對于來說，有時候發(fā)現(xiàn)原來能教會別人對于自己的能力來說算是一種肯定。有些時候教會別人才算是自己學(xué)會的表現(xiàn)，總會在項目上的時候需要自己去復(fù)述工作的一個過程，我們需要整理好我們的思路才能帶給別人更多的收獲。我們的筆記上總會留下自己的學(xué)習(xí)的一些過程，有些時候我們想要的只是一點點的鼓勵，有時是諸如評論一類，有時可能是諸如訪問量。更多的可能是我們可以重新整理自己的知識，好好復(fù)習(xí)一下，以便于好好記住，寫出來是一個好的過程。無處不在的三劍客就這樣到了這里，寫得似乎很多也很少，但是還是沒有做出來一個東西，于是我們朝著這樣一個方向前進。
5GNU/Linux5.1什么是LinuxLinux是一種自由和開放源碼的類UNIX操作系統(tǒng)內(nèi)核。目前存在著許多不同的Linux發(fā)行版，可安裝在各種各樣的電腦硬件設(shè)備，從手機、平板電腦、路由器和影音游戲控制臺，到桌上型電腦，大型電腦和超級電腦。Linux是一個領(lǐng)先的操作系統(tǒng)內(nèi)核，世界上運算最快的10臺超級電腦運行的都是基于Linux內(nèi)核的操作系統(tǒng)。Linux操作系統(tǒng)也是自由軟件和開放源代碼發(fā)展中最著名的例子。只要遵循GNU通用公共許可證,任何人和機構(gòu)都可以自由地使用Linux的所有底層源代碼，也可以自由地修改和再發(fā)布。嚴格來講，Linux這個詞本身只表示Linux內(nèi)核，但在實際上人們已經(jīng)習(xí)慣了用Linux來形容整個基于Linux內(nèi)核，并且使用GNU工程各種工具和數(shù)據(jù)庫的操作系統(tǒng)（也被稱為GNU/Linux）。通常情況下，Linux被打包成供桌上型電腦和服務(wù)器使用的Linux發(fā)行版本。一些流行的主流Linux發(fā)行版本，包括Debian（及其衍生版本Ubuntu），F(xiàn)edora和openSUSE等。Linux得名于電腦業(yè)余愛好者LinusTorvalds。而不是如百度百科所講的Linux操作系統(tǒng)是UNIX操作系統(tǒng)的一種克隆系統(tǒng)。它誕生于1991年的Linux桌面[1]10月5日（這是第一次正式向外公布的時間）。以后借助于Internet網(wǎng)絡(luò)，并通過全世界各地計算機愛好者的共同努力，已成為今天世界上使用最多的一種UNIX類操作系統(tǒng)，并且使用人數(shù)還在迅猛增長。Linux只是個內(nèi)核，而不是操作系統(tǒng)，所以在這我們再理解一下操作系統(tǒng)是由什么組成的。5.2操作系統(tǒng)操作系統(tǒng)（英語：OperatingSystem，簡稱OS）是管理計算機硬件與軟件資源的計算機程序，同時也是計算機系統(tǒng)的內(nèi)核與基石。操作系統(tǒng)需要處理如管理與配置內(nèi)存、決定系統(tǒng)資源供需的優(yōu)先次序、控制輸入與輸出設(shè)備、操作網(wǎng)絡(luò)與管理文件系統(tǒng)等基本事務(wù)。操作系統(tǒng)也提供一個讓用戶與系統(tǒng)交互的操作界面。操作系統(tǒng)的型態(tài)非常多樣，不同機器安裝的操作系統(tǒng)可從簡單到復(fù)雜，可從手機的嵌入式系統(tǒng)到超級計算機的大型操作系統(tǒng)。許多操作系統(tǒng)制造者對它涵蓋范疇的定義也不盡一致，例如有些操作系統(tǒng)集成了圖形用戶界面(GUI)，而有些僅使用命令行界面(CLI)，而將GUI視為一種非必要的應(yīng)用程序。操作系統(tǒng)位于底層硬件與用戶之間，是兩者溝通的橋梁。用戶可以通過操作系統(tǒng)的用戶界面，輸入命令。操作系統(tǒng)則對命令進行解釋，驅(qū)動硬件設(shè)備，實現(xiàn)用戶要求。以現(xiàn)代標準而言，一個標準PC的操作系統(tǒng)應(yīng)該提供以下的功能：進程管理（Processingmanagement）內(nèi)存管理（Memorymanagement）文件系統(tǒng)（Filesystem）網(wǎng)絡(luò)通信（Networking）安全機制（Security）用戶界面（Userinterface）驅(qū)動程序（Devicedrivers）而讓我們來看一下兩者之間的不同之處，這是一張linux的架構(gòu)圖我們可以發(fā)現(xiàn)內(nèi)核只是位于底層。5.2.1Linux架構(gòu)圖用戶模式應(yīng)用程序（sh、\o"Vi"\hvi、\o"OpenO"\hOpenO等）復(fù)雜\o"庫"\h庫（\o"KDE"\hKDE、glib等）簡單庫（opendbm、sin等）C庫（open、fopen、socket、exec、calloc等）內(nèi)核模式系統(tǒng)中斷、調(diào)用、錯誤等軟硬件消息內(nèi)核（驅(qū)動程序、進程、網(wǎng)絡(luò)、內(nèi)存管理等）硬件（處理器、內(nèi)存、各種設(shè)備）我們可以發(fā)現(xiàn)，由linux內(nèi)核+shell可以構(gòu)成一個操作系統(tǒng)，而linux本身只是個內(nèi)核，也就是圖中的內(nèi)核模式，負責(zé)控制系統(tǒng)的這些部分。也就是我們可以發(fā)現(xiàn)，Linux內(nèi)核構(gòu)成了一個操作系統(tǒng)除用戶界面以外的部分，而shell就是這最后的用戶界面。而linux內(nèi)核以外的部分就是由GNU計劃構(gòu)成的。5.2.2ShellShell是系統(tǒng)的用戶界面，提供了用戶與內(nèi)核進行交互操作的一種接口。它接收用戶輸入的命令并把它送入內(nèi)核去執(zhí)行。實際上Shell是一個命令解釋器，它解釋由用戶輸入的命令并且把它們送到內(nèi)核。不僅如此，Shell有自己的編程語言用于對命令的編輯，它允許用戶編寫由shell命令組成的程序。Shell編程語言具有普通編程語言的很多特點，比如它也有循環(huán)結(jié)構(gòu)和分支控制結(jié)構(gòu)等，用這種編程語言編寫的Shell程序與其他應(yīng)用程序具有同樣的效果bash是一個為GNU計劃編寫的Unixshell。它的名字是一系列縮寫：Bourne-AgainSHell—這是關(guān)于Bourneshell（sh）的一個雙關(guān)語（Bourneagain/bornagain）。Bourneshell是一個早期的重要shell，由史蒂夫·伯恩在1978年前后編寫，并同Version7Unix一起發(fā)布。bash則在1987年由布萊恩·?？怂箘?chuàng)造。在1990年，ChetRamey成為了主要的維護者。shell將會是我們在GNU/linux中經(jīng)常用到的經(jīng)常有到的工具之一，用來操作計算機用的。在遷移到linux之前我們可以試用cygwin來進行模擬：Cygwin是許多自由軟件的集合，最初由CygnusSolutions開發(fā)，用于各種版本的MicrosoftWindows上，運行UNIX類系統(tǒng)。5.2.3GCCGCC（GNUCompilerCollection，GNU編譯器套裝），是一套由GNU開發(fā)的編程語言編譯器。它是一套以GPL及LGPL許可證所發(fā)行的自由軟件，也是GNU計劃的關(guān)鍵部分，亦是自由的類Unix及蘋果電腦MacOSX操作系統(tǒng)的標準編譯器。GCC（特別是其中的C語言編譯器）也常被認為是跨平臺編譯器的事實標準。GCC原名為GNUC語言編譯器（GNUCCompiler），因為它原本只能處理C語言。GCC很快地擴展，變得可處理C++。之后也變得可處理Fortran、Pascal、Objective-C、Java、Ada，以及Go與其他語言。#include<stdio.h>
main()
{
printf("Helloworld\n");
}
~/temp/free>gcchello.c-ohello
hello.c:2:1:warning:typespecifiermissing,defaultsto'int'[-Wimplicit-int]
main()
^~~~
1warninggenerated.
~/temp/free>./hello
Helloworld
同shell一樣，對于GNU/linux系統(tǒng)而言,GCC的作用也是無可取代的。當(dāng)然如果只是一般用途的話，GCC對于一般用戶可能沒用，但是在些GNU/Linux系統(tǒng)上，我們可能就需要自己編譯源碼成二進制文件，而沒有軟件包，因而其重要性是不言而喻的。自然的如果我們自己動手編譯GNU/Linux操作系統(tǒng)的話，我們會理解其的重要意義。有興趣的同學(xué)可以試一下：LinuxFromScratch(LFS)。5.2.4啟動引導(dǎo)程序最后，當(dāng)我們構(gòu)成以上的那些之后，我們就需要一個引導(dǎo)程序，以便使系統(tǒng)啟動，引導(dǎo)進內(nèi)核。啟動程序（bootloader）于電腦或其他計算機應(yīng)用上，是指引導(dǎo)操作系統(tǒng)啟動的程序。啟動程序啟動方式與程序視應(yīng)用機型種類。例如在普通PC上，引導(dǎo)程序通常分為兩部分：第一階段引導(dǎo)程序位于主引導(dǎo)記錄，用于引導(dǎo)位于某個分區(qū)上的第二階段引導(dǎo)程序，如NTLDR、GNUGRUB等。BIOS開機完成后，bootloader就接手初始化硬件設(shè)備、創(chuàng)建存儲器空間的映射，以便為操作系統(tǒng)內(nèi)核準備好正確的軟硬件環(huán)境。簡單的bootloader的虛擬匯編碼，如其后的八個指令:0:將P暫存器的值設(shè)為81:檢查紙帶({papertape)讀取器，是否已經(jīng)可以進行讀取2:如果還不能進行讀取,跳至13:從紙帶讀取器，讀取一byte至累加器4:如為帶子結(jié)尾，跳至85:將暫存器的值，存儲至P暫存器中的數(shù)值所指定的地址6:增加P暫存器的值7:跳至1但是隨著計算機操作系統(tǒng)越來越復(fù)雜，位于MBR的空間已經(jīng)放不下引導(dǎo)操作系統(tǒng)的代碼，于是就有了第二階段的引導(dǎo)程序，而MBR中代碼的功能也從直接引導(dǎo)操作系統(tǒng)變成了引導(dǎo)第二階段的引導(dǎo)程序。通常在一個GNU/Linux系統(tǒng)中選用GNUGRUB做為引導(dǎo)程序，例如Ubuntu就是用GRUB2。GNUGRUB（簡稱“GRUB”）是一個來自GNU項目的啟動引導(dǎo)程序。GRUB是多啟動規(guī)范的實現(xiàn)，它允許用戶可以在計算機內(nèi)同時擁有多個操作系統(tǒng)，并在計算機啟動時選擇希望運行的操作系統(tǒng)。GRUB可用于選擇操作系統(tǒng)分區(qū)上的不同內(nèi)核，也可用于向這些內(nèi)核傳遞啟動參數(shù)。GNUGRUB的前身為GrandUnifiedBootloader。它主要用于類Unix系統(tǒng)；同大多Linux發(fā)行版一樣，GNU系統(tǒng)也采用GNUGRUB作為它的啟動器。Solaris從101/06版開始在x86系統(tǒng)上也采用GNUGRUB作為啟動器。以上也就構(gòu)成了一個簡單的操作系統(tǒng)。5.3從編譯開始我們以一次編譯開始我們的Linux學(xué)習(xí)之旅。5.3.1開始之前如果你沒有用過GNU/Linux，我想你需要在虛擬機上安裝一個。一個主流的GNU/Linux發(fā)行版，如Ubuntu,CentOS,Debian,Mint,OpenSUSE,Fedora等等。學(xué)會如何打開shell(ps:bash,zsh,sh等等)。或者你也可以在Windows上安裝Cygwin。5.3.2編譯Nginx1.下載這個軟件的源碼包wget/download/nginx-1.7.4.tar
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 第二課 信息傳輸新體驗 教學(xué)設(shè)計 2024-2025學(xué)年西交大版（2024）初中信息技術(shù)七年級上冊
- 腦卒中治療和護理
- 二零二五年度銀聯(lián)國際個人信用卡領(lǐng)用與全球支付服務(wù)合同
- 2025至2030年中國帶置物架豪華淋浴房數(shù)據(jù)監(jiān)測研究報告
- 二零二五年度房產(chǎn)贈與子女協(xié)議書聯(lián)合子女房產(chǎn)租賃收益共同管理協(xié)議
- 互換性第1章 學(xué)習(xí)教材
- 2025年催化劑用載體合作協(xié)議書
- 二零二五年度婚內(nèi)房產(chǎn)權(quán)屬爭議調(diào)解及處理合同
- 二零二五年度拆除工程安全風(fēng)險評估及整改協(xié)議
- 二零二五年度家庭保姆家庭服務(wù)規(guī)范協(xié)議
- 公司辦公室5S管理規(guī)定(實用含圖片)
- (完整版)餐飲員工入職登記表
- 智能化工程施工工藝圖片講解
- 人教版小學(xué)五年級數(shù)學(xué)下冊教材解讀
- 2022年最新蘇教版五年級下冊科學(xué)全冊教案
- 咳嗽與咳痰課件
- 咖啡樹的修剪方法和技術(shù)_種植技巧
- 小學(xué)四年級數(shù)學(xué)奧數(shù)應(yīng)用題100題
- 綜合布線驗收報告材料
- 《初三心理健康教育》ppt課件
- 重慶鐵塔公司配套設(shè)備安裝施工服務(wù)技術(shù)規(guī)范書
評論
0/150
提交評論