JavaScript（一）

关注

原创最新推荐文章于 2026-09-20 18:59:24 发布 883 阅读 AI 写同款· GEO 优化 ›

JavaScript入门一（JS基础知识）文章目录一、JavaScript是什么二、网页组成2.读入数据总结一、JavaScript是什么 JavaScript（简称“JS”）百度解释如下：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 & 阅读详情

1.01 JavaScript简介

什么是JavaScript？

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，把静态页面变成支持用户交互并响应相应事件的动态页面。用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。目前几乎所有的主流浏览器都支持JavaScript。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

JavaScript可以做什么？

（1）对表单数据进行验证；(java后台)
操作HTML文档（如读取文档内容，动态写入文本）；
（2）对客户端事件进行响应；
控制浏览器窗口（如打开新窗口，调整窗口大小等）；
（3）创建和读取Cookies；
实现网页特效，提供更好的用户体验。
JavaScript不可以做什么？

（1）JavaScript不允许写服务器上的文件；
（2）前端 js（基于面向对象） json/xml(nodeJs服务器端的JS) 前后端进行分离用NodeJs做数据转换（JSON） java （对象）
（3）全栈：js 移动端前端服务器端（nodeJs）
（4）JavaScript不可以关闭不是由它自己打开的窗口；
（5）JavaScript不能读取已经打开的其他窗口中的信息；
JavaScript的基本特点

（1）解释性—JavaScript不同于一些编译性的语言，如C、C++等，它是一种解释性的语言，它的源代码不需要经过编译，而是在浏览器中运行时被解释。（现在有一种新的说法叫即时编译）

（2）基于对象—JavaScript是一种基与对象的语言，它内置了多种对象并允许用户自己创建对象。

（3）事件驱动—JavaScript可以直接对用户的输入做出响应，无需经过Web服务程序，它对用户的响应，是以事件（如鼠标事件、键盘事件）驱动的方式进行的。

（4）跨平台—JavaScript是一种跨平台的语言，它依赖于浏览器本身，与操作系统无关。只要计算机能运行浏览器，并且浏览器支持JavaScript就可执行。
JavaScript的发展历史

1995年，就职于Netscape（网景）公司的布兰登·艾奇着手为即将发布的Navigator 2开发一种脚本语言，命名为LiveScript。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司建立了一个开发联盟。在Navigator 2正式发布前夕，为了搭上当时媒体热炒的Java的顺风车，Netscape临时把LiveScript改名为JavaScript。
加入了JavaScript的Navigator 2浏览器在市场上取得了巨大成功，1996年，微软公司决定在IE 3.0中加入自己的脚本语言功能，它与Navigator 2中的JavaScript非常类似，但微软将其命名为JScript。
微软推出Jscript，这意味着有了两个不同版本的JavaScript：Navigator中的JavaScript和IE中的Jscript。由于没有标准规定JavaScript的语法和特性，两个不同版本并存的局面暴露出各种问题，JavaScript的标准化被提上了议事日程。
1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲及技术制造商协会（ECMA)，该协会指定39号技术委员会负责JavaScript的标准化工作。经过数月的努力，一种名为ECMAScript的脚本语言标准被定义完成，它被称为ECMA-262。 ES5(对javaScript进行规范)
ES6 es2015 es2016 es2017 es2018 可以在js 中写类
全是JAVA的思想 nodejs用的全是ES6的语法 ES6支持ES5的严格模式.
1998年，ISO/IEC（国际标准化组织和国际电工委员会）也采用了ECMAScript做为标准。自此以后，浏览器开发商就开始致力于将ECMAScript做为各自JavaScript实现的基础。

JavaScript的构成

一个完整的JavaScript实现由几部分组成：

核心（ECMAScript）
文档对象模型（DOM）为了读写文件提供了一个接口 xml
html js
浏览器对象模型（BOM）window->document/history/screen

在这里插入图片描述

ECMAScript

它规定了JavaScript这门语言的一些组成部分：语法、类型、语句、关键字、保留字、操作符、对象。它与WEB浏览器之间没有依赖关系。实际上，这门语言本身并不包含输入和输出定义。ECMA-262只定义这门语言的基础，而在此基础之上可以构件更完善的脚本语言。常见的web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间的对接交互。而这些扩展——如DOM，则利用EMAScript的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作，其他的宿主环境包括Node（一种服务器端javascript平台）和Adobe Flash

ECMA-262标准没有参照web浏览器，它规定了这门语言的下列如下组成部分：
```
   语法
   类型
   关键字
   保留字
   操作符
   对象
```

ECMAScript就是对实现标准规定的各个方面内容的语言的描述。JavaScript实现了ECMAScript,Adobe ActionScript同样也实现了ECMAScript. flex开发 vbscript

ECMAScript的版本：

 ECMAScript的不同版本又称为版次，以第X版表示（意即描述特定实现的ECMA-262规
范的第X个版本）ECMA-262的2009版称为ES5  2015版称为 ES6又称为 ES2015

ECMAScript兼容：

支持ECMA-262描述的所有“类型、值、对象、函数以及程序句法及语法”

支持Unicode字符标准。

DOM-文档对象模型（DOM Document Object Model）

是针对XML但经过扩展用于HTML的应用程序编程接口。
DOM把整个页面映射为一个多层节点结构。HTML 或XML页面中的每个组成部分都是某种类型的节点，这些节点有包含着不同类型数据。

1>为什么要使用DOM

  在IE4和 Netscape Navigator 4分别支持不同类型的DHTML基础上，开发人员无需重新加载网页，就可以修改其外观和内容了。然而，DHTML在web技术发展带来巨大进步的同时，也带来了巨大的问题。由于Netscape和微软在开发DHTML方面各抒己见，过去那个只编写一个HTML页面就能够在任何浏览器中运行的时代结束了。
  
 对开发人员而言，如果想继续保持web跨平台的天性，就必须额外多做一些工作，而人们真正担心的是，如果不对NetScape和微软加以控制，Web开发领域就会出现技术上两强割据，浏览器互不兼容的局面。


此时，负责制定web标准的W3C（World Wide Web Consortium 万维网联盟）开始着手规划DOM.

2> DOM级别

 1） DOM1级（DOM Level 1）于1998年10成为W3C推荐标准。
 
 DOM1级由两个模块组成：DOM核心（DOM core）和DOM HTML 。
 
 	 其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部
 	分的访问和操作。DOM HTML 模块则在DOM核心的基础上加以扩展，添加了针对
 	HTML的对象和方法。
 
DOM并不是针对Javascript的，很多别的语言也都实现了DOM。

在web浏览器中，基于ECMAScript实现的DOM的确已经成为了JavaScript这门语言的一个重要组成部分。

2）DOM2级在原来DOM的基础上又扩充了鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（Cascading style sheets ）的支持。


 DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义：
 
	DOM视图（DOM views）定义跟踪不同文档视图的接口
	DOM事件（DOM Event）定义了事件和事件处理的接口
	DOM样式（DOM Style）定义了基于CSS为元素应用样式的接口
	DOM遍历和范围（DOM Traversal and range）定义了遍历和操作文档数的接口。
	
3）DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法—在DOM加载和保存（DOMLoad and Save）模块中定义，新增了验证文档的方法——在DOM验证（DOM Validate）模块中定义。

3>其他DOM标准

除了DOM核心和DOM HTML 接口之外，另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的，


每种语言的DOM标准都添加了与特定语言相关的新方法和新接口

	SVG（Scalable Vector Graphic 可伸缩矢量图）
	MathML（Mathematical Markup Language 数学标记语言）
	SMIL（Synchronized Multimedia Integration Language）同步多媒体集成语言。


实例代码：

在这里插入图片描述

DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。

BOM（Browser Object Model）-浏览器对象模型

可以对浏览器窗口进行访问和操作，由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。这个问题在HTML5中得到了解决，HTML5致力于把很多BOM功能写入正式规范。

BOM只处理浏览器窗口和框架，习惯上把所有针对浏览器的Javascript扩展算作BOM的一部分。

主要实现：
```
1、弹出新窗口（window.open()）
2、移动、缩放和关闭浏览器窗口
3、提供浏览器详细信息(navigator)
4、对Cookie的支持
```

JavaScript的开发工具

JavaScript中可以使用的开发工具主要有两大类，一类是基本的文本编辑工具，一类是专业可视化开发工具。

（1）文本编辑工具：UltraEdit、EditPlus、Notepad++、记事本…
（2）可视化的集成开发工具：Dreamweaver、NetBeans…
调试JavaScript脚本

Firefox中Firebug一款功能强大的JavaScript脚本调试器，它不仅可以调试JavaScript脚本，还具备了DOM查看、CSS可视化查看、HTTP监控等多种功能。

在HTML中使用JavaScript

编写第一个JavaScript程序

script元素：

HTML4.01 为< script>定义了下列6个属性：

（1）async:可选表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本，只对外部脚本文件有效。
（2）charset:可选，表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
（3）defer:可选，表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。html5
（4）language:已废弃原来用于表示编写代码使用的脚本语言（如：Javascript,JavaScript2.1 或VBScript）大多数浏览器会忽略这个属性，因此也没有必要使用了。
（5）src:可选表示包含要执行代码的外部文件。
（6）type：可选可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也被称为MIME类型）虽然text/javascrpt 和 text/ecmscript都已经不被推荐使用了，但人们一直以来使用的都还是 text/javascript.实际上，服务器在传送Javascript文件时使用的MIME类型通常是application/x-javascript.如果没有指定这个属性，则其默认值仍为text/javascript.

使用script元素的方式有两种：

直接在页面中嵌入JavaScript代码
包含外部Javascript文件。

script的位置：

传统的做法，所有script标签都应该放在页面的head元素中。
 这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相
同的地方。可是在文档的head元素中包含所有JavaScript文件，意味着必须等到全部
JavaScript代码都被下载解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇
到body标签时才开始呈现内容）。对于那些需要很多javascript代码的页面来说，这无
疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。
 为了避免这一问题，现代Web应用程序一般都把全部javascript引入引用放在body元
素中页面内容的后面。

延迟脚本:

HTML4.01的属性这个属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。延迟脚本也最好放在页面的底部。

< script src="index.js" defer="defer">< /script>

异步脚本:

HTML5为script元素定义了async属性。async只适用于外部脚本，并告诉浏览器立即下载文件。

 < script src="index.js" async>< /script>

嵌入代码与外部文件:

在HTML中嵌入javascript代码虽然没有问题，但一般认为最好的办法还是尽可能使用外部文件来包含外部javascript代码。使用外部文件有如下优点：

1）可维护性：遍及不同HTML页面的javascript会造成维护问题，但把所有javascript
文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员也能够在不触及HTML标记
的情况下，集中精力编辑javascript代码。
2）可缓存：浏览器能够根据具体的设置缓存链接的所有外部Javascript文件。如果有两
个页面都使用同一个文件，那个这个文件只需下载一次。
3）面向未来：可以是适用于HTML的各个版本。（HTML4.01，XHTML、HTML5）

< script>元素

在HTML页面中插入JavaScript的方法就是使用< script>元素。具体形式:

在这里插入图片描述
1> < script>元素在HTML页面中的放置位置

传统的做法是将< script>元素放在页面的< head>元素中
实际使用中，既可以将它放在< head>元素中，也可以将它放在<body>元素中。

2> 使用< script>元素的方式

（1）直接在HTML页面中嵌入JavaScript代码
（2）包含外部JavaScript文件

3> 外部脚本的位置

 将JavaScript脚本放在文档的< head>元素中，意味着必须等到全部JavaScript代
码被下载、解析、和执行完成以后，才能开始呈现页面的内容。对于那些需要很多
JavaScript代码的页面来说，这无疑会导致浏览器呈现页面时出现明显的延迟，而延迟
期间的浏览器窗口将是一片空白。为了避免这个问题，Web应用程序可以把全部
JavaScript脚本放在< body>元素页面内容的后面。

收录于