您的位置:首页 > Web前端 > JavaScript

javascript—新手必备、零基础学习

2015-02-06 13:27 441 查看
本书目录

第一章: JavaScript语言基础
第二章: JavaScript内置对象

第三章: 窗口window对象

第四章: 文档document对象

第五章: 表单form对象

第六章: History与Navigator对象

第七章: JavaScript框架编程

第八章: JavaScript异常处理

第九章: 自定义JavaScript对象

第一章 JavaScript语言基础

[javascript] view
plaincopyprint?

什么是JavaScript

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语

言。

JavaScript的出现弥补了HTML语言的不足,它是Java与HTML折中的选择,具有以下几个基

本特点。

1、脚本编写

JavaScript是一种脚本语言,它采用小程序段的方式实现编程。它作为一种解释性语言,不需要

进行编译,而是在程序运行过程中逐行地被解释。

2、基于对象

JavaScript是一种基于对象的语言,这意味着它能运用自己已经创建的对象。因此,许多功能可

能来自于JavaScript运行环境(即浏览器本身)中对象的方法与JavaScript的对象相互作用。

3、简单性

JavaScript的简单性首先主要体现在它基于Java的基本语句和控制流,是一种简单而紧凑的

语言,对于学习Java是一种非常好的过度;其次,它的变量类型是采用“弱类型”,并未使用严格

的数据类型。

4、安全性

JavaScript是一种安全性语言,它不允许访问本地的硬盘,而且不能将数据存入到服务器上;

不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据

的丢失。

5、动态性

JavaScript是动态的,它可以直接对用户或客户输入做出响应而无需经过Web服务程序。它对

用户的响应是采用以事件驱动的方式进行的。所谓事件驱动,就是指在页面中执行某种操作所产生的动

作,比如按下鼠标、移动窗口或选择菜单等都可以视为事件,当事件发生后就会引起相应的事件响应。

6、跨平台性

JavaScript仅依赖于浏览器本身,与操作系统无关,只要是能运行浏览器的计算机,并支持

JavaScript的浏览器就可以正确执行。从而实现“编写一下,走遍天下” 的梦想。

Java和Javascript的区别

1、基于对象和面向对象

Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。

JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是

一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非

常丰富的内部对象供设计人员使用。

2、解释和编译

两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过

编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立

于某个特定的平台编译代码的束缚。

JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文

本格式的字符代码发送给客户编由浏览器解释执行。

3、强变量和弱变量

两种语言所采取的变量是不一样的。

Java采用强类型变量检查,即所有变量在编译之前必须作声明。

JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检

查其数据类型,

4、代码格式不一样

Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节

代码的形式保存在独立的文档中。

JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写

HTML文档就像编辑文本文件一样方便。

5、嵌入方式不一样

在HTML文档中,两种编程语言的标识不同,JavaScript使用<Script>...</Script>来标

识,而Java使用<applet>...</applet>来标识,或采用java脚本语言。

6、静态联编和动态联编

Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。

JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查,如不经编译则就

无法实现对象引用的检查。

第一节 语言基础

编写JavaScript程序

1、JavaScript直接嵌入HTML文件中

写在head或body标记对之间,要加标记如下:

<script language="javascript">

document.write("<font color=blue>Hello World!</font>");

</script>

2、JavaScript程序存放在单独的.js文件中,再在HTML文件中链接

<head>

<script language="javascript" SRC="xxx.js"></script>

</head>

<body>

<form>

<input type=button onclick=show()>

</form>

</body>

在.js文件中直接书写javascript代码即可。

function show(){

document.write("hello world!");

}

基本数据类型

在JavaScript中有四种基本的数据类型:

数值型(整数和实数)

字符串型(用""号或''号括起来的字符或数值)

布尔型(使用true或false表示)

空值(null)

变量

在程序执行过程中值可变的量,是系统内存中的一个命名的存储单元。

变量的命名:

变量名以字母开头,中间可以出现数字,下划线。变量名不能有空格、+或其他符号

不能使用JavaScript的关键字作为变量。如:var、int、double、delete

变量名第一个单词全部小写,第二个单词开始每个单词的首字母大写,其余字母小写。

声明(定义)变量:

var x, myString;

var y=100, st="hello";

cost=23.6;

JavaScript中的保留字(关键字):

abstract boolean break byte case catch

char class const continue default do

double else extends false final finally

float for function goto if implements

import in instanceof int interface long

native new null package private protected

public return short static super switch

synchronized this throw throws transient true

try var void while with

变量的作用域

在JavaScript中有全局变量和局部变量之分。全局变量时定义在所有函数体之外,其作用范围

是所有函数;而局部变量时定义在函数体之内,只对该函数是可见的。

<script language="javascript">

var quanju=100;

function get(){

var i=10;

if(true){

var j=1;

}

}

</script>

常量

在程序执行过程中其值不可改变的量。

1、整型常量

如:123 ,512

2、实型常量

实型常量是由整数部分加小数部分表示,如3.14,12.43等,也可以使用科学或标准方法表示,

如5E7,4e5等。

3、布尔值

布尔常量只有两种取值true 或false。主要用来说明或代表一种状态或标志,用以控制操作流



4、字符型常量

字符型常量是指使用单引号(')括起来的字符或双引号(")括起来的字符串。例如,字符'a',

字符串 "hello"。

JavaScript也支持以反斜杠(\)开头的不可显示的特殊字符,通常称为控制字符。例如换行符

('\r')、制表符('\t')等

5、空值

JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,就会返回一个

null值。

运算符

运算符是完成某种操作的符号。

算术运算符:+, -, *, /, %, ++, --

比较运算符:= =, >, >=, <, <=, !=

逻辑运算符:&&, ||, !

赋值运算符:=, +=, -=, *=, /=,

表达式

x=100;

str="你好";

t=null;

表达式通常是由变量、常量和函数通过运算符构成的有意义的算式。

如:a, a*2/3, (x+y)*10+(z-3)*20, x==y

第二节 控制结构

1、if 语句

if (表达式){

语句块;

}

x=80;

if (x>=60){

document.write( "恭喜你,及格了!");

}

if (表达式){

语句块1 ;

}else{

语句块2 ;

}

if (x>=0){

y=x;

}else{

y=-x;

}

2、switch语句

switch(表达式) {

case 值1:语句1; break;

case 值2:语句2; break;

case 值3:语句3; break;

default: 语句4;

}

<script language="javascript">

function getWeek(week){

switch(week){

case 0:

st="星期日";

break;

case 1:

st="星期一";

break;

case 2:

st="星期二";

break;

case 3:

st="星期三";

break;

case 4:

st="星期四";

break;

case 5:

st="星期五";

break;

case 6:

st="星期六";

break;

default:

st="错误";

}

return st;

}

</script>

3、for 语句

for (初值表达式; 条件表达式; 更新语句) {

//循环体语句

}

4、While语句

while(条件表达式) {

//循环体语句

}

break语句:结束当前的循环或switch语句。

continue语句:用于for或while语句中,结束本次循环,继续下一次循环。

第三节 函数

函数是一个设定名字的一系列JavaScript语句的有效组合。

函数可以带参数,也可以不带,可以有返回值,也可以没有

1、函数的定义

function 函数名([参数列表]) {

语句块;

[return 表达式;]

}

<script language="javascript">

//例:返回两个参数中较大的。

function max(a,b){

var x;

if (a>b)

x=a;

else

x=b;

return x;

}

</script>

2、调用函数

函数被调用时函数内的代码才真正被执行。

调用函数的方法就是使用函数的名称并赋给全部参数相应的值。

<script language="javascript">

max(20,30);

</script>



<input type="button" onClick="max(23,45);">

在JavaScript中调用函数时,可以向函数传递比在函数定义时参数数目要少的参数。在这种情

况下,只要不是试图去读那些没有传递过来的参数就行。

用typeof运算符可以得到参数的类型。对于未传递的参数,用typeof运算符得到的结果是

“undefined”。示例如下:

<script language="javascript">

function get(a,b){

document.write("参数a的数据类型是:"+typeof(a)+"<br>");

document.write("参数b的数据类型是:"+typeof(b));

}

get(32.4);

</script>

另外,JavaScript也可以向函数传递比在函数定义时参数数目要多的参数,为了读取这样的参

数,可以使用arguments数组。传递给函数的第一个参数是arguments数组的第一个元素,我们可

以用“函数名称.arguments[0]”来进行引用。示例如下:

<script language="javascript">

function getSum(){

var sum=0;

var number=getSum.arguments.length;//使用函数的参数数组

for(var i=0;i<number;i++){

sum+=getSum.arguments[i];

}

return sum;

}

document.write("23+54+65="+getSum(23,54,65));

</script>

第四节 JavaScript系统函数

JavaScript中的系统函数又称为内部方法,它们不属于任何对象,可以直接使用。它们可以完成许

多很常用的功能。

1、 eval( 字符串表达式)

返回字符串表达式中的运算结果值。

例:test=eval("x=8+9+5/2");

document.write(test); //输出显示19.5

2、 escape(字符串)

返回字符串的一种简单编码,将非字母数字的符号转换为%加其unicode码的十六进制表示。

例如: escape("Hello there") 返回 "Hello%20there"

3、unescape(字符串)

将已编码的字符串还原为纯字符串。

4、parseFloat(字符串)

返回浮点数

5、parseInt(字符串,radix)

其中radix是数的进制,默认是十进制数 parseInt(字符串)

第五节 事件驱动及事件处理

在JavaScript中编写的函数,通常是在其他代码进行调用时才会执行。不过我们也可以将某个

函数与某个事件(Event,通常是鼠标或热键的动作)联系起来,使得当事件发生时执行该函数。这个

方法称之为事件驱动(Event Driver)。而对事件进行处理的函数,称之为事件处理程序(Event

Handler事件句柄)。

1、事件

JavaScript事件驱动中的事件是通过鼠标或热键的动作(点击或按下)引发的。下表中列出了

常见的事件及其说明。

FF: Firefox, N: Netscape, IE: Internet Explorer

属性说明FF N IE

onabort 图像加载被中断1 3 4

onblur 元素失去焦点1 2 3

onchange 用户改变域的内容1 2 3

onclick 鼠标点击某个对象1 2 3

ondblclick 鼠标双击某个对象1 4 4

onerror 当加载文档或图像时发生某个错误1 3 4

onfocus 元素获得焦点1 2 3

onkeydown 某个键盘的键被按下1 4 3

onkeypress 某个键盘的键被按下或按住1 4 3

onkeyup 某个键盘的键被松开1 4 3

onload 某个页面或图像被完成加载1 2 3

onmousedown 某个鼠标按键被按下1 4 4

onmousemove 鼠标被移动1 6 3

onmouseout 鼠标从某元素移开1 4 4

onmouseover 鼠标被移到某元素之上1 2 3

onmouseup 某个鼠标按键被松开1 4 4

onreset 重置按钮被点击1 3 4

onresize 窗口或框架被调整尺寸1 4 4

onselect 文本被选定1 2 3

onsubmit 提交按钮被点击1 2 3

onunload 用户退出页面1 2 3

2、事件与函数的关联

要将一个函数与某个HTML元素的事件关联起来,需要设置相应的HTML标记中的属性值。例如,

对于一个button元素的click事件的处理函数为MyProc(),则可以用如下的形式将事件与函数关

联起来:

<script language="javascript">

function myPorc(){

alert(document.all("txt").value);

}

</script>

<input type="text" name="txt" />

<input type="button" value="Try" onClick="myPorc( );"/>

另一个示例,实现翻转图的效果,原来在网页上显示一幅图片,当用户把鼠标移到该图像上时,自

动将图像切换成新的一幅图片;当用户把鼠标移开时,最初的图像又被恢复回来。

<script language="javascript">

//处理mouseover事件

function imgover(){

document.myForm.img1.src="color.jpg";

}

//处理mouseout事件

function imgout(){

document.myForm.img1.src="gray.jpg";

}

</script>

<form name="myForm">

<img border=0 name="img1" src="gray.jpg"

onmouseover="imgover();"

onmouseout="imgout()">

</form>

课后练习题:

1、计算1加到100的和

2、使用while语句计算1加到100的和

3、打印100以内的偶数序列 :02468。。。

4、循环1-100,单数次输出“好好学习!”,偶数次输出“天天向上!”

5、在死循环中用if和break实现连续打印20个*就结束循环。

6、编程查找满足下列条件的三个正整数:x+y+z=50并且x+2*y+5*z=100

7、编写函数输出下面的图案

*

**

***

****

最多的星数目为函数参数n所决定。

8、将a,b,c三个整数按它们数值的大小,从小到大的顺序打印显示。

(练习if else语句)

9、编写函数输出下面的图案

*

**

***

****

***

**

*

行数为函数的参数n决定。

10、编写函数寻找水仙花数。

(三位数各位数字的立方和恰巧是该数本身,100到999之间有四个这样的数)。<strong><span style="font-size:32px;color:#ff0000;">

</span></strong>

js语法 JS 语法大全

2008年03月19日 星期三 11:14
一.js的数据类型和变量

JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。

   String 字符串类型:字符串是用单引号或双引号来说明的。(使用单引号来输入包含引号的字符串。)如:“The cow jumped over the moon.”

   数值数据类型:JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数;浮点数可以包含小数点、也可以包含一个 “e”(大小写均可,在科学记数法中表示“10的幂”)、或者同时包含这两项。
  Boolean 类型:可能的 Boolean 值有 true 和 false。这是两个特殊值,不能用作 1 和 0。
  Undefined 数据类型:一个为 undefined 的值就是指在变量被创建后,但未给该变量赋值以前所具有的值。
  Null 数据类型:null 值就是没有任何值,什么也不表示。
  object类型:除了上面提到的各种常用类型外,对象也是JavaScript中的重要组成部分,这部分将在后面章节详细介绍。
  在 JavaScript 中变量用来存放脚本中的值,这样在需要用这个值的地方就可以用变量来代表,一个变量可以是一个数字,文本或其它一些东西。
   JavaScript是一种对数据类型变量要求不太严格的语言,所以不必声明每一个变量的类型,变量声明尽管不是必须的,但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如:var men = true; // men 中存储的值为 Boolean 类型。
  变量命名:JavaScript 是一种区分大小写的语言,因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。

  另外,变量名称的长度是任意的,但必须遵循以下规则:

   1.第一个字符必须是一个字母(大小写均可)、或一个下划线(_)或一个美元符 ($)。

   2.后续的字符可以是字母、数字、下划线或美元符。

   3.变量名称不能是保留字。

二.js语句及语法
JavaScript所提供的语句分为以下几大类:

   1.变量声明,赋值语句:var。

   语法如下: var 变量名称 [=初始值]

   例:var computer = 32 //定义computer是一个变量,且有初值为32。
   2.函数定义语句:function,return。

   语法如下: function 函数名称 (函数所带的参数)

        {

          函数执行部分

         }

         return 表达式 //return语句指明将返回的值。

   例:function square ( x )

     {

       return x*x

      }
   3.条件和分支语句:if...else,switch。

     if...else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则程序执行else中的语句或语句块。     语法如下: if (条件)

         {

            执行语句1

          }else{

            执行语句2

          }

     例:if (result == true)

        {

          response = “你答对了!”

         }else{

          response = “你错了!”

         }

   分支语句switch可以根据一个变量的不同取值采取不同的处理方法。

   语法如下: switch (expression)

        {

         case label1: 语句串1;

         case label2: 语句串2;

         case label3: 语句串3;

            ...

         default: 语句串3;

        }

   如果表达式取的值同程序中提供的任何一条语句都不匹配,将执行default 中的语句。
   4. 循环语句:for, for...in,while,break,continue。

     for语句的语法如下: for (初始化部分;条件部分;更新部分)

               {

                 执行部分...

                }

     只要循环的条件成立,循环体就被反复的执行。

     for...in语句与for语句有一点不同,它循环的范围是一个对象所有的属性或是一个数组的所有元素。

     for...in语句的语法如下: for (变量 in 对象或数组)

                 {

                   语句...

                  }

     while语句所控制的循环不断的测试条件,如果条件始终成立,则一直循环,直到条件不再成立。

     语法如下: while (条件)

           {

             执行语句...

            }
     break语句结束当前的各种循环,并执行循环的下一条语句。

     continue语句结束当前的循环,并马上开始下一个循环。
   5.对象操作语句:with,this,new。

    with语句的语法如下:

             with (对象名称){

                      执行语句

                     }

    作用是这样的:如果你想使用某个对象的许多属性或方法时,只要在with语句的()中写出这个对象的名称,然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。
    new语句是一种对象构造器,可以用new语句来定义一个新对象。

     语法是这样的:新对象名称= new 真正的对象名

     譬如说,我们可以这样定义一个新的日期对象: var curr= new Date(),然后,变量curr就具有了Date对象的属性。
    this运算符总是指向当前的对象。
   6.注释语句://,/*...*/。

    //这是单行注释

    /*这可以多行注释.... */

三.js对象的属性及方法.
在JavaScript中是基于对象的编程,而不是完全的面向对象的编程。

   

   那麽什麽是对象呢?如果你学过一些VB的编程,对这个名词一定不会陌生。通俗的说,对象是变量的集合体,对象提供对于数据的一致的组织手段,描述了一类事物的共同属性。
   在JavaScript中,可以使用以下几种对象:

    1.由浏览器根据web页面的内容自动提供的对象。

    2.JavaScript的内置对象,如Date,Math等。

    3.服务器上的固有对象。

    4.用户自定义的对象。

   JavaScript中的对象是由属性和方法两个基本的元素的构成的。对象的属性是指对象的背景色,长度,名称等。对象的方法是指对属性所进行的操作,就是一个对象自己所属的函数,如对对象取整,使对象获得焦点,使对象获得个随机数等等一系列操作。

   举个例子来说,将汽车看成是一个对象,汽车的颜色,大小,品牌等叫做属性,而发动,刹车,拐弯等就叫做方法。

   可以采用这样的方法来访问对象的属性:对象名称.属性名称,例:mycomputer.year=1996,mycomputer.owner = “me”。

   可以采用这样的方法,将对象的方法同函数联系起来:对象.方法名字=函数名字或对象.属性.方法名,例:this.display=display,document.writeln(“this is method”)。

   多看或多写一些程序,就会理解对象的方法和属性的含义了!

四.js事件的处理

事件是浏览器响应用户交互操作的一种机制,JavaScript的事件处理机制可以改变浏览器响应用户操作的方式,这样就开发出具有交互性,并易于使用的网页。

  浏览器为了响应某个事件而进行的处理过程,叫做事件处理。
  事件定义了用户与页面交互时产生的各种操作,例如单击超级连接或按钮时,就产生一个单击(click)操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生,并在事件发生时,自动调用事件处理函数,完成事件处理过程。
  事件不仅可以在用户交互过程中产生,而且浏览器自己的一些动作也可以产生事件,例:当载入一个页面时,就会发生load事件,卸载一个页面时,就会发生unload事件等。
  归纳起来,必需使用的事件有三大类:

   1.引起页面之间跳转的事件,主要是超连接事件。

   2.事件浏览器自己引起的事件。

   3.事件在表单内部同界面对象的交互。
另:

Javascript 基础

一、 变量

var myBook;

myBook=5;

变量名要求以字母或 _ 打头,不能含有空格

常见的类型有:字符串,数值,布尔和对象类型。

var num=6

b=(3>5)

false true

二、 表达式与操作符

1、 比较操作符

== != > < >= <=

2、 运算操作符

+ - * / % ++ --

3、 逻辑操作符

与&& , 或 || , 非 !

4、 位操作符

& | ^(异或) ~ << >> >>>(填0右移操作符)

5、 赋值操作符

=

+= -= *= /=

&= |= ^=

<<= >>= >>>=

6、 其它操作符

条件操作符:(条件)?值1:值2 a=5 b=6 c=(a>b)?a-b:a+b

new操作符 var

com=new Array("Zhang","Li","wang","Chen")

com[2]

delete 操作符 delete com[2]

7、

三、 语句

1、 条件语句

(1) if……else

if (mark>60)

s="pass"

else

s="fail"

(2)tch case 标签1:代码块1;break;

case 标签2:代码块2;break;

…………

case 标签n:代码块n;break;

default: 缺省代码块;

}

(3)

2、 循环语句

(1) for 语句

for(初始表达式;循环条件;递增表达式)

{ 代码块 }

(2) while 语句

while(循环条件)

{代码块}

(3) do……while语句

do{

代码块

} while(循环条件)

(4) label语句

label:代码块

(5) break语句

跳出循环语句或tch

break label 跳出label标识的代码块

(6)

3、 其他语句

(1) for……in语句 [forin.htm]

for (变量 in 对象) {

代码块 }

(2) with(对象){

代码块 }

(3) 注释

// 注释一行 /* */

(4) return

4、

四、 函数

1、 函数的定义

function 函数名(参数列表)

{ 代码块

}

-- 作者:111

-- 发布时间:2004-12-3 1:31:00

--

2、 函数的调用

函数名(参数列表)

3、 javascript 的全局函数

(1) eval(字符串)

执行该字符串

(2) parseInt(字符串,[基数]) parseFloat(字符串)

var s="3.14"

var j=parseInt(s)

var k=parseFloat(s)

parseInt("2B",16)=

(3) isNaN(表达式) :不是数字

(4) Number(对象)和 String(对象)

Var n=new Number(20)

document.write(n.toString(16))

(5) Escape(字符串)和unescape(字符串)将消息串格式转换为ASC码格式

4、 方法

(1) 滚动窗口scroll()

scroll(x,y):移至窗口某一点,左上角为0,0 [winscroll.htm]

(2) 设置延迟setTimeout("表达式",时间) 时间:以毫秒为单位

(3) 清除延迟clearTimeout("延迟号")

如:id=setTimeout("disp()",1000)

clearTimeout(id)

(4)

五、 Javascript 中的对象

1、 建立自定义对象

方法1:对象={属性1:属性值1,属性2:属性值2……属性n:属性值n}

方法2:先定义构造函数,再new创建对象实例。

如: function car(thecolor,thenumber,thewheels)

{ this.color=thecolor;

this.number=thenumber;

this.wheels=thewheels; }

var mycar=new car("RED","13245",4);

2、 定义对象的方法 [oop.htm]

function ReportInfo( )

{ var information=new string;

information="color:"+this.color+"<BR>";

information+="Number:"+this.Number+"<BR>";

information+="Wheels"+this.wheels;

window.document.write(information);

}

3、 javascript核心语言对象

(1) 数组对象(Array)

建立数组:var st=new Array("zhang","wang","li","chen");

var st1=new Array(4)

访问数组元素: st[2]

数组对象的属性 length (长度) [forin.htm]

方法 sort( ) 按ASCII码排序 sort([比较函数名]) [sort.htm]

比较函数返回值(a与b比较) <0 b排在a 的前面

=0 保持原来次序

>0 a排在b的前面

reverse( ) 元素颠倒顺序

join(分隔符) 转换成字符串

(2) 字符串对象(String)

属性: length

方法:toUpperCase() 转换为大写字母

toLowerCase() 转换为小写字母

indexOf(字符串,起始位置) 返回子字符串在字符串中的位置,若没有,则为-1

LastIndexOf(字符串,起始位置) 返回子字符串在字符串中最后的位置

charAt(位置) 返回字符串中下标位置的字母

substring(位置1,位置2)返回位置1,位置2间字符串

split(分界符) 按分界符的分解成数组元素

以下的为格式化字符串方法 [str.htm]

big() blink() bold() fixed() fontcolor() fontsize() italics() small()

strike() sub() sup()

-- 作者:111

-- 发布时间:2004-12-3 1:31:00

--

(3) 日期对象(Date)

创建日期对象

var 对象名称=new Date (参数)

var theDate=new Date( )

第二章 JavaScript内置对象

[javascript] view
plaincopyprint?

对象概述

JavaScript是一种基于对象的脚本语句,而不是面向对象的编程语言。

对象就是客观世界存在的实体,具有属性和方法两方面特性。

访问对象的属性和方法的方式如下:

对象名.属性

对象名.方法名()

第一节 数组对象类型 Array

数组可以存放很多相同类型的数据。有数组名代表所有这些数据,而用

数组名[下标]表示其中某个元素(下标从0开始)。

如:var myA=["张三","李四","王五"];

document.write(myA); //看到所有三个字符串

myA[0]指向第一个元素

myA[2]指向第三个元素

1、建立数组的三种方法:

(1) 使用方括号,创建数组的同时赋初值

var myA=["张三", "李四","王五"];

var b=[10,20,30,40];

(2) 使用new 操作符,创建数组的同时赋初值

var myA=new Array("张三", "李四","王五");

注意圆括号和方括号的区别,不能任意使用。

(3) 先创建长度为10的数组,内容后面再赋值

var anArray = new Array(9);

anArray[0]= "张三";

anArray[1]= "李四";

anArray[2]= "王五";

2、数组的属性

length

数组名.length 返回数组中元素的个数

如:myA.length 为 3

例:使用for语句输出myA数组的各个元素。

for(i=0;i<myA.length;i++){

alert(myA[i]);

}

3、数组的方法

join(分割符)

该方法的功能是把数组中所有数据用指定的分割符连接起来,以一个字符串的形式表达出来。

例如:

myA.join("/") 返回一个字符串 "张三/李四/王五"

reverse()

该方法的功能是将数组中的元素整个反转顺序。

例如:

myA.reverse( ) 数组变为 ["王五","李四","张三"]

sort()

该方法的功能是将数组元素排序(汉字按拼音的字母顺序)。

例如:

myA.sort () 数组变为 ["李四","王五","张三"]

concat()

方法用于连接两个或多个数组。

下面的例子将把 concat() 中的参数连接到数组 a 中

<script type="text/javascript">

var a = [1,2,3];

document.write(a.concat(4,5));

//输出结果是:

//1,2,3,4,5

</script>

下面的例子创建了两个数组,然后使用 concat() 把它们连接起来

<script type="text/javascript">

var arr = ["George","John","Thomas"];

var arr2 = ["James","Adrew","Martin"];

document.write(arr.concat(arr2));

//输出结果是:

//George,John,Thomas,James,Adrew,Martin

</script>

下面的例子创建了三个数组,然后使用 concat() 把它们连接起来

<script type="text/javascript">

var arr = ["George","John","Thomas"];

var arr2 = ["James","Adrew","Martin"];

var arr3 = ["William","Franklin"];

document.write(arr.concat(arr2,arr3));

//输出结果是:

//George,John,Thomas,James,Adrew,Martin,William,Franklin

</script>

pop()

方法用于删除并返回数组的最后一个元素。

删除数组的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,

则 pop() 不改变数组,并返回 undefined 值。

<script type="text/javascript">

var arr = ["George","John","Thomas"];

document.write(arr);

document.write("<br />");

document.write(arr.pop());

document.write("<br />");

document.write(arr);

//输出结果是:

//George,John,Thomas

//Thomas

//George,John

</script>

push()

方法可向数组的末尾添加一个或多个元素,并返回新的长度。

语法:arrayObject.push(newelement1,newelement2,....,newelementX)

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而

不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

<script type="text/javascript">

var arr = ["George","John","Thomas"];

document.write(arr + "<br />");

document.write(arr.push("James") + "<br />");

document.write(arr);

//输出结果是:

//George,John,Thomas

//4

//George,John,Thomas,James

</script>

shift()

方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方

法不创建新数组,而是直接修改原有的 arrayObject。

<script type="text/javascript">

var arr = ["George","John","Thomas"];

document.write(arr + "<br />");

document.write(arr.shift() + "<br />");

document.write(arr);

//输出结果是:

//George,John,Thomas

//George

//John,Thomas

</script>

unshift()

方法可向数组的开头添加一个或更多元素,并返回新的长度。

unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到

较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,

它将成为新的元素 1,以此类推。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。

<script type="text/javascript">

var arr = ["George","John","Thomas"];

document.write(arr + "<br />");

document.write(arr.unshift("William") + "<br />");

document.write(arr);

//输出结果是:

//George,John,Thomas

//4

//William,George,John,Thomas

</script>

slice(start,end)

从已有的数组中返回选定的元素。

<script type="text/javascript">

var arr = ["George","John","Thomas"];

document.write(arr + "<br />");

document.write(arr.slice(1) + "<br />");

document.write(arr);

//输出结果是:

//George,John,Thomas

//John,Thomas

//George,John,Thomas

</script>

<script type="text/javascript">

var arr =["George","John","Thomas","James","Adrew","Martin"];

document.write(arr + "<br />");

document.write(arr.slice(2,4) + "<br />");

document.write(arr);

//输出结果是:

//George,John,Thomas,James,Adrew,Martin

//Thomas,James

//George,John,Thomas,James,Adrew,Martin

</script>

splice()

方法用于插入、删除或替换数组的元素。

语法:arrayObject.splice(index,howmany,element1,.....,elementX)

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多

个值来替换那些被删除的元素。

参数描述

index

必需。规定从何处添加/删除元素。

该参数是开始插入和(或)删除的数组元素的下标,必须是数字。

howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。

如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

element1 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。

elementX 可选。可向数组添加若干元素。

下面的实例中,创建一个新数组,并向其添加一个元素:

<script type="text/javascript">

var arr =["George","John","Thomas","James","Adrew","Martin"];

document.write(arr + "<br />");

arr.splice(2,0,"William");

document.write(arr + "<br />");

//输出结果是:

//George,John,Thomas,James,Adrew,Martin

//George,John,William,Thomas,James,Adrew,Martin

</script>

下面的实例中,将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:

<script type="text/javascript">

var arr =["George","John","Thomas","James","Adrew","Martin"];

document.write(arr + "<br />");

arr.splice(2,1,"William");

document.write(arr);

//输出结果是:

//George,John,Thomas,James,Adrew,Martin

//George,John,William,James,Adrew,Martin

</script>

下面的实例中,将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素

("William") 来替代被删除的元素:

<script type="text/javascript">

var arr =["George","John","Thomas","James","Adrew","Martin"];

document.write(arr + "<br />");

arr.splice(2,3,"William");

document.write(arr);

//输出结果是:

//George,John,Thomas,James,Adrew,Martin

//George,John,William,Martin

</script>

4、内部数组

在网页对象中,有很多本身就是数组对象。例如:document对象的forms属性就是一个数组对

象,其中每个元素对应网页中的一个表单,示例如下:

<form name="firstForm"></form>

<form name="secondForm"></form>

<form name="thirdForm"></form>

<script language="javascript">

var fs=document.forms;

for(i=0;i<fs.length;i++){

alert(fs[i].name);

}

</script>

表单中的一个选择列表的options属性也是一个数组对象,其中每个元素对应于列表中的一个

选择项目

<form name="myForm">

<select multiple size="5" name="box" style="width:150" onClick="f(this);">

<option value="apple">苹果</option>

<option value="orange">橘子</option>

<option value="banana">香蕉</option>

</select>

</form>

<script language="javascript">

function f(o){

for(i=0;i<o.options.length;i++){

alert(o.options[i].value+","+o.options[i].text);

}

}

</script>

第二节 字符串对象类型 String

myStr="我们来自五湖四海!";



myStr= new String("我们来自五湖四海!");

1、字符串的长度属性

myStr.length 返回字符串中字符的个数9,一个汉字算一个字符。

2、字符串的方法

分为两大类,如下:

(1) 格式设置方法:

big(), bold(), fontcolor(颜色字符串), fontsize(字体号), sub(), sup()

(2) 通用字符串操作。

str="Hello";

方法描述示例及结果

anchor() 创建 HTML 锚。str.anchor("b"):<A NAME=”b”>Hello</A>

big() 用大号字体显示字符串。str.big() : <BIG>Hello</BIG>

blink() 显示闪动字符串。str.blink() : <BLINK>Hello</BLINK>

bold() 使用粗体显示字符串。str.bold() : <B>Hello</B>

charAt() 返回在指定位置的字符。"北京欢迎你".charAt(2)结果是"欢"

"北京欢迎你".charAt(0)结果是"北"

charCodeAt() 返回在指定的位置的字符的

Unicode 编码。

"北京欢迎你".charCodeAt(2)结果是27426

concat() 连接字符串。"北京".concat("欢迎你")结果是"北京欢迎你"

fixed() 以打字机文本显示字符串。str.fixed() : <FIXED>Hello</FIXED>

fontcolor() 使用指定的颜色来显示字符串。str. Fontcolor ("Red") :

<FONT color="red">Hello</FONT>

fontsize() 使用指定的尺寸来显示字符串。str. fontsize () : <FONT

size="3">Hello</FONT>

indexOf() 检索字符串。"北京欢迎你".indexOf("欢迎")结果是2

"北京欢迎你".indexOf("上海")结果是-1

"北京欢迎你,欢迎".indexOf("欢迎")结果是2

italics() 使用斜体显示字符串。str. italics () : <I>Hello</I>

lastIndexOf() 从后向前搜索字符串。"北京欢迎你,欢迎".lastIndexOf("欢迎")结果是6

link() 将字符串显示为链接。str.link("http://www.javakc.com") :

<a href="http://www.javakc.com"> Hello

</a>

match() 找到一个或多个正则表达式的匹配。

replace() 替换与正则表达式匹配的子串。

search() 检索与正则表达式相匹配的值。

slice() 提取字符串的片断,并在新的字符

串中返回被提取的部分。

"北京欢迎你".slice(2,4) 结果是"欢迎"

small() 使用小字号来显示字符串。str.small():<SMALL>Hello</SMALL>

split() 把字符串分割为字符串数组。"北京|欢迎你|欢迎".split("|")结果是

数组{"北京","欢迎你","欢迎"}

strike() 使用删除线来显示字符串。str.strike():<strike>Hello </strike>

sub() 把字符串显示为下标。

str.sub( ) : <sub> Hello </sub>

substr() 从起始索引号提取字符串中指定数

目的字符。

"北京欢迎你".substr(1,2) 结果是"京欢"

substring() 提取字符串中两个指定的索引号之

间的字符。

"北京欢迎你".substring(2,4)结果是"欢迎"

sup() 把字符串显示为上标。str.sup():<sub> Hello </sub>1

toLowerCase() 把字符串转换为小写。

(不改变旧的字符串)

"Welcome to BeiJing".toLowerCase()结果



welcome to beijing

toUpperCase() 把字符串转换为大写。

(不改变旧的字符串)

"Welcome to BeiJing".toUpperCase()结果

是WELCOME TO BEIJING

第三节 数学类 Math

包含了常用的数学常量和函数。不需要创建该类型的对象,而可以直接使用Math.属性名或

Math.方法名来使用这些常量和方法。

Math.E 返回2.718

Math.PI 返回3.14159

Math 对象方法

方法描述

abs(x) 返回数的绝对值。

acos(x) 返回数的反余弦值。

asin(x) 返回数的反正弦值。

atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。

ceil(x) 对数进行上舍入。

cos(x) 返回数的余弦。

exp(x) 返回 e 的指数。

floor(x) 对数进行下舍入。

log(x) 返回数的自然对数(底为e)。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

pow(x,y) 返回 x 的 y 次幂。

random() 返回 0 ~ 1 之间的随机数。

round(x) 把数四舍五入为最接近的整数。

sin(x) 返回数的正弦。

sqrt(x) 返回数的平方根。

tan(x) 返回角的正切。

toSource() 返回该对象的源代码。

valueOf() 返回 Math 对象的原始值。

第四节 日期时间类 Date

该类型对象中存放年月日时分秒等信息。

1、创建日期对象的几种办法:

new Date() 不带参数,则以系统时间为新创建日期对象的内容。

new Date(毫秒数) 以距1970年1月1日零时到期望时间的毫秒数为参数,创建日期对象

new Date(2005,6,3,21,0,22) 设定2005年7月3日,注意月从0开始的

new Date("July 3, 2005 21:00:22") 以指定的时间为新创建日期对象的内容

2、日期对象的方法:

getDate() 返回几号

getDay() 返回星期几 (0代表星期日,1到6代表星期一到星期六)

getHours() 返回几点

getMinutes() 返回分钟数

getSeconds() 返回秒数

getTime() 返回距1970年1月1日零时到期望时间的毫秒数

getYear() 返回年份

setDate() 设置几号

setDay() 设置星期几 (0代表星期日,1到6代表星期一到星期六)

setHours() 设置几点

setMinutes() 设置分钟数

setSeconds() 设置秒数

setTime() 以距1970年1月1日零时到期望时间的毫秒数为参数,设置时间

setYear() 设置年份

课后练习题:

1、倒序输出一个字符串的每个字符。

2、显示姓“李”和姓“王”的同学名单。

3、显示姓名中含“宁”的名单。

4、编写随机点名程序。

5、产生50个100以内的随机数,找出其中最大值和最小值,并统计大于等于60的有多少个。

6、编写倒计时程序(距明年春节的天数)。

第三章 窗口window对象

[javascript] view
plaincopyprint?

在JavaScript中可以使用window和self标志符来引用当前的浏览器窗口。

每个打开的窗口定义一个window对象,如果文档包含框架(frame 或 iframe 标签),浏览

器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

可以使用top标识符引用最上层的窗口,或使用parent标志符引用当前窗口的父窗口。

第一节 Window 对象属性

属性描述

closed 返回窗口是否已被关闭。

defaultStatus 设置或返回窗口状态栏中的默认文本。

document 对 Document 对象的只读引用。请参阅 Document 对象。

history 对 History 对象的只读引用。请参数 History 对象。

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

length 设置或返回窗口中的框架数量。

location 用于窗口或框架的 Location 对象。请参阅 Location 对象。

name 设置或返回窗口的名称。

Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。

opener 返回对创建此窗口的窗口的引用。

outerheight 返回窗口的外部高度。

outerwidth 返回窗口的外部宽度。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

parent 返回父窗口。

Screen 对 Screen 对象的只读引用。请参数 Screen 对象。

self 返回对当前窗口的引用。等价于 Window 属性。

status 设置窗口状态栏的文本。

top 返回最顶层的先辈窗口。

window window 属性等价于 self 属性,它包含了对窗口自身的引用。

· screenLeft

· screenTop

· screenX

· screenY

只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和

Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持

screenX 和 screenY。

第二节 Window 对象方法

方法描述

alert() 显示带有一段消息和一个确认按钮的警告框。

blur() 把键盘焦点从顶层窗口移开。

clearInterval() 取消由 setInterval() 设置的 timeout。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

close() 关闭浏览器窗口。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

createPopup() 创建一个 pop-up 窗口。

focus() 把键盘焦点给予一个窗口。

moveBy() 可相对窗口的当前坐标把它移动指定的像素。

moveTo() 把窗口的左上角移动到一个指定的坐标。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

print() 打印当前窗口的内容。

prompt() 显示可提示用户输入的对话框。

resizeBy() 按照指定的像素调整窗口的大小。

resizeTo() 把窗口的大小调整到指定的宽度和高度。

scrollBy() 按照指定的像素值来滚动内容。

scrollTo() 把内容滚动到指定的坐标。

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

第三节 常用方法示例

(1)打开和关闭窗口:

open 打开另外一个窗口来显示新的页面。

window.open(URL,窗口名称,可选参数)

close() 关闭用Open方法打开的窗口

可选参数:“toolbar=yes, width=500,height=200”

(2)对话框方法

alert (提示字符串) 提示信息,只有一个“确定”按钮

confirm (提示字符串)  选择确定或取消,返回值:true, false

<html>

<head>

<script type="text/javascript">

function disp_confirm(){

var r=confirm("请点击一个按钮");

if (r==true){

document.write("您点击了确认!");

}else{

document.write("您点击了取消!");

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_confirm()" value="显示一个确认框" />

</body>

</html>

prompt(提示字符串,初始值) 让用户在对话框中输入

<html>

<head>

<script type="text/javascript">

function disp_prompt(){

var name=prompt("请输入您的名字","Bill Gates");

if (name!=null && name!=""){

document.write("你好," + name + "!今天过得好吗?");

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_prompt()" value="显示一个提示框" />

</body>

</html>

(3)移动窗口方法:

(窗口左上角为坐标0,0点)

moveBy 窗口横向纵向移动多少象素 moveBy(10,10)

<html>

<head>

<script type="text/javascript">

function moveWin(){

myWindow.moveBy(50,50);

myWindow.focus();

}

</script>

</head>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100');

myWindow.document.write("This is 'myWindow'");

</script>

<input type="button" value="Move 'myWindow'" onclick="moveWin()" />

</body>

</html>

moveTo 窗口移动到参数指定的位置 moveTo(100,100)

<html>

<head>

<script type="text/javascript">

function moveWin(){

myWindow.moveTo(0,0);

myWindow.focus();

}

</script>

</head>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100');

myWindow.document.write("This is 'myWindow'");

</script>

<input type="button" value="Move 'myWindow'" onclick="moveWin()" />

</body>

</html>

(4)定时方法:

设置定时器,按指定时间间隔,反复执行某函数:

setInterval 和 clearInterval (见跑马灯程序)

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50);

function clock(){

var t=new Date();

document.getElementById("clock").value=t;

}

</script>

<button onclick="int=window.clearInterval(int)">

Stop interval

</button>

</body>

</html>

设置定时器,按指定时间间隔,执行一遍某函数:

setTimeout 和 clearTimeout

<html>

<head>

<script type="text/javascript">

function timedMsg(){

var t=setTimeout("alert('5 seconds!')",5000);

}

</script>

</head>

<body>

<form>

<input type="button" value="显示计时的消息框!"

onClick = "timedMsg()">

</form>

<p>点击上面的按钮。5 秒后会显示一个消息框。</p>

</body>

</html>

(5)聚焦方法 :

让窗口处于激活状态。

window.focus()

<html>

<body>

<script type="text/javascript">

myWindow=window.open('','','width=200,height=100');

myWindow.document.write("This is 'myWindow'");

myWindow.focus();

</script>

</body>

</html>

第四章 文档document对象

[javascript] view
plaincopyprint?

DOM (文档对象模型)

 window 整个浏览器窗口的统称,是最上层的唯一对象。这一级可以省略,是系统默认值。

 document 是Window的一个子对象,包含当前文档(HTML文件)中所有的对象。

 form 即表单,包含许多子对象。

 window、document和history对象是系统定义好的,其它对象是由我们程序员自己定义的。

我们要为每个对象起一个名称。

第一节 document对象概述

document对象最强大的一个特性在于它的组织性。如果给页面中的元素起个名字,则可以把该元

素当成document 对象的一个属性来处理。例如,如果在form 元素“form1”中有一个名叫

“ txtbox” 的文本框, 则可以像下面这样去引用该文本框中的文本:

document.form1.txtbox.value。

除了将HTML元素按名字组织起来外,document对象还有许多属性、方法、事件,这些特点可以

帮助我们扩展程序的功能。

Document 对象集合

集合描述

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性描述

body

提供对 <body> 元素的直接访问。

对于定义了框架集的文档,该属性引用最外层的 <frameset>。

cookie 设置或返回与当前文档有关的所有 cookie。

domain 返回当前文档的域名。

lastModified 返回文档被最后修改的日期和时间。

referrer 返回载入当前文档的文档的 URL。

title 返回当前文档的标题。

URL 返回当前文档的 URL。

Document 对象方法

方法描述

close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。

getElementById() 返回对拥有指定 id 的第一个对象的引用。

getElementsByName() 返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

open() 打开一个流,以收集来自任何 document.write() 或

document.writeln() 方法的输出。

write() 向文档写 HTML 表达式 或 JavaScript 代码。

writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

第二节 document对象的事件(body标记中)

onkeydown 按下任意键

onkeypress 将按下任意键

onkeyup 释放键

onclick 单击鼠标

ondblclick 双击鼠标

onmousedown 按下鼠标

onmouseup 释放鼠标

load 文档装载完毕

unload 文档卸载完毕

可以使用attachEvent方法,为body添加事件。

document.attachEvent ('onclick',getA);

第五章 表单form对象

[javascript] view
plaincopyprint?

第一节 表单对象的使用

1、什么是表单对象

表单(<form>)是Web页面中的基本元素。表单对象最主要的功能就是能够直接访问页面中的表

单。利用表单对象,可以实现与用户的交互;不需要服务器的介入,就可以实现动态改变Web页面的

行为。

对于Web页面表单,通常使用document对象的forms数组可以很方便地访问不同的表单。例如,

某HTML文件片段如下:

<form name="form1">

<input type="text">

<input type="text">

<input type="text">

</form>

<form name="form2">

<input type="text">

<input type="text">

</form>

document对象的forms数组有两个元素:forms[0]可以访问第一个表单,其中共有三个基本

元素:而forms[1]对应表单form2,其中只有两个元素。

除了用forms数组方式访问表单对象外,也可以直接用表单的名字进行访问。例如,对于上例,

也可以用document.form1和document.form2分别访问两个表单。

2、表单对象的方法

表单对象的submit()方法用于实现表单信息的提交。例如,要提交页面中的一个名为form1

的表单,可以使用下列语句:

document.form1.submit();

3、表单对象的属性

属性描述

Name 表单的名称

action 提交表单后执行的程序

target

指定数据显示在哪个窗口(_blank,_parent,_self,_top)

或哪个框架(框架名称)中

encoding 默认为text/html

method “Get”或“Post”

elements

数组

只读,表单中所有对象的索引,0,1,…

由document.表单名.elements.length可知该表单共有多少个对象

这里elements属性是一个数组,其中的元素对应于页面上表单内的各个控件。除了elements

外,表单的其他几个属性均对应于HTML语法中<form>标记的属性。

4、表单对象使用示例

下面示例如果使用表单对象,效果及代码如下:

<script type="text/javascript">

function display(){

var str;

// 使用表单名称访问表单对象的属性

str="name="+document.form1.name+"\r";

str=str+"action="+document.form1.action+"\r";

str=str+"method="+document.form1.method+"\r";

//访问表单对象的elements数组

str=str+"elements:"+"\r";

for(var i=0;i<document.form1.elements.length;i++){

str=str+ " "+document.form1.elements[i].type

+"\t"+document.form1.elements[i].name

+"\t"+document.form1.elements[i].value+"\r";

}

window.alert(str);

return false;

}

function submitform(){

//使用表单数组+下标访问表单对象

document.forms[0].submit();

}

</script>

<form name="form1" action="/web/user" method="post" onsubmit="return

display()">

<input type="text" name="text1" value="AAA"/>

<input type="text" name="text2" value="BBB"/>

<input type="checkbox" name="check1" value="aaa"/>

<input type="submit" name="submit" value="提交"/>

<input type="button" name="button" onclick="submitform();" value="js提交"/>

</form>

注意:单击“提交”按钮会触发表单的onsubmit事件。如果onsubmit的事件处理过程返回

false,则不进行表单数据的提交。但如果直接使用表单对象的submit()方法,则直接将数据提交

出去。

第二节 表单中的基本元素

表单中的基本控件由按钮、单选按钮、复选按钮、提交按钮、重置按钮和文本框等组成。在

JavaScript中要访问这些控件,可以使用以下两种方法实现:

 表单.元素名称 例如:document.form1.check

 表单.elements[下标] 例如:document.form1.elements[2]

下面分别介绍表单中的各个基本控件。

1、text对象

text对象对应于页面中的text输入框控件。

<input type="text" name="控件名称" value="默认文本" />

属性accessKey 设置或返回访问文本域的快捷键。

使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点

alt 设置或返回当浏览器不支持文本域时供显示的替代文本。

defaultValue 设置或返回文本域的默认值。

disabled 设置或返回文本域是否应被禁用。

id 设置或返回文本域的 id。

maxLength 设置或返回文本域中的最大字符数。

name 设置或返回文本域的名称。

readOnly 设置或返回文本域是否应是只读的。

size 设置或返回文本域的尺寸。

tabIndex 设置或返回文本域的 tab 键控制次序。

type 返回文本域的表单元素类型。

value 设置或返回文本域的 value 属性的值。

方法blur( ) 将当前焦点移到后台

select( ) 加亮文字,选取文本域中的内容。

focus() 在文本域上设置焦点。

主要事件onfocus,onblur,onselect,onchange

text对象使用示例如下:

<form name="form1">

<input type="text" name="text1" value="Welcome"/>

</form>

<script type="text/javascript">

document.form1.text1.value="this is a javascirpt";

document.form1.text1.select();

alert(document.form1.text1.value);

document.text1.blur();

</script>

2、textarea对象

textarea对象对应于页面中的textarea输入控件。

<textarea name="控件名称">默认文本</textarea>

属性name textarea输入框控件名称

value textarea输入框控件中当前的文本

defaultvalue textarea输入框控件的默认文本

方法blur( ) 将当前焦点移到后台

select( ) 加亮文字

主要事件onfocus,onblur,onselect,onchange

3、select对象

select对象对应于网页中的下拉列表框。

<select name="下拉列表框的名称" size="下拉列表框显示的条数">

<option value="选择值">选项描述</option>

<option value="选择值" selected>选项描述</option>

…………

</select>

属性disabled 设置或返回是否应禁用下拉列表

id 设置或返回下拉列表的 id。

length 返回下拉列表中的选项数目。

multiple 设置或返回是否选择多个项目。

name 设置或返回下拉列表的名称。

options

数组

返回包含下拉列表中的所有选项(option对象)的一个数组。

其中option对象包括如下属性:

text 该选项显示的文字

value 该选项的value值

selected 指明该选项是否别选中

selectedIndex 当前选中项的下标

size 设置或返回下拉列表中的可见行数。

方法options.add() 向下拉列表添加一个选项。

blur() 从下拉列表移开焦点。

focus() 在下拉列表上设置焦点。

remove() 从下拉列表中删除一个选项。

主要事件onfocus,onblur,onchange

4、button对象

button对象对应于网页中的按钮控件。

<input type="button" value="按钮上显示的值" name="控件名称">

属性accessKey 设置或返回访问按钮的快捷键。

alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。

disabled 设置或返回是否禁用按钮。

id 设置或返回按钮的 id。

name 设置或返回按钮的名称。

tabIndex 设置或返回按钮的 tab 键控制次序。

value 设置或返回在按钮上显示的文本。

方法blur() 把焦点从元素上移开。

click() 在该按钮上模拟一次鼠标单击。

focus() 为该按钮赋予焦点。

主要事件onclick

5、checkbox对象

checkbox对象对应于网页中的复选框。

<input type="checkbox" value="值" name="控件名称" checked>选项说明

属性accessKey 设置或返回访问 checkbox 的快捷键。

alt 设置或返回不支持 checkbox 时显示的替代文本。

checked 设置或返回 checkbox 是否应被选中。

defaultChecked 返回 checked 属性的默认值。

disabled 设置或返回 checkbox 是否应被禁用。

id 设置或返回 checkbox 的 id。

name 设置或返回 checkbox 的名称。

tabIndex 设置或返回 checkbox 的 tab 键控制次序。

value 设置或返回 checkbox 的 value 属性的值

方法blur() 从 checkbox 上移开焦点

click() 模拟在 checkbox 中的一次鼠标点击。

focus() 为 checkbox 赋予焦点。

主要事件onclick

6、radio对象

radio对象对应于网页中的单选控件。当网页中具有多个相同名称的单选控件后,就形成了一个

radio对象数组,其中每个单选控件即为一个radio对象。

<input type="radio" value="选项值" name="单选项名称" checked>选项说明

<input type="radio" value="选项值" name="单选项名称" >选项说明

…………

属性accessKey 设置或返回访问单选按钮的快捷键。

alt 设置或返回在不支持单选按钮时显示的替代文本。

checked 设置或返回单选按钮的状态。

defaultChecked 返回单选按钮的默认状态。

disabled 设置或返回是否禁用单选按钮。

id 设置或返回单选按钮的 id。

name 设置或返回单选按钮的名称。

tabIndex 设置或返回单选按钮的 tab 键控制次序。

value 设置或返回单选按钮的 value 属性的值。

方法blur() 从单选按钮移开焦点。

click() 在单选按钮上模拟一次鼠标点击。

focus() 为单选按钮赋予焦点。

主要事件onclick

7、hidden对象

hidden对象对应于网页中的隐藏域。

<input type="hidden" value="值" name="名称" >

属性alt 设置或返回当不支持隐藏输入域时显示的替代文本。

id 设置或返回隐藏域的 id。

name 设置或返回隐藏域的名称。

value 设置或返回隐藏域的 value 属性的值。

8、submit对象

submit对象对应于网页中的submit按钮。

<input type="submit" value="显示文本" name="名称" >

属性accessKey 设置或返回访问提交按钮的快捷键。

alt 设置或返回当浏览器不支持提交按钮时供显示的替代文本。

disabled 设置或返回提交按钮是否应被禁用。

id 设置或返回提交按钮的 id。

name 设置或返回提交按钮的名称。

tabIndex 设置或返回提交按钮的 tab 键控制次序。

value 设置或返回在提交按钮上显示的文本。

方法blur() 从提交按钮上移开焦点。

click() 在提交按钮上模拟一次鼠标点击。

focus() 为提交按钮赋予焦点。

主要事件onclick

9、password对象

password对象对应于网页中的密码输入框。

<input type="password" value="值" name="名称" >

属性accessKey 设置或返回访问密码字段的快捷键。

alt 设置或返回当不支持密码字段时显示的替代文字。

defaultValue 设置或返回密码字段的默认值。

disabled 设置或返回是否应被禁用密码字段。

id 设置或返回密码字段的 id。

maxLength 设置或返回密码字段中字符的最大数目。

name 设置或返回密码字段的名称。

readOnly 设置或返回密码字段是否应当是只读的。

size 设置或返回密码字段的长度。

tabIndex 设置或返回密码字段的 tab 键控制次序。

value 设置或返回密码字段的 value 属性的值。

方法blur() 从密码字段移开焦点。

click() 为密码字段赋予焦点。

focus() 选取密码字段中的文本。

主要事件onfocus,onblur,onselect,onchange
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: