从零开始学WEB前端|从零开始学WEB前端——网页的行为——JavaScript基础（1） javascript|html|css|开发语言|前端

项目介绍先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员。
该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才放上去的。每次的代码和笔记我都放在了开源仓库里，有需要的同学请不要吝啬给我一个star。如果觉得本文写的不错的话记得点赞+关注，你们的支持是我坚持下去的动力。

生者为过客，死者为归人。
天地一逆旅，同悲万古尘。
月兔空捣药，扶桑已成薪。
白骨寂无言，青松岂知春。
前後更叹息，浮荣安足珍？
——李白《拟古·其九》
译文：活着的人是世间的过客，死去者才是归家的人。天地之间如同一场旅行，可悲呵，人都将化为万古的尘埃。月中白兔徒然捣药，扶桑神树已变成薪柴。地下白骨寂寞无言，青松岂知冬去春来。思前想后更叹息不已，功名富贵哪里值得珍爱？

** 白骨寂无言，青松岂知春。** 这句真的破防了。

语雀地址：https://www.yuque.com/beilayanmen
Github地址：https://github.com/SuZui-cn/my-web
Gitee地址：https://gitee.com/north_gate/my-web
个人博客地址：https://foollyone.cn/
?本文知识点

什么是JavaScript
- 编程语言
- 脚本语言
- 解释型
基本作用
- ECMAScript
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）

最开始我只打算在js出两章（一章基础+一章进阶），但是js对于想要学好前端的同学来说太重要，所以我把这个阶段拆分开来分为几个小节，尽我所能的把js讲好（本人毕竟才疏学浅）。作者因为主要是主职Java后端，所以对js的研究投入的时间太少，所以有讲的不好的请见谅。如果发现问题请私信我。

给大家推荐几本我学的时候看的书，这几本书都可以在微信读书上面免费观看：
《JavaScript高级程序设计（第3版）》
《JavaScript忍者秘籍（第2版）》
《JavaScript权威指南（原书第6版）》
再给大家推荐两套视频，建议初学者先看视频对知识点有了一定的了解之后再去看书籍：
黑马程序员pink老师：https://www.bilibili.com/video/BV1ux411d75J?from=search&seid=6494653037952930960&spm_id_from=333.337.0.0
尚硅谷：https://www.bilibili.com/video/BV1YW411T7GX?from=search&seid=6494653037952930960&spm_id_from=333.337.0.0

还有剽悍一小兔的《JavaScript百炼成仙》
在线阅读地址：https://m.zhangyue.com/readbook/12567484/5.html
什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
——百度百科

上面的这段话中我标注了几个重点，这里我调整了一下顺序：

编程语言
脚本语言
解释型
函数优先
原型编程
面向对象

而JavaScript由三个部分组成：

ECMAScript
文档对象模型（DOM）
浏览器对象模型（BOM）

这里会介绍前三个理论概念，剩下的会在之后的文章中详细讲解。
编程语言
先来第一个概念，编程语言，那什么是编程语言？编程语言又能干什么？
我们把编程语言这个名词拆开来看他是由编程和语言构成的。
这里的编程说白了就是让计算机照我说的做，那怎么像计算机传达我的意思呢？这就需要用语言来沟通了。
综上所述：编程语言就是一种人和计算机都能读懂的一门语言，用于双方的沟通交流。

为了使计算机能够理解人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。
——百度百科

语言是人与人之间进行沟通交流的表达方式
——百度百科

编程语言（programming language）可以简单的理解为一种计算机和人都能识别的语言。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。
——百度百科

pass：HTML是标记语言！！不是编程语言！！！
脚本语言
那我们知道了编程语言是什么，那怎么又冒出一个脚本语言来了？
说到脚本语言，我们又不得不扯一下关于编程语言的编译系统。
根据《深入理解计算机系统》一书中的介绍，一个完整的翻译过程应该包含如下的四个阶段：
预处理阶段 -> 编译阶段 -> 汇编阶段 -> 链接阶段

从零开始学WEB前端|从零开始学WEB前端——网页的行为——JavaScript基础（1）

文章图片

经过这一系列的操作之后我们的代码才能运行，这样就很麻烦。为了解决这一问题，脚本语言诞生了。
脚本语言不需要编译器，而需要一个翻译器。

编程语言和脚本语言的最大区别：编程语言是把程序员所定义的代码翻译成计算机所认识的二进制代码的工具，脚本语言是解释执行的（如写的前端代码过能浏览器这个解释器，把代码呈现出web界面，这就是在运用脚本语言，进行编程）
——稀土掘金·Angelia

解释型
在上面说到了脚本语言使用的是解释器，现在我们来讲一下什么是解释型语言。

有的编程语言要求必须提前将所有源代码一次性转换成二进制指令，也就是生成一个可执行程序（Windows 下的 .exe），比如C语言、C++、Golang、Pascal（Delphi）、汇编等，这种编程语言称为编译型语言，使用的转换工具称为编译器。
有的编程语言可以一边执行一边转换，需要哪些源代码就转换哪些源代码，不会生成可执行程序，比如 Python、JavaScript、PHP、Shell、MATLAB 等，这种编程语言称为解释型语言，使用的转换工具称为解释器。

文章图片

相对于编译型语言存在的，源代码不是直接翻译成机器语言，而是先翻译成中间代码，再由解释器对中间代码进行解释运行。比如Python/JavaScript / Perl /Shell等都是解释型语言。
——百度百科

学习一门语言不止要学习他的语法和流程控制语句，更重要的是要学习他的思想。

基本作用在上面我们简单的介绍了一下JavaScript，我们知道了他是一门脚本语言，也知道了他和C语言（编译型语言）的区别。现在我们来讲一下JavaScript的一些作用。
作为一门编程语言，他必然可以然我们和计算机进行沟通，但是这种沟通主要是面对浏览器。
这里要再提一下JavaScript的构成：

ECMAScript (语法和基本对象)
文档对象模型（DOM）
浏览器对象模型（BOM）

ECMAScript
首先我们先要学习ECMAScript，也就是JavaScript的基本语法和内置对象。
完成了这一阶段差不多就可以用JavaScript来实现一些像C语言一样的流程控制if for这样的结构，这时候我们也可以用JS来写一下算法题了。但是这个时候JS真正的魅力还没有展示出来。

ECMAScript是由网景的布兰登·艾奇开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为LiveScript，最后重命名为JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMA-262的第一个版本于1997年6月被Ecma组织采纳。ECMA Script是ECMA-262标准化的脚本语言的名称。尽管JavaScript和JScript与ECMAScript兼容，但包含超出ECMA Script的功能。
——百度百科

文档对象模型（DOM）
DOM操作是JS的核心，在这里我们会学习用JS代码去操作HTML和CSS，这是JS的精髓，同时我们要去理解DOM树这个概念。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
——百度百科

这时候我们已经可以写一个不错的网站了，可以给网站添加很多的事件。

这里的事件指与用户之间的交互。列如：点击的时候会发生什么（点击事件），鼠标失去聚焦之后会发什么

pass：DOM树这个结构对于计算机世界来说是意义非凡的。他用标签的形式为我们的文本添加语义，从而让文本有不同的意义。不止存在于网页，还有一个很好的体现就是office三件套（word、excel、ppt），试试创建一个office的文件，随便输入点内容，设置点样式然后把他的后缀名改成.zip，再进行解压，之后你就会看到办公文件的本质。

浏览器对象模型（BOM）
BOM操作也是一个重点，主要是与浏览器进行交互的方法和接口。
BOM体系结构图如下：
【从零开始学WEB前端|从零开始学WEB前端——网页的行为——JavaScript基础（1）】

文章图片

BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象。也就是说BOM提供了DOM操作。