全部章节 >>>>

本章目录

2.1 JavaScript 自定义函数

2.1.1 函数的定义

2.1.2 函数的调用

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 ...

随机推荐

【leetcode】834. Sum of Distances in Tree（图算法）
There is an undirected connected tree with n nodes labeled from 0 to n - 1 and n - 1 edges. You are ...
Rust 总章
1.1 Rust安装 3.5 Rust Generic Types, Traits, and Lifetimes 3.6 String 与切片&str的区别 https://openslr. ...
为什么要重写hashcode和equals方法
我在面试 Java初级开发的时候,经常会问:你有没有重写过hashcode方法?不少候选人直接说没写过.我就想,或许真的没写过,于是就再通过一个问题确认:你在用HashMap的时候,键(Key)部分, ...
my40_MySQL锁概述之意向锁
本文在锁概述的基础上,通常实验举例,详细地介绍了意向锁的原理. 锁范围全局锁(global lock)表锁(table lock)行锁 (row lock) ROW LOCK的粒度LOCK_REC ...
matplotlib画3d图
import numpy as npimport matplotlib.pyplot as pltfrom mpl_toolkits.mplot3d import Axes3D fig = plt.f ...
修改页面.JSP
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@tag ...
1.Vuejs-第一个实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
【力扣】922. 按奇偶排序数组 II
给定一个非负整数数组 A, A 中一半整数是奇数,一半整数是偶数. 对数组进行排序,以便当 A[i] 为奇数时,i 也是奇数:当 A[i] 为偶数时, i 也是偶数. 你可以返回任何满足上述条件的数组 ...
修复Apache Log4j任意代码执行漏洞安全风险通告
2021年12月10日 0x01漏洞背景 Apache Log4j 是 Apache 的一个开源项目,Apache Log4j2是一个基于Java的日志记录工具.该工具重写了Log4j框架,并且引入了 ...
使用plantuml，业务交接就是这么简单
使用plantuml,业务交接就是这么简单你好,我是轩脉刃. 最近交接了一个业务,原本还是有挺复杂的业务逻辑的,但发现交接过来的项目大有文章,在项目代码中有一个docs文件夹,里面躺着若干个 pum ...

JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】

全部章节 >>>>

2.1 JavaScript 自定义函数

2.1.1 函数的定义

2.1.2 函数的调用

2.1.3 函数的参数

2.1.4 函数的返回值

2.1.5 匿名函数

2.1.6 变量的作用域

2.1.7 实践练习

2.2 JavaScript 系统函数

2.2.1 parseInt()函数

2.2.2 parseFloat()函数

2.2.3 isNaN()函数

2.2.4 eval()函数

2.2.5 实践练习

2.3 JavaScript事件

2.3.1 事件

2.3.2 事件与处理程序的绑定

2.3.3 实践练习

2.4 JavaScript的常用事件

2.4.1 鼠标事件

2.4.2 其他事件

2.4.3 表单事件

2.4.4 实践练习

总结：

JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】的更多相关文章

随机推荐

热门专题