javascript7.htm

javascript基础教程适合初学javascript的人下载一个很快就能掌握其中的知识.

    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　在JavaScript中可以非常方便地实现输入输出信息，并与用户进行交互。</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>1、JavaScript信息的输入</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　通过使用JavaScript中所提供的窗口对象方法prompt(), 
    就能完成信息的输入。该方法提供了最简便的信息输入方式，其基本格式如下：</font></span><dir>
      <dir>
        <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">Window.prompt(&quot;提示信&quot;, 
        预定输入信息);</font></span></p>
      </dir>
    </dir>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　此方法首先在浏览器窗口中弹出一个对话框, 
    让用户自行输入信息。一旦输入完成后，就返回用户所输入信息的值。例:</font></span><dir>
      <dir>
        <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">test=prompt（“请输入数据:”，”this 
        is a JavaScript”）</font></span></p>
      </dir>
    </dir>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　实际上prompt()是窗口对象的一个方法。因为缺省情况下所用的对象就是window对象, 
    所以windows对象可以省略不写。</font></span></p>
    <p>　</p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>2、输出显示</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　每种语言，都必须提供信息数据的输出显示。JavaScript也是一样，它提供有几个用于信息输出显示的方法。比较常用的有window.alert()、document.write和及document.writln()方法。</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>１)、document.write()方法和document.writeln()方法</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　document是JavaScript中的一个对象在它中封装许多有用的方法，其中write()和writeln()就是用于将文本信息直接输出到浏览器窗口中的方法。</font></span><dir>
      <dir>
        <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write()；</font></span></p>
        <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.writeln()；</font></span></p>
      </dir>
    </dir>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">说明：</font></span><dir>
      <dir>
        <p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
        style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　write()和writeln()方法都是用于向浏览器窗口输出文本字串；</font></span></p>
        <p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
        style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　二者的唯一区别就是writeln()方法自动在文本之后加入回车符。</font></span></p>
        <p>　</p>
      </dir>
    </dir>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>２)、 
    window.alert()输出</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　在JavaScript为了方便信息输出，JavaScript提供了具有独立的对话框信息输出─alert()方法。<br>
    alert()方法是window对象的一个方法，因此在使用时，不需要写window窗口对象名，而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或提示用户，一旦用户按“确定”钮后，方可继续执行其他脚本程序。例:</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;HTML&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;HEAD&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;TITLE&gt;&lt;/TITLE&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/HEAD&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;BODY&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;Script 
    Language =&quot;JavaScript&quot;&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">alert(&quot;这是一个JavaScript测试程序&quot;);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/Script&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/BODY&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/HTML&gt;</font></span></p>
    <p>　</p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>３)、利用输入、输出方法实现交互</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　　在JavaScript中，可以利用prompt()方法和write()方法实现与Web页面用户进行交互。例下面就是一个有关实现交互的例子。</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>Test7_1.htm</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;HTML&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;HEAD&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;TITLE&gt;&lt;/TITLE&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/HEAD&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;BODY&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;Script 
    Language=&quot;JavaScript&quot;&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;!-- Hide From 
    Other Browsers</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write(&quot;&lt;H1&gt;有关交互的例子&quot;);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">my=prompt(&quot;请输入数据:&quot;);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.write(my+&quot;&lt;/H1&gt;&quot;);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.close();</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">// Stop Hiding 
    from Other Browsers--&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/Script&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/BODY&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/HTML&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">从上面程序可以看出：</font></span><dir>
      <dir>
        <p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
        style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　可通过write()和prompt()方法实现交互。</font></span></p>
        <p><img src="javascript/Bullet3.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Bullet3.gif" width="12" height="12" alt="Bullet3.gif (148 字节)"><span
        style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">　在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。其中&lt;H1&gt;和&lt;Br&gt;就是HTML标识符。</font></span></p>
        <p>　</p>
      </dir>
    </dir>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>四、范例</b></font></span><dir>
      <dir>
        <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">下列程序演示了你进入主页所停留的时间。</font></span></p>
      </dir>
    </dir>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN"><b>test7_2.htm</b></font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;html&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;form 
    name=&quot;myform&quot;&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;td 
    vAlign=&quot;top&quot; width=&quot;135&quot;&gt;您在此停留了：</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;input 
    name=&quot;clock&quot; size=&quot;8&quot; value=&quot;在线时间&quot;&gt;&lt;/td&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/form&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;script 
    language=&quot;JavaScript&quot;&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">var id, iM = 0, 
    iS = 1;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">start = new 
    Date();</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">function go()</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">{</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">now = new Date();</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">time = 
    (now.getTime() - start.getTime()) / 1000;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">time = 
    Math.floor( time);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">iS = time % 60;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">iM = Math.floor( 
    time / 60);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">if ( iS &lt; 10)</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.myform.clock.value 
    = &quot; &quot; + iM + &quot; 分 0&quot; + iS + &quot; 秒&quot;;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">else</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">document.myform.clock.value 
    = &quot; &quot; + iM + &quot; 分 &quot; + iS + &quot; 秒&quot;;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">id = setTimeout( 
    &quot;go()&quot;, 1000);</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">}</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">go();</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/script&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/body&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">&lt;/html&gt;</font></span></p>
    <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">在浏览器中的结果，见图1所示。</font></span></p>
    <p><img src="javascript/Image9.gif" tppabs="http://www.4gee.com/colleges/homepages/javascript/Image9.gif" width="338" height="230"
    alt="Image9.gif (10470 字节)"><dir>
      <dir>
        <dir>
          <dir>
            <dir>
              <dir>
                <p><span style="color: rgb(125,125,125)" class="text"><font lang="ZH-CN">图1</font></span></p>
              </dir>
            </dir>
          </dir>
        </dir>
      </dir>
    </dir>
    </td>
  </tr>
</table>
</center></div>

<p align="center"><small><a href="JavaScript6.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript6.htm">上一页</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="JavaScript8.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript8.htm">下一页</a></small></p>
</body>
</html>