小小觉醒的个人主页 - 动态

赞了这篇沸点

前端

·

输入和输出语句:

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

将数据显示到网页

1. 将数据显示到网页，相当于给body添加内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')

在网页弹出一个提示框，输出数据

2 .在网页弹出一个提示框
alert("hello world");

控制台输出语法，程序员调试使用

3. 控制台打印输出,给程序员看的.
console.log("学习前端真快乐");

输入

在网页弹出一个输入框，让用户输入数据

prompt('请输入您的年龄：')

在网页弹出一个确认框，让用户输入确认/取消二选一

confirm("你确定你已经成年了吗？");

展开

赞过

1

赞了这篇沸点

前端

·

3年前

输入和输出语句:

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

将数据显示到网页

1. 将数据显示到网页，相当于给body添加内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')

在网页弹出一个提示框，输出数据

2 .在网页弹出一个提示框
alert("hello world");

控制台输出语法，程序员调试使用
3. 控制台打印输出,给程序员看的.
console.log("学习前端真快乐");

输入
4. 在网页弹出一个输入框，让用户输入数据
prompt('请输入您的年龄：')

5. 在网页弹出一个确认框，让用户输入确认/取消二选一
confirm("你确定你已经成年了吗？");

展开

赞过

1

赞了这篇沸点

前端

·

3年前

变量:
理解变量是计算机存储数据的“容器”，掌握变量的声明方式
变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子
变量作用:用来存放数据.

声明变量
声明(定义)变量有两部分构成：声明关键字、变量名（标识)

let 变量名
声明(定义)变量有两部分构成：声明关键字、变量名（标识）
let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
age 即变量的名称，也叫标识符
let age

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 `let` 的含义是声明变量的，看到 `let` 后就可想到这行代码的意思是在声明变量，如 `let age;`

`let` 和 `var` 都是 JavaScript 中的声明变量的关键字，推荐使用 `let` 声明变量！！！

变量赋值
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
1. 声明一个年龄变量
let age
2. 赋值，将 18 这个数据存入了 age 这个“容器”中
age = 18
console.log(age)
3. 声明的同时直接赋值变量的初始化
let age = 18
小案例
let num = 20
let uname = '学习前端'
console.log(num)
console.log(uname)

变量的基本使用
更新变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
1 声明的同时直接赋值变量的初始化
let age = 18
age = 19
console.log(age)
let 不允许多次声明一个变量
let age = 19

声明多个变量
多个变量中间使用逗号隔开
2 声明多个变量
let age = 18, uname = '迪丽热巴'
console.log(age, uname)
提倡声明方式一行声明一个变量,可读性比较好
let age = 18
let uname = '迪丽热巴'
console.log(age, uname)

展开

赞过

2

赞了这篇沸点

前端

·

3年前

数组:

let arr = [数据1,数据2,数据3,...,数据n]
// let arr = [10, 20, 30]
// 1. 声明数组
let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
// 2. 使用数组数组名[索引号] 从0
// console.log(arr)
console.log(arr[0]) // 刘德华/
console.log(arr[4])
// 3. 数组长度:数组名.length
// 数组长度 = 索引号 + 1
console.log(arr.length) // 6

// let 刘德华 = 10
// console.log(刘德华)

// 获取数组的每个元素,需要遍历数组
for (let i = 0 ; i < arr.length ; i++)

展开

赞过

3

赞了这篇沸点

前端

·

3年前

算术运算符：

## 数据运算

+：加法
-：减法
*：乘法
/：除法
%：取模（取余数）

取模打个比方(90 % 8) , 用8* , * 到90的尽头 , 8*11等于88 , 不能 *到超过90 , 90-88=2, 2就是余数

假如前面的数字比后面的数字小 , 比如(7 % 8) , 7都小了 , 那8还怎么除 , 得出的结论就是7

------

数据运算中的加、减、乘、除、取模

乘、除、取模优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结：先乘除后加减，有括号先算括号里面的

------

计算圆的面积

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

转换JS写法：变量 * r * r

用户输入

let r = prompt('请输入圆的半径')

计算圆的面积

let res = 3.14 * r * r

页面输出
document.write(res)

展开

赞过

2

赞了这篇沸点

前端

·

3年前

运算符:

赋值运算符：对变量进行赋值的运算符
赋值运算符(`=`)将等号右边的值赋予给左边, 要求左边必须是一个容器
其它赋值运算符:`+=,-=,*=,/=,%=`;使用这些运算符可以在对变量赋值时进行快速操作
let num = 1
// 采取赋值运算符
// num = num + 1
// num += 1
num += 3
console.log(num)

一元运算符:
一元运算符:正负号
前置自增:++i
后置自增:i++
前置自增和后置自增单独使用没有区别
// 1. 前置自增
let i = 1
++i
console.log(i)//2
// 2. 后置自增
let i = 1
i++
console.log(i)//2

展开

赞过

1

赞了这篇沸点

前端

·

3年前

比较运算符:
应用场景:比较两个数据大小、是否相等

`> `：左边是否大于右边

`<`：左边是否小于右边

`>=`：左边是否大于或等于右边

`<=`：左边是否小于或等于右边

`==`：左右两边值是否相等

`===`：左右两边是否类型和值都相等(全等)

`!==`：左右两边是否不全等(不全等)

`!=`: 不等

比较结果为boolean类型，即只会得到 true 或 false

> = 单等是赋值

> == 是判断

> === 是全等

console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
// 比较运算符有隐式转换把'2' 转换为 2 双等号只判断值
console.log(2 == '2') // true
console.log(undefined === null)
// === 全等判断值和数据类型都一样才行
// 以后判断是否相等请用 ===
console.log(2 === '2')
console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
//不全等
console.log(2 !== '2') // true
// 不等
console.log(2 != '2') // false
console.log('-------------------------')
console.log('a' < 'b') // true
console.log('aa' < 'ab') // true
console.log('aa' < 'aac') // true

展开

赞过

1

赞了这篇沸点

前端

·

3年前

逻辑运算符:

// 1.逻辑与一假则假二元运算符
// 有的丈母娘招女婿：有车且有房且有存款。必须要全部都满足，只要有一个不满足就是false
console.log(true && true)
console.log(false && true)
console.log(3 < 5 && 3 > 2)
console.log(3 < 5 && 3 < 2)
console.log('-----------------')
// 2 逻辑或一真则真二元运算符
//我的丈母娘：有车或者有房或者有存款。只要有任意一个满足就为true
console.log(true || true)
console.log(false || true)
console.log(false || false)
console.log('-----------------')
// 3 逻辑非取反一元运算符
//个别丈母娘招女婿：只要不是女的（取反）
console.log(!true)
console.log(!false)

console.log('-----------------')

let num = 6
console.log(num > 5 && num < 10)

展开

赞过

1

赞了这篇沸点

前端

·

3年前

三元运算符:
其实是比 if 双分支更简单的写法，可以使用三元表达式

语法:
条件 ? 满足条件执行代码1 : 不满足条件执行代码2

// 三元运算符
// 条件 ? 代码1 : 代码2
console.log(3 > 5 ? 3 : 5)
if (3 < 5) {
alert('真的')
} else {
alert('假的')
}
// 三元写法
3 < 5 ? alert('真的') : alert('假的')
//
let sum = 3 < 5 ? 3 : 5
console.log(sum)// 3

展开

赞过

1

赞了这篇沸点

前端

·

3年前

单分支:
语法:
if(条件){
满足条件执行的代码
}
括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

双分支:
语法:
if(条件){
满足条件执行的代码
}else{
不满足条件执行的代码
}
//需求用户输入，用户名：hello，密码：123456，则提示登录成功，否则提示登录失败
// 示例代码
// 1. 用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
// 2. 判断输出
if (uname === 'hello' && pwd === '123456') {
alert('恭喜登录成功')
} else {
alert('用户名或者密码错误')
}

多分支:
先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n
语法:
if(条件1){
代码1
}else if (条件2){
代码2
}else if (条件3){
代码3
}else{
代码n
}

展开

赞过

2

赞了这篇沸点

前端

·

3年前

switch语句:
找到跟小括号里数据**全等**的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码
例：数据若跟值2全等，则执行代码2
注意事项:
1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用没有break会造成case穿透

// 某种情况下,可以合理利用switch-case穿透现象来简化代码
// 什么时候需要省略case，合理利用穿透？
//答案：多个匹配值需要执行相同的代码
/* 用户输入月份，告诉用户什么季节
春季： 3 4 5
夏季： 6 7 8
秋季：9 10 11
冬季：12 1 2
*/
let month = +prompt('请输入月份')
switch (month) {
case 3:
case 4:
case 5:
alert('春季')
break
case 6:
case 7:
case 8:
alert('夏季')
break
case 9:
case 10:
case 11:
alert('秋季')
break
case 12:
case 1:
case 2:
alert('冬季')
break
default:
alert('你是外星人吗？')
break
}

展开

赞过

2

赞了这篇沸点

前端

·

3年前

while循环:
语法:
while (循环条件) {
重复执行的代码(循环体)
}
跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环三要素:
1.变量起始值
2.终止条件(没有终止条件，循环会一直执行，造成死循环)
3.变量变化量（用自增或者自减)

// 1. 变量的起始值
let i = 1
// 2. 终止条件
while (i <= 3) {
document.write('我要循环三次 <br>')
// 3. 变量的变化量
i++
}

// 1. 变量的起始值
let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {
document.write('我要循环三次 <br>')
// 3. 变量的变化量
i++
}

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

展开

赞过

1

赞了这篇沸点

前端

·

3年前

简易ATM机
需求：用户可以选择存钱、取钱、查看余额和退出功能
分析：
①：循环的时候，需要反复提示输入框，所以提示框写到循环里面
②：退出的条件是用户输入了 4，如果是4，则结束循环，不在弹窗
③：提前准备一个金额预先存储一个数额
④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额
⑤：输入不同的值，可以使用switch来执行不同的操作

// 1. 开始循环输入框写到循环里面
// 3. 准备一个总的金额要写到循环的外面,不然每次循环都会重置
let money = 100
while (true) {
let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)
// 2. 如果用户输入的 4 则退出循环， break 写到if 里面，没有写到switch里面，因为4需要break退出循环
if (re === 4) {
break
}
// 4. 根据输入做操作
switch (re) {
case 1:
// 存钱
let cun = +prompt('请输入存款金额')
money = money + cun
// money += +prompt('请输入存款金额')
break
case 2:
// 存钱
let qu = +prompt('请输入取款金额')
money = money - qu
// money -= +prompt('请输入存款金额')
break
case 3:
// 存钱
alert(`您的银行卡余额是${money}`)
break
}
}

展开

赞过

1

赞了这篇沸点

前端

·

3年前

掌握 for 循环语句，让程序具备重复执行能力
`for` 是 JavaScript 提供的另一种循环控制的话句，它和 `while` 只是语法上存在差异。
for语句的基本使用：

1.实现循环的 3 要素
// 1. 语法格式
// for(起始值; 终止条件; 变化量) {
// // 要重复执行的代码
// }

// 2. 示例：在网页中输入标题标签
// 起始值为 1
// 变化量 i++
// 终止条件 i <= 6
for(let i = 1; i <= 6; i++) {
document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
}

2. 变化量和死循环，`for` 循环和 `while` 一样，如果不合理设置增量和终止条件，便会产生死循环。

3.跳出和终止循环
// 1. continue
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue // 结束本次循环，继续下一次循环
}
console.log(i)
}
// 2. break
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break // 退出结束整个循环
}
console.log(i)
}

结论：
`JavaScript` 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。
起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
当如果明确了循环的次数的时候推荐使用`for`循环,当不明确循环的次数的时候推荐使用`while`循环
`for` 的语法结构更简洁，故 `for` 循环的使用频次会更多。

展开

赞过

1

赞了这篇沸点

前端

·

3年前

循环嵌套：
利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

// 1. 外面的循环记录第n天
for (let i = 1; i < 4; i++) {
document.write(`第${i}天 <br>`)
// 2. 里层的循环记录几个单词
for (let j = 1; j < 6; j++) {
document.write(`记住第${j}个单词<br>`)
}
}
外层循环循环一次，里层循环循环全部

展开

赞过

1

赞了这篇沸点

前端

·

3年前

for循环嵌套案例：

倒三角：
// 外层打印几行
for (let i = 1; i <= 5; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
document.write('★')
}
document.write('<br>')
}

九九乘法表：
CSS样式：
{
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
text-align: center;
color: hotpink;
}
--------------------------------------
javascript：
// 外层打印几行
for (let i = 1; i <= 9; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
// 只需要吧 ★ 换成 1 x 1 = 1
document.write(`
<div> ${j} x ${i} = ${j * i} </div>
`)
}
document.write('<br>')
}

展开

赞过

2

赞了这篇沸点

前端

·

3年前

函数：
声明和调用：
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

声明（定义）：
一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

调用：
声明（定义）的函数必须调用才会真正被执行，使用 `()` 调用函数。

参数
通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。
声明（定义）一个功能为打招呼的函数
传入数据列表
-声明这个函数需要传入几个数据
-多个数据用逗号隔开
1. 声明（定义）函数时的形参没有数量限制，当有多个形参时使用 `,` 分隔
2. 调用函数传递的实参要与形参的顺序一致

形参和实参：
形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致

返回值：
函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 `return` 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。

匿名函数：
函数可以分为具名函数和匿名函数
匿名函数：没有名字的函数,无法直接使用。

展开

赞过

2

赞了这篇沸点

前端

·

3年前

作用域：
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

1. 全局作用域：整个script标签或者单独js文件，处于全局作用域内的变量，称为全局变量

2. 局部作用域：作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
处于局部作用域内的变量称为局部变量
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种情况，函数内部的形参可以看做是局部变量。

3. 块级作用域：例如 if for while 使用{} 必须是let const声明的变量

展开

赞过

1

赞了这篇沸点

前端

·

3年前

数组：
数组：(Array)是一种可以按顺序保存数据的数据类型
使用场景：**如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

// 1. 语法，使用 [] 来定义一个空数组
// 定义一个空数组，然后赋值给变量 classes
// let classes = [];
// 2. 定义非空数组
let classes = ['小明', '小刚', '小红', '小丽', '小米']
通过 `[]` 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

访问数组和数组索引
使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元
我们将数据单元在数组中的编号称为索引值，也有人称其为下标。

操作数组：
数组做为对象数据类型，不但有 `length` 属性可以使用，还提供了许多方法：
1. push 动态向数组的尾部添加一个单元
2. unshit 动态向数组头部添加一个单元
3. pop 删除最后一个单元
4. shift 删除第一个单元
5. splice 动态删除任意单元
使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 `length` 并不会发生错乱。

数据单元值类型：
数组做为数据的集合，它的单元值可以是任意数据类型
数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

展开

赞过

2

赞了这篇沸点

前端

·

3年前

声明变量（const）
1）、先用const声明变量，如果发现后面它需要被修改，再改用let声明变量
2）、声明变量尽量使用const，const语义化更好
3）、const声明的变量不能更改，声明的时候进行初始化
4）、对于引用数据类型，const声明的不是值，是地址
5）、为什么const声明是对象可以修改里面的属性？
因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错。建议数组和对象使用
const来声明
6）、什么时候使用let声明变量？
如果基本数据类型的值或者引用类型的地址发生变化时，需要用let；如果一个变量进行加减运算，如for循环中的i++，用let

Web APIs作用和分类
作用：
使用JS操作html和浏览器

分类：
DOM（文档对象模型）,BOM（浏览器对象模型）

什么是DOM
DOM：文档对象模型

用来操作网页内容
DOM树

将HTML文档以树状结构直观的表现出来，称之为文档树或DOM树
作用：文档树直观的体现标签与标签之间的关系

DOM对象⭐
DOM对象如何创建：
浏览器根据html标签生成的JS对象
DOM的核心思想：
把网页内容当作对象来操作
document对象：
DOM里提供的一个对象
document对象中的属性和方法用来访问网页和操作网页内容
网页的所有内容都放在document中

获取DOM元素
根据CSS选择器来获取DOM元素⭐
获取一个元素（类名前加点，id前加#）
语法：document.querySelector('CSS选择器')
获取多个元素（返回伪数组）
const list = document.querySelectorAll('CSS选择器')
（1）、如果选择器不存在，会返回空数组[ ]
（2）、如果选择器存在，会返回满足条件的dom对象的伪数组
querySelector和querySelectorAll两者使用的区别：
（1）querySelector获取的是dom对象，可以直接使用dom语法进行操作修改
2、querySelectorAll获取的是dom对象的伪数组，不可以直接使用dom语法（数组没有dom语法），需要进行数组遍历
（3）querySelector和querySelectorAll中的小括号里必须写引号，引号中必须是字符串

展开

赞过

1