2 無處不在的Javascript · 一步步搭建物聯網系統

# 無處不在的Javascript Javascript現在已經無處不在了，也許你正打開的某個網站，他便可能是node.js+json+javascript+mustache.js完成的，雖然你還沒理解上面那些是什么，也正是因為你不理解才需要去學習更多的東西。但是你只要知道Javascript已經無處不在了，它可能就在你手機上的某個app里，就在你瀏覽的網頁里，就運行在你IDE中的某個進程里。 ## 2.1　Javascript的Hello,world 這里我們還需要有一個helloworld.html，Javascript是專為網頁交互而設計的腳本語言，所以我們一點點來開始這部分的旅途，先寫一個符合標準的helloworld.html ~~~ <!DOCTYPE html> <html> <head></head> <body></body> </html> ~~~ 然后開始融入我們的javascript，向HTML中插入Javascript的方法，就需要用到html中的標簽，我們先用頁面嵌入的方法來寫helloworld。 ~~~ html <!DOCTYPE html> <html> <head> <script> document.write('hello,world'); </script> </head> <body></body> </html> ~~~ 按照標準的寫法，我們還需要聲明這個腳本的類型 ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript"> document.write('hello,world'); </script> </head> <body></body> </html> ~~~ 沒有顯示hello,world?試試下面的代碼 ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript"> document.write('hello,world'); </script> </head> <body> <noscript> disable Javascript </noscript> </body> </html> ~~~ ## 2.2　更js一點我們需要讓我們的代碼看上去更像是js，同時是以js結尾。就像C語言的源碼是以C結尾的，我們也同樣需要讓我們的代碼看上去更正式一點。于是我們需要在helloworld.html的同一文件夾下創建一個app.js文件，在里面寫著 ~~~ document.write('hello,world'); ~~~ 同時我們的helloworld.html還需要告訴我們的瀏覽器js代碼在哪里 ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript" src="app.js"></script> </head> <body> <noscript> disable Javascript </noscript> </body> </html> ~~~ ### 從數學出發讓我們回到第一章講述的小明的問題，**從實際問題下手編程，更容易學會編程**。小學時代的數學題最喜歡這樣子了——某商店里的糖一個5塊錢，小明買了3個糖，小明一共花了多少錢。在編程方面，也許我們還算是小學生。最直接的方法就是直接計算3x5=? ~~~ document.write(3*5); ~~~ document.write實際也我們可以理解為輸出，也就是往頁面里寫入3*5的結果，在有雙引號的情況下會輸出字符串。我們便會在瀏覽器上看到15，這便是一個好的開始，也是一個糟糕的開始。 ## 2.3　設計和編程對于實際問題，如果我們只是止于所要得到的結果，很多年之后，我們就成為了code monkey。對這個問題進行再一次設計，所謂的設計有些時候會把簡單的問題復雜化，有些時候會使以后的擴展更加簡單。這一天因為這家商店的糖價格太高了，于是店長將價格降為了4塊錢。 ~~~ document.write(3*4); ~~~ 于是我們又得到了我們的結果，但是下次我們看到這些代碼的時候沒有分清楚哪個是糖的數量，哪個是價格，于是我們重新設計了程序 ~~~ tang=4; num=3; document.write(tang*num); ~~~ 這才能叫得上是程序設計，或許你注意到了";"這個符號的存在，我想說的是這是另外一個標準，我們不得不去遵守，也不得不去fuck。 ### 2.3.1　函數記得剛開始學三角函數的時候，我們會寫 ~~~ sin 30=0.5 ~~~ 而我們的函數也是類似于此，換句話說，因為很多搞計算機的先驅都學好了數學，都把數學世界的規律帶到了計算機世界，所以我們的函數也是類似于此，讓我們做一個簡單的開始。 ~~~ function hello(){ return document.write("hello,world"); } hello(); ~~~ 當我第一次看到函數的時候，有些小激動終于出現了。我們寫了一個叫hello的函數，它返回了往頁面中寫入hello,world的方法，然后我們調用了hello這個函數，于是頁面上有了hello,world。 ~~~ function sin(degree){ return document.write(Math.sin(degree)); } sin(30); ~~~ 在這里degree就稱之為變量。于是輸出了-0.9880316240928602，而不是0.5，因為這里用的是弧度制，而不是角度制。 ~~~ sin(30) ~~~ 的輸出結果有點類似于sin 30。寫括號的目的在于，括號是為了方便解析，這個在不同的語言中可能是不一樣的，比如在ruby中我們可以直接用類似于數學中的表達: ~~~ 2.0.0-p353 :004 > Math.sin 30 => -0.9880316240928618 2.0.0-p353 :005 > ~~~ 我們可以在函數中傳入多個變量，于是我們再回到小明的問題，就會這樣去編寫代碼。 ~~~ function calc(tang,num){ result=tang*num; document.write(result); } calc(3,4); ~~~ 但是從某種程度上來說，我們的calc做了計算的事又做了輸出的事，總的來說設計上有些不好。 ### 2.3.2　重新設計我們將輸出的工作移到函數的外面， ~~~ function calc(tang,num){ return tang*num; } document.write(calc(3,4)); ~~~ 接著我們用一種更有意思的方法來寫這個問題的解決方案 ~~~ function calc(tang,num){ return tang*num; } function printResult(tang,num){ document.write(calc(tang,num)); } printResult(3, 4) ~~~ 看上去更專業了一點點，如果我們只需要計算的時候我們只需要調用calc，如果我們需要輸出的時候我們就調用printResult的方法。 ### 2.3.3　object和函數我們還沒有說清楚之前我們遇到過的document.write以及Math.sin的語法為什么看上去很奇怪，所以讓我們看看他們到底是什么，修改app.js為以下內容 ~~~ document.write(typeof document); document.write(typeof Math); ~~~ typeof document會返回document的數據類型，就會發現輸出的結果是 ~~~ object object ~~~ 所以我們需要去弄清楚什么是object。對象的定義是 > 無序屬性的集合，其屬性可以包含基本值、對象或者函數。創建一個object，然后觀察這便是我們接下來要做的 ~~~ store={}; store.tang=4; store.num=3; document.write(store.tang*store.num); ~~~ 我們就有了和document.write一樣的用法，這也是對象的美妙之處，只是這里的對象只是包含著基本值，因為 ~~~ typeof story.tang="number" ~~~ 一個包含對象的對象應該是這樣子的。 ~~~ store={}; store.tang=4; store.num=3; document.writeln(store.tang*store.num); var wall=new Object(); wall.store=store; document.write(typeof wall.store); ~~~ 而我們用到的document.write和上面用到的document.writeln都是屬于這個無序屬性集合中的函數。下面代碼說的就是這個無序屬性集中中的函數。 ~~~ var IO=new Object(); function print(result){ document.write(result); }; IO.print=print; IO.print("a obejct with function"); IO.print(typeof IO.print); ~~~ 我們定義了一個叫IO的對象，聲明對象可以用 ~~~ var store={}; ~~~ 又或者是 ~~~ var store=new Object{}; ~~~ 兩者是等價的，但是用后者的可讀性會更好一點，我們定義了一個叫print的函數，他的作用也就是document.write，IO中的print函數是等價于print()函數，這也就是對象和函數之間的一些區別，對象可以包含函數，對象是無序屬性的集合，其屬性可以包含基本值、對象或者函數。復雜一點的對象應該是下面這樣的一種情況。 ~~~ var Person={name:"phodal",weight:50,height:166}; function dream(){ future; }; Person.future=dream; document.write(typeof Person); document.write(Person.future); ~~~ 而這些會在我們未來的實際編程過程中用得更多。 ### 2.3.4　面向對象開始之前先讓我們簡化上面的代碼， ~~~ Person.future=function dream(){ future; } ~~~ 看上去比上面的簡單多了，不過我們還可以簡化為下面的代碼。。。 ~~~ var Person=function(){ this.name="phodal"; this.weight=50; this.height=166; this.future=function dream(){ return "future"; }; }; var person=new Person(); document.write(person.name+"<br>"); document.write(typeof person+"<br>"); document.write(typeof person.future+"<br>"); document.write(person.future()+"<br>"); ~~~ 只是在這個時候Person是一個函數，但是我們聲明的person卻變成了一個對象**一個Javascript函數也是一個對象，并且，所有的對象從技術上講也只不過是函數。**這里的"\"是HTML中的元素，稱之為DOM，在這里起的是換行的作用，我們會在稍后介紹它，這里我們先關心下this。this關鍵字表示函數的所有者或作用域，也就是這里的Person。上面的方法顯得有點不可取，換句話說和一開始的 ~~~ document.write(3*4); ~~~ 一樣，不具有靈活性，因此在我們完成功能之后，我們需要對其進行優化，這就是程序設計的真諦——解決完實際問題后，我們需要開始真正的設計，而不是解決問題時的編程。 ~~~ var Person=function(name,weight,height){ this.name=name; this.weight=weight; this.height=height; this.future=function(){ return "future"; }; }; var phodal=new Person("phodal",50,166); document.write(phodal.name+"<br>"); document.write(phodal.weight+"<br>"); document.write(phodal.height+"<br>"); document.write(phodal.future()+"<br>"); ~~~ 于是，產生了這樣一個可重用的Javascript對象,this關鍵字確立了屬性的所有者。 ## 2.4　其他 Javascript還有一個很強大的特性，也就是原型繼承，不過這里我們先不考慮這些部分，用盡量少的代碼及關鍵字來實際我們所要表達的核心功能，這才是這里的核心，其他的東西我們可以從其他書本上學到。所謂的繼承， ~~~ var Chinese=function(){ this.country="China"; } var Person=function(name,weight,height){ this.name=name; this.weight=weight; this.height=height; this.futrue=function(){ return "future"; } } Chinese.prototype=new Person(); var phodal=new Chinese("phodal",50,166); document.write(phodal.country); ~~~ 完整的Javascript應該由下列三個部分組成: * 核心(ECMAScript)——核心語言功能 * 文檔對象模型(DOM)——訪問和操作網頁內容的方法和接口 * 瀏覽器對象模型(BOM)——與瀏覽器交互的方法和接口我們在上面講的都是ECMAScript，也就是語法相關的，但是JS真正強大的，或者說我們最需要的可能就是對DOM的操作，這也就是為什么jQuery等庫可以流行的原因之一，而核心語言功能才是真正在哪里都適用的，至于BOM，真正用到的機會很少，因為沒有完善的統一的標準。一個簡單的DOM示例, ~~~ <!DOCTYPE html> <html> <head> </head> <body> <noscript> disable Javascript </noscript> <p id="para" style="color:red">Red</p> </body> <script type="text/javascript" src="app.js"></script> </html> ~~~ 我們需要修改一下helloworld.html添加 ~~~ <p id="para" style="color:red">Red</p> ~~~ 同時還需要將script標簽移到body下面，如果沒有意外的話我們會看到頁面上用紅色的字體顯示Red，修改app.js。 ~~~ var para=document.getElementById("para"); para.style.color="blue"; ~~~ 接著，字體就變成了藍色，有了DOM我們就可以對頁面進行操作，可以說我們看到的絕大部分的頁面效果都是通過DOM操作實現的。 ## 2.5　美妙之處這里說到的Javascript僅僅只是其中的一小小部分，忽略掉的東西很多，只關心的是如何去設計一個實用的app，作為一門編程語言，他還有其他強大的內制函數，要學好需要一本有價值的參考書。這里提到的只是其中的不到20%的東西，其他的80%或者更多會在你解決問題的時候出現。 * 我們可以創建一個對象或者函數，它可以包含基本值、對象或者函數。 * 我們可以用Javascript修改頁面的屬性，雖然只是簡單的示例。 * 我們還可以去解決實際的編程問題。