JavaScript 介绍·极速板

为了在浏览器中使用 JavaScript，浏览器加载的 HTML 页面必须包含 JavaScript 代码。有几种方法可以插入 JavaScript 代码。我们可以：

在 HTML 标头中插入 JavaScript。
将 JavaScript 插入 HTML 正文（通常在底部）。
包含来自与 HTML 页面相同的网站的 JavaScript 文件
包括来自其他网站的 JavaScript 文件。

HTML 页眉和正文之间的选择是一个计时问题。如果在 HTML 标头中插入代码，则在显示 HTML 正文时可以使用该代码。但是，编译 JavaScript 代码需要时间，因此有时为了提高 Web 响应能力，JavaScript 代码被放置在 HTML 正文的底部。如果将其放置在正文的底部，则浏览器可以在加载和编译 JavaScript 代码时显示页面。理想情况下，显示页面时使用的代码位于页眉中，而之后使用的代码可以放在页面正文的底部。

当 JavaScript 变得大量时，将代码放在单独的文件中是一种很好的编程实践。它还允许重用代码，其中许多页面可以加载相同的JavaScript文件。提供的JavaScript文件（例如各种框架）托管在维护者的网站或公共镜像站点上也很常见，这样代码就可以更新（错误修复），而无需用户修改他们的网页。

在这两种情况下，都有性能优势，因为浏览器可以缓存单独的文件，因此不必为使用它们的每个网页从远程网站重新加载它们。

函数包含代码块、子程序或子例程，在调用之前不会调用这些代码块或子例程。Javascript中有许多内置函数，以及创建用户定义函数的可能性。

与PHP类似，JavaScript提供了定义和使用函数的能力，作为打包JavaScript代码的一种手段，使其能够在不同的地方使用。通过在语句中使用函数名称，可以执行函数的代码。此外，您可以将参数传递给函数以修改其行为。该函数还可以返回要在调用它的位置使用的值。

其他函数和事件处理程序可以调用函数，例如加载页面时或用户通过与页面交互生成事件时。可以传递可选参数或由调用函数的页面元素生成的事件对象。

编写函数时必须遵循某些规则，如下所示：

所有函数都以函数关键字（在 JavaScript 中具有特殊含义的词）开头
在函数关键字之后，我们提供函数的名称
函数名称后面是一组括号（）。
最后，编写在大括号 {} 内调用函数时要执行的代码块

与PHP和其他编程语言相比，JavaScript编程语言提供了一种非常灵活的声明和使用函数的方式。JavaScript 函数可以通过以下方式声明：

function function-name (arg1, arg2, ...) 
{
      statements; 
}

var x = function (arg1, arg2, ...) { statements; };
var x = new Function(arg1, arg2..., "Function Body");

因此，打印简单“hello”消息的简单函数的示例是：

function hello() 
{ 
      document.write("hello<br>"); 
}

var hello = function () { document.write("hello<br>"); }

声明的格式与之前使用 <script> 标记将 JavaScript 声明括起来的格式相同。因此，定义和调用上述函数的完整 HTML 文件如下所示：

<!DOCTYPE html> <html lang=”en”>
<head> <meta charset=”utf8”>
<title> The Javascript Functional Hello</title>
<script language="javascript"> <!— function hello() { document.write("hello<br>"); } // --> </script> 
</head> 
<body> 
<script language="javascript"> <!-- hello(); // -->
</script>
</body>
</htm

函数的最后一个属性是可选的返回值。这是通过在函数体中放置 return 语句来实现的。return 语句的格式为：

return value;

当遇到 return 语句时，函数将立即终止，并将值返回到调用该函数的位置。为了演示这一点，您可以定义一个函数，该函数返回两个数字之间的差值，如下所示：

function diff(x, y) 
{ 
          var d = x-y;
          if (d < 0) 
              return y-x; 
          else 
              return d; 
}

上面的函数有两个参数：x 和 y，并返回两个数字之间的正差。
JavaScript 不会检查形式定义中的参数数量是否与实际函数调用中的参数数量匹配。函数调用中的任何额外参数都将被忽略，正式定义中的任何额外参数（实际调用的参数太少）都将被分配一个未定义的值。

当调用一个函数时，它应该返回一些有用的东西（例如，一个值或字符串），或者它应该返回一个布尔值（即，true或false）来指示函数的结果是否成功。

命名函数

JavaScript 中的函数名称有两个限制：

函数名称只能包含字母、数字或符号和 .$_
第一个字符不能是数字。

因此，以下内容都是有效的变量名称，不会产生错误：

function calculate_age()
function _name_()
function a$56enn ()

而以下名称无效，并且会产生错误：

function sayHi@()
function 1name()

JavaScript 变量

在 JavaScript 中，变量是隐式和弱类型的，这意味着它们不需要声明或类型转换（数据类型转换）。每当声明新的变量或常量时，JavaScript 都会确定其数据类型。但是，建议在使用变量之前声明变量并初始化它们。

当声明一个 JavaScript 变量时，我们可以使用关键字 var、let 和 constant。

var	创建新的全局变量（代码中没有范围限制）。
let	创建新的局部变量（范围仅存在于当前代码块中）。
constant	创建不可更改的全局常量（代码中没有范围限制）。

声明和初始化变量的语法：

var myInteger = 10;
var myString = “Hello World！”;或
var myArray = new Array（）;
let name = “John”
const pi = 3.14

变量可以存储不同的数据类型。一些常见的包括：

Strings	用引号写的字符组，例如“John Doe”。
Numbers	数字可以带或不带小数。如果数字大或小，可以用科学（指数）记数法书写
Booleans	表示真或假
Arrays	用方括号表示的元素组，其中值用逗号分隔。数组索引从零开始，因此第一项是 [0]，第二项是 [1]，依此类推。
Objects	键值对的集合称为对象。每个键值对称为一个属性。
Undefined	如果未为变量赋值，则其值未定义

请参考以下代码：

let age = 20;
let firstName = 'John';
let lastName = "Doe";
let isStudent = true;

在第一行，我们声明了一个被分配了一个数字的变量
在第二行和第三行，我们声明了已分配字符串的变量。请注意在分配字符串值（即''和“”）时如何使用任一类型的引号。
在第四行，我们声明了一个存储布尔值的变量。

正如之前看到的，变量的另一个常见用途是存储 HTML 对象，如下所示：

let paragraph = document.getElementById("test");

更改变量值

声明变量后，可以更改其值。请考虑以下代码：

let age = 20;
alert(age);
age = 30;
alert(age);

首先声明变量年龄并为其分配值 20，然后将其显示在警报中。但是，值 30 随后分配给可变年龄。这意味着值 20 已从我们声明变量时创建的内存空间中删除，并替换为值 30。

但是，请务必注意以下代码将导致错误：

let age = 20;
alert(age);
let age = 30;
alert(age);

以上代码有问题是因为在第三行重新声明了变量 age。在JavaScript中，使用关键字 let 声明的变量是具有块级作用域的。这意味着在同一个作用域内不能重复声明同一个变量名。所以在第三行重新声明 age 是不合法的。如果希望修改变量的值，应该直接对 age 进行赋值，而不需要再次使用 let 进行声明。

命名变量

在讨论命名函数时学到的相同规则也适用于命名变量，如下所示：

变量名只能包含字母、数字或符号和。$_
第一个字符不能是数字。

因此，以下内容都是有效的变量名称，不会产生错误：

let persons_age = 20;            
let _name_ = "John"
let a$56enn = false;

而以下名称无效，并且会产生错误：

let name@ = "John";
let 9name = "John";

第一个名称包含非法字符，第二个名称以数字开头。

注意：就像函数一样，应该始终使用描述性名称命名变量，当名称包含多个单词时，将使用 camelCase。这就是单词一个接一个，除了第一个单词之外，每个单词都以大写字母开头，例如someVariableName。仅仅因为变量名不会导致错误并不意味着它是一个好名字！

JavaScript 支持以下类型的运算符。

算术运算符
比较运算符
逻辑（或关系）运算符
赋值运算符
条件（或三元）运算符

这些与其他语言类似，但由于语言中变量的动态类型性质而存在差异。

可以在上面看到，赋值运算符 '=' 用于在变量中放置值。在类型化语言中，有一个类型检查，以查看右侧的变量是否是变量的正确类型。在 JavaScript 中没有类型检查，相反，变量会根据分配的任何类型进行调整。以下三个语句演示了变量如何忽略类型。if-else-if 语句的语法如下 -

  var x; // new variable are assigned value ‘undefined’
  x = 23; // x now has a integer value
  x = ’hello world’;// x now has a string value

相等运算符在 JavaScript 中也有一些新的属性。“==”运算符在转换类型后比较值，“===”运算符在没有类型转换的情况下进行严格比较，例如

  5 =='5' // returns true
  5 === '5' // returns false

不等式运算符 '！=' 和 '！==' 的行为方式相同。

有两个运算符可以测试表达式的类型。这些很有用，因为我们想要检查包含合理值的函数的变量或参数并不罕见，例如，数字函数可能想要检查它是否具有数字参数。

typeof x // returns the type of the value in x as a string

在查看 JavaScript 值类型之后，将查看运算符的类型和实例。

操作字符串和数字

字符串和数字的表示方式与您在 C# 或 Java 中使用的方式类似。但是，JavaScript 也为创建的字符串提供了一组属性。JavaScript 的一个不太清楚的方面是字符串类型和字符串对象之间的区别。两者之间的映射尚不清楚，但每个字符串都可以被视为一个对象，每个字符串都具有关联的属性。

例如，假设有一个声明：

  var name = "Reza";

可以从这个字符串访问属性。例如：

  name.length – returns the length of the string
  name.indexOf("rr") – returns the index of the string “rr” (0 is first position)

此外，还有有许多用于操作字符串的成员函数。

数字还具有一组映射到基元数字值的属性。例如，假设有以下数值变量：

var age = 21;

属性 age.toString（）将数字转换为字符串值。当运算符需要字符串值时，会自动调用它，例如在表达式中：

"my age is "+age

JavaScript 条件语句

JavaScript 支持以下形式的条件语句：

if 语句
切换switch case语句
当while时，和
对于for

if-else-if 语句的语法如下 -

if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

switch case 语句的语法如下 -

switch (expression) {
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

while语句的语法如下 -

while (expression) {
   Statement(s) to be executed if expression is true
}

For 语句的语法如下 -

for (initialization; test condition; iteration statement) {
   Statement(s) to be executed if test condition is true
}

JavaScript 数组

JavaScript 数组与您在其他编程语言中使用的数组非常相似。关键的区别在于，JavaScript 中的数组不是固定大小，你可能记得它们。JavaScript 中的数组具有动态长度，并随着您为它们分配更多值而自由扩展。第二个区别是数组不一定包含相同类型的值。

实际上，您可以将数组视为一种特殊类型的对象，其中元素由数字 0、1、2、...而不是字符串。请记住，我们可以访问数组等对象中的元素。

数组更类似于对象，因为它们具有属性和方法。例如，假设我们有以下数组声明。

var colours = ["red", "green", "blue"];

可以找到数组的长度作为长度属性：

colours.length

可以使用排序函数对数组进行排序：

 colours.sort();

JavaScript 调试

可以调用 console.log（） 方法来显示错误，而无需停止代码执行。

调试时，有时可能需要停止代码的执行。可以通过调用 alert（） 函数来执行此操作。

以下是一组示例：

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

错误处理（异常）

JavaScript 也实现了异常处理，但在文档中称为错误处理。您将熟悉其他现代语言（如 C# 或 Java）中的异常。JavaScript 使用非常相似的机制。

主要语句是try-catch结构，它与C#和Java中的相同语句非常相似。一般格式为：

  try {
       // lots of statements
  }
  catch (err) {
               // error processing code
  }
  finally { // optional
           // code that is always executed (whether error or not)
  }

JavaScript 还允许你抛出自己的错误，由 catch 语句处理，例如

  try {
      // lots of statements
         throw 234;
      // lots of statements
         throw "oops error";
      // more statements
  }
  catch (err) {
     // error processing code
  }

请注意，在此示例中，引发错误的方式可以是任何类型的，在此示例中，数字和字符串作为错误值引发。