javascript教案

javascript教案
javascript教案

5.1.1 动态网页技术基本概念

动态网页技术又分为服务器端的和浏览器端的动态技术。 1.浏览器端的动态技术

当用户通过客户端浏览器访问Web 页时(如单击某个图像),则浏览器调用引起动作发生的脚本。从而更改HTML 元素的样式或定位属性,使得网页“动起来”。这就是浏览器端的动态技术,也叫做DHTML ,其中,用得最多的是脚本技术:JavaScript 和VBScript 。

2.服务器端的动态技术

服务器端动态技术的运行机制是:改变网页显示的数据或页面需要在服务器端进行,由Web 服务器将来自客户端浏览器的请求按一定的规则翻译成HTML 标记,然后送回浏览器,由浏览器来解释执行。服务器端动态技术有很多种,目前常用的有ASP 、PHP 、JSP 、https://www.360docs.net/doc/f85411608.html, 和JAVA/J2EE 等。

5.3 JavaScript 编程基础

5.3.1 如何写入JavaScript

任何可以编写 HTML 文档的软件都可以用来编写JavaScript 。可以在 HTML 文档的任意地方插入 JavaScript

提示:如果要在声明框架的网页(框架网页)中使用,就一定要在之前插入,否则将导致代码无法运行。

1.在HTML 内部引用

大部分的网页都采用在HTML 内部引用JavaScript 脚本的方式,其基本格式如下:

JavaScript 动态网页制作

第 5章

第5章JavaScript动态网页制作

153

JavaScript可以应用于客户端,也可以应用于服务器端。如果应用于服务器端,则通过使用

…或标记的方

式嵌入到服务器端的脚本或程序中。

【操作实例】在网页中内部引用JavaScript脚本

目标:使用Dreamweaver在网页中内部引用JavaScript脚本,使其显示“hello,world!”并

弹出一个提示框,效果如图所示。

把JavaScript脚本放置在…标签对之间,或者,放置在…标签

对之间。那么这两种放置方式有什么区别呢?

●位于 head 部分的脚本:当脚本被调用时,或者当事件被触发时,脚本就会被执行。当

把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。

●位于 body 部分的脚本:在页面载入时脚本就会被执行。当把脚本放置于 body 部分后,

它就会生成页面的内容。

2.在HTML中外部引用

外部 JavaScript 脚本文件以.js为扩展名。在HTML中外部引用JavaScript文件的语法如下:

【操作实例】建立外部链接JavaScript文件

目标:把【操作实例7】改造为外部链接JavaScript文件的形式,浏览效果不变。

2.在HTML代码行中直接嵌入脚本

【操作实例4】在网页中设置按钮单击事件和“返回上一页”功能。

目标:单击按钮弹出提示框;使用history对象的方法设置通过单击“返回上一页”超链接

显示刚访问过的网页的功能。

154 网站规划建设与管理维护

提示:以eg3.html文件为起点观看“返回上一页”效果是无法实现的,最好先建立一个“前一页”文件eg3_f.html,设置一个超链接到eg3.html,即可看到想要的效果。

5.3.3 JavaScript如何输出显示

1.在页面中输出

document.write()语句是JavaScript向客户端输出的方法。以下代码表示在当前文档中输出指定文字。

但是,如果在网页元素中调用document.write()方法,例如:单击某按钮后输出指定文字,则执行该语句时,原有网页元素将消失。

2.在元素中输出

如果希望JS输出语言出现在指定的网页元素内,例如单元格、

方框等地方。则应事先定义元素的id号,然后使用innerHTML或innerText属性指定输出内容。

第5章JavaScript动态网页制作

155

mybox.innerHTML和mybox.innerText的区别在于?

那么mybox.innerHTML 就是 wait

而mybox.innerText就是wait

3.在表单元素中输出

许多表单元素拥有value属性,通过js语句给value属性赋值,可实现在表单元素中输出内

容的目的。

【操作实例15】在不同的地方输出js内容

目标:采用不同的方式方法,在指定的页面、单元格、

方框、文本框、提示框中输出文

字内容。

156 网站规划建设与管理维护

5.3.3 JavaScript的语法书写格式

JavaScript的语法与C、C++很相似,只是前者在使用过程中没有那么严格。

1.单个语句和语句块

(1)单个语句

语句;

如果一行只写一个语句,分号“;”可以不写。

(2)语句块

语句块是用大括号“{ }”括起来的一个或n个语句。

2.注释

(1)单行注释:单行注释用双斜杠“//”表示。

(2)多行注释:用“/*”和“*/”括起来的一行到多行文字。

5.3.2 JavaScript的基本数据结构

1.基本数据类型

●数值型

●字符串型

●布尔型

●Null值

2.常量

第5章JavaScript动态网页制作

157

3.变量

(2)变量的命名

●变量名是区分大小写的

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

●后续的字符可以是字母、数字、下画线或美元符。

●变量名不能是保留字。

(3)变量的声明

变量可以不作声明,在使用或赋值时会自动说明其数据类型。声明变量的基本格式:

var 变量 [= 值];

(4)变量的赋值

变量声明后,可以在任何时候对其赋值。赋值的语法是:

变量=表达式

(5)变量的作用域

变量的作用域也就是变量的有效范围。全局变量定义在所有函数体之外,其值的有效范围是

包含该变量的整个文件;而局部变量定义在函数体之内,只对该函数是有效的,而对其他函数则

是无效的,所以定义变量时一定要注意其适用范围。

4.运算符和表达式

(1)算术运算符,如表5-15所示。

(2)逻辑运算符,如表5-16所示。

(3)比较运算符,如表5-17所示。

(4)位运算符,如表5-18所示。

(5)赋值运算符,如表5-19所示。

(6)还有一个 ?:(条件运算符),例如:s=(3>2)? "Of course":"what?no!",该语句执行后s

的值为"Of course"。

5.运算符的优先级

5.3.5 JavaScript的函数

1.JavaScript的全局函数

常见的全局函数的功能及用法如表5-21所示。

2.自定义JavaScript函数

(1)函数的定义

定义函数的基本格式如下:

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

函数体;

[ return 表达式;]

158 网站规划建设与管理维护

}

(2)函数的调用

调用函数的基本格式如下:

函数名([实参表])

【操作实例15】计算圆柱体体积

目标:定义一个计算圆柱体体积的函数,该函数包括两个参数(圆半径r及高h)。

5.3.4 JavaScript的常用语句

1.if条件语句

基本格式:

if (条件){

语句段1}

[else{

语句段2}]

【操作实例9】使用if…else语句

目标:使用if…else语句,根据输入的每天工作时间,得出不同的评价。

第5章JavaScript动态网页制作

159 图5-25 eg9.html中的设计视图及脚本图5-26 脚本执行结果2.for循环语句

基本格式:

for(初值表达式;[条件表达式];增量表达式)

{语句段};

【操作实例10】使用for循环语句

目标:从文本框中输入n的值,然后输出从1加到n的求和结果。

图5-27 eg10.html中的脚本图5-28 脚本执行效果3.while循环

基本格式:

while (条件表达式)

{ 语句段}

【操作实例11】使用while循环语句

目标:改造【操作实例11】,改用while循环语句,从文本框中输入n的值,然后输出从1

加到n的求和结果。

图5-29 eg11.html中的脚本图5-30 脚本执行效果4.switch分支语句

160 网站规划建设与管理维护

基本格式:

switch (表达式)

{

case 标签1:

[语句段1;]

[break;]

case 标签2:

[语句段2;]

[break;]

[default: 语句段n;]

}

【操作实例12】使用switch分支语句实现变换网页背景色

目标:网页的背景根据不同的选项变换颜色

图5-31 eg7.html中的脚本图5-32 脚本执行效果提示:目前绝大多数浏览器都支持JavaScript脚本,对于不支持JavaScript 的浏览器,使用 标记可让其跳过。否则会把不该显示的内容显示到网页上。

第5章JavaScript动态网页制作

161 5.break和continue语句

(1)break语句

本语句放在循环体内,作用是立即跳出循环,执行循环体后面的语句。

(2)continue语句

本语句放在循环体内,作用是中止本次循环,并执行下一次循环。如果循环的条件已经不符合,就跳出循环。

【操作实例13】使用continue语句

目标:输出1~100以内的奇数。

图5-33 eg13.html中的脚本图5-34 脚本执行效果试一试,如果将continue语句改为break语句,效果会如何?

3.自定义对象

虽然系统已经提供了很多内建对象,但有时候还是满足不了程序的需要。定义对象的格式如下:function 对象名(属性表){

this.属性名1=属性值1

this.属性名2=属性值2

this.方法1=函数名1

this.方法2=函数名2

…}

使用自定义对象需要两个步骤:

(1)定义对象:用function写一个函数来实现。

(2)创建对象实例:使用new操作符。

以下代码表示创建一个关于person的对象

function person(fullname,age,height)

{

this.fullname=fullname //定义属性

this.age=age //定义属性

this.height=height //定义属性

this.newname=newname //定义方法

162

网站规划建设与管理维护

一旦创建了对象,就可以创建新的对象实例,例如:

注意:方法只是依附于对象的函数而已。因此,需要编写 newname() 函数:

newname() 函数定义 person 的新的fullname ,并将之分配给 person 。通过使用 “this.”,JavaScript 即可得知person 指的是谁。因此,现在可以这样写:myMother.newname("张青")。 【操作实例13】自定义对象的应用

目标:自定义对象person

,定义该对象的三个属性

(fullname,age,height)和一个方法disp (),并应用到表单中,使得在表单中选择某一选项对象,则在下方的文本框中显示该对象的属性值,如图所示。

5.3.7 事件及事件处理

myFather=new person("李明",50,"175") myMother=new person("张丽",48,"160")

function newname(new_name) {

this. fullname=new_name }

第5章JavaScript动态网页制作

163 1.有关事件的介绍

用户与网页交互时产生的操作,称为事件。可以直接在 HTML 标记中指定事件处理程序,方

法是:

<标记事件="事件处理程序" [事件="事件处理程序" ... ] >

2.事件处理程序

浏览器为了响应某个事件而进行的处理过程,叫做事件处理。事件的处理程序可以是任意的JavaScript 语句,但一般由函数(function)担任。可以将前面所介绍的所有函数作为事件处

理程序使用。

【操作实例20】定义事件处理程序

目标:实现两种效果。一是,当文本框得到焦点时显示一串字符,当文本框失去焦点时显示

另一串字符;二是,通过在列表中选择不同的年龄段,显示不同的语句。

3.event对象

event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

他只在事件发生的过程中才有效。

【操作实例23】限制输入文本框的字符

目标:限制文本框中分别只能输入字母和数字。

164 网站规划建设与管理维护

图5-53 eg23.html中的设计与脚本图5-54 网页效果程序分析(见图5-53):

第8、12行:判断输入字符的ASCII编码是否在字母(包括大写字母和小写字母)、数字所在的编码段。

第9行、13行:如果输入的字符不是字母、数字,则取消事件处理,即不接受该字符。

第35行:当鼠标onmousedown事件被触发时,该event对象送给函数coordinates()进行处理。

5.2文档对象模型DOM

在JavaScript中,可以使用以下几种对象

●由DOM对象模型提供的浏览器对象,这些对象可以直接使用。

●JavaScript的内置对象,如Date、Math等。

第5章JavaScript动态网页制作

165

●服务器上的固有对象。

●用户自定义的对象。

5.2.1 DOM文档对象模型简介

DOM是Document Object Model(文档对象模型)的缩写,是W3C制订的标准(有关HTML DOM 的一切,参见W3C技术推广网站https://www.360docs.net/doc/f85411608.html,/htmldom/)。HTML的DOM结构

示意图如图5-1所示。

图5-1 HTML的DOM结构示意图

基于这样的结构化文档对象模型,每个网页元素:从窗口到文档,到网页中的任何一个元素,都是一个对象,每个对象(即网页元素)都有自己的属性、方法及事件。

在DOM中,浏览器会为每一个网页自动创建window对象、document对象、history对象、location对象和Navigater对象。window对象位于浏览器所有对象的最顶层,其他对象都是该对

象的子对象,所以一般来说,可以省略。例如:window.open()可以写成open();window.document.write()可以写成document.write()。下面,我们一起来学习几个常用的浏览

器对象。

5.2.2 window对象

只要打开浏览器窗口,就会自动创建window对象。

下面一起来了解window对象的常用属性(见表5-1)和方法(见表5-2)。

表5-2 Window窗口对象的方法及其功能描述

166

网站规划建设与管理维护

对于open 方法。其使用方法如下:

window.open("pop.html","newwindow","height=100,width=200,top=0,left=0,scro llbars=no")

表5-3 窗口特性设置

【操作实例1】使用window 窗口对象的属性动态改变窗口状态栏的显示

目标:使用window 窗口对象的属性在状态栏显示指定的信息。另外,为按钮添加一个onclick 事件,使用window 的open 方法打开一个新窗口。

图5-4 网页预览效果 图5-5 “打开浏览器窗口”对话框

第5章JavaScript动态网页制作

167 提示:Dreamweaver将window的open方法放在JavaScript的函数中,通过将值传递给函数

来打开新窗口。也可以不使用这种方法,而是直接使用open方法来实现,将onclick后的函数名MM_openBrWindow替换成window.open,也能得到同样的效果。

⑤修改自动生成的代码,实现同样的效果:删除之间的脚本,将onclick

后的函数名MM_openBrWindow替换成window.open,代码如图5-6所示。

图5-6 “eg2.html”的“代码”视图

5.2.3 document对象

document对象是一个顶层对象,不需要预先实例化就可直接使用。引用该对象属性和方法的

格式如下:

如果是对当前窗口,则用:document.propertyname

如果是对指定窗口,则用:windowObjectName.document.propertyname

document对象的常用属性及其功能如表5-4所示。

【操作实例3】使用document对象

目标:使用document对象在当前窗口中打开一个新窗口并在其中写入一些网页内容。

图5-7 ex3.html中的脚本

168 网站规划建设与管理维护

图5-8 当前窗口效果图5-9 新窗口效果

5.2.4 history对象

history对象包含一组用户在浏览器中访问过的URL信息。history历史对象的属性及其功能如表5-6所示。

5.2.5 location对象

location对象提供了浏览器窗口中文件的来源、URL、主机名、路径等信息。

location对象的属性及其功能描述如表5-8所示。

表5-8 location对象的属性及其功能描述

location对象的方法及其功能描述如表5-9所示。

表5-9 location对象的方法及其功能描述

【操作实例5】location对象的应用

第5章JavaScript动态网页制作

169 目标:利用location对象显示当前路径和当前时间,并提供一个用于刷新时间的按钮。

图5-11 eg5.html中的脚本图5-12 网页脚本运行效果

5.2.6 form对象及form元素对象

【操作实例6】form对象及form元素对象

目标:设计一个数学竞赛界面,当用户单击“开始”按钮时出现欢迎语句;设计三道单项选

择题,可对每道题进行分数统计及显示解题方法。

170 网站规划建设与管理维护

图5-15 各表单元素对应的对象类型

程序说明(见图5-37):

第8行的txt.innerHTML表示指定第29行的

的显示内容。

第13行的form1.RadioGroup1[0].checked==1表示选择了第一题的第一个选项。

第28、52和54行的按钮类型要确保type="button",并添加其onclick行为。

5.2JavaScript的内置对象

JavaScript提供了很多非常有用的内置对象,常用的有数学对象、字符串对象、日期对象和数组对象等。下面我们一起来学习这几种对象的使用方法。

5.2.6 Math数学对象

数学对象是内置对象,不需要使用new操作符来创建对象实例,在JavaScript中可以直接调用数学对象的属性和方法。Math对象的属性、方法及其功能分别如表5-24、表5-25所示。

第5章JavaScript动态网页制作

171

表5-25 Math对象的方法及其功能

【操作实例18】利用Math数学对象实现抽奖效果

目标:产生10个1~10之间的随机整数,对应10个小球图片,每单击一次“抽奖”按钮,

就抽取一个小球,抽中6号或8号球即可中奖。

操作过程:

①在chapter5文件夹下新建一个文件夹pic,在这个文件夹下放入10个gif格式的图像文件,如图5-55所示,并分别命名为1.gif、2.gif、…、10.gif。

图5-55 10个彩色球图像

图5-43 eg18.html中的脚本图5-44 脚本执行效果

5.2.6 string字符串对象

javascript创建类方法

Javascript 语言本身也可以进行面向对象的编程,如下是最近几天对javascript面向对象编程的总结。 对象的创建 javascript对象有两种创建方式 1.使用对象初始器: objName = { prop1:value_1, prop2:value_2, ... } 该方法直接创建实例对象,而无需声明。 2.使用构造函数: 如:fuction Engineer(para1,para2){ this.para1 = para1; this.para2 = para2; ... } my Bill = new Engineer("Bill","24"); 该方法需要用new()来创建实例。 为一个object类型添加新的属性: 如:Bill.prototype.sex = "man"; 这样,所有Engineer类型的对象都有属性sex,其value为"man", 而如下语句: Bill.sex = "man"; 则只是为Bill对象本身添加一个属性。 为对象定义一个方法: function draw(){ ... } fuction Engineer(para1,para2){ this.para1 = para1; this.para2 = para2; this.draw = draw; ... } my Bill = new Engineer("Bill","24"); Bill.draw();

也可以使用如下的定义方式: objName = { prop1:value_1, prop2:value_2, draw:function(num){ ... } ... } 引用时用objName.draw(); 删除对象的一个属性: //Creates a new property, myobj, with two properties, a and b. myobj = new Object; myobj.a=5; myobj.b=12; //Removes the a property, leaving myobj with only the b property. delete myobj.a;//删除myobj实例对象的a属性 删除对象的一个方法: delete objName.draw;//删除objNmae实例对象的draw函数 ===================================================================== ======= 在JavaScript中可以使用function关键字来定义一个“类”,如何为类添加成员。在函数内通过this指针引用的变量或者方法都会成为类的成员,例如: function class1(){ var s="abc"; this.p1=s; this.method1=function(){ alert("this is a test method"); } } var obj1=new class1(); 通过new class1()获得对象obj1,对象obj1便自动获得了属性p1和方法

深入认识JavaScript中的this指针,学习群76650734

学习群76650734 深入认识JavaScript中的this指针 this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。 和其他面向对象的语言不同,JavaScript中的this指针是一个动态的变量,一个方法内的this指针并不是始终指向定义该方法的对象的,在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解,再来看下面的例子: 以下是引用片段: <script language="JavaScript" type="text/javascript"> <!-- //创建两个空对象 var obj1=new Object(); var obj2=new Object(); //给两个对象都添加属性p,并分别等于1和2 obj1.p=1; obj2.p=2; //给obj1添加方法,用于显示p的值 obj1.getP=function(){ alert(this.p); //表面上this指针指向的是obj1 } //调用obj1的getP方法 obj1.getP(); //使obj2的getP方法等于obj1的getP方法 obj2.getP=obj1.getP; //调用obj2的getP方法 obj2.getP(); //--> </script> 从代码的执行结果看,分别弹出对话框显示1和2。由此可见,getP函数仅定义了一次,在不同的场合运行,显示了不同的运行结果,这是有this指针的变化所决定的。在obj1的getP方法中,this就指向了obj1对象,而在obj2的getP方法中,this就指向了obj2对象,并通过this指针引用到了两个对象都具有的属性p。 由此可见,JavaScript中的this指针是一个动态变化的变量,它表明了当前运行该函数的对象。由this指针的性质,也可以更好的理解JavaScript中对象的本质:一个对象就是由一个或多个属性(方法)组成的集合。每个集合元素不是仅能属于一个集合,而是可以动态的属于多个集合。这样,一个方法(集合元素)由谁调用,this指针就指向谁。实际上,前

javaScript练习题

JS练习题 JS练习题 (1) 一、选择题 (2) 二、不定项选择题 (7) 三、填空 (8) 四、判断 (9) 五、阅读程序写结果 (10) 六、程序题 (12) 七、设计题 (15)

一、选择题 1、写“Hello World”的正确javascript语法是?() A. document.write("Hello World") B. "Hello World" C. response.write("Hello World") D. ("Hello World") 2、JS特性不包括() A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 A.if(i==0) B.if(i=0) C.if i==0 then D.if i=0 then 4、下列JavaScript的循环语句中( )是正确的 A.if(i<10;i++) B.for(i=0;i<10) C.for i=1 to 10 D.for(i=0;i<=10;i++) 5、下列的哪一个表达式将返回假() A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 A.onclick B.onmouseover C.onsubmit D.onpressbutton 7、有语句“var x=0;while(____) x+=2;”,要使while循环体执行10次,空白处的循环判定式应写为:() A.x<10 B. x<=10 C.x<20 D.x<=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 A.a1+a2=30 B.a1+a2=1020 C.a1+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是() A.s.toSmallCase() B.s.toLowerCase() C.s.toUpperCase() D.s.toUpperChars() 10、以下( )表达式产生一个0~7之间(含0,7)的随机整数. A.Math.floor(Math.random()*6) B.Math.floor(Math.random()*7) C.Math. floor(Math.random()*8) D.Math.ceil(Math.random()*8) 11、产生当前日期的方法是() A.Now(); B.Date() C.new Date() D.new Now() 12、如果想在网页显示后,动态地改变网页的标题() A.是不可能的 B.通过document.write(“新的标题容”) C. 通过document.title=(“新的标题容”) D. 通过document.changeTitle(“新的标题容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()

JavaScript面向对象简介

JavaScript面向对象简介 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的OOP 语言能力。本文从对面向对象编程的介绍开始,带您探索JavaScript 的对象模型,最后描述 JavaScript 当中面向对象编程的一些概念。 复习JavaScript 如果您对JavaScript 的概念(如变量、类型、方法和作用域等)缺乏自信,您可以在重新介绍JavaScript这篇文章里学习这些概念。您也可以查阅这篇JavaScript 1.5 核心指南。 面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例,包括模块化,多态和封装几种技术。今天,许多流行的编程语言(如Java,JavaScript,C#,C+ +,Python,PHP,Ruby 和Objective-C)都支持面向对象编程(OOP)。 面向对象编程可以看作是使用一系列对象相互协作的软件设计,相对于传统观念,一个程序只是一些函数的集合,或简单的计算机指令列表。在OOP中,每个对象能够接收邮件,处理数据和发送消息给其他对象。每个对象都可以被看作是一个独立的小机器有不同的作用和责任。 面向对象程序设计的目的是促进更好的编程灵活性和可维护性,并在大型软件工程中广为流行。凭借其十分注重的模块化,面向对象的代码开发更简单,往后维护更容易理解,使其自身能更直接的分析,编码,理解复杂的情况和过程,比非模块化编程方法省事。1

术语 Namespace 命名空间 允许开发人员在一个专用的名称下捆绑所有功能代码的容器。 Class 类 定义对象的特征。 Object 对象 类的一个实例。 Property 属性 对象的特征,比如颜色。 Method 方法 对象的能力,比如行走。 Constructor 构造函数 实例化时调用的函数。 Inheritance 继承 一个类可以继承另一个类的特征。 Encapsulation 封装 类定义了对象的特征,方法只定义了方法如何执行。 Abstraction 抽象 结合复杂的继承,方法,属性,一个对象能够模拟现实的模型。 Polymorphism 多态 多意为‘许多’,态意为‘形态’。不同类可以定义相同的方法或属性。更多关于面向对象编程的描述,请参照维基百科的面向对象编程。 原型编程

JavaScript教案

JavaScript 教案 JavaScript简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于HTML 和web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入HTML 页面的编程代码。 JavaScript 插入HTML 页面后,可由所有的现代浏览器执行。 JavaScript 很容易学习。 您将学到什么 下面是您将在本教程中学到的主要内容。 JavaScript:直接写入HTML 输出流 实例 document.write("

这是一个标题

"); document.write("这是一个段落。 "); 尝试一下?

您只能在HTML 输出中使用document.write。如果您在文档加载后使用该方法,会覆盖整个文档。 JavaScript:对事件的反应 实例 尝试一下? alert() 函数在JavaScript 中并不常用,但它对于代码测试非常方便。 onclick 事件只是您即将在本教程中学到的众多事件之一。 JavaScript:改变HTML 内容 使用JavaScript 来处理HTML 内容是非常强大的功能。 实例 x=document.getElementById("demo")//查找元素 x.innerHTML="Hello JavaScript";//改变内容 尝试一下? 您会经常看到document.getElementById("some id")。这个方法是HTML DOM 中定义的。

JavaScript面向对象编程(最终版)

JavaScript面向对象编程 1、引言 JavaScript是一种解释性的,基于对象的脚本语言(an interpreted, object-based scripting language)。JavaScript 基于客户端运行,目前基本上所有的浏览器都支持JavaScript。1995年首次出现时,JavaScript的主要目的还只是处理一些输入的有效性验证,随着互联网的蓬勃发展,JavaScript的应用越来越广泛,特别是近几年AJAX技术(Asynchronous JavaScript and XML)的发展,更使JavaScript的应用达到了一个新的高度。在AJAX技术中,JavaScript是一项关键技术,请求的发送、接收、接收数据后的界面处理都需要使用JavaScript技术,这对JavaScript语言提出了新的需求,本文从JavaScript的基本特点出发,模拟出了面向对象编程的大部分特点,使JavaScript摆脱了以往脚本语言杂乱无章、难以阅读、难以维护的形象,而具有了面向对象特性,极大的方便了JavaScript的开发、维护,提高了软件开发效率。 2、JavaScript的基本特点 JavaScript是解释性的,基于对象的脚本语言。它有下面几个显著特点,这几个特点在后面的面向对象特性模拟中会反复用到,因此这里先详细说明这几个特点。 解释型语言:JavaScript是一种解释性语言,解释性语言相对于编译型语言,编译型语言必须先通过编译才能执行,而解释性语言不需要编 译,直接从上到下解释执行,一边解释一边执行,这就决定了解释性语 言的代码是有先后顺序的,需要执行的代码必须已经解释过。因此, JavaScript需要注意代码的先后顺序。

js的面向对象的三大特征

◆js的面向对象的三大特征 1.封装性 所谓封装,就是把我们抽象出的属性和对属性的操作写到类的定义中,称为封装. js 中实现封装主要有两种封装( 公开,私有) class Person(name,sal){ https://www.360docs.net/doc/f85411608.html,=name; //公开 var sal=sal;//私有 this.showInfo=function(){ //公开 window.alert(https://www.360docs.net/doc/f85411608.html,+””+sal); } showInfo2(){ //把函数私有化. window.alert(“你好”+https://www.360docs.net/doc/f85411608.html,+””+sal) } } ◆通过构造函数添加成员方法和通过原型法添加成员方法的区别 1.通过原型法分配的函数是所有对象共享的. 2.通过原型法分配的属性是独立.(如果你不修改属性,他们是共享) 3.建议,如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函 数,这样比较节省内存. function Dog(){ this.shout=function(){ } } //原型法 Dog.prototype.shout=function (){ window.alert("小狗尖叫"+https://www.360docs.net/doc/f85411608.html,); } //通过原型也可以给每个对象,分配属性 Dog.prototype.color="red";

var dog1=new Dog("aa"); var dog2=new Dog("bb"); if(dog1.shout==dog2.shout){ window.alert("dog1.shout==dog2.shout"); } dog1.color="黑色"; window.alert(dog1.color+" "+dog2.color); 4.请大家看一个题: function Person(){ } // 创建对象 var p1=new Person(); // p1.say(); [错误] // 这时用原型法分配 Person.prototype.say=function(){ window.alert("ok"); } p1.say(); 结论是类.prototype.函数=function (){}; 称为后置绑定. js面相对象的继承 看一段代码->问题是什么? ①对象冒充 代码如下:

Javascript

1、如果要从函数返回值,必须使用哪个关键词?( c ) A.continue B.break C.return D.exit 2、下列哪个函数可以将参数字符串当成Javascript程序代码执行?( a ) A.eval() B.escape() C.encodeURI() D.toString() 3 、下列哪个函数可以将参数转换为浮点数?( d ) A.isNaN() B.parseInt() C.Number() D.parseFloat() 4、下列哪个函数可以用来判断参数是否为有限值?(b ) A.isNumber() B. isFinite() C. isNull() D. isNaN() 5、分析如下的JavaScript代码片段, b的值为( ) var a = "1.5" , b; b=parseInt(a); A. 2 B. 0.5 C. 1 D. 1.5 7、分析下面的JavaScript代码段: var a=15.49; document.write(Math.round(a)); 输出的结果是(a)。 A. 15 B. 16 C. 15.5 D. 15.4 9、在HTML页面中,下面有关的Document对象的描述错误的是(d)。 A.Document对象用于检查和修改HTML元素和文档中的文本 B.Document对象用于检索浏览器窗口中的HTML文挡的信息 C.Document对象的location属性包含有关当前URL的信息 D.Document对象提供客户最近访问的URL的列表 10、window对象的open方法返回的是(a) A.返回打开新窗口的对象 B. boolean类型,表示当前窗口是否打开成功C.没有返回值 D.返回int类型的值,开启窗口的个数 11、要求用JavaScript实现下面的功能:在一个文本框中内容发生改变后,单击页面的其他部分将弹出一个消息框显示文本框中的内容,下面语句正确的是(b) A. B. C. D. 12、setInterval("alert('welcome');",1000);

JavaScript的bom对象

第12章对象模型与事件处理 JavaScript是一种面向对象的语言,使用对象模型可以描述JavaScript对象之间的层次关系。另外,JavaScript还可以捕捉到用户在浏览器中的操作,并对不同的操作进行响应,这就是JavaScript的事件驱动与事件处理。 12.1 对象模型 JavaScript中的对象并不是独立存在的,对象与对象之间存在着层次结构,对象模型的作用就是描述这些层次结构。 12.1.1 对象模型简介 对象模型是用来描述对象的逻辑层次结构以及其标准的操作方法的一个应用程序接口(API)。在JavaScript中,可以将对象模型分为以下几个组成部分。 核心部分(Core):JavaScript的核心部分主要包括JavaScript的数据类型、运算符、表达式,以及JavaScript中内置的全局对象、全局属性和全局函数等。前面章节中所介绍的都是JavaScript的核心部分。 浏览器对象模型(Browser Object Model):简称为BOM。浏览器对象模型提供了用户与浏览器之间交互的对象以及操作的接口。这些对象中,有很大一部分是与网页内容不相关的,如代表屏幕的Screen对象,代表浏览器的Navigator对象等。 文档对象模型(Document Object Model):简称为DOM。文档对象模型是由World Wide Web(W3C)委员会所定义的标准文档对象模型,该模型是一个能够让程序或脚本动态地访问和更新文档内容、结构和样式的应用程序接口。DOM的版本可以分为DOM1、DOM2和DOM3。BOM虽然不是W3C中的标准,但是众多浏览器都能实现该对象模型,因此也被称为0级DOM。 12.1.2 客户端对象层次 浏览器的主要作用是显示一个HTML文档,在这种情况下,JavaScript使用Document对象代表HTML文档,使用Window对象代表显示该HTML文档的浏览器窗口,如图12-1所示。

JAVASCRIPT面向对象基础总结

javascript面向对象基础 1.使用[]调用对象的属性和方法 functionUser() { this.age=21; this.sex="男?"; } varuser=newUser(); alert(user["age"]); 2.动态添加,修改,删除对象的属性和方法//定义类varuser=newObject(); //添加属性和方法 https://www.360docs.net/doc/f85411608.html,="cary"; user.age=21; user.show=function(){ alert(https://www.360docs.net/doc/f85411608.html,+"年?龄?为?:?"+this.age);} //执行方法 user.show(); //修改属性和方法 https://www.360docs.net/doc/f85411608.html,="James"; user.show=function() { alert(https://www.360docs.net/doc/f85411608.html,+"你?好?"); } //执行方法 user.show(); //删除属性和方法 https://www.360docs.net/doc/f85411608.html,="undefined"; user.show="undefined" //执行方法 user.show(); 3.使用大括号{}语法创建无类型对象varobj={}; varuser= { name:"cary", age:21,

show:function(){ alert(https://www.360docs.net/doc/f85411608.html,+"年?龄?为?:?"+this.age); } } user.show(); varobj={};等价于 varobj=newObject(); 4.Prototype原型对象 每个函数function也是一个对象,对应的类类型为“Function”,每个函数对象都有一个子对象prototype,表示函数的原型,所以当我们new一个类的对象的时候prototype对象的成员都会被实例化为对象的成员。例如: functionclass1() {} class1.prototype.show=function(){ alert("prototyemember"); } varobj=newclass1(); obj.show(); 5.Function函数对象详解 5.1Function和Date,Array,String等一样都属于JavaScript的内部对象,这些对象的构造器是由JavaScript本身所定义的。上面说过函数对象对应的类型是Function,这个和数组的对象是Array一个道理。所以也可以像newArray()一样newFunction()来创建一个函数对象,而函数对象除了使用这种方式还可以使用function关键字来创建。我们之所以不经常使用newFunction()的方式来创建函数是因为一个函数一般会有很多语句,如果我们将这些都传到newFunction()的参数中会显得可读性比较差。varfunctionName=newFunction(p1,p2,...,pn,body)其中p1到pn为参数,body为函数体。 5.2有名函数和无名函数 有名函数:functionfuncName(){}无名函数:varfuncName=function(){}他们之间的唯一区别:就是对于有名函数他可以出现在调用之后再定义,而对于无名函数,他必须是在调用之前就已经定义好。 5.3我们可以利用Function的prototype对象来扩展函数对象,如: Function.prototype.show=function(){ alert("扩展方法"); }

js面向对象编程(一看就懂)

JavaScript面向对象(一看就懂) 1、对象描述 如果有个人,他叫周杰伦,性别是男,他还有一个变化的年龄,我们该怎么用面向对象的方式来表述呢? 第一、我们先给他起一个对象名叫zjl。 第二、我们给这个对象两个属性,一个属性叫name,它的值为"周杰伦",另一个属性叫gender,它的值为"male"。 第三、我们给这个对象一个方法,叫setAge,它可以给zjl这个对象设置年龄,它有一个形参age,用于接收代表实际年龄的实参。 2、第一种创建对象的方法 让我们先来看一下创建对象的第一种方法,格式为如下所示。注意属性和属性值之间要有英文的冒号,各个属性以及函数之间要用英文的逗号隔开,对象末尾的属性值或函数后没有逗号。 注意这里面的this关键字,代表zjl这个对象,this.curage=age也就是把形参的值赋给zjl这个对象的curage属性,你当然也可以用同样的方法给属性name和gender赋值,赋值后name和gender的初始值就会被覆盖掉。现在想一想如果curage不加前面this.呢?还记得我们前面讲过的全局变量吗?没错,这样curage就不是对象zjl的属性,而是一个全局变量了,那如果我们写成var curage呢,这是它只是setAge函数里面的一个局部变量,也不再是对象zjl的属性了。加了this关键字的方法和属性叫做公有方法和属性,不管在对象内部还是外部都可以访问。所以当我们在对象内部要引用公有方法和属性时,一定记得要加his 关键字。 /*var对象名={ 属性名1:属性值, 属性名2:属性值, ...... 函数名1:function(形参......) {函数体1}, 函数名2:function(形参......) {函数体2}, ...... };*/ var zjl={ name:"周杰伦", gender:"male", setAge:function(age){ this.curage=age; } }; 3、第二种创建对象的方法 第二种创建对象的格式为: var对象名=new Object(); 对象名.属性名1=属性值1; ......

Javascript学习心得

Javascript学习心得.txt如果中了一千万,我就去买30套房子租给别人,每天都去收一次房租。哇咔咔~~充实骑白马的不一定是王子,可能是唐僧;带翅膀的也不一定是天使,有时候是鸟人。Javascript学习心得 Javascript的应用目的 通过对JavaScript的学习,知道它是由C语言演变而来的,而且在很大程度上借用了Java的语法,而Java又是由C和C++演生而来的,所以JavaScript和C有许多相似的语法特点。JavaScript的出现,可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息,并对客户操作进行反应的Web页面取代。JavaScript 脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎,它是众多脚本语言中较为优秀的一种。 Javascript的优点 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点: 一、脚本编写语言 JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript 同样已是一种解释性语言,它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB等语言十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。 二、基于对象的语言 JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 三、简单性 JavaScript的简单性主要体现在:首先它是一种基于Java 基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。 四、安全性 JavaScript 是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 五、动态性

JavaScript章节测试

1 Javascript语言是公司开发的产品(B) 窗体顶端 A、Microsoft B、Netscape C、SUN D、HP 我的答案:B 2 Jscript是哪个公司开发的产品 A、Microsoft B、Netscape C、SUN D、HP 我的答案:A 3 Javascript可以使用以下哪种软件进行编写 A、EXCEL B、Notepad C、.ORCAL D、Access 我的答案:B 4 与网页相关的概念有哪些? A、主页 B、超文本 C、超链接 D、浏览器 E、服务器 F、光盘 我的答案:ABCDE 5 Javascript的基本特点有哪些? A、脚本编程语言 B、基于对象的语言 C、简单性 D、动态性 E、多态性 F、跨平台性 我的答案:ABCDF 6 JavaScript是一种________和________并具有安全性能的脚本语言我的答案: 第一空:对象第二空:事件驱动

1 HTML代码table width=# or%表示? A、设置表格格子之间空间的大小 B、设置表格格子边框与其内部内容之间空间的大小 C、设置表格的宽度-用绝对像素值或文档总宽度的百分比 D、设置表格格子的水平对齐 我的答案:C 窗体底端 2 html语言中,设置围绕表格的边框的宽度的标记是?(A) A、border=# B、cellspacing=# C、cellpadding=# D、width=# 我的答案:A 3 禁止表格格子内的内容自动断行回卷的HTML代码是哪项? A、valign=? B、nowrap C、rowspan=# D、colspan=# 我的答案:B 4 表单中代表多行文本框的代码是 A、input tyle="text" B、input tyle="radio" C、textarea D、select 我的答案:C 窗体底端 5 HTML文本显示状态代码中,表示 A、文本或图片居中 B、文本加注下标线 C、文本加注上标线 D、文本闪烁 我的答案:C 6 编写HTML文件需要注意的事项有哪些? A、"<"和">"是任何标记的开始和结束。 B、标记与标记之间可以嵌套。 C、在源代码中区分大小写。 D、任何回车和空格在源代码中不起作用。 E、HTML标记中可以放置各种属性 F、如果希望在源代码中添加注释,便于阅读,可以以"<!--"开始我的答案:ABDEF

JS面向对象教程

- 6.1 JavaScript中支持面向对象的基础 6.1.1 用定义函数的方式定义类 在面向对象的思想中,最核心的概念之一就是类。一个类表示了具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,即对象。 在JavaScript中定义一个类的方法如下: function class1(){ //类成员的定义及构造函数 } 这里class1既是一个函数也是一个类。可以将它理解为类的构造函数,负责初始化工作。 6.1.2 使用new操作符获得一个类的实例 在前面介绍基本对象时,已经用过new操作符,例如: new Date(); 表示创建一个日期对象,而Date就是表示日期的类,只是这个类是由JavaScript内部提供的,而不是由用户定义的。 new操作符不仅对内部类有效,对用户定义的类也同样有效,对于上节定义的class1,也可以用new来获取一个实例:function class1(){ //类成员的定义及构造函数 } var obj1=new class1(); 抛开类的概念,从代码的形式上来看,class1就是一个函数,那么是不是所有的函数都可以用new来操作呢?是的,在JavaScript 中,函数和类就是一个概念,当对一个函数进行new操作时,就会返回一个对象。如果这个函数中没有初始化类成员,那就会返回一个空的对象。例如: //定义一个hello函数 function hello(){ alert("hello"); } //通过new一个函数获得一个对象 var obj=new hello(); alert(typeof(obj)); 从运行结果看,执行了hello函数,同时obj也获得了一个对象的引用。当new一个函数时,这个函数就是所代表类的构造函数,其中的代码被看作为了初始化一个对象。用于表示类的函数也称为构造器。 6.1.3 使用方括号([ ])引用对象的属性和方法 在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法)很简单,如: 对象名.属性(方法)名 还可以用方括号的形式来引用: 对象名["属性(方法)名"] 注意,这里的方法名和属性名是一个字符串,不是原先点(? )号后面的标识符,例如:

JavaScript阶段测试-----2版

一、选择题本题 1、要求用JavaScript实现下面的功能:在一个文本框中内容发生改变后,单击页面的其他部分将弹出一个消息框显示文本框中的内容,下面语句正确的是() A. B. C. D. 2、在HTML页面中,下面关于Window对象的说法不正确的是()。 A. Window对象表示浏览器的窗口,可用于检索有关窗口状态的信息 B. Window对象是浏览器所有内容的主容器 C.如果文档定义了多个框架,浏览器只为原始文档创建一个Window对象,无须为每个框架创建Window对象 D.浏览器打开HTML文档时,通常会创建一个Window对象 3、 window的哪个方法可以显示输入对话框?() A.confirm() B.alert() C.prompt() D.open() 4、 open()方法的哪个外观参数可以设置是否显示滚动条?() A.location B.menubar C. scrollbars D.toolbar 5、在Javascript语言中,当元素失去了焦点时激发的事件是( ) A.onFocus B.onUnLoad C.onMouseOver D.onBlur 6、在HTML中嵌入JavaScript,应该使用的标记是( ) A.〈script〉〈/script〉 B.〈head〉〈/head〉 C.〈body〉〈/body〉 D.〈JS〉〈/JS〉 7、下列不属于DHTML技术主要组成部分的是( ) A.Java B.JavaScript和VBScript C.DOM D.CSS 8、那一个对象可以获得屏幕的大小( ) A. window B. screen C. navigator D. screenX

js创建对象的几种方式(一看就懂)

JavaScript创建对象的几种方式(一看就懂) 1、对象描述 如果有个人,他叫周杰伦,性别是男,他还有一个变化的年龄,我们该怎么用面向对象的方式来表述呢? 第一、我们先给他起一个对象名叫zjl。 第二、我们给这个对象两个属性,一个属性叫name,它的值为"周杰伦",另一个属性叫gender,它的值为"male"。 第三、我们给这个对象一个方法,叫setAge,它可以给zjl这个对象设置年龄,它有一个形参age,用于接收代表实际年龄的实参。 2、第一种创建对象的方法 让我们先来看一下创建对象的第一种方法,格式为如下所示。注意属性和属性值之间要有英文的冒号,各个属性以及函数之间要用英文的逗号隔开,对象末尾的属性值或函数后没有逗号。 注意这里面的this关键字,代表zjl这个对象,this.curage=age也就是把形参的值赋给zjl这个对象的curage属性,你当然也可以用同样的方法给属性name和gender赋值,赋值后name和gender的初始值就会被覆盖掉。现在想一想如果curage不加前面this.呢?还记得我们前面讲过的全局变量吗?没错,这样curage就不是对象zjl的属性,而是一个全局变量了,那如果我们写成var curage呢,这是它只是setAge函数里面的一个局部变量,也不再是对象zjl的属性了。加了this关键字的方法和属性叫做公有方法和属性,不管在对象内部还是外部都可以访问。所以当我们在对象内部要引用公有方法和属性时,一定记得要加his 关键字。 /*var对象名={ 属性名1:属性值, 属性名2:属性值, ...... 函数名1:function(形参......) {函数体1}, 函数名2:function(形参......) {函数体2}, ...... };*/ var zjl={ name:"周杰伦", gender:"male", setAge:function(age){ this.curage=age; } }; 3、第二种创建对象的方法 第二种创建对象的格式为: var对象名=new Object(); 对象名.属性名1=属性值1; ......

Javascript考试题库1

复习题 一、选择题 1、写“Hello World”的正确javascript语法是?(A) A. document.write("Hello World") B. "Hello World" C. response.write("Hello World") D. ("Hello World") 2、JS特性不包括( D ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的(A) A.if(i==0) B.if(i=0) C.if i==0 then D.if i=0 then 4、下列JavaScript的循环语句中( )是正确的( D ) A.if(i<10;i++) B.for(i=0;i<10) C.for i=1 to 10 D.for(i=0;i<=10;i++) 5、下列的哪一个表达式将返回假( B ) A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件(D) A.onclick B.onmouseover C.onsubmit D.onpressbutton 7、有语句“var x=0;while(____) x+=2;”,要使while循环体执行10次,空白处的循环判定式应写为:( C ) A.x<10 B. x<=10 C.x<20 D.x<=20 8、JS语句( B ) var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 A.a1+a2=30 B.a1+a2=1020 C.a1+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( B) A.s.toSmallCase() B.s.toLowerCase() C.s.toUpperCase() D.s.toUpperChars() 10、以下( )表达式产生一个0~7之间(含0,7)的随机整数. ( C ) A.Math.floor(Math.random()*6) B.Math.floor(Math.random()*7) C.Math. floor(Math.random()*8) D.Math.ceil(Math.random()*8) 11、产生当前日期的方法是( C ) A.Now(); B.Date() C.new Date() D.new Now() 12、如果想在网页显示后,动态地改变网页的标题( C ) A.是不可能的 B.通过document.write(“新的标题内容”) C. 通过document.title=(“新的标题内容”) D. 通过document.changeTitle(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称

JS左右无缝滚动(一般方法+面向对象方法)

代码如下: JS左右无缝滚动(一般方法+面向对象方法)