一步步搭建物联网体系——无处不在的Javascript

2019年8月26日 190次阅读来源: phodal

无处不在的Javascript

Javascript如今已无处不在了，也许你正翻开的某个网站，他便多是node.js+json+javascript+mustache.js完成的，虽然你还没明白上面那些是什么，也恰是由于你不明白才须要去进修更多的东西。然则你只需晓得Javascript已无处不在了，它能够就在你手机上的某个app里，就在你阅读的网页里，就运转在你IDE中的某个历程里。

Javascript的Hello,world

这里我们还须要有一个helloworld.html，Javascript是专为网页交互而设想的剧本言语，所以我们一点点来最先这部份的旅途，先写一个相符规范的helloworld.html

html<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

然后最先融入我们的javascript，向HTML中插进去Javascript的要领，就须要用到html中的\<script>标签，我们先用页面嵌入的要领来写helloworld。

html<!DOCTYPE html>
<html>
    <head>
        <script>
            document.write('hello,world');
        </script>
    </head>
    <body></body>
</html>

根据规范的写法，我们还须要声明这个剧本的范例

html<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            document.write('hello,world');
        </script>
    </head>
    <body></body>
</html>

没有显现hello,world?尝尝下面的代码

html<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            document.write('hello,world');
        </script>
    </head>
    <body>
        <noscript>
            disable Javascript
        </noscript>
    </body>
</html>

更js一点

我们须要让我们的代码看上去更像是js，同时是以js末端。就像C言语的源码是以C末端的，我们也一样须要让我们的代码看上去更正式一点。因而我们须要在helloworld.html的一致文件夹下建立一个app.js文件，在里面写着

javascriptdocument.write('hello,world');

同时我们的helloworld.html还须要通知我们的阅读器js代码在那里

html<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
        <noscript>
            disable Javascript
        </noscript>
    </body>
</html>

从数学动身

让我们回到第一章报告的小明的题目，从现实题目动手编程，更轻易学会编程。小学时期的数学题最喜欢这模样了——某市肆里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱。在编程方面，也许我们还算是小学生。最直接的要领就是直接盘算3×5=?

javascriptdocument.write(3*5);

document.write现实也我们能够明白为输出，也就是往页面里写入3*5的结果，在有双引号的状况下会输出字符串。我们便会在阅读器上看到15，这便是一个好的最先，也是一个蹩脚的最先。

设想和编程

关于现实题目，假如我们只是止于所要获得的结果，许多年今后，我们就成为了code monkey。对这个题目举行再一次设想，所谓的设想有些时刻会把简朴的题目庞杂化，有些时刻会使今后的扩大越发简朴。这一天由于这家市肆的糖价钱太高了，因而店长将价钱降为了4块钱。

javascriptdocument.write(3*4);

因而我们又获得了我们的结果，然则下次我们看到这些代码的时刻没有分清晰哪一个是糖的数目，哪一个是价钱，因而我们从新设想了顺序

javascripttang=4;
num=3;
document.write(tang*num);

这才叫得上是顺序设想，也许你注重到了”;”这个标记的存在，我想说的是这是别的一个规范，我们不得不去恪守，也不得不去fuck。

函数

记得刚最先学三角函数的时刻，我们会写

sin 30=0.5

而我们的函数也是相似于此，换句话说，由于许多搞盘算机的前驱都学好了数学，都把数学天下的规律带到了盘算机天下，所以我们的函数也是相似于此，让我们做一个简朴的最先。

javascriptfunction hello(){
    return document.write("hello,world");
}
hello();

当我第一次看到函数的时刻，有些小冲动终究涌现了。我们写了一个叫hello的函数，它返回了往页面中写入hello,world的要领，然后我们挪用了hello这个函数，因而页面上有了hello,world。

javascriptfunction sin(degree){
    return document.write(Math.sin(degree));
}
sin(30);

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

sin(30)

的输出结果有点相似于sin 30。写括号的目标在于，括号是为了轻易剖析，这个在差别的言语中多是不一样的，比如在ruby中我们能够直接用相似于数学中的表达:

ruby2.0.0-p353 :004 > Math.sin 30
=> -0.9880316240928618
2.0.0-p353 :005 >

我们能够在函数中传入多个变量，因而我们再回到小明的题目，就会如许去编写代码。

javascriptfunction calc(tang,num){
    result=tang*num;
    document.write(result);
}
calc(3,4);

然则从某种程度上来讲，我们的calc做了盘算的事又做了输出的事，总的来讲设想上有些不好。

从新设想

我们将输出的事情移到函数的表面，

javascriptfunction calc(tang,num){
    return tang*num;
}
document.write(calc(3,4));

接着我们用一种更有意义的要领来写这个题目标处理方案

javascriptfunction calc(tang,num){
    return tang*num;
}
function printResult(tang,num){
    document.write(calc(tang,num));
}
printResult(3, 4)

看上去更专业了一点点，假如我们只须要盘算的时刻我们只须要挪用calc，假如我们须要输出的时刻我们就挪用printResult的要领。

object和函数

我们还没有说清晰之前我们遇到过的document.write以及Math.sin的语法为何看上去很新鲜，所以让我们看看他们究竟是什么，修正app.js为以下内容

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

typeof document会返回document的数据范例，就会发明输出的结果是

javascriptobject object

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

无序属性的鸠合，其属性能够包括基础值、对象或许函数。

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

javascriptstore={};
store.tang=4;
store.num=3;
document.write(store.tang*store.num);

我们就有了和document.write一样的用法，这也是对象的美好的地方，只是这里的对象只是包括着基础值，由于

typeof story.tang="number"

一个包括对象的对象应该是这模样的。

javascriptstore={};
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都是属于这个无序属性鸠合中的函数。

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

javascriptvar 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()函数，这也就是对象和函数之间的一些区分，对象能够包括函数，对象是无序属性的鸠合，其属性能够包括基础值、对象或许函数。

庞杂一点的对象应该是下面如许的一种状况。

javascriptvar Person={name:"phodal",weight:50,height:166};
function dream(){
    future;
};
Person.future=dream;
document.write(typeof Person);
document.write(Person.future);

而这些会在我们将来的现实编程过程当中用得更多。

面向对象

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

javascriptPerson.future=function dream(){
    future;
}

看上去比上面的简朴多了，不过我们还能够简化为下面的代码。。。

javascriptvar 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+"<br>");
document.write(typeof person+"<br>");
document.write(typeof person.future+"<br>");
document.write(person.future()+"<br>");

只是在这个时刻Person是一个函数，然则我们声明的person却变成了一个对象一个Javascript函数也是一个对象，而且，一切的对象从技术上讲也只不过是函数。这里的”\<br>”是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后引见它，这里我们先体贴下this。this关键字示意函数的一切者或作用域，也就是这里的Person。

上面的要领显得有点不可取，换句话说和一最先的

document.write(3*4);

一样，不具有灵活性，因此在我们完成功用今后，我们须要对其举行优化，这就是顺序设想的真理——处理完现实题目后，我们须要最先真正的设想，而不是处理题目时的编程。

javascriptvar 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关键字确立了属性的一切者。

其他

Javascript另有一个很壮大的特征，也就是原型继续，不过这里我们先不斟酌这些部份，用只管少的代码及关键字来现实我们所要表达的中心功用，这才是这里的中心，其他的东西我们能够从其他书本上学到。

所谓的继续，

javascriptvar 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示例,

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增加

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

同时还须要将script标签移到body下面，假如没有不测的话我们会看到页面上用赤色的字体显现Red，修正app.js。

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

接着，字体就变成了蓝色，有了DOM我们就能够对页面举行操纵，能够说我们看到的绝大部份的页面结果都是经由过程DOM操纵完成的。

美好的地方

这里说到的Javascript仅仅只是个中的一小小部份，疏忽掉的东西许多，只体贴的是怎样去设想一个有用的app，作为一门编程言语，他另有其他壮大的内制函数，要学好须要一本有价值的参考书。这里提到的只是个中的不到20%的东西，其他的80%或许更多会在你处理题目标时刻涌现。

我们能够建立一个对象或许函数，它能够包括基础值、对象或许函数。
我们能够用Javascript修正页面的属性，虽然只是简朴的示例。
我们还能够去处理现实的编程题目。

在线检察:一步步搭建物联网体系

图灵-电子书版一步步搭建物联网体系

    原文作者：phodal
    原文地址: https://segmentfault.com/a/1190000002485879
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。