🥽 前言

到【流程控制】看的视频为黑马pink的教程

视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程

视频对应资源(在视频简介里面)

链接：【https://gitee.com/xiaoqiang001/java-script.git】

视频对应资源(百度网盘)

链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】

提取码：1234

【对象】之后的视频更换为尚硅谷超哥的教程

视频：JavaScript核心基础_讲师（李立超）_JS教程

源码地址：

链接：https://pan.baidu.com/s/1spfVmWjorgV49HYgt9R_tQ?pwd=8c1x

提取码：8c1x

🥽 JavaScript 简介

🌊 JavaScript 是什么

JavaScript 是一种运行在客户端的脚本语言（Script 是脚本的意思）

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

js 现在也可以基于 Node.js 技术进行服务器端编程

🌊 JavaScript 的作用

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

🌊 HTML/CSS/JS 的关系

HTML页面的结构(骨架)，CSS页面的样式(外观)，JavaScript页面的交互(行为)。

🌊 浏览器执行 JS

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的webkit
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。

JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

🌊 JS 的组成

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

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

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

🥽 JavaScript 的书写位置

注意：JavaScript 每行结束可以写分号也可以不写分号

JS 有3种书写位置，分别为行内、内嵌和外部。

🌊 行内式 JS

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

<body>
  <!-- οnclick="alert('Hello JavaScript')" -->
  <!-- 双引号中的代码为js代码 -->
  <!-- 避免引号冲突，js代码使用单引号 -->
  <input type="button" value="按钮" onclick="alert('Hello JavaScript')">
</body>

🌊 内嵌JS

可以将多行JS代码写到 script 标签中

<body>
  <script>
    alert('Hello JavaScript')
  </script>
</body>

🌊 外部 JS文件

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码（写了不生效）
适合于JS 代码量比较大的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./03-外部JS.js"></script>
</body>
</html>

alert('Hello JavaScript!!!!!')

<body>
  <script src="./03-外部JS.js">
    alert('123123')
  </script>
</body>

script 标签中间代码不生效

🥽 JavaScript 注释

🌊 单行注释

快捷键：ctrl + /

<body>
  <script>
    // 单行注释
  </script>
</body>

🌊 多行注释

快捷键： alt + shift + a

<body>
  <script>
    /* 多行注释
    多行注释
    多行注释 */
  </script>
</body>

快捷键修改：

vscode => 左下角按钮 => 键盘快捷方式 => 查找原来的快捷键 => 修改为新的快捷键 => 回车确认

🥽 JavaScript 输入输出语句

方法	说明	归属
alert(‘弹出警示框要显示的内容’)	浏览器弹出警示框	浏览器
console.log(‘要在控制台打印输出的信息’)	浏览器控制台打印输出信息	浏览器
prompt(‘提示信息’)	浏览器弹出输入框，用户可以输入	浏览器

alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

🌊 alert

<body>
  <script>
    alert('弹出警示框要显示的内容')
  </script>
</body>

🌊 console.log

<body>
  <script>
    console.log('控制台显示的内容')
  </script>
</body>

打开浏览器的控制台：

F12
鼠标右键 => 检查
笔记本电脑 (键盘左下角) Fn => F12

🌊 prompt

<body>
  <script>
    prompt('请输入信息')
  </script>
</body>

🥽 变量

🌊 什么是变量

变量就是一个存放数据的容器，会在内存中开辟一块空间来存放数据，这个存放数据的空间就是变量。(好比，酒店就是计算机的内存空间，酒店的房间就是一个又一个的变量，住在酒店中的人就是一个又一个的数据)。

由上面的类比我们可以得到，每个变量都有自己的名字(酒店房间号，这样子才可以在内存找到变量中数据)，变量中的数据可以更改(酒店房间内居住的人会变动)。

🌊 变量的使用

变量在使用时分为两步： 1. 声明变量 2. 赋值

💦 声明变量

使用关键字 var 声明一个变量

使用该关键字声明变量后，计算机会自动为变量分配内存空间

var age

💦 赋值

使用 = 将右边的值赋给左边的变量

age = 11

💦 声明变量的同时初始化变量

var age = 11

💦 更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

<body>
  <script>
    var age = 11
    age = 18
    alert(age)
  </script>
</body>

💦 同时声明多个变量

同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

<script>
    var age = 12, username = 'zs'
    console.log(age, username)
  </script>

💦 声明变量特殊情况

只声明不赋值：

var age
    console.log(age)

没有赋值，变量未定义

不声明不赋值直接使用：

console.log(Password)

不声明只赋值：

pwd = 11;
    console.log(pwd)

可以不声明，赋值直接使用(不推荐)

🌊 变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。使用可以看变量名就知道其意义的，如 age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

💦 标识符、关键字、保留字

标识(zhi)符：

就是指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。

关键字：

是指 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 等。

保留字：

实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：

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 等

注意：

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

var function = 123

var int = 123
    console.log(int)

保留字目前可以使用，但是未来变为关键字会报错，不建议使用保留字为标识符。

💦 小测试

以下哪些是合法的变量名？

🌊 练习 – 交换两个变量的值

有两个变量 a b，要求将两个变量中的值进行交换。

交换两个变量的值就好比两户人家搬家搬到对方的家中，肯定要有其中一户人家暂时搬到酒店暂时居住，等另一户人家完成搬家，在搬到那户人家中，如此即可完成变量值的交换。

<script>
    var a = 12
    var b = 24
    var t = a // 中间临时变量，暂存a的值
    a = b // b的值赋给a
    b = t // 原先暂存在t中的值赋给b，即完成变量值的交换
    console.log(a)
    console.log(b)
  </script>

🥽 数据类型

🌊 数据类型简介

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。(比如，用合适的盒子装合适大小的物品，不浪费空间)

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

JavaScript 是一种弱类型或者说动态语言.

这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定 。在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型，即变量的数据类型是可以更改的。 如，在程序的运行过程中变量的数据类型可以由原来的数字类型转变为字符串或其他类型的数据。

JS 把数据类型分为两类：

简单数据类型：
Number – 数字型
String – 字符串型
Boolean – 布尔型
Undefined – 未定义
Null – 空
复杂数据类型：
object – 对象类型

🌊 简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型，包含整型值(12)和浮点型值(3.1415)	0
Boolean	布尔值类型，如true . false，等价于1和0	false
string	字符串类型，如"张三”注意咱们js里面，字符串都带引号	“”
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

💦 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

<script>
    var intNumber = 12
    var floatNumber = 3.1415926
    console.log(intNumber)
    console.log(floatNumber)
  </script>

💧 进制

最常见的进制有二进制、八进制、十进制、十六进制。

在JS中八进制前面加0，十六进制前面加 0x。

八进制：

数字只有 0-7

// 八进制(逢8进1，好比十进制逢10进1)
    // 八进制表示的数字    0 1 2 3 4 5 6 7 10 11 12 ...
    // 对应的十进制数      0 1 2 3 4 5 6 7 8  9  10 ...
    var eight = 07
    console.log(eight)
    eight = 012
    console.log(eight)

十六进制：

逢16进1

数字：

	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f	10	11	…
对应十进制	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	…

var sixteen = 0xf
    console.log(sixteen)
    sixteen = 0x10
    console.log(sixteen)
    sixteen = 0x12
    console.log(sixteen)

💧 JavaScript中数值的最大和最小值

// 最大值
    console.log(Number.MAX_VALUE)
    // 最小值
    console.log(Number.MIN_VALUE)

💧 数字型三个特殊值

// 无穷大
    console.log(Infinity)
    // 负无穷大
    // 无穷小在数学中定义为无限趋近与0的数(极限为0)
    console.log(Infinity)
    // 不是一个数字
    // NaN Not a Number
    console.log(12 - 'hello') // 数字不能减去字符串，结果为非数字

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

[JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)（一）