一.JS简介
1.概念
JavaScript 是一种运行在客户端(浏览器)的编程语言
2.作用
1. 网页特效 (监听用户的一些行为让网页作出对应的反馈)
2. 表单验证 (针对表单数据的合法性进行判断)
3. 数据交互 (获取后台的数据, 渲染到前端)
4. 服务端编程 (node.js)
3.组成
ECMAscript,DOM,BOM
二.输入输出语法
1.语法
人和计算机打交道的规则约定
2.输入语法
prompt
3.输出语法
alert // 弹窗,警告窗
console.log // 控制台输出
document.write //页面输出打印
三.字面量
在计算机科学中,字面量(literal)是在计算机中描述事/物
123 //是数字字面量
'黑马程序员' //字符串字面量,用引号的都是
[ ] // 数组字面量
四.变量
1.概念
容器
2.声明赋值的几种写法
1.先声明,再赋值
let name
name=xx
2.声明并直接赋值
let name=xx
3.同时声明多个变量
let name=xx,name2=xxx
3.变量本质
在内存开辟一个空间
4.命名规则与规范
1.规则
由字母、数字、下划线、$符号组成,不能以数字开头
不能是关键字和保留字,例如:var for while
严格区分大小写
2.规范
变量名必须有意义
遵守小驼峰式命名法,如:MyName
5.数组
1.什么是数组? 为什么需要数组?
如:存储班级所有人的姓名
2.创建数组:字面量
3.取值:数组[下标]
五.数据类型
1.概念和作用
1. 更加充分和高效的利用内存
2. 也更加方便程序员的使用数据
2.分类介绍
1.基本数据类型
number 数值型
string 字符串 (单引号,双引号,反引号,字符串拼接)
boolean 布尔型
undefined 未定义
null 空引用
2.引用数据类型
object 对象
function 函数
array 数组
六.数据类型的转换
1.为什么需要转换?
从用户得到的数据都是字符串,而字符串和数字相加会变成相连
2.显示转换
1.转换成数字
Number()
parse系列
如果介绍parse系列就是介绍区别和使用场景
三者的区别
2.转换成字符串
String()
变量.toString()
括号里面可以跟进制
两者区别
3.隐式转换的小技巧
+号作为正号解析可以转换成Number
任何数据和字符串相加结果都是字符串
七.运算符
1.作用: 实际开发需要进行各种运算
2.算术运算符
+
-
*
/
Infinity 无穷
% 判定是否可以被整除,求奇偶数
3.赋值运算符
1.=
2.带操作赋值(修改变量本身)
+=
-=
*=
/=
%=
3.自操作运算
++ -- (每次变化1)
前置自操作 , 后置自操作 (特点:独立一行: 没有区别.
不独立
前置: 先改变自己,后参与运算
后置: 先参与运算,后改变自己
)
4.比较运算符
比值
>
<
>=
<=
==
!=
比值比类型
===
!==
5.特殊比较
1.字符串比较规则
不比长度
比对应位置的字母的ASCII码值
2.NaN比较
不能比较, 所得结果一定是false
3.小数不适合精确比较
小数存储不精确
6.逻辑运算符
逻辑与&&一假则假 //(短路运算:逻辑与: false短路)
一真则真,逻辑或|| (短路运算:逻辑或: true短路)
逻辑非!,取反
7.运算符优先级
运算从左往右
()可以提升优先级
八.流程控制
1.顺序结构
代码从上往下, 顺序执行(一定会执行)
2.分支结构
代码根据条件选择执行(可以跳过代码)
3.循环结构
代码重复执行( 减少代码书写)
九.if分支
1.单分支
控制代码是否执行
if(条件){
满足条件时执行
}
2.双分支
二选一: 选择一段代码执行
if(条件){
满足条件时执行
}eles{否则执行
}
3.多分支
多选一: 选择一段代码执行, 条件分层
if(条件){
满足条件时执行
}eles if(否则满足条件){
否则满足条件时执行
}
十.三元运算
1.语法: 条件表达式 ? 结果表达式1 : 结果表达式2
1或者2代表整个结果
条件真: 1代表结果
条件假: 2代表结果
作用: 简化 if-else双分支
2.switch-case分支
case代表一个条件
break: 结束case以及switch
没有break: 穿透到下一个case
default: 所有条件都不匹配
// 简易版网页计算器
// 1. 用户输入两个数: 要变成数字
// 2. 用户输入操作符
// 3. 使用switch对操作符进行判定, 利用case去匹配结果, 输出结果
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
let op = prompt('请输入操作符:+ - * / %')
switch (op) {
case '+':
alert(`您选择的是加法:结果是:${num1 + num2}`)
break
case '-':
alert(`您选择的是减法:结果是:${num1 - num2}`)
break
case '*':
alert(`您选择的是乘法:结果是:${num1 * num2}`)
break
case '/':
alert(`您选择的是除法:结果是:${num1 / num2}`)
break
case '%':
alert(`您选择的是取余:结果是:${num1 % num2}`)
break
default:
alert(`您选择的是错误的`)
break
}
// switch如果case中没有break: 就会形成穿透效果: 直接进入下一个case(哪怕条件不满足), 直到遇到break或者default或者全部执行完才结束
// 代表的是if中的逻辑或运算: if(op =='+' || op == '-' || op == '*')
// 穿透解决的是代码的共用的问题
十一.循环
1.while循环
条件在外部定义
条件变化在循环体中变化
适合: 不限定次数的循环( 死循环),后端用的多
// 递增
let i = 0
while (i < 10) {
document.write(`月薪过万`)
i++
}
2.for循环
条件初始化, 条件判定, 条件变化: 都在for()小括号中
循环体: 只要专注解决业务问题
适合: 指定次数的循环
数组的循环遍历
循环案例
求和: 空筐思想
循环外面定义一个筐: 空的
循环里面不断的给筐添加内容(累加)
扩展平均值: 求和 / 数量
求极值: 擂台思想
循环外面定义一个擂主
循环里面不断pk擂主: 成功更换擂主
//1-100岁
for (let i = 1; i <= 100; i++) {
document.write(`${i}岁<br>`)
}
for循环遍历数组
// 复盘: 数组 数据的组合, 一个变量可以保存多个数据
// heros数组: 有length代表长度, 元素下标从0开始, 到length - 1 结束
// 访问元素: 数组的特点, 一次只能访问1个
// 找到特点: 如果是顺序访问数组, 下标刚好从: 0 --- 数组.length - 1
// for循环: 可以让一个变量从0 边到 数组.length - 1 for(let i = 0; i< 数组.length;i++)
let heros = ['黄忠', '马超', '赵云', '关羽', '张飞']
for (let i = 0; i < 5; i++) {
document.write(heros[i])
}
3.循环控制
给程序员提供了一种方便的机制, 让程序员可以在循环的内容控制循环
continue
跳过continue之后的代码
break 终止循环
4.循环嵌套
循环内部嵌入循环
执行逻辑
外部一次, 内部全部
十二.数组
1.作用: 存储多个数据
每个数据: 元素
每个元素: 都有下标(从0开始,每次变化1,最后一个: 数组.length - 1)
2.访问
数组名[下标]
arr[xx,xx,xx]