01-JavaScript-变量-数据类型
什么是JavaScript ?
是一种运行在客服端(浏览器)编程语言,可以实现人机交互效果
作用: 网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端) ****
服务端编程 (node.js)
JavaScript组成部分:
1 ECMAScript (基础语法)
规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等
2 web APIs ( DOM、BOM） )
DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
JS 书写位置
JS有三种引入方式: 内联 ,内部 ,外部(常用)
1 内部引入:
直接写在html文件里，用script标签包住 , script标签写在上面
2 外部引入:
代码写在以.js结尾的文件里 , 通过script标签，引入到html页面中。
3 内联引入:
代码写在标签内部
注意事项: 书写的位置尽量写到文档末尾 前面 ,外部 js 标签中间不要写代码，否则会被忽略
JS注释
目前有两种注释方式:
1 单行注释:
符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl + /
2 块注释 :
符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift + alt + A
JS结束符
1 分号； 可以加也可以不加
2 注意换行默认为结束符
看工作需求而定
JS输入与输出语法
1 输入语法:
在网页弹出一个对话框,用于提示用户输入文字
属性: prompt('')
name=prompt('请输入你的姓名');
2 输出语法:(有3)
1 控制台输出语法，程序员调试使用 (常用)
属性: console.log()
console.log('控制台打印');
2 向body内展示内容, 如果输出的内容写的是标签，也会被解析成网页元素 (常用)
属性:document.write()
document.write('要输出的内容');
3 页面弹出警告对话框 (不常用)
属性: alert()
alert('要输出的内容')
4 可以获取多个输入,进行输出
let username = prompt('你叫什么名字');
address = prompt('你家住哪里');
foods = prompt('你喜欢吃什么');
music = prompt('你喜欢自己一个听音乐吗');
sports = prompt('你喜欢运动');
// 输入一下 到网页中
// console.log(username);
// console.log(address);
// console.log(foods);
// console.log(music);
// console.log(sports);
// 能不能在一行上直接输出 不要换行
// 使用 一个 + 表示连接
console.log(username + address + foods + music + sports);
3 思维导图:
变量
变量相当于是一个容器,可以存装数据
1 声明变量 (创建变量)
要想使用变量, 首先需要创建变量（专业说法： 声明变量）
变量声明(名字)最好见明之意
变量名不能出现重复
注意:
关键字 和 变量的名称 之间要加 空格
创建一个变量 名字就叫做 let var if for ...的内置关键字 都不能使用
let 关键字 age 变量的名称
let age
2 变量赋值
定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
let age 变量定义
age=18 变量的赋值
document.write(age); 网页输出内容
可以同时声明多个变量与赋值:
let name='张三',age=18,where='中国'
console.log(我叫${name},今年${age}岁,住在${where})
3 变量的声明,赋值使用
复写:
let username //变量声明 (username)
username = '玩翠花' //变量赋值('玩翠花')
console.log(username); 变量使用 注意：变量使用里面不能放引号 (username)
let height //变量声明
height = '1米7' //变量赋值
let wight //变量声明
wight = '200斤' //变量赋值
// 变量声明加赋值 常用简写
let name = '变量声明加赋值';
document.write (username)
document.write (height)
document.write (wight)
console.log(name)
连写:
// 一次多次声明加赋值 连写 注意要加逗号隔开
let username1 = '变量声明加赋值加连写', height1 = '1米7' ,
wight1= '200斤';
console.log(username1,height1,wight1);
4 变量交换
需求： 有2个变量： num1 里面放的是 10， num2 里面放的是20
最后变为 num1 里面放的是 20 ， num2 里面放的是 10
核心思路：使用一个 临时变量 用来做中间存储
步骤： 1. 声明一个临时变量 temp
2 把num1的值赋值给 temp
3 把num2的值赋值给num1
4 把temp的值给num2
<script>
// let figure = '20' , name = '张三'
// console.log(figure,name);
// 声明三个变量 2个赋值 一个空盒子
let num1 = '10', num2 = '20',temp;
// 设置 空的变量 存放 num1的值 num1 值 移到空盒子
temp=num1;
// 设置 num1 等于 num2
num1=num2;
// 设置 num2 等于之前num1 的值(temp)
// 思路在于：多创一个变量 用于 临时存放
numr2=temp;
console.log(num1,num2);
</script
5 变量的本质
变量的本质是什么
内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间
6 变量命名规则与规范
规则：必须遵守，不遵守报错
规范：建议遵守，不遵守不会报错，但不符合业内通识
-
规则：
不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
// 符号开头可以 let _hello='123' //下划线开头 let $hello='123' //$ let hello='123' // 字母开头 // let 123dadasd='132' //不能以数字开头字母严格区分大小写，如 Age 和 age 是不同的变量
// 字母区分大小 let Age = '用户1'; // 大写 单独 let age = '用户2'; // 小写 单独 -
规范：
起名要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写。例：userName
遵守大驼峰命名法
第一个单词首字母和后面每个单词首字母大写。例：UserName
// 命名有意义
// let a,b,c,d; // 不推荐 ！！
let height = '100';
// 如果变量单词比较多
let userName = '姓名'; // 推荐的
let userHeight = '100'; // 推荐的
let shoppingSupermarketShop = '111'; // 小驼峰 首字母小写
let ShoppingSupermarketShop = '111'; // 大驼峰 首字母大写
7 拓展 数组
数组(Array)是一种可以按顺序保存多个数据
let 数组名 [ 数据1, 数据2,数据3,...数据n]
let name=['小明','小红','小米',....]
name[0]
name[1]
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小红编号为1，以此类推
在数组中，数据的编号也叫索引或下标
let 数组名 [ 数据1, 数据2,数据3,...数据n]
let name=['小明','小红','小米',....]
console.log(name[0])
console.log(name[1])
取哪个就选哪个下标
数组可以存储任意类型的数据
数据类型
js数据类型整体分为两大类:
基本数据类型:
1 数据类型 – 数字类型（number）
即我们数学中学习到的数字，可以是整数、小数、正数、负数。
let score = 100;/正整数
let price = 12.345;//小数
let temperature = -40;1/负数
数字类拼接:
数字类如果加上 + 号,那么他的值则会相加
注意： 数字不能使用引号，不然就会变成字符串
数字 使用加号 ， 数值就会加起来 100+200= 300
let num1=100;
let num2=200;
let sum=num1+num2
console.log(sum); sum =300
2 数据类型 – 字符串类型（Srting)
通过单引号（ ''） 、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别， 推荐使用单引号。
let user_name = '小明';//使用单引号
let gender =“男";//使用双引号
let str = '123';//看上去是数字，但是用引号包裹了就成了字符串了
let str1 = '';//这种情况叫空字符串
注意事项： 1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或 者外单内双）
3.必要时可以使用转义符 \，输出单引号或双引号
字符串拼接:
当数字和字符串拼接是,会拼接在一起,而不是加在一起
// 字符串 使用加号，文字就会拼接在一起 阿珍爱上阿强
let num1='阿珍爱'
let num2='上阿强'
let sum=num1+num2
console.log(sum); sum=阿珍爱上阿强
3 数据类型 – 布尔类型（Boolean)
它有两个固定的值 true 和 false
表示肯定的数据用 true（真），表示否定的数据用 false（假）
<script>
/*
boolean 布尔 只有两种值 真 true 假 false
*/
// 你吃饭了吗
let isEat = true;
// 你睡觉了没有
let isSleep = false;
// 有什么用 ？ 还没有学习到 条件语句 暂时 感觉不到它的作用
// 感受
// 如果你吃饭了， 我现在就去吃大餐
// 如果你还没有吃饭， 我现在就去吃沙县
</script>
4 数据类型 –未定义类型(undefined)
未定义是比较特殊的类型，只有一个值 undefined。
只要出现 undefined 就说明这变量并没有赋值
只声明,不赋值.那么在控制台就会显示出 undefined
let age;
console.log(age);
5 数据类型 – null（空类型）
null 表示 值为 空
let age=null
null 和 undefined 区别：
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
- null 是赋值了,但是值还没确定是什么
数据类型-检测数据类型
typeof 检测数据的使用
给控制台加上 typeof 显示出,当前变量属于那种类型
let age = 18
let uname =‘刘德华'
let flag = false
let buy
console.log(typeof age)l // number
console.log(typeof uname)l // string
console.log(typeof flag) // booLean
console.log(typeof buy) // undefind
数据类型-类型转换(显示,隐藏)
1 隐式转换
如果把数字和字符串放在一起,系统会默认把字符串的旁边数字类型转成字符串
let age=18 数字
age2='22' 字符串
console.log(age+age2) 控制台显示为: 1822
*-/ 都可以把旁边的 字符串 转成 数字类型
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 在变量前面加 + 就可以把 字符串 转换成 数值
let num4 = +num2; // 也是可以的！
console.log(typeof num4);
在数字类型 后面加上 +'',就会把数字类型转换成字符串类型
let num1=123 +'' //隐藏转换 (常用)
console.log(typeof num1);
2 显示转换
字符串类型转换数字类型 (Number)
let num2=Number(num1)
// 注意事项: 字符串转换后面要加括号
字符串 转换成 数值
number 能把字符串转成 数值
转换成功就是数字 失败就会成 NaN 也是数值
let num1='12'
let num2=Number(num1)
document.write(num2)
数字类型转换字符串类型 (String)
let str=String(num1)
let num1=123
let str=String(num1) //显示转换 (常用)
console.log(typeof str);
let str=num1.toString() //显示转换 (不常用)
console.log(typeof str);
去小数点的 parsseInt
保留小数点的 parseFloat
<script>
// 注意事项: 字符串转换后面要加括号
// 字符串 转换成 数值
// number 能把字符串转成 数值
// 转换成功就是数字 失败就会成 NaN 也是数值
// let num1='12'
// let num2=Number(num1)
// document.write(num2)
// 直接用 + 号更加方便快捷 (常用)
let num1='999'
// 方法1:
// let num2=+num1
// console.log(num2);
// 方法2:
console.log(Number(num1));
// parsseInt 会去掉小数点后面的值 (常用)
let num3='32.222'
let num4=parseInt(num3)
console.log(num4);
// parseFloat 会保留小数点后面的值 (少用)
// let num1='52.222'
// let num2=parseFloat(num1)
// console.log(num2);
</script>
思维导航:
反引号的使用
作用
拼接字符串和变量
使用
必须要用 `` 包裹着内容
内容拼接变量时，用 ${} 包住变量
<script>
let userName=prompt('请输入您的姓名')
let age=prompt('请输入您的年龄')
document.write(`大家好，我叫${userName},今年${age}岁了`)
</script>
docunment.writ网页输出
可以在 JS框架 里输入HTML的标签结构 ,然后再网页中呈现出来
<script>
// 把内容 输出到 body标签中
// document.write("呵呵 我又来啦 😶");
// document.write(`<h1>大标题！ <h1/>`);
// let str =`<button>大大的按钮</button>`;
// let str =`<input type="text" > <button>大大的按钮</button>`;
// 反引号 还可以换行来写代码
// 如果换行了 那么就只能使用 反引号
// 如果不换行 用那种引号都可以
let str = `
<div>
<p>
<button>按钮又来啦</button>
</p>
</div>
`;
document.write('<h1>11111</h1>');
/*
1 document.write 可以把一个 标签形式的字符串 重新插入到body标签里
2 写标签字符串的时候
如果要换行 只能使用 反引号
没有换行 用哪种方式都可以
只要是写标签字符串 都可以使用反引号-模版字符串
3 不要直接在 字符串里面 一个一个字母写 标签
要现在 body标签中 使用 快捷键 先生成 标签 然后再复制回去
*/
</script
docunment.writ网页输出-综合案例:
实现步骤:
1.先把静态效果在body上布局出来
<table border="1">
<thead >订单付款确认页面</thead>
<tbody >
<tr>
<th>商品名称</th>
<th>商品名称</th>
<th>商品名称</th>
<th>商品名称</th>
<th>商品名称</th>
</tr>
<tr>
<td>小米手机</td>
<td>2999元</td>
<td>1</td>
<td>商品总价</td>
<td>黑马地址</td>
</tr>
</tbody>
</table>`)
2.然后在 js框架 实现弹窗输入(prompt)
let matter=prompt('请输入商品名称')
let matter2=+prompt('请输入商品价格')
let matter3=+prompt('请输入商品数量')
let matter4=matter2*matter3 // 请输入商品总价
let matter5=prompt('请输入收货地址')
3.把body的静态效果插入到 JS框架 上
document.write(
` <div class="box">
<h1>订单付款确认页面</h1>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>${matter}</td>
<td>${matter2}元</td>
<td>${matter3}</td>
<td>${matter4}元</td>
<td>${matter5}</td>
</tr>
</table>
</div>`);
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
h1 {
text-align: center;
}
table {
text-align: center;
width: 400px;
height: 80px;
border: 1px solid #000;
border-collapse: collapse;
}
th,td {
border: 1px solid #000;
}
</style>
</head>
<body>
<script>
let matter=prompt('请输入商品名称')
let matter2=+prompt('请输入商品价格')
let matter3=+prompt('请输入商品数量')
let matter4=matter2*matter3 // 请输入商品总价
let matter5=prompt('请输入收货地址')
document.write(
` <div class="box">
<h1>订单付款确认页面</h1>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>${matter}</td>
<td>${matter2}元</td>
<td>${matter3}</td>
<td>${matter4}元</td>
<td>${matter5}</td>
</tr>
</table>
</div>`);
</script>
</body>
</html>
02-JavaScript-运算符-条件语句-while循环
运算符:1~6
1 算术运算符
有 加 减 乘 除 求余(取模)
同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级
JavaScript中 优先级越高越先被执行，优先级相同时以书从左向右执行
总结： 先乘除后加减，有括号先算括号里面的 ,使用 () 可以提升优先级
// 算术运算符 加减乘除 求余(取模)
let num1=10
num2=2
// 加法
console.log(num1+num2); //12
// 减法
console.log(num1-num2); //8
// 乘发
console.log(num1*num2); //20
// 除法
console.log(num1/num2); //5
// 求余=取模 获得整数
// 除法运算 获取除法运算后 剩下的余数
console.log(10%5); // 0 除得尽就为0 10可以整除5 所以取值为0
console.log(10%3); // 1 除不尽就去剩余整数 10除不尽3 所以取值余数 1
// 如果一行捏 出现多个算术运算符
// 就先乘除后加减,如果有括号就先算括号
console.log(1+1*2);
console.log((1+1)*2);
2 圆的面积计算 (Math.PI*2)
// π * r 的平方
// 在JS中,通过什么来代表 π
// Math.PI
// console.log(Maath.PI);
let r=prompt('请输入圆的半径')
console.log('圆的面积是: '+Math.PI*r*r );
3 赋值运算符
例如: let num=1
num=num+1
console.log(num); =2
赋值运算符: num=1 num += 1 控制台输出结果就是 num=2
// let num=1
// num=num+1
// console.log(num); // 2
// let num=1
// num+=1
// console.log(num); // 1+1=2
// let num=1
// num+=3
// console.log(num); //4
// 加减乘除 求余 都一样
let num=10
num+=2
num-=2
num*=2
num/=2
num%=2
console.log(num);
4 一元运算(自增&自减)
自增和自减一样运算
前置自增:
++num 代表 当前 变量 直接+1
num=1
console.log(++num) //2
后置自增:
num++ 代表 先执行num的值,然后再执行num+1
num=1
console.log(num++) // 1
console.log(num) // 2
let i=1
// 自增
// 前置自增
// ++每次只加1
// 1+1+2
console.log(++i+2); //4
let r=1
// 后置自增
// 先执行结果 r+2 =3
// 再执行r结果 r++ r=2
console.log(r++ +2); //3
console.log(r);//2
let a=5
// 第一个值 5 a+1=6
// 第二个值 7 ++a(6)=7
// 第三个值 7 a为7
console.log(a++ + ++a +a);//19
5 比较运算符
( > )： 左边是否大于右边
<： 左边是否小于右边
( >=)： 左边是否大于或等于右边
<=： 左边是否小于或等于右边
==： 左右两边是否相等 (只比较结果,不判断类型) 1 = "1" true
===： 左右两边是否类型和值都相等 (判断相等 判断类型 也判断值)
!==： 左右两边是否不全等 (不相等 判断类型也判断值 )
比较结果为boolean类型，即只会得到true或false
// 比较后的结果 只有一个 布尔类型 true , false
console.log(3 > 10); // 打印什么结果 false
console.log(3 > 1); // true
console.log(3 < 10); // true
console.log(3 < 3); // false
console.log(3 <= 3); // 小于或者等于 3
// 判断是否相等 要用 两个 "=" 号
console.log(3 == 2); // false
// let num = 4;
// num = 5; // 只写一个等于号 赋值
// console.log(num == 5); // 两个等于号才是判断
// 判断 3 不等于 5
// console.log(3!=5); // != 不等于
// 拿数字和字符串比较
console.log(3 == '3'); // true 因为两个 == 只会判断值 而不会判断类型
console.log(3 === '3'); // flase 3个等于号 既要判断类型 也要判断值
console.log(3 === 3); // true
console.log(3 != 3); // false
console.log(3 != '3'); // false
console.log(3 !== '3'); // true
console.log('============');
// 比较 一般都是对数字做比较
// 对于字符串做比较 更多是判断两者是否相等
// console.log('A' === 'B');
// 如果拿字符串去 大小的比较，判断的标准是
// 先把字符串 拿去做 转数字
// 转完了数字之后， 才根据数字做大小比较！
console.log('A' > 'B'); // 65 > 66 了解即可 ！！！
console.log('问问' > '谢谢');
// NaN = A || NaN = B
console.log(NaN === NaN); // false 不能以为 两者代码一样就相等 （不是一个数字 ）
// js 处理小数 有问题 后面会补充 精度的问题！！
console.log(0.4 + 0.2 === 0.6); //false
// 比较运算符 会自己将 类型转换 去比较
// console.log(4 > '3'); //true
// 最好这样写,比较严谨
console.log(4 > Number('3'));
6 逻辑运算符
&& 名称:逻辑与 特点: 符号两边都为 true 结果才为 true (一假则假)
|| 名称:逻辑或 特点:符号两边有一个true 结果就为 true (一真则真)
! 名称:逻辑非 (取反) 特点:是 true 就变 false 是false就变true (是真就假,是假就真)
/*
有个数据 大于5 而且 小于 10
*/
let num = 6;
console.log(num > 5 && num < 10); // true
console.log(num > 5 && num < 4); // 一假则假 false
// 我有钱包 要不 等于 1块钱 要不就 等于 0
let money = 1;
// 一真则真
console.log(money === 1 || money === 0); // 只要满足了随便一个条件 那么这个钱包就是我的
let gender = true; // true 男生
console.log(gender); // true
console.log((!gender)); // 取反了 false
6-1 短路运算
短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
1 && 一假则假 && 左边为false (假) 右边就不再去执行
console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2);
示例: 左边成立了 右边才会去执行
rain=true rain && console.log('去玩');
2 || 只要 || 左边 成立了为true (真)，右边就不再去执行
console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);
示例: 左边不成立了 右边才会去执行
rain =false;
rain || console.log('去玩');
// 一假则假 && 左边为false 右边就不再去执行
console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2);
// 工作中常见的写法
// 如果今天还下雨 那我就去吃海鲜
// 不下雨 不去吃海鲜了
// let rain = false;
// 左边成立了 右边才会去执行
// rain && console.log('下雨 去吃海鲜');
// 逻辑或 一真则真
// 只要 || 左边 成立了为true，右边就不再去执行
console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);
// 工作中 常用的技巧
// 如果下雨，那么我就去玩了
let rain = false ;
rain || console.log('去玩');
// 两个短路运算 逻辑或 和 逻辑与
// 工作中的语法 逻辑与来说 满足了 就去执行
// 工作中的语法 逻辑或来说 不满足了 就去执行
条件语句
有表达式和语句
表达式 3+4 语句 alert() 弹出对话框
区别: 表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)
if
单分支
满足条件,去执行
if (条件){
满足条件要执行的代码
}
let score=prompt('请输入您的分数');
// if 单分支 如果用户输入大于700
// 就会执行一下代码
// 如果小于700,就不会执行
if (score>700) {
alert('恭喜您,被录取了')
}
双分支
if (条件){
满足条件要执行的代码
}else {
不满足条件就执行的代码
}
let score=+prompt('考试分数')
// if 双分支
// 满足条件就执行第一个
// 不满足条件,就执行第二个
if(score>700){
alert('蓝翔,欢迎你!')
}else {
alert('怀恨去北大!')
}
多分支
if ( 条件1 ){
满足 条件1 要执行的代码
}else if( 条件2 ){
满足 条件2 要执行的代码 //可以设置N个条件和执行代码
}else {
不满足以上条件就执行的代码
}
let day=+prompt('请输入今天星期几');
// 如果不满足以下 1~5 条件,就会去执行 else
if(day===1){
console.log('煲仔饭');
}else if(day===2){
console.log('马杀鸡');
}else if(day===3){
console.log('烤全羊');
}else if(day===4){
console.log('吃牢饭');
}else if(day===5){
console.log('吃肉');
// 可以有n个,只要输入相关的条件
}else {
// 以上都不满足条件,就执行
console.log('吃白饭');
}
思维导图:
三元表达式
其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式
一般用于取值
符号: ? 与 : 配合使用
语法: 条件 ? 满足条件执行的代码 : 不满足条件 执行的代码
// num3的取值是
// num1大于num2,就取num1,
// num2大于num1,就取num2,
let num1=+prompt('请输入一个数字')
num2=+prompt('请输入一个数字')
num3=( (num1>num2) ? num1 : num2)
console.log(num3);
易简计算器案例:
/*
1 获取用户的三个输入
前两个是数字
后一个是 运算符 "+" "-" "*" "/ "
2 判断当前的运算符是什么
if( 是➕ ) 执行 数字相加
else if ➖ 执行数字相减少
else if ✖ 执行数字想乘
else if ➗ 执行数字相除
*/
let num1 = +prompt('请输入第一个数字');
let num2 = +prompt('请输入第二个数字');
let operator = prompt('请输入 "+" "-" "*" "/ " 任意一种');
// 判断当前的操作符 是什么
if (operator === '+') {
console.log(num1 + num2);
} else if (operator === '-') {
console.log(num1 - num2);
} else if (operator === '*') {
console.log(num1 * num2);
} else if (operator === '/') {
console.log(num1 / num2);
}
断点调试
作用: 学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
1 在浏览器中,右键检查
2 选择控制台
3 选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
while循环
循环：重复执行某段代码 ,可以执行无数次
while 循环注意事项：
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。 所以，循环需要具备三要素：
1 变量起始值 :
let i = 1;
2 终止条件（没有终止条件，循环会一直执行，造成死循环）
while(i<=3){
document.write('我会循环3次')
i++
}
3 变量变化量（用自增或者自减）
while循环案列示范
1 循环案例(爱不爱我)
需求： 问是否 爱我 是就 不再问了 不是的就一直问
分析
一直问 prompt 一直被执行 肯定要放在 while循环里面
决定能否继续循环的条件是什么。。。
str !== "爱" 如果用户输入的不是 爱 ,就会一直弹窗询问
直到用户输入 爱 ,就结束弹窗
代码示例:
// 1 定义 初始变量
let str; // undefined
// 2 判断的条件 （满足什么条件 就继续 执行循环）
while (str !== '爱') {
// 弹窗
str = prompt('你爱不爱我?');
}
2 参考案例:(ATM易简)
/* 需求:
1 打开网页的时候出现一个弹窗
显示一下内容
1 存款
2 取款
3 查看余额
4 退出
2 用户就需要输入一些内容
1 用户输入"1"
会继续弹窗,会问上面1 的内容
2 用户输入"2"
会继续弹窗,会问上面1 的内容
3 用户输入"3"
会继续弹窗,会问上面1 的内容
4 用户输入"4"
退出弹窗 退出循环
定义一个变量,num 在不输入 4 的情况下一直循环,一直弹窗询问
再定义一个变量, money 数字为0
*/
let num;
money=0
// 定义一个变量,让他在不输入 4 的情况下一直循环,一直弹窗询问
while(num!==4){
num=+prompt(`请输入你的操作:
1.取款
2.存款
3.查看余额
4.退出
`);
if(num===1){
let num1=+prompt('请输入你的存款数量')
money+=num1
}else if(num===2){
let num2=+prompt('请输入你的存取款数量')
money-=num2
}else if(num===3){
alert(money)
}else if(num===4){
console.log('开始退出');
}
}
3 三角星案例:
/*
第一个循环 控制的 行数
现在需求
1 行数没有改变
2 列数 发生了变化！
要知道 改变列数 代码(5) index1<= 5
1 第一次循环 列数 ：1
2 第二次循环 列数 : 2
3 第三次循环 列数 : 3
4 发现 不能写死成 5 而是 换成一个变量
变量 可以实现 第一次循环 1 第二次循环 2
*/
for (let index = 1; index <= 5; index++) {
// 第二个循环中 判断条件 5 => index(第一层循环的变量值)
for (let index1 = 1; index1 <= index; index1++) {
document.write('⭐');
}
document.write('<br/>');
}
4 九九乘法表案例:
<style>
*{
padding: 0;
margin: 0;
}
span {
display: inline-block;
border: 1px solid #000;
padding: 0 10px;
line-height: 20px;
height: 20px;
width: 100px;
margin-bottom: 5px;
margin-right: 5px;
text-align: center;
}
</style>
</head>
<body>
<script>
for (let index1 = 1; index1 <=9; index1++) {
for (let index = 1; index <=index1; index++) {
num=index*index1
document.write(`<span>${index}*${index1} = ${num }</span>`)
}
document.write(`<br/>`)
}
</script>
03-JavaScript-for循环-数组
continue (会跳过本次循环,开始下一次循环)
设置指定的条件后,在执行到此处时,会跳过次循环,继续执行下一个循环
// 只显示 奇数 单数
for (let index = 1; index <= 10; index++) {
// 判断当前的index是不是奇数 是奇数就跳过不执行
if (index % 2 === 0) {
continue;
}
console.log(index);
}
break (退出循环) break 能用则用
在设置指定的条件后,循环到此处就会终止循环
for (let i = 1; i <10; i++) {
// 循环到7就停止,不在执行
if(i===7){
break
}
console.log(`第${i}个`);
}
思维导图:
for循环与嵌套
注意:
for循环 一般用于有循环次数的
while循环 无限次数循环的 如 爱不爱我 案例 就要用
for循环嵌套,一个循环里再套一个循环，一般用在for循环里
for (let index1 = 1; index1 <= 3; index1++) {
document.write(`第${index1}天<br/>`);
// 第一天要背5个单词
// 执行5次背单词的 开始
for (let index2 = 1; index2 <= 5; index2++) {
document.write(`记住第${index2}个单词<br/>`);
}
}
嵌套循环-参照案列:
用户输入N天背N个单词
// 4 和 9 要改成 用户的输入！！
// 4 表示天数
let day = +prompt('请输入天数');
// 9 表示单词个数
let num = +prompt('请输入背单词的个数');
for (let index1 = 1; index1 <= day; index1++) {
document.write(`第${index1}天<br/>`);
for (let index2 = 1; index2 <= num; index2++) {
document.write(`记住第${index2}个单词<br/>`);
}
}
数组
概念: 数组(Array)是一种可以按顺序保存数据的数据类型
使用场景: 一般是配合for循环来使用
数组里面可以放任意的数据类型,但是不建议. 一般都是放同一种类型
1 声明语法:
数组名 0 1 2 3 4 5 6 编号也叫索引或下标
let arr=['小明','小红','小黑','小黄','小绿','小刚,'小久']
arr[0] //小明
arr[3] //小黑
console.log(arr.length) // 长度为 7
计算机中的编号从0开始，所以小明的编号为0，小红编号为1，以此类推
在数组中，数据的编号也叫索引或下标
可以通过下标来读取数据
2 基本术语:
1 元素：数组中保存的每个数据都叫数组元素
2 下标：数组中数据的编号
3 长度：数组中数据的个数，通过数组的 length 属性获得
3 长度属性 (结合 等于号=)
数组的长度是动态的,随着数组的下标变动而变动
.length 长度属性
arr.length = 7 ;
4 增删与删除属性值 (用的时候肯定有括号 () )
| 属性值 | 数组名.属性值 | 作用 |
|---|---|---|
| push | arr.push (常用) | 在数组的未尾添加新的元素(会自己增加长度属性值) |
| unshift | arr.unshift | 在数组的开头添加新的元素(会自己增加长度属性值) |
| shift | arr.shift (常用) | 删除数组开头的第一个元素(会自己减少长度属性值) |
| pop | arr.pop (常用) | 删除数组未尾的第一个元素(会自己减少长度属性值) |
| splice | arr.splice (常用) | 指定下标来删除元素 (要删除的元素的下标,删除几个) |
| 拓展-应用 | arr[arr.length-1] | 可以直接获取数组的最后一个元素 |
| 拓展-应用 | arr[8]='元素' | 可以指定新增或者修改元素 |
| 拓展-应用 | arr.length=0 | 可以将数组快速删除全部元素 |
| 拓展-应用 | arr=[ ] | 可以将数组快速删除全部元素 |
5 数组-拓展:
1 获取数组的最后一个元素 arr[arr.length - 1] 常用的规则！！
arr[arr.length-1]
就可以直接打印出数组中最后一个元素
2 新增或者修改数组元素
1 如果 10这个位置已经有元素 那么 就是修改
2 如果 10这个位置没有元素 添加就可以了 最终数组的度变成 10+1
arr[10]='南瓜'
3 数组 可以存放任意类型的数据 可以这么做，但是不建议 我们建议 一个数组内的数据类型要统一！！
let arr = ['西瓜', 100, null, true, NaN, undefined, 80];
4 数组快速清空或者删除元素的方式
arr.length = 0
数组长度为 0
指定元素删除
let arr = ['西瓜', '香蕉', '麻瓜'];
// 现在想要删除 香蕉,麻瓜
// splice("想要删除的元素的下标","想要删除几个");
// 删除数组中的下标为1的元素，
// 从 1 的位置开始 想要删除几个
arr.splice(1, 2);
console.log(arr); // 西瓜
指定元素删除,也可以用于增加
// 指定位置来插入元素
// splice("想要删除的元素的下标","想要删除几个","在该下标位置添加元素");
// 在 1的位置，删除0个元素，增加一个红薯
// let arr = ['西瓜', '香蕉', '麻瓜'];
// ['西瓜', '红薯', '香蕉', '麻瓜'];
arr.splice(1, 0, '红薯');
console.log(arr);
思维导图:
数组的快键应用:
案例示范:
1 数组-取最大值与最小值案例:
<script>
// 求数组最小值也是相同 大于改小于即可
let arr=[2,6,1,77,52,25,7]
// 设置一个变量等于数组的第0个元素
let max=arr[0]
let min=arr[0]
for (let index = 0; index < arr.length; index++) {
// 如果当前数组的值大于 man
if(arr[index]>max){
// 就设置 man 等于 这个数组元素
max=arr[index]
}
// 如果当前数组的值小于 min
if(arr[index]<min){
// 就设置 min 等于 这个数组元素
min=arr[index]
}
}
console.log(max);
console.log(min);
</script
2 数组-求和和平均数案例:
// 数组
let arr = [2, 6, 1, 7, 4];
// 存放总的数据
let sum = 0;
// 循环
for (let index = 0; index < arr.length; index++) {
// 使用变量 来存放数组中的每一个数值
sum += arr[index];
}
console.log(sum); // 和 20
// 平均值 = 和 / 数组的长度
console.log(sum / arr.length);
3 数组-过滤应用案例:
// 取数组1里面大于 10 的放进数组2中
// 设2个数组,一个存放数字,
let arr1=[2,0,6,1,77,0,52,1,25,7]
// 一个存放过滤好的元素
arr2=[];
// 对第一个数组进行循环
for (let index = 0; index < arr1.length; index++) {
// 第一个数组中的元素,大于10的就被筛选进去
if(arr1[index]>=10){
// 把筛选好的元素,添加到新数组中
arr2.push(arr1[index])
}
}
console.log(arr2);
4 数组-动态柱生成图案列:
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 1000px;
height: 600px;
margin: 100px auto;
display: flex;
justify-content: space-around;
align-items: flex-end;
color:#333
}
li {
position: relative;
width: 100px;
background-color: blue;
}
/* li:nth-child(1){
height: 300px;
}
li:nth-child(2){
height: 440px;
}
li:nth-child(3){
height: 120px;
}
li:nth-child(4){
height: 210px;
} */
span {
position: absolute;
left: 50%;
top:-21px;
transform: translateX(-50%);
}
div {
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<script>
// 先声明ul的变量,然后再让li循环4次
let liHtml='<ul>'
//设一个数组为0,让用户输入元素进去再让li继承他的元素
let liHeight=[]
// 这里的循环是让用户输入数据,然后再添加到数组中
for (let index1 = 0; index1 <4; index1++) {
let num=+prompt(`请输入你第${index1}季度的数据`)
liHeight.push(num)
}
// 这里的循环的是让 li和里面的标签出现4个 和CSS样式
for (let index = 0; index < 4; index++) {
// 在li 里面设CSS样式,继承数组中的元素
// 取值数组的元素 0~3 所以取 liHeight[index]
liHtml+=(`<li style="height:${liHeight[index]}px;">
<span>${liHeight[index]}</span>
<div>第${index+1}季度</div>
</li>`)
}
liHtml+='</ul>'
document.write(liHtml)
</script>
</body>
04-JavaScript-函数-作用域-作用域链
函数:
function
是被设计为执行特定任务的代码块
是专门执行特定任务的代码片段
说明:
函数可以把 具有相同 或 相似逻辑 的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势 是有利于 精简代码方便复用。
函数的作用
可以 简化代码
let arr1 = [1, 3, 2, 66, 33, 22];
let arr2 = [1, 3, 2, 663, 33, 22];
let arr3 = [1, 3, 2, 665, 33, 22];
// 调用函数
let max1 = getMax(arr1); //66
let max2 = getMax(arr2); //663
let max3 = getMax(arr3); //665
console.log(max1, max2, max3);
// 声明函数
//取数组的最大值
function getMax(arr) {
let max = arr[0];
for (let index = 0; index < arr.length; index++) {
if (arr[index] > max) {
max = arr[index];
}
}
return max;
}
方便复用
// 调用函数
let max1 = getMax(arr1); //66
let max2 = getMax(arr2); //663
let max3 = getMax(arr3); //665
console.log(max1, max2, max3);
封装程序功能
function getMax(arr) {
let max = arr[0];
for (let index = 0; index < arr.length; index++) {
if (arr[index] > max) {
max = arr[index];
}
}
return max;
}
函数使用
先声明语法
// 函数名
function getMax(){
//函数体
document.write('你好')
}
函数名命名规范
和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 |
| has | 判断是否含义某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
目标：掌握函数语法，把代码封装起来
注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数
function sayHi(){
document.write(`你真好!<br/>`)
document.write(`你真棒!<br/>`)
document.write(`你真潮巴!<br/>`)
}
//调用两次,就已经输出2次了 上面已经打印输出
sayHi();
sayHi();
我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用
函数体:
函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才 会被执行。函数的功能代码都要写在函数体当中。
函数不调用自己不执行
调用方式: 函数名()
随时调用，随时执行，可重复调用
function sayHi(){
//里面的代码就是函数体
document.write(`你真好!<br/>`)
document.write(`你真棒!<br/>`)
document.write(`你真潮巴!<br/>`)
}
//调用两次,就已经输出2次了 上面已经打印输出
sayHi();
sayHi();
函数传参(形参,实参)
函数的声明与调用
参数列表
传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开
function 函数名(参数列表){
函数体
}
单个参数
function getMax(num){
document.write(num*num)
}
多个参数
function getMax(num1,num2){
document.write(num1+num2)
}
1 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
2 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
3 形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
4 开发中尽量保持形参和实参个数一致
5 我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
6 函数的形参和实参可以有多个
注意: 形参和实参中间要用 逗号 隔开
函数的返回值
定义函数的时候 可以决定函数拥有返回值
return 100; 就是函数返回值
如果函数内部 没有写return 的话 默认就是返回了 undefined
function getMax() {
// 100 就是 函数在执行完毕的时候 会返回的数据
return 100;
}
let num1 = getMax(); // num1 =100
console.log(num1);
用return 返回数据
/*
1 不能同时执行多次return 第一个return生效
2 函数内部 如果写了return ，那么它下面的代码就不会执行！！
3 如果一个函数 没有写return 相当于 写了 return undefined
*/
function getMax() {
return 20; //return 20 就是他的返回值
// return undefined;
}
let num = getMax();
console.log(num); //20
注意细节:
1 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
2 函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
3 return会立即结束当前函数
4 函数可以没有 return，这种情况函数默认返回值为 undefined
作用域
作用域概述 :
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这 个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
1 全局作用域
作用于所有代码执行的 环境(整个 script 标签 内部)或者一个独立的 js 文件
// script标签内的运行环境就是全局作用域
let num = 100; // 全局作用域
function getMax() {
// 这个区域内就不属于全局作用域
// 局部作用域 或者 也叫做 函数作用域
let num2 = 200;
}
for (let index = 0; index < 4; index++) {
// 块级作用域
}
while (true) {
// 块级作用域
}
if (true) {
// 块级作用域
}
2 局部作用域(函数作用域)
作用于函数内的代码环 境，就是局部作用域。 因为跟函数有关系，所 以也称为函数作用域。
3 块级作用域 { } ;
块作用域由 { } 包括,if语 句和for语句里面的{ }等
变量的作用域 1~3
1 全局变量 (全局有效)
函数外部 let 的变量
全局 变量 在任何区域都 可以访问和修改
// 直接写在全局作用域下的变量 = 全局变量 在任意的地方来访问
let num = 100; // 全局变量 在任何地方都可以访问
function getMax() {
console.log('函数 访问全局变量', num);
}
getMax();
for (let index = 0; index < 2; index++) {
console.log('for循环内 块级作用域 访问全局变量', num);
}
if(true){
console.log("if语句 也 可以访问全局变量",num);
}
2 局部变量 (局部有效)
函数内部 let 的变量
作用于函数内的代码环 境，就是局部作用域。 因为跟函数有关系，所 以也称为函数作用域
局部变量只能在当前函 数内部访问和修改
// 局部变量
// 如果是在函数内部定义的变量 就叫做局部变量
// 局部变量 不能在 它的大括号之外使用的，否则就会报错！！
let msg = 10000; // 全局变量
// 局部变量 函数内部 声明的变量
function getMax() {
// 声明一个数字
let num = 200; // 局部变量
console.log(num); // 200
}
// 函数调用
getMax();
// 局部变量 不能在 超出它的大括号来使用
console.log(num); //会报错
3 块级变量 ( { } 类有效)
{ } 内部的 let 的变量
let定义的变量,
.let定义的变量,只能在 块作用域里访问,不能跨 块访问,也不能跨函数访 问
// 块级变量 就是我们在块级作用域内 定义的变量
// 块级变量 类似局部变量，也是超出了自身的大括号 不能使用
for (let index = 0; index < 2; index++) {
// num 块级变量
let num = 100;
console.log(num); // 100
}
console.log(num);// 使用块级变量 出错！！
变量有一个坑， 特殊情况：
如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐 但是有一种情况，函数内部的形参可以看做是局部变量。
function getMax(){
num=100; //这个变量在函数体内没有声名,直接赋值,所以可以当做全局变量看,但不推荐
}
console.log(num) //100
变量访问原则-作用域链
只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访 问，就称作作用域链
就近原则 判断是要根据 函数的定义 来判断 而不是函数的调用
// 判断当前变量 输出是什么
// 就近原则 判断是要根据 函数的定义 来判断 而不是函数的调用
// 函数的定义 代码位置来判断 100 这个！！
let num = 100;
function func1() {
let num = 200;
// 函数的调用
fun2();
}
// 函数的定义-声明
function fun2() {
//当自己没有值,就会取父级的值(100),而不会去取与他并级的 func1的值(200)
console.log(num);
}
func1(); //100
匿名函数
1 具名函数
1.声明 : function fn() {}
2.调用: fn()
1.将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
2.语法: 函数表达式
let fn = function () {
// 函数体
}
调用
fn() ; //函数名()
2.匿名函数: function() {}
// 匿名函数 = function () {}; 匿名函数 了解即可
// let func2 = function () {}; 叫做 函数表达式
// 表达式 可以表示结果的一段代码 函数表达式 了解
let func2 = function () {
console.log("123");
};
// 调用
func2(); // '123'
3 自执行函数
1 作用:
防变量污染
执行一次性的任务
2 特点:
在定义函数的同时也执行函数
( ) ( ) 在第一个括号里面放自执行函数体
// // 自执行函数 ()() 在第一个括号里面放自执行函数体
(function () {
let msg = 123;
// 设置 页面的标题 = 月薪过万
document.title = '月薪过万';
// 设置 页面的背景颜色 = 黄色
document.body.style.backgroundColor = 'yellow';
})();
console.log(msg);
案例示范:
设置时间
<style>
div {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 700px;
height: 80px;
background-color: red;
}
span {
display: flex;
justify-content: center;
font: 1px;
font-size: 30px;
color: aliceblue;
}
</style>
</head>
<body>
<script>
function getTime(){
let num=+prompt('请输入时间')
// 年
let year=parseInt(num/60/60/24/30/12)
year=(year<10 ? '0'+year : year)
// 月
let moon=parseInt(num/60/60/24%12)
moon=(moon<10 ? '0'+moon : moon)
// 天
let day=parseInt(num/60/60/24%30)
day=(day<10 ? '0'+day : day)
// 时
let h= parseInt(num/60/60%24)
h=(h<10 ?'0'+h : h)
// 分
let m=parseInt(num/60%60)
m=(m<10 ? '0'+m : m)
// 秒
let s=parseInt(num%60)
s=(s<10 ? '0'+s : s)
document.write(`
<div>
<span>${year}年,</span>
<span>${moon}月,</span>
<span>${day}天,</span>
<span>${h}时,</span>
<span>${m}分,</span>
<span>${s}秒</span>
</div>
`)
}
getTime()
</script>
</body>
05-JavaScript-对象-Math内置对象
1对象是什么?
1 对象(object):JavaScript 里的一种数据类型
2 可以理解为是一种无序的数据集合
3 用来描述某个事物，例如描述一个人
1人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
2 如果用多个变量保存则比较散，用对象比较统一
比如描述 班主任 信息：
1 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
2 动态行为 (点名, 唱, 跳, rap) => 使用函数表示
2 对象使用
对象声明语法
对象名
let person = {
属性名 : 属性值 ,
方法名 : 函数
}
对象是有 属性 和 方法 组成的
属性:信息或特征(名词) . 比如 手机尺寸、颜色、重量等…
方法: 功能或叫行为(动词). 比如 手机打电话、发短信、玩游戏,敲代码…
对象的属性
数据描述性的信息称为属性,如人的姓名,身高,年龄,性别等,一般是名词性的
// 声明一个对象,对象里有属性和方法
// 属性:特征,基本信息
// 方法:行为 ,就是一个 函数 函数要是用 函数()
let person={
// 属性:特征,基本信息 多个属性要以 逗号 隔开
uname:'小明',
age:25,
sex:'男',
hobby:'睡觉'
}
// 打印数据类型
console.log(typeof person);
// 打印对象属性
console.log(person);
注意:
1 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔
2 多个属性之间使用英文 , 分隔
3 属性就是依附在对象上的变量（外面是变量，对象内是属性）
4 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
属性访问
声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。
简单理解就是获得对象里面的属性值
属性 . 的访问
let person={
name:'小明'
}
console.log(person.name)//小明
属性 [ ] 的访问
let person={
name:'小明'
}
console.log(person['name'])//小明
**注意:**如果打印了对象里面没有的属性,那么就会打印出 undefined
// 如果打印了对象里面没有的属性,那么就会打印出 undefined
console.log(goods.aaaa); // undefined
对象中的方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
let person = {
name: 'andy',
sayHi: function (msg) {
document.write(msg);
return '来自于 person的问候';
},
};
// 方法 其实就是一个函数
// 函数 是接收参数
// 函数 有返回值
// 函数的使用 函数()
person.sayHi('大家好 <br/>'); // 页面上会出现 “你好” 1
person.sayHi(' hello <br/>'); // 页面上会出现 “你好” 1
let result = person.sayHi(' ');
console.log("===========");
console.log(result);// 来自于 person的问候 就会拿到函数的返回值
**注意:**如果使用函数的返回值,
声明一个变量 等于 函数调用 ( ' ' ), 里面必须要加 引号 不然会报错
let person = {
sayHi: function () {
return '来自于 person的问候';
},
};
let result = person.sayHi(' ');
console.log(result);// 来自于 person的问候 就会拿到函数的返回值
1 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2 多个属性之间使用英文 , 分隔
3 方法是依附在对象中的函数
4 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象中的方法访问
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。
注意： 千万别忘了给方法名后面加小括号
let person = {
sayHi:function(){
document.write('你好')
}
}
//对象名 方法名
person.sayHi()
对象方法的使用和函数一致
对象方法访问输入容易出错的小问题
1 没加冒号 console.log(person[username]); // 中括号里 代码没有加字符串 表示一个变量
2 没这个属性,全局也没这个变量 console.log(person[color]); // 中括号里 代码没有加字符串 表示一个变量 全局域没有这个变量的话,就会报错
3 对象中没设这个属性 console.log(person.sdfdfdfd); // undefined 对象中没这个属性,就会出 undefined
let username = 'color';
let person = {
username: '海贼王',
color: 'yellow',
};
// 访问它
console.log(person.username); // 固定用户
console.log(person['username']); //
// // person['color'];
console.log(person[username]); // 中括号里 代码没有加字符串 表示一个变量
// console.log(person[color]); // 中括号里 代码没有加字符串 表示一个变量 全局域没有这个变量的话,就会报错
// console.log(person[color]); // color是一个变量 没有这个变量 报错
// console.log(person.sdfdfdfd); // undefined
操作对象 - 增 删 改 查 语法
增加属性与修改属性:
1 增加属性和修改属性都是同样的写法
2 如果该属性对象中没有，表示新增
3 如果该属性对象中已经存在，表示修改
let person = {
// username: '程序猿',
};
// 增加 一个新的属性
// person.username="普通人";
// 修改
person.username = '普通人';
// 增加属性和修改属性都是同样的写法
// 如果该属性对象中没有，表示新增
// 如果该属性对象中已经存在，表示修改
// person.username = '普通人';
console.log(person);
增加方法:
也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活
let person = {};
// 新增一个方法 匿名函数 固定写法
person.sayHi = function () {
document.write('这个是我们新增的sayHi 方法');
};
person.sayHi(); // 调用方法
注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。
删除属性: delete
delete person.username;
给属性值前面加 delete 就会删除这个属性,在打印就会报 undefined
// 声明一个对象
let person={
username:"海贼王"
};
// 不想看了 给删除掉
delete person.username; // 删除对象中的 username属性
console.log(person.username); // undefined
3 遍历变量 for in
能够遍历输出对象里面的元素
1 数组和对象 都可以遍历
2 数组的遍历 使用 for循环
3 对象的遍历 使用 forin
4 对对象遍历的时候 可以直接获取到 对象的属性名
5 根据对象的属性名获取对象的熟悉值 person[k]
一定记住： k 是获得对象的属性名， 对象名 [ k ] 是获得 属性值
// 创建一个对象
let person = {
age: 18,
username: '普通人',
height: 180,
};
// 遍历对象 forin
for (let k in person) {
// console.log(k);
// console.log(person.k); // 找对象中 属性名 "k"
// console.log(person['k']); // 找对象中 属性名 "k"
// k 表示变量 k = "username"
// console.log(person[k]);
// person["username"] // k 表示变量 k = "username"
console.log(`属性名:${k} 属性值${person[k]} `);
}
4 Math 内置对象
Math js内置的数学对象 里面会包含有关于数学操作的相对 方法或者属性
| 属性 | 含义 | 打印 公式 | 结果 |
|---|---|---|---|
| random() | 返回一个随机数 包含0 不包含1 | console.log(Math.random()); | 随机数0~1 |
| Math.ceil() | 向上取整 | console.log(Math.ceil(0.1)); | 1 |
| Math.floor() | 下取整 | console.log(Math.floor(0.9)); | 0 |
| Math.round() | 四舍五入 | console.log(Math.round(0.5)); | 1 |
| Math.max() | 求最大值 | console.log(Math.max(1,2,3,4,5,6,77,4)) | 77 |
| Math.min() | 最小值 | console.log(Math.min(1,2,3,4,5,6,77,4)) | 1 |
| Math.pow() | 幂运算 对某个数字 平方 | console.log(Math.pow(2, 2)); | 4 |
| Math.pow() | 幂运算 对某个数字 立方 | console.log(Math.pow(2, 3)); | 9 |
| Math.abs() | 绝对值 只能给负数绝对 | console.log(Math.abs(-2)); | 2 |
5 基本数据类型和引用数据类型
基本类型
Number 数字类型, toString 字符串类型, Boolean布尔类型, undefined 未赋值未定义空类型, null 已赋值 未定义空类型,
基本类型会存放在 栈 空间 适合存放具体具体大小的数据， 这一些数据一般变化不会太大
注意:
基本类型
如果只是复制属性 给其他变量 ,那么其他变量改属性值 也不会影响原变量属性值
只要是不更改 原变量属性值 ,那么他就是他原本的 值
引用类型
数组 [ ] , 函数 function (){} , 对象 {}
引用类型会存放在 堆 空间 适合存放可能会经常改变大小的数据，这一些数据变化比较大
注意:
引用类型
他们的值的把地址存放在 栈 空间 ,而真正存放数据的是在 堆 空间
如果创建一个新的变量 = 旧的的数据 本质只是把旧的数据的地址复制了一份给新的数据 新旧两个数据地址指向是同一个 堆 空间中的数据 修改了新数据，l旧数据也会被修改
let num = 100; // 基本数据类型 放心的是复制吧 新旧两个数据 互不影响
let num2 = num;
num2 = 10000;
console.log(num); // 100 互不影响
let person={username:"悟空"};// 引用数据类型
let person2=person; // 引用地址的传递 复制而已 新旧数据 本质是一样的 会收到影响
person2.username="八戒";
console.log(person);// 也是八戒 新旧数据 本质是一样的
6 补充-不常用 (switch-case)-(do-while)
switch-case 条件语句
注意:只能用于 条件===什么 才执行,其他条件都不行
1 switch-case 功能和 if else-if else 一模一样
2 switch-case-break-defaul
① switch(day) 想要对 day做判断
② case 1 ： day ===1 满足条件
③ break 打断当前的case
④ default 如果以上的 case 都不满足，最终 执行default里面的代码
let day = 1;
switch (day) { // 你要判断谁
case 1: // if (day === 1)
// 执行 1 的业务逻辑
console.log('白饭');
case 2:
console.log("喝粥");
break
case 3:
console.log("海鲜");
break
default:
// 以上都不满足 就执行代码
console.log("不吃啦");
}
do-while (先执行，再判断条件)
1 先执行一次 do里面的代码，然后再去执行while里面的程序
2 哪怕 while里面的条件不成立 也会先执行一次do中的代码
/*
1 循环 3种写法
1 for 循环
2 while 循环
3 do while 循环 很少
1 先执行一次 do里面的代码，然后再去执行while里面的程序
2 哪怕 while里面的条件不成立 也会先执行一次do中的代码
*/
let index = 0;
do {
console.log('执行了do 里面的代码',index);
index++
} while (false);
案例示范:
1 学生信息收集表
数组与对象总和使用
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
th {
background-color: rgba(102, 102, 102, 0.466);
}
</style>
</head>
<body>
<script>
let students = [
{name:'小明',age:'18',gender:'男',hometown:'河北省'},
{name:'小红',age:'19',gender:'女',hometown:'河南省'},
{name:'小刚',age:'17',gender:'男',hometown:'山西省'},
{name:'小丽',age:'18',gender:'女',hometown:'山东省'},
]
let tableHtml = ` <table border='1'>
<caption>学生列表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
</thead>
<tbody>`;
//遍历生成tr 根据对象 students里面数组的长度来生 遍历生成tr
for (let index = 0; index < students.length; index++) {
//开头
/* tableHtml += `<tr><td>${index+1}</td>`;
<tr>
<td> ${0+1} </td>
<td> ${1+1} </td>
<td> ${2+1} </td>
<td> ${3+1} </td>
*/
tableHtml += `<tr><td>${index+1}</td>`;
// 对 对象 做 forin遍历 students[index]
// k 是获得对象的属性名， 对象名[k] 是获得 属性值
// (name:'小明',age:'18',gender:'男',hometown:'河北省')
//[k]:属性名 name age gender hometown
//students[index][k]:属性值 小明 18 男 河北省
for (let k in students[index]) {
//定义一个变量=对象[数组] person = students[index]
// let person = students[index]; // 数组中的每一个对象
tableHtml += `<td>${person[k]}</td>`;
/*
遍历结果
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
*/
}
//结尾
// </tr> 对应57行的开头<tr>完成一次循环
tableHtml += `</tr>`
}
// 对应table 表格的开头
tableHtml += ` </tbody> </table>`;
document.write(tableHtml);
console.log(students);
2 随机显示姓名-不重复出现
<script>
// 数组
let arr = [ '赵云','黄忠','关羽','张飞','马超','刘备','曹操','刘婵'];
function getRandom(min, max) {
// 区间的 规律
return Math.round(Math.random() * (max - min) + min);
}
// 获取一次 随机数
// let index = getRandom(0, arr.length - 1);
// console.log(arr[index]);
// // 删除数组中的某一个元素
// arr.splice(index,1);
// 死循环 只要你数组长度>0 我就执行重复的代码
while (arr.length > 0) {
let index = getRandom(0, arr.length - 1);
console.log(arr[index]);
arr.splice(index, 1);// 根据元素的下标来删除对应的那个数据 数组中少了一个已经显示过的数据 再次随机输出肯定不会重复
}
</script>
3 猜数字-不对就一直执行案例
<script>
/*
1 打开页面的时候 随机生成1-10的数字 （昨天讲解过 总结公式或者规律）
num1
2 开启循环
1 弹出输入框 来接收用户的输入 num2
2 判断num1和num2之间的关系
3 。。。
如果 大于
如果 小于
如果 等于 循环结束 break
*/
// let num1=Math.round( Math.random*(最大值-最小值)+最小值 )
// let num1=Math.round( Math.random*(10-1)+1 )
// 这一种方法可以实现 使用这种方法来完成案例
// 案例都完成了， 还没有其他的方式来实现区间
let num1 = Math.round(Math.random() * 9 + 1);// 计算区间的做法不唯一
// 死循环
while (true) {
let num2 = +prompt('请输入你要猜测的数字');
if (num2 > num1) {
alert('你猜大啦');
} else if (num2 < num1) {
alert('你猜小啦');
} else {
alert('你猜对了' + num2);
break; // 终止while循环
}
}
</script>
4 学成在线页面渲染案例
利用for循环 把里面 重复的 li 标签 以及 内容打印出来,而不用自己去更换
<!--
1 引入style.css
2 引入 data.js
3 根据data.js中的data数组 来遍历生成代码
最终让网页显示出来 data数组的数据
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- <div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<li>
<img src="images/course01.png" alt="" />
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</li>
</ul>
</div>
</div> -->
<script src="./data/data.js"></script>
<script>
// 声明一个变量,等于这个标签样式与结构
// 开头
let html=`
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
`
// 中间遍历重复内容
for (let index = 0; index < data.length; index++) {
html+=`
<li>
<img src="${data[index].src}" alt="" />
<h4>
${data[index].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[index].num}</span>人在学习
</div>
</li>
`
}
// 结尾
html+=`
</ul>
</div>
</div> `
// 打印在网页中
document.write(html)
</script>
</body>
</html>
