首页 > 编程语言 >JavaScript基础部分知识点总结(Part6)

JavaScript基础部分知识点总结(Part6)

时间:2024-06-23 12:59:52浏览次数:28  
标签:知识点 定时器 函数 对象 JavaScript window location Part6 页面

BOM概述

1. 什么是BOM
  • BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
  • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
  • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
  • DOM:
    • 文档对象模型
    • DOM 就是把「文档」当做一个「对象」来看待
    • DOM 的顶级对象是document
    • DOM 主要学习的是操作页面元素
    • DOM 是W3C 标准规范
  • BOM:
    • 浏览器对象模型
    • 把「浏览器」当做一个「对象」来看待
    • BOM 的顶级对象是window
    • BOM 学习的是浏览器窗口交互的一些对象
    • BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差
2. BOM的构成
  • BOM 比DOM 更大,它包含DOM。

  • window对象是浏览器的顶级对象,它具有双重角色:
    • 它是JS 访问浏览器窗口的一个接口。
    • 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
  • 在调用的时候可以省略window,前面学习的对话框都属于window 对象方法,如alert()、prompt()等。
  • ⚠️:window下的一个特殊属性window.name

window对象的常见事件

1. 窗口加载事件
window.onload = function(){}
或者
window.addEventListener("load",function(){});
  • window.onload 是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等), 就调用的处理函数。
  • ⚠️:
    • 有了window.onload 就可以把JS 代码写到页面元素的上方,因为onload 是等页面内容全部加载完毕,再去执行处理函数。
    • window.onload 传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload 为准。
    • 如果使用addEventListener则没有限制
document.addEventListener('DOMContentLoaded',function(){})
  • DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
  • Ie9以上才支持
  • 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded 事件比较合适。
2. 调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
  • window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数。
  • ⚠️:
    • 只要窗口大小发生像素变化,就会触发这个事件。
    • 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

定时器

1. 两种定时器
  • window 对象给我们提供了2 个非常好用的方法-定时器。
    • setTimeout()
    • setInterval()
2. setTimeout()定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
  • setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
  • setTimeout() 这个调用函数我们也称为回调函数callback
  • 普通函数是按照代码顺序直接调用。而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
  • ⚠️:
    • window 可以省略。
    • 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
    • 延迟的毫秒数省略默认是0,如果写,必须是毫秒。
    • 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
3. 停止setTimeout()定时器
window.clearTimeout(timeoutID)
  • clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
  • ⚠️:
    • window 可以省略。
    • 里面的参数就是定时器的标识符。
4. setInterval()定时器
window.setInterval(回调函数, [间隔的毫秒数]);
  • setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
  • ⚠️:
    • window 可以省略。
    • 这个调用函数可以直接写函数,或者写函数名或者采取字符串'函数名()' 三种形式。
    • 间隔的毫秒数省略默认是0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
    • 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
    • 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。
5. 停止setInterval()定时器
window.clearInterval(intervalID);
  • clearInterval()方法取消了先前通过调用setInterval()建立的定时器。
  • ⚠️:
    • window 可以省略。
    • 里面的参数就是定时器的标识符。
6. this
  • this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
  • 几个this指向:
    • 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
    • 方法调用中谁调用this指向谁
    • 构造函数中this指向构造函数的实例

JS执行机制

1. JS是单线程
  • JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的。比如我们对某个DOM 元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
  • 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是:如果JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
2. 同步和异步

为了解决这个问题,利用多核CPU 的计算能力,HTML5 提出Web Worker 标准,允许JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。

  • 同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
  • 异步:你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
  • 本质区别:这条流水线上各个流程的执行顺序不同。
  • 同步任务:同步任务都在主线程上执行,形成一个执行栈

  • 异步任务:JS 的异步是通过回调函数实现的。一般而言,异步任务有以下三种类型:
    • 普通事件,如click、resize 等
    • 资源加载,如load、error 等
    • 定时器,包括setInterval、setTimeout 等
  • 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

3. JS执行机制
  • 先执行执行栈中的同步任务。
  • 异步任务(回调函数)放入任务队列中。
  • 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

  • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)。

location对象

1. 什么是location对象
  • window 对象给我们提供了一个location 属性用于获取或设置窗体的URL,并且可以用于解析URL 。因为这个属性返回的是一个对象,所以我们将这个属性也称为location 对象。
2. URL
  • 统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
  • URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link
组成说明
protocol通信协议 常用的http, ftp, maito等
host主机(域名)http:// www.itheima.com
port端口号 可选,省略时使用方案的默认端口  如http的默认端口为80
path路径 由 零或多个‘/’符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query参数  以键值对的形式,通过&符号分隔开来
fragment片段 # 后面内容 常见于链接 锚点
3. location对象的属性
location对象属性返回值
location.href获取或者设置 整个URL
location.host返回主机(域名)http://www.itheima.com
location.port返回端口号  如果未写返回 空字符串
location.pathname返回路径
location.search返回参数
location.hash返回片段 #后面内容 常见于链接 锚点
4. location对象的方法
location对象方法返回值
location.assign()跟href一样,可以跳转页面(也称为重定向页面)
location.replace()替换当前页面,因为不记录历史,所以不能后退页面
location.reload()重新加载页面,相当于刷新按钮或者f5 如果参数为true 强制刷新ctrl+f5

navigator对象

1. navigator对象
  • navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent 头部的值。
  • 下面前端代码可以判断用户那个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
    window.location.href = ""; //手机
} else {
    window.location.href = ""; //电脑
}

history对象

1. history对象
  • window 对象给我们提供了一个history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
history对象方法作用
back()可以后退功能
forward()前进功能
go(参数)前进后退功能 参数如果是1前进一个页面 如果是-1后退一个页面

标签:知识点,定时器,函数,对象,JavaScript,window,location,Part6,页面
From: https://blog.csdn.net/GaoshangD1209/article/details/139801787

相关文章

  • mysql数据库知识点总结
    MySQL是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(RelationalDatabaseManagementSystem:关系数据库管理系统)应用软件之一。mysql一、数据库的好处1、可以持久化数据到本地2、结构化查询二、数据库的常见概念★1、DB:数据库,存储数据的......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站(Epic)
    HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(电子器件)
    HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • JavaScript 地址信息与页面跳转
    在JavaScript中,处理地址信息和页面跳转通常涉及到两种主要的技术:使用window.location对象和创建超链接(<a>标签)。1.使用window.location对象window.location对象包含了关于当前URL的信息,并且提供了一些方法来进行页面跳转。获取地址信息你可以使用window.location对象......
  • Java 学习知识点汇集(2024.6)
    VSCode,run程序时,提示,错误:找不到或无法加载主类Exam_32猜测原因,目录中有中文字符?解决办法:**在Java中,final类不能作为父类被继承**。讯飞星火:在Java的LSP(LiskovSubstitutionPrinciple,里氏替换原则)中,如果一个类被设计为不可变的(immutable)或者已经完成的(complete),它应该......
  • 纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网
    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表......
  • 数据结构历年考研真题对应知识点(栈和队列的应用)
    目录3.3栈和队列的应用3.3.2栈在表达式求值中的应用【中缀表达式转后缀表达式的过程(2012、2014)】【栈的深度分析(2009、2012)】【用栈实现表达式求值的分析(2018)】 3.3.3栈在递归中的应用【栈在函数调用中的作用和工作原理(2015、2017)】3.3.5队列在计算机系统中的......
  • MySQL 面试突击指南:核心知识点解析2
    事务并发可能引发的问题MySQL是一个客户端/服务器架构的软件,对于同一个服务器来说,可以有多个客户端与之连接,每个客户端与服务器连接后,可以称为一个会话(Session)。每个客户端都可以在自己的会话中向服务器发出请求语句,一个请求语句可能是某个事务的一部分,也就是说,服务器可能......
  • 为什么JavaScript要书写优化?
    第一个原因:我们写代码是给机器看的,也是给程序员看的第二个原因:JS是弱类型语言,写得太随意编码风格就不好第三个原因:潜移默化提高程序性能那要怎么书写优化?要按强类型风格写代码varnum,str,obj;//没有指明类型varnumVal=0,strVal=......
  • 【JavaScript脚本宇宙】革新前端样式:CSS-in-JS库大比拼与最佳实践
    解锁响应式设计的潜力:使用CSS-in-JS库构建动态样式前言随着前端技术的发展,CSS-in-JS(CSSinJavaScript)逐渐得到开发者的青睐。它通过将CSS样式定义在JavaScript中,利用JavaScript的强大特性,实现了更灵活、动态的样式管理方式。本文将介绍几个流行的CSS-in-JS库,包括styled-c......