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

程序员文章站 2024-01-23 11:26:22

目录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 多分....

全部章节 >>>>

本章目录

1.1 JavaScript 概述

1.1.1 JavaScript 简介

1.1.2 JavaScript 的概念和执行原理

1.1.3 JavaScript 脚本代码的位置

1.4.4 break 语句和 continue 语句

1.4.5 实践练习

总结：

1.1 JavaScript 概述

1.1.1 JavaScript 简介

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

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

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

1.1.2 JavaScript 的概念和执行原理

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

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

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

1.1.3 JavaScript 脚本代码的位置

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

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

HTML 文件混合方式

示例：

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

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

JS 文件引用方式：

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

<body>
  <script src="../js/demo1.js" type="text/javascript"></script>
</body>

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

HTML 代码嵌入方式

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

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

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>

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

1.2.2 数据类型

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

undefined
null
boolean
number
string

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

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

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

示例：

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

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

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/>");
/*
这些注释不会显示在页面上，
但是可以通过页面的源代码查看到
*/

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

1.2.5 实践练习

1.3 顺序结构和选择结构

1.3.1 顺序结构

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

示例：

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

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

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>

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

2、if 双分支语句

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

示例：

  <script type="text/javascript">
    var x=-4,y;
    if(x>0){
      y=x;
    }else{
      y=-x;
    }
    document.write(x+' 的绝对值是：'+y);
  </script>

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

如何用“变量 = 布尔表达式？语句 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>

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

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

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

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>

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

2、do-while循环语句

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

示例：

  <script type="text/javascript">
    var i=1;
    var num=1;
    do{
      i++;
      num=num*i;
    }while(i<5);
    document.write("i="+i+",num="+num);
  </script>

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

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>

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

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++;
    }

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

1.4.5 实践练习

总结：

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

本文地址：https://blog.csdn.net/weixin_44893902/article/details/109296192

相关标签： JavaScript交互式学习笔记 js javascript java web

上一篇： CVTE 2017 内推笔试整理

下一篇： C++笔试题(二).CVTE

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

全部章节 >>>>

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 实践练习

总结：