JavaScript 学习之路-起步-优快云博客

本文链接：https://blog.youkuaiyun.com/LightLinV/article/details/84501599

这是一篇讲 JavaScript 基础的文章，接下来会更新这个系列文章。

JavaScript 诞生于 1995 年，至今已经有 20 几年了，在最新的 JavaScript 2018 年度报告中，许多人依旧认为这门语言正在朝着好的方向去发展，从最开始的默默无闻到如今的未来可期，JavaScript 作为前端开发者的一门学习语言，一定会被更多爱好编程的人喜欢。如果想了解和学习 JavaScript，请往下看。

ECMAScript

在了解 JavaScript 前，首先要了解 ECMAScript ，它是由 ECMA-262 定义的一门语言。它规定了一些基本的语法、变量、语句、操作符以及对象等等内容，而 JavaScript 去实现了它，也就是说，JavaScript 去实现了 ECMAScript，我们经常说 JS 的新版本，实际上是 ECMAScript 的新版本，最被人经常用的是第五个版本(ES5) 还有ES6，它包含了许多新知识新特性。简而言之，JavaScript 的概念更广，它包含了 ECMAScript ，除此之外还有文档对象模型 (DOM) 和浏览器对象模型 (BOM) 。

两种使用方式

不同于其它编程语言，JavaScript 内嵌于浏览器中，许多主流浏览器都支持 JavaScript。打开 Chrome 浏览器，按 F12 或鼠标右键选择审查元素，就可以看到控制台，在控制台上就可以书写 JS 代码，例如你可以在控制台输入console.log('hello world!');就可以看到下方出现了一句熟悉hello world!。

这是写 JS 代码最快速便捷的方式，但一般我们都是在编辑器中完整地完成整个项目，关于编辑器各人有各人的爱好，稍后会列出常用的几个编写 JS 代码的编辑器。

来到了编辑器中，我们新建一个后缀名为 .html 的文件，在里面写有关 JS 的代码，如果你连 HTML 都不认识，可以到 w3school 去在线学习基础的 HTML 知识。不出所料，一个基本的 html 文件的头应该是下面这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 这里是内容代码 -->
</body>
</html>

JavaScript 使用 <script> 标签来嵌套代码，所有的 JS 相关的代码都放在里面，而 <script> 标签可以放在 <head></head> 中，也可放在 <body></body> 中，最好放在后者，因为浏览器解析时是从上至下解析这段代码，放在中很容易因为解析慢而导致下方中的内容未渲染出来，从而影响用户体验。

<script> 有几个常用的属性，最常看到的就是 type 和 src 了，type 属性顾名思义，指定了属性含义，常用值是text/javascript，让人知道这里面写的都是 JavaScript 类型的标签代码；src 属性也是经常看见的，指定了一个外部的 href 链接，JavaScript 有两种引入方式，一种是直接在 标签里面写代码，另外一种就是创建一个后缀名为 .js 的文件，然后通过 src 链接进来使用。

<script> 标签有一个 defer 属性，这个属性的作用是告诉浏览器等所有内容都解析完后再来执行这个脚本，也就是起到一个延迟执行脚本的作用。

<script> 标签还有一个 async 属性，适用于外部引入的 .js 文件，作用是告诉浏览器不比等它执行，可以异步先去加载其它内容。

以上几个属性的使用方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" defer="defer" src="××.js"></script>
    <script type="text/javascript" async src="××.js"></script>
</head>
<body>
<!-- 这里是内容代码 -->
</body>
</html>

文档模式

IE5.5 开始引入了文档模式这个概念，它会影响 css 内容的呈现，也会一定程度上影响到 JavaScript 的执行。文档模式只需要记住有混杂模式和标准模式两个，在混杂模式下，不同浏览器下执行的会有很大差异，因此不被人所推荐，一般都是用的标准模式，这个标准模式我们也很熟悉了，就是在 html 文件经常看到的

<!DOCTYPE html>

不支持 JavaScript

当遇到浏览器不支持 JavaScript 脚本或者脚本被禁用了怎么办？这时候可以用到 <noscript> 标签，它会在浏览器不支持 JS 脚本时候显示，而其他情况下不会有什么影响，所以为了用户体验，可以在代码里加上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <!-- 这里是内容代码 -->
  <noscript>
    <p>您的浏览器不支持 JavaScript ，请升级。</p>
  </noscript>
</body>
</html>

这样，当遇到不支持 JS 时，这段文字就会显示出来，提醒用户升级或更换浏览器。

编辑器

最后，有许多可以编写 JavaScript 代码的软件。就我知道的有以下这些：

WebStorm
PhpStorm
Sublime Text
VS code
Dreamweaver
HBuilder

以上这几个软件基本都用过，现在在用 PhpStorm ，它跟 WebStorm 差不多，只不过多了对 php 文件的支持，很多人都是用的 WebStorm ，它代码提示等做得很好，页面看起来也还行，缺点应该是打开的时候挺慢，最重要的是，时不时地就过期需要去找注册码，当然，有条件的话还是付费支持正版的好，听说学生去申请可以有授权使用，不过太麻烦了懒得去弄。