【前端入门】前端小白必备的JavaScript基础知识

756 阅读5分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

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

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

了解一下JavaScript语言

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

JavaScript最开始被设计出来,是为了能让HTML网页”动起来“,因此JavaScript是非常简单的,其核心语法非常精简,只包括两个部分:基本的语法构造(比如数据类型、操作符、控制结构、语句)和标准库(如ArrayDateMath等),而更复杂的功能则依赖于宿主所提供的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

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

在学习前端时,常常会见到ES5ES6这两个概念。

ES5表示ECMAScript的第五个版本。

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

框架与库:JQuery、Vue和React

JQuery

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

React

用于构建用户界面的JavaScript库,与JQuery相比,React专门于UI层,因其响应式设计,因此能根据数据变化,自动渲染UI,使用React开发前端复杂项目时,也可以使用其组件将复杂项目执分,方便代码复用。

Vue.js

Vue.js是一套用于构建用户界面的渐进式框架,其核心库只关注视图层,这点与React是相同的,无论是响应式设计还是组件,Vue.js和React是类似的。

Webpack

Webpack是一个前端资源加载/打包的构建工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

Webpack之前,还有gulpgrunt等编译打包的构建工具,另外也有由Vue.js团队亲自打造的下一代开发与构建Vite

Babel

Babel是一个JavaScript编译器,这里的编译与C语言的编译不同,这里的编译是指将使用ES6语法编写的代码转为ES5语法规范,因此并不是所有的浏览器都支持ES6语法规范。

TypeScript

TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。不过使用TypeScript编写的脚本不能在浏览器直接运行,而是要通过TypeScript编译器Babel转译为JavaScript代码。

小结

通过上面的讲述,我想你对纷繁的前端概念应该有一定认识和了解,希望通过上述讲解,能让你对前端有更好的了解!