Web前端系列技术之JavaScript基础（从入门开始）①

JavaScript基础学习一

从今天起，就逐步开始了学习前端编程语言的时光，而其所谓真正的前端编程语言，JavaScript必然是当之无愧的；那究竟 什么是编程语言呢？ 既然JavaScript称得上是当之无愧的前端编程语言，那么到底 什么是JavaScript呢？ 学习JavaScript语言的 目的是什么呢？ ， 或许是又 该如何学习JavaScript呢？

面对以上种种问题，在开始学习JavaScript之前，我也是一脸疑惑，可立志成为一个全栈前端开发工程师的我，JavaScript语言当然是不可能不会的啦！！！

简单来说：JavaScript语言就是人们口中常说的JS语言（习惯了解）

那么今天主要介绍的内容有：
一、编程语言
二、JavaScript介绍
三、变量
四、数据类型
五、类型转换

---

---

一、编程语言

什么是编程语言？或许这就是我们经常疑惑的问题

至于什么是编程语言，我们可以把它拆分进行解读：编程语言 = 编程 + 语言 ；

1. 编程： 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程；

2. 计算机程序： 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令；

3. 语言： 这里意为【计算机语言】， 那所谓的计算机语言通常指的是用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介；

计算机语言的种类非常的多，总的来说可以分成 机器语言 、汇编语言 和 高级语言 三大类；而实际上计算机最终所执行的都是 机器语言，它是由“0”和“1”组成的二进制数，二进制就是计算机语言的基础；

所以，在实现通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情的语言就叫做编程语言（Programming Language）；

编程语言 是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。如今通用的编程语言有两种形式：汇编语言 和 高级语言 ，而之前所介绍的 HTML 是属于 标记语言，那么它们的区别如下表所示：

语言	说明
编程语言	编程语言有很强的逻辑和行为能力；在编程语言里, 存在很多 if else 、for 、while等具有逻辑性和行为能力的指令，是属于主动的
标记语言	标记语言（html）不用于向计算机发出指令，常用于格式化和链接；标记语言的存在是用来被读取的，是属于被动的

1. 语言类型说明

语言类型	说明
汇编语言	汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆
高级语言	高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等

2. 翻译器

在高级语言所编制的程序中，是不能直接被计算机识别，这就必须经过翻译器的转换才能被执行。而翻译器工作的原理就是将所编写的程序源代码转换为计算机所能识别的机器语言（二进制语言），这也被称为二进制化，其具体相关内容可以查看 百度百科 ；

不过，翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同；
① 编译器是在代码执行之前进行编译，生成中间代码文件
② 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)；

其主要的工作流程如下：

---

二、JavaScript介绍

什么是 JavaScript ？其是世界上最流行的语言之一，是一种运行在客户端（浏览器）的脚本语言 （Script 是脚本的意思），实现人机动态交互效果；

其中，脚本语言是不需要编译，其运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行；

布兰登 · 艾奇，一个只花了 十天 就完成了JavaScrip语言开发的佬中佬，各位小伙伴们，请记住他；

1. JavaScript作用

• 表单动态校验（密码强度检测）（ JS 发明的最初目的 ）
• 网页特效（监听用户的一些行为让网页作出对应的反馈）
• 数据交互（获取后台的数据, 渲染到前端）
• 服务端开发（Node.js）（参与后台的开发）
• 桌面程序（Electron）
• App（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（cocos2d-js）

2. JavaScript组成

JS语言主要由 ECMAScript 和 Web APIs 组成，其中ECMAScript 规定了js基础语法核心知识，Web APIs 中的 DOM 负责操作文档和 BOM 负责操作浏览器，具体组成结构如下图所示：

2.1 ECMAScript

ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript ，但实际上后两者是 ECMAScript 语言的实现和扩展；

规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

更多可参看MDN: MDN手册

2.2 DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）；

2.3 BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等；

3. JavaScript引入

JavaScript 程序是不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，在之前了解的CSS中主要分为三种引入方式，分别是 行内样式 、内部样式 和 外部样式 ；同样，在JS中也有3种引入方式，分别为 内联方式 、内部方式 和 外部方式 ；

3.1 内联方式（了解）

具体引入代码：

<input type="button" value="点我试试" onclick="alert('Hello World')" />

• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick；
• 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号；
• 可读性差， 在html中编写JS大量代码时，不方便阅读；
• 引号易错，引号多层嵌套匹配时，非常容易弄混；
• 后面vue框架会使用这种模式；

3.2 内部方式

具体引入代码：

<script>
    alert('Hello  everyone!')
script>

• 书写的位置尽量写到文档末尾 前面；
• 可以将多行JS代码写到 script 标签中；
• 内部 JS 是学习练习时常用的方式；

3.3 外部方式

具体引入代码：

<script src="xaiochai.js">script>

• 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
• 引用外部 JS文件的 script 标签中间不可以写代码，需要通过 script 标签的 src 属性引入；
• 适合于JS 代码量比较大的情况；

4. JavaScript注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能；通过注释可以屏蔽代码被执行或者添加备注信息，其中JavaScript 支持两种形式注释语法：

4.1 单行注释

① 符号：使用 // 注释单行代码；
② 作用：// 右边这一行的代码会被忽略；
③ 快捷键：ctrl + /；

样例代码：

// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
document.write('嗨，我是小柴，欢迎三连哟')

4.2 多行注释（块注释）

① 符号：使用 /* */ 注释多行代码；
② 作用：在 /* 和 */ 之间的所有内容都会被忽略；
③ 快捷键：shift + alt + A；

样例代码：

/* 这种的是多行注释的语法 */
/*
   更常见的多行注释是这种写法
   在些可以任意换行
   多少行都可以
*/
document.write('嗨，我是小柴，欢迎三连哟')

注意：
当然快捷键的使用也是可以修改的；具体修改步骤【vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认】

5. JavaScript 结束符

结束符：

• 代表语句结束；
• 英文分号 ; ；
• 可写可不写（现在不写结束符的程序员越来越多）；
• 换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行；
• 因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符；
• 但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）；

6. JavaScript 输入与输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程；

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
document.write(msg)	页面body标签内输出信息	浏览器
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

注意：alert() 主要用来显示内容给用户，console.log() 用来给程序员自己看运行时的内容；

6.1 输出

① document.write() 输出方式：

• 向body内输出内容；
• 如果输出的内容写的是标签，也会被解析成网页元素；

② alert() 输出方式：

• 页面弹出警告对话框；

③ console.log() 输出方式：

• 控制台输出语法，程序员调试使用

// 1. 输入的任意符合规范的内容，都会以弹窗形式展示
document.write('要输出的内容')
alert('要输出的内容')
// 2. 在控制台展示
console.log('要输出的内容')

向 alert() 或 document.write()输入符合规范的任意内容，它都会以弹窗形式展示（输出）给用户；

向 console.log() 输入符合规范的任意内容，它都会在控制台展示；

6.2 输入

① prompt() 输入方式：

• 显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号

prompt('请输入您的姓名:')

向 prompt() 输入任意符合规范的内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容；

7. 字面量

字面量 其实就是是一种描述方式，在计算机科学中，字面量（literal）通常用来计算机事或物；

例如：前端工程师的工资往往在15000左右，其中15000就是字面量；

---

三、变量

变量 是计算机中用来存储数据的【容器】，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）；

简单理解：变量就是一个装东西的盒子，变量并不是数据本身（注意）

既然是一个【容器】，那么肯定是需要一定的空间内存的，所以变量其实也是程序在内存中申请的一块用来存放数据的空间；

1. 变量声明

声明变量：这是专业说法，也可理解为使用变量之前，所要创建变量的过程；

两类语法：

//声明变量有两部分构成：声明关键字、变量名（标识）

let 变量名
//let 即关键字，用来声明变量(let: 允许、许可、让、要)

var 变量名
//var 是关键字，用来声明变量( variable 变量的意思 )

其中 let 与 var 都是JS语言中的关键字，而关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，当前它们都代表着声明变量的意思，但是在项目开发的过程中，还是更推荐使用 let 声明变量！！！

那么 let 与 var 的具体区别是什么？

在 var 声明中：
① 可以先使用 在声明 (不合理) ；
② var 声明过的变量可以重复声明(不合理) ；
③ 允许同时声明多个变量并赋值；
④ 比如变量提升、全局变量、没有块级作用域等等；

在 let 声明中：
① 解决 var 声明的一些问题；
② 允许声明和赋值同时进行；
③ 不允许重复声明；
④ 允许同时声明多个变量并赋值；
⑤ JavaScript 中内置的一些关键字不能被当做变量名；

2. 变量赋值

声明（定义）变量相当于创造了一个空的【容器】，通过赋值向这个容器中添加数据；

具体方式：在变量名之后跟上一个“=”，然后是数值；

代码段：

// 声明变量 age
let age
// 赋值，将 18 这个数据存入了 age 这个“容器”中
age = 18
// 这样 age 的值就成了 18
document.write(age)

简便方法：可以声明变量的同时给变量赋值

let str = 'hello everyone!'

3. 变量本质

内存：计算机中存储数据的地方，相当于一个空间；
变量：是程序在内存中申请的一块用来存放数据的小空间；

注意：JS本身具有垃圾回收机制，当声明的变量不再使用的时候，会自动将该变量的空间自动回收；

4. 变量命名规则与规范

关于变量的名称（标识符）有一系列的 规则 与 规范 需要遵守，对于 规则 是必须遵守，不遵守就会报错；对于规范是建议遵守，虽然不遵守并不会报错，但这也不符合业内通识；
① 规则：

1. 不能用关键字或保留字；
2. 只能用下划线、字母、数字、$组成，且数字不能开头；
3. 字母严格区分大小写；

② 规范：

1. 起名要有意义；
2. 遵守小驼峰命名法；
3. 第一个单词首字母小写，后面每个单词首字母大写。例：userName；

JS中的关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等

JS中的保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息；当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误；

---

四、数据类型

在计算机世界中的万事万物都是数据，在处理大量的数据时，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型，进而给数据分类的目的就是：

① 更加充分和高效的利用内存；
② 也更加方便程序员的使用数据；

什么是变量数据类型？

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。在 Java语言中，由于 Java是强数据类型 所以需要提前声明变量类型，而相反 JavaScript 是一种弱类型或者说动态语言 。这意味着不用提前声明变量的类型，在程序运行过程中，变量到底属于那种类型，只有赋值之后，才会被确定；

简单而言：JavaScript 中变量的值决定了变量的数据类型。

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：基本数据类型 和 引用数据类型 ；

由于是JS初识，所以今天先介绍基本数据类型；

1. 基本数据类型

基本数据类型，又可称为【简单数据类型】，主要包含了数字类型、布尔类型、字符串类型、未定义型以及空类型；

注：⭐通过 typeof 关键字检测数据类型

1.1 数字类型（number）

所谓的数字类型，指的就是变量可以是整数、小数、正数或负数；

let score = 1314 // 正整数
let price = 1.314 // 小数
let temperature = -1314 // 负数

document.write(typeof score) // 结果为 number
document.write(typeof price) // 结果为 number
document.write(typeof temperature) // 结果为 number

简单理解：JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等；

数字型三个特殊值：
① Infinity ，代表无穷大，大于任何数值；

② -Infinity ，代表无穷小，小于任何数值；

③ NaN ，Not a number，代表一个非数值；

通常用 isNaN(数据) 用来判断一个变量是否为非数字的类型，返回 true 或者 false

1.2 布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false；

样例代码：

let a = true // 声明并赋值Boolean类型值为true
a = false // 赋值为false

document.write(typeof a) // 结果为 boolean

1.3 字符串类型（string）

通过单引号（' '） 、双引号（" "）或反引号(``) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，一般项目开发还是推荐使用单引号；

原因：HTML 标签里面的属性使用的是双引号，JS 这里就更推荐使用单引号；

样例代码：

let user_name = '小柴' // 使用单引号
let gender = "男" // 使用双引号
let str = '1314520' // 看上去是数字，但是用引号包裹了就成了字符串了
let str1 = ''; // 这种情况叫空字符串
		
documeent.write(typeof user_name) // 结果为 string
documeent.write(typeof gender) // 结果为 string
documeent.write(typeof str) // 结果为 string

注意事项：

1. 无论单引号或是双引号必须成对使用；
2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（外双内单，外单内双）；
3. 必要时可以使用转义符 \，输出单引号或双引号；

1.3.1 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符；转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格 ，b 是 blank 的意思

1.3.2 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length 属性可以获取整个字符串的长度；

样例代码：

let str = "大家好，我是小柴爱程序"
alert(str.length) // 显示 11

1.3.3 字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串，其字符串拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串；

样例代码：

//1.1 字符串 "相加"
alert('hello' + ' ' + 'javascript') // hello javascript
//1.2 数值字符串 "相加"
alert('13' + '14') // 1314
//1.3 数值字符串 + 数值
alert('5' + 20) // 520

注意事项：

1. 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值；
2. 变量是不能添加引号的，因为加引号的变量会变成字符串；
3. 如果变量两侧都有字符串拼接，两边加引号，变量写加中间；

1.3.4 模板字符串

作用：从简的拼接字符串和变量；
符号
① ``
② 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）；
③ 内容拼接变量时，用 ${} 包住变量；

样例代码：

let userNName = '小柴'
document.write(`我是${userName}`)//我是小柴

模板字符串中可以加标签修改样式；

1.4 未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined；

什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为undefined；

样例代码：

let tmp// 只声明了变量，并末赋值
document.write(typeof tmp) // 结果为 undefined

工作中的使用场景：

开发中经常声明一个变量，等待传送过来的数据。如果不知道这个数据是否传递过来，此时可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来；

报错样例：

情况	说明	结果
let age ; console.log (age);	只声明 不赋值	undefined
console.log(age)	不声明 不赋值 直接使用	报错
age = 10; console.log (age);	不声明 只赋值	10（不提倡）

1.5 空类型（null）

null 表示值为 空；

let a = null

null 和 undefined 区别：

1. undefined 表示没有赋值；
2. null 表示赋值了，但是内容为空；

null 开发中的使用场景：
官方解释：把 null 作为尚未创建的对象；

简单理解：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null；

---

五、类型转换

为什么需要类型转换？
JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚；在使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型;

通俗来说，就是把一种数据类型的变量转换成另一种数据类型

通常会实现两种方式的转换：
① 隐式转换
② 显式转换

1. 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换，数据类型的隐式转换是 JavaScript 的特征；

规则：
① + 号两边只要有一个是字符串，都会把另外一个转成字符串；
② 除了+以外的算术运算符 比如 -、 *、 / 等都会把数据转成数字类型；

缺点：
① 转换类型不明确，靠经验才能总结；

注意： +号作为正号解析可以转换成Number；

2. 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换；

概念：通过写代码程序告诉系统转成什么数据类型；通常会实现3种方式的转换，转换为数字类型、转换为字符串类型 和 转换为布尔类型；

2.1 转换为数字类型

① Number(数据) ：

• 转成数字类型
• 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字；
• NaN也是number类型的数据，代表非数字；

② parseInt(数据) ：

• 只保留整数
• 不遵循四舍五入的规则

③parseFloat(数据) ：

• 可以保留小数

其中，Number(数据) 与 parseFloat(数据) 的区别：Number(数据) 只能放数字类的字符，否则返回NaN；而parseFloat(数据) 可以过滤掉非数字之后的所有数据；经常被用于过滤标签元素的单位；

方式	说明	案例
Number()强制转换函数	将string类型转换为数字类型	Number('12 ')
parseInt(string)函数	将string类型转换成整数数字类型	parseInt('13 ')
parseFloat(string函数)	将string类型转换成浮点数数字类型	parseFloat('13.14 ')
js隐式转换(- * /)	利用算术运算隐式转换为数字类型	'12 '- 0

注意：parseInt 和 parseFloat 单词的大小写，这2个是重点；

2.2 转换为字符串类型

① String(数据)
② 变量.toString(进制)

方式	说明	案例
String()强制转换	转换成字符串类型	let num = 1; alert(String(num));
toString()	转换为字符串类型	let num = 1; alert(num.toString());
加号拼接字符串	和字符串拼接的结果都是字符串	let num = 1; alert(num+" 我是字符串"

注意：进制中写几就代表转化成几进制，但一般情况下不太使用

2.3 转换为布尔类型

① Boolean(数据)

• 代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined；

• 其余值都会被转换为 true；

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小柴')); // true
console.log(Boolean(1314)); // true

---

总结

今天才开始学习JS，也算是花了一天的时间才总结出来目前所学的所有知识，凌晨两点多发的文章，希望可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位点赞+收藏+关注啦! ! !

---

以上就是所要介绍的JavaScript基础学习的第一节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下CSS进阶学习的文章内容，再结合之前所介绍的CSS基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！