【JavaScript教程】JavaScript入门

【JavaScript教程】JavaScript入门

---

一、JavaScript是概述

JavaScript是Web开发领域中的一种强大的编程语言，其作用主要用于交互式的Web页面，使网页的交互性更加强大，使得网页的互动性更加强大，提升了用户体验。JavaScript一般内嵌到HTML中，通过浏览器的引擎直接编译。

---

(一)、什么是JavaScript

JavaScript是Netscape（网景）公司开发的一种脚本语言，作为一门独立的编程语言。JavaScript应用很广，但是主流还是用于前端邻域。图1-1是2023年4月份最新的流行语言排名。

图1-1 编程语言排行榜（TIOBE排行榜）

JavaScript是一种基于对象（Object）和事件驱动（Event Driven）的解释性脚本语言。脚本语言就是在客户端的浏览器互动响应处理程序的语言，不需要服务器的处理和响应，使得网站响应速度加快。而且JavaScript还可以与服务器进行交互响应，而且功能很强大，弥补了HTML语言的缺陷，减少动态客户端与服务端的交互，而且JavaScript和HTTP的结合实现了客户端的动态交互，增加了网页的互动性，使得用户体验更好。

---

(二)、JavaScript的诞生和特性

JavaScript诞生于1995年;最初网景把把JavaScript敏敏为LiveScript,为了赶在发布之前完成脚本语言的开发和Sun公司组成了开发联盟，为了更快的发布，把LiveScript改为JavaScript，但是和Java没有任何关系。只是受到Java启发才而设计开发，所以有部分语法和Java有相似之处，一些命名规范以及名称也借鉴了Java的设计。

JavaScript是通过嵌入或调入在标准的HTML语言中实现，所以具有以下特点：

1. 脚本编写语言
2. 支持面向对象
3. 简单性
4. 安全性
5. 事件驱动性
6. 跨平台性

---

(三)、JavaScript与服务器的关系

浏览器是用户访问互联网中各种网站的闭包工具，常见的浏览器有以下几种（表1-1）

开发商	浏览器	特点
Microsoft	Internet Explorer/Microsoft Edge	Internet是Windows10以前版本的内置浏览器，用户数量较多，后者是Windows10以后提供的浏览器，速度快、功能更多
Google	Google Chrome	目前占有率更高的浏览器，具有简洁、快速的特点。以良好的稳定性、快速、安全性获得使用者的青睐
Mozilla	Mozilla Firefox	一种开源的浏览器。由Mozilla资金会和开源开发者一起进行开发。集成了很多小插件，开源拓展很多功能。是一款优秀的浏览器。
Apple	Safari	苹果电脑、手机的内置浏览器，是苹果的专属浏览器
360	360 Explorer	基于IE内核开发，国内使用最多的浏览器，是IE完美的替代品

浏览器最重要或者核心的部分“Rendering Engine”,可大概译为“渲染引擎”。浏览器内核一般分为排版引擎和JavaScript引擎，前者进行解析与预处理，然后展示到页面上面；后者负责解析JavaScript语言，通过执行代码来实现网页的交互效果。

前面说过JavaScript语言不能下计算机中直接运行，它作为脚本语言嵌入HTML语言中，借助浏览器解析执行。
当用户在浏览器地址栏中输入网站地址后，浏览器访问Web服务器发送请求报文，收到请求报文后，进行渲染解析，展示到页面上面。

(四)、JavaScript的运行原理

JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事。JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

对于静态语言来说，处理叫做编译器，相应的对于JavaScript这样的动态语言则叫解析器，具体一点就是把源代码编译我另一种代码（例如转化为机器码或字节）,而解析器是直接解析代码运行输出。

图1-4 脚本的执行原理

二、JavaScript的应用

JavaScript通常与HTML和CSS样式结合在一起使用，完成特效的编写，以方便用户操作。
作为一种脚本语言，JavaScript是非常成功的，它在相当多的领域中得到广泛应用。它不但可以用于编写Web浏览器端（脚本），实现在Web页面上下文中执行的程序，而且可以在服务器端用于编写可处理浏览器提交的信息并相应地更新浏览器显示的Web服务器程序。
在Web页面中，JavaScript可谓是无所不能，JavaScript常用来完成的任务有：

1. 操作HTML,读写HTML元素;
2. 基于事件驱动，对浏览器事件及网页上的事件做出响应;
3. 数据验证功能，在数据被提交到服务器之前验证数据;
4. 检测用户在浏览器上的操作;
5. 可以创建并使用Cookie;

(一)、网站前端及后台开发

网站前端开发是JavaScript的老本行，伴随着JavaScript的发展，JavaScript可以直接对用户的输入做出响应，无需把程序提交给Web服务器去处理。也可以处理http异步请求，实现浏览器与服务器间的异步通信，达到页面不用刷新页面，来加载相关资源，来提高用户体验；可以制作各种动画效果（轮播图），还可以继续DOM中的事件监听（按下鼠标、移动窗口、选择菜单等事件）。

Node.js的诞生使得JavaScript可以进行后台开发，Node.js是一个基于Google Chrome V8引擎的JavaScript运行环境。Node.js使用一个事件驱动、非阻塞式I/O的模型，使其轻量又高效，能方面地搭建响应速度快、易于扩展的网络应用，非常适合在分布式设备上运行的数据密集型的实时应用。简单的说，Node.js就像运行在服务器端的JavaScript。

(二)、移动端开发

JavaScript不仅用于网页和网络程序，还可以创建移动应用，移动应用分为两种，一个是在手机浏览器里发网页应用和本地应用。本地应用通常更快、更加强大，因为它们通常由访问本地文件系统、传感器、照相机、麦克风等设备权限。本地应用通常使用手机指定的语言编写。浏览器的应用通常使用HTML+CSS+JavaScript的解决方法，被称为Web APP技术。

从技术来讲，不同的操作系统上面需要不同的编程语言进行开发。但JavaScript的运行依赖于浏览器本身，与操作系统无关，只要能运行浏览器的移动设备，只要正确解析JavaScript正确执行，Web APP就可以运行在不同的操作系统，完全不需要执行同一个软件，来更换编程语言来编写，还降低了开发成本。

技 术 平 台	语 言	说 明
IOS APP	Objective-C	团队人数5人，1~3月开发时长，难度高
Android APP	Java	团队人数5人，1~3月开发时长，难度高
Web APP	JavaScript+HTML5	团队人数3人，1~2月开发时长，难度低

(三)、插件的开发

JavaScript是唯一一种在所有主流平台都被原生支持的编程语言，因此在主流平台中，JavaScript特效和组件在网页使用过程中使用非常频繁，又有很高的重用性，所以哪些被前辈写好的，具有极大提高代码指令及页面程序效果的JavaScript文件，被称为JavaScript插件，可以快速嵌套在自己网页中。常见的浏览器插件和扩展程序，以及大部分移动应用的插件都是用JavaScript进行开发的，可以保证所有平台使用。例如：JavaScript菜单、日历、文本编辑器、颜色选择器。

(四)、其他应用

随着JavaScript开发游戏的优势，只需要一个网址就可以开始游戏，使得游戏开发不再受时间、地点、设备的限制。也是目前JavaScript开发最火热的时候，例如在2022年爆火的小游戏。

随着JavaScript的使用，之前用XML（可扩展标记语言）进行数据交换的语言也被JSON替代。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，具由良好的可读性，有利于人们阅读和快速编写，也易于机器解析和生成。它是基于JavaScript Programming Language ,Standard ECMA- rd Edition-Decembr 1999的一个子集。JSON采用兼容性很高的完全独立于语言的文本格式，诞生也使用了类似于C语言的习惯，这些特性使得JSON成为理想的数据交换语言。

三、JavaScript开发工具

(一)、常见的开发工具

1. Notepad++
2. Scripted
3. WebStorm
4. VISUAL STUDIO CODE
5. HBuilderX

(二)、JavaScript常见的开发形式

JavaScript的开发有三种选择：原生JS，JavaScript插件和JavaScript框架

• 原生JavaScript

  没有封装过的最基础的JavaScript代码，因为每个浏览器的内核不一样。所以使用原生JavaScript编程需要为不同浏览器写兼容代码，所以使用原生JavaScript的情况越来越少

• JavaScript插件

  JavaScript插件，是已编写好的可以完成特定功能的JavaScript程序文件。不需要就可以直接使用，比如图片轮播、上传文件等等。

• JavaScript框架

  JavaScript框架，即JavaScript库，相当于一个项目的半成品，需要程序员根据项目的实际需求在此基础上添加代码才可以完成全部功能。常见的JavaScript框架有jQuery，Vue等等，JavaScript框架就是把常用的方法进行封装，方便调用。

(三)、第一个JavaScript程序

• 行内式

  用法一：使用javascript:限定JavaScript代码

  <a href="javascript:alert('hello JavaScript!')">testa>
  

  用法二：

  直接书写JavaScript代码

   <input type="button" value="test" onclick="alert('hello word');">
  

• 嵌入式

    <script>
        document.write("这是我写的第一例JavaScript的代码片段");
    script>
  

• 外链式

  html文件

  <script src="./js/test.js">script>
  

  document.write("这是我写的第一例JavaScript的代码片段");
  

例子1

(四)、JavaScript的书写规范

软件的长期价值源于其代码质量。在它的生命周期里，一个程序可能会被许多人阅读或修改，如果一个程序可以清晰地展现出他的结构和特征，那么能够减少在其后修改出现的问题，所有的JavaScript代码都会暴露给公众的，所以开发者会共同约定JavaScript的书写规范。

• JavaScript的基本标点符号

  JavaScript采用英文格式下的逗号、分号、圆括号、大括号来标识语句。

    //以逗号分割语句，以分号标识语句的结束
    var num1 = 12, num2 = 23;
    //以圆括号、大括号标识代码区域
    if (num1 < num2) {
      alert("较大的数是：" + num2);
    }
  

  在JavaScript中使用逗号作为断句标志，表示一条语句还没结束；使用分号作为语句的结束标志，表示该语句的终结：使用圆括号和大括号来表示一个代码块。浏览器对JavaScript代码的解析步骤是根据断句符号来进行的，理论上断句符号是必须的，但是JavaScript为了提高编程效率和容错率。允许省略句末尾的分号，此时，JavaScript引擎在解析的时候自动添加分号

• 严格区分大小

  JavaScript与大多数编程语言一样，严格区分大小写。JavaScript区分大小写，不仅仅体现在自定义的变量上，还包括如：var、slert、document等系统的关键字和函数。

• 注释

  在程序开发中，注释非常重要，缺乏注释后续的开发会遇到很大的困难

    //单行注释
    // var num1 = 12, num2 = 23;
    //多行注释
    /*
     if (num1 < num2) {
       alert("较大的数是：" + num2);
     }
    */
  

四、ECMAScript标准

(一)、什么是ECMAScript标准

ECMAScript标准是指一组用于描述JavaScript（以及类似语言）的语法特性、运算符、方法、对象等的规范。ECMAScript标准由ECMA国际（European Computer Manufacturers Association）制定，其目的是为了保证不同的JavaScript实现之间的兼容性和互操作性。ECMAScript是JavaScript所基于的编程语言标准，因此所有的现代浏览器和JavaScript运行环境都遵循ECMAScript标准。当前最新的ECMAScript标准是ES2021。

(二)、ECMAScript与JavaScript的关系

ECMAScript是一种语言规范或标准，而JavaScript是一种符合该规范的编程语言。JavaScript 其实就是 ECMAScript 的实现。 ECMAScript 定义了一套语言标准，JavaScript 依照这套标准实现了相应的功能，因此可以看作是一种实现了 ECMAScript 标准的脚本语言。简单来说，JavaScript就是ECMAScript的一种实现。

• 核心语法部分

核心语法部分即ECMAScript，描述了语言的语法与基本对象

• 文档对象模型

文档对象模型即DOM（Document Object Model），简称“文档对象模型”，由W3C制定规范。DOM定义了JavaScript操作HTML文档的接口，提供了访问HTML文档的途径与操作方法。

• 浏览器对象模型

浏览器对象模型即BOM（Browser Object Model）。BOM定义了JavaScript操作浏览器的接口，提供了某些功能（如浏览器大小、版本信息等）的途径即操作方法，可执行其他与页面内容不直接相关动作。

GitHub源代码仓库
注意：还没有添加文档，要到此教程更新完毕
微信公众号

---

END