JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
全部章节 >>>>
本章目录
2.1 JavaScript 自定义函数
2.1.1 函数的定义
- 函数就是为了完成程序中的某些特定功能而进行专门定义的一段程序代码
- 函数包括自定义函数和系统函数
- 使用函数可以实现特定的功能，在使用函数前必须对函数进行定义，代码放置在 <script></script> 标签之间
语法：
function 函数名 ( 形式参数 1, 形式参数 2,…, 形式参数 n){
语句
}
使用 function 关键字。function 后是函数名，JavaScript 中的函数不必说明返回值的类型。
函数的命名规则与变量名的命名规则相同。
函数名后的 () 可以包含若干参数，也可以选择不带任何参数。
最后是一对 {}，包含具体实现程序中的某些特定功能的若干语句或脚本代码
示例：定义一个求长方形面积的函数
<body>
<script type="text/javascript">
// 参数 width、height 表示使用此函数时，要传递所求的长方形的宽度和高度值
function getArea(width,height){
var result=width*height ;
document.write(" 面积为："+result);
}
</script>
</body>
2.1.2 函数的调用
函数是不会自动执行的，调用一个函数的方法是使用函数名称，并且在函数名后用括号包含所需要传入的参数值
调用函数的语句也需要放置在<script>和</script>里
示例：
//getArea(width,height) 函数定义语法略
<h1> 宽度是：3，高度是：4 的长方形
<script type="text/javascript">getArea(3,4);</script>
</h1>
2.1.3 函数的参数
函数参数作用：调用函数时将数据传递给被调函数的方式
JavaScript中函数参数的特殊性
- 函数声明了参数，调用时也可以不传递参数，这在其他编程语言中是会出现编译错误的
- 不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得
在函数被调用时，一个 arguments 对象就会被创建，它只能使用在函数体中，以数组的形式来管理函数的实际参数
示例：编写一个函数计算各公司的人数和工资，并计算出各公司的人数和总工资
<script type="text/javascript">
/* 函数定义，计算公司人数及总工资 */
function getTotal() {
var count; // 人数
var sum=0; // 总工资
count=arguments.length;
for(var i=0;i<count;i++) {
sum+=arguments[i]; }
document.writeln(" 总人数是："+count + ", 总工资是：" + sum);
} </script>
<h1>A 公司：<br/>
<script type="text/javascript">getTotal(2000,4000,4800,6000)// 函数调用 </script>
</h1> <br/>
<h1>B 公司：<br/>
<script type="text/javascript">getTotal(24000,11000,18050,6000,8000)// 函数调用 </script> </h1>
2.1.4 函数的返回值
函数的返回值能够将一个函数内部产生的结果返回给外部语句使用
实现函数返回值的语句是 return
语法：
return 返回值 ;
示例：使用有返回值的函数计算长方形的面积
<script type="text/javascript">
// 创建有返回值的函数
function getArea(width,height) {
var result = width * height;
return result;
}
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用有返回值的函数
var area = getArea(3,4);
document.write(area);
</script>
</h1>
2.1.5 匿名函数
匿名函数就是没有名字的函数，也被称为拉姆达函数，是一种使用 JavaScript 函数的强大方式
语法一：
（function （形式参数列表）{
语句
}）（实际参数列表）;
语法二：
var 变量 =（function （形式参数列表）{
语句
} ）;
变量（实际参数列表）;
示例：使用匿名函数语法一：求长方形的面积
<script type="text/javascript">
// 定义函数
function(width,height) {
// 计算长方形的面积
}
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用匿名的函数
(function(width,height){
// 输出长方形的面积
document.write(width*height);
})(3,4);
</script>
</h1>
示例：使用匿名函数语法二：求长方形的面积
<script type="text/javascript">
// 定义函数
var area=function(width,height) {
document.write(width*height);
};
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用函数
area(3,4);
</script>
</h1>
2.1.6 变量的作用域
- 变量的作用域主要分为全局变量和局部变量两种
- 全局变量是在函数体外部声明的，可以在任何地方，包括函数的内部使用
- 局部变量是在函数体内声明的，只能在函数体内使用。局部变量随着函数的结束而消失
如果全局变量和局部变量出现重名的情况，局部变量优先，即无论局部变量的值怎么改变，全局变量的值不会受到影响
分析下述代码，请分别说出全局变量和局部变量有哪些。运行后，在页面上输出的内容是什么？
<script type="text/javascript">
var width=40;
function showWidth(){
var width=50;
document.write("<h3> 宽度是："+width+"</h3>");
}
showWidth();
document.write("<h3> 宽度是："+width+"</h3>");
</script>
2.1.7 实践练习
2.2 JavaScript 系统函数
2.2.1 parseInt()函数
parseInt函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位置停止解析并返回前面读到的所有整数
如果字符串不是以整数开头，将返回NaN(Not a Number：非数字值)
|
parseInt(string) |
|
|
字符串 |
结果 |
|
“150cats” |
150 |
|
“cats” |
NaN |
|
“6” |
6 |
|
“-6” |
-6 |
|
“6.56” |
6 |
2.2.2 parseFloat()函数
parseFloat()函数和parseInt()函数类似，只不过它是返回一个浮点数
|
parseFloat(string) |
|
|
字符串 |
结果 |
|
“route66.5” |
NaN |
|
“8.5dogs” |
8.5 |
|
“6” |
6 |
|
“6.56” |
6.56 |
|
“.7” |
0.7 |
2.2.3 isNaN()函数
isNaN() 函数用于判断参数是否是NaN（不是数字）。如果是 NaN， 那么 isNaN 函数返回 true ，否则返回 false
|
isNaN(参数) |
|
|
参数 |
结果 |
|
‘134’ |
false |
|
'2a34' |
true |
|
'2.34' |
false |
|
' ' (空格) |
false |
|
'wh' |
true |
示例：使用isNaN()函数验证文本框中输入的内容是否是数值
<input type="text" id="op1"/> +
<input type="text" id="op2"/>=
<input type="text" id="result"/><br/>
<input type="button" value=" 计算 " onClick="calc()"/>
<script type="text/javascript">
function calc() {
// 根据 id 属性获取文本框后，使用其 value 属性进一步得到内容
var num1 = document.getElementById("op1").value;
var num2 = document.getElementById("op2").value;
if(num1.trim()!="" && num2.trim()!="") { //trim(); 去掉空格
if(!isNaN(num1)&&!isNaN(num2)) {
document.getElementById("result").value= parseFloat(num1)+parseFloat(num2);
} else {
alert(" 请输入正确的数值 !"); // 弹出消息框
}
} else {
alert(" 请输入两个操作数 !"); }
}
</script>
2.2.4 eval()函数
eval() 函数运行是以字符串形式表示的 JavaScript 代码串，并返回执行代码串后的结果
示例：计算出用户输入在文本框中表达式的计算结果
<script type="text/javascript">
function calc() {
var express=document.getElementById("info").value;
var result=eval(express);
alert(" 输入在文本框中的表达式的结果是："+result);
}
</script>
<input type="text" id="info"/>
<input type="button" value=" 计算 " id="btn" onClick="calc()"/>
2.2.5 实践练习
2.3 JavaScript事件
2.3.1 事件
JavaScript 是基于对象、采用事件驱动的脚本语言
事件：用户使用鼠标或键盘在浏览器窗口或页面元素上执行的操作
事件源：产生事件的元素
事件处理程序：对事件进行处理的程序或函数
事件驱动：将一段程序代码与某个事件源上发生的事件进行绑定，当触发此事件，浏览器就会自动执行与之绑定的程序代码
2.3.2 事件与处理程序的绑定
在JavaScript 中，有两种方式将对象事件与处理程序代码进行绑定
- 在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码
示例：单击段落时，将段落文本大小更改为30px
<script type="text/javascript">
function changeSize() {
var obj=document.getElementById("text");
obj.style.fontSize="30px";
}
</script>
<p id="text" onClick="changeSize()"> 事件与处理程序的绑定 </p>
可以直接在 JavaScript 代码中设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码
示例：
<p id="text"> 事件与处理程序的绑定 </p>
<script type="text/javascript">
function changeSize() {
var obj = document.getElementById("text");
obj.style.fontSize="30px";
}
document.getElementById("text").onclick=changeSize;
</script></p>
上述示例中，也可以使用匿名函数来简化，即事件名=function(){…}
2.3.3 实践练习
2.4 JavaScript的常用事件
2.4.1 鼠标事件
onclick 事件：鼠标单击页面元素时触发的事件
示例：在页面选择性别后，弹出用户选择的结果
<script type="text/javascript">
function showGender(obj) {
alert(" 你选择的性别是："+obj.value);
}
</script>
<h2> 性别：
<input type="radio" value=" 男 " name="gender" onClick="showGender(this)"/> 男
<input type="radio" value=" 女 " name="gender" onClick="showGender(this)"/> 女
</h2>
onmouseover 事件和 onmouseout 事件：鼠标移入、移出页面元素时触发的事件
示例：鼠标移入图片时，图片停止滚动，鼠标移出图片时，图片继续滚动
<body>
<marquee direction="right" onmouseover="stop()" onmouseout="start()">
<img src="../img/img_1.jpg" />
</marquee>
</body>
onmousemove 事件：鼠标指针移动时发生的事件
示例：计算鼠标移动的位置
<body>
鼠标移动了 <span id="sp">0</span>px
<div style="width:200px; height:200px; background-color:#ccc" onmousemove="move()"></div>
<script type="text/javascript">
// 计数器
var count = 0;
function move() {
document.getElementById("sp").innerHTML = ++count;
}
</script>
</body>
2.4.2 其他事件
onload 事件：页面加载完成后立即发生
示例：页面加载完成后，弹出提示框
<body>
<script type="text/javascript">
window.onload=function() {
alert(" 页面加载完成 ");
}
</script>
</body>
onblur 事件：光标或者焦点离开元素后触发的事件
示例：验证用户输入的密码长度是否在6位以上
<body>
<p> 请输入密码：<input type="password" id="txtPwd" onblur="checkPwd(this)"/></p>
<script type="text/javascript">
function checkPwd(obj) {
var pwd=obj.value;
if(pwd.length>=6)
{alert(" 密码输入正确 "); }
else {alert(" 密码的长度必须是 6 位或以上 ");} }
</script></body>
onchange事件：输入框的值发生了变化或者改变下拉列表框的选项时会触发的事件
示例：验证用户输入的密码长度是否在6位以上
<script type="text/javascript">
function changeLink(obj) {
var site = obj.value;
if(site !=" 请选择 ") {
window.open(site);
}
}
</script>
友情链接：<select onChange="changeLink(this)">
<option value=" 请选择 "> 请选择 </option>
<option value="http://www.baidu.com"> 百度 </option>
//其他option标签代码略
2.4.3 表单事件
单击表单元素的“提交按钮”会触发form标签的 onsubmit 事件，浏览器对这个事件的默认处理方式是提交数据给 action 属性指定的页面进行处理
如果要阻止提交数据到指定的页面，就需要编写一个事件处理程序来改变浏览器对form标签的 onsubmit 事件的默认处理方式
示例：改变浏览器对form标签中 onsubmit 事件的默认处理方式
<body>
<script type="text/javascript">
function check() {
event.returnValue=false;
}
</script>
<form action="info.html" onSubmit="check()">
<input type="submit" value=" 提交 "/>
</form></body>
上述示例可以简写成： <form action=“info.html” οnsubmit=“return false”>…</form>
示例：验证用户是否在表单中输入姓名
<script type="text/javascript">
function check() {
// 获取输入在 id="name" 文本框中的内容
var userName=document.getElementById("name").value;
if(userName.trim().length>0) {
return true;
} else {
alert(" 请输入用户名 ");
return false;
}
}
</script>
<form action="info.html" onSubmit="return check()">
<p> 用户名：<input type="text" id="name"/></p>
<p><input type="submit" value=" 提交 "/></p>
</form>
2.4.4 实践练习
总结：
- 用JavaScript定义函数，需要使用关键字function
- 匿名函数就是没有名字的函数
- 变量的作用域主要分为全局和局部两种
- 系统函数有parseInt、parseFloat、isNaN和eval
- 常用事件有onclick、onmouseover、onmouseout、onmousemove、onblur、onchange、onload和onsubmit
JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】的更多相关文章
- JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏
一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...
- JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
- JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...
随机推荐
- 容器之分类与各种测试（三）——forward_list的用法
forward_list是C++11规定的新标准单项链表,slist是g++以前的规定的单项链表 例程 #include<stdexcept> #include<string> ...
- C++ 之杂记
今天做了一个题,代码不难,但是编译的时候就恼火,老是报错,也不告诉我错哪了.... 之前的代码是这样的,在main函数中调用这个类的构造函数,就一直报错,但是不知道原因,后来加上了const 就好了. ...
- 银联acp手机支付总结
总结: 1.手机调用后台服务端接口,获取银联返回的流水号tn 银联支付是请求后台,后台向银联下单,返回交易流水号,然后返回给用户,用户通过这个交易流水号,向银联发送请求,获取订单信息,然后再填写银行卡 ...
- 在html页面通过绝对地址显示图片
1.编辑tomcat中conf目录下的server.xml文件,在<Host></Host>中添加如下代码段 <Context path="/D" d ...
- 莫烦python教程学习笔记——保存模型、加载模型的两种方法
# View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...
- 【Jenkins系列】-备份机制
Jenkins是主从模式,从节点可以做集群.负载,从而实现从节点的高可用,但是主节点是单节点,一旦主节点宕机,会导致Jenkins服务不可用.Jenkins主节点本身是不支持集群的,需要通过其他变通方 ...
- 使用Modbus批量读取寄存器地址
使用modbus单点读取地址是轮询可能会导致效率很低,频繁发送读取报文会导致plc响应时间拉长,批量读取可大大减少数据通信的过程,每次读取完成后,在内存中异步处理返回来的数据数组. modbus 功能 ...
- 启动Springboot 报错 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Sat Jan 12 15:50:25 CST 2019 There was an unexpected error (type=Not
解决方案:http://www.cnblogs.com/michaelShao/p/6675186.html
- 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习
淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...
- HGAME pwn ROP_LEVEL2
花了好多天,终于把这个题彻底弄懂了...自己太菜了 下载文件,首先checksec检查一下保护. 只开启了堆栈不可执行,接下来拖到IDA看一下C的伪代码. 大致先让你输入,然后再次让你输入. 第 ...