免費AI編程助手
2 無處不在的Javascript
無處不在的Javascript
Javascript現(xiàn)在已經(jīng)無處不在了，也許你正打開的某個網(wǎng)站，他便可能是node.js+json+javascript+mustache.js完成的，雖然你還沒理解上面那些是什么，也正是因為你不理解才需要去學習更多的東西。但是你只要知道Javascript已經(jīng)無處不在了，它可能就在你手機上的某個app里，就在你瀏覽的網(wǎng)頁里，就運行在你IDE中的某個進程里。
2.1 Javascript的Hello,world
這里我們還需要有一個helloworld.html，Javascript是專為網(wǎng)頁交互而設(shè)計的腳本語言，所以我們一點點來開始這部分的旅途，先寫一個符合標準的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結(jié)尾。就像C語言的源碼是以C結(jié)尾的，我們也同樣需要讓我們的代碼看上去更正式一點。于是我們需要在helloworld.html的同一文件夾下創(chuàng)建一個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>從數(shù)學出發(fā)
讓我們回到第一章講述的小明的問題，從實際問題下手編程，更容易學會編程。小學時代的數(shù)學題最喜歡這樣子了——某商店里的糖一個5塊錢，小明買了3個糖，小明一共花了多少錢。在編程方面，也許我們還算是小學生。最直接的方法就是直接計算3x5=?
document.write(3*5);document.write實際也我們可以理解為輸出，也就是往頁面里寫入3*5的結(jié)果，在有雙引號的情況下會輸出字符串。我們便會在瀏覽器上看到15，這便是一個好的開始，也是一個糟糕的開始。
2.3 設(shè)計和編程
對于實際問題，如果我們只是止于所要得到的結(jié)果，很多年之后，我們就成為了code monkey。對這個問題進行再一次設(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ù)
記得剛開始學三角函數(shù)的時候，我們會寫
sin 30=0.5而我們的函數(shù)也是類似于此，換句話說，因為很多搞計算機的先驅(qū)都學好了數(shù)學，都把數(shù)學世界的規(guī)律帶到了計算機世界，所以我們的函數(shù)也是類似于此，讓我們做一個簡單的開始。
function hello(){
return document.write("hello,world");
}
hello();當我第一次看到函數(shù)的時候，有些小激動終于出現(xiàn)了。我們寫了一個叫hello的函數(shù)，它返回了往頁面中寫入hello,world的方法，然后我們調(diào)用了hello這個函數(shù)，于是頁面上有了hello,world。
function sin(degree){
return document.write(Math.sin(degree));
}
sin(30);在這里degree就稱之為變量。 于是輸出了-0.9880316240928602，而不是0.5，因為這里用的是弧度制，而不是角度制。
sin(30)的輸出結(jié)果有點類似于sin 30。寫括號的目的在于，括號是為了方便解析，這個在不同的語言中可能是不一樣的，比如在ruby中我們可以直接用類似于數(shù)學中的表達:
2.0.0-p353 :004 > Math.sin 30
=> -0.9880316240928618
2.0.0-p353 :005 >我們可以在函數(shù)中傳入多個變量，于是我們再回到小明的問題，就會這樣去編寫代碼。
function calc(tang,num){
result=tang*num;
document.write(result);
}
calc(3,4);但是從某種程度上來說，我們的calc做了計算的事又做了輸出的事，總的來說設(shè)計上有些不好。
2.3.2 重新設(shè)計
我們將輸出的工作移到函數(shù)的外面，
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)看上去更專業(yè)了一點點，如果我們只需要計算的時候我們只需要調(diào)用calc，如果我們需要輸出的時候我們就調(diào)用printResult的方法。
2.3.3 object和函數(shù)
我們還沒有說清楚之前我們遇到過的document.write以及Math.sin的語法為什么看上去很奇怪，所以讓我們看看他們到底是什么，修改app.js為以下內(nèi)容
document.write(typeof document);
document.write(typeof Math);typeof document會返回document的數(shù)據(jù)類型，就會發(fā)現(xiàn)輸出的結(jié)果是
object object所以我們需要去弄清楚什么是object。對象的定義是
無序?qū)傩缘募?，其屬性可以包含基本值、對象或者函?shù)。
創(chuàng)建一個object，然后觀察這便是我們接下來要做的
store={};
store.tang=4;
store.num=3;
document.write(store.tang*store.num);我們就有了和document.write一樣的用法，這也是對象的美妙之處，只是這里的對象只是包含著基本值，因為
typeof story.tang="number"一個包含對象的對象應(yīng)該是這樣子的。
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都是屬于這個無序?qū)傩约现械暮瘮?shù)。
下面代碼說的就是這個無序?qū)傩约兄械暮瘮?shù)。
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的函數(shù)，他的作用也就是document.write，IO中的print函數(shù)是等價于print()函數(shù)，這也就是對象和函數(shù)之間的一些區(qū)別，對象可以包含函數(shù)，對象是無序?qū)傩缘募?，其屬性可以包含基本值、對象或者函?shù)。
復(fù)雜一點的對象應(yīng)該是下面這樣的一種情況。
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 面向?qū)ο?/h3>
開始之前先讓我們簡化上面的代碼，
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是一個函數(shù)，但是我們聲明的person卻變成了一個對象一個Javascript函數(shù)也是一個對象，并且，所有的對象從技術(shù)上講也只不過是函數(shù)。這里的"\"是HTML中的元素，稱之為DOM，在這里起的是換行的作用，我們會在稍后介紹它，這里我們先關(guān)心下this。this關(guān)鍵字表示函數(shù)的所有者或作用域，也就是這里的Person。
上面的方法顯得有點不可取，換句話說和一開始的
document.write(3*4);一樣，不具有靈活性，因此在我們完成功能之后，我們需要對其進行優(yōu)化，這就是程序設(shè)計的真諦——解決完實際問題后，我們需要開始真正的設(shè)計，而不是解決問題時的編程。
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>");于是，產(chǎn)生了這樣一個可重用的Javascript對象,this關(guān)鍵字確立了屬性的所有者。
2.4 其他
Javascript還有一個很強大的特性，也就是原型繼承，不過這里我們先不考慮這些部分，用盡量少的代碼及關(guān)鍵字來實際我們所要表達的核心功能，這才是這里的核心，其他的東西我們可以從其他書本上學到。
所謂的繼承，
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應(yīng)該由下列三個部分組成:
- 核心(ECMAScript)——核心語言功能
- 文檔對象模型(DOM)——訪問和操作網(wǎng)頁內(nèi)容的方法和接口
- 瀏覽器對象模型(BOM)——與瀏覽器交互的方法和接口
我們在上面講的都是ECMAScript，也就是語法相關(guān)的，但是JS真正強大的，或者說我們最需要的可能就是對DOM的操作，這也就是為什么jQuery等庫可以流行的原因之一，而核心語言功能才是真正在哪里都適用的，至于BOM，真正用到的機會很少，因為沒有完善的統(tǒng)一的標準。
一個簡單的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操作實現(xiàn)的。
2.5 美妙之處
這里說到的Javascript僅僅只是其中的一小小部分，忽略掉的東西很多，只關(guān)心的是如何去設(shè)計一個實用的app，作為一門編程語言，他還有其他強大的內(nèi)制函數(shù)，要學好需要一本有價值的參考書。這里提到的只是其中的不到20%的東西，其他的80%或者更多會在你解決問題的時候出現(xiàn)。
- 我們可以創(chuàng)建一個對象或者函數(shù)，它可以包含基本值、對象或者函數(shù)。
- 我們可以用Javascript修改頁面的屬性，雖然只是簡單的示例。
- 我們還可以去解決實際的編程問題。
更多建議：