物联网之html---javascript（js）---css（三剑客）
一、框架
前端显示html ---- 处理问题javascript(JS) ---- CSS 配置脚本
（建筑框架） （具体实施工程） （房屋装修）
二、示例(refer:http://designiot.phodal.com/)
1. helloworld.html （HTML）
html>
type="text/javascript" src="app.js"> //用JS 来处理具体的问题
disable Javascript
2. app.js（JAVASCRIPT-JS）
document.write('hello,world');
或者是更专业一点
function calc(tang,num){
return tang*num;
}
function printResult(tang,num){
document.write(calc(tang,num));/
}
printResult(3, 4)function sin(degree){
return document.write(Math.sin(degree));//
}
sin(30);document.write以及Math.sin是做什么用的？？？？
修改app.js为以下内容
document.write(typeof document);
document.write(typeof Math);
object又是做什么的？？？？
object（对象）：无序属性的集合，属性可以包含基本值、函数等，还可以包含另一个对象（object）
举例子1（创建一个仅包含基本值的对象object）：
store={};/声明一个对象的方法1
store.tang=4;
store.num=3;
document.write(store.tang*store.num);store={};/声明一个对象的方法1
store.tang=4;
store.num=3;
document.writeln(store.tang*store.num);
var wall=new Object();声明一个对象的方法2（这个声明方法的可读性较强）
wall.store=store;
document.write(typeof wall.store);举例子3（复杂一点的对象）：
var Person={name:"phodal",weight:50,height:166};/声明一个对象的方法1
function dream(){
future;
};
Person.future=dream;
document.write(typeof Person);
document.write(Person.future);可以看出，这是一种OO思想。下面就进入主题，开始OO编程了.JavaScript---JS（oo编程）
1）.基本OO 入门
简化例子3后的代码：
var Person=function(){Person是一个函数，一个Javascript函数也是一个对象
this.name="phodal";
this.weight=50;
this.height=166;
this.future=function dream(){
return "future";
};
};
var person=new Person();声明的person却变成了一个对象
document.write(person.name+"
");
document.write(typeof person+"
");
document.write(typeof person.future+"
");
document.write(person.future()+"
");在这个时候Person是一个函数，但是我们声明的person却变成了一个对象
一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。
ps：这里的“
”是HTML中的元素，称之为DOM，在这里起的是换行的作用。this关键字表示函数的所有者或作用域，也就是这里的Person。
可以看出，即使简化后的代码也是有局限性的，不具有通用性！可以最终简化为：
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()+"
");2）.关于继承（原型继承）
var Chinese=function(){///创建一个对象object
this.country="China";
}
var Person=function(name,weight,height){///创建一个对象object
this.name=name;
this.weight=weight;
this.height=height;
this.futrue=function(){
return "future";
}
}
Chinese.prototype=new Person();/声明一个原型继承（对象Chinese继承自Person）
var phodal=new Chinese("phodal",50,166);声明一个对象
document.write(phodal.country);3）.补充说明的东东
A.完整的Javascript应该由下列三个部分组成:
- 核心(ECMAScript)——核心语言功能
==我们在上面讲的都是ECMAScript，也就是语法相关的
==核心语言功能才是真正在哪里都适用的
- 文档对象模型(DOM)——访问和操作网页内容的方法和接口
==JS真正强大的，或者说我们最需要的可能就是对DOM的操作
==这也就是为什么jQuery等库可以流行的原因之一
- 浏览器对象模型(BOM)——与浏览器交互的方法和接口
一个简单的DOM示例,
html>
disable Javascript
id="para" style="color:red">Red
type="text/javascript" src="app.js">
我们需要修改一下helloworld.html添加
id="para" style="color:red">Red 同时还需要将script标签移到body下面，如果没有意外的话我们会看到页面上用红色的字体显示Red，修改app.js。
var para=document.getElementById("para");
para.style.color="blue";接着，字体就变成了蓝色，有了DOM我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。需要通过在实际的编程中解决问题来提高认识。
B.Javascript冰山一角
本文只是描述下如何设计一个实用的app，而忽略掉了JS中的很大一部分内容（作为一门语言，相c/c++一样，它还有其他强大的功能）
- 我们可以创建一个对象或者函数，它可以包含基本值、对象或者函数。
- 我们可以用Javascript修改页面的属性，虽然只是简单的示例。
- 我们还可以去解决实际的编程问题。
3.CSS(Cascading Style Sheets)
下面就是我们之前说到的代码
CSS+HTML让页面有序的工作着（这时还没有Javascript），但是Javascript却可以打乱这种合作默契。
html>
id="para" style="color:red">Red/css将Red三个字母变成了红色
type="text/javascript" src="app.js">js将字体变成了蓝色（调用app.js）
注解：在app.js中（Javascript）
var para=document.getElementById("para");
para.style.color="blue";将字体变成了蓝色。
当项目很大的时候，就需要
html>
</span>CSS example<span class="kw">
href="./style.css" rel="stylesheet" type="text/css" />css脚本
class="para">如果没有一个好的结构
class="para2">那么以后可能就是这样子。。。。
然后我们有一个像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;
}
\d{2}/[A-Z][a-z][a-z]/\d{4}上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。不过相对来说这门语言还是比其他语言简单易懂一些。