1.JS的三种引入方式
-行内引入
eg:<button οnclick="alert('再点一下')">点一下</button>
-内联引入(推荐学习中使用)
通过script标签引入
-外部引入(推荐开发中使用)
编写JS代码在外部的.JS文件中,然后再通过script标签引入
eg:alert("我是外联引入") <script src="./3.1.1js的三种引入方式.js"></script>
注:单行注释//:一般写在单行代码之后
多行注释:一般写在方法和类之前 /*注释内容*/或 /**注释内容*/
2.JS的三种对话框
-弹出框 :alert("提示内容")
-确认框 : confirm("提示确认的信息") 返回值:true/false
-输入框:prompt("提示输入的信息") 返回值:输入的具体数据
3.JS输出数据的三种方式
-浏览器弹窗
<script>
alert('浏览器弹框输出字符');
</script>
-输出HTML页面
<script>
document.write('输出html内容到页面');
</script>
-输出浏览器控制台
<script>
console.log('输出到浏览器控制台');
</script>
4.JS变量
java是强类型语言,注重变量的定义,所以在定义变量时都需要指定数据类型。
js是弱类型语言,不注重变量的定义,所以在定义变量时不需要指定数据类型。
4.1 变量的声明
局部变量:用 let 定义
let 变量 = 值 ;
全局变量 :用 var 定义
var 变量 = 值 ;
4.2 常量
const 常量名 = 值 ;
<script>
//整数类型
var a=3;
// Boolean类型
var b=true;
// 定义小数类型 小数和整数类型统称为number类型
var score=2.333;
// 定义常量类型 常量类型一旦被定义就不能被改变
const PI=3.1415926
//boolean类型
var f=true;
var m;
console.log(m);
// undefined; 表示变量未被定义
// 字符串类型 string
var o="dd";
//for 循环 定义局部变量
let sum=0;
for(let i = 0; i < 100 ; i++){
sum += i;
}
console.log("sum") //结果是5050
</script>
注意事项:
1、ECMAScript6之前定义变量使用var
但是会有很多坑,所以ECMAScript6之后开始推出let
声明变量,const
声明常量。
2、在js中,末赋值的变量,也是可以使用的,但是这个值是undefined
,末定义的变量。
4.3 变量的命名
(1)必须符合"见名之意"、且小驼峰的明敏规范(第一个单词首字母小写,其他单词首字母大写)
(2)必须符合标识符的命名规范
--只能由字母、数字、下划线、$组成
--不能以数字开头
--不能为保留字class和关键字
--不建议使用中文
4.4数据类型
<script>
//测试常见数据类型
console.log(typeof 1.23) //number
console.log(typeof true) //boolean
console.log(typeof "zhangsan") //string
console.log(typeof 'zhangsan') //string
console.log(typeof goSchool) //undefined
console.log(typeof Symbol()) //symbol
console.log(typeof BigInt(10)) //bigint
console.log(typeof Object()) //object
console.log(typeof Array()) //object
console.log(typeof function sum(){}) //function
</script>
5.JS的运算符
算数运算符 +、 - 、*、 / 、% 、 ++ 、 --
赋合运算符 = 、+= 、-= 、 *= 、 /= 、 %=
关系运算符 > 、>= 、 < 、<= 、==、===(全等于 , 仅js) 、!= (结果只能为boolean类型)
逻辑(位)运算符 && 、 || 、 !
三目运算符 关系表达式 ? 值1 : 值2;
5.1算数运算符
字符串连接符:+ (当数值与字符串运算时会拼接)
<script>
//测试运算符
var x=100
var y=30
//第一个+表示字符串和后面的拼接,第二个加号 表示运算
console.log("sum:"+(x+y)) //sum=130
// 案例 字符串拼接训练
console.log("sum:"+100+200)//sum:100200
console.log(100+200+"sum:")//300sum:
console.log(100+200+"sum:"+100+200)//300sum:100200
console.log("sub:"+(x-y))//sub:70
console.log("mul:"+(x*y))//mul:3000
console.log("div:"+(x/y))//div:3.333333333333
//自增
var a=10
var b=20
var c= a ++
var d= ++ b
console.log("a="+ a +",b="+ b +",c="+ c +",d="+ d)
//a=11 b=21 c=10 d=21
</script>
注意:字符串类型与数字类型的运算中,只有相加会进行字符串拼接,而减、乘、除运算中,字符串中的数值可与字符串进行数学运算。
5.2关系运算符
结果是boolean类型,===(恒等于)比较的是值和类型
<script>
//测试
var a=20
var b=30
console.log(a!=b) //true
//==比较的是值 不看类型
console.log(a==b) //false
var c="30"//字符串
console.log(b==c) //true
//===恒等于 比较值和类型
console.log(c===b) //false
</script>
5.3位运算符
1.与或非(逻辑)运算 ----与运算一假则假,或运算一真必真
&& || !
2.位运算符(本质就是二进制运算)
&:位与
|:位或
~:位反
^:异或 相同取0 相异取1
<<:左移运算 正负数都是 高位丢弃、低位补0
>>:右移运算 对于正负数的右移运算,正数高位补0,负数高位补1
>>>:无符号的右移运算 对于负数,整个32位都需要向右移动,且高位补0
3.正负数的二进制计算方式
原码 反码 补码 ----正数原反补码相同, 负数反码等于原码按位取反,补码等于反码末位+1
x= 12: 0000 1100
0000 1100
y= -9 : 1111 0111
原码:0000 1001
反码:1111 0110
补码:1111 0111
4.
x:0000 1100
y:1111 0111
x & y =0000 0100 =>4
x | y =补1111 1111 =>反1111 1110 =>原 0000 0001 =>保留符号位 -1
~x= 补 1111 0011 => 反 1111 0010 =>原 0000 1101=>-13
~y= 0000 1000 =>8x^y=补1111 1011=>反1111 1010=>原0000 0101=>-5
x ^ y =补 1111 1011=>反 1111 1010=>原 0000 0101 -5
x << 3 =0110 0000 =>96
y << 3 =补 1011 1000 =>反 1011 0111 => 原 0100 1000 -72
x>>3 = 0000 0001 =>1
y>>3=补1111 1110 =>反1111 1101=>原0000 0010 -2
x>>>2 = 0000 0011 3
y>>>30 = 0011...11111 1111 1111 1101 ==>比较大了
5.4复合运算
<script>
var x=100
x +=100 //<==>x = x + 100
console.log(x) //200
x%=2
console.log(x) //0
</script>
5.5三目运算
格式:boolean表达式 ? 结果1 :结果2 ;
如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回
<script>
//案例
// var age=20
// res=age>=18 ? "成年" : "不成年" ;
// console.log(res)
year=prompt("请输入需要计算的年份:")
Year=(year%4==0 && year%100!=0)||year%400==0 ? "闰年" :" 平年" ;
console.log(Year)
</script>
6.JS流程控制语句
6.1 if分支
<script>
if (条件表达式) {
代码块;
} else if(条件表达式){
代码块;
} else {
代码块;
}
</script>
JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。
JS中对各种数据类型作为布尔值有以下特点:
类型 | 用法 |
---|---|
boolean | true为真、false为假 |
number | 非0为true |
string | 除了空字符串(""),其他都是true |
null&undefined | 都是false |
对象 | 所有对象都是true |
无意义的数据都为false 反之都为true。
6.2 switch分支
格式:
switch:(变量/表达式){
case 1:
语句体1;
break;
// 表示跳出当前case,如果没有break,则会依次向下执行到有break的case为止
case 2:
语句体2;
break;
....
case n:
语句体n;
break;
default:
// default默认的出口,可以省略不写,不写则不执行任何不匹配的语句体
默认语句;
break;
}
<script>
var x=3
//key可以为任意类型
switch (x) {
//value可以为任意类型
case 4:
alert("me is 4")
break;
case 5:
alert("me is 5")
break;
case 3:
alert("me is 3")
break;
default:
alert("所有case不匹配则执行default")
break;
}
</script>
6.3 for循环
循环三要素:-循环变量 -循环条件 -循环变量的改变
格式:
普通for循环:for(循环变量;循环条件;循环变量的改变){循环体}
增强for循环:for( let 变量名 of 对象 ) { 需要执行的代码;}
索引for循环:for( let 变量 in 对象 ) { 需要执行的代码}
执行逻辑:
1.循环变量---只定义一次
2.循环条件
3.循环体
4.循环变量改变
5.循环条件
6.循环体
7.循环变量改变
。。。。
代码演示:
<script>
// 定义数组
let arr = ["张三","李四","王五"];
console.log("===================普通for循环===================");
// 普通for循环
for (let i = 0 ; i < arr.length ; i++) {
console.log(arr[i]);
}
console.log("===================forof循环===================");
// for of循环
for (let e of arr) {
console.log(e);
}
console.log("===================forin循环===================");
// for in循环
for (let index in arr) {
console.log(arr[index]);
}
</script>
forof 与 forin之间的区别
1. forin可以遍历对象,forof不能遍历对象
2. forin遍历出数组中的索引,forof遍历出数组中的元素
6.4while循环
while一般用在一个确定的范围中循环
格式:while(boolean表达式){循环体}
break和continue的区别:
break:跳出所有循环
continue:跳出本次循环
代码演示:
<script>
// 案例一:计算0~100内的和
var i=0
var sum =0
while(i<=100){
sum+=i
i++
}
console.log(sum)
//案例二 :计算除了51的奇数和
var i=0
var sum =0
while(i<=100){
// 判断是否为奇数,且!=51
if(i%2==1 && i!=51){
sum+=i
}
i++
}
console.log(sum)
// 案例三:输入用户名和密码完成登录,如果用户名或密码错误则重新登录
// do{
// var username=prompt("username:")
// var password=prompt("password:")
// }while(username!="zhangsan"||password!="123")
</script>
6.5 do-while循环
格式:do{
循环体
}while(boolean类型的表达式)
!do-while无论条件循环满足与否都会执行一次循环体--应用:登录系统
7. 数组
7.1数组基础
(1)格式:
var 数组名 = [元素1,元素2,元素3......];
var 数组名 = new Array(元素1,元素2,元素3......);
(2)数组的访问
通过 数组名 [ 下标 或 索引 ] 范围为: 0 ~ arr.lenght-1
(3)数组的变量(获取所有数组的元素)
-for
-for in 遍历的是下标,通过下标获取数组元素
-for of 遍历的是元素值
<script>
var arr1=[]//创建一个空数组
var arr2=[1,2,3,4,5,6,7]//创建有元素的数组
var arr3=new Array()//创建一个空数组
var arr4=new Array(1,2,3,4,5,true,"zhangsan")//创建有元素的数组
var arr5=new Array(10)//创建具备初始长度的空数组
var arr6=[1,2,3,4,5]
console.log("数组的长度:"+arr6.length)//个数为5
console.log("数组元素为3:"+arr6[2])
console.log("数组最后一个元素:"+arr6.length-1)
for(var i=0;i<arr6.length;i++){
console.log(arr6[i])
}
for (const key in arr6){
console.log(arr6[key])
}
for (const i of arr6){
console.log(i)
}
</script>
7.2数组常见API
API(Application progromming Interface):应用程序接口---程序自带的功能(即函数)
方法 | 说明 |
---|---|
concat() | 合并两个及以上的数组 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度,原数组发生改变 |
join(参数) | 将数组中的元素按照指定的分隔符拼接为字符串 |
pop | 删除数组的最后一个原因并返回,原数组发生变化 |
splice | splice(起始索引,结束索引):删除且返回对应索引区间的元素 splice(起始索引,结束索引,替换的元素):删除且返回对应索引区间的元素,替换元素,原数组发生变化 |
reverse | 颠倒数组中元素的顺序 |
shife | 删除数组的第一个元素,并返回,原数组发生变化 |
slice | slice(起始索引,结束索引(不包含)):选取对应索引区间的元素,并将他存储在新的数组中 slice(起始索引):返回从索引位置处后续的所有元素 |
sort | 正序排序 且按照第一个字符排序,可以执行排序规则 |
<script>
var arr1=[1,2,3,4,5]
var arr2=[6,7,8,9,10]
//1.concat(第二个数组):合并两个数组
console.log("concat:"+arr1.concat(arr2))
//2.join(分隔符) 将数组转成字符串,并制定器分隔符
console.log("join:"+arr1.join("/"))
//3.pop:删除数组的最后一个元素并返回,原数组发生变化
console.log("pop:"+arr1.pop())//5
console.log("pop后的arr1:"+arr1)//1,2,3,4
//4.push:在数组的末尾追加元素,并返回长度,且追加多个元素之间用逗号隔开
console.log("push:"+arr1.push(55,66))//6
console.log("push后的arr1:"+arr1)//1,2,3,4,55,66
//5.splice(起始索引,结束索引):删除且返回对应索引区间的元素
//5.splice(起始索引,结束索引,替换的元素):删除且返回对应索引区间的元素,替换元素,原数组发生变化
console.log("splice:"+arr1.splice(1,3,"zhangsan"))//1,2,3
console.log("splice删除后的arr1:"+arr1)//1,zhangsan,55,66
//6.reverse():颠倒数组中元素的顺序
console.log("reverse:"+arr2.reverse())//10,9,8,7,6
//7.shift():删除数组的第一个元素,并返回,原数组发生变化
console.log("shife:"+arr2.shift())//10
console.log("shife:"+arr2)//9,8,7,6
//8.slice(起始索引,结束索引(不包含)):选取对应索引区间的元素,并将他存储在新的数组中
//8.slice(起始索引):返回从索引位置处后续的所有元素
console.log("slice新的数组:"+arr2.slice(1,3))//新的数组:[8,7]
console.log("slice:"+arr2)//[9,8,7,6]
//9.sort():正序排序 且按照第一个字符排序,可以执行排序规则,(函数学完后补充)
console.log("sort:"+arr2.sort())
//案例:输入一段字符串,判断是否是回文数 abcba ...
var str=prompt("请输入一段字符串:")
var arrStr=str.split('').reverse().join('')
if(arrStr==str){
alert("是回文数")
}else{
alert("不是回文数")
}
</script>
8.JS函数
js函数是执行特定功能的代码块,也可以称为js方法。
8.1函数基础
(1). 格式:
function 函数名(参数){
函数体;
[ return 返回值;]
}
(2).函数的参数
形式参数(形参)
函数在定义时的参数,内存没有分配空间
实际参数(实参)
函数在调用时的参数,内存是开辟了传递事件的空间数值的
默认值参数
格式:在函数定义时,使用 参数名 = 值 的形式给定默认值
-特点:
在函数调用时,可以不用参数,使用默认值,也可以自行置顶参数
默认值参数在定义时,一般放在普通参数之后
(3).函数的调用
使用 函数名(参数)调用函数
(4). 函数的调用过程
-在函数定义时,会被加载到堆中,表示当前函数对象的方式为内存空间,他是一个十六进制的整数数值
-函数被调用时,会在栈中开辟一个块栈帧,里面存储定义在函数内部是局部变量--压栈
-函数调用完毕数,栈帧被销毁,同时局部变量也被销毁--弹栈
-函数调用的本质为压栈
代码演示:
<script>
//1.定义函数
function alertTest(){
alert(1)
alert(2)
alert(3)
}
//2.函数的调用
alertTest()
//案例一:实现一个功能,计算两数的和,获取两个数,加法运算
function sum(a,b){
console.log(a+b)
}
sum(100,300)
//案例二-计算圆的面积,半径为参数
function areacircle(r,PI=3.14){
console.log(r ** 2 * PI)
}
areacircle(4,3)
//案例三-计算1-n内的和
function sumX(n){
let sum=0
for(let i=0;i<= n;i++){
sum += i
}
return sum//立即结束函数,返回被调处
}
var res = sumX(100)
console.log(res)
</script>
8.2函数高级
(1)函数参数对象argument
arguments:获取函数的参数并封装为一个argument对象, 通过他可以在函数内部获取传递的参数数据及长度等等
<script>
//1.测试arguments对象
function TestA(a,b,c,d){
console.log(arguments) //arguments对象内容
console.log(arguments.length) //测试当前参数的长度
console.log(arguments[0]) //1
console.log(arguments[1]) //2
console.log(arguments[2]) //3
console.log(arguments[3]) //4
}
TestA(1,2,3,4)
</script>
(2)匿名函数 --没有函数名的函数
function () { 函数体 }
主要将函数作为参数传递,简化传递过程
-将函数作为参数传递
-使用匿名函数传递参数
匿名函数的另一种写法:
-立即执行函数---不用调用---直接运行的函数
(3)lambda表达式(箭头函数)*重要 ---简化函数的写法
()=> { 函数体 }
<script>
//2.将函数作为参数传递
function show(fn){
console.log("在show函数的内部运行参数为函数的参数"+fn())
}
/*function sum(){
return 100 +200
}*/
//3.匿名函数
show(function(){
alert("zhangsan")
})
//4.匿名函数变形
var TestB=function(){
alert("lisi")
}
TestB();
//5.立即执行函数---在末尾记得加分号,不然会出现问题
(function(){alert("wangwu")})();
//6.箭头函数的几种写法
//function test(){
// alert("zhaoliu")
// }
// test();
//6.1无参的
var test = () => {alert("zhaoliu")}
test();
//6.2如果函数的代码题只有一行代码,可以吧花括号省略,但不建议
var test1 = () =>alert("zhaoliu1")
test1();
//6.3具备一个参数的函数
var test2=(x)=>{alert("x:"+x)}
test2(10);
//6.4具备多个参数
var test3=(x,y)=>{alert(x+y)}
test3(10,20);
//6.5如果是多行代码时
var sum = (n) => {
let s=0;
for(i=0;i<=n;i++){
s+=i;
}
return s;
}
res=sum(100)
alert(res)
</script>
9.JS的常用内置函数
9.1 String对象
三种方式:单引号、双引号、反引号。
常见的几种方法:
substring() 提取字符串中两个指定的索引号之间的字符,包左不包右
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
replace() 替换与正则表达式匹配的子串。
charAt() 返回指定字符第一次出现的索引。
trim() 移除字符串首尾空白
split(delimiter) 把字符串分割为子字符串数组;分割为数组
<script>
//1.创建字符串的几种形式:单引号、双引号、反引号
var str1='this is zhangsan'
var str2="zhangsan"
var str3=`zhangsan`
console.log(str1)
console.log(str2)
console.log(str3)
var str4 = new String("zhangsan") //Object //字符串的本质就是一个字符数组
var str5 =String("zhangsan") //string
console.log(typeof str4)
console.log(typeof str5)
console.log(str4[0]) //z
console.log(str5)
//字符串的常见方法
console.log("字符串的长度"+str1.length)
console.log("根据索引找字符charAt:"+str1.charAt(str1.length-1))
console.log("返回指定字符第一次出现的索引indexOf:"+str1.indexOf("n")) //11
console.log("返回指定字符最后一次出现的索引lastIndexOf:"+str1.lastIndexOf("n"))//15
console.log("返回指定索引字符对应的ACSII码整数数值charCodeAt:"+str1.charCodeAt(10)) //a:97
console.log("拼接两个字符串,参数可以为多个concat:"+str1.concat(str2)) //his is zhangsanzhangsan
console.log("字符串的替换(第一次出现的字符)参数目标字符机替换字符replace:"+str1.replace("a","A"))
console.log("字符串的替换(替换所有出现的字符)参数目标字符机替换字符replaceAll:"+str1.replaceAll("a","A"))
//字符串的截取
console.log("参数为起始位置和结束位置不包括结束位置slice:"+str1.slice(0,4)) //this
console.log("参数为起始位置和截取长度substr:"+str1.substr(8,8)) //zhangsan
console.log("参数为起始位置和结束位置不包括结束位置,可以倒序subString:"+str1.substring(0,4)) //this
console.log("参数为起始位置和结束位置不包括结束位置,可以倒序subString:"+str1.substring(4,0)) //this
console.log("根据指定字符分隔字符串"+str1.split("a"))
console.log("转大写:"+ str1.toUppercase())
console.log("转小写:"+ str1.toLowercase())
</script>
9.2 Math对象
Math对象不用创建,直接使用。 Math.方法名();
常用方法:
方法 | 说明 |
---|---|
round(x) | 把数四舍五入为最接近的整数。 |
floor(x) | 向下取整 |
ceil(x) | 向上取整 |
random() | 随机数,返回 0 ~ 1 之间的随机数。 含0不含1 |
代码演示:
<script>
//1.圆周率
console.log(Math.PI)
//2.e底数
console.log(Math.E)
// 3.ln
console.log(Math.LN10)
console.log(Math.LN2)
// 4.根号
console.log(Math.SORT2)
//5.*!!!向下取整
console.log(Math.floor(3.14))//3
//6.向上取整
console.log(Math.ceil(3.14))//4
//7.四舍五入
console.log(Math.round(3.14))//3
console.log(Math.round(3.54))//4
//8.绝对值
console.log(Math.abs(-5))//5
//9.最大值和最小值
console.log(Math.max(10,4))//18
console.log(Math.min(10,4))//4
//18.*!!!随机数
console.log(Math.random())//0.0~1.0之间的数字且不包含1.0
console.log(Math.floor(Math.random()*100))//0-100内的整数
</script>
9.3 Date对象
创建对象:var date = new Date();
<script>
//1.创建日期对象,默认获取当前时间
var date =new Date()
console.log(date)//Thu Aug 22 2024 16:06:02 GMT+0800 (中国标准时间)
//2.获取指定时间对象
date=new Date("2004-03-07 12:08:06")
console.log(date)//Sun Mar 07 2004 12:08:06 GMT+0800 (中国标准时间)
//3.获取时间分量
//获取年份
console.log(date.getFullYear()) //2004
//获取月份 (月份的份量是从0开始的)
console.log(date.getMonth()) //2
//获取日期
console.log(date.getDate()) //7
//获取时、分、秒、毫秒 1s=1000ms
console.log(date.getHours()) //12
console.log(date.getMinutes()) //8
console.log(date.getSeconds()) //6
console.log(date.getMilliseconds()) //0
//获取星期数
console.log(date.getDay()) //0
//案例一:计算现在离国庆还有多少时间
var time1=new Date().getTime()
var time2=new Date("2024-10-01 00:00:00").getTime()
var res=time2-time1 // ms -->h
console.log("距离国庆还有"+res/1000/60/60+"小时")
console.log("距离国庆还有"+res/1000/60/60/24+"天")
</script>
10.BOM编程
BOM(Browser object Model) 浏览器对象模型
每打开一个网页,JS根据ES6语法规范操作浏览器窗口,比如弹出框、控制浏览器跳转、获取浏览器分辨率等,BOM把浏览器当做一个对象来看待,BOM的核心就是window。window的作用域:整个web页面。
BOM比DOM更大,它包含DOM。BOM的组成部分如下:
window窗口 // 整个浏览器的窗口
|-- history // 浏览器的历史记录
|-- location // 浏览器地址
|-- screen // 屏幕分辨率
|-- navigator // 浏览器内核信息
|-- document // 文档对象(DOM)
window对象是BOM顶层对象;
window对象是JS访问浏览器窗口的一个接口;
window对象是一个全局对象,声明的所有的全局变量和全局方法函数最终都是window对象的属性或者方法,在调用的时候可以省略 window。前学习的alert()、prompt()、confirm()方法都属于window对象的
window常见属性和方法:
setTimeout 延时器:setTimeout(执行器(函数-一般使用匿名函数或箭头函数),延时时间(ms))
setInterval 定时器:setInterval(执行器(函数-一般使用匿名函数或箭头函数),定时时间(ms))
clearInterval 清除定时器 - setInterval
open(‘URL’):打开新的浏览器窗口。
close():关闭新打开的窗口(仅能关闭通过open方法打开的窗口)
<script>
//alert 是属于window对象的,但一般会省略window不写
//window.alert("zhangsan")
console.log(window)
//1.常用属性
//-*当前窗口可视区的宽和高(不包含底部任务栏、上面的导航栏、调试窗口)
console.log(window.innerWidth)
console.log(window.innerHeight)
//-窗口的宽和高 不包含底部任务栏、包含上面的导航栏、调试窗口
console.log(outerHeight)
console.log(outerWidth)
//-水平轴浏览器的偏移量
console.log(window.screenLeft)
console.log(window.screenX)
//-垂直轴浏览器的偏移量
console.log(window.screenTop)
console.log(window.screenY)
//-window对象的属性
name="这是操作window的一个测试页面"
console.log(window.name)
//案例一:3s后跳转到百度 (延时器)
//setTimeout(执行器(函数-一般使用匿名函数或箭头函数),延时时间(ms))
window.setTimeout(()=>{
location.href="https://www.baidu.com"
},3000);
//案例二:每1s刷新一次页面 (定时器)
// setInterval(执行器(函数-一般使用匿名函数或箭头函数),定时时间(ms))
setInterval(()=>{
location.reload()
},1000)
//案例三、回到顶部、底部
function goFooter(){
window.scrollTo(0,2500)
}
function goTop(){
window.scrollTo(0,0)
}
</script>
<body>
<button onclick="goFooter()">回到底部</button>
<li></li>
<li></li>
<li></li>
略
<li></li>
<button onclick="goTop()">回到顶部</button>
</body>
window子对象:
screen对象:包含显示设备信息
//显示器的分辨率
console.log(screen.width)
console.log(screen.height)
//静态可视区的宽高(不包含任务栏的)
console.log(screen.availHeight)
console.log(screen.availWidth)
location对象:
location.href="https://www.baidu.com" // 跳转到百度
location.reload() // 重新加载、刷新页面
history对象:
//返回当前浏览器的历史url---网址
console.log(history.length)
console.log(history)
console.log(Math.random())
//回退
function goBack(){
//history.back()
history.go(-1) // 使用频率高,一般参数为负数则后退x步,参数为正则前进x步
}
//前进
function goForward(){
//history.forword()
history.go(1)
}
navigator对象:
//-浏览器名称
console.log(navigator.appName)
//-浏览器的版本信息
console.log(navigator.appVersion)
11.DOM编程
-DOM(Document Object Model)文档对象模型
-dom:主要指window下的document对象,使用document操作html文档中的其他元素
(1)dom的常见属性:
console.log(document)
console.log(document.cookie)//设置或返回当前文档的cookie
console.log(document.domain) //当前文档的域名
console.log(document.URL) //html页面的网址
console.log(document.title) //html页面的标题
(2)获取dom的几种方式
<body>
<div id="test1">div-test1</div>
<div id="test2" class="cls" name="nme">div-test2</div>
<div id="test3" class="cls" name="nme">div-test3</div>
</body>
<script>
//-通过id获取
var div_test1 = document.getElementById("test1")
console.log(div_test1)
//-通过class属性获取 返回一个文档集合HTMLCollection
var div_cls = document.getElementsByClassName("cls")
console.log(div_cls) //HTMLCollection的集合
console.log(div_cls[0])//test2
console.log(div_cls[1])//test3
//-通过name属性获取 返回一个节点列表NodeList
var div_nme = document.getElementsByName("nme")
console.log(div_nme)
console.log(div_nme[0])
console.log(div_nme[1])
//-通过标签名称获取 返回一个文档集合HTMLCollection
var div_tag =document.getElementsByTagName("div")
console.log(div_tag)
console.log(div_tag[0])
console.log(div_tag[1])
console.log(div_tag[2])
//-通过选择器获取 querySelector() 只匹配满足条件的第一个元素
var div_selector = document.querySelector("#test1") //id选择器 -- 匹配一个
console.log(div_selector)
var div_selector2 = document.querySelector(".cls") //class选择器 -- 匹配多个
console.log(div_selector2)
//-通过选择器获取所有 返回一个节点列表NodeList
var div_selectors = document.querySelectorAll(".cls") //class选择器 -- 匹配多个
console.log(div_selectors)
console.log(div_selectors[0])
console.log(div_selectors[1])
</script>
(3)操作dom对象的内容
<script>
// 1.获取当前要操作的元素dom对象
var mgs = document.getElementsByClassName("mgs")[0]
// 2.操作内容
// -*-innerHTML 造成XSS攻击 标签会生效
mgs.innerHTML ="<h1 style='color:red;'>修改后的内容</h1>"
// --innerText 只改文本,标签不会生效 非W3C标准
mgs.innerText ="<h1 style='color:red;'>修改后的内容</h1>"
// --textContent 推荐使用 W3C标准
mgs.textContent ="<h1 style='color:red;'>修改后的内容</h1>"
</script>
(4)操作dom对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dom操作属性</title>
<style>
.test1{
width: 200px;
height:200px;
border: 1px solid grey;
margin: auto;
text-align: center;
box-shadow: 10px 10px 10px;
font-size: 20px;
color: red;
background-color: antiquewhite;
}
.test1{
width: 200px;
height:200px;
border: 1px solid grey;
margin: auto;
text-align: center;
box-shadow: 10px 10px 10px;
font-size: 20px;
color: red;
background-color: rgb(45, 169, 99);
}
</style>
</head>
<body>
<div id="test1" class="test1" name="test1" title="默认标题" >测试内容</div>
<button onclick="changeBackgroundColor()">点一下</button><br>
username: <input type="text" name="username" value="zhangsan">
</body>
</html>
<script>
//案例一:修改div的title的属性值
var test1 = document.querySelectorAll("[title]")[0]
console.log(test1.getAttribute("title"))
test1.setAttribute("title","修改后的标题")
//1.修改属性值的几种方式
// -dom对象.属性名 = 属性值
test1.title="修改后的标题2"
console.log(test1.title)
// -dom对象["属性名"]
test1["title"]="修改后的标题3"
console.log(test1["title"])
// -推荐:获取属性: getAttribute(属性名) 设置属性:setAttribute(属性名,修改的属性值)
//案例二:修改背景颜色
test1.setAttribute("class","test2")
//案例三:点击按钮改变div的背景色,---深层逻辑,改变了class的属性值
function changeBackgroundColor(){
if(test1.getAttribute("class") == "test1"){
test1.setAttribute("class","test2")
}else{
test1.setAttribute("class","test1")
}
}
//案例四:修改文本框中的值
var input = document.querySelectorAll("[name=username]")[0];
// input.value = "lisi"
// input["value"]= "lisi"
input.setAttribute("value","wangwu")
</script>
(5)dom获取样式
<body>
<div id="test1" style="width: 200px; height: 200px; background-color: aqua;">test1</div>
</body>
</html>
<script>
var test1 = document.getElementById("test1")
//获取样式的几种方式
// -dom.style.样式名(通过这种方式获取样式名可能和css定义的样式名不一样)
console.log(test1.style.width)
console.log(test1.style.height)
console.log(test1.style.background)
test1.style.width="300px"
test1.style.height="300px"
// -通过getComputeStyle获取
console.log(getComputedStyle(test1).width)
console.log(getComputedStyle(test1).height)
console.log(getComputedStyle(test1).background)
// -无单位获取 样式偏移量
console.log(test1.offsetWidth)
console.log(test1.offsetHeight)
console.log(test1.offsetTop)
console.log(test1.offsetLeft)
</script>
12.JS事件
12.1 事件驱动方式
(1)JS采取事件驱动式编程方式,通过事件驱动响应用户的操作(点击、按压、移动等等)
(2)事件的过程
-事件源:一般指的时HTML标签元素,浏览器的窗口等
-事件处理函数:触发了事件后执行了哪个函数
-事件对象:事件的触发也会具备事件对象,包含事件的信息
事件源==事件对象 ==》 事件处理函数
(3)this:关键字,指代当前对象
(4)JS三大事件方式
-.标签方式 ————事件的驱动写在标签内部 --得不到事件对象,缺乏分离
-.dom0方式 —————可以得到事件对象--事件和过程完成分离
-.dom2方式 ——————推荐方式,可以得到事件对象--事件和过程完全分离--具备捕获和冒泡
<body>
<!-- 事件源 -->
<button onclick="test1()">点我试试</button>
<button id="test2">dom0事件</button>
</body>
</html>
<script>
//1.获取事件的方式 -标签方式
//事件函数
function test1(){
//获取事件对象 ---获取不到
//console.log(e)
//当使用这种方式时,this指向window对象
console.log(this) //window
alert("zhangsna")
}
//2.获取事件的方式 -dom0
//获取dom
var test2 = document.getElementById("test2");
//使用dom0驱动事件
test2.onclick =function(e){
//测试事件对象和this的指向
console.log(e)//PointerEvent 事件对象
console.log(this)//事件源
alert("lisi")
}
//3.获取事件方式 -dom2
//添加事件监听:addEventListener ("事件行为",事件执行函数,捕获和冒泡)
test2.addEventListener("click",function (e) {
console.log("---------------------------")
//测试事件对象和this的指向
console.log(e) //PointerEvent 事件对象
console.log(this) //事件源
},false)
</script>
12.2捕获和冒泡
1.dom2事件方式,addEventListener(事件类型,事件函数,布尔类型(捕获和冒泡))
2.捕获和冒泡
捕获:true 代表捕获 window -document-html-body=>日标元素
推荐冒泡:false 代表冒泡 目标元素 -...body-html-document-=>window
<style>
#outer{
width: 400px;
height: 400px;
margin: auto;
background-color:aqua;
border: 1px solid rebeccapurple;
}
#inner{
width: 200px;
height: 200px;
margin: auto;
background-color:brown;
border: 1px solid yellow;
}
</style>
</head>
<body>
<button id="btn">这是一个普通按钮</button>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
<script>
//1.测试捕获和冒泡
//获取外层div dom对象
var outer = document.getElementById("outer")
//外层捕获
outer.addEventListener("click",function(){
alert("外层捕获")
},true)
//外层冒泡
outer.addEventListener("click",function(){
alert("外层冒泡")
},false)
//获取内层div dom对象
var inner = document.getElementById("inner")
//内层捕获
inner.addEventListener("click",function(){
alert("内层捕获")
},true)
//内层冒泡
inner.addEventListener("click",function(){
alert("内层冒泡")
},false)
//2.测试清除事件
var btn = document.getElementById("btn")
//抽取执行函数
var fn = function(){
alert("zhangsan")
}
//dom2 添加事件
btn.addEventListener("click",fn,false)
//清除事件
btn.removeEventListener("click",fn,false)
</script>