之前演示了一个 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

了解 JavaScript （3）- 马上开始的更多相关文章

  1. 【JavsScript】JavaScript MVC 框架技术选型

    你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...

  2. (译文)12个简单(但强大)的JavaScript技巧(二)

    原文链接: 12 Simple (Yet Powerful) JavaScript Tips 其他链接: (译文)12个简单(但强大)的JavaScript技巧(一) 强大的立即调用函数表达式 (什么 ...

  3. SpringMVC+Thymeleaf +HTML的简单框架

    一.问题 项目中需要公众号开发,移动端使用的是H5,但是如果不用前端框架的话,只能考虑JS前端用ajax解析JSON字符串了.今天我们就简单的说下前端框架Thymeleaf如何解决这个问题的: 二.开 ...

  4. 从零学React Native之01创建第一个程序

    本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Nat ...

  5. 【javaScript基础】马上调用函数表达式

    在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //ma ...

  6. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  7. 使用JavaScript为一张图片设置备选路径

    在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...

  8. javascript运动学教程

    本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础 引子:从左到 ...

  9. JavaScript之web通信

    web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. ...

随机推荐

  1. LeetCode（26）： 删除排序数组中的重复项

    Easy! 题目描述: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间 ...

  2. HDU 5988 Coding Contest(费用流+浮点数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5988 题目大意: 给定n个点,m条有向边,每个点是一个吃饭的地方,每个人一盒饭.每个点有S个人,有B盒 ...

  3. python 全栈开发，Day30(第一次面向对象考试)

    月考题: python 全栈11期月考题 一 基础知识:(70分) 1.文件操作有哪些模式?请简述各模式的作用(2分) 2.详细说明tuple.list.dict的用法,以及它们的特点(3分) 3.解 ...

  4. python包管理之Pip安装及使用-1

    Python有两个著名的包管理工具easy_install.py和pip.在Python2.7的安装包中,easy_install.py是默认安装的,而pip需要我们手动安装. pip可以运行在Uni ...

  5. 如何用命令将本地项目上传到git，git基本使用

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  6. python多进程和多线程

    多任务才有多进程和线程: 线程是最小的执行单元,而进程由至少一个线程组成.如何调度进程和线程,完全由操作系统决定,程序自己不能决定什么时候执行,执行多长时间. 多进程和多线程的程序涉及到同步.数据共享 ...

  7. vue中mixin的一点理解

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别?     ...

  8. springmvc传参问题

    @RequestMapping(value = "/addHit", method = { RequestMethod.POST, RequestMethod.GET }) pub ...

  9. js获取宽度

    alert(window.screen.width );//浏览设备的分辨率(电脑.手机.平板等) alert(window.screen.availWidth );//浏览设备的实际可用宽度(电脑. ...

  10. uva 674 Coin Change 换钱币【完全背包】

    题目链接:https://vjudge.net/contest/59424#problem/A 题目大意: 有5种硬币, 面值分别为1.5.10.25.50,现在给出金额,问可以用多少种方式组成该面值 ...