js知识点
alert 弹窗
目标
-
能够说出javaScript是什么？
（ 1. javascript是世界上最流行的编程语言之一，是一种运行在浏览器的编程语言，Script是脚本的意思，实现人机交换的效果
2.脚本语言：不需要编译，运行过程中由js解释器 逐行来进行解释并执行
3.现在也可以基于Node.js技术进行服务器编程）
-
能够知道javascript的发展历史
-
能够说出浏览器执行javascript的原理
（浏览器本身并不会执行js代码，而是通过内置javascript引擎（解释器）来执行js代码。js引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以javascript语言归为脚本语言，会逐行解释执行。）
-
能够说出javascript由哪三部分组成
-
ECMAScript (javascript 语法)
-
DOM （页面文档对象模型）
-
BOM （浏览器对象模型）
-
-
能够写出javascript三个输出语句
javascript的作用
-
表单动态校验 （密码强度检测）（js最初生产的目的）
-
网页特效
-
服务端开发（Node.js）
-
桌面程序 （Electron）
-
app
-
控制硬件--物联网
-
游戏开发
js的三种书写位置
-
行内式
-
内嵌式
-
外部
js注释
-
单行注释 // 快捷键 ctel+/
-
多行注释 /* 内容 */ 快捷键 shift + alt +a
-
快捷键修改
javascript输入输出语句
方法 说明 归属
alert（msg） 浏览器弹出警示框 浏览器
console.log（msg） 浏览器控制台打印输出 浏览器
prompt（info） 浏览器弹出输入框，用户可以输入 浏览器
document.write（） 要输出的内容 浏览器
变量
-
能够说出变量的主要作用
-
能够写出变量的初始值
-
能够说出变量的命名规范
-
能够画出变量是如何在 内存中存储的
-
能够写出交换变量案例
变量概述
白话 ：变量就是一个装东西的盒子
通俗 ： 变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改
变量的使用
-
声明变量
//声明变量
vlet age // 声明一个名称为age的变量
let是一个js关键字，用来声明变量
age是 程序员定义的变量，我们要通过变量名来访问内存中分配的空间
-
赋值
age=10
mdn 权威网站
字面量
目标 能说出什么是字面量 描述计算机中的事物
1000 数字字面量
'' 字符串字面量
[] 数组字面量
{} 对象字面量
变量的本质
目标：能够说出变量的本质是什么
内存 计算机中存储数据的地方 相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间
js数据类型整体分为两大类
-
基本数据类型
number 数字型
string字符串型
boolean布尔型
undefined 未定义型
null 空类型
-
引用数据类型
object 对象
function 函数
array 数组
模板字符串
反引号 ${}
赋值运算符
+=
let unm =1
unm+=1 num =num+1
boolean布尔型
false错
true对
逻辑运算符
短路
符号 名称 日常读法 特点 口诀
&& 逻辑与 并且 符号两边都为true结果才为true 一假则假 console.log(true && false)
|| 逻辑或 或者 符号两边有一个true就为true 一真则真 console.log(true || false)
！ 逻辑非 取反 true变false，false变true 真变假，假变真 console.log(!true)
flase 数字0 ' ' undefined null NaN 以上6种当假看
分支语句
-
if分支语句
-
三元运算符
-
switch语句
if语句
if语句有三种使用：单分支、双分支、多分支
单分支使用语法
if （条件） {
满足条件要执行的代码
}
小括号内的条件为true时，进入大括号里执行代码 如果为false 则代码不执行
小括号内的结果若不是布尔值类型时，会发生隐式转换为布尔类型
双分支语句使用语法
如果if (条件) {
满足条件要执行的代码
} 否则else {
不满足条件执行的代码
}
多分支语句
if（条件）{
代码1
}else if （条件2）{
代码2
} else if (条件3){
代码3
} else {
代码n
}
释义
-
先判断条件1，若满足条件1就执行代码1，其他不执行
-
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
-
若依然不满足继续往下执行，以此类推
-
若以上条件都不满足，执行else里的代码n
-
注：可以写N个条件，但这里演示只写2个
三元运算符
语法
条件 ？满足条件执行的代码 ： 不满足条件执行的代码
一般用来取值
let num1 = 20
let num2 = 30
let re = num1>unm2 ？num1 ： num2
console.log（re）
switch语句
switch （数据）{
case 值1 ：
代码1
break
case 值2 ：
代码2
break
default：
代码n
break
}
释义
-
找到跟小括号里数据全等的case值，并执行里面对应的代码
-
若没有全等===的则执行default里的代码
-
例：数据若跟值二全等，则执行代码2
-
switch case语句一般用于等值判断，不适合用于区间判断
-
switch case一般需要配合break关键字使用，没有break会造成case穿透
断点调试
目标：掌握断点调试方法，学会通过调试检查代码
作用：学习是可以帮助更好的理解代码运行，工作时可以更快的找到bug
浏览器打开调试界面
-
f12打开开发者工具（右击检查）
-
点到sources一栏
-
选择代码文件
while循环
语法
while（循环条件）{
要重复执行的代码
}
循环三要素
-
变量起始值
-
终止条件 （没有终止条件，会一直循环，造成死循环）
-
变量的变化量
循环退出
能说出continue和break的区别
continue： 结束本次循环，继续下次循环
break：退出循环
for循环语法
for （起始条件 ；循环条件；变化值）{
循环语句
}
arr.length（长度）通过他可以告诉我们数组里面有几个数据
for循环和while循环的区别：
1.如果明确了循环的次数的时候，推荐使用for循环
-
如果不明确循环的次数的时候，推荐使用while循环
循环嵌套
for（let i = 1;i<6;i++）{
for(let j = 1 ; j<6 ;j++) {
}
}
外面循环一次，里面循环全部执行
数组
数组是什么？
-
数组（Array）是一种可以按顺序保存的数据类型
-
为什么要数组？
声明语法
let names = [‘小明’，‘小米’]
-
数组是按顺序保存的，所以每个数据都有自己的编号
-
计算机中的编号是从0开始，所以小明的编号为0，小米的编号为1以此类推
-
在数组中，数据的编号也叫索引或下标
-
素组可以存储任意类型的数据想
操作数组
增删改查
查
查询数组数据 数组[下标]
改
重新赋值 数组[下标]=新值
arr[0] = 新值
增
数组添加新的数据
arr.push（新增的内容）
arr.unshift（新增的内容）
删
删除数组中数据
arr.pop（）
arr.shift（）
arr.splice（操作下标，删除的个数）
数组增加新的数据
数组（push（））方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度（重点）
语法
arr.push（元素1，。。。，元素n ）
例如
let arr = ['red', 'odsp']
arr.push('pink')
document.write(arr)
// 结果为 red,odsp,pink
数组增加新的数据
arr.unshift（新增的内容）方法将一个或者多个元素添加到 数组的开头，并 返回改该数组的长度
例如
let arr = ['red', 'odsp']
arr.unshift('pink')
document.write(arr)
//输出结果为 pink，red，odsp
数组删除元素
数组pop（）方法从数组中删除最后一个元素，并返回该元素的值
语法
arr.pop（）
数组shift（）方法从数组中删除第一个元素
语法
arr.shift（）
数组删除元素
数组splice（）方法，删除指定元素
语法
arr.splice（start，deleteCount）
arr.splice（起始位置，删几个 ）
综合案例 柱状图
<html lang="en">
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
123
<h4>第1季度</h4>
</div>
156
<h4>第2季度</h4>
</div>
120
<h4>第3季度</h4>
</div>
210
<h4>第4季度</h4>
</div>
let arr = []
for (let i = 1; i <= 4; i++) {
arr.push(+prompt(请输入第${i}季度的数据))
}
document.write(<div class="box">)
for (let i = 0; i < arr.length; i++) {
document.write(`
${arr[i]}
<h4>第${i+1}季度</h4>
</div>
`)
}
document.write(</div>)
</script>
</body>
</html>
函数
目标：能说出为什么需要函数
函数：
function，是被设计为执行特定任务的代码块
说明：
函数可以把具有相同或相似逻辑的代码"包裹起来"，通过函数调用执行这些被包裹的代码逻辑，这么做的优势是有利于精简代码方便复用
函数的声明语法
function 函数名 （）{
函数体
}
函数命名规范
-
和变量名基本一致
-
尽量使用小驼峰命名法
-
前缀应该为动词
-
命名建议：常用动词约定
动词 含义
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据
函数调用
函数名（）
声明的函数必须被调用才会真正被执行，使用（）调用函数
例
sayHi（）
sayHi（）
函数声明一次可以多次调用，每一次函数调用，函数体里面的代码会重新执行一次
函数返回值
用return返回数据
-
当函数需要返回数据出去时，用return关键字
-
return会立即结束当前函数
-
函数可以没有return，这种情况函数默认值返回为undefinde
-
函数内部只能出现1次return，并且retrun后面代码不再被执行，所以return后面的数据不要换行写
匿名函数
目标：掌握匿名函数的写法
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
语法：
let fn function （）{
函数体
}
调用 fn（）
立即执行函数
场景介绍：避免全局变量之间的污染
语法：
（function （）{console.log（11）}）（）；
（function （）{console.log（11）}（））；
多个立即执行函数之间用；隔开
对象
对象是什么？
对象（object）javascript里的一种数据类型
可以理解为时一种无序的数据集合
可以用来秒数某个事
对象声明语法
let 对象名 = {}
let att ={}
属性
let person = {
uname：‘张’，
age：18，
sex：‘男’
}
属性访问
console.log（对象名.属性）
console.log（对象名[属性]）
对象方法
let person = {
uname：‘张’，
age：18，
sex：‘男’，
sayHi ：function（）{
}
}
调用
person.sayHi（）
函数在对象里 叫方法
操作对象
增删改查
查
对象.属性
对象.方法（）
改
重新赋值
对象.属性=值
对象.方法=function（）{}
增
对象添加新的数据
对象.新属性名=新值
删
删除对象中的属性
delete对象名.属性名
遍历对象语句
for （let k in goods）{
log（k）获取对象属性
log（goods[k]）获取对象值
}
内置对象
内置对象时什么
javascript内部提供的对象，包含各种属性和方法给开发者调用
思考：我们之前使用过内置对象吗
document.write（）
console.log（）
内置对象math
Math对象是javascript提供的一个“数学高手”对象
提供了一系列做数学运算的方法
方法有
-
random 生成0-1的随机数.包括0不包括1
-
ceil：向上取整
-
floor：找最大值
-
max：找最大数
-
min：找最小数
-
pow：幂运算
-
abs：绝对值
-
round：就近取整，.5取大的那个数
随机数
生成任意范围的随机数
生成0-10的随机数
Math.floor（Math.random（）* （10+1））
Math.floor（Math.random（）*（5+1））+5
生成n-m之间的随机数
Math.floor（Math.random（）*（m-n+1））+n
