01_JS 介绍 + 变量 + 常量 + 数据类型 + 类型转换

01_准备工作

01_软件篇 + VSCode 设置

01_截图软件

重点快捷键:

f1 截图
f3 定在屏幕上
取色: shift 切换

注意: 如果 f1 和 f3 不好用, 请用

fn + f1
fn + f3

fn + esc 键是 "锁定功能键"

02_画笔软件

重点快捷键:

ctrl + 1 放大
ctrl + 2 画图
画图的时候按住 ctrl 是矩形
画图的时候按住 tab 是椭圆
画图的时候按字母可以改变颜色; r 红色 b 蓝色 q 绿色 p 粉色 o 是橙色

03_思维导图软件

重点快捷键:

enter 同级
tab 下级

04_md 笔记软件

05_代码报错提示

06_代码颜色主题

07_学习 JS 不要安装格式化插件

一般不用保存时格式化文件

08_代码缩进字符改为 2 个字符

09_左右分屏

win + 左右箭头

10_文件图标

为文件和文件夹添加图标

02_JS 介绍

01_Javascript 是什么

JavaScript (是什么?)

是一种运行在客户端 (浏览器) 的编程语言, 实现人机交互效果

作用 (做什么?)

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)

02_JavaScript 的组成 (有什么?)

ECMAScript:

规定了 js 基础语法核心知识
比如: 变量, 分支语句, 循环语句, 对象等等

Web APIs:

DOM 操作文档, 比如对页面元素进行移动, 大小, 添加删除等操作
BOM 操作浏览器, 比如页面弹窗, 检测窗口宽度, 存储数据到浏览器等等

JavaScript 权威网站: https://developer.mozilla.org/zh-CN/docs/Web/JjavaScript

03_总结

JavaScript 是什么?

JavaScript 是一种运行在 客户端 (浏览器) 的编程语言

JavaScript 组成是什么?

ECMAScript (基础语法), web APIs (DOM, BOM)

02_JavaScript 书写位置

01_JavaScript 书写位置

02_内部 Javascript

直接写在 html 文件里, 用 script 标签包住
规范: script 标签写在 </body> 上面
拓展: alert('你好, js') 页面弹出警告对话框

注意事项:

我们将 <script> 放在 HTML 文件的底部 附近的原因是浏览器会按照代码在文件中的 顺序加载 HTML
如果先加载的 JavaScript 期望修改其下方的 HTML, 那么它可能由于 HTML 尚未被加载而失效
因此, 将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.内部 js -->
  <script>
    // 2.页面弹出警告对话框
    alert('你好, js~')
  </script>
</body>

</html>

03_外部 Javascript

代码写在以 .js 结尾的文件里

语法: 通过 script 标签, 引入到 html 页面中

注意事项:

script 标签中间无需写代码, 否则会被忽略!
外部 JavaScript 会使代码更加有序, 更易于复用, 且没有了脚本的混合, HTML 也会更加易读, 因此这是个好的习惯

javascript

// /code/js/my.js

alert('我是外部的 js 文件')

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.外部 js -->
  <script src="./js/my.js">
    // 2.script 标签中间无需写代码, 否则会被忽略!
  </script>
</body>

</html>

04_内联 Javascript

代码写在标签内部

语法:

注意: 此处作为了解即可, 但是后面 vue 框架会用这种模式

05_总结

JavaScript 三种书写位置?

内部
外部
行内

注意事项:

书写的位置尽量写到文档末尾 </body> 前面
外部 js 标签中间不要写代码, 否则会被忽略

03_注释 + 结束符

01_JavaScript 怎么写

注释
结束符

02_单行注释

符号: //
作用: // 右边这一行的代码会被忽略
快捷键: ctrl + /

03_块注释

符号: /* */
作用: 在 /* 和 */ 之间的所有内容都会被忽略
快捷键: shift + alt + a

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.单行注释:  ctrl + /
    /* 2.多行注释:  shift + alt + a */
  </script>
</body>

</html>

04_结束符

作用: 使用英文的 ; 代表语句结束
实际情况: 实际开发中, 可写可不写, 浏览器 (JavaScript 引擎) 可以自动推断语句的结束位置
现状: 在实际开发中, 越来越多的人主张, 书写 JavaScript 代码时省略结束符
约定: 为了风格统一, 结束符要么每句都写, 要么每句都不写 (按照团队要求)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.约定: 为了风格统一, 结束符要么每句都写, 要么每句都不写 (按照团队要求)
    // alert('第一句话');
    // alert('第二句话');

    alert('第一句话')
    alert('第二句话')
  </script>
</body>

</html>

05_总结

JavaScript 注释有哪两种方式?

单行注释 //
多行注释 /* */

JavaScript 结束符注意点

结束符是?
分号 ;
结束符可以省略吗?
Yes
但为了风格统一, 结束符要么每句都写, 要么每句都不写 (团队约定)

04_输入语法 + 输出语法 + 字面量

01_什么是语法

人和计算机打交道的规则约定
我们要按照这个规则去写
比如: 你吃了吗?
我们程序员需要操控计算机, 需要计算机能看懂

02_输出语法

作用: 向 body 内输出内容

注意: 如果输出的内容写的是标签, 也会被解析成网页元素

作用: 页面弹出警告对话框

作用: 控制台输出语法, 程序员调试使用

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.向 body 内输出内容
    document.write('我是 div 标签')
    document.write('<h1>我是标题</h1>')

    // 2.页面弹出警告对话框
    alert('页面弹出警告对话框')

    // 3.控制台输出语法, 程序员调试使用
    console.log('看看对不对')
    console.log('日志')
  </script>
</body>

</html>

03_输入语法

语法:

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

展示:

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.输入语句: 显示一个对话框, 对话框中包含一条文字信息, 用来提示用户输入文字
    prompt('请输入您的年龄: ')
  </script>
</body>

</html>

04_Javascript 代码执行顺序

按 HTML 文档流顺序执行 JavaScript 代码
alert() 和 prompt() 它们会跳过页面渲染先被执行 (目前作为了解, 后期讲解详细执行过程)

05_字面量

在计算机科学中, 字面量 (literal) 是在计算机中描述事 / 物

比如:

我们工资是: 1000 此时 1000 就是数字字面量
'黑马程序员' 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

06_总结

JavaScript 是什么?

JavaScript 是一门编程语言, 可以实现很多的网页交互效果

JavaScript 书写位置?

行内 JavaScript
内部 JavaScript ==> 写到 </body> 标签上方
外部 JavaScript ==> 但是 <script> 标签不要写内容, 否则会被忽略

JavaScript 的注释?

单行注释 //
多行注释 /* */

JavaScript 的结束符?

分号 ; 可以加也可以不加, 可以按照团队约定

JavaScript 输入输出语句?

输入: prompt()
输出: alert() document.write() console.log()

03_变量

01_变量的声明 + 变量的赋值

01_变量是什么?

问题: 用户输入的数据我们如何存储起来?

答案: 变量

02_变量

白话: 变量就是一个装东西的盒子

通俗: 变量是计算机中用来 存储数据 的 "容器", 它可以让计算机变得有记忆

注意: 变量不是数据本身, 它们仅仅是一个用于存储数值的容器; 可以理解为是一个个用来装东西的纸箱子

03_总结

变量是怎么理解?

计算机中用来存储数据的 "容器", 简单理解是一个个的盒子

变量有什么作用呢?

用来存放数据的; 注意变量指的是容器而不是数据

你还能想到那些生活中的变量?

HTML 标签
教室
宿舍

04_声明变量

要想使用变量, 首先需要创建变量 (也称为声明变量或者定义变量)

语法:

声明变量有两部分构成: 声明关键字, 变量名 (标识)
let 即关键字 (let: 允许, 许可, 让, 要), 所谓关键字是系统提供的专门用来声明 (定义) 变量的词语

举例:

我们声明了一个 age 变量
age 即 变量的名称, 也叫标识符

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明了一个 age 变量
    let age
  </script>
</body>

</html>

05_变量赋值

定义了一个变量后, 你就能够初始化它 (赋值); 在变量名之后跟上一个 "=", 然后是数值

注意: 是通过 变量名 来获得变量里面的数据

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明了一个 age 变量
    let age

    // 2.age 变量赋值为 18
    age = 18

    // 3.通过 变量名 来获得变量里面的数据
    console.log(age)
  </script>
</body>

</html>

06_变量初始化

简单点, 也可以声明变量的时候直接完成赋值操作, 这种操作也称为变量 初始化

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.变量初始化: 声明的同时直接赋值
    let age = 18
  </script>
</body>

</html>

07_总结

变量用什么关键字来声明?

let

变量通过什么符号来赋值?

= 这个符号我们也称为 赋值运算符

08_控制台打印两个变量案例

需求:

声明一个变量, 用于存放用户购买的商品 数量 (num) 为 20 件
声明一个变量, 用于存放用户的 姓名 (uname) 为 '张三'
依次 控制台 打印输出两个变量

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明一个变量, 用于存放用户购买的商品 数量 (num) 为 20 件
    let num = 20

    // 2.声明一个变量, 用于存放用户的 姓名 (uname) 为 '张三'
    let uname = '张三'

    // 3.依次 控制台 打印输出两个变量
    console.log(num)
    console.log(uname)
  </script>
</body>

</html>

02_变量的更新 + 声明多个变量

01_更新变量

变量赋值后, 还可以通过简单地给它一个不同的值来更新它

注意: let 不允许多次声明一个变量

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明了一个 age 变量, 同时里面存放了 18 这个数据
    let age = 18

    // 2.变量里面的数据发生变化更改为 19
    age = 19

    // 3.控制台打印输出结果为 19
    console.log(age)
  </script>
</body>

</html>

02_声明多个变量

语法: 多个变量中间用逗号隔开

说明: 看上去代码长度更短, 但并 不推荐 这样; 为了更好的可读性, 请一行只声明一个变量

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明多个变量: 看上去代码长度更短, 但并 不推荐 这样; 为了更好的可读性, 请一行只声明一个变量
    let age = 18, uname = 'pink'
    
    console.log(age, uname)
  </script>
</body>

</html>

03_总结

变量赋值之后如何更新新值?

直接给它一个不同的值来更新它

我们提倡同时声明多个不同的变量吗?

不提倡, 可读性不好

04_弹出案例

需求: 浏览器中弹出对话框: 请输入姓名; 页面中输出: 刚才输入的姓名

分析:

输入: 用户输入框: prompt()
内部处理: 保存数据
输出: 页面打印 document.write()

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.输入: 用户输入框: prompt()
    // prompt('请输入姓名')

    // 2.内部处理: 保存数据
    let uname = prompt('请输入姓名')

    // 3.输出: 页面打印 document.write()
    document.write(uname)
  </script>
</body>

</html>

03_交换变量的值案例

01_交换变量的值案例

需求:

有 2 个变量: num1 里面放的是 10, num2 里面放的是 20
最后变为 num1 里面放的是 20, num2 里面放的是 10

分析:

核心思路: 使用一个临时变量用来做中间存储

步骤:

声明一个临时变量 temp
把 num1 的值赋值给 temp
把 num2 的值赋值给 num1
把 temp 的值给 num2

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num1 = 10
    let num2 = 20

    // 1.声明一个临时变量 temp
    let temp

    // 2.把 num1 的值赋值给 temp
    temp = num1

    // 3.把 num2 的值赋值给 num1
    num1 = num2

    // 4.把 temp 的值给 num2
    num2 = temp

    console.log(num1, num2)
  </script>
</body>

</html>

04_变量的本质 + 命名规则和规范

01_变量的本质

内存: 计算机中存储数据的地方, 相当于一个空间

变量本质: 是程序在内存中申请的一块用来存放数据的小空间

02_命名规则和规范

规则: 必须遵守, 不遵守报错 (法律层面)

规范: 建议, 不遵守不会报错, 但不符合业内通识 (道德层面)

规则:

不能用关键字
关键字: 有特殊含义的字符, JavaScript 内置的一些英语词汇; 例如: let, var, if, for 等
只能用下划线, 字母, 数字, $ 组成, 且数字不能开头
字母严格 区分大小写, 如 Age 和 age 是不同的变量

规范:

起名要有意义
遵守小驼峰命名法
第一个单词首字母小写, 后面每个单词首字母大写; 例: userName

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.不能用关键字
    // let if = 10

    // 2.只能用 下划线, 字母, 数字, $ 组成, 且数字不能开头
    let num1$_ = 11
    // let nav-bar = 11
    // let 1num = 10

    // 3.字母严格 区分大小写
    let pink = '老师'
    let Pink = '演员'
    console.log(pink, Pink)
  </script>
</body>

</html>

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

05_var 和 let 区别

01_输出用户信息案例

需求: 让用户输入自己的名字, 年龄, 性别, 再输出到网页

分析:

弹出 输入 框 (prompt): 请输入您的姓名 (uname): 用变量保存起来
弹出输入框 (prompt) : 请输入您的年龄 (age): 用变量保存起来
弹出输入框 (prompt) : 请输入您的性别 (gender): 用变量保存起来
页面分别 输出 (document.write) 刚才的 3 个变量

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.弹出 输入 框 (prompt): 请输入您的姓名 (uname): 用变量保存起来
    let uname = prompt('请输入姓名')

    // 2.弹出输入框 (prompt): 请输入您的年龄 (age): 用变量保存起来
    let age = prompt('请输入年龄')

    // 3.弹出输入框 (prompt): 请输入您的性别 (gender): 用变量保存起来
    let gender = prompt('请输入性别')

    // 4.页面分别 输出 (document.write) 刚才的 3 个变量
    document.write(uname, age, gender)
  </script>
</body>

</html>

02_let 和 var 的区别

在较旧的 JavaScript, 使用关键字 var 来声明变量, 而不是 let
var 现在开发中一般不再使用它, 只是我们可能再老版程序中看到它
let 为了解决 var 的一些问题

var 声明:

可以先使用再声明 (不合理)
var 声明过的变量可以重复声明 (不合理)
比如变量提升, 全局变量, 没有块级作用域等等

结论: var 就是个 bug, 别迷恋它了, 以后声明变量我们统一使用 let

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.var 可以先使用 再声明 (不合理)
    num = 10
    console.log(num)
    var num

    // 2.var 声明过的变量 可以重复声明 (不合理)
    var num = 10
    var num = 20
    console.log(num)


    // 3.let 不可以先使用 再声明
    // num = 10
    // console.log(num)
    // let num

    // 4.let 声明过的变量 不可以重复声明
    // let num = 20
    // let num = 10
    // console.log(num)
  </script>
</body>

</html>

06_数组的基本使用

01_数组

数组 (Array): 一种将 一组数据存储在单个变量名下 的优雅方式

02_声明语法

数组是按顺序保存, 所以每个数据都有自己的编号
计算机中的编号从 0 开始, 所以小明的编号为 0, 小刚编号为 1, 以此类推
在数组中, 数据的编号也叫 索引或下标
数组可以存储任意类型的数据

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.数组是按顺序保存, 所以每个数据都有自己的编号; 编号从 0 开始; 编号也叫 索引或下标
    let arr1 = [10, 20, 30]

    // 2.数组可以存储任意类型的数据
    let arr2 = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
  </script>
</body>

</html>

03_取值语法

通过下标取数据
取出来是什么类型的, 就根据这种类型特点来访问

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]

    // 1.取值: 通过下标取数据
    console.log(arr)
    console.log(arr[0]) // 刘德华
  </script>
</body>

</html>

04_一些术语

元素: 数组中保存的每个数据都叫数组元素
下标: 数组中数据的编号
长度: 数组中数据的个数, 通过数组的 length 属性获得

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]

    // 1.数组中数据的个数, 通过数组的 length 属性获得
    console.log(arr.length) // 6
  </script>
</body>

</html>

05_总结

使用数组有什么好处?

数组可以保存多个数据

数组字面量用什么表示?

[] 中括号

请说出下面数组中 '小米' 的下标是多少? 如何取得这个数据?

下标是 4
获取的写法是 names[4]

04_常量

01_常量的基本使用

概念: 使用 const 声明的变量称为 "常量"
使用场景: 当某个变量永远 不会改变 的时候, 就可以使用 const 来声明, 而不是 let
命名规范: 和变量一致

常量使用:

注意: 常量不允许重新赋值, 声明的时候必须赋值 (初始化)

小技巧: 不需要重新赋值的数据使用 const

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const PI = 3.14
    console.log(PI)

    // 1.常量不允许重新赋值
    // PI = 3.15
    // console.log(PI)

    // 2.声明的时候必须赋值 (初始化)
    // const PI 
  </script>
</body>

</html>

02_总结

let - 现在实际开发变量声明方式

var - 以前的声明变量的方式, 会有很多问题

const - 类似于 let, 但是变量的值无法被修改

05_数据类型

01_数字型 + 算术运算符

01_数据类型

计算机世界中的万事万物都是数据

计算机程序可以处理大量的数据, 为什么要给数据分类?

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

比如:

02_JS 数据类型整体分为两大类

基本数据类型
引用数据类型

03_数字类型 (Number)

即我们数学中学习到的数字, 可以是整数, 小数, 正数, 负数

JavaScript 中的正数, 负数, 小数等统一称为数字类型

注意事项:

JS 是弱数据类型, 变量到底属于那种类型, 只有赋值之后, 我们才能确认
Java 是强数据类型例如 int a = 3 必须是整数

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.JS 是弱数据类型, 变量到底属于那种类型, 只有赋值之后, 我们才能确认
    // let num = 'pink'
    let num = 10.11
    console.log(num)

    // 2.Java 是强数据类型 int num = 10
  </script>
</body>

</html>

04_算术运算符

数字可以有很多操作, 比如, 乘法 *, 除法 /, 加法 +, 减法 - 等等, 所以经常和算术运算符一起

数学运算符也叫 算术运算符, 主要包括加, 减, 乘, 除, 取余 (求模)

+: 求和
-: 求差
*: 求积
/: 求商
%: 取模 (取余数)
开发中经常作为某个数字是否被整除

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.+: 求和
    console.log(1 + 1) // 2

    // 2.*: 求积
    console.log(1 * 1) // 1

    // 3./: 求商
    console.log(1 / 1) // 1

    // 4.%: 取模 (取余数), 开发中经常作为某个数字是否被整除
    console.log(4 % 2) // 求余数 0
    console.log(5 % 3) // 求余数 2 
    console.log(3 % 5) // 求余数 3 
  </script>
</body>

</html>

05_优先级顺序

同时使用多个运算符编写程序时, 会按着某种顺序先后执行, 我们称为优先级

JavaScript中优先级越高越先被执行, 优先级相同时以书从左向右执行

乘, 除, 取余优先级相同
加, 减优先级相同
乘, 除, 取余优先级大于加, 减
使用 () 可以提升优先级
总结: 先乘除后加减, 有括号先算括号里面的 ~~~

提问:

06_总结

算术运算符有那几个常见的?

+ - * / %

算术运算符优先级怎么记忆?

先乘除取余, 后加减, 有小括号先算小括号里面的

取余运算符开发中的使用场景是?

来判断某个数字是否能被整除

07_计算圆的面积案例

需求: 对话框中输入圆的半径, 算出圆的面积并显示到页面

分析:

面积的数学公式: π*r²
转换为 JavaScript 写法: 变量 * r * r

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.页面弹出输入框
    let r = prompt('请输入圆的半径: ')

    // 2.计算圆的面积 (内部处理)
    let re = 3.14 * r * r

    // 3.页面输出
    document.write(re)
  </script>
</body>

</html>

08_数字类型 (NaN)

NaN 代表一个计算错误; 它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的, 任何对 NaN 的操作都会返回 NaN

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.NaN 代表一个计算错误; 它是一个不正确的或者一个未定义的数学 操作所得到的结果
    console.log('pink 老师' - 2) // NaN

    // 2.NaN 是粘性的, 任何对 NaN 的操作都会返回 NaN
    console.log(NaN - 2) // NaN
    console.log(NaN + 2) // NaN
    console.log(NaN / 2) // NaN
    console.log(NaN === NaN) // false
  </script>
</body>

</html>

02_字符串型 + 字符串拼接

01_字符串类型 (string)

通过单引号 (''), 双引号 ("") 或反引号 (``) 包裹的数据都叫字符串, 单引号和双引号没有本质上的区别, 推荐使用 单引号

注意事项:

无论单引号或是双引号必须成对使用
单引号 / 双引号可以互相嵌套, 但是不可以自已嵌套自已 (口诀: 外双内单, 或者外单内双)
必要时可以使用转义符 , 输出单引号或双引号

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.通过单引号 (''), 双引号 ("") 或 反引号 (``) 包裹的数据都叫字符串
    let str1 = 'pink'
    let str2 = "pink"
    let str3 = `中文`
    console.log(str2)

    // 2.看上去是数字, 但是引号包裹了就是字符串
    console.log(`11`)
    console.log(11)

    // 3.单引号 / 双引号 可以互相嵌套, 但是不可以自已嵌套自已 (口诀: 外双内单, 或者外单内双)
    console.log('pink 老师讲课非常有"基情"')
    console.log("pink 老师讲课非常有'基情'")

    // 4.必要时可以使用转义符 \, 输出单引号或双引号
    console.log('pink 老师讲课非常有\'基情\'')
  </script>
</body>

</html>

02_字符串拼接

场景: + 运算符可以实现字符串的拼接

口诀: 数字相加, 字符相连

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.字符串拼接: 数字相加, 字符相连
    console.log(1 + 1) // 2
    console.log('pink' + '老师') // pink老师

    let age = 22
    // document.write('我今年' + 19) // 我今年19
    document.write('我今年' + age + '岁了') // 我今年22岁了
  </script>
</body>

</html>

03_模板字符串

01_模板字符串

使用场景

拼接字符串和变量
在没有它之前, 要拼接变量比较麻烦

语法

`` (反引号)
在英文输入模式下按键盘的 tab 键上方那个键 (1 左边那个键)
内容拼接变量时, 用 ${} 包住变量

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let age = 20

    // 1.模板字符串: 外面用 `` (反引号), 里面用 ${} 包住变量
    document.write(`我今年 ${age} 岁了`)
  </script>
</body>

</html>

02_总结

JavaScript 中什么样数据我们知道是字符串类型?

只要用单引号, 双引号, 反引号包含起来的就是字符串类型

字符串拼接比较麻烦, 我们可以使用什么来解决这个问题?

模板字符串, 可以让我们拼接字符串更简便

模板字符串使用注意事项:

用什么符号包含数据?
反引号
用什么来使用变量?
$

03_页面输出用户信息案例

需求: 页面弹出对话框, 输入名字和年龄, 页面显示: 大家好, 我叫 xxx, 今年 xx 岁了

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.输入
    let uname = prompt('请输入您的姓名:')
    let age = prompt('请输入您的年龄:')

    // 2.输出
    document.write(`大家好, 我叫 ${uname},  我今年贵庚 ${age} 岁了`)
  </script>
</body>

</html>

04_布尔型 + 未定义型 + 空类型 + 类型检测

01_布尔类型 (boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据

它有两个固定的值 true 和 false, 表示肯定的数据用 true (真), 表示否定的数据用 false (假)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.布尔类型: 表示肯定的数据用 true (真), 表示否定的数据用 false (假)
    let isCool = true
    console.log(isCool) // true
    console.log(3 > 4) // false
  </script>
</body>

</html>

02_未定义类型 (undefined)

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

什么情况出现未定义类型?

只声明变量, 不赋值的情况下, 变量的默认值为 undefined, 一般很少 [直接] 为某个变量赋值为 undefined

工作中的使用场景:

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

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.未定义类型: 只声明变量, 不赋值的情况下, 变量的默认值为 undefined
    let num
    console.log(num) // undefined
  </script>
</body>

</html>

03_null (空类型)

Javascript 中的 null 仅仅是一个代表 "无", "空" 或 "值未知" 的特殊值

null 和 undefined 区别:

undefined 表示没有赋值
null 表示赋值了, 但是内容为空

null 开发中的使用场景:

官方解释: 把 null 作为尚未创建的对象
大白话: 将来有个变量里面存放的是一个对象, 但是对象还没创建好, 可以先给个 null

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.null (空类型)
    let obj = null
    console.log(obj)

    // 2.null 和 undefined 区别: undefined 表示没有赋值; null 表示赋值了, 但是内容为空
    console.log(undefined + 1) // NaN
    console.log(null + 1) // 1
  </script>
</body>

</html>

04_总结

布尔数据类型有几个值?

true 和 false

什么时候出现未定义数据类型? 以后开发场景是?

定义变量未给值就是 undefined
如果检测变量是 undefined 就说明没有值传递过来

null 是什么类型? 开发场景是?

空类型
如果一个变量里面确定存放的是对象, 如果还没准备好对象, 可以放个 null

05_控制输出语句

控制台语句经常用于测试结果来使用
可以看出数字型和布尔型颜色为蓝色, 字符串和 undefined 颜色为灰色

06_通过 typeof 关键字检测数据类型

typeof 运算符可以返回被检测的数据类型; 它支持两种语法形式:

作为运算符: typeof x (常用的写法)
函数形式: typeof(x)

换言之, 有括号和没有括号, 得到的结果是一样的, 所以我们直接使用 运算符 的写法

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.typeof 运算符可以返回被检测的数据类型
    let num = 10
    console.log(typeof num) // number

    let str = 'pink'
    console.log(typeof str) // string

    let str1 = '10'
    console.log(typeof str1) // string

    let flag = false
    console.log(typeof flag) // boolean

    // 2.有括号和没有括号, 得到的结果是一样的, 所以我们直接使用 运算符 的写法 typeof un === typeof (un)
    let un
    console.log(typeof (un)) // undefined

    let obj = null
    console.log(typeof obj) // object
  </script>
</body>

</html>

06_类型转换

01_隐式转换 + 显示转换

01_为什么需要类型转换

JavaScript 是弱数据类型: JavaScript 也不知道变量到底属于那种数据类型, 只有赋值了才清楚

坑: 使用表单, prompt 获取过来的数据默认是字符串类型的, 此时就不能直接简单的进行加法运算

此时需要转换变量的数据类型

通俗来说, 就是 把一种数据类型的变量转换成我们需要的数据类型

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.把一种数据类型的变量转换成我们需要的数据类型
    let num1 = prompt('请输入第一个数: ')
    console.log(typeof num1) // string
  </script>
</body>

</html>

02_隐式转换

某些运算符被执行时, 系统内部自动将数据类型进行转换, 这种转换称为隐式转换

规则:

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

缺点:

转换类型不明确, 靠经验才能总结

小技巧:

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.隐式转换: +号 两边只要有一个是字符串, 都会把另外一个转成字符串
    console.log('pink' + 1) // string
    console.log(2 + '2') // string

    // 2.隐式转换: 除了 + 以外 的算术运算符 比如 - * / 等都会把数据转成数字类型
    console.log(2 - '2') // number

    // 3.隐式转换: +号 作为正号解析可以转换成数字型
    console.log(+'123') // number
  </script>
</body>

</html>

03_显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的, 因为隐式转换规律并不清晰, 大多是靠经验总结的规律

为了避免因隐式转换带来的问题, 通常根逻辑需要对数据进行显示转换

概念:

自己写代码告诉系统该转成什么类型

转换为数字型

Number(数据)
转成数字类型
如果字符串内容里有非数字, 转换失败时结果为 NaN (Not a Number) 即不是一个数字
NaN 也是 number 类型的数据, 代表非数字
parselnt(数据)
只保留整数
parseFloat(数据)
可以保留小数

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.Number(数据): 转成数字类型
    let str = '123'
    console.log(Number(str)) // number

    // 2.Number(数据): 如果字符串内容里有非数字, 转换失败时结果为 NaN,  NaN 也是 number 类型的数据, 代表非数字
    console.log(Number('pink')) // NaN

    // let num1 = Number(prompt('输入年薪'))
    // console.log(Number(num1)) // number

    // 3.+号 作为正号解析可以转换成数字型
    // let num2 = +prompt('输入年薪')
    // console.log(num2) // number

    // 4.parselnt(数据): 只保留整数
    console.log(parseInt('12px')) // 12
    console.log(parseInt('12.34px')) // 12
    console.log(parseInt('12.94px')) // 12
    console.log(parseInt('abc12.94px')) // NaN

    // 5.parseFloat(数据): 可以保留小数
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // NaN
  </script>
</body>

</html>

04_输入 2 个数, 计算两者的和, 打印到页面中

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.用户输入: prompt 得到是字符串类型 要转换为 数字型
    let num1 = +prompt('请输入第一个数字: ')
    let num2 = +prompt('请输入第二个数字: ')

    // 2.输出
    alert(`两个数相加的和是: ${num1 + num2}`)
  </script>
</body>

</html>

07_综合案例

01_用户订单信息

需求: 用户输入商品价格和商品数量, 以及收货地址, 可以自动打印订单信息

分析:

需要输入 3 个数据, 所以需要 3 个变量来存储 price num address
需要计算总的价格 total
页面打印生成表格, 里面填充数据即可
记得最好使用模板字符串

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    h2 {
      text-align: center;
    }

    table {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h2>订单确认</h2>

  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格: ')
    let num = +prompt('请输入商品数量: ')
    let address = prompt('请输入收获地址: ')

    // 2.计算总额
    let total = price * num

    // 3.页面打印渲染
    document.write(`
      <table>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米青春版 PLUS</td>
          <td>${price} 元</td>
          <td>${num}</td>
          <td>${total} 元</td>
          <td>${address}</td>
        </tr>
      </table>
    `)
  </script>
</body>

</html>

02_const 声明中缺少初始化

分析:

const 声明的时候必须要赋值, 进行初始化

03_age 没有定义

分析:

提示 age 变量没有定义过
很可能 age 变量没有声明和赋值
或者我们输出变量名和声明的变量不一致引起的 (简单说写错变量名了)

04_标识符 age 已经声明

分析:

提示 "age" 已经声明
很大概率是因为重复声明了一个变量。
注意 let 或者 const 不允许多次声明同一个变量

05_对常量赋值

分析:

常量被重新赋值了
常量不能被重新赋值

06_字符串相加

分析:

因为 prompt 获取过来的是字符型, 所以会出现字符相加的问题
prompt 如果出现相加记得要转为数字型, 可以利用 + 最简单

01_JS 介绍 + 变量 + 常量 + 数据类型 + 类型转换 ​

01_准备工作 ​

01_软件篇 + VSCode 设置 ​

02_JS 介绍 ​

01_Javascript 是什么 ​

02_JavaScript 书写位置 ​

03_注释 + 结束符 ​

04_输入语法 + 输出语法 + 字面量 ​

03_变量 ​

01_变量的声明 + 变量的赋值 ​

02_变量的更新 + 声明多个变量 ​

03_交换变量的值案例 ​

04_变量的本质 + 命名规则和规范 ​

05_var 和 let 区别 ​

06_数组的基本使用 ​

04_常量 ​

01_常量的基本使用 ​

05_数据类型 ​

01_数字型 + 算术运算符 ​

02_字符串型 + 字符串拼接 ​

03_模板字符串 ​

04_布尔型 + 未定义型 + 空类型 + 类型检测 ​

06_类型转换 ​

01_隐式转换 + 显示转换 ​

07_综合案例 ​

01_用户订单信息 ​

01_JS 介绍 + 变量 + 常量 + 数据类型 + 类型转换

01_准备工作

01_软件篇 + VSCode 设置

02_JS 介绍

01_Javascript 是什么

02_JavaScript 书写位置

03_注释 + 结束符

04_输入语法 + 输出语法 + 字面量

03_变量

01_变量的声明 + 变量的赋值

02_变量的更新 + 声明多个变量

03_交换变量的值案例

04_变量的本质 + 命名规则和规范

05_var 和 let 区别

06_数组的基本使用

04_常量

01_常量的基本使用

05_数据类型

01_数字型 + 算术运算符

02_字符串型 + 字符串拼接

03_模板字符串

04_布尔型 + 未定义型 + 空类型 + 类型检测

06_类型转换

01_隐式转换 + 显示转换

07_综合案例

01_用户订单信息