W3CAPI 在线教程 | 菜鸟教程_LOGO
文档目录
文档目录
我的书签
 

JavaScript

JavaScript 入门教程

JavaScript是一门Web编程语言,用来实现网页的交互功能,它和HTML、CSS共同组成了个Web开发的基础工具集合,也是前端开发者必备的技能;学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念,让我们能够更加快速的去开发Web应用。

W3CAPI
1
2020-06-18 07:05:48

JavaScript 教程

JavaScript 教程

脚本是什么?

脚本是由脚本语言创建的可执行命令列表,类似于宏或批处理文件。在Web服务器上执行的脚本(如PHP、Perl)称为服务器端脚本,而在用户计算机上由浏览器解释执行的脚本(如JavaScript)则称为客户端脚本。


JavaScript 是什么?

JavaScript是一种由Netscape(网景)公司开发的跨平台、面向对象脚本语言。该语言由Netscape的程序员Brendan Eich所创建,主要用于为网页添加动态交互功能。JavaScript采用基于原型的对象模型,支持事件驱动编程范式,能够在客户端浏览器中直接解释执行。其核心功能包括操作DOM元素、处理用户事件、实现页面内容动态更新等。该语言遵循ECMAScript规范标准,具有弱类型、解释型语言特性,支持函数式编程模式。布兰登·艾克.

该语言最初于1995年9月以LiveScript之名发布,作为Netscape Navigator 2.0的组成部分。1995年12月4日正式更名为JavaScript。由于JavaScript运行于客户端,其主要应用于客户端网页开发领域。

JavaScript专为网页使用而设计,并与HTML深度集成。它能创建运行于IE、Opera、FireFox、Google Chrome等浏览器中的应用程序。Netscape将JavaScript提交至ECMA国际组织进行标准化,由此产生了名为ECMAScript的标准版本。

JavaScript 和 Java

JavaScript 与 Java 存在某些相似性,但本质上截然不同。Java 是由 Sun Microsystems 公司开发的编程语言,而 JavaScript 是由 Netscape 公司开发的脚本语言。Java 属于服务端静态类型语言,JavaScript 则是客户端动态类型语言。Java 程序在服务器端编译后,几乎可在任何平台上运行而无需分发源代码;而用 JavaScript 编写的脚本则嵌入 HTML 文档中,由浏览器解释执行。二者的语法规则和保留字也存在差异。

JavaScript与Java的功能对比

JavaScriptJava
JavaScript用于前端Web开发(例如HTML表单中的字段级验证)。Java在Web环境中被用作后端语言。
由客户端解释执行(非编译)。从服务器下载编译后的字节码,在客户端执行。
面向对象。对象类型无明确区分。继承通过原型机制实现,且属性和方法可动态添加至任意对象。基于类。对象被划分为类和实例,所有继承均通过类层次结构实现。类和实例无法动态添加属性或方法。
变量数据类型无需声明(弱类型)。变量数据类型必须声明,因为Java采用强类型检查机制。
无法自动写入硬盘。无法自动写入硬盘。

w3capi JavaScript教程特性

在本系列教程中,我们深入讲解了JavaScript 1.5+版本。编写过程中,我们始终确保学习者能够掌握JavaScript的基础知识。

以下为各章均涵盖的功能列表:

  • 我们以清晰简明的描述作为开端。
  • 我们提供了语法/用法参考,助您记忆编写方式。
  • 示例:展示关联概念如何实现
  • 我们已展示用法输出结果。
  • 在浏览器中查看示例。
  • 通过我们的在线练习编辑器进行训练。
  • 图示说明助您更好理解相关概念。
  • 由于浏览器对JavaScript的执行存在兼容性问题,我们已标注各浏览器所支持的脚本类型。

Next:JavaScript 概述

JavaScript能实现哪些功能

JavaScript 概述

控制网页元素的显示外观

每个网页均由若干称为对象的独立元素构成,例如图像、链接等。这些基础组件通过文档对象模型(DOM)形成层级结构,浏览器通过JavaScript API可编程化地访问和操作这些DOM元素。

JavaScript能够控制多种对象的外观表现。例如:可在自定义窗口中打开新页面,指定其尺寸参数,决定是否包含滚动条等功能组件。

JavaScript在网页中响应用户操作

JavaScript能够通过响应用户的各种操作来控制网页中的对象,这种行为被称为事件。例如:当用户点击按钮时显示对话框;访问者点击链接时打开新页面;鼠标悬停在链接上时改变其外观样式;或是控制网页背景颜色的动态变化。

显示多种日期时间格式

JavaScript能够获取计算机时钟的日期和时间,并通过其内置日期对象支持显示多种格式的日期时间。

执行计算

JavaScript能够执行多种数学运算。它内置了所有必需的数学常量与函数库。这些函数可通过多种方式应用,例如:在在线金融交易中,JavaScript可用于计算小计、总金额等;也可用于构建在线计算器;或通过正弦、余弦等高级数学函数开发游戏及交互式模拟场景。

验证表单数据

JavaScript 可用于在将数据发送至服务器前验证 HTML 表单中的姓名、地址、URL、邮箱地址、电话号码、邮政编码等表单数据。若仅在服务器端进行此类数据验证,需等待信息传输至服务器完成检测;而使用 JavaScript 则能即时检测错误并立即提示用户。

创建Cookie

一个cookie是网页浏览器中的一种机制,通过向访问者计算机发送纯文本实现数据存储。由于Cookie本质为文本形式,因此不具备可执行性。JavaScript可从该文本中提取信息并存储于访问者计算机,当用户下次访问同一页面时自动复用这些存储的数据。

检测访客浏览器

有时很难创建在不同浏览器或操作系统上显示完全一致的页面。JavaScript 可检测访问者的浏览器类型,并为特定浏览器加载适配的页面。

动态HTML

动态HTML(DHTML)是一组结合使用的技术集合,通过整合JavaScript、HTML、DOM(文档对象模块)与CSS来实现交互式动画网站。

Previous:JavaScript 教程
Next:JavaScript 与 ECMA 规范

ECMAScript规范与JavaScript版本

JavaScript 与 ECMA 规范

JavaScript与ECMA规范

JavaScript是一种由Netscape公司开发的跨平台、面向对象的脚本语言,最初被用于Netscape浏览器。然而,Netscape当时正与欧洲计算机制造商协会(ECMA)合作开发基于JavaScript核心技术的标准化国际编程语言。ECMA是专注于信息和通信系统领域的国际标准协会。这个标准化版本的JavaScript被称为ECMAScript,在支持该标准的所有应用中都保持统一行为规范。企业可以通过开放标准语言来开发各自的JavaScript实现方案。首个ECMA标准版本记录于ECMA-262规范文档,该标准也获得了国际标准化组织(ISO)的认证,编号为ISO-16262。

下表阐述了JavaScript与ECMA版本间的对应关系。

JavaScript 版本与ECMA版本的关联
JavaScript 1.1ECMA-262标准基于JavaScript 1.1版本。
JavaScript 1.2ECMA-262在JavaScript 1.2发布时尚未定稿。由于以下原因,JavaScript 1.2未完全兼容ECMA-262:

Netscape在JavaScript 1.2中开发了ECMA-262标准未纳入的附加功能。

ECMA-262 引入了两项新特性:基于 Unicode 的国际化支持,以及跨所有平台实现统一行为。JavaScript 1.2 中的部分功能(例如 Date 对象)存在平台依赖性并采用平台特定的行为。
JavaScript 1.3JavaScript 1.3 完全兼容 ECMA-262 标准。

JavaScript 1.3 解决了 JavaScript 1.2 与 ECMA-262 标准存在的不一致问题,同时保留了 JavaScript 1.2 的所有附加功能(除被修改为符合 ECMA-262 的 == 和 != 运算符)。这些附加功能包含 JavaScript 1.3 中部分不属于 ECMA 标准的新特性,正在被纳入 ECMA 规范第二版的审议范围。
例如,JavaScript 1.2和1.3支持正则表达式功能,但该特性未包含于ECMA-262标准中。当JavaScript 1.3版本发布时,ECMA规范的第二版尚未完成最终定稿。
JavaScript 1.4(仅适用于Netscape服务器环境)
JavaScript 1.5JavaScript 1.5 兼容 ECMA-262 第3版标准。该版本在安全性与核心库方面进行了重大升级,同时显著提升了与现代浏览器的兼容性。

JavaScript版本与对应浏览器版本支持情况

下表涵盖以下JavaScript版本,发布日期与支持情况浏览器版本.

Version发布日期Netscape
Navigator
Mozilla
Firefox
Internet
Explorer
OperaSafariGoogle
Chrome
1.01996年3月2.0 3.0   
1.11996年8月3.0     
1.21997年6月4.0-4.05     
1.31998年10月4.06-4.7 4.0   
1.4 Netscape
Server
     
1.52000年11月6.01.05.5
6.0
7.0
8.0
6.0
7.0
8.0
9.0
10.0
3.0
3.1
3.2
4.0
1.0
1.62005年11月 1.5    
1.72006年10月 2.0   6
1.82008年6月 3.0    
1.8.1  3.5    
1.8.22009年6月22日 3.6    

测试JavaScript版本

以下网页文档可返回您浏览器支持的JavaScript版本。

点击此处查看版本

HTML代码

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>JavaScript version checking</title>
</head>
<body>
<h1 style="color: red">JavaScript version checking</h1>
<hr />
<script type="text/javascript">
var jsbrowver = 1.0;
</script>
<script language='Javascript1.1'>
var jsbrowver = 1.1;
</script>
<script language='Javascript1.2'>
var jsbrowver = 1.2;
</script>
<script language='Javascript1.3'>
var jsbrowver = 1.3;
</script>
<script language='Javascript1.4'>
var jsbrowver = 1.4;
</script>
<script language='Javascript1.5'>
var jsbrowver = 1.5;
</script>
<script language='Javascript1.6'>
var jsbrowver = 1.6;
</script>
<script language='Javascript1.7'>
var jsbrowver = 1.7;
</script>
<script language='Javascript1.8'>
var jsbrowver = 1.8;
</script>
<script type='text/javascript'>
alert('Supported Javascript Version : ' + jsbrowver);
</script> 
</body>
</html>

执行一下

Previous:JavaScript 概述
Next:将JavaScript嵌入HTML中

相关提问
敬请期待