JavaScript 语言基础 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天。今天，我跟随月

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天。

前言

今天，我跟随月影老师学习了 JavaScript 编码原则之各司其责、JavaScript 编码原则之组件封装、JavaScript 编码原则之过程抽象、Leftpad 事故背景引入以及 JavaScript 代码的质量优化之路等等。

由于我个人的基础比较薄弱，我主要聚焦在 JavaScript 的语言基础部分，并做了相应的笔记。

JavaScript 概述

JavaScript 是一种脚本语言，是一种轻量级的编程语言。它是可以插入 HTML 页面的编程代码，在 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 变量

JS 是弱变量类型的语言，变量只需要用 var/let/const 来声明。而 Java 中变量的声明，要根据变量的类型来定义。

// ES5 写法
var a;

// ES6 写法
const a;
let a;

JavaScript 组成

JavaScript 总体分为三个部分：

ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if 语句、for 语句等。
DOM：Document Object Model（文档对象模型），JS 操作页面上的元素（标签）的 API。比如让盒子移动、变色、改变大小、轮播图等等。
BOM：Browser Object Model（浏览器对象模型），JS 操作浏览器部分功能的 API。通过 BOM 可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。

引入 JavaScript 代码

引入 JS 代码，有三种方式，这与和 CSS 的引入方式类似

行内式：写在标签内部。
内嵌式（内联式）：写在 head 标签中。
外链式：引入外部 JS 文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
        <script src="utils.js"></script>
    </body>
</html>

这段代码，JavaScript 文件被放到了 body 标签里，可以和内嵌的 JS 代码并列。上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。

在实战开发中，基本都是采用外链式。因为将 html 文件和 js 文件分开的方式，有利于代码的结构化和复用，符合高内聚、低耦合的思想。

JavaScript 输出语句

alert()语句
- 弹出“警告框” 。它会在弹窗中显示一条信息，并等待用户按下 “OK”。
confirm()语句
- 代码运行后，页面上会显示一个弹窗。弹窗上有“确认”和“取消”两个按钮，点击“确定”返回 true，点击“取消”返回 false。
prompt()语句
- prompt()就是专门弹出能够让用户输入的对话框。
document.write()语句
- 网页内容区域输出
console.log() 打印日志
- console.log()表示在控制台中输出。在 Chrome 浏览器中，按 F12 即可打开控制台，选择「console」栏，即可看到打印的内容。