学习JavaScript笔记「2」

2017-08-26 约 18 分钟 #note #javascript #web

函数

函数由单词function加上函数名组成。函数名后面是圆括号，再后面是左花括号。组成函数内容的语句出现在后面的行上，然后用右花括号结束这个函数。

function saySomething() {
　alert("Four score and seven years ago");
}

外部脚本

这些外部文件称为.js文件，因为无论它们叫什么，文件名都应该以.js后缀结尾。各个页面只需在script标签中添加src属性，就可以调用.js文件。

<script src="waibujiaoben.js"></script>

弹窗

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

noscript标签在不支持JavaScript的浏览器（老式浏览器和关闭了JavaScript功能的浏览器）上，会显示一条消息，它指出这个页面需要JavaScript。

交互的弹窗：

if (confirm("Are you sure you want to do that?")) {
　　alert("You said yes");
}
else {
　　alert("You said no");
}

条件语句分成3部分：if部分（在这里执行测试）、then部分（在这里放置在结果为true时要执行的脚本命令）和可选的else部分（这里包含在测试结果不为true时要执行的脚本命令）。在if部分中，我们要测试的内容放在圆括号中，其他两部分的内容分别包含在花括

confirm()方法有一个参数（向用户询问的问题），并根据用户的响应返回true或false

可以在then和else部分的花括号中放任意数量的语句。

编写任何脚本都有许多种方式，并且都能实现同样的效果。例如，当（且仅当）代码块中只有一条语句时，条件语句中就不需要使用花括号。另外，还有一种可以替代条件语句的方法，其形式如下：

(condition) ? truePart : falsePart;
这相当于
if (condition) {
　truePart;
}
else {
　falsePart;
}

同样的简写方法也可以用来设置变量，例如：

myNewVariable = (condition) ? trueValue : falseValue;
这相当于
if (condition) {
　myNewVariable = trueValue;
}
else {
　myNewVariable = falseValue;
}

并不要求必须将花括号放在行尾或行首，true和false代码块的缩进也不是必需的。这些都是样式问题，对于你最合适的样式就是正确的样式。

使用对话框询问用户并处理回复：

var ans = prompt("Are you sure you want to do that?","");
if (ans) {
　　alert("You said " + ans);
}
else {
　　alert("You refused to answer");
}

var作用：

1、创建一个变量

2、定义变量的作用域

作用域（也就是通常所说的范围）是本地区的，比如说（A）就指本地的A。但如果要说杭州的A就需要说（杭州的A）。

链接

重定向：

window.onload = initAll;

function initAll() {
　　document.getElementById("redirect").onclick = initRedirect;
}

function initRedirect() {
　　window.location = "jswelcome.html";
　　return false;
}

window.onload = initAll;

当完成页面加载时，触发initAll()函数。

function initAll() {
　　document.getElementById("redirect").onclick = initRedirect;
}

这个函数告诉id为redirect的元素（也就是被点击的链接），在它被单击时应该调用initRedi-rect()函数。

function initRedirect() {
　　window.location = "jswelcome.html";
　　return false;
}

如果调用这个函数，它就将window.location（即浏览器中显示的页面）设置为一个新页面。return false表示停止对用户单击的处理，这样就不会加载href指向的页面。

改进链接

window.onload = initAll;

function initAll() {
　　document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
　　alert("你要去另一個網頁咯");
　　window.location = this;
　　return false;
}

alert("你要去另一個網頁咯");

在单击链接之后，会显示弹窗「你要去另一個網頁咯」。

window.location = this;

这一行将浏览器窗口设置为关键字this指定的位置，关键词this使脚本能够根据使用这个关键字的上下文将值传递给函数。在这里，this是在一个由标签的事件触发的函数中使用的，this是一个链接对象。（更多的还不知道26-08-2017）

多级条件

HTML建立多级条件的页面

<!DOCTYPE html>
<html>
<head>
　　<title>Switch/Case handling</title>
　　<script src="script09.js"></script>
</head>
<body>
<h2>Famous Presidential Quotes</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>

script09.js

window.onload = initAll;

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:
　　}
}

window.onload = initAll;

当加载页面时，调用initAll()函数。

function initAll() {
    document.getElementById ("Lincoln").onclick = saySomething;
    document.getElementById ("Kennedy").onclick = saySomething;
    document.getElementById ("Nixon").onclick = saySomething;

在这个函数中，为页面上的每个按钮设置了onclick处理程序。因为在HTML中设置了id属性和value属性，所以可以使用getElementById()设置事件处理程序。如果有value属性，就可以使用getElementByValue()调用，那么就不必设置id属性。

function saySomething() {

这一行开始saySomething()函数。

switch(this.id) {

this对象的id用作switch()的参数。这个值将决定执行以下case语句中的哪一个。

case "Lincoln":
alert("Four score and seven years ago...");
break;

如果this对象的id是Lincoln，那么显示这个警告消息。如果用户单击Lincoln，就会进入这里的代码。但是，在这里已经执行了我们需要的操作，所以我们希望离开这个switch语句，为此，需要使用break语句。如果没有break，就会继续执行下面的所有代码。

case "Kennedy":
alert("Ask not what your country can do for you...");
break;

如果用户单击Kennedy，就会进入这个case块。

case "Nixon":
alert("I am not a crook!");
break;

最后，如果用户单击Nixon，就会进入这里，这里弹出另一个警告对话框，然后退出switch语句。

default:

如果用户的输入与上面的条件都不匹配，那么就会执行这里的代码。也就是说，如果switch值与任何case值都不匹配，就会进入default部分。default块是可选的。

这个右花括号结束switch语句。

处理错误

window.onload = initAll;

function initAll() {
　　var ans = prompt("Enter a number","");
　　try {
　　　if (!ans || isNaN(ans) || ans<0) {
　　　　　throw new Error("Not a valid number");
　　　}
　　　alert("The square root of " + ans + " is " + Math.sqrt(ans));
　　}
　　catch (errMsg) {
　　　alert(errMsg.message);
　　}
}

var ans = prompt("Enter a number", "");

这是一个普通的提示，我们把它存储在ans变量中供以后使用。在这个示例中，希望用户输入一个数字。如果用户确实输入了合适的数字，JavaScript就会显示所输入数字的平方根。

try {

但是，如果他们没有输入数字，那么代码能够捕捉到这一错误并显示有意义的消息。即使用户在要求他们输入数字时输入了单词，我们也能够有礼貌地发出提示。首先使用try命令。在这块代码中，我们检查用户的输入是否有效。

if (!ans || isNaN(ans) || ans<0) {
　throw new Error("Not a valid number");
}

我们要关注3种情况：根本没有输入；用户输入了某些内容，但不是数字；输入的是数字，但它是负数（因为负数的平方根是虚数，这超出了这个示例的范围）。如果!ans是true，就意味着用户没有输入任何内容。内置的isNaN()方法检查传递给它的参数是否“不是数字（Not a Number）”。如果isNaN()返回true，就说明输入的内容是无效的。如果ans小于0，它就是负数。对于以上任何情况，都希望抛出一个错误，指出“Not a valid number（不是有效的数字）”。当抛出错误之后，JavaScript跳出try块并寻找对应的catch语句。因此，try块中其余的代码都被跳过。

alert("The square root of " + ans + " is " + Math.sqrt(ans));

如果输入了有效的内容，就显示平方根

这个右花括号结束try块。

catch (errMsg) {
　alert(errMsg.message);
}

这是出现错误时要使用的catch语句。error作为参数传递给它，它显示错误的message部分。如果没有抛出错误，catch中的代码就不会执行。

最后的{}块。这个部分放在catch后面，无论try块是否抛出错误，这里包含的代码都应该执行。

函数