7.JavaScript函数与事件

本章目标

函数
事件

本章内容

一、函数

1、内置函数

eval 函数：用于计算字符串表达式的值

isNaN 函数：用于验证参数是否为 NaN（非数字）

<SCRIPT LANGUAGE=“JavaScript”>
   var str1 = prompt(“输入一个表达式，我给您计算，如：1+1”, ““);
   var result = eval(str1);
   document.write(str1 +”=” + result);
   var x = prompt(“输入一些数据,我来告诉您是不是数字”, “0”);
   if (isNaN(x)) {
       alert(x + ” 不是一个数字”);
  }
   else {
       alert(x + ” 是一个数字”);
  }
</SCRIPT>

2、自定义函数

定义函数：

function 函数名( 参数1,参数2，… ){
    语句;
}

示例：

function  sum ( one, two)
{
 var result = one + two;
 return  result;
}

调用函数:

函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名”

<INPUT name="add" type="button"  value="加法"     onClick="sum(2，5)">

3、综合示例：

<HEAD>
    <SCRIPT language="JavaScript">
        function compute(op) {
            var num1, num2;
            num1 = parseFloat(document.myform.num1.value);
            num2 = parseFloat(document.myform.num2.value);
            if (op == "+") {
                document.myform.result.value = num1 + num2;
            }
            if (op == "-") {
                document.myform.result.value = num1 - num2;
            }
            if (op == "*") {
                document.myform.result.value = num1 * num2;
            }
            if (op == "/" && num2 != 0) {
                document.myform.result.value = num1 / num2;
            }
        }
    </SCRIPT>
</HEAD>

调用函数

<body>
    <FORM action="" method="post" name="myform">
        <P>第一个数<INPUT name="num1" type="text">
            <BR>第二个数<INPUT name="num2" type="text">
        </P>
        <P>
            <INPUT name="addButton" type="button" value="＋" onClick="compute('+')">
            <INPUT name="subButton" type="button" value="－" onClick="compute('-')">
            <INPUT name="mulButton" type="button" value="×" onClick="compute('*')">
            <INPUT name="divButton" type="button" value="÷" onClick="compute('/ ')">
        </P>
        <P>计算结果 <INPUT name="result" type="text">
        </P>
    </FORM>

</body>

4、变量的使用范围

局部变量
全局变量

全局变量不需要以 var 关键字进行声明，但局部变量则必须以此关键字来声明

在实际应用中，我们应该尽可能的用局部变量来代替全局变量

示例：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>全局变量和局部变量示例</title>
    <script language="javascript">
        quanju = "1";
        /*函数的定义*/
        function getValue1() {
            var quanju = "5";
            alert(quanju);
        }

        /*函数的定义*/
        function getValue2() {
            quanju = 3;
            alert(quanju);
        }

        /*函数的定义*/
        function getValue3() {
            alert(quanju);
        }

    </script>
</head>

<body>
    <input type="button" value="显示1" onClick="getValue1()" />
    <input type="button" value="显示2" onClick="getValue2()" />
    <input type="button" value="显示3" onClick="getValue3()" />

</body>

</html>

5、let 命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。ES6参考

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

二、事件

1、什么是事件

事件是发生并得到处理的操作

如果电话铃响了，我们习惯的会拿起电话，给予回应，说：“喂，您好！找哪位？” 其中，电话铃响，就表示一个事件，而我们接电话，就是对该事件的处理。

2、JavaScript 事件处理程序

JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行

<!-- 事件处理程序的基本语法是：-->

<!-- 事件名=" JavaScript 代码或调用函数" -->

<!-- 例如：-->
<INPUT type="BUTTON" …  onClick="alert(‘单击我！’);">
<INPUT type="BUTTON" …  onMouseDown="check( )">
<!-- 表示鼠标按下时，将调用执行函数check( ) 。-->

3、JavaScript 事件

事件名	说明
onClick	鼠标单击
onChange	文本内容或下拉菜单中的选项发生改变
onFocus	获得焦点，表示文本框等获得鼠标光标。
onBlur	失去焦点，表示文本框等失去鼠标光标。
onMouseOver	鼠标悬停，即鼠标停留在图片等的上方
onMouseOut	鼠标移出，即离开图片等所在的区域
onMouseMove	鼠标移动，表示在层等上方移动
onLoad	网页文档加载事件
onSubmit	表单提交事件
onMouseDown	鼠标按下
onMouseUp	鼠标弹起

3.1、onChange

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>OnChang事件示例</title>
</head>
<script language="javascript">
    function changeBg() {
        if (document.form1.bgColorList.value != "") {
            document.body.style.backgroundColor = document.form1.bgColorList.value;
        }

    }
</script>

<body>
    <form name="form1">
        <table width="301" height="62" border="1" align="center">
            <tr>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td width="171">请选择你喜欢的背景色</td>
                <td width="114"><select name="bgColorList" onChange="changeBg()">
                        <option value="">---------</option>
                        <option value="#FFCCFF">粉红浪漫</option>
                        <option value="#6699FF">蓝色忧郁</option>
                        <option value="#9966FF">紫色诱惑</option>
                        <option value="#009966">绿色环保</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </form>
    <p>&nbsp;</p>
</body>

</html>

3.2、onFocus和onBlur-自动生成总价

Onblur事件里面写Focus()方法,JS没效果的处理方法,经检测，ie是支持这种写法的，chrome，Firefox不支持。

<head>
    <meta http-equiv="Content-Type" content="text/html; chabset=gb2312" />
    <title>无标题文</title>
    <script language="JavaScript">
        function clearText() {
            if (document.myform.card.value == "输入您的会员帐号")
                document.myform.card.value = "";
        }
        function check() {
            var a = document.myform.card.value;
            if (a.substr(0, 2) != "10" || isNaN(a)) {
                alert("格式错误，请重新输入");
                document.myform.card.select();
            }
        }
        function compute() {
            var price = document.myform.price.value;
            var number = document.myform.number.value;
            document.myform.tot.value = price * number;
        }

    </script>

</head>

<body>
    <form name="myform" action="left.html" method="post" id="myform">
        <table>
            <tr>
                <TD>帐号</TD>
                <td>
                    <INPUT name="card" onFocus="clearText()" onBlur="check()" type=text value="输入您的会员帐号">
                </TD>
            </tr>
            <TD>单价：</TD>
            <td>
                <INPUT name="price" type=text value="25.00" readonly>￥
            </TD>
            </tr>
            <TD>数量：</TD>
            <td>
                <INPUT name="number" onChange="compute()" type=text>个
            </TD>
            </tr>
            <TD>总价：</TD>
            <td><INPUT name="tot" type=text value="0.00">￥</TD>
            </tr>
        </table>
    </form>
</body>

3.3、onMouseOver和onMouseDown事件

<HTML>
    <HEAD>
        <TITLE>图片切换</TITLE>
    </HEAD>
    <BODY>
        <A  href="http://www.mycom.cn">
            <IMG src="image/image.gif" name="picture"
            onMouseOver="src='image/image.gif'"
            onMouseOut=" src='image/image1.gif' "/>
            低价转让哈士奇弟弟
         </A>
        <H1> 移过来看看俺啊</H1>
    </BODY>
</HTML>

posted @ 2025-04-14 15:20 icui4cu 阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

icui4cu