0
点赞
收藏
分享

微信扫一扫

【JavaScript】案例3:定时弹广告以及BOM对象


【JavaScript】案例3:定时弹广告以及BOM对象_前端

🔎这里是【JavaScript】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【JavaScript】 目前主要更新JavaScript,一起学习一起进步。

👀本期介绍

本期主要介绍案例3:定时弹广告以及BOM对象

文章目录

​​1. 案例 3:定时弹广告​​

​​1.1 需求说明​​

​​1.2 需求分析​​

​​1.3 案例代码实现​​

​​2. BOM 对象​​

​​2.1 BOM 对象是什么?有什么用?​​

​​2.3 BOM 对象-location 对象​​

​​2.4 BOM 对象-history 对象(了解)​​

​​3. 课外扩展(了解)​​

​​3.1 脚本语言历史介绍​​

​​3.2 JavaScript 和 JAVA 比较​​

​​3.3 语句​​

​​3.3.1 if 语句​​

​​3.3.2 switch 语句​​

​​3.3.3 while 语句​​

​​3.3.4 for 语句​​

​​3.3.5 instanceof 运算符​​

1. 案例 3:定时弹广告

1.1 需求说明


网站顶部在页面打开两秒后显示广告图;

广告图展示两秒后关闭广告图;


【JavaScript】案例3:定时弹广告以及BOM对象_脚本语言_02


1.2 需求分析

【JavaScript】案例3:定时弹广告以及BOM对象_java_03

提示:1、元素.className 会访问 元素的 class 属性值


1.3 案例代码实现

【JavaScript】案例3:定时弹广告以及BOM对象_java_04


2. BOM 对象

2.1 BOM 对象是什么?有什么用?


BOM (Browser Object Model)浏览器对象模型

浏览器: IE 、火狐、谷歌等

作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)

一般情况下, window 代表了 BOM 对象。

window 对象是 JavaScript 的内置对象,使用 window 对象调用方法时可以省略 window 不写。


【JavaScript】案例3:定时弹广告以及BOM对象_html_05


2.2 BOM 对象消息框

方法:消息框

【JavaScript】案例3:定时弹广告以及BOM对象_脚本语言_06

【JavaScript】案例3:定时弹广告以及BOM对象_html_07


2.3 BOM 对象-location 对象

location 对象包含浏览器 地址栏 的信息。

【JavaScript】案例3:定时弹广告以及BOM对象_前端_08

设置 href 属性,浏览器就会跳转到对应的路径


2.4 BOM 对象-history 对象(了解)

【JavaScript】案例3:定时弹广告以及BOM对象_html_09


go() 方法:跳转到历史列表中的指定页面


a) go(-1) 加载前一个连接,等效 back()


b) go(1) 加载后一个链接,等效 forward()



【JavaScript】案例3:定时弹广告以及BOM对象_html_10


3. 课外扩展(了解)

3.1 脚本语言历史介绍


1992 年, Nombas 公司开发 Cmm (


C-minus-minus )嵌入式脚本语言,后更名为 ScriptEase 。


1995 年 Netscape 网景公司开发 Netscape Navigator 2.0 浏览器内置的 LiveScript 脚本语言,


Netscape


Navigator 2.0 即将正式发布前, Netscape 将其更名为 JavaScript

同时,微软进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript

1997 年, TC39 委员会为了统一脚本语言推出 ECMA-262 标准,标准将脚本语言命名为ECMAScript 。

如今,所有主流浏览器都遵守 ECMA-262 标准。 ECMAScript 是标准, JavaScript 是标准的具体实现。

在之后的开发中,我们大多习惯使用 JavaScript 表示浏览器脚本语言。


3.2 JavaScript 和 JAVA 比较


1. 出身不同


JavaScript 是 Netscape 公司的产品,前身是 LiveScript ;


Java 是 Sun 公司的产品,现在是 Oracle 公司的产品。


2. 结构思想不同


JavaScript 是基于对象,就是使用对象, JavaScript 不支持多态。


Java 是面向对象,三大特性 ( 封装,继承,多态 ) 缺一不可。


3. 执行方式不同


JavaScript 只需解释就可以执行


Java 需要先编译成字节码文件,再执行


4. 类型种类不同


JavaScript 是弱类型,一个变量可以存放任意类型的数据。


Java 是强类型, Integer 类型只能存放整形。


5. 命名相同

JavaScript 与 java 一样都区分大小写


历史故事:


JavaScript 更名之前, Java 已经开始流行, Netscape 借了一次东风,且非常成功。但 JavaScript和 Java除了都含有“ Java ”单词,没有任何关系。

JavaScript Java 好比:雷锋和雷峰塔。 都发音为: leifeng ,但本质完全不同


3.3 语句

3.3.1 if 语句


if 语句是逻辑判断语句,最常用的语句之一。


if 语句的语法 1 :



【JavaScript】案例3:定时弹广告以及BOM对象_javascript_11


if 语句的语法 2:

【JavaScript】案例3:定时弹广告以及BOM对象_脚本语言_12

3.3.2 switch 语句

switch 语句

【JavaScript】案例3:定时弹广告以及BOM对象_脚本语言_13

3.3.3 while 语句

while 语句是循环语句。

【JavaScript】案例3:定时弹广告以及BOM对象_javascript_14


3.3.4 for 语句

for 循环

【JavaScript】案例3:定时弹广告以及BOM对象_脚本语言_15


3.3.5 instanceof 运算符

在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它返回 "object" 。 ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。

instanceof 运算符与 typeof 运算符相似,用于识别正在处理的 对象的类型 。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。

  例如:

【JavaScript】案例3:定时弹广告以及BOM对象_javascript_16

举报

相关推荐

0 条评论