文章目录
一、JavaScript介绍
1.1 JS是什么
是一种运行在客户端的编程语言，实现人机交互效果。
1.2 JS作用
- 网页特效（监听用户的一些行为让网页做出对应的反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互（获取后台的数据，渲染到前端）
- 服务器编程（node.js）
1.3 JS的组成
1、ECMAScript：规定了 JS 基础核心知识。
- 比如：变量，分支语句，循环语句，对象等等。
2、web APIs：
- DOM 操作文档，比如对页面元素进行移动，大小，添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度，存储到数据流量器等等
1.4 JavaScript书写位置
1、内部
直接在 HTML 文件里，用 script 标签包住
规范：script 标签写在 </body> 上面
拓展：alert(‘hello world’) 页面弹出警告对话框
注意：因为网页的解析顺序是从上到下，所以 JS 在最后
<body>
<script>
aletr('hello world')
</script>
</body>
2、外部
代码写在以 .js 结尾的文件里
语法：通过 script 标签，引入 HTML 页面中。
注意：在 script 中间不能写标签，不然忽略不执行
<body>
<script src="外部文件.js"></script>
</body>
3、内联
代码写在标签内部
语法：把 js 标签写在 onclick 里面
注意：此处作为了解即可，但是 Vue 框架里会用
<body>
<button onclick="alert('hello world')">点击有惊喜</button>
</body>
1.5 JavaScript注释
1、单行注释
- 符号：//
- 作用：// 右边忽略
- 快捷键：Ctrl+/
2、块（多行）注释
- 符号：/* */
- 作用：在 /**/ 里所有内容忽略
1.6 JavaScript结束符
- 代表语句结束
- 英文分号 ;
- 可写可不写（现在大多程序员选择不写）
- 换行（回车）会识别结束符，所有一个完整的语句不要动手换行
- 因此开发中许多人主张书写 JavaScript 代码时省略结束符
- 但为了风格统一，要写结束符就每句都写，要么都不写（按照团队要求）
1.7JavaScript输入输出语法
什么是语法？
- 任何计算机打交道规则约定
- 我们按照这个规则去写
- 我们程序员需要操控计算机，需要计算机能看懂
- 输入输出也可以理解为人与计算机的交互，用户通过键盘鼠标向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程
1.输出语法
document.write('要输出的内容')
向 body 内输出内容，如果输出的内容是标签，也会解析成网页元素
aletr('要输出的内容')
页面弹出警告对话框
console.log('要输出的内容')
控制台输出语法，程序员调试使用
2、输入语句
prompt('输入内容：')
显示一个对话框，对话框中包含一条文字信息，用来提示用户输入
1.8 字面量
在计算机科学中，字面量（literal）是在计算机中描述 事 / 物
- 1000 此时1000就是数字字面量
- ‘hello world’ 字符字面量
- [] 数组字面量
- {} 对象字面量 等
二、变量
2.1 变量是什么？
- 白话：变量就是一个装东西的盒子
- 通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆
- 注意：变量不是数据本身，它们仅仅是一个存储数据的容器，可以理解为装东西的盒子
2.2 变量的使用
1、声明变量
要想使用变量，首先需要创建变量（专业说法：声明变量）
语法：
（1）声明变量有两部分构成：声明关键词，变量名（标识）
（2）let 即关键字（let：允许，许可，让，要）所谓的关键字是系统提供的专门用来声明（定义）变量的词语
2.3 变量赋值
定义一个变量后，你能够初始化它（赋值）。在变量名之后跟上一个等号 “=” ，然后是数值。
let age
// 赋值，将 18 这个数据存入 age 这个“容器”中
age = 18
// 这样 age 的值就成 18
document.write(age)
变量的初始化（常用）
let age = 18
document.write(age)
2.4 更新变量
变量赋值后，还可以通过简单的给它一个不同的值来更新它。
// 声明了一个变量 age 变量，同时里面存放了 18 这个数据
let age = 18
// 变量里面的数据发生变化更改为 19
age = 19
// 页面输出的结果为 19
document.write(age)
注意：let 不允许多次声明一个变量
2.5 声明多个变量
变量赋值后，还可以通过简单的给它一个不同的值来更新它。
let age = 18, uname = '小斌'
2.6 用户姓名输入案列
（1）输入：用户输入框：prompt()
（2）内部处理：保存数据
（3）输出：页面打印 document.write()
let uname = prompt('请输入姓名：')
document.write(uname)
2.7 交换变量
（1）声明一个临时变量 temp
（2）把 num1 的值赋值给 temp
（3）把 num2 的值赋值给 num1
（4）把 temp 的值赋值给 num2
let num1 = 10
let num2 = 20
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1,num2)
2.8 变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间
2.9 变量命名规范与规则
1.规则：必须遵守，不遵守报错
- 由字母，数字（0-9），下划线（_），美元符号（$）组成，如：usrAge，sex1，_neme
- 严格区分大小写，var，app; 和 VAR App;
- 不能以数字开头
- 不能是关键字，保留字，例如：var，for，while
2.规范：建议，不遵守不会报错，但不符合行内要求
- 变量名必须有意义，如：age，sex
- 遵循小驼峰命名法，首字母小写，后面单词首字母大写，如：myNeme
2.10 拓展-let和var的区别
let 和 var 区别：
- let 为了解决 var 的一些问题
- 以后声明变量统一使用 let
var 声明：
- 可以先使用后声明（不合理）
- var 声明过的变量可以重复使用声明（不合理）
- 比如变量提升，全局变量，没有块级作用域等等
2.11 拓展数组
数组（array）是一种可以按顺序保存多个数据
let 数组名 = [数据1, 数据2, ……, 数据n]
let week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
// 取值 数组名[索引]
console.log(week[6])
- 数组是按顺序保存，所以每个都有自己的编号
- 计算机中的编号是从 0 开始，所以星期一的编号为 0，星期天的编号为 6
- 在数组中，数据的编号也叫索引号或下标
一些术语：
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的 length 属性获得
let names = ['小明', '小刚', '小红', '小丽', '小张']
console.log(names[0]) // 小刚
console.log(names[3]) // 小丽
console.log(names.length) // 5
2.12 常量
- 概念：使用 const 声明的变量称为“常量”。
- 使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
- 命名规范：和变量一致
- 注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
- 小技巧：不需要重新赋值的数据使用const
三、数据类型
计算机世界中的万事万物都是数据。
计算机程序可以处理大量的数据，为什么要数据分类？
- 1、更加充分和高效的利用内存
- 2、也更加方便程序员的使用数据
3.1 数据类型的两大类
- 基础数据类型
- 引用数据类型
3.2 数字类型
即我们数学中学习到的数字，可以是整数，小数，正数，负数。
JavaScript 中的正数，负数，小数等 统一称为数字类型。
注意：
- JS 是弱数据类型，变量到底属于哪种类型，只有赋值之后我们才能确定
- Java 是强数据类型 例如 int a = 3 必须是整数
3.3 字符串类型
通过单引号（’ '）、双引号（" "）、或反引号（`）包裹的数据都叫字符串型，单引号和双引号没有本质上的区别，推荐 JS 使用单引号。
注意事项：
- 无论单引号或双引号必须成对使用
- 单引号/双引号可以直接嵌套，但不以自己嵌套自己（口诀：外双内单，或外单内双）
- 必要时可以使用转义符 \，输出单引号或者双引号
3.4 +号拼接
在字符串拼接中可以使用 + 号来拼接。
口诀：引引加加
let age = 2022 - prompt('请输入你的出生年份：')
document.write('您今年' + age + '岁了')
3.5 模板字符串
1、作用：
- 拼接字符串和变量
- 在没有它之前，要拼接变量比较麻烦
let age = 2022 - prompt('请输入你的出生年份：')
document.write('您今年' + age + '岁了')
2、符号
- ``
- 在英文输入模式下键盘的 tab 键上方那个键
- 内容拼接变量时，用 ${} 包住变量
- 可以换行 可以加标签
let age = prompt('请输入您的出生年份：')
document.write(`您今年${2022 - age}岁了`)
3.6 布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
3.7 未定义类型undefined
未定义是比较特殊的类型，只有一个值 undefined。
工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。
3.8 空类型null
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
null 和 undefined 区别：
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
3.8 检测数据类型typeof
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
- 作为运算符： typeof x （常用的写法）
- 函数形式： typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。
四、类型转换
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。
4.1 隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规则：
- 号两边只要有一个是字符串，都会把另外一个转成字符串
- 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
缺点：
- 转换类型不明确，靠经验才能总结
小技巧：
- +号作为正号解析可以转换成数字型
- 任何数据和字符串相加结果都是字符串
4.2 显式转换
转换为数字型
- Number(数据) 转成数字型
- parseInt(数据) 只保留整数
- parseFloat(数据) 可以保留小数
<script>
let str = '123'
console.log(Number(str))
console.log(Number('pink'))
// let num = Number(prompt('输入年薪'))
// let num = +prompt('输入年薪')
// console.log(Number(num))
// console.log(num)
console.log(parseInt('12px'))
console.log(parseInt('12.34px'))
console.log(parseInt('12.94px'))
console.log(parseInt('abc12.94px'))
// -------------------
console.log(parseFloat('12px')) // 12
console.log(parseFloat('12.34px')) // 12.34
console.log(parseFloat('12.94px')) // 12.94
console.log(parseFloat('abc12.94px')) // 12.94
</script>
五、运算符
5.1 算数运算符
数学运算符也叫算数运算符，主要包括加（+：求和）、减（ -： 求差）、乘（*： 求积）、除（/： 求商）、取余（%：取模）先乘除后加减，有括号算括号的原则，优先级相同时以从左到右执行
let r = prompt('请输入半径：')
let π = 3.1415926535
let gather = π * r * r
console.log(`圆的面积是${gather}`);
5.2 赋值运算符
赋值运算符：对变量进行赋值的运算符
- 已经学过的赋值运算符：= 将等号右边的值给予左边，要求必须是一个容器
- +=、-=、*=、/=、%=
let num = 1
// num = num + 2
num += 2
console.log(num);
let i = 1
let sum = 2
// sum = sun + i
sum += i
console.log(sum);
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
