3.htm

javascript book

          <font face="宋体" lang="ZH-CN"> 
          <p style="line-height: 150%"><font size="3">事件处理语句集；</font></p>
          <p style="line-height: 150%"><font size="3">……</font></p>
          <p style="line-height: 150%"><font size="3">}</font></p>
          </font>
        </dir>
      </dir>
      <b><font face="宋体" lang="ZH-CN">
      <p style="line-height: 150%"><font size="3">３、事件驱动</font></p>
      </font></b>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（１）单击事件onClick</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：</font></p>
      <ul>
        <li>
          <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">button（按钮对象）</font>
        <li>
          <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">checkbox（复选框）或（检查列表框）</font>
        <li>
          <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">radio  
          （单选钮）</font> 
        <li> 
          <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">reset  
          buttons（重要按钮）</font> 
        <li> 
          <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">submit  
          buttons（提交按钮）</font></li> 
      </ul> 
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">例：可通过下列按钮激活change()文件：</font></p> 
      <font face="宋体" lang="ZH-CN"> 
      <p style="line-height: 150%"><font size="3">&lt;Form&gt;</font></p>
      </font>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Input 
      type=&quot;button&quot; Value=“ ” onClick=&quot;change()&quot;&gt;</font></p>
      <font face="宋体" lang="ZH-CN">
      <p style="line-height: 150%"><font size="3">&lt;/Form&gt;</font></p>
      </font>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Input  
      type=&quot;button&quot; value=&quot; &quot; onclick=alert(&quot;这是一个例子&quot;）;</font></p> 
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（２）onChange改变事件</font></p> 
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">例：  
      &lt;Form&gt;</font></p> 
      <font face="宋体" lang="ZH-CN"> 
      <p style="line-height: 150%"><font size="3">&lt;Input type=&quot;text&quot;  
      name=&quot;Test&quot; value=&quot;Test&quot;  
      onCharge=&quot;check('this.test)&quot;&gt;</font></p> 
      <p style="line-height: 150%"><font size="3">&lt;/Form&gt;</font></p>
      </font>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（３）选中事件onSelect</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当Text或Textarea对象中的文字被加亮后，引发该事件。</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（４）获得焦点事件onFocus</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（５）失去焦点onBlur</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（６）载入文件onLoad</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（７）卸载文件onUnload</font></p>
      <p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　当Web页面退出时引发onUnload事件，并可更新Cookie的状态。</font></p>
      <font face="宋体" lang="ZH-CN">
      <p style="line-height: 150%"><font size="3">四、范例</font></p>
      <p style="line-height: 150%"><font size="3">　　范例1：下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。</font></p>
      <p style="line-height: 150%"><font size="3">test3_1.htm</font></p>
      <p><font size="3">&lt;HTML&gt;</font></p>
      <p><font size="3">&lt;HEAD&gt;</font></p>
      <p><font size="3">&lt;script Language=&quot;JavaScript&quot;&gt;</font></p> 
      <p><font size="3">&lt;!--</font></p>
      <p><font size="3">function loadform(){</font></p> 
      </font> 
      <dir> 
        <dir> 
          <p><font face="宋体" lang="ZH-CN" size="3">alert(&quot;这是一个自动装载例子!&quot;);</font></p> 
        </dir> 
      </dir> 
      <font face="宋体" lang="ZH-CN"> 
      <p><font size="3">}</font></p>
      <p><font size="3">function unloadform(){</font></p> 
      </font> 
      <dir> 
        <dir> 
          <p><font face="宋体" lang="ZH-CN" size="3">alert(&quot;这是一个卸载例子!&quot;);</font></p> 
        </dir> 
      </dir> 
      <font face="宋体" lang="ZH-CN"> 
      <p><font size="3">}</font></p>
      <p><font size="3">//--&gt;</font></p>
      <p><font size="3">&lt;/Script&gt;</font></p>
      <p><font size="3">&lt;/HEAD&gt;</font></p>
      <p><font size="3">&lt;BODY OnLoad=&quot;loadform()&quot;  
      OnUnload=&quot;unloadform()&quot;&gt;</font></p> 
      </font> 
      <p><font face="宋体" lang="ZH-CN" size="3">&lt;a href=&quot;test.htm&quot;&gt;调用&lt;/a&gt;</font></p> 
      <font face="宋体" lang="ZH-CN"> 
      <p><font size="3">&lt;/BODY&gt;</font></p>
      <p><font size="3">&lt;/HTML&gt;</font></p>
      <p><font size="3">　</font></p>
      <p style="line-height: 150%"><font size="3">范例2：这是一个获取浏览器版本号的程序。该程序首先显示一个波浪一提示信息。之后显示浏览器的版本号有关信息。</font></p>
      <p><font size="3">test3_2.htm</font></p>
      <p><font size="3">&lt;html&gt;</font></p>
      <p><font size="3">&lt;head&gt;</font></p>
      <p><font size="3">&lt;script language=&quot;JavaScript&quot;&gt;&lt;!--</font></p> 
      <p><font size="3">// --&gt;</font></p> 
      <p><font size="3">function makeArray(n){</font></p> 
      <p><font size="3">this.length=n</font></p>
      <p><font size="3">return this</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">function hexfromdec(num) {</font></p> 
      <p><font size="3">hex=new makeArray(1);</font></p> 
      <p><font size="3">var hexstring=&quot;&quot;;</font></p> 
      <p><font size="3">var shifthex=16;</font></p> 
      <p><font size="3">var temp1=num;</font></p> 
      <p><font size="3">for(x=1; x&gt;=0; x--) {</font></p> 
      <p><font size="3">hex[x]=Math.round(temp1/shifthex - .5);</font></p> 
      <p><font size="3">hex[x-1]=temp1 - hex[x] * shifthex;</font></p> 
      <p><font size="3">temp1=hex[x-1];</font></p>
      <p><font size="3">shifthex /= 16;</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">for (x=1; x&gt;=0; x--) { hexstring+=getletter(hex[x]); }</font></p> 
      <p><font size="3">return (hexstring);</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">　</font></p>
      <p><font size="3">function getletter(num) {</font></p> 
      <p><font size="3">if (num &lt; 10) { return num; }</font></p> 
      <p><font size="3">else {</font></p> 
      <p><font size="3">if (num == 10) { return &quot;A&quot; }</font></p> 
      <p><font size="3">if (num == 11) { return &quot;B&quot; }</font></p> 
      <p><font size="3">if (num == 12) { return &quot;C&quot; }</font></p> 
      <p><font size="3">if (num == 13) { return &quot;D&quot; }</font></p> 
      <p><font size="3">if (num == 14) { return &quot;E&quot; }</font></p> 
      <p><font size="3">if (num == 15) { return &quot;F&quot; }</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">}</font></p>
      <p><font size="3">function rainbow(text){</font></p> 
      <p><font size="3">var color_d1;</font></p> 
      <p><font size="3">var allstring=&quot;&quot;;</font></p> 
      <p><font size="3">for(i=0;i&lt;text.length;i=i+2){</font></p>
      <p><font size="3">color_d1=255*Math.sin(i/(text.length/3));</font></p>
      <p><font size="3">color_h1=hexfromdec(color_d1);</font></p>
      <p><font size="3">allstring+=&quot;&lt;FONT  
      COLOR=&quot;+color_h1+&quot;ff&quot;+color_h1+&quot;&gt;&quot;+text.substring(i,i+2)+&quot;&lt;/FONT&gt;&quot;;</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">return allstring;</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">　</font></p>
      <p><font size="3">function sizefont(text){</font></p> 
      <p><font size="3">var color_d1;</font></p> 
      <p><font size="3">var allstring=&quot;&quot;;</font></p> 
      <p><font size="3">var flag=0;</font></p> 
      <p><font size="3">for(i=0,j=0;i&lt;text.length;i=i+1){</font></p>
      <p><font size="3">if (flag==0) {</font></p> 
      <p><font size="3">j++;</font></p>
      <p><font size="3">if (j&gt;=7) {</font></p> 
      <p><font size="3">flag=1;}}</font></p>
      <p><font size="3">if (flag==1) {</font></p> 
      <p><font size="3">j=j-1;</font></p>
      <p><font size="3">if (j&lt;=0) {</font></p> 
      <p><font size="3">flag=0; }}</font></p> 
      <p><font size="3">allstring+=&quot;&lt;FONT SIZE=&quot;+ j + &quot;&gt;&quot; +  
      text.substring(i,i+1) + &quot;&lt;/FONT&gt;&quot;;</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">return allstring;</font></p> 
      <p><font size="3">}</font></p>
      <p><font size="3">document.write(&quot;&lt;font size=8&gt;&lt;CENTER&gt;&quot;)</font></p> 
      <p><font size="3">document.write(&quot;&lt;BR&gt;&lt;BR&gt;&quot;)</font></p>
      <p><font size="3">document.write( sizefont(&quot;这是一个获取WEB浏览器的程序&quot;))</font></p> 
      <p><font size="3">document.write(&quot;&lt;/CENTER&gt;&lt;/font&gt;&quot;)</font></p>
      <p><font size="3">document.write(&quot;浏览器名称:  
      &quot;+navigator.appName+&quot;&lt;br&gt;&quot;);</font></p> 
      <p><font size="3">document.write(&quot;版本号:  
      &quot;+navigator.appVersion+&quot;&lt;br&gt;&quot;);</font></p> 
      <p><font size="3">document.write(&quot;代码名字:  
      &quot;+navigator.appCodeName+&quot;&lt;br&gt;&quot;);</font></p> 
      <p><font size="3">document.write(&quot;用户代理标识: &quot;+navigator.userAgent);</font></p> 
      <p><font size="3">&lt;/script&gt;</font></p>
      <p><font size="3">&lt;body&gt;</font></p>
      <p><font size="3">&lt;/body&gt;</font></p>
      <p><font size="3">&lt;/html&gt;</font></p>
      <p><font size="3">输出结果图1所示。</font></p>
      <p><font size="3"><img src="Image31.gif" width="496" height="294"></font></p>
      <dir>
        <dir>
          <dir>
            <dir>
              <dir>
                <dir>
                  <dir>
                    <dir>
                      <p><font size="3">图1</font></p>
                      <p><font size="3">&nbsp;</font></p>
                    </dir>
                  </dir>
                </dir>
              </dir>
            </dir>
          </dir>
        </dir>
      </dir>
      </font>
      <p><font face="宋体" lang="ZH-CN">　　本讲介绍了JavaScript程序设计的有关内容。程序流、函数、事件是我们学习掌握JavaScript编程的重点。</font></p>
      <font face="宋体" lang="ZH-CN">
      <p align="center">　</p>
      </font>
      <p>　</td>
  </tr>
</table>

<!--mstheme--></font>

</body>

</html>