2022年ppt模板下载,重庆网站seo案例,泰安程序开发,求职网站的建设方案文章目录4 JavaScript BOM4.1 BOM概述浏览器对象模型4.2 Window对象4.2.1 弹出框弹出框类型4.2.2 定时事件定时器概念操作定时器4.2.3 同步与异步单线程JS同步和异步开启多线程一个问题同步任务和异步任务JS执行机制4.3 Location对象4.3.1 基本概念Location对象URLURL格式组成4…
文章目录4 JavaScript BOM4.1 BOM概述浏览器对象模型4.2 Window对象4.2.1 弹出框弹出框类型4.2.2 定时事件定时器概念操作定时器4.2.3 同步与异步单线程JS同步和异步开启多线程一个问题同步任务和异步任务JS执行机制4.3 Location对象4.3.1 基本概念Location对象URLURL格式组成4.3.2 常见属性4.3.3 常见方法4.4 navigator对象4.4.1 基本概念4.4.2 判断终端4.5 history对象4.5.1 基本概念4.5.2 常见方法4 JavaScript BOM
4.1 BOM概述
浏览器对象模型
BOM也称为浏览器对象模型它不存在官方标准。现代浏览器几乎实现了JS交互相同的方法和属性因此它经常作为BOM的方法和属性被提到。 4.2 Window对象
4.2.1 弹出框
弹出框类型
弹出框类型说明示例返回值警告框用户需要单击确定来继续window.alert(“sometext”)void确认框用户需要单击确定或取消来继续执行window.confirm(“sometext”)true或false提示框用户需要单击确定或取消来继续执行window.prompt(“sometext”,“defaultText”)输入值或NULL
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptwindow.addEventListener(load,function(){var btn1 document.querySelector(.btn1);btn1.onclick function(){alert(警告框);}var btn2 document.querySelector(.btn2);btn2.onclick function(){confirm(确认框);}var btn3 document.querySelector(.btn3);btn3.onclick function(){prompt(提示框);}})/scriptbutton class btn1测试按钮1/buttonbutton class btn2测试按钮2/buttonbutton class btn3测试按钮3/button
/body
/html4.2.2 定时事件
定时器概念
说明window对象运行以指定的时间间隔执行代码这些时间间隔称为定时事件。 操作定时器
作用示例说明开启定时器setInterval(函数,间隔时间)每隔一段时间调用函数间隔时间为毫秒一旦开启不会自动停止清除定时器clearInterval(定时器变量)去除定时器开启延时器setTimeout(函数间隔时间)延迟一段时间后调用函数间隔时间为毫秒函数只执行一次
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 测试定时器开关 --div id div1测试内容1/divbutton id btn1测试按钮1——开始定时器/buttonbutton id btn2测试按钮2——结束定时器/button!-- 测试延时器 --div id div3测试内容3/divbutton id btn3测试按钮3——开始延时器/buttonscript/*-------------------测试定时器-------------------*/var btn1 document.getElementById(btn1);var btn2 document.getElementById(btn2);var div1 document.getElementById(div1);var timer;//声明定时器对象var number 0;//设置一个变量btn1.onclick function(){timer setInterval(function(){div1.innerText number;},1000)}btn2.onclick function(){clearInterval(timer);}/*-------------------测试延时器-------------------*/var div3 document.getElementById(div3);var btn3 document.getElementById(btn3);btn3.onclick function(){setTimeout(function(){div3.innerText 测试内容3已经改变;},1000);}/script
/body
/html4.2.3 同步与异步
单线程JS
JS的一大特点就是单线程也就是同一个时间只能做一件事。比如我们对某个DOM元素进行添加和删除操作不能同时进行应该先进行添加之后再删除。 同步和异步
为了利用多核CPU的计算能力HTML5提出Web Worker标准允许JS脚本创建多个线程于是JS出现了同步和异步。
同步前一个任务结束后再执行后一个任务程序的执行顺序和任务的排列顺序一致。异步在做一件事时这件事会很费时我们可以做这件事的同时去处理其他事。 开启多线程
开启多线程的方式是利用回调函数。
scriptconsole.log(1);setTimeout(function(){console.log(3);},3)console.log(2);/script一个问题
下面代码的输出结果仍然是1,2,3这是为何不是已经设置延时器的延时为0了吗。
scriptconsole.log(1);setTimeout(function(){console.log(3);},0)console.log(2);/script同步任务和异步任务
同步任务同步任务都在主线程上执行形成一个执行栈。
异步任务JS的异步通过回调函数实现。异步任务相关的回调函数添加到任务队列也叫消息队列中。 JS执行机制
JS的执行顺序如下先执行执行栈中的同步任务异步任务放入任务队列中一旦执行栈中的所有同步任务执行完毕系统就会按次序读取任务队列中的异步任务于是被读取的异步任务结束等待状态进行执行栈开始执行 4.3 Location对象
4.3.1 基本概念
Location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL并且可以用于解析URL。因为这个属性返回的是一个对象所以我们将这个属性也称为location对象。 URL
统一资源定位符Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏览器应该怎么处理它。 URL格式组成
格式protocol://host[:port]/path/[?query]#fragment
组成说明protocol通信协议常用的httpftpmaito等host主机域名port端口号可选省略时使用方案的默认端口path路径一般用于表示主机上的一个目录或文件地址query参数以键值对的形式通过符号分隔开fragment片段#后面内容常见于链接或锚点4.3.2 常见属性
console.log(location); //输出location对象
console.log(location.href); //输出当前地址的全路径地址
console.log(location.origin); //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host); //输出当前地址的主机
console.log(location.port); //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search); //输出当前地址的?后边的参数部分!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{margin: 0 auto;background-color: pink;text-align: center;margin-top:40px;height: 100px;width: 300px;}/style
/head
bodydiv暂时找不到页面五秒钟之后跳转到百度首页/divscriptvar div document.querySelector(div);window.setTimeout(function(){location.href https://www.baidu.com/;},3000)/script
/body
/html4.3.3 常见方法
location对象方法返回值location.assign()和href一样可以跳转页面也称为重定向页面location.replace()替换当前页面因为不记录历史所以不能后退页面location.reload()重新加载页面相当于刷新按钮或者f5如果参数为true则强制刷新相当于ctrlf5
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptwindow.addEventListener(load,function(){var btn1 document.querySelector(.btn1);var btn2 document.querySelector(.btn2);var btn3 document.querySelector(.btn3);btn1.onclick function(){location.assign(https://www.baidu.com)}btn2.onclick function(){location.replace(https://www.baidu.com)}btn3.onclick function(){location.reload();}})/scriptbutton class btn1跳转页面/buttonbutton class btn2替换页面/buttonbutton class btn3刷新页面/button
/body
/html4.4 navigator对象
4.4.1 基本概念
navigator对象包含有关浏览器的信息其有很多属性最常用的是userAgent该属性可以返回由客户机发送服务器的user-agent头部的值。 4.4.2 判断终端
下面的代码可以判断用户使用哪个终端打开页面并实现跳转。
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowerNG|WebOS|Symbian|Windows Phone)/i))){window.location.href ;//手机
}else{window.location.href ;//电脑
}4.5 history对象
4.5.1 基本概念
window对象给我们提供一个history对象与浏览器历史记录进行交互该对象包含用户访问过的URL。 4.5.2 常见方法
history对象方法作用back()后退功能forward()前进功能go(参数)前进后退功能参数如果是1则前进一个页面如果是-1则后退一个页面
