初识 JavaScript 第一篇及解释器和编译器

JavaScript 基础第一篇 —— 变量

回顾

整个上一章节我们学习了布局的三篇，在布局中学习了流式布局和 flex 布局以及最后的 rem 布局，这些都是和布局相关的，因为移动端的流行，所以免不了需要前端中去兼容各种终端。故此方式还是挺多，各显神通。可以根据显示的业务场景或者自己团队比较擅长的布局方式去写。

布局学完之后，今天我们就进入了前端中相当重要的一个知识点，也就是：JavaScript，通常称之为：js。也是前端中非常重要非常好玩的一环，在往后的工作中写业务逻辑都和 js 是密不可分的！所以基础一定要扎实。

计算机基础

在学习 js 之前我们可以大概的了解一下计算机的一些基础。了解一下编程语言和标记语言的区别和内存等。

编程语言和标记语言

• 编程语言：有很强的逻辑和行为能力，在编程语言里，你会看到很多判断的逻辑，例如：if else、for、while 等逻辑行为的指令，这些都是属于主动的。

• 标记语言：不用向计算机发出指令，常用于格式化和链接，标记语言的存在是被用读取的它是被动的。

计算机组成及内存

计算机是由硬件和软件组成的，硬件一般是内存、鼠标、键盘、cpu、硬盘等。

graph TD计算机 --> 硬件硬件 --> 输入设备 --> 鼠标硬件 --> 输出设备 --> 显示器硬件 --> CPU --> 负责数据处理和运算硬件 --> 硬盘 --> 负责存储永久数据硬件 --> 内存--> 负责存储临时数据计算机 --> 软件软件 --> 系统软件 --> Linux软件 --> 应用软件 --> 微信

内存：内存的出现极大的改善了数据读取的速度。很早之前因为 cpu 计算能力太快而硬盘读取数据太慢，浪费了时间 所以出现了内存来保存运行的数据。

关于这些你暂时可以不用理解，先作为了解记住就好。往后的学习越多你会发现基础能力越欠缺。

浏览器组成部分

浏览器分为两部分组成，渲染引擎和 js 引擎

渲染引擎：用来解析 HTML 与 CSS，俗称内核，比如 Chrome 浏览器的 blink，老版的 webkit。

js 引擎：也称为 JS 解释器，用来读取网页中的 JavaScript 代码，对其处理后运行，比如 Chrome 浏览器的 V8

首先需要注意的是：浏览器本身不会执行 JS 代码，而是通过内置 JavaScript 引擎（解释器）来执行 JS 代码，JS 引擎执行时逐行解释每一句源码（转换为机器语言），然后通过由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行

js 组成部分

ECMAScript（js 语法）

ECMAScript：它规定了 JS 的编程语法和基础核心知识，相当于是一个制定 js 的标准，也是所有浏览器厂商共同遵守的一套 JS 语法工业标准。你所熟悉的 ES6、ES5 都是出自 ECMAScript 的。

DOM

DOM：页面文档对象模型。它是一种与平台和语言无关的应用程序接口。这里就暂且先记住就好，在未来会学习很多 DOM 的 API。

BOM

BOM：浏览器对象模型。浏览器窗口的 window 对象是 BOM 的顶层对象，其他对象都是该对象的子对象。

注意：刚开始学你会感觉到这三个组成部分比较抽象。比较难懂，没关系慢慢来，基础 js 部分学习完之后，我们会逐步的学习 DOM 和 BOM 的 API 方法

初识 js

js 初体验

和 css 引入的方式一样，js 也会有三种的引入方式，分别为：行内、内嵌、外部。其中我们一般写代码用的是内嵌。一般用第三方库也会有用到外联这样的，但是如果是外联的话 <script></script> 中间的不允许写代码的。

注释

• 单行注释： //

• 多行注释：/**/

  <script>    // 两个斜杠 表示 单行注释
    /*       表示多行注释     我再来一行    */  </script>

输入和输出语句

• alert(msg) —— 浏览器弹出警示框

• console.log(msg) —— 浏览器控制台打印输出信息

• prompt(msg) —— 浏览器弹出输入框，用户可以输入

// 这是一个输入框prompt('无言独上西楼 下一句')
// 浏览器控制台打印console.log('11111')
// 浏览器弹出警示框alert('月如钩')

js 变量

变量概述：变量就是从内存中申请一个空间来存放数据

变量的使用：用 var 声明变量，计算机会自动的分配空间给程序

赋值： var myName = 'stk'

注意：如果一个值被重新赋值之后，它原有的值会被覆盖，变量值将以最后一次的赋值为准

声明多个变量：

// 声明多个变量var age = 18,    name = 'stk',    music = '晴天'

如果只声明不赋值的话会出现：undefined

数据类型

-数据类型简介： 在计算机中不同的数据类型，存储的空间是不同的

-简单数据类型：

• Number：数字类型（整型、浮点型）

• MAX_VALUE —— 表示数据的最大值 num.MAX_VALUE

• MIN_VALUE —— 表示数据的最小值 num.MIN_VALUE

• isNaN() —— 判断非数字。如果返回的是 false 表示是数字，如果返回的是 true 表示不是数字 用法：console.log(isNaN(12)) —— 返回 false

• Boolean：布尔类型（true、false）

• String：字符串类型('张三')

• 注意：任何类型和字符串相加都会变成字符串类型

• 字符串转义字符

• \n : 换行符

• \ : 斜杠

• ' : 单引号

• " : 双引号

• \t : tab 缩进

• \b : 空格

• 获取字符串长度：name.length

• undefined：没有给值，就是为 undefined，例如：var a； 此时输出 a 会打印 undefined

• Null：声明为空 如果数字和 undefined 相加会出现 NaN，（not a number）

获取变量数据类型

检测变量是什么类型：typeof

// 声明一个变量var num = 10// 检测 num 是什么类型console.log(typeof num)

数据类型转换

把一种数据类型的变量转换成另一种数据类型

-转换字符串类型

• toString() —— 转换字符串：var num = 1; alert(num.toString())

• String() —— var num = 1; alert(String(num))

• 加号拼接字符串(重点) —— var num = 1; alert(num + '我是字符串')

-转换数字类型（重点）

• parseInt() 函数 —— parseInt('79') 转换整数

• parseFloat() 函数 —— parseFloat('78.21') 转换小数

• Number() 函数 —— parseFloat('12')

-其他类型转换布尔类型

• Boolean() 函数 —— Boolean('True')

注意：代表空、否定的值会被转换为 false，如“”、0、NaN、null、undefined，其余的都是 true

编译器和解释器

计算机不能直接理解任何除机器语言之外的语言，所以必须把程序员缩写的程序语言编译成机器语言，才能执行。程序语言编译机器语言的工具称之为：编译器。

但是编译器编译的方式有两种，一个是编译、一个是解释，两种方式之间的区别在于编译的时间不同

编译型语言：编译器 是在代码执行之前进行编译，然后生成中间代码文件

解释型语言：解释器 是在运行时进行及时解释 ，并且立即执行（当编译器以解释方式运行的时候，也称之为解释器）

一般 例如 java 这类语言称之为：编译型语言，而我们所学习的 js 称之为：解释型语言。

这一篇内容还是相当多的，也算是一个 js 的入门基础，基础学来总是比较枯燥无味的，所以需要坚持和练习。“书读百遍，其意自见”。这篇基础就完了，有什么问题欢迎随时留言~