第一章-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基本语法
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>
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(2**10); //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>
4.1 流程控制
4.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>
4.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);
// 需求:
// 弹出一个确认框:"我喜欢你,我们在一起好吗?"
// 如果对方点击确定,弹出"那我们什么时候结婚?"
// 如果点击否定,弹出"那我明天再问一遍"
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 并且 密码为123456,则跳出循环弹窗提示登录成功,
// 否则让用户继续登录
var name = prompt("请输入你的用户名")
var password = prompt("请输入你的密码")
while(name != 'admin' || password !='123456'){
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);
4.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语句后面的代码
继续下一次循环
4.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);
}
第四章-函数
3.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,3
arguments对象
在开发时,如果不确定形参的个数,可以不设置形参
在函数体中直接通过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)
3.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;
3.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));
3.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
})); //10
3.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)
3.6 函数嵌套与作用域
// [函数嵌套]
var i = 10;
function fn1() {
var i = 20;
function fn2() {
function fn3() {
console.log(i); // 20
}
fn3()
}
fn2()
}
fn1()
变量访问规则:就进原则
当在一个作用域中访问变量时,首先看当前作用域有没有声明
如果有则访问,没有则往上级作用域查找
直到达到顶端作用域没有时,程序报错
3.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定义的局部变量count
3.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)); //1024
e.四舍五入: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的整数
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("类名")