JavaScript基础知识《一》《BOM》

最新推荐文章于 2024-09-11 15:33:18 发布

猿知了

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量65

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43702977/article/details/112745303

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

JavaScript

JavaScript由三部分构成：ECMAScript，DOM，BOM

`BOM` (浏览器对象模型)

bom主要处理浏览器窗口和框架

window

window对象

window.document.getElementById("header");

二者相同

```
document.getElementById("header");
```

window 尺寸

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)

window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

示例

 var w=window.innerWidth
 var h=window.innerHeight

其他window方法

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

window location

window.location对象用于获取当前页面的URL（全球资源定位器（Uniform Resource Locator）），并把浏览器重新定向到新的页面

window.location对象在编写时可以不用window前缀，例如

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

`location href`

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

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

window history

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

可不用window前缀

history.back() 与在浏览器中点击后退按钮相同
history.forword  与在浏览器中点击前进按钮相同
history.go()   可以实现向前后退功能

<head>
<script>
function goBack()
{
    window.history.back()
}
</script>
</head>
<body>
 
<input type="button" value="Back" οnclick="goBack()">
 
</body>

<head>
<meta charset="utf-8">
<script>
function goForward()
{
    window.history.forward()
}
</script>
</head>
<body>
 
<input type="button" value="Forward" οnclick="goForward()">
</body>

function a(){
    history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}

function b(){
    history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}

function a(){
    history.go(0);  // go() 里面的参数为0,表示刷新页面
}

弹窗

在JavaScript中可以创建三种消息框：警告框，确认框，提示框。

警告框

```
window.alert("sometext");
```
window.alert() 方法可以不带上window对象，直接使用alert()方法。

示例

 <head>
 <script>
 function myFunction()
 {
     alert("这是一个警告框！");
 }
 </script>
 </head>
 <body>
 
 <input type="button" οnclick="myFunction()" value="显示警告框">
 
 </body>

确认框

```
window.confirm("sometext");
```
window.confirm()；方法可以不带上window对象，直接使用confirm()方法。

<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}
		</script>
	</head>
	//提示：确认  取消

提示框

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

	<script>
	var person=prompt("请输入你的名字","張三");
if (person!=null && person!="")
{
  
  
}	</script>

计时事件

设定一个时间间隔后执行代码，由两个关键方法

`setlnterval()`方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

window.setInterval("javascript function",milliseconds);

可以不使用window前缀
setlnterval()第一个参数是函数（function),第二个参数是间隔的毫秒数

示例

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

停止执行
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
```
window.clearInterval(intervalVariable)
```
要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量：

myVar=setInterval("javascript function",milliseconds);

示例

<p id="demo"></p>
<button οnclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

`setTimeout（）`方法

语法
- ```
myVar= window.setTimeout("javascript function", milliseconds);
```
- setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。如果要取消这个 setTimeout()，可以使用这个变量名来指定它
- setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。对函数的调用
  
  第二个参数指示从当前起多少毫秒后执行第一个参数。

等待三秒，跳出弹框

setTimeout(function(){alert("Hello")},3000);

停止运行
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
语法
- ```
window.clearTimeout(timeoutVariable)
```
要使用clearTimeout() 方法, 必须在创建超时方法中（setTimeout）使用全局变量:
- ```
myVar=setTimeout("javascript function",milliseconds);
```

示例

var myVar;
 
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
    clearTimeout(myVar);
}