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')页面弹出警告对话框

html 复制代码

<body>
    <script>
        alert('你好，js');
    </script>
</body>

2.外部JS

代码写在以.js结尾的文件里

语法：通过script标签，引入html页面中

javascript 复制代码

<script src="xxx.js"></script>

script标签中间无需写代码，否则会被忽略

3.内联js

代码写在标签内部

语法：注意：此处作为了解即可，但是后面vue框架会用这种模式

javascript 复制代码

<body>
    <button onclick="alert('逗你玩~~~')">点击我</button>
</body>

3.怎么写JS

单行注释：//

块注释：/* */ shift + alt +a

结束符：分号；但可写可不写 都不写最好，简单，一定要统一

4.输入输出语法

输出语法：

javascript 复制代码

document.write('输出的内容') 
document.write('<h1>内容</h1>') //也可以输出标签

alert('要出的内容') //页面弹出警告对话框

console.log('控制台打印') //控制台输出语法，程序员调试使用

输入语法：

javascript 复制代码

prompt('请输入内容') //输入语句

作用：显示一个对话框，对话框中包含一条文字消息，用来提示用户输入内容

5.代码执行顺序：

按html文档流顺序执行

alert() 和 prompt() 它们会跳过页面渲染先被执行

6.字面量

目标：能说出什么是字面量

在计算机科学中，字面量（literal)是计算机中描述的事/物

比如：

我们工资是：1000 此时 1000 就是字面量

'黑马程序员' 字符串字面量

还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

二、变量

1.变量是什么

问题1：用户输入的数据我们如何存储起来？答案：变量

变量是计算机存储数据的"容器"

变量可以让计算机变得有记忆

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器，可以理解为是一个个用来装东西的纸箱子

2.变量基本使用

1.变量的声明

创建变量或者声明变量

javascript 复制代码

let 变量名

声明变量由两部分构成：关键字、变量名（标识）

let就是关键字，所谓关键字是系统提供的专门用来声明变量的词语

2.变量赋值

定义了一个变量后，就能初始化它，为它赋值，在变量名之后跟上一个'=',然后是数值

javascript 复制代码

let age
age = 18
alert(age)

3.更新变量

变量赋值后，可以通过简单的给它一个不同的值来更新它

javascript 复制代码

let age = 18
age = 19

也就是二次赋值

4.声明多个变量

javascript 复制代码

let num,name num = 20 uname = '张三'

5.变量案例

1.需求：

浏览器中弹出对话框：请输入姓名，页面中输出：刚才输入的姓名

javascript 复制代码

//输入姓名，并存到一个变量里
let name = prompt("请输入姓名：")
//输出刚才输入的姓名
alert("刚才您输入的姓名是："+name)

2.需求：

有2个变量：num1里放的是10，num2里放的是20

最后变为num1里放的是20，num2里放的是10

目的：

1.练习变量的使用

2.为了后面冒泡排序做准备

javascript 复制代码

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.声明

javascript 复制代码

let 数组名 = [数据1，数据2，...]

数组是按顺序保存，所以每个数据都有自己的编号

从0开始编号

数组中，数据的编号也叫索引或下标

2.数组取值案例

定义一个数组，里面存放星期一到星期日，在控制台输出星期日

javascript 复制代码

let day = ['星期一','星期二','星期三','
星期四','星期五','星期六','星期日']
console.log(day[6])

3.术语

元素：数组中保存的每个数据都是数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得

javascript 复制代码

let names = ['小明','小红','小刚']
console.log(names[0]) // 小明
console.log(names.length) // 3

三、常量

基本使用

概念：使用const声明的变量称为"常量"

使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

命名规范：和变量一致

常量使用：

javascript 复制代码

// 声明一个常量
const G = 9.8
// 输出这个常量
console.log(G)

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

小技巧：不需要重新赋值的数据使用const

四、数据类型

1.数据类型

数据分类的目的：

1.更加充分和高效地利用内存

2.更加方便程序员的使用数据

JS数据类型整体分为两大类：

基本数据类型和引用数据类型

基本数据类型：

关键字	类型
number	数字型
string	字符串型
boolean	布尔型
underfined	未定义型
null	空类型

**引用数据类型：**object对象

2.细分数据类型

1.数字类型Number

数学中的数字，可以是整数、小数、正数、负数

javascript 复制代码

let age = 18
let price = 88.99

javascript中正数、负数、小数统一为数字类型

JS是弱数据类型，变量到底属于哪种类型，只用赋值之后，我们才能确定

Java\C语言是强数据类型，例如int a=3 必须是整数

数字运算符也叫算数运算符，主要包括加减乘除取余

符号	含义
+	求和
-	求差
*	求积
/	求商
%	取模（取余数）

算数运算符的优先级顺序

1.优先级越高越先被执行，优先级相同时以书写顺序从左向右执行

2.乘除取余优先级相同

3.加减优先级相同

4.乘除取余优先级大于加减

5.使用()可以提升优先级

总结：先乘除后加减，有括号先算括号里面的

计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积并显示到页面

分析：

1.面积的数学公式：π*r²

2.转换为JavaScript写法：变量* r * r

javascript 复制代码

const PI = 3.14
let r = prompt("输入圆的半径：")
console.log(PI*r*r)

NaN代表一个计算错误

它是一个不正确的或者一个未定义的数学操作所得到的结果

javascript 复制代码

console.log('老师'-2)// NaN

NaN是粘性的，任何对NaN的操作都会返回NaN

javascript 复制代码

console.log(NaN + 2) // NaN

2.字符串类型String

通过单引号，双引号或反引号包裹的数据都叫字符串，单引号和双引号本质上没有区别，推荐使用单引号

注意事项

1.无论单引号还是双引号必须成对使用

2.单引号、双引号可以互相嵌套，但是不可自己嵌套自己（口诀：外双内单，或者外单内双）

3.必要时可以使用转义符\，输出单引号或双引号

字符串拼接：

加号运算符可以实现字符串拼接

javascript 复制代码

document.write('我叫'+'张三')
let uname = '张三'
let song = '之歌'
document(uname + song)

模版字符串

使用场景：拼接字符串和常量

语法：反引号``英文输入模式下按键盘的tab键上方那个键（1左边那个键）

内容拼接变量时，用${}包住变量

javascript 复制代码

let  age=18
document.write(`我今年${age}岁了`)

页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了

javascript 复制代码

let name = prompt('请输入名字：')
let age = prompt('请输入年龄：')
document.write(`大家好，我叫${name}，今年${age}岁了`)

3.布尔类型boolean

true false

javascript 复制代码

let isCool = true
console.log(isCool)

4.未定义类型（undefined)

未定义是比较特殊的类型，只有一个值undefined

什么情况出现未定义类型

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少[直接]为某个变量赋值为undefined

javascript 复制代码

let num
console.log(num) //undefined

工作中的使用场景

我们开发中经常声明一个变量，等待传送过来的数据

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

5.null 空类型

javascript 复制代码

let obj= null
undefined.log(obj)

undefined与null的区别

undefined 表示没有赋值，null表示赋值了，但内容为空

计算有区别：undefined+1=NaN null+1 = 1

null开发中的使用场景

把null暂时作为变量的值，将来创建好对象再替换null

3.检测数据类型

语法：typeof x

javascript 复制代码

let num 
document.write(typeof num)

4.类型转换

1.为什么需要类型转换？

JS是弱数据类型，JS也不知道变量到底属于哪种数据类型，只有赋值了才清楚

坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单地进行加法运算

例如：

javascript 复制代码

console.log('10000'+'2000') // '100002000'

正确的是要把10000和2000 字符串转换为数字类型Number然后再进行加法运算

2.隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

加号两边只要有一个是字符串，都会把另外一个转成字符串

除了加号以外的算术运算符，都会把数据转成数字类型

缺点

转换类型不明确，靠经验才能总结

小技巧

加号作为正号解析可以转换成数字型

javascript 复制代码

document.log(+'123')

任何数据和字符串相加结果都是字符串

3.显示转换

过度依赖系统内部的隐式转换是不严谨的，因为隐式转换都是靠经验

语法：

javascript 复制代码

//转换为数字类型number
console.log(Number(数据))
//只保留整数
console.log(parseInt('12.34px')) // 12
//可以保留小数
console.log(parseFloat('12.34px')) // 12.34

在Number(数据)的应用时，如果字符串内容里有非数字，转换失败时，结果为NaN

NaN也是number类型的数据，代表非数字

parseInt/parseFloat函数只有数字在开头才能提取

4.练习

输入两个数，计算两者的和，打印在页面里

javascript 复制代码

let num1 = prompt("请输入第一个数")
let num2 = prompt('请输入第二个数')
document.write("您计算的结果是"+(Number(num1)+Number(num2)))

方法2：

javascript 复制代码

let num1 = +prompt("请输入第一个数")
let num2 = +prompt("请输入第二个数")
document.write("您计算的结果是${num1+num2}")

5.用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

html 复制代码

<!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.一元运算符

运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

javascript 复制代码

let num = 10 + 20 //二元运算符

一元运算符：正负号

自增 ++ （可以前置也可以后置）

自减 -- （可以前置也可以后置）

javascript 复制代码

let i = 1
console.log(i++ + ++i + i) // 7

3.比较运算符

符号	意义
>	略
<
>=
<=
==	左右两边值是否相等
===	左右两边是否类型和值都相等
!==	左右两边是否不全等

4.逻辑运算符

符号	含义
&&	逻辑与
\|\|	逻辑或
!	逻辑非

判断一个数是4的倍数，且不是100的倍数

用户输入一个，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true,否则弹出false

javascript 复制代码

let num = +prompt("请输入一个数")
alert(num%4==0 && num%100!=0)

5.运算符优先级

优先级	运算符	顺序
1	小括号	. ()
2	一元运算符	++ -- !
3	算数运算符	先*/% 后+-
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	,

六、语句

1.表达式和语句

表达式：可以被求值的代码，JS引擎会将其计算出一个结果

javascript 复制代码

x = 7
3+4
num++

语句：语句是一段可以执行的代码

比如：prompt()可以弹出一个输入框，还有if语句，for循环语句等

区别：

因为表达式可被求值，所以可以写在赋值语句的右侧

语句不一定有值，所以比如alert() for 和 break 等语句就不能被赋值

2.分支语句

程序三大流程控制语句

1.顺序结构：从上往下执行

2.分支结构：根据条件选择执行代码

3.循环结构：某段代码被重复执行

a.if分支语句

三种使用：单分支双分支多分支

单分支语法

javascript 复制代码

if (条件){
	满足条件要执行的代码
}

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

除了 '' 所有的字符串都为真除了0所有数字都为真

如果大括号只有一个语句，大括号可以省略，但不提倡

案例

1.用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员

javascript 复制代码

let score = +prompt("请输入你的高考成绩")
if (score > 700){
    alert("恭喜考入山东科技大学")
}

双分支语法

javascript 复制代码

if (条件){
	代码1
}else {
	代码2
}

案例

用户输入，用户名：pink,密码：123456 ，则提示登陆成功，否则提示登录失败

javascript 复制代码

let id = prompt('请输入用户名')
let code = prompt('请输入密码')
if(id == 'pink' && code =='123456'){
    alert('登陆成功')
}else{
    alert('账号或密码错误')
}

判断闰年

让用户输入年份，判断这一年是闰年还是平年，并弹出警示框

javascript 复制代码

let year = +prompt("请输入年份")
if ((year %4 ==0 && year%100!=0)|| year %400 == 0  ){
    alert(`${year}年是闰年`)
}else{
    alert(`${year}年是平年`)
}

多分支if语句

javascript 复制代码

if (条件1){
	代码1
}else if (条件2){
	代码2
}else if (条件3){
	代码3
}else{
	代码n
}

案例

根据输入不同的成绩，反馈不同的评价

90以上为优秀，70-90为良好，60-70为及格，60以下为不及格

javascript 复制代码

let score = +prompt("请输入你的成绩")
if(score>90){
    alert("优秀")
}else if(score>70 && score<=90){
    alert("良好")
}else if(score>60 && score<=70){
    alert("及格")
}else{
    alert("不及格")
}

b.三元运算符

javascript 复制代码

let a = 条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

案例

用户输入2个数，控制台输出最大的值

javascript 复制代码

let a = +prompt('输入第一个数')
let b = +prompt('输入第二个数')
let max = a>b ? a : b
console.log(max)

数字补0案例

用户输入1个数，如果数字小于10，则前面补0，比如09 03 等

分析：

1.为后期页面显示时间做铺垫

2.利用三元运算符补0 计算

javascript 复制代码

let num = +prompt('输入一个数')
alert(num>9 ? num : '0'+num)

c.switch语句

javascript 复制代码

switch(数据) {
	case 值1:
		代码
		break
	case 值2:
		代码
		break
	case 值3:
		代码
		break
	default:
		代码
		break
}

案例

用户输入 2个数字，然后输入+-*/任何一个，可以计算结果

javascript 复制代码

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循环

javascript 复制代码

while (循环条件){
	要重复执行的代码(循环体)
}

释义：

跟if语句很像，都要先判断条件为真才会进入循环

三要素：

变量起始值，终止条件，变量的变化量

练习

1.页面输出1-100

javascript 复制代码

let i = 1
while (i<=100)
{
	document.write(i)
	i++
}

2.计算从1加到100的总和并输出

javascript 复制代码

let i=1,sum=0
while(i<=100)
{
	sum+=i
	i++
}
document.write(sum)

3.计算1-100之间的所有偶数和

javascript 复制代码

let i=1,sum=0
while(i<=100)
{
	if(i%2==0)
		sum+=i
	i++
}
document.write(sum)

3.退出循环

continue,break

案例

页面弹出对话框，"你爱我吗"，如果输入"爱"，则结束，否则一直弹出对话框

javascript 复制代码

while(true)
{
	if(prompt("你爱我吗")=='爱')
		break
}

综合案例

简易ATM取款机案例

需求：用户可以选择存钱、取钱、查看余额和退出功能

html 复制代码

<!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.基本使用

javascript 复制代码

for(变量起始值;终止条件;变量变化量){
	循环体
}

案例

1.利用for循环输出1~100岁

javascript 复制代码

for(let i = 1;i<=100;i++){
	document.write(`今年我${i}岁了`)
}

2.求1-100之间所有的偶数和

javascript 复制代码

let sum=0
for(let i=1;i<=100 ; i++)
{
	if(i%2==0)
		sum+=i
}
alert(`偶数和为${sum}`)

3.页面中打印五个星星*

javascript 复制代码

for(let i=0 ; i<5; i++)
{
	document.write('*')
}

4.for循环的最大价值：循环数组

需求：请将数组['马超','赵云','张飞','关羽','黄忠']依次打印出来

javascript 复制代码

let arr=['马超','赵云','张飞','关羽','黄忠']
for(let i=0;i<arr.length;i++)
{
	document.write(arr[i])
}

for循环和while循环有什么区别呢

当如果明确了循环的次数的时候推荐使用for循环

当不明确循环的次数的时候推荐使用while循环

2.循环嵌套

javascript 复制代码

for(外部声明记录循环次数的变量;循环条件;变化值){
	for(内部声明记录循环次数的变量;循环条件;变化值){
		循环体
	}
}

假如每天记住5个单词，3天后一共能记住多少单词？

javascript 复制代码

for(let i = 1 ; i < =3 ;i++)
{
	console.log(`第${i}天`)
	for(let j = 1;i<=5 ;i++)
	{
		console.log(`记住第${j}个单词`)
	}
}

练习：打印五行五列的*

javascript 复制代码

for(let i =0 ;i<5;i++)
{
	for(let j=0;j<5;j++)
		document.write('*')
	document.write('<br>')  //换行
}

2.1 倒三角

javascript 复制代码

for(let i = 0;i<5;i++)
{
	for(let j=0;j<=i;j++)
		document.write('*')
	document.write('<br>')
}

2.2 九九乘法表

html 复制代码

<!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定义数组和数组单元

javascript 复制代码

let 数组名 = [数据1,2,3,4]
let arr = new Array(数据1,2,3,4)

数组是按顺序保存，所以每个数据都有自己的编号

2.2数组遍历

javascript 复制代码

for(let i =0;i<数组名.length;i++)
{
	数组名[i]
}

2.3案例

1.求数组[2,6,1,7,4]里面所有元素的和以及平均值

javascript 复制代码

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]的最大值

javascript 复制代码

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()方法将一个或多个元素添加到数组末尾，并返回该数组的新长度

javascript 复制代码

arr.push(元素1，元素2，)

数组.unshift(新增的内容)方法将一个或多个元素先加到数组开头，并返回数组的新长度

javascript 复制代码

arr.unshift(元素1，元素2)

案例

将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组

javascript 复制代码

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()方法从数组中删除最后一个元素，并返回该元素的值

javascript 复制代码

arr.pop()

数组.shift()方法删除第一个元素，并返回该元素的值

javascript 复制代码

arr.shift()

数组.splice()方法，删除指定元素

javascript 复制代码

arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素)

若deleteCount删除元素数量空着，就默认从头删到尾

冒泡排序

javascript 复制代码

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数组排序

javascript 复制代码

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)

综合案例

需求：用户输入四个季度的数据，可以生成柱形图

html 复制代码

<!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 函数名(){
	函数体
}

函数名() //函数调用

函数的复用代码和循环重复代码的不同：

循环代码写完就执行，不能很方便控制执行位置

函数的能随时调用随时执行，重复调用

javascript 复制代码

function sayHi(){
	document.write("Hi~~~")
}
sayHi() // 函数调用

案例

1.封装一个函数，计算两个数的和

javascript 复制代码

function sum(){
	let num1 = +prompt('请输入第一个数')
	let num2 = +prompt('请输入第二个数')
	document.write(num1 + num2)
}

2.封装一个函数，计算1-100之间所有数的和

javascript 复制代码

function getSum(){{
	document.write((1+100)*50)
}

3.函数传参

复制代码

function 函数名(参数列表){
	函数体
}
函数名(实参列表)

案例

1.需求：

每个学生的分数是一个数组，计算每个学生的总分

javascript 复制代码

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.求任意两个数中的最大值，并返回

javascript 复制代码

function getMax(a=0,b=0){
	return a>b ? a:b
}

2.求任意数组中的最大值并返回这个最大值

javascript 复制代码

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.求任意数组中的最大值和最小值，并返回

javascript 复制代码

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.立即执行函数

避免全局变量之间的污染

javascript 复制代码

//方式1
(function (){ 
	console.log(11)
})();//必须加分号

//方式2
(function (){
	console.log(11)
}());//必须加分号
(function (x,y){
	console.log(x+y)
})(1,2);

9.综合案例

用户输入秒数，可以自动转换为时分秒

html 复制代码

<!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.对象使用

javascript 复制代码

let 对象名 = {} 
let 对象名 = new Object()

对象是由属性和方法组成的

javascript 复制代码

let 对象名 = {
	属性名: 属性值,
	方法名: 函数
}
let obj = {
	uname: 'yh',
	age: 18,
	gender: '男'
}

操作数据

a.查询对象

复制代码

对象名.属性

对象名['属性名']

b.重新赋值

复制代码
对象名.属性=新值

c.增加属性

复制代码
对象名.新属性=新值

d.删除属性

复制代码
delete 对象名.属性

对象中的方法

javascript 复制代码

let person = {
	name: 'andy',
	sayHi: function() { //匿名函数
		document.write('hi!')
	}
}

person.sayHi() //调用

3.对象遍历

javascript 复制代码

let obj = {
	uname: 'andy',
	age: 18,
	sex: "man"
}
for(let k in obj) { // k是加引号的属性名。'uname'
	console.log(k)	//打印属性名
	console.log(obj[k])	// 打印属性值 obj['uname']
}

案例

将下面数据对象打印出来

javascript 复制代码

<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>

升级：

根据上面的数据，以表格的形式输出到网页中

html 复制代码

<!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之间的随机数

javascript 复制代码

Math.floor(Math.random() * (M-N +1)+N)

案例

需求：把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面

javascript 复制代码

let arr=['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
document.write(arr[Math.floor(Math.random()*7)])

升级：不允许重复显示

javascript 复制代码

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.如果猜对了，就提示猜对了，程序结束

javascript 复制代码

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.格式：

javascript 复制代码

function getRandomColor(flag){

}

console.log(getRandomColor(true)) // #ffffff

console.log(getRandomColor(false)) // rgb(255,255,255)

分析：

提示： 16进制颜色格式为：'#ffffff' 其中f可以是任意0-f之间的字符

提示： rgb颜色

javascript 复制代码

 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

javascript 复制代码

let 对象 = {
	"key1": value1,
	"key2": value2
};

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

获取元素

1.将json字符串转为js对象

javascript 复制代码

let obj = JSON.parse(json对象)

2.将js对象转为json字符串

javascript 复制代码

let json对象 = JSON.stringify(obj)