JavaScript/jsBom.tex · yangjh/LearningPHP

Fetch the repository succeeded.

richgiteeai

Watch

Unwatch Watching Releases Only Ignoring

12 Star 7 Fork 4

yangjh/LearningPHP

Code Issues 0 Pull Requests 0 Wiki Insights Pipelines

Service

Tencent Cloud Serverless

Create your Gitee Account

Explore and code with more than 14 million developers,Free private repositories !:)

Already have an account? Sign in

文件

master

Branches (1)

Manage

master

This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.

The license selected for the repository is subject to the license used by the main branch of the repository.

Clone or Download

Clone/Download

HTTPS SSH SVN SVN+SSH Download ZIP

Prompt

To download the code, please copy the following command and execute it in the terminal

To ensure that your submitted code identity is correctly recognized by Gitee, please execute the following command.

git config --global user.name userName 
git config --global user.email userEmail

When using the SSH protocol for the first time to clone or push code, follow the prompts below to complete the SSH configuration.

1 Generate RSA keys.

2 Obtain the content of the RSA public key and configure it in SSH Public Keys

To use SVN on Gitee, please visit the usage guide

When using the HTTPS protocol, the command line will prompt for account and password verification as follows. For security reasons, Gitee recommends configure and use personal access tokens instead of login passwords for cloning, pushing, and other operations.

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # Private Token

Branches 1

Tags 0

LearningPHP

JavaScript

jsBom.tex

jsBom.tex 4.37 KB

\section{浏览器对象模型BOM}
由于网页是在浏览器中运行的,因此JavaScript提供了一系列对象以便同浏览器窗口进行交互。这些对象有window、navigator、location、document、screen和history等,这些对象通称为浏览器对象模型(Browser Object Model),简称BOM。

BOM提供了独立于页面内容而与浏览器窗口进行交互的对象,其中window对象是整个BOM的核心,所有对象和集合都以某种方式与window对象关联。

navigator、location、document、screen和history是windows对象的子集,document对象又包含若干子对象(location、forms、anchors、images、links、embeds、applets),BOM中的对象关系如图\ref{fig:bom}所示:

\begin{figure}[htb]
	\centering
	\includegraphics[width=140mm]{raw/BOM.png}
	\caption{BOM对象关系图}
	\label{fig:bom}
\end{figure}

\subsection{window对象}

JavaScript在一定的环境中运行,这个运行环境本身也是对象,称为"顶层对象"。这就是说,JavaScript的所有对象,都是"顶层对象"的下属。不同的运行环境有不同的"顶层对象",在浏览器环境中,这个顶层对象就是window对象。

Window对象表示整个浏览器窗口,但不包括其中的页面内容,使用window对象可以直接对浏览器窗口进行操作。window对象提供可以主要功能有:调整窗口大小和位置;打开新窗口和关闭窗口;系统提示框;状态栏控制;定时操作。由于window对象的属性和方法众多,我们就不一一作介绍,如想深入了解,请访问\url{https://developer.mozilla.org/zh-CN/docs/Web/API/Window}。

\subsubsection{常用属性}

Window对象拥有众多属性,常用的有:

\begin{description}
	\item [innerHeight] 浏览器显示区域高度
	\item [innerWidth] 浏览器显示区域宽度
	\item [document] window对象的子对象document是javascript的核心对象,HTML文档中包含BODY元素时就会创建一个document实例。
	\item [location] 给出当前窗口的URL信息或指定打开窗口的URL。
\end{description}

\subsubsection{常用方法}

\begin{description}
	\item [close()] 关闭页面。
	\item [open()] 打开页面。
	\item [alert()] 弹出警告对话框。
	\item [print()] 模拟用户点击浏览器上的"打印"按钮,通知浏览器打开打印对话框打印当前页。
	\item [confirm()] 显示需要用户确认信息的对话框。
	\item [scrollTo()] 将窗口中的内容滚动到指定位置。
	\item [scrollByPages()] 滚动当前文档到指定页。
	\item [setTimeout()] 在指定的延迟时间之后调用一个函数或执行一个代码片段。
	\item [setInterval()] 周期性地调用一个函数(function)或者执行一段代码。
\end{description}

window对象的属性和方法在调用时,可以省略其对象名称,即window.innerHeight可简写为innerHeight。

例如:

\begin{lstlisting}
<html>
<body>
<input type="text" id="clock" />
<script language=javascript>
var int = setInterval("clock()",50);
function clock() {
 var t = new Date();
 document.getElementById("clock").value = t
 }
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>
\end{lstlisting}

\subsection{navigator对象}

navigator对象主要用来检查客户端浏览器信息、浏览器版本、操作系统的类型等等。navigator对象最常用的属性是userAgent,该属性能读取浏览器及操作系统的信息。

\subsection{location对象}

location对象的主要作用是分析和设置页面的URL地址,其中location.herf属性用于获得和设置窗口的URL。

\subsection{screen对象}

screen对象主要用来获取用户计算机的屏幕信息,包括屏幕的分辨率、屏幕的颜色深度等信息。

\subsection{history对象}

history对象主要用来控制浏览器的后退和前进。它可以访问历史页面,但不能获取历史页面的URL。

\subsection{document对象}

从BOM的角度看,document对象是一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。由于BOM没有统一标准,各种浏览器中的document对象特性并不完全相同,因此要使用各类浏览器都支持的通用属性和方法。常用的属性和方法有title、lastModified、write等等。

Copy Edit Raw Blame History

yangjh authored 2016年11月20日 21:17 +08:00 . 增加timer案例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

\section{浏览器对象模型BOM}
由于网页是在浏览器中运行的,因此JavaScript提供了一系列对象以便同浏览器窗口进行交互。这些对象有window、navigator、location、document、screen和history等,这些对象通称为浏览器对象模型(Browser Object Model),简称BOM。

BOM提供了独立于页面内容而与浏览器窗口进行交互的对象,其中window对象是整个BOM的核心,所有对象和集合都以某种方式与window对象关联。

navigator、location、document、screen和history是windows对象的子集,document对象又包含若干子对象(location、forms、anchors、images、links、embeds、applets),BOM中的对象关系如图\ref{fig:bom}所示:

\begin{figure}[htb]
	\centering
	\includegraphics[width=140mm]{raw/BOM.png}
	\caption{BOM对象关系图}
	\label{fig:bom}
\end{figure}

\subsection{window对象}

JavaScript在一定的环境中运行,这个运行环境本身也是对象,称为"顶层对象"。这就是说,JavaScript的所有对象,都是"顶层对象"的下属。不同的运行环境有不同的"顶层对象",在浏览器环境中,这个顶层对象就是window对象。

Window对象表示整个浏览器窗口,但不包括其中的页面内容,使用window对象可以直接对浏览器窗口进行操作。window对象提供可以主要功能有:调整窗口大小和位置;打开新窗口和关闭窗口;系统提示框;状态栏控制;定时操作。由于window对象的属性和方法众多,我们就不一一作介绍,如想深入了解,请访问\url{https://developer.mozilla.org/zh-CN/docs/Web/API/Window}。

\subsubsection{常用属性}

Window对象拥有众多属性,常用的有:

\begin{description}
	\item [innerHeight] 浏览器显示区域高度
	\item [innerWidth] 浏览器显示区域宽度
	\item [document] window对象的子对象document是javascript的核心对象,HTML文档中包含BODY元素时就会创建一个document实例。
	\item [location] 给出当前窗口的URL信息或指定打开窗口的URL。
\end{description}

\subsubsection{常用方法}

\begin{description}
	\item [close()] 关闭页面。
	\item [open()] 打开页面。
	\item [alert()] 弹出警告对话框。
	\item [print()] 模拟用户点击浏览器上的"打印"按钮,通知浏览器打开打印对话框打印当前页。
	\item [confirm()] 显示需要用户确认信息的对话框。
	\item [scrollTo()] 将窗口中的内容滚动到指定位置。
	\item [scrollByPages()] 滚动当前文档到指定页。
	\item [setTimeout()] 在指定的延迟时间之后调用一个函数或执行一个代码片段。
	\item [setInterval()] 周期性地调用一个函数(function)或者执行一段代码。
\end{description}

window对象的属性和方法在调用时,可以省略其对象名称,即window.innerHeight可简写为innerHeight。

例如:

\begin{lstlisting}
<html>
<body>
<input type="text" id="clock" />
<script language=javascript>
var int = setInterval("clock()",50);
function clock() {
 var t = new Date();
 document.getElementById("clock").value = t
 }
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>
\end{lstlisting}

\subsection{navigator对象}

navigator对象主要用来检查客户端浏览器信息、浏览器版本、操作系统的类型等等。navigator对象最常用的属性是userAgent,该属性能读取浏览器及操作系统的信息。

\subsection{location对象}

location对象的主要作用是分析和设置页面的URL地址,其中location.herf属性用于获得和设置窗口的URL。

\subsection{screen对象}

screen对象主要用来获取用户计算机的屏幕信息,包括屏幕的分辨率、屏幕的颜色深度等信息。

\subsection{history对象}

history对象主要用来控制浏览器的后退和前进。它可以访问历史页面,但不能获取历史页面的URL。

\subsection{document对象}

从BOM的角度看,document对象是一系列集合构成,这些集合可以访问文档的各个部分,并提供页面自身的信息。由于BOM没有统一标准,各种浏览器中的document对象特性并不完全相同,因此要使用各类浏览器都支持的通用属性和方法。常用的属性和方法有title、lastModified、write等等。