一、框架


前端显示html    ----      处理问题javascript(JS)  ----     CSS 配置脚本   

（建筑框架）                 （具体实施工程）                 （房屋装修）


二、示例(refer:http://designiot.phodal.com/)

1. helloworld.html   （HTML）

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="app.js"></script>  //用JS 来处理具体的问题
    </head>
    <body>
        <noscript>
            disable Javascript
        </noscript>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="app.js"></script>  //用JS 来处理具体的问题
    </head>
    <body>
        <noscript>
            disable Javascript
        </noscript>
    </body>
</html>


2. app.js（JAVASCRIPT-JS）

document.write('hello,world');

或者是更专业一点
 
document.write('hello,world');

或者是更专业一点
 
function calc(tang,num){
    return tang*num;
}
function printResult(tang,num){
    document.write(calc(tang,num));/
}
printResult(3, 4)
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);
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);      

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


输出document以及math的类型（typeof得到类型）为 object object

object又是做什么的？？？？

object（对象）：无序属性的集合，属性可以包含基本值、函数等，还可以包含另一个对象（object）

举例子1（创建一个仅包含基本值的对象object）：

store={};/声明一个对象的方法1
store.tang=4;
store.num=3;
document.write(store.tang*store.num);
store={};
/声明一个对象的方法1


举例子2（创建一个包含对象的对象）： 

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);
store={};/声明一个对象的方法1
store.tang=4;
store.num=3;
document.writeln(store.tang*store.num);

var wall=new Object();
声明一个对象的方法2

举例子3（复杂一点的对象）：

var Person={name:"phodal",weight:50,height:166};/声明一个对象的方法1
function dream(){
    future;
};
Person.future=dream;
document.write(typeof Person);
document.write(Person.future);
var Person={name:"phodal",weight:50,height:166};
/声明一个对象的方法1




可以看出，这是一种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+"<br>");
document.write(typeof person+"<br>");
document.write(typeof person.future+"<br>");
document.write(person.future()+"<br>");
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+"<br>");
document.write(typeof person+"<br>");
document.write(typeof person.future+"<br>");
document.write(person.future()+"<br>");

      在这个时候Person是一个函数，但是我们声明的person却变成了一个对象

      一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。

       ps：这里的“<br>”是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+"<br>");
document.write(phodal.weight+"<br>");
document.write(phodal.height+"<br>");
document.write(phodal.future()+"<br>");
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+"<br>");
document.write(phodal.weight+"<br>");
document.write(phodal.height+"<br>");
document.write(phodal.future()+"<br>");


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


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);
var Chinese=function(){///创建一个对象object
    this.country="China";
}
var Person=function(name,weight,height){
///创建一个对象object


3）.补充说明的东东

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

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

                       ==我们在上面讲的都是ECMAScript，也就是语法相关的

                       ==核心语言功能才是真正在哪里都适用的

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

                       ==JS真正强大的，或者说我们最需要的可能就是对DOM的操作

                       ==这也就是为什么jQuery等库可以流行的原因之一

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

                       ==至于BOM，真正用到的机会很少，因为没有完善的统一的标准


一个简单的DOM示例,

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <noscript>
        disable Javascript
    </noscript>
    <p id="para" style="color:red">Red</p>
</body>
    <script type="text/javascript" src="app.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <noscript>
        disable Javascript
    </noscript>
    <p id="para" style="color:red">Red</p>
</body>
    <script type="text/javascript" src="app.js"></script>
</html>

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

<p id="para" style="color:red">Red</p>
<p id="para" style="color:red">Red</p>

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

var para=document.getElementById("para");
para.style.color="blue";
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却可以打乱这种合作默契。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p id="para" style="color:red">Red</p>/css将Red三个字母变成了红色
</body>
    <script type="text/javascript" src="app.js"></script>js将字体变成了蓝色（调用app.js）
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p id="para" style="color:red">Red</p>/css将Red三个字母变成了红色
</body>
    <script type="text/javascript" src="app.js"></script>js将字体变成了蓝色（调用app.js）
</html>

注解：在app.js中（Javascript）

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

将字体变成了蓝色。


当项目很大的时候，就需要


<!DOCTYPE html>
<html>
<head>
    <title>CSS example</title>
    <link href="./style.css" rel="stylesheet" type="text/css" />css脚本
</head>
<body>
    <p class="para">如果没有一个好的结构</p>
    <p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS example</title>
    <link href="./style.css" rel="stylesheet" type="text/css" />css脚本
</head>
<body>
    <p class="para">如果没有一个好的结构</p>
    <p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>

然后我们有一个像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;
}
.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的代码有如此多的相似 


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

       上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。不过相对来说这门语言还是比其他语言简单易懂一些。