Home Explore Help
Register Sign In
github
/
designiot
mirror of https://github.com/phodal/designiot.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: gh-pages
Branches Tags
designiot
/
build
/
1.2.anywhere-javascript.md.html

1.2.anywhere-javascript.md.html 34 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <meta http-equiv="Content-Style-Type" content="text/css" />
    6. 

  6.   <meta name="generator" content="pandoc" />
    7. 

  7.   <title></title>
    8. 

  8.   <style type="text/css">code{white-space: pre;}</style>
    9. 

  9.   <style type="text/css">
    10. 

  10. div.sourceCode { overflow-x: auto; }
    11. 

  11. table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
    12. 

  12.   margin: 0; padding: 0; vertical-align: baseline; border: none; }
    13. 

  13. table.sourceCode { width: 100%; line-height: 100%; }
    14. 

  14. td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
    15. 

  15. td.sourceCode { padding-left: 5px; }
    16. 

  16. code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
    17. 

  17. code > span.dt { color: #902000; } /* DataType */
    18. 

  18. code > span.dv { color: #40a070; } /* DecVal */
    19. 

  19. code > span.bn { color: #40a070; } /* BaseN */
    20. 

  20. code > span.fl { color: #40a070; } /* Float */
    21. 

  21. code > span.ch { color: #4070a0; } /* Char */
    22. 

  22. code > span.st { color: #4070a0; } /* String */
    23. 

  23. code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
    24. 

  24. code > span.ot { color: #007020; } /* Other */
    25. 

  25. code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
    26. 

  26. code > span.fu { color: #06287e; } /* Function */
    27. 

  27. code > span.er { color: #ff0000; font-weight: bold; } /* Error */
    28. 

  28. code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
    29. 

  29. code > span.cn { color: #880000; } /* Constant */
    30. 

  30. code > span.sc { color: #4070a0; } /* SpecialChar */
    31. 

  31. code > span.vs { color: #4070a0; } /* VerbatimString */
    32. 

  32. code > span.ss { color: #bb6688; } /* SpecialString */
    33. 

  33. code > span.im { } /* Import */
    34. 

  34. code > span.va { color: #19177c; } /* Variable */
    35. 

  35. code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
    36. 

  36. code > span.op { color: #666666; } /* Operator */
    37. 

  37. code > span.bu { } /* BuiltIn */
    38. 

  38. code > span.ex { } /* Extension */
    39. 

  39. code > span.pp { color: #bc7a00; } /* Preprocessor */
    40. 

  40. code > span.at { color: #7d9029; } /* Attribute */
    41. 

  41. code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
    42. 

  42. code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
    43. 

  43. code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
    44. 

  44. code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
    45. 

  45.   </style>
    46. 

  46.   <link rel="stylesheet" href="css/vendor.css" type="text/css" />
    47. 

  47. </head>
    48. 

  48. <body>
    49. 

  49. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb" >
    50. 

  50. 	<head>
    51. 

  51. 		<title>一步步搭建物联网系统(教你设计物联网系统)</title>
    52. 

  52. 		<meta name="keywords" content="设计物联网系统,物联网系统设计">
    53. 

  53. 		<meta name="description" content="一份关于如何设计物联网系统的文档">
    54. 

  54. 		<link rel="stylesheet" href="../css/vendor.css" />
    55. 

  55. 	</head>
    56. 

  56. 	<body class="container inner wrap">
    57. 

  57. 		<h1>一步步搭建物联网系统(教你设计物联网系统)</h1>
    58. 

  58. 	</body>
    59. 

  59. </html>
    60. 

  60. <div id="TOC">
    61. 

  61. <ul>
    62. 

  62. <li><a href="#无处不在的javascript"><span class="toc-section-number">1</span> 无处不在的Javascript</a><ul>
    63. 

  63. <li><a href="#javascript的helloworld"><span class="toc-section-number">1.1</span> Javascript的Hello,world</a></li>
    64. 

  64. <li><a href="#更js一点"><span class="toc-section-number">1.2</span> 更js一点</a><ul>
    65. 

  65. <li><a href="#从数学出发"><span class="toc-section-number">1.2.1</span> 从数学出发</a></li>
    66. 

  66. </ul></li>
    67. 

  67. <li><a href="#设计和编程"><span class="toc-section-number">1.3</span> 设计和编程</a><ul>
    68. 

  68. <li><a href="#函数"><span class="toc-section-number">1.3.1</span> 函数</a></li>
    69. 

  69. <li><a href="#重新设计"><span class="toc-section-number">1.3.2</span> 重新设计</a></li>
    70. 

  70. <li><a href="#object和函数"><span class="toc-section-number">1.3.3</span> object和函数</a></li>
    71. 

  71. <li><a href="#面向对象"><span class="toc-section-number">1.3.4</span> 面向对象</a></li>
    72. 

  72. </ul></li>
    73. 

  73. <li><a href="#其他"><span class="toc-section-number">1.4</span> 其他</a></li>
    74. 

  74. <li><a href="#美妙之处"><span class="toc-section-number">1.5</span> 美妙之处</a></li>
    75. 

  75. </ul></li>
    76. 

  76. </ul>
    77. 

  77. </div>
    78. 

  78. <h1 id="无处不在的javascript"><span class="header-section-number">1</span> 无处不在的Javascript</h1>
    79. 

  79. <p>Javascript现在已经无处不在了，也许你正打开的某个网站，他便可能是node.js+json+javascript+mustache.js完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是你只要知道Javascript已经无处不在了，它可能就在你手机上的某个app里，就在你浏览的网页里，就运行在你IDE中的某个进程里。</p>
    80. 

  80. <h2 id="javascript的helloworld"><span class="header-section-number">1.1</span> Javascript的Hello,world</h2>
    81. 

  81. <p>这里我们还需要有一个helloworld.html，Javascript是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的helloworld.html</p>
    82. 

  82. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    83. 

  83. <span class="kw">&lt;html&gt;</span>
    84. 

  84.     <span class="kw">&lt;head&gt;&lt;/head&gt;</span>
    85. 

  85.     <span class="kw">&lt;body&gt;&lt;/body&gt;</span>
    86. 

  86. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    87. 

  87. <p>然后开始融入我们的javascript，向HTML中插入Javascript的方法，就需要用到html中的&lt;script&gt;标签，我们先用页面嵌入的方法来写helloworld。</p>
    88. 

  88. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    89. 

  89. <span class="kw">&lt;html&gt;</span>
    90. 

  90.     <span class="kw">&lt;head&gt;</span>
    91. 

  91.         <span class="kw">&lt;script&gt;</span>
    92. 

  92.             <span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span>
    93. 

  93.         <span class="op">&lt;</span><span class="ss">/script&gt;</span>
    94. 

  94. <span class="ss">    &lt;/head</span><span class="op">&gt;</span>
    95. 

  95.     <span class="op">&lt;</span>body<span class="op">&gt;&lt;</span><span class="ss">/body&gt;</span>
    96. 

  96. <span class="ss">&lt;/html</span><span class="op">&gt;</span></code></pre></div>
    97. 

  97. <p>按照标准的写法，我们还需要声明这个脚本的类型</p>
    98. 

  98. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    99. 

  99. <span class="kw">&lt;html&gt;</span>
    100. 

  100.     <span class="kw">&lt;head&gt;</span>
    101. 

  101.         <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
    102. 

  102.             <span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span>
    103. 

  103.         <span class="op">&lt;</span><span class="ss">/script&gt;</span>
    104. 

  104. <span class="ss">    &lt;/head</span><span class="op">&gt;</span>
    105. 

  105.     <span class="op">&lt;</span>body<span class="op">&gt;&lt;</span><span class="ss">/body&gt;</span>
    106. 

  106. <span class="ss">&lt;/html</span><span class="op">&gt;</span></code></pre></div>
    107. 

  107. <p>没有显示hello,world?试试下面的代码</p>
    108. 

  108. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    109. 

  109. <span class="kw">&lt;html&gt;</span>
    110. 

  110.     <span class="kw">&lt;head&gt;</span>
    111. 

  111.         <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
    112. 

  112.             <span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span>
    113. 

  113.         <span class="op">&lt;</span><span class="ss">/script&gt;</span>
    114. 

  114. <span class="ss">    &lt;/head</span><span class="op">&gt;</span>
    115. 

  115.     <span class="op">&lt;</span>body<span class="op">&gt;</span>
    116. 

  116.         <span class="op">&lt;</span>noscript<span class="op">&gt;</span>
    117. 

  117.             disable Javascript
    118. 

  118.         <span class="op">&lt;</span><span class="ss">/noscript&gt;</span>
    119. 

  119. <span class="ss">    &lt;/body</span><span class="op">&gt;</span>
    120. 

  120. <span class="op">&lt;</span><span class="ss">/html&gt;</span></code></pre></div>
    121. 

  121. <h2 id="更js一点"><span class="header-section-number">1.2</span> 更js一点</h2>
    122. 

  122. <p>我们需要让我们的代码看上去更像是js，同时是以js结尾。就像C语言的源码是以C结尾的，我们也同样需要让我们的代码看上去更正式一点。于是我们需要在helloworld.html的同一文件夹下创建一个app.js文件，在里面写着</p>
    123. 

  123. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span></code></pre></div>
    124. 

  124. <p>同时我们的helloworld.html还需要告诉我们的浏览器js代码在哪里</p>
    125. 

  125. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    126. 

  126. <span class="kw">&lt;html&gt;</span>
    127. 

  127.     <span class="kw">&lt;head&gt;</span>
    128. 

  128.         <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
    129. 

  129.     <span class="kw">&lt;/head&gt;</span>
    130. 

  130.     <span class="kw">&lt;body&gt;</span>
    131. 

  131.         <span class="kw">&lt;noscript&gt;</span>
    132. 

  132.             disable Javascript
    133. 

  133.         <span class="kw">&lt;/noscript&gt;</span>
    134. 

  134.     <span class="kw">&lt;/body&gt;</span>
    135. 

  135. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    136. 

  136. <h3 id="从数学出发"><span class="header-section-number">1.2.1</span> 从数学出发</h3>
    137. 

  137. <p>让我们回到第一章讲述的小明的问题，<strong>从实际问题下手编程，更容易学会编程</strong>。小学时代的数学题最喜欢这样子了——某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱。在编程方面，也许我们还算是小学生。最直接的方法就是直接计算3x5=?</p>
    138. 

  138. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="dv">3</span><span class="op">*</span><span class="dv">5</span>)<span class="op">;</span></code></pre></div>
    139. 

  139. <p>document.write实际也我们可以理解为输出，也就是往页面里写入3*5的结果，在有双引号的情况下会输出字符串。我们便会在浏览器上看到15，这便是一个好的开始，也是一个糟糕的开始。</p>
    140. 

  140. <h2 id="设计和编程"><span class="header-section-number">1.3</span> 设计和编程</h2>
    141. 

  141. <p>对于实际问题，如果我们只是止于所要得到的结果，很多年之后，我们就成为了code monkey。对这个问题进行再一次设计，所谓的设计有些时候会把简单的问题复杂化，有些时候会使以后的扩展更加简单。这一天因为这家商店的糖价格太高了，于是店长将价格降为了4块钱。</p>
    142. 

  142. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="dv">3</span><span class="op">*</span><span class="dv">4</span>)<span class="op">;</span></code></pre></div>
    143. 

  143. <p>于是我们又得到了我们的结果，但是下次我们看到这些代码的时候没有分清楚哪个是糖的数量，哪个是价格，于是我们重新设计了程序</p>
    144. 

  144. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">tang<span class="op">=</span><span class="dv">4</span><span class="op">;</span>
    145. 

  145. num<span class="op">=</span><span class="dv">3</span><span class="op">;</span>
    146. 

  146. <span class="va">document</span>.<span class="at">write</span>(tang<span class="op">*</span>num)<span class="op">;</span></code></pre></div>
    147. 

  147. <p>这才能叫得上是程序设计，或许你注意到了“;”这个符号的存在，我想说的是这是另外一个标准，我们不得不去遵守，也不得不去fuck。</p>
    148. 

  148. <h3 id="函数"><span class="header-section-number">1.3.1</span> 函数</h3>
    149. 

  149. <p>记得刚开始学三角函数的时候，我们会写</p>
    150. 

  150. <pre><code>sin 30=0.5</code></pre>
    151. 

  151. <p>而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们做一个简单的开始。</p>
    152. 

  152. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">hello</span>()<span class="op">{</span>
    153. 

  153.     <span class="cf">return</span> <span class="va">document</span>.<span class="at">write</span>(<span class="st">&quot;hello,world&quot;</span>)<span class="op">;</span>
    154. 

  154. <span class="op">}</span>
    155. 

  155. <span class="at">hello</span>()<span class="op">;</span></code></pre></div>
    156. 

  156. <p>当我第一次看到函数的时候，有些小激动终于出现了。我们写了一个叫hello的函数，它返回了往页面中写入hello,world的方法，然后我们调用了hello这个函数，于是页面上有了hello,world。</p>
    157. 

  157. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">sin</span>(degree)<span class="op">{</span>
    158. 

  158.     <span class="cf">return</span> <span class="va">document</span>.<span class="at">write</span>(<span class="va">Math</span>.<span class="at">sin</span>(degree))<span class="op">;</span>
    159. 

  159. <span class="op">}</span>
    160. 

  160. <span class="at">sin</span>(<span class="dv">30</span>)<span class="op">;</span></code></pre></div>
    161. 

  161. <p>在这里degree就称之为变量。 于是输出了-0.9880316240928602，而不是0.5，因为这里用的是弧度制，而不是角度制。</p>
    162. 

  162. <pre><code>sin(30)</code></pre>
    163. 

  163. <p>的输出结果有点类似于sin 30。写括号的目的在于，括号是为了方便解析，这个在不同的语言中可能是不一样的，比如在ruby中我们可以直接用类似于数学中的表达:</p>
    164. 

  164. <div class="sourceCode"><pre class="sourceCode ruby"><code class="sourceCode ruby"><span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">004</span> &gt; <span class="dt">Math</span>.sin <span class="dv">30</span>
    165. 

  165. =&gt; -<span class="fl">0.9880316240928618</span>
    166. 

  166. <span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">005</span> &gt;</code></pre></div>
    167. 

  167. <p>我们可以在函数中传入多个变量，于是我们再回到小明的问题，就会这样去编写代码。</p>
    168. 

  168. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">calc</span>(tang<span class="op">,</span>num)<span class="op">{</span>
    169. 

  169.     result<span class="op">=</span>tang<span class="op">*</span>num<span class="op">;</span>
    170. 

  170.     <span class="va">document</span>.<span class="at">write</span>(result)<span class="op">;</span>
    171. 

  171. <span class="op">}</span>
    172. 

  172. <span class="at">calc</span>(<span class="dv">3</span><span class="op">,</span><span class="dv">4</span>)<span class="op">;</span></code></pre></div>
    173. 

  173. <p>但是从某种程度上来说，我们的calc做了计算的事又做了输出的事，总的来说设计上有些不好。</p>
    174. 

  174. <h3 id="重新设计"><span class="header-section-number">1.3.2</span> 重新设计</h3>
    175. 

  175. <p>我们将输出的工作移到函数的外面，</p>
    176. 

  176. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">calc</span>(tang<span class="op">,</span>num)<span class="op">{</span>
    177. 

  177.     <span class="cf">return</span> tang<span class="op">*</span>num<span class="op">;</span>
    178. 

  178. <span class="op">}</span>
    179. 

  179. <span class="va">document</span>.<span class="at">write</span>(<span class="at">calc</span>(<span class="dv">3</span><span class="op">,</span><span class="dv">4</span>))<span class="op">;</span></code></pre></div>
    180. 

  180. <p>接着我们用一种更有意思的方法来写这个问题的解决方案</p>
    181. 

  181. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">calc</span>(tang<span class="op">,</span>num)<span class="op">{</span>
    182. 

  182.     <span class="cf">return</span> tang<span class="op">*</span>num<span class="op">;</span>
    183. 

  183. <span class="op">}</span>
    184. 

  184. <span class="kw">function</span> <span class="at">printResult</span>(tang<span class="op">,</span>num)<span class="op">{</span>
    185. 

  185.     <span class="va">document</span>.<span class="at">write</span>(<span class="at">calc</span>(tang<span class="op">,</span>num))<span class="op">;</span>
    186. 

  186. <span class="op">}</span>
    187. 

  187. <span class="at">printResult</span>(<span class="dv">3</span><span class="op">,</span> <span class="dv">4</span>)</code></pre></div>
    188. 

  188. <p>看上去更专业了一点点，如果我们只需要计算的时候我们只需要调用calc，如果我们需要输出的时候我们就调用printResult的方法。</p>
    189. 

  189. <h3 id="object和函数"><span class="header-section-number">1.3.3</span> object和函数</h3>
    190. 

  190. <p>我们还没有说清楚之前我们遇到过的document.write以及Math.sin的语法为什么看上去很奇怪，所以让我们看看他们到底是什么，修改app.js为以下内容</p>
    191. 

  191. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> document)<span class="op">;</span>
    192. 

  192. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> Math)<span class="op">;</span></code></pre></div>
    193. 

  193. <p>typeof document会返回document的数据类型，就会发现输出的结果是</p>
    194. 

  194. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">object object</code></pre></div>
    195. 

  195. <p>所以我们需要去弄清楚什么是object。对象的定义是</p>
    196. 

  196. <blockquote>
    197. 

  197. 无序属性的集合，其属性可以包含基本值、对象或者函数。
    198. 

  198. </blockquote>
    199. 

  199. <p>创建一个object，然后观察这便是我们接下来要做的</p>
    200. 

  200. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">store<span class="op">={};</span>
    201. 

  201. <span class="va">store</span>.<span class="at">tang</span><span class="op">=</span><span class="dv">4</span><span class="op">;</span>
    202. 

  202. <span class="va">store</span>.<span class="at">num</span><span class="op">=</span><span class="dv">3</span><span class="op">;</span>
    203. 

  203. <span class="va">document</span>.<span class="at">write</span>(<span class="va">store</span>.<span class="at">tang</span><span class="op">*</span><span class="va">store</span>.<span class="at">num</span>)<span class="op">;</span></code></pre></div>
    204. 

  204. <p>我们就有了和document.write一样的用法，这也是对象的美妙之处，只是这里的对象只是包含着基本值，因为</p>
    205. 

  205. <pre><code>typeof story.tang=&quot;number&quot;</code></pre>
    206. 

  206. <p>一个包含对象的对象应该是这样子的。</p>
    207. 

  207. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">store<span class="op">={};</span>
    208. 

  208. <span class="va">store</span>.<span class="at">tang</span><span class="op">=</span><span class="dv">4</span><span class="op">;</span>
    209. 

  209. <span class="va">store</span>.<span class="at">num</span><span class="op">=</span><span class="dv">3</span><span class="op">;</span>
    210. 

  210. <span class="va">document</span>.<span class="at">writeln</span>(<span class="va">store</span>.<span class="at">tang</span><span class="op">*</span><span class="va">store</span>.<span class="at">num</span>)<span class="op">;</span>
    211. 

  211. 

  212. <span class="kw">var</span> wall<span class="op">=</span><span class="kw">new</span> <span class="at">Object</span>()<span class="op">;</span>
    213. 

  213. <span class="va">wall</span>.<span class="at">store</span><span class="op">=</span>store<span class="op">;</span>
    214. 

  214. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> <span class="va">wall</span>.<span class="at">store</span>)<span class="op">;</span></code></pre></div>
    215. 

  215. <p>而我们用到的document.write和上面用到的document.writeln都是属于这个无序属性集合中的函数。</p>
    216. 

  216. <p>下面代码说的就是这个无序属性集中中的函数。</p>
    217. 

  217. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> IO<span class="op">=</span><span class="kw">new</span> <span class="at">Object</span>()<span class="op">;</span>
    218. 

  218. <span class="kw">function</span> <span class="at">print</span>(result)<span class="op">{</span>
    219. 

  219.     <span class="va">document</span>.<span class="at">write</span>(result)<span class="op">;</span>
    220. 

  220. <span class="op">};</span>
    221. 

  221. <span class="va">IO</span>.<span class="at">print</span><span class="op">=</span>print<span class="op">;</span>
    222. 

  222. <span class="va">IO</span>.<span class="at">print</span>(<span class="st">&quot;a obejct with function&quot;</span>)<span class="op">;</span>
    223. 

  223. <span class="va">IO</span>.<span class="at">print</span>(<span class="kw">typeof</span> <span class="va">IO</span>.<span class="at">print</span>)<span class="op">;</span></code></pre></div>
    224. 

  224. <p>我们定义了一个叫IO的对象，声明对象可以用</p>
    225. 

  225. <pre><code>var store={};</code></pre>
    226. 

  226. <p>又或者是</p>
    227. 

  227. <pre><code>var store=new Object{};</code></pre>
    228. 

  228. <p>两者是等价的，但是用后者的可读性会更好一点，我们定义了一个叫print的函数，他的作用也就是document.write，IO中的print函数是等价于print()函数，这也就是对象和函数之间的一些区别，对象可以包含函数，对象是无序属性的集合，其属性可以包含基本值、对象或者函数。</p>
    229. 

  229. <p>复杂一点的对象应该是下面这样的一种情况。</p>
    230. 

  230. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person<span class="op">={</span><span class="dt">name</span><span class="op">:</span><span class="st">&quot;phodal&quot;</span><span class="op">,</span><span class="dt">weight</span><span class="op">:</span><span class="dv">50</span><span class="op">,</span><span class="dt">height</span><span class="op">:</span><span class="dv">166</span><span class="op">};</span>
    231. 

  231. <span class="kw">function</span> <span class="at">dream</span>()<span class="op">{</span>
    232. 

  232.     future<span class="op">;</span>
    233. 

  233. <span class="op">};</span>
    234. 

  234. <span class="va">Person</span>.<span class="at">future</span><span class="op">=</span>dream<span class="op">;</span>
    235. 

  235. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> Person)<span class="op">;</span>
    236. 

  236. <span class="va">document</span>.<span class="at">write</span>(<span class="va">Person</span>.<span class="at">future</span>)<span class="op">;</span></code></pre></div>
    237. 

  237. <p>而这些会在我们未来的实际编程过程中用得更多。</p>
    238. 

  238. <h3 id="面向对象"><span class="header-section-number">1.3.4</span> 面向对象</h3>
    239. 

  239. <p>开始之前先让我们简化上面的代码，</p>
    240. 

  240. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">Person</span>.<span class="at">future</span><span class="op">=</span><span class="kw">function</span> <span class="at">dream</span>()<span class="op">{</span>
    241. 

  241.     future<span class="op">;</span>
    242. 

  242. <span class="op">}</span></code></pre></div>
    243. 

  243. <p>看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。</p>
    244. 

  244. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person<span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    245. 

  245.     <span class="kw">this</span>.<span class="at">name</span><span class="op">=</span><span class="st">&quot;phodal&quot;</span><span class="op">;</span>
    246. 

  246.     <span class="kw">this</span>.<span class="at">weight</span><span class="op">=</span><span class="dv">50</span><span class="op">;</span>
    247. 

  247.     <span class="kw">this</span>.<span class="at">height</span><span class="op">=</span><span class="dv">166</span><span class="op">;</span>
    248. 

  248.     <span class="kw">this</span>.<span class="at">future</span><span class="op">=</span><span class="kw">function</span> <span class="at">dream</span>()<span class="op">{</span>
    249. 

  249.         <span class="cf">return</span> <span class="st">&quot;future&quot;</span><span class="op">;</span>
    250. 

  250.     <span class="op">};</span>
    251. 

  251. <span class="op">};</span>
    252. 

  252. <span class="kw">var</span> person<span class="op">=</span><span class="kw">new</span> <span class="at">Person</span>()<span class="op">;</span>
    253. 

  253. <span class="va">document</span>.<span class="at">write</span>(<span class="va">person</span>.<span class="at">name</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    254. 

  254. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> person<span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    255. 

  255. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> <span class="va">person</span>.<span class="at">future</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    256. 

  256. <span class="va">document</span>.<span class="at">write</span>(<span class="va">person</span>.<span class="at">future</span>()<span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span></code></pre></div>
    257. 

  257. <p>只是在这个时候Person是一个函数，但是我们声明的person却变成了一个对象<strong>一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。</strong>这里的“&lt;br&gt;”是HTML中的元素，称之为DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下this。this关键字表示函数的所有者或作用域，也就是这里的Person。</p>
    258. 

  258. <p>上面的方法显得有点不可取，换句话说和一开始的</p>
    259. 

  259. <pre><code>document.write(3*4);</code></pre>
    260. 

  260. <p>一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。</p>
    261. 

  261. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person<span class="op">=</span><span class="kw">function</span>(name<span class="op">,</span>weight<span class="op">,</span>height)<span class="op">{</span>
    262. 

  262.     <span class="kw">this</span>.<span class="at">name</span><span class="op">=</span>name<span class="op">;</span>
    263. 

  263.     <span class="kw">this</span>.<span class="at">weight</span><span class="op">=</span>weight<span class="op">;</span>
    264. 

  264.     <span class="kw">this</span>.<span class="at">height</span><span class="op">=</span>height<span class="op">;</span> 
    265. 

  265.     <span class="kw">this</span>.<span class="at">future</span><span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    266. 

  266.         <span class="cf">return</span> <span class="st">&quot;future&quot;</span><span class="op">;</span>
    267. 

  267.     <span class="op">};</span>
    268. 

  268. <span class="op">};</span>
    269. 

  269. <span class="kw">var</span> phodal<span class="op">=</span><span class="kw">new</span> <span class="at">Person</span>(<span class="st">&quot;phodal&quot;</span><span class="op">,</span><span class="dv">50</span><span class="op">,</span><span class="dv">166</span>)<span class="op">;</span>
    270. 

  270. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">name</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    271. 

  271. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">weight</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    272. 

  272. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">height</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    273. 

  273. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">future</span>()<span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span></code></pre></div>
    274. 

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

  275. <h2 id="其他"><span class="header-section-number">1.4</span> 其他</h2>
    276. 

  276. <p>Javascript还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。</p>
    277. 

  277. <p>所谓的继承，</p>
    278. 

  278. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Chinese<span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    279. 

  279.     <span class="kw">this</span>.<span class="at">country</span><span class="op">=</span><span class="st">&quot;China&quot;</span><span class="op">;</span>
    280. 

  280. <span class="op">}</span>
    281. 

  281. 

  282. <span class="kw">var</span> Person<span class="op">=</span><span class="kw">function</span>(name<span class="op">,</span>weight<span class="op">,</span>height)<span class="op">{</span>
    283. 

  283.     <span class="kw">this</span>.<span class="at">name</span><span class="op">=</span>name<span class="op">;</span>
    284. 

  284.     <span class="kw">this</span>.<span class="at">weight</span><span class="op">=</span>weight<span class="op">;</span>
    285. 

  285.     <span class="kw">this</span>.<span class="at">height</span><span class="op">=</span>height<span class="op">;</span> 
    286. 

  286.     <span class="kw">this</span>.<span class="at">futrue</span><span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    287. 

  287.         <span class="cf">return</span> <span class="st">&quot;future&quot;</span><span class="op">;</span>
    288. 

  288.     <span class="op">}</span>
    289. 

  289. <span class="op">}</span>
    290. 

  290. <span class="va">Chinese</span>.<span class="at">prototype</span><span class="op">=</span><span class="kw">new</span> <span class="at">Person</span>()<span class="op">;</span>
    291. 

  291. 

  292. <span class="kw">var</span> phodal<span class="op">=</span><span class="kw">new</span> <span class="at">Chinese</span>(<span class="st">&quot;phodal&quot;</span><span class="op">,</span><span class="dv">50</span><span class="op">,</span><span class="dv">166</span>)<span class="op">;</span>
    293. 

  293. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">country</span>)<span class="op">;</span></code></pre></div>
    294. 

  294. <p>完整的Javascript应该由下列三个部分组成:</p>
    295. 

  295. <ul>
    296. 

  296. <li>核心(ECMAScript)——核心语言功能</li>
    297. 

  297. <li>文档对象模型(DOM)——访问和操作网页内容的方法和接口</li>
    298. 

  298. <li>浏览器对象模型(BOM)——与浏览器交互的方法和接口</li>
    299. 

  299. </ul>
    300. 

  300. <p>我们在上面讲的都是ECMAScript，也就是语法相关的，但是JS真正强大的，或者说我们最需要的可能就是对DOM的操作，这也就是为什么jQuery等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于BOM，真正用到的机会很少，因为没有完善的统一的标准。</p>
    301. 

  301. <p>一个简单的DOM示例,</p>
    302. 

  302. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    303. 

  303. <span class="kw">&lt;html&gt;</span>
    304. 

  304. <span class="kw">&lt;head&gt;</span>
    305. 

  305. <span class="kw">&lt;/head&gt;</span>
    306. 

  306. <span class="kw">&lt;body&gt;</span>
    307. 

  307.     <span class="kw">&lt;noscript&gt;</span>
    308. 

  308.         disable Javascript
    309. 

  309.     <span class="kw">&lt;/noscript&gt;</span>
    310. 

  310.     <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span>
    311. 

  311. <span class="kw">&lt;/body&gt;</span>
    312. 

  312.     <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
    313. 

  313. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    314. 

  314. <p>我们需要修改一下helloworld.html添加</p>
    315. 

  315. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span></code></pre></div>
    316. 

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

  317. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;para&quot;</span>)<span class="op">;</span>
    318. 

  318. <span class="va">para</span>.<span class="va">style</span>.<span class="at">color</span><span class="op">=</span><span class="st">&quot;blue&quot;</span><span class="op">;</span></code></pre></div>
    319. 

  319. <p>接着，字体就变成了蓝色，有了DOM我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过DOM操作实现的。</p>
    320. 

  320. <h2 id="美妙之处"><span class="header-section-number">1.5</span> 美妙之处</h2>
    321. 

  321. <p>这里说到的Javascript仅仅只是其中的一小小部分，忽略掉的东西很多，只关心的是如何去设计一个实用的app，作为一门编程语言，他还有其他强大的内制函数，要学好需要一本有价值的参考书。这里提到的只是其中的不到20%的东西，其他的80%或者更多会在你解决问题的时候出现。</p>
    322. 

  322. <ul>
    323. 

  323. <li>我们可以创建一个对象或者函数，它可以包含基本值、对象或者函数。</li>
    324. 

  324. <li>我们可以用Javascript修改页面的属性，虽然只是简单的示例。</li>
    325. 

  325. <li>我们还可以去解决实际的编程问题。</li>
    326. 

  326. </ul>
    327. 

  327. </body>
    328. 

  328. </html>
    329.