第一章初识JScrip
-
输入输出
//输出语句 //用于在浏览器中弹出警告框 window.alert('未满十八岁禁止访问') //用于在网页中输出内容 document.write('我刚满十八~~~~~~~') //用于在控制台中输出信息 console.log('123456') //在浏览器中弹出输入框，用户可以输入内容 prompt('请输入你的年龄') //在浏览器中弹出确认框 confirm('你真的十六岁嘛') -
JS代码引入方式
-
行内式
<body> <!-- 行内式 --> <!-- 行内式是指：将 JS 代码入到 html 中，但不通过 script 标签。 --> <button onclick="window.alert('别点了')">电玩鸭</button> </body> -
嵌入式
<body> <!-- 嵌入式 --> <!-- 嵌入式是指：将 JS 代码写在 script 标签的内部。 --> <script> document.write('就要镶你') </script> </body> -
外链式
<body> <!-- 外链式 --> <!-- 创建一个 js文件，在 js文件中，书写代码。 在 html 文件中，通过路径引入 css 文件。 --> <script src="./03-外链式.js"></script> </body>
-
第二章基本代码语法
-
变量
-
变量声明与赋值
<body> <script> //[先声明再变量] /* //变量声明 var tom;//声明了一个tom变量 var lily var jack,jackson;//同时声明了2个变量 */ //为变量赋值 tom = 'boy'; lily = 'girl'; //输出变量的值 console.log(tom); console.log(lily); //[在声明的同时直接赋值] var height = 188; console.log(height) </script> </body> -
let声明变量
1. **块级作用域**：`let`声明的变量只在声明它的代码块内有效，包括`if`、`for`、`while`等控制结构的块，以及函数体。这意味着同一作用域内的不同代码块可以有同名的`let`变量，它们互不影响。
2. **暂时性死区**：在变量被`let`声明的位置之前，尝试访问该变量会导致错误，因为变量在声明之前存在于一个“死区”。
3. **不可重新声明**：在同一个作用域内，不能重新声明已经被`let`声明过的变量，否则会抛出错误。
4. **无函数作用域**：`let`声明的变量不会像`var`那样在整个函数作用域内有效，只限于当前代码块。
5. **非变量提升**：与`var`不同，`let`声明的变量不会被提升到作用域的顶部，因此在声明前访问会报错。 -
const声明变量
1. **常量声明**：`const`用于声明不可变的常量，声明时必须初始化，并且一旦赋值，值就不能再改变。
2. **块级作用域**：与`let`一样，`const`声明的常量也具有块级作用域，只在声明它的代码块内有效。
3. **对象和数组的引用不变**：如果`const`声明的是对象或数组，虽然引用本身是不可变的，但对象或数组的属性和元素是可以修改的。
4. **不可重新声明**：和`let`一样，`const`也不能在同一作用域内重新声明。
5. **暂时性死区**：同样存在暂时性死区，即在变量声明之前尝试访问会导致错误。
-
-
数据类型
-
基础数据类型
<body> <script> console.log(); console.log() // undefined-未定义的类型 // 表明变量还未被赋值 let baby; console.log(baby);//undefined baby='angelbaby' console.log(baby);//angelbaby // null-空型 // 空型只有一个一个特殊的null值，表示变量没有指向任何对象 </script> </body> -
数据类型检测
<body> <script> // 当不确定一个变量或值是什么类型的数据时 // 就用typeof操作符进行数据类型检测 // typeof 数据 // typeof(数据) let a =typeof (111) console.log(a);//number console.log(typeof"111");//string console.log(typeof NaN);//number console.log(typeof -Infinity);//number console.log(typeof true);//boolean console.log(typeof "false");//stcing console.log(typeof undefined);//undefined console.log(typeof null);//object </script> </body> -
数据类型转换
<body> <script> // 1.将数据类型转换为布尔型数据 //转换时，代表空或者否定的值(空字符串.) //其他的值就会转换为true。 let a =Boolean("") console.log(a);//false console.log(Boolean(""));//true console.log(Boolean("false"));//true console.log(Boolean(0));//false console.log(Boolean(undefined));//false console.log(Boolean(null));//false console.log(Boolean("null"));//true console.log(Boolean(Infinity));//true console.log(Boolean(2));//true // 2.将数据转换为数字型数据 // Number() console.log(Number(true));//1 console.log(Number(false));//0 console.log(Number(undefined));//NaN console.log(Number(null));//0 console.log(Number("123"));//123 console.log(Number("123.a"));//NaN console.log(Number(""));//0 console.log(Number(" "));//0 console.log(Number("true"));//NaN // 3.将数据类型转换为字符串数据 let b = false; console.log(typeof b);//boolean var c = toString(b) console.log(typeof c);//string </script> </body>
-
预算符
-
算数预算符
- 加法（+）：用于将两个数字相加或将字符串连接在一起。
- 减法（-）：用于将一个数字减去另一个数字。
- 乘法（*）：用于将两个数字相乘。
- 除法（/）：用于将一个数字除以另一个数字。
- 取余（%）：用于计算两个数字相除后的余数。
- 递增（++）：用于将一个数字增加1。
- 递减（--）：用于将一个数字减少1。
<body> <script> //加号预算符 let a = 10; let b = 20; let c = a + b; console.log(c);//30 //减法预算符 console.log(c-a);//20 // 乘法运算符 console.log(a*b);//200 // 除法运算符 console.log(b/a );//2 // 取模运算 console.log(c%b);//10 // 幂运算 console.log(2**10);//1024 // 2*2*2*2*2*2*2*2*2*2 // 自增运算(前自增) let m = 10; let n = 20; m = ++n; console.log(m);//21 console.log(n);//21 // 自增运算 (后自增) m =n ++; console.log(m);//21 console.log(n);//22 // 自减运算(前自减) m = --n ; console.log(m);//21 console.log(n);//21 // 自减运算(后自减) m = n --; console.log(m);//21 console.log(n);//20 var x = 3; console.log(x);//3 console.log(++x);//4 console.log(x++);//4 console.log(x);//5 console.log(--x);//4 console.log(x);//4 console.log(x--);//4 console.log(x);//3 </script> </body>
-
字符串运算符
1. **字符串连接运算符（+）**： - 使用`+`运算符可以将两个或多个字符串合并成一个新的字符串。
- 如果其中一个操作数不是字符串，JavaScript会尝试将其转换为字符串。
- 示例：`"Hello" + "world"` 结果为 `"Hello world"`。
2. **扩展运算符（+=）**： - `+=`运算符用于在现有字符串后追加内容，相当于`string = string + value`。
- 它同样会将右侧的值转换为字符串再进行连接。
- 示例：`let str = "Hello"; str += " world";` 结果，`str`变为 `"Hello world"`。
-
赋值运算符
<body> <script> var a =10; var b =20; //加并赋值 a += b; //a = a + b console.log(a);//30 console.log(b);//20 //减并赋值 a-=b; //a= a-b console.log(a);//10 console.log(b);//20 //乘并赋值 a *=b //a= a*b console.log(a);//200 console.log(b);//20 //除并算符 a /= b //a = a/b console.log(a);//10 console.log(b);//20 //取模赋值 a %= b //b = b % a console.log(a);//10 console.log(b);//20 </script> </body> -
比较运算符
<body> <script> // ==相等运算符 console.log(5=="5");//true // ===全等运算符 console.log( 5 ==="5");//false // != 不相等 console.log(5 !="5");//false // ! == 不全等 console.log( 5 !== "5");//true // ==和！=在比较不同数据类型时，会将比较的数据装换为同一类型 // ===和！==则不会转换 </script> </body> -
逻辑运算符
<body> <!-- &&逻辑与运算符 一假则假 || 逻辑或运算符 一真则真 ! 逻辑非运算符/取反运算符 真作假来假亦真做 --> <script> console.log(true && true);//true console.log(false && true);//false console.log(true && false);//false console.log(false && false);//false console.log(true || true);//true console.log(true || false);//true console.log(false || true);//true console.log(false || false);//false console.log(3 > 2 && 2 > 1);//true console.log(3 > 2 && 2 < 1);//false console.log(3 > 2 || 2 < 1);//true console.log(!true);//false console.log(!(100<0));//tyre // var height; // var score; // height > 188 && score>90; // 闰年 // 可以被400整除 但不能被100整除的年份 var year =prompt('请输入一个年份'); var res=year %400==0 || year %4==0 && year%100!=0 // 当满足39行判断 res的值为true，也就是year不为闰年。 //当不满足39行判断;res的值为false，也就是year不为闰年。 console.log(res); // 三元表达式 //如果res的值是true，就会执行冒号前面的语句 // 如果res的值是false，就会执行冒号后面的语句 res ? document.write('闰年') : document.write('平年') </script> </body> -
三元运算符
<body> <script> // 条件表达式? 表达式1 : 表达式2 // 如果条件表达式的值为ture, 则返回表达式1的执行结果 // 如果条件表达式的值为false, 则返回表达式1的执行结果 // 需求：用户输入年龄，判断用户是成年人还是未成年人 var aeg =15; var status = aeg >=18?'已成年': '未成年'; console.log(status); // 需求2： // 需求(1)：让用户输入俩个数字 // 需求(2)：比较俩个数字大小，并在网页面显示最大的那个数字 var num1 = prompt('请输入数1') var num2 = prompt('请输入数2') num1 > num2 ? console.log(num1) : console.log(num2); // 需求3： // 如果用户输入的是俩位数，则直接输出 // 如果用户输入的是个位数，则在十位数上补0 var num = prompt('请输入数一个数字') num >= 10 ? console.log(num) : console.log("0" + num); </script> </body> -
运算符优先级
<body> <script> // 小括号 > 一元运算符 > 比较运算符 > 逻辑运算符(逻辑与>逻辑或) > 赋值运算符 let a = 3>5 && 2<7 && 3==4 // false true false console.log(a);//false let b = 2 =="2" console.log(b);//true let c =!b || a && b console.log(c);//false false || false && true; let ayg </script> </body>
流程控制
选择结构
<body>
<script>
1.if语句
if(条件表达表达式){代码段}
let age =prompt('请输入你的年龄');
console.log(age);
if (age >= 18) {
document.write("恭喜你成年了")
}
2. if...else if...else语句
if (条件表达式1) {
代码段1
}else if (条件表达式2
) {
代码段2
} else if (条件表达式3) {
代码段3
} else if (条件表达式4) {
代码段4
} else{
代码段n
}
3:switch语句
let subject = +prompt("请输入你想要专业的专业。1-是啊发发,2-仓库打的,3-点开垃圾掉dj,4-dj")
switch(subject){
case 1:
document.write("恭喜你选择了点开垃圾掉dj专业");
break;
case 2:
document.write("恭喜你选择了是啊发发专业");
break;
case 3:
document.write("恭喜你选择了仓库爱打的专业");
break;
case 4:
document.write("恭喜你选择了dj专业");
break;
default:
document.write("请重新选择专业")
}
循环结构
<body>
<script>
1.for语句
for(初始变化；条件表达式；操作表达式){循环体}
2.while 语句
while(条件表达式){循环体}
3.do...while语句
do{循环体} while (条件表达式)
</script>
</body>跳转语句
<body>
<script>
//1.break
break语句用于跳出整个循环
for(var i = 1; i <=5; i++){
if(i==3){
console.log("白雪公主吃到了毒苹果");
break;
}
console.log("白雪公主吃了"+i+"个苹果");
}
//2.continue
continue结束当前循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log("白雪公主吃到了shi苹果");
continue;
}
console.log("白雪公主吃了" + i + "个苹果");
}
</script>循环嵌套
<body>
<script>
// 需求打印四排星星
// var str ="";
//成列
for (let i = 1; i <=4; i++){
// 成行
for (let i = 1; i <= 4; i++) {
str +="*";
}
// "\n"换行转义符
str += "\n"
}
console.log(str);
</script>
</body>第三章数组
数组的基本操作
<!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>
//【创建数组】
//1.以数组字面量创建数组
var array = [1, 2, 3, 4, 5];
console.log(array); //[1,2,3,4,5]
//2.以new Array()方式创建数组
var array1 = new Array(1, 2, 3, 4, 5);
console.log(array1); //[1,2,3,4,5]
//【数组构成】
//数组的值可以是任意类型的数据
var array2 = ["string", 123, null, undefined, NaN, array];
console.log(array2); //['string',123,null, undefined, NaN
//【数组长度】
console.log(array2.length); //6
console.log(array.length); //5
//【访问数组】
//"数组索引"也称为"数组下标”，以数字表示，默认是从0开始以此递增
console.log(array[3]); //4
console.log(array[4]); //5
console.log(array2[0]); //string
//【更改数组】通过下标更改
var array4 = [1, 2, 3, 4, 5];
array4[0] = 0;
console.log(array4); //[0,2,3,4,5]
//【新增数据】通过下标新增
array4[7] = 10;
console.log(array4); //(8) [0, 2, 3, 4, 5, empty ,empty ,10]
console.log(array4.length); //8
//【删除数组】利用delete关键字+下标删除
delete array4[7];
console.log(array4); //0, 2, 3, 4, 5, empty,empty,empty ]
console.log(array4.length); //8
//【修改元素长度】 通过.length修改
array4.length = 5;
console.log(array4); //[0, 2, 3, 4, 5]
array4.length = 20;
console.log(array4); //[0, 2, 3, 4, 5, empty x 15]
//【数组方法】
//在数组前新增元素 unshift
var arr1 = [4, 5, 6];
arr1.unshift(1, 2, 3);
console.log(arr1); //[1，2，3，4，5，6]
// 在数组后新增元素 push
arr1.push(7, 8, 9);
console.log(arr1); //[1，2，3，4，5，6，7，8，9]
</script>
</body>
</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>
//for(初始变化；条件表达式；操作表达式){循环体}
var array = ["jack", "lily", "tom", "toy"];
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);
//使用变量i代替元素的下标
for (var i = 0; i <= array.length; i++) {
console.log(array[i]);
jack
lily
tom
toy
}
//需求；遍历[1,2,3,4,5,6,7,8,9,10]数组
var array1 = [1,2,3,4,5,6,7,8,9,10];
for (var e = 0; e <= array1.length; e++) {
console.log(array1[e]);}
// 需求；求出arr数组中各项的累加和
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = 0;
for (var e = 0; e < arr.length; e++) {
sum += arr[e];
console.log(sum);
}
// 需求:去除掉arr中小于0的值，形成一个新数组。
var arr1 = [0, -5, 10, -30, 30, 70, 55, -35, 90];
var arr2 = [];
for (var i = 0; i <= arr1.length; i++) {
if (arr1[i] >= 0){
console.log(arr1[i]);
arr2.push(arr1[i]);
}
}
console.log(arr2);
//需求； 求出数组最大值，最小值
let score = [60, 78, 56, 45, 34, 23, 23, 54, 76];
// 假设一个最高值，一个最低值
var max = min =score [0];//假设最高最低是60
for (var i =1; i < score.length; i++){
// console.log(score[i]);
// 求最大值
if(score[i]>max){
max = score[i]
}
// 求最小值
if(score[i]<min){
min = score[i]
}
}
console.log(max);
console.log(min);
// 需求:将数组["一"，"二"，"三"，"四","五"]反转
反转后的新数组为['五'，'四'，'三'，'二'，'一']
方法一
let array = ["一", "二", "三", "四", "五"];
let reversedArray = array.reverse();
console.log(reversedArray); // 输出: ['五', '四', '三', '二', '一']
// 方法二
var arr3 = ["一", "二", "三", "四", "五"];
var arr4 = [];
for(var i=0;i< arr3.length; i++){
// console.log(arr3[i]);
arr4[arr3.length-1-i]= arr3[i]
}
console.log(arr4);
// 方法三
var arr3 = ["一", "二", "三", "四", "五"];
var arr4 = [];
for (var i = 0; i < arr3.length; i++) {
// console.log(arr3[i]);
//unshift在数组前添加元素
arr4.unshift(arr3[i]);
}
console.log(arr4);
// 方法四
var arr3 = ["一", "二", "三", "四", "五"];
var arr4 = [];
for (var i = arr3.length - 1; i >= 0; i--) {
console.log(i); //4 3 2 1 0
console.log(arr3[i]);
arr4.push(arr3[i]);
}
console.log(arr4);
</script>
</body>
</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>
// 一维数组
var arr1 = [1, 2, 3, 4, 5];
//二维数组
var arr2 = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
console.log(arr2[0]); //123
console.log(arr2[0][0]); //1
console.log(arr2[1][1]); //5
//需求；将数组arr2中的每一个元素一一打印出来
for (var i = 0; i < arr2.length; i++) {
for (var j = 0; j < arr2[i].length; j++) {
console.log(arr2[i][j]);
}
}
//需求；二维数组倒置
var arr2 = [
[1, 2, 3, 4, 5, 6],
[7, 8, 9, 10, 11, 12],
[13, 14, 15, 16, 17, 18],
];
var res = [];
//渲染新数组，首先要知道新数组有多少行
//新数组的行数是有原数组的列属决定的
for (var i = 0; i < arr2[0].length; i++) {
//通过遍历原数组的行数 首先得到新数组的列数
res[i] = [];
//遍历原数组的列，得到新的数组
for (var j = 0; j < arr2.length; j++) {
console.log(arr2[j][i]);
res[i][j] = arr2[j][i];
}
}
console.log(res);
//需求；二维数组求和
var score = [
[1, 4, 7],
[2, 5, 8],
[3, 6, 9],
];
var sum = 0;
for (var i = 0; i < score.length; i++) {
console.log(i); //0,1,2,3
sum = 0;
//console.log(sum);//会得到四个sum=0
for (var j = 0; j < score[i].length; j++) {
console.log(score[i][j]);
sum += score[i][j];
}
console.log("第" + (i + 1) + "为的同学的总成绩" + sum);
}
</script>
</body>
</html>
数组迭代方法
1-map数组迭代方
map:使用某种规则映射得到一个数组
遍历数组中的每一个元素，并对每个元素进行相应的处理，并返回新的数组
回调函数一定要有返回值
// 语法 数组.map((元素，下标)=>{return 映射规则})
2-filter数组过滤器法
filter:用于筛选数组中满足条件的新数组并返回
// 形成的新数组长度!== 原数组长度
// 回调函数执行的次数 == 数组长度
3-forEach数组遍历器
forEach也是用于遍历数组
// forEach没有返回值，不用写return，也不创建新的数组，它只是简单地执行一个函数，对数组中的每个元素执行一次
4-some
some:判断数组中是否有元素满足条件
//返回一个布尔类型的值
//一旦有元素符合条件，则返回true。
5-every
every:判断数组中是否所有元素满足条件
//返回一个布尔类型的值;
//当所有元素符合条件，则返回true.
6-findlndex
它用于查找数组中满足给定测试函数的第一个元素的索引。如果找到这样的元素，它返回该元素的索引；如果没有找到，返回`-1`
- `callback`：必需，一个测试函数，对于数组中的每个元素都会调用此函数。它接受三个参数： - `element`：当前元素的值。
- `index`（可选）：当前元素的索引。
- `array`（可选）：调用`findIndex()`的数组。 - `thisArg`（可选）：在执行回调函数时用作`this`的值。
7-reduce
它用于对数组的所有元素执行一个函数，通常用来将数组“减少”到单个值。这个函数可以累加或聚合数组的元素，或者执行其他计算
reduce()`的回调函数通常执行以下操作：
1. 初始化或累加`accumulator`。
2. 将当前元素`currentValue`与`accumulator`结合。
3. 返回新的`accumulator`值，供下一次调用使用。
第四章-函数
初食函数
【函数定义】
函数用于封装完成一段特定功能的代码。
相当于将一条或多条语句组成的代码块封装起来
用户在使用时只需要关心参数和返回值，就能完成特定的功能。
//【内置函数】
// isNaN是判断内容是否为非数字。非数字时取值为true，数字类型取值为false。
console.log(isNaN("numder")); //true
//Number()可以将字符串类型转化为数字类型
console.log(Number("15.99")); //15.99
console.log(parseInt("15.99")); //15
// parseInt()将小数点前面的内容转化为数字类型
console.log(parseInt("15.abc")); //15
// 自定义函数
//提高代码的复用性，降低程序维护的难度
//【函数格式】
function name(params) {}
// function指这是一个函数语句
// name是函数名
// params是函数参数
//{}内放函数的具体功能
//【无参函数】
// 封装函数
function demo() {
console.log("我是一个函数");
}
// 使用函数
demo();
demo();
demo();
demo();
//【有参函数】
function sum(a, b) {
console.log(a + b);
}
sum(100, 200);
sum(99, 88);
// 封装函数
function total(price, num) {
console.log(price * num);
}
// 调用函数
total(99, 3);
// 【函数的返回值】
// 函数的返回是指在函数调用后获得的数据
// 这个数据需要通过return关键字返回，让函数外可以拿到
function total1(price, num) {
return price * num;
}
console.log(total1(999, 12));
// 函数total1是在函数内部打印乘积
// 每次调用total函数就会执行一次打印命令
///函数total1是在函数内部生成一个新的数值并通过return返回
// 在函数外拿到return返回的数据并打印
//【获取函数调用时传递的所有实参】
function num(a,b){
console.log(a,b);
}
num(1,2)//12
num(1,2,3,4,5,6)//1 2
num(1)// 1 undefined
// 扩展运算符...
function num1(...nums){
console.log(nums);
}
num1(1)//1
num1(1,2,3,4,5,6)//[1,2,3,4,5,6]
//argument对象
//在开发时，如果不确定行参的个数，可以不设置形参
//在函数体中直接通过argument对象获取函数调用时传递的形参
function num2() {
console.log(arguments);
console.log(arguments.length);
}
num2(1,2,3,4,5,6)
num2(1,2,3)
函数进阶
<!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 num = 1;
console.log(num); //1
let fun = function sum(num1, num2) {
console.log(num1 + num2); //3
};
// 定义了函数表达式之后，不能再通过函数名调用函数
// sum(1,2)
// 需要通过变量名调用函数
fun(1, 2);
//【匿名函数】
// 当使用函数表达式时，可以删除函数的名字
let fun1 = function sum(num1, num2) {
console.log(num1 + num2); //3
};
fun1(1, 2);
let fun2 = function (num1, num2) {
return num1 + num2;
};
console.log(fun2(1, 2));
//【箭头函数】
// 删除function关键字
//在参数()和函数体{}之间放上=>
let fun3 = (num1, num2) => {
return num1 + num2;
};
console.log(fun3(1, 2));
//当函数体只有一句话时，可以省略return返回值和大括号
let fun4 = (num1, num2) => num1 + num2;
console.log(fun4(1, 2));
// 当函数只有一个参数时，可以省略小括号
let demo = (a) => a + a;
console.log(demo(1));
function demo(a) {
return a + a;
}
</script>
</body>
</html>
回调函数
<body>
<script>
// function demo(a,b) {
// console.log(a+b);
// }
// demo(1,2)
// demo(1,23)
// 回调函数，就是在a中，传入一个函数b作为参数，参数函数b就是回调函数。
function cal(num1, num2, fn) {
return fn(num1, num2);
}
var num = cal(10, 20, function (num1, num2) {
return num1 + num2;
});
console.log(num); //30
console.log(
cal(30, 40, function (num1, num2) {
return num1 + num2;
})
); //70
var num1 = cal(30, 40, function (num1, num2) {
return num1 * num2; //1200
});
console.log(num1);
console.log(
cal(30, 40, function (num1, num2) {
return num1 * num2;
})
); //1200
</script>
</body>
函数作用域
<body>
<script>
// 全局作用域:全局变量拥有全局作用域
// 全局变量:在函数体外声明的变量或在函数体内省略var关键字声明的变量
var name = "张三";
let age = 18;
function fun() {
console.log(name);
console.log(age);
}
fun();
console.log(name);
console.log(age);
// 局部作用域:局部变量/函数变量拥有局部作用域
function fun1() {
var sex = "men";
console.log(sex); //men
sex1 = "women";
}
fun1()
// console.log(sex);//not defined
console.log(sex1);
// 块级作用域:被块级变量所拥有，在分支语句或循环大括号中定义的变量。
// 一般一个花括号{}为一个代码块
// 块级变量:let关键字声明的变量。
for (let i = 0; i < 5; i++) {
console.log("循环内部" + i);
}
console.log("循环外部" + i); // not defined
</script>
</body>定时器函数
<body>
<script>
setTimeout(() => {
console.log("会呼吸的痛");
}, 3000);
// setTimeout(() => {}, timeout);
// 用来设置某个函数在多少毫秒之后执行
setInterval(() => {
console.log("想念是");
}, 3000);
// setInterval(()=>{}，interval);
// 用来设置某个函数在多少时间间隔后反复执行
console.log(1);
console.log(2);
console.log(3);
setTimeout(() => {
console.log(4);
}, 3000);
console.log(5);
// 12354
// 定时器函数是异步代码，需要等全部同步代码执行完执行。
</script>
</body>嵌套函数与作用域链
<body>
<script>
var i = 10; //i是全局变量,全局变量可以在函数内外被访问到.
let n = 30;
function fu1() {
console.log(i); //函数内可以访问到全局变量i
let n = 20; // n被声明在函数内部，属于函数变量
console.log(n); //n是函数变量，在函数作用域里可以拿到n的值，
}
console.log(i); //函数外也可以访问到全局变量i
//console.log(n);//函数外部拿不到函数内部声明的变量
console.log(n); //函数外可以取得全局变量n的值
fu1();
function fn2() {
let n = 40;
console.log(n); //当既有全局变量n，又有局部变量n，就近取值。
// console.log(n);//在函数内部可以拿到12行n的值
}
fn2();
//【函数嵌套与作用域链】
var i = 10;
function fn1() {
var i = 20;
function fn2() {
function fn3() {
console.log(i); //20
}
fn3();
}
fn2();
}
fn1();
//变量访问规则:就近原则
//当在一个作用域中访问变量时，首先看当前作用域有没有声明。
//如果有则访问，没有则往上级作用域查找。
//直到达到顶端作用域没有时，程序报错。
</script>
</body>闭包函数
闭包（close）函数；是一种代码形式，内部函数访问外部函数的局部变量
// 举例；js函数outer中有一个函数inner
// 函数inner访问了函数outer定义的局部变量demo，此时就产生了闭包
网页计算器
<body>
<p>整数1:<input type="text" id="num1" /></p>
<p>整数2:<input type="text" id="num2" /></p>
<p>
<!-- onclick="function"
onclick 表示按钮点击事件，当点击按钮时，就会执行function函数内容 -->
<input type="button" value="相加" onclick=" cal(add) " />
<input type="button" value="想减" onclick=" cal(sud) " />
<input type="button" value="相臣" onclick=" cal(mul) " />
<input type="button" value="相厨" onclick=" cal(div) " />
</p>
<p>结果：<input type="text" id="result"></p>
<script>
// 在函数cal中，需要传入一个参数函数func
function cal(func) {
// document.getElementById ；在JS中通过id获取HTML中的元素
// var num1 = document.getElementById("num1").value
var num1 = parseInt(document.getElementById("num1").value)
// var num2 = document.getElementById("num2").value
var num2 = parseInt(document.getElementById("num2").value)
var result = document.getElementById("result")
result.value = func (num1,num2)
}
function add(num1, num2) {
return num1 + num2;
}
function sud(num1, num2) {
return num1 - num2;
}
function mul(num1, num2) {
return num1 * num2;
}
function div(num1, num2) {
if (num2 === 0) {
alert("被除数不为0")
}
return num1 / num2;
}
</script>
</body>递归函数
// 递归写法
function getSum2(params) {
// 当n=1时
if (n==1) {
return 1
}
return n +getSum2(n-1)
}
// 递归过程
// getSum = 5
// return 5+getSum2(4)
// return 5 + 4 + getSum2(3)
// return 5 +4 + 3 + getSum2(2)
// rerurn 5 +4 + 3 + 2 + getSum2(1)
//rerurn5+4+3+2+1=15
console.log(getSum2(7));
//【递归函数】
// 一个函数间接或直接地调用自身
function fun(){
console.log(1);
fun()
}
第五章-对象
介绍对象
对象:(object)是一种复杂数据类型。
//(简单数据类型存储在栈中。复杂数据类型的内容存储在栈中，地址存储在堆中。)
//对象形式:以键值对的形式存储多个数据
1.使用简单数据类型存储数据
let name = "张三";
let age = 18;
let sex = "men";
// 弊端；冗余。 好处:阅读性高。
2.数组
let people = ["张三", 18, "'man"];
// 弊端:阅读性不高。
3.对象
let obj = {
name: "张三",
sex: "man",
age: 18,
gfs: ["张田中", "小妹", "小狗"],
func:function(){
console.log("一见爱桑个");
}
};
3.1查询对象
console.log(obj);
console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
console.log(obj.gfs);
console.log(obj.func); //查询函数
console.log(obj.func()); //执行函数
3.2对象新增
obj.bf = "李斯"
console.log(obj);
3.3对象修改
// 如果对象原有属性名是修改，没有则是新增。
obj.bf = "万物"
console.log(obj);
3.4对象删除
delete obj.gfs
console.log(obj);
Math对象
<body>
<script>
// 1.内置对象:由JS作者提交编写好的对象，直接使用即可。
// 需求
// 已知边长r=5，求圆的周长
const pi = 3.14;
const r = 5;
const C = 2*pi*r;
console.log(C);
// a.圆周率:Math.PI
console.log(Math.PI);
const c=2 *Math.PI *r
console.log(c);
//b.绝对值:Math.abs()
console.log(Math.abs(-3));//3
console.log(Math.abs(3));//3
//c.求最大/最小值:Math.max()/ Math.min()
console.log(Math.max(5,7,2,9,0,3,-1));//9
console.log(Math.min(5,7,2,9,0,3,-1));//-1
// d.四舍五入:Math.round()
console.log(Math.round(3.3));//3
console.log(Math.round(-3.3));//-3
console.log(Math.round(-3.6));//-4
// f.向上取整:Math.ceil()
console.log(Math.ceil(1.4));// 2
console.log(Math.ceil(-1.4));//-1
// g.向上取整:Math.floor()
console.log(Math.floor(1.4));// 1
console.log(Math.floor(-1.4));//-2
//h.生成一个0-1之间的随机小数:Math.random()
console.log(Math.random());
console.log(Math.random());
//生成一个0-100之间的随机整数
console.log(Math.random()* 100);
console.log(Math.round(Math.random()* 100));
const w =Math.floor(Math.random() * 101); // 生成0到100之间的随机整数
console.log(w);
</script>
</body>Date对象
//时间戳:1970年1月1日0点到现在的毫秒数console.log(new Date().getTime())
// 获取年份
console.log(new Date().getFullYear());// 2024
//获取月份
console.log(new Date().getMonth());//范围是0-11
// 获取日期
console.log(new Date().getDate());//22
// 获取星期
console.log(new Date().getDay());//范围是0-6 0是星期天// 获取小数
console.log(new Date().getHours());//17// 获取分钟
console.log(new Date().getMinutes());//11
// 练习:在页面中显示“今天是2024年5月22日，星期三
// 练习:在页面中显示“1998年8月1日，我出生了”
var date = new Date()
// 设置年份
date.setFullYear(1998)
// 设置月份
date.setMonth(8)
date.setDate(1)
// 打印月份
console.log(date.getFullYear());
Array对象
<body>
<script>
var course =["web" ,"java" ]
// push():在数组末尾添加元素
course.push("JS")
console.log(course);//['web','java','Js']
//unshift():在数组前添加元素
course.unshift("计算机基础")
console.log(course);//['计算机基础,'web', 'java', 'JS']
//pop():删除数组中最后一个元素
course.pop()
console.log(course);//['计算机基础’，'web'，'java']
//shift():删除数组中第一个元素
course.shift()
console.log(course); //['web', 'java' ] - ['web' ,"JS" ,"Vue" ,"node" ]
var arr =[1,2,3,4,5,6,7]
//splice(startIndex,deleteCount)splice(起始下标、删除的树木)
arr.splice(3,3)// 表示从下标3(数字4)开始，删掉3个数字。
console.log(arr);//[1，2，3，7]
arr.splice(2,2)
console.log(arr);//[1,2]
//splice(startIndex,deleteCount,addItem1,addItem2,addItem3)
arr.splice(2,0,3,4,5,6,7)
console.log(arr);//[1，2，3，4，5，6，7]
//删掉课程java，添加课程“JS、Vue、Node”
course.splice(1,1,"JS" ,"Vue" ,"Node" )
console.log(course)//['web', 'JS', 'Vue', 'Node']
// reverse():颠倒数组中元素的索引
arr.reverse()
console.log(arr);//[7, 6, 5, 4, 3, 2, 1]
var demo = [23,65,78,9,13,7,24,35]
// sort()对数组进行排序
//升序排序
demo.sort(function(a,b){
return a-b
})
console.log(demo);//[7, 9, 13, 23, 24, 35, 65, 78]
// 降序排序
demo.sort(function(a,b){
return b-a
})
console.log(demo);//[78, 65, 35, 24, 23, 13, 9, 7]njnikopj
//获取数组元素索引的方法
var student =["张三","李四","王五","裘月峰","张三"]
// indexOf(element):返回指定第一个元素的下标，没有则返回-1
console.log(student.indexOf("李四"));//1
console.log(student.indexOf("慢羊羊"));//-1
// lastIndexOf(element):返回指定第一个元素在数组中最后一次出现的下标，没有则返回-1
console.log(student.lastIndexOf("张三"));//4
// 将数组转化为字符串
// toString()用逗号分隔数组中每个元素，不会改变原数组
// join() 将数组中所有元素连接成一个字符串，默认用逗号隔开。
console.log(student.toString());//张三,李四,王五,裘月峰,张三
console.log(student);//['张三’，'李四’，'王五’，'裘月峰'，"张三']
console.log(student.join());//张三,李四，王五,裘月峰,张三
console.log(student.join(""));//张三李四王五裘月峰张三
console.log(student.join("-"));//张三-李四-王五-裘月峰-张三
console.log(student.join("/"));//张三/李四/王五/裘月峰/张三
console.log(student.join("S"));//张三S李四S王五S裘月峰S张三
//数组类型检测
console.log(Array.isArray(student));//true
var obj ={
name:"张三"
}
console.log(Array.isArray(obj));//false
</script>
</body>String对象
var str = "helloworld"
console.log(str.length);//10
// 根据字符串返回下标(索引)
// indensOf()返回元素在字符串中第一次出现的下标，没有则是-1
// lastIndexOf()返回元素在字符串中最后一次出现的下标，没有则是-1
console.log(str.indexOf("o"));//4
console.log(str.lastIndexOf("o"));//6
console.log(str.lastIndexOf("v"));//-1
第六章DOM
DOM允许开发者通过创建、修改或删除HTML元素来与网页交互
1. **获取元素**：
- `getElementById(id)`：根据ID获取元素。
- `getElementsByClassName(className)`：根据类名获取元素集合。
- `getElementsByTagName(tagName)`：根据标签名获取元素集合。
- `querySelector(selector)`：根据CSS选择器获取第一个匹配的元素。
- `querySelectorAll(selector)`：根据CSS选择器获取所有匹配的元素集合。
2. **创建元素**：
- `document.createElement(tagName)`：创建一个新的元素。
- `document.createTextNode(text)`：创建一个包含文本的新文本节点。
3. **添加、删除和替换元素**：
- `appendChild(node)`：将新节点添加到父节点的子节点列表末尾。
- `insertBefore(newNode, referenceNode)`：在参考节点之前插入新节点。
- `removeChild(node)`：从父节点中删除指定的子节点。
- `replaceChild(newNode, oldNode)`：用新节点替换旧节点。
4. **属性操作**：
- `element.getAttribute(name)`：获取元素的属性值。
- `element.setAttribute(name, value)`：设置元素的属性值。
- `element.removeAttribute(name)`：删除元素的属性。
5. **事件处理**：
- `addEventListener(eventName, eventHandler)`：为元素添加事件监听器。
- `removeEventListener(eventName, eventHandler)`：移除事件监听器。
6. **事件冒泡和事件捕获**：
- 事件不仅可以在目标元素上触发，还可以沿着DOM树向上（冒泡）或向下（捕获）传播。
- `event.stopPropagation()`阻止事件继续冒泡。
- `event.stopImmediatePropagation()`阻止同一事件的其他监听器执行。
7. **事件委托**：
- 使用事件冒泡，可以在父元素上监听事件，然后通过`event.target`判断哪个子元素触发了事件，以此来减少事件监听器的数量。
8. **文档碎片（DocumentFragment）**：
- `document.createDocumentFragment()`用于创建一个临时的DOM片段，可以用于高效地批量添加或删除元素。
9. **遍历和查询**：
- `previousElementSibling`和`nextElementSibling`属性用于获取元素的前一个或后一个兄弟元素。
- `parentElement`属性获取元素的直接父元素。
- `childNodes`和`children`分别返回元素的所有子节点（包括文本节点）和所有子元素。
10. **样式操作**：
- `style`属性允许直接操作元素的内联样式。
- `getComputedStyle(element)`返回元素的计算样式，包括浏览器应用的默认样式和继承样式。
11. **动画和过渡**：
- 通过修改元素的CSS属性，如`transform`和`opacity`，可以创建动画效果。
12. **表单元素操作**：
- DOM API提供了处理表单元素的方法，如`element.value`获取或设置表单字段的值，`element.checked`检查复选框或单选按钮是否被选中。
13. **XMLHttpRequest和Fetch API**：
- 与DOM交互时，这些API用于向服务器发送请求并处理响应，从而实现动态加载数据。
14. **MutationObserver**：
- 用于监听DOM的变化，如元素的添加、删除或属性更改。
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
