目前,我们一旦谈论到网页编程,就离不开 HTML、CSS 与 JavaScript 这 3 种技术。 由 HTML 负责描述页面数据和信息,CSS 负责控制外观,JavaScript 则用于响应用户的操 作,为网页添加动态的功能,我们也常称之为动态网页编程,即 DHTML。
JavaScript 的引入
JavaScript 可以通过<script>标记嵌入在 HTML 页面中,也可以保存为扩展名为.js 的文件后通过<script>标记引入到网页中,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//JavaScript 代码 </script>
<!--src 属性为 JS 文件的位置 -->
<script type="text/javascript" src="js文件"></script>
</head>
<body>
</body>
</html>
JavaScript 中的变量
1.变量的定义
虽然 JavaScript 支持变量未经定义直接使用,但推荐进行变量定义,否则变量的生命 周期难以确定。
在定义变量时,因为 JavaScript 为弱类型语言,所以不需要指定变量类型,只需要指 定变量名称即可,也可以为变量赋初始值。定义变量时可以使用 var 关键字。
注意:因为JavaScript代码总是在同一网页内有效,并不能跨网页运行,所 以也不需要定义类似于Java语言中的访问修饰符(public、private等)。
JavaScript 变量的命名规则与 Java 相似,只能包含数字、字母、下画线和$符号,大小 写敏感,不可以使用 JavaScript 的关键字和保留字。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var a; //定义变量
var b = 3; //定义变量并赋初始值
var c = 'String', d = "String";//定义多个变量
</script>
</head>
<body>
</body>
</html>
2.变量的类型
虽然不能在定义变量时指定变量类型,但是 JavaScript 会根据变量的值自动决定类型, JavaScript 中常见的内置变量类型如下。
- 数字型:可以存储小数或整数。
* 布尔型:可以存储 true 或 false。
* 字符串:属于引用类型,可以存储字符串。
* 数组:属于引用类型,存储多项数据。
如果要将字符串转换为数字类型,可以使用 parseInt 或 parseFloat 方法,如果无法转换
为数字,则 JavaScript 会返回特殊值“NaN(Not a Number)”,如下所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var a = 3;
var b = "3";
var c = a + b; //结果是33
var d = a + parseInt(b); //结果是6
var e = a + (b - 0); //结果是6
var f = parseInt('a'); //结果是NaN
</script>
</head>
<body>
</body>
</html>
3.注释与特殊符号
JavaScript 语言中的注释与 Java 语言中的注释规则相同,支持单行注释(//)与多行注 释(/.../),注意不能在 JavaScript 内部使用 HTML 语言中的“”注释。在 JavaScript 中字符串可以使用双引号或单引号引起来,在不引起冲突的情况下可以混用,也可以使用 反斜杠进行转义,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//a的值为It's mine.
var a = "It's mine.";
//b的值为he say : "good".
var b = 'he say : "good".';
//c的值he say : "It's good".
var c = 'he say : "It\'s good".';
</script>
</head>
<body>
</body>
</html>
4.运算符
运算符与表达式基本与 Java 相同,常用的运算符如表 7-1 所示(优先级自上而下)。
JavaScript 中的流程控制语句
JavaScript 语言中的流程控制语句与 Java 语言中几乎完全一致,分支流程可以使用 if-else 结构或 switch 结构,循环流程可以使用 for 或 while 循环,具体语法如下。
1.if 语句的语法结构
if 语句的语法结构如下:
if (条件表达式A) {
//条件表达式 A 为 true,所执行的代码块
} else if(条件表达式)B {
//条件表达式 B 为 true,所执行的代码块
} else {
// 条件表达式 A 和条件表达式 B 都为 false,所执行的代码块
}
2.switch 语句的语法结构
switch 语句的语法结构如下:
switch (表达式) {
case值1 :
//表达式与值 1 匹配时,所执行的代码块
break;
case值2 :
//表达式与值 2 匹配时,所执行的代码块
break;
default :
//所有 case 值都与表达式不匹配时,所执行的代码块
}
3.for 语句的语法结构
for 语句的语法结构如下:
for (初始化语句; 循环判断条件; 循环执行语句) {
//循环体
}
4.while 语句的语法结构
while 语句的语法结构如下:
while (循环判断条件) {
//循环体
}
5.do...while 语句的语法结构
do...while 语句的语法结构如下:
do {
//循环体
} while (循环判断条件);
6.综合演示
下例综合使用各种流程结构通过 JavaScript 动态在页面中生成一个隔行换色的 HTML表格,其中用到了 document.write()方法,该方法用于向 HTML 页面中输出内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//rows 为表格的行数,cols 为表格的列数
var rows = 6;
var cols = 8;
document.write('<table width="100%" border="1">'); document.write('<caption>动态生成表格</caption>'); document.write('<tbody>');
for (var row = 0; row < rows; row++) {
if (row % 2 == 0) {
document.write('<tr bgcolor="#cccccc">');
} else {
document.write('<tr>');
}
for (var col = 0; col < cols; col++) {
document.write('<td>' + col + '</td>');
}
document.write('</tr>');
}
document.write('</tbody>');
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
请注意,本例 document.write()方法是动态地生成 HTML 代码并输出到页面中,并没有 改变 HTML 源文件,只改变了浏览器内存中的 DOM(DOM 即文档对象模型,详细内容请 参看第 10 章)结构。故如果通过浏览器的“查看源代码”功能查看该页面代码并不会看到 输出的表格代码,但如果通过浏览器的 DOM 查看器则可以看到生成的结果.
JavaScript 中的方法
1.JavaScript 中的常用方法
JavaScript 中提供了很多常用的方法,如上例中用到的 document.write 方法,现介绍 3个用于与用户交互的方法.
请注意这 3 个方法显示的对话框都是模态对话框,即会停止当前脚本的运行直到用户 关闭对话框为止,下面的例子综合使用了这 3 个方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
alert("现在演示 alert、confirm 与 prompt 方法");
var name = prompt("请输入您的姓名", "匿名");
var flag = confirm("请确认您的姓名:" + name);
if (flag) {
alert('确认无误!');
} else {
alert('确认失败');
}
</script>
</head>
<body>
</body>
</html>
2.自定义方法
JavaScript 语言中的自定义方法与 Java 语言有较大的不同。
第一 ,JavaScript 中没有方法 修饰符,所有方法都是本页面内可以访问;
第二 ,由于 JavaScript 是弱类型语言,所以不需 要声明方法的返回值类型;
第三 ,JavaScript 中的方法不支持重载,但是支持类似于 Java 中 变长参数的特性。
定义一个方法的语法如下:
function 方法名 ( 参数1, 参数2, ... ) {
//函数体
return 返回值;
}
下例演示了通过定义方法计算两个数的和:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function add(a, b) {
//如果不通过 parseInt 方法转换为数字,会进行字符串的连接
var c = parseInt(a) + parseInt(b);
return c;
}
var a = prompt("请输入第一个数", 0);
var b = prompt("请输入第二个数", 0);
//请注意变量的作用范围
var c = add(a, b);
alert("计算结果是:" + c);
</script>
</head>
<body>
</body>
</html>
如果想计算不确定数目的若干个数字的和,就可以使用 JavaScript 中的一个特殊数组, 名为 arguments,这个数组用来保存调用方法时传递的所有参数,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function add() {
//获取 arguments 数组的长度
var length = arguments.length;
var c = 0;
for (var i = 0; i < length; i++) {
c += parseInt(arguments[i]);
}
return c;
}
document.write("<p>无参数 = " + add());
document.write("<p>1 = " + add(1));
document.write("<p>1,3 = " + add(1,3));
document.write("<p>1,3,5 = " + add(1,3,5));
document.write("<p>1,3,5,7,9 = " + add(1,3,5,7,9));
</script>
</head>
<body>
</body>
</html>
JavaScript 中函数的参数还有更灵活的运用方式,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function output(times, char, end) {
var s = '';
for (var i = 0; i < times; i++) {
if (char) {
s+=char;
} else {
s+='*';
}
}
document.write(s);
if (end) {
document.write(end);
} else {
document.write("<br/>");
}
}
output(20);
output(20, "O");
output(20);
output(20, "H", "<hr/>");
output(20, '', "<hr/>");
</script>
</head>
<body>
</body>
</html>
注意:因为JavaScript中方法的参数长度是可变的,所以JavaScript并不支持 类似于Java语言的方法重载特性。
