JavaScript 基础知识

前言

本篇文章是JavaScript基础知识的BOM篇，如果前面的《JavaScript基础知识-DOM篇》看完了，现在就可以学习BOM了。

注意： 所有的案例都在这里链接: 提取密码密码: yvxo，文章中的每个案例后面都有对应的序号。

1. BOM 基本概念

BOM(Browser Object Model)：浏览器对象模型，提供了一套操作浏览器的工具。

BOM中包含的内容很多，但是有很多东西是用不到的。在BOM中我们需要掌握定时器。

2. window 对象

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，其实BOM中基本所有的属性和方法都是属性window的。
所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

示例代码： [01-window对象.html]

普通函数调用的时候：

var name = "项羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj = Teacher(); // 打印的this 指的是全局对象window
console.log(name);   // 虞姬
console.log(age);    // 22
/* 
为什么会是 虞姬 和 22 ？ 不是定义了一个全局变量name = "项羽"吗？
因为 Teacher作为一个普通函数调用，它里面的this指的就是全局对象
js 代码一步步往下执行，一开始是定义了一个name="项羽"的全局变量，
但是下面的this有将"虞姬"指向了全局对象，所以最后打印的是虞姬 22
*/

构造函数的时候：

var name = "项羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj = new Teacher(); // 打印的this 指的是构造函数对象 Teacher
console.log(name); // 项羽
console.log(age); // 28
/*
Teacher作为构造函数的时候，它内部的this指向的是 对象Teacher
此时的全局变量name="项羽" 将不会再受this的影响，所以，打印的是 项羽 28
*/

2.1 window.onload

window.onload事件会在窗体加载完成后执行，通常我们称之为 入口函数。

window.onload = function(){
    //里面的代码会在窗体加载完成后执行。
    //窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
}

注意：

如果有图片加载，那么代码一定要写到window.onload里面，否则会出现图片没有加载完成，获取到的宽度和高度不对的情况。
浏览器会对页面的加载做优化，在加载图片的时候，图片的引入会延迟。
一个页面中不能有两个onload函数，写在下面的会覆盖掉上面的。

示例代码： [02-window.onload对象(一)]

为什么下面的代码会报错呢？





    
    
    
    window.onload

此时就可以用window.onload入口函数：





    
    
    
    window.onload

示例代码：图片加载 [03-window.onload对象(二)]

为什么获取的宽度和高度都为0呢，js代码不是写在最后面了吗？

效果图：

这是因为，浏览器会对页面的加载做优化，在加载图片的时候，图片的引入会延迟。这时候需要用window.onload：

效果图：

2.2 window.open

window.open() 打开一个窗口

语法：window.open(url, [name], [features]);

参数1：需要载入的url地址
参数2：新窗口的名称
       _self:在当前窗口打开
       _blank:在新的窗口打开
参数3：窗口的属性，指定窗口的大小
返回值：会返回刚刚创建的那个窗口，用于关闭

示例代码： [04-window.open.html]

效果图：

2.3 window.close

window.close() 关闭一个窗口在火狐浏览器下会失效解决办法

newWin.close()；//newWin是刚刚创建的那个窗口
window.close(); //把当前窗口给关闭了

示例代码： [05-window.close.html]

效果图：

3. 定时器

定时器里面不能用 this，因为在定时器里面， this，指向的是全局对象 window。

3.1 延时定时器

延时定时器可以让代码延迟一段时间之后才执行。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了， window会自己调用。

1、设置延时定时器

语法：setTimeOut(callback, time);

参数1：回调函数，时间到了就会执行。
参数2：延时的时间 单位：毫秒
返 回：定时器的id，用于清除

示例代码： [06-延时定时器.html]

var timer = setTimeOut(function(){
    //1秒后将执行的代码。
    console.log("哈哈");
}, 1000);

2.清除延时定时器

语法：clearTimeOut(timerId);

// 参数：定时器id
clearTimeOut(timerId);

示例代码：

效果图：两秒后执行代码，两秒钟之内清除定时器，就不会执行

3.2 间歇定时器

间歇定时器让定时器每隔一段时间就会执行一次，并且会一直执行，到清除定时器为止。

1、设置间歇定时器

语法：var intervalID = setInterval(func, delay);

参数1：重复执行的函数
参数2：每次延迟的毫秒数
返 回：定时器的id，用于清除

示例代码：

var timer = setInterval(function(){
    //重复执行的代码。
}, 1000);

2、清除间歇定时器

语法：clearInterval(intervalID);

参数：定时器id

示例代码： [07-间歇定时器.html]

效果图：

2.3 定时器综合练习

1、获取短信验证码案例 [08-定时器综合练习-获取短信验证码.html]

效果图：

2、倒计时案例 [09-定时器综合练习-倒计时案例.html]

效果图：

3、电子表案例 [10-定时器综合练习-电子表.html]

效果图：

4、机械表案例 [11-定时器综合练习-机械表.html]

效果图：

4. Location对象

location对象也是 window的一个属性， location其实对应的就是浏览器中的地址栏。

4.1 常用的属性和方法

location.href:控制地址栏中的地址

location.href = "http://www.baidu.com"; //让页面跳转到百度首页

location.reload()让页面重新加载

location.reload(true);//强制刷新，相当于ctrl+F5
location.reload(false);//刷新，相当于F5

location的其他属性

console.log(window.location.hash);      // 哈希值 其实就是锚点
console.log(window.location.host);      // 服务器 服务器名+端口号
console.log(window.location.hostname);  // 服务器名
console.log(window.location.pathname);  // 路径名
console.log(window.location.port);      // 端口
console.log(window.location.protocol);  // 协议
console.log(window.location.search);    // 参数

示例代码：定时跳转网址 [12-location对象-定时跳转.html]


注册成功，5秒后跳转

效果图：

5. Navigator 对象

window.navigator的一些属性可以获取客户端的一些信息

navigator.userAgent：返回浏览器版本 

navigator.onLin：返回网络状态 true / false

示例代码：获取浏览器版本 [13-navigator对象.html]

// 打印浏览器版本
console.log(navigator.userAgent);

// 打印网络状态
console.log(navigator.onLine);

效果图：

6. Screen 对象

window.screen的一些属性可以获取屏幕的宽高

1、获取屏幕的可占用宽高

返回访问者屏幕的宽度、高度，以像素计，减去界面特性，比如窗口任务栏。

screen.availWidth：获取屏幕的可用宽度

screen.availHeight：获取屏幕的可用高度

2、获取屏幕宽高

screen.width：获取屏幕的宽度

screen.height：获取屏幕的高度

示例代码： [14-screen对象.html]

document.write("当前屏幕可占用宽度：" + screen.availWidth + "
");    // 1864
document.write("当前屏幕可占用高度：" + screen.availHeight + "
");   // 1080
document.write("当前屏幕宽度：" + screen.width + "
");              // 1920
document.write("当前屏幕高度：" + screen.height + "
");             // 1080

效果图：

7. History 对象

history对象表示页面的历史

1、后退 history.back()

history.back() 方法加载历史列表中的前一个URL。这与在浏览器中点击后退按钮是相同的：

history.back();
history.go(-1);

2、后退 history.forward()

history forward() 方法加载历史列表中的下一个URL。这与在浏览器中点击前进按钮是相同的：

history.forward();
history.go(1);

8. javascript 弹框

在 javascript中可以创建 3种弹框，分别是：警告框、确认框、提示框。

1、警告框 alert

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。

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

2、确认框 confirm

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

var result = confirm();
if (result == true) {
    alert("你真的是猪!");
} else {
    alert("你不是猪！");
}

3、提示框 prompt

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。

// 参数一：提示内容  参数er：可以省略，输入框默认显示内容
var person = prompt("请输入你的名字", "Levi丶");
if (person != null && person != "") {
    alert("你好" + person);
}

4、弹框换行
弹窗使用 反斜杠 + "n"(\n) 来设置换行。

alert("大家好\n我是\nLevi丶");

9. javascript Cookie

Cookie用于存储 web页面的用户信息

1、什么是Cookie？

Cookie是一些数据, 存储于你电脑上的文本文件中。
当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie的作用就是用于解决 "如何记录客户端的用户信息":
- 当用户访问web页面时，他的名字可以记录在cookie中。
- 在用户下一次访问该页面时，可以在cookie中读取用户访问记录。

Cookie以名/值对形式存储，如下所示:

username=Levi

当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

2、使用 JavaScript 创建Cookie

JavaScript可以使用 document.cookie属性来创建、读取、及删除 cookie。

JavaScript中，创建cookie如下所示：

document.cookie = "username = Levi";

你还可以为cookie添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";

你可以使用path参数告诉浏览器cookie的路径。默认情况下，cookie属于当前页面

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

3、使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取cookie：

var x = document.cookie;

document.cookie将以字符串的方式返回所有的cookie，类型格式cookie1=value; cookie2=value; cookie3=value;

4、使用 JavaScript 修改 Cookie

在 JavaScript 中，修改cookie类似于创建cookie，如下所示：

document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

旧的cookie将被覆盖。

5、使用 JavaScript 删除 Cookie

删除cookie非常简单。您只需要设置expires参数为以前的时间即可，如下所示

document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";

注意，当您删除时不必指定 cookie 的值。

6、Cookie 字符串

document.cookie属性看起来像一个普通的文本字符串，其实它不是。

即使您在document.cookie中写入一个完整的cookie字符串, 当您重新读取该cookie信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的cookie，旧的cookie不会被覆盖。新cookie将添加到document.cookie 中，所以如果您重新读取document.cookie。

上一篇：JavaScript 基础知识 - DOM篇(二)
下一篇：JavaScript 进阶知识 - 特效篇(一)

JavaScript 基础知识 - BOM篇

前言

1. BOM 基本概念

2. window 对象

2.1 window.onload

2.2 window.open

2.3 window.close

3. 定时器

3.1 延时定时器

3.2 间歇定时器

2.3 定时器综合练习

4. Location对象

4.1 常用的属性和方法

5. Navigator 对象

6. Screen 对象

7. History 对象

8. javascript 弹框

9. javascript Cookie

你可能感兴趣的:(javascript,html,bom)