---

JavaScript

更新于 2024/5/31 13:35:57

简介

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

JavaScript 代码不是编译的，而是由翻译者翻译的。 该翻译器嵌入到浏览器中，负责翻译 javascript 代码。

要点

• 它是轻量级的解释性编程语言。

• 它专为创建以网络为中心的应用程序而设计。

• 它是 Java 的补充和集成。

• 它是 HTML 的补充和集成

• 它是一个开放且跨平台的

JavaScript 语句

JavaScript 语句是告诉浏览器执行什么操作的命令。 语句之间用分号 (;) 分隔。

JavaScript语句构成了JavaScript代码，浏览器逐行翻译。

JavaScript 语句示例:

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

下表显示了各种 JavaScript 语句 −

JavaScript 注释

JavaScript 支持 C 风格和 C++ 风格注释，因此:

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

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

• JavaScript 还可以识别 HTML 注释开头序列 <!--. JavaScript 将其视为单行注释，就像 // 注释一样。-->

• HTML 注释结束序列 --> 无法被 JavaScript 识别，因此应写为 //-->。

Example

<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 变量

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

JavaScript 中声明变量的规则

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

• 在 JavaScript 中，变量名区分大小写，即 a 与 A 不同。

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

• 数字(0 到 9)只能用在字母后面。

• 变量名称中不允许使用其他特殊字符。

在 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 数据类型

有如下两种数据类型 −

• 原始数据类型

• 非原始数据类型

下表描述了 javaScript 中可用的原始数据类型

The following table describes Non-Primitive Data Types in javaScript

JavaScript 函数

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

要点

• 要定义函数，请使用 function 关键字，后跟函数名，然后是括号 ()。

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

• 一组可重用语句(代码)包含在大括号 {} 中。 每当调用函数时都会执行此代码。

Syntax

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

JavaScript 运算符

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

• 算术运算符

• 比较运算符

• 逻辑(或关系)运算符

• 赋值运算符

• 条件(或三元)运算符

• 算术运算符

算术运算符

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

比较运算符

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

逻辑运算符

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

赋值运算符

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

Conditional Operator

It is also called ternary operator, since it has three operands.

控制结构

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

• if … else

• switch case

• do while loop

• while loop

• for loop

If … else

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

语法

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

示例

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

switch case

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

语法

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

示例

<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 循环

do...while 循环与 while 循环类似，只是条件检查发生在循环末尾。 这意味着即使条件为 false，循环也将始终至少执行一次。

语法

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

示例

<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 循环

while循环的目的是只要表达式为真，就重复执行语句或代码块。 一旦表达式变为假，循环就会退出。

语法

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

示例

<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 循环

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

• 循环初始化，我们将计数器初始化为起始值。 初始化语句在循环开始之前执行。

• 测试语句将测试给定条件是否为真。 如果条件为 true，则将执行循环内给出的代码，否则将出现循环。

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

Syntax

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

Example

<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! 

创建示例程序

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

<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>

输出

---