js
- js 的数组
-
-
- 数组是什么
- 为什么要使用数组
- 数组的简单使用
- 数组是按照顺序保存的，所以每个数据都有自己的编号
- 数组的取值方法
- 遍历数组
- 数组的元素求和
- 数组的最大值和最小值
- 数组的增删改查操作
- 数组的增加
- 数组的筛选
- 数组的删除
- js的函数
- 函数的参数的使用
- 函数的返回值return
- 作用域
- 匿名函数之表达式
- 函数表达式
- 匿名函数之立即执行函数
- 案例转换时间案例
- 对象
- 对象的使用
- 对象的属性和方法
- 对象的声明
- 练习
- 对象的增删改
- 对象的查
- 对象的改
- 对象的增
- 对象的查
- 对象的方法
- 遍历对象
- 渲染学生信息个人案例
- 数组对象
- 内置对象
- null
- 随机函数
- 案例
- 案例2
- 引用数据类型
- 栈和堆
- 栈和堆堆底层逻辑
- 代码
- 代码
- 第一步操作（修改属性值）
- webAPI
- dom
- dom对象
- 获取dom元素
- 案例
- 案例
- 总结
- 其他获取dom元素的方法
- 修改元素
- 案例
-
案例：
九九乘法表
数组是什么
数组的简单使用
操作数组
js 的数组
数组是什么
数组（array）：是一种可以按顺序保存数据的数据类型
为什么要使用数组
数组的简单使用
使用数组前，首先要声明数组
数组的声明有两种
方式一：
方式二：
数组是按照顺序保存的，所以每个数据都有自己的编号
在数组中数组的编号叫做下标或者说是索引
数组可以存储任意类型的数据
数组的取值方法
通过下标获取数据，
例如：
数组的一些术语
遍历数组
数组的元素求和
案例分析
数组的最大值和最小值
练习
求最小值
数组的增删改查操作
修改案例
数组的增加
在数组的末尾添加一个或者多个元素
语法：
例如：
在数组的开头添加一个或者多个元素
数组的筛选
代码案例
练习
筛选不等于0的数据
数组的删除
pop（）方法
shirt（）方法删除数组的开头
使用场景随机抽奖，抽奖的用户就从数组里面进行删除，不能抽奖
splice（）方法
js的函数
js就是封装了一段可被重复调用执行的代码，谁用谁调用；
下面这些函数就是我们之前学过的函数；
/*
函数的使用
*/
function sheet(){
for(var a=1;a<=10;a++){
console.log(a)
}
}
sheet();
为什么需要函数（函数的好处）
可以实现代码的重用性，提高开发的效率
函数的参数的使用
概念：
语法的声明
函数传参数
代码案例：
<script>
/*
函数的传参数
累计动态的加法运算
*/
function getsum(end){
var sum=0;
for(var i=1;i<=end;i++){
sum=sum+i
}
console.log(sum)
}
getsum(50)
/*
练习：开头动态输入；结尾动态输入；进行累加
*/
</script>
练习：开头动态输入；结尾动态输入；进行累加
<script>
function getsum1(start,end){
var sum=0;
for(var i=start;i<=end;i++){
sum=sum+i
}
console.log(sum)
}
getsum1(50,100)
</script>
形参和实参
总结：
参数的默认值
如果在参数中没有给参数一个值，那么这个参数的值就是undefined
所以想要给参数一个默认值那么就要，如下图片的参数传递；
案例的使用
函数的返回值return
作用域
匿名函数之表达式
匿名函数其实就是没有名字的函数
函数表达式
函数表达式的代码
代码
<script>
var fn=function (){
console.log("这就是匿名函数")
}
console.log(fn)
</script>
变量是先声明在打印，函数没有顺序要求
<body>
<button>点我</button>
<script>
var aa=document.querySelector('button')
aa.onclick=function (){
alert("这就是匿名函数")
}
</script>
</body>
匿名函数之立即执行函数
立即函数：就是不需要调用立即执行
代码
<script>
(function (){
alert("立即执行函数")
})()
</script>
多个立即执行函数需要需要使用分号（；）隔开
含有参数的使用立即执行函数
案例转换时间案例
<script>
//+的作用就是将字符串数字转换成number数字
var s=+prompt('请出入秒数')
function gettime(t){
h=parseInt(t / 60 / 60%24)
m=parseInt(t/60%60)
s=parseInt(t%60)
return `转换完毕之后是${
h}小时${
m}分钟${
s}秒`
}
var as= gettime(s)
document.write(as)
</script>
对象
对象的使用
对象的属性和方法
对象的声明
代码
注意：属性之间的逗号不能省略，否则会报错；
练习
对象的增删改
对象的查
对象的改
<script>
var pink={
name : "名字"
address:"地址"
age:19
sex:'男'
}
pink.address="新地址";
console.log(pink)
</script>
对象的增
<script>
var pink={
name : "名字"
address:"地址"
age:19
sex:'男'
}
pink.hobby="足球";
console.log(pink)
</script>
对象的查
<script>
/*
对象的查的两种方式
对象名.属性名
对象名['属性名']
*/
var fn={
age:19,
'goods-name':"商品的名字"
}
console.log(fn.age)
console.log(fn['goods-name'])
console.log(fn['age'])
</script>
对象的方法
代码
<script>
/*
对象的查的两种方式
*/
var fn={
age:19,
sing: function (){
console.log("这就是唱歌的方法")
}, //这个地方的=逗号必须添加上去否则会报错；
</script>
代码
<script>
/*
对象的查的两种方式
*/
var fn={
age:19,
sing: function (){
console.log("这就是唱歌的方法")
}, //这个地方的=逗号必须添加上去否则会报错；
//在这里的方法还可以有参数
song: function (x,y){
console.log(x+y)
}
}
//方法的调用 对象名.方法名
fn.sing()
fn.song(1,2);
/*
注意：如果函数里面没有return那么直接打印。就会打印出来undefined
只有写了return使用打印语句才可以打印出来数据；
*/
console.log(fn.song(1,2);)
</script>
遍历对象
我们之前一直都是通过一个一个的打印语句进行打印，但是如果在某一个对象里面有很多个
那么这个时候该怎么办呢
能否通过使用一次使用将所有的属性打印出来
我们之前遍历数组的时候是通过for循环进行遍历，那么我们是否可以通过for循环对对象进行遍历呢
但是因为我们的对象没有长度和下标所以我们不能使用之前的for循环的使用
那么我们可以使用for。。。in这个循环进行遍历
在这里我们先通过数组进行打印
<script>
//但是for。。。in 我们不推荐遍历数组，
let arr=["zrr","pink","这就是"]
for(let k in arr){
console.log(k)//k这个时候打印的是下标，但是这个下标是字符串类型的
//如果我们想要打印具体的数据，那么这个时候就可以通过下面的方式进行打印
console.log(arr[k])
}
</script>
渲染学生信息个人案例
数组对象
将多个对象写到一个数组里面称为数组对象
案例
内置对象
mdn网站：https://developer.mozilla.org/zh-CN/docs/Web/Tutorials
mdn网站这个网站设计是我们可以使用搜索math这个对象的所有方法 的使用
mdn的使用
比如圆的直径
<script>
console.log(Math.PI)
/*
ceil：向上取整，
*/
console.log(Math.ceil(1.1))
console.log(Math.ceil(1.6))
/*
向下取整
*/
console.log(Math.floor(1.6))
/*
四舍五入：round
*/
console.log(Math.round(1.1))
console.log(Math.round(-1.9))
console.log(Math.round(-1.5))//-1
/*
parseInt：取整
*/
console.log(Math.max(1,2,3,4,5))
</script>
null
随机函数
案例
0-10之间的整数
案例2
<script>
/*
从数组里面随机去一个数据
*/
let arr=["red","gree","blue"]
//定义产生随机下标
let ran=Math.floor(Math.random() * arr.length)
console.log(ran)
console.log(arr[ran])
</script>
引用数据类型
栈和堆
栈和堆堆底层逻辑
代码
上面代码的底层逻辑
代码
第一步操作（修改属性值）
第二步操作
webAPI
dom
什么是dom
dom对象
说明：任何一个标签都是一个对象
证明一个标签是一个对象
代码
<body>
<div>这就是div标签</div>
<script>
const div=document.querySelector('div')
console.dir(div)
</script>
</body>
dom其实是一个对象，全称是document对象
所以在document对象里面也有属性和方法比如document.write
获取dom元素
使用css选择器进行修饰
我们在这理先写document是因为页面在document而我们的标签是在页面里面
document.querySelector只会选择第一个，当我们有多个标签的时候只有第一个选渲染
代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
color: red;
}
</style>
</head>
<body>
<div class="box">这就是地v标签123</div>
<div class="box">这就是地v标签abc</div>
<script>
const box= document.querySelector('div')
console.log(box)
</script>
</body>
</html>
打印结果
案例
通过使用document.querySelector获取p标签
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
color: red;
}
</style>
</head>
<body>
<p id="a"></p>
<script>
const box2= document.querySelector('a')
console.log(box2)
</script>
</body>
</html>
案例
通过使用document.querySelector获取ul标签里面的li标签
<body>
<ul>
<li>这就是li1</li>
<li>这就是li2</li>
<li>这就是li3</li>
<li>这就是li4</li>
<li>这就是li5</li>
</ul>
<script>
//我们通过标签名获取
const box1= document.querySelector('div')
console.log(box1)
const box2= document.querySelector('a')
console.log(box2)
const li=document.querySelector(' ul li:first-child ')
console.log(li)
</script>
</body>
如果匹配多个元素的话
<body>
<ul>
<li>这就是li1</li>
<li>这就是li2</li>
<li>这就是li3</li>
<li>这就是li4</li>
<li>这就是li5</li>
</ul>
<script>
const lis = document.querySelectorAll('ul li')
console.log(lis)
</script>
</body>
</html>
总结
为什么在这里使用const 是因为我们在这里的标签不会发生改变，其实我们在改变的是标签里面的
内容
遍历
<body>
<ul class="nav">
<li>这就是li1</li>
<li>这就是li2</li>
<li>这就是li3</li>
<li>这就是li4</li>
<li>这就是li5</li>
</ul>
<script>
const nav = document.querySelectorAll('.nav li')
for(let a=0;a<=nav.length-1;a++){
console.log(nav[a])
}
</script>
</body>
代码
<body>
<p class="n">这就是p标签</p>
<script>
const p = document.querySelectorAll('.n')
console.log(p)
p[0].style.color='red'; //这个时候页面的p标签就会变色
</script>
</body>
其他获取dom元素的方法
修改元素
两种方法
代码
<body>
<div class="box">这就是div标签</div>
<script>
const div= document.querySelector('.box')
console.log(div.innerText) //如果写成这样的就是获取内容
div.innerText="修改后的内容";
div.innerText="<strong>这就是加粗标签</strong>";
</script>
不解析标签
<body>
<div class="box">这就是div标签</div>
<script>
const div= document.querySelector('.box')
console.log(div.innerText) //如果写成这样的就是获取内容
div.innerText="修改后的内容";
div.innerText="<strong>这就是加粗标签</strong>"; //注意
</script>
可以解析标签
代码
<body>
<div class="box">这就是div标签</div>
<script>
const div= document.querySelector('.box')
console.log(div.innerText) //如果写成这样的就是获取内容
div.innerText="修改后的内容";
div.innerText="<strong>这就是加粗标签</strong>"; //不识别标签
div.innerHTML="<strong>识别标签</strong>"; //识别标签
</script>
案例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper{
height: 420px;
background: url("./images/bg01.jpg");//背景图片
padding: 100px 250px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper"></div>
<strong>创炎教育年会抽奖</strong>
<h1>一等奖 <span id="one">？？？</span></h1>
<h3>二等奖 <span id="two">？？？</h3>
<h5>三等奖 <span id="three">？？？</h5>
<script>
</script>
</body>
</html>