Html5入门教程系列(2)--javascript介绍霓虹建站 > 后花园 > 网站运营

<p>说起html5,可能是近1-2年最火的技术词汇之一了,由于市场需求爆增,人才也趋之若鹜。javascript是前端编程中最为重要的技能之一,是学习前端编程必不可少的。本篇介绍javascript,重点从javascript与其他语言的不同点入手。</p>

<h2 id="javascript">理解javascript</h2>

<p>先说一句废话:javascriptjava没有半毛钱关系。javascript是ECMAScript的一种实现,而后者广泛应用于web客户端的编程,除了javascript以外,还有ActionScript也是ECMAScript的实现之一,而ActionScript应用于flash编程。javascript大致由三部分组成:ECMAScriptDOMBOM</p>

<p></p>

  • DOM:即文档对象模型(Document Object Model),该模型允许通过javascript动态修改html文档的结构和内容,其重要性甚至超过javascript语法本身,可以说如果没有DOM,javascript根本没有卵用。例如

<figure class="highlight"><pre><span class="nt"><div</span> <span class="na">id=</span><span class="s">"main"</span><span class="nt">></div></span></pre></figure>

<p>执行如下代码后</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">main</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getELementById</span><span class="p">(</span><span class="s1">'main'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'p'</span><span class="p">);</span>
<span class="nx">main</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span>
</pre></figure>

<figure class="highlight"><pre><span class="nt"><div</span> <span class="na">id=</span><span class="s">"main"</span><span class="nt">><p></p></div></span></pre></figure>

  • BOM:即浏览器对象模型(Browser Object Model),该模型允许javascript有限的控制浏览器本身而不是html文档

<figure class="highlight"><pre><span class="nb">window</span><span class="p">.</span><span class="nx">history</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span>
</pre></figure>

<h2 id="javascript-1">javascript的不同之处</h2>

<h3 id="section">弱类型</h3>

<p>与C++、C#、java不同在于,javascript是弱类型的,一个变量可以赋予任何的类型</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mf">0.5</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="s1">'str'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="s2">"str"</span><span class="p">;</span> <span class="c1">//双引号和单引号都可以表示字符串</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">];</span> <span class="c1">//数组</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span><span class="err">…</span><span class="p">}</span> <span class="c1">//函数类型</span>
</pre></figure>

<p>虽说是弱类型语言,但是类型是存在的,下面列举常见的javascript的内置类型</p>

<figure class="highlight"><pre><span class="k">typeof</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">//number
类型</span>
<span class="k">typeof</span><span class="p">(</span><span class="kc">NaN</span><span class="p">)</span> <span class="c1">//特殊的number
类型,表示非数字</span>
<span class="k">typeof</span><span class="p">(</span><span class="s2">"123"</span><span class="p">)</span> <span class="c1">//string
</span>
<span class="k">typeof</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="c1">//boolean
</span>
<span class="k">typeof</span><span class="p">(</span><span class="nb">window</span><span class="p">)</span> <span class="c1">//object
</span>
<span class="k">typeof</span><span class="p">(</span><span class="nb">document</span><span class="p">)</span> <span class="c1">//object
</span>
<span class="k">typeof</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> <span class="c1">//object
</span>
<span class="k">typeof</span><span class="p">(</span><span class="nb">eval</span><span class="p">)</span> <span class="c1">//function
 eval是个函数</span>
<span class="k">typeof</span><span class="p">(</span><span class="nx">sss</span><span class="p">)</span><span class="err">:</span> <span class="c1">//undefined
表示变量未定义,当使用一个未定义的变量,这个变量不是null也不是false更不是""(空字串),而是一个特殊的叫undefined的表达</span>
<span class="k">typeof</span><span class="p">(</span><span class="kc">undefined</span><span class="p">)</span> <span class="c1">//undefined本身也是undefined</span>
</pre></figure>

<h3 id="object">object</h3>

<p>object的使用十分简单,我们可以用json形式的字面代码来表达一个object:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">global</span> <span class="o">=</span> <span class="p">{</span> <span class="c1">//Using json-like string to define an object</span>
<span class="na">config</span><span class="p">:</span> <span class="p">{</span>

   <span class="na">schema</span><span class="p">:</span> <span class="s1">'http'</span><span class="p">,</span>
   <span class="na">port</span><span class="p">:</span> <span class="s1">'8080'</span><span class="p">,</span>
   <span class="na">host</span><span class="p">:</span> <span class="s1">'example.com'</span>

<span class="p">},</span>

<span class="na">getUrl</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>

  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">schema</span> <span class="o">+</span> <span class="s1">'://'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">host</span> <span class="o">+</span> <span class="s1">':'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">port</span><span class="p">;</span>

<span class="p">}</span>
<span class="p">}</span>

<span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">schema</span> <span class="c1">//'http'</span>
<span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">getUrl</span><span class="p">()</span> <span class="c1">//http://example.com:8080</span>
</pre></figure>

<p>可以看到,一个对象可以包含任何层次的属性或子对象,甚至,可以包含函数。传统的静态类型语言,往往需要我们事先定义好类型(class),然后通过实例化调用来生成对象。而javascript无需定义这种类型模板。javascript甚至没有class的概念。当然,关于这一点,有利也有弊:比如如果在javascript中希望反复的生成相同模板的对象,就显的不够优雅了,我们需要使用原型链继承来模拟class这个概念,后面会详细讲述原型链这个问题。</p>

<p>除了在定义对象的时候可以为所欲为外,我们可以为所欲为的对一个已经存在的对象添加属性、方法,还可以通过for循环来遍历对象的属性,比C#java中反射之类的办法容易太多了。</p>

<figure class="highlight"><pre><span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">path</span> <span class="c1">//undefined</span>

<span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">path</span> <span class="o">=</span> <span class="s1">'/api/v1/lessons'</span> <span class="c1">//OK</span>
<span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">path</span> <span class="c1">// '/api/v1/lessons'</span>

<span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">[</span><span class="s1">'path'</span><span class="p">]</span> <span class="c1">// '/api/v1/lessons'</span>

<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">name</span> <span class="k">in</span> <span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">){</span> <span class="c1">//遍历对象的属性</span>

<span class="nx">global</span><span class="p">.</span><span class="nx">config</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span>

<span class="p">}</span></pre></figure>

<h3 id="section-1">函数</h3>

<p>函数在javascript中最为常见,然而你可能不知道的是,一个函数实际也是一个对象(一个函数类型的对象实例)。函数的定义有很多种形式,这里我们也可以说实例化一个函数对象有很多种形式:</p>

<figure class="highlight"><pre><span class="c1">//定义一个叫a的函数对象</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">){</span>
<span class="err">…</span>
<span class="p">}</span>

<span class="c1">//定义一个叫a的函数对象,也可以这么简写</span>
<span class="kd">function</span> <span class="nx">a</span><span class="p">(</span><span class="nx">args</span><span class="p">){</span>
<span class="err">…</span>
<span class="p">}</span>

<span class="c1">//内部实际上是这么工作的,实例化一个Function类型的对象</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Function</span><span class="p">(</span><span class="err">…</span><span class="p">)</span>

<span class="c1">//于是这里其实是实例化了一个匿名函数对象,并将该函数对象作为click方法的参数,调用a.click方法</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>

<span class="p">...</span>

<span class="p">})</span></pre></figure>

<p>调用函数的时候,跟大多数语言类型,使用(),不过javascript也有自己的特殊方式,对于上述示例的a方法,有如下几种调用形式:</p>

<figure class="highlight"><pre><span class="nx">a</span><span class="p">()</span> <span class="c1">//虽然没有传入参数,但是这样调用是可以的,在a内部args此时将是undefined</span>
<span class="nx">a</span><span class="p">(</span><span class="s1">'param'</span><span class="p">)</span> <span class="c1">//在a内部args此时将是字符串param</span>
<span class="nx">a</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="s1">'param'</span><span class="p">)</span> <span class="c1">//即使参数超过"规定",仍然可以工作,在a内部args此时将是number类型的1</span>

<span class="c1">//以下两种方式是javascript特有的函数调用,call和apply也是可以调用函数的,不同之处是可以控制函数内部的this指针</span>
<span class="c1">//这种形式在javascript的库中很常见,这里不做展开了</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="err">…</span><span class="p">)</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="err">…</span><span class="p">)</span>
</pre></figure>

<h3 id="section-2">逻辑运算和隐式转化</h3>

<p>在javascript中,null undefined 0 false ""在进行if测试时,将为假。其他情况都是真!</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="p">){</span>
<span class="c1">//此时a应该能通过if测试</span>
<span class="p">}</span>

<span class="c1">//var a = new Date();</span>
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">a</span><span class="p">){</span>

<span class="c1">//由于没有定义a,所以a为undefined</span>
<span class="c1">//而!a,就是真</span>

<span class="p">}</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){}</span>
<span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="p">){</span>

<span class="c1">//a是一个函数对象,所以为真</span>

<span class="p">}</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span>
<span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="p">){</span>
<span class="c1">//a为真</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="s1">''</span>
<span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="p">){</span>
<span class="c1">//a是空字串,所以这里判为假</span>
<span class="p">}</span>
</pre></figure>

<p>从上面的例子中可以看到,在逻辑真假判断上,javascript比静态语言松散很多,所以在实际的编程上也带来了很多方便之处,比如这段代码视图判断a是否是函数对象,如果是则调用a:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){}</span>
<span class="k">if</span><span class="p">(</span><span class="nx">a</span> <span class="o">&&</span> <span class="k">typeof</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="o">==</span> <span class="s2">"function"</span><span class="p">){</span>
<span class="nx">a</span><span class="p">();</span>
<span class="p">}</span>
</pre></figure>

<p>甚至可以去掉if关键字写成如下形式:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){}</span>
<span class="nx">a</span> <span class="o">&&</span> <span class="k">typeof</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="o">==</span> <span class="s2">"function"</span> <span class="o">&&</span> <span class="nx">a</span><span class="p">();</span>
</pre></figure>

<p>对于javascript,第二种写法显然更好,因为它节省了代码本身的长度,也就节省了下载javascript时候的时间。如果是用静态编程语言的话,恐怕就啰嗦很多了。如果你不以为然,那么看下面这个更常见的例子:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">){</span>

<span class="kd">var</span> <span class="nx">_options</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">if</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="nx">_options</span> <span class="o">=</span> <span class="nx">options</span><span class="p">;</span>
<span class="c1">//use _options</span>
<span class="err">…</span>

<span class="p">}</span></pre></figure>

<p>上面的代码在函数中,为了保证options的正确使用(因为在调用a的时候甚至可以不传入任何参数),至少保证options是一个object。在很多javascript的库中这种代码很常见,通常都写成如下形式:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">){</span>

<span class="kd">var</span> <span class="nx">_options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="c1">//use _options</span>
<span class="err">…</span>

<span class="p">}</span></pre></figure>

<p>首先检测传入的options是否为真,如果是真,那么_options自然就赋值为options,||检测终止;如果options为假,那么继续检测||后面的<span class="p">{}</span>,并将<span class="p">{}</span>返回赋值给_options。这个技巧很常用,可以牢记。</p>

<p>关于判等,正如许多弱类型语言一样,javascript分为=====:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="s1">'0'</span><span class="p">;</span>
<span class="nx">a</span> <span class="o">==</span> <span class="nx">b</span> <span class="c1">//will be true</span>
<span class="nx">a</span> <span class="o">===</span> <span class="nx">b</span> <span class="c1">//will be false</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="nx">a</span> <span class="o">==</span> <span class="nx">b</span> <span class="c1">//will be true</span>
<span class="nx">a</span> <span class="o">===</span> <span class="nx">b</span> <span class="c1">//will be false</span>
<span class="nx">a</span> <span class="o">!=</span> <span class="nx">b</span> <span class="c1">//will be false</span>
<span class="nx">a</span> <span class="o">!==</span> <span class="nx">b</span> <span class="c1">//will be true</span>
</pre></figure>

<h3 id="section-3">数组</h3>

<p>数组也是一种javascript类型,有如下操作方法:</p>

<figure class="highlight"><pre><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">);</span>
<span class="nx">a</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">a</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">)</span>
<span class="p">{</span>

<span class="nx">a</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span>

<span class="p">}</span>

<span class="nx">a</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">,</span><span class="nx">index</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">item</span> <span class="o">+</span> <span class="s1">' is at index of '</span> <span class="o">+</span> <span class="nx">index</span><span class="p">);</span>
<span class="p">})</span>
</pre></figure>

<p>值得一提的是,a.forEach是a对象的一个方法,然而我们在定义a对象的时候,并没有给a赋予forEach函数,这个函数是哪里来的呢?答案是:这个函数是Array类型的原型函数,会被Array类型的对象继承。关于原型和继承将在后面的内容中详细说明。作为javascript介绍章节,就此打住。</p>

<h2 id="section-4">练习</h2>

<p>最后,来完成一个小练习,javascript简易计算器:</p>

<p></p>

<p>你可以从这里获得示例代码</p>

标签: html5入门教程

联系我们期待您的来信!我们会认真诚实的对待每一位客户,有来信必将得到我们的回复!

谢谢您能联系我们!
嘿,我来帮您!