哈喽，好久不见，或许会有朋友在想这段时间我在干什么，但是看这个浏览量可能并没有，那么这段时间我在干什么呢？实不相瞒，我也在想这个问题。
序
从我这个网站系列教程从头看到现在的朋友可能知道我出了React全家桶教程，出了Promise教程，好像在此之前还有一点Python教程的前言部分。也许有朋友会疑问：你到底是前端还是后端呢？其实我现在虽然在公司里主要职责是后端，但是实际上我是一个全栈，或许大家也看见了我置顶的简历，但是那已经快要两年都没有更新了，那么这将近两年的时间在我身上都发生了什么呢？
我在这两年时间一直是不安现状的，我做了Go语言开发，Java开发，做了GUI开发，重新学习了C语言，尝试了C++，利用Rust来重构过一些小项目，还尝试了用C语言和C++以及Rust语言来自己实现Python底层。我也紧跟过行业的最前沿，也关注过最新的技术栈，也对比过主流编程语言的设计哲学之间的异同以及各自的优势，研究过各语言底层的内存分配。而且单独拎出来一段时间重新研究汇编语言，所谓温故而知新，虽然我还不能像一些大牛那样能用汇编来写一个编译器，但对我的C语言还是有大的帮助。
除了这些以外，我还尝试去接触和学习关于架构层面的东西，包括分布式与高并发方面的学习。我在入行之前听说过架构师这个词，那时候还不知道架构师是个什么，但是却也立下誓愿：我是要成为架构师的男人。现如今入行 5 年多，初心未改。
概述
当然我写这些确实和今天这节课的内容没有任何关系，我是什么时候开始想起来写这些教程的呢？因为我入职目前的公司之后就基本在做后端开发，久而久之前端方面的知识都渐渐开始遗忘了，所以我就干脆也别说复习了，直接重新以一个初学者的心态重新学习一下吧，当然了，我没有写HTML/CSS/JavaScript的教程，而是从一个综合性比较强的前端框架开始。
但是我们现在市面上主流的前端框架都是只管页面展示，不管向后端发送请求的环节，那么开发中的ajax请求那就得我们自己手动发送，但是呢我没有单独开一个系列来出ajax请求的教程，惊不惊喜，意不意外？
因为实在是太简单了，没有什么可说的，我们也都知道前端发送ajax请求可以通过原生js来实现ajax请求，也可以通过jQuery封装的API来发送ajax请求，但是现在市面上的前端开发可以说是大框架时代，最主流的两大框架就是React和Vue，可以说基本上不会有人在这两个框架里用jQuery的，而且原生的ajax请求也太繁琐，所以市面上基本都在最主流的一个发送ajax请求的库，就是axios。
其实我本来是打算出一个axios的教程的，但是写了几节之后觉得好像没有什么可说的，早在写Promise教程的时候我就隐约觉得好像没有什么可写的，而且里面还牵涉到很多JS基础的知识在里面，如果基础不牢的话，可能有很多教程中我觉得写得很清晰的东西，还是会觉得不明白。所以说我来准备开一个系列来系统性地聊一聊JS基础。那么就先从这一节简介开始吧。
JavaScript和Java
其实很多初学者在看见JavaScript这个词的时候，下意识就会先入为主，只看前半段，认为这门语言是Java语言衍生出来的一门语言。当然也有很多人是会写JavaScript教程的，而且都喜欢在开篇都会说，JavaScript和Java没有任何关系。
当然了对于这两种想法我都是不赞同的。其实并不是后者所说的那般，JavaScript和Java一点关系都没有，但是也不像前者所想，JavaScript是Java衍生出来的语言。JavaScript是弱类型语言，是动态语言，而且还是解释型语言。JavaScript语言不像Java那样有权限修饰符。但是JavaScript语言中的一些思想和Java还是类似的，比如类继承。
所以我们不能一棍子打死说JavaScript和Java没有关系，或者说JavaScript就是Java的子语言。不过我们一直来纠结这个问题的话是没有意义的，不论JavaScript和Java有关系也好，没关系也罢，我们的JavaScript系列教程是和Java一点关系都没有的。
JavaScript简史
可能很多人即便没学过也大概听说过JavaScript，前端三件套，html、css、js，这里的js就是对JavaScript的简称。那么大家来猜一下JavaScript是什么？首先我们知道这肯定是用在前端开发中的一门编程语言，这门语言诞生于 1995 年，它的出现主要用于处理网页中的一些前端验证。
最初js由网景公司发明，刚一发明的时候还不叫JavaScript，那时候叫LiveScript，后来因为SUN公司的介入才更名为JavaScript，后来微软在IE中引入了自己的JScript来实现JavaScript，后来市面上就存在这JavaScript和JScript这两个版本。再后来为了确保不同的浏览器上运行的JavaScript标准的一致性，几个计算机行业的公司就在一块共同制定了js的标准，就是ECMAScript简称ES。
随着技术的发展到现在，我们最常见的两个词ES和js，我们通常都认为是同一个意思。但是我们要知道的一点是，js的涵盖面要更广，js包含ES，DOM和BOM这三个部分。这三个部分也就是我们这个系列教程要学习的三个主要部分。
JavaScript怎么使用。
我们现在大概也了解了一下js了，那么我们开始学习一下这门语言吧，首先我们要知道这门语言怎么用，我们知道js是一门编程语言了，那么要用这门编程语言，肯定得写代码，那么代码在哪写呢？我们知道这是用在网页中的，那么最简单的方式就是把js代码写在一个网页中。
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Test</title> <script type="text/javascript"> alert("Hello World"); </script> </head> <body> </body> </html>
我们来看一下代码，这个结构大家应该很熟悉了，html的基本结构，然后我们在head标签里面写了一个script标签，这就是在网页中引入js的基本方法，我们可以在script标签中来编写我们的js代码，而且script标签中的type属性是可以省略的，不影响代码执行。按照习惯，不管会不会，先Hello World一下。这段代码是什么意思呢？就是我们让浏览器弹出一个警告窗口，并在窗口中显示Hello World。那么我们来看一下效果：
我们看见在浏览器中打开我们的index.html直接就弹窗了这个窗口。那么除了写在这里还能不能写在别的地方呢？，比如说我们把script标签换个地方：
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Test</title> </head> <body></body> </html> <script type="text/javascript"> alert("Hello World"); </script>
我们这次把script标签写在了html标签之外了，那么我们再来看一下结果：
我们发现依然也是可以正常弹出警告弹窗的。也就是说script标签的位置并不影响js代码的执行。那么我们能不能不在script标签中写js代码呢？那么我们来试试：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Test</title> </head> <body> <button onclick="alert('You clicked the button!');">Click me</button> </body> </html>
我们来看这段代码，大家在学html的时候应该都知道button标签的onclick属性，这个属性绑定一个回调，然后再按钮被点击的时候就会执行绑定的回调，那么我们这里让onclick属性绑定了一行js代码，那么当我们点击这个按钮的时候会不会执行这行js代码呢？我们来看一下结果：
我们看见在点击按钮的时候也可以弹窗警告弹框。那么说明我们也可以在按钮的onclick属性中来编写js代码，那么同理其他类似button标签的元素的点击属性或者其他可操作属性中也是支持js代码的。但是这种方式虽然是支持的，但是这样的话会导致强耦合，使得我们的维护起来会更加困难。而且代码的复用性也会很差。
那么除此之外就没有其他方式了吗？我们的css都可以把css代码全部写在一个独立文件中，然后再在html文件中通过link标签来引入，那么js支不支持这种方式呢？我们来试一试：
// index.js alert("Code in js file!");
我们在index.html的同级目录创建了一个js目录，在js目录中创建了一个index.js文件，这就是一个用来写js代码的文件，扩展名为.js，就是我们对JavaScript的简称，然后我们在文件中就写了一行代码，就是让页面弹出一个警告弹窗，里面展示我们写好的内容。那么接下来我们在index.html文件中来引入这个文件吧：
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Test</title> <script src="js/index.js"></script> </head> <body> </body> </html>
我们来看一下代码，我们页面中没有写任何内容，只是在head标签中添加了一个script标签，标签中添加了一个src属性，这个属性是什么意思呢？这个属性就是要我们来指定我们要引入的js文件的路径，绝对路径和相对路径都是可以的。那么我们来看一下效果，我们这里引入的js文件会不会被执行呢：
我们看见这次页面也成功弹出了一个警告窗口，并且显示了我们指定的内容。所以我们是可以把js代码写在独立的js文件中，然后通过script标签来在html中引入的，而且这种方式还会用到浏览器的缓存机制，可以在下一次打开同一页面时减少页面的加载时间，而且我们也可以在多个不同的页面中引入同一个js文件，这样代码的复用性就提高了。所以在开发中我们通常都会优先使用这种方式来引入js。
那么现在又有一个新的问题，我们使用script标签引入了一个外部的js文件，那么我们这个script标签中还能不能写js代码呢？就像这样：
<!--index.html--> <!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Test</title> <script src="js/index.js"> alert("Inner js code!"); </script> </head> <body> </body> </html>
我们在引入外部js文件的script标签的标签体内容中写了一行js代码，如果这行代码能执行的话将会先后弹窗两个警告弹窗，那么我们来看一下实际效果是怎样的：
我们看见从始至终，只有一个弹窗出来，不论我们怎么刷新页面都只有我们引入的外部js中代码被执行了，所以说，用来引入外部js文件的script标签中是不能写js代码的，即便我们写了js代码，也会被页面忽略掉。
以上便是js的最开始的简介部分，这节课我们就到这里，下节课我们将介绍关于js的基本语法部分。
Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.
Link of this article：https://work.lynchow.com/article/start_js/
