收藏 分销(赏)

JavaScript语言入门.doc

上传人:xrp****65 文档编号:6276469 上传时间:2024-12-04 格式:DOC 页数:40 大小:253.50KB 下载积分:10 金币
下载 相关 举报
JavaScript语言入门.doc_第1页
第1页 / 共40页
JavaScript语言入门.doc_第2页
第2页 / 共40页


点击查看更多>>
资源描述
第5章 JavaScript语言入门 1 JavaScript简介 Javascript是由Netscape公司创造的一种脚本语言。它曾经几次改名,最终才定为javascript。作为一门独立的编程语言,javascript自然可以做很多的事情,不过它最主流的应用还是在Web上——创建动态网页(许多人喜欢叫网页特效)。Javascript目前在网络上应用十分广泛,几乎所有的动态网页里都能找到它的身影。目前流行的AJAX从很大程度上也是依赖于Javascript而存在的。 概括地说,JavaScript就是一种基于对象和事件驱动,并具有安全性能的脚本语言。对象和事件是JavaScript的两个核心。 JavaScript是一种脚本语言。脚本语言的特点是比较简单、易学,即使是程序设计新手也可以非常容易地使用JavaScript进行简单的编程。 JavaScript可以被嵌入到HTML文件中,不需要经过Web服务器就可以对用户操作作出响应,使网页更好地与用户交互;在利用客户端个人电脑性能资源的同时,适当减小服务器端的压力,并减少用户等待时间。 2 将JavaScript 插入网页的方法 与在网页中插入CSS的方式相似,使用<script>标签在网页中插入Javascript代码。 使用下面的代码可以在网页中插入JavaScript: <script type="text/JavaScript" language="javascript"> ... </script> language="javascript"表示使用JavaScript脚本语言,脚本语言还有vbscript、jsscript等,如果没有language属性,表示默认使用JavaScript脚本。其中的...就是代码的内容。例如: <script type="text/JavaScript"> document.write("我是菜鸟我怕谁!"); </script> JavaScript使用document.write来输出内容。将会输出在网页上输出:我是菜鸟我怕谁! 学过编程的人应该知道,“我是菜鸟我怕谁!”两侧双引号代表字符串的意思。不过不理解这个概念也无所谓,学到后面就知道什么时候应该加双引号,什么时候不需要加了。 有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码。 <html> <body> <script type="text/JavaScript"> <!-- document.write("我是菜鸟我怕谁!"); //--> </script> </body> </html> <!-- -->里的内容对于不支持JavaScript的浏览器来说就等同于一段注释,而对于支持JavaScript的浏览器,这段代码仍然会执行。至于“//”符号则是JavaScript里的注释符号,在这里添加它是为了防止JavaScript试图执行-->。不过通常情况下,现在的浏览器几乎都支持JavaScript,即使是不支持的,也会了解如何合理地处理含有JavaScript的网页。 JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论。 3 插入JavaScript的位置 JavaScript脚本可以放在网页的head里或者body部分,而且效果也不相同。 (1)放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行,例如: <html> <body> <script type="text/JavaScript"> <!-- document.write("我是菜鸟我怕谁!"); //--> </script> </body> (2)在head部分的脚本在被调用的时候才会执行,例如: <html> <head> <script type="text/JavaScript"> .... </script> </head> 通常是在<script>...</script>定义函数,通过调用函数来执行head里的脚本。 (3)也可以像添加外部CSS一样添加外部JavaScript脚本文件,其后缀通常为.js。例如: <html> <head> <script src="scripts.js"></script> </head> <body> </body> </html> 如果很多网页都需要包含一段相同的代码,那么将这些代码写入一个外部JavaScript文件是最好的方法。此后,任何一个需要该功能的网页,只需要引入这个js文件就可以了。 注意:脚本文件里头不能再含有<script>标签。 注:放在body里的函数是一个例外,它并不会被执行,而是等被调用时才会执行。关于函数与调用的概念将在后面讲到。 4 JavaScript 语句 本节介绍Javasctipt中的语句,语句是编程的一个基本概念。 先来看看我们之前例子。 <script type="text/JavaScript"> <!-- document.write("我是菜鸟我怕谁!"); //--> </script> 例子中的 document.write("我是菜鸟我怕谁!"); 就是一个JavaScript语句,它可以告诉浏览器做出一个特定任务。特别的,这个语句是叫浏览器书写出一段内容。我们已经知道,document.write的功能是输出文本,所以上面那个语句就是让浏览器输出“我是菜鸟我怕谁!”。 在JavaScript中,一行的结束就被认定为语句的结束。但是最好还是要在结尾加上一个分号“;”来表示语句的结束。这是一个编程的好习惯,事实上在很多语言中句末的分号都是必须的。 看看下面这个代码块 <script type="text/javascript"> { document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); } </script> 5 JavaScript 注释 HTML、CSS里都有注释,JavaScript里自然也有注释,而且分为单行注释与普通注释两种。 5.1单行注释 插入单行注释的符号是“//” <script type="text/javascript"> // 我是注释,我是注释 document.write("我是菜鸟我怕谁?"); </script> 5.2多行注释 多行注释以"/*"开始,以"*/"结束。 <script type="text/javascript"> /* 谁说菜鸟不会编程? 菜鸟不但会编程 还有书写注释的良好习惯 */ document.write("我是菜鸟我怕谁?"); </script> 相信你已经了解注释的作用了。HTML的注释不会被浏览器作为HTML解释,CSS注释也不会被浏览器解释。同理,JavaScript的注释也不会被执行。 注释的作用就是记录自己在编程时候的思路,以便以后自己阅读代码时可以马上找到思路。同样,注释也有助于别人阅读自己书写的JavaScript代码。总之书写注释是一个良好的编程习惯。 6 JavaScript 变量 (1)什么是变量 在代数中,我们会遇到下面的基础问题,如果a的值为5,b的值为6,那么a与b的和是多少?在这个问题中,我们就可以把a和b看做变量,再设置一个变量c来保存a与b的和。 那么,上面的这个问题就可以用如下的JavaScript代码表示: <script type="text/javascript"> // 计算a + b的和 a = 5;//给变量a赋值 b = 5;//给变量b赋值 c = a + b;//c 为 a + b 的和 document.write(c);//输出c的值 </script> 执行结果:10 在上面的例子中,我们用到了三个变量:a,b,c。这些都是变量的名字,在JavaScript中,我们需要用变量名来访问这个变量。在JavaScript中,变量名有如下规定: · 变量名区分大小写,A与a是两个不同变量。 · 变量名必须以字母或者下划线开头。 (2)声明变量 我们可以用var声明变量,比如: <script type="text/javascript"> var a ; //声明一个变量a a = 5 ; //给变量赋值 </script> 其实在第一个例子中我们已经看到了,JavaScript中可以不声明变量直接赋值。不过先声明变量是一个良好的编程习惯。 (3)给变量赋值 来看一个上面出现过的语句: a = 5 ; 这个语句怎么读出来呢?“a等于5”? 对不起,不对。应该是“让a等于5”,说得专业一点,这叫“给a赋值”。 我们之前已经提到过,a是变量,是可以变的,所以从某种角度来说,它不等于任何值,只是暂时的等于某个值。来看下面这个例子,进一步熟悉一下赋值与等于的关系: a = 5;//让a等于5,a的值暂时等于5 a = 6;//让a等于6,a的值暂时等于6 再次强调,如果JavaScript是你学习的第一门编程语言,一定要注意区分“等于”和“赋值”这两个不同的概念。 (4)变量的数据类型 其实,在JavaScript中,变量是无所不能的容器,你可以吧任何东西存储在变量里,例如: var quanNeng1 = 123;//数字 var quanNeng2 = "一二三"//字符串 其中,quanNeng2这个变量存储了一个字符串,字符串需要用一对引号括起来。变量还可以存储更多的东西,例如数组,对象,布尔值等等,我们会在后面介绍这些内容。 7 JavaScript操作符 7.1运算操作符 操作符是用于在JavaScript中指定一定动作的符号,其中算术操作符主要用来完成类似加减乘除的工作。 (1)操作符举例 看下面这段JavaScript代码。 c = a + b; 其中的"="和"+"都是操作符。 JavaScript中还有很多这样的操作符,例如,加减乘除是JavaScript中比较基本的几个操作符,它们的意义与在数学中没有什么差别。 JavaScript中最常见的操作符是赋值操作符“=”,上一节我们已经强调过,它不是等于。 (2)操作符的优先级 我们都知道,在数学中,“a + b * c”这个式子中,乘法将先于加法运算。同样,在JavaScript中,这个式子会按相同的顺序执行。我们称之为“优先级”,即“*”的优先级高于“+”。 与数学中一样,改变运算顺序的方法是添加括号,JavaScript中改变优先级的方法也是添加括号。例如: (a +b) * c (3)字符串的连接 在JavaScript中,“+”不知代表加法,同样也可以使用它来谅解两个字符串,例如: example = "乌" + "龟"; 在上面的例子中,example将包含“乌龟”这个字符串。这是由于“+”完成了“乌”和“龟”的连接,当然了,你也可以把这种行为理解成字符串的加法。 (4)自加一,自减一操作符 这里我们来看两个非常常用的运算符,自加一“++”;自减一“--”。首先来看一个例子: a = 5; a++;//a的值变为6 a--//a的值有变回5 上面的例子中,a++使得a的值在原来的基础上增加1,a--则让a在现在的基础上在减去1。所以,其实“a++”也可以写成 “a = a + 1”;//等同于a++ (5)复合操作符 延续上面的例子,其实“a = a + 1”还可以写成: a += 1;//将a的值加1之后再赋给a 这样把运算和赋值结合到一起的操作符叫做复合操作符。上面我们看到的是加法与赋值的结合,JavaScript中还有其它的符合运算符: a += b;// a = a + b a -= b;// a = a - b a *= b;// a = a * b a /= b;// a = a / b 7.2比较操作符和逻辑操作符 操作符是用于在JavaScript中指定一定动作的符号。 (1)比较操作符 比如:“==”符号,它是一个比较操作符,它表示的意思就是“相等吗?”。 例如:a==b表示:“a与b的值相等吗?” 在JavaScript中,这样的比较操作符有很多,下面就列出这些操作符以及它们的含义。 · “>” —— a大于b吗? · “<” —— a小于b吗? · “>=” —— a大于等于b吗? · “<=” —— a小于等于b吗? · “==” —— a等于b吗? · “!=” —— a不等于b吗? (2)逻辑操作符 数学里面的“a>b”在JavaScript中还表示为a>b;数学中的“b大于a,b小于c”是“a<b<c”,那么在JavaScript中是不是也一样呢?对不起,JavaScript没有那么聪明,你需要这么写: b>a && a<b 你可能已经猜到了,“&&”是而且的意思。 if(条件1 && 条件2) {//代码} 只有条件1、2同时满足,代码才会得到执行。 类似的操作符还有“或者(||)”和“非(!)” if(条件1 || 条件2) {//代码} “||”表示或者的意思,只要条件1或2中有一个满足,代码就会得到执行。 if(!条件) {//代码} “!”表示非,也就是不是的意思,只有条件不满足的时候,代码才会得到执行。 8 JavaScript流程控制语句 8.1 if else语句(如果,否则) if else是所有编程语言里都有的功能,它使得程序具有简单的判断能力。 在介绍if之前,让我们先来了解一下布尔值这个概念。 (1)布尔(Bool)值 在变量一节中,我们曾经说过,变量可以用来存储布尔值。哪么布尔值的作用究竟是什么呢?简单的说,布尔值的作用就是用来表示“真的假的”。所以布尔值其实只有两种取值:真(true)和假(false)。 (2) if else结构 其实“if else”的意思和字面意思是一样的,就是“如果”、“否则”。还是让我们来看一个使用if的例子吧。 <script type="text/JavaScript"> Var hobby = “VbScript”; if (hobby == “JavaScript”) { document.write("有发展"); } </script> 我们来解释一下这段代码。首先是一个“if”,它后面紧跟着一个括号,括号里则是一个条件,确切地说是一个布尔值。当条件成立的时候,这个值是true,“{}”里的语句将会得到执行;否则这个值是flase,“{}”里的语句将被忽略。 具体到我们的例子,因为hobby 变量的值是“VbScript”,所以不做回答。如果hobby变量的值是“JavaScript”,则回答“有发展”。注意“==”这个符号,这个符号用来判断左右两边是否相等。下一节会详细地介绍。 如果你的爱好不是JavaScript,那么没有任何输出。如果你希望它能对这种情况做出反应,我们可以请else来帮忙,看下面的代码: <script type="text/JavaScript"> var hobby = "JavaScript" if (hobby == "JavaScript") { document.write("有发展"); } else//如果爱好不是JavaScript { document.write("没有评价……"); } </script> 上面的代码用到了“else”,它会给if添加一种“否则”的状态。当hobby不是“JavaScript”的时候,它会表明“没有评价”。 (3)if else嵌套 如果想做更多的判断,可以用if的嵌套,看下面的代码。 <script type="text/JavaScript"> var hobby = "JavaScript" if ( hobby == "JavaScript") { document.write("有发展"); } else if ( hobby == "football")//如果爱好是足球。 //注意:这个if是嵌套在上一个if else中的else中的 { document.write("我X"); } else//既不是JavaScript又不是足球 { document.write("没有评价……"); } </script> 第二个if只有在第一个if的条件不成立的时候才有机会执行。 8.2 JavaScript Switch语句 当有很多种选项的时候,switch比if else使用更方便。 上一节我们已经看到,利用if else可以让程序具有基本的判断能力,而使用嵌套的if else则可以让程序对多种情况进行判断。但是当情况的种类比较多的时候,使用switch语句将更加合适。 比如要实现如下功能的程序:输入一个学生的考试成绩,我们按照每十分一个等级将成绩分等,程序将根据成绩的等级做出不同的评价。 很明显,用if else可以实现这样的程序,但是代码会很复杂。而如果使用switch语句,代码则会简单一些,首先来看一下思路,再把它翻译成JavaScript。 思路: 1. 将分数转化为特定等级以便于switch处理。 2. 判断分数属于哪种等级。 3. 根据分数等级做出评价:例如低于60给出挂科评价。 翻译成JavaScript就是如下代码(注意注释): <script type="text/JavaScript"> //首先,我们用score变量来存储分数,假设为65 var score = 65; //用分数除以10,parseInt的作用是把它转换为整数, //暂时不用深究,()内最后的结果为6 switch (parseInt(score / 10)) { //switch开始实现判断过程,case 6得到满足 case 0: case 1: case 2: case 3: case 4: case 5: //根据不同的等级做出不同的行为。 //冒号后面的语句就是行为 //case0到5的行为都是下面这个语句 degree = "恭喜你,又挂了!"; break; case 6: degree = "勉强及格"; break; case 7: degree = "凑合,凑合" break; case 8: degree = "不错,不错"; break; case 9: case 10: degree = "高手高手,佩服佩服"; }//end of switch </script> 记得在每个case所执行的语句里添加上一个break语句。为了理解break的作用,我们来看看如果没有break会怎么样: <script type="text/JavaScript"> switch (parseInt(score / 10)) { case 0: case 1: case 2: case 3: case 4: case 5: degree = "恭喜你,又挂了!"; case 6: degree = "勉强及格"; case 7: degree = "凑合,凑合" case 8: degree = "8错,8错"; case 9: case 10: degree = "高手高手,佩服佩服"; }//end of switch </script> 在上面的代码中,如果成绩是50分,那么score/10就是5,则case 5后面的语句将会得到执行,同样,case6、7等等后面的语句都会得到执行。也就是说,我们会得到:”恭喜你,又挂了!勉强及格凑合,凑合8错,8错高手高手,佩服佩服“这样没有意义的评价。 这就是swtitch语句的执行逻辑,当发现某个case满足后,该switch中在该case后的所有语句都会得到执行。第一个例子中的break就是为了让switch”停下来“。 8.3 JavaScript For 循环 所谓循环,就是重复执行一段代码。 前面我们已经看到了,if else和switch是JavaScript具有了判断的能力,但是电脑的判断能力和人比起来差远了。电脑更擅长一件事情——不停地重复。我们在JavaScript中把这叫做循环。 for语句结构如下: for(初始条件;判断条件;循环后动作) { 循环代码 } 让我们来看一个简单的例子吧:有十个菜鸟报数,“菜鸟1号、菜鸟2号”。有了for循环,很少的代码就可以实现十个菜鸟的报数。 <script type="text/JavaScript"> var i=1; for (i=1;i<=10;i++) { document.write("菜鸟"+i+"号<br />"); } </script> 结果如下: 菜鸟1号 菜鸟2号 菜鸟3号 菜鸟4号 菜鸟5号 菜鸟6号 菜鸟7号 菜鸟8号 菜鸟9号 菜鸟10号 在上面那个例子中,循环恰好执行了10次,那么和“for (i=1;i<=10;i++)”一句中的10是不是10次的意思呢?下面我们就来看看for循环的工作机制。 首先"i=1"叫做初始条件,也就是说从哪里开始,特别的,我们的例子从i=1开始。 出现在第一个分号后面的"i<=10"表示判断条件,每次循环都会先判断这个条件是否满足,如果满足则继续循环,否则停止循环,继续执行for循环后面的代码。你可能想问了,我们设定了i=0,岂不是永远都小于等于10吗?来看第三个部分。 最后的"i++"表示让i在自身的基础上加1,这时每次循环后的动作.也就是说,每次循环结束,i都会比原来大1,执行若干次循环之后,i<=10的条件就不满足了,这时循环结束。for循环后面的代码将得到执行。 8.4 JavaScript While循环 while循环重复执行一段代码,直到某个条件不再满足。 (1)while循环的结构: while(判断条件) { 循环代码 } 其实while循环和for循环的作用都是重复执行代码,例如下面这段代码,和上一节for循环的输出结果完全没有区别。先来读读例子的代码,下面会解释为什么这个循环会和上一节的for循环等价。 <html> <body> <script type="text/JavaScript"> var i=0; while (i<=10) { document.write("菜鸟"+i+"号"); document.write("<br />"); i=i+1; } </script> </body> </html> 看起来好像比for循环少了点东西啊,只有一个判断条件啊。其实这个循环也是有初始条件的,只不过在之前就已经定义好了,例如上面例子中的"var i=0;",至于变量i的增大,则是放到了循环体里面,其实这个过程和for没有什么区别,也是变量i不断变大,直到判断条件不满足,则循环结束。 (2)do while循环的结构 do wile结构的基本原理和while结构是基本相同的,但是它保证循环体至少被执行一次。因为它是先执行代码,后判断条件。例子如下: <script type="text/JavaScript"> i = 0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i <= 5) </script> 8.5 JavaScript Break 与 Continue Break可以跳出循环,Continue跳过本次循环。 (1)break break语句可以让循环中途停止,直接执行后面的代码。格式如下: while (i<10) { if(特殊情况) break; 循环代码 } 那么,当特殊情况发生的时候,循环就会立即结束。看看下面的例子,我们的菜鸟7号到10号在寝室打游戏…… <html> <body> <script type="text/JavaScript"> var i=0; for (i=0;i<=10;i++) { if (i==6) { break;//如果i是6的话就退出循环。 } document.write("菜鸟"+i+"号<br />"); } </script> </body> </html> 当i=7的时候循环就会结束,不会输出后面循环的内容。 (2)continue continue的作用是仅仅跳过本次循环,而整个循环体继续执行。它的格式如下: while (判断条件) { if(特殊情况) continue; 循环代码 } 上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响,来看看下面的例子:菜鸟6号外出学习JavaScript去了。 <html> <body> <script type="text/JavaScript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> 上面的代码中,i=6的那次循环将被跳过. 8.6 JavaScript For...In循环 Javascript中的for in循环通常用来遍历数组 首先要了解什么是数组,所谓数组,其实就是一个保存了一组类似变量的一个集合。我们来看一个保存了爱好的数组实例: <html> <body> <script type="text/JavaScript"> var x; var hobbies = new Array();//创建一个新的数组 hobbies[0] = "JavaScript"; hobbies[1] = "CSS"; hobbies[2] = "篮球"; for (x in hobbies)//数组中的每一个变量 { document.write(hobbies[x] + "<br />"); } </script> </body> </html> 输出结果如下: JavaScript CSS 篮球 我们来分析一下上面的例子: var hobbies = new Array();一句创建了一个新的数组。 hobbies[0] = "JavaScript";以及之后的两句则是给hobbies数组赋值。这与我们之前见过的变量赋值不太一样,hobbies后面多出一个"[0]",这个是变量的索引。我们之前已经说了,数组是变量的集合,因此我们在赋值之前需要指明给数组中的哪一个变量赋值。在这里,"[0]"表示的是hobbies数组所包含的第一个变量,没错,数组的索引是从0开始的,开始可能有点别扭,慢慢就习惯了。 最后的for in循环就很好理解了, for (x in hobbies)//数组中的每一个变量 { document.write(hobbies[x] + "<br />"); } 表示遍历hobbies数组的所有变量,并且将他们逐一输出。 9 JavaScript 弹出框 JavaScript中有三种弹出框:警告(alert)、确认(confirm)以及提问(prompt)。 9.1警告(alert) 在访问网站的时候,你遇到过这样的情况吗?“咚”的一声,一个小窗口出现在你面前,上面写着一段警示性的文字,或是其它的提示信息。如果你不点击确定,你就不能对网页做任何的操作。没错,这个“咚”的小窗口就是alert干的。 下面的代码是一段使用alert的实例。 <script type="text/JavaScript"> alert("我是菜鸟我怕谁"); </script> 9.2确认(confirm) 确认框用于让用户选择某一个问题是否符合实际情况。来看下面的代码:我们用confirm("你是菜鸟吗?")向访客提问,变量r则保存了访客的回应,它只可能有两种取值:true或false。没错,它是一个布尔值。confirm后面的语句则是我们对访客回答做出的不同回应。 <script type="text/JavaScript"> var r=confirm("你是菜鸟吗"); if (r==true) { document.write("彼此彼此"); } else { document.write("佩服佩服"); } </script> 9.3提问(prompt) prompt和confirm类似,不过它允许访客随意输入回答。我们来修改一下之前switch的例子,我们根据分数来做出不同的评价,不过那段程序并不完整,它根本就没问我们分数,而是假设我得了65分。这太不公平了。现在我么就可以用prompt来向访客提问,用score存储用户输入的回答,其余的事情就都由后面的switch来完成了。 <script type="text/JavaScript"> function judge() { var score;//分数 var degree;//分数等级 score = prompt("你的分数是多少?") if (score > 100){ degree = '耍我?100分满!'; } else{ switch (parseInt(score / 10)) { case 0: case 1: case 2: case 3: case 4: case 5: degree = "恭喜你,又挂了!"; break; case 6: degree = "勉强及格"; break; case 7: degree = "凑合,凑合" break; case 8: degree = "8错,8错"; break; case 9: case 10: degree = "高手高手,佩服佩服"; }//end of switch }//end of else alert(degree); } </script> prompt( )方法除了可以给出提示信息外,还可以给出初始值,格式如下: prompt(“提示信息”,“初值”) 10 JavaScript 函数 通常情况下,函数是完成特定功能的一段代码。把一段完成特定功能的代码块放到一个函数里,以后就可以调用这个函数啦,这样就省去了重复输入大量代码的麻烦。还记得我们上一节所使用的alert吗?其实它就是一个函数,他是JavaScript提供的函数。 一个函数的作用就是完成一项特定的任务。如果没有函数时,完成一项任务可能需要五行、十行、甚至更多的代码。每次需要完成这个任务的时候都重写一遍代码显然不是一个好主意。这是我们就可以编写一个函数来完成这个任务,以后只要调用这个函数就可以了。 10.1定义一个函数 说了这么多,那么究竟如何定义一个函数呢?看看下面的格式: function 函数名() { 函数代码; } 函数由关键字Function定义,把“函数名”替换为你想要的名字,把“代码”替换为完成特定功能的代码,函数就定义好了。了解了如何定义函数,我们就来自己编写一个实现两数相加的简单函数吧。 首先给函数起一个有意义的名字:“add2”,它的代码如下: function add2(){ sum = 1 + 1; alert(sum); } 10.2函数的调用 函数定义好了,如何调用呢? 其实可以通过很多种方法调用上面的函数,我们这里使用最简单的函数调用方式——按钮的点击事件,JavaScript事件会在后面介绍。试着点击下面的按钮调用定义好的函数: <html> <head> <script language=javascript> function add2(){ sum = 1 + 1; alert(sum); } </SCRIPT> </head> <body> <form> <input type="button" value="click it" ONCLICK=" add2 ()"> </form> </body> </html> 通过button按钮的鼠标单击事件onclick调用add2()函数。 10.3带参数的函数 上述Add2()函数不能实现任意指定两数相加。其实,函数的定义可以是下面的格式: function(参数1,参数2,参数3){ 部分函数代码…… …… } 按照这个格式,我们的函数应该写成: function add2(x,y){ sum = x + y; alert(sum); } x和y则是我们函数的两个参数,调用函数的时候,我们就可以通过这两个参数把两个加数传递给函数了。例如,add2(3,4)会求3+4的和,add2(56,65)则会求出56和65的和。 “再等等!这函数没有用啊,这里只是把结果alert出来,我想对结果做些处理怎么办啊?” 10.4带返回值的函数 好吧,我们把alert(sum)一行改成下面的代码: return sum; return后面的值叫做返回值。使用下面的语句调用函数就可以将这个返回值存储在变量中了。 result = add2(3,4); 该语句执行后,result变量中的值为7。值得说明的是,我们的函数中,参数和返回值都是数字,其实它们也可以是字符串等其它类型。 11 JavaScript事件 我们之前提到过函数的调用。函数定义之后,默认是不会执行的,这时候就需要一些事件来触发这个函数的执行。 JavaScript很多有很多事件,例如鼠标的点击、移动,网页的载入和关闭。我们先来定义一个函数,再看几个事件的实例。 统一的示例函数: <script type="text/JavaScript"> function displaymessage() { alert("我是菜鸟我怕谁!"); } </script> 函数的事件很简单,只是显示一条消息。 11.1点击事件 使用点击
展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传

当前位置:首页 > 包罗万象 > 大杂烩

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2026 宁波自信网络信息技术有限公司  版权所有

客服电话:0574-28810668  投诉电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :微信公众号    抖音    微博    LOFTER 

客服