物联网之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 来处理具体的问题
    
    
        
    


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);      
输出document以及math的类型(typeof得到类型)为 object object

object又是做什么的????

object(对象):无序属性的集合,属性可以包含基本值、函数等,还可以包含另一个对象(object)

举例子1(创建一个仅包含基本值的对象object):

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

举例子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()+"
"
);
于是,产生了这样一个可重用的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继承自Personvar phodal=new Chinese("phodal",50,166);声明一个对象
document.write(phodal.country);


3).补充说明的东东

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

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

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

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

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

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

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

  • 浏览器对象模型(BOM)——与浏览器交互的方法和接口
                       ==至于BOM,真正用到的机会很少,因为没有完善的统一的标准

一个简单的DOM示例,

html>




    
     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;
}
这代码和JS的代码有如此多的相似

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

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





你可能感兴趣的:(4-物联网(IOT))