阅读目录
- JavaScript Number 对象
- JavaScript 字符串(String)对象
- JavaScript Date(日期)对象
- JavaScript Array(数组)对象
- JavaScript Boolean（布尔）对象
- JavaScript Math(算数)对象
- JavaScript RegExp 对象
- JavaScript Window 浏览器对象模型
- JavaScript Window Screen
- JavaScript Window Location
- JavaScript Window History
- JavaScript Window Navigator
- JavaScript 弹窗
- JavaScript 计时事件
- JavaScript Cookie
JavaScript Number 对象
JavaScript 只有一种数字类型，可以使用也可以不使用小数点来书写数字。
JavaScript 数字
JavaScript 数字可以使用也可以不使用小数点来书写：
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
极大或极小的数字可通过科学（指数）计数法来写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值 （Number.MAX_VALUE） 为 ±1.7976931348623157e+308，最小值 （Number.MIN_VALUE）为 ±5e-324。
此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：
| 值 (aka Fraction/Mantissa) | 指数（Exponent） | 符号（Sign） |
|---|---|---|
| 52 bits (0 – 51) | 11 bits (52 – 62) | 1 bit (63) |
精度
整数（不使用小数点或指数计数法）最多为 15 位。
实例：
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = 999999999999999;
var y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
}
</script>
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
var x;
document.write("<p>仅显示17位: ");
x=12345678901234567890;
document.write(x + "</p>");
document.write("<p>0.2 + 0.1 = ");
x=0.2+0.1;
document.write(x + "</p>");
document.write("<p>可以通过乘以10或除以10来计算: ");
x=(0.2*10+0.1*10)/10;
document.write(x +"</p>");
显示
仅显示17位: 12345678901234567000
0.2 + 0.1 = 0.30000000000000004
可以通过乘以10或除以10来计算: 0.3
二进制、八进制、十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。
var y = 0377;
var z = 0xFF;
document.write(y + "<br>");// 255
document.write(z + "<br>");// 255
输出：
255
255
注：绝不要在数字前面写零，除非您需要进行八进制转换。
默认情况下，JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
var myNumber = 128;
document.write(myNumber + ' 十进制<br>');
document.write(myNumber.toString(16) + ' 十六进制<br>');
document.write(myNumber.toString(8) + ' 八进制<br>');
document.write(myNumber.toString(2) + ' 二进制<br>');
输出：
128 十进制
80 十六进制
200 八进制
10000000 二进制
无穷大（Infinity）
当数字运算结果超过了 JavaScript 所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在 JavaScript 中以 Infinity 表示。
同样地，当负数的值超过了 JavaScript 所能表示的负数范围，结果为负无穷大，在JavaScript 中以 -Infinity 表示。
无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。
myNumber=2;
while (myNumber!=Infinity){
myNumber=myNumber*myNumber;
document.write(myNumber +'<BR>');
}
输出结果：
4
16
256
65536
4294967296
18446744073709552000
3.402823669209385e+38
1.157920892373162e+77
1.3407807929942597e+154
Infinity
除以 0 也产生了无限：
var x = 2/0;
var y = -2/0;
document.write(x + "<br>");// Infinity
document.write(y + "<br>");// -Infinity
输出结果：
Infinity
-Infinity
NaN – 非数字值
NaN 属性是代表非数字值的特殊值。
该属性用于指示某个值不是数字。
可以把 Number 对象设置为该值，来指示其不是数字值。
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
<p>一个数字除以一个字符串结果不是一个数字</p>
<p>一个数字除以一个字符串数字结果是一个数字</p>
<p id="demo"></p>
<script>
var x = 1000 / "Apple";
var y = 1000 / "1000";
document.getElementById("demo").innerHTML = isNaN(x) + "<br>" + isNaN(y);
// true
// false
</script>
输出结果：
一个数字除以一个字符串结果不是一个数字
一个数字除以一个字符串数字结果是一个数字
true
false
除以 0 是无穷大，无穷大是一个数字:
<p id="demo"></p>
<script>
var y = 1000 / 0; // Infinity
document.getElementById("demo").innerHTML = isNaN(y);// false
</script>
数字可以是数字或者对象
数字可以私有数据进行初始化，就像 x = 123;
JavaScript 数字对象初始化数据， var y = new Number(123);
<p id="demo"></p>
<script>
var x = 123; // x 是一个数字
var y = new Number(123); // y 是一个对象
var txt = typeof(x) + " " + typeof(y);
document.getElementById("demo").innerHTML=txt; // number object
</script>
<p id="demo"></p>
<script>
var x = 123; // x 是一个数字
var y = new Number(123); // y 是一个对象
document.getElementById("demo").innerHTML = x===y; // false
</script>
Number 属性
| 属性 | 描述 |
|---|---|
Number.MAX_VALUE |
最大值 |
Number.MIN_VALUE |
最小值 |
Number.NaN |
非数字 |
Number.NEGATIVE_INFINITY |
负无穷，在溢出时返回 |
Number.POSITIVE_INFINITY |
正无穷，在溢出时返回 |
Number.EPSILON |
表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别 |
Number.MIN_SAFE_INTEGER |
最小安全整数。 |
Number.MAX_SAFE_INTEGER |
最大安全整数。 |
数字方法
| 方法 | 描述 |
|---|---|
Number.parseFloat() |
将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。 |
Number.parseInt() |
将字符串转换成整型数字，和全局方法 parseInt() 作用一致。 |
Number.isFinite() |
判断传递的参数是否为有限数字。 |
Number.isInteger() |
判断传递的参数是否为整数。 |
Number.isNaN() |
判断传递的参数是否为 isNaN()。 |
Number.isSafeInteger() |
判断传递的参数是否为安全整数。 |
数字类型原型上的一些方法
| 方法 | 描述 |
|---|---|
toExponential() |
返回一个数字的指数形式的字符串，如：1.23e+2 |
toFixed() |
返回指定小数位数的表示形式。 |
toPrecision() |
返回一个指定精度的数字。如下例子中，a=123 中，3会由于精度限制消失: |
JavaScript 字符串(String)对象
String 对象用于处理已有的字符块。
JavaScript 字符串
一个字符串用于存储一系列字符就像 “willem”.
一个字符串可以使用单引号或双引号：
var blogname="willem";
var blogname='willem';
你使用位置（索引）可以访问字符串中任何的字符：
var character=blogname[7];
字符串的索引从零开始, 所以字符串第一字符为 [0]，第二个字符为 [1]，等等。
你可以在字符串中使用引号，如下实例：
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
或者你可以在字符串中使用转义字符 (\) 使用引号：
var answer='It\'s alright';
var answer="He is called \"Johnny\"";
字符串（String）
字符串（String）使用长度属性 length 来计算字符串的长度：
var txt="Hello World!";
document.write(txt.length+"<br />");
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length+"<br />");
var txt="欢迎来到我的博客！"+"<br />";
document.write(txt.length);
输出结果：
12
26
15
在字符串中查找字符串
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome"); // 13
如果没找到对应的字符函数返回 -1。
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
内容匹配
match() 函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));
输出结果：
world
null
world!
替换内容
replace() 方法在字符串中用某些字符替换另一些字符。
str="Please visit Microsoft!"
var n=str.replace("Microsoft","willem");
console.log(n); // Please visit willem!
字符串大小写转换
字符串大小写转换使用函数 toUpperCase() / toLowerCase():
var txt="Hello World!"; // String
var txt1=txt.toUpperCase(); // txt1 文本会转换为大写
var txt2=txt.toLowerCase(); // txt2 文本会转换为小写
字符串转为数组
字符串使用 split() 函数转为数组:
txt="a,b,c,d,e" // String
txt.split(","); // 使用逗号分隔
txt.split(" "); // 使用空格分隔
txt.split("|"); // 使用竖线分隔
特殊字符
Javascript 中可以使用反斜线 （\） 插入特殊符号，如： 撇号，引号等其他特殊符号。
查看如下 JavaScript 代码：
var txt="We are the so-called "Vikings" from the north.";
document.write(txt);
在 JavaScript 中，字符串的开始和停止使用单引号或双引号。
这意味着，上面的字符串将被切成： We are the so-called
解决以上的问题可以使用反斜线来转义引号：
var txt="We are the so-called \"Vikings\" from the north.";
document.write(txt);
输出结果：
We are the so-called "Vikings" from the north.
下表列出其他特殊字符，可以使用反斜线转义特殊字符：
| 代码 | 输出 |
|---|---|
| \’ | 单引号 |
| \” | 双引号 |
| \\ | 斜杆 |
| \n | 换行 |
| \r | 回车 |
| \t | tab |
| \b | 空格 |
| \f | 换页 |
字符串属性和方法
属性:
length
prototype
constructor
方法:
charAt()
charCodeAt()
concat()
fromCharCode()
indexOf()
lastIndexOf()
match()
replace()
search()
slice()
split()
substr()
substring()
toLowerCase()
toUpperCase()
valueOf()
JavaScript Date(日期)对象
创建日期：Date 对象用于处理日期和时间，可以通过 new 关键词来定义 Date 对象。
以下代码定义了名为 myDate 的 Date 对象：
有四种方式初始化日期：
new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。
实例化一个日期的一些例子：
var today = new Date()
var d1 = new Date("December 08, 2021 13:53:00")
var d2 = new Date(21,12,08)
var d3 = new Date(21,12,08,13,33,0)
console.log(today);
console.log(d1);
console.log(d2);
console.log(d3);
输出结果：
Wed May 18 2022 11:44:32 GMT+0800 (中国标准时间)
new.html:19 Wed Dec 08 2021 13:53:00 GMT+0800 (中国标准时间)
new.html:20 Sun Jan 08 1922 00:00:00 GMT+0800 (中国标准时间)
new.html:21 Sun Jan 08 1922 13:33:00 GMT+0800 (中国标准时间)
设置日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：
var myDate=new Date();
myDate.setFullYear(2021,0,14);
console.log(myDate); // Thu Jan 14 2021 11:47:00 GMT+0800 (中国标准时间)
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
两个日期比较
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2100 年 1 月 14 日做了比较：
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();
if (x>today) {
alert("今天是2100年1月14日之前");
} else {
alert("今天是2100年1月14日之后");
}
完整的 Date 对象请参考手册。
JavaScript Array(数组)对象
数组对象的作用是：使用单独的变量名来存储一系列的值。
什么是数组 ?
数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据（例如：动物名字），存在单独变量如下所示：
var animal1="tiger";
var animal2="lion";
var animal3="monkey";
然而，如果你想从中找出某一种动物？
并且不是3种，而是300种呢？
这将不是一件容易的事！
最好的方法就是用数组。
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的 ID，以便它可以很容易地被访问到。
创建一个数组
创建一个数组，有三种方法。
下面的代码定义了一个名为 myAniamals 的数组对象：
1、常规方式:
var myAniamals=new Array();
myAniamals[0]="tiger";
myAniamals[1]="lion";
myAniamals[2]="monkey";
2、简洁方式:
var myAniamals=new Array("tiger","lion","monkey");
3、字面量:
var myAniamals=["tiger","lion","monkey"];
访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
以下实例可以访问 myAniamals 数组的第一个值：
var name=myAniamals[0];
以下实例修改了数组 myAniamals 的第一个元素:
myAniamals[0]="dog";
[0] 是数组的第一个元素。[1] 是数组的第二个元素。
在一个数组中你可以有不同的对象
所有的 JavaScript 变量都是对象。数组元素是对象，函数是对象。
因此，你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myAniamals;
数组方法和属性
使用数组对象预定义属性和方法：
var x=myAniamals.length // myAniamals 中元素的数量
var y=myAniamals.indexOf("tiger") // "tiger" 值的索引值
完整的数组对象操作参考：https://wgchen.blog.csdn.net/article/details/124150847
创建新方法
原型是 JavaScript 全局构造函数。它可以构建新 Javascript 对象的属性和方法。
<p id="demo">单击按钮创建一个数组,调用 ucase() 方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase = function () {
for (i = 0; i < this.length; i++) {
this[i] = this[i].toUpperCase();
}
}
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
var x = document.getElementById("demo");
x.innerHTML = fruits;
}
</script>
上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。
JavaScript Boolean（布尔）对象
Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。
创建 Boolean 对象
Boolean 对象代表两个值：”true” 或者 “false”
下面的代码定义了一个名为 myBoolean 的布尔对象：
var myBoolean=new Boolean();
如果布尔对象无初始值或者其值为:
0
-0
null
""
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）!
实例演示
检查布尔对象是 true 还是 false。
<script>
var b1 = new Boolean(0);
var b2 = new Boolean(1);
var b3 = new Boolean("");
var b4 = new Boolean(null);
var b5 = new Boolean(NaN);
var b6 = new Boolean("false");
document.write("0 为布尔值 " + b1 + "<br>");
document.write("1 为布尔值 " + b2 + "<br>");
document.write("空字符串是布尔值 " + b3 + "<br>");
document.write("null 是布尔值 " + b4 + "<br>");
document.write("NaN 是布尔值 " + b5 + "<br>");
document.write("字符串'false' 是布尔值" + b6 + "<br>");
</script>
输出结果：
0 为布尔值 false
1 为布尔值 true
空字符串是布尔值 false
null 是布尔值 false
NaN 是布尔值 false
字符串'false' 是布尔值 true
Boolean 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Boolean 函数的引用 |
| prototype | 使您有能力向对象添加属性和方法。 |
JavaScript Boolean constructor 属性
定义和用法
constructor 属性返回对创建此对象的 Boolean 函数的引用。
浏览器支持
所有主流浏览器都支持 constructor 属性。
语法：boolean.constructor
技术细节
| 返回值： | 函数对象。 返回创建布尔对象的函数原型。 |
|---|---|
| JavaScript 版本： | 1.1 |
实例：
<p id="demo">单击按钮创建一个boolean对象，显示它的constructor属性。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var myvar = new Boolean(1);
var x = document.getElementById("demo");
x.innerHTML = myvar.constructor;
}
</script>
结果输出：
function Boolean() {
[native code] }
JavaScript Boolean prototype 构造器
定义和用法
prototype 属性使您有能力向对象添加属性和方法。
当构造一个原型，所有的布尔对象默认都添加了属性或方法。
注意： Boolean.prototype 不是引用布尔值，但 Boolean() 对象是。
注意： Prototype 是一个全局属性，这对于几乎全部的 JavaScript 对象。
浏览器支持
所有主要浏览器都支持 prototype 属性。
语法
Boolean.prototype.name=value
实例
<p id="demo">单击按钮，如果 boolean 值为 <em>true</em> 显示 “green”,否则显示 “red”。</p>
<button onclick="myFunction()">点我</button>
<script>
// 为 Boolean 对象创建一个新的方法：
Boolean.prototype.myColor = function () {
if (this.valueOf() == true) {
this.color = "green";
}else {
this.color = "red";
}
}
function myFunction() {
// 创建一个 Boolean 对象, 并添加 myColor 方法:
var a = new Boolean(1);
a.myColor();
var x = document.getElementById("demo");
x.innerHTML = a.color;
}
</script>
结果输出：
green
Boolean 对象方法
| 方法 | 描述 |
|---|---|
| toString() | 把布尔值转换为字符串，并返回结果。 |
| valueOf() | 返回 Boolean 对象的原始值。 |
JavaScript Boolean toString() 方法
定义和用法
toString() 方法可把一个逻辑值转换为字符串，并返回结果。
注意：当需要把 Boolean 对象转换成字符串的情况 JavaScript 会自动调用此方法。
浏览器支持
所有主要浏览器都支持 toString() 方法。
语法
boolean.toString()
返回值
| Type | 描述 |
|---|---|
| String | “true” 或者 “false” |
实例
将布尔值转换为字符串：
<p id="demo">单击按钮以字符串的形式显示Boolean对象的值。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var myvar = new Boolean(1);
var x = document.getElementById("demo");
x.innerHTML = myvar.toString();
}
</script>
输出结果：
true
JavaScript Boolean valueOf() 方法
定义和用法
valueOf() 方法可返回 Boolean 对象的原始值。
浏览器支持
所有主要浏览器都支持 valueOf() 方法。
语法
boolean.valueOf()
返回值
| Type | 描述 |
|---|---|
| Boolean | true 或者false |
实例
返回 Boolean 对象的原始值:
<p id="demo">单击按钮创建一个Boolean对象，并显示它的构造函数：</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var bool = new Boolean(0);
var x = document.getElementById("demo");
x.innerHTML = bool.valueOf();
}
</script>
输出结果：
false
JavaScript Math(算数)对象
Math 对象
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
使用 Math 的属性/方法的语法：
var x=Math.PI;
var y=Math.sqrt(16);
console.log(x); // 3.141592653589793
console.log(y); // 4
注意： Math 对象无需在使用这个对象之前对它进行定义。
算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
你可以参考如下 Javascript 常量使用方法：
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
算数方法
除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。
下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。
document.write(Math.round(4.7)); // 5
下面的例子使用了 Math 对象的 random() 方法来返回一个 介于 0 和 1 之间的随机数：
document.write(Math.random()); // 0.30147306227724235
下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个 介于 0 和 11 之间的随机数：
document.write(Math.floor(Math.random()*11)); // 5
完整的 Math 对象请参考手册。
JavaScript RegExp 对象
RegExp：是正则表达式（regular expression）的简写。
什么是 RegExp？
正则表达式描述了字符的模式对象。
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。
语法
var patt=new RegExp(pattern,modifiers);
或更简单的方法
var patt=/pattern/modifiers;
模式描述了一个表达式模型。
修饰符(modifiers)描述了检索是否是全局，区分大小写等。
注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。
比如，以下是等价的：
var re = new RegExp("\\w+");
var re = /\w+/;
RegExp 修饰符
修饰符用于执行不区分大小写和全文的搜索。
i – 修饰符是用来执行不区分大小写的匹配。
g – 修饰符是用于执行全文的搜索
（而不是在找到第一个就停止查找，而是找到所有的匹配）。
实例 1
在字符串中不区分大小写找 ”WillEm”：
var str = "Visit WillEm";
var patt1 = /willem/i;
document.write(str.match(patt1)); // WillEm
实例 2
全文查找 “is”
var str="Is this all there is?";
var patt1=/is/g;
document.write(str.match(patt1)); // is,is
实例 3
全文查找和不区分大小写搜索 “is”
var str="Is this all there is?";
var patt1=/is/gi;
document.write(str.match(patt1)); // Is,is,is
test() 方法搜索字符串指定的值，根据结果并返回真或假
下面的示例是从字符串中搜索字符 “e” ：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));// true
当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）
var str = 'willem';
var patt1 = new RegExp('\\w', 'g'); // 有转义作为正则表达式处理
var patt2 = new RegExp('\w', 'g'); // 无转义作为字符串处理
var patt3 =/\w+/g; // 与 patt1 效果相同
document.write(patt1.test(str)) //输出 true
document.write("<br>")
document.write(patt2.test(str)) //输出 false
document.write("<br>")
document.write(patt3.test(str)) //输出 true
exec() 方法检索字符串中的指定值
返回值是被找到的值。如果没有发现匹配，则返回 null。
下面的示例是从字符串中搜索字符 “e” ：
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));// e
JavaScript Window 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。
浏览器对象模型 (BOM)
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
与此相同：
document.getElementById("header");
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
实例
实用的 JavaScript 方案（涵盖所有浏览器）：
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x = document.getElementById("demo");
x.innerHTML = "浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>
该例显示浏览器窗口的高度和宽度。
其他 Window 方法
window.open() – 打开新窗口
window.close() – 关闭当前窗口
window.moveTo() – 移动当前窗口
window.resizeTo() – 调整当前窗口的尺寸
JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
Window Screen
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth – 可用的屏幕宽度
screen.availHeight – 可用的屏幕高度
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
实例：返回您的屏幕的可用宽度：
document.write("可用宽度: " + screen.availWidth); // 可用宽度: 1920
Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
实例：返回您的屏幕的可用高度：
document.write("可用高度: " + screen.availHeight); // 可用高度: 1080
JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
Window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
一些实例:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
Window Location Href
location.href 属性返回当前页面的 URL。
实例
返回（当前页面的）整个 URL：
document.write(location.href); // file:///E:/node/html_test/new.html
Window Location Pathname
location.pathname 属性返回 URL 的路径名。
实例
返回当前 URL 的路径名：
document.write(location.pathname); // /E:/node/html_test/new.html
Window Location Assign
location.assign() 方法加载新的文档。
实例：加载一个新的文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度</title>
<script>
function newDoc() {
window.location.assign("https://www.baidu.com")
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>
JavaScript Window History
window.history 对象包含浏览器的历史。
Window History
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：
history.back() – 与在浏览器点击后退按钮相同
history.forward() – 与在浏览器中点击向前按钮相同
Window history.back()
history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的：
实例：在页面上创建后退按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
Window history.forward()
history.forward() 方法加载历史列表中的下一个 URL。
这与在浏览器中点击前进按钮是相同的：
实例：在页面上创建一个向前的按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>
JavaScript Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
Window Navigator
window.navigator 对象在编写时可不使用 window 这个前缀。
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt += "<p>浏览器名称: " + navigator.appName + "</p>";
txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt += "<p>硬件平台: " + navigator.platform + "</p>";
txt += "<p>用户代理: " + navigator.userAgent + "</p>";
txt += "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML = txt;
</script>
警告!!!
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，您可以据此识别出 Opera。
例子：if (window.opera) {...some action...}
JavaScript 弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法
window.alert("sometext");
window.alert() 方法可以不带上window对象，直接使用 alert() 方法。
<input type="button" onclick="myFunction()" value="显示警告框" />
<script>
function myFunction(){
alert("你好，我是一个警告框！");
}
</script>
确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。
语法
window.confirm("sometext");
window.confirm() 方法可以不带上 window 对象，直接使用 confirm() 方法。
实例
<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var r = confirm("按下按钮!");
if (r == true) {
x = "你按下了\"确定\"按钮!";
}
else {
x = "你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法
window.prompt("sometext","defaultvalue");
window.prompt() 方法可以不带上 window 对象，直接使用 prompt() 方法。
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var person = prompt("请输入你的名字", "Harry Potter");
if (person != null && person != "") {
x = "你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML = x;
}
}
</script>
换行
弹窗使用 反斜杠 + "n"(\n) 来设置换行。
<p>点击按钮在弹窗中使用换行。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
alert("Hello\nHow are you?");
}
</script>
JavaScript 计时事件
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() – 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() – 在指定的毫秒数后执行指定代码。
注意： setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() 间隔指定的毫秒数不停地执行指定的代码
语法
window.setInterval("javascript function",milliseconds);
window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。
setInterval() 第一个参数是函数（function）。
第二个参数间隔的毫秒数
注意： 1000 毫秒是一秒。
实例：每三秒弹出 “hello” ：
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
setInterval(function () {
alert("Hello")
}, 3000);
}
</script>
实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。
以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是手表一样。
实例：显示当前时间
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar = setInterval(function () {
myTimer()
}, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>
如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用 window 前缀，直接使用函数 clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
myVar = setInterval("javascript function",milliseconds);
然后你可以使用 clearInterval() 方法来停止执行。
实例：以下例子,我们添加了 “停止” 按钮：
<p id="demo"></p>
<button onclick="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 语句的字符串。
这个语句可能诸如 “alert(‘5 seconds!’)”，或者对函数的调用，诸如 alertMsg。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示：1000 毫秒等于一秒。
实例：等待3秒，然后弹出 “Hello”:
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){
alert("Hello")
},3000);
}
</script>
如何停止执行?
clearTimeout() 方法用于停止执行 setTimeout() 方法的函数代码。
语法
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不使用 window 前缀。
要使用 clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:
myVar = setTimeout("javascript function",milliseconds);
如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。
实例：以下是同一个实例, 但是添加了 “停止弹框” 按钮:
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){
alert("Hello")
},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。
什么是 Cookie？
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以 名/值对 形式存储，如下所示:
username=Willem
浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
使用 JavaScript 创建 Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：
document.cookie="username=Willem";
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=Willem; expires=Thu, 18 Dec 2043 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=Willem; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
使用 JavaScript 读取 Cookie
在 JavaScript 中, 可以使用以下代码来读取 cookie：
var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie，类型格式：
cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：
document.cookie="username=Willem Gw; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
旧的 cookie 将被覆盖。
使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1990 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1990 00:00:00 GMT";
注意，当您删除时不必指定 cookie 的值。
Cookie 字符串
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取 document.cookie，您将获得如下所示的数据：
cookie1 = value; cookie2=value;
如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。
JavaScript Cookie 实例
在以下实例中，我们将创建 cookie 来存储访问者名称。
首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。
访问者下一次访问页面时，他会看到一个欢迎的消息。
在这个实例中我们会创建 3 个 JavaScript 函数:
1 设置 cookie 值的函数
2 获取 cookie 值的函数
3 检测 cookie 值的函数
设置 cookie 值的函数
首先，我们创建一个函数用于存储访问者的名字：
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
函数解析：
以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。
该函数设置了 cookie 名、cookie 值、cookie过期时间。
获取 cookie 值的函数
然后，我们创建一个函数用于返回指定 cookie 的值：
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
函数解析：cookie 名的参数为 cname。
创建一个文本变量用于检索指定 cookie :cname + “=”。
使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(‘;’))。
循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，
返回 cookie 的值 (c.substring(name.length,c.length)。
如果没有找到 cookie, 返回 “”。
检测 cookie 值的函数
最后，我们可以创建一个检测 cookie 是否创建的函数。
如果设置了 cookie，将显示一个问候信息。
如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：
function checkCookie(){
var username=getCookie("username");
if (username!=""){
alert("Welcome again " + username);
}else{
username = prompt("Please enter your name:","");
if (username!="" && username!=null){
setCookie("username",username,365);
}
}
}
为了方便大家学习，附上完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("欢迎 " + user + " 再次访问");
}else {
user = prompt("请输入你的名字:", "");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>