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