您的位置：首页 > Web前端 > JavaScript

了解 JavaScript （3）- 马上开始

2015-08-29 21:34 851 查看
之前演示了一个 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);
}
}


示例代码下载

JSBegin.rar
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航