博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
了解 JavaScript (3)- 马上开始
阅读量:6090 次
发布时间:2019-06-20

本文共 4033 字,大约阅读时间需要 13 分钟。

之前演示了一个 Hello World 程序,而后讲解了一些基础概念,下面开始一些基础工作。

将脚本放在哪里

脚本可以放置在两个位置

  • <head></head>之间,头脚本(header script)
  • <body></body>之间,体脚本(body script)

通过示例学习一些知识,请认真看注释哟。

  
My first script


关于函数

在编写 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

  
script_003.html / script_003.js

script_003.js

alert("Welcome to my JavaScript page!");

这个脚本运行后(Firefox 40),显示一个对话框,如下:


确定用户的选择

向用户提供信息是有用的,但有时候也需要向用户那里获取信息。下面的脚本中将演示如何针对不同的结构执行不同的操作。

script_004.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

提示用户

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,该页面基于链接对用户进行重定向。

welcome.js,通过将重定向功能嵌入代码中,用户甚至不知道你的脚本干预了链接的行为。

// JavaScript Documentwindow.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 页面。

支持 JavaScript 转到的页面

欢迎来到这里,JavaScript 的世界。

nojswelcome.html,这是没有启用 JavaScript 功能的用户看到的 HTML 页面。

无 JavaScript 的页面

welcome.html 执行后,显示如下:

点击链接,如果用户启用了 JavaScript 功能将会看到下面的警告对话框,如下:

接着“确定”后,转到了 jswelcome.html 页面,如下:

如果用户没有 JavaScript 功能,将会跳转到 nojswelcome.html 页面,如下:

 


使用多级条件

在一个测试中需要两个以上的选择,仅适用 then 和 else 是不够的,更简单的方法是使用 switch / case 语句。

下面的示例根据用户点击的按钮,在警告对话框中返回3段不同的总统语录之一。

multicondition.html,该 HTML 页面建立多级条件的页面。

使用多级条件

Famous Presidential Quote

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() 函数,弹出对话框输入一个数字进行计算。

演示使用 JavaScript 的 try/throw/catch 产生友好的错误消息

演示使用 JavaScript 的 try/throw/catch 产生友好的错误消息

简单的平方根处理程序

errsqrt.js,适当的处理输入的数字的有效性,无效则弹出错误信息告诉用户。

// JavaScript Documentwindow.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);        }    }

示例代码下载

转载地址:http://rfmwa.baihongyu.com/

你可能感兴趣的文章
python-45: opener 的使用
查看>>
cad图纸转换完成的pdf格式模糊应该如何操作?
查看>>
Struts2与Struts1区别
查看>>
网站内容禁止复制解决办法
查看>>
Qt多线程
查看>>
我的友情链接
查看>>
想说一点东西。。。。
查看>>
css知多少(8)——float上篇
查看>>
NLB网路负载均衡管理器详解
查看>>
水平添加滚动条
查看>>
PHP中”单例模式“实例讲解
查看>>
VM EBS R12迁移,启动APTier . AutoConfig错误
查看>>
atitit.细节决定成败的适合情形与缺点
查看>>
Mysql利用binlog恢复数据
查看>>
我的友情链接
查看>>
用yum安装mariadb
查看>>
一点IT"边缘化"的人的思考
查看>>
WPF 降低.net framework到4.0
查看>>
搭建一个通用的脚手架
查看>>
开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
查看>>