蓝旭工作室2023春季培训预习博客（六）

最新推荐文章于 2024-06-16 13:16:08 发布
最新推荐文章于 2024-06-16 13:16:08 发布
阅读量161 收藏 1
点赞数 1
文章标签： html5 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D1gnity_/article/details/130470810
版权

目录

前言

一. 什么是BOM

二. Window

1. Window对象

2. Window子对象

3. Window尺寸

4. Window方法

三. Screen

四. Location

1. Window.Location

2. Location.Herf

3. Window.Location.Pathname

4. Window.Location.Assign

五. History

六. Navigator

前言

第六周有一个需了解的内容，如下

  1. BOM（浏览器对象模型）

一. 什么是BOM

BOM 是 Browser Object Model，浏览器对象模型。

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。

由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

二. Window

 window 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。

1. Window对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

2. Window子对象

Window的子对象主要有如下几个：

  1. JavaScript document 对象 对 Document 对象的只读引用
  2. JavaScript history 对象 对 History 对象的只读引用
  3. JavaScript location 对象 用于窗口或框架的 Location 对象
  4. JavaScript navigator 对象 对 Navigator 对象的只读引用
  5. JavaScript screen 对象 对 Screen 对象的只读引用
  6. JavaScript frames 对象

3. Window尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的窗口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

4. Window方法

一些Window方法：

  • Window open() - 打开新窗口
  • Window close() - 关闭当前窗口
  • Window moveTo() - 移动当前窗口
  • Window resizeTo() - 调整当前窗口的尺寸

基本属性：

属性

描述

closed

返回窗口是否已被关闭。

defaultStatus

设置或返回窗口状态栏中的默认文本。

innerheight

返回窗口的文档显示区的高度。

innerwidth

返回窗口的文档显示区的宽度。

length

设置或返回窗口中的框架数量。

name

设置或返回窗口的名称。

opener

返回对创建此窗口的窗口的引用。

outerheight

返回窗口的外部高度。

outerwidth

返回窗口的外部宽度。

pageXOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

parent

返回父窗口。

self

返回对当前窗口的引用。等价于 Window 属性。

window

window 属性等价于 self 属性，它包含了对窗口自身的引用。

status

设置窗口状态栏的文本。

top

返回最顶层的先辈窗口。

screenLeft

screenTop

screenX

screenY

只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

三. Screen

window.screen 对象包含有关用户屏幕的信息。

这些信息可以用来了解客户端硬件的基本配置。

  • window.screen.width //屏幕宽度
  • window.screen.height //屏幕高度
  • window.screen.colorDepth //屏幕颜色深度
  • window.screen.availWidth //可用宽度(除去任务栏的高度)
  • window.screen.availHeight //可用高度(除去任务栏的高度)

四. Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活。

1. Window.Location

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

  • location.hostname 返回 web 主机的域名 通常等于host，有时会省略前面的www
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http:// 或 https://）

2. Location.Herf

location.href 属性返回当前页面的 URL。

<script>
    document.write(location.href);
</script>

输出：如http://www.somewhere.com/pictures/index.htm

3. Window.Location.Pathname

location.pathname 属性返回 URL 的路径名。

<script>
    document.write(location.pathname);
</script>

输出：如/pictures/index.htm

4. Window.Location.Assign

location.assign() 方法加载新的文档。

location.assign("http:www.baidu.com");  同location.href，新地址都会被加到浏览器的历史栈中。

五. History

window.history 对象包含浏览器的历史。

window.history.length 浏览过的页面数

history.back() 在浏览历史里后退一步

history.forward() 在浏览历史里前进一步

history.go(i) 到汗青详细登记单的第i位

i>0进步,i<0撤退退却

六. Navigator

window.navigator 对象包含有关访问者浏览器的信息。

　　window.navigator.appCodeName //浏览器代码名
　　window.navigator.appName //浏览器步伐名
　　window.navigator.appMinorVersion //浏览器补钉版本
　　window.navigator.cpuClass //cpu类型 x86
　　window.navigator.platform //操作体系类型 win32
　　window.navigator.plugins
　　window.navigator.opsProfile
　　window.navigator.userProfile
　　window.navigator.systemLanguage //客户体系语言 zh-cn简体中文
　　window.navigator.userLanguage //用户语言,同上
　　window.navigator.appVersion //浏览器版本(包括 体系版本)
　　window.navigator.userAgent//用户代理头的字符串表示
　　window.navigator.onLine //用户否在线
　　window.navigator.cookieEnabled //浏览器是否撑持cookie
　　window.navigator.mimeTypes

window.navigator 对象在编写时可不使用 window 这个前缀。

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统
D1gnity_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
蓝旭工作室2023春季培训第六周预习博客
m0_74974446的博客
05-06 87
作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。
蓝旭工作室2023春季培训预习博客（五）
D1gnity_的博客
04-22 197
第三周有一个需了解的内容，如下DOM（文档对象模型）DOM是JavaScript操作页面的接口，全称“文档对象模型”（Document Object Model）。文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。
蓝旭工作室2023春季培训预习博客（二）
D1gnity_的博客
03-31 1411
第二周有两个需了解的内容，如下1. HTML常用标签2. CSS基础HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术。HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本HTML。
蓝旭工作室2023春季培训预习博客（一）
D1gnity_的博客
03-24 1572
第一周有四个需了解的内容，如下1.走进前端2.vscode插件安装3.认识浏览器4.Gitee提交从2013年 Gitee 代码托管平台上线至推出企业版之前的三年多时间中，Gitee 平台已托管了 2000 万+个仓库，是国内知名的代码托管平台。经过了多年的不断完善和运营，Gitee 已经足以为企业的核心资产 —— 源代码，提供保驾护航服务。
蓝旭工作室2023春季培训预习博客（三）
D1gnity_的博客
04-06 351
第三周有一个需了解的内容，如下CSS进阶（盒子模型、浮动、定位、伪类、伪元素）CSS伪类是用来描述一个元素的特殊状态，比如第一个元素、某个元素的子元素、鼠标点击的元素设置鼠标悬停在元素上时的样式。为已访问和未访问链接设置不同的样式。设置元素获得焦点时的样式。
蓝旭工作室2023春季培训预习博客（四）
D1gnity_的博客
04-13 135
第四周需学习Javascript基本语法JavaScript（简称“JS”是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript在1995年由Netscape公司的，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape。
蓝旭工作室2023春季培训第五周预习博客
m0_74974446的博客
04-26 136
DOM全称文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容、结构和样式。
蓝旭工作室2023春季培训第四周预习博客
m0_74974446的博客
04-15 172
如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。在一个单独的js文件中编写，然后在HTML中的script标签中引用。使用逗号运算符分隔的语句会从左到右顺序依次执行。在HTML的script标签中直接编写。使用逗号可以在一条语句中执行多次操作。
蓝旭工作室2023春季培训第三周预习博客
m0_74974446的博客
04-07 161
:first-letter p::first-letter 选择每个 元素的首字母。::first-line p::first-line 选择每个 元素的首行。::selection p::selection 选择用户选择的元素部分。::before p::before 在每个 元素之前插入内容。注：::before和::after来添加的内容是不可以被鼠标选中的。相对于自己原来位置，脱离标准流，移动之后，移动之前的位置仍然占有。
蓝旭V6刷机工具
12-29
需要准备工具：电脑、SD卡、读卡器（支持读取SD） 1、首先下载附件中的刷机制作工具PhoenixCard_V309.rar、刷机包。 2.解压刷机制作工具PhoenixCard_V309.rar，打开里面的PhoenixCard.exe程序。...
MauiMETA工具V6
01-17
mtk的maui工具，比较新的，射频和校准相关的
HTML5 新元素
csbysj2020的博客
06-12 323
HTML5是最新版本的HTML，引入了许多新元素和功能，以更好地满足现代网页设计的需要。这些新元素不仅增强了网页的表现力，还提高了代码的可读性和可维护性。本文将详细介绍HTML5中的新元素，包括它们的功能和用法。
HTML5 Web 存储：简化数据存储的利器
艾恩小灰灰的博客
06-13 335
HTML5 Web存储为前端开发者提供了强大而灵活的数据存储方案，无论是需要长期保存的用户配置，还是仅限当前会话的临时数据，localStorage和sessionStorage都能轻松应对。掌握这些技术，无疑将使你的Web应用更加丰富、互动性更强。记得在实际应用中，合理选择存储方式，并注意数据的安全性和兼容性问题，以提供最佳的用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 481
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1473
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 586
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
lyd的博客
06-15 439
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 446
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
Web前端写随机抽奖：技术与创意的碰撞
最新发布
yvnmth_025y的博客
06-16 299
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值