国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的Javascript

tylin / 801人閱讀

摘要：于是我們需要在的同一文件夾下創(chuàng)建一個(gè)文件，在里面寫著同時(shí)我們的還需要告訴我們的瀏覽器代碼在哪里從數(shù)學(xué)出發(fā)讓我們回到第一章講述的小明的問題，從實(shí)際問題下手編程，更容易學(xué)會(huì)編程。

無處不在的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)程里。

Javascript的Hello,world

這里我們還需要有一個(gè)helloworld.html，Javascript是專為網(wǎng)頁交互而設(shè)計(jì)的腳本語言，所以我們一點(diǎn)點(diǎn)來開始這部分的旅途，先寫一個(gè)符合標(biāo)準(zhǔn)的helloworld.html

html

然后開始融入我們的javascript，向HTML中插入Javascript的方法，就需要用到html中的

按照標(biāo)準(zhǔn)的寫法，我們還需要聲明這個(gè)腳本的類型

html

沒有顯示hello,world?試試下面的代碼

html
更js一點(diǎn)

我們需要讓我們的代碼看上去更像是js，同時(shí)是以js結(jié)尾。就像C語言的源碼是以C結(jié)尾的，我們也同樣需要讓我們的代碼看上去更正式一點(diǎn)。于是我們需要在helloworld.html的同一文件夾下創(chuàng)建一個(gè)app.js文件，在里面寫著

javascriptdocument.write("hello,world");

同時(shí)我們的helloworld.html還需要告訴我們的瀏覽器js代碼在哪里

html
從數(shù)學(xué)出發(fā)

讓我們回到第一章講述的小明的問題，從實(shí)際問題下手編程，更容易學(xué)會(huì)編程。小學(xué)時(shí)代的數(shù)學(xué)題最喜歡這樣子了——某商店里的糖一個(gè)5塊錢，小明買了3個(gè)糖，小明一共花了多少錢。在編程方面，也許我們還算是小學(xué)生。最直接的方法就是直接計(jì)算3x5=?

javascriptdocument.write(3*5);

document.write實(shí)際也我們可以理解為輸出，也就是往頁面里寫入3*5的結(jié)果，在有雙引號(hào)的情況下會(huì)輸出字符串。我們便會(huì)在瀏覽器上看到15，這便是一個(gè)好的開始，也是一個(gè)糟糕的開始。

設(shè)計(jì)和編程

對(duì)于實(shí)際問題，如果我們只是止于所要得到的結(jié)果，很多年之后，我們就成為了code monkey。對(duì)這個(gè)問題進(jìn)行再一次設(shè)計(jì)，所謂的設(shè)計(jì)有些時(shí)候會(huì)把簡(jiǎn)單的問題復(fù)雜化，有些時(shí)候會(huì)使以后的擴(kuò)展更加簡(jiǎn)單。這一天因?yàn)檫@家商店的糖價(jià)格太高了，于是店長將價(jià)格降為了4塊錢。

javascriptdocument.write(3*4);

于是我們又得到了我們的結(jié)果，但是下次我們看到這些代碼的時(shí)候沒有分清楚哪個(gè)是糖的數(shù)量，哪個(gè)是價(jià)格，于是我們重新設(shè)計(jì)了程序

javascripttang=4;
num=3;
document.write(tang*num);

這才能叫得上是程序設(shè)計(jì)，或許你注意到了";"這個(gè)符號(hào)的存在，我想說的是這是另外一個(gè)標(biāo)準(zhǔn)，我們不得不去遵守，也不得不去fuck。

函數(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è)簡(jiǎn)單的開始。

javascriptfunction 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。

javascriptfunction sin(degree){
    return document.write(Math.sin(degree));
}
sin(30);

在這里degree就稱之為變量。
于是輸出了-0.9880316240928602，而不是0.5，因?yàn)檫@里用的是弧度制，而不是角度制。

sin(30)

的輸出結(jié)果有點(diǎn)類似于sin 30。寫括號(hào)的目的在于，括號(hào)是為了方便解析，這個(gè)在不同的語言中可能是不一樣的，比如在ruby中我們可以直接用類似于數(shù)學(xué)中的表達(dá):

ruby2.0.0-p353 :004 > Math.sin 30
=> -0.9880316240928618
2.0.0-p353 :005 >

我們可以在函數(shù)中傳入多個(gè)變量，于是我們?cè)倩氐叫∶鞯膯栴}，就會(huì)這樣去編寫代碼。

javascriptfunction calc(tang,num){
    result=tang*num;
    document.write(result);
}
calc(3,4);

但是從某種程度上來說，我們的calc做了計(jì)算的事又做了輸出的事，總的來說設(shè)計(jì)上有些不好。

重新設(shè)計(jì)

我們將輸出的工作移到函數(shù)的外面，

javascriptfunction calc(tang,num){
    return tang*num;
}
document.write(calc(3,4));

接著我們用一種更有意思的方法來寫這個(gè)問題的解決方案

javascriptfunction 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的方法。

object和函數(shù)

我們還沒有說清楚之前我們遇到過的document.write以及Math.sin的語法為什么看上去很奇怪，所以讓我們看看他們到底是什么，修改app.js為以下內(nèi)容

javascriptdocument.write(typeof document);
document.write(typeof Math);

typeof document會(huì)返回document的數(shù)據(jù)類型，就會(huì)發(fā)現(xiàn)輸出的結(jié)果是

javascriptobject object

所以我們需要去弄清楚什么是object。對(duì)象的定義是

無序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或者函數(shù)。

創(chuàng)建一個(gè)object，然后觀察這便是我們接下來要做的

javascriptstore={};
store.tang=4;
store.num=3;
document.write(store.tang*store.num);

我們就有了和document.write一樣的用法，這也是對(duì)象的美妙之處，只是這里的對(duì)象只是包含著基本值，因?yàn)?/p> 

typeof story.tang="number"

一個(gè)包含對(duì)象的對(duì)象應(yīng)該是這樣子的。

javascriptstore={};
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ù)。

javascriptvar 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的對(duì)象，聲明對(duì)象可以用

var store={};

又或者是

var store=new Object{};

兩者是等價(jià)的，但是用后者的可讀性會(huì)更好一點(diǎn)，我們定義了一個(gè)叫print的函數(shù)，他的作用也就是document.write，IO中的print函數(shù)是等價(jià)于print()函數(shù)，這也就是對(duì)象和函數(shù)之間的一些區(qū)別，對(duì)象可以包含函數(shù)，對(duì)象是無序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或者函數(shù)。

復(fù)雜一點(diǎn)的對(duì)象應(yīng)該是下面這樣的一種情況。

javascriptvar Person={name:"phodal",weight:50,height:166};
function dream(){
    future;
};
Person.future=dream;
document.write(typeof Person);
document.write(Person.future);

而這些會(huì)在我們未來的實(shí)際編程過程中用得更多。

面向?qū)ο?/b>

開始之前先讓我們簡(jiǎn)化上面的代碼，

javascriptPerson.future=function dream(){
    future;
}

看上去比上面的簡(jiǎn)單多了，不過我們還可以簡(jiǎn)化為下面的代碼。。。

javascriptvar 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+"
");
document.write(typeof person+"
");
document.write(typeof person.future+"
");
document.write(person.future()+"
");

只是在這個(gè)時(shí)候Person是一個(gè)函數(shù)，但是我們聲明的person卻變成了一個(gè)對(duì)象一個(gè)Javascript函數(shù)也是一個(gè)對(duì)象，并且，所有的對(duì)象從技術(shù)上講也只不過是函數(shù)。這里的"
"是HTML中的元素，稱之為DOM，在這里起的是換行的作用，我們會(huì)在稍后介紹它，這里我們先關(guān)心下this。this關(guān)鍵字表示函數(shù)的所有者或作用域，也就是這里的Person。

上面的方法顯得有點(diǎn)不可取，換句話說和一開始的

document.write(3*4);

一樣，不具有靈活性，因此在我們完成功能之后，我們需要對(duì)其進(jìn)行優(yōu)化，這就是程序設(shè)計(jì)的真諦——解決完實(shí)際問題后，我們需要開始真正的設(shè)計(jì)，而不是解決問題時(shí)的編程。

javascriptvar 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+"
");
document.write(phodal.weight+"
");
document.write(phodal.height+"
");
document.write(phodal.future()+"
");

于是，產(chǎn)生了這樣一個(gè)可重用的Javascript對(duì)象,this關(guān)鍵字確立了屬性的所有者。

其他

Javascript還有一個(gè)很強(qiáng)大的特性，也就是原型繼承，不過這里我們先不考慮這些部分，用盡量少的代碼及關(guān)鍵字來實(shí)際我們所要表達(dá)的核心功能，這才是這里的核心，其他的東西我們可以從其他書本上學(xué)到。

所謂的繼承，

javascriptvar 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)——核心語言功能

文檔對(duì)象模型(DOM)——訪問和操作網(wǎng)頁內(nèi)容的方法和接口

瀏覽器對(duì)象模型(BOM)——與瀏覽器交互的方法和接口

我們?cè)谏厦嬷v的都是ECMAScript，也就是語法相關(guān)的，但是JS真正強(qiáng)大的，或者說我們最需要的可能就是對(duì)DOM的操作，這也就是為什么jQuery等庫可以流行的原因之一，而核心語言功能才是真正在哪里都適用的，至于BOM，真正用到的機(jī)會(huì)很少，因?yàn)闆]有完善的統(tǒng)一的標(biāo)準(zhǔn)。

一個(gè)簡(jiǎn)單的DOM示例,

html




    
    
Red

我們需要修改一下helloworld.html添加

HTML
Red

同時(shí)還需要將script標(biāo)簽移到body下面，如果沒有意外的話我們會(huì)看到頁面上用紅色的字體顯示Red，修改app.js。

javascriptvar para=document.getElementById("para");
para.style.color="blue";

接著，字體就變成了藍(lán)色，有了DOM我們就可以對(duì)頁面進(jìn)行操作，可以說我們看到的絕大部分的頁面效果都是通過DOM操作實(shí)現(xiàn)的。

美妙之處

這里說到的Javascript僅僅只是其中的一小小部分，忽略掉的東西很多，只關(guān)心的是如何去設(shè)計(jì)一個(gè)實(shí)用的app，作為一門編程語言，他還有其他強(qiáng)大的內(nèi)制函數(shù)，要學(xué)好需要一本有價(jià)值的參考書。這里提到的只是其中的不到20%的東西，其他的80%或者更多會(huì)在你解決問題的時(shí)候出現(xiàn)。

我們可以創(chuàng)建一個(gè)對(duì)象或者函數(shù)，它可以包含基本值、對(duì)象或者函數(shù)。

我們可以用Javascript修改頁面的屬性，雖然只是簡(jiǎn)單的示例。

我們還可以去解決實(shí)際的編程問題。

在線查看:一步步搭建物聯(lián)網(wǎng)系統(tǒng)

圖靈-電子書版一步步搭建物聯(lián)網(wǎng)系統(tǒng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91462.html

相關(guān)文章

  • 一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的HTML

    摘要：也可以補(bǔ)充好之前在這個(gè)最小物聯(lián)網(wǎng)系統(tǒng)缺失的那些東西，給那些正在開始試圖去解決編程問題的人。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 某一天，正走在回學(xué)校的路上的我突然想到：未來將會(huì)是一個(gè)科技的時(shí)代——雖然現(xiàn)在也是——只是在未來，科技將會(huì)無處不在。如果我們依舊對(duì)周圍這些無處不在的代碼一無所知的話，或許我們會(huì)成為黑客帝國之中被控制的普通人。于是開始想著，有一天人們會(huì)像學(xué)...

    高勝山 評(píng)論0 收藏0

  • 一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的HTML

    摘要：也可以補(bǔ)充好之前在這個(gè)最小物聯(lián)網(wǎng)系統(tǒng)缺失的那些東西，給那些正在開始試圖去解決編程問題的人。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 某一天，正走在回學(xué)校的路上的我突然想到：未來將會(huì)是一個(gè)科技的時(shí)代——雖然現(xiàn)在也是——只是在未來，科技將會(huì)無處不在。如果我們依舊對(duì)周圍這些無處不在的代碼一無所知的話，或許我們會(huì)成為黑客帝國之中被控制的普通人。于是開始想著，有一天人們會(huì)像學(xué)...

    iamyoung001 評(píng)論0 收藏0

  • 一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的HTML

    摘要：也可以補(bǔ)充好之前在這個(gè)最小物聯(lián)網(wǎng)系統(tǒng)缺失的那些東西，給那些正在開始試圖去解決編程問題的人。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 某一天，正走在回學(xué)校的路上的我突然想到：未來將會(huì)是一個(gè)科技的時(shí)代——雖然現(xiàn)在也是——只是在未來，科技將會(huì)無處不在。如果我們依舊對(duì)周圍這些無處不在的代碼一無所知的話，或許我們會(huì)成為黑客帝國之中被控制的普通人。于是開始想著，有一天人們會(huì)像學(xué)...

    JerryC 評(píng)論0 收藏0

  • 一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的CSS

    摘要：與類選擇器最常一起出現(xiàn)的是選擇器，不過這個(gè)適用于比較高級(jí)的場(chǎng)合，諸如用控制的時(shí)候就需要用到選擇器。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 無處不在的CSS 或許你覺得CSS一點(diǎn)兒也不重要，而事實(shí)上，如果說HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。 CSS 下面就是我們之前...

    andot 評(píng)論0 收藏0

  • 一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的CSS

    摘要：與類選擇器最常一起出現(xiàn)的是選擇器，不過這個(gè)適用于比較高級(jí)的場(chǎng)合，諸如用控制的時(shí)候就需要用到選擇器。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 無處不在的CSS 或許你覺得CSS一點(diǎn)兒也不重要，而事實(shí)上，如果說HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。 CSS 下面就是我們之前...

    dreambei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<