打印本文 
关闭窗口 在这之前我想你已经了解了什么是HTML和CSS，通过HTML和CSS我们已经可以完成一个漂亮的页面了。如果你还不是很清楚的话，请你查阅前面的HTML教程，这里对标识就不在重复介绍了.而现在开始，我们将开始进行网络编程的学习。
我们为什么要学javascript（以后我们用JS简称）呢？也许你已经明白JS是什么了，那你可以忽略下面的部分。
在前面我们也提到了，HTML标识是简单的标识语言，而浏览器的工作就是帮助你一条条的把标识读出来而已。但事实上在当前的网络世界里光有HTML标识和文本是远远不够的，更高级的互交是现代网络社会的主题，这时候我们就要通过真正的编程语言来实现。而JS就是其中一种。
JS和其他语言的区别在哪里？
我个人认为当前的计算机语言可以分为两种，一类就是面对对象的程序语言，还有一类就是网络编程;而在网络编程上有可以分为WEB页面和服务器技术.（当然也有互通，我这里只是偏向重点的一种分类)而JS就是运用在WEB页面编程上的语言之一
JS它能实现些什么东西?
我想你一定看过不少的网站有弹出菜单吧，或者是贴在卷动条上一起运动的广告图片……等等这些，就是同过JS来实现的.
也许上面几个问题还不足以让你全面的了解JS，建议你去如sina.com,163.com这些站点查看一下他们的源代码,把＜script＞＜/script＞里的内容（当然也包括这个标识）复制出来，放在你创建的一个html文件里，你就会有新的发现，是HTML实现不了的效果.这也说明了一次编程，到处可用的原理。也正是这样，我们同样只需要windows的文本文档和浏览器就可以编辑JS程序了.当然你想导出这个文件的话，和HTML等一样，把后缀名改成.JS就可以了~
现在我们开始了解一下JS的基本框架吧。
在HTML中，我们把JS程序语言放在＜script＞＜/script＞之间,一般来说＜script＞有两个参数language,和type。在要调用JS语句的时候我们就设置language="javascript"或type="text/javascript".具体格式如下:
＜script language="javascript" type="text/javascript"＞
在这里输入js语句
＜/script＞
因为有些比较久的浏览器不能识别＜script＞这个标识，所以可能出现把正个语句显示在浏览器中,影响了页面的美观。这时候我们就想到了HTML标识里的注释标识(＜!--注释--＞)我们把它放在＜script＞后，这样就可以确保在无法实现JS效果时，语句不被显示出来，这里要说明的是--会被认为是JS的操作符，我们需要在前面加上//。具体格式如下:
＜script language="javascript" type="text/javascript"＞
＜!--
在这里输入js语句
//--＞
＜/script＞
当你的代码比较长的时候，为了使源代码看上去整洁干净，我们就需要创建一个外部JS程序,怎么创建在前面我们已经介绍了，这里我们只想说明的是外部JS程序书写时，不可以用上＜script＞这个表示.调用它的时候我们只需要在＜script＞中用src参数就可以.如下:
＜script src="XXX.JS" language="javascript" type="text/javascript"＞
＜/script＞
最后要说明的是＜/script＞绝对不可以省略.
然后呢？我们应该把JS放在哪里呢？
其实我们把JS放在哪里都没有关系，比较通用的做法都是放在＜head＞＜/head＞中,当然也有一些特定的例子，比如向页面中输入数据，那就必须放在＜body＞＜/body＞之间了.
最后我想说说对JS程序的除错和一些书写代码需要注意的东西.
有过编程经验的人都会有过除错的经历，即使是原本抄书上的代码也难免会出现单词或者语法书写错误。JS没有专门的编写工具，所以我们也只能用浏览器进行除错工作,我想中国IE应该是用户最多的吧。我们也只针对IE来说说好了.
一般的明显错误（如你想达到的效果没达到）你就需要检查一下你的函数是否设定正确，而隐藏的但致命的错误就可能出现在多个环节上,如果你把“显示每个脚本错误的通知”钩上了，IE就会提示你错误在那一行那个字，然后你就可以根据它的提示去修改其中的错误.这个选项在IE的文字工具栏中的"工具--＞Internet选项--＞高级"中可以找到.这也提醒了你平时书写程序的语句的时候要注意养成良好的习惯，一般书写完一条语句就换一行写下一段语句。这样除错的时候也容易找到.(千万不要以为自己是神仙哦:)）
虽然JS在HTML中,但他在书写上是有着大小写之分的,这点希望大家注意.不然的话你除错过程就等于重写过程了.再者养成加注释的习惯,（即在"//"后加入说明文字)这样别人可以看得清楚，隔了很长时间之后自己也不会给自己写的东西看得累爬下才找出要改的地方.
今天我们就先说到这里，明天我们就通过几个例子来进一步了解什么是JS吧。
第二天 进一步了解JS
-----------------------------
昨天我们通过文字说明了什么是JS，也许你还没有建立具体的印象，今天我们就举一些例子来说明好了.如果你在这之前已经对JS有应用了，今天的课程大可忽略.
首先我们实现向用户发送一条用消息框显示的信息，即在打开网页的时候弹出一个消息框:
＜script language="javascript" type="text/javascript"＞
＜!--
alert("H.S Workshop")
//--＞
＜/script＞
这里只需要对一个alert()，就可以实现效果了.把这段代码复制到＜head＞＜/head＞中，当你打开网页面的时候就会弹出一个包含字符"H.S Workshop"的消息框，一般我们可以用这个效果来做欢迎信息，或者页面警告信息.
接下来我们再看另一个例子，我们想显示出这一页最后的修改时间，精确到分秒，我想如果你用手输入的，早晚会因为没有信心而放弃修改，现在我们就用JS来帮我们实现吧:
＜script language="javascript" type="text/javascript"＞
＜!--
document.write("最后修改时间"+document.lastModified)
//--＞
＜/script＞
这里我们就涉及到一个对象的问题，现在我也不详细的解释这个问题了，因为这是以后的重点.我们在这里主要看看怎么控制它的位置,把上面的语句放在＜head＞＜/head＞中，将会在浏览页面的最上端显示:"最后修改时间05/09/2003 10:49:24"，而我们想要改变这句话的位置，那就应该把JS语句放在＜body＞＜/body＞中.
现在我们来看看关于JS的函数应用,关于函数的意义，我会在明天详细的说明，这里我只是用这个例子来说明JS在什么时候显示效果进行控制.首先我们来看一个完成的例子：
＜script language="javascript" type="text/javascript"＞
if(confirm("想知道现在的时间吗?")){
display_time()
}
function display_time(){
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var current_time = hours + ":" + minutes + ":" + seconds
alert("现在的时间是" + ":" + current_time)
}
＜/script＞
在这个例子中，JS通过confirm()来提出问题，IF()来判断是不是调用display_time().如果我们把第一句话删除,(我们要注意一个问题,我们把一个函数的分段显示视为一个语句),浏览器将会没有任何效果发生，因为这个函数没有被调用的提示.
最后我在举个例子.
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript" type="text/javascript"＞
function say_goodbye(){
alert("H.S Workshop http://hsworkshop.51.net")
}
＜/script＞
＜/head＞
＜body onUnload="say_goodbye()"＞
关闭窗口的时候就可以看到效果了
＜/body＞
＜/html＞
当你关闭窗口的时候就会弹出一个对话框,显示H.S Workshop http://hsworkshop.51.net. 我们把这种情况称为事件触发。
因为这篇教程是针对没有编程经验或初级编程经验的人来说的，所以我希望同过上面的解释给大家树立一个编程理念，在建立了理念之后你的学习才会事半功倍，这不尽尽是真对JS，甚至C+，JAVA等等。就我自己而言,一直是把编程当成一个写文章的过程，只是文章是给计算机看的，而不同的编程语言就好象一个国家里也有不少的方言,对哪个地方的人就说哪个地方的话。编程也就是这么一会事，呵呵~
好了最后我想对昨天的内容进行一点补充，昨天我们说到一条语句占一行,事实上我们如果用";"来把语句分隔开的话，一行可以显示多条语句，不过我不支持这样做，相信理由你也知道了吧~
第三天 变量与常量
-----------------------------------
今天我们首先看一个例子:
＜script language="javascript" type="text/javascript"＞
＜!--
var you_name
you_name=prompt("请输入你的名字:")
alert("Hi!"+you_name)
//--＞
＜/script＞
为什么用这个例子呢？这个例子实现的是当访问者点开这页面的时候弹出一个对话框要求访问者输入名字，接着弹出一个关于这个用户的欢迎。事实上这个例子可以简写成:
＜script language="javascript" type="text/javascript"＞
＜!--
alert("Hi!"+prompt("请输入你的名字"))
//--＞
＜/script＞
因为他不够长，只有一个消息框。接下来我们加一个消息框。
＜script language="javascript" type="text/javascript"＞
＜!--
var you_name
you_name=prompt("请输入你的名字")
alert("Hi!"+you_name)
alert(you_name+"你到了H.S Workshop")
//--＞
＜/script＞
你尝试着根据简写的模式变化一下这段脚本，这时候问题就出现了，访问者必须要输入两次名字才会弹出和上面一样的效果，相信你也觉得很麻烦吧，如果是十个二十个消息框，我们岂不是要输十次二十次名字，这是不可取的。这时候我们就要用到变量。
变量就是把需要保存的信息储存起来，如上面例子中访问者的名字.以便被以后需要用到的地方调用.它是计算机的一块很小的储存空间，当然这不是我们需要费心的。我们要做的事情就是声明变量；给变量赋值；在语句中使用它。 声明变量
既然我们已经知道变量的作用了，那我们怎么创建变量呢?(即声明变量)在JS中我们用来var+变量名来声明一个变量，当你要一次声明多个变量的时候，只需要在两个不同的变量之间加上“,”就可以了,需要注意的是一个变量必须在这个变量被使用以前被声明，一般情况我们会在JS程序的开头部分声明。
变量名是需要你自己拟定的，但为了不至于你自己也看不懂了，我们应该养成把这个变量要实现什么做为出发点，用简单的词汇来命名这个变量。在变量名的书写上我们需要注意下面的事项。
1.第一个字符必须是字母或者下划线(_),千万不要使用数字，或者其他特殊字符。
2.其他的字符只能是字母，数字或者下划线，其他的符号均不可以使用。
3.变量也是区分大小写的，且变量名称没有长度限制.
4.变量名绝对不可以是JS的保留字或关键词。如果你对JS的保留字或关键词不了解的话，我建议你命名变量的时候第一个字符用“_”，当然也可以用在其他的位置上.因为在JS的保留字或关键词中没有一个单词包含有下划线.
变量赋值
我们声名变量以后，要实现是这个变量的功能，我们就要为变量赋值。当然这并不是说声明了一个变量之后马上就要对这个变量赋值,我们也可以在程序的其他位置给变量赋值。
我们用等号来给变量赋值,我们由上面的例子来看:you_name=prompt("请输入你的名字"）这条语句就给是在给变量赋值,事实上我们还可以在声明这个变量的时候就给他赋值.就那上面的例子还说,我们把
var you_name
you_name=prompt("请输入你的名字")
换成
var youname=prompt("请输入你的名字")
仍然是成立的.当然这也是我们需要指定最原始数值的情况下，才这么写的.那什么是最原始数值呢？我们举个例子来看好了,
＜script language="javascript" type="text/javascript"＞
＜!--
var i_data=10
i_data=i_data/5
alert(i_data)
//--＞
＜/script＞
我们从上面的例子中看到i_data=i_data/5，你是不是觉得不和逻辑呢？为什么一个值和它自己的五分之一相等呢？事实上，我们在var i_data=10这行中已经指定了i_data的原始数值,接下来我们把这个原始数值放在i_data/5中，就得到了i_data的值,这也是因为浏览器总是先计算右边的部分。
在语句中使用变量
我想变量怎么用，大家通过上面的例子应该也已经了解了，在这里我想说说全局变量和局部变量。那么什么是全局变量，什么是局部变量？简单的说全局变量就是可以被所有语句共同运用的，而局部变量则只可以被一个函数运用的.我们举个例子来说明：
＜script language="javascript" type="text/javascript"＞
＜!--
function WEB(){
var my_web
my_web="http://hsworkshop.51.net"
alert("欢迎来到:"+my_web)
}
WEB()
alert(my_web)
//--＞
＜/script＞
马上就回弹出错误报告，提示你没有定义my_web,这是因为，我们只在WEB()中指定了my_web，而当WEB()执行完之后，my_web马上就从内存中清除了,所以alert("欢迎访问"+my_web)无法读取my_web的值，而发出错误报告。这也就是做my_web是WEB()这个函数的局部变量。现在我们把my_web放在WEB()外面来看看.
＜script language="javascript" type="text/javascript"＞
＜!--
var my_web
my_web="http://hsworkshop.51.net"
function WEB(){
alert("欢迎来到:"+my_web)
}
WEB()
alert(my_web)
//--＞
＜/script＞
程序马上执行正常,这个时候的my_web就变成了全局变量.
通过上面的介绍我们了解了什么是变量，那什么是常量呢？其实常量大家都已经见过了如:my_web="http://hsworkshop.51.net",其中http://hsworkshop.51.net就是常量。J...,string,boolean
numeric
即数字常量，想0，48，-10，0.04,3.1415926等等都是数字常量,需要注意的是JS支持的最大数值是9007199254740092,最小数值为-9007199254740092,如果你有过编程经验的话，我还需要提醒你在JS中，1和1.0的意义是一样的.
如果我们想开方的话，就需要用上e，在e+/-X来表示幂。例如:10e+10(10的10次方，至于结果就不要我来算了吧。还有一个进制的问题，我们绝大部分的时候都是用十进制，当然JS也可以处理八进制和十六进制，至于怎么换算请你阅读电脑基础入门之类的书,在这里我唯一要说的是JS中指定一个十六进制的数字用0x表示。
string
字符常量，这个在前面我们已经介绍了，只要是用""或者''括起来的部分就是字符常量，他可以表示是任何一个字符.希望大家把字符常量中的数字与数字常量区分开来，比如在数字常量中，10e+10显示的结果是10的10次方，而在字符常量中，他的可以显示的就只是10e+10.
需要注意的是双引号中只能包含单引号，当然，我们如果用汉字输入法输入的双引号还是可以用在里面的，因为汉字输入的双引号占了两个字节,所以被认为是字符常量，而不被系统认成引号。不过这也给我们带来了一点麻烦，如果在输入字符的时候忘了切换输入法的话，就只好等这报错了.那我们要输入单字节的引好要怎么办呢？其实只要一个“\"反斜杠就可以搞定了.下面我把一些常用到的地方例举出来:
' 显示单引号
\" 显示双引号
\b 显示一个空白
\f 在下一页显示
\n 在下一行显示
\r 显示回车效果
\t 显示八个空格，也就是TAB键实现的效果.
\\ 显示一个反斜杠
boolean
判断常量，这个常量就只有两个情况，true和false，也就是对或者错，虽然如此，但它的作用是绝对不可以忽略不计的，以后我们会从程序中了解到它们的意义，这里就不再细说了.
好了今天就说到这里了，明天我们继续以JS为样本讲讲编程的整体概念。当帮住大家建立了一个完成的编程思路之后我们再来仔细的分析JS本身.(千万别说我打着羊头买狗肉哈，其实其中也涉及到少量的JS~呵呵）
第四天 JS的函数
----------------------------------------------------------
今天我们就来看看JS的函数应用,之前我们也说过了,这篇教程是针对没有编程经验的朋友写的,所以我们先对函数是什么做有解释吧.
那什么是函数呢?我们已JS为例,前面我们看到如alert(),prompt()等等,我们把他称之为内建属性,我们可以运用这些现成的东西去做很多事情,但这些都是远远不够的,试想一下,如果你让计算机完成一个或多个特殊的任务或者计算的时候,而正巧没有一个内建属性可以做到,(事实上这种情况时常会出现,当然如果你不想写出真正属于自己的东西的话)你该怎么办呢?解决的办法就是创建自己的函数.我们就那前天的一个例子来说明:
＜script language="javascript" type="text/javascript"＞
if(confirm("想知道现在的时间吗?")){
display_time()
}
function display_time(){
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var current_time = hours + ":" + minutes + ":" + seconds
alert("现在的时间是" + ":" + current_time)
}
＜/script＞
我们知道,通过这里例子,我们可以了解当前的时间.当我把下面的代码从函数中提取出来
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var current_time = hours + ":" + minutes + ":" + seconds
alert("现在的时间是" + ":" + current_time)
我们就会发现我们无法控制这段代码在什么时候显示,发生了什么事件才显示,浏览器会忠实的和读html代码一样,从头读到尾.这就由不得访问者不看现在的时间.如果访问者不想知道现在的时间呢?我们就必须给访问者一个选择的权利,所以我们建立display_time()这个函数,在必要的时候我们才调用它,也就是说我们在访问者按下确定之后才可以看到时间.而平时浏览器绝不会去读取里面的代码.
这也就是函数,简单的说函数就是将部分语句于其他语句分离开,储存为一条语句,我们就可以通过调用这条语句去完成一个或多个指定的任务.
事实上,这里的内建属性常被成为函数,而这里的函数则被成为自建函数.不过为了没有编程经验的人可以理解,所以在以后我们仍然用内建属性和函数来区分. 了解了函数的作用之后,我们来看看JS的函数怎么写.
一个JS函数的基本写法如下:
function 函数名(任意值){
代码部分
}
function:也就如同一个声明一样,表示这段为函数,在没有调用的情况下不允许浏览器读取.
函数名:和命名变量的方法一样,如果你还不是很了解,可以看看昨天的部分.
任意值:或者我们把他称为参数,我之所以用上任意值,是因为他可以是任何一个有助于你提高工作效率的参数,可以是一个变量,或者是内建属性,等等,前提条件就是必须是提高你这个函数的效率.当我们使用多个值的时候,就需要用逗号在小括号中把几个值分开)
代码部分:也就是写入这个函数将实现什么功能.需要注意的是代码部分必须写在大括号内,至于大括号的位置可以根据你自己的习惯放置,但前提条件是必须包括了所有的函数语句.
函数只要是放置在＜script＞标识中(当然建立外部JS文件的时候没有必要写＜script＞标识,这在前面已经提过了),放那里都无所谓,只是需要注意在一个程序中,一个函数的名称是唯一的,不可以重复,同时我们不可以将一个函数放在另一个函数中.
或许你还是感觉有点模糊,那么我们就举个例子来看看吧
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript" type="text/javascript"＞
＜!--
function make_run(){
document.bgColor="#FF0000"
}
function make_bule(){
document.bgColor="#0000FF"
}
//--＞
＜/script＞
＜/head＞
＜body＞
＜FORM＞
＜input type="button" value="红色" onClick="make_run()"＞
＜input type="button" value="蓝色" onClick="make_bule()"＞
＜/FORM＞
＜/body＞
＜/html＞
在这里我们通过两个按钮来改变网页的背景色,在这里我们也看到了两个函数,make_run和make_bule,表单标识的部分我们就不再重复了,如果你还有质疑的话请查看前面的HTML教程,我们这里只对onClick做一些解释,这个参数的意义就是当你按下这个按钮后的将发生什么事情.onClick="make_bule()"也就是说当你按下按钮后调用make_bule()这个函数.
因为我们今天的关键是函数,所以我不对document.bgColor=""这条语句做详细的解释了,在以后的部分我们再深入的了解.
通过上面这个例子的模式,我们可以创建出更多的按钮来使网页变化出更多的色彩,这时候就有个问题突现出来了,这样一来的话我们启不是要创建同样数目的函数来被按钮调用.呵呵~不要忘了,我们还有一个东西没用上呢,那就是写入任意值.现在我们就把这段程序改一下.
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript" type="text/javascript"＞
＜!--
function make_color(color){
document.bgColor=color
}
//--＞
＜/script＞
＜/head＞
＜body＞
＜FORM＞
＜input type="button" value="红色" onClick="make_color('#ff0000')"＞
＜input type="button" value="蓝色" onClick="make_color('#0000ff')"＞
＜/FORM＞
＜/body＞
＜/html＞
我们在小括号中加上一个变量,取名为color.(向这种情况,JS会自动把它认成一个变量,不需要我们再用其他的语句来声明了,但需要注意的是它只是一个局部变量.)接下来我们要做的事情就是在按钮的onClick部分去写如颜色值而已.
那么我们开始做个练习吧,参照上面的例子,当按下按钮之后不既要改变网页的背景颜色还要求改变网页中的字体颜色.其中改变字体的色彩的语句是document.fgColor=.仔细体会一下上面说的部分,马上就可以写出你的第一个JS脚本程序了哦:)
虽然大部分的时间我们都是以调用函数来执行它,但是也有特殊的情况需要让函数自己执行自己,我们把这这种情况称做递归,我们从个简单的例子还看看:
＜script language="javascript" type="text/javascript"＞
＜!--
var counet=0
cilk_button()
function cilk_button(){
counet=counet+1
if(confirm("你点了第"+counet+"下确定,还点一下吗?")){
cilk_button()
}
}
alert("你一共点了"+counet+"下确定.")
//--＞
＜/script＞
我们看看他的过程,首先我们设定变量counet的原始数值为0,然后调用cilk_button()这个函数,在这个函数中我们给变量counet加上一个1,如果你再按一下确定的话那么这个函数就开始自己循环一下,依此类推.但这并没有违犯我们前面提到的函数书写规则,因为if()是语句而不是函数.
今天就到这里了,更过的函数应用我们以后通过实例来了解,我们还将花上一段时间在建立编程理念,如果你有了一定的编程经验的话,我建议你阅读以后的章节.
第五天 JS表达式
--------------------------------
在一个程序中,我们如果不给其中的变量赋值的话,那这个变量也就没有了存在的意义,而给变量赋值的核心部分就是表达式.今天我们就来讨论一下如何建立JS的表达式.
我们先看个例子setup_logo="H.S WORKSHOP",我们给变量setup_logo赋予一个H.S WORKSHOP的值,而H.S WORKSHOP就是一个表达式.就是这么简单,你可以把表达式看成一个类似函数功能代码的东西,区别在于我们只需要一条语句而已.现在我们就从最常见的数字表达式开始,一步步的了解怎么去建立JS的表达式.
那么什么是数字表达式呢?简单的说我们就是把如1+1=这样的计算过程,用程序语言来使计算机得出结果.数字表达式主要是由数字和计算符构成,而我们的重点就在计算符的运用.JS包含的计算符包括+,-,*,/,%,++,--,我们首先来看加号(+)的运用.我们就从1+1开始看看加号的用法,下面是同过JS得到结果的代码:
＜script language="javascript" type="text/javascript"＞
＜!--
var No=1
No=No+1
alert(No)
//--＞
＜/script＞
之前我们也举过了类似的例子,我们知道No的原始值为1,我们使这个变量等于原始值加1,这样就可以得到结果.如果你还不够明确的话,我们再通过一个例子来说明.
＜script language="javascript" type="text/javascript"＞
＜!--
var No1=eval(prompt("输入第一个数字",0))
var No2=eval(prompt("输入第二个数字",0))
var jie_guo=No1+No2
alert(jie_guo)
//--＞
＜/script＞
通过这个例子,我们可以得到任意两个数字的和,这里也引出我为什么要把加号与减,乘,除分开来讲的理由,因为在平时的运用中,加号同样可以运用于字符的连接,而prompt()返回的是一个字符串,在其他的计算符里,JS可以自动把字符串转换成数字,所以我们要用eval()来把字符串转换成数字,这些都是后话,在这里我们要知道的就是加号与其他计算符的区别.
减(-),乘(*),除(/)和加号运用的方式基本相同,只是遵循从左到右的计算原则.下面我就这三个符号比较特殊的一些地方说明一下.
减号大家需要与负号区分开来,虽然两者都是用"-"这个符号来标识,但意义绝对是不同的,也就是说-No=No*-1.
在除号上我们要避免除数等于O,我们可以用if()来判断,这也是后话了,在这里只是针对性的提醒一下.
取模符(%)
简单的说也就是当我们用一个数除上另一个数,再取它的余数,比如我们用16除以5,得到一个余数为1,这个值就是他显示的结果.
递增符(++)递减符(--)
为了避免表达式太长,我们可以使用些简化的运算符,象我们现在要说的递增递减符.以1+1,1-1为例,我们可以把上面的例子简写成:
＜script language="javascript" type="text/javascript"＞
＜!--
var No=1
No=No++
alert(No)
//--＞
＜/script＞
＜script language="javascript" type="text/javascript"＞
＜!--
var No=1
No=No--
alert(No)
//--＞
＜/script＞
使用一个变量的时候我们不需要考虑递增(减)符的位置,也就是说我们也可以把上面的例子写成++No,--No
但当有两个相互关联的变量存在的时候我们就需要注意一个位置的问题.例如:
No1=No2
No2=No2+1
我们设No2为1的话,显示No1,那么显示的结果就会是1,而不是我们期待的2.这段语句等价与No1=No2++,如果我们想得到结果为2的话,我们就必须写成No1=++No2,既:
No2=No2+1
No1=No2
这是JS的一个细微的差别,希望大家要注意.递减符的应用相同.
根据上面的思路,我们发现还可以把计算过程写得更简单一些,我这里就加号来举个例子,大家可以通过这个例子举一反三.我们假设No1=No1+No2,我们看到了两个重复的No1实际操作中,你可能会取上个一更长的变量名,这时候我们就可以把它简化一下,也就是说我把右边的No1去掉,把加号放到等号的左边来No1+=No2发现这个式子同样是成立的.通过这个例子我们还可以把减乘除取模的过程也简化了.
建立字符串表达式
同过上面我们了解了数字表达式,实际操作中我们或多或少的都必须对数字做出解释,这就涉及到字符串表达式了.事实上在前面我们已经运用了很多次了,如"现在的时间是" + ":" + current_time,这就形成了一个字符串表达式,但这里的加号与数字表达式的加号是不同的,在这里,2+"2"的结果不会是4,而是22,可以说这里的加号充当的是一个不被显示出来的连接符.
建立比较表达式
在将来的编程过程中,我们经常会碰到要求对比两个值,以使计算机来判断下一步该怎么做,就好比我们在前面不想用户输入的除数等于0,那我们就需要用到建立一个比较表达式来告知电脑,当用户输入0的时候,就应该退出计算过程.比较符包括有==,!=,＞,＜,＞=,＜=,===,!==
现在我们就来一一介绍.
等于符(==)
也就是说当两边的值相等的时候,我们就返回true,当不相等的时候,我们就返回false.
＜script language="javascript" type="text/javascript"＞
＜!--
var No1=prompt("第一个数",0)
var No2=prompt("第二个数",0)
var jie_guo=No1==No2
alert(jie_guo)
//--＞
＜/script＞
通过这个例子我们可以直观的看出等于符的返回结果.
同样的不等于(!=),大于(＞ ), 小于(＜ ),大于等于(＞=),小于等于(＜=)都是用来确定返回值是true还是false,就象初中数学里说的判断命题真假一个道理,只不过我们是要计算机来判断.
通过这个例子我们可以知道到同一种数据类型之间如何进行比较,那么在数字和字符之间,或者数字与boolean之间,boolean与字符之间又如何比较呢?JS会先把操作值都转换成数字在进行比较,如"5"==5,true==1,false=="0"
我们需要注意的是数字字符和数字进行比较得到的结果才可能是true,5和five比较永远都只是false,而boolean的两个值会分别转换成0和1,即true=1,false=0.
当然有时候我们不想进行转换,而要求两者对比,我们就可以用上===和!==,这是恒等于和恒不等于,也就是说在用恒等于的情况下,"5"和5是绝对不可能返回true的,而用恒不等于时"5"和5对比才返回true.
那么我们如何对比字符串呢?我们只需要遵循空格＞符号＞大写字母＞小写字母的次序就可以了,而字母的排序就是按照字母表来的,即A＞B＞...＞Z.
了解了比较操作符,我们就可以使用一个比较使用的项目,条件操作符.也就是我们所说的根据条件返回两个不同的结果.条件操作符书写的格式如下:
比较表达式?返回的真值:返回的假值
这样或许太笼统了,我们就同过一个例子来看看其应用.
现在我们要求查询那一年是不是闰年,首先我们需要知道如何计算闰年,可以被4整除,又不能被100整除(除非又可以被400整除)的那一年我们就成为闰年.那么我们可以建立以下这个方案.从0点开始,当可以被4整除的话加一点,被100整除的时候减一点,被400整除的时候我们再加一点,当结果等于1的时候这一年就闰年.程序如下:
＜script language="javascript" type="text/javascript"＞
＜!--
var nian_fen=0
var check_year=prompt("请输入你想知道的年份",2003)
var check4=check_year%4==0?1:0
var check100=check_year%100==0?-1:0
var check400=check_year%400==0?1:0
nian_fen=check4+check100+check400
var xian_shi=nian_fen==1?"是闰年":"不是闰年"
alert(check_year+xian_shi)
--＞
＜/script＞
根据思路我们写出以上这段程序,其中的内容在前面我们也详细的讲了,大家可以仔细的体会其中的意思,这里我只把条件符提出来看看,如:nian_fen==1?"是闰年":"不是闰年"当nian_fen和1比较是相等的话,那就自动反会第一个值,即真值(是闰年),否则返回到第二个值,即假值(不是闰年).
通过前面的介绍我们可以建立一级判断了,当我们要进行二级判断,例如当我们要知道两个比较表达式是否都为true,然后再决定下面的步骤的时候呢?这时候我们就需要用逻辑表达式来说明问题.
逻辑操作符有三种&&, ,!
&&
相信学过英语的都知道&是and(和)的简写,在这里的意思也是一样的,也就是当两个boolean值都为true的时候,它显示的值就是ture,否则就是false.
这里我们用这个来表示or(或者)的意思,也就是当两个boolean值中有只要有一个值为true,那么结果就是true,否则就是false.
!
否定操作符,也就是当boolean值为true结果就为false,反之亦然.
这里我们需要走出一个思维误区,当两个值都等于false的时候并不是说逻辑输出值就会是true.
最后我们来说说计算的优先权,事实上这个部分就跟我们平时的运算法则一样,从左到右,先乘除后加减,有括号先算括号里的.为了你可以更只管的了解,我们通过下面的表来说明.
符号 含义 优先次序 计算次序
+ + 递增 1 从右到左
- - 递减 1 从右到左
- 负号 1 从右到左
! 否定 1 从右到左
*,/,% 乘,除,取模 2 从左到右
+,- 加,减 3 从左到右
+ 连接 3 从左到右
＜,＜ = 小于,小于等于 4 从左到右
＞,＞ = 大于,大于等于 4 从左到右
= = 等于 5 从左到右
! = 不等于 5 从左到右
= = = 恒等于 5 从左到右
! = 恒不等于 5 从左到右
& & AND 6 从左到右
OR 6 从左到右
?: 条件 7 从右到左
= 赋值 8 从右到左
+ =,- =等 算数赋值 8 从右到左
第六天 选择结构
-------------------------------------------
之前我们已经用过了不少的判断语句来告诉计算机下一步应该怎么做,今天我们就来掌握判断语句的应用.我们从最简单的选择判断结构开始.
什么是选择判断呢?
简单的说就如同做一个选择题,如果你选择的项目是对的,那么老师自然会给你划个勾,错的自然就是叉了.同理,选择判断就是要你的程序检查某个条件,如果是真值应该怎么做,如果是假值的时候又应该怎么做.当我们要进行最简单的选择判断即单边判断的时候,我们只需要一个if()就可以达到了.
if(表达式){
返回真值的时候执行的语句
}
在这种结构中,如果返回的值是假的话,那就自动跳出这个结构,但同时也无法执行以后的语句了.虽然我们只需要做出一个选择的时候这个方法很简单,但如果我还想对假值进行操作的话那就远远不够用了.这时候我们就可以用上if()...else语句了.
if(表达式){
返回真值的时候执行的语句
}
else{
返回假值的时候执行的语句
}
下面我们就比较一下两者的用法,下面我建立一个除法计算过程,我们禁止用户输入0给除数,先用if()来判断:
＜script language="javascript" type="text/javascript"＞
＜!--
var No1=prompt("输入被除数",10)
var No2=prompt("输入除数",1)
var jie_guo
if(No2!=0){
jie_guo=No1/No2
alert(jie_guo)
}
//--＞
＜/script＞
同过上面的我们可以知道在输入不等于0的任何数都可以显示出结果来,你输入0的时候程序就自动结束了,
但我们需要提示用户0是非法数值的时候怎么办呢?我们就用需要用if()..else来判断.
＜script language="javascript" type="text/javascript"＞
＜!--
var No1=prompt("输入被除数",10)
var No2=prompt("输入除数",1)
var jie_guo
if(No2!=0){
jie_guo=No1/No2
alert(jie_guo)
}
else{
alert("0是非法数值")
}
//--＞
＜/script＞
事实上if()...else和我们前面说的?:非常类似,如果你只做出两个不同选择的时候我们用条件表达式来说明更简单一些.
＜script language="javascript" type="text/javascript"＞
＜!--
var No1=prompt("输入被除数",10)
var No2=prompt("输入除数",1)
var No=No1/No2
var jie_guo=No2!=0?alert(No):alert("0是非法输入,是否重新输入")
//--＞
＜/script＞
这样结构看上去更简单一些,但如果我们要再进行一次或者几次判断的时候,比如我们看过一些网站上有上午好,中午好,下午好,晚上好的欢迎信息.如果我们用条件表达式来说明,那可以说是繁琐的过程,这时候我们用if()...else的话,思路就一目了然了.
＜script language="javascript" type="text/javascript"＞
＜!--
var to_date=new Date()
var to_hours=to_date.getHours()
var xian_shi
if(to_hours＜8){
xian_shi="早上好!"
}
else if(to_hours＜12){
xian_shi="上午好!"
}
else if(to_hours==12){
xian_shi="中午好!"
}
else if(to_hours＜18){
xian_shi="下午好!"
}
else{
xian_shi="晚上好!"
}
alert(xian_shi)
//--＞
＜/script＞
我们同过嵌套多个if()...else语句来实现这一效果.我们把这种情况叫做多重判断.这是个简单的例子,但如果是更多的判断的时候我们应该怎么办呢?在这种情况下,我们就需要使用switch()来理清他们的逻辑关系.他的模式如下:
switch(表达式){
case 第一个可能值:
该可能值将运行的语句
break
case 第二个可能值:
该可能值将运行的语句
break
......
default:
在条件和上面例出的都不匹配时,将运行的语句
}
这里也就是给出一系列可能发生的事情,然后一一排除从而得到符合条件的结果.其中break是跳出这个选择的关键词,如果你忘了输入它,那将会自动进行下一个选择值.这里我们来看一段不完全的程序代码,主要是简单的说明switch()怎么用.
＜script language="javascript" type="text/javascript"＞
＜!--
var day_month=get_days("一月",2003)
if (day_month!=0){
alert(day_month)
}
function get_days(month_name,yaer_name){
var day_in_month
switch(month_name){
case "一月":
day_in_month=31
break
case "二月":
if(yaer_name%4==0){
day_in_month=29
}
else{
day_in_month=28
}
break
}
return day_in_month
}
//--＞
＜/script＞
我们同过day_month这个变量来查询2003年中每个月的天数,我现在假设把get_days的值设为"一月",2003.那么显示的结果就回是31,我们通过对month_name这个变量的值控制来实现选择.这里我们注意到一条在函数内的语句return day_in_month,这里的return是函数返回结果的方法.我们通过一个简单的例子来理解.
＜script language="javascript" type="text/javascript"＞
＜!--
var money_total=100
var total_cost
var jie_guo
function str_tip(pre_tip){
var tip_result
tip_result=pre_tip*0.15
return tip_result
}
total_cost=str_tip(money_total)
jie_guo=money_total+total_cost
alert(jie_guo)
//--＞
＜/script＞
我们在total_cost=str_tip(money_total)这句中把money_total的值即(100)穿递给了函数str_tip(),也就是使pre_tip=100,通过计算,我们得出结果为115,而return就是用来告诉计算机str_tip(money_total)的结果是115.就象你做数学应用题,最后写上句"答:这个题目的结果是115."
第七天 循环结构
------------------------------------------------------
昨天我们了解了选择结构,但当我们处理一个需要不断重复的事件时,我们就需要用上循环结构了.做为一个程序员,除了可以按顺序的编写语句之外,我们还应该考虑如何去提高语句的工作效率,也就是说要标准化编程.我们来看一个例子:
var srt_to=0
++srt_to
alert("你点了第"+srt_to+"下")
++srt_to
alert("你点了第"+srt_to+"下")
++srt_to
alert("你点了第"+srt_to+"下")
假设我们要使用户点三下然后退出,上面的例子的确可以实现,但我们也看到这个例子代码罗唆,每一条语句的效率都很低.很明显我们只要告诉计算机加1和alert()要显示什么,再指定好重复的次数,其他的问题都给计算机去做了~下面我们就来看看改了之后的例子:
var srt_to=0
while(srt_to＜3){
++srt_to
alert("你点了第"+srt_to+"下")
}
通过这个例子,我们一看到了今天要说明的第一个循环结构,while()循环,这是JS中最简单的循环,它的语法如下:
while(表达式){
需要循环的语句
}
JS计算while的表达式之后,如果是true那么就开始执行需要循环的语句,否则就跳出循环执行后面的语句.不过当你能确定循环的次数时,while()并不是最好的选择,while()一般用在具有某些自然运行的条件,而且可以转换成表达式的时候.比如你要求用户必须输入一个值,否则不继续下面的程序.比如:
＜script language="language=" type="text/javascript"＞
var you_name=prompt("请输入你的名字","游客")
while (you_name=="游客" you_name==""){
you_name=prompt("请输入你的名字","游客")
}
alert("欢迎你,"+you_name)
＜/script＞
这里我们通过重复输入框要求用户一定要输入用户名,才可以进行下一步. while()虽然是最简单的,但在实际中for()却是最常用到的.当我们准确的知道需要重复几次同一个语句的时候，for()的操作性就更强些．我们先来看看for()的语法：
for(var 计数器的变量名=变量原始值;关于计数器的表达式;确定循环的方向){
需要循环的语句
}
或许看上去比较复杂，其实一点也不，我们就拿今天的第一个例子来说明．
for(var srt_to=0;srt_to＜=3;srt_to++){
alert("你点了第"+srt_to+"下")
}
首先我们在for()中声明一个变量，做为计数器,设它的原始值为0,接着我们给出这个计数器的比较表达式,使我们知道在点第三下的时候跳出这个循环,最后我们确定这个数值的增长方向,试计数器的值向3靠近.
当然我们并没有规定一定要用递增来表示增长方向,只要是数字表达式都可以完成确定方向的作用.
接下来我们看最后一个循环结构do...while(),之所以放在最后是因为我们很少用到这个循环结构,那在什么情况下才能用呢?之前我们要求用户输入姓名才可以继续下面的过程,我们也用到了两个you_name=prompt("请输入你的名字","游客"),而do...while()就可以解决这个问题.现在我们把程序改成如下:
＜script language="language=" type="text/javascript"＞
do{
var you_name=prompt("请输入你的名字","游客")
}
while (you_name=="游客" you_name=="")
alert("欢迎你,"+you_name)
＜/script＞
比较一下前面的例子,我们就是在进入循环之前,先循环一次,省掉了我们在循环执行以前还需要输入的语句,虽然不常用到,不过也的确简化了代码,提高了工作效率.
了解了循环结构,通常我们只需要循环按照给出的条件运行就可以了,不过有时候我门回想提前结束这个循环,或者在遇见某条语句的时候跳出循环,这时候我们就可以用上break和continue.而从现在开始我们就进行一些循环结构与选择结构之间的嵌套.
我们先来看break,事实上在讲多边选择的时候,我们已经见过了这个关键词,在这里具有同样的意思,提示我们跳出循环,执行循环以外的语句.举个简单的例子:
＜script language="language=" type="text/javascript"＞
var input_total=0
var input_value
for(var counter=1;counter＜=3;counter++){
input_value=eval(prompt("输入你要计算的数字",0))
if(input_value＜0){
input_total=0
break
}
input_total+=input_value
}
if(input_total!=0){
alert("结果为:"+input_total/3)
}
else{
alert("对不起没有结果,你输入错误!")
}
＜/script＞
我们计算三个数的平均数,要求用户输入的值不能为负数,否则跳出循环提示你输入错误,在这个例子中,当用户输入负数的时候,我们就使input_totoal的值为0,跳出循环给下一个选择结构去判断,我们看到后面的双边选择中input_total不等于0的时候才是真值,所以计算机选择了假值中的语句来作为答案.
continue与break的区别就在它不是结束着个循环,而是重新进行一次循环.我们就看看同一个例子:
＜script language="language=" type="text/javascript"＞
var input_total=0
var input_value
var counter=0
while(counter＜3){
input_value=eval(prompt("输入你要计算的数字",0))
if(input_value＜=0 input_value==null){
continue
}
input_total+=input_value
counter++
}
alert("结果为:"+input_total/3)
＜/script＞
因为我们无法知道用户会取消几次输入,或者输入多少个0,所以我们用while()来循环,这我们看到在循环中我们用if(input_value＜=0 input_value==null)来说明当用户输入小于等于0的数或者点击取消的时候,我们循环到input_value=eval(prompt("输入你要计算的数字",0))要求重新输入.
今天的最后我们来说说死循环,当我们导致循环没有一个出口,永远也不可能停止的时候,我们就把这种情况称为死循环.虽然死循环也有他的好处,但在正常的编程中,我们还是要设法避免出现死循环.例如我们讲for()结构时用到的例子,for(var srt_to=0;srt_to＜=3;srt_to++),如果我们把srt_to＜=3改为srt_to＞=3,
那么这个循环就永远也不可能停止了,那么我们如何避免死循环的出现呢?
for()需要执行的语句不要改变循环计数变量的值.
while(),do...while()中至少有一个可以改变你进行循环过程的值.
我还想说的就是一个程序员的个人道德问题,编程应该是使工作变得更加方便,而不是带来无限的烦恼,如果你编程是为了给其他人带来麻烦,而显示出所谓的水平,那么我认为你根本就不配是一个程序员,这类人也是我最反感的.虽然只是三两句,但我希望看这段话的人可以正确的看待编程,如果你觉得这些话和你的观点有出入的话,我建议你不要再学习编程了.
第八天 使用对象
---------------------------------------------------------------------------
我们编写程序并不是仅仅为了使计算机计算表达式,就那JS来说,我们写一个脚本的最终目的是为了控制浏览器和浏览器中显示的东西.这时候我们就需要引入对象这个概念,什么是对象呢?我们从平时的生活来看,如果你想向别人介绍你用的计算机,首先你需要告诉别人你计算机的价格,什么CPU,什么主板等等,我们就把这称为计算机的属性;接着你会告诉别人你用计算机来做什么,编程,玩游戏,制图等等,我们就把这称为使用计算机的方法;最后我们点击开始或者双击开一个文件夹图标的时候,计算机就会自动对你的动作进行反应,我们就把这个情况称为计算机的事件.通过向你的朋友介绍完你计算机的属性,方法,事件之后,就可以全面描述你的计算机了.而我们就可以把你的计算机就可以看成一个对象.由此我们可以知道对象就是属性,方法,事件的集合.
我们可以从上面的例子看出来,每一个对象都有至少一个属性,有的甚至有两个或者更多,那么我们如何在一个脚本中引用一个对象的属性来实现我们要达到的效果呢?首先我们必须知道每个属性或者对象的明确是已经确定了的,我们可以做的就是调用它和修改它的参数.在任何情况下我们都可以用下面的格式来调用这个属性:
对象名.属性名
今天我们主要是讨论如何使用对象,至于对象的名称我们在以后会详细的讲解.那么我们来看个例子:
window.location
在这个表达式中,window是对象名,"."是属性访问符,location是属性名.这个属性就是我们平时看见的窗口中的地址栏.我们把它放在alert()中,就可以直观的看到他可以显示什么.
我们可以说location是相对与window的属性,但事实上他自己本身也是一个对象,我们还可以调用和修改location的属性,例如:
window.location.pathname
我们可以把应用对象属性的过程想象成一个树形结构,就想我们平时用资源管理器一样,一个个的分支,指向越来越细小的部分.和文件操作一样,有的文件属性是只读的有的是可以读写的,对象属性也是一样,当我们要改变对象属性的值的时候,我们就可以使用下面的语法:
对象名.属性名=修改值
说到这里,我就需要补充说明一个昨天我们没有提到的循环结构,主要是因为这个循环在面向大众化的脚本中用处不大,但在我们测试和调试脚本的时候我们将会频繁使用.for()...in
for(var 变量名 in 对象名){
需要循环的语句
}
我们假设要显示出location的全部属性,就可以使用下面的例子:
＜script language="javascript" type="text/javascript"＞
＜!--
for(var look_odject in location){
document.write(look_odject+"＜br＞")
}
--＞
＜/script＞
知道了for()..in如何使用,那么我们就来看一个最常见的例子吧,我们常用这段例子来检测在一段脚本中属性的名字和值.
＜script language="javascript" type="text/javascript"＞
＜!--
look_object(prompt("输入你要查找的对象:"))
function look_object(object_string){
var action_object=eval(object_string)
var pro_message="你要查找"+object_string+":\n\n"
for(var pro_name in action_object){
pro_message+=object_string+"."+pro_name+"="+action_object[pro_name]+"\n"
}
alert(pro_message)
}
--＞
＜/script＞
了解了对象的属性之后,我们来看看如何使用方法.一个对象也至少有一到两种方法,我们就利用这些方法来完成一些事情.那么我们如何使用对象的方法呢?
对象名.方法名()
我们看到和调用属性是一样的~只是调用的是方法名和一个括号,当我们想要设定方法的值的时候只要把表达式加到括号里就可以了,使用多个值的时候用","来隔开他们.例如我们使页面后退到前面浏览的页面,只需要调用一个方法:
history.back()
最近我们来看一个简化工作,举个例子,
document.write("one＜br＞")
document.wrire("tow＜br＞")
document.wrire("three＜br＞")
document.wrire("four＜br＞")
...........
这样看上去很罗唆,那么我们是不是应该把这些放在一个块里面呢?这时候我们就需要with().现在我们就来对上面的例子进行简化好了.
with(document){
write("one＜br＞")
wrire("tow＜br＞")
wrire("three＜br＞")
wrire("four＜br＞")
..............
}
这样我们就省去了输入document.的过程,而且方便了我们对代码的管理.今天我们就说到这里,明天我们来说对象的事件.至于原因,我们留在明天再说.
第九天 事件的处理
------------------------------------------------
昨天我们说了对象包括属性,方法,事件,今天我们就来看看怎么理解事件这个概念.
我们从一个例子开始,昨天我们说到一个使页面后退的方法history.back(),从这一页跳都后一页就完成了一个事件,但我们需要区分开的是方法是这个事件的入口,也就是你打开门的钥匙,而你用钥匙打开门的过程才叫事件.
事实上比事件本身更重要的是事件响应的过程.就象你用钥匙到底是向左旋转还是向右旋转才能打开门才是我们要关注的过程,我们把这个过程称为处理事件,这也就是我们今天要讨论的主题.
我们处理一个JS事件通常包括两个步骤:
1.把相应的事件处理程序设置属性,放在对象的HTML标识中.
2.设置属性的值等于一个你要充当事件处理程序的语句或函数.
现在我们把他们做一步来完成再来解析,假设我们按一个按钮之后弹出一个欢迎菜单.
＜input type="button" value="wlecome" onClick="alert('welcome')"＞
我们只要注意到onClick="alert('welcome')"这就是一个事件的过程,在这句中,我们应用了一个事件名Click,on事件名,就设置事件处理程序的属性.而="alert('welcome')"就是给这个事件加上属性值.通过
"on事件名=表达式或者函数",我们就可以完成一个事件的处理过程.下面我们看个完整的例子:
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript"＞
function wel_come(){
var user_name=prompt("输入你的用户名:","")
var xian_shi=user_name!=""?","+user_name+"!":"!"
alert("欢迎来到H.S Workshop"+xian_shi)
}
＜/script＞
＜/head＞
＜body＞
＜form name="form1" method="post" action=""＞
＜input type="button" value="输入你的名字" onClick="wel_come()"＞
＜/form＞
＜/body＞
＜/html＞
在这里我们让用户选择是不是要输入用户名,当按下按钮之后我们就调用wle_come()函数.
当我们没有HTML标识可以调用建立事件处理过程的时候怎么办呢？我们回到最初，在昨天我们已经知道事件包含在对象这个集合中，事实上任何对象的事件处理程序就是这个对象的属性.我们在HTML标识中建立一个事件处理程序时，就是见见解的改变了所处对象的事件处理程序的属性.这也就以为着我们还可以使用下面的语法来为一个对象建立事件处理程序:
对象名.on事件名=处理事件的函数名(注意这里的函数名后面不需要再加上小括号了)
假设我们建立了一个chilk()函数，当我们要在上述情况下调用的时候我们就应该写成:
document.onClick=chilk
这里我们还要注意到一个问题,之前我们说属性的时候就应该知道了~属性是相对于自己的属性的对象，当我们要应用导致事件触发的对象的时候我们应该怎么办呢？简这时候就需要用到this这个关键词.看个例子：
＜html＞
＜head＞
＜title＞H.S Workshop＜/title＞
＜script language="javascript"＞
function click_look(image_object){
alert(image_object.src)
}
＜/script＞
＜/head＞
＜body＞
＜img src="TN_wallpaper03.JPG" onClick="click_look(this)"＞
＜/body＞
＜/html＞
在这个例子中我们想显示出图片的位置，也就是说需要调用这张图片的src属性的值.我们就通过this来把这张图片src的值返回给函数click_look(),然后用alert()来显示出来.
OK~通过上面我们了解了如何建立一个JS事件,但我们必须是知道一个对象有属于自己独有属性和方法,
但很少会有对象独有自己的事件,一个事件可能会和两个甚至更多的对象有关,在这里我把与三个以上的对象有关事件浏览一下.其他与一个或者两个对象有关的事件我们在以后提到这个对象的时候再详细的说明:
Focus获得焦点
焦点,顾名思义你目光集中的地方,例如我们在文字输入框中点击一下就会有闪烁的光标,接下来你输入的文字就在这个光标后出现,我们就说这个文字框有了焦点.例如我们建立一个表单,在状态栏中想用户介绍这个表单项目是做什么用的,我们就可以同过下面的段脚本来实现:
＜body＞
＜form＞
＜p＞
姓:
＜input type="text" onFocus="status_look('输入你的姓')"＞
＜p＞
名:
＜input type="text" onFocus="status_look('输入你的名')"＞
＜/p＞
＜p＞
＜input type="submit" value="提交" onFocus="status_look('提交你的表单')"＞
＜input type="reset" value="重置" onFocus="status_look('重置你的表单')"＞
＜/p＞
＜/form＞
＜script language="javascript"＞
function status_look(field_message){
window.status=field_message
}
＜/script＞
＜/body＞
我们看到,当我们在表单项目上切换光标的时候,状态栏中就显示出相关的信息,我们就是通过onFocus来把这个表单项目已经获得焦点的消息捕捉到,并传递给函数status_look(),通过window.status这个属性改变状态栏的内容.由此而我们可以看出onFocus就是引发当对象获得焦点之后所发生的事件.
Blur失去焦点
当我们把光标移开,也是表示对象失去了焦点,这时候我们就可以用到Blur事件.通常我们可以用这Blur来检查用户是否输入正确,如果用户离开这个区域而输入错误的话,我们就可以弹出一条警告来告知用户书写错误,相信你也经历过一些当你进行了第一次提交表单之后才发现自己用了一些不合法的输入,而又要重新输入的问题吧~现在我们就来解决这个问题.看个例子:
＜body＞
＜form＞
＜p＞
请输入你的姓名:
＜input type="text" onBlur="xian_shi(this)"＞
＜/form＞
＜script language="javascript"＞
function xian_shi(text_field){
if(text_field.value==""){
alert("不能为空!")
text_field.focus()
}
}
＜/script＞
＜/body＞
当用户没有输入姓名而跳出输入框的时候,我们就弹出一个信息提示用户必须输入一个值,我们看看这个工作的流程,当我们使文字框失去焦点的时候,onBlur就会把这个消息传递给函数xian_shi(),在函数中我们用if()来判断this的返回值中value是不是为空,如果是的话就弹出一条消息警告用户,再通过focus()把焦点换给文字框.需要说明的是我们把text_field.focus()称之为模拟方法,确切的说我们就是把这个事件在这里假设成为对象的方法.
说到这里我门必须讨论一下Blur和Focus事件带来的死循环,就向上面这个例子,如果我们在表单区中插入一条或者几条＜input type="text" onBlur="xian_shi(this)"＞马上我们就陷入了一个死循环,这是需要避免的死循环.很多的程序员都避免用Blur事件来检验表单的有效性,我觉得解决办法之一就是不强制的把焦点还给文字框，我们就把上面的例子改一下:
＜body＞
＜form＞
＜p＞
请输入你的姓名:
＜input type="text" onBlur="xian_shi(this)"＞
请输入你的生日:
＜input type="text" onBlur="xian_shi(this)"＞
＜/form＞
＜script language="javascript"＞
function xian_shi(text_field){
if(text_field.value==""){
alert("不能为空!")
}
}
＜/script＞
＜/body＞
我们把text_field.focus()去掉，就不会造成两个表单之间Blur和Focus事件的循环,虽然我们损失了使没输入正确信息的栏目重新获得焦点的权利，但避免了死循环，正所谓鱼翅熊掌不可兼得.
Change处理被修改的表单数据
从在某种程度上来说，Blur违反了编程规则中不要运行没有必要的代码。事实上就算是你输入的数据是合法的，Blur还是要运行一次，要避免这个重复我们可以先给域制定一个数据，当用户修改了这个数据以后才执行，这就是Change事件的工作了.例如我们要在用户改变了数据只后才检测有效性，我们可以同过下面的方法:
＜form＞
＜p＞
请输入你的姓名:
＜input type="text" value="You Name" onChange="xian_shi(this)"＞
请输入你的生日:
＜input type="text" value="You Birthday" onChange="xian_shi(this)"＞
＜/form＞
＜script language="javascript"＞
function xian_shi(text_field){
if(text_field.value==""){
alert("不能为空!")
}
}
＜/script＞
如果我们不去改变value=""的值，就不会调用函数xian_shi()。
KeyDown,KeyUp,KeyPress处理键盘事件
我们使用键盘的时候，也就发生三个过程，按下键，松开键，恢复原样。而KeyDown,KeyUp,KeyPress就是对这三个进行的控制.当我们按下键的时候就引发KeyDown事件,松开键的时候引发KeyUp事件，当我们完成按下键和松开键的全过程，使按键恢复原状的时候，就引发了KeyPress事件.相信不用做太过解释你就可以理解了~下面我就举个例子：
＜form＞
看看你的浏览器的状态栏:
＜input type="text" onKeyDown="window.status='你按下了一个键'" onKeyUp="window.status='你又松开了这个键'"＞
＜/form＞
今天的最后我们来看看部分关于鼠标事件的处理
Click点击事件处理
之前我们已经运用了很多次~相信你也不会陌生了吧,这里我就不在多说了，大家可以看看前面的例子.
DbClick双击事件处理
和单击一样，鼠标双击后引发的事件，在WEB上双击是个不怎么习惯的用法,所以我们也没有必要做过多的讨论，只是要注意，Click和Dbclick不可以同时作用在一个对象上，脚本回自动截取第一次点击调用Click事件。
MouseDown和MouseUp事件处理
和键盘事件比较一下我们就可以联想到这是鼠标键按下和松开引发的事件，我们可以把这两个时间到套到前面的例子中就一目了然了，因此在这里也就不在做过多解释.在IE中鼠标事件处理的先后次序是MouseDown,MouseUp,Click,MouseUp,DbClick.
接下来我们就来看看在网络上比较常见的禁止右键菜单的方法吧。
相信你也遇到过一些禁止右键弹出菜单的站点吧，其中我们运用到几个对象的属性，这里我就不做过多的解释了，在以后我们来慢慢了解.
＜script language="javascript"＞
document.onmousedown=mouse_down
function mouse_down(){
var right_mouse="欢迎光临H.S Workshop"
if(event.button==2 event.button==3){
alert(right_mouse)
return false
}
}
＜/script＞
这里我们主要是针对IE来说的，需要解释的一部分是event.button==2 event.button==3,为什么是数字呢？因为在IE4之后，按钮代码存放在event对象的button属性中，以数字的形式出现.有七种可能值:
0：什么键都没按；
1：左键；
2：右键；
3：左键和右键；
4：中间键；
5：左键和中间键；
6：右键和中间键；
7：所有三个键。
所以我们给出event.button==2 event.button==3,让计算机来判断用户按下了哪个键。
打印本文 关闭窗口