写在前面

SAST2020前端组授课——JavaScript基础学习教程系列

语言介绍

JavaScript 官方名称是 ECMAScript 是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

1995年2月Netscape的布兰登.艾奇开发了针对网景公司的 Netscape Navigator浏览器的脚本语言LiveScript。之后Netscape与Sun公司联盟后LiveScript更名为JavaScript。

查看源图像

早期的因特网，网速慢、网费高，诞生了在客户端完成一些基本的表单验证的需求。

后来JavaScript不仅仅只是客户端的数据验证，而是具备了浏览器窗口及其内容几乎所有方面的交互能力。

微软在javascript发布后为了抢占市场推出了JScript。为了让脚本语言规范不在混乱，根据javascript 1.1版本推出了 ECMA-262的脚本语言标准。

ECMA是欧洲计算机制造商协会由Sum、微软、NetScape公司的程序员组成。

文档中会经常使用 JS 简写来代替 JavaScript

关于java和JavaScript的区别：

完全不一样！

印度和印度尼西亚的区别。

JavaScript的语言特点：

大杂烩：

C语言的基本语法，Java的内存管理，Python的动态类型，Schema的函数式（匿名函数、lambda），Self基于原型prototype的继承机制……

适用场景（JavaScript有什么用）

  • 浏览器网页端开发

    • 改变网页HTML元素的内容、属性（操作DOM树）

    • 改变CSS的样式（改变CSSOM树）

    • 处理业务逻辑、数据通信、事件监听、管理页面生命周期等

      MVC：经典设计模式。

      • 什么是设计模式？

      设计模式是一套被反复使用的代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。

      设计模式是开发工程化的基石。可以理解成面对一个现实需求时候的常态解决方案框架。

      • MVC模式：

        MVC：Model View Controller，即模型、试图、控制器。

        Model层：模型（用于封装业务逻辑相关的数据和对数据的操控）

        View层：试图（渲染图形化界面，即GUI）

        Controller层：控制器（M和V直接的连接器，主要处理核心业务逻辑，数据通信、控制M和V的更新等）

      image-20201114013324432

  • 做为服务器后台语言使用Node.js

  • 移动端手机APP和小程序开发，如Facebook的 React Native、uniapp、微信小程序、支付宝小程序等

  • 跨平台的桌面应用程序，如使用 electronjs（VScode）

所以JS是一专多能的语言，非常适合学习使用。

发展历史

  • 1994年Netscape（网景）公司发布了 Navigator 浏览器1.0版本，市场占用率超过90%

  • 1995年发布了JavaScript 语言

  • 1996年 JS在 Navigator浏览器中使用

  • 1996年微软发布JScript在IE3.0中使用

  • 1996年11月网景公司将JS提交给ECMA(国际标准化组织)成为国际标准，用于对抗微软。

    由ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。

  • 1997年 ECMA发布ECMA-262标准，推出浏览器标准语言 ECMAScript 1.0

    ECMAScript 是标准而Javascript是实现

  • …

  • 2009年ECMAScript 5.0发布

  • 2011年ECMAScript5.1发布，成为ISO国际标准，从而推动所有浏览器都支持

  • …

  • 2015年ECMAScript6发布，更名为ECMAScript 2015。

  • 2016年ECMAScript7发布，ECMAScript2016

  • 2017年ECMAScript8发布，ECMAScript2017

  • 2018年ECMAScript9发布，ECMAScript2018

  • 2019年ECMAScript10，ECMAScript2019

  • 2020年ECMAScript11，ECMAScript2020

  • …

从2015年开始 tc39委员会决定每年发布新的ECMAScript版本

兼容性

下面是ES6兼容性状况，你也可以在 https://caniuse.com/网站查看。

can i use网站可以查询css、js等的一些兼容性，比如不同浏览器对flex弹性布局属性的支持

image-20201017153839071

###　学习准备

浏览器

chrome 或 firefox 或Edge浏览器来进行学习。

编辑器

推荐使用 vscode 编辑器开始学习，需要安装一些插件才可以高效使用。

控制台是调试代码的好地方，打开方式如下

  • Mac: Option+Command+J
  • Win/Linux: f12 或 Ctrl+Shif+I

运行流程

JavaScript的运行环境：

就像C++/C需要编译环境一样（MSVC、GCC、MingW……），JavaScript也有着自己的编译环境。

JS引擎-JS内核：负责解析和执行JS代码。

JS的引擎常内嵌在各个浏览器中，不同的浏览器有着不同的JS引擎。

浏览器 JS引擎
Chrome V8
Webkit（Safari） JavaScriptCore
Mozilla SpiderMonkey
React Native（框架） Hermes

这些引擎在编译JS的时候大致的流程都是差不多的。

image-20201114015849873

JavaScript是一个解释型语言：

img

JavaScript本质上是一种解释型语言，与编译型语言不同的是它需要一遍执行一边解析，而编译型语言在执行时已经完成编译，可直接执行。

前端访问流程的基本分析：

浏览器渲染网页的原理：

浏览器将域名通过网络通信从服务器拿到html文件后：

  1. 据html文件和css文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
  2. 建渲染树（Render Tree），渲染树由DOM树、CSSOM树合并而成。
  3. 页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

JS请求处理步骤可以简单用一下语言去描述：

用户会送服务器请求相关的html、css和js的源码，浏览器在用户端进行渲染。

浏览器同时会接受一些来自服务器的数据和资源，开辟一个空间去存。

另外，浏览器可以监听用户的事件（事件监听），比如按钮、弹窗等……可以理解成一段程序代码或者函数。

我们这里讲的主要是指的是在浏览器端，也就是用户端能够运行的一些逻辑，并非是服务器端的逻辑代码。因此我们并不需要搭建后台环境。

但如果后期需要用js写后台环境，就需要搭建后台服务器环境。

Js运行的宿主环境：浏览器、Node等

如何运行一段JavaScript代码？

在JS的运行环境中解释执行。

如：Chrome、Node（都是V8引擎）

  • Chrome（或其他浏览器）：开发者工具-控制台。

  • Node：nodejs终端，在IDE中进行调试。

尝试进行Hello World！的输出：

1
console.log("Hello,World!")

在JS中，最常见的数据输入是通过Form表单，但这里为了学习需要，“输入”我们可以用prompt()函数。

1
var a = prompt("Please input values:");

脚本定义

定义方式

内嵌脚本

像style标签一样，可以在html文档中使用script标签嵌入javascript代码。

1
2
3
<script>
	alert('sast.njupt.edu.cn');
</script>

外部文件

通过设置 src 属性引入外部js文件。

1
2
<script src="sast.js"> 
</script>

引入外部文件在标签体内的脚本不会执行，下面的alert弹窗不会执行。

1
2
3
<script src="sast.js">
	alert('sast.njupt.edu.cn');
</script>

**注：**旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">

type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

在外部文件中放置脚本有如下优势：

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

定义位置

如果js放在 <head> 标签中要等到js加载并解析后才会显示<body>标签中的内容。

延迟体验

下面是延迟加载的示例

1
2
3
4
5
6
7
8
9
10
11
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个测试的SAST主页</title>
    <script src="sast.js">
    </script>
</head>

<body>
    <h1>sast.com</h1>
</body>

sast.js 内容如下

1
alert('Hello，SAST!');

h1标签会在sast.js文件加载并解析后才会显示。

推荐做法

为了解决上面的问题，可以将js放在</body>前。

1
2
3
4
5
6
7
8
9
10
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAST主页</title>
</head>

<body>
    <h1>sast.njupt.edu.cn</h1>
    <script src="sast.js"></script>
</body>

关于这个延迟加载，其实原因本质上是因为，浏览器渲染页面的时候，JS的执行和css、html的渲染是在同一个主线程执行的，所以是有着先后的顺序的。

<script>标签中的defer = "defer"属性也可以使得JavaScript的加载延迟到html标签之后。

<script>标签中的async = "async"属性可以使得JS异步加载。

可以思考一下：

为什么JS和html页面的渲染需要顺序进行，而不能同时进行，除了两者本身就是同一个线程这个客观原因？

因为浏览器渲染页面的原理中，html和css分别构建DOM树以及render树，最后共同确定了页面各个元素的布局和样式，然而js有一些操作是可以去修改这个dom树的，是可以对已经渲染好的元素进行修改，这就导致两者不能同时进行。

代码注释

和大部分语言使用的注释方式相仿，JavaScript有单行和多行注释。

单行注释

1
2
3
<script>
  // 这是单行注释
</script>

多行注释

1
2
3
4
5
<script>
  /*
  这是多行注释体验
  */
</script>

分号结束

使用分号表示一段指令的结束，当没有输入分号时如果有换行符JS会自动添加分号，减少错误的发生。

  • 但推荐每个指令都以分号结束
  • 在使用构建工具时，不使用分号结束可能会造成异常
1
2
3
4
let sast = true;
if ( sast ) {
  document.write('sast');
}