JavaScript进阶(四)

现在说说什么是函数。
函数的作用可以写一次代码,然后反复的重用这个代码。如:我们要完成多组数和
的功能。
var sum;
sum=3+2;
alert(sum);

sum=7+8;
alert(sum);
...//不停重复两行代码

如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多。所以我们
可以把完成特定功能的代码块放到一个函数里面去,直接调用这个函数,就省去重
复输入大量代码的麻烦。
使用函数完成:
function add2(a,b){
sum=a+b;
alert(sum);
}//只需要调用函数就可以
如何定义一个函数呢?看看下面的格式:
function 函数名()
{
函数体;
}
function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完
成特定功能的代码。
我们完成对两个数求和并显示结果的功能,并给函数起一个有意义的名字:"add2"
代码如下:
<script type="text/javascript">
function add2(){
sum=3+2;
alert(sum);
}
add2();
</script>
函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
第一种情况在<script>标签内调用。
<script type="text/javascript">
function add2()
{
sum=1+1;
alert(sum);
}
add2();//调用函数,直接写函数名。
</script>
第二种情况:在html文件中调用,如通过点击按钮后调用定义好的函数。
<html>
<head>
<script type="text/javascript">
function add2()
{
sum=5+6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">
//按钮,onclick点击事件,直接写函数名
</form>
</body>
</html>
注意:鼠标事件后面会说的。
上面说的add2()函数不能实现任意指定两数相加。其实,定义函数还可以如下格式:
function 函数名(参数1,参数2)
{
函数代码
}
注意:参数可以多个,根据需要增减参数个数,参数之间用(逗号,)隔开
按照这个格式,函数实现任意两个数的和应该写成:
function add2(x,y)
{
sum=x+y;
document.write(sum);
}
x和y则是函数的两个参数,调用函数的时候,我们可以通过这两个参数把两个实际
的加数传递给函数了。例如,add2(3,4)会求3+4的和,add2(60,20)则会求60和20的
和。
写了很久了,发现要输出结果总是用documen.write,如果想对函数的结果进行处理
怎么办呢?
我们只要把document.write(sum)改成如下代码:
function add2(x,y)
{
sum=x+y;
return sum;//返回函数值,return后面的值叫做返回值。
}
还可以通过变量存储调用函数的返回值,代码如下:
result=add2(3,4);//语句执行后,result变量中的值为7.
注意:函数中参数和返回值不只是数字,还可以是字符串等其他类型。
下面是一个编程练习:
使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数。
代码如下:
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数</title>
<script type="text/javascript">
function thant(x,y){
if(x>y){
return x;
}
else if(x<y){
return y;
}
}
var biger=thant(5,4);
//函数体,判断两个整数比较的三种情况
//调用函数,实现下面两组数中,返回较大值。
document.write(" 5 和 4 的较大值是:"+biger+"<br>");
var biger=thant(6,3);
document.write(" 6 和 3 的较大值是:" +biger);
</script>
</head>
<body>
</body>
</html>
接着我们来说说JavaScript创建动态页面。事件是可以被JavaScript侦测到的行为。
网页中的每个元素都可以产生某些可以出发JavaScript函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件
需要浏览器做出处理,返回给用户一个结果。
主要事件表:
事件 说明
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚集
onblur 光标离开
onload 网页导入
onunload 关闭网页
onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick
事件调用的程序块就会被执行,通常与按钮一起使用。
比如我们单击按钮时,出发onclick事件,并调用两个数和的函数add2()。代码如下:
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum);
}
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()"/>
</form>
</body>
</html>
注意:在网页中,如使用事件,就在该元素中设置事件属性。
鼠标经过事件(onmouseover)
鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行
onmouseover事件调用的程序。
现实鼠标经过"确定"按钮时,触发onmouseover事件,调用函数info(),弹出消息框
代码如下:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onmouseout</title>
<script type="text/javascript">
function info(){
confirm("请输入姓名后,再单击确定!");}
</script>
</head>
<body>
<form>
密码:<input name="password" type="text">
<input name="button" type="button" value="确定" onmouseover="info()">
<!-- 当鼠标经过确定按钮式触发onmouseover="info()" -->
</form>
</body>
</html>
既然有鼠标经过事件,肯定也有鼠标移开事件(onmouseout)
鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
当鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout事件,调用函数message()
代码如下:
<!DOCTYPE HTML>
<head>
<mate http-equiv="Content-Type" content="text/html";charset="utf-8">
<title>onmouseout</title>
<script type="text/javascript">
function message(){
confirm("不要离开,只要输入密码,再单击登录就OK了!")
}
</script>
</head>
<body>
<form>
密码:<input name="password" type="text">
<input name="button" type="button" value="登录" onmouseout="message()">
<!-- 当移开"登录"按钮,触发onmouseout="message()" -->
</form>
</body>
</html>
当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
如下代码,当将光标移到文本框内时,即焦点在文本框内,触发onfocus事件,并调
用函数message()。
<!DOCUTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onfocus</title>
<script type="text/javascript">
function message(){
alert("请在此输入姓名!");
}
</script>
</head>
<body>
<form>
姓名:<input name="username" type="text" value="请输入姓名" onfocus="message()">
<!-- 当光标在文本框内时(即文本框得到焦点),调用message()函数 -->
</form>
</body>
</html>

时间: 2024-10-16 03:15:35

JavaScript进阶(四)的相关文章

javascript进阶笔记(2)

js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函数式编程中,有一种函数称为匿名函数,也就是没有名称的函数,是js中的一个非常重要的概念.通常匿名函数的使用情况是,创建一个供以后使用的函数.比如将匿名函数保存在一个变量里面,或将其作为一个对象方法,更有甚者将其作为一个回调等等之类的. //保存在变量中,通过fn去引用 var fn=function

JavaScript 进阶篇的学习~

---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已.我们还需使用JavaScript增加行为,为网页添加动态效果.准备好,让JavaScript带你进入新境界吧! JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等

AngularJS进阶(四十)创建模块、服务

AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能,使之能跨应用使用. 一.应用程序模块化 先看看一个没有模块化的程序 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar

JavaScript进阶--慕课网学习笔记

                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,

【javascript 进阶】异步调用

前言 javascript的中的异步是很重要的概念,特别是ajax的提出,给整个web带来了很大的影响,今天就介绍下javascript的异步编程. 同步与异步 何为同步?何为异步呢? 同步:说白了就是程序一步一步从下向下执行,没有什么别的代码的跳动,就是按序执行,和在景区里女生上厕所是排队是一样的(每次女厕都是有好多人在排队).可以看成是一个单线程问题. 异步:异步就是程序可以跳着执行,开始执行一段程序之后不用等返回结果就执行其他的代码,等结果返回之后在对结果进行处理,也就是可以在有限的时间内

JavaScript 进阶问题列表

JavaScript 进阶问题列表 我在我的 Instagram 上每天都会发布 JavaScript 的多选问题,并且同时也会在这个仓库中发布. 从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试! 我每周都会在这个仓库下更新新的问题. 答案在问题下方的折叠部分,点击即可展开问题.祝你好运 1. 输出是什么? function sayHi() { console.log(name) console.log(age) var name = 'Lyd

Javascript进阶---前言

前言: 在没有完全认识Javacript的时候,经常用Javascript/jQuery操纵DOM,改个样式什么的,使用Ajax进行前端后端的数据交互. 经常会想,这近些年大热的Javascript就只能做这么点事儿吗? 直到后来,慢慢接触到了AngularJS.NodeJS才知道,才知道将Javascript作为一门完整的语言去看待,而不仅仅是网页的脚本. Javascript进阶学习笔记,将会以ECMAScript 6为标准,去学习真正的Javascript. 注意: 1.整理内容具有个人偏

JavaScript进阶系列06,事件委托

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个事件处理机制为页面元素注册事件方法. □ 点击页面任何部分触发事件 创建一个script1.js文件. (function() { eventUtility.addEvent(document, "click", function(evt) { alert('hello'); }); }(

JavaScript进阶系列02,函数作为参数以及在数组中的应用

有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var sum = function(x, y) { return x + y; }, diff = function (x, y) { return x - y; }; var sumResult = calculator.calculate(2, 1, sum), diffResult = calculat

JavaScript进阶(一)

OK接下来,我们再次梳理一遍js并且提高一个等级. 众所周知,web前端开发者需要了解html和css,会只用html和css创建一个漂亮的页 面,但是这肯定是不够的,因为它只是一个静态的页面,我们还需要用JavaScript 增加它的行为,为网页添加动态效果. 首先,JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单,图片轮播,信息滚动等) 2.实现页面与用户之间的实时,动态交互(如:用户注册,登录验证等) JavaScript进阶篇章能学习到什么呢? 在JavaScript入