JavaScript基础语法部分-黑马跟课笔记
一、Javascript介绍
1.JavaScript是什么？
1.是什么？ 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
2.作用（做什么？）
网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）
3.组成：Javascript 遵守 ECMAScript语法规范 ，Web APIs 包括 Dom 和 Bom
Dom:操作文档，比如对页面元素进行移动、大小、添加删除等操作
Bom：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等
2.书写位置
1.内部JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在</body>上面
拓展：alert('你好,js')页面弹出警告对话框
<body>
<script>
alert('你好，js');
</script>
</body>2.外部JS
代码写在以.js结尾的文件里
语法：通过script标签，引入html页面中
<script src="xxx.js"></script>script标签中间无需写代码，否则会被忽略
3.内联js
代码写在标签内部
语法：注意：此处作为了解即可，但是后面vue框架会用这种模式
<body>
<button onclick="alert('逗你玩~~~')">点击我</button>
</body>3.怎么写JS
单行注释：//
块注释：/* */ shift + alt +a
结束符：分号； 但可写可不写 都不写最好，简单，一定要统一
4.输入输出语法
输出语法：
document.write('输出的内容')
document.write('<h1>内容</h1>') //也可以输出标签
alert('要出的内容') //页面弹出警告对话框
console.log('控制台打印') //控制台输出语法，程序员调试使用输入语法：
prompt('请输入内容') //输入语句作用：显示一个对话框，对话框中包含一条文字消息，用来提示用户输入内容
5.代码执行顺序：
按html文档流顺序执行
alert() 和 prompt() 它们会跳过页面渲染先被执行
6.字面量
目标：能说出什么是字面量
在计算机科学中，字面量（literal)是计算机中描述的事/物
比如：
我们工资是：1000 此时 1000 就是字面量
'黑马程序员' 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量 等等
二、变量
1.变量是什么
问题1：用户输入的数据我们如何存储起来？答案：变量
变量是计算机存储数据的“容器”
变量可以让计算机变得有记忆
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器，可以理解为是一个个用来装东西的纸箱子
2.变量基本使用
1.变量的声明
创建变量或者声明变量
let 变量名声明变量由两部分构成：关键字、变量名（标识）
let就是关键字，所谓关键字是系统提供的专门用来声明变量的词语
2.变量赋值
定义了一个变量后，就能初始化它，为它赋值，在变量名之后跟上一个'=',然后是 数值
let age
age = 18
alert(age)3.更新变量
变量赋值后，可以通过简单的给它一个不同的值来更新它
let age = 18
age = 19也就是二次赋值
4.声明多个变量
let num,name num = 20 uname = '张三'5.变量案例
1.需求：
浏览器中弹出对话框：请输入姓名， 页面中输出：刚才输入的姓名
//输入姓名，并存到一个变量里
let name = prompt("请输入姓名：")
//输出刚才输入的姓名
alert("刚才您输入的姓名是："+name)2.需求：
有2个变量：num1里放的是10，num2里放的是20
最后变为num1里放的是20，num2里放的是10
目的：
1.练习变量的使用
2.为了后面冒泡排序做准备
let num1 = 10, num2= 20
let a = num1
num1 = num2
num2 = a中间的临时变量会自动被销毁
3.变量本质
内存：计算机中存储数据的地方，是一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间
4.变量命名规则与规范
规则：必须遵守，不遵守会报错
规范：建议，不遵守不会报错，但不符合业内共识
1.规则：
不能用关键字：let\var\if\for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如Age和age不同变量
2.规范：
起名要有意义
小驼峰命名法：userName，第一个单词首字母小写，后面每个单词首字母大写
let 是 优化升级版的 var
5.数组
Array 数组，是一种将一组数据存储在单个变量名下的优雅方式
1.声明
let 数组名 = [数据1，数据2，...]数组是按顺序保存，所以每个数据都有自己的编号
从0开始编号
数组中，数据的编号也叫索引或下标
2.数组取值案例
定义一个数组，里面存放星期一到星期日，在控制台输出星期日
let day = ['星期一','星期二','星期三','
星期四','星期五','星期六','星期日']
console.log(day[6])3.术语
元素：数组中保存的每个数据都是数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得
let names = ['小明','小红','小刚']
console.log(names[0]) // 小明
console.log(names.length) // 3三、常量
基本使用
概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
命名规范：和变量一致
常量使用：
// 声明一个常量
const G = 9.8
// 输出这个常量
console.log(G)注意：常量不允许重新赋值，声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const
四、数据类型
1.数据类型
数据分类的目的：
1.更加充分和高效地利用内存
2.更加方便程序员的使用数据
JS数据类型整体分为两大类：
基本数据类型和引用数据类型
基本数据类型：
| 关键字 | 类型 |
|---|---|
| number | 数字型 |
| string | 字符串型 |
| boolean | 布尔型 |
| underfined | 未定义型 |
| null | 空类型 |
引用数据类型：object对象
2.细分数据类型
1.数字类型Number
数学中的数字，可以是整数、小数、正数、负数
let age = 18
let price = 88.99javascript中 正数、负数、小数统一为数字类型
JS是弱数据类型，变量到底属于哪种类型，只用赋值之后，我们才能确定
Java\C语言是强数据类型，例如int a=3 必须是整数
数字运算符也叫算数运算符，主要包括加减乘除取余
| 符号 | 含义 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 求商 |
| % | 取模（取余数） |
算数运算符的优先级顺序
1.优先级越高越先被执行，优先级相同时以书写顺序从左向右执行
2.乘除取余优先级相同
3.加减优先级相同
4.乘除取余优先级大于加减
5.使用()可以提升优先级
总结：先乘除后加减，有括号先算括号里面的
计算圆的面积
需求：对话框中输入圆的半径，算出圆的面积并显示到页面
分析：
1.面积的数学公式：π*r²
2.转换为JavaScript写法：变量* r * r
const PI = 3.14
let r = prompt("输入圆的半径：")
console.log(PI*r*r)NaN代表一个计算错误
它是一个不正确的或者一个未定义的数学操作所得到的结果
console.log('老师'-2)// NaNNaN是粘性的，任何对NaN的操作都会返回NaN
console.log(NaN + 2) // NaN2.字符串类型String
通过单引号，双引号或反引号包裹的数据都叫字符串，单引号和双引号本质上没有区别，推荐使用单引号
注意事项
1.无论单引号还是双引号必须成对使用
2.单引号、双引号可以互相嵌套，但是不可自己嵌套自己（口诀：外双内单，或者外单内双）
3.必要时可以使用转义符\，输出单引号或双引号
字符串拼接：
加号运算符可以实现字符串拼接
document.write('我叫'+'张三')
let uname = '张三'
let song = '之歌'
document(uname + song)模版字符串
使用场景：拼接字符串和常量
语法：反引号``英文输入模式下按键盘的tab键上方那个键（1左边那个键）
内容拼接变量时，用${}包住变量
let age=18
document.write(`我今年${age}岁了`)页面输出用户信息案例
需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了
let name = prompt('请输入名字：')
let age = prompt('请输入年龄：')
document.write(`大家好，我叫${name}，今年${age}岁了`)3.布尔类型boolean
true false
let isCool = true
console.log(isCool)4.未定义类型（undefined)
未定义是比较特殊的类型，只有一个值undefined
什么情况出现未定义类型
只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少[直接]为某个变量赋值为undefined
let num
console.log(num) //undefined工作中的使用场景
我们开发中经常声明一个变量，等待传送过来的数据
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来
5.null 空类型
let obj= null
undefined.log(obj)undefined与null的区别
undefined 表示没有赋值，null表示赋值了，但内容为空
计算有区别：undefined+1=NaN null+1 = 1
null开发中的使用场景
把null暂时作为变量的值，将来创建好对象再替换null
3.检测数据类型
语法：typeof x
let num
document.write(typeof num)4.类型转换
1.为什么需要类型转换？
JS是弱数据类型，JS也不知道变量到底属于哪种数据类型，只有赋值了才清楚
坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单地进行加法运算
例如：
console.log('10000'+'2000') // '100002000'正确的是要把10000和2000 字符串转换为数字类型Number然后再进行加法运算
2.隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
规则：
加号两边只要有一个是字符串，都会把另外一个转成字符串
除了加号以外的算术运算符，都会把数据转成数字类型
缺点
转换类型不明确，靠经验才能总结
小技巧
加号作为正号解析可以转换成数字型
document.log(+'123')任何数据和字符串相加结果都是字符串
3.显示转换
过度依赖系统内部的隐式转换是不严谨的，因为隐式转换都是靠经验
语法：
//转换为数字类型number
console.log(Number(数据))
//只保留整数
console.log(parseInt('12.34px')) // 12
//可以保留小数
console.log(parseFloat('12.34px')) // 12.34在Number(数据)的应用时，如果字符串内容里有非数字，转换失败时，结果为NaN
NaN也是number类型的数据，代表非数字
parseInt/parseFloat函数只有数字在 开头才能提取
4.练习
输入两个数，计算两者的和，打印在页面里
let num1 = prompt("请输入第一个数")
let num2 = prompt('请输入第二个数')
document.write("您计算的结果是"+(Number(num1)+Number(num2)))方法2：
let num1 = +prompt("请输入第一个数")
let num2 = +prompt("请输入第二个数")
document.write("您计算的结果是${num1+num2}")5.用户订单信息案例
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-align: center;
}
table,th,td {
border: 1px solid black;
padding: 20px 30px;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>订单确认</h1>
<script>
let name = prompt('请输入商品名称')
let price = prompt('请输入商品价格')
let count = prompt('请输入商品数量')
let place = prompt('请输入收货地址')
document.write(`<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>${name}</td>
<td>${price}</td>
<td>${count}</td>
<td>${price*count}</td>
<td>${place}</td>
</tr>
</table>`)
</script>
</body>
</html>五、运算符
1.赋值运算符
对变量进行赋值操作的运算符
= 将等号右边的值赋予给左边，要求左边必须是一个容器
+= -= *= /= %=
使用这些运算符可以在对变量赋值进行快速操作
2.一元运算符
运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
let num = 10 + 20 //二元运算符一元运算符：正负号
自增 ++ （可以前置也可以后置）
自减 -- （可以前置也可以后置）
let i = 1
console.log(i++ + ++i + i) // 7 3.比较运算符
| 符号 | 意义 |
|---|---|
| > | 略 |
| < | |
| >= | |
| <= | |
| == | 左右两边值是否相等 |
| === | 左右两边是否类型和值都相等 |
| !== | 左右两边是否不全等 |
4.逻辑运算符
| 符号 | 含义 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
判断一个数是4的倍数，且不是100的倍数
用户输入一个，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true,否则弹出false
let num = +prompt("请输入一个数")
alert(num%4==0 && num%100!=0)5.运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | . () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算数运算符 | 先*/% 后+- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
六、语句
1.表达式和语句
表达式：可以被求值的代码，JS引擎会将其计算出一个结果
x = 7
3+4
num++语句：语句是一段可以执行的代码
比如：prompt()可以弹出一个输入框，还有if语句，for循环语句等
区别：
因为表达式可被求值，所以可以写在赋值语句的右侧
语句不一定有值，所以比如alert() for 和 break 等语句就不能被赋值
2.分支语句
程序三大流程控制语句
1.顺序结构：从上往下执行
2.分支结构：根据条件选择执行代码
3.循环结构：某段代码被重复执行
a.if分支语句
三种使用： 单分支 双分支 多分支
单分支语法
if (条件){
满足条件要执行的代码
}括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
除了 '' 所有的字符串都为真 除了0所有数字都为真
如果大括号只有一个语句，大括号可以省略，但不提倡
案例
1.用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员
let score = +prompt("请输入你的高考成绩")
if (score > 700){
alert("恭喜考入山东科技大学")
}双分支语法
if (条件){
代码1
}else {
代码2
}案例
用户输入，用户名：pink,密码：123456 ，则提示登陆成功，否则提示登录失败
let id = prompt('请输入用户名')
let code = prompt('请输入密码')
if(id == 'pink' && code =='123456'){
alert('登陆成功')
}else{
alert('账号或密码错误')
}判断闰年
让用户输入年份，判断这一年是闰年还是平年，并弹出警示框
let year = +prompt("请输入年份")
if ((year %4 ==0 && year%100!=0)|| year %400 == 0 ){
alert(`${year}年是闰年`)
}else{
alert(`${year}年是平年`)
}多分支if语句
if (条件1){
代码1
}else if (条件2){
代码2
}else if (条件3){
代码3
}else{
代码n
}案例
根据输入不同的成绩，反馈不同的评价
90以上为优秀，70-90为良好，60-70为及格，60以下为不及格
let score = +prompt("请输入你的成绩")
if(score>90){
alert("优秀")
}else if(score>70 && score<=90){
alert("良好")
}else if(score>60 && score<=70){
alert("及格")
}else{
alert("不及格")
}b.三元运算符
let a = 条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码案例
用户输入2个数，控制台输出最大的值
let a = +prompt('输入第一个数')
let b = +prompt('输入第二个数')
let max = a>b ? a : b
console.log(max)数字补0案例
用户输入1个数，如果数字小于10，则前面补0，比如09 03 等
分析：
1.为后期页面显示时间做铺垫
2.利用三元运算符 补0 计算
let num = +prompt('输入一个数')
alert(num>9 ? num : '0'+num)c.switch语句
switch(数据) {
case 值1:
代码
break
case 值2:
代码
break
case 值3:
代码
break
default:
代码
break
}案例
用户输入 2个数字，然后输入+-*/任何一个，可以计算结果
let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
let a = prompt('请输入计算符号')
switch(a){
case '+':
alert(`${num1} + ${num2} = ${num1+num2}`)
break
case '-':
alert(`${num1} - ${num2} = ${num1-num2}`)
break
case '*':
alert(`${num1} * ${num2} = ${num1*num2}`)
break
case '/':
alert(`${num1} / ${num2} = ${num1/num2}`)
break
default:
alert('请输入正确的计算符号')
break
}3.循环语句
1.断点演示
F12->源代码
2.while循环
while (循环条件){
要重复执行的代码(循环体)
}释义：
跟if语句很像，都要先判断条件为真才会进入循环
三要素：
变量起始值，终止条件，变量的变化量
练习
1.页面输出1-100
let i = 1
while (i<=100)
{
document.write(i)
i++
}2.计算从1加到100的总和并输出
let i=1,sum=0
while(i<=100)
{
sum+=i
i++
}
document.write(sum)3.计算1-100之间的所有偶数和
let i=1,sum=0
while(i<=100)
{
if(i%2==0)
sum+=i
i++
}
document.write(sum)3.退出循环
continue,break
案例
页面弹出对话框，"你爱我吗"，如果输入“爱”，则结束，否则一直弹出对话框
while(true)
{
if(prompt("你爱我吗")=='爱')
break
}综合案例
简易ATM取款机案例
需求：用户可以选择存钱、取钱、查看余额和退出功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let sum=0
while(true)
{
let choice = prompt("请选择您的操作：\n 1.取款\n 2.存款\n 3.查看余额\n 4.退出")
let flag=0
switch(choice){
case '1':
let sub = +prompt("请输入你要取出的金额：")
if(sub>sum)
alert("抱歉， 您的余额不足")
else{
sum-=sub
alert(`您已成功取出${sub}元`)
}
break
case '2':
let add = +prompt("请输入你要存入的金额：")
sum+=add
alert(`恭喜您，成功存款${add}元`)
break
case '3':
alert(`您当前账户存款余额为：${sum}元`)
break
case '4':
flag=1
break
}
if(flag==1)
break
}
</script>
</body>
</html>七、for语句
1.基本使用
for(变量起始值;终止条件;变量变化量){
循环体
}案例
1.利用for循环输出1~100岁
for(let i = 1;i<=100;i++){
document.write(`今年我${i}岁了`)
}2.求1-100之间所有的偶数和
let sum=0
for(let i=1;i<=100 ; i++)
{
if(i%2==0)
sum+=i
}
alert(`偶数和为${sum}`)3.页面中打印五个星星*
for(let i=0 ; i<5; i++)
{
document.write('*')
}4.for循环的最大价值：循环数组
需求：请将数组['马超','赵云','张飞','关羽','黄忠']依次打印出来
let arr=['马超','赵云','张飞','关羽','黄忠']
for(let i=0;i<arr.length;i++)
{
document.write(arr[i])
}for循环和while循环有什么区别呢
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
2.循环嵌套
for(外部声明记录循环次数的变量;循环条件;变化值){
for(内部声明记录循环次数的变量;循环条件;变化值){
循环体
}
}假如每天记住5个单词，3天后一共能记住多少单词？
for(let i = 1 ; i < =3 ;i++)
{
console.log(`第${i}天`)
for(let j = 1;i<=5 ;i++)
{
console.log(`记住第${j}个单词`)
}
}练习：打印五行五列的*
for(let i =0 ;i<5;i++)
{
for(let j=0;j<5;j++)
document.write('*')
document.write('<br>') //换行
}2.1 倒三角
for(let i = 0;i<5;i++)
{
for(let j=0;j<=i;j++)
document.write('*')
document.write('<br>')
}2.2 九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
border: 2px solid #000000;
padding: 5px;
width: 80px;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<script>
for(let i = 1;i<= 9;i++)
{
document.write(`<table>`)
for(let j=1;j<=i;j++)
document.write(`
<td>${j} x ${i} = ${j*i}</td>
`)
document.write('</table>')
}
</script>
</body>
</html>八、数组
1.是什么？
数组是一种可以按顺序保存数据的数据类型
2.基本使用
2.1定义数组和数组单元
let 数组名 = [数据1,2,3,4]
let arr = new Array(数据1,2,3,4)数组是按顺序保存，所以每个数据都有自己的编号
2.2数组遍历
for(let i =0;i<数组名.length;i++)
{
数组名[i]
}2.3案例
1.求数组[2,6,1,7,4]里面所有元素的和以及平均值
let arr=[2,6,1,7,4]
let sum=0
for(let i=0;i<arr.length;i++)
{
sum+=arr[i]
}
document.write(`数组元素的和为${sum}，平均值为${sum/arr.length}`)2.求数组[2,6,1,77,52,25,7]的最大值
let arr=[2,6,1,77,52,25,7]
let max=arr[0]
for(let i=1;i<arr.length;i++)
{
if(max<arr[i])
max=arr[i]
}
document.write(`数组的最大值元素为${max}`)3.操作数组
3.1查询数组数据
3.2重新赋值
略
3.3数组添加新的数据
数组.push()方法将一个或多个元素添加到数组末尾，并返回该数组的新长度
arr.push(元素1，元素2，)数组.unshift(新增的内容)方法将一个或多个元素先加到数组开头，并返回数组的新长度
arr.unshift(元素1，元素2)案例
将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
let arr=[2,0,6,1,77,0,52,0,25,7]
let arr1=[]
for(let i =0 ;i<arr.length;i++)
{
if(arr[i]>=10)
arr1.push(arr[i])
}
alert(arr1)3.4删除数组中数据
数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
arr.pop()数组.shift()方法删除第一个元素，并返回该元素的值
arr.shift()数组.splice()方法，删除指定元素
arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素)若deleteCount删除元素数量空着，就默认从头删到尾
冒泡排序
let arr = [1,2,3,4,5]
for(let i=0;i<arr.length-1;i++)
{
for(let j=0;j<arr.length-1-i;j++)
{
if(arr[j]>arr[j+1]){
let num = arr[j]
arr[j]=arr[j+1]
arr[j+1]=num
}
}
}3.5数组排序
let arr=[33,32,2,1,2]
//1.升序写法
arr.sort(function(a,b){
return a-b
})
console.log(arr)
//2.降序写法
arr.sort(function(a,b){
return b-a
})
console.log(arr)综合案例
需求：用户输入四个季度的数据，可以生成柱形图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
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;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
let s1=+prompt('请输入第一季度数值')
let s2=+prompt('请输入第二季度数值')
let s3=+prompt('请输入第三季度数值')
let s4=+prompt('请输入第四季度数值')
document.write(`
<div class="box">
<div style="height: ${s1}px;">
<span>${s1}</span>
<h4>第一季度</h4>
</div>
<div style="height: ${s2}px;">
<span>${s2}</span>
<h4>第二季度</h4>
</div>
<div style="height: ${s3}px;">
<span>${s3}</span>
<h4>第三季度</h4>
</div>
<div style="height: ${s4}px;">
<span>${s4}</span>
<h4>第四季度</h4>
</div>
</div>
`)
</script>
</body>
</html>
<script>
let arr = []
for(let i=0;i<4;i++)
{
arr[i]=+prompt(`请输入第${i+1}季度的数值`)
//arr.push(prompt(`请输入第${i+1}季度的数值`))
}
document.write('<div class="box">')
for(let i=0;i<4;i++)
{
document.write(`
<div>
<span style="height:${arr[i]}px;">${arr[i]}</span>
<h4>第${i+1}季度</h4>
</div>
`)
}
document.write('</div>')
</script>九、函数
1.为什么需要函数
函数：
实现代码复用
可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的 优势是有利于精简代码方便复用
比如前面我们使用的 alert()\prompt()\console.log()函数等，都是已经封装好的函数
2.函数使用
function 函数名(){
函数体
}
函数名() //函数调用
函数的复用代码和循环重复代码的不同：
循环代码写完就执行，不能很方便控制执行位置
函数的能随时调用随时执行，重复调用
function sayHi(){
document.write("Hi~~~")
}
sayHi() // 函数调用案例
1.封装一个函数，计算两个数的和
function sum(){
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
document.write(num1 + num2)
}2.封装一个函数，计算1-100之间所有数的和
function getSum(){{
document.write((1+100)*50)
}3.函数传参
function 函数名(参数列表){
函数体
}
函数名(实参列表)
案例
1.需求：
每个学生的分数是一个数组，计算每个学生的总分
function student(arr = []){ //实参默认空数组，程序不会报错
let sum=0
for(let i=0;i<arr.length;i++)
{
sum+=arr[i]
}
document.write(sum)
}
student([1,2,3,4,5])4.函数返回值
function 函数名(){
return 值
}
案例
1.求任意两个数中的最大值，并返回
function getMax(a=0,b=0){
return a>b ? a:b
}2.求任意数组中的最大值并返回这个最大值
funtion getMax(arr = [] ){
let max=arr[0]
for(let i = 1 ;i<arr.length;i++)
{
max = arr[i]>max ? arr[i] : max
}
return max
}3.求任意数组中的最大值和最小值，并返回
function get(arr = [])
{
let max=arr[0]
let min = arr[0]
for(let i=1;i<arr.length;i++)
{
max = arr[i]>max ? arr[i] :max
min = arr[i]<min ?arr[i]:min
}
return [max,min]
}5.补充
1.两个相同的函数后面的会覆盖前面的函数
2.在JS中，实参个数和形参个数可以不一致
a.如果形参多，会自动填上undefined
b.如果实参多，多余的实参会被忽略
3.函数会在return之后停止
6.作用域
全局作用域，局部作用域
访问原则
在能够访问到的情况下，先局部，局部没有再找全局
7.匿名函数
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们称之为函数表达式
let fn = function(){//函数表达式
函数体
}
fn() //用变量名调用函数
具名函数可以写到任何地方调用
匿名函数必须先写函数表达式，后调用
8.立即执行函数
避免全局变量之间的污染
//方式1
(function (){
console.log(11)
})();//必须加分号
//方式2
(function (){
console.log(11)
}());//必须加分号
(function (x,y){
console.log(x+y)
})(1,2);9.综合案例
用户输入秒数，可以自动转换为时分秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let second = +prompt("请输入总的秒数：")
let hour = function(second){
return parseInt(second/60/60)
}
let minute = function(second){
return parseInt(second/60%60)
}
let second1 = function(second){
return second%60
}
document.write(`${second}转换为${hour(second)}小时${minute(second)}分钟${second1(second)}秒`)
</script>
</body>
</html>十、对象
1.什么是对象
对象(object)：JS中的一种数据类型
可以理解为一种无序的数据集合
用来描述某个事物，例如描述一个人：可以有姓名、年龄、性别等信息，还有吃饭睡觉打代码等功能
还有静态特征和动态行为
可以更加详细地描述某一个事物
2.对象使用
let 对象名 = {}
let 对象名 = new Object()对象是由属性和方法组成的
let 对象名 = {
属性名: 属性值,
方法名: 函数
}
let obj = {
uname: 'yh',
age: 18,
gender: '男'
}操作数据
a.查询对象
对象名.属性 对象名['属性名']
b.重新赋值
对象名.属性=新值
c.增加属性
对象名.新属性=新值
d.删除属性
delete 对象名.属性
对象中的方法
let person = {
name: 'andy',
sayHi: function() { //匿名函数
document.write('hi!')
}
}
person.sayHi() //调用3.对象遍历
let obj = {
uname: 'andy',
age: 18,
sex: "man"
}
for(let k in obj) { // k是加引号的属性名。'uname'
console.log(k)//打印属性名
console.log(obj[k])// 打印属性值 obj['uname']
}案例
将下面数据对象打印出来
<script>
let student = [
{name: '小明',age: 18, gender: '男',hometown:'河北省'},
{name: '小红',age: 19, gender: '女',hometown:'河男省'},
{name: '小刚',age: 17, gender: '男',hometown:'湖北省'},
{name: '小丽',age: 18, gender: '女',hometown:'河北省'},
]
for(let i=0;i<student.length;i++)
{
for(let k in student[i]){
document.write(k)
document.write(student[i][k]+'<br>')
}
}
</script>升级：
根据上面的数据，以表格的形式输出到网页中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
td {
border: 1px solid black;
padding: 20px;
}
table {
border-collapse: collapse;
margin: 10px auto;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>学生列表</h1>
<script>
let student = [
{name: '小明',age: 18, gender: '男',hometown:'河北省'},
{name: '小红',age: 19, gender: '女',hometown:'河男省'},
{name: '小刚',age: 17, gender: '男',hometown:'湖北省'},
{name: '小丽',age: 18, gender: '女',hometown:'河北省'},
]
document.write('<table>')
document.write('<tr><td>序号</td><td>姓名</td><td>年龄</td><td>性别</td><td>家乡</td></tr>')
for(let i=0;i<student.length;i++)
{
document.write('<tr>')
document.write(`<td>${i+1}</td>`)
for(let k in student[i]){
document.write(`<td>${student[i][k]}</td>`)
}
document.write('</tr>')
}
documnet.write('</table>')
</script>
</body>
</html>4.内置对象
JS内部提供对象，包含各种属性和方法给开发者调用
例如：document.write()
Math
提供数字运算方法
| 方法 | 含义 |
|---|---|
| random | 生成0-1之间的随机数 |
| ceil | 向上取整 |
| floor | 向下取整 |
| max | 找最大数 |
| min | 找最小数 |
| pow | 幂运算 |
| abs | 绝对值 |
生成N-M之间的随机数
Math.floor(Math.random() * (M-N +1)+N)案例
需求：把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面
let arr=['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
document.write(arr[Math.floor(Math.random()*7)])升级：不允许重复显示
let arr=['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
for(let i=0;i<7;i++)
{
let a=Math.floor(Math.random()*(7-i))
alert(arr[a])
arr.splice(a,1)
}猜数字游戏
需求：程序随机生成1-10之间的一个数字，用户输入一个数字
1.如果大于该数字，就提示，数字猜大了，继续猜
2.如果小于该数字，就提示，数字猜小了，继续猜
3.如果猜对了，就提示猜对了，程序结束
let random = Math.floor(Math.random() * 11 )
let x = -1
while( x != random)
{
x = +prompt('你来猜一猜这个数')
if(x>random)
alert('数字猜大了，继续猜')
else if(x<random)
alert('数字猜小了，继续猜')
else
{
alert('恭喜你，猜对了！')
break
}
}生成随机颜色
需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式
1.如果参数传递的是true或无参数，则输出一个随机十六进制的颜色
2.如果参数传递的是fasle，则输出一个随机rgb的颜色
3.格式：
function getRandomColor(flag){
}
console.log(getRandomColor(true)) // #ffffff
console.log(getRandomColor(false)) // rgb(255,255,255)分析：
提示： 16进制颜色格式为：'#ffffff' 其中f可以是任意0-f之间的字符
提示： rgb颜色
function getRandomColor(flag = true){
if(flag == true)
{
let x='#'
let arr = ['0','1','2','3','4','5','6','7','8','9','a','b',
'c','d','e','f']
for(let i = 0;i<6;i++)
{
let random = Math.floor(Math.random() * 16)
x+=arr[random]
}
return x
}else{
let random = Math.floor(Math.random() * 256)
let random1 = Math.floor(Math.random() * 256)
let random2 = Math.floor(Math.random() * 256)
return `rgb(${random},${random1},${random2})`
}
}
console.log(getRandomColor(true))
console.log(getRandomColor(false))
String.fromCharCode(ascil码) //转数字为字符
str.charCodeAt() //转字符为Ascil码十一、拓展
基本数据类型：存储变量时存储的是值本身，因此叫值类型（栈)
引用类型：复杂数据类型，存储变量时仅仅存储 地址（引用）(堆)
JSON
let 对象 = {
"key1": value1,
"key2": value2
};由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
获取元素
1.将json字符串转为js对象
let obj = JSON.parse(json对象)2.将js对象转为json字符串
let json对象 = JSON.stringify(obj)原文地址：https://blog.csdn.net/2302_76949164/article/details/143485292
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！