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

来源：好走旅游网

JavaScript基础第一篇 —— 变量

回顾

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

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

计算机基础

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

编程语言和标记语言

编程语言：有很强的逻辑和行为能力，在编程语言里，你会看到很多判断的逻辑，例如：if else、for、while等逻辑行为的指令，这些都是属于主动的。
标记语言：不用向计算机发出指令，常用于格式化和链接，标记语言的存在是被用读取的它是被动的。

计算机组成及内存

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

内存：内存的出现极大的改善了数据读取的速度。很早之前因为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>

输入和输出语句

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的入门基础，基础学来总是比较枯燥无味的，所以需要坚持和练习。“书读百遍，其意自见”。这篇基础就完了，有什么问题欢迎随时留言~

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文