当前位置:首页 » 网站技术 » JavaScript

Javascript实例教程(1)

...

Javascript实例教程(1)

   JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用,从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择。本Javascript实例教程旨在通过介绍一些实例来加深对Javascrip的理解。


1.利用Javascript创建弹出式窗口

言归正转,开始我们的第一个教程吧。利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口。你可以设置这个浏览器窗口的一些属性,如高度、宽度以及是否让该窗口有一个状态条或者工具条。在下面的例子中,我将窗口设置为:350 x 400,即高度为350像素,宽度为400像素;其中也包括了另外的一些设置,如滚动条;而将其它的设置(如状态条、菜单条)都设置为没有(no)。


下面是具体的代码,你可以将它放置到网页的前面:


<SCRIPT LANGUAGE = "JavaScript">

function CreateWindow()

{

msgWindow=window.open("pop_win.html","displayWindow",

"toolbar=no,width=350,height=400,directories=no,

status=no,scrollbars=yes,resize=no,menubar=no")

}

</SCRIPT>

仔细体会一下这段代码,其实就只用到一个window.open函数,是不是很简单呀!你也许会问:那怎么调用这段代码呢?其实你不用着急,下面马上会给出:

<FORM><INPUT TYPE = "button" VALUE = "创建窗口"

onClick = "CreateWindow()"></FORM>

2.利用Javascript创建折叠式的导航菜单

下面是全部的代码:


<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function formHandler()

{

var URL = document.form.site.options

[document.form.site.selectedIndex].value;

window.location.href = URL;

// End -->

}

</SCRIPT>
</head>


<FORM name = "form">

<SELECT NAME="site" SIZE=1 onChange ="formHandler()">
<option value="">连接到…. </option>
<option value="http://www.etechnic.com.cn">eNet技术频道</option>
<option value="http://www.pcedu.com.cn">太平洋网络学院</option>
<option value="http://cn.yahoo.com">中文雅虎 </option>
<option value="http://www.263.net">263网站 </option>
<option value="http://www.usnews.com">美国在线 </option>
<option value="http://www.neworiental.org">北京新东方 </option>
</SELECT>

</FORM>

3.利用Javascript探测网络浏览器的插件程序


利用Javascript可以探测在网络浏览器中的插件程序,但是值得指出的是否,它只在Netscape Navigator有效。下面的代码显示了怎样探测audio/midi类型插件程序:

<SCRIPT LANGUAGE="JavaScript"><!--

var can_play = false;


var mimetype = 'audio/midi';


if (navigator.mimeTypes) {

if (navigator.mimeTypes[mimetype] != null) {

if (navigator.mimeTypes[mimetype]

.enabledPlugin != null) {

can_play = true;

document.write('<EMBED SRC="sound.mid"

HIDDEN=TRUE LOOP=FALSE AUTOSTART=FALSE>');

}

}

}


function playSound() {

if (document.embeds && can_play) {

if (navigator.appName == 'Netscape')

document.embeds[0].play();

else

document.embeds[0].run();

}

}


function stopSound() {

if (document.embeds && can_play)

document.embeds[0].stop();

}

//--></SCRIPT>


那在网页上如何调用呢?以下是具体代码:

<A HREF="#" onMouseover="playSound()" onMouseOut=

"stopSound()"><IMG SRC="image.gif" WIDTH="100"

HEIGHT="100" BORDER="0"></A>


4.利用Javascript创建对象

你可能对于一些其它的编程语言很熟悉,比如C++或者Java等等,它们也是可以创建对象的,现在最新的VB版本VB.NET也具有了更好的面向对象功能-----创建对象。从本质上讲,创建对象的想法只是为了创建一个简单的实体,这个实体包含了许多属性和方法。以下是一个对象构造器的例子:

function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

}

然后,我们可以这样来调用Person构造器:

var somebody = new Person("Patrick", 22, "red");

或者从用户那里得到输入数值:

var pName = prompt("What is your name?");

var pAge = prompt("How old are you this year?");

var pColour = prompt("What is your favourite colour?");

var somebody = new Person(pName, pAge, pColour);

所有在JavaScript中得构造器,就象在Java中,都可以利用new关键字来进行调用。当一个person利用它的属性{"Patrick", 22, "red"}被创建(或者说被构造)的时候,这些数值就可以访问了,比如 :

somebody.name, or
somebody["name"]
"Patrick"

somebody.age, or
somebody["age"]
22

somebody.colour, or
somebody["colour"]
"red"


因为我们利用name增加了Person的属性,所以它们必须通过name来被引用,这点在后面的代码中可以看到。如果我们使用数字,那么我们就必须使用数字来引用,比如要用somebody[0],而不用somebody.name。Javascript的数组和对象(比如 forms,images,frames,…)都允许这两种方法。

另外地,数组和对象都有一个本质的属性,即length(长度)。我们在编制程序的时候,可以这样来使用它:objectName.length,它返回对象包含的元素或者属性的个数。

属性同样也可以从函数中来创建,这样,你只需要增加一行到Person函数中就可以创建属性了:

function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

this.birthYear = (new Date()).getYear() - this.age;

}

以上的Person函数定义了第四个属性:birthYear,它代表每一个Person的出生年份。这里要注意,这一增加的行是调用一个内置的Date构造器,它返回一个包含了当前日期和时间的Date对象。

这是一个非常懒惰的方法来访问一个Date变量。所以使用下面的代码会显得更准确些,更有可读性:

var today = new Date();

this.birthYear = today.getYear() - this.age;

当然,有许多方法来对JavaScript程序进行“压缩”。通过插入对象到代码中,你就可以处理绝大多数的变量。

这个Date对象比起我们上面定义的Person对象来说更复杂,因为它包括了访问方法(accessor/get)以及操作方法(manipulator/set)。同时,增加简单的对象方法到JavaScript中是可能,下面是详细的例子代码:

<SCRIPT language="JavaScript">

<!-- Hide from older browsers


function Person(name, age, colour) {

this.name = name;

this.age = age;

this.colour = colour;

this.birthYear = (new Date()).getYear() - this.age;

this.toString = printPerson; // 这里定义the Person.toString() 方法

this.isOlder = isOlder; // 这里定义Person.isOlder(Person) 方法

}


function printPerson() {

var text = this.name + " was born in " + this.birthYear +"<br>";

text += "and is " + this.age + " years old.<p>";

return text;

}


function isOlder(otherPerson) { // 这里定义是否第一个人是更老的

return (this.age > otherPerson.age); // 返回布尔型数值

}


//下面的代码用于测试我们的函数


var body1 = new Person("Patrick", 22, "red");

var body2 = new Person("Betty", 21, "green");


document.write(body1); //这里为Person.toString()创建一个调用

document.write(body2);


document.write(body1.name);

document.write((body1.isOlder(body2)) ? " is " : " is not "); // 是否更老?

document.write("older than " + body2.name);


// Stop hiding -->

</SCRIPT>

通过为Person对象重载Person.toString()方法,我们可以将Person对象作为字符串显示出来。每当Person对象被作为字符串引用的时候,pringPerson返回的数值就决定了该显示什么了。

上面脚本的输出如下所示:

Patrick was born in 76

and is 22 years old.


Betty was born in 77

and is 21 years old.


Patrick is older than Betty

从输出的结果我们可以看到年份是以两位数字表示的,如1976年只用76来表示。所以你可能想增加“19”到这两位数字的前面。不幸的是,“千年虫”的问题使得你处理起来有点棘手。而不同的浏览器处理Date对象的getYear()方法是不同的。

Year(年份) Navigator浏览器 IE 3.x浏览器 IE 4.x浏览器
1998 98 98 98
1999 99 99 99
2000 2000 100 2000
2001 2001 101 2001


你可以从上面表格中发现最新的浏览器支持1999年之后四位的年份格式(如2000、2001)。不幸的是,老的浏览器处理年份的格式的时候给程序设计人员无尽的困惑。我经常使用的具体解决方法如下所示,与大家共享:

var thisYear = (new Date()).getYear();

thisYear = 1900 + (thisYear % 1900);

这里(thisYear % 1900)作用是将年份转换位IE 3.x格式并且增加1900以得到真实的年份(比如,2002年经过this Year%1900转换位IE 3.x格式位102,然后102再加上1900得到2002)。上面这两条语句可以适用于从1900年到3799年的处理,现在看起来这么长的时间是足够使用了。但是,为了避免类似于“千年虫”问题,我们应该再找出更好的解决方案,在本教程中就不给出了。另外,新的ECMA标准包括了一个名为getFullYear()的函数,它是返回完整的年份格式,但是这个函数只能被Navigator 4支持,在IE中是不能使用的。

最后对程序再做一点改进,我们可以修改People构造器以转换年份为YYYY格式,具体代码如下:

this.birthYear = 1900 + (((new Date()).getYear() - this.age) % 1900);

在JavaScript中使用对象的能力通常被许多程序设计人员所忽视。但是从本教程中,你应该可以看到使用对象可以使程序员设计出功能更强大的应用程序来的。

继续阅读
Javascript实例教程(2)
Javascript实例教程(3)
逐隐逐现的文字特效[推荐使用][适用于IE4++]
阴影文字的特殊效果[适用于IE4++][共3种效果]
推拉门式样的菜单[根据提示修改][共2步]
弹出窗口制作详谈!
很有用的网页代码
常用网页特效
Javascript程序之向浏览者问好
发表评论

昵称:
最新评论
暂时没有评论!