JavaScript的基本语法

本文介绍了JavaScript的基础知识,包括其发展历史、组成结构、基本语法及如何在网页中引用。此外还详细讲解了数据类型、运算符及常用的输入输出方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.1 什么是JavaScript
    JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性能的脚本语言。它与HTML超文本标记语言一起,在一个Web页面中链接多个对象,与Web客户实现交互。无论是在客户端还是在服务器端,JavaScript应用程序都要下载到浏览器的客户端执行,从而减轻了服务器端的负担。
    1992年,一家Nombas的公司开发了一种叫做Cmm的嵌入式脚本语言,并把它捆绑在一个叫做CEnvi的产品中。它首次向人们展示了这种语言的威力,之后Nombas把Cmm的名字改成了ScriptEase。
    当Netscape在1995年把JavaScript首次运用在互联网上时,因为它可以同时在浏览器和服务器端使用,所以立即得到了人们的认可,从此JavaScript变成了互联网的必备组件。随着客户端脚本的需求逐渐增大,微软进军浏览器,发布了IE 3.0,并搭载了一个JavaScript的克隆版,叫做JScript。此时,有三种不同的JavaScript版本同时存在,Netscape的JavaScript、IE的JScripte和CEnvi的ScriptEase。
    JavaScript没有一个标准来统一其语法或特性,而这三种不同的版本恰恰突出了这个问题。为了解决这一问题,JavaScript 1.1作为一个草案提交给欧洲计算机制造商协会(ECMA),最终ECMA-262标准应运而生,该标准定义了叫做ECMAScript的脚本语言。之后国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript作为标准,从此JavaScript开始踏入了标准时代。


1.2 JavaScript的组成


①ECMAScript标准
    尽管ECMAScript是一个重要的标准,但它并不是JavaScript唯一的部分,当然也不是唯一被标准化的部分。实际上,一个完整的JavaScript是由以下三个不同的部分组成的。
    ①核心语法(ECMAScript)②浏览器对象模型(BOM)③文档对象模型(DOM)


ECMAScript标准
    ECMAScript的一种开放的、国际上广为接受的、标准的的脚本语言规范。它不与任何具体的浏览器绑定,实际上,它也没有提到用于任何用户输入输出的方法。那么ECMAScript标准主要对哪些内容实行了规范呢?简单地说,ECMAScript主要描述了一下内容。
    ①语法。
    ②变量和数据类型。
    ③运算符。
    ④逻辑控制语句。
    ⑤关键字、保留字。
    ⑥对象。
    ECMAScript是一个描述,规定了脚本语言的所有属性、方法和对象的标准,因此在使用Web客户端脚本语言编码时一定要遵循ECMAScript标准。


②浏览器对象模型(BOM)
    BOM是Browser Object Model(浏览器对象模型)的简称,提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而减轻开发人员的劳动,提高设计Web页面的能力。BOM是一个分层结构,如下图所示
Window
      ║
  ╭═════════════════════════════╮
history document    location
  ║
  ╭═════════════════════════════╮
link  form    anchor
  ║
  ╭═════════════════════════════╮
botton    checkbox     text    …… textarea   radio    select




可以看到,Window对象是整个BOM的核心,在浏览器中打开网页后,我们首先看到的浏览器窗口,即最顶层的Window对象。其次就是我们看到的网页文档内容,即Document文档,它的内容包括一些超链接(link)、表单(form)、锚(anchor)等,表单由文本框(Text)、单选按钮(radio)、按钮(button)等表单元素组成。在浏览器对象结构中,除了document文档对象外,Window对象之下还有两个对象:地址对象(location)和历史对象(history),它们对应于IE浏览器中的地址栏和前进/后退按钮,我们可以利用这些对象的方法,实现类似的功能。因此使用BOM通常可实现如下功能。
    ①弹出新的浏览器窗口。
    ②移动、关闭浏览器窗口以及调整窗口的大小。
    ③在浏览器窗口中实现页面的前进、后退功能。


③文档对象模型(DOM)
    DOM是Document Object Model(文档对象模型)的简称,是HTML文档对象模型(HTML DOM)定义的一套标准方法,用来访问和操纵HTML文档。DOM由万维网联盟(World Wide Web Consortium,W3C)定义,最新的浏览器都支持第一级和第二级DOM(第一级和第二级DOM是一种标准),这样使用JavaScript就可以控制整个网页。
    自从W3C建立了DOM标准(W3C DOM)以及DOM得到所有浏览器的支持以来,DOM在实际应用中越来越广泛。DOM提供了一组按树状结构组织的HTML文档,树状结构中每一个对象称为一个节点,每一个对象都有一个或多个属性和方法。如下图所示
        文档:document
      ║
    根节点:<HTML>
  ║
  ╭═════════════════════════════╮
元素:<head> 元素:<body>
  ║           ╭═════════╮
元素:<title>                  属性:href═══元素<a>           元素<h1>
  ║   ║           ║
文本:“文档标题”               文本:我的链接     文本:我的标题


在DOM中,无论对象是什么,每一个对象都被称为一个节点。节点又分为根节点、父节点、子节点、兄弟节点和叶子节点。最顶层的节点称作根节点,如上图所示,这里的根节点是<html>、<head>和<body>是父节点<heml>的两个子节点。拥有相同的父节点的两个或两个以上的节点称作兄弟节点,如<head>和<body>就是一对兄弟节点。位于树状结构底部的节点称作叶子节点,如"文档标题"、"href"、"我的连接"、"我的标题"。除了根节点和叶子节点外,其他每个节点都有一个父节点、一个或多个子节点。


1.3 脚本的基本结构
    通常,JavaScript代码是用<script>标签嵌入HTML文档中的。可以将多个脚本嵌入到一个文档中,只需将每个脚本都封装在<script>标签中即可。浏览器在遇到<script>标签时,将逐行读取内容,直到遇到</script>结束标签为止。然后,浏览器将检查JavaScript语句的语法,如果有任何错误,就会在警告框中显示;如果没有错误,浏览器将编译并执行。
    1.脚本的基本结构
    脚本的基本结构如下:
    <script type="text/JavaScript">
    <!--JavaScript语句;
    -->
    </script>
    <!--语句-->是注释标签。这些标签用于告知不支持JavaScript浏览器忽略标签中包含的语句。<!--表示开始注释标签,-->则表示结束注释标签。这些标签是可选的,但最好在脚本中使用这些标签。目前大多数浏览器都支持JavaScript,但使用注释标签可以确保不支持JavaScript的浏览器会忽略嵌入。到HTML文档中的JavaScript语句。
    2.脚本的执行原理
    在脚本的执行过程中,浏览器客户端与应用服务器端采用请求/响应模式进行交互。
    (1)浏览器接受用户的请求:一个用户在浏览器的地址栏中输入要访问的页面(页面中包含JavaScript脚本程序)。
    (2)向服务器端请求某个包含JavaScript脚本的页面,浏览器把请求消息(要打开的页面信息)发送到应用服务器端,等待服务器端的响应。
    (3)应用服务器端响应消息,既包含有脚本的HTML文本发送到浏览器客户端,然后由浏览器从上至下逐条解析HTML标签和JavaScript脚本,并将页面效果呈现给用户。
    使用客户端脚本的好处有以下两点。
    (1)含脚本的页面只要下载一次即可,这样能减少不必要的网络通信。
    (2)脚本程序是由浏览器客户端执行,而不是由服务器端执行,因此能减轻服务器端的压力。
    3.在网页中引用JavaScript的方式
    (1)使用<Script>标签
    (2)使用外部JavaScript文件
    (3)直接在HTML中使用:<input name="btn" type="button" value="弹出消息框" onclick="JavaScript:alert("欢迎你")">
    
1.4 JavaScript核心语法
    1.JavaScript是一种弱类型语言,没有明确的数据类型,也就是说,在声明变量时,不需要指定变量类型,变量的类型由赋给变量的值决定。这一点不象JAVA和C#那样,在声明变量的同时需指定变量的数据类型。
    在JavaScript中,变量是使用关键字var声明的。下面是JavaScript声明变量的语法格式。
    var 合法的变量名;
    其中,var是声明变量所使用关键字;"合法的变量名"是遵循JavaScript中变量名规则的变量名,JavaScript中的变量名与java变量的命名规则相同。可以在声明变量的同时为变量赋值,这叫做变量的初始化;也可以在稍后的脚本中为变量赋值。
    声明变量的同时为变量赋值,例如:
        var width = 20; //在声明变量的同时赋值
        var x,y,z=10;//一次声明多个变量时,使用逗号分隔
    需要强调的是:JavaScript区分大小写,所以大小写不同的变量名表示不容的变量。另外,由于JavaScript是一种弱类型语言,所以允许不声明变量而直接使用,系统将会自动声明该变量。例如
        var=88;   //没用声明变量X,直接使用。
    变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用。在使用变量之前,请先声明后使用,这是良好的编程习惯。
    2.数据类型
    虽然JavaScript是一种弱类型语言,在声明变量时不需要声明变量的数据类型,而是由赋给变量的值决定,但有时也需要检测变量的具体数据类型(通过typtof运算符)。在JavaScript中,提供了常用的基本数据类型,这些数据类型如下所示。
    (1)typeof运算符
       ECMAScript提供了typeof运算符来判断一个值或者变量究竟属于哪种数据类型。语法为:typeof(变量或值)
    (2)undefined(未定义类型)
       undefined类型只有一个值,即undefined。当声明的变量为初始化时,该变量的默认值是undefined。
    (3)null(空类型)
       只有一个值的类型是null,是一个表示"什么都没有"的占位符,可以用来检测某个变量是否被赋值。值undefined实际上是值null派生来的,因此ECMAScript把他们定义为相当的。
    (4)number(数值类型)
       ECMA-262中定义的最特殊的类型是number类型,这种类型既可以表示32位的整数,还可以表示64位的浮点数。下面的代码声明了存放整数值和浮点数值的变量。
       var iNum = 23;
       var iNum = 23.0;
       整数也可以表示为八进制或十六进制,八进制首数字必须是0,其后的数字可以是任何八进制数字(0-7),十六进制首数字也必须是0,后面是任意的十六进制数字和字母(0-9和A-F)。
       var iNum = 070;  //070等于十进制的56
       var iNum = 0x1f;  //0x1f等于十进制的31
       对于非常大或非常小的数,可以用科学计数法表示浮点数,也是number类型。另外一个特殊值NaN(Not a Number)表示非数,它是number类型;
    (5)string(字符串类型)
    在JavaScript中,字符串是一组被引号(单引号或双引号)括起来的文本。
    (6)boolean(布尔类型)
     boolean型数据被称为布尔型数据或者逻辑型数据,boolean类型是ECMAScript中最常用的类型之一,它只有两个值true和false。


2.1 运算符号
  常用的运算符
类别 运算符号
算数运算符 +、-、*、/、%、++、--
比较运算符 >、<、>=、<=、==、!=
逻辑运算符 &&、||、!
赋值运算符 =


2.2 常用的输入/输出
    1.警告(alert)
    alert()方法会创建一个特殊的小窗口,该窗口带有一个字符串和一个"确定"按钮
    alert()方法的基本语法格式如下:
    alert("提示信息")
    该方法将弹出一个警告对话框,其内容可以是一个变量的值,也可以是一个表达式的值,如果显示其他类型的值,需要将其转换为字符串型。
    警告对话框是当前运行的网页弹出的,在对该对话框做出处理前。当前网页将不可用,后面的代码也不会被执行,只有对警告的对话框进行处理后(单击"确定"按钮或直接关闭),当前网页才会继续显示后面的内容。
    2.提示(prompt)
    prompt()方法会弹出一个提示对话框,等待用户输入一行数据
    prompt()方法的基本语法格式为:
    prompt("提示信息","输入框的默认信息");
    该方法的返回值也可以被引用或存储到变量中,例如:
    var color=prompt("请输入你喜欢的颜色","红色");
    prompt()方法的第一个参数text显示在对话框上,通常是一些提示信息:第二个参数出现在用户输入的文本框中,且被选中,作为默认值使用。如果省略第二个参数,提示对话框的输入行中会出现"undefined",可以将第二个参数的值设置为空字符串,例如:var color=prompt("请输入你喜欢的颜色","");
    如果用户单击"取消"按钮或直接关闭提示对话框,该方法将返回Null;如果用户单击"确定"按钮,该方法将返回一个字符串型数据。
    
----------------------------------总结--------------------------------------
1.JavaScript由三部分组成,分别是ECMAScript、DOM和BOM,其中ECMAScript是JavaScript的标准规范,BOM与浏览器窗口进行交互,DOM可以控制页面中的每一个元素,实现页面中的各种动态效果。
2.在HTML页面中JavaScript有三种方式,直接把JavaScript代码写在标签<script>和</script>之间,使用外部JavaScript文件或直接把简短的JavaScript代码写在HTML标签中。
3.JavaScript的核心语法有变量的声明和赋值、数据类型、逻辑控制语句、注释,在JavaScript中代码区分大小写,并且建议每一句的末尾使用分号(;)结束。
4.在JavaScript中待用的输入/输出是prompt()方法和alert()方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值