JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

àì夳堔傛蜴生んèń 2022-12-18 11:54 108阅读 0赞

# [全部章节   >>>>][Link 1] #

--------------------

**本章目录**

1.1 JavaScript 概述

1.1.1 JavaScript 简介

1.1.2 JavaScript 的概念和执行原理

1.1.3 JavaScript 脚本代码的位置

1.1.4 实践练习

1.2 JavaScript 核心语法

1.2.1 变量

1.2.2 数据类型

1.2.3  JavaScript 注释

1.2.5 实践练习

1.3 顺序结构和选择结构

1.3.1 顺序结构

1.3.2 选择结构

1、if单分支语句：

2、if 双分支语句

3、if 多分支语句

4、switch 语句

1.3.3 实践练习

1.4 循环结构

1.4.1 while 循环语句

1、while 循环语句

2、do-while循环语句

3、for循环语句

1.4.4 break 语句和 continue 语句

1.4.5 实践练习

总结：

--------------------

# 1.1 JavaScript 概述 #

## 1.1.1 JavaScript 简介 ##

JavaScript 诞生于 1995 年，主要是进行用户输入的合法性验证

在 1995 年之前，Web 页面的一些验证工作都是由服务器端的语言来实现，这就要求用户输入的数据必须先通过网络传输到服务器端，服务器端进行相应的处理后，再将结果反馈给客户端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

## 1.1.2 JavaScript 的概念和执行原理 ##

JavaScript 是一种轻型的、解释性的脚本语言，是一种由浏览器内的解释器执行的程序语言

当客户端向服务器端请求页面时，服务器端将整个页面包含 JavaScript 的脚本代码发送到客户端，浏览器从上往下逐行读取并解析其中的 HTML 或脚本代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1][]

## 1.1.3 JavaScript 脚本代码的位置 ##

**通常可以在 3 个地方编写 JavaScript 的脚本代码**

*  <script></script> 标签中直接编写脚本程序代码
 *  脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
 *  将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值

**HTML 文件混合方式**

**示例：**

<body>
      <script type="text/javascript">
        document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
      </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2][]

**JS 文件引用方式：**

1.  创建 JavaScript 文件，命名为demo1.js html
2.  页面，在 <script> 标签中引用 JavaScript 文件

> **注意：**带有 src 属性的 <script> 标签不应该在 <script></script> 标签之间包含任何额外的 JavaScript 代码，否则嵌入的代码会被忽略

**HTML 代码嵌入方式**

将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值

<body>
      <a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
    </body>

## [1.1.4 实践练习][1.1.4] ##

# 1.2 JavaScript 核心语法 #

## 1.2.1 变量 ##

**变量有三种使用方式:**

*  先声明再赋值   如：var  message; message="hi";
 *  同时声明和赋值变量   如：var  message="hi";
 *  不声明直接赋值   如：message="hi";

> 变量可以不经声明而直接使用，但是这种方法很容易出错，因此不推荐使用。对变量的输出测试可以采用 alert() 弹出对话框的方式

**变量命名规则:**

*  第一个字符必须是一个字母、下划线（\_）或一个美元符号（$）
 *  其他字符可以是字母、下划线、美元符号或数字
 *  区分大小写
 *  不能与关键字同名，如 while、for 和 if 等

**示例：**

<body>
      <script type="text/javascript">
        var x=2;
        var y=3;
        var z=x+y;
        alert("x="+x+",y="+y+",z="+z);
      </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3][]

## 1.2.2 数据类型 ##

JavaScript 中有 5 种简单数据类型，也称为**基本数据类型**

*  undefined
 *  null
 *  boolean
 *  number
 *  string

另外还有一种复杂数据类型——object对象类型

由于JavaScript中的变量是**弱类型**，可通过typeof操作符获取变量的数据类型

<table> 
 <tbody> 
  <tr> 
   <td> <p>数据类型</p> </td> 
   <td> <p>数据值</p> </td> 
   <td> <p>typeof</p> </td> 
  </tr> 
  <tr> 
   <td> <p>number类型</p> </td> 
   <td> <p>浮点数、整数</p> </td> 
   <td> <p>number</p> </td> 
  </tr> 
  <tr> 
   <td> <p>boolean类型</p> </td> 
   <td> <p>true、false</p> </td> 
   <td> <p>boolean</p> </td> 
  </tr> 
  <tr> 
   <td> <p>string类型</p> </td> 
   <td> <p>单引号或双引号引起来的若干字符</p> </td> 
   <td> <p>string</p> </td> 
  </tr> 
  <tr> 
   <td> <p>null类型</p> </td> 
   <td> <p>只存在一个值null，表示对象不存在</p> </td> 
   <td> <p>object</p> </td> 
  </tr> 
  <tr> 
   <td> <p>undefined类型</p> </td> 
   <td> <p>只存在一个值undefined，表示未赋值或未声明的变量</p> </td> 
   <td> <p>undefined</p> </td> 
  </tr> 
 </tbody> 
</table>

**示例：**

<body>
      <script type="text/javascript">
        var  str="message";
        document.write(typeof  str+"<br/>");
        var  other;
        document.write(typeof  other+"<br/>");
        var  numb=10.0;
        document.write(typeof  numb+"<br/>");
        var  date=new  Date();
        document.write(typeof  date+"<br/>");
        var  bool=1<2;
        document.write(typeof  bool);
      </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4][]

## 1.2.3  JavaScript 注释 ##

JavaScript 与很多语言一样，如 Java、C\# 都支持同样的注释形式

*  单行注释：//
 *  多行注释： /\* 注释内容 \*/

**示例：**

// 声明并初始化一个变量
    var v = 5;
    /* 使用 for 循环输出 Hello5 次 */
    document.write("Hello!<br/>");
    document.write("Hello!<br/>");
    document.write("Hello!<br/>");
    document.write("Hello!<br/>");
    document.write("Hello!<br/>");
    /*
    这些注释不会显示在页面上，
    但是可以通过页面的源代码查看到
    */

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5][]

## [1.2.5 实践练习][1.2.5] ##

# 1.3 顺序结构和选择结构 #

## 1.3.1 顺序结构 ##

顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行

示例：

<body>
      <script type="text/javascript">
        document.write(" 程序开始执行……<br/>");
        document.write(" 程序正在执行中……<br/>");
        document.write(" 程序执行完毕……<br/>");
      </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6][]

## 1.3.2 选择结构 ##

*  选择结构：需要根据特定的条件执行不同的语句
 *  JavaScript中选择结构使用if语句和switch语句
 *  if 语句有 3 种形式：单分支、双分支和多分支

### **1、if单分支语句：** ###

if( 条件表达式 ) {
      语句或语句块
    }

**示例：**

<body>
      <script type="text/javascript">
        var undf;
        if(typeof undf=="undefined") {
          undf="Hello World ！ ";
        }
        document.write(" 名称是："+undf);
      </script>
    </body>

![20201026191727688.png][]

### **2、if 双分支语句** ###

if( 条件表达式 ) {
      语句或语句块 1
    } else{
      语句或语句块 2
    }

**示例：**

![20201026191821318.png][]

> 如何用“变量 = 布尔表达式？语句 1: 语句 2”的条件表达式来简化上述示例中的代码？

### **3、if 多分支语句** ###

if( 条件表达式 1){
      语句或语句块 1
    }
    else  if( 条件表达式 2){
      语句或语句块 2
    }......
    else  if( 条件表达式 n){
      语句或语句块 n
    }
    else{
      语句或语句块 n+1
    }

**示例：**

> Date 是 JavaScript 的内置对象，通过它可以获取时间

<body>
      <script type="text/javascript">
        var  time=new  Date();  // 创建 Date 对象
        var  hour=time.getHours();  // 当前小时
        if(hour<=11){
          document.write(" 早上好 ");
        }else  if(hour<=18){
          document.write(" 下午好 ");
        }else{
          document.write(" 晚上好 ");
        }
      </script>
    </body>

![20201026191926627.png][]

### **4、switch 语句** ###

switch（表达式）{
      case 取值 1：语句或语句块 1;  break;
      case 取值 2：语句或语句块 2;  break;
      ......
      case 取值 n：语句或语句块 n;  break;
      default: 语句或语句块 n+1;  break;
    }

**示例：**

var time=new  Date();
        var week=time.getDay();
        var weekstr;
        switch(week){
          case 1: weekstr=" 一 ";
          case 2: weekstr=" 二 ";
          case 3: weekstr=" 三 ";
          case 4: weekstr=" 四 ";
          case 5:
            weekstr=" 五 ";
            document.write(" 今天是星期 "+weekstr+", 努力工作吧！ ");
            break;
          default:
            document.write(" 今天是周末，放松一下吧！ ");
            break;    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7][]

## [1.3.3 实践练习][1.3.3] ##

# 1.4 循环结构 #

## 1.4.1 while 循环语句 ##

JavaScript中，循环结构有 **while** 循环、**do-while** 循环和 **for** 循环

### **1、while** 循环语句 ###

while（条件表达式）{
      语句或语句块
    }

**示例：**

<table border="1" width="100%">
        <tr align="center">
          <td> 摄氏温度 </td>
          <td> 华氏温度 </td>
        </tr>
        <script type="text/javascript">
          var f;          // 华氏温度
          var c=0;        // 摄氏温度
          var count=1;      // 条目
          while(count <= 10 && c <= 250){
            f=c*9/5.0+32; // 转换关系
            document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
            c=c+20;
            count++;
          }
        </script>
      </table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8][]

### **2、do-while循环语句** ###

do{
      语句或语句块
    }while( 条件表达式 );

**示例：**

![20201026192501501.png][]

### **3、for循环语句** ###

for( 初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式 ){
      语句或语句块
    }

**示例：**

<table border="1" width="100%">
        <tr align="center">
          <td> 摄氏温度 </td>
          <td> 华氏温度 </td>
        </tr>
        <script type="text/javascript">
          var f;// 华氏温度
          for(var  c=0,count=1;count<=10&&c<=250;c=c+20,count++){
            f=c*9/5.0+32;   // 转换关系
            document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
          }
        </script>
      </table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 9][]

## 1.4.4 break 语句和 continue 语句 ##

JavaScript跳转语句：break语句和continue语句

break语句用于中断循环

continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环

**示例：**

var i=1;
        var sum=0;
        while(i<=20){
          if(i%2!=0){
            i++;
            continue;  // 是奇数就结束本次循环，开始下一次循环
          }
          sum=sum+i;
          if(sum>30){
            document.write(" 当加到："+i+" 时，累加和已经超过 30");
            break;    // 累加和超过 30，跳出循环
          }
          i++;
        }

![20201026192823465.png][]

## [1.4.5 实践练习][1.4.5] ##

# 总结： #

*  JavaScript是由浏览器的解释器解释执行的程序语言
 *  JavaScript脚本在客户端执行，从而间接地提升了Web服务器的性能
 *  JavaScript的变量是采用弱类型的形式 JavaScript中有五种简单数据类型
 *  JavaScript用typeof操作符来检测给定变量的数据类型
 *  JavaScript的运算符有算术运算符、赋值运算符、比较运算符和逻辑运算符
 *  JavaScript的流程控制语句有顺序结构、选择结构和循环结构。
 *  JavaScript中选择结构有if和switch。循环结构有while、do…while和for

[Link 1]: https://blog.csdn.net/weixin_44893902/article/details/109329380
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221122/038d63d3a6644cc3b3e78b122d372945.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221122/3f1d5377b62e4e96ba5c3e8a8ef0955d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: /images/20221122/f34dcfab96f74bdb9b62ac436d76b837.png
[1.1.4]: https://blog.csdn.net/weixin_44893902/article/details/109331092
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: /images/20221122/d12228387d8249158283f50013faa323.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: /images/20221122/3390b3d86c6849ff8a16a9b5c0db4788.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: /images/20221122/a7dcfb1a40114e3ca5efc3cb2403c226.png
[1.2.5]: https://blog.csdn.net/weixin_44893902/article/details/109368747
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]: /images/20221122/5f0392cb40c14e74b0fc71e84e244b50.png
[20201026191727688.png]: /images/20221122/05890e60b28243a88a20eab65a7fe9f3.png
[20201026191821318.png]: /images/20221122/375eb580b06b447ea4275c5a69e6965a.png
[20201026191926627.png]: /images/20221122/53758c841d164aafa84e264f3087d2d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]: /images/20221122/3d82a9901d064c7e96f483279c7efb3e.png
[1.3.3]: https://blog.csdn.net/weixin_44893902/article/details/109368883
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]: /images/20221122/b2cf564e29754325a43c5042e92b106a.png
[20201026192501501.png]: /images/20221122/c42c4ded11ad40cab03143ed2ac5b5f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 9]: /images/20221122/296d99c7da78448b96c2d2086e1213f0.png
[20201026192823465.png]: /images/20221122/3899d1a98c2a4c0fa5be1ab2890d74a3.png
[1.4.5]: https://blog.csdn.net/weixin_44893902/article/details/109369000