之前演示了一个 Hello World 程序，而后讲解了一些基础概念，下面开始一些基础工作。
将脚本放在哪里
脚本可以放置在两个位置
- <head></head>之间，头脚本（header script）
- <body></body>之间，体脚本（body script）
通过示例学习一些知识，请认真看注释哟。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My first script</title> </head> <body> <h1> <script> <!-- 这是 script 开始标签 --> //<script> 标签的 language 和 type 属性已经废弃了 document.write("Hello, world!"); /* 这是 JavaScript 第一行，它将获得文档窗口并在其中输出 “Hello, world!”，语句要以分号结束。 */ </script> <!-- JavaScript 的结束标签 --> </h1> </body> </html>
关于函数
在编写 JavaScript 时常常会用到它们。例如下面的代码：
function saySomething() { alert("Four score and seven years ago"); }
函数名后是括号，整个函数程序段包含在大括号之间。
在脚本中添加注释
养成在脚本中添加注释的习惯是一种非常好的做法，方便日后查看和修改。下面的代码演示了两种注释的用法。
// JavaScript Document /* 该注释适合比较长的多行注释 */ function saySomething() { //显示一个对话框，弹出信息 alert("Four score and seven years ago"); }
向用户发出警告
在以后我们的示例代码中的 JavaScript 代码尽量放置在外部文件中，这样容易养成一种习惯。
这里我们学习如何向浏览站点人，弹出一个警告窗口。代码如下：
script_003.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>script_003.html / script_003.js</title> <script src="script_003.js"> //我们将 JavaScript 放置在了 script_003.js 文件中 </script> </head> <body> <!-- noscript 标签在不支持 JavaScript 和关闭了功能的浏览器上显示--> <noscript> <h2>This page requires JavaScript.</h2> </noscript> </body> </html>
script_003.js
alert("Welcome to my JavaScript page!");
这个脚本运行后（Firefox 40），显示一个对话框，如下：
确定用户的选择
向用户提供信息是有用的，但有时候也需要向用户那里获取信息。下面的脚本中将演示如何针对不同的结构执行不同的操作。
script_004.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>确定用户的选择</title> <script src="script_004.js"></script> </head> <body> </body> </html>
script_004.js
if (confirm('Are you sure you want to do that?')) { alert('You said Yes'); } else { alert('You said No'); }
我们可以获得用户操作的结果，如下图：
上图向用户提出一个问题，可以点击“确定”或者“取消”的结果如下图：
提示用户
有时候，不是仅希望用户回答 Yes/No，而是希望得到更特定的响应。下面的脚本问了一个问题，然后接受回复，并显示结果。
script_005.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>提示用户</title> <script src="script_005.js"></script> </head> <body> </body> </html>
script_005.js
// 使用 var 声明变量，ans 为 prompt() 的结果，也就是输入的文本 var ans = prompt('Are you sure you want to do that?', ''); //如果 ans 存在，则显示输入的文本 if (ans) { alert('You said ' + ans); } else { alert('You refused to answer'); }
执行页面后，提示用户输入一个文本字符串，如下图：
输入后“确定”，显示刚才输入的文本，如下图：
用链接对用户进行重定位
根据用户是否打开 JavaScript 功能，无缝地对用户进行重定向（redirection），就是将用户转到另一个页面。
我们的示例有三个 HTML 页面和一个 JavaScript 页面。
welcome.html，该页面基于链接对用户进行重定向。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Welcome to our site</title> <script src="welcome.js"></script> </head> <body> <h2 class="centered"> <a href="nojswelcome.html" id="redirect">欢迎来到这里，我们将演示无缝地对用户进行重定向(redirection)...</a> </h2> </body> </html>
welcome.js，通过将重定向功能嵌入代码中，用户甚至不知道你的脚本干预了链接的行为。
// JavaScript Document window.onload = initAll; function initAll(){ document.getElementById("redirect").onclick = initRedirect; } function initRedirect(){ alert('你的浏览器支持 JavaScript，将要跳转到 jswelcome.html 页面 '); window.location = 'jswelcome.html'; //返回 false 表示停止对用户的单击的处理，这样就不会加载 href 指向的页面。 return false; }
jswelcome.html，这是启用了 JavaScript 功能的用户看到的 HTML 页面。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>支持 JavaScript 转到的页面</title> </head> <body> <h1>欢迎来到这里，JavaScript 的世界。</h1> </body> </html>
nojswelcome.html，这是没有启用 JavaScript 功能的用户看到的 HTML 页面。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无 JavaScript 的页面</title> </head> <body> <noscript> <h2>该页面需要 JavaScript 支持才行哟！</h2》 ><noscript> </body> </html>
welcome.html 执行后，显示如下：
点击链接，如果用户启用了 JavaScript 功能将会看到下面的警告对话框，如下：
接着“确定”后，转到了 jswelcome.html 页面，如下：
如果用户没有 JavaScript 功能，将会跳转到 nojswelcome.html 页面，如下：
使用多级条件
在一个测试中需要两个以上的选择，仅适用 then 和 else 是不够的，更简单的方法是使用 switch / case 语句。
下面的示例根据用户点击的按钮，在警告对话框中返回3段不同的总统语录之一。
multicondition.html，该 HTML 页面建立多级条件的页面。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用多级条件</title> <script src="multicondition.js"></script> </head> <body> <h2>Famous Presidential Quote</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>
multicondition.js，使用 switch/case 构造区分不同的总统语录选择。
window.onload = initAll; //页面加载时，调用 initAll() 函数 //该函数为页面的每一个按钮设置了 onclick 事件程序 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: } }
multicondition.html 页面效果如下：
调用三个按钮后分别弹出下面 3 个对话框。
处理错误
向用户提供有意义的错误消息，而不是大多数浏览器在拒绝用户的操作时返回莫名其妙的消息。
下面的脚本演示如何使用 JavaScript 的 try/throw/catch 命令产生友好、有用的错误信息，我们将这个功能用于一个简单的平方根计数器中。
errsqrt.html，调用 errsqrt.js 的 initAll() 函数，弹出对话框输入一个数字进行计算。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>演示使用 JavaScript 的 try/throw/catch 产生友好的错误消息</title> <script src="errsqrt.js"></script> </head> <body> <h3>演示使用 JavaScript 的 try/throw/catch 产生友好的错误消息</h3> <h4>简单的平方根处理程序</h4> </body> </html>
errsqrt.js，适当的处理输入的数字的有效性，无效则弹出错误信息告诉用户。
// JavaScript Document window.onload = initAll; function initAll(){ var ans = prompt('请输入一个数字', ''); try{ //isNaN 检查是否不是数字 if(!ans || isNaN(ans) || ans < 0){ throw new Error('Not a valid number'); //抛出错误，指出不是一个有效的数字 //JavaScript 会跳出 try 块代码，寻找 catch 语句。 //try 块中其余的代码都被跳过 } alert('The square root of ' + ans + ' is ' + Math.sqrt(ans)); }catch(errMsg){ //如果没有错误抛出，此段代码不会执行 alert(errMsg.message); } }