7 JavaScript 高级教程和浏览器DOM
Js 高级教程
JavaScript Number 对象
JavaScript 数字
JavaScript 数字可以使用也可以不使用小数点来书写：
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
极大或极小的数字可通过科学（指数）计数法来写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
精度
整数（不使用小数点或指数计数法）最多为 15 位。
var x = 999999999999999; // x 为 999999999999999
var y = 9999999999999999; // y 为 10000000000000000
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
var x = 0.2+0.1; // 输出结果为 0.30000000000000004
八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
var y = 0377;
var z = 0xFF;
默认情况下，JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
无穷大（Infinity）
当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。
myNumber=2;
while (myNumber!=Infinity)
{
myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}
除以0也产生了无限:
var x = 2/0;
var y = -2/0;
NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false
除以0是无穷大，无穷大是一个数字:
var x = 1000 / 0;
isNaN(x); // 返回 false
数字可以是数字或者对象
数字可以私有数据进行初始化，就像 x = 123;
JavaScript 数字对象初始化数据， var y = new Number(123);
var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object
实例
var x = 123;
var y = new Number(123);
(x === y) // 为 false，因为 x 是一个数字，y 是一个对象
JavaScript 字符串（String） 对象
JavaScript 字符串
一个字符串用于存储一系列字符就像 "John Doe".
一个字符串可以使用单引号或双引号：
var carname="Volvo XC60";
var carname='Volvo XC60';
你使用位置（索引）可以访问字符串中任何的字符：
var character=carname[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);
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);
在字符串中查找字符串
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
如果没找到对应的字符函数返回-1
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
内容匹配
match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));
替换内容
replace() 方法在字符串中用某些字符替换另一些字符。
str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");
字符串大小写转换
字符串大小写转换使用函数 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);
JavaScript将输出正确的文本字符串：We are the so-called "Vikings" from the north.
下表列出其他特殊字符，可以使用反斜线转义特殊字符：
JavaScript Date（日期） 对象
Date()
如何使用 Date() 方法获得当日的日期。
getFullYear()
使用 getFullYear() 获取年份。
getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear()
如何使用 setFullYear() 设置具体的日期。
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
Display a clock
如何在网页上显示一个钟表。
完整的 Date 对象参考手册
我们提供 JavaScript Date 对象参考手册，其中包括所有可用于日期对象的属性和方法。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("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
设置日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：
var myDate=new Date();
myDate.setFullYear(2010,0,14);// 第二个参数为月份， 0 到 11 之间的整数值，表示从一月到十二月
在下面的例子中，我们将日期对象设置为 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日之后");
}
JavaScript Array（数组） 对象
数组对象的作用是：使用单独的变量名来存储一系列的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
document.write(mycars[i] + "<br />");
}
</script>
</body>
</html>
什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据（例如：车名字），存在单独变量如下所示：
var car1="Saab";
var car2="Volvo";
var car3="BMW";
然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！
最好的方法就是用数组。
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。
创建一个数组
创建一个数组，有三种方法。
下面的代码定义了一个名为 myCars的数组对象：
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值：
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";
[0] 是数组的第一个元素。[1] 是数组的第二个元素。
在一个数组中你可以有不同的对象
所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
因此，你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
数组方法和属性
使用数组对象预定义属性和方法：
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
合并两个数组 - concat()
合并三个数组 - concat()
用数组的元素组成字符串 - join()
删除数组的最后一个元素 - pop()
数组的末尾添加新的元素 - push()
将一个数组中的元素的顺序反转排序 - reverse()
删除数组的第一个元素 - shift()
从一个数组中选择元素 - slice()
数组排序（按字母顺序升序）- sort()
数字排序（按数字顺序升序）- sort()
数字排序（按数字顺序降序）- sort()
在数组的第2位置添加一个元素 - splice()
转换数组到字符串 -toString()
在数组的开头添加新元素 - unshift()
JavaScript Boolean（布尔） 对象
创建 Boolean 对象
Boolean 对象代表两个值:"true" 或者 "false"
下面的代码定义了一个名为 myBoolean 的布尔对象：
var myBoolean=new Boolean();
如果布尔对象无初始值或者其值为:
0
-0
null
""
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 "false" 时）！
浏览器DOM
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：
<script>
document.write(location.href);
</script>
以上代码输出为：
https://www.runoob.com/js/js-window-location.html
Window Location pathname
location.pathname 属性返回 URL 的路径名。
实例
返回当前 URL 的路径名：
<script>
document.write(location.pathname);
</script>
以上代码输出为：
/js/js-window-location.html
Window Location assign
location.assign() 方法加载新的文档。
实例
加载一个新的文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function newDoc(){
window.location.assign("https://www.runoob.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>
浙公网安备 33010602011771号