成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

tylin / 825人閱讀

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

無處不在的Javascript

Javascript現(xiàn)在已經(jīng)無處不在了，也許你正打開的某個網(wǎng)站，他便可能是node.js+json+javascript+mustache.js完成的，雖然你還沒理解上面那些是什么，也正是因為你不理解才需要去學習更多的東西。但是你只要知道Javascript已經(jīng)無處不在了，它可能就在你手機上的某個app里，就在你瀏覽的網(wǎng)頁里，就運行在你IDE中的某個進程里。

Javascript的Hello,world

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

html

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

按照標準的寫法，我們還需要聲明這個腳本的類型

html

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

html
更js一點

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

javascriptdocument.write("hello,world");

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

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

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

javascriptdocument.write(3*5);

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

設計和編程

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

javascriptdocument.write(3*4);

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

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

這才能叫得上是程序設計，或許你注意到了";"這個符號的存在，我想說的是這是另外一個標準，我們不得不去遵守，也不得不去fuck。

函數(shù)

記得剛開始學三角函數(shù)的時候，我們會寫

sin 30=0.5

而我們的函數(shù)也是類似于此，換句話說，因為很多搞計算機的先驅(qū)都學好了數(shù)學，都把數(shù)學世界的規(guī)律帶到了計算機世界，所以我們的函數(shù)也是類似于此，讓我們做一個簡單的開始。

javascriptfunction hello(){
    return document.write("hello,world");
}
hello();

當我第一次看到函數(shù)的時候，有些小激動終于出現(xiàn)了。我們寫了一個叫hello的函數(shù)，它返回了往頁面中寫入hello,world的方法，然后我們調(diào)用了hello這個函數(shù)，于是頁面上有了hello,world。

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

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

sin(30)

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

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

我們可以在函數(shù)中傳入多個變量，于是我們再回到小明的問題，就會這樣去編寫代碼。

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

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

重新設計

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

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

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

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

object和函數(shù)

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

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

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

javascriptobject object

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

無序?qū)傩缘募希鋵傩钥梢园局?、對象或者函?shù)。

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

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

我們就有了和document.write一樣的用法，這也是對象的美妙之處，只是這里的對象只是包含著基本值，因為

typeof story.tang="number"

一個包含對象的對象應該是這樣子的。

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都是屬于這個無序?qū)傩约现械暮瘮?shù)。

下面代碼說的就是這個無序?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);

我們定義了一個叫IO的對象，聲明對象可以用

var store={};

又或者是

var store=new Object{};

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

復雜一點的對象應該是下面這樣的一種情況。

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

而這些會在我們未來的實際編程過程中用得更多。

面向?qū)ο?/b>

開始之前先讓我們簡化上面的代碼，

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

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

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()+"
");

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

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

document.write(3*4);

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

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)生了這樣一個可重用的Javascript對象,this關(guān)鍵字確立了屬性的所有者。

其他

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

所謂的繼承，

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應該由下列三個部分組成:

核心(ECMAScript)——核心語言功能

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

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

我們在上面講的都是ECMAScript，也就是語法相關(guān)的，但是JS真正強大的，或者說我們最需要的可能就是對DOM的操作，這也就是為什么jQuery等庫可以流行的原因之一，而核心語言功能才是真正在哪里都適用的，至于BOM，真正用到的機會很少，因為沒有完善的統(tǒng)一的標準。

一個簡單的DOM示例,

html




    
    
Red

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

HTML
Red

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

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

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

美妙之處

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91462.html

相關(guān)文章

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

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

    高勝山 評論0 收藏0

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

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

    iamyoung001 評論0 收藏0

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

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

    JerryC 評論0 收藏0

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

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

    andot 評論0 收藏0

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

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

    dreambei 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<