JavaScript编写方式

第一种编写方式（HTML行内）

<body>
  <a href="javascript:alert('百度一下')" onclick="alert('点击百度一下')">百度一下</a>
</body>

如图所示，我们把js代码写到了a标签中，在我们之前的学习过程中，我们习惯于在body体内书写我们所需要的html代码，这种方法虽然可行，但是过于臃肿，并且不利于别人阅读，在我们的潜意识中，a标签所包含的内容应为超链接，将js代码嵌入a标签中难免有种生硬感，不推荐（可运行）

第二种编写方式（script标签中）

<body>
<a href="#" class="google">Google一下</a>
<script>
  const googleEl = document.querySelector('.google')
  googleEl.onclick = function(){
    alert('Google一下')
  }
</script>
</body>

如图所示，相对于第一种书写方法来说，第二种较为清晰，很好的通过script标签将html部分和js内容分隔开，使得读者在浏览源代码时候相对舒服一点。对于初学者而言，此方法比较好；我们眼光放长远一点，以后写大项目的时候，如果还是将js代码内嵌在html页面中的话，整篇页面的代码长度过长，不利于读者的阅读，不推荐（可运行）

第三种编写方式（外部的script文件）

如图所示，相对于前两种代码风格来看，第三种方法将js代码单独用一个文件来进行书写。这样书写的好处是：① 代码整体界面不至于臃肿 ② 便于后期维护项目，读者可以通过alt+鼠标左键快速查看js文件，作者比较推荐此方法

< noscript >标签

问题

有些用户的浏览器版本过低，比如早期的IE浏览器，无法对js标签解析，我们如何告诉用户是浏览器的问题而并非是我们网站的问题呢？

思路

针对早期浏览器不支持JavaScript的问题，我们需要一个优雅降级的处理方案
标签应运而生,用于不支持JavaScript一个页面提示内容

触发流程

<body>
<noscript>
  <p>您的浏览器不支持或已经关闭运行JavaScript</p>
</noscript>
</body>

下面以Google为例，展示在浏览器中关闭JavaScript的地方

JavaScript编写注意事项

script元素不能写成单标签

在外联式引入js文件的时候，script标签中不可以写入JavaScript代码，并且script标签不能写成单标签

省略type属性

在以前的代码中，我们的script标签会使用type=“text/javascript”，不过现在咱们可以不用写了，因为JavaScript是所有现代浏览器以及HTML5中默认的脚本语言

加载顺序

作为HTML中的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序（这一点会在《JavaScript高级程序设计（第4版）》详细讲解，后续Coder Peng会持续更文）
我们更推荐将JavaScript代码和边写的位置放在body子元素的最后一行

JavaScript代码严格区分大小写

这一点很多同学需要注意一下，可能以前有部分人学过Linux，觉得大小写比较随意，但是在JavaScript中，大小写是严格区分的

此外，HTML元素和CSS属性是不区分大小写的

JavaScript的交互方式

我们日常学习JavaScript的时候，最常用的调试语句为console.log，下面Coder Peng为大家整理了在JavaScript中一些常用的与用户交换的方式

交互方法	方法说明	效果查看
alert	接受一个参数	弹窗查看
console.log	接受多个参数	在浏览器控制台查看
document.write	接受多个字符串	在浏览器界面查看
prompt	接受一个参数	在浏览器接受用户输入

Chrome的调试工具

在前面的学习中，我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们进行调试JavaScript
在接下来的学习中，当我们使用console.log进行调试的时候，我们可以在浏览器界面按下F12键，打开弹出的窗口里面的console键，就能看到js代码打印输出的内容

补充说明

如果在代码中出现了错误，则浏览器会在console这一栏打印输出错误的原因，方便我们去进行修改
如上图所示，console里面有一个>的表示，这个表示控制台的命令行，我们也可以在这个地方写入js代码对浏览器进行调试（写好之后按下Enter就会立即执行代码）
如果希望编写多行代码，我们可以按下shift+enter进行换行编写
在后续的学习中我们还会通过如何debug来进行调试，查看代码的执行流程

JavaScript语句和分号

语句是浏览器发出的指令，通常表达为一个操作或者行为（Action），如下所示

在很多前端教科书上，都会推荐大家在每一行执行语句的后面用；结尾，Coder Peng在这里并不建议大家使用分号，因为在后续的学习中，大家会学习到Vue等相关技术框架，在写这些框架的时候，结尾的分号反而是一种负担。

JavaScript的注释（没啥好讲的，自己看看就行）

JavaScript不支持嵌套的注释

vscode插件和配置

插件自己去网上搜搜，在这里不作详细介绍

配置这一方面给大家推荐上我自用的一款（去setting.json里面进行配置），链接：https://juejin.cn/post/7165056807704985608

03-JavaScript变量和数据类型

变量的定义

一个变量，就是一个用于存放数值的容器
这个数值可能是一个用于计算的数字，或者额是一个句子中的字符串，或者是其他任意类型的数据；
变量的独特之处在于它存放的数值是可以改变的

我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子一个特性的名称

例如，变量message可以被想象成一个标有“message”的盒子，盒子里面的值为Hello！，并且这个盒子的值，我们想改变多少次就改变多少次

变量的命名格式

变量的声明

在JavaScript中声明一个变量使用var关键字（后续还会学到其它关键字，别急）

变量的赋值

方式一

方式二

同时声明多个变量

方式一

方式二

变量命名规范

变量命名规则：必须遵守

第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
其它字符可以是字母、下划线、美元符号或数字
不能使用关键字和保留字命名，见下图

变量严格区分大小写

变量命名规范：建议遵守

多个单词使用驼峰表示
赋值 = 两边都加上一个空格
变量应该做到见名知意

变量的使用注意

注意一

如果一个变量未经声明就开始使用，则会在浏览器的console台直接报错

注意二

如果一个变量有声明但是没有赋值，则默认值在浏览器的console台打印输出undefined

注意三

如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）

JavaScript的数据类型

JavaScript中的值都有特定的类型

我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型
一个变量可以在前一刻是一个字符串，下一刻就存储为一个数字
允许这种操作的编程语言，例如JavaScript，被称为动态类型

八种基本数据类型

Number
String
Boolean
Undefined
Null
Object
BigInt（后面会讲，别急）
Symbol（后面会讲，别急）

typeof操作符

来源

因为ECMAScript的类型是松散的，所以我们需要一种手段来确定任意变量的数据类型，typeof操作符应运而生

返回值类型

对一个值使用typeof操作符会返回下列字符串之一

undefined表示值未定义
boolean表示值为布尔值
string表示值为紫府村
number表示值为数值
object表示值为对象（而不是函数）或null
function表示值为函数
symbol表示值为符号

typeof（）的用法

你可能还会遇到另一种语法：typeof（x），它与typeof相同
typeof是一个操作符，并非是一个函数，（）只是将后续的内容当做一个整体而已

Number类型

number类型代表整数和浮点数

数字number可以用很多操作，比如加减乘除等

除了常规的数字，还包括所谓的特殊数值，也属于Number类型（了解即可）

Infinity：代表数学概念中的无穷大∞，也可以表示为-infinity，比如1/0得到的就是无穷大
NaN：NaN代表一个计算错误，它是一个错误的操作所得到的的结果，比如字符串和一个数字相乘

进制表示

十进制、十六进制、二进制、八进制

数字的表示范围

最小正数值：Number.MIN_VALUE，这个值为5e-324，小于这个数的数字会被转化为0
最大正数值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308

isNaN

用于判断是否不是一个数字。不是数字的返回true，是数字的返回false

String类型

JavaScript的字符串必须被括在引号里面，有三种包含字符串的方式

双引号：“Hello”
单引号：‘Hello’
反引号： Hello

JavaScript前后的引号类型必须一致

如果在字符串里面本身包括单引号，可以使用双引号
如果在字符串里面本身包括双引号，可以使用单引号

字符串中的转义字符

除了普通的可以打印的字符外，一些有特殊功能的字符可以通过转义字符的形式放到字符串中

转义字符	表示符号
\'	单引号
\"	双引号
\\	反斜杠
\n	换行符
\r	回车符
\t	缩进符
\b	退格符

转义字符串开发中只有特殊场景才会用到，暂时掌握 \’\”\t \n四个的用法即可

字符串的属性和方法

方法一

字符串拼接，通过+运算符进行操作

方法二

获取字符串的长度

值得注意的是，在计算字符串长度的时候，我们要考虑到字符串之间的空格（空格也会被计入字符串长度）

Boolean类型

Boolean类型用于表示真假

比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人
比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等

Boolean 类型仅包含两个值： true 和 false

Undefined类型

Undefined类型只有一个值，就是特殊值undefined

如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined

注意事项

最好在变量定义的时候进行初始化，而不只是声明一个变量
不要显示的将一个变量赋值为undefined
如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值

Object类型

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型

其他的数据类型我们通常称之为原始类型，因为它们的值至少包含一个单独的内容（字符串、数字或者其他），Object往往可以表示一组数据，是其他数据的一个集合

在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象

上面的代码看不懂没关系，后面我们会讲

Null类型

Null 类型同样只有一个值，即特殊值 null

null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null

`null`和`undefined`的关系

undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到
并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用
null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null

数据类型总结

JavaScript 中有八种基本的数据类型（前七种为基本数据类型， 也称为原始类型，而 object 为复杂数据类型，也称为引用类型）

number 用于任何类型的数字：整数或浮点数
string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型
boolean 用于 true 和 false
undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型
object 用于更复杂的数据结构
null 用于未知的值 —— 只有一个 null 值的独立类型

数据类型的转换

在开发中，我们会经常需要对数据类型进行转换。大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换
我们也可以，通过显示的方式来对数据类型进行转换

字符串String的转换

转换方式一：隐式转换

如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接

转换方式二：显式转换

说白了，我们使用显式转换，一般是人为的去使用函数进行操作

数字类型Number的转换

转换方式一：隐式转换

在算数运算中，通常会将其他类型转换成数字类型来进行运算，但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的

转换方式二：显式转换

由上文可知，我们也可以通过使用Number()函数来进行显式的转换

值	转换后的值
undefined	NaN
null	0
true 和 false	1 and 0
string	去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

布尔类型的Boolean的转换

它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换

转换规则

直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false
其他值变成 true

值	转化后
0, null, undefined, NaN, ""	false
其他值	true

注意：包含 0 的字符串 "0" 是 true。一些编程语言(比如 PHP)视 "0" 为 false。但在 JavaScript 中，非空的字符串总是 true

04-JavaScript常见的运算符

认识运算符

计算机最基本的操作就是执行运算，执行运算时就需要使用运算符来操作。如下图所示，两种运算方式所使用的符号都是运算符

认识运算元

首先我们得知道什么是运算元——运算符的应用对象。说的通俗一点，比如上图：20和30就是两个运算元。在一些书籍中，作者还会把运算元叫作参数

有时候一个运算符对应的只有一个运算元，我们就把它叫作一元运算符
有时候一个运算符拥有两个运算元，那么它是二元运算符

在一元运算符的情况下，我们通常会使用-和+，-相对来说使用的多一点点

JavaScript中的运算

算术运算符

算术运算符用在数学表达式中, 它的使用方式和数学中也是一致的
算术运算符是对数据进行计算的符号

运算符	运算规则	范例	结果
+	加法	2 + 3	5
+	连接字符串	'中'+ '国'	'中国'
-	减法	2 - 3	-1
*	乘法	2 * 3	6
/	除法	5 / 2	2.5
%	取余数	5 % 2	1
**	幂( ES7)	2 ** 3	8

取余%和求幂

取余的运算符是%，跟百分号没关系！a % b的结果是a整除b的余数

求幂运算a b，通俗点来讲就是把a提升至b次幂**（这是ES7里面的语法，也叫作ES2016，后续Coder Peng会单独列出来讲）

赋值运算符

前面我们使用的=其实也是一个运算符，被称之为赋值( assignments )运算符

这里我们要强调一下，很多初学者在刚开始学赋值运算符的时候，总是习惯从左往右看，这种看法是错误的。我们在学习赋值运算符的时候，要习惯性的从右往左看，见下图

在上面的图片中我们可以看到，我们用var定义了一个a变量，然后我们把3这个值赋给了a变量，因此这时候在console台打印输出的a变量的值是3而并非undefined

链式赋值

顾名思义，看到这个名字就意味着是一条链式的复制方式，见下图

在这张图里面我们可以看到，我们用var定义了3个变量，在接下来的赋值运算中，我们将4的值赋给了c，c的值赋给了b，以此类推，最后三个变量打印输出的结果都是4

但是一般我们不建议这么写，因为可读性实在是太差了，同事接手你的代码会疯的🤣

原地修改

在日常开发中，我们可能会遇到变量名写错了需要修改，但是业务又不允许我们新建变量的情况，所以我们这个时候就需要用到原地修改这个办法

在图片中我们可以看到，我们定义了一个变量n并且赋值为10，在接下来的操作中，我们首先**将n的值+5并且赋值给n，然后将n的值2赋值给b，这就是原地修改的方法

运算符	运算规则	范例	结果
=	赋值	a = 5	5
+=	加后赋值	a = 5, a += 2	7
- =	减后赋值	a = 5, a -= 2	3
*=	乘后赋值	a = 5; a *= 2	10
/=	除后赋值	a = 5; a /= 2	2.5
%=	取模 (余数)后赋值	a = 5; a %= 2	1
**=	幂后赋值	a = 5; a **= 2	25

自增自减

我们在做一些算法题目的时候，通常会用到自增和自减两个概念，说白了自增和自减无非就是在自身的基础上进行+1或-1的操作，是最常见的数学运算符之一

自增：++ 自减： --

自增和自减只能用于变量，不能用于常数

++和--的位置

运算符++和--可以置于变量前，也可以置于变量后

当运算符置于变量后，被称为后置形式 (postfix form)
当运算符置于变量前，被称为前置形式 (prefix form)

前置形式和后置形式的区别

这两者是有区别的，但只有当我们使用 ++/-- 的返回值时才能看到区别
如果自增/自减的值不会被使用，那么两者形式没有区别
如果我们想要对变量进行自增操作，并且需要立刻使用自增后的值，那么我们需要使用前置形式
前置形式返回一个新的值，但后置返回原来的值

运算符的优先级

符号	运算顺序
**	从右往左
**	从左往右
/	从左往右
%	从左往右
+	从右往左
-	从右往左

比较运算符

大于 / 小于：a > b ，a < b
大于等于 / 小于等于：a >= b ，a <= b
检查两个值的相等：a == b，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋值
检查两个值不相等：不相等在数学中的符号是 ≠，但在 JavaScript 中写成 a != b

===和==的区别

在我们写项目的时候，有时候会需要检查两个值是否相等，但是如果我们使用普通的==进行判断，会存在一个问题：它不能区分出 0 和 false，或者空字符串和 false这类运算

原因

这是因为在比较不同类型的值时，处于判断符号==两侧的值会先被转化为数字
空字符串和false也是如此，转化后它们都为数字 0，因此见下图

很多情况下，我们是需要严格区分0和false的，这个时候===就派上用场了😎

使用===的好处

严格相等运算符===在进行比较时不会做任何的类型转换
换句话说，如果a和b属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false
同样的，不相等符号 != 类似，严格不相等表示为 !==
严格相等的运算符虽然写起来稍微长一些，但是它能够很清楚地显示代码意图，降低你犯错的可能性
在日常编写代码或者写项目的时候，我更推荐大家使用===来降低代码犯错的可能性😆

JavaScript基础语法（codewhy版本）（二）https://developer.aliyun.com/article/1469635

JavaScript基础语法（codewhy版本）（一）

JavaScript编写方式

第一种编写方式（HTML行内）

第二种编写方式（script标签中）

第三种编写方式（外部的script文件）

< noscript >标签

问题

思路

触发流程

JavaScript编写注意事项

script元素不能写成单标签

省略type属性

加载顺序

JavaScript代码严格区分大小写

JavaScript的交互方式

Chrome的调试工具

补充说明

JavaScript语句和分号

JavaScript的注释（没啥好讲的，自己看看就行）

vscode插件和配置

03-JavaScript变量和数据类型

变量的定义

变量的命名格式

变量的声明

变量的赋值

方式一

方式二

同时声明多个变量

方式一

方式二

变量命名规范

变量命名规则：必须遵守

变量命名规范：建议遵守

变量的使用注意

注意一

注意二

注意三

JavaScript的数据类型

JavaScript中的值都有特定的类型

八种基本数据类型

typeof操作符

来源

返回值类型

typeof（）的用法

Number类型

进制表示

十进制、十六进制、二进制、八进制

数字的表示范围

isNaN

String类型

字符串中的转义字符

字符串的属性和方法

方法一

方法二

Boolean类型

Undefined类型

注意事项

Object类型

Null类型

null和undefined的关系

数据类型总结

数据类型的转换

字符串String的转换

转换方式一：隐式转换

转换方式二：显式转换

数字类型Number的转换

转换方式一：隐式转换

转换方式二：显式转换

布尔类型的Boolean的转换

转换规则

04-JavaScript常见的运算符

认识运算符

认识运算元

JavaScript中的运算

算术运算符

取余%和求幂

赋值运算符

链式赋值

原地修改

自增自减

`null`和`undefined`的关系