JavaScript入门
一、JavaScript 简介
JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
HTML 中的脚本必须位于 <script>与 <\script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
那些老旧的实例可能会在 <script> 标签中使用type="text/javascript"。现在已经不必这样做了，因为JavaScript 已经是所有现代浏览器以及 HTML5 中的默认脚本语言。
二、JavaScript 变量
变量是存储信息的容器。变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（x 和 X 是不同的变量）
1. 声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为 “声明” 变量。我们使用 var 关键词来声明变量。
var carname; // 只声明变量不赋值，则该变量的值是Undefined
var carname = "Volvo"; // 声明变量的同时赋值
// 在一条语句中声明很多变量
var name = "Gates", age = 56, job = "CEO";
// 声明也可横跨多行
var name = "Gates",
age = 56,
job = "CEO";
2. 重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失。在以下两条语句执行后，变量 carname 的值依然是 "Volvo"。
var carname = "Volvo";
var carname;
三、JavaScript 数据类型
JavaScript 的数据类型有：字符串、数字、布尔、数组、对象、Null、Undefined。
1. JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
2. JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号。
var carname = "Bill Gates";
var carname = 'Bill Gates';
3. JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。
var x1 = 34.00; // 使用小数点来写
var x2 = 34; // 不使用小数点来写
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
4. JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x = true
var y = false
5. JavaScript 数组
下面的代码创建名为 cars 的数组。
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";
//或者
var cars = new Array("Audi","BMW","Volvo");
//或者
var cars = ["Audi","BMW","Volvo"];
6. JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式（name : value）来定义。属性由逗号分隔。
var person = {firstname:"Bill", lastname:"Gates", id:5566};
对象属性有两种寻址方式：
name = person.lastname;
name = person["lastname"];
7. Undefined 和 NULL
Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 NULL 来清空变量。
cars; // Undefined
person = NULL; // NULL
8. 声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String; //字符串
var x= new Number; //数字
var y= new Boolean; //布尔
var cars= new Array; //数组
var person= new Object; //对象
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
四、JavaScript 对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。
1. 属性和方法
属性是与对象相关的值。方法是能够在对象上执行的动作。举例：汽车就是现实生活的对象。
汽车的属性▼
cars.name = "Fiat";
car.weight = 500;
car.color = "white";
汽车的方法▼
car.start();
car.drive();
car.brake();
2. JavaScript 中的对象
在 JavaScript 中，对象是数据（变量），拥有属性和方法。当您像这样声明一个 JavaScript 变量时：
var txt = "Hello";
您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。
属性▼
txt.length = 5;
方法▼
txt.indexOf();
txt.replace();
txt.search();
提示：在面向对象的语言中，属性和方法常被称为对象的成员。
3. 创建 JavaScript 对象
你也可以创建自己的对象，下面是创建对象的另一种方法，使用new Object()创建。本例创建名为 "person" 的对象，并为其添加了四个属性：
person = new Object(); // ()可加可不加
person.firstname = "Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
五、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1. JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 这里是要执行的代码
}
2. 调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。
实例▼
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
3. 带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。
语法▼
function myFunction()
{
var x = 5;
return x;
}
4. 局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
只要函数运行完毕，本地变量就会被删除。
5. 全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
6. 向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname="Volvo";
上面将声明一个全局变量 carname，即使它在函数内执行。
六、JavaScript 运算符
JavaScript 中的运算符跟C语言中的运算符基本一致，没什么区别。
JavaScript 算术运算符
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x = y + 2 | x = 7 |
| - | 减 | x = y - 2 | x = 3 |
| * | 乘 | x = y * 2 | x = 10 |
| / | 除 | x = y / 2 | x = 2.5 |
| % | 求余数 (保留整数) | x = y % 2 | x = 1 |
| ++ | 累加 | x = ++y | x = 6 |
| -- | 递减 | x = --y | x = 4 |
JavaScript 赋值运算符
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x = y | x = 5 | |
| += | x += y | x = x + y | x = 15 |
| -= | x -= y | x = x - y | x = 5 |
| *= | x *= y | x = x * y | x = 50 |
| /= | x /= y | x = x / y | x = 2 |
| %= | x %= y | x = x % y | x = 0 |
JavaScript 比较运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x == 8 为 false |
| === | 全等（值和类型） | x === 5 为 true；x==="5" 为 false |
| != | 不等于 | x != 8 为 true |
| > | 大于 | x > 8 为 false |
| < | 小于 | x < 8 为 true |
| >= | 大于或等于 | x >= 8 为 false |
| <= | 小于或等于 | x <= 8 为 true |
JavaScript 逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x<10 && y>1) 为 true |
| || | or | (x5 || y5) 为 false |
| ! | not | !(x == y) 为 true |
JavaScript 条件运算符
语法▼
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。
对字符串和数字进行加法运算
如果把数字与字符串相加，结果将成为字符串。请看这些例子：
x=5+"5";
document.write(x);
七、JavaScript 语句
JavaScript 中的语句类型和语法，跟C语言中的也基本一致，都有：if...else、switch 条件语句，for、while 循环语句，break 、 continue语句。
sf...else 条件语句
语法▼
if (条件)
{
// 当条件为 true 时执行的代码
}
else
{
// 当条件不为 true 时执行的代码
}
也可以使用 if....else if...else 语句来选择多个代码块之一来执行。
switch 条件语句
语法▼
switch(n)
{
case 1:
// 执行代码块 1
break;
case 2:
// 执行代码块 2
break;
default:
// n 与 case 1 和 case 2 不同时执行的代码
}
for 循环语句
语法▼
for (语句 1; 语句 2; 语句 3)
{
// 被执行的代码块
}
for/In 循环语句
JavaScript for/in 语句用来循环遍历对象的属性。
实例▼
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
{
txt=txt + person[x];
}
while 循环语句
语法▼
while (条件)
{
// 需要执行的代码
}
do/while 循环语句
语法▼
do
{
// 需要执行的代码
}
while (条件);
Break 和 Continue 语句
break 语句可用于跳出循环。continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
JavaScript 标签
可以对 JavaScript 语句进行标记，如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。
实例▼
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
八、JavaScript 错误
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：
-
可能是语法错误，通常是程序员造成的编码错误或错别字。
-
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
-
可能是由于来自服务器或用户的错误输出而导致的错误。
-
当然，也可能是由于许多其他不可预知的因素。
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
JavaScript 测试和捕捉
JavaScript 语句 try 和 catch 是成对出现的。
语法▼
try
{
// 在这里运行代码
}
catch(err)
{
// 在这里处理错误
}
实例▼
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()">
</body>
</html>
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法▼
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
实例▼
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
参考：
