全部章节   >>>>


本章目录

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 页面的一些验证工作都是由服务器端的语言来实现,这就要求用户输入的数据必须先通过网络传输到服务器端,服务器端进行相应的处理后,再将结果反馈给客户端

1.1.2 JavaScript 的概念和执行原理

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

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

1.1.3 JavaScript 脚本代码的位置

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

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

HTML 文件混合方式

示例:

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

JS 文件引用方式:

  1. 创建 JavaScript 文件,命名为demo1.js html
  2. 页面,在 <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>

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>

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

1.2.5 实践练习

1.3 顺序结构和选择结构

1.3.1 顺序结构

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

示例:

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

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>

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>

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

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

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>

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>

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>

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

1.4.5 实践练习

总结:

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

JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】的更多相关文章

  1. JavaScript交互式网页设计作业目录(作业笔记)

    JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...

  2. JavaScript交互式网页设计笔记 • 【目录】

    章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...

  3. 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...

  4. 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...

  5. 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...

  6. JavaScript交互式网页设计 • 【第5章 JavaScript对象】

    全部章节   >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...

  7. JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

    全部章节   >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...

  8. JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】

    全部章节   >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...

  9. JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】

    全部章节   >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...

随机推荐

  1. 【leetcode】121. Best Time to Buy and Sell Stock(股票问题)

    You are given an array prices where prices[i] is the price of a given stock on the ith day. You want ...

  2. 【STM8】STM8S介绍(编程环境、烧录、芯片内容)(Vcap需要一个电容接地)

    这篇博客的介绍大纲 [1]我使用的开发板和烧录器 [2]编程环境 [3]烧录软件和界面 [4]芯片内容 [1]我使用的开发板和烧录器 首先,我用的是STM8S003F3P6这款开发板,淘宝上就有了,5 ...

  3. Simulating final class in C++

    Ever wondered how can you design a class in C++ which can't be inherited. Java and C# programming la ...

  4. HelloWorldDynamic

    package mbeanTest; import java.lang.reflect.Method; import javax.management.Attribute; import javax. ...

  5. soapui pro 5.1.2 的破解方法

    Protection-4.6,和scz.key这两个文件能破解5.1.2的SoapUI 的Pro版本,mac 和 windows均可.1.拷贝Protection-4.6.jar到soapui安装的l ...

  6. Playing with Destructors in C++

    Predict the output of the below code snippet. 1 #include <iostream> 2 using namespace std; 3 4 ...

  7. awk统计命令(求和、求平均、求最大值、求最小值)

    本节内容:awk统计命令 1.求和 cat data|awk '{sum+=$1} END {print "Sum = ", sum}' 2.求平均 cat data|awk '{ ...

  8. 统计网卡流量的两段shell脚本(使用ifconfig)

    一个很小巧的shell脚本,使用ifconfig的不间断输出来统计网卡的流量,有需要的朋友可以参考下 使用shell脚本计算Linux网卡流量,方法中最关键点: ifconfig $eth_name ...

  9. shell脚本计算Linux网卡流量

    本文介绍了计算linux网卡流量的一个shell脚本,一个通过固定间隔时间获取ifconfig eth0 的字节值而计算出网卡流量的方法,有需要的朋友参考下. 使用shell脚本计算Linux网卡流量 ...

  10. ASP.NET Core中使用漏桶算法限流

    漏桶算法是限流的四大主流算法之一,其应用场景各种资料中介绍的不多,一般都是说应用在网络流量控制中.这里举两个例子: 1.目前家庭上网都会限制一个固定的带宽,比如100M.200M等,一栋楼有很多的用户 ...