JavaScript基础学习笔记
javascript
一、变量与数据类型
变量：存储数据的容器。
//var 声明变量
var s = "hello world";
console.log(s);
//定于多个变量，可以使用逗号分开
var s1="hello", s2="world";
console.log(s1);
console.log(s2);
变量命名规范：
变量名要见名知意；
变量名可以是字母、下划线、$、还有数字；但是不能以数字开头；
小写字母开头、多个单词、第二个单词首字母大写（驼峰命名）；
不可以与关键字、保留字重复；
1、数据类型
数值（Number） //100,1,2,3
字符串（String）//"hello world" "你好世界"
布尔（Boolean） //true false
未定义（Undefined） //undefined
空（Null） //null 空
对象（Object） //{}
二、表达式与运算符
1、字面量和表达式
var str1 = "hello"; //将字面量赋值给变量
var str2 = "world";
var result = str1 + str2;//将表达式赋值给变量
console.log(result);
2、数字运算符
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| + | 加法 | 20+10 | 30 |
| - | 减法 | 20-10 | 10 |
| * | 乘法 | 20*10 | 200 |
| / | 除法 | 20/10 | 2 |
| % | 求余 | 11%2 | 1 |
| ++ | 自增1 | ++7 或 7++ | 8 |
| – | 自减 | –7 或7– | 6 |
3、比较运算符
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| > | 大于 | 20>10 | true |
| < | 小于 | 20<10 | false |
| >= | 大于等于 | 20>=10 | true |
| <= | 小于等于 | 20<=10 | false |
| == | 等于 | 20==“20” | true |
| != | 不等 | 20!=10 | true |
| === | 恒等于(全等于) | 20===“20” | false |
| !== | 非恒等于 | 20!==“20” | true |
4、逻辑运算符
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| && | 与 | true && false | false |
| || | 或 | true || false | true |
| ！ | 非 | !true | false |
5、赋值运算符
| 运算符 | 描述 | 示例 | 等同于 |
|---|---|---|---|
| = | 赋值 | x=10 | |
| += | 加并赋值 | x+=y | x=x+y |
| -+ | 减并赋值 | x-=y | x=x-y |
| *= | 乘并赋值 | x*=y | x=x*y |
| /= | 除并赋值 | x/=y | x=x/y |
三、条件语句
程序执行流程主要分为三种：
1.按顺序执行
2.按条件执行
3.循环执行
1、if语句
if(boolean){
//语句块
}
if(boolean){
//语句块1
}else{
//语句块2
}
2、switch语句
可以实现多重选择，某些情况相对于if语句更简洁。
switch(){
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}
3、条件运算符
boolean ? value1 : value2
num1>num2 ? "数字1大于数字2" : "数字1小于或等于数字2"
var num1=10,num2=20;
var str = num1>num2 ? "num1大于num2" : "num1小于或者等于num2";
console.log(str);
四、循环语句
1、while循环
while(条件){
语句；
语句；
}
var i =0;
while (i<10){
console.log(i);
i++;
}
//计算100以内所有正整数的加和
var i=1,sum=0;
while (i<=100){
sum+=i;
i++;
}
console.log(sum);
//在控制台输出100以内所有奇数
var i=0;
while(i<100){
if(i%2===1){
console.log(i);
i++;
}
}
2、do…while循环
var i=0
do{
console.log(i);
i++;
}while(i<10)
3、for循环
for(var i=0;i<10;i++){
console.log(i);
}
//计算100以内所有正整数的加和
sum=0;
for(var i=1;i<=100;i++){
sum+=i;
}
console.log(sum);
//在控制台输出100以内所有奇数
for(var i=0;i<100;i++){
if(i%2===1){
console.log(i);
}
}
4、中断循环
break; 跳出循环（结束循环）
continue; 跳出当前循环，继续执行后续循环
for(var i=0;i<10;i++){
if(i===5){
break;
}
console.log(i);
}
五、函数基础
函数是一个可执行的语句块（通过function关键字声明）
声明的时候不执行语句块
调用函数时执行
//声明函数
function fun(){
语句块
}
//调用函数
fun();
传递参数：
通过参数可以让函数的功能更具扩展性。
形参：声明函数的时候可以定义；
实参：调用函数的时候传递实参；
function fun(x,y){
var result=3*x+4*y;
console.log(result);
}
fun(2,3);
返回值：
返回值表示函数运行之后的结果。
将返回值赋值给变量。
function fun(x,y){
var result=3*x+4*y;
return result;
}
console.log(fun(2,3));
六、对象
var cat={
name:"miaomiao",
age:2
}
console.log(cat.name);
console.log(cat["name"]);
1、方法
属性的值是一个函数，则成为方法
var cat={
name:"mm",
age:2,
sayName:function(){
console.log("我是mm");
}
}
cat.sayName();
可以传参，返回值
var cat={
name:"miaomiao",
sayName:function(){
console.log("我是miaomiao");
},
eat:function(food){
console.log("吃" +food);
},
computed:function(n,m){
return n+m;
}
}
var result = cat.computed(1,2);
console.log(result);
2、this
方法中的this可以指向对象本身
var cat={
name:"mm",
age:2,
sayName:function(){
console.log("我是" +this.name);
}
}
3、对象的分类
自定义对象（封装）
内置对象（例如Date，获取当前时间）
宿主对象（document）
第三方库的对象（jQuery，vue等）
七、数组
数组是一个特殊的对象，可以按顺序存储数据。
var list = [1,2,3,4,5];
//new 构造函数
var list = new Array("a","b","c");
1、获取数组中的元素
通过下标获取数组中的元素
list[0];
list[1];
获取数组元素的个数：list.length
2、遍历数组
2.1、while循环遍历
var list=["a","b","c","d","e","f"];
var i =0;
while(i < list.length){
console.log(list[i]);
i++;
}
2.2、for循环遍历数组
var list=["a","b","c","d","e","f"];
for(var i =0,i<list.length,i++){
console.log(list[i]);
}
2.3、for in遍历（ i 为索引）
var list=["a","b","c","d","e","f"];
for (var i in list){
console.log(list[i]);
}
2.4、for of遍历（ i 为值）
var list=["a","b","c","d","e","f"];
for (var i of list){
console.log(i);
}
2.5、 map方法遍历
var list=["a","b","c","d","e","f"];
list.map(function(value,index){
console.log(value); //value:值，index:索引
});
3、数组常用方法
3.1、map
3.2、push
var list=["a","b","c","d","e","f"];
list.push("g");
console.log(list);//a,b,c,d,e,f,g
3.3、sort（排序）
var list=[1,3,5,4,2];
list.sort();
console.log(list); //1,2,3,4,5
3.4、filter（过滤器）
var list=[1,3,5,4,2];
var newList = list.filter(function(item){
if(item>=3){
return item;
}
});
console.log(newList); //3,5,4
3.5、join（连接）
var list=["a","b","c","d","e","f"];
var str = list.join("+");
console.log(str); //a+b+c+d+e+f
3.5.1、split（将字符串拆分为数组）
var str = "2020-1-1";
var list =str.split("-");
console.log(list); //"2020","1","1"
例题：找出数组[4,6,1,2,3,7,5]中的最大值的索引。
var list =[4,6,1,2,3,7,5];
var max=list[0];
var i =0;
list.map(function(value,index){
if(value>max){
max=value;
i=index;
}
})
console.log(max);
console.log(i);
八、内置对象
1、Array-数组
2、Math-数学
math.floor();向下取整
var number =3.14;
var result=math.floor(number);
console.log(result); //3
math.random();0-1的随机数
var result= math.random();
console.log(result); //0-1随机数
math.abs();绝对值
var number= -3.99;
var result =math.abs(number);
console.log(result); //3.99
math.sqrt(9);开方
var number=9;
var result=math.sqrt(number);
console.log(result); //3
math.pow(2，4);乘方
var number=2;
var result=math.pow(number,4);
console.log(result); //16
例题1：获取1-10之间的随机数。
var result =math.floor(math.random() * 10 +1);
console.log(result);
例题2：随机点名.
var list =["钢铁侠","绿巨人","蝙蝠侠","雷神"];
var index=math.floor((math.random()*list.length));
console.log(list[index]);
3、Date-日期
var d= new Date();
var d_target = new Date("2020-1-1");
d.getFullYear();
d.getMonth(); //月份从0开始
d.getDate();
d.getDay();
d.getHours();
d.getMinutes();
d.getSeconds();
d.getTime(); //时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数
3.1、计时器方法setInterval
setInterval(function(){},ms);
例题：在控制台输出当前时间，每秒输出一次
setInterval(function(){
var d= new Date()
var hours=d.getHours();
var minutes=d.getMinutes();
var seconds=d.getSeconds();
console.log(hours +":"+ minutes +":"+ seconds);
},1000)
4、RegExp-正则表达式
正则表达式可以用来匹配字符串
通过正则表达式，可以实现字符串的截取或按规定替换和验证字符串内容。
/^[a-zA-Z0-9_]{5,8}$/
^ //开头
$ //结尾
[] //范围
{} //位数
() //分组
+ //匹配1位或多位，同{1,}
? //0位或1位，同{0,1}
. //匹配所有
\ //转义
\d //数字，同[0-9]
\w //数字、字母、下划线
\s //空格或换行
九、ES2015基础语法
1、变量
1、使用let代替var。
let str ="hello world";
2、块级作用域。
{
let str ="hello world";
}
3、不存在变量提升。
console.log(str);
let str="hello world"; //报错
4、不允许重复声明。
2、常量
1、const定义常量；
const PI =3.14;
2、定义之后不可以修改；
3、不变的值用常量声明；
4、函数表达式可以使用常量；
const fun = function(){
console.log("hello world");
}
fun();
5、对象声明可以使用常量；
6、引用外部模块使用常量
3、模板字符串
1、支持换行。
let str = `hello
world`;
console.log(str);
2、支持嵌入变量。
let year ="2020";
let month = "10";
let date = "10";
let result =`${year}年${month}月${date}日`;
console.log()
4、结构赋值
1、数组的结构赋值
let [n,m] =[10,20];
console.log(n);
console.log(m);
//调换两个参数的值
方法1：
let n=10;
let m=20;
let temp;
temp=n;
n=m;
m=temp;
console.log(n);
console.log(m);
方法2：
let n=10;
let m=20;
[n,m]=[m,n];
console.log(n);
console.log(m);
2、对象的结构赋值
let {name,age} = {name:"xiaoming",age:10};
console.log(name);
console.log(age);
3、通过结构赋值传递参数
十、函数进阶
1、声明函数
1、一次声明、多次调用的语句块
2、参数：形参、实参
3、返回值：函数运行的结果
function fun(){
return n+m;
}
let result1=fun(10,20);
let result2=fun(100,200);
console.log(result1);
console.log(result2);
2、函数声明提升
let result1=fun(10,20);
let result2=fun(100,200);
console.log(result1);
console.log(result2);
function fun(){
return n+m;
}
3、匿名函数
function(){
....
}
//回调函数：将匿名函数作为参数传递给另一个函数或方法。
setInterval(function(){
console.log("hello world");
},1000)
4、函数表达式
const fun =function (n,m){
return n+m;
}
let result =fun(10,20);
console.log(result);
5、方法：属于某一个对象的函数
const cat ={
name:"miaomiao",
sayName:function(){
console.log(this.name);
}
//简写
sayName(){
console.log(this.name);
}
}
cat.sayName();
6、设置默认参数值
function fun(x=10,y=20){
return x+y;
}
let result=fun(100,200);
console.log(result);
7、立即执行函数
(function (){
//console.log("hello world");
let a=10;
let b=20;
console.log(a+b);
})()
声明之后直接调用；
不可以多次调用；
某些第三方库实现封装；
8、闭包
闭包函数：声明在一个函数中的函数，叫做闭包函数。
闭包：内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回之后。（内部函数被返回，外部函数不会被销毁）
function fun1(){
let n=10;
let m=20;
function fun2(){
return n+m;
}
return fun2;
}
const f=fun1();
const result =f();
console.log(result);
//闭包的特性：内部函数未执行完，外部函数即使执行完成，外部函数中的变量也不会被销毁。
//利用闭包实现代码的封装
const module=(function(){
let a=10;
let b=20;
function add(){
return a+b;
}
return add;
})()
9、箭头函数
const fun = (x) =>{
return x*x;
}
let result =fun(2);
console.log(result);
//简化
const fun = x=>x*x;
let result =fun(2);
console.log(result);
箭头函数中的this：
使用function定义的函数，this取决与调用的函数。
使用箭头函数，this取决于函数定义的位置。
const cat ={
name:"miaomiao",
sayName(){
setInterval(() =>{
console.log(this.name);
},1000)
}
}
cat.sayName();
十一、面向对象
基本概念：
类：类型，模板，统称。（狗类，鸟类）
对象：是类的一个实例，会具体到某一个事物上
继承：狗类继承至哺乳动物类，猫类也继承至哺乳动物类，继承后，子类可以使用父类的属性和方法
1、ES5面向对象的知识
构造函数：用于创建对象的函数。
原型对象：prototype
原型链：实现继承
//1、es5是没有类的概念的，通过构造函数来实现类
//构造函数的函数名，首字母大写
//构造函数是用来创造对象用的
function Dog(n,a){
this.name=n;
this.age=a;
}
var dog = new Dog("旺财",2);//创造了一个对象，狗类的实例
console.log(dog.name);
//2、prototype
function Dog(name,age){
this.name=name;
this.age=age;
}
//通过原型对象，为构造函数生成的对象赋予新的方法
Dog.prototype.sayName=function(){
console.log(`我的名字是${this.name}`);
}
var dog = new Dog("旺财",2);
var bigDog = new Dog("二哈",3);
dog.sayName();
bigDog.sayName();
//3、原型链实现继承
function Animal(name){
this.name=name;
}
Animal.prototype.sayName(){
console.log(`你好，我是${this.name}`);
}
Animal.prototype.sayHello(){
console.log("hello!!!");
}
function Dog(name){
this.name=name;
}
Dog.prototype=new Animal();//Dog继承Animal
var dog=new Dog("旺财");
dog.sayName();
dog.sayHello();
2、ES2015面向对象语法
Class关键字
class Dog{
constructor(name,age){
this.name=name;
this.age=age;
}
sayName(){
console.log(`我是${this.name}`);
}
}
let dog =new Dog("旺财",2);
dog.sayName();
继承
class Animal{
constructor(name){
this.name=name;
}
sayName(){
console.log(`我是${this.name}`);
}
}
class Dog extends Animal{ //extends继承
}
let dog =new Dog("旺财");
dog.sayName();
class Animal{
constructor(name){
this.name=name;
}
sayName(){
console.log(`我是${this.name}`);
}
}
class Dog extends Animal{ //extends继承
constructor(name,age){
super(name); //父级属性加进来super
this.age=age;
}
}
let dog =new Dog("旺财",2);
console.log(dog.age);
十二、DOM基础
1、获取节点
document.getElementById();
document.getElementByName();
document.querySelector();
document.querySelectorAll();
domObject.innerHTML:获取元素内的所有内容。
<h1 id="title">hello world</h1>
<script>
let h1=document.getElementByid("title");
h1.innerHTML="你好世界";
</script>
2、事件类型
click
mouseenter
mouseleave
let btn =document.querySelector("button");
btn.onclick=function(){
console.log("hello btn")
}
let box =document.querySelector("#box");
box.onmouseenter=function(){
console.log("hello");
}
box.onmouseleave=function(){
console.log("box");
}
3、设置样式
element.style.color
element.style.backgroundColor
通过click、mouseenter、mouseleave事件控制样式
let box =document.querySelector("#box");
box.onmouseenter=function(){
this.style.backgroundColor="blue";
}
box.onmouseleave=function(){
this.style.backgroundColor="red";
}
4、设置属性
element.src
element.id
点击数字列表切换图片
<img src="images/1.jpg">
<button>1</button>
<button>2</button>
<button>3</button>
<script>
let img =document.querySelector("img");
let imagesSrcList = ["images/1.jpg","images/2.jpg","images/3.jpg"];
let btns =docunment.squerySelectorAll("button");
for(let i in btns){
btns[i].onclick=function(){
img.src=imagesSrcList[i];
}
}
</script>
5、通过class属性设置样式
element.className
点击原始、设置激活的背景色
<style>
.active{
background-color:red;
}
</style>
<h1 class="title">hello world</h1>
<script>
let h1=document.querySlector("h1");
h1.onclick=function(){
this.className="active";
}
</script>
十三、DOM节点操作
1、元素节点（获取元素节点：querySelector;querySelectorAll）
2、文本节点（innerHTML）
3、属性节点（element.src;element.id）
//在ul中添加li标签
ul.innerHTML =`
<li>香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
`
1、节点操作
创建元素节点：createElement
创建文本节点：createTextNode
添加节点：appendChild
删除节点：removeChild
<input type="text">
<button>按钮</button>
<ul></ul>
<script>
let btn =document.querySelector('button');
let ul =document.querySelector('ul');
let inp =document.querySelector('input');
btn.onclick =function(){
let value = inp.value;
let li=document.createElement("li");//添加元素节点
let txt=document.createTextNode(value)//添加文本节点
ul.appendChild(li);//添加节点
li.appendChild(txt);
}
</script>
<input type="text">
<button>按钮</button>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
</ul>
<script>
let btn =document.querySelector('button');
let ul =document.querySelector('ul');
let inp =document.querySelector('input');
let list =document.querySelectorAll('li')
btn.onclick =function(){
let value = inp.value;
let li=document.createElement("li");//添加元素节点
let txt=document.createTextNode(value)//添加文本节点
ul.appendChild(li);//添加节点
li.appendChild(txt);
}
for(let i in list){
list[i].onclick=function(){
ul.removeChild(this);//删除节点
}
}
</script>
2、事件对象
事件监听函数的形参可以获取事件对象。
通过事件对象可以获取鼠标坐标
1、获取X坐标：event.clientX;
2、获取Y坐标：event.clientY;
<div class="box"></div>
<script>
let box=document.querySelector(".box");
box.onclick=function(e){
console.log(e.clientX);
console.log(e.clientY);
}
</script>
十四、事件
### 1、绑定事件
1、addEventListener(“eventType”,fun)
2、element.onEventType =fun
区别：
addEventListener在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖。
addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能
<button>按钮</button>
<script>
let btn = document.querySelector("button");
//onclick写法
btn.onclick = function (){
console.log("hello world");
}
//addEventListener写法
btn.addEventListener("click",function(){
console.log("hello javascript");
})
</script>
2、事件流
三个div嵌套，都绑定click事件，点击最内层的元素，事件如何执行？
a：只执行最内层
b：从内到外都执行 √
c：从外到内都执行
2.1、事件捕获与事件冒泡
默认情况下，事件会在冒泡阶段执行
addEventListener(eventType,fun,boolean);默认false：冒泡阶段触发；true：捕获阶段触发
2.2、阻止事件冒泡
e.stopPropagation();
let box =document.querySelector("box");
box.onclick= function (e){
box.style.display="none";
e.stopPropagation();//阻止事件冒泡
}
2.3、事件默认行为
为一个可以跳转到百度的a标签设置点击事件
<a href="http://baidu.com"></a>
<script>
let a= document.querySelector("a");
a.onclick =function(e){
console.log("hello world");
e.preventDefault();//去掉事件默认行为
}
</script>
<a href="http://baidu.com"></a>
<script>
let a= document.querySelector("a");
a.onclick =function(e){
console.log("hello world");
return false;//去掉事件默认行为
}
</script>
3、事件委托
通过e.target将子元素的事件委托给父级处理
<input type="text">
<button>添加</button>
<ul class="fruit-list">
<li>香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
</ul>
<script>
let btn=document.querySelector("button");
let ul=document.querySelector(".fruit-list");
let inp=document.querySelector("input");
btn.onclick=function(){
let value=inp.value;
let li = document.createElement("li");
let txt = document.createTextNode(value);
li.appendChild(txt);
ul.appendChild(li);
}
//事件委托
ul.onclick=function(e){
ul.removeChild(e.target);
}
</script>
4、事件类型
1、鼠标事件
2、键盘事件
let box =document.querySelector(".box");
document.onKeydown = function(e){ //onKeydown
let code = e.keyCode; //e.keyCode每个键对应的码
switch(code){
case 37:box.style.left=box.offsetLeft - 5 +"px";break;//offsetLeft获取左侧偏移量
case 38:box.style.top=box.offsetTop - 5 +"px";break;
case 39:box.style.left=box.offsetLeft + 5 +"px";break;
case 40:box.style.top=box.offsetTop + 5 +"px";break;
}
}
3、触屏事件
let box = document.querySelector(".box");
box.ontouchstart=function(){//按下屏幕
console.log("start");
}
box.ontouchend=function(){//离开屏幕
console.log("end");
}
box.ontouchmove=function(){//滑动
console.log("I'm moving!");
}
十五、计时器方法
1、setInterval与clearInterval
let timer setInterval(() => {
console.log("hello world");
},1000)
let btn =document.querySelector("button");
btn.onclick =function(){
clearInterval(timer);//暂停
}
2、setTimeout与clearTimeout
let timer=null;
document.qyerySelector("button").onclick=function(){
clearTimeout(timer);//停止
}
//2秒后输出hello world
timer= setTimeout(()=>{
console.log("hello world");
},2000)
//3秒后跳转到百度
setTimeout(()=>{
location.href="http://baidu.com";//location跳转
},3000)
3、防抖与节流
解决性能问题，开发中常会遇到。
防抖：对于短时间内多次触发事件的情况，可以使用防抖停止事件持续触发。
节流：防止短时间内多次触发事件的情况，但是间隔事件内，还是需要不断触发。
//window.onscroll 鼠标滚动事件
window.onscroll =function(){
console.log("hello world");
}
//防抖
let timer =null;
window.onscroll =function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(()=>{
console.log("hello world");
timer=null;
},500)
}
//节流
let mark =true;
window.onscroll =function(){
if(mark){
setTimeout(()=>{
console.log("hello world");
mark=true;
},500)
}
mark =false;
}
返回顶部效果
1、window.onscroll事件：滚动条滚动事件
2、document.documentElement.scrollTop：页面滚动位置距离顶部距离
3、window.scrollTo(0,0)：让页面滚动条返回顶部。
<style>
button{
positon:fixed;
right:100px;
bottom:100px;
display:none;
}
body{
height:1000px;
}
</style>
<h1>hello world</h1>
<button>↑</button>
<script>
let btn=document.querySelector("button");
document.querySelector("button").onclick =function(){
window.scrollTo(0,0);
}
let timer=null;
window.onscroll =function(){
if(timer!==null){
clearTimeout(timer);
}
timer=setTimeout(()=>{
console.log("计数器");
if(documnet.documnetElement.scrollTop > 0){
btn.style.display="block";
}else{
btn.style.display="none";
};
timer=null
},500)
}
</script>
<!--利用闭包，封装防抖算法-->
<script>
let btn=document.querySelector("button");
document.querySelector("button").onclick =function(){
window.scrollTo(0,0);
}
function debounce(fn){
let timer =null;
function eventFun(){
if(timer!==null){
clearTimeout(timer);
}
timer= setTimeout(()=>{
fn();
timer=null;
},500)
}
return eventFun;
}
window.onscroll =debounce(()=>{
console.log("计数器");
if(document.documentElement.scrollTop>0){
btn.style.display="block";
}else{
btn.style.display="none";
}
});
}
</script>
<!--利用闭包，封装节流算法-->
<script>
let btn=document.querySelector("button");
document.querySelector("button").onclick =function(){
window.scrollTo(0,0);
}
function throttle(fn){
let mark =true;
return function(){
if(mark){
setTimeout(()=>{
fn();
mark=true;
},500)
}
mark =false;
}
}
window.onscroll =throttle(()=>{
console.log("计数器");
if(document.documentElement.scrollTop>0){
btn.style.display="block";
}else{
btn.style.display="none";
}
});
}
</script>
十六、BOM
DOM：文档对象模型（document对象）
BOM：浏览器对象模型
1、window对象（全局对象）
window对象是全局对象，所有在浏览器可以直接使用的方法，都是window对象的方法。
计时器方法；弹出框方法
1.1、弹出框
1.alert //alert("hello world");
2.prompt //let str = prompt("请输入你的名字：");
3.confirm //let result = confirm("确定是否删除此条记录？");
猜数字：
let target = Math.floor(Math.random()*100+1);
//递归函数:在函数体内调用自己
function guessNumber(){
let number = prompt("请输入你猜的数字");
if(number == target){
alert("恭喜你回答正确！");
}else if(number>target){
alert("大于目标结果！")
guessNumber();
}else if(number<target){
alert("小于目标结果！")
guessNumber();
}
}
guessNumber();
水果列表删除提示功能:
<ul class="fruit-list">
<li>香蕉</li>
<li>苹果</li>
<li>鸭梨</li>
</ul>
<script>
let ul=document.querySelector(".fruit-list");
ul.onclick=function(e){
let mark=confirm("是否删除此水果？");
if(mark){
ul.removeChild(e.target);
}
}
</script>
2、screen对象包含有关用户屏幕的信息
3、location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的网页
1、location.href //属性返回当前页面的URL "https://www.baidu.com"
2、location.hostname //主机的域名 "www.baidu.com"
3、location.pathname //当前页面的路径和文件名 "/s"
4、location.prot //端口 "8080"
5、location.protocol //协议 "https:"
4、history对象包含浏览器的历史
5、navigator对象包含有关访问者浏览器的信息
navigator.userAgent
检查当前设备，并在控制台输出
十七、原始类型与引用类型
六种数据类型：
数值（Number）、字符串（String）、布尔（Boolean）、空（Null）、未定义（Undefined）、对象（Object）
1、原始类型与引用类型的区别：
1.1、赋值的区别
//原始类型
let str1="hello";
let str2=str1;
str1="world";
console.log(str1);//world
console.log(str2);//hello
//引用类型
let obj1={name:"小明"};
let obj2=obj1;
obj1.name="小红";
console.log(obj1.name);//小红
console.log(obj2.name);//小红
原始类型赋值、引用类型的是引用
1.2、比较的区别
//原始类型
let str1="hello";
let str2="hello";
console.log(str1===str2);//true
//引用类型
let obj1={name:"小明"};
let obj2={name:"小明"};
console.log(obj1===obj2);//false;
原始类型比较的是值，引用类型比较的是引用是否指向同一个对象。
1.3、传参的区别
//原始类型
function fun(x){
x=100;
console.log(`x的值是${x}`);//x的值是100
}
let number=10;
fun(number);
console.log(`number的值是${number}`);//number的值是10
//引用类型
let obj ={name:"小明"};
function fun(o){
o.name="小红";
console.log(`o的名字是${o.name}`);//o的名字是小红
}
fun(obj);
console.log(`obj的名字是${obj.name}`);//obj的名字是小红
2、原始类型与引用类型的类型检测
2.1、原始类型数据检测：typeof（值）
//原始类型
let num=100;
let str="hello world";
let und;
let nu=null;
let bool=ture;
console.log(typeof(num));//number
console.log(typeof(str));//string
console.log(typeof(und));//undefind
console.log(typeof(nu));//object
console.log(typeof(bool));//boolean
2.2、引用类型数据检测：值instranceof类型
//引用类型
let arr=[1,2,3];
let reg=/123/;
let date=new Date();
console.log(arr instanceof Array);//true
console.log(reg instanceof RegExp);//true
console.log(date instanceof Date);//true
实例：数组存储学生列表
<input type="text" class="name" placeholder="姓名">
<input type="text" class="age" placeholder="年龄">
<button>添加</button>
<script>
let inputName=document.querySelector(".name");
let inputAge=document.querySelector(".age");
let btn=docunment.querySelector("button");
let studentList=[];
//let student={};
class Student{
constructor(name,age){
this.name=name;
this.age=age;
}
}
btn.onclick =function(){
//student.name=inputName.value;
//student.age=inputAge.value;
let stydent = new Student(inputName.value,inputAge.value);
studentList.push(student);
console.log(studentList);
}
</script>
十八、异步编程
1、同步与异步
//同步
console.log("给1打电话");
console.log("给2打电话");
console.log("给2打电话");
//异步
setTimeout(()=>{console.log("给1发短信")},200);
setTimeout(()=>{console.log("给2发短信")},500);
setTimeout(()=>{console.log("给3发短信")},2000);
setTimeout(()=>{console.log("给4发短信")},100);
setTimeout(()=>{console.log("给5发短信")},900);
浙公网安备 33010602011771号