前端小白必备的JavaScript基础知识

前言

近几年是前端大发展的时期，Vue,React,Babel,Webpack,Node.js,TypeScript等技术与概念层出不穷，着实让人眼花缭乱。

不过对于小白来说，刚入门时可以会被这些概念弄晕，而这些概念与JavaScript又是什么关系？在这篇文章，为你梳理一下上述的前端概念到底是什么以及它们之间的关系！

了解一下JavaScript语言

JavaScript是一门轻量级脚本语言，之所以说轻量级,是因为JavaScript并不是像C,Java等语言一样，用于编写大型项目的。

JavaScript最开始被设计出来，是为了能让HTML网页”动起来“，因此JavaScript是非常简单的，其核心语法非常精简，只包括两个部分：基本的语法构造（比如数据类型、操作符、控制结构、语句）和标准库（如Array、Date、Math等），而更复杂的功能则依赖于宿主所提供的API,比如Web浏览器提供的各种Document操作。

“

PS：JavaScript跟Java没有任何关系,刚开始叫LiveScript，后来为了更好地推广，才蹭Java的名气，改名为JavaScript。

”

JavaScript与浏览器之间的关系

最开始，JavaScript被设计于运行在浏览器，浏览器是JavaScript脚本的宿主，因此JavaScript的脚本可以跟HTML脚本混在一起，由浏览器解析执行，而不需要编译。

在现代浏览器(如Chrome,Foxfire)中，都有一个专门解析JavaScript脚本的引擎,比如在Chrome浏览器，这种引擎中v8。

在浏览器中，JavaScript脚本可以获得以下几种能力：

浏览器控制类：操作浏览器，比如获取cookie和本地存储。
DOM类：操作网页的各种元素，如修改网页样式，响应鼠标的点击，指针的移动等。
Web类：实现互联网的各种功能，比如发请Ajax请求。

JavaScript与Node.js之间的关系

除了在浏览器上执行之外，JavaScript脚本也可以在Node.js上运行，Node.js是一个运行在服务器上的基于Chrome V8引擎的JavaScript脚本运行环境。

提供了类似其他语言的从网络读取、访问数据库或文件系统等操作，因此基于Node.js，前端开发人员也可以像Java,PHP,Go等语言一样编写服务器端的服务。

入门案例:HellWorld

下面我们通过一个Hello World的案例，让你对JavaScript有一个基本的了解

方式一:有`<script></script>`标签写JavaScript脚本

你可以你可以在你电脑的任何目录下，创建一个以.html为后缀的文本，比如index.html，然后在该文档中写下如下的代码：

index.html

<!DOCTYPE html>
<html> 
    <body>
        <script> 
            alert('Hello, world!');
        </script>
    </body> 
</html>

方式二：通过引入外部脚本来实现

使用这种方式，我们需要多创建一个index.js的文件，并将JavaScript脚本写在这个文件当中，这种也是平常开发项目最常见的方式，因此在大型Web项目中，JavaScript脚本往往很长，需要专门存在在单独的文件当中，这种文件一般以.js为后缀。

index.js

 alert('Hello, world!');

index.html

<!DOCTYPE html>
<html> 
    <body>
        <script scr="./index.js"></script>
    </body> 
</html>

ECMAScript和JavaScript

ECMAScript是JavaScript的语言规范，也就是说，JavaScript是按照ECMAScript规范开发出来的一门语言。

在学习前端时，常常会见到ES5和ES6这两个概念。

ES5表示ECMAScript的第五个版本。

ES6是一个泛指，含义是 5.1 版以后的JavaScript的下一代标准，是ES2016,ES2017,ES2018…等以年份发布版本的泛称。

框架与库：JQuery、Vue和React

JQuery

JQuery是一个Javascript库，帮我们封装了很多的原生的Document操作和Ajax请求，提供更为方便的Api,但实际与Vue.js和React相比，JQuery和使用原生Document操作一样，都是需要开发人员自己操作HTML的Document。