你好,游客 登錄 注冊 搜索
背景:
閱讀新聞

一步步搭建物聯網系統(教你設計物聯網系統)

[日期:2016-02-02] 來源:極客頭條  作者: [字體: ]

  1 前言

  1.1 目標讀者

  1.2 不適合人群

  1.3 介紹

  1.3.1 為什么沒有C ?

  1.3.2 為什么不是JAVA ?

  1.4 如何閱讀

  2 無處不在的HTML

  2.1 html的hello,world

  2.1.1 調試hello,world

  2.1.2 說說hello,world

  2.1.3 想用中文?

  2.2 其他html標記

  2.2.1 美妙之處

  2.2.2 更多

  3 無處不在的Javascript

  3.1 Javascript的Hello,world

  3.2 更js一點

  3.2.1 從數學出發

  3.3 設計和編程

  3.3.1 函數

  3.3.2 重新設計

  3.3.3 object和函數

  3.3.4 面向對象

  3.4 其他

  3.5 美妙之處

  4 無處不在的CSS

  4.1 CSS

  4.2 關于CSS

  4.3 代碼結構

  4.4 樣式與目標

  4.4.1 選擇器

  4.5 更有趣的CSS

  5 無處不在的三劍客

  5.1 Hello,Geek

  5.2 從源碼學習

  5.3 瀏覽器渲染過程

  5.3.1 HTML

  5.4 DOM樹形結構圖

  5.4.1 javascript

  5.4.2 CSS

  5.5 CSS盒模型圖

  5.6 筆記

  6 GNU/Linux 強大且Free

  6.1 什么是Linux

  6.2 操作系統

  6.2.1 Linux架構圖

  6.2.2 Shell

  6.2.3 GCC

  6.2.4 啟動引導程序

  6.3 從編譯開始

  6.3.1 開始之前

  6.3.2 編譯Nginx

  6.3.3 其他

  6.4 包管理

  6.5 Ubuntu LNMP

  6.5.1 Update軟件包列表

  6.5.2 安裝MySQL

  6.5.3 安裝Nginx

  6.5.4 安裝PHP

  7 Arduino 極客的玩具

  7.1 極客的玩具

  7.2 硬件熟悉

  7.3 開發環境

  7.4 點亮一個LED

  7.5 串口通信

  7.5.1 關于Arduino Setup()

  8 Python 代碼如散文

  8.1 代碼與散文

  8.1.1 開始之前

  8.1.2 Python的Hello,World

  8.1.3 我們想要的Hello,World

  8.2 算法

  8.3 實用主義哲學

  8.4 包管理

  8.4.1 python requests

  9 Raspberry Pi

  9.1 Geek的盛宴

  9.2 Raspberry Pi 初始化

  9.3 Raspberry Pi GPIO

  10 Server 一切皆為服務

  10.1 服務器

  10.2 Web服務器

  10.3 LNMP

  11 Web服務

  11.1 SOAP VS RESTful

  12 HTTP 熟悉&陌生

  12.1 你所沒有深入的HTTP

  12.1.1 打開網頁時發生了什么

  12.1.2 URL組成

  12.2 一次HTTP GET請求

  12.2.1 HTTP響應

  13 設計RESTful API

  13.0.1 資源

  13.1 設計RESTful API

  13.2 REST關鍵目標

  13.3 判斷是否是 RESTful的約束條件

  13.4 JSON

  14 環境準備

  14.1 Laravel

  14.1.1 為什么是 Laravel

  14.2 安裝 Laravel

  14.2.1 GNU/Linux安裝Composer

  14.3 MySQL

  14.3.1 安裝MySQL

  14.3.2 配置MySQL

  15 創建REST服務

  15.1 數據庫遷移

  15.1.1 創建表

  15.1.2 數據庫遷移

  15.2 創建RESTful

  15.3 Laravel Resources

  15.3.1 修改Create()

  15.3.2 創建表單

  15.3.3 編輯模板

  16 前端顯示

  16.1 庫與車輪子

  16.2 庫

  16.2.1 jQuery

  16.2.2 jQuery Mobile

  16.3 網站前臺顯示

  16.3.1 Highcharts

  16.3.2 實時數據

  17 RESTful的CoAP協議

  17.1 CoAP: 嵌入式系統的REST

  17.2 CoAP 命令行工具

  17.2.1 Node CoAP CLI

  17.2.2 libcoap

  17.2.3 Firefox Copper

  17.3 CoAP Hello,World

  17.4 CoAP 數據庫查詢

  17.4.1 Node Module

  17.4.2 Node-Sqlite3

  17.4.3 查詢數據

  17.5 CoAP Block

  17.5.1 CoAP POST

  17.5.2 CoAP Content Types

  17.6 CoAP JSON

  17.7 使用IoT-CoAP構建物聯網

  18 簡單物聯網

  18.1 硬件通信

  18.1.1 串口通信

  18.2 硬件

  18.2.1 Arduino

  18.2.2 繼電器

  19 Android簡單示例

  19.1 調用Web Services GET

  19.1.1 創建RESTClient

  19.2 使用REST Client獲取結果

  20 尾聲

  20.1 路

  20.2 其他

  本作品采用知識共享署名-非商業性使用 4.0 國際許可協議進行許可。

cc

 

  © 2014 Phodal Huang.

  1 前言

  設計物聯網系統是件有意思的事情,它需要考慮到軟件、硬件、通訊等多個不同方面。通過探索不同的語言,不同的框架,從而形成不同的解決方案。

  在這里,我們將對設計物聯網系統有一個簡單的介紹,并探討如何設計一個最小的物聯網系統。

  1.1 目標讀者

  目標讀者: 初入物聯網領域,希望對物聯網系統有一個大概的認識和把握,并學會掌握一個基礎的物聯網系統的設計。

  硬件開發人員,對物聯網有興趣。

  沒有web開發經驗

  幾乎為0的linux使用經驗

  想快速用于生產環境

  對硬件了解有限的開發人員。

  沒接觸過51、ARM、Arduino

  想了解以下內容:

  RESTful與IOT

  CoAP協議

  MQTT

  本文檔對一些概念(如)只做了一些基本介紹,以方便讀者理解。如果您想進一步了解這些知識,會列出一些推薦書目,以供參考。

  1.2 不適合人群

  如果你是在這方面已經有了豐富經驗的開發者。

  不是為了學習而學習這方面的知識。

  1.3 介紹

  關于內容的選擇,這是一個有意思的話題,因為我們很難判斷不同的開發者用的是怎樣的語言,用的是怎樣的框架。

  于是我們便自作主張地選擇了那些適合于理論學習的語言、框架、硬件,去除掉其他一些我們不需要考慮的因素,如語法,復雜度等等。當然,這些語言、框架、硬件也是最流行的。

  Arduino: 如果你從頭開始學過硬件的話,那么你會愛上它的。

  Raspberry PI: 如果你從頭編譯過GNU/Linux的話,我想你會愛上她的。

  Python: 簡單地來說,你可以方便地使用一些擴展,同時代碼就表達了你的想法。

  PHP : 這是一門容易部署的語言,我想你只需要在你的Ubuntu機器上,執行一下腳本就能完成安裝了。而且,如果你是一個硬件開發者的話,你會更容易地找到其他開發者。

  Javascript : 考慮到javascript這門語言已經無處不在了,而且會更加流行。所以,在這里CoAP、MQTT等版本是基于Nodejs的。

  HTML、CSS : 這是必須的,同樣,他們仍然無處不在。

  GNU/Linux: 作為部署到服務器的一部分——你需要掌握他。當然如果你要用WAMP也是可以的。

  CoAP: 用NodeJS構建IOT CoAP物聯網

  1.3.1 為什么沒有C ?

  C都不懂還跑過來干嘛。

  1.3.2 為什么不是JAVA ?

  大有以下兩個原因

  學習JAVA的人很多,但是它不適合我們集中精力構建與學習,因為無關的代碼太多了。

  之前以及現在,我還是不喜歡JAVA (我更喜歡腳本語言,可以提高工作效率)。

  1.4 如何閱讀

  這只是一個小小的建議,僅針對于在選擇閱讀上沒有經驗的讀者。

  當前狀態建議

  軟件初學者從頭閱讀

  硬件開發者從頭閱讀

  沒有web經驗的開發者從第二部分開始

  我們會在前面十章里簡單介紹一些必要的基礎知識,這些知識將會在后面我們構建物聯網系統時用到。

  某一天,正走在回學校的路上的我突然想到:“未來將會是一個科技的時代——雖然現在也是——只是在未來,科技將會無處不在。如果我們依舊對周圍這些無處不在的代碼一無所知的話,或許我們會成為黑客帝國之中被控制的普通人。”于是開始想著,有一天人們會像學習一門語言一樣開始學習編程,直到又有一天我看到了學習編程如同學習一門語言的說法。這又恰好在我做完最小物聯網系統之后,算是一個有趣的時間點,我開始想著像之前做最小物聯網系統的那些步驟一樣,寫一個簡單的入門。也可以補充好之前在這個最小物聯網系統缺失的那些東西,給那些正在開始試圖去解決編程問題的人。

  讓我們先從身邊的語言下手,也就是現在無處不在的html+javascript+css。

  2 無處不在的HTML

  之所以從html開始,是因為我們不需要配置一個復雜的開發環境,也許你還不知道開發環境是什么東西,不過這也沒關系,畢竟這些知識需要慢慢的接觸才能有所了解,尤其是對于普通的業余愛好者來說,當然,對于專業選手言自然不是問題。HTML是Web的核心語言,也算是比較基礎的語言。

  2.1 html的hello,world

  Hello,world是一個傳統,所以在這里也遵循這個有趣的傳統,我們所要做的事情其實很簡單,雖然也有一點點hack的感覺。——讓我們先來新建一個文并命名為“helloworld.html”。

  (PS:大部分人應該都是在windows環境下工作的,所以你需要新建一個文本,然后重命名,或者你需要一個編輯器,在這里我們推薦用sublime text。破解不破解,注冊不注冊都不會對你的使用有太多的影響。)

  新建文件

  輸入

  hello,world

  保存為->“helloworld.html”,

  雙擊打開這個文件。 正常情況下都應該是用你的默認瀏覽器打開。只要是一個正常工作的現代瀏覽器,都應該可以看到上面顯示的是“Hello,world”。

  這才是最短的hello,world程序,但是呢?在ruby中會是這樣子的

  2.0.0-p353 :001 > p "hello,world"

  "hello,world"

  => "hello,world"

  2.0.0-p353 :002 >

  等等,如果你了解過html的話,會覺得這一點都不符合語法規則,但是他工作了,沒有什么比安裝完Nginx后看到It works!更讓人激動了。

  遺憾的是,它可能無法在所有的瀏覽器上工作,所以我們需要去調試其中的bug。

  2.1.1 調試hello,world

  我們會發現我們的代碼在瀏覽器中變成了下面的代碼,如果你和我一樣用的是chrome,那么你可以右鍵瀏覽器中的空白區域,點擊審查元素,就會看到下面的代碼。

  

  

  hello,world

  

  這個才是真正能在大部分瀏覽器上工作的代碼,所以復制它到編輯器里吧。

  2.1.2 說說hello,world

  我很不喜歡其中的<*>,但是我也沒有找到別的方法來代替它們,所以這是一個設計得當的語言。甚至大部分人都說這算不上是一門真正的語言,不過html的原義是

  超文本標記語言

  所以我們可以發現其中的關鍵詞是標記——markup,也就是說html是一個markup,head是一個markup,body也是一個markup。

  然而,我們真正工作的代碼是在body里面,至于為什么是在這里面,這個問題就太復雜了。打個比方來說:

  我們所使用的漢語是人類用智慧創造的,我們所正在學的這門語言同樣也是人類創造的。

  我們在自己的語言里遵循著桌子是桌子,凳子是凳子的原則,很少有人會問為什么。

  2.1.3 想用中文?

  所以我們也可以把計算機語言與現實世界里用于交流溝通的語言劃上一個等號。而我們所要學習的語言,并不是我們最熟悉的漢語語言,所以我們便覺得這些很復雜,但是如果我們試著用漢語替換掉上面的代碼的話

  <語言>

  <頭><結束頭>

  <身體>你好,世界<結束身體>

  <結束語言>

  這看上去很奇怪,只是因為是直譯過去的原因,也許你會覺得這樣會好理解一點,但是輸入上可就一點兒也不方便,因為這鍵盤本身就不適合我們去輸入漢字,同時也意味著可能你輸入的會有問題。

  讓我們把上面的代碼代替掉原來的代碼然后保存,打開瀏覽器會看到下面的結果

  <語言> <頭><結束頭> <身體>你好,世界<結束身體> <結束語言>

  更不幸的結果可能是

  <璇█> <澶?><緇撴潫澶?> <韜綋>浣犲ソ錛屼笘鐣?<緇撴潫韜綋> <緇撴潫璇█>

  這是一個編碼問題,對中文支持不友好。

  我們把上面的代碼改為和標記語言一樣的結構

  <語言>

  <頭>

  <身體>你好,世界

  <結束語言>

  于是我們看到的結果便是

  <語言> <頭> <身體>你好,世界

  被chrome瀏覽器解析成什么樣了?

  <語言>

  <頭>

  <身體>你好,世界

  

  

  以

  結尾的是注釋,寫給人看的代碼,不是給機器看的,所以機器不會去理解這些代碼。

  但是當我們把代碼改成

  你好世界

  瀏覽器上面顯示的內容就變成了

  你好世界

  或許你會覺得很神奇,但是這一點兒也不神奇,雖然我們的中文語法也遵循著標記語言的標準,但是我們的瀏覽器不支持中文標記。

  結論:

  瀏覽器對中文支持不友好。

  瀏覽器對英文支持友好。

  剛開始的時候不要對中文編程有太多的想法,這是很不現實的:

  現有的系統都是基于英語語言環境構建的,對中文支持不是很友好。

  中文輸入的速度在某種程度上來說沒有英語快。

  我們離開話題已經很遠了,但是這里說的都是針對于那些不滿于英語的人來說的,只有當我們可以從頭構建一個中文系統的時候才是可行的,而這些就要將cpu、軟件、硬件都包含在內,甚至我們還需要考慮重新設計cpu的結構,在某種程度上來說會有些不現實。或許,需要一代又一代人的努力。忘記那些吧,師夷長之技以治夷。

  2.2 其他html標記

  添加一個標題,

  

  

  

  

  hello,world

  

  我們便可以在瀏覽器的最上方看到“標題”二字,就像我們常用的淘寶網,也包含了上面的東西,只是還包括了更多的東西,所以你也可以看懂那些我們可以看到的淘寶的標題。

  

  

  

  

  

  hello,world

  

大標題

 

  

次標題

 

  

...

 

  

 

  

    • 列表1

 

  

    • 列表2

 

  

 

  

  

  更多的東西可以在一些書籍上看到,這邊所要說的只是一次簡單的語言入門,其他的東西都和這些類似。

  2.2.1 美妙之處

  我們簡單地上手了一門不算是語言的語言,瀏覽器簡化了這其中的大部分過程,雖然沒有C和其他語言來得有專業感,但是我們試著去開始寫代碼了。我們可能在未來的某一篇中可能會看到類似的語言,諸如python,我們所要做的就是

  $ python file.py

  =>hello,world

  然后在終端上返回結果。只是因為在我看來學會html是有意義的,簡單的上手,然后再慢慢地深入,如果一開始我們就去理解指針,開始去理解類。我們甚至還知道程序是怎么編譯運行的時候,在這個過程中又發生了什么。雖然現在我們也沒能理解這其中發生了什么,但是至少展示了

  中文編程語言在當前意義不大,不現實,效率不高兼容性差

  語言的語法是固定的。(ps:雖然我們也可以進行擴充,我們將會在后來支持上述的中文標記。)

  已經開始寫代碼,而不是還在配置開發環境。

  隨身的工具才是最好的,最常用的code也才是實在的。

  2.2.2 更多

  我們還沒有試著去解決“某商店里的糖一顆5塊錢,小明買了3顆糖,小明一共花了多少錢”的問題。也就是說我們學會的是一個還不能解決實際問題的語言,于是我們還需要學點東西,比如javascript,css。我們可以將Javascript理解為解決問題的語言,html則是前端顯示,css是配置文件,這樣的話,我們會在那之后學會成為一個近乎專業的程序員。我們剛剛學習了一下怎么在前端顯示那些代碼的行為,于是我們還需要Javascript。

  3 無處不在的Javascript

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

  3.1 Javascript的Hello,world

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

  

  

  

  

  

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

  

  

  

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

  

  

  

  

  

  

  

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

  

  

  

  

  

  

  

  

  

  3.2 更js一點

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

  document.write('hello,world');

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

  

  

  

  

  

  

  

  

  

  3.2.1 從數學出發

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

  document.write(3*5);

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

  3.3 設計和編程

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

  document.write(3*4);

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

  tang=4;

  num=3;

  document.write(tang*num);

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

  3.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做了計算的事又做了輸出的事,總的來說設計上有些不好。

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

  3.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);

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

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

  document.write(typeof person+"
");

  document.write(typeof person.future+"
");

  document.write(person.future()+"
");

  只是在這個時候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+"
");

  document.write(phodal.weight+"
");

  document.write(phodal.height+"
");

  document.write(phodal.future()+"
");

  于是,產生了這樣一個可重用的Javascript對象,this關鍵字確立了屬性的所有者。

  3.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示例,

  

  

  

  

  

  

  

Red

 

  

  

  

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

  

Red

 

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

  var para=document.getElementById("para");

  para.style.color="blue";

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

  3.5 美妙之處

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

  我們可以創建一個對象或者函數,它可以包含基本值、對象或者函數。

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

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

  4 無處不在的CSS

  或許你覺得CSS一點兒也不重要,而事實上,如果說HTML是建筑的框架,CSS就是房子的裝修。那么Javascript呢,我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。

  4.1 CSS

  下面就是我們之前說到的代碼,css將Red三個字母變成了紅色。

  

  

  

  

  

  

Red

 

  

  

  

  只是,

  var para=document.getElementById("para");

  para.style.color="blue";

  將字體變成了藍色,CSS+HTML讓頁面有序的工作著,但是Javascript卻打亂了這些秩序,有著唯恐世界不亂的精彩,也難怪被冠以小三之名了——或許終于可以理解,為什么以前人們對于Javascript沒有好感了——不過這里要講的是正室,也就是CSS,這時還沒有Javascript。

  

Red Fonts

 

  Red Fonts

  4.2 關于CSS

  這不是一篇專業講述CSS的書籍,所以我不會去說CSS是怎么來的,有些東西我們既然可以很容易從其他地方知道,也就不需要花太多時間去重復。諸如重構等這些的目的之一也在于去除重復的代碼,不過有些重復是不可少的,也是有必要的,而通常這些東西可能是由其他地方復制過來的。

  到目前為止我們沒有依賴于任何特殊的硬件或者是軟件,對于我們來說我們最基本的需求就是一臺電腦,或者可以是你的平板電腦,當然也可以是你的智能手機,因為他們都有個瀏覽器,而這些都是能用的,對于我們的CSS來說也不會有例外的。

  CSS(Cascading Style Sheets),到今天我也沒有記得他的全稱,CSS還有一個中文名字是層疊式樣式表,事實上翻譯成什么可能并不是我們關心的內容,我們需要關心的是他能做些什么。作為三劍客之一,它的主要目的在于可以讓我們方便靈活地去控制Web頁面的外觀表現。我們可以用它做出像淘寶一樣復雜的界面,也可以像我們的書本一樣簡單,不過如果要和我們書本一樣簡單的話,可能不需要用到CSS。HTML一開始就是依照報紙的格式而設計的,我們還可以繼續用上面說到的編輯器,又或者是其他的。如果你喜歡DreamWeaver那也不錯,不過一開始使用IDE可無助于我們寫出良好的代碼。

  忘說了,CSS也是有版本的,和windows,Linux內核等等一樣,但是更新可能沒有那么頻繁,HTML也是有版本的,JS也是有版本的,復雜的東西不是當前考慮的內容。

  4.3 代碼結構

  對于我們的上面的Red示例來說,如果沒有一個好的結構,那么以后可能就是這樣子。

  

  

  

  

  

  

如果沒有一個好的結構

 

  

那么以后可能就是這樣子。。。。

 

  

  

  雖然我們看到的還是一樣的:

  

No Style

 

  No Style

  于是我們就按各種書上的建議重新寫了上面的代碼

  

  

  

  

  

  

  

  

如果沒有一個好的結構

 

  

那么以后可能就是這樣子。。。。

 

  

  

  總算比上面好看也好理解多了,這只是臨時的用法,當文件太大的時候,正式一點的寫法應該如下所示:

  

  

  

  

  

  

  

  

如果沒有一個好的結構

 

  

那么以后可能就是這樣子。。。。

 

  

  

  我們需要

  

  

  

  

  

  

  

  

如果沒有一個好的結構

 

  

那么以后可能就是這樣子。。。。

 

  

  

  然后我們有一個像app.js一樣的style.css放在同目錄下,而他的內容便是

  .para{

  font-size: 22px;

  color:#f00;

  text-align: center;

  padding-left: 20px;

  }

  .para2{

  font-size:44px;

  color:#3ed;

  text-indent: 2em;

  padding-left: 2em;

  }

  這代碼和JS的代碼有如此多的相似

  var para={

  font_size:'22px',

  color:'#f00',

  text_align:'center',

  padding_left:'20px',

  }

  而22px、20px以及#f00都是數值,因此:

  var para={

  font_size:22px,

  color:#f00,

  text_align:center,

  padding_left:20px,

  }

  目測差距已經盡可能的小了,至于這些話題會在以后討論到,如果要讓我們的編譯器更正確的工作,那么我們就需要非常多這樣的符號,除非你樂意去理解:

  (dotimes (i 4) (print i))

  總的來說我們減少了符號的使用,但是用lisp便帶入了更多的括號,不過這是一種簡潔的表達方式,也許我們可以在其他語言中看到。

  \d{2}/[A-Z][a-z][a-z]/\d{4}

  上面的代碼,是為了從一堆數據中找出“某日/某月/某年”。如果一開始不理解那是正則表達式,就會覺得那個很復雜。

  這門語言可能是為設計師而設計的,但是設計師大部分還是不懂編程的,不過相對來說這門語言還是比其他語言簡單易懂一些。

  4.4 樣式與目標

  如下所示,就是我們的樣式

  .para{

  font-size: 22px;

  color:#f00;

  text-align: center;

  padding-left: 20px;

  }

  我們的目標就是

  如果沒有一個好的結構

  所以樣式和目標在這里牽手了,問題是他們是如何在一起的呢?下面就是CSS與HTML溝通的重點所在了:

  4.4.1 選擇器

  我們用到的選擇器叫做類選擇器,也就是class,或者說應該稱之為class選擇器更合適。與類選擇器最常一起出現的是ID選擇器,不過這個適用于比較高級的場合,諸如用JS控制DOM的時候就需要用到ID選擇器。而基本的選擇器就是如下面的例子:

  p.para{

  color:#f0f;

  }

  將代碼添加到style.css的最下面會發現“如果沒有一個好的結構”變成了粉紅色,當然我們還會有這樣的寫法

  p>.para{

  color:#f0f;

  }

  為了產生上面的特殊的樣式,雖然不好看,但是我們終于理解什么叫層疊樣式了,下面的代碼的重要度比上面高,也因此有更高的優先規則。

  而通常我們可以通過一個

  p{

  text-align:left;

  }

  這樣的元素選擇器來給予所有的p元素一個左對齊。

  還有復雜一點的復合型選擇器,下面的是HTML文件

  

  

  

  

  

  

  

  

如果沒有一個好的結構

 

  

 

  

那么以后可能就是這樣子。。。。

 

  

 

  

  

  還有CSS文件

  .para{

  font-size: 22px;

  color:#f00;

  text-align: center;

  padding-left: 20px;

  }

  .para2{

  font-size:44px;

  color:#3ed;

  text-indent: 2em;

  padding-left: 2em;

  }

  p.para{

  color:#f0f;

  }

  div#content p {

  font-size:22px;

  }

  4.5 更有趣的CSS

  一個包含了para2以及para_bg的例子

  

 

  

那么以后可能就是這樣子。。。。

 

  

 

  我們只是添加了一個黑色的背景

  .para_bg{

  background-color:#000;

  }

  重新改變后的網頁變得比原來有趣了很多,所謂的繼承與合并就是上面的例子。

  我們還可以用CSS3做出更多有趣的效果,而這些并不在我們的討論范圍里面,因為我們討論的是be a geek。

  或許我們寫的代碼都是那么的簡單,從HTML到Javascript,還有現在的CSS,只是總有一些核心的東西,而不是去考慮那些基礎語法,基礎的東西我們可以在實踐的過程中一一發現。但是我們可能發現不了,或者在平時的使用中考慮不到一些有趣的用法或者說特殊的用法,這時候可以通過觀察一些精致設計的代碼中學習到。復雜的東西可以變得很簡單,簡單的東西也可以變得很復雜。

 

  源自畢業論文:基于REST服務的最小物聯網系統設計

收藏 推薦 打印 | 錄入:Cstor | 閱讀:
棋牌app搭建教程视频 老k棋牌app价格 复式注数计算器 500彩票极速快3 金牛棋牌游戏中心下载 北京十一选五开奖快三 山东11选5走势图基本走势走势图 山西11选5走势图遗漏top10 多乐彩几分钟开奖 北京快三开奖结果 湖北十一选五开奖走势图最大遗漏