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 ...
随机推荐
- 『学了就忘』Linux启动引导与修复 — 70、grub启动引导程序的配置文件说明
目录 1.grub中分区的表示方法 2.grub的配置文件 3.grub的配置文件内容说明 (1)grub的整体设置 (2)CentOS系统的启动设置 1.grub中分区的表示方法 在说grub启动引 ...
- html块 布局
可通过<div>和<span>将html元素组合起来. Html块元素 大多数html元素被定义为块级元素或内联元素. 块级元素在浏览器显示时,通常会以新行来开始(和结束).例 ...
- spring注解事务管理
使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间<beans xmlns="http://www.springframework.org/schema/b ...
- 连接 MySQL 数据库出现问题：The server time zone value ‘�й���ʱ��‘ is unrecogni....
出现问题 The server time zone value '�й���ʱ��' is unrecogni.... 解决方案 在 URL 后面加上 ?serverTimezone=UTC 如下: ...
- linux系统下安装dubbo-admin
1.在安装dubbo-admin之前确保你得linux服务器上已经成功安装了jdk,tomcat, 若还没安装jdk以及tomcat则参考我的上一篇文章"linux环境下安装jdk,tomc ...
- Redis，Memcache，MongoDb的特点与区别
Redis Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支 ...
- 常用 HTTP 状态码
下面是列举的我在项目中用到过的一些 HTTP 状态码,当然,在具体的使用中并不是用到的状态码越多越好,需要结合自己项目情况来选用适合自己的 HTTP 状态码. HTTP 状态码 含义说明 200 ...
- spring boot @EnableWebMvc禁用springMvc自动配置原理。
说明: 在spring boot中如果定义了自己的java配置文件,并且在文件上使用了@EnableWebMvc 注解,那么sprig boot 的默认配置就会失效.如默认的静态文件配置路径:&quo ...
- SVM中的软间隔最大化与硬间隔最大化
参考文献:https://blog.csdn.net/Dominic_S/article/details/83002153 1.硬间隔最大化 对于以上的KKT条件可以看出,对于任意的训练样本总有ai= ...
- Windows11下载地址
10月5日微软推出了Win11正式版本,但是仍然不支持apk格式,不免让人失望.下面是Win11商业版本下载地址: 下载地址1: ed2k://|file|zh-cn_windows_11_busin ...