【H2O2|全栈】JS入门知识（一）

目录

JS入门

前言

准备工作

JS标签和文件

变量

数据类型

字符串

变量的交换

数据类型获取

数据类型转换

面试题

提问框和提示框

提问框

提示框

​编辑​编辑控制台输出

​编辑转义字符

结束语

JS入门

前言

本系列博客主要分享JavaScript的基础语法知识，本期为第一期，包含一些简单的js语法，以及一道js的面试题。

叠甲：非专业，仅参考。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

JS标签和文件

JS的标签如下：

<script></script>

这个标签可以放在head标签中，也可以放在body标签前后以及body标签中，中间包裹JavaScript代码。

由于HTML的解析顺序是从上至下的，而我们的JS常常需要获取一些元素或者变量的值，因此我们最好等所有的HTML代码解析完之后，再解析JS标签。

所以，一般来说script标签写在body标签之后。

当然，由于我们的WEB需要分离为三层，所以我们通常把JS代码防止在专门的.js文件中。引入JS文件的方式如下：

<script src="./js/index.js"></script>

变量

js最基础的用于交互的方式就是通过获取变量。变量通常使用var定义，比如一个最基本的变量定义如下：

var a

在js中，使用 = 符号进行赋值，=之前为被赋值的变量，之后为赋的值。 

比如，我需要给a变量赋值数字5，可以这样：

var a = 5

赋值时将会自动识别后面的数据类型。

数据类型

按照赋值的不同，变量将被设置为不同的数据类型。主要分为两类——基础数据类型和复杂数据类型。

基础数据类型

复杂数据类型

标注*号的暂时不要求掌握，后面会有规范的书写格式。  

字符串

字符串通常用 "" 表示，获取字符串的长度可以使用类似下面的代码：

var str = "abc"
var len = str.length

字符串类型与其他基础类型的数据相加，会将其他类型的数据自动转化为字符串。

比如，对于下面的代码：

var a = "4"
var b = 6
var c = a + b
console.log(c)

那么，c输出的值应当是46，而不是我们认知里的10，这就是因为数字 b = 6 被转化为字符串"6"了。

变量的交换

如果想要实现两个变量之间的数据交换，可以利用一个临时变量temp来完成。

实现的js代码如下：

var a = 2
var b = 3
var temp = a
a = b
b = temp

此时我们再输出A和B的值，可以看到两者的值发生了交换。

数据类型获取

获取数据类型的代码为typeof，对于基础的数据类型而言，通过该方式获取的数据类型就是他们自己的数据类型。但是，null类型是较为特殊的，它会被识别为object类型。

而对于复杂数据类型而言，object和array类型都会被识别为object类型，function类型还是会被识别为函数体function。

数据类型转换

想让数据类型转化为字符串，通常来说有下面三种方式（a为需要转化类型的变量）：

• a.toString()
• String(a)
• 用字符串与需要进行转换的变量进行相加（"" + a）

想让数据类型转化为数字，通常来说也有三种方式与之对应：

• ParseInt(a) 解析为整数   ParseFloat(a)解析为浮点数
• Number(a)
• 利用运算进行转化  a-0，a*1，+a（直接在变量前添加一个 + 号）

面试题

Q：JS有哪些数据类型？

A：分为基础数据类型和复杂数据类型。

基础数据类型有：number，string，boolean，undefined，null

复杂数据类型有：object，function，array，Date，正则

提问框和提示框

这两种js元素在浏览器中均表现为弹窗效果，具体相关内容如下：

提问框

提问框用于接收用户输入的信息，通常来说会赋值给一个变量，供之后使用。

提问框的js代码如下：

var a = prompt("提问文字")

在网页中的弹窗效果如下：

提示框

提示框用于为用户提示指定的信息。有两种提示框，分别如下：

alert("提示文字1")

confirm("提示文字2")

其中第一种只有确认，第二种可以选择取消，效果分别如下：

控制台输出

比如，我们需要在浏览器的控制台输出我们的变量值，对应的js代码如下：

var a = 5
console.log(a)

在浏览器控制台的展示的效果如下：

转义字符

在字符串中，有少数的字符比较特殊，无法在字符串中直接体现出来。这个时候就需要对相关的字符进行转义。

这里展示常见的4个转义字符：

结束语

本期的内容到这里就结束了，主要是js的基础标签、文件，变量相关，弹窗相关，字符相关以及控制台输出语句等内容。在后续的本系列博客中，我会继续更新js的基础语法知识，并适当地配合上一些案例。

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——还在漏气的【H2O2】