Javascript经典实例

Javascript实例教程(1)创建弹出式窗口利用Javascript创建弹出式窗口好吧，言归正转，开始我们的第一个教程吧。利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口。你可以设置这个浏览器窗口的一些属性，如高度、宽度以及是否让该窗口有一个状态条或者工具条。在下面的例子中，我将窗口设置为：350x400，即高度为350像素，宽度为400像素；其中也包括了另外的一些设置，如滚动条；而将其它的设置（如状态条、菜单条）都设置为没有（no）。下面是具体的代码，你可以将它放置到网页的前面：SCRIPTLANGUAGE=JavaScriptfunctionCreateWindow(){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函数，是不是很简单呀！你也许会问：那怎么调用这段代码呢？其实你不用着急，下面马上会给出：FORMINPUTTYPE=buttonVALUE=创建窗口onClick=CreateWindow()/FORMJavascript实例教程(2)创建折叠式导航菜单为了创建折叠式的导航菜单，你可以在网页的最前面部分以下代码：SCRIPTLANGUAGE=JavaScript!--BeginfunctionformHandler(){varURL=document.form.site.options[document.form.site.selectedIndex].value;window.location.href=URL;//End--}/SCRIPT那在网页上如何调用呢？以下是具体代码：CENTERFORMname=formSELECTNAME=siteSIZE=1onChange=formHandler()OPTIONVALUE=连接到….OPTIONVALUE=====北京新东方/SELECT/FORM/CENTER下面是全部的代码：headtitleUntitledDocument/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312SCRIPTLANGUAGE=JavaScript!--BeginfunctionformHandler(){varURL=document.form.site.options[document.form.site.selectedIndex].value;window.location.href=URL;//End--}/SCRIPT/headFORMname=formSELECTNAME=siteSIZE=1onChange=formHandler()optionvalue=连接到…./optionoptionvalue=太平洋网络学院/optionoptionvalue=中文雅虎/optionoptionvalue=网站/optionoptionvalue=美国在线/optionoptionvalue=北京新东方/option/SELECT/FORMJavascript实例教程(3)探测浏览器插件利用Javascript可以探测在网络浏览器中的插件程序，但是值得指出的是否，它只在NetscapeNavigator有效。下面的代码显示了怎样探测audio/midi类型插件程序：SCRIPTLANGUAGE=JavaScript!--varcan_play=false;varmimetype='audio/midi';if(navigator.mimeTypes){if(navigator.mimeTypes[mimetype]!=null){if(navigator.mimeTypes[mimetype].enabledPlugin!=null){can_play=true;document.write('EMBEDSRC=sound.midHIDDEN=TRUELOOP=FALSEAUTOSTART=FALSE');}}}functionplaySound(){if(document.embeds&&can_play){if(navigator.appName=='Netscape')document.embeds[0].play();elsedocument.embeds[0].run();}}functionstopSound(){if(document.embeds&&can_play)document.embeds[0].stop();}//--/SCRIPT那在网页上如何调用呢？以下是具体代码：AHREF=#onMouseover=playSound()onMouseOut=stopSound()IMGSRC=image.gifWIDTH=100HEIGHT=100BORDER=0/A你可能对于一些其它的编程语言很熟悉，比如C++或者Java等等，它们也是可以创建对象的，现在最新的VB版本VB.NET也具有了更好的面向对象功能-----创建对象。从本质上讲，创建对象的想法只是为了创建一个简单的实体，这个实体包含了许多属性和方法。以下是一个对象构造器的例子：functionPerson(name,age,colour){this.name=name;this.age=age;this.colour=colour;}然后，我们可以这样来调用Person构造器：varsomebody=newPerson(Patrick,22,red);或者从用户那里得到输入数值：varpName=prompt(Whatisyourname?);varpAge=prompt(Howoldareyouthisyear?);varpColour=prompt(Whatisyourfavouritecolour?);varsomebody=newPerson(pName,pAge,pColour);所有在JavaScript中得构造器，就象在Java中，都可以利用new关键字来进行调用。当一个person利用它的属性{Patrick,22,red}被创建（或者说被构造）的时候，这些数值就可以访问了，比如：somebody.name,orsomebody[name]Patricksomebody.age,orsomebody[age]22somebody.colour,orsomebody[colour]red因为我们利用name增加了Person的属性，所以它们必须通过name来被引用，这点在后面的代码中可以看到。如果我们使用数字，那么我们就必须使用数字来引用，比如要用somebody[0]，而不用somebody.name。Javascript的数组和对象（比如forms,images,frames,…）都允许这两种方法。另外地，数组和对象都有一个本质的属性，即length（长度）。我们在编制程序的时候，可以这样来使用它：objectName.length，它返回对象包含的元素或者属性的个数。Javascript实例教程(4)探测浏览器插件你可能对于一些其它的编程语言很熟悉，比如C++或者Java等等，它们也是可以创建对象的，现在最新的VB版本VB.NET也具有了更好的面向对象功能-----创建对象。从本质上讲，创建对象的想法只是为了创建一个简单的实体，这个实体包含了许多属性和方法。以下是一个对象构造器的例子：functionPerson(name,age,colour){this.name=name;this.age=age;this.colour=colour;}然后，我们可以这样来调用Person构造器：varsomebody=newPerson(Patrick,22,red);或者从用户那里得到输入数值：varpName=prompt(Whatisyourname?);varpAge=prompt(Howoldareyouthisyear?);varpColour=prompt(Whatisyourfavouritecolour?);varsomebody=newPerson(pName,pAge,pColour);所有在JavaScript中得构造器，就象在Java中，都可以利用new关键字来进行调用。当一个person利用它的属性{Patrick,22,red}被创建（或者说被构造）的时候，这些数值就可以访问了，比如：somebody.name,orsomebody[name]Patricksomebody.age,orsomebody[age]22somebody.colour,orsomebody[colour]red因为我们利用name增加了Person的属性，所以它们必须通过name来被引用，这点在后面的代码中可以看到。如果我们使用数字，那么我们就必须使用数字来引用，比如要用somebody[0]，而不用somebody.name。Javascript的数组和对象（比如forms,images,frames,…）都允许这两种方法。另外地，数组和对象都有一个本质的属性，即length（长度）。我们在编制程序的时候，可以这样来使用它：objectName.length，它返回对象包含的元素或者属性的个数。属性同样也可以从函数中来创建，这样，你只需要增加一行到Person函数中就可以创建属性了：functionPerson(name,age,colour){this.name=name;this.age=age;this.colour=colour;this.birthYear=(newDate()).getYear()-this.age;}以上的Person函数定义了第四个属性：birthYear，它代表每一个Person的出生年份。这里要注意，这一增加的行是调用一个内置的Date构造器，它返回一个包含了当前日期和时间的Date对象。这是一个非常懒惰的方法来访问一个Date变量。所以使用下面的代码会显得更准确些，更有可读性：vartoday=newDate();this.birthYear=today.getYear()-this.age;当然，有许多方法来对JavaScript程序进行“压缩”。通过插入对象到代码中，你就可以处理绝大多数的变量。这个Date对象比起我们上面定义的Person对象来说更复杂，因为它包括了访问方法（accessor/get）以及操作方法(manipulator/set)。同时，增加简单的对象方法到JavaScript中是可能，下面是详细的例子代码：SCRIPTlanguage=JavaScript!--Hidefromolderbrowsersfunction