资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript学习总结 - JS基础系列三

Javascript学习总结 - JS基础系列三

zlyBear / 488人阅读

摘要：案例每隔毫秒调用函数并显示时间。当点击按钮时，停止时间代码如下计时器每隔毫秒调用函数，并将返回值赋值给计时器计时器，在载入后延迟指定时间后去执行一次表达式仅执行一次。该值标识要取消的延迟执行代码块。

简述

本系列将持续更新Javascript基础部分的知识，谁都想掌握高端大气的技术，但是我觉得没有一个扎实的基础，我认为一切高阶技术对我来讲都是过眼云烟，要成为一名及格的前端工程师，必须把基础打扎实了。我也想展翅高飞，但前提我必须练就一双会飞的翅膀。

JavaScript（Windows）部分 了解 Javascript & Windows 对象

window对象是 BOM 的核心，window对象指当前的浏览器窗口。

BOM 是什么？ BOM是Browser Object Model的缩写，简称浏览器对象模型。

BOM 提供了独立于内容而与浏览器窗口进行交互的对象。

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

下图是windows的一些js操作方法：

JavaScript 计时器（setTimeout）

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

js计时器的类型：
1.一次性计时器：仅在指定的延迟时间之后触发一次。
2.间隔性触发计时器：每隔一定的时间间隔就触发一次。

下面着重介绍这些一些js计时器的使用技巧：

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行一次代码。

语法:

参数说明：

代码：要调用的函数或要执行的代码串。

交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

【案例】我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

    
    
    
    
    计时器

上图是实现动态计时器的案例，可以参考参考。

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

【案例】每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

    
    
    
    
    计时器
计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

参数说明：

代码：要调用的函数或要执行的代码串。

延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

【案例】当我们打开网页3秒后，在弹出一个提示框，代码如下:

【案例】当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框：

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。

【案例】在下面的代码，当按钮被点击后，输入域便从0开始计数：
取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

【案例】下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：

上图实现：JS利用计时器开启或关闭自动计时器。

其它Window方法

这里其实就是讲一些记住页面操作的方法，比如跳转返回，histor对象等等

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意：history对象是从窗口被打开的那一刻开始记录的，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：

注意：window可以省略。

History 对象属性：

1.length：返回浏览器历史列表中的url数量。

History 对象方法：

1.back()：加载history列表中的前一个url。


2.forward()：加载history列表中的下一个url。


3.go()：去到history列表中的一个具体的url。

使用length属性，当前窗口的浏览历史总长度，代码如下：
Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法：

上图为：location对象属性图示。

根据上图可以看到一些location对象的属性：

1.hash：设置或返回从井号（#）开始的URL锚点。
2.host：设置或返回当前主机名或者当前URL的端口号。
3.hostname：设置或返回当前URL的主机名。
4.href：设置或返回完整的URL。
5.pathname：设置或返回当前URL的路径部分。
6.port：设置或返回当前URL的端口号。
7.protocol：设置或返回当前URL的协议。
8.search：设置或返回当前URL从问号（？）开始的URL部分（查询部分）

location的一些对象方法如下：

1.assign()：加载新文档。
2.reload()：重新加载当前文档。
3.replace()：用新文档代替旧文档。
Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

上图为Navigate的对象属性:
查看浏览器的名称和版本，代码如下：
screen对象

screen对象用于获取用户的屏幕信息。

语法：

上图为：screen的对象属性

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

screen.height 返回屏幕分辨率的高

screen.width 返回屏幕分辨率的宽

注意:

1.window.screen 对象的单位以像素计。
2.window.screen 对象在编写时可以不使用 window 这个前缀。

【案例】我们来获取屏幕的高和宽，代码如下:
屏幕可用高和宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

注意：不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

【案例】我们来获取屏幕的可用高和宽度，代码如下：

注意:根据屏幕的不同显示值不同。

总结

对于菜鸟来讲可以这么理解：Window 对象表示浏览器中打开的窗口。

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器（window）“对话”。

全局的window对象：JavaScript中的任何一个全局函数或变量都是window的属性。
全局变量是window对象的属性。
全局函数是window对象的方法。
甚至HTML-DOM的document也是window对象的属性之一。

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

// window与self对象：self对象与window对象完全相同，self通常用于确认就是在当前的窗体内。

注意：window、self、window.self三者是等价的。

虽然总结有点乱，但是还是值得再看一遍的，我是太困了，总结乱写了。。。

GPU云服务器 云服务器 javascript学习总结 javascript基础学习 javascript基础学习博客 javascript零基础学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78221.html

相关文章

  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总

    摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

    princekin 评论0 收藏0

  • JS框架 - 收藏集 - 掘金

    摘要：现在回过头总结，才又进一步的揭开了闭包的一层后台管理系统解决方案前端掘金基于系列的后台管理系统解决方案。什么是继承大多数人使用继承不外乎是为了获得基于的单页应用项目模板前端掘金小贴士本项目已升级至。 关于js、jq零碎知识点 - 掘金写在前面： 本文都是我目前学到的一些比较零碎的知识点，也是相对偏一点的知识，这是第二篇。前后可能没有太大的相关性，需要的朋友可以过来参考下，喜欢的可以点个...

    wenyiweb 评论0 收藏0

  • JavaScript系列（四） - 收藏集 - 掘金

    摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

    cfanr 评论0 收藏0

  • SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

    摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

    caspar 评论0 收藏0

  • SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

    摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

    nihao 评论0 收藏0

发表评论

登陆后可评论

0条评论

zlyBear

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<