第四天 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()是语句而不是函数.
今天就到这里了,更过的函数应用我们以后通过实例来了解,我们还将花上一段时间在建立编程理念,如果你有了一定的编程经验的话,我建议你阅读以后的章节.
正 文
JavaScript学习从入门到精通
www.7dspace.com 更新日期：2005-8-16 3:13:06 七度空间
上一篇：Meta：HTML设计中的大作用
下一篇：制作主页的五十个秘诀
作者：24CG 来源：eNet网络学院 ( 责任编辑:7dspace )
站 内 搜 索
热 点 导 读
特 别 推 荐