6.JavaScript基本语法

本章目标

JavaScript简介
基本语法
控制语句
循环语句

本章内容

一、JavaScript简介

1、简介

JavaScript是网景（Netscape）公司开发的一种基于客户端浏览器、基于面向对象、事件驱动式的网页脚本语言。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。最初命名为Mocha，1995年9月改名为LiveScript；同年12月，被重命名为JavaScript，当时Netscape公司与Sun组成的开发联盟为了让这门语言搭上Java这个编程语言“热词”，因此将其临时改名为JavaScript，日后这成为大众对这门语言有诸多误解的原因之一

2、作用

主要作用体现在：交互式操作、表单验证、网页特效、Web游戏、服务器脚本开发等。

3、特点

JavaScript是一种解释性脚本编写语言。
JavaScript是基于对象的脚本编程语言。
简单性。
安全性。
动态性的。
跨平台性。

4、应用方式

我们几乎可以使用<script>标签将 JavaScript 程序插入到 HTML 文档的任何位置。脚本可以放置在HTML页面的<head>或<body>中，具体取决于您希望何时加载脚本.

JavaScript的代码嵌入到HTML页面中的三种方式:

使用 <script> 标签将语句嵌入文档
将 JavaScript 源文件链接到 HTML 文档中
标签属性通过javascript:来引用函数

4.1、使用 <script> 标签将语句嵌入文档

<body>
    <script type="text/javascript">
        alert("直接运行的JavaScript");
    </script>
</body>

4.2、导入外部的JavaScript文件

为了让HTML页面和JavaScript脚本更好地分离，我们可以将JavaScript脚本单独保存到一个.js文件，HTML页面导入该.js文件即可。

hello.js

document.write("hello js");

页面引入

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

script标签的 src（源文件）属性可用于链接外部js文件

4.3、标签属性通过javascript:来引用函数

<a href="javascript:alert('使用前缀运行JavaScript')；">
    运行JavaScript
</a>

二、基本语法

1、变量

变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。

变量名必须以字母或美元符号（“$”）和下划线（“_”）开头
变量可以包含数字、从 A 至 Z 的大小写字母
JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量

2、声明变量

声明变量

var  a; //"var" －  用于声明变量的关键字 " a " － 变量名

赋值

a = 10;

同时声明和初始化变量

var a= 10;

声明多个变量

var x, y, z = 10;

示例

<HTML>
<HEAD>
    <TITLE>使用变量</TITLE>
    <SCRIPT LANGUAGE="Javascript">
        var x;
        x = prompt("淘宝网竟拍，请出一口价", 1);
        // "+"用来连接多个字符串
        document.write("拍卖价格" + x + "<BR>");
        document.write("恭喜您，您以最高价拍卖成功！");
        alert("欢迎下次光临！");
    </SCRIPT>
</HEAD>
</HTML>

3、常量

常量也就意味着声明之后值不能改变，通过关键字const声明一个只读的常量。一旦声明，常量的值就不能改变

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

const PI = 3.1415;
PI // 3.1415

PI = 3;

4、转义字符

字符	说明	示例
退格符	alert(“这是第一句是第二句”)
换页符	alert(“这是第一句是第二句”)
	换行符	alert(“这是第一句这是第二句”)
回车符	alert(“这是第一句是第二句”)
制表符	alert(“这是第一句是第二句”)

5、数据类型

数据类型	说明	示例
数字型	整数或实数	487, 25.95
逻辑型或布尔型	执行逻辑运算	true或 false
字符串型	一组字符	“Hello”
空	特殊关键字，表示不存在的值。	null

5.1、“+”号的用法

<HTML>

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        var x = 100;
        var y;
        var z;
        document.write("<H2>竞拍SONY数码相机 600万像素" + x + "$起价</H2>");
        y = prompt("加多少银子？", "1");
        z = x + y;
        alert("您最终的出价\n" + z + "$");  //"\n"用于换行显示
    </SCRIPT>
</HEAD>

<body>
</body>
</HTML>

先点击幻灯片演示效果，原价100$，竞拍时输入加的银子数：假定200,根据显示结果：您的最终出价应该是100200，程序是不是有bug

parseFloat( )函数将字符串转换为float数据

parseInt( )函数将字符串转换为int数据如果转换失败，返回NaN值(not a number)

6、运算符

运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：

算术运算符
比较运算符
逻辑运算符

6.1、算术运算符

运算符	说明	示例
+	加	a = 5 + 8
-	减	a = 8 - 5
/	除	a = 20 / 5
*****	乘	*a = 519**
%	取模－两个数相除的余数	10 % 3 = 1
++	一元自加。该运算符带一个操作数，将操作数的值加 1	++x， x++
–	一元自减。该运算符只带一个操作数。	–x， x–

++x将返回 x 自加运算后的值。 x++ 将返回 x 自加运算前的值

–x 将返回 x 自减运算后的值。 x– 将返回 x 自减运算前的值

示例：

<HTML>

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">

        function calcu() {  //定义calcu( )函数，实现两个数相乘的功能。
            var numb1 = document.calc.num1.value; /*定义变量numb1，并获取标单中输入的数据：document.表单名.表单元素名.value，然后把获取的表单值赋给变量numb1*/
            var numb2 = document.calc.num2.value;
            var total = parseFloat(numb1) * parseFloat(numb2);
            document.calc.result.value = total;
        }
    </SCRIPT>
</HEAD>

<BODY>
    <FORM name="calc">
        <P><IMG src="logo.gif" width="247" height="40"><BR>
            <font size="5">会说话的QQ竞拍喽！</font><BR>
            <img src="qie.jpg" width="199" height="91"> <BR>
            竟拍价格：
            <INPUT name="num2" TYPE="text" id="num2" value="120" size="15"> <BR>
            购买数量：
            <INPUT TYPE="text" name="num1" size="15">
            <BR>
            预计总价：
            <INPUT name="result" TYPE="text" size="15">
        </P>
        <P>
            <INPUT name="getAnswer" TYPE="button" id="getAnswer" onClick="calcu()" value="计算看看">
        </P>
    </FORM>
</BODY>

</HTML>

暂时不关注函数，后面再具体讲解

6.2、比较运算符

运算符	说明	示例
==	等于。如果两个操作数相等，则返回真。	a == b
!=	不等于。如果两个操作数不相等，则返回真。	Var2 != 5
>	大于。如果左边的操作数大于右边的操作数，则返回真。	Var1 > var2
<	小于。如果左边的操作数小于右边的操作数，则返回真。	Var2 < var1
<=	小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。	Var2 <= 4 Var2 <= var1
>=	大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。	Var1 >= 5 Var1 >= var2

示例：

<HTML>
<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        function calcu() {
            var numb1 = document.calc.num1.value;
            var numb2 = document.calc.num2.value;
            var total = parseFloat(numb1) * parseFloat(numb2);
            document.calc.result.value = total;
            if (total > 500) {//条件成立时执行
                alert("购买总价超过500\n支付时将赠送超级Q币2枚！");
            }
        }
    </SCRIPT>
</HEAD>
….其他代码略，同上例

条件成立时执行

6.3、逻辑运算符

运算符	值	说明
与( && )	expr1 && expr2	只有当 expr1 和 expr2 同为真时，才返回真(true)。否则，返回假(false)。
**或(		)**
非( ! )	!expr	如果表达式为真，则返回假(false)。如果为假，则返回真(true)。

示例：

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        function calcu() {
            var numb1 = document.calc.num1.value;
            var numb2 = document.calc.num2.value;
            var total = parseFloat(numb1) * parseFloat(numb2);
            document.calc.result.value = total;
            if ((total > 500) && (total <= 1000)) {
                alert("购买总价超过500\n支付时将赠送超级Q币2枚！");
            }
            if ((total > 1000) && (total <= 2000)) {
                alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！");
            }
            if ((total > 2000)) {
                alert("购买总价超过2000\n请直接与贵宾台联系！");
            }
        }
    </SCRIPT>
</HEAD>
….其他代码略，同上例

500－1000 之间，赠送超级Q币两枚；

1000－2000之间，赠送IBM智能鼠标一只；

2000以上，直接与贵宾台联系。

6.4、`==`和`===`的区别

JavaScript 有两个表示相等的运算符：“相等”（==）和“严格相等”（===）。

相等运算符会自动转换变量类型，造成很多意想不到的情况

==只判断数值不判断数据类型，而===判断数值也判断数据类型；
用==作比较时可以自动转换数据的类型，而===不可以自动转换数据的类型；
===更加严谨，建议使用===；

因此，建议不要使用相等运算符（），只使用严格相等运算符（=）。

三、控制语句

1、if 语句

条件语句用于测试条件

if(条件){
   JavaScript代码;
 }

如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。但如果只要执行一个语句，则可以省略大括号

示例：

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        function calcu() {
            var numb1 = document.calc.num1.value;
            var numb2 = document.calc.num2.value;
            if ((numb1 != "") && (numb2 != "")) {
                var total = parseFloat(numb1) * parseFloat(numb2);
                document.calc.result.value = total;
                if ((total > 500) && (total <= 1000)) {
                    alert("购买总价超过500\n支付时将赠送超级Q币2枚！");
                }
                if ((total > 1000) && (total <= 2000)) {
                    alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！");
                }
                if ((total > 2000)) {
                    alert("购买总价超过2000\n请直接与贵宾台联系！");
                }
            }
        }
    </SCRIPT>
</HEAD>….其他代码略，同上例

如果输入框中的数据用户漏填了，出现NaN的 bug 为什么呢?

2、if else 语句

if(条件){
   //JavaScript代码;
}
else{
  //JavaScript代码;
}

示例

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        function calcu() {
            var numb1 = document.calc.num1.value;
            var numb2 = document.calc.num2.value;
            if ((numb1 != "") && (numb2 != "")) {
                var total = parseFloat(numb1) * parseFloat(numb2);
                document.calc.result.value = total;
                if ((total > 500) && (total <= 1000)) {
                    alert("购买总价超过500\n支付时将赠送超级Q币2枚！");
                }
                if ((total > 1000) && (total <= 2000)) {
                    alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！");
                }
                if ((total > 2000)) {
                    alert("购买总价超过2000\n请直接与贵宾台联系！");
                }
            } else {
                alert("购买数量或竞拍价格没有填写\n请重新输入！");
            }
        }
    </SCRIPT>
</HEAD>

3、嵌套 if 语句

语法：

if (条件1){
  if (条件2){
   //JavaScript代码;
  }
}

示例

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        function calcu() {
            var numb1 = document.calc.num1.value;
            var numb2 = document.calc.num2.value;
            if ((numb1 != "") && (numb2 != "")) {
                if (parseFloat(numb1) < 0) {
                    alert("竞拍价格不能小于零！\n请重填");
                    return; //函数返回，不再执行后面的代码
                }
                if (parseFloat(numb2) < 0) {
                    alert("购买数量不能小于零！\n请重填");
                    return;
                }
                var total = parseFloat(numb1) * parseFloat(numb2);
                document.calc.result.value = total;
            }
        }
    </SCRIPT>
</HEAD>

4、switch 语句

switch (表达式){
    case 常量1 :
            JavaScript语句;
    break;
      case 常量2 :
    JavaScript语句;
    break;
    ...
      default :
           JavaScript语句;
}

示例：

var f=document.calc.pay.value; //支付方式代号
  var grade; //折扣率
  var total= parseFloat(numb1)*parseFloat(numb2);
  switch(parseInt(f)) {
    case 1: grade=0.6 ;  //打6折优惠
            break;
    case 2:  …….同理其他方式打7折、八折
    case 4: grade=0.9 ;  //打9折优惠
            break;
    default:alert("请重新选择支付方式！");
            return;
  }
 var money=total*grade;  //根据折扣率，计算实际总价
  document.calc.result.value=money;
  alert("您享受了"+grade*10+"折优惠！");

四、循环语句

1、数组（array对象）

array提供对创建任何数据类型的数组的支持

arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

arrayObj : 必选项。要赋值为 Array 对象的变量名。

Size : 可选项。数组的大小。由于数组的下标是从零开始，创建的元素的下标将从零到 size -1。element0,…,

elementN : 可选项。要放到数组中的元素。这将创建具有n + 1 个元素的长度为 n + 1 的数组。使用该语法时必须有一个以上元素。

声明数组：

var 数组名 = new Array(数组大小);
  例： var emp = new Array(3)

添加元素

emp[0] = "AA";
emp[1] = "BB";
emp[2] = "CC";

声明数组并赋初值：

例： var emp = new Array("AA"，"BB"，"CC")；

示例：

<HTML>

<HEAD>
    <TITLE>使用数组</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
        var emp = new Array(3);
        emp[0] = "Ryan Dias";
        emp[1] = "Graham Browne";
        emp[2] = "David Greene";
        document.write("数组emp中的数据为:<HR>");
        document.write(emp[0] + "<BR>");
        document.write(emp[1] + "<BR>");
        document.write(emp[2] + "<BR>");
    </SCRIPT>
</HEAD>

</HTML>

常用属性：

length ：返回数组中元素的个数常用方法

常用方法：

方法	说明
join	将数组中的元素组合成字符串
reverse	颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个
sort	对数组元素进行排序

<HTML>

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
        var emp = new Array(3);
        emp[0] = "Ryan Dias";
        emp[1] = "Graham Browne";
        emp[2] = "David Greene";
        emp.sort();
        document.write("排序结果是：<HR>");
        document.write(emp[0] + "<BR>");
        document.write(emp[1] + "<BR>");
        document.write(emp[2] + "<BR>");
    </SCRIPT>
</HEAD>

</HTML>

2、For循环

for循环 语法结构
for (表达式;表达式;表达式){
  // 语句;
}

示例：

<HTML>

<HEAD>
    <TITLE>For 循环演示</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
        document.write("<H2 align=center>打印金字塔直线</H2>");
        for (var i = 0; i < 100; i = i + 5) {
            document.write("<HR align=center width=" + i + "%>");
        }
    </SCRIPT>
</HEAD>

<BODY>
</BODY>

</HTML>

3、while循环

语法结构

       while(循环条件){
        //语句；
     }

示例：

<HEAD>
    <STYLE type="text/css">
        .myfont {
            font-size: 150;
            color: #c99c96;
            font-family: Webdings;
            /* 产生埃及图像的特殊字体 */
        }
    </STYLE>
    <script language="JavaScript">
        document.write("<H3>每个字符都对应一个漂亮的埃及图像</H3>");
        var c = '';
        while(c != "N" && c != "n") {
            c = prompt("输入一个字符，输入N 或n停止", "A");
            document.write("<font class=myfont >" + c + "</font>");
        }
    </SCRIPT>
</HEAD>

4、do－while循环

语法结构

     do{
      //语句；
    }while(循环条件);

示例：

<HEAD>
    <STYLE type="text/css">
        .myfont {
            font-size: 150;
            color: #c99c96;
            font-family: Webdings; /* 产生埃及图像的特殊字体 */
        }
    </STYLE>
    <script language="JavaScript">
        document.write("<H3>每个字符都对应一个漂亮的埃及图像</H3>");
        do {
            var c = prompt("输入一个字符，输入N 或n停止", "A");
            document.write("<font class=myfont >" + c + "</font>");
        } while (c != "N" && c != "n");
    </SCRIPT>
</HEAD>

posted @ 2025-04-14 15:19 icui4cu 阅读(21) 评论(0) 收藏举报

刷新页面返回顶部

icui4cu

6.JavaScript基本语法

本章目标

本章内容

一、JavaScript简介

1、简介

2、作用

3、特点

4、应用方式

二、基本语法

1、变量

2、声明变量

3、常量

4、转义字符

5、数据类型

5.1、“+”号的用法

6、运算符

6.1、算术运算符

6.2、比较运算符

6.3、逻辑运算符

6.4、==和===的区别

三、控制语句

1、if 语句

2、if else 语句

3、嵌套 if 语句

4、switch 语句

四、循环语句

1、数组（array对象）

2、For循环

3、while循环

4、do－while循环

公告

6.4、`==`和`===`的区别