基于HTML和JS教你一步步搭建物联网系统

　　基于HTML和JS教你一步步搭建物联网系统

　　源自毕业论文: 基于REST服务的最小物联网系统设计

　　1 前言

　　1.1 目标读者

　　1.2 不适合人群

　　1.3 介绍

　　1.3.1 为什么没有C ?

　　1.3.2 为什么不是JAVA ?

　　1.4 如何阅读

　　2 无处不在的HTML

　　2.1 html的hello,world

　　2.1.1 调试hello,world

　　2.1.2 说说hello,world

　　2.1.3 想用中文?

　　2.2 其他html标记

　　2.2.1 美妙之处

　　2.2.2 更多

　　3 无处不在的Javascript

　　3.1 Javascript的Hello,world

　　3.2 更js一点

　　3.2.1 从数学出发

　　3.3 设计和编程

　　3.3.1 函数

　　3.3.2 重新设计

　　3.3.3 object和函数

　　3.3.4 面向对象

　　3.4 其他

　　3.5 美妙之处

　　4 无处不在的CSS

　　4.1 CSS

　　4.2 关于CSS

　　4.3 代码结构

　　4.4 样式与目标

　　4.4.1 选择器

　　4.5 更有趣的CSS

　　5 无处不在的三剑客

　　5.1 Hello,Geek

　　5.2 从源码学习

　　5.3 浏览器渲染过程

　　5.3.1 HTML

　　5.4 DOM树形结构图

　　5.4.1 javascript

　　5.4.2 CSS

　　5.5 CSS盒模型图

　　5.6 笔记

　　6 GNU/Linux 强大且Free

　　6.1 什么是Linux

　　6.2 操作系统

　　6.2.1 Linux架构图

　　6.2.2 Shell

　　6.2.3 GCC

　　6.2.4 启动引导程序

　　6.3 从编译开始

　　6.3.1 开始之前

　　6.3.2 编译Nginx

　　6.3.3 其他

　　6.4 包管理

　　6.5 Ubuntu LNMP

　　6.5.1 Update软件包列表

　　6.5.2 安装MySQL

　　6.5.3 安装Nginx

　　6.5.4 安装PHP

　　7 Arduino 极客的玩具

　　7.1 极客的玩具

　　7.2 硬件熟悉

　　7.3 开发环境

　　7.4 点亮一个LED

　　7.5 串口通信

　　7.5.1 关于Arduino Setup()

　　8 Python 代码如散文

　　8.1 代码与散文

　　8.1.1 开始之前

　　8.1.2 Python的Hello,World

　　8.1.3 我们想要的Hello,World

　　8.2 算法

　　8.3 实用主义哲学

　　8.4 包管理

　　8.4.1 python requests

　　9 Raspberry Pi

　　9.1 Geek的盛宴

　　9.2 Raspberry Pi 初始化

　　9.3 Raspberry Pi GPIO

　　10 Server 一切皆为服务

　　10.1 服务器

　　10.2 Web服务器

　　10.3 LNMP

　　11 Web服务

　　11.1 SOAP VS RESTful

　　12 HTTP 熟悉&陌生

　　12.1 你所没有深入的HTTP

　　12.1.1 打开网页时发生了什么

　　12.1.2 URL组成

　　12.2 一次HTTP GET请求

　　12.2.1 HTTP响应

　　13 设计RESTful API

　　13.0.1 资源

　　13.1 设计RESTful API

　　13.2 REST关键目标

　　13.3 判断是否是 RESTful的约束条件

　　13.4 JSON

　　14 环境准备

　　14.1 Laravel

　　14.1.1 为什么是 Laravel

　　14.2 安装 Laravel

　　14.2.1 GNU/Linux安装Composer

　　14.3 MySQL

　　14.3.1 安装MySQL

　　14.3.2 配置MySQL

　　15 创建REST服务

　　15.1 数据库迁移

　　15.1.1 创建表

　　15.1.2 数据库迁移

　　15.2 创建RESTful

　　15.3 Laravel Resources

　　15.3.1 修改Create()

　　15.3.2 创建表单

　　15.3.3 编辑模板

　　16 前端显示

　　16.1 库与车轮子

　　16.2 库

　　16.2.1 jQuery

　　16.2.2 jQuery Mobile

　　16.3 网站前台显示

　　16.3.1 Highcharts

　　16.3.2 实时数据

　　17 RESTful的CoAP协议

　　17.1 CoAP: 嵌入式系统的REST

　　17.2 CoAP 命令行工具

　　17.2.1 Node CoAP CLI

　　17.2.2 libcoap

　　17.2.3 Firefox Copper

　　17.3 CoAP Hello,World

　　17.4 CoAP 数据库查询

　　17.4.1 Node Module

　　17.4.2 Node-Sqlite3

　　17.4.3 查询数据

　　17.5 CoAP Block

　　17.5.1 CoAP POST

　　17.5.2 CoAP Content Types

　　17.6 CoAP JSON

　　17.7 使用IoT-CoAP构建物联网

　　18 简单物联网

　　18.1 硬件通信

　　18.1.1 串口通信

　　18.2 硬件

　　18.2.1 Arduino

　　18.2.2 继电器

　　19 Android简单示例

　　19.1 调用Web Services GET

　　19.1.1 创建RESTClient

　　19.2 使用REST Client获取结果

　　20 尾声

　　20.1 路

　　20.2 其他

　　本作品采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

　　© 2014 Phodal Huang .

　　1 前言

　　设计物联网系统是件有意思的事情，它需要考虑到软件、硬件、通讯等多个不同方面。通过探索不同的语言，不同的框架，从而形成不同的解决方案。

　　在这里，我们将对设计物联网系统有一个简单的介绍，并探讨如何设计一个最小的物联网系统。

　　1.1 目标读者

　　目标读者: 初入物联网领域，希望对物联网系统有一个大概的认识和把握，并学会掌握一个基础的物联网系统的设计。

　　硬件开发人员，对物联网有兴趣。

　　没有web开发经验

　　几乎为0的linux使用经验

　　想快速用于生产环境

　　对硬件了解有限的开发人员。

　　没接触过51、ARM、Arduino

　　想了解以下内容：

　　RESTful与IOT

　　CoAP协议

　　MQTT

　　本文档对一些概念(如)只做了一些基本介绍，以方便读者理解。如果您想进一步了解这些知识，会列出一些推荐书目，以供参考。

　　1.2 不适合人群

　　如果你是在这方面已经有了丰富经验的开发者。

　　不是为了学习而学习这方面的知识。

　　1.3 介绍

　　关于内容的选择，这是一个有意思的话题，因为我们很难判断不同的开发者用的是怎样的语言，用的是怎样的框架。

　　于是我们便自作主张地选择了那些适合于理论学习的语言、框架、硬件，去除掉其他一些我们不需要考虑的因素，如语法，复杂度等等。当然，这些语言、框架、硬件也是最流行的。

　　Arduino: 如果你从头开始学过硬件的话，那么你会爱上它的。

　　Raspberry PI: 如果你从头编译过GNU/Linux的话，我想你会爱上她的。

　　Python: 简单地来说，你可以方便地使用一些扩展，同时代码就表达了你的想法。

　　PHP : 这是一门容易部署的语言，我想你只需要在你的Ubuntu机器上，执行一下脚本就能完成安装了。而且，如果你是一个硬件开发者的话，你会更容易地找到其他开发者。

　　Javascript : 考虑到javascript这门语言已经无处不在了，而且会更加流行。所以，在这里CoAP、MQTT等版本是基于Nodejs的。

　　HTML、CSS : 这是必须的，同样，他们仍然无处不在。

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

　　CoAP: 用NodeJS构建IOT CoAP物联网

　　1.3.1 为什么没有C ?

　　C都不懂还跑过来干嘛 。

　　1.3.2 为什么不是JAVA ?

　　大有以下两个原因

　　学习JAVA的人很多，但是它不适合我们集中精力构建与学习，因为无关的代码太多了。

　　之前以及现在，我还是不喜欢JAVA (我更喜欢脚本语言，可以提高工作效率)。

　　1.4 如何阅读

　　这只是一个小小的建议，仅针对于在选择阅读上没有经验的读者。

　　当前状态建议

　　软件初学者从头阅读

　　硬件开发者从头阅读

　　没有web经验的开发者从第二部分开始

　　我们会在前面十章里简单介绍一些必要的基础知识，这些知识将会在后面我们构建物联网系统时用到。

　　某一天，正走在回学校的路上的我突然想到：“未来将会是一个科技的时代——虽然现在也是——只是在未来，科技将会无处不在。如果我们依旧对周围这些无处不在的代码一无所知的话，或许我们会成为黑客帝国之中被控制的普通人。”于是开始想着，有一天人们会像学习一门语言一样开始学习编程，直到又有一天我看到了学习编程如同学习一门语言的说法。这又恰好在我做完最小物联网系统之后，算是一个有趣的时间点，我开始想着像之前做最小物联网系统的那些步骤一样，写一个简单的入门。也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。

　　让我们先从身边的语言下手，也就是现在无处不在的html+javascript+css。

　　2 无处不在的HTML

　　之所以从html开始，是因为我们不需要配置一个复杂的开发环境，也许你还不知道开发环境是什么东西，不过这也没关系，毕竟这些知识需要慢慢的接触才能有所了解，尤其是对于普通的业余爱好者来说，当然，对于专业选手言自然不是问题。HTML是Web的核心语言，也算是比较基础的语言。

　　2.1 html的hello,world

　　Hello,world是一个传统，所以在这里也遵循这个有趣的传统，我们所要做的事情其实很简单，虽然也有一点点hack的感觉。——让我们先来新建一个文并命名为“helloworld.html”。

　　(PS:大部分人应该都是在windows环境下工作的，所以你需要新建一个文本，然后重命名，或者你需要一个编辑器，在这里我们推荐用 sublime text 。破解不破解，注册不注册都不会对你的使用有太多的影响。)

　　新建文件

　　输入

　　hello,world

　　保存为->“helloworld.html”，

　　双击打开这个文件。 正常情况下都应该是用你的默认浏览器打开。只要是一个正常工作的现代浏览器，都应该可以看到上面显示的是“Hello,world”。

　　这才是最短的hello,world程序，但是呢?在ruby中会是这样子的

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

　　"hello,world"

　　=> "hello,world"

　　2.0.0-p353 :002 >

　　等等，如果你了解过html的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完Nginx后看到It works!更让人激动了。

　　遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的bug。

　　2.1.1 调试hello,world

　　我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。

　　hello,world

　　这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。

　　2.1.2 说说hello,world

　　我很不喜欢其中的<*>，但是我也没有找到别的方法来代替它们，所以这是一个设计得当的语言。甚至大部分人都说这算不上是一门真正的语言，不过html的原义是

　　超文本标记语言

　　所以我们可以发现其中的关键词是标记——markup，也就是说html是一个markup，head是一个markup，body也是一个markup。

　　然而，我们真正工作的代码是在body里面，至于为什么是在这里面，这个问题就太复杂了。打个比方来说：

　　我们所使用的汉语是人类用智慧创造的，我们所正在学的这门语言同样也是人类创造的。

　　我们在自己的语言里遵循着 桌子是桌子，凳子是凳子 的原则，很少有人会问为什么。

　　2.1.3 想用中文?

　　所以我们也可以把计算机语言与现实世界里用于交流沟通的语言划上一个等号。而我们所要学习的语言，并不是我们最熟悉的汉语语言，所以我们便觉得这些很复杂，但是如果我们试着用汉语替换掉上面的代码的话

　　<语言>

　　<头><结束头>

　　<身体>你好，世界<结束身体>

　　<结束语言>

　　这看上去很奇怪，只是因为是直译过去的原因，也许你会觉得这样会好理解一点，但是输入上可就一点儿也不方便，因为这键盘本身就不适合我们去输入汉字，同时也意味着可能你输入的会有问题。

　　让我们把上面的代码代替掉原来的代码然后保存，打开浏览器会看到下面的结果

　　<语言> <头><结束头> <身体>你好，世界<结束身体> <结束语言>

　　更不幸的结果可能是

　　<璇█> <澶?><缁撴潫澶?> <韬綋>浣犲ソ锛屼笘鐣?<缁撴潫韬綋> <缁撴潫璇█>

　　这是一个编码问题，对中文支持不友好。

　　我们把上面的代码改为和标记语言一样的结构

　　<语言>

　　<头>

　　<身体>你好，世界

　　<结束语言>

　　于是我们看到的结果便是

　　<语言> <头> <身体>你好，世界

　　被chrome浏览器解析成什么样了?

　　<语言>

　　<头>

　　<身体>你好，世界

　　以

　　结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。

　　但是当我们把代码改成

　　你好世界

　　浏览器上面显示的内容就变成了

　　你好世界

　　或许你会觉得很神奇，但是这一点儿也不神奇，虽然我们的中文语法也遵循着标记语言的标准，但是我们的浏览器不支持中文标记。

　　结论:

　　浏览器对中文支持不友好。

　　浏览器对英文支持友好。

　　刚开始的时候不要对中文编程有太多的想法，这是很不现实的:

　　现有的系统都是基于英语语言环境构建的，对中文支持不是很友好。

　　中文输入的速度在某种程度上来说没有英语快。

　　我们离开话题已经很远了，但是这里说的都是针对于那些不满于英语的人来说的，只有当我们可以从头构建一个中文系统的时候才是可行的，而这些就要将cpu、软件、硬件都包含在内，甚至我们还需要考虑重新设计cpu的结构，在某种程度上来说会有些不现实。或许，需要一代又一代人的努力。忘记那些吧，师夷长之技以治夷。

　　2.2 其他html标记

　　添加一个标题，

　　hello,world

　　我们便可以在浏览器的最上方看到“标题”二字，就像我们常用的淘宝网，也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。

　　hello,world

大标题

次标题

...

• 列表1

• 列表2

　　更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其他的东西都和这些类似。

　　2.2.1 美妙之处

　　我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有C和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如python，我们所要做的就是

　　$ python file.py

　　=>hello,world

　　然后在终端上返回结果。只是因为在我看来学会html是有意义的，简单的上手，然后再慢慢地深入，如果一开始我们就去理解指针，开始去理解类。我们甚至还知道程序是怎么编译运行的时候，在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么，但是至少展示了

　　中文编程语言在当前意义不大，不现实，效率不高兼容性差

　　语言的语法是固定的。(ps:虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。)

　　已经开始写代码，而不是还在配置开发环境。

　　随身的工具才是最好的，最常用的code也才是实在的。

　　2.2.2 更多

　　我们还没有试着去解决“某商店里的糖一颗5块钱，小明买了3颗糖，小明一共花了多少钱”的问题。也就是说我们学会的是一个还不能解决实际问题的语言，于是我们还需要学点东西，比如javascript,css。我们可以将Javascript理解为解决问题的语言，html则是前端显示，css是配置文件，这样的话，我们会在那之后学会成为一个近乎专业的程序员。我们刚刚学习了一下怎么在前端显示那些代码的行为，于是我们还需要Javascript。

　　3 无处不在的Javascript

　　Javascript现在已经无处不在了，也许你正打开的某个网站，他便可能是node.js+json+javascript+mustache.js完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是你只要知道Javascript已经无处不在了，它可能就在你手机上的某个app里，就在你浏览的网页里，就运行在你IDE中的某个进程里。

　　3.1 Javascript的Hello,world

　　这里我们还需要有一个helloworld.html，Javascript是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的helloworld.html

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

　　按照标准的写法，我们还需要声明这个脚本的类型

　　没有显示hello,world?试试下面的代码

　　3.2 更js一点

　　我们需要让我们的代码看上去更像是js，同时是以js结尾。就像C语言的源码是以C结尾的，我们也同样需要让我们的代码看上去更正式一点。于是我们需要在helloworld.html的同一文件夹下创建一个app.js文件，在里面写着

　　document.write('hello,world');

　　同时我们的helloworld.html还需要告诉我们的浏览器js代码在哪里

　　3.2.1 从数学出发

　　让我们回到第一章讲述的小明的问题， 从实际问题下手编程，更容易学会编程 。小学时代的数学题最喜欢这样子了——某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱。在编程方面，也许我们还算是小学生。最直接的方法就是直接计算3x5=?

　　document.write(3*5);

　　document.write实际也我们可以理解为输出，也就是往页面里写入3*5的结果，在有双引号的情况下会输出字符串。我们便会在浏览器上看到15，这便是一个好的开始，也是一个糟糕的开始。

　　3.3 设计和编程

　　对于实际问题，如果我们只是止于所要得到的结果，很多年之后，我们就成为了code monkey。对这个问题进行再一次设计，所谓的设计有些时候会把简单的问题复杂化，有些时候会使以后的扩展更加简单。这一天因为这家商店的糖价格太高了，于是店长将价格降为了4块钱。

　　document.write(3*4);

　　于是我们又得到了我们的结果，但是下次我们看到这些代码的时候没有分清楚哪个是糖的数量，哪个是价格，于是我们重新设计了程序

　　tang=4;

　　num=3;

　　document.write(tang*num);

　　这才能叫得上是程序设计，或许你注意到了“;”这个符号的存在，我想说的是这是另外一个标准，我们不得不去遵守，也不得不去fuck。

　　3.3.1 函数

　　记得刚开始学三角函数的时候，我们会写

　　sin 30=0.5

　　而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们做一个简单的开始。

　　function hello(){

　　return document.write("hello,world");

　　}

　　hello();

　　当我第一次看到函数的时候，有些小激动终于出现了。我们写了一个叫hello的函数，它返回了往页面中写入hello,world的方法，然后我们调用了hello这个函数，于是页面上有了hello,world。

　　function sin(degree){

　　return document.write(Math.sin(degree));

　　}

　　sin(30);

　　在这里degree就称之为变量。 于是输出了-0.9880316240928602，而不是0.5，因为这里用的是弧度制，而不是角度制。

　　sin(30)

　　的输出结果有点类似于sin 30。写括号的目的在于，括号是为了方便解析，这个在不同的语言中可能是不一样的，比如在ruby中我们可以直接用类似于数学中的表达:

　　2.0.0-p353 :004 > Math.sin 30

　　=> -0.9880316240928618

　　2.0.0-p353 :005 >

　　我们可以在函数中传入多个变量，于是我们再回到小明的问题，就会这样去编写代码。

　　function calc(tang,num){

　　result=tang*num;

　　document.write(result);

　　}

　　calc(3,4);

　　但是从某种程度上来说，我们的calc做了计算的事又做了输出的事，总的来说设计上有些不好。

　　3.3.2 重新设计

　　我们将输出的工作移到函数的外面，

　　function calc(tang,num){

　　return tang*num;

　　}

　　document.write(calc(3,4));

　　接着我们用一种更有意思的方法来写这个问题的解决方案

　　function calc(tang,num){

　　return tang*num;

　　}

　　function printResult(tang,num){

　　document.write(calc(tang,num));

　　}

　　printResult(3, 4)

　　看上去更专业了一点点，如果我们只需要计算的时候我们只需要调用calc，如果我们需要输出的时候我们就调用printResult的方法。

　　3.3.3 object和函数

　　我们还没有说清楚之前我们遇到过的document.write以及Math.sin的语法为什么看上去很奇怪，所以让我们看看他们到底是什么，修改app.js为以下内容

　　document.write(typeof document);

　　document.write(typeof Math);

　　typeof document会返回document的数据类型，就会发现输出的结果是

　　object object

　　所以我们需要去弄清楚什么是object。对象的定义是

　　无序属性的集合，其属性可以包含基本值、对象或者函数。

　　创建一个object，然后观察这便是我们接下来要做的

　　store={};

　　store.tang=4;

　　store.num=3;

　　document.write(store.tang*store.num);

　　我们就有了和document.write一样的用法，这也是对象的美妙之处，只是这里的对象只是包含着基本值，因为

　　typeof story.tang="number"

　　一个包含对象的对象应该是这样子的。

　　store={};

　　store.tang=4;

　　store.num=3;

　　document.writeln(store.tang*store.num);

　　var wall=new Object();

　　wall.store=store;

　　document.write(typeof wall.store);

　　而我们用到的document.write和上面用到的document.writeln都是属于这个无序属性集合中的函数。

　　下面代码说的就是这个无序属性集中中的函数。

　　var IO=new Object();

　　function print(result){

　　document.write(result);

　　};

　　IO.print=print;

　　IO.print("a obejct with function");

　　IO.print(typeof IO.print);

　　我们定义了一个叫IO的对象，声明对象可以用

　　var store={};

　　又或者是

　　var store=new Object{};

　　两者是等价的，但是用后者的可读性会更好一点，我们定义了一个叫print的函数，他的作用也就是document.write，IO中的print函数是等价于print()函数，这也就是对象和函数之间的一些区别，对象可以包含函数，对象是无序属性的集合，其属性可以包含基本值、对象或者函数。

　　复杂一点的对象应该是下面这样的一种情况。

　　var Person={name:"phodal",weight:50,height:166};

　　function dream(){

　　future;

　　};

　　Person.future=dream;

　　document.write(typeof Person);

　　document.write(Person.future);

　　而这些会在我们未来的实际编程过程中用得更多。

　　3.3.4 面向对象

　　开始之前先让我们简化上面的代码，

　　Person.future=function dream(){

　　future;

　　}

　　看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。

　　var Person=function(){

　　this.name="phodal";

　　this.weight=50;

　　this.height=166;

　　this.future=function dream(){

　　return "future";

　　};

　　};

　　var person=new Person();

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

　　document.write(typeof person+" ");

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

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

　　只是在这个时候Person是一个函数，但是我们声明的person却变成了一个对象 一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。 这里的“ ”是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下this。this关键字表示函数的所有者或作用域，也就是这里的Person。

　　上面的方法显得有点不可取，换句话说和一开始的

　　document.write(3*4);

　　一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。

　　var Person=function(name,weight,height){

　　this.name=name;

　　this.weight=weight;

　　this.height=height;

　　this.future=function(){

　　return "future";

　　};

　　};

　　var phodal=new Person("phodal",50,166);

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

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

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

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

　　于是，产生了这样一个可重用的Javascript对象,this关键字确立了属性的所有者。

　　3.4 其他

　　Javascript还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。

　　所谓的继承，

　　var Chinese=function(){

　　this.country="China";

　　}

　　var Person=function(name,weight,height){

　　this.name=name;

　　this.weight=weight;

　　this.height=height;

　　this.futrue=function(){

　　return "future";

　　}

　　}

　　Chinese.prototype=new Person();

　　var phodal=new Chinese("phodal",50,166);

　　document.write(phodal.country);

　　完整的Javascript应该由下列三个部分组成:

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

　　文档对象模型(DOM)——访问和操作网页内容的方法和接口

　　浏览器对象模型(BOM)——与浏览器交互的方法和接口

　　我们在上面讲的都是ECMAScript，也就是语法相关的，但是JS真正强大的，或者说我们最需要的可能就是对DOM的操作，这也就是为什么jQuery等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于BOM，真正用到的机会很少，因为没有完善的统一的标准。

　　一个简单的DOM示例,

Red

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

Red

　　同时还需要将script标签移到body下面，如果没有意外的话我们会看到页面上用红色的字体显示Red，修改app.js。

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

　　para.style.color="blue";

　　接着，字体就变成了蓝色，有了DOM我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。

　　3.5 美妙之处

　　这里说到的Javascript仅仅只是其中的一小小部分，忽略掉的东西很多，只关心的是如何去设计一个实用的app，作为一门编程语言，他还有其他强大的内制函数，要学好需要一本有价值的参考书。这里提到的只是其中的不到20%的东西，其他的80%或者更多会在你解决问题的时候出现。

　　我们可以创建一个对象或者函数，它可以包含基本值、对象或者函数。

　　我们可以用Javascript修改页面的属性，虽然只是简单的示例。

　　我们还可以去解决实际的编程问题。

　　4 无处不在的CSS

　　或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。

　　4.1 CSS

　　下面就是我们之前说到的代码，css将Red三个字母变成了红色。

Red

　　只是，

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

　　para.style.color="blue";

　　将字体变成了蓝色，CSS+HTML让页面有序的工作着，但是Javascript却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于Javascript没有好感了——不过这里要讲的是正室，也就是CSS，这时还没有Javascript。

　　Red Fonts

　　4.2 关于CSS

　　这不是一篇专业讲述CSS的书籍，所以我不会去说CSS是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。

　　到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的CSS来说也不会有例外的。

　　CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢DreamWeaver那也不错，不过一开始使用IDE可无助于我们写出良好的代码。

　　忘说了，CSS也是有版本的，和windows，Linux内核等等一样，但是更新可能没有那么频繁，HTML也是有版本的，JS也是有版本的，复杂的东西不是当前考虑的内容。

　　4.3 代码结构

　　对于我们的上面的Red示例来说，如果没有一个好的结构，那么以后可能就是这样子。

如果没有一个好的结构

那么以后可能就是这样子。。。。

　　虽然我们看到的还是一样的:

　　No Style

　　于是我们就按各种书上的建议重新写了上面的代码

如果没有一个好的结构

那么以后可能就是这样子。。。。

　　总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示:

如果没有一个好的结构

那么以后可能就是这样子。。。。

　　我们需要

如果没有一个好的结构

那么以后可能就是这样子。。。。

　　然后我们有一个像app.js一样的style.css放在同目录下，而他的内容便是

　　.para{

　　font-size: 22px;

　　color:#f00;

　　text-align: center;

　　padding-left: 20px;

　　}

　　.para2{

　　font-size:44px;

　　color:#3ed;

　　text-indent: 2em;

　　padding-left: 2em;

　　}

　　这代码和JS的代码有如此多的相似

　　var para={

　　font_size:'22px',

　　color:'#f00',

　　text_align:'center',

　　padding_left:'20px',

　　}

　　而22px、20px以及#f00都是数值，因此：

　　var para={

　　font_size:22px,

　　color:#f00,

　　text_align:center,

　　padding_left:20px,

　　}

　　目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解:

　　(dotimes (i 4) (print i))

　　总的来说我们减少了符号的使用，但是用lisp便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。

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

　　上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。

　　这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。

　　4.4 样式与目标

　　如下所示，就是我们的样式

　　.para{

　　font-size: 22px;

　　color:#f00;

　　text-align: center;

　　padding-left: 20px;

　　}

　　我们的目标就是

　　如果没有一个好的结构

　　所以样式和目标在这里牵手了，问题是他们是如何在一起的呢?下面就是CSS与HTML沟通的重点所在了:

　　4.4.1 选择器

　　我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:

　　p.para{

　　color:#f0f;

　　}

　　将代码添加到style.css的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法

　　p>.para{

　　color:#f0f;

　　}

　　为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。

　　而通常我们可以通过一个

　　p{

　　text-align:left;

　　}

　　这样的元素选择器来给予所有的p元素一个左对齐。

　　还有复杂一点的复合型选择器，下面的是HTML文件

如果没有一个好的结构

那么以后可能就是这样子。。。。

　　还有CSS文件

　　.para{

　　font-size: 22px;

　　color:#f00;

　　text-align: center;

　　padding-left: 20px;

　　}

　　.para2{

　　font-size:44px;

　　color:#3ed;

　　text-indent: 2em;

　　padding-left: 2em;

　　}

　　p.para{

　　color:#f0f;

　　}

　　div#content p {

　　font-size:22px;

　　}

　　4.5 更有趣的CSS

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

那么以后可能就是这样子。。。。

　　我们只是添加了一个黑色的背景

　　.para_bg{

　　background-color:#000;

　　}

　　重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。

　　我们还可以用CSS3做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。

　　或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。

　　5 无处不在的三剑客

　　这时我们终于了解了我们的三剑客，他们也就这么可以结合到一起了，HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、Ruby等等到最后都会变成上面的结果，当然还有Coffeescript之类的语言都是以此为基础，这才是我们需要的知识。

　　5.1 Hello,Geek

　　有了一些些基础之后，我们终于能试着去写一些程序了。也是时候去创建一个像样的东西，或许你在一些界面设计方面的书籍看过类似的东西，可能我写得也没有那些内容好，只是这些都是一些过程。过去我们都是一点点慢慢过来的，只是现在我们也是如此，技术上的一些东西，事实上大家都是知道的。就好比我们都觉得我们可以开个超市，但是如果让我们去开超市的话，我们并不一定能赚钱。

　　学习编程的目的可能不在于我们能找到一份工作，那只是在编程之外的东西，虽然确实也是很确定的。但是除此之处，有些东西也是很重要的。

　　过去总是不理解为什么会一些人会不厌其烦地去回答别人的问题，有时候可能会想是一种能力越大责任越大的感觉，但是有时候在写一些博客或者回答别人的问题的时候我们又重新思考了这些问题，又重新学习了这些技能。所以这里可能说的不是关于编程的东西而是一些编程以外的东西，关于学习或者学习以外的东西。

　　5.2 从源码学习

　　过去总觉得学了一种语言的语法便算是学会了一种语言，直到有一天接触运用该语言的项目的时候，虽然也会写上几行代码，但是却不像这种语言的风格。于是这也是这一篇的意义所在了：

　　5.3 浏览器渲染过程

　　基本的渲染引擎的过程如下图所示:

　　flow

　　解析HTML去构建DOM树

　　渲染树形结构

　　生成渲染的树形图布局

　　绘制树形图

　　对于Webkit浏览器来说，他的过程如下所示:

　　webkitflow

　　5.3.1 HTML

　　写好HTML的一个要点在于读别人写的代码，这只是一方面，我们所说的HTML方面的内容可能不够多，原因有很多，很多东西都需要在实战中去解决。读万卷书和行万里路，分不清哪个有重要的意义，但是如果可以同时做好两个的话，成长会更快的。

　　写好HTML应该会有下面的要点

　　了解标准及遵守绝大多数标准

　　注重可读性，从ID及CLASS的命名

　　关注SEO与代码的联系

　　或许在这方面我也算不上很了解，不过按笔者的经验来说，大致就是如此。

　　多数情况下我们的HTML是类似于下面这样子的

　　{% nevercache %}

　　{% include "includes/user_panel.html" %}

　　{% endnevercache %}

　　{% block right_panel %}

　　{% ifinstalled mezzanine.twitter %}

　　{% include "twitter/tweets.html" %}

　　{% endifinstalled %}

　　{% endblock %}

　　换句话说HTML只是基础，而不是日常用到的。我们的HTML是由template生成的，我们可以借助于mustache.js又或者是angluarjs之类的js库来生成最后的HTML，所以这里只是一个开始。

　　还需要了解的一部分就是HTML的另外一个重要的部分，DOM树形结构

　　5.4 DOM树形结构图

　　DOM是文档对象化模型(Document Object Model)的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。

　　DOM Tree

　　5.4.1 javascript

　　这里以未压缩的jQuery源码和zepto.js作一个小小的比较，zepto.js是兼容jQuery的，因此我们举几个有意思的函数作一简单的比较，关于源码可以在官网上下载到。

　　在zepto.js下面判断一个值是否是函数的方面如下，

　　function isFunction(value) { return type(value) == "function" }

　　而在jQuery下面则是这样的

　　isFunction: function( obj ) {

　　return jQuery.type(obj) === "function";

　　}

　　而他们的用法是一样的，都是

　　$.isFunction();

　　jQuery的作法是将诸如isFunction,isArray这些函数打包到jQuery.extend中，而zepto.js的也是这样的，只不过多了一行

　　$.isFunction = isFunction

　　遗憾的是我也没去了解过为什么，之前我也没有看过这些库的代码，所以这个问题就要交给读者去解决了。jQuery里面提供了函数式编程接口，不过jQuery更多的是构建于CSS选择器之上，对于DOM的操作比javascript自身提供的功能强大得多。如果我们的目的在于更好的编程，那么可能需要诸如Underscore.js之类的库。或许说打包自己常用的函数功能为一个库，诸如jQuery

　　function isFunction(value) { return type(value) == "function" }

　　function isWindow(obj) { return obj != null && obj == obj.window }

　　function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }

　　function isObject(obj) { return type(obj) == "object" }

　　我们需要去了解一些故事背后的原因，越来越害怕GUI的原因之一，在于不知道背后发生了什么，即使是开源的，我们也无法了解真正的背后发生什么了。对于不是这个工具、软件的用户来说，开源更多的意义可能在于我们可以添加新的功能，当然还有免费。如果没有所谓的危机感，以及认为自己一直在学习工具的话，可以试着去打包自己的函数，打包自己的库。

　　var calc={

　　add: function(a,b){

　　return a+b;

　　},

　　sub: function(a,b){

　　return a-b;

　　},

　　dif: function(a,b){

　　if(a>b){

　　return a;

　　}else{

　　return b;

　　}

　　}

　　}

　　然后用诸如jslint测试一下代码。

　　$ ./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)

　　于是我们需要在第15行添加一个分号。

　　最好的方法还是阅读别人的代码，而所谓的别人指的是一些相对较大的网站的，有比较完善的开发流程，代码质量也不会太差。而所谓的复杂的代码都是一步步构建上去的，罗马不是一天建成的。

　　有意思的是多数情况下，我们可能会用原型去开发我们的应用，而这也是我们需要去了解和掌握的地方，

　　function Calc(){

　　}

　　Calc.prototype.add=function(a,b){

　　return a+b;

　　};

　　Calc.prototype.sub=function(a,b){

　　return a-b;

　　};

　　我们似乎在这里展示了更多的Javascript的用法，但是这不是一好的关于Javascript的介绍，有一天我们还要用诸如qunit之类的工具去为我们的function写测试，这时就是一个更好的开始。

　　如果我们乐意的话，我们也可以构建一个类似于jQuery的框架，以用来学习。

　　作为一门编程语言来说，我们学得很普通，在某种意义上来说算不上是一种入门。但是如果我们可以在其他的好书在看到的内容，就没有必要在这里进行复述，目的在于一种学习习惯的养成。

　　5.4.2 CSS

　　CSS有时候很有趣，但是有时候有很多我们没有意识到的用法，这里以Bootstrap为例，这是一个不错的CSS库。最令人兴奋的是没有闭源的CSS，没有闭源的JS，这也就是前端好学习的地方所在了，不过这是一个开源的CSS库，虽然是这样叫的，但是称之为CSS库显然不合适。

　　a,

　　a:visited {

　　text-decoration: underline;

　　}

　　a[href]:after {

　　content: &quo