github
/
designiot
mirror of https://github.com/phodal/designiot.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="generator" content="pandoc" />
  <title></title>
  <style type="text/css">code{white-space: pre;}</style>
  <style type="text/css">
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; }
code > span.dt { color: #902000; }
code > span.dv { color: #40a070; }
code > span.bn { color: #40a070; }
code > span.fl { color: #40a070; }
code > span.ch { color: #4070a0; }
code > span.st { color: #4070a0; }
code > span.co { color: #60a0b0; font-style: italic; }
code > span.ot { color: #007020; }
code > span.al { color: #ff0000; font-weight: bold; }
code > span.fu { color: #06287e; }
code > span.er { color: #ff0000; font-weight: bold; }
  </style>
  <link rel="stylesheet" href="css/vendor.css" type="text/css" />
</head>
<body>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>一步步搭建物联网系统</title>
		<meta name="keywords" content="设计物联网系统,物联网系统设计">
		<meta name="description" content="一份关于如何设计物联网系统的文档">
		<link rel="stylesheet" href="css/vendor.css" />
	</head>
	<body class="container inner wrap">
		其他:<a href="http://ebook.designiot.cn/iot.html" title="基于REST服务的最小物联网系统设计">基于REST服务的最小物联网系统设计</a>
		<h2>一步步搭建物联网系统</h2>
		</body>
	</html>
<div id="TOC">
<ul>
<li><a href="#前言"><span class="toc-section-number">0.1</span> 前言</a></li>
<li><a href="#目标读者"><span class="toc-section-number">0.2</span> 目标读者</a></li>
<li><a href="#不适合人群"><span class="toc-section-number">0.3</span> 不适合人群</a></li>
<li><a href="#介绍"><span class="toc-section-number">0.4</span> 介绍</a><ul>
<li><a href="#为什么没有c"><span class="toc-section-number">0.4.1</span> 为什么没有C ?</a></li>
<li><a href="#为什么不是java"><span class="toc-section-number">0.4.2</span> 为什么不是JAVA ?</a></li>
<li><a href="#为什么没有android"><span class="toc-section-number">0.4.3</span> 为什么没有Android ？</a></li>
</ul></li>
<li><a href="#如何阅读"><span class="toc-section-number">0.5</span> 如何阅读</a></li>
<li><a href="#无处不在的html"><span class="toc-section-number">1</span> 无处不在的HTML</a><ul>
<li><a href="#html的helloworld"><span class="toc-section-number">1.1</span> html的hello,world</a><ul>
<li><a href="#调试helloworld"><span class="toc-section-number">1.1.1</span> 调试hello,world</a></li>
<li><a href="#说说helloworld"><span class="toc-section-number">1.1.2</span> 说说hello,world</a></li>
<li><a href="#想用中文"><span class="toc-section-number">1.1.3</span> 想用中文？</a></li>
</ul></li>
<li><a href="#其他html标记"><span class="toc-section-number">1.2</span> 其他html标记</a><ul>
<li><a href="#美妙之处"><span class="toc-section-number">1.2.1</span> 美妙之处</a></li>
<li><a href="#更多"><span class="toc-section-number">1.2.2</span> 更多</a></li>
</ul></li>
</ul></li>
<li><a href="#无处不在的javascript"><span class="toc-section-number">2</span> 无处不在的Javascript</a><ul>
<li><a href="#javascript的helloworld"><span class="toc-section-number">2.1</span> Javascript的Hello,world</a></li>
<li><a href="#更js一点"><span class="toc-section-number">2.2</span> 更js一点</a><ul>
<li><a href="#从数学出发"><span class="toc-section-number">2.2.1</span> 从数学出发</a></li>
</ul></li>
<li><a href="#设计和编程"><span class="toc-section-number">2.3</span> 设计和编程</a><ul>
<li><a href="#函数"><span class="toc-section-number">2.3.1</span> 函数</a></li>
<li><a href="#重新设计"><span class="toc-section-number">2.3.2</span> 重新设计</a></li>
<li><a href="#object和函数"><span class="toc-section-number">2.3.3</span> object和函数</a></li>
<li><a href="#面向对象"><span class="toc-section-number">2.3.4</span> 面向对象</a></li>
</ul></li>
<li><a href="#其他"><span class="toc-section-number">2.4</span> 其他</a></li>
<li><a href="#美妙之处-1"><span class="toc-section-number">2.5</span> 美妙之处</a></li>
</ul></li>
<li><a href="#无处不在的css"><span class="toc-section-number">3</span> 无处不在的CSS</a><ul>
<li><a href="#css"><span class="toc-section-number">3.1</span> CSS</a></li>
<li><a href="#关于css"><span class="toc-section-number">3.2</span> 关于CSS</a></li>
<li><a href="#代码结构"><span class="toc-section-number">3.3</span> 代码结构</a></li>
<li><a href="#样式与目标"><span class="toc-section-number">3.4</span> 样式与目标</a><ul>
<li><a href="#选择器"><span class="toc-section-number">3.4.1</span> 选择器</a></li>
</ul></li>
<li><a href="#更有趣的css"><span class="toc-section-number">3.5</span> 更有趣的CSS</a></li>
</ul></li>
<li><a href="#无处不在的三剑客"><span class="toc-section-number">4</span> 无处不在的三剑客</a><ul>
<li><a href="#hellogeek"><span class="toc-section-number">4.1</span> Hello,Geek</a></li>
<li><a href="#从源码学习"><span class="toc-section-number">4.2</span> 从源码学习</a><ul>
<li><a href="#html"><span class="toc-section-number">4.2.1</span> HTML</a></li>
</ul></li>
<li><a href="#dom树形结构图"><span class="toc-section-number">4.3</span> DOM树形结构图</a><ul>
<li><a href="#javascript"><span class="toc-section-number">4.3.1</span> javascript</a></li>
<li><a href="#css-1"><span class="toc-section-number">4.3.2</span> CSS</a></li>
</ul></li>
<li><a href="#css盒模型图"><span class="toc-section-number">4.4</span> CSS盒模型图</a></li>
<li><a href="#笔记"><span class="toc-section-number">4.5</span> 笔记</a></li>
</ul></li>
<li><a href="#gnulinux"><span class="toc-section-number">5</span> GNU/Linux</a><ul>
<li><a href="#什么是linux"><span class="toc-section-number">5.1</span> 什么是Linux</a></li>
<li><a href="#操作系统"><span class="toc-section-number">5.2</span> 操作系统</a><ul>
<li><a href="#linux架构图"><span class="toc-section-number">5.2.1</span> Linux架构图</a></li>
<li><a href="#shell"><span class="toc-section-number">5.2.2</span> Shell</a></li>
<li><a href="#gcc"><span class="toc-section-number">5.2.3</span> GCC</a></li>
<li><a href="#启动引导程序"><span class="toc-section-number">5.2.4</span> 启动引导程序</a></li>
</ul></li>
<li><a href="#从编译开始"><span class="toc-section-number">5.3</span> 从编译开始</a><ul>
<li><a href="#开始之前"><span class="toc-section-number">5.3.1</span> 开始之前</a></li>
<li><a href="#编译nginx"><span class="toc-section-number">5.3.2</span> 编译Nginx</a></li>
<li><a href="#其他-1"><span class="toc-section-number">5.3.3</span> 其他</a></li>
</ul></li>
</ul></li>
<li><a href="#arduino"><span class="toc-section-number">6</span> Arduino</a><ul>
<li><a href="#极客的玩具"><span class="toc-section-number">6.1</span> 极客的玩具</a></li>
</ul></li>
<li><a href="#python"><span class="toc-section-number">7</span> Python</a><ul>
<li><a href="#代码与散文"><span class="toc-section-number">7.1</span> 代码与散文</a></li>
<li><a href="#开始之前-1"><span class="toc-section-number">7.2</span> 开始之前</a></li>
<li><a href="#python的helloworld"><span class="toc-section-number">7.3</span> Python的Hello,World</a></li>
<li><a href="#我们想要的helloworld"><span class="toc-section-number">7.4</span> 我们想要的Hello,World</a></li>
<li><a href="#算法"><span class="toc-section-number">7.5</span> 算法</a></li>
<li><a href="#实用主义哲学"><span class="toc-section-number">7.6</span> 实用主义哲学</a></li>
</ul></li>
<li><a href="#raspberry-pi"><span class="toc-section-number">8</span> Raspberry Pi</a><ul>
<li><a href="#geek的盛宴"><span class="toc-section-number">8.1</span> Geek的盛宴</a></li>
</ul></li>
<li><a href="#http与restful"><span class="toc-section-number">9</span> HTTP与RESTful</a><ul>
<li><a href="#你所没有深入的http"><span class="toc-section-number">9.1</span> 你所没有深入的HTTP</a></li>
<li><a href="#rest"><span class="toc-section-number">9.2</span> REST</a></li>
</ul></li>
<li><a href="#构建基于coap协议的物联网系统"><span class="toc-section-number">10</span> 构建基于CoAP协议的物联网系统</a><ul>
<li><a href="#coap简介"><span class="toc-section-number">10.1</span> CoAP简介</a></li>
<li><a href="#coap-命令行工具"><span class="toc-section-number">10.2</span> CoAP 命令行工具</a><ul>
<li><a href="#node-coap-cli"><span class="toc-section-number">10.2.1</span> Node CoAP CLI</a></li>
<li><a href="#coap命令行"><span class="toc-section-number">10.2.2</span> CoAP命令行</a></li>
<li><a href="#libcoap"><span class="toc-section-number">10.2.3</span> libcoap</a></li>
</ul></li>
<li><a href="#helloworld"><span class="toc-section-number">10.3</span> Hello,World</a><ul>
<li><a href="#node-coap"><span class="toc-section-number">10.3.1</span> Node-CoAP</a></li>
<li><a href="#node-coap示例"><span class="toc-section-number">10.3.2</span> Node CoAP示例</a></li>
</ul></li>
<li><a href="#数据库查询"><span class="toc-section-number">10.4</span> 数据库查询</a><ul>
<li><a href="#node-module"><span class="toc-section-number">10.4.1</span> Node Module</a></li>
<li><a href="#node-sqlite3"><span class="toc-section-number">10.4.2</span> Node-Sqlite3</a></li>
<li><a href="#查询数据"><span class="toc-section-number">10.4.3</span> 查询数据</a></li>
<li><a href="#get"><span class="toc-section-number">10.4.4</span> GET</a></li>
<li><a href="#iot-coap"><span class="toc-section-number">10.4.5</span> IoT CoAP</a></li>
<li><a href="#判断请求的方法"><span class="toc-section-number">10.4.6</span> 判断请求的方法</a></li>
<li><a href="#database与回调"><span class="toc-section-number">10.4.7</span> Database与回调</a></li>
</ul></li>
<li><a href="#coap-block"><span class="toc-section-number">10.5</span> CoAP Block</a><ul>
<li><a href="#coap-post"><span class="toc-section-number">10.5.1</span> CoAP POST</a></li>
<li><a href="#json请求"><span class="toc-section-number">10.5.2</span> JSON请求</a></li>
<li><a href="#coap-content-types"><span class="toc-section-number">10.5.3</span> CoAP Content Types</a></li>
</ul></li>
<li><a href="#coap-json"><span class="toc-section-number">10.6</span> CoAP JSON</a><ul>
<li><a href="#返回json"><span class="toc-section-number">10.6.1</span> 返回JSON</a></li>
<li><a href="#coap客户端代码"><span class="toc-section-number">10.6.2</span> CoAP客户端代码</a></li>
<li><a href="#coap-server端代码"><span class="toc-section-number">10.6.3</span> CoAP Server端代码</a></li>
</ul></li>
</ul></li>
</ul>
</div>
<h2 id="前言"><span class="header-section-number">0.1</span> 前言</h2>
<p>设计物联网系统是一种有意思的事情，我们需要考虑到软件、硬件、通讯等等不同的几个方案。探索不同的语言，不同的框架，形成不同的解决方案。</p>
<p>在文档中，我们将对设计物联网系统有一个简单的介绍，我们会探讨如何设计一个最小的物联网系统。</p>
<h2 id="目标读者"><span class="header-section-number">0.2</span> 目标读者</h2>
<p>本文档的目标读者是初入物联网领域，希望对物联网系统有一个大概的认识和把握，并学会如何掌握好一个基础的物联网系统的设计。</p>
<p>本文档对一些概念(如)只做了一些基本介绍，以及便于理解。如果想进一步了解这些概念，会列出一些推荐书目，以供参考。</p>
<ul>
<li>硬件开发人员，对物联网有兴趣。</li>
<li>没有web开发经验</li>
<li>极少的linux使用经验</li>
<li>想快速将于生产环境<br /></li>
<li>对硬件了解有限的开发人员。</li>
<li>没接触过51、ARM、Arduino<br /></li>
<li>想了解以下的东西</li>
<li>RESTful与IOT</li>
<li>CoAP协议</li>
<li>MQTT</li>
</ul>
<h2 id="不适合人群"><span class="header-section-number">0.3</span> 不适合人群</h2>
<ul>
<li>丰富经验的开发者</li>
</ul>
<h2 id="介绍"><span class="header-section-number">0.4</span> 介绍</h2>
<p>关于内容的选择上，这是一个有意思的话题，我们很难判断不同的开发者用的是怎样的语言，用的是怎样的框架。</p>
<p>于是我们便自作主张地选择了那些适合于理论学习的语言、框架、硬件，去除掉其他那些我们不需要考虑的因素，如语法，复杂度等等。当然，这些语言、框架、硬件也是流行的，如果找到相关的文档。</p>
<ul>
<li>Arduino: 如果你从头开始学过硬件的话，那些你会爱上它的。</li>
<li>Raspberry PI: 如果你从头编译过GNU/Linux的话，我想你会爱上她的。</li>
<li>Python: 简单地来说，你可以方便地使用一些扩展，同时代码就表达了你的想法。</li>
<li>PHP : 这是一门容易部署的语言，我想你只需要在你的Ubuntu机器上，执行一下脚本就能完成安装了。而且，如果你是一个硬件开发者的话，那么你会更容易找到其他开发者的。</li>
<li>Javascript : 考虑到CoAP、MQTT等版本是基于Nodejs的话，而且这门语言已经无处不在了，而且会更加流行。</li>
<li>HTML、CSS : 这是必须的，他们仍然也是无处不在。</li>
</ul>
<h3 id="为什么没有c"><span class="header-section-number">0.4.1</span> 为什么没有C ?</h3>
<p>如果你还想用C学理论的话，呵呵。</p>
<h3 id="为什么不是java"><span class="header-section-number">0.4.2</span> 为什么不是JAVA ?</h3>
<p>大致有下面两个原因</p>
<ul>
<li>JAVA学的人很多，然而不适合我们将主要精力集中于构建与学习，因为无关的代码太多了。</li>
<li>当时以及现在，我还是不喜欢JAVA(ps:更喜欢脚本语言，可以在更少的时候做更多的事)。</li>
</ul>
<h3 id="为什么没有android"><span class="header-section-number">0.4.3</span> 为什么没有Android ？</h3>
<p>在IOT的repo中: <a href="https://github.com/gmszone/iot">https://github.com/gmszone/iot</a> 是有Android的示例，然而这些理论不适合在这里讨论。</p>
<h2 id="如何阅读"><span class="header-section-number">0.5</span> 如何阅读</h2>
<p>这是一个简单的建议，仅针对于在选择阅读没有经验的读者。</p>
<table>
<thead>
<tr class="header">
<th align="left">当前状态</th>
<th align="left">建议</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">软件初学者</td>
<td align="left">从头阅读</td>
</tr>
<tr class="even">
<td align="left">硬件开发者</td>
<td align="left">从头阅读</td>
</tr>
<tr class="odd">
<td align="left">没有web经验的开发者</td>
<td align="left">从第二部分开始</td>
</tr>
</tbody>
</table>
<p>有一天，走在回学校的路上，我在想：“未来是科技时代（现在也是），只是未来科技会无处不在，而如果我们对于周围的无处不在的代码一无所知的话，或许我们会成为黑客帝国中的一般人”。所以开始想着，人们会开始学习编程就像学习一门语言一样，直到有一天我看到了学习编程如同学习一门语言。这算是一个有趣的时间点，于是我开始想着像之前做最小物联网系统的那些步骤一样，写一个简单的入门。也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。</p>
<p>我们先从身边的语言下手，也就是现在无处不在的html+javascript+css。</p>
<h1 id="无处不在的html"><span class="header-section-number">1</span> 无处不在的HTML</h1>
<p>从html开始的原因在于我们不需要去配置一个复杂的开发环境，也许你还不知道开始环境是什么东西，而这些需要去慢慢的了解才能接触，特别是对于普通的业余爱好者来说，对于专业的选手那些自然不是问题。HTML是Web的核心语言，也算是基础的语言。</p>
<h2 id="html的helloworld"><span class="header-section-number">1.1</span> html的hello,world</h2>
<p>Hello,world是一个传统，所以在这里也遵循这个有趣的传统，我们所要做的事情事实很简单。虽然也有点hack的感觉，所以让我们新建一个文件叫“helloworld.html”。</p>
<p>(PS:大部分人应该都是在windows下工作的，所以你需要新建一个文本，然后重命名，或者你需要一个编辑器，在这里推荐用<strong>sublime text</strong>。破解不破解，注册不注册都不会对你的使用有太多的影响。)</p>
<ol style="list-style-type: decimal">
<li><p>新建文件</p></li>
<li>输入
<pre><code class="html">hello,world</code></pre>
</li>
<li><p>保存为-&gt;“helloworld.html”，</p></li>
<li><p>然后双击打开这个文件。 正常情况下应该是刚好用你的默认浏览器打开。只要是一个现代的浏览器的话，应该可以看到上面显示的是“Hello,world”。</p></li>
</ol>
<p>这才是最短的hello,world程序，其次呢？ruby中的会是这样子的</p>
<pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">2.0.0-p353</span> :001 <span class="kw">&gt;</span> p <span class="st">&quot;hello,world&quot;</span>
<span class="st">&quot;hello,world&quot;</span>
    =<span class="kw">&gt;</span> <span class="st">&quot;hello,world&quot;</span>
<span class="kw">2.0.0-p353</span> :002 <span class="kw">&gt;</span></code></pre>
<p>等等，如果你了解过html的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完Nginx后看到It works!更让人激动了。</p>
<p>遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的bug。</p>
<h3 id="调试helloworld"><span class="header-section-number">1.1.1</span> 调试hello,world</h3>
<p>我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;&lt;/head&gt;</span>
    <span class="kw">&lt;body&gt;</span>hello,world<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre>
<p>这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。</p>
<h3 id="说说helloworld"><span class="header-section-number">1.1.2</span> 说说hello,world</h3>
我很不喜欢其中的&lt;*&gt;<!--*-->超文本标记语言
</blockquote>
<p>所以我们可以发现其中的关键词是标记——markup，也就是说html是一个markup，head是一个markup，body是一个markup。</p>
<p>而后，我们真正工作的代码是在body里面，至于为什么是在里面，这个问题算是太复杂了。</p>
<ol style="list-style-type: decimal">
<li><p>我们所学的汉语是别人创造的，我们所正在学的这门语言也是别人创造的。</p></li>
<li><p>我们在自己的语言里遵循着<strong>他代表是个男的，她代替是个女的</strong>。</p></li>
</ol>
<h3 id="想用中文"><span class="header-section-number">1.1.3</span> 想用中文？</h3>
<p>所以我们也可以把计算机语言与现实世界的语言划上一个等号。而我们所要学习的语言，因为没有一门真正意义上的汉语语言，所以我们便觉得这些很复杂，如果我们可以用汉语代换掉上面的代码的话</p>
<pre><code>&lt;语言&gt;
    &lt;头&gt;&lt;结束头&gt;
    &lt;身体&gt;你好，世界&lt;结束身体&gt;
&lt;结束语言&gt;</code></pre>
<p>看上去很奇怪，只是因为是音译过去的原因，也许你会觉得这样会好理解一点，但是输入上可能一点儿也不方便，因为这键盘都不适合我们去输入汉字，也意味着可能你输入的会有问题。</p>
<p>让我们把上面的代码代替掉原来的代码然后保存，打开浏览器会看到下面的结果</p>
<pre><code>&lt;语言&gt; &lt;头&gt;&lt;结束头&gt; &lt;身体&gt;你好，世界&lt;结束身体&gt; &lt;结束语言&gt;</code></pre>
<p>更不幸的结果可能是</p>
<pre><code>&lt;璇█&gt; &lt;澶�&gt;&lt;缁撴潫澶�&gt; &lt;韬綋&gt;浣犲ソ锛屼笘鐣�&lt;缁撴潫韬綋&gt; &lt;缁撴潫璇█&gt;</code></pre>
<p>这是一个编码问题，对中文支持不友好。</p>
<p>所以我们把上面的代码改为和标记语言一样的结构</p>
<pre><code>&lt;语言&gt;
    &lt;头&gt;&lt;/头&gt;
    &lt;身体&gt;你好，世界&lt;/身体&gt;
&lt;结束语言&gt;</code></pre>
<p>于是我们看到的结果便是</p>
<pre><code>&lt;语言&gt; &lt;头&gt; &lt;身体&gt;你好，世界</code></pre>
<p>被chrome浏览器解析成什么样了？</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;</span><span class="er">&lt;</span>语言&gt;
        <span class="er">&lt;</span>头&gt;<span class="co">&lt;!--头--&gt;</span>
        <span class="er">&lt;</span>身体&gt;你好，世界<span class="co">&lt;!--身体--&gt;</span>
    <span class="co">&lt;!--语言--&gt;</span>
<span class="kw">&lt;/body&gt;&lt;/html&gt;</span>      </code></pre>
<p>以 <!--开头，--></p>
<p>结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。</p>
<p>但是当我们把代码改成</p>
<pre><code>&lt;whatwewanttosay&gt;你好世界&lt;/whatwewanttosay&gt;</code></pre>
<p>浏览器上面显示的内容就变成了</p>
<pre><code>你好世界</code></pre>
<p>或许你会觉得很神奇，但是这一点儿也不神奇，虽然我们的中文语法也遵循着标记语言的标准，但是我们的浏览器不支持中文标记。</p>
<p>结论:</p>
<ol style="list-style-type: decimal">
<li>浏览器对中文支持不友好。</li>
<li>浏览器对英文支持友好。</li>
</ol>
<p>刚开始的时候不要对中文编程有太多的想法，这不是很现实的:</p>
<ol style="list-style-type: decimal">
<li>现有的系统都是基于英语构建的，对中文支持不是很友好。</li>
<li>中文输入的速度在某种程度上来说没有英语快。</li>
</ol>
<p>我们离开话题已经很远了，但是这里说的都是针对于那些不满于英语的人来说的，只有当我们可以从头构建一个中文系统的时候才是可行的，这些包括的东西有cpu，软件，硬件，而我们还需要考虑重新设计cpu的结构，在某种程度上来说会有些不现实。需要一代又一代的人的努力，只是在当前就更不现实了。忘记那些，师夷长之技以治夷。</p>
<h2 id="其他html标记"><span class="header-section-number">1.2</span> 其他html标记</h2>
<p>添加一个标题，</p>
<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;标题&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;hello,world&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>我们便可以在浏览器的最上方看到“标题”二字，真实世界的淘宝网也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
    <span class="kw">&lt;title&gt;</span>标题<span class="kw">&lt;/title&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
hello,world
<span class="kw">&lt;h1&gt;</span>大标题<span class="kw">&lt;/h1&gt;</span>
<span class="kw">&lt;h2&gt;</span>次标题<span class="kw">&lt;/h2&gt;</span>
<span class="kw">&lt;h3&gt;</span>...<span class="kw">&lt;/h3&gt;</span>
<span class="kw">&lt;ul&gt;</span>
    <span class="kw">&lt;li&gt;</span>列表1<span class="kw">&lt;/li&gt;</span>
    <span class="kw">&lt;li&gt;</span>列表2<span class="kw">&lt;/li&gt;</span>
<span class="kw">&lt;/ul&gt;</span>
<span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre>
<p>更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其他的东西都和这些类似。</p>
<h3 id="美妙之处"><span class="header-section-number">1.2.1</span> 美妙之处</h3>
<p>我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有C和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如python，我们所要做的就是</p>
<pre><code>$ python file.py
=&gt;hello,world</code></pre>
<p>然后在终端上返回结果。只是因为在我看来学会html是有意义的，简单的上手，而后再慢慢地深入，如果一开始我们就开始去理解指针，开始去理解类。我们甚至还知道程序是怎么编译运行的时候，在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么，但是至少展示了</p>
<ol style="list-style-type: decimal">
<li>中文编程语言在当前意义不大，不现实，效率不高兼容性差</li>
<li>语言的语法是固定的。（ps:虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。）</li>
<li>已经开始写代码，而不是还在配置开发环境。</li>
<li>随身的工具才是最好的，最常用的code也才是实在的。</li>
</ol>
<h3 id="更多"><span class="header-section-number">1.2.2</span> 更多</h3>
<p>我们还没有试着去解决，某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱的问题。也就是说我们学会的是一个还不能解决实际问题的语言，于是我们还需要学点东西如javascript,css。我们可以理解为Javascript是解决问题的语言，html是前端显示，css是配置文件，这样的话，我们会在那之后学会成为一个近乎专业的程序员。我们刚学了下怎么在前端显示那些代码的行为，于是我们还需要Javascript。</p>
<h1 id="无处不在的javascript"><span class="header-section-number">2</span> 无处不在的Javascript</h1>
<p>Javascript现在已经无处不在了，也许你正打开的某个网站他可能是node.js+json+javascript+mustache.js完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是Javascript已经无处不在了，可能会在你手机上的某个app里，在你浏览的网页里，在你IDE中的某个进程中运行的。</p>
<h2 id="javascript的helloworld"><span class="header-section-number">2.1</span> Javascript的Hello,world</h2>
<p>这里我们还需要有一个helloworld.html，Javascript是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的helloworld.html</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;&lt;/head&gt;</span>
    <span class="kw">&lt;body&gt;&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre>
<p>然后开始融入我们的javascript，向HTML中插入Javascript的方法，就需要用到html中的&lt;script&gt;标签，我们先用页面嵌入的方法来写helloworld。</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;</span>
        <span class="kw">&lt;script&gt;</span>
            <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">&#39;hello,world&#39;</span>);
        &lt;<span class="ot">/script&gt;</span>
<span class="ot">    &lt;/head</span>&gt;
    &lt;body&gt;&lt;<span class="ot">/body&gt;</span>
<span class="ot">&lt;/html</span>&gt;</code></pre>
<p>按照标准的写法，我们还需要声明这个脚本的类型</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;</span>
        <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
            <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">&#39;hello,world&#39;</span>);
        &lt;<span class="ot">/script&gt;</span>
<span class="ot">    &lt;/head</span>&gt;
    &lt;body&gt;&lt;<span class="ot">/body&gt;</span>
<span class="ot">&lt;/html</span>&gt;</code></pre>
<p>没有显示hello,world?试试下面的代码</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;</span>
        <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
            <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">&#39;hello,world&#39;</span>);
        &lt;<span class="ot">/script&gt;</span>
<span class="ot">    &lt;/head</span>&gt;
    &lt;body&gt;
        &lt;noscript&gt;
            disable Javascript
        &lt;<span class="ot">/noscript&gt;</span>
<span class="ot">    &lt;/body</span>&gt;
&lt;<span class="ot">/html&gt;</span></code></pre>
<h2 id="更js一点"><span class="header-section-number">2.2</span> 更js一点</h2>
<p>我们需要让我们的代码看上去更像是js，同时是以js结尾。C语言的源码但是以C结尾的，所以我们要让我们的代码看上去更正式一点。于是我们需要在helloworld.html的同文件夹下创建一个app.js，里面写着</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">document</span>.<span class="fu">write</span>(<span class="st">&#39;hello,world&#39;</span>);</code></pre>
<p>同时我们的helloworld.html还需要告诉我们的浏览器js代码在哪里</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
    <span class="kw">&lt;head&gt;</span>
        <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
    <span class="kw">&lt;/head&gt;</span>
    <span class="kw">&lt;body&gt;</span>
        <span class="kw">&lt;noscript&gt;</span>
            disable Javascript
        <span class="kw">&lt;/noscript&gt;</span>
    <span class="kw">&lt;/body&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre>
<h3 id="从数学出发"><span class="header-section-number">2.2.1</span> 从数学出发</h3>
<p>让我们回到第一章讲述的小明的问题，<strong>从实际问题下手编程，更容易学会编程</strong>。小学时代的数学题最喜欢这样子了——某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱的问题。在编程方面，也许我们还算是小学生。最直接的方法就是直接计算3x5=?</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">document</span>.<span class="fu">write</span>(<span class="dv">3</span>*<span class="dv">5</span>);</code></pre>
<p>document.write实际也我们可以理解为输出，也就是往页面里写入3*5的结果，在有双引号的情况下会输出字符串。我们便会在浏览器上看到15，这便是一个好的开始，也是一个不好的开始。</p>
<h2 id="设计和编程"><span class="header-section-number">2.3</span> 设计和编程</h2>
<p>对于我们的实际问题如果总是止于所要的结果，很多年之后，我们成为了code monkey。对这个问题进行一次设计，所谓的设计有些时候会把简单的问题复杂化，有些时候会使以后的扩展更加简单。这一天因为这家商店的糖价格太高了，于是店长将价格降为了4块钱。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">document</span>.<span class="fu">write</span>(<span class="dv">3</span>*<span class="dv">4</span>);</code></pre>
<p>于是我们又得到了我们的结果，但是下次我们看到这些代码的时候没有分清楚哪个是糖的数量，哪个是价格，于是我们重新设计了程序</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">tang=<span class="dv">4</span>;
num=<span class="dv">3</span>;
<span class="ot">document</span>.<span class="fu">write</span>(tang*num);</code></pre>
<p>这才能叫得上是程序设计，或许你注意到了“;”这个符号的存在，我想说的是这是另外一个标准，我们不得不去遵守，也不得不去fuck。</p>
<h3 id="函数"><span class="header-section-number">2.3.1</span> 函数</h3>
<p>记得刚开始学三角函数的时候，我们会写</p>
<pre><code>sin 30=0.5</code></pre>
<p>而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们做一个简单的开始。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">hello</span>(){
    <span class="kw">return</span> <span class="ot">document</span>.<span class="fu">write</span>(<span class="st">&quot;hello,world&quot;</span>);
}
<span class="fu">hello</span>();</code></pre>
<p>当我第一次看到函数的时候，有些小激动终于出现了。我们写了一个叫hello的函数，它返回了往页面中写入hello,world的方法，然后我们调用了hello这个函数，于是页面上有了hello,world。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">sin</span>(degree){
    <span class="kw">return</span> <span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">Math</span>.<span class="fu">sin</span>(degree));
}
<span class="fu">sin</span>(<span class="dv">30</span>);</code></pre>
<p>在这里degree称之为变量，也就是可以改变的量。 于是输出了-0.9880316240928602，而不是0.5，因为这里用的是弧度制，而不是角度制。</p>
<pre><code>sin(30)</code></pre>
<p>的输出结果有点类似于sin 30。写括号的目的在于，括号是为了方便解析，这个在不同的语言中可能是不一样的，比如在ruby中我们可以直接用类似于数学中的表达:</p>
<pre class="sourceCode ruby"><code class="sourceCode ruby"><span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">004</span> &gt; <span class="dt">Math</span>.sin <span class="dv">30</span>
=&gt; -<span class="fl">0.9880316240928618</span>
<span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">005</span> &gt;</code></pre>
<p>我们可以在函数中传入多个变量，于是我们再回到小明的问题，就会这样去写代码。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">calc</span>(tang,num){
    result=tang*num;
    <span class="ot">document</span>.<span class="fu">write</span>(result);
}
<span class="fu">calc</span>(<span class="dv">3</span>,<span class="dv">4</span>);</code></pre>
<p>但是从某种程度上来说，我们的calc做了计算的事又做了输出的事，总的来说设计上有些不好。</p>
<h3 id="重新设计"><span class="header-section-number">2.3.2</span> 重新设计</h3>
<p>我们将输出的工作移到函数的外面，</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">calc</span>(tang,num){
    <span class="kw">return</span> tang*num;
}
<span class="ot">document</span>.<span class="fu">write</span>(<span class="fu">calc</span>(<span class="dv">3</span>,<span class="dv">4</span>));</code></pre>
<p>接着我们用一种更有意思的方法来写这个问题的解决方案</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">calc</span>(tang,num){
    <span class="kw">return</span> tang*num;
}
<span class="kw">function</span> <span class="fu">printResult</span>(tang,num){
    <span class="ot">document</span>.<span class="fu">write</span>(<span class="fu">calc</span>(tang,num));
}
<span class="fu">printResult</span>(<span class="dv">3</span>, <span class="dv">4</span>)</code></pre>
<p>看上去更专业了一点点，如果我们只需要计算的时候我们只需要调用calc，如果我们需要输出的时候我们就调用printResult的方法。</p>
<h3 id="object和函数"><span class="header-section-number">2.3.3</span> object和函数</h3>
<p>我们还没有说清楚之前我们遇到过的document.write以及Math.sin的语法看上去很奇怪，所以让我们看看他们到底是什么，修改app.js为以及内容</p>
<pre><code>document.write(typeof document);
document.write(typeof Math);</code></pre>
<p>typeof document会返回document的数据类型，就会发现输出的结果是</p>
<pre><code>object object</code></pre>
<p>所以我们需要去弄清楚什么是object。对象的定义是</p>
<blockquote>
无序属性的集合，其属性可以包含基本值、对象或者函数。
</blockquote>

<p>创建一个object，然后观察这便是我们接下来要做的</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">store={};
<span class="ot">store</span>.<span class="fu">tang</span>=<span class="dv">4</span>;
<span class="ot">store</span>.<span class="fu">num</span>=<span class="dv">3</span>;
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">store</span>.<span class="fu">tang</span>*<span class="ot">store</span>.<span class="fu">num</span>);</code></pre>
<p>我们就有了和document.write一样的用法，这也是对象的美妙之处，只是这里的对象只是包含着基本值，因为</p>
<pre><code>typeof story.tang=&quot;number&quot;</code></pre>
<p>一个包含对象的对象应该是这样子的。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">store={};
<span class="ot">store</span>.<span class="fu">tang</span>=<span class="dv">4</span>;
<span class="ot">store</span>.<span class="fu">num</span>=<span class="dv">3</span>;
<span class="ot">document</span>.<span class="fu">writeln</span>(<span class="ot">store</span>.<span class="fu">tang</span>*<span class="ot">store</span>.<span class="fu">num</span>);

<span class="kw">var</span> wall=<span class="kw">new</span> <span class="fu">Object</span>();
<span class="ot">wall</span>.<span class="fu">store</span>=store;
<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> <span class="ot">wall</span>.<span class="fu">store</span>);</code></pre>
<p>而我们用到的document.write和上面用到的document.writeln都是属于这个无序属性集合中的函数。</p>
<p>下面代码说的就是这个无序属性集中中的函数。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> IO=<span class="kw">new</span> <span class="fu">Object</span>();
<span class="kw">function</span> <span class="fu">print</span>(result){
    <span class="ot">document</span>.<span class="fu">write</span>(result);
};
<span class="ot">IO</span>.<span class="fu">print</span>=print;
<span class="ot">IO</span>.<span class="fu">print</span>(<span class="st">&quot;a obejct with function&quot;</span>);
<span class="ot">IO</span>.<span class="fu">print</span>(<span class="kw">typeof</span> <span class="ot">IO</span>.<span class="fu">print</span>);</code></pre>
<p>我们定义了一个叫IO的对象，声明对象可以用</p>
<pre><code>var store={};</code></pre>
<p>又或者是</p>
<pre><code>var store=new Object{};</code></pre>
<p>两者是等价的，但是用后者的可读性会更好一点，我们定义了一个叫print的函数，他的作用也就是document.write，IO中的print函数是等价于print()函数，这也就是对象和函数之间的一些区别，对象可以包含函数，对象是无序属性的集合，其属性可以包含基本值、对象或者函数。</p>
<p>复杂一点的对象应该是下面这样的一种情况。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person={<span class="dt">name</span>:<span class="st">&quot;phodal&quot;</span>,<span class="dt">weight</span>:<span class="dv">50</span>,<span class="dt">height</span>:<span class="dv">166</span>};
<span class="kw">function</span> <span class="fu">dream</span>(){
    future;
};
<span class="ot">Person</span>.<span class="fu">future</span>=dream;
<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> Person);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">Person</span>.<span class="fu">future</span>);</code></pre>
<p>而这些会在我们未来的实际编编程中用得更多。</p>
<h3 id="面向对象"><span class="header-section-number">2.3.4</span> 面向对象</h3>
<p>开始之前先我们简化上面的代码，</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">Person</span>.<span class="fu">future</span>=<span class="kw">function</span> <span class="fu">dream</span>(){
    future;
}</code></pre>
<p>看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person=<span class="kw">function</span>(){
    <span class="kw">this</span>.<span class="fu">name</span>=<span class="st">&quot;phodal&quot;</span>;
    <span class="kw">this</span>.<span class="fu">weight</span>=<span class="dv">50</span>;
    <span class="kw">this</span>.<span class="fu">height</span>=<span class="dv">166</span>;
    <span class="kw">this</span>.<span class="fu">future</span>=<span class="kw">function</span> <span class="fu">dream</span>(){
        <span class="kw">return</span> <span class="st">&quot;future&quot;</span>;
    };
};
<span class="kw">var</span> person=<span class="kw">new</span> <span class="fu">Person</span>();
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">person</span>.<span class="fu">name</span>+<span class="st">&quot;&lt;br&gt;&quot;</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> person+<span class="st">&quot;&lt;br&gt;&quot;</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="kw">typeof</span> <span class="ot">person</span>.<span class="fu">future</span>+<span class="st">&quot;&lt;br&gt;&quot;</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">person</span>.<span class="fu">future</span>()+<span class="st">&quot;&lt;br&gt;&quot;</span>);</code></pre>
<p>只是在这个时候Person是一个函数，但是我们声明的person却变成了一个对象<strong>一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。</strong>这里的+“<br>”是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下this。this关键字表示函数的所有者或作用域，也就是这里的Person。</p>
<p>上面的方法显得有点不可取，换句话说和一开始的</p>
<pre><code>document.write(3*4);</code></pre>
<p>一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person=<span class="kw">function</span>(name,weight,height){
    <span class="kw">this</span>.<span class="fu">name</span>=name;
    <span class="kw">this</span>.<span class="fu">weight</span>=weight;
    <span class="kw">this</span>.<span class="fu">height</span>=height; 
    <span class="kw">this</span>.<span class="fu">future</span>=<span class="kw">function</span>(){
        <span class="kw">return</span> <span class="st">&quot;future&quot;</span>;
    };
};
<span class="kw">var</span> phodal=<span class="kw">new</span> <span class="fu">Person</span>(<span class="st">&quot;phodal&quot;</span>,<span class="dv">50</span>,<span class="dv">166</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">name</span>+<span class="st">&quot;&lt;br&gt;&quot;</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">weight</span>+<span class="st">&quot;&lt;br&gt;&quot;</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">height</span>+<span class="st">&quot;&lt;br&gt;&quot;</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">future</span>()+<span class="st">&quot;&lt;br&gt;&quot;</span>);</code></pre>
<p>于是，产生了这样一个可重用的Javascript对象,this关键字确立了属性的所有者。</p>
<h2 id="其他"><span class="header-section-number">2.4</span> 其他</h2>
<p>Javascript还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。</p>
<p>所谓的继承，</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Chinese=<span class="kw">function</span>(){
    <span class="kw">this</span>.<span class="fu">country</span>=<span class="st">&quot;China&quot;</span>;
}

<span class="kw">var</span> Person=<span class="kw">function</span>(name,weight,height){
    <span class="kw">this</span>.<span class="fu">name</span>=name;
    <span class="kw">this</span>.<span class="fu">weight</span>=weight;
    <span class="kw">this</span>.<span class="fu">height</span>=height; 
    <span class="kw">this</span>.<span class="fu">futrue</span>=<span class="kw">function</span>(){
        <span class="kw">return</span> <span class="st">&quot;future&quot;</span>;
    }
}
<span class="ot">Chinese</span>.<span class="fu">prototype</span>=<span class="kw">new</span> <span class="fu">Person</span>();

<span class="kw">var</span> phodal=<span class="kw">new</span> <span class="fu">Chinese</span>(<span class="st">&quot;phodal&quot;</span>,<span class="dv">50</span>,<span class="dv">166</span>);
<span class="ot">document</span>.<span class="fu">write</span>(<span class="ot">phodal</span>.<span class="fu">country</span>);</code></pre>
<p>完整的Javascript应该由下列三个部分组成:</p>
<ul>
<li>核心(ECMAScript)——核心语言功能</li>
<li>文档对象模型(DOM)——访问和操作网页内容的方法和接口</li>
<li>浏览器对象模型(BOM)——与浏览器交互的方法和接口</li>
</ul>
<p>我们在上面讲的都是ECMAScript，也就是语法相关的，但是JS真正强大的，或者说我们最需要的可能就是对DOM的操作，这也就是为什么jQuery等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于BOM真正用到的机会很少，因为没有好的统一的标准。</p>
<p>一个简单的DOM示例,</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
<span class="kw">&lt;html&gt;</span>
<span class="kw">&lt;head&gt;</span>
<span class="kw">&lt;/head&gt;</span>
<span class="kw">&lt;body&gt;</span>
    <span class="kw">&lt;noscript&gt;</span>
        disable Javascript
    <span class="kw">&lt;/noscript&gt;</span>
    <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span>
<span class="kw">&lt;/body&gt;</span>
    <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
<span class="kw">&lt;/html&gt;</span></code></pre>
<p>我们需要修改一下helloworld.html添加</p>
<pre><code>&lt;p id=&quot;para&quot; style=&quot;color:red&quot;&gt;Red&lt;/p&gt;</code></pre>
<p>同时还需要将script标签移到body下面，如果没有意外的话我们会看到页面上用红色的字体显示Red，修改app.js。</p>
<pre><code>var para=document.getElementById(&quot;para&quot;);
para.style.color=&quot;blue&quot;;</code></pre>
<p>接着，字体就变成了蓝色，有了DOM我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。</p>
<h2 id="美妙之处-1"><span class="header-section-number">2.5</span> 美妙之处</h2>
<p>这里说到的Javascript仅仅只是其中的一小小部分，忽略掉的东西很多，只关心的是如何去设计一个实用的app，作为一门编程语言，他还有其他强大的内制函数，要学好需要一本有价值的参考书。这里提到的只是其中的不到20%的东西，其他的80%或者更多会在你解决问题的时候出现。</p>
<ul>
<li>我们可以创建一个对象或者说函数，它可以包含基本值、对象或者函数。</li>
<li>我们可以用Javascript修改页面的属性，虽然只是简单的示例。</li>
<li>我们还可以去解决实际的编程问题。</li>
</ul>
<h1 id="无处不在的css"><span class="header-section-number">3</span> 无处不在的CSS</h1>
<p>CSS或许你觉得他一点儿也不重要，HTML好比是建筑的框架，CSS就是用于装修房子。那么Javascript呢，我听到的最有趣的说法是小三，先让我们回到代码上来吧。</p>
<h2 id="css"><span class="header-section-number">3.1</span> CSS</h2>
<p>下面就是我们之前说到的代码，css将Red三个字母变成了红色。</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id=&quot;para&quot; style=&quot;color:red&quot;&gt;Red&lt;/p&gt;
&lt;/body&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/html&gt;</code></pre>
<p>只是，</p>
<pre><code>var para=document.getElementById(&quot;para&quot;);
para.style.color=&quot;blue&quot;;</code></pre>
<p>将字体变成了蓝色，CSS+HTML让页面有序的工作着，但是Javascript打乱了这些秩序，不过却也让生活多姿多彩，小三不都是这样的么——终于可以理解，为什么以前人们对于Javascript没有好感了？不过这里要讲的是正室，也就是CSS，这时还没有Javascript。</p>
<div class="figure">
<img src="http://ebook.designiot.cn/images/redfonts.png" alt="Alt text" /><p class="caption">Alt text</p>
</div>
<h2 id="关于css"><span class="header-section-number">3.2</span> 关于CSS</h2>
<p>这不是一篇好的关于讲述CSS的书籍，所以不会去说CSS是怎么来的，有些东西既然我们可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。</p>
<p>到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的CSS来说也不会有例外的。</p>
<p>CSS是来自于(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS还有一个中文名字是层叠式样式表，翻译成什么样的可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢DreamWeaver那也不错，不过一开始使用IDE可无助于我们写出良好的代码。</p>
<p>忘说了，CSS也是有版本的，和windows，Linux内核等等一样，但是更新可能没有那么频繁，HTML也是有版本的，JS也是有版本的，复杂的东西不是当前考虑的内容。</p>
<h2 id="代码结构"><span class="header-section-number">3.3</span> 代码结构</h2>
<p>对于我们的上面的Red示例来说，如果没有一个好的结构，那么以后可能就是这样子。</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p style=&quot;font-size: 22px;color:#f00;text-align: center;padding-left: 20px;&quot;&gt;如果没有一个好的结构&lt;/p&gt;
    &lt;p style=&quot;  font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>虽然我们看到的还是一样的:</p>
<div class="figure">
<img src="http://ebook.designiot.cn/images/nostyle.png" alt="Alt text" /><p class="caption">Alt text</p>
</div>
<p>于是我们就按各种书上的建议重新写了上面的代码</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;CSS example&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        .para{
            font-size: 22px;
            color:#f00;
            text-align: center;
            padding-left: 20px;
        }
        .para2{
            font-size:44px;
            color:#3ed;
            text-indent: 2em;
            padding-left: 2em;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;para&quot;&gt;如果没有一个好的结构&lt;/p&gt;
    &lt;p class=&quot;para2&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该是下面:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;CSS example&lt;/title&gt;
    &lt;style type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;para&quot;&gt;如果没有一个好的结构&lt;/p&gt;
    &lt;p class=&quot;para2&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>我们需要</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;CSS example&lt;/title&gt;
    &lt;link href=&quot;./style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;para&quot;&gt;如果没有一个好的结构&lt;/p&gt;
    &lt;p class=&quot;para2&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>然后我们有一个像app.js一样的style.css放在同目录下，而他的内容便是</p>
<pre><code>.para{
    font-size: 22px;
    color:#f00;
    text-align: center;
    padding-left: 20px;
}
.para2{
    font-size:44px;
    color:#3ed;
    text-indent: 2em;
    padding-left: 2em;
}</code></pre>
<p>这代码和JS的代码有如此多的相似</p>
<pre><code>var para={
    font_size:&#39;22px&#39;,
    color:&#39;#f00&#39;,
    text_align:&#39;center&#39;,
    padding_left:&#39;20px&#39;,
}</code></pre>
<p>而22px、20px以及#f00都是数值，因此。。</p>
<pre><code>var para={
    font_size:22px,
    color:#f00,
    text_align:center,
    padding_left:20px,
}   </code></pre>
<p>目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多的这种符号，除非你乐意去理解:</p>
<pre><code>(dotimes (i 4) (print i))</code></pre>
<p>总的来说我们减少了符号的使用，但是用lisp便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到，或者说用这个去。。</p>
<pre><code>\d{2}/[A-Z][a-z][a-z]/\d{4}</code></pre>
<p>没有什么会比一开始不理解那是正则表达式，然后去修改上面的代码，为的是去从一堆数据中找出某日/某月/某年。</p>
<p>这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说还是比其他语言好理解一些。</p>
<h2 id="样式与目标"><span class="header-section-number">3.4</span> 样式与目标</h2>
<p>下面也就是我们的样式</p>
<pre><code>.para{
    font-size: 22px;
    color:#f00;
    text-align: center;
    padding-left: 20px;
}</code></pre>
<p>我们的目标就是</p>
<pre><code>如果没有一个好的结构</code></pre>
<p>所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是CSS与HTML沟通的重点所在了:</p>
<h3 id="选择器"><span class="header-section-number">3.4.1</span> 选择器</h3>
<p>我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:</p>
<pre><code>p.para{
    color:#f0f;
}</code></pre>
<p>将代码添加到style.css的最下面会发现“如果没有一个的结构”变成了粉红色，当然我们还会有这样的写法</p>
<pre><code>p&gt;.para{
    color:#f0f;
}</code></pre>
<p>为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。</p>
<p>而通常我们可以通过一个</p>
<pre><code>p{
    text-align:left;
}</code></pre>
<p>这样的元素选择器来给予所有的p元素一个左对齐。</p>
<p>还有复杂一点的复合型选择器，下面的是HTML文件</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;CSS example&lt;/title&gt;
    &lt;link href=&quot;./style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;para&quot;&gt;如果没有一个好的结构&lt;/p&gt;
    &lt;div id=&quot;content&quot;&gt;
        &lt;p class=&quot;para2&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>还有CSS文件</p>
<pre><code>.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;
}</code></pre>
<h2 id="更有趣的css"><span class="header-section-number">3.5</span> 更有趣的CSS</h2>
<p>一个包含了para2以及para_bg的例子</p>
<pre><code>    &lt;div id=&quot;content&quot;&gt;
        &lt;p class=&quot;para2 para_bg&quot;&gt;那么以后可能就是这样子。。。。&lt;/p&gt;
    &lt;/div&gt;
    </code></pre>
<p>我们只是添加了一个黑色的背景</p>
<pre><code>.para_bg{
    background-color:#000;
}</code></pre>
<p>重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是如上面的例子。</p>
<p>我们还可以用CSS3做出有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。</p>
<p>或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是有一些东西才是核心的，而不是去考虑一些基础的语法，基础的东西我们可以从实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这些可以从观察一些比较好的设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。</p>
<h1 id="无处不在的三剑客"><span class="header-section-number">4</span> 无处不在的三剑客</h1>
<p>这时我们终于了解了我们的三剑客，就这么可以结合到一起了，HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、Ruby等等的最后都会变成上面的结果，当然还有Coffeescript之类的语言都是以此为基础，这才是我们需要的知识。</p>
<h2 id="hellogeek"><span class="header-section-number">4.1</span> Hello,Geek</h2>
<p>有了一些些的基础之后，我们终于能试着去写一些程序了。也是时候去创建一个像样的东西，或许你在一些见面设计方面的书籍看过类似的东西，可能我写得也没有那些内容好，只是这些都是一些过程。过去我们都是一点点慢慢过来的，只是现在我们也是如此，技术上的一些东西，事实上大家都是知道的。就好比我们都觉得我们可以开个超市，但是如果让我们去开超市的话，我们并不一定能赚钱。</p>
<p>学习编程的目的可能不在于我们能找到一份工作，那只是在编程之外的东西，虽然确实也是很确定的。但是除些之处，有些东西也是很重要的。、</p>
<p>过去没有理解为什么会一些人会不厌其烦地去回答别人的问题，有时候可能会想是一种能力越大责任越大的感觉，但是有时候在写一些博客或者回答别人的问题的时候我们又重新思考了这些问题，又重新学习了这些技能。所以这里可能说的不是关于编程的东西而是一些编程以外的东西，关于学习或者学习以外的东西。</p>
<h2 id="从源码学习"><span class="header-section-number">4.2</span> 从源码学习</h2>
<p>过去总会觉得学了一种语言的语法便算是学了一种语言，于是有一天发现到了这个语言的项目上的时候，虽然会写上几行代码，但是却不像这语言的风格。于是这也是这一篇的意义所在了：</p>
<h3 id="html"><span class="header-section-number">4.2.1</span> HTML</h3>
<p>写好HTML的一个要点在于看别人写的代码，这只是一方面，我们所说的HTML方面的内容可能不够多，原因有很多，很多东西都需要在实战中去解决。读万卷书和行万里路，分不清哪个有重要的意义，但是如果可以同时做好两个的话，成长会很快的。</p>
<p>写好HTML应该会有下面的要点</p>
<ul>
<li>了解标准及遵守绝大多数标准</li>
<li>注重可读性，从ID及CLASS的命名</li>
<li>关注SEO与代码的联系</li>
</ul>
<p>或许在这方面我也算不上很了解，不过按笔者的经验来说，大致就是如此。</p>
<p>多数情况下我们的HTML是类似于下面这样子的</p>
<pre><code>&lt;div class=&quot;col-md-3 right&quot;&gt;
    {% nevercache %}
    {% include &quot;includes/user_panel.html&quot; %}
    {% endnevercache %}
    &lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
    {% block right_panel %}
    {% ifinstalled mezzanine.twitter %}
    {% include &quot;twitter/tweets.html&quot; %}
    {% endifinstalled %}
    {% endblock %}
    &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>换句话说HTML只是基础，而不是日常用到的。我们的HTML是由template生成的，我们可以借助于mustache.js又或者是angluarjs之类的js库来生成最后的HTML，所以这里只是一个开始。</p>
<p>还需要了解的一部分就是HTML的另外一个重要的部分，DOM树形结构</p>
<h2 id="dom树形结构图"><span class="header-section-number">4.3</span> DOM树形结构图</h2>
<h3 id="javascript"><span class="header-section-number">4.3.1</span> javascript</h3>
<p>这里以未压缩的jQuery源码和zepto.js作一个小小的比较，zepto.js是兼容jQuery的，因此我们举几个有意思的函数作一简单的比较，关于源码可以在官网上下载到。</p>
<p>在zepto.js下面判断一个值是否是函数的方面如下，</p>
<pre><code>function isFunction(value) { return type(value) == &quot;function&quot; }</code></pre>
<p>而在jQuery下面则是这样的</p>
<pre><code>isFunction: function( obj ) {
    return jQuery.type(obj) === &quot;function&quot;;
},</code></pre>
<p>而他们的用法是一样的，都是</p>
<pre><code>$.isFunction();</code></pre>
<p>jQuery的作法是将诸如isFunction,isArray这些函数打包到jQuery.extend中，而zepto.js的则是 也是这样的，只不过多了一行</p>
<pre><code>$.isFunction = isFunction</code></pre>
<p>遗憾的是我也没去了解过为什么，之前我也没有看过这些库的代码，所以这个问题就要交给读者去解决了。jQuery里面提供了函数式编程接口，不过jQuery更多的是构建于CSS选择器之上，对于DOM的操作比javascript自身提供的功能强大得多。如果我们的目的在于更好的编程，那么可能需要诸如Underscore.js之类的库。或许说打包自己常用的函数功能为一个库，诸如jQuery</p>
<pre><code>function isFunction(value) { return type(value) == &quot;function&quot; }
function isWindow(obj)     { return obj != null &amp;&amp; obj == obj.window }
function isDocument(obj)   { return obj != null &amp;&amp; obj.nodeType == obj.DOCUMENT_NODE }
function isObject(obj)     { return type(obj) == &quot;object&quot; }</code></pre>
<p>我们需要去了解一些故事背后的原因，越来越害怕GUI的原因之一，在于不知道背后发生了什么，即使是开源的，我们也无法了解真正的背后发生什么了。对于不是这个工具、软件的用户来说，开源更多的意义可能在于我们可以添加新的功能，以及免费。如果没有所谓的危机感，以及认为自己一直在学习工具的话，可以试着去打包自己的函数，打包自己的库。</p>
<pre><code>var calc={
    add: function(a,b){
        return a+b;
    },
    sub: function(a,b){
        return a-b;
    },
    dif: function(a,b){
        if(a&gt;b){
            return a;
        }else{
            return b;
        }
    }
}</code></pre>
<p>然后用诸如jslint测试一下代码。</p>
<pre><code>$ ./jsl -conf jsl.default.conf
JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24)
Developed by Matthias Miller (http://www.JavaScriptLint.com)

app.js
/Users/fdhuang/beageek/chapter4/src/app.js(15): lint warning: missing semicolon
    }
........^


0 error(s), 1 warning(s)</code></pre>
<p>于是我们需要在第15行添加一个分号。</p>
<p>最好的方法还是阅读别人的代码，而所谓的别人指的是一些相对较大的网站的，有好的开发流程，代码质量也不会太差。而所谓的复杂的代码都是一步步构建上去的，罗马不是一天建成的。</p>
<p>有意思的是多数情况下，我们可能会用原型去开发我们的应用，而这也是我们需要去了解和掌握的地方，</p>
<pre><code>function Calc(){

}
Calc.prototype.add=function(a,b){
    return a+b;
};
Calc.prototype.sub=function(a,b){
    return a-b;
};</code></pre>
<p>我们似乎在这里展示了更多的Javascript的用法，但是这不是一好的关于Javascript的介绍，有一天我们还要用诸如qunit之类的工具去为我们的function写测试，这时就是一个更好的开始。</p>
<p>如果我们乐意的话，我们也可以构建一个类似于jQuery的框架，以用来学习。</p>
<p>作为一门编程语言来说，我们学得很普通，在某种意义上来说算不上是一种入门。但是如果我们可以在其他的好书在看到的内容，就没有必要在这里进行复述，目的在于一种学习习惯的养成。</p>
<h3 id="css-1"><span class="header-section-number">4.3.2</span> CSS</h3>
<p>CSS有时候很有趣，但是有时候有很多我们没有意识到的用法，这里以Bootstrap为例，这是一个不错的CSS库。最令人兴奋的是没有闭源的CSS，没有闭源的JS，这也就是前端好学习的地方所在了，不过这是一个开源的CSS库，虽然是这样叫的，但是称之为CSS库显然不合适。</p>
<pre><code>a,
a:visited {
  text-decoration: underline;
}
a[href]:after {
  content: &quot; (&quot; attr(href) &quot;)&quot;;
}
abbr[title]:after {
  content: &quot; (&quot; attr(title) &quot;)&quot;;
}
a[href^=&quot;javascript:&quot;]:after,
a[href^=&quot;#&quot;]:after {
  content: &quot;&quot;;
}</code></pre>
<p>这里有一些有趣的，值得一讲的CSS用法。</p>
<ul>
<li>伪类选择器,如a:visited这样需要其他条件来对元素应用样式，用于已访问的链接。</li>
<li>属性选择器,如a[href]这样当a元素存在href这样的属性的时候来寻找应用元素。</li>
</ul>
<p>其他的还需要去好好了解的就是<strong>CSS的盒模型</strong>，作为CSS的基石之一。</p>
<h2 id="css盒模型图"><span class="header-section-number">4.4</span> CSS盒模型图</h2>
<p>诸如</p>
<pre><code>* {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica;
}</code></pre>
<p>这样的通用器用来进行全局选择的工具和我们用于抵消某个body对于子选择器的影响一样值得注意得多。</p>
<h2 id="笔记"><span class="header-section-number">4.5</span> 笔记</h2>
<p>写博客似乎是一个不错的好习惯，作为一个不是很优秀的写手。对于来说，有时候发现原来能教会别人对于自己的能力来说算是一种肯定。有些时候教会别人才算是自己学会的表现，总会在项目上的时候需要自己去复述工作的一个过程，我们需要整理好我们的思路才能带给别人更多的收获。我们的笔记上总会留下自己的学习的一些过程，有些时候我们想要的只是一点点的鼓励，有时是诸如评论一类，有时可能是诸如访问量。更多的可能是我们可以重新整理自己的知识，好好复习一下，以便于好好记住，写出来是一个好的过程。</p>
<p>无处不在的三剑客就这样到了这里，写得似乎很多也很少，但是还是没有做出来一个东西，于是我们朝着这样一个方向前进。</p>
<h1 id="gnulinux"><span class="header-section-number">5</span> GNU/Linux</h1>
<h2 id="什么是linux"><span class="header-section-number">5.1</span> 什么是Linux</h2>
<p>Linux是一种自由和开放源码的类UNIX操作系统内核。目前存在着许多不同的Linux发行版，可安装在各种各样的电脑硬件设备，从手机、平板电脑、路由器和影音游戏控制台，到桌上型电脑，大型电脑和超级电脑。 Linux是一个领先的操作系统内核，世界上运算最快的10台超级电脑运行的都是基于Linux内核的操作系统。</p>
<p>Linux操作系统也是自由软件和开放源代码发展中最著名的例子。只要遵循GNU通用公共许可证,任何人和机构都可以自由地使用Linux的所有底层源代码，也可以自由地修改和再发布。<strong>严格来讲，Linux这个词本身只表示Linux内核，但在实际上人们已经习惯了用Linux来形容整个基于Linux内核，并且使用GNU工程各种工具和数据库的操作系统（也被称为GNU/Linux）。</strong>通常情况下，Linux被打包成供桌上型电脑和服务器使用的Linux发行版本。一些流行的主流Linux发行版本，包括Debian（及其衍生版本Ubuntu），Fedora和openSUSE等。Linux得名于电脑业余爱好者Linus Torvalds。</p>
<p>而不是如百度百科所讲的<del>Linux操作系统是UNIX操作系统的一种克隆系统。它诞生于1991年的 Linux桌面[1]10 月5日（这是第一次正式向外公布的时间）。以后借助于Internet网络，并通过全世界各地计算机爱好者的共同努力，已成为今天世界上使用最多的一种UNIX类操作系统，并且使用人数还在迅猛增长。</del></p>
<p>Linux只是个内核，而不是操作系统，所以在这我们再理解一下操作系统是由什么组成的。</p>
<h2 id="操作系统"><span class="header-section-number">5.2</span> 操作系统</h2>
<p>操作系统（英语：Operating System，简称OS）是管理计算机硬件与软件资源的计算机程序，同时也是计算机系统的内核与基石。操作系统需要处理如管理与配置内存、决定系统资源供需的优先次序、控制输入与输出设备、操作网络与管理文件系统等基本事务。操作系统也提供一个让用户与系统交互的操作界面。 操作系统的型态非常多样，不同机器安装的操作系统可从简单到复杂，可从手机的嵌入式系统到超级计算机的大型操作系统。许多操作系统制造者对它涵盖范畴的定义也不尽一致，例如有些操作系统集成了图形用户界面(GUI)，而有些仅使用命令行界面(CLI)，而将GUI视为一种非必要的应用程序。</p>
<p>操作系统位于底层硬件与用户之间，是两者沟通的桥梁。用户可以通过操作系统的用户界面，输入命令。操作系统则对命令进行解释，驱动硬件设备，实现用户要求。以现代标准而言，一个标准PC的操作系统应该提供以下的功能：</p>
<ul>
<li>进程管理（Processing management）</li>
<li>内存管理（Memory management）</li>
<li>文件系统（File system）</li>
<li>网络通信（Networking）</li>
<li>安全机制（Security）</li>
<li>用户界面（User interface）</li>
<li>驱动程序（Device drivers）</li>
</ul>
<p>而让我们来看一下两者之间的不同之处，这是一张linux的架构图我们可以发现内核只是位于底层。</p>
<h3 id="linux架构图"><span class="header-section-number">5.2.1</span> Linux架构图</h3>
<h4 id="用户模式"><span class="header-section-number">5.2.1.1</span> 用户模式</h4>
<p>应用程序（sh、<a href="http://zh.wikipedia.org/wiki/Vi" title="Vi">vi</a>、<a href="http://zh.wikipedia.org/wiki/OpenOffice.org" title="OpenOffice.org">OpenOffice.org</a>等）</p>
<p>复杂<a href="http://zh.wikipedia.org/wiki/%E5%BA%93" title="库">库</a>（<a href="http://zh.wikipedia.org/wiki/KDE" title="KDE">KDE</a>、glib等） 简单库（opendbm、sin等）</p>
<p>C库（open、fopen、socket、exec、calloc等）</p>
<h4 id="内核模式"><span class="header-section-number">5.2.1.2</span> 内核模式</h4>
<ul>
<li>系统中断、调用、错误等软硬件消息</li>
<li>内核（驱动程序、进程、网络、内存管理等）</li>
<li>硬件（处理器、内存、各种设备）</li>
</ul>
<p>我们可以发现，由linux内核+shell可以构成一个操作系统，而linux本身只是个内核，也就是图中的内核模式，负责控制系统的这些部分。也就是我们可以发现，Linux内核构成了一个操作系统除用户界面以外的部分，而shell就是这最后的用户界面。</p>
<p>而linux内核以外的部分就是由GNU计划构成的。</p>
<h3 id="shell"><span class="header-section-number">5.2.2</span> Shell</h3>
<p>Shell是系统的用户界面，提供了用户与内核进行交互操作的一种接口。它接收用户输入的命令并把它送入内核去执行。</p>
<p>实际上Shell是一个命令解释器，它解释由用户输入的命令并且把它们送到内核。不仅如此，Shell有自己的编程语言用于对命令的编辑，它允许用户编写由shell命令组成的程序。Shell编程语言具有普通编程语言的很多特点，比如它也有循环结构和分支控制结构等，用这种编程语言编写的Shell程序与其他应用程序具有同样的效果</p>
<p>bash 是一个为GNU计划编写的Unix shell。它的名字是一系列缩写：Bourne-Again SHell — 这是关于Bourne shell（sh）的一个双关语（Bourne again / born again）。Bourne shell是一个早期的重要shell，由史蒂夫·伯恩在1978年前后编写，并同Version 7 Unix一起发布。bash则在1987年由布莱恩·福克斯创造。在1990年，Chet Ramey成为了主要的维护者。</p>
<p>shell将会是我们在GNU/linux中经常用到的经常有到的工具之一，用来操作计算机用的。在迁移到linux之前我们可以试用cygwin来进行模拟：</p>
<p><em>Cygwin是许多<a href="http://zh.wikipedia.org/wiki/%E8%87%AA%E7%94%B1%E8%BD%AF%E4%BB%B6" title="自由软件">自由软件</a>的集合，最初由<a href="http://zh.wikipedia.org/wiki/Cygnus_Solutions" title="Cygnus Solutions">Cygnus Solutions</a>开发，用于各种版本的<a href="http://zh.wikipedia.org/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a>上，运行<a href="http://zh.wikipedia.org/wiki/Unix-like" title="Unix-like">UNIX类</a>系统。Cygwin</em></p>
<h3 id="gcc"><span class="header-section-number">5.2.3</span> GCC</h3>
<p>GCC（GNU Compiler Collection，GNU编译器套装），是一套由GNU开发的编程语言编译器。它是一套以GPL及LGPL许可证所发行的自由软件，也是GNU计划的关键部分，亦是自由的类Unix及苹果电脑Mac OS X 操作系统的标准编译器。GCC（特别是其中的C语言编译器）也常被认为是跨平台编译器的事实标准。</p>
<p>GCC原名为GNU C语言编译器（GNU C Compiler），因为它原本只能处理C语言。GCC很快地扩展，变得可处理C++。之后也变得可处理Fortran、Pascal、Objective-C、Java、Ada，以及Go与其他语言。</p>
<p>同shell一样，对于GNU/linux系统而言,GCC的作用也是无可取代的。当然如果只是一般用途的话，GCC对于一般用户可能没用，但是在些GNU/Linux系统上，我们可能就需要自己编译源码成二进制文件，而没有软件包，因而其重要性是不言而喻的。自然的如果我们自己动手编译GNU/Linux操作系统的话，我们会理解其的重要意义。有兴趣的同学可以试一下：Linux From Scratch (LFS)。</p>
<h3 id="启动引导程序"><span class="header-section-number">5.2.4</span> 启动引导程序</h3>
<p>最后，当我们构成以上的那些之后，我们就需要一个引导程序，以便使系统启动，引导进内核。</p>
<p>启动程序（bootloader）于电脑或其他计算机应用上，是指引导操作系统启动的程序。启动程序启动方式与程序视应用机型种类。例如在普通PC上，引导程序通常分为两部分：第一阶段引导程序位于主引导记录，用于引导位于某个分区上的第二阶段引导程序，如NTLDR、GNU GRUB等。</p>
<p>BIOS 开机完成后，bootloader就接手初始化硬件设备、创建存储器空间的映射，以便为操作系统内核准备好</p>
<p>正确的软硬件环境。</p>
<p>简单的bootloader的虚拟汇编码，如其后的八个指令:</p>
<ul>
<li>0: 将P暂存器的值设为8</li>
<li>1: 检查纸带({paper tape)读取器，是否已经可以进行读取</li>
<li>2: 如果还不能进行读取, 跳至1</li>
<li>3: 从纸带读取器，读取一byte至累加器</li>
<li>4: 如为带子结尾，跳至8</li>
<li>5: 将暂存器的值，存储至P暂存器中的数值所指定的地址</li>
<li>6: 增加P暂存器的值</li>
<li>7: 跳至1</li>
</ul>
<p>但是随着计算机操作系统越来越复杂，位于MBR的空间已经放不下引导操作系统的代码，于是就有了第二阶段的引导程序，而MBR中代码的功能也从直接引导操作系统变成了引导第二阶段的引导程序。</p>
<p>通常在一个GNU/Linux系统中选用GNUGRUB做为引导程序，例如Ubuntu就是用GRUB2。</p>
<p>GNU GRUB（简称“GRUB”）是一个来自GNU项目的启动引导程序。GRUB是多启动规范的实现，它允许用户可以在计算机内同时拥有多个操作系统，并在计算机启动时选择希望运行的操作系统。GRUB可用于选择操作系统分区上的不同内核，也可用于向这些内核传递启动参数。</p>
<p>GNU GRUB的前身为Grand Unified Bootloader。它主要用于类Unix系统；同大多Linux发行版一样，GNU系统也采用GNU GRUB作为它的启动器。Solaris从10 1/06版开始在x86系统上也采用GNU GRUB作为启动器。</p>
<p>以上也就构成了一个简单的操作系统。</p>
<h2 id="从编译开始"><span class="header-section-number">5.3</span> 从编译开始</h2>
<p>我们以一次编译开始我们的Linux学习之旅。</p>
<h3 id="开始之前"><span class="header-section-number">5.3.1</span> 开始之前</h3>
<ul>
<li>如果你没有用过GNU/Linux，我想你需要在虚拟机上安装一个。</li>
<li>一个主流的GNU/Linux发行版，如Ubuntu,CentOS,Debian,Mint,OpenSUSE,Fedora等等。</li>
<li>学会如何打开shell(ps:bash,zsh,sh等等)。</li>
</ul>
<p>或者你也可以在Windows上安装Cygwin。</p>
<h3 id="编译nginx"><span class="header-section-number">5.3.2</span> 编译Nginx</h3>
<p>1.下载这个软件的源码包</p>
<pre><code>wget http://nginx.org/download/nginx-1.7.4.tar.gz</code></pre>
<p>wget是一个用于下载的软件，当然你也可以用软件，只是用wget似乎会比图形界面快哦。</p>
<p>2.解压软件包</p>
<pre><code>tar -vf nginx-1.7.4.tar.gz</code></pre>
<p>-vf的意思是Extract，也就是解压，而tar则是这个解压软件的名字。看上去似乎比WinRAR来得复制得多，但是你可以计时一下，从下载到解压完，和你用鼠标比哪个比较快。</p>
<p>3.到nginx目录下</p>
<p>这里需要分两部进行</p>
<p>1).列出所有文件</p>
<pre><code>ls -al

drwxr-xr-x   15 fdhuang  staff   510B Sep  2 13:44 nginx-1.7.4
-rw-r--r--    1 fdhuang  staff   798K Aug  5 21:55 nginx-1.7.4.tar.gz</code></pre>
<p>2).到nginx-1.7.4目录</p>
<pre><code>cd nginx-1.7.4 </code></pre>
<p>4.配置nginx</p>
<p>一次简单的配置如下</p>
<pre><code>./configure</code></pre>
<p>当你熟练以后，你可能和我一样用下面的配置(<code>注意</code>:用下面的代码会出错。)</p>
<pre><code>./configure --user=www --group=www --add-module=../ngx_pagespeed-1.8.3.4-beta --add-module=../ngx_cache_purge --prefix=/usr/local/nginx --with-pcre --with-http_spdy_module --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-ipv6</code></pre>
<p>过程中可能会提示你其中出了多少错误，而这时你便可以很愉快地去用搜索引擎搜索他们。</p>
<p>5.make</p>
<p>这里就会用到GCC等等。</p>
<pre><code>make</code></pre>
<p>6.运行</p>
<p>如果运行顺利的话，应该可以直接</p>
<pre><code>./objs/nginx   </code></pre>
<h3 id="其他-1"><span class="header-section-number">5.3.3</span> 其他</h3>
<p>1.如果没有wget,make,gcc等命令的时候可以用类似于下面的方法安装，</p>
<pre><code>sudo apt-get install gcc,make,wget</code></pre>
<p>2.正常情况下一个开源项目都会有一个README，会告诉你应该如何去做。</p>
<h1 id="arduino"><span class="header-section-number">6</span> Arduino</h1>
<h2 id="极客的玩具"><span class="header-section-number">6.1</span> 极客的玩具</h2>
<p>Arduino，是一个开放源代码的单芯片微电脑，它使用了Atmel AVR单片机，采用了基于开放源代码的软硬件平台，构建于开放源代码 simple I/O 接口板，并且具有使用类似Java，C 语言的Processing/Wiring开发环境。</p>
<p>Arduino开发板封装了常用的库到开发环境中，可以让用户在开发产品时，将主要注意力放置于所需要实现的功能上，而不是开发的过程中。在为Arduino写串口程序时，我们只需要用Serial.begin(9600)以9600的速率初始化串口，而在往串口发送数据时，可以用Serial.write(‘1’)的方式向串口发送字串’1’。</p>
<h1 id="python"><span class="header-section-number">7</span> Python</h1>
<p>作为一门计算机语言来说，Python会有下面的特点。</p>
<ul>
<li>语言学习起来容易</li>
<li>解决生活中的实际问题</li>
<li>支持多学科</li>
</ul>
<p>我们可以和其他不是脚本语言的语言进行一个简单的对比，如C，你需要去编译去运行，有时候还需要解决跨平台问题，本来你是在你的Windows上运行得好好的，但是有一天你换了一个Mac电脑的时候，问题变得很棘手，你甚至不知道怎么去解决问题。我没有用过MFC，听说很方便，但是在其他平台下就没有一个好的解决方案。这里可能跑得有点远，但是不同的用户可能在不同的平台上，这也就是脚本语言的优势所在了。</p>
<h2 id="代码与散文"><span class="header-section-number">7.1</span> 代码与散文</h2>
<p>你可能听过，也可能了解过，不过在这里我们可能不会去讲述那些基础的语法的东西，我们想说的是代码格式的重要性，在html中你可以这样去写你的代码</p>
<pre><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;This is a Title
&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;content&quot;&gt;
&lt;p&gt;flakjfaklfjalfa&lt;/p&gt;&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;</code></pre>
<p>又或者是js的minify，它可能会使你的代码看起来像是这样的:</p>
<pre><code>function NolTracker(b,a){this.pvar=b;this.mergeFeatures(a)}</code></pre>
<p>可能的是如果是python的话，你可能会遇到下面的问题。。</p>
<pre><code>File &quot;steps.py&quot;, line 10
   try:
   ^
IndentationError: expected an indented block</code></pre>
<p>如果你对JSLint、Lint这类的工具有点印象的话，你也可以认为python集成了这类工具。整洁的代码至少应该看上去要有整洁的衣服，就好像是我们看到的一个人一样，而后我们才会有一个好的印象。更主要的一点是代码是写给人看的，而衣服更多的时候对于像我这样的人来说，他首先应该是要保暖的，其次对于一个懒的人来说。。。</p>
<blockquote>
程序应该是具有可读性的短文，它将在计算机上执行，从而解决某些问题
</blockquote>

<p>我们需要去读懂别人的代码，别人也需要去读懂我们的代码。计算机可以无条件地执行你那未经编排过的程序，但是人就不是如此了。</p>
<pre><code>var calc={add: function(a,b){return a+b;},sub: function(a,b){return a-b;},dif: function(a,b){if(a&gt;b){return a;}else{return b;}}}</code></pre>
<p>上面的代码相对于下面的代码可读性没有那么多，但是计算机可以无条件地执行上面的代码。上面的代码对于网络传输来说是好的，但是对于人来说并不是如此，我们需要一些工具来辅助我们去读懂上面的代码。如果代码上写得没有一点可读性，诸如函数命名没有多少实际意义，如果我们把前面的函数就成这样：</p>
<pre><code>var c={
    a: function(a,b){
        return a+b;
    },
    s: function(a,b){
        return a-b;
    },
    d: function(a,b){
        if(a&gt;b){
            return a;
        }else{
            return b;
        }
    }
}</code></pre>
<p>那么只有在我们理解了这个函数是干什么之后才能理解函数是干什么，而不是光看函数名就可以了。</p>
<p>在Javascript解决一个函数的办法有很多，在其他一些语言如Ruby或者Perl中也是如此，解决问题的办法有很多，对于写代码的人来说是一个享受的过程，但是对于维护的人来说并非如此。而这个和Python的思想不是很一致的是，Python设计的理念是</p>
<blockquote>
对于特定的问题，只要有一种最好的方法来解决就够了
</blockquote>

<p>可读性的代码在今天显得比以前重要的多，以前写程序的时候我们需要去考虑使用汇编或者其他工具来提高程序的效率。</p>
<pre><code>            .global _start

            .text
    _start:
            # write(1, message, 13)
            mov     $1, %rax                # system call 1 is write
            mov     $1, %rdi                # file handle 1 is stdout
            mov     $message, %rsi          # address of string to output
            mov     $13, %rdx               # number of bytes
            syscall                         # invoke operating system to do the write

            # exit(0)
            mov     $60, %rax               # system call 60 is exit
            xor     %rdi, %rdi              # we want return code 0
            syscall                         # invoke operating system to exit
    message:
            .ascii  &quot;Hello, world\n&quot;</code></pre>
<p>所以上面的代码的可读性在今天新生一代的程序员来说可能没有那么容易理解。芯片运行的速度越来越快，在程序上我们也需要一个越来越快的解决方案，而所谓的越来越快的解决方案指的不是运行速度上，而是开发速度上。如果你没有办法在同样时间内开发出更好的程序，那么你就可能输给你的竞争对手。</p>
<h2 id="开始之前-1"><span class="header-section-number">7.2</span> 开始之前</h2>
<p>我们终于又从一种语言跳到了另外一种语言，我们可能习惯了一种模式，而不敢于去尝试新的东西，这些或许是我们的一些习惯又或者是因为害怕等等。</p>
<p>作为另外一个跨平台能力很强的语言，这里说的是与Javascript、HTML比较，或许你会觉得C算是最好的，但是我们这里讨论更多的是脚本语言，也就是直接可以运行的。在现在主流的大多数移动平台上，python也有良好的支持，如Android,IOS，只是这些算是类Unix系统内核，python还支持之前Nokia的Symbian。</p>
<p>开始之前我们需要确认我们的平台上已经有了python环境，也就是可以运行下面的Hello,World，你可以在网上很多地方看到，最简单的地方还是到官网，又或者是所用移动平台的store下载。</p>
<h2 id="python的helloworld"><span class="header-section-number">7.3</span> Python的Hello,World</h2>
<p>Python的Hello,World有两种形式，作为一种脚本语言来说，Javascript也是一种脚本语言，只是两者之间有太多的不同之处，每个人都会有不同的选择对于一种语言用来作为其的习惯。于是这就是我们的</p>
<pre><code>print &quot;Hello,World&quot;</code></pre>
当我们把我们的脚本在shell环境下运行时
<pre><code class="bash">
>>>  print "Hello,world"
  File "<stdin>", line 1
    print "Hello,world"
    ^
IndentationError: unexpected indent
>>> print "Hello,world"
Hello,world
>>>
</code></pre>

<p>如果你没有预料到缩进带来的问题的时候，这就是一个问题了。</p>
<p>和我们在Javascript或者是CSS里面一样，我们也可以用一个文件的方式来写入我们的代码，文件后缀名是py，所以创建一个helloworld.py，输入上面的代码，然后执行</p>
<pre><code>python helloworld.py</code></pre>
<p>一个理想的结果，或许你试过C语言的helloworld，如果了解过GCC的话应该是可以这样的:</p>
<pre><code>./a.out</code></pre>
<p>也就是执行编译完后的程序，需要注意的是helloworld.py没有编译，不过也会输出</p>
<pre><code>Hello,world</code></pre>
<h2 id="我们想要的helloworld"><span class="header-section-number">7.4</span> 我们想要的Hello,World</h2>
<p>我们想展示的是如何结合前面学习的内容做一个更有意思的Hello,World。</p>
<pre><code>import cherrypy
class HelloWorld(object):
    def index(self):
        return &quot;Hello World!&quot;
    index.exposed = True

cherrypy.quickstart(HelloWorld())</code></pre>
<h2 id="算法"><span class="header-section-number">7.5</span> 算法</h2>
<p>我们需要去了解算法(algorithm)，引经据典的话就是这样子:</p>
<blockquote>
a process or set of rules to be followed in calculations or other problem-solving operations, especially by a computer
</blockquote>

<p>也就是计算或其他解决问题的操作需要遵循的一个过程或者一套规则，书上还提到的说法是——解决问题的诀窍，让我想起了hack一词。我们总会去想某些东西是否有一个更快的计算方法，有时候在处理某些问题上也显示了一个好的算法的重要性。</p>
<h2 id="实用主义哲学"><span class="header-section-number">7.6</span> 实用主义哲学</h2>
<h1 id="raspberry-pi"><span class="header-section-number">8</span> Raspberry Pi</h1>
<h2 id="geek的盛宴"><span class="header-section-number">8.1</span> Geek的盛宴</h2>
<p>Raspberry Pi是一款针对电脑业余爱好者、教师、小学生以及小型企业等用户的迷你电脑，预装Linux系统，体积仅信用卡大小，搭载ARM架构处理器，运算性能和智能手机相仿。在接口方面，Raspberry Pi提供了可供键鼠使用的USB接口，此外还有千兆以太网接口、SD卡扩展接口以及1个HDMI高清视频输出接口，可与显示器或者TV相连。</p>
<p>Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。</p>
<p>Raspberry Pi相比于一般的ARM开发板来说，由于其本身搭载着Linux操作系统，可以用诸如Python、Ruby或Bash来执行脚本，而不是通过编译程序来运行，具有更高的开发效率。</p>
<h1 id="http与restful"><span class="header-section-number">9</span> HTTP与RESTful</h1>
<h2 id="你所没有深入的http"><span class="header-section-number">9.1</span> 你所没有深入的HTTP</h2>
<h2 id="rest"><span class="header-section-number">9.2</span> REST</h2>
<p>REST[^rest] 从资源的角度来观察整个网络，分布在各处的资源由URI确定，而客户端的 应用通过URI来获取资源的表征。获得这些表征致使这些应用程序转变了其状态。 随着不断获取资源的表征，客户端应用不断地在转变着其状态，所谓表征状态转 移。</p>
<h1 id="构建基于coap协议的物联网系统"><span class="header-section-number">10</span> 构建基于CoAP协议的物联网系统</h1>
<h2 id="coap简介"><span class="header-section-number">10.1</span> CoAP简介</h2>
<p>引自维基百科上的介绍，用的是谷歌翻译。。。</p>
<blockquote>
<p>受约束的应用协议（COAP）是一种软件协议旨在以非常简单的电子设备，使他们能够在互联网上进行交互式通信中使用。它特别针对小型低功率传感器，开关，阀门和需要被控制或监督远程，通过标准的Internet网络类似的组件。 COAP是一个应用层协议，该协议是用于在资源受限的网络连接设备，例如无线传感器网络节点使用。 COAP被设计为容易地转换为HTTP与Web简化集成，同时也能满足特殊的要求，例如多播支持，非常低的开销，和简单性。多播，低开销，以及简单性是因特网极其重要物联网（IOT）和机器对机器（M2M）设备，这往往是积重难返，有太多的内存和电源，比传统的互联网设备有。因此，效率是非常重要的。 COAP可以在支持UDP或UDP的模拟大多数设备上运行。</p>
</blockquote>
<p>简单地来说，CoAP简化了HTTP协议，只提供了REST的四个方法，PUT,GET,POST和DELETE，和其与HTTP的不同之处在于——CoAP简化了HTTP协议。</p>
<p>CoAP协议中不使用HTTP的原因在于: 对于微小的资源受限，在资源受限的通信的IP的网络，HTTP不是一种可行的选择。它占用了太多的资源和太多的带宽。而对于物联网这种嵌入式设备来说，关于资源与带宽，是我们需要优先考虑的内容。</p>
<ul>
<li>CoAP采用了二进制报头，而不是文本报头(text header)</li>
<li>CoAP降低了头的可用选项的数量。</li>
<li>CoAP减少了一些HTTP的方法</li>
<li>CoAP可以支持检测装置</li>
</ul>
<h2 id="coap-命令行工具"><span class="header-section-number">10.2</span> CoAP 命令行工具</h2>
<p>开始之前我们需要安装一个CoAP的命令行工具，以方便我们测试我们的代码是否是正确的。</p>
<h3 id="node-coap-cli"><span class="header-section-number">10.2.1</span> Node CoAP CLI</h3>
<pre><code> npm install coap-cli -g </code></pre>
<p>以便于用这个来测试我们的代码</p>
<h3 id="coap命令行"><span class="header-section-number">10.2.2</span> CoAP命令行</h3>
<p>coap-cli 一共有四个方法</p>
<pre><code>Commands:

get                    performs a GET request
put                    performs a PUT request
post                   performs a POST request
delete                 performs a DELETE request</code></pre>
<p>我们用<a href="coap://vs0.inf.ethz.ch/">coap://vs0.inf.ethz.ch/</a>来作一个简单的测试</p>
<pre><code>coap get coap://vs0.inf.ethz.ch/
(2.05)  ************************************************************
I-D</code></pre>
<p>也可以用来测试我们现在的最小的物联网系统</p>
<pre><code>coap get coap://coap.phodal.com/id/1
(4.06)  [{&quot;id&quot;:1,&quot;value&quot;:&quot;is id 1&quot;,&quot;sensors1&quot;:19,&quot;sensors2&quot;:20}]</code></pre>
<p>数据是直接从数据库中读取出来的，然而状态码是错的，忘了刚代码更新。</p>
<h3 id="libcoap"><span class="header-section-number">10.2.3</span> libcoap</h3>
<p>如果我们已经装有LibCoAP那么，我们可以直接用自带的两个命令</p>
<pre><code>coap-client 
coap-server</code></pre>
<p>1.我们简单地起一个CoAP服务</p>
<pre><code> coap-server</code></pre>
<p>2.客户端获取数据</p>
<pre><code>coap-client -m get coap://localhost</code></pre>
<p>返回结果</p>
<pre><code>v:1 t:0 tkl:0 c:1 id:37109
This is a test server made with libcoap (see http://libcoap.sf.net) 
Copyright (C) 2010--2013 Olaf Bergmann &lt;bergmann@tzi.org&gt;</code></pre>
<h2 id="helloworld"><span class="header-section-number">10.3</span> Hello,World</h2>
<p>接着我们便开始试试做一个简单的CoAP协议的应用，开始之前我们需要能访问<a href="coap://localhost/">coap://localhost/</a>，于是我们便需要安装一个Firefox的插件Copper。</p>
<ol style="list-style-type: decimal">
<li><p>下载地址: <a href="https://addons.mozilla.org/en-US/firefox/addon/copper-270430/">https://addons.mozilla.org/en-US/firefox/addon/copper-270430/</a></p></li>
<li><p>作为测试我们可以访问 <a href="coap://vs0.inf.ethz.ch:5683/">coap://vs0.inf.ethz.ch:5683/</a></p></li>
</ol>
<h3 id="node-coap"><span class="header-section-number">10.3.1</span> Node-CoAP</h3>
<p>这是我们这里用到的一个Node的扩展Node-CoAP</p>
<blockquote>
<p>node-coap is a client and server library for CoAP modelled after the http module.</p>
</blockquote>
<p>Node-CoAP是一个客户端和服务端的库用于CoAP的模块建模。创建一个package.json文件，添加这个库</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">{
    <span class="st">&quot;dependencies&quot;</span>:{
        <span class="st">&quot;coap&quot;</span>: <span class="st">&quot;0.7.2&quot;</span>
    }
}</code></pre>
<p>接着执行</p>
<pre><code>npm install</code></pre>
<p>就可以安装好这个库</p>
<h3 id="node-coap示例"><span class="header-section-number">10.3.2</span> Node CoAP示例</h3>
<p>接着，创建这样一个app.js</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap        = <span class="fu">require</span>(<span class="st">&#39;coap&#39;</span>)
    , server  = <span class="ot">coap</span>.<span class="fu">createServer</span>()

<span class="ot">server</span>.<span class="fu">on</span>(<span class="st">&#39;request&#39;</span>, <span class="kw">function</span>(req, res) {
  <span class="ot">res</span>.<span class="fu">end</span>(<span class="st">&#39;Hello &#39;</span> + <span class="ot">req</span>.<span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">1</span>] + <span class="st">&#39;</span><span class="ch">\n</span><span class="st">&#39;</span>)
})

<span class="ot">server</span>.<span class="fu">listen</span>(<span class="kw">function</span>() {
  <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;server started&#39;</span>)
})  </code></pre>
<p>执行</p>
<pre><code>node app.js</code></pre>
<p>便可以在浏览器上访问了，因为现在什么也没有，所以什么也不会返回。</p>
<p>接着下来再创建一个client端的js，并运行之</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap  = <span class="fu">require</span>(<span class="st">&#39;coap&#39;</span>) 
    , req   = <span class="ot">coap</span>.<span class="fu">request</span>(<span class="st">&#39;coap://localhost/World&#39;</span>)

<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">&#39;response&#39;</span>, <span class="kw">function</span>(res) {
  <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="ot">process</span>.<span class="fu">stdout</span>)
})

<span class="ot">req</span>.<span class="fu">end</span>()</code></pre>
<p>就可以在console上输出</p>
<pre><code>Hello World </code></pre>
<p>也就达到了我们的目的，用CoAP协议创建一个服务，接着我们应该用它创建更多的东西，如产生JSON数据，以及RESTful。和HTTP版的最小物联网系统一样，CoAP版的最小物联网系统也是要返回JSON的。</p>
<h2 id="数据库查询"><span class="header-section-number">10.4</span> 数据库查询</h2>
<h3 id="node-module"><span class="header-section-number">10.4.1</span> Node Module</h3>
<p>这说里Module的意义是因为我们需要在别的地方引用到db_helper这个库，也就是下一小节要的讲的内容。</p>
<p>这样我们就可以在server.js类似于这样去引用这个js库。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> DBHelper = <span class="fu">require</span>(<span class="st">&#39;./db_helper.js&#39;</span>);
<span class="ot">DBHelper</span>.<span class="fu">initDB</span>();</code></pre>
<p>而这样调用的前提是我们需要去声明这样的module，为了方便地导出函数功能调用。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">DBHelper</span>(){
}
<span class="ot">DBHelper</span>.<span class="fu">initDB</span> = <span class="kw">function</span>(){};
<span class="ot">module</span>.<span class="fu">exports</span> = DBHelper;</code></pre>
<p>虽然这里的功能很简单，简单也能做我们想做的事情。</p>
<h3 id="node-sqlite3"><span class="header-section-number">10.4.2</span> Node-Sqlite3</h3>
<p>还是继续用到了SQLite3，只是这里用到的只是基本的查询和创建。</p>
<h4 id="一个简单的initdb函数"><span class="header-section-number">10.4.2.1</span> 一个简单的initDB函数</h4>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(config[<span class="st">&quot;db_name&quot;</span>]);
<span class="kw">var</span> create_table = <span class="st">&#39;create table if not exists basic (&#39;</span> + config[<span class="st">&quot;db_table&quot;</span>] + <span class="st">&#39;);&#39;</span>;

<span class="ot">db</span>.<span class="fu">serialize</span>(<span class="kw">function</span>() {
    <span class="ot">db</span>.<span class="fu">run</span>(create_table);
    <span class="ot">_</span>.<span class="fu">each</span>(config[<span class="st">&quot;init_table&quot;</span>], <span class="kw">function</span>(insert_data) {
        <span class="ot">db</span>.<span class="fu">run</span>(insert_data);
    });
});
<span class="ot">db</span>.<span class="fu">close</span>();</code></pre>
<p>首先从配置中读取db_name，接着创建table，然后调用underscore的each方法，创建几个数据。配置如下所示</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">config = {
    <span class="st">&quot;db_name&quot;</span>: <span class="st">&quot;iot.db&quot;</span>,
    <span class="st">&quot;db_table&quot;</span>: <span class="st">&quot;id integer primary key, value text, sensors1 float, sensors2 float&quot;</span>,
    <span class="st">&quot;init_table&quot;</span>:[
        <span class="st">&quot;insert or replace into basic (id,value,sensors1,sensors2) VALUES (1, &#39;is id 1&#39;, 19, 20);&quot;</span>,
        <span class="st">&quot;insert or replace into basic (id,value,sensors1,sensors2) VALUES (2, &#39;is id 2&#39;, 20, 21);&quot;</span>
    ],
    <span class="st">&quot;query_table&quot;</span>:<span class="st">&quot;select * from basic;&quot;</span>
};</code></pre>
<p>而之前所提到的url查询所做的事情便是</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">DBHelper</span>.<span class="fu">urlQueryData</span> = <span class="kw">function</span> (url, callback) {
    <span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(<span class="st">&quot;iot.db&quot;</span>);

    <span class="kw">var</span> result = [];
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&quot;SELECT * FROM basic where &quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">1</span>] + <span class="st">&quot;=&quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">2</span>]);
    <span class="ot">db</span>.<span class="fu">all</span>(<span class="st">&quot;SELECT * FROM basic where &quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">1</span>] + <span class="st">&quot;=&quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">2</span>], <span class="kw">function</span>(err, rows) {
        <span class="ot">db</span>.<span class="fu">close</span>();
        <span class="fu">callback</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>(rows));
    });
};</code></pre>
<p>将URL传进来，便解析这个参数，接着再放到数据库中查询，再回调回结果。这样我们就可以构成之前所说的查询功能，而我们所谓的post功能似乎也可以用同样的方法加进去。</p>
<h3 id="查询数据"><span class="header-section-number">10.4.3</span> 查询数据</h3>
<p>简单地记录一下在IoT-CoAP中一次获取数据地过程。</p>
<h3 id="get"><span class="header-section-number">10.4.4</span> GET</h3>
<p>先看看在示例中的Get.js的代码，这关乎在后面server端的代码。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap       = <span class="fu">require</span>(<span class="st">&#39;coap&#39;</span>)
     ,requestURI = <span class="st">&#39;coap://localhost/&#39;</span>
     ,url        = <span class="fu">require</span>(<span class="st">&#39;url&#39;</span>).<span class="fu">parse</span>(requestURI + <span class="st">&#39;id/1/&#39;</span>)
     ,req        = <span class="ot">coap</span>.<span class="fu">request</span>(url)
     ,bl         = <span class="fu">require</span>(<span class="st">&#39;bl&#39;</span>);

<span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">&quot;Accept&quot;</span>, <span class="st">&quot;application/json&quot;</span>);
<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">&#39;response&#39;</span>, <span class="kw">function</span>(res) {
    <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="fu">bl</span>(<span class="kw">function</span>(err, data) {
        <span class="kw">var</span> json = <span class="ot">JSON</span>.<span class="fu">parse</span>(data);
        <span class="ot">console</span>.<span class="fu">log</span>(json);
    }));

});
<span class="ot">req</span>.<span class="fu">end</span>();</code></pre>
<p>const定义数据的方法，和我们在其他语言中有点像。只是这的const主要是为了程序的健壮型,减少程序出错，当然这不是javascript的用法。</p>
<p>我们构建了一个请求的URL</p>
<pre><code> coap://localhost/id/1/</code></pre>
<p>我们对我们的请求添加了一个Header，内容是Accept，值是’application/json’也就是JSON格式。接着，便是等待请求回来，再处理返回的内容。</p>
<h3 id="iot-coap"><span class="header-section-number">10.4.5</span> IoT CoAP</h3>
<h3 id="判断请求的方法"><span class="header-section-number">10.4.6</span> 判断请求的方法</h3>
<p>在这里先把一些无关的代码删除掉，并保证其能工作，so，下面就是简要的逻辑代码。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> coap            = <span class="fu">require</span>(<span class="st">&#39;coap&#39;</span>);
<span class="kw">var</span> server          = <span class="ot">coap</span>.<span class="fu">createServer</span>({});
<span class="kw">var</span> request_handler = <span class="fu">require</span>(<span class="st">&#39;./request_handler.js&#39;</span>);

<span class="ot">server</span>.<span class="fu">on</span>(<span class="st">&#39;request&#39;</span>, <span class="kw">function</span>(req, res) {
    <span class="kw">switch</span>(<span class="ot">req</span>.<span class="fu">method</span>){
        <span class="kw">case</span> <span class="st">&quot;GET&quot;</span>: <span class="ot">request_handler</span>.<span class="fu">getHandler</span>(req, res);
            <span class="kw">break</span>;
    }
});

<span class="ot">server</span>.<span class="fu">listen</span>(<span class="kw">function</span>() {
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;server started&#39;</span>);
});</code></pre>
<p>创建一个CoAP服务，判断req.method，也就是请求的方法，如果是GET的话，就调用request_handler.getHandler(req, res)。而在getHandler里，判断了下请求的Accept</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">request_helper</span>.<span class="fu">getHandler</span> = <span class="kw">function</span>(req, res) {
    <span class="kw">switch</span> (<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">&#39;Accept&#39;</span>]) {
        <span class="kw">case</span> <span class="st">&quot;application/json&quot;</span>:
            <span class="ot">qh</span>.<span class="fu">returnJSON</span>(req, res);
            <span class="kw">break</span>;
        <span class="kw">case</span> <span class="st">&quot;application/xml&quot;</span>:
            <span class="ot">qh</span>.<span class="fu">returnXML</span>(req, res);
            <span class="kw">break</span>;
    }
};</code></pre>
<p>如果是json刚调用returnJSON,</p>
<h3 id="database与回调"><span class="header-section-number">10.4.7</span> Database与回调</h3>
<p>而这里为了处理回调函数刚分为了两部分</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">query_helper</span>.<span class="fu">returnJSON</span> = <span class="kw">function</span>(req, res) {
    <span class="ot">DBHelper</span>.<span class="fu">urlQueryData</span>(<span class="ot">req</span>.<span class="fu">url</span>, <span class="kw">function</span> (result) {
        <span class="ot">QueryData</span>.<span class="fu">returnJSON</span>(result, res);
    });
};</code></pre>
<p>而这里只是调用了</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">DBHelper</span>.<span class="fu">urlQueryData</span> = <span class="kw">function</span> (url, callback) {
    <span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(config[<span class="st">&quot;db_name&quot;</span>]);

    <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&quot;SELECT * FROM basic where &quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">1</span>] + <span class="st">&quot;=&quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">2</span>]);
    <span class="ot">db</span>.<span class="fu">all</span>(<span class="st">&quot;SELECT * FROM basic where &quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">1</span>] + <span class="st">&quot;=&quot;</span> + <span class="ot">url</span>.<span class="fu">split</span>(<span class="st">&#39;/&#39;</span>)[<span class="dv">2</span>], <span class="kw">function</span>(err, rows) {
        <span class="ot">db</span>.<span class="fu">close</span>();
        <span class="fu">callback</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>(rows));
    });
};</code></pre>
<p>这里调用了node sqlite3去查询对应id的数据，用回调处理了数据无法到外部的问题，而上面的returnJSON则只是返回最后的结果，code以及其他的内容。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">QueryData</span>.<span class="fu">returnJSON</span> = <span class="kw">function</span>(result, res) {
    <span class="kw">if</span> (<span class="ot">result</span>.<span class="fu">length</span> == <span class="dv">2</span>) {
        <span class="ot">res</span>.<span class="fu">code</span> = <span class="st">&#39;4.04&#39;</span>;
        <span class="ot">res</span>.<span class="fu">end</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>({
            <span class="dt">error</span>: <span class="st">&quot;Not Found&quot;</span>
        }));
    } <span class="kw">else</span> {
        <span class="ot">res</span>.<span class="fu">code</span> = <span class="st">&#39;2.05&#39;</span>;
        <span class="ot">res</span>.<span class="fu">end</span>(result);
    }
};</code></pre>
<p>当resulst的结果为空时，返回一个404，因为没有数据。这样我们就构成了整个的链，再一步步返回结果。</p>
<p>在<a href="https://github.com/gmszone/iot-coap">IoT-CoAP</a>中我们使用到了一个Block2的东西，于是便整理相关的一些资料，作一个简单的介绍，以及在代码中的使用。</p>
<h2 id="coap-block"><span class="header-section-number">10.5</span> CoAP Block</h2>
<p>CoAP是一个RESTful传输协议用于受限设备的节点和网络。基本的CoAP消息是一个不错的选择对于小型载荷如</p>
<ul>
<li>温度传感器</li>
<li>灯光开关</li>
<li>楼宇自动化设备</li>
</ul>
<p>然而，有时我们的应用需要传输更大的有效载荷，如——更新固件。与HTTP，TCP做繁重工作将大型有效载荷分成多个数据包，并确保他们所有到达并以正确的顺序被处理。</p>
<p>CoAP是同UDP与DLTS一样是基于数据报传输的，这限制了资源表示(resource representation)的最大大小，使得传输不需要太多的分割。虽然UDP支持通过IP分片传输更大的有效载荷，且仅限于64KiB，更重要的是，并没有真正很好地约束应用和网络。</p>
<p>而不是依赖于IP分片，这种规范基本COAP了对“块”选项，用于传输信息从多个资源区块的请求 - 响应对。在许多重要的情况下，阻止使服务器能够真正无状态：服务器可以处理每块分开传输，而无需建立连接以前的数据块传输的其他服务器端内存。</p>
<p>综上所述，块(Block)选项提供了传送一个最小的在分块的方式更大的陈述。</p>
<h3 id="coap-post"><span class="header-section-number">10.5.1</span> CoAP POST</h3>
<p>看看在IoT CoAP中的post示例。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">const</span> coap     = <span class="fu">require</span>(<span class="st">&#39;coap&#39;</span>)
      ,request  = <span class="ot">coap</span>.<span class="fu">request</span>
      ,bl       = <span class="fu">require</span>(<span class="st">&#39;bl&#39;</span>)
      ,req = <span class="fu">request</span>({<span class="dt">hostname</span>: <span class="st">&#39;localhost&#39;</span>,<span class="dt">port</span>:<span class="dv">5683</span>,<span class="dt">pathname</span>: <span class="st">&#39;&#39;</span>,<span class="dt">method</span>: <span class="st">&#39;POST&#39;</span>});

<span class="ot">req</span>.<span class="fu">setOption</span>(<span class="st">&#39;Block2&#39;</span>,  [<span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">&#39;1&#39;</span>),<span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">&quot;&#39;must&#39;&quot;</span>), <span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">&#39;23&#39;</span>), <span class="kw">new</span> <span class="fu">Buffer</span>(<span class="st">&#39;12&#39;</span>)]);
<span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">&quot;Accept&quot;</span>, <span class="st">&quot;application/json&quot;</span>);
<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">&#39;response&#39;</span>, <span class="kw">function</span>(res) {
    <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="fu">bl</span>(<span class="kw">function</span>(err, data) {
        <span class="ot">console</span>.<span class="fu">log</span>(data);
        <span class="ot">process</span>.<span class="fu">exit</span>(<span class="dv">0</span>);
    }));

});

<span class="ot">req</span>.<span class="fu">end</span>();</code></pre>
<p>Block2中一共有四个数据，相应的数据结果应该是</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">{ <span class="dt">name</span>: <span class="st">&#39;Block2&#39;</span>, <span class="dt">value</span>: &lt;Buffer <span class="dv">31</span>&gt; }
{ <span class="dt">name</span>: <span class="st">&#39;Block2&#39;</span>, <span class="dt">value</span>: &lt;Buffer <span class="dv">27</span> 6d <span class="dv">75</span> <span class="dv">73</span> <span class="dv">74</span> <span class="dv">27</span>&gt; }
{ <span class="dt">name</span>: <span class="st">&#39;Block2&#39;</span>, <span class="dt">value</span>: &lt;Buffer <span class="dv">32</span> <span class="dv">33</span>&gt; }
{ <span class="dt">name</span>: <span class="st">&#39;Block2&#39;</span>, <span class="dt">value</span>: &lt;Buffer <span class="dv">31</span> <span class="dv">32</span>&gt; }</code></pre>
<p>这是没有解析的Block2，简单地可以用</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">_</span>.<span class="fu">values</span>(e).<span class="fu">toString</span>()</code></pre>
<p>将结果转换为</p>
<pre><code>Block2,1
Block2,&#39;must&#39;
Block2,23
Block2,12</code></pre>
<p>接着按“,”分开，</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">_</span>.<span class="fu">values</span>(e).<span class="fu">toString</span>().<span class="fu">split</span>(<span class="st">&#39;,&#39;</span>)[<span class="dv">1</span>]</code></pre>
<p>就有</p>
<pre><code>[ &#39;1&#39;, &#39;\&#39;must\&#39;&#39;, &#39;23&#39;, &#39;12&#39; ]</code></pre>
<p>便可以很愉快地将其post到数据库中了，</p>
<h3 id="json请求"><span class="header-section-number">10.5.2</span> JSON请求</h3>
<p>在做IoT-CoAP的过程中只支持JSON，查阅CoAP的草稿时发现支持了诸多的Content Types。</p>
<h3 id="coap-content-types"><span class="header-section-number">10.5.3</span> CoAP Content Types</h3>
<p>以下文字来自谷歌翻译:</p>
<blockquote>
<p>互联网媒体类型是通过HTTP字符串标识，如“application/xml”。该字符串是由一个顶层的类型“applicaion”和子类型的“XML”。为了尽量减少使用这些类型的媒体类型来表示的开销消息有效载荷，COAP定义一个标识符编码方案互联网媒体类型的子集。预计这桌将可扩展标识符的值的IANA维护。内容类型选项被格式化为一个8位无符号整数。初始映射到一个合适的互联网媒体类型标识符表所示。复合型高层次类型（multipart和不支持消息）。标识符值是从201-255保留的特定于供应商的，应用程序特定的或实验使用和不由IANA。</p>
</blockquote>
<p>下面是HTTP的标识符及类型</p>
<table>
<thead>
<tr class="header">
<th align="left">Internet media type</th>
<th align="left">Identifier</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">text/plain (UTF-8)</td>
<td align="left">0</td>
</tr>
<tr class="even">
<td align="left">text/xml (UTF-8)</td>
<td align="left">1</td>
</tr>
<tr class="odd">
<td align="left">text/csv (UTF-8)</td>
<td align="left">2</td>
</tr>
<tr class="even">
<td align="left">text/html (UTF-8)</td>
<td align="left">3</td>
</tr>
<tr class="odd">
<td align="left">image/gif</td>
<td align="left">21</td>
</tr>
<tr class="even">
<td align="left">image/jpeg</td>
<td align="left">22</td>
</tr>
<tr class="odd">
<td align="left">image/png</td>
<td align="left">23</td>
</tr>
<tr class="even">
<td align="left">image/tiff</td>
<td align="left">24</td>
</tr>
<tr class="odd">
<td align="left">audio/raw</td>
<td align="left">25</td>
</tr>
<tr class="even">
<td align="left">video/raw</td>
<td align="left">26</td>
</tr>
<tr class="odd">
<td align="left">application/link-format [I-D.ietf-core-link-format]</td>
<td align="left">40</td>
</tr>
<tr class="even">
<td align="left">application/xml</td>
<td align="left">41</td>
</tr>
<tr class="odd">
<td align="left">application/octet-stream</td>
<td align="left">42</td>
</tr>
<tr class="even">
<td align="left">application/rdf+xml</td>
<td align="left">43</td>
</tr>
<tr class="odd">
<td align="left">application/soap+xml</td>
<td align="left">44</td>
</tr>
<tr class="even">
<td align="left">application/atom+xml</td>
<td align="left">45</td>
</tr>
<tr class="odd">
<td align="left">application/xmpp+xml</td>
<td align="left">46</td>
</tr>
<tr class="even">
<td align="left">application/exi</td>
<td align="left">47</td>
</tr>
<tr class="odd">
<td align="left">application/x-bxml</td>
<td align="left">48</td>
</tr>
<tr class="even">
<td align="left">application/fastinfoset</td>
<td align="left">49</td>
</tr>
<tr class="odd">
<td align="left">application/soap+fastinfoset</td>
<td align="left">50</td>
</tr>
<tr class="even">
<td align="left">application/json</td>
<td align="left">51</td>
</tr>
</tbody>
</table>
<p>而在CoAP中只有简单地几个</p>
<table>
<thead>
<tr class="header">
<th align="left">Media type</th>
<th align="left">Encoding</th>
<th align="left">Id.</th>
<th align="left">Reference</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">text/plain;</td>
<td align="left">-</td>
<td align="left">0</td>
<td align="left">[RFC2046][RFC3676][RFC5147]</td>
</tr>
<tr class="even">
<td align="left">charset=utf-8</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left">application/</td>
<td align="left">-</td>
<td align="left">40</td>
<td align="left">[RFC6690]</td>
</tr>
<tr class="even">
<td align="left">link-format</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="left">application/xml</td>
<td align="left">-</td>
<td align="left">41</td>
<td align="left">[RFC3023]</td>
</tr>
<tr class="even">
<td align="left">application/</td>
<td align="left">-</td>
<td align="left">42</td>
<td align="left">[RFC2045][RFC2046]</td>
</tr>
<tr class="odd">
<td align="left">octet-stream</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="left">application/exi</td>
<td align="left">-</td>
<td align="left">47</td>
<td align="left">[EXIMIME]</td>
</tr>
<tr class="odd">
<td align="left">application/json</td>
<td align="left">-</td>
<td align="left">50</td>
<td align="left">[RFC4627]</td>
</tr>
</tbody>
</table>
<p>简单地说就是：</p>
<p><code>诸如application/json的Content Types在CoAP中应该是50</code>。如上表所示的结果是其对应的结果，这样的话可以减少传递的信息量。</p>
<h2 id="coap-json"><span class="header-section-number">10.6</span> CoAP JSON</h2>
<p>于是在一开始的时候首先支持的便是“application/json”这样的类型。</p>
<p>首先判断请求的header</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">request_helper</span>.<span class="fu">getHandler</span> = <span class="kw">function</span>(req, res) {
    <span class="kw">switch</span> (<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">&#39;Accept&#39;</span>]) {
        <span class="kw">case</span> <span class="st">&quot;application/json&quot;</span>:
            <span class="ot">qh</span>.<span class="fu">returnJSON</span>(req, res);
            <span class="kw">break</span>;
        <span class="kw">case</span> <span class="st">&quot;application/xml&quot;</span>:
            <span class="ot">qh</span>.<span class="fu">returnXML</span>(req, res);
            <span class="kw">break</span>;
    }
};</code></pre>
<p>再转至相应的函数处理，而判断的依据则是Accept是不是“application/json”。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">registerFormat</span>(<span class="st">&#39;text/plain&#39;</span>, <span class="dv">0</span>)
<span class="fu">registerFormat</span>(<span class="st">&#39;application/link-format&#39;</span>, <span class="dv">40</span>)
<span class="fu">registerFormat</span>(<span class="st">&#39;application/xml&#39;</span>, <span class="dv">41</span>)
<span class="fu">registerFormat</span>(<span class="st">&#39;application/octet-stream&#39;</span>, <span class="dv">42</span>)
<span class="fu">registerFormat</span>(<span class="st">&#39;application/exi&#39;</span>, <span class="dv">47</span>)
<span class="fu">registerFormat</span>(<span class="st">&#39;application/json&#39;</span>, <span class="dv">50</span>)</code></pre>
<p>对应地我们需要在一发出请求的时候设置好Accept，要不就没有办法返回我们需要的结果。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">&quot;Accept&quot;</span>, <span class="st">&quot;application/json&quot;</span>);</code></pre>
<h3 id="返回json"><span class="header-section-number">10.6.1</span> 返回JSON</h3>
<p>在给IoT CoAP添加了JSON支持之后，变得非常有意思，至少我们可以获得我们想要的结果。在上一篇中我们介绍了一些常用的工具——<a href="http://www.phodal.com/blog/coap-command-line-tools-set/">CoAP 命令行工具集</a>。</p>
<h3 id="coap客户端代码"><span class="header-section-number">10.6.2</span> CoAP客户端代码</h3>
<p>开始之前我们需要有一个客户端代码，以便我们的服务端可以返回正确的数据并解析</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> coap = <span class="fu">require</span>(<span class="st">&#39;coap&#39;</span>);
<span class="kw">var</span> requestURI = <span class="st">&#39;coap://localhost/&#39;</span>;
<span class="kw">var</span> url = <span class="fu">require</span>(<span class="st">&#39;url&#39;</span>).<span class="fu">parse</span>(requestURI + <span class="st">&#39;id/1/&#39;</span>);
<span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&quot;Request URL: &quot;</span> + <span class="ot">url</span>.<span class="fu">href</span>);
<span class="kw">var</span> req = <span class="ot">coap</span>.<span class="fu">request</span>(url);
<span class="kw">var</span> bl = <span class="fu">require</span>(<span class="st">&#39;bl&#39;</span>);

<span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">&quot;Accept&quot;</span>, <span class="st">&quot;application/json&quot;</span>);
<span class="ot">req</span>.<span class="fu">on</span>(<span class="st">&#39;response&#39;</span>, <span class="kw">function</span>(res) {
    <span class="ot">res</span>.<span class="fu">pipe</span>(<span class="fu">bl</span>(<span class="kw">function</span>(err, data) {
        <span class="kw">var</span> json = <span class="ot">JSON</span>.<span class="fu">parse</span>(data);
        <span class="ot">console</span>.<span class="fu">log</span>(json);
    }));

});

<span class="ot">req</span>.<span class="fu">end</span>();</code></pre>
<p>代码有点长内容也有点多，但是核心是这句话：</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">req</span>.<span class="fu">setHeader</span>(<span class="st">&quot;Accept&quot;</span>, <span class="st">&quot;application/json&quot;</span>);</code></pre>
<p>这样的话，我们只需要在我们的服务端一判断，</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">if</span>(<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">&#39;Accept&#39;</span>] == <span class="st">&#39;application/json&#39;</span>) {
     <span class="co">//do something</span>
 };</code></pre>
<p>这样就可以返回数据了</p>
<h3 id="coap-server端代码"><span class="header-section-number">10.6.3</span> CoAP Server端代码</h3>
<p>Server端的代码比较简单，判断一下</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">if</span> (<span class="ot">req</span>.<span class="fu">headers</span>[<span class="st">&#39;Accept&#39;</span>] == <span class="st">&#39;application/json&#39;</span>) {
        <span class="fu">parse_url</span>(<span class="ot">req</span>.<span class="fu">url</span>, <span class="kw">function</span>(result){
            <span class="ot">res</span>.<span class="fu">end</span>(result);
        });
        <span class="ot">res</span>.<span class="fu">code</span> = <span class="st">&#39;2.05&#39;</span>;
    }</code></pre>
<p>请求的是否是JSON格式，再返回一个205，也就是Content，只是这时设计是请求一个URL返回对应的数据。如</p>
<pre><code> coap://localhost/id/1/</code></pre>
<p>这时应该请求的是ID为1的数据，即</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">[ { <span class="dt">id</span>: <span class="dv">1</span>, <span class="dt">value</span>: <span class="st">&#39;is id 1&#39;</span>, <span class="dt">sensors1</span>: <span class="dv">19</span>, <span class="dt">sensors2</span>: <span class="dv">20</span> }]</code></pre>
<p>而parse_url只是从数据库从读取相应的数据。</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">parse_url</span>(url ,callback) {
    <span class="kw">var</span> db = <span class="kw">new</span> <span class="ot">sqlite3</span>.<span class="fu">Database</span>(config[<span class="st">&quot;db_name&quot;</span>]);

    <span class="kw">var</span> result = [];
    <span class="ot">db</span>.<span class="fu">all</span>(<span class="st">&quot;SELECT * FROM basic;&quot;</span>, <span class="kw">function</span>(err, rows) {
        <span class="fu">callback</span>(<span class="ot">JSON</span>.<span class="fu">stringify</span>(rows));
    })
}</code></pre>
<p>并且全部都显示出来，设计得真是有点不行，不过现在已经差不多了。</p>
</body>
</html>