JavaScript入门

2022-10-24 14:04:26

一、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	(x==5 \|\| y==5) 为 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>

参考：

W3School - JavaScript 教程

码农公寓

一、JavaScript 简介

二、JavaScript 变量

三、JavaScript 数据类型

四、JavaScript 对象

五、JavaScript 函数

六、JavaScript 运算符

七、JavaScript 语句

八、JavaScript 错误

相关文章