基于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);