JavaScript基础:
JavaScript的介绍:
作者: 布兰登
原名: liveScript 后改名 JavaScript
JavaScript是世界上最流行的语言,是建立在客户端上的脚本语言、编程语言。
HTML、CSS与JS的关系:
HTML 相当于网页的结构
CSS 修饰网页
JS 使网页具有逻辑、动态、交互功能
JavaScript组成:
ECMAScript JavaScript的语法
DOM 操作文档(html元素)
BOM 操作浏览器
JS的三种写法:
行内JS 使用次数 非常少
<button onclick="alert('请先充值')">点我</button>
内部JS
在body标签中 添加 script标签 里面就是js代码
<script>
// 里面都是JS代码
alert('你好啊!!!')
</script>
外部JS
新建 .js 文件 通过script 标签引入 文件
示例: <script src="文件路径"></script>
JS的输入与输出:
alert(提示内容) 浏览器弹框 用来提示用户
数字直接写
alert(123456)
字符需要使用单引号包裹 ''
alert('年轻人不讲武德,耗子尾汁')
prompt(提示内容) 浏览器输入框 用来输入内容给程序使用
prompt('请输入你的性别')
alert(prompt('请输入你的性别'))
console.log(打印内容) 控制台打印 用来调试代码
console.log(prompt('请输入姓名'))
console.log(prompt('请输入性别'))
console.log(prompt('请输入年龄'))
变量:
变量就是用来存放数据的容器
例如: 手机盒 => 变量 手机 => 数据
可以通过变量获取数据 也可以修改变量里面的数据
代码运行时都是运行在内存之中,变量都是在内存中
1. JS中怎么去表示变量:
语法: var 变量 = 数据
注意点: 所有变量都需要使用 var 关键字去 声明
例如: var one = 100000 var two = 'AVG123123'
2. 在JS中怎么去使用变量:
语法: 直接使用变量名
例如: alert(one) alert(two) alert(three)
3. 变量的使用
1. 声明变量 (造盒子)
var box
2. 赋值变量 (放手机)
box = 'iPhone X'
一边声明一边赋值
var box = 'iPhone X'
一次性声明多个变量
var box,
box1,
box2
一次性赋值多个变量
box = 'iPhone 12',
box1 = 'iPhone 12Pro',
box2 = 'iPhone 12ProMax'
一边声明多个变量一边赋值多个变量
var box = 'iPhone 12',
box1 = 'iPhone 12Pro',
box2 = 'iPhone 12ProMax'
4. 变量使用的注意点:
1. 变量只声明不赋值 那么该变量默认为 undefined(未定义)
2. 没有声明的变量 使用时会报错( 变量 is not defined )变量未定义
3. 变量名可以重复 只是后面的会覆盖前面的 (影响性能)
4. 变量名尽量取有意义的名字
5. 变量命名规则:
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如:var、for、while
关键字: JS已经使用过的 var if else
保留字: JS现在没有使用 但未来可能使用 class boolean string
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
JS有多少种数据类型?
6种
简单数据类型
数值 number
1 2 3 -1 1.1 NaN 不是一个数字(not a number) ※※
NaN 当计算失败时会显示
isNaN() 判断是否不是一个数字
不是一个数字 对 true
是一个数字 错 false
数值的科学计数法:
将0省略 用e表示科学计数
例如: 1e10
代表后面10个0
Infinity 代表无穷大,大于任何数值
-Infinity 代表无穷小,小于任何数值
字符串 string
字符串长度: 字符串.length ※※
字符串拼接: 字符串与字符串相加将会进行拼接
var a = '123' + '10' // '12310'
字符串与变量拼接: 由于变量不需要加单引号 所以直接 + 号连接就好
在字符串中间拼接变量: 引引加加 变量在其中
布尔值 boolean
未定义 undefined
空 null
复杂数据类型
对象 object
获取变量的数据类型
语法: typeof 变量 => 返回数据类型
typeof 1 => number
typeof '1' => string
typeof undefined => undefined
typeof true => boolean
typeof null => object
什么叫数据类型的转换?
一种数据类型 转为 另一种数据类型
共有3种常用的数据类型转换
一、 转为数值类型(重点)
1. parseInt() 转为整数 parseFloat() 转为小数
一个一个字符进行转换 遇到转换不了时就会停止 并把转换过得数字返回
如果一开始就转换不了 直接返回 NaN
2. 使用 - * / 进行隐式转换
- 0
* 1
/ 1
一个字符转换不了 直接NaN
3. Number() 转为数值类型
一个字符转换不了 直接NaN
二、 转为字符串类型
1. 变量.toString()
2. String(变量)
3. 加号拼接字符串 + ''
三、 转为布尔类型
1. Boolean()
null、''、0、NaN、undefined 转为 false
其他的都为 true
运算符(操作符)
JS运算符的分类:
算术运算符、递增递减运算符(一元运算符)、比较运算符、逻辑运算符、增强(赋值)运算符
算术运算符
+ 加
- 减
* 乘
/ 除
% 取余数(除完之后剩余的数)
** 次幂 (乘多少个自己)
一元运算符(递增、递减) 加1 减1
前置 ++ ++a
后置 ++ a++
前置 -- --a
后置 -- a--
前置++: 先++ 后 运算
后置++: 先运算 后 ++
比较运算符
赋值运算符(增强运算符)
+= 自己加 值
-= 自己减 值
*= 自己乘 值
/= 自己除 值
%= 自己取余 值
表达式: 变量 与 运算符 结合 返回运算后的结果
逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符, 其返回值也是布尔值。 后面开发中经常用于多个条件的判断,用来判断两边 true 与 false 关系的 同时返回 true 或 false
与( 并且) &&
判断依据 两边都为true 则返回true 否则返回false
或( 或者) ||
判断依据 两边都为false 则返回false 否则返回true
非(反转) !
将结果反转 true 改为 false false 改为 true
赋值运算符
+= -= *= /= %= =
运算符优先级
() !算术运算符( * /) 比较运算符 逻辑运算符 赋值运算符
流程控制
在程序中默认由三种流程语句: 1. 顺序语句(默认执行) 从上到下 从左到右 按照顺序依次执行 2. 分支语句 由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果 3. 循环语句
分支语句:
if语句:
在JS中使用 if语句 来完成 分支结构的实现
语法:
if (条件) {
// 代码块1
}
// 代码块2
解释:
根据 条件(表达式) 来 决定是否执行 代码块1
如果条件为 true 则执行 为false不执行
if else 语句
语法:
if (条件) {
// 代码块 A
} else {
// 代码块 B
}
解释:
根据条件执行 A 或者 B
如果 条件为 true 执行 A 否则 执行 B
if else if语句 适合用于多重条件
语法:
if (条件1) {
// 代码A
} else if (条件2) {
// 代码B
} else if (条件3) {
// 代码C
} else {
// 代码D
}
解释:
如果条件1 为true 执行 A 否则 执行下一个条件
如果条件2 为 true 执行 B 否则 执行下一个条件
如果所有条件都不满足 执行 代码D
满足一个条件其他的代码都不执行
三元表达式
语法: 条件 ? 值1 : 值2
根据条件true和false 决定是否返回 代码块1或者代码块2
true返回代码块1 false返回代码块2
switch case语句
语法:
switch (判断对象) {
case 条件1: {
代码块1
break
}
case 条件2: {
代码块2
break
}
default: {
代码块3
}
}
如果判断对象满足条件1 执行代码块1
如果判断对象满足条件2 执行代码块2
如果判断对象都不满足条件 执行代码块3
注意点: 每个代码块后都需要添加break结束判断 否则将会继续判断
循环结构
根据条件 执行重复的代码
for循环:
语法:
for(表达式1; 表达式2; 表达式3) {
代码块1
}
表达式1(初始化循环变量) => 表达式2(条件判断,决定循环是否执行) => 代码块1 => 表达式3(增加或者减少循环变量,决定循环次数)
表达式2(条件判断,决定循环是否执行) => 代码块1 => 表达式3(增加或者减少循环变量,决定循环次数)
表达式2(条件判断,决定循环是否执行) => 代码块1 => 表达式3(增加或者减少循环变量,决定循环次数)
直到表达式2条件判断为false
while循环
语法:
while(条件) {
代码块1
}
根据条件true和false 决定循环是否执行 true执行 false不执行
do while循环
语法:
do {
代码块1
} while (条件)
根据条件true和false 决定循环是否执行 true执行 false不执行
break语句
终止循环的进行
continue语句
跳过本次循环
数组
1. 为什么需要数组 ?
我们需要一次性保存很多数据 例如: 保存全班同学的成绩
100 99 70 60 10
必须得使用一个大容器 将所有成绩装进去
2. 什么是数组?
数组就是存放一系列数据的集合(大容器)
3. 在JS中怎么去定义数组?
字面量: 直接使用字符表示
使用字面量:
var a = [1,2,3,4,5,6]
多条数据使用逗号隔开
使用数组的构造函数:
var arr = new Array(1, 2, 3, 4, 5)
多条数据使用逗号隔开
数组可以存放任意类型的数据
数组的特性:
1. 数组是有长度的 有多少个数据 数组就有多长
数组.length 得到数组的长度
2. 数组中的数据是有顺序的 从0开始 我们把这个顺序称为下标(序号 索引)
3. 可以通过数组的下标 获取当前下标对应的值
4. 获取数组的值
通过数组下标取数组对应的值
语法: 数组[下标]
例子:
console.log(a[1])
// 快速取数组的最后一个
console.log(a[a.length - 1])
// 快速取数组的第一个
console.log(a[0])
// 下标超过数组的最大下标 undefined
console.log(a[100])
5. 修改数组的值:
语法: 数组[修改值的下标] = 修改的值
var a = [1, 2, 3, 4, 5, 6]
a[2] = 100
// 快速修改最后一个
a[a.length - 1] = 99
6. 新增数组的值:
语法: 数组[数组的长度] = 新增
原理: 修改超过数组索引以外的值 就变成了新增
千万不要超过数组长度去新增
例子:
var a = [1, 2, 3, 4, 5]
// a[10] = 6
a[a.length] = 6
7. 使用for循环遍历数组
语法:
for(var i = 0 ; i < arr.length; i++) {
arr[i]
}
var i = 0 是因为数组下标从0开始
i < arr.length 是因为数组下标比数组长度小1
i++ 是因为下标 每次加1
for(var i = 0; i < arr.length; i++) {
console.log(arr[i])
}