Internet Technologies 简明教程

JavaScript

Introduction

JavaScript 是具有面向对象功能的轻量级解释型编程语言，它允许你在静态 HTML 页面中构建交互性。

Key Points

  1. 它是轻量级的解释型编程语言。

  2. 它用于创建以网络为中心的应用程序。

  3. 它可以很好地补充并和 Java 集成。

  4. 它可以很好地补充并和 HTML 集成。

  5. 它是一个跨平台的开放系统。

JavaScript Statements

JavaScript 语句是用于告诉浏览器执行哪些操作的命令。语句以分号 (;) 分隔。

JavaScript 语句示例：

document.getElementById("demo").innerHTML = "Welcome";

下表显示了各种 JavaScript 语句 −

Sr.No.

Statement

Description

1.

switch case

一个代码执行依赖于不同情况的语句块。解释器在找到匹配项之前会检查每个情况与表达式中的值是否匹配。如果没有匹配项，则 default 将使用 condition。

2.

If else

if 语句是 JavaScript 中用于做出决定和有条件执行语句的基本控制语句。

3.

While

while 循环的用途是只要表达式为 true 就重复执行一条语句或代码块。一旦表达式变为 false，则循环将退出。

4.

do while

至少执行一次的语句块，并且当条件为 true 的时候持续执行。

5.

for

と同じですが、初期化、条件、増分/減分は同じ行で行われます。

6.

for in

このループはオブジェクトのプロパティをループするために使用されます。

7.

continue

continue ステートメントは、インタプリタにループの次の反復をすぐに開始し、残りのコードブロックをスキップするように指示します。

8.

break

break ステートメントはループを早期に終了するために使用され、囲んでいる中括弧外に出ます。

9.

function

函数是一组可重用代码，可以在程序中任何地方调用。用于声明函数的关键字是 function。

10.

return

return 语句用于从函数返回一个值。

11.

var

用于声明变量。

12.

try

对它实施错误处理的语句块。

13.

catch

在发生错误时执行的语句块。

14.

throw

用于引发错误。

JavaScript Comments

JavaScript 同时支持 C 风格和 C++ 风格的注释，如下所示：

  1. // 和行尾之间的任何文本都被视为注释，并被 JavaScript 忽略。

  2. /* 和 */ 之间的任何文本都被视为注释。这可能跨越多行。

  3. JavaScript 也识别 HTML 注释开头序列 <!--。JavaScript 将其视为单行注释，正如它处理 // 注释那样。-→

  4. HTML 注释结尾序列 -→ 未被 JavaScript 识别，因此它应写为 //-→。

示例

<script language="javascript" type="text/javascript">
   <!--

      // this is a comment. It is similar to comments in C++

      /*
         * This is a multiline comment in JavaScript
         * It is very similar to comments in C Programming
      */
   //-->
<script>

JavaScript variable

变量称为用于存储信息的命名容器。我们可以将数据放入这些容器中，然后通过对容器命名来引用数据。

Rules to declare variable in JavaScript

以下是声明 JavaScript 中变量时必须遵循的重要规则。

  1. 在 JavaScript 中，变量名区分大小写，例如 a 与 A 不同。

  2. 变量名只能以下划线 ( _ ) 或字母（a 到 z 或 A 到 Z）或美元（ $ ）符号开头。

  3. 数字（0 到 9）只能在字母之后使用。

  4. 变量名中不允许其他特殊字符。

在 JavaScript 程序中使用变量之前，必须对其进行声明。变量使用 var 关键字进行声明，如下所示 −

<script type="text/javascript">
   <!--
      var money;
      var name, age;
   //-->
</script>

变量可以在声明时或声明后进行初始化，如下所示 −

<script type="text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

Javascript Data Type

有两种数据类型，如下所示 −

  1. Primitive Data Type

  2. Non Primitive Data Type

下表描述了 javaScript 中可用的 Primitive Data Types

Sr.No.

Datatype Description

1.

String 可以包含作为单个值的一组字符。它用双引号表示。例如，var x= “tutorial”。

2.

*数值*包含带或不带小数点的数值。例如，var x=44，y=44.56；

3.

*布尔值*仅包含 true 或 false 这两个值。例如，var x=true，y= false。

4.

*未定义的*未赋值的变量称为未定义的。例如，var x；

5.

*空*如果我们给变量赋值 null，它将变为空。例如，var x=null；

下表描述了 JavaScript 中的 Non-Primitive Data Types

Sr.No.

Datatype Description

1.

Array 可以包含相同类型的多个值组。例如，var x={1,2,3,55}；

2.

Objects 对象存储在属性和值对中。例如，var rectangle = { length: 5, breadth: 3}；

JavaScript Functions

函数是一组可重用语句（代码），可以在程序中任何位置调用。在 JavaScript 中，function 关键字用于声明或定义函数。

Key Points

  1. 要定义一个函数，请使用 function 关键字，后接函数名称，再后接圆括号 ()。

  2. 在括号中，我们定义参数或属性。

  3. 可重用语句（代码）组包含在花括号 {} 中。每当调用函数时，都会执行此代码。

Syntax

function functionname (p1, p2) {
   function coding…
}

JavaScript Operators

运算符用于对一个、两个或更多操作数执行运算。运算符由符号表示，例如 +, =, *, % 等。以下是 JavaScript 支持的运算符 −

  1. Arithmetic Operators

  2. Comparison Operators

  3. Logical (or Relational) Operators

  4. Assignment Operators

  5. Conditional (or ternary) Operators

  6. Arithmetic Operators

Arithmatic Operators

下表显示了 JavaScript 支持的所有算术运算符 −

Operator

Description

Example

+

Add two operands.

10 + 10 将得到 20

-

从第一个操作数中减去第二个操作数。

10 – 10 将得到 0

*

Multiply two operands.

10 * 30 将得到 300

/

Divide numerator by denominator

10/10 will give 1

%

它称为模运算符，并给出除法的余数。

10 % 10 将得到 0

++

自增运算符，将整数加一

10 ++ 变为 11

 — 

自减运算符，将整数减一

10 – 将变为 9

Comparison Operators

下表显示了 javascript 支持的所有比较运算符 −

Operator

Description

Example

==

检查两个操作数的值是否相等，如果相等，则条件变为真。

10 == 10 将变为真

!=

Not Equal to operator 检查两个操作数的值是否相等，如果不相等，则条件变为真。

10 !=10 将变为假

>

Greater Than operator 检查左操作数的值是否大于右操作数的值，如果大于，则条件变为真。

20 > 10 将变为真

<

Less than operator 检查左操作数的值是否小于右操作数的值，如果小于，则条件变为真。

10 < 20 将变为真

>=

Greater than or equal to operator 检查左操作数的值是否大于或等于右操作数的值，如果大于或等于，则条件变为真。

10 >=20 将变为假

⇐

Less than or equal to operator 检查左操作数的值是否小于或等于右操作数的值，如果小于或等于，则条件变为真。

10 ⇐20 将变为真。

Logical Operators

下表显示了 javascript 支持的所有逻辑运算符 −

Operator

Description

Example

&&

逻辑 AND 运算符当两个操作数都不为零时返回真。

10 && 10 将变为真。

逻辑 OR 运算符当任何操作数不为零时返回真

10

0 will give true.

!

逻辑运算符 NOT 补充其操作数的逻辑状态。

Assignment Operators

下表显示了 JavaScript 支持的所有赋值运算符 −

Operator

Description

Example

=

Simple Assignment operator 将右侧操作数的值赋给左侧操作数。

C = A + B 将 A + B 的值赋给 C

+=

Add AND assignment operator 将右侧操作数添加到左侧操作数，并将结果赋给左侧操作数

C += A 等效于 C = C + A

-=

Subtract AND assignment operator 将右侧操作数从左侧操作数中减去，并将结果赋给左侧操作数

C -= A 等效于 C = C - A

*=

Multiply AND assignment operator 将右侧操作数与左侧操作数相乘，并将结果赋给左侧操作数

C *= A 等效于 C = C * A

/=

Divide AND assignment operator 将左侧操作数除以右侧操作数，并将结果赋给左侧操作数

C /= A 等效于 C = C / A

%=

Modulus AND assignment operator 模运算和赋值运算符，使用两个操作数进行模运算，并将结果赋给左侧操作数

C %= A 等效于 C = C % A

Conditional Operator

它也被称为三元运算符，因为它有三个操作数。

Operator

Description

Example

?:

Conditional Expression

如果条件为真？则值 X：否则值 Y

Control Structure

控制结构实际上控制程序执行的流程。以下是 JavaScript 支持的几个控制结构。

  1. if … else

  2. switch case

  3. do while loop

  4. while loop

  5. for loop

If … else

if 语句是基本的控制语句，它允许 JavaScript 做出决策和有条件地执行语句。

Syntax

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

Example

<script type="text/javascript">
   <!--
      var age = 20;
      if( age > 18 ){
         document.write("<b>Qualifies for driving</b>");
      }
   //-->
</script>

Switch case

switch 语句的基本语法是给予一个表达式进行求值，并根据表达式的值执行多个不同的语句。解释器检查每个情况与表达式的值，直到找到匹配项。如果没有任何匹配项，将使用默认条件。

Syntax

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

Example

<script type="text/javascript">
   <!--
      var grade='A';
      document.write("Entering switch block<br/>");
      switch (grade) {
         case 'A': document.write("Good job<br/>");
            break;
         case 'B': document.write("Pretty good<br/>");
            break;
         case 'C': document.write("Passed<br/>");
            break;
         case 'D': document.write("Not so good<br/>");
            break;
         case 'F': document.write("Failed<br/>");
            break;
         default:  document.write("Unknown grade<br/>")
      }
      document.write("Exiting switch block");
   //-->
</script>

Do while Loop

do…​while 循环类似于 while 循环，不同之处在于条件检查在循环结束时发生。这意味着该循环将始终执行至少一次，即使条件为假。

Syntax

do{
   Statement(s) to be executed;
} while (expression);

Example

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      do{
         document.write("Current Count : " + count + "<br/>");
         count++;
      }while (count < 0);
      document.write("Loop stopped!");
   //-->
</script>

这将生成以下结果：

Starting Loop
Current Count : 0
Loop stopped!

While Loop

while 循环的用途是只要表达式为 true 就重复执行一条语句或代码块。一旦表达式变为 false，则循环将退出。

Syntax

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

Example

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      while (count < 10){
         document.write("Current Count : " + count + "<br/>");
         count++;
      }
      document.write("Loop stopped!");
   //-->
</script>

这将生成以下结果：

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

For Loop

for 循环是最简洁的循环形式，包括以下三个重要部分 −

  1. 初始化循环，我们在其中将计数器初始化为初始值。初始化语句在循环开始前执行。

  2. 测试语句将测试给定条件是否为真或假。如果条件为真，则循环中给出的代码将被执行，否则循环将退出。

  3. 迭代语句，您可以在其中增加或减少计数器。

Syntax

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

示例

<script type="text/javascript">
   <!--
      var count;
      document.write("Starting Loop" + "<br/>");
      for(count = 0; count < 10; count++){
         document.write("Current Count : " + count );
         document.write("<br/>");
      }
      document.write("Loop stopped!");
   //-->
</script>

这将产生与 while 循环类似的以下结果 −

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

Creating Sample Program

以下是展示时间的示例程序，当我们单击按钮时。

<html>
   <body>
      <button onclick="this.innerHTML=Date()">The time is?</button>
      <p>Click to display the date.</p>
      <button onclick="displayDate()">The time is?</button>
      <script>
         function displayDate() {
            document.getElementById("demo").innerHTML = Date();
         }</script>

         <p id="demo"></p>
      </script>
   </body>
</html>

Output

internet js sample program