一、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.
";
txt+="Error description: " + err.message + "
";
txt+="Click OK to continue.
";
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>
参考: