⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 8.htm

📁 javascript book
💻 HTM
📖 第 1 页 / 共 3 页
字号:
🔍
123 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>WEB页面信息的交互</title>
<meta name="Microsoft Theme" content="maize 011">
</head>

<body background="maizbk.jpg" bgcolor="#FFFFFF" text="#000000" link="#669999" vlink="#999900" alink="#3366CC">

<!--mstheme--><font face="宋体"><!--mstheme--></font>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><!--mstheme--><font face="宋体">
      <p align="center"><b><font class="title" lang="ZH-CN" size="4" color="#000000">WEB页面信息的交互</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN">　　<font size="3">要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。</font></font></p>
      <p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">一、窗体基础知识</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。</font></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">１、什么是窗体对象</font></b></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。</font></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;form  
      Name=Form1&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;INPUT  
      type=text...&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Input  
      type=text...&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Inpup  
      byne=text...&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;/form&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;form  
      Name=Form2&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;INPUT  
      type=text...&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Input  
      type=text...&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;/form&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Form</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">Name  
      =&quot;表的名称&quot;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">Target  
      =&quot;指定信息的提交窗口&quot;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">action  
      =&quot;接收窗体程序对应的URL&quot;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">Method  
      =信息数据传送方式(get/post)</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">enctype  
      =&quot;窗体编码方式&quot;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">[onsubmit  
      =&quot;JavaScript代码&quot;]&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;/Form&gt;</font></p> 
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">　</font></b></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">２、窗体对象的方法</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：</font></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">document.mytest.submit()</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　</font></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">３、窗体对象的属性</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　窗体对象中的属性主要包括以下：elements  
      name action target encoding method.</font></p> 
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：</font></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">elements[0].Mytable.elements[1]</font></p>
          <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">　</font></b></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">４、访问窗体对象</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">在JavaScript中访问窗体对象可由两种方法实现：</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（１）通过访问窗体</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">（２）通过数组来访问窗体</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">document.forms[0]</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">document.forms[1]</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">document.forms[2]...</font></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">　</font></b></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">５、引用窗体的先决条件</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。</font></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">　</font></b></p>
      <p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">二、窗体中的基本元素</font></b></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。<br>
      在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:</font></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">formName.elements[].methadName  
          (窗体名.元素名或数组.方法)</font></p> 
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">formName.elemaent[].propertyName(窗体名.元素名或数组.属性)</font></p> 
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">　</font></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">下面分别介绍：</font></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">　</font></b></p>
      <p align="justify" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">１、Text单行单列输入元素</font></b></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
        <p align="justify" style="line-height: 150%"><font size="3"><font face="System,??" lang="ZH-CN"><img height="12" src="Bullet1.gif" width="12"></font><font face="宋体" lang="ZH-CN">　功能：对Text标识中的元素实施有效的控制。</font></font></p>
        <p align="justify" style="line-height: 150%"><font size="3"><font face="System,??" lang="ZH-CN"><img height="12" src="Bullet1.gif" width="12"></font><font face="宋体" lang="ZH-CN">　基本属性：</font></font></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">Name：设定提交信息时的信息名称。对应于HTML文档中的Name。</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">Value：用以设定出现在窗口中对应HTML文档中Value的信息。</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">defaultvalue：包括Text元素的默认值</font></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
        <p align="justify" style="line-height: 150%"><font size="3"><font face="System,??" lang="ZH-CN"><img height="12" src="Bullet1.gif" width="12"></font><font face="宋体" lang="ZH-CN">　基本方法：</font></font></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">blur()：将当前焦点移到后台。</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">select()：加亮文字。</font></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
        <p align="justify" style="line-height: 150%"><font size="3"><font face="System,??" lang="ZH-CN"><img height="12" src="Bullet1.gif" width="12"></font><font face="宋体" lang="ZH-CN">　主要事件：</font></font></p>
      <!--mstheme--></font>
      <!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">onFocus：当Text获得焦点时，产生该事件。</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">OnBlur：从元素失去焦点时，产生该事件。</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">Onselect：当文字被加亮显示后，产生该文件。</font></p>
          <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">onchange：当Text元素值改变时，产生该文件。</font></p>
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <!--msthemelist--></table>
      <!--mstheme--><font face="宋体">
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">例：...</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;Form 
      name=&quot;test&quot;&gt;</font></p>
      <p align="justify" style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">&lt;input
123

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -