第2章 第一个例子—向用户说“你好”
本书中所有的知识点都将以实例为依据进行介绍。读者在阅读时，可以先按照前言中介绍的方法执行实例，有了一个直观的感受后再学习各个知识点，这样会有比较深的印象。多动脑、多动手，是学习JavaScript的最佳方式。
本章知识点：
❑ 如何将JavaScript应用到HTML页面中
❑ JavaScript代码书写规则
❑ 基础知识—变量和常量
❑ 内置对象Date的方法应用
❑ 在Web页面的3种输出方式
2.1 第一个例子
不论程序的运算机制和目的如何，最后都离不开和用户的交互。这种交互包括两个方面：输入和输出。本节讲述的就是JavaScript一些常见的输出方法。
2.1.1 最简单的程序—“用户你好”
【实例2.1】代码2-1.htm是本书的第一个例子：向用户说“你好”。读者可以用记事本录入下面的代码，保存为2-1.htm文件，然后双击该文件查看运行效果。
代码2-1.htm 向用户说“你好”
01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=GB2312" /> 04 <title>2-1 向用户说"你好"</title> 05 <!-- 脚本部分 --> 06 <script type="text/javascript"> 07 what_to_say = "你好"; 08 alert(what_to_say); 09 </script> 10 </head> 11 <body style="overflow:auto;"> 12 </body> 13 </html>
【代码说明】代码中所有的标点符号都是半角的英文符号。
【运行效果】页面在IE6.0中运行的效果如图2.1所示。
图2.1 向用户说“你好”
2.1.2 在HTML中插入JavaScript块
JavaScript脚本作为客户端的一种脚本语言，必须依赖于HTML文件存在。也就是说，用户最终访问的是HTML文件而不是直接的脚本。在HTML文件中嵌入JavaScript脚本的方式有以下两种：
❑ 如同本章示例代码2-1.htm中所用的方式，直接在HTML文件中使用script标记插入脚本块。脚本内容放置在script标记块内部。语法如下：
<script type="text/javascript"> // 代码内容 </script>
❑ 将脚本内容单独保存为一个文件，假设名称是“1.js”，然后设置script标记的src属性指向该文件。语法如下：
<script type="text/javascript" src="1.js"></script>
脚本块script标记的type属性表明了脚本所使用的语言。在很多书和网上的示例中，使用language属性来表明脚本所用语言，形如：
<script language="javascript">
这种用法是在HTML尚未规范时约定的用法，并不符合网页的规范标准。随着网页标准化和xHTML标准的推行，这种用法虽然目前还能被大多数浏览器识别，但并不推荐使用。
在有些脚本代码中常见到如下的代码：
<script type="text/javascript"> <!-- // 代码内容 //--> </script>
代码中的“<!--”和“//-->”是为了在浏览器不支持脚本时，能够让浏览器将脚本识别为HTML注释，以免显示不必要的内容。不过在现在的主流浏览器中，不能识别脚本的情况已经基本不存在。需要注意的是，在使用方法二从外部连接一个脚本文件时，脚本文件的内容不可这样使用HTML注释，否则会报错。
使用方法一，在HTML页面内嵌入JavaScript脚本的时候，代码中不可出现“</script>”字样。如下面的代码就是错误的：
<script>
alert("</script>");
</script>
这是因为浏览器在载入HTML并试图解释的时候，会认为第一个出现“</script>”的地方就是脚本的结束，这就造成了语法的错误。解决的方法也很简单，将“</script>”字符串拆开即可。
<script>
alert("</s" + "cript>");
</script>
2.1.3 JavaScript代码书写规则
从原则上来说，只要程序员编写的代码没有语法错误，就能够被浏览器识别并执行。但是实际上，有些约定俗成的代码书写规则是每一个程序员都必须要遵守的。尤其是初学者，必须时刻注意自己代码的可读性。这不仅仅是为了方便他人阅读代码，同时也是为了编写者自身考虑。试想当一段数百行的代码，时隔3个月后，就算代码作者本人想要修改，也不得不阅读一遍来熟悉代码的结构，这时良好的代码书写习惯就至关重要了。
一般的代码书写规则如下：
❑ 合理的注释。代码中的注释可以提纲挈领地告诉阅读者，下面这段代码有什么作用。JavaScript中注释分为两种：行注释和块注释。行注释以“//”开始，至此行结束为注释内容。块注释自“/*”开始，至“*/”结束为注释内容。注释内容不会被解释执行，只是为了便于代码的阅读和理解。注释的示例如下：
// 这里的文本是行注释 /* 这里的文本是块注释 块注释可以换行 块注释结束 */
❑ 规范的变量命名。这一点将在2.2节中详细讲述。
❑ 规范的缩进。程序中包含了很多逻辑关系，例如函数、循环、逻辑判断等。不同的代码功能构成不同的代码块。代码的书写要能够表现出这种逻辑，通常采用缩进的方式。常见的两种缩进方式如下：
/* 缩进方式1 */
function a(){ //函数a模块开始
函数语句1; //这里的代码都是属于函数a的
函数语句2; //因此应该具有统一的缩进
if(1>2){ //这里是逻辑判断的模块
函数语句3; //这里的内容都是属于逻辑判断中的
函数语句4;
} //逻辑判断的模块结束
函数语句5; //相同层次的代码具有相同的缩进量
} //函数a模块结束
/* 缩进方式2 － 和方式1区别只是在于格式不同 */
function a()
{
函数语句1;
if(1>2)
{
函数语句2;
}
函数语句5;
}
2.2 JavaScript基础知识—变量和常量
JavaScript作为一种计算机语言，具有计算机语言的7个要素：输入、输出、操作、数据、分支、循环和子程序。数据是一切程序的基础构成。JavaScript中，数据有变量和常量两种形式。
JavaScript常量又称字面常量，是固化在程序代码中的信息。变量的主要作用是存取数据，为使用者提供一个存取信息的容器。对于变量，必须理解变量的命名、类型、声明和作用域。
2.2.1 变量命名规则
变量就是一个用来储存数据的容器，通常由英文字母和数字组成。在JavaScript中，声明变量有以下两种方式：
❑ 显式声明。使用关键字“var”声明。语法如下：
var 变量名; var 变量名1, 变量名2, 变量名3; var 变量名1=22, 变量名2="this is a string.";
可以用英文半角逗号“,”做分隔，一次性声明若干变量。也可以在声明的同时给变量赋值。
❑ 隐式声明。通过赋值操作符“=”声明（操作符的概念及介绍见下一章）。语法如下：
变量名=22; 变量名="this is a string";
注意
在声明变量前使用变量会产生意外的错误。初学者应该养成在程序或函数前方声明所有变量的好习惯，虽然这并不是语法的强制要求。
本章示例2-1.htm中，“what_to_say”就是一个变量，用于储存需要显示给用户的信息。变量的命名需要符合以下规则：
❑ 必须以半角英文字母a～z（大小写均可）、下划线“_”或美元符号“$”开头。
❑ 变量名只能由半角英文字母a～z（大小写均可）、下划线“_”、美元符号“$”或者数字0～9组成。不能有其他符号。
❑ 变量名不可以是JavaScript的关键字。JavaScript中定义了40多个词作为关键字，供程序自身使用，这些词不可以作为变量名来使用。如if、var、false、for、class和delete等不能作为变量名。
因此，以下的几个变量名都是错误的：
2ba = "你好"; //变量名不可以以数字开头 ｃba = "你好"; //变量名中的ｃ是全角字符 ni hao = "你好"; //变量名中不可以有空格 var = "你好"; //变量名不可以为关键字
注意
JavaScript是一种区分大小写的语言。也就是说，在JavaScript中，“abc”和“Abc”被认为是两个不同的变量。
以上只是作为程序语法的硬性要求。为了提高代码的可读性，程序员在命名变量时还应该遵循以下约定俗成的规则：
❑ 变量名应尽可能地体现出其代表的含义。例如像“a”、“t1923”、“wdss”都不是一个好的变量名，而“user_name”、“comment_text”能够让代码阅读者直观地知道该变量的内容。
❑ 虽然JavaScript区分大小写，但也要尽量避免大小写混淆。例如不要同时使用“username”和“UserName”作为变量名。
❑ JavaScript变量的大小写通常有两种习惯的书写方式：一种是每个单词都小写，单词和单词间用下划线连接，如同本章2-1.htm例子中的“what_to_say”变量；另一种是第一个单词的字母全部小写，后继单词的首字母大写，单词和单词直接连接在一起，例如“userName”、“whatToSay”等。除缩略语（如“HTML”、“URL”等）外，应尽量避免使用所有字母大写的变量。例如“HELLO”、“USER_NAME”就不是一个好的命名习惯。因为在很多程序语言中，所有字母大写被用来定义静态变量，虽然JavaScript中不存在静态变量，但也应尽量避免。
❑ 依据变量所保存数据的类型不同，有时也会在变量名上加上代表数据类型的前缀。比如“strUserName”是一个字符串类型的、用来保存用户名称的变量，“intAge”是一个整数类型的、用来保存年龄的变量。
这些规则并不是强制性的，但是遵从这些规则可以让代码更加清晰易读。如果只是写一些给自己看的代码，读者完全可以自己定义一套规则。但是为了更好地和别人交流，推荐使用以上的命名规则。
2.2.2 数据类型
JavaScript中有四种基本数据类型：整型、字符串、布尔型和空值。由于JavaScript是一种弱类型语言，因此变量或常量不必先声明其类型，而是在使用或赋值时确定其数据的类型。本章示例代码2-1.htm中，“你好”就是一个字符型数据。
❑ 整型。整型常量就是数字，可以使用十进制、八进制和十六进制，如：
intN = 1; //十进制 intN = 03; //八进制：以0开头的阿拉伯数字 intN = 0x22; //十六进制：以0x开头的阿拉伯数字
❑ 字符串。字符串就是以英文双引号“"”或单引号“'”括起来的一个或几个字符，如：
strS = "你好"; //用双引号括起来的字符串 strS = '你好'; //用单引号括起来的字符串
❑ 布尔型。布尔型常量就是逻辑上的“真”和“假”。
blnB = true; //真 blnB = false; //假
❑ 空值。JavaScript中，用“null”表示什么都没有。
2.3 告诉用户当前时间
【实例2.2】只能和用户说声“你好”的程序太过简单了，代码2-2.htm可以告诉用户当前的时间。
代码2-2.htm 告诉用户当前时间
01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=GB2312" /> 04 <title>2-2 告诉用户当前时间</title> 05 <!-- 脚本部分 --> 06 <script type="text/javascript"> 07 date_object = new Date(); 08 what_to_say = date_object.toLocaleString(); 09 alert(what_to_say); 10 </script> 11 </head> 12 <body style="overflow:auto;"> 13 </body> 14 </html>
【代码说明】第6~10行是一段JavaScript代码，其中第9行是弹出提示时间的对话框。
【运行效果】程序的运行效果如图2.2所示。
图2.2 告诉用户当前时间
2.3.1 什么是内置对象
在前言中提到过，JavaScript是一种基于对象的语言。那么什么是“对象”？简单地说，“对象”就是口语中所说的“东西”，在JavaScript中，所有的元素都是对象。每一个变量是对象，每一个常量也是对象。甚至“你好”这样的字符串也是对象。
“对象”这个概念既然来自生活中的“东西”，那么就和生活中的事物有着类似的概念。如果把汽车看作一个对象，那么汽车有长、宽、高这些固有的性质，在程序中，被称为对象的“属性”。汽车有行驶的能力，在程序中，被称为对象的“方法”。汽车通过鸣响警报来通知车主有人偷车，在程序中，对象会激发一个“被偷走了”的“事件”。
JavaScript有很多的预先定义好的对象，可以直接在脚本中使用，这种对象被称为内置对象。代码2-2.htm中的Date就是一个内置对象。获得Date对象的语法是：
dateObj = new Date(); //不提供参数，可以获取当前时间
dateObj = new Date(dateVal); //将dateVal变量解析为时间日期
dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]);
//根据给定的时间日期构造Date对象
new是创建新对象的操作符，在第3章中会有更详细的介绍。通过该运算符创建一个新的Date对象，并保存在变量dateObj里。
2.3.2 内置对象Date的方法
内置对象Date没有专有属性。表2.1是Date对象的方法列表。
表2.1 Date对象的方法
获得Date对象后，使用点“.”操作符引用其所有的属性或方法。例如，获取当前年份的做法是：
dateObj = new Date(); //不提供参数，可以获取当前时间 theYear = dateObj.getYear(); //引用getYear方法获取当前年份
2.3.3 获取时间和日期
【实例2.3】通过2.3.2小节列出的内置Date对象的方法，可以轻松得到当前的日期和时间。代码2-3.htm演示了如何获取时间和日期。
代码2-3.htm 获取时间和日期
01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=GB2312" /> 04 <title>2-3 获取当前时间日期</title> 05 <!-- 脚本部分 --> 06 <script type="text/javascript"> 07 dt = new Date(); 08 what_to_say = "今天是"+dt.getYear()+"年"+(dt.getMonth()+1)+"月"+dt.getDate()+"，现在 09 时间是"+dt.getHours()+"点"+dt.getMinutes()+"分"+dt.getSeconds()+"秒"; 10 alert(what_to_say); 11 </script> 12 </head> 13 <body style="overflow:auto;"> 14 </body> 15 </html>
【代码说明】第7行定义了一个时间对象，然后第8~9行获取时间的每个独立信息。
【运行效果】程序运行效果如图2.3所示。
图2.3 获取时间和日期
注意
Date对象的getMonth方法返回的日期值是从0～11的，在显示或计算的时候应当加上1。
如前所述，双引号括起来的部分就是字符串，代码中使用“+”号将各字符串连接起来。关于字符串对象在下一章中会详细讲述。
2.4 在Web页上输出
在Web页上通过JavaScript将数据输出显示给浏览者有很多种方式。最常见的在前面已有所涉及，即弹出一个警告框，在警告框中显示一些信息。但是这种方式常常会引起浏览者的反感，因此有时还需要其他输出方式。
2.4.1 弹出警告框—alert
前文的代码中使用过的alert函数是JavaScript最常见的一种输出方式。其效果是在网页窗口中弹出一个警告框。alert函数只有一个参数，就是要输出的字符串。语法如下：
alert("警告"); //直接使用字符串
alert(0.2233); //可以使用数字做参数
alert(something); //使用变量做参数
2.4.2 弹出确认“是/否”的对话框—confirm
【实例2.4】有时仅仅显示信息还不足以满足应用的需求，页面还需要浏览者确认“是”或者“否”。confirm函数可以弹出一个包含“是/否”两个按钮的对话框。代码2-4.htm演示如何使用confirm函数。
代码2-4.htm 弹出确认“是/否”的对话框
01 <html>
02 <head>
03 <meta http-equiv="content-type" content="text/html; charset=GB2312" />
04 <title>2-4 弹出确认"是/否"的对话框</title>
05 <!-- 脚本部分 -->
06 <script type="text/javascript">
07 result = confirm("我是提示信息");
08 alert("你点击的结果是"+result);
09 </script>
10 </head>
11 <body style="overflow:auto;">
12 </body>
13 </html>
【代码说明】confirm函数会将用户选择的结果返回，返回值是一个布尔型变量。单击“确定”按钮返回“true”，单击“取消”按钮返回“false”。
【运行效果】代码运行效果如图2.4和图2.5所示。
图2.4 弹出confirm对话框
图2.5 接受用户选择
2.4.3 输出到页面内容—document.write
【实例2.5】弹出警告框的方式在用户体验上并不是很好，特别是在有很多信息需要用JavaScript输出的时候。代码2-5.htm演示了另外一种常见的输出方式，使用document.write来将内容输出到页面。
代码2-5.htm 使用document.write将内容输出到页面
01 <html>
02 <head>
03 <meta http-equiv="content-type" content="text/html; charset=GB2312" />
04 <title>2-5 使用document.write将内容输出到页面</title>
05 <!-- 脚本部分 -->
06 <script type="text/javascript">
07 document.write("你好");
08 document.write("<br><b>可以输出HTML</b>");
09 </script>
10 </head>
11 <body style="overflow:auto;">
12 <input type="button" value="点我"
13 onclick="document.write('在页面加载完成后再次使用document.write会清空原来的
14 所有内容');" />
15 </body>
16 </html>
【代码说明】document.write函数接受字符串参数，将字符串输出到当前的Web文档中。所以可以动态地生成HTML格式的内容。单击“点我”按钮后会执行按钮onclick属性中的JavaScript代码。其运行效果说明，在页面加载完成后，再次使用document.write会清空原来的所有内容。
【运行效果】程序运行效果如图2.6和图2.7所示。
图2.6 使用document.write输出到页面
图2.7 单击“点我”按钮后的运行效果
2.5 改进版的“你好”程序
【实例2.6】综合上面各小节的知识点，代码2-6.htm是一个比较完善的“你好”程序。
代码2-6.htm 改进版的“你好”程序
01 <html>
02 <head>
03 <meta http-equiv="content-type" content="text/html; charset=GB2312" />
04 <title>2-6 改进版的"你好"程序</title>
05 </head>
06 <body style="overflow:auto; padding:0px; margin:0px;">
07 <div style="font-size:14px; font-weight:bold; color:white; font-family:Arial, 宋体;
08 background-color:#6090DA; padding:4px 10px;">
09 你好
10 <script>
11 if(confirm("需要显示时间吗？")){
12 dt = new Date();
13 document.write("，当前时间是 ");
14 document.write(dt.toLocaleTimeString());
15 }
16 </script>
17 </div>
18 </body>
19 </html>
【代码说明】程序中，JavaScript代码的第11行（黑体）的if语句是根据confirm返回的结果判断是否输出时间的流程控制语句。关于流程控制语句的详细介绍见第5章。
【运行效果】程序运行效果如图2.8、图2.9和图2.10所示。
图2.8 改进版的“你好”程序
图2.9 读取当前时间输出到页面
图2.10 取消时间则简单显示“你好”
2.6 小结
本章作为初学者的JavaScript入门章节，用一些具体的例子演示了JavaScript能够实现的最初步应用。本章中的所有代码都可以直接保存为htm文件，在IE浏览器中查看效果。随着教程的逐步深入，读者可以在实例中学习到JavaScript的语法等基础知识。
2.7 常见面试题分析
1. JavaScript使用什么符号注释代码语句
行注释以“//”开始，至此行结束为注释内容。块注释自“/*”开始，至“*/”结束为注释内容。
2. JavaScript在HTML网页中的什么位置
JavaScript嵌入HTML的多种方式：
❑ 在HTML网页头中嵌入。
❑ 在HTML网页体中嵌入。
❑ 在HTML网页的元素事件中嵌入。
❑ 在HTML中调用已经存在的JavaScript文件。
2.8 本章习题
1.每一个页面都有一个唯一的地址，它被称作什么？
2.所有的HTML标签都是成对的吗？举例说明。
3. HTML文档的扩展名有什么要求？
4.操作题
目的：用记事本制作一个HTML页面。
要求：
❑ 利用所学习到的HTML知识，把能够想到的标签都使用上。
❑ 制作出一个丰富内容的页面，并用至少两种不同的浏览器查看运行效果。