2.3 编写第一个JavaScript程序_jQuery从入门到精通（软件开发视频大讲堂）-QQ阅读男生武侠网

书名：jQuery从入门到精通（软件开发视频大讲堂）
作者名：明日科技
本章字数：1930字
更新时间：2020-11-28 23:47:17

2.3 编写第一个JavaScript程序

下面通过一个简单的JavaScript程序，使读者对编写和运行JavaScript程序的整个过程有一个初步的认识。

2.3.1 编写JavaScript程序

【例2.4】下面应用Dreamweaver编辑器编写第一个JavaScript程序。（实例位置：光盘\TM\sl\2\4）

（1）启动Dreamweaver编辑器，选择“文件”/“新建”命令，打开“新建文档”对话框，在“常规”选项卡中选择“基本页”/JavaScript命令，然后，单击“创建”按钮，即可成功创建一个JavaScript文件。

（2）JavaScript的程序代码必须置身于<script language="javascript"></script>之间。在<body>标记中输入如下代码：

        <script language="javascript">
            alert("我喜爱JavaScript语言！");
        </script>

在Dreamweaver中输入JavaScript脚本程序的运行结果如图2.18所示。

图2.18 在Dreamweaver中输入JavaScript脚本程序

JavaScript脚本在HTML文件中的位置有3种。

在HTML的<body>标记中的任何位置。如果所编写的JavaScript程序用于输出网页的内容，应该将JavaScript程序置于HTML文件中需要显示该内容的位置。

在HTML的<head>标记中。如果所编写的JavaScript程序需要在某一个HTML文件中多次使用，那么，就应该编写JavaScript函数（function），并将函数置身于该HTML的<head>标记中。

        <script language="javascript">
        function check(){
            alert("我被调用了");
        }
        </script>

使用时直接调用该函数名就可以了。

        <input type="submit"value="提交"onClick="check()">

单击“提交”按钮，调用check()函数。

在一个js的单独文件中。如果所编写的JavaScript程序需要在多个HTML文件中使用，或者，所编写的JavaScript程序内容很长，这时，就应该将这段JavaScript程序置于单独的js文件中，然后在所需要的HTML文件a.html中，通过<script>标记包含该js文件。如：

        <script src="ch1-1.js"></script>

被包含的ch1-1.js文件代码如下。

        document.write(’这是外部文件中JavaScript代码！');

注意

在外部的JavaScript程序文件“ch1-1.js”中不必使用<script>标记。

（3）虽然大多数浏览器都支持JavaScript，但也有少部分浏览器不支持JavaScript，还有些支持JavaScript的浏览器为了安全问题关闭了对<JavaScript>的支持。如果遇到不支持JavaScript脚本的浏览器，网页会达不到预期效果或出现错误。解决这个问题可以使用以下两种方法。

HTML注释符号。HTML注释符号是以“”结束的。JavaScript能识别HTML注释的开始部分“”，如同使用“//”进行单行注释一样。因此，如果在此注释符号内编写JavaScript脚本，对于不支持JavaScript的浏览器，将会把编写的JavaScript脚本作为注释处理。

（4）JavaScript脚本语言区分字母大小写。

（5）在创建好JavaScript程序后，选择“文件”/“保存”命令，在弹出的“另存为”对话框中，输入文件名，将其保存为．html格式或．htm格式，如图2.19所示。

图2.19 “另存为”对话框

（6）保存完．html格式后，文件图标将会变成一个IE浏览器的图标。

2.3.2 运行JavaScript程序

运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。Netscape公司Navigator 3.0以上版本的浏览器都能支持JavaScript程序，微软公司Internet Explorer 3.0以上版本的浏览器基本上支持JavaScript。

双击2.3.1小节例2.4保存的“TM\sl\2\4\index.html”文件，在浏览器中输出运行结果，如图2.20所示。

图2.20 编写第一个JavaScript程序

说明

在IE浏览器中，选择“查看”/“源文件”命令，可以查看到程序生成的HTML源代码。在客户端查看到的源代码是经过浏览器解释的HTML代码，如果将JavaScript脚本存储在单独的文件中，那么在查看源文件时不会显示JavaScript程序源代码。

2.3.3 调试JavaScript程序

程序出错类型分为语法错误和逻辑错误两种。

1．语法错误

在程序开发中使用不符合某种语言规则的语句而产生的错误称为语法错误。例如，错误地使用了JavaScript的关键字，错误地定义了变量名称等。这时，当浏览器运行JavaScript程序时就会报错。

例如，将2.3.1节例2.4的程序中第11行中的语句改写成下述语句，即将第一个字符由小写字母改成大写字母。

        Alert("我喜爱JavaScript语言！");

保存该文件后再次在浏览器中运行，程序就会出错。

运行本程序，将会弹出如图2.21所示的错误信息。

图2.21 在IE浏览器中调试JavaScript

2．逻辑错误

有些时候，程序中不存在语法错误，也没有执行非法操作的语句，可是程序运行的结果却是不正确的，这种错误叫做逻辑错误。逻辑错误对于编译器来说并不算错误，但是由于代码中存在的逻辑问题，导致运行结果没有得到期望的结果。逻辑错误在语法上是不存在错误的，但是从程序的功能上看是Bug。它是最难调试和发现的Bug。因为它们不会抛出任何错误信息。唯一能看到的就是程序的功能（或部分功能）没有实现。

例如，某商城实现商品优惠活动，如果用户是商城的会员，那么商品打八五折，代码如下。

        <script language="javascript">
        user="会员";
        if(user=="会员"){
            price=485＊8.5;                        //485是商品价格，8.5是打的八五折
            alert("商品的会员价格是："+price);     //输出商品的会员价
        }
        </script>

运行程序时，程序没有弹出错误信息。但是当用户为商城的会员时，商品价格乘以8.5，相当于，商品不但没有打折扣，反而是原价的8.5倍，这一点就没有符合要求，属于逻辑错误，应乘以0.85才正确。

在实现动态的Web编程时，通常情况下，数据表中均是以8.5进行存储，这时在程序中就应该再除以10，这样，就相当于原来的商品价格乘以0.85。正确的代码为：

        price=485＊8.5/10;                         //485是商品价格，"8.5/10"是打的八五折

对于逻辑错误而言，发现错误是容易的，但要查找出逻辑错误的原因却很困难。因此，在编写程序的过程中，一定要注意使用语句或者函数的书写完整性，否则将导致程序出错。