了解 JavaScript （3）- 马上开始
之前演示了一个 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);
}
}
示例代码下载
了解 JavaScript （3）- 马上开始的更多相关文章
- 【JavsScript】JavaScript MVC 框架技术选型
你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...
- (译文)12个简单(但强大)的JavaScript技巧(二)
原文链接: 12 Simple (Yet Powerful) JavaScript Tips 其他链接: (译文)12个简单(但强大)的JavaScript技巧(一) 强大的立即调用函数表达式 (什么 ...
- SpringMVC+Thymeleaf +HTML的简单框架
一.问题 项目中需要公众号开发,移动端使用的是H5,但是如果不用前端框架的话,只能考虑JS前端用ajax解析JSON字符串了.今天我们就简单的说下前端框架Thymeleaf如何解决这个问题的: 二.开 ...
- 从零学React Native之01创建第一个程序
本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Nat ...
- 【javaScript基础】马上调用函数表达式
在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //ma ...
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- 使用JavaScript为一张图片设置备选路径
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...
- javascript运动学教程
本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础 引子:从左到 ...
- JavaScript之web通信
web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. ...
随机推荐
- WebService简介-02
WebService-面向服务编程SOA WebService-远程通信 运行效果: 1:添加服务器引用http://www.webxml.com.cn/WebServices/WeatherWebS ...
- spring-boot集成spring-data-jpa
参考这个就行, http://blog.csdn.net/wazz753/article/details/72472411 ps:集成过程中pom文件,我加入的内容如下,两个都需要,实体类记得加注解和 ...
- zookeeper在dubbo中干什么
本文旨在表述出自己对于zookeeper在dubbo的作用的初步理解 在对dubbo进行了初步的探索后,对于zookeeper在其中的作用不甚了解,因为本身对zookeeper就没有一个特别具体的概念 ...
- [ZJOI2012]数列
超级水的题还wa了一次 首先很容易发现其实就只有两个值并存 然后 要注意把数组初始化啊...可能后面有多余的元素(对拍的时候由于从小到大就没跑出错) #include <bits/stdc++. ...
- 鼠标hover元素scale/zoom中心点放大效果实例页面
CSS代码: .box { /* 可见视觉区域 */ width: 480px; height: 250px; position: relative; overflow: hidden; cursor ...
- HDU5818 Joint Stacks 左偏树,可并堆
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - HDU5818 题意概括 有两个栈,有3种操作. 第一种是往其中一个栈加入一个数: 第二种是取出其中一个栈的顶 ...
- Hat’s Words HDU1247
一个很经典的字典树题目 先建树 再拆单词进行判断是否都在树内 因为爆内存错了很久 如果一个四十万的数组 用mamset的话会直接爆几十万的内存 所以要:用多少 初始化多少才对!( 修改了两条初始化语 ...
- 内置函数 filter zip map
1. 基本内置函数: 2. enumerate : 枚举 把列表转化为有索引的字典: 3. eval 和 exec 4. 过滤函数 filter 5. map 函数批量修改: 6. 配对函数 zi ...
- 002.AnyCast技术浅析
一 常见通信方式 1.1 UniCastAnyCast UniCast,即单播,指网络中一个节点与另一个节点之间需要建立一个单独的数据通道,从一个节点发出的信息只被一个节点收到,这种传送方 ...
- 006.Docker网络管理
一 docker网络模式 Docker使用Linux的Namespaces技术来进行资源隔离,如PID Namespace隔离进程,Mount Namespace隔离文件系统,Network Name ...