下载掌阅APP，畅读海量书库
立即打开
下面展示一个简单的JavaScript程序，通过该程序，读者可对编写和运行JavaScript程序的整个过程有一个初步的认识。
【例1-3】 下面使用VS Code编辑器编写第一个JavaScript程序。
（1）启动VS Code编辑器，在之前创建的sourceCode文件夹中新建一个文件夹1-3，如图1-11所示。
图1-11 新建文件夹
（2）在1-3文件夹中新建一个index.html文件，并且输入代码如下（实例位置：源码\第1单元\1-2）。
JavaScript的程序代码必须置于<script language="javascript">和</script>之间。
JavaScript脚本在HTML文件中的位置有以下3种。
①在HTML文件的<body>标记中的任何位置：如果所编写的JavaScript程序用于输出网页的内容，那么应该将JavaScript程序置于HTML文件的<boby>标记中需要显示该内容的位置。
②在HTML文件的<head>标记中：如果所编写的JavaScript程序需要在某一个HTML文件中多次使用，那么就应该编写JavaScript函数（Function），并将函数置于该HTML文件的<head>标记中。
使用时直接调用该函数就可以了。
上述代码的含义为单击“提交”按钮，调用check()函数。
③在单独的.js文件中：如果所编写的JavaScript程序需要在多个HTML文件中使用，或者所编写的JavaScript程序内容很多，这时就应该将这段JavaScript程序置于单独的.js文件中，然后在所需要的HTML文件a.html中，使用<script>标记包含该.js文件。例如：
被包含的ch1-1.js文件代码如下：
在外部的JavaScript程序文件ch1-1.js中不必使用<script>标记。
（3）虽然大多数浏览器都支持JavaScript，但也有少部分浏览器不支持JavaScript，还有一些支持JavaScript的浏览器由于安全问题关闭了对JavaScript的支持。如果遇到不支持JavaScript的浏览器，网页会达不到预期效果或出现错误。解决这个问题可以使用以下两种方法。
①HTML注释符号。HTML注释符号是以<！--开始、以-->结束的。但是JavaScript不能识别HTML注释符号的结束部分-->。如果在此HTML注释符号内编写JavaScript脚本，那么不支持JavaScript的浏览器将会把编写的JavaScript脚本作为注释处理。
②<noscript>标记。如果当前浏览器支持JavaScript，那么该浏览器将会忽略<noscript>和</noscript>标记之间的任何内容。如果当前浏览器不支持JavaScript，那么该浏览器将会把这两个标记之间的内容显示出来。此标记可以提醒浏览者当前使用的浏览器是否支持JavaScript。
（4）JavaScript脚本语言区分字母大小写。
运行用JavaScript编写的程序需要使用支持JavaScript语言的浏览器。现在的浏览器基本上都支持JavaScript。双击1-3/index.html文件，在浏览器中输出运行结果，如图1-12所示。
图1-12 运行第一个JavaScript程序
在部分浏览器中，选择“查看网页源代码”命令，可以查看程序生成的HTML源码。在客户端中查看到的源码是经过浏览器解释的HTML代码，如果将JavaScript脚本存储在单独的文件中，那么在查看源码时不会显示JavaScript程序源码。
JavaScript程序的出错类型分为语法错误和逻辑错误两种。
1.语法错误
语法错误是在程序开发中使用不符合某种语言规则的语句而产生的错误。例如，错误地使用了JavaScript的关键字、错误地定义了变量名称等，这样当浏览器运行JavaScript程序时就会报错。
例如，将例1-3程序中的alert语句改写成下述语句，即将第1个字符由小写字母改写成大写字母。
保存该文件后，再次在浏览器中运行，程序就会报错。
运行本程序，浏览器将不会正常弹出提示信息，在浏览器调试窗口中可以看到报错信息，如图1-13所示。
图1-13 在浏览器中调试JavaScript程序
2.逻辑错误
有些时候，程序中不存在语法错误，也没有执行非法操作的语句，可是程序的运行结果却是不正确的，造成这种结果的错误叫作逻辑错误。逻辑错误对于编译器来说并不算错误，但是由于代码中存在逻辑错误，会导致运行结果并非期望得到的结果。逻辑错误从语法上看是不存在错误的，但是从程序的功能上看是Bug（错误、漏洞）。这是最难调试和发现的Bug之一，因为它们不会导致弹出任何错误信息，唯一能看到的就是程序的功能（或部分功能）没有实现。
例如，某商城举行商品优惠活动，如果用户是商城的会员，那么商品打八五折，代码如下所示。
运行程序时，浏览器没有弹出错误信息。但是当用户是商城的会员时，商品价格乘8.5，相当于商品不但没有打折，其价格反而比原价贵了8.5倍，这一点就不符合要求，属于逻辑错误，应该乘0.85才正确。
在实现动态的Web编程时，通常情况下，数据表中均是以8.5进行存储的，这时在程序中就应该在商品价格乘8.5后再除以10，这样就相当于商品价格乘0.85。正确的代码为：
对于逻辑错误而言，发现错误是容易的，但要查找出逻辑错误的原因却很困难。因此，读者在编写程序的过程中，一定要注意语句或者函数的完整性，否则将导致程序出错。
通常情况下，如果JavaScript程序出现错误，是不会有相关提示信息的。那么该错误到底是语法错误还是逻辑错误以及出错的具体位置无法得知，这样我们就迫切地需要掌握JavaScript的调试方式。本小节我们一起学习3种常见的JavaScript调试方式。
（1）使用alert()弹出警告框，实例代码如下所示（实例位置：源码\第1单元\1-3）。
运行以上代码，浏览器显示结果如图1-14所示。
图1-14 alert()弹出警告框
（2）使用document.write()将内容写入HTML文档，实例代码如下所示（实例位置：源码\第1单元\1-4）。
运行以上代码，浏览器显示结果如图1-15所示。
图1-15 document.write()显示结果
（3）使用console.log()将内容写入浏览器控制台，实例代码如下所示（实例位置：源码\第1单元\1-5）。
运行以上代码，浏览器显示结果如图1-16所示。
图1-16 console.log()显示结果
比较这3种调试方式可知，console.log()是一种更好的方式，在实际应用中更受开发人员的青睐。对这3种调试方式的对比分析如下。
（1）如果在文档已完成加载后执行document.write()，整个HTML页面将被覆盖，对程序的执行造成不便。
（2）alert()方法会阻断JavaScript程序的执行，从而带来副作用，而且使用alert()方法需要用户单击弹窗的“确定”按钮，操作麻烦，最重要的是alert()只能输出字符串。
（3）console.log()仅在控制台输出相关信息，不会对JavaScript程序执行造成阻碍。此外，console.log()可以接收任何字符串、数字和JavaScript对象，使用它可以看到清楚的对象属性结构，在AJAX（Asynchronous JavaScript And XML，异步JavaScript和XML技术）中返回JSON数组对象时调试很方便。
在程序中，调试是测试、查找及减少Bug的过程。console.log()在IE 8及以下版本中会报错，调试后注意注释掉它。