目录
2.1 将脚本放在哪里
<!DOCTYPE html>
<html>
<head>
<title>My first script</title>
</head>
<body>
<h1>
<script>
document.write("Hello, world!");
</script>
</h1>
</body>
</html>
这是 script 开始标签，告诉浏览器后面的代码
是 JavaScript 而不是 HTML。
2. document.write(“Hello, world!”);
这是 JavaScript 的第一行：它获得文档窗口并在
其中写入"Hello, world!"，如图 2-1 所示。请注意这
一行末尾的分号（ ;），这告诉浏览器的 JavaScript 解
释器这一行结束了。除了极少的例外情况，本书中每
行 JavaScript 代码的末尾都使用分号。
3.
这结束 JavaScript，并告诉浏览器后面的代码是 HTML。
- 提示
- script 标签的 language 属性和 type 属性（这里没有使用）已经废弃了，这意味着 W3C（负责
的标准组织）已经将这个属性标记为在标准的未来版本中不必支持的属性，但还有不少旧脚本
仍在使用它。 - 如果每一行上只有一个语句，那么在 JavaScript 行的末尾使用分号是可选的。为了使代码清晰，
我们在本书中坚持使用分号（ ;）。由于同样的原因，我们建议你养成在代码中包含分号的习惯。 - 对于本书中的大多数地方，我们在代码解释中省略了"script "标签。可以看到，在脚本代码中仍然有这个标签，而且仍然需要它，但是我们不会反复解释它。
- 一个页面上可以有任意数量的script标签（因此有多个脚本）。
- 各个页面只需在 script 标签中添加 src 属性，就可以调用.js 文件。
<!DOCTYPE html>
<html>
<head>
<title>My second script</title>
<script src="script02.js"></script>
</head>
<body>
<h1 id="helloMessage">
</h1>
</body>
</html>
2.2 在脚本中添加注释
/* 注释内容 */
//行注释
2.3 向用户发出警告
alert("Welcome to my JavaScript page!");
2.6 确认用户的选择
if (confirm("Are you sure you want to do that?")) {
alert("You said yes");
}
else {
alert("You said no");
}
(condition) ? truePart : falsePart;
2.7 提示用户
var ans = prompt("Are you sure you want to do that?","");
if (ans) {
alert("You said " + ans);
}
else {
alert("You refused to answer");
}
2.8 用链接对用户进行重定向
<!DOCTYPE html>
<html>
<head>
<title>Welcome to our site</title>
<script src="script07.js"></script>
</head>
<body>
<h2>
<a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>
</h2>
</body>
</html>
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
window.location = "jswelcome.html";
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Our site</title>
</head>
<body>
<h1>Welcome to our web site, which features lots of cutting-edge JavaScript</h1>
</body>
</html>
2.9 使用 JavaScript 改进链接
<!DOCTYPE html>
<html>
<head>
<title>Welcome to our site</title>
<script src="script08.js"></script>
</head>
<body>
<h2>
Hey, check out <a href="http://www.pixel.mu" id="redirect"> my cat's Web site</a>.
</h2>
</body>
</html>
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
alert("We are not responsible for the content of pages outside our site");
window.location = this;
return false;
}
JavaScript 关键字 this 使脚本能够根据使用这个关键字的上下文将值传递给函数。在这个示例
中， this 是在一个由标签的事件触发的函数中使用的，所以 this 是一个链接对象。在后面的示例
中，将看到在其他地方使用 this，你应该能够根据使用它的上下文判断出 this 是什么。
2.10 使用多级条件
<!DOCTYPE html>
<html>
<head>
<title>Switch/Case handling</title>
<script src="script09.js"></script>
</head>
<body>
<h2>Famous Presidential Quotes</h2>
<form action="#">
<input type="button" id="Lincoln" value="Lincoln">
<input type="button" id="Kennedy" value="Kennedy">
<input type="button" id="Nixon" value="Nixon">
</form>
</body>
</html>
window.onload = initAll;
function initAll() {
document.getElementById("Lincoln").onclick = saySomething;
document.getElementById("Kennedy").onclick = saySomething;
document.getElementById("Nixon").onclick = saySomething;
}
function saySomething() {
switch(this.id) {
case "Lincoln":
alert("Four score and seven years ago...");
break;
case "Kennedy":
alert("Ask not what your country can do for you...");
break;
case "Nixon":
alert("I am not a crook!");
break;
default:
}
}
2.11 处理错误
window.onload = initAll;
function initAll() {
var ans = prompt("Enter a number","");
try {
if (!ans || isNaN(ans) || ans<0) {
throw new Error("Not a valid number");
}
alert("The square root of " + ans + " is " + Math.sqrt(ans));
}
catch (errMsg) {
alert(errMsg.message);
}
}
2295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
