大家好，欢迎来到IT知识分享网。
第一章-JS基本用法
1.1 输入输出语句
<script> // [输出语句] // 用于在浏览器中弹出警告框 // alert('未满18岁禁止访问!') // 用于控制台输出信息 // console.log("111") // 用于在网页中输出内容 // document.write("三月请对我好一点") // 输入语句 // 在网页中弹出一个输入框 // prompt("请输入姓名") // 在网页中弹出一个确认框 // confirm("你真的满18岁了吗?") </script> eg: <script> alert('未满24岁禁止访问!') console.log('Not Found!') prompt("请输入你的年龄") confirm("是否满24岁") document.write("404错误") </script> 
1.2 JS代码引入方式
<!-- js行内写法 --> <!-- onclick点击事件 --> <button onclick="window.alert('别点了,再点人就傻了')">请点我</button> <!-- 嵌入式 --> <scrip>window.alert("内部样式")</script> <!-- 外链式 --> <script src="./外链式.js"></script> 这个则是教你怎么将代码代入到我们所需要的地方,所以需要新建一个.js以代入代码
第二章-JS基本语法
2.1 变量
2.1.1 变量的声明与赋值
<script> // [先声明后赋值] var boy; var girl; console.log(boy); //underfined(未定义的) console.log(girl); // 为变量赋值 boy = "jack"; girl = "lily"; console.log(boy); //jack console.log(girl); //lily // 声明并赋值 var myAge = 16; var myHeight = 188; console.log(myAge); console.log(myHeight); </script> 这是变量的声明与赋值的方法,当然也是一个十分基础且简单的方式 Eg: <script> var name = prompt("请输入你的名字") console.log(name); alert(name + '欢迎来到js的世界') document.write('希望你成为前端开发的高手') </script>
2.1.2 let声明变量
<script> // let是ES6新引入的关键字,用来替代var关键字. // (ES6指2015推出的ECMAScript语法) // 使用var声明的变量,可以多次赋值,但是其结果只与最后一次赋值有关 var boyFriend ="暗区突围" var boyFriend ="Flead" console.log(boyFriend); // let不允许在一个代码块里有变量和他取一样的名字,但是允许修改同一个变量值 // 一个花括号{}就是一个代码块 let girlFriend ="林正英" console.log(girlFriend); </script>由此可见let语句具有唯一性
2.1.3 变量声明区别
(1)初始化要求不同，
使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。
（2）重复声明不同，
使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致,
而使用const声明的变量，在整个运行过程中不能修改初值。
（3）对块级作用域的支持不同。
使用一对花括号括起来的代码称为一个代码块所谓块级作用域,
就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。
使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。
2.2 数据类型
2.2.1 数据类型分类
简单数据类型存储在栈内存中
复杂数据类型存储在堆内存中
2.2.2 基本数据类型
<script> // [Boolean-布尔型] let flag1 = true; let flag2 = false; // True,False,TRUE,FALSE这些写法都是错的 console.log(flag1); let flag3 ="true" console.log(flag3); // [number-数字型] let age =18; let date ="0306"; console.log(age); console.log(date); console.log(Number.MAX_VALUE); //最大值 console.log(Number.MAX_VALUE*2); //Infinity(无穷大) var a =3-"b" console.log(a); //NaN (Not a Number) NaN也属于数字类型 // isNaN判断是否是一个非数字. // 如果是数字类型则为false // 如果是非数字类型则为true console.log(isNaN(a)); //true console.log(isNaN(111)); //false console.log(isNaN(Infinity)); //false console.log(isNaN("false")); //true // [string-字符串] let demo1 = "字符串"; let demo2 = '字符串'; let demo3 =`字符串`; let demo4 = "老师说`今天晚上不上晚自习`"; // [undefined-未定义的] // 表示声明的变量还未赋值 let grade; console.log(grade); //undefined // [null-空] var a=null; console.log(a); //null </script>
2.2.3 数据类型检测
<script> // isNaN 检测是否是一个非数字 // typeof() console.log(typeof("123")); //string console.log(typeof(false)); //boolean console.log(typeof(NaN)); //number console.log(typeof(Infinity)); //number console.log(typeof("true")); //string console.log(typeof(undefined)); //undefined console.log(typeof(null)); //object console.log(typeof('aaa'*2)); //Number console.log("aaa"*2); //NaN console.log(2-"true"); //NaN console.log(typeof(2-"true")); //Number // 布尔类型true,会在运算中转化为数字1 // 布尔类型false,会在运算中转化为数字0 console.log(2-true); //1 console.log(typeof(2-true)); //Number // 加号遇上字符串,做拼接使用 console.log(2+"true"); //2true console.log(typeof(2+"true")); //string console.log(2+true); //3 console.log(typeof(2+true)); //number </script>
2.2.4 数据类型转换
<script> // 将数据类型转换为布尔类型 // 字符串类型和数字类型都会转化为布尔类型的true // 空字符串转为布尔类型的false,空格字符串转为true // 数字0转为布尔类型的false // Boolean() var a =Boolean("a") console.log(a);//true console.log(Boolean(123)); //true console.log(Boolean("")); //false console.log(Boolean(" ")); //true console.log(Boolean(0)); //false console.log(Boolean(NaN)); //false console.log(Boolean(undefined)); //false console.log(Boolean(null)); //false // [将数据转化为字符串] // 使用String()或toString()进行转换 let num =1; console.log(num); let num2=String(num); //数字类型的 console.log(num2); //1字符串类型1 // [将数据转化为数字类型数据] // Number(用于将数据转化为数字型数据) console.log(Number(123)); //123 console.log(Number("123")); //123 console.log(Number("")); //0 console.log(Number(" ")); //0 console.log(Number(null)); //0 console.log(Number(undefined)) //NaN console.log(Number(false)); //0 console.log(Number(true)); //1 console.log(Number("true")); //NaN console.log(Number("123.1")); //123.1 console.log(Number("123.a")); //NaN </script>
2.3 运算符
2.3.1 算术运算符
<script> let a =10; let b =70; // 加法运算 console.log(a+b); //80 // 减法运算 let c =b-a; console.log(c); //60 // 乘法运算 console.log(c*b) //420 // 除法运算 b=b/a; console.log(b); //7 // 取模运算 取余数 console.log(26%5); //1 // 幂运算 console.log(210); //1024 // 2*2*2*2*2*2*2*2*2*2 </script>
2.3.2 字符串运算符&隐式转换
<script> console.log(1+1); //2 console.log(1+null); //1 console.log(1+true); //2 console.log(1+false); //1 console.log("12"-0); console.log(undefined *null) //NaN console.log(Infinity++); //Infinity console.log(1+"1"); //11 console.log(1+"null"); //1null console.log(null+"undefined"); //nullundefined var name ="张三"; var age =18; console.log(name+"的年龄是"+age) </script> <!-- 隐式转换:当两个数据类型不同时,JS会按照既定的规则进行转换 字符串运算符:加号遇上字符串,做拼接使用 -->
2.3.3 赋值运算符
<script> // 赋值 let a=10; let b=20; let c=b-a; // 加等于/加并赋值 += a +=b; // a=a+b console.log(a); //30 console.log(b); //20 a -=b; // a=a-b console.log(a); console.log(b); a+=b; //30 a/=b; //0.5 a%=b; //10 a=b; // console.log(a); let m=4; let n=6; // m*=n; console.log(m); //24 console.log(n); //6 m%=n; console.log(m); //4 console.log(n); //6 </script>
2.3.4 比较运算符
<script> // != 不等于 console.log(41!=5); //true console.log(4!=4); //false // !== 不全等 console.log(5 !==5); //false // == 等等于 console.log(4=="4"); //true // === 全等于 console.log(4==="4");//false </script>
2.3.5 逻辑运算符
<!-- && 逻辑运算符 一假则假 || 逻辑或运算符 一真则真 --> <script> console.log(true && true); //true console.log(false && true); //false console.log(true &&false); //false 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); //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); //true console.log(3<2 || 2<1); //false console.log(0 || null); //null console.log(null || undefined); //undefined console.log(0 || 4<3); //false console.log(!(2>1)); //false console.log(!(2<1)); //true // 闰年判断 // 能被400或者4整出 但是不能被100整除的年份 var year =2023; var run=(year%400==0 ||year%4==0 ||year%100!=0) var result=run ? "闰年" : "平年" //三元表达式 console.log(result); </script>
2.3.6 三元表达式
<script> // 条件表达式 ? 表达式 : 表达式2 // 如果条件表达式的值为true,则返回表达式1的执行结果 // 如果条件表达式的值为false,则返回表达式2的执行结果 // var age=prompt("请输入你的年龄") // console.log(age); // var res =age >=18 ? "你已经是一名优秀的成年人了" : "你还是个宝宝" // document.write(res) // var num1=prompt("输入数字"); // var num2=prompt("输入数字"); // var res =num1>num2? num1:num2 // document.write(res) var num1=prompt("输入数字"); var res=num1>10 ? num1:"0"+num1 document.write(res) </script>
2.3.7 运算优先级
<script> // 一元运算符>比较运算符>逻辑运算符(逻辑与>逻辑或) > 赋值运算符 let a =3>5 && 2<7 && 3==4 console.log(a); //false let b =3>5 || 2<7 && 3==="3" console.log(b); //false let c =2 == "2" console.log(c); //true let d =!c && (b||a) console.log(d); //false </script>
3.1 流程控制
3.1.1 选择结构
<script> // 1.if语句 // if (条件表达式) {代码段} // let age =prompt("请输入你的年龄") // if (age>=18) { // document.write("你可以进入本网站") // } else{ // document.write("非法访问") // } //3.if..else if..else语句(多分支) // if(条件表达式1){ // 条件表达式1的结果 // } else if(条件表达式2){ // 条件表达式2的结果 // } else if (条件表达式3) { // 条件表达式3的结果 // } else (除去123的结果) let grade=prompt("请输入你的成绩") if(grade==100){ document.write("奖励试卷10套") } else if(grade<=90 && grade>=80){ document.write("成绩优秀") }else if (grade>=60 && grade<80) { document.write("成绩合格") } else if (grade>=40 && grade<60){ document.write("补考啦") } else if (grade>=20 &&grade<40){ document.write(挂科) } else{ document.write("劝退处理") } </script>
3.1.2 循环结构
1. for语句
for(初始变化量;条件表达式;操作表达式){
循环体
}
// 需求:在控制台输入1~100的整数 for(var i = 1; i<=100 ; i++){ console.log(i); } // 需求:在控制台输入0~100之间的偶数 for(var i = 1; i<=100 ; i++){ if (i%2==0){ console.log(i); } } // 需求:计算0~100所有偶数的和 var b=0; for(var i = 1; i<=100 ; i++){ if (i%2==0){ b += i; console.log(i); } } console.log(b);2.while语句
while(条件表达式){循环体}
// 需求:输入1~100的整数 // 初始变化量 var i =1; while (i<=100){ console.log(i); i++ }// 需求: // 弹出一个确认框:"我喜欢你,我们在一起好吗?" // 如果对方点击确定,弹出"那我们什么时候结婚?" // 如果点击否定,弹出"那我明天再问一遍" let yes=confirm("我喜欢你,我们在一起好吗?") console.log(yes); while (!yes){ document.write("那我明天再问一遍"); } document.write("那我们什么时候结婚?") // 需求:打印0~100之间所有偶数的和 let num=0;var i=0; while (i<=100){ i++ if(i%2==0){ console.log(i); num +=i; } } console.log(num); // 需求: // (1)让用户输入 用户名 和 密码(password) // (2)如果 用户为admin 并且 密码为,则跳出循环弹窗提示登录成功, // 否则让用户继续登录 var name = prompt("请输入你的用户名") var password = prompt("请输入你的密码") while(name != 'admin' || password !=''){ alert("重新输入") var name = prompt("请输入你的用户名") var password = prompt("请输入你的密码") } alert('登录成功') 3. do…while语句]
while语句先判断条件表达式的值,在根据条件表达式的值是否执行循环体
do…while语句会无条件执行1次循环体,然后再判断条件表达式的值
再根据判断的值是否绝对继续进行循环
do {循环体}while (表达式)
// 需求:在控制台输出1-100的整数 var i=1; do{ console.log(i) i++ } while (i<=100) var i=0; var num=0; do{ if(i%2==0){ num+=i; } i++; } while (i<=100) console.log(num); do{ i+=2; num+=i; } while (i<=100) console.log(num);3.1.3 跳转语句
1.break语句
for(var i=1;i<=5;i++){ if(i==3){ console.log("吃到了一颗花生米") break;// 跳出了整个循环 } console.log("我不吃牛肉"+i+"个古乐天") } // 我不吃牛肉1个古乐天 // 我不吃牛肉2个古乐天 // 吃到了一颗花生米2.continue语句
for(var n=1;n<=5;n++){ if(n==3){ console.log("吃到了花生米"); continue; } console.log("我吃到了第"+n+"颗花生米"); } // 我吃到了第1颗花生米 // 我吃到了第2颗花生米 // 吃到了花生米 // 我吃到了第4颗花生米 // 我吃到了第5颗花生米break语句会立即跳出整个循环,也就是循环结束
continue语句用来立即跳出本次循环,也就是跳过continue语句后面的代码,继续下一次循环
3.1.4 循环嵌套
// 需求:在控制台输出4列4行的"⭐" var str=''; // 成列 for(var i=1;i<=4;i++){ // 成行 for(var j=0;j<=4;j++){ str +="⭐" } // "\n"是换行的转义符 str +="\n" } console.log(str); var a=''; for(var i=1;i<=5;i++){ for(var j=1;j<=i;j++){ document.write("❤️") } // (br/)换行标签 document.write("<br/>") // 需求:输出金字塔 var n = prompt("你想要造多少层金字塔") // 如果输入的不是数字,就转化为nan n = Number(n) && parseInt(n) console.log(Number(null)); //0 console.log(parseInt(null)); //NaN console.log(parseInt("123.a")); //123 console.log(Number("123.a")); //NaN逻辑与符号必须均满足Number和parseInt的效果
如果有一方不满足,n的结果就是NaN
那么isNaN(n)的值就为true
if(isNaN(n)){ alert("请输入一个数字") } var str="" // 循环行数 for( i=1;i<=n;i++){ // 循环空格 var black=n-i; for(var k=0;k<black;k++){ str +=" " } // 循环爱心 var star=i*2-1 for(var j=0;j<star;j++){ str +="❤️" } str +="\n" } console.log(str);第三章-数组
5.1初识数组
数组是一种复杂数据类型
用于讲一组数组集合在一起
通过一个变量就可以访问一组数据
数组之间通过逗号分隔
数组中的”索引/下标”,是从0开始计算的
// 声明数组 let class02 = ["tom",'lily','tony'] // 打印数组 console.log(class02); // 打印数组长度 console.log(class02.length); //3 // 打印数组下标为X的元素 console.log(class02[0]); //'tom' console.log(class02[1]); //'lily' // 数组可以是任意类型的元素,例如字符串,数字,数组 let arr1= [1,2,3,4,5,6] let arr2 = ['string',NaN,null,undefined,arr1] console.log(arr2);5.2 创建数组
// 1.以new Array()方式创建数组 var arr = new Array(); console.log(arr); //Array(0) var arr = new Array(5); console.log(arr); // [empty*5] arr = new Array("tom",'tony','bob') console.log(arr); // ["tom",'tony','bob'] // 2. 使用数组字面量创建数组 var mood = ['sad',,,,,,'happy'] console.log(mood.length); //8 console.log(mood[7]); //happy console.log(mood[6]); // undefined console.log(mood[0]); // 'sad'1.获取元素长度
数组名.length
2.修改数组长度
数组名.length = number
var arr = [0,1,2,3] console.log(arr.length); // 4 arr.length = 5 console.log(arr); // [0,1,2,3,empty] arr.length = 3 console.log(arr); // [0,1,2] 3.添加数组元素
arr[4] = 3 console.log(arr); // [0,1,2,empty,3] 4.修改数组元素
arr[0] = 1 console.log(arr); // [1,1,2,empty,3]5.删除数组元素
delete arr[3] console.log(arr); // [1,empty,2,empty,3]6.遍历数组
let arr1 = [10,20,30,40,50,60] var sum =0; for (var i=0; i<arr.length; i++){ sum += arr[i] // arr[0] 10 sum+10=0+10=10 // arr[1] 20 sum+20=10+20=30 // arr[2] 30 sum+30=30+30=60 // arr[3] 40 // arr[4] 50 // arr[5] 60 // arr[6] } console.log(sum); // 210 // 需求: let score = [97,65,43,99,60,58,36,72,85,77] let max =0; let min =100; for(var j=0;j<score.length;j++){ if(score[j]>max){ max=score[j] } if(score[j]<min){ min =score[j] } } console.log(max); console.log(min);7.新增数组元素
// push在数组后添加元素 let arr3 = [1,2,3,4] arr3.push(5,6) console.log(arr3); //[1,2,3,4,5,6] // unshift在数组前添加元素 arr3.unshift(-2,-1,0) console.log(arr3); //[-2,-1,0,1,2,3,4,5,6] // 需求:把数组中大于10的元素筛选出来 var arr4 =[4,5,8,9,11,30,39,20,19] var arr5 = [] for(let i=0;i<arr4.length;i++){ console.log(arr4[i]); if(arr4[i]>10){ arr5.push(arr4[i]) } } console.log(arr5); // 需求:数组去0,形成一个新数组 var arr6 = [] for(let i=0;i<arr6.length;i++){ if(arr4[i]!=0){ arr6.push(arr4[i]) } } console.log(arr6); // 需求: 将数组['一','二','三','四','五']反转 // 反转后的数组为[] var arr7=[1,2,3,4,5] var arr8 = [] // for(let i=0;i<arr7.length;i++){ // arr8.unshift(arr7[i]) // } // console.log(arr8); for(let i=0;i<arr7.length;i++){ for (let b=4;b>=0;b--){ arr8.push(arr7[b]) } } console.log(arr8); 5.3 二维数组
// 二维数组指的是数组元素的值是一个一维数组 var arr = [80,100,75] var arr1 = [ [80,100,75], [50,60,70], [30,44,56], ] // 访问二维数组 console.log(arr1[0]); // [80,100,75] console.log(arr1[0][0]); //80 // 需求:遍历二维数组arr1 // for(let i =0;i<arr1.length;i++){ for(let j=0;j<arr1[i].length;j++){ console.log(arr1[i][j]); } } // 二维数组倒置 var a = [ ['a','b','c',], ['d','e','f',], ['h','i','j',], ['l','m','n',], ] var b = []; for(var i =0;i<a[0].length;i++){ // 根据原数组的行,设置新数组的列 b[i]=[]; // 遍历原数组的列 for(var j=0;j<a.length;j++){ b[i][j]=a[j][i] // j是原数组的列 i是原数组的行 // 颠倒位置 } } console.log(b); // 需求: 计算出每一位同学的总成绩 var stu = [ [88,90,60,89], [58,45,78,80], [48,68,96,54], ] var sum; // 遍历行 for(var i=0;i<stu.length;i++){ console.log(i); // 0,1,2 sum =0; //会得到3个sum值 // 遍历列 for(var j=0;j<stu[0].length;j++){ console.log(stu[i][j]); sum+=stu[i][j] } console.log('第'+(i+1)+'为学生的总成绩是'+sum); }第四章-函数
4.1初识函数
[函数定义]
函数用于封装完成一段特定功能的代码
相当于将一条或多条语句组成的代码块包裹起来
用户在使用时只需要关心参数和返回值,就能完成特定的功能,而不用了解具体的实现
[内置函数] console.log(isNaN("number")); //true console.log(parseInt('15.99')); // 15 [自定义函数]
提高代码的复用性,降低程序维护的难度
[函数格式]
function name(params) {
}
function指这是一个函数语句
name是函数名
params是函数参数
{}内放函数的具体功能
无参函数
// 封装函数 function demo() { console.log('我是一个函数'); } // 使用函数 demo() demo() 有参函数
function sum(a,b) { console.log(a+b); } sum(1,2) sum(88888,99999) 需求:定义一个total,调用函数时传入price价钱,num数量
就可以计算并在页面上打印函数的总价all
function total(price,num) { var all = price*num; document.write("商品价格总价为" + all + "元") } total(10,20) [函数的返回值]
函数的返回值是指函数在调用后获得的数据
在定义函数时,可以为函数指定一个返回值并退出函数
{return 表达式}
function total01(price,num) { all = price * num return all } console.log(total01(9999,12)); 需求:定义一个函数maxNum,求任意两数的最大值
法一: function maxNumber(a,b) { if(a>b){ console.log(a); }else { console.log(b); } } console.log(maxNumber(500,300)); 法二: function maxNumber(a,b) { if(a>b){ return a; }else { return b; } } console.log(maxNumber(500,300));需求:定义一个函数getSum,可求任意数组中每个项的和
function getSum(arr) { let sum =0; for (let i=0; i<arr.length;i++){ sum+=arr[i] } // 返回值 return sum } console.log(getSum([1,23,4,5,6])); console.log(getSum([24,15,44,53,643,453,63,7,345])); 需求:判断数组是不是所有元素都是正数,是则返回true,不是则返回false
function shuzu(arr) { let res = true; for(let i=0;i<arr.length;i++){ if(arr[i]<0){ res = false; break; } } return res; } console.log(shuzu([2,-3,45,5654,43]));获取函数调用时传递所有实参
function num (a,b){ console.log(a,b); } num (1,2) //1,2 num (1,2,3,4,5) num(1) //1 undefined …扩展运算符
function num1(...nums){ console.log(nums); } num1(1,2,3,4,5) //1,2,3,4,5 num1(1,2,3) //1,2,3arguments对象
在开发时,如果不确定形参的个数,可以不设置形参
在函数体中直接通过arguments对象获取函数调用时传递的实参
function num2(){ console.log(arguments); console.log(arguments.length); } num2(1,2,3,4,5) num2(1,2,3)需求:定义一个sum函数
1.通过arguments对象来获取所有实并获取具体的实参值
2.对所有实参进行求和
function sum (){ console.log(arguments); var sum =0 for (var i =0;i<arguments.length;i++){ sum+=arguments[i] } console.log(sum); } sum(1,2,3) sum(1,2,3,4,5)4.2 函数内外变量的作用域
[变量]
全局变量: 在函数体外声明的变量或者在函数体内省略var关键字声明的变量
var a =10 function demo(){ console.log(a); } demo() console.log(a); // a为全局变量,在函数体外也可以被访问局部变量:在函数体内利用let关键声明的变量
function demo1(){ let b =10 console.log(b); // 函数内部定义的局部变量b,可以在函数内部被访问 c = 20; //c是省略var关键字声明的变量,为全局变量 console.log(c); } demo1() //10 // console.log(b); //b is notdefined 不可以在函数外访问局部变量b console.log(c); //? 可以在函数外访问到全局变量c块级变量：在es6标准中，新增的let关键字声明的变量为块级变量
一个花括号{}为一个块级
if(true){ let sex ='男' // let声明的变量sex为块级变量 console.log(sex);//块级变量sex可以在{}内部被访问 } // console.log(sex);//块级变量sex不可以在{}内部被访问 for(let i =0;i<5; i++){ console.log("循环内部"+1); } console.log("循环内部"+1); //i is not defined[js三种作用域]
全局作用域：被全局变量所拥有：在{}外声明的变量
局部作用域：被局部变量所拥有：在函数内定义的变量
块级作用域：被块级变量所拥有：在分支语句或者循环大括号中定义的变量
可以访问到全局变量demo,但是demo目前没有赋值,为undefined
let声明的全局变量
不允许在变量初始化前被访问
console.log(test); //Cannot access ‘test’ before initial
// 通过var声明的变量,在串明并赋值语句之前就可以被访问到 console.log(d); var d =20; // 因为变量提升,所以77-78行代码的执行效果,其实是81-83行 var d; console.log(d); var d =20;4.3 函数进阶
[函数表达式]
/函数表达式是将函数值赋给变量的表达式
// 封装一个sum函数,在函数内可以求得变量num1和变量num2的和 var fn = function sum(num1,num2) { console.log(num1+num2); } fn(10,13) //23 function sum(num1,num2) { console.log(num1+num2); } sum(10,13) //23 // 在函数内部求得346了一个和 // 并将求得的和返回出去 // 让函数外部可以拿到 function sum(num1,num2) { return num1+num2; } console.log(sum(10,13)); //23 var fn1 = function sum1(num1,num2) { console.log(num1+num2); } fn1(1,2) //3[匿名函数]
var fn2 = function (num1,num2) { console.log(num1+num2); } fn2(1,2) //3 var fn3 = function (num1,num2) { console.log(num1+num2); } fn3(1,2) //3 var fn4 = function (num1,num2) { console.log(num1+num2); } fn4(1,2) //3[箭头函数]
删除function关键字
在参数和函数中间放上 “=>”
var fn5 = (num1,num2) => { console.log(num1+num2); } fn5(1,2) // 当函数体只有一句话时,可以省略大括号 var fn6 = (num1,num2) => console.log(num1+num2); fn6(1,2) // 当函数只有一句话代码,并且函数的执行结果就是函数的返回值 // 可以省略函数的大括号和return关键字 var fn7 = (num1,num2) => num1 + num2 fn7(1,2) // 当参数只有一个时,可以省略函数外部的小括号 var fn8 = num1 => num1 + num1 console.log(fn8(9)); 4.4 回调函数
函数fn作为参数传递给参数cal
然后在函数cal中调用函数fn
此时,fn就是回调函数
function cal(num1,num2,fn) { return fn (num1,num2) } console.log(cal(10,20,function(a,b){ return a+b })); //30 console.log(cal(10,20,function(a,b){ return a*b })); //200 // 练习:调用cal函数,完成num1和num2的取模运算 console.log(cal(10,20,function(a,b){ return a%b })); //104.5 定时器函数
setInterval()
Interval:间隔,间隙
“时间间隔”一到,代码就会执行一次
setInterval(function,time)
setInterval(function(){ console.log("该上课了"); },5000)setTimeout()
用来指某个函数或某段代码在多少毫秒以后执行
定时器函数属于异步代码
setTinmeout指定的代码,必须等同步代码执行完成后执行
setTimeout(function(){ console.log("要抢票了"); },3000) console.log(1); setTimeout(function(){ console.log(2); },0) console.log(3); // 第二种情况 console.log("A"); setTimeout(function(){ console.log("B"); },20) console.log("C"); setTimeout(function(){ console.log("D"); },0) 4.6 函数嵌套与作用域
// [函数嵌套] var i = 10; function fn1() { var i = 20; function fn2() { function fn3() { console.log(i); // 20 } fn3() } fn2() } fn1()变量访问规则:就进原则
当在一个作用域中访问变量时,首先看当前作用域有没有声明
如果有则访问,没有则往上级作用域查找
直到达到顶端作用域没有时,程序报错
4.7 闭包函数
闭包 (close) :闭包是一种代码形式,内部函数访问外部函数的局部变量
举例: js函数A中有一个函数B,函数B访问了函数A里面定义的局部变量,此时就产生了闭包
变量所在的函数就是闭包函数,在这里,A就是闭包函数
// 外部函数 function outer() { // 外部函数定义的局部变量 let n =10 // 内部函数 function inner() { // 内部函数要访问外部函数定义的局部变量 console.log(n); } inner() } outer()
闭包的作用,解决变量污染问题,让变量被函数保护起来
let count =0; setInterval(function(){ console.log(count--); },1000) // 在这段代码中,count是一个很常用的变量名 // 为了避免和其他位置的代码起冲突,可以使用一个函数将上面的代码包裹起来 function fn() { let count = 0; setInterval(function () { console.log(count++); },1000) } // 内部函数setInterval访问外部函数fn定义的局部变量count function fn() { let count = 0; function add() { console.log(count++); } setInterval(add,count) } // 内部函数add访问外部函数fn定义的局部变量count4.8 递归函数
// 递归函数是一个函数间接或直接地调用自身
function func() {
console.log(1);
func()
}
// 需求: 设置一个函数getSum() // 如果传入进去的是n return sum = n + (n-1) + (n-2) + .. + 1 n = 5 sum = 5+4+3+2+1 =15 // 循环写法一 function getSum1(n) { var sum =0 for (let i = 0; i <= n; i++) { sum +=i } return sum } console.log(getSum(5)); // 循环写法二 function getSum2(n){ // 当n=1时 if (n==1) { return 1 } // 当前数组+比自己小1的数字 return n + getSum3(n-1) } console.log(getSum2); // 递归写法 function getSum(n) { if (n==1) { return 1 } return n * getSum(n-1); } var n = prompt('输入任意n'); n = parseInt(n); if (isNaN(n)) { console.log('输入有误'); } else { console.log(n + '的阶层为:' + getSum(n)); } function getSum(n) { var sum =0 for (let i = 0; i <= n; i++) { sum *=i } return sum } console.log(getSum(5));求斐波那契数列(每一项等于前两项之和)
// 求斐波那契数列(循环写法) function getValue(n) { var arr = [1,1] for (let i = 2; i < n; i++) { // 某一个数等于它前面两个数之和 // 比如下标i=6(下标为6)的数8=5(下标为5)+3(下标为4) // i是下标,arr(i)对应的是数组值 arr[i]=arr[i-1] + arr[i-2] } console.log(arr); return arr[arr.length-1] } console.log(getValue(10)); // 求斐波那契数列(递归写法) function getValue1(n) { // 设置终点 if (n===1 || n===2) { return 1 } // 未到终点 return getValue1(n-1) + getValue1(n-2) } console.log(getValue1(10)); //55第五章- 对象
5.1 介绍对象
1.对象(object)是什么: 对象是一种复杂数据类型]
2.对象作用: 一=以赋值的形式存储多个数据
需求: 存储一个人的信息(姓名,年龄,性别)
// 1.使用简单数据类型 let name ="张三"; let age = 30; let sex ="男" // 好处: 阅读性高.弊端: // 2.数组 let peopel =["张三",30,"男"] // 好处:一个变量多个数据. 弊端: 阅读性不高 // 3.对象 let obj= { // 键: 值 name: "张三", age:30, sex :"男", gfs:["小花","小美","小爱"], sayHi: function(){ console.log("瓦达西见一个爱一个"); } } console.log(obj);// {name:"张三",age: 30, sex: "男"} // 3.1 对象查询 console.log(obj.name); console.log(obj.age); console.log(obj.sex); console.log(obj.gfs); console.log(obj.sayHi); console.log(obj.sayHi()); // 3.2 对象新增 obj.bf="李四" console.log(obj); // 3.3 对象修改 obj.bf="王五" console.log(obj); // 对于对象的属性,如果有这个属性,是修改属性值:如果没有这个属性,是新增 // 3.4 对象删除 delete obj.age console.log(obj); // 3.5 对象遍历 // 遍历数组: for(let i=0; i<=arr.length; i++){} // 遍历对象: for-in循环: for (let key in 对象名) {对象名[key]} let score = { math:99, history:80, geology:70, ehglish:60 } for (let key in score) { console.log(key); // 打印属性名 console.log(score[key]); //打印属性值 }5.2 Math对象
1.内置对象: 由JS作者提前编写好的对象,里面存储了一些属性方法,直接使用即可
2. Math数学对象,Data日期对象
// 计算一个边长为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.5)); //3.5 c.找最大/最小值: Math.max()/Math.min()
console.log(Math.max(1,9,5,6,3,4,6,2)); //9 console.log(Math.min(1,9,5,6,3,4,63,3)); //1 d.幂运算:Math.pow(x,y) 求x的y次方
console.log(Math.pow(2,10)); //1024e.四舍五入:Math.round()
console.log(Math.round(3.5)); //4 console.log(Math.round(3.2)); //3 console.log(Math.round(-3.5)); //-3 console.log(Math.round(-3.6)); //-4 f.向上取整:Math.ceil()
console.log(Math.ceil(3.1)); //4 console.log(Math.ceil(-3.1)); //-3 g.向下取整: Math.floor()
console.log(Math.floor(-1.8)); //-2 h.生成0-1之间的随机小数: Math.random()
console.log(Math.random()); // 生成一个随机0-100的整数 console.log(Math.round(100*Math.random()));5.3 Date对象
时间戳: 从1970年1月1日0时0分0秒到现在的毫秒数
// 以下三种写法都会得到时间戳 console.log(Date.now()); console.log(+new Date); console.log(new Date().getTime()); // 获取年份 console.log(new Date().getFullYear()); console.log(new Date().getMonth()); // 范围:0-11 console.log(new Date().getDate()); //范围:1-31 console.log(new Date().getDay()); //范围:0-6,星期天是0 console.log(new Date().getHours());练习: 在页面中显示”今天是2024年5月22日,星期三”
document.write(new Date().getFullYear()+"年"+(new Date().getMonth()+1)+"月"+new Date().getDate()+"日,"+"星期"+new Date().getDay()); // 获取内置Date对象 var date = new Date(); // 设置年份 date.setFullYear(1998) date.setMonth(8) date.setDate(1) // 获取年份 var year = date.getFullYear() var month = date.getMonth() var day = date.getDate() // 打印年份 console.log(year); console.log(month); console.log(day); 练习: 在页面中显示”出生的日子
var date = new Date(); date.setFullYear(2026) date.setMonth(2) date.setDate(24) var a = date.getFullYear() var b =date.getMonth() var c = date.getDate() document.write("cs:"+a+"年"+(b+1)+"月"+c+"日") // 参数time是下一次生日的时间 var a =prompt("请输入你的生日时间") function count(time) { // 得到当前时间戳 var nowTime = new Date() // 得到过生日时的时间戳 var overTime = new Date(time) // 将即将过生日的时间剪去现在的时间，得到一个生日倒计时 // /1000 是将亳秒数转化为秒数 var times = (overTime - nowTime) / 1000 console.log(times); // 天=24小数=60分钟=60秒 var day1 = parseInt(times / 60 / 60 / 24) // 天数 console.log(day); // 70 // 小时 var hours = parseInt(times/60/60 %24) console.log(hours); // 14 // 分钟 var mins=parseInt(times/60%60) console.log(mins);//22 // 秒数 var sec=parseInt(times % 60) console.log(sec);//1 document.write("距离下次生日还有"+day1+"天"+hours+"小时"+mins+"分钟"+sec+"秒") } console.log(a); 5.4 Array对象
var course = ["web","java"] // push() 在数组末尾添加一个元素 course.push("Javascript") console.log(course); // ['web','java','Javascript'] //unshift()在数组开头添加一个元素 course.unshift("计算机基础") console.log(course); //['计算机基础'，'web'，'java'，'JavaScript'] // pop() 删除数组中最后一个元素 course.pop() console.log(course);//['计算机基础'，'web'，'java'] // shift()删除数组第一个元素 course.shift() console.log(course);//['web','java'] // splice (start,deleteCount) var arr = [1,2,3,4,5,6,7] arr.splice(3,2) //从下标为3的数字 (4) 开始,删掉后面两个数字 console.log(arr); // [1,2,3,6,7] // splice (start,deleteCount,item1,item2,item3,...) arr.splice(4,0,999,888,777) // 从下标为4的数字(6)开始,往后面添加一些元素 console.log(arr); // (1,2,3,6,999,888,777,7) // reverse():颠倒数组中元素的索引 var arr1=[1,2,3,4,5,6,7] arr1.reverse() console.log(arr1); //[7,6,5,4,3,2,1] // sort // 升序排序 var arr2 = [19,45,29,0,18,73] arr2.sort(function (a,b) { return a-b }) console.log(arr2); //[0,18,19,29,45,73] // 降序排序 var arr3 = [19,45,29,0,18,73] arr3.sort(function (a,b) { return b-a }) console.log(arr3); 获取数组元素索引的方法
indexOf(element): 返回指定元素在数组中第一次出现的索引,不存在则返回-1
lastIndexOf(element):返回指定元素在数组中最后一次出现的索引,不存在则返回-1
var color = ["green","pink","red","pink","yellow","red"] console.log(color.indexOf("red")); //2 console.log(color.indexOf("white")); // -1 console.log(color.lastIndexOf("red")); //5将数组转化为字符串
// toString() 将数组转化为字符串,用逗号分隔数组的每个元素 // join() 将数组的所有元素连接成一个字符串,默认用逗号分隔,可指定分隔符 console.log(color); // ['green','pink','red','pink','yellow','red'] console.log(color.toString()); // green,pink,red,pink,yellow,red console.log(color.join());//green,pink,red,pink,yellow,red console.log(color.join(""));// greenpinkredpinkyellowred console.log(color.join("_"));//green-pink-red-pink-yellow-red console.log(color.join("/"));//green/pink/red/pink/yellow/red数组类型检测
var obj = { name:"张三" } console.log(Array.isArray(arr)); //true console.log(Array.isArray(obj)); //false 5.5 String
// 创建字符串对象 var str = new String("apple") console.log(str); // {"apple"} // 访问字符长度 console.log(str.length); // // 数据类型检测 console.log(typeof(str)); //object var str1 = "banana" console.log(typeof(str1)); //string // 根据字符串返回索引 // indexOf() 返回在字符串中首次出现的索引,没有则返回-1 // lastIndexOf() 返回字符串中最后一次出现的索引,没有则返回-1 var str = "helloworld" console.log(str.indexOf("o")); //4 console.log(str.lastIndexOf("o")); //6 // 根据索引返回字符串 // chatAt() console.log(str.charAt(7)); //"r" // 字符串截取 // slice (start) console.log(str.slice(5)); //"world" // slice (start,end) //从strat的下标截取到end的下标 console.log(str.slice(1,4)); //"ell" console.log(str); //helloworld //截取不会改变原数组 // 字符串连接 // concat() var str1 = "hello" var str2 = ",world" console.log(str1.concat(str2)); //hello,world // 大小写转换 // toUpperCase() 转化为大写 // tolowerCase() 转化为小写 console.log(str1.toUpperCase()); //HELLO console.log("HELLO".toLowerCase()); //hello // 替换 // replace(str1,str2) 将str2替换str1 console.log(str); //helloworld console.log(str.replace("world","JS")); //helloJS // 字符串分隔 // split(分隔符) console.log(str.split("")); //['h','e','','','o','w','o','r','l','d'] console.log(str.split());//['helloworld'] console.log(str.split("o"));//['hell','w','rld']第六章-DOM
DOM(上)
a.获取元素
1.获取body元素
var bodyELe=document.body;
console.log(bodyELe);
2.获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
3.获取或设置当前文档的标题
console.log(document.title);//hello ,nihao ,hello
console.log(typeof document.title);//string
document.documentElement//获取文档的html元素
document.body//获取文档中的body元素
document.forms//获取文档中所有包含form元素的集合
document.images//获取文档中包含的所有image元素的集合
document.getElementById("id属性值")//根据id属性获取元素
document.getElementsByTagName("标签名")//根据标签名获取元素b.注册事件
1.元素对象.事件属性 = 事件处理函数 element.onclick(单击事件)= function(){} 2.元素样式操作 element.style,样式属性名 =“样式属性值 backgroundColor 设置元素的背景颜色 3.根据css选择器获取元素 document.querySelector("#id名")通过id选择器获取元素对象 document.querySelector(".类名")通过class类选择器获取元素对象 4.onmouseover 鼠标移入事件 star.onmouseover=function(){ //display =“none" 元素被隐藏 star.style.display="none" } onmouseout 鼠标移出事件 star.onmouseout =function(){ star.style.display ="block" } 5.给元素添加类名 element.classlist.add("类名") 给元素删除类名 element.classslist.remove("类名") 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/114226.html
