JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】_网页设计中javascript实现交互式表单的实验总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_44893902/article/details/109331214

全部章节 >>>>

本章目录

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>