Javascript（一）——JS概述及组成详解

以你之姓@ 2023-06-26 10:48 11阅读 0赞

# 一、概述 #

## 1.什么是JavaScript？ ##

是运行在客户端上的一样脚本语言。所谓脚本语言也就是**解释性**，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给**浏览器**由**浏览器解释运行**，逐行执行，在哪一行出错就会在哪一行停止运行。

## 2.作用 ##

**（1）嵌入动态文本与HTML页面**

**（2）对浏览器时间做出相应**

**（3）读写HTML元素**

**（4）在数据被提交到服务器之前验证数据**

**（5）检测访客的浏览器信息**

**（6）控制cookies，包括创建和修改等。**

**（7）基于node.js技术进行服务器端编程。**

## 3.组成 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1][]

# 二、详解 #

## 1.什么是EMCAScript？ ##

他是一种翻译或者解释器，是JS的核心，定义了JS的规范，在JavaScript之后出现的。

ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的[程序设计语言][Link 1]。ECMAScript最先被设计成一种Web脚本语言，用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言， ECMAScript具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”（来自百科）。

## 2.ECMAScript的特性： ##

ECMAScript的语言特性和Java、C、Perl都有许多相似之处，其中不少特性都是从这些语言借鉴而来。和Java一样，ECMAScript区分大小写，注释的格式相同，通过\{\}确定代码块，原始数据类型存储在堆栈，对象的引用存储在堆中 。ECMAScript是一种松散的语言，ECMAScript通过var操作符声明变量，并且不限类型，例如var n = 25，那么n就是数字类型，var n = "string" ，那么n就是String类型 。

在每一行代码后，可以不写分号，ECMAScript自动认为该行的末尾为该行代码的最后；ECMAScript中的变量可以不用初始化，在幕后系统将自动完成初始化操作 。

同一变量可以赋予不同类型的数据；变量的第一个字符只能是字母、下划线或$ ，其他的字符可以是下划线、$、或任意的字母、数字、字符 。

和其他语言一样，变量最好遵循驼峰书写法，或Pascal表示法、或匈牙利表示法。

和大多数语言不同的是， ECMAScript 变量在使用之前可以不必声明，系统会自动将该变量声明为全局变量，例如var m = " Good " ; n = m + " Morning " ; alert(n)输出结构是 " Good Morning "  。

在大多数语言里，String是对象，在ECMAScript中却是原始数据类型 。

### 3.制作 JavaScript 的原因:  ###

肯定不是为了好玩,原因很简单就是为了分担一部分后台的压力,承揽了表单数据提交到后台之前的数据校验工作。因为那个时候的页面上的数据交互都是通过表单直接提交到后台,再由后台进行验证,但是这样就导致两个问题。

其一: 后台服务器压力承载过大,按道理说后台就是应该处理业务逻辑的,如果再加上数据的校验工作量过于重大,并发严重时可能导致服务器崩溃或者数据交互速度大大延迟。

其二: 用户友好度较低,试想一下在高并发的场景下,某位用户提交了表单数据,过了很长时间后台终于响应,响应的结果却是 "对不起您有一个必填选项未填写"或"对不起您的 Xxx 项表单数据符号填写有误",笔者相信这位用户绝对会吐血三升,下次不会再上这家网站进行工作了。

### **4.常见的BOM对象** ###

BOM（Browser Object Model）即**浏览器对象模型**,提供了独立于内容而与浏览器窗口进行交互的对象;由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window，在我们进行对浏览器操作的时候浏览器自身内部对象会对我们的操作给出一系列的反馈，各个对象都有自身的特性和职责。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 2][]

*  window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
 *  Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
 *  Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
 *  History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
 *  Screen：代表用户的屏幕信息

### 5.什么是ＤＯＭ ###

DOM（Document ObjectModel）官方解释就是一种**文档行对象模型**，是W3C组织推荐的处理可扩展置标语言的标准编程接口，即一个API，其实就像一棵树一样，如图，在里面有很多节点，JavaScript在运行其实就是通多对每个节点的操作，在每个节点都有一个Iｄ　，即在编码是有document．getElementById（）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 3][]

总结：此文由网络资料和个人理解而总结，错误的地方还请指出，初学者！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231145810621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191231145821614.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70
[Link 1]: https://baike.baidu.com/item/%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%AD%E8%A8%80/2317999
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019123114585158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191231145906742.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70