JavaScript 菜鸟教程阅读笔记+总结+源码

于 2020-02-09 13:16:15 发布
阅读量5k 收藏 52
点赞数 12
分类专栏： JavaWeb 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40981851/article/details/104234027
版权

文章简介

本文是我在 Runoob.com 菜鸟教程上的总结与学习笔记。

除了引用 菜鸟教程上的内容之外，我添加了许多它没有介绍，但是也很重要的内容。

另外，我对 JavaScript 的内容进行了重新排版，排版后的内容更适合阅读。

如果你想直接访问菜鸟教程，请点击上方的超链接。

强烈建议，当遇到不能理解的知识点，去菜鸟教程上运行实例观察。

或者你也可以在你的电脑上运行。

JavaScript

简介

​ 官方说明

​ JavaScript 是互联网上最流行的客户端脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

​ # 脚本语言：不需要编译，直接可被浏览器解析执行。

​ JavaScript 是可插入 HTML 页面的编程代码，由浏览器执行。每一个浏览器都有 JavaScript 的解析引擎。

​ 我的解释

​ JavaScript 使得用户在客户端进行操作时，可以不需要与服务器端产生交互。由此来避免一些对用户极其不友好的体验。

​ 比如，填写了半个小时表单，提交给服务器后，服务器响应结果为“密码格式错误，请重新填写！”，用户又需要重新填写表单。而像格式校验这样的工作，我们其实就可以交给 JavaScript 来解决，这样是最为合理的方式。

发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为 ScriptEase

1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，并该名为 JavaScript

1996年，微软抄袭 JavaScript 开发出 JScript

于是，”客户端脚本语言界的三足鼎立“开始了。当然这对程序员非常不友好，因为此时程序员需要编写三份不用的代码以适配所有浏览器。

1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript

最终，ECMAScript 成为了所有脚本语言的标准化规范，终止了客户端脚本语言界混乱不堪的现象。

我们可以将 ECMAScript 理解为“标准”，将ScriptEase、JavaScript、JScript理解为“标准的实现和扩展”。

所以，其实如今的 JavaScript 其实是由：公共的ECMAScript 和 独有的JavaScript(DOM,BOM) 这两个部分组成。

ECMAScript

注释

单行注释：//注释内容

多行注释：/*注释内容*/

// 注释
/* 注释 */

验证js支持

如果用户不能确定浏览器是否支持JavaScript脚本，那么可以应用HTML提供的注释符号进行验证。

对于不支持 JavaScript 的浏览器，将会把编写的 JavaScript 脚本作为注释处理。

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

<script>标签

  • <script>可以定义在html页面的任何位置。
  • <script>可以定义多个。
  • <script>定义的位置会影响执行顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
    <script>
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
    </script>

</body>
</html>

内部样式

在 html文件中的 <script>标签中，直接编写 JavaScript代码。

<script>
    document.write("我在html文件中，我是内部js语句！");
</script>

<script>
    alert("我在html文件中，我是内部js语句！");
</script>

外部样式

在 html文件中的 <script>标签中，使用 “src”属性 来引入 外部js文件。

document.write("我在js文件中，我是外部js语句！");

alert("我在js文件中，我是外部js语句！");

<script src="style01.js">
</script>

<script src="style02.js">
</script>

如果<script>标签中，既有 JavaScript代码，又引用了 外部js文件，那么依然会执行 外部js代码。

<script src="style01.js">
    /* 内部js语句不会执行 */
    document.write("我在html文件中，我是内部js语句！");  
</script>

<script src="style02.js">
    /* 内部js语句不会执行 */
    alert("我在html文件中，我是内部js语句！"); 
</script>

函数

我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分，该函数会在点击按钮时被调用。

<!DOCTYPE html>
<html>
<head>
<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }
</script>
</head>
<body>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">点我</button>
</body>
</html>

输出

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 console.log() 写入到浏览器的控制台。

window.alert()

在浏览器中弹出警告框：

<script>
	window.alert(5 + 6); 
</script>

innerHTML

获取元素后，修改元素的内容：

​ document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

​ innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

<p id="demo">我的第一个段落</p>

<script>
	document.getElementById("demo").innerHTML = "段落已修改。";
</script>

document.write()

直接写在HTML 文档中：

<p>我的第一个段落。</p>
    
<script>
document.write(Date());
</script>

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
   	document.write(Date());
}
</script>

onsole.log()

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。

<script>
	console.log("喜欢");
</script>

变量

Java 是强类型语言。

在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。

变量只能存储固定类型的数据。

语法：数据类型 变量名 = 初始化值;

int i = 1;
float f = 1.11f;
String s = "ABC"

JavaScript 是弱类型语言。

在开辟变量存储空间时，不定义空间将来的存储的数据的数据类型。

变量可以存放任意类型的数据。

语法：var 变量名 = 初始化值;

var i = 1;
var f = 1.11f;
var c = "ABC"

命名规则

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

声明

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个不可以赋同一个值:

var x,y,z=1; // x,y=undefined  z=1

如果重新声明 JavaScript 变量，该变量的值不会丢失。

在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo"; 
var carname;

局部变量

"let"关键字 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 不同的变量! 
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}

常量

"const"关键字 用来声明 JavaScript中的常量。

//定义常量a并赋值为0
const a = 0;

//报错（不能重新赋值）
a = 1;

//报错（不能重新声明）
const a = 2;

//输出0
console.log("a is: " + a);

全局变量

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

这条语句，将声明 window 的一个属性 carname：

carname = "Volvo";

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除：

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(this.var2); // 2
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); // 1

delete var2; // true 可以删除
console.log(var2); // 报错变量未定义

数据类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

字符串

字符串可以是引号中的任意文本。

您可以使用单引号或双引号：

var an = "cat";
var an = 'cat';

你可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

你也可以在字符串添加转义字符来使用引号：

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

字符串可以是对象：

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

数字

JavaScript 只有一种数字类型。

数字可以带小数点，也可以不带：

var x1 = 34.00;      //使用小数点来写
var x2 = 34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

布尔值

布尔（逻辑）只能有两个值：true 或 false。

var x = true;
var y = false;

数组

下面的代码创建名为 cars 的数组：

var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

或者 (condensed array)：

var cars = new Array("Saab","Volvo","BMW");

或者 (literal array)：

var cars=["Saab","Volvo","BMW"];

对象

对象由 花括号{} 分隔，属性由 逗号, 分隔。

在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。

下面的例子中，对象 (person) 有三个属性：firstname、lastname 以及 id：

var person = {firstname:"John", lastname:"Doe", id:5566};

空格和折行无关紧要。声明可横跨多行：

var person = {
    firstname : "John",
    lastname : "Doe",
    id    : 5566
};

对象属性有两种寻址方式：

name = person.lastname;
name = person["lastname"];

在对象中定义一个方法：

var person = {
    firstname : "John",
    lastname : "Doe",
    id    : 5566 ,
    talk : funciton(){
    	document.write("HelloWorld！")
	}
};

Undefined / Null / NaN

  • undefined
    • 一个没有设置值的变量。
    • 当一个变量没有给定初始化值时，自动赋值。
    • 可以通过将变量的值设置为 undefined 来清空变量。值为 undefined, 类型为 undefined。
  • Null
    • 主动释放。
    • 可以通过将变量的值设置为 null 来清空变量。值为 null(空), 但类型为对象。
  • NaN
    • 一个不是数字的数字类型。 (Not A Number)
    • NaN参加运算，任何运算结果都为NaN。

注意：null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

判断变量的数据类型

typeof 方法

你可以使用 typeof 操作符来检测变量的数据类型，括号可加可不加。

typeof(1) // number
typeof(1.11) // number
typeof(NaN) // number

typeof "ABC" // string
typeof 'ABC' // string

typeof true // boolean
typeof false // boolean

typeof undefined // undefined

typeof null // object
typeof [1,2,3,4]; // object
typeof {name:'John', age:34} // object
typeof new Date() //  object

typeof function () {}  // function

isArray 方法

注意：isArray 只能用来判断 Array！

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

// 判断是否支持该方法
if (Array.isArray) { 
    // 检验该对象是否为数组
    if(Array.isArray(cars)) {
        document.write("true") ;
    }
}

instanceof 操作符

注意：instanceof 只能用来判断 Object ！

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}

作用域

局部作用域

在局部作用域：只能在函数内部访问。

变量在函数内声明，即为局部变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

全局作用域

全局作用域：网页中所有脚本和函数均可使用。

变量在函数外定义，即为全局变量。

全局变量在页面关闭后销毁。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量没有声明（没有使用 var 关键字），该变量也为全局变量，不论这个变量在哪被使用。

// 函数myFunction被调用后，此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

运算符

类型转换

如果变量不是运算符所要求的类型，变量将自动进行类型转换。

其他类型转number：

// string -> number
var num1 = +"123"; // 123
var num2 = +"abc"; // NaN

// boolean -> number
var num3 = +true; // 1
var num4 = +false; // 0

// null -> number
var num5 = +null; // 0

// undefined -> number
var num6 = +undefined; // NaN

其他类型转boolean：

// number：0或NaN为假，其他为真   
document.write( !!3 + "<br>");  //true
document.write( !!0 + "<br>"); 
document.write( !!NaN + "<br><br>");

// string：除了空字符串("")，其他为真
document.write( !!"a" + "<br>");    //true
document.write( !!"" + "<br><br>");

// null：假
document.write( !!null + "<br><br>");

// undefined：假
document.write( !!undefined + "<br><br>");

// object：真
document.write( !!new Date() + "<br><br>");  //true

所以 Java的条件语句为：if(obj != null)，而 JavaScript的条件语句为：if(obj)。

比较方式

类型相同，直接比较

字符串按照字典顺序，逐位比较ASCII码大小。

document.write("a" > "z"); // false
document.write("azzzz" > "zaaaa"); // false

类型不同，先转换类型，再比较

document.write("123" == 123); // true

=== 绝对等于：值和类型均相等。

document.write("123" === 123); // false

条件运算符

条件运算符可以基于某些条件对变量进行赋值。

三元运算符

  • age<18 成立，返回"年龄太小"
  • age<18 不成立，返回"年龄已达到"
voteable = ( age < 18 ) ? "年龄太小" : "年龄已达到";

多元运算符

  • p>1 成立：
    • p<12 成立，返回 p>12（false）。
    • p<12 不成立，返回 p=6。
  • p>1 不成立：
    • 返回 p=3。
function test(p,b){
    return p>1 ? p<12 ? p>12 : p=6 : p=3; 
    //  p>1 ? 整体 : p=3  和 p<12 ? p>12 : p=6
}

流程控制语句

if…else…

只有当指定条件为 true 时，该语句才会执行代码。

if (condition) {
    当条件为 true 时执行的代码
}

在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (condition) {    
	当条件为 true 时执行的代码}
else {
    当条件不为 true 时执行的代码
}

选择多个代码块之一来执行。

if (condition1) {
    当条件 1 为 true 时执行的代码
} else if (condition2) {
    当条件 2 为 true 时执行的代码
} else {
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch

在 Java 中，switch语句可以接受的数据类型：byte int short char 枚举(1.5) String(1.7)。

在 JavaScript 中，switch语句可以接受任意的原始数据类型。

switch(n) {
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        匹配不存在时做的事情
}

for

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

for (语句1 ; 语句2 ; 语句3) {
   循环体
}

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的，不使用语句 1 也可以。

您可以在语句 1 中初始化任意（或者多个）值：

var i=2,len=cars.length;
for (; i<len; i++){ 
    document.write(cars[i] + "<br>");
}

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的（比如当循环内部有相应的代码时）：

var i=0,len=cars.length;
for (; i<len; ){ 
    document.write(cars[i] + "<br>");
    i++;
}

for In

遍历数组，则变量为索引：

var nums = [1, 3, 5];

for (var x in nums) {
    document.write(nums[x]+ "<br />");
}

for of

遍历数组，则变量为元素：

var nums = [1, 3, 5];

for (var x of nums) {
    document.write( x + "<br />");
}

while

while 循环会在指定条件为真时循环执行代码块。

while (条件)
{
    需要执行的代码
}

do/while

do/while 循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

break & continue

break 语句可用于跳出循环。

for (i=0;i<10;i++)
{
    if (i==3)
    {
        break; 
    }
    x = x + "The number is " + i + "<br>";
}
// 该数字为 0
// 该数字为 1
// 该数字为 2

continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。

for (i=0;i<6;i++)
{
    if (i==3)
    {
        countinue; 
    }
    x = x + "The number is " + i + "<br>";
}
// 该数字为 0
// 该数字为 1
// 该数字为 2
// 该数字为 4
// 该数字为 5

标记

如需标记 JavaScript 语句，请在语句之前加上冒号：

label:
statements

break 和 continue 语句仅仅是能够跳出代码块的语句。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

var nums = [1, 2, 3];

// 标签
label:
for (var x of nums) {
    for (var y of nums) {
        document.write( (x*y) + " ");
        if (y == 2 && x == 2 ) {
            // 跳出两个循环
            break label; 
        }
    }
    document.write("<br />");
}
  1. 练习：99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table  align='center'>");
        //1.完成基本的for循环嵌套，展示乘法表
        for (var i = 1; i <= 9 ; i++) {
            document.write("<tr>");
            for (var j = 1; j <=i ; j++) {
                document.write("<td>");
                //输出  1 * 1 = 1
                document.write(i + " * " + j + " = " + ( i*
                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/
            document.write("</tr>");
        }
        //2.完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body>
</body>
</html>

类型转换

字符串

全局方法 String() 可以将变量转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式：

String(123) 
String(false)
String(new Date())

toString() 也是有同样的效果：

(123).toString()
false.toString() 
new Date().toString()

数字

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

Number(false)     // 返回 0
Number(true)      // 返回 1

Number(new Date()) // 返回 1404568027739

"111".valueOf() // 111

parseInt("111") // 111

正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

/正则表达式主体/修饰符(可选)

例如：var patt = /runoob/i

/runoob/i 是一个正则表达式。

runoob 是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

String对象的方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);

search 方法可使用字符串作为参数，字符串参数会转换为正则表达式：

var str = "Visit Runoob!"; 
var n = str.search("Runoob");

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str = "Visit microsoft!"; 
var txt = str.replace(/microsoft/i,"Runoob");

replace() 方法将接收字符串作为参数，字符串参数会转换为正则表达式：

var txt = str.replace("microsoft","Runoob");

修饰符

修饰符描述
i执行对大小写不敏感的匹配
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m执行多行匹配

表达式

方括号用于查找某个范围内的字符：

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

元字符

元字符是拥有特殊含义的字符：

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+1 或 n。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*0 或 n。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?0 或 1。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}x。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}至少 x 个。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}x 至 y。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$结尾为字符串 n 。
^n开头为字符串 n 。
?=n其后紧接字符串 n 。
?!n其后没有紧接字符串 n 。

对象

Function对象

  • 特点
    • length：代表形参的个数
      • 函数不用写形参类型和返回值类型。
      • 函数是一个对象，如果定义名称相同的函数，原本的函数会被覆盖。
      • 函数的调用，仅与其名称有关，和参数列表无关。
      • 函数仅能调用一次。

创建Function对象的方法，有以下三种方式：

var fun1 = new Function("a" , "b" , "document.write( a + '<br>'); document.write( b + '<br>'); document.write(fun1.length + '<br>' + '<br>');");

function fun2(a,b,c) {
    document.write(a + "<br>");
    document.write(b+'<br>');
    document.write(c+'<br>');
    document.write(fun2.length+'<br>'+'<br>');
}

var fun3 = function(a,b,c,d){
    document.write(a+'<br>');
    document.write(b+'<br>');
    document.write(c+'<br>');
    document.write(d+'<br>');
    document.write(fun3.length+'<br>'+'<br>');
}

在函数声明中有一个隐藏的内置对象（数组），arguments封装了所有的实际参数。

function add(){
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

var sum = add(1,2,3,4,5,6,7,8,9,10);

document.write(sum); // 55

Array对象

  • 特点
    • 元素类型可变。
    • 数组长度可变。

创建对象

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"];

对象方法

indexOf() 方法可返回数组中某个指定的元素位置。

var y = myCars.indexOf("Volvo")

join() 方法用于把数组中的所有元素转换一个字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

// 输出为 Banana,Orange,Apple,Mango

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

// 输出为 Banana,Orange,Apple,Mango,Kiwi

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

// 输出为 Banana,Orange,Apple

Date对象

创建对象

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。

有四种方式初始化日期:

new Date() // 当前日期和时间 Fri Feb 07 2020 18:03:29 GMT+0800 (中国标准时间)

new Date(1581069604154) //返回从 1970 年 1 月 1 日至今的毫秒数

new Date("October 13, 1975 11:13:00") // 指定日期和时间的字符串

new Date(9,5,24,11,33,0) // year month day hours minutes seconds milliseconds

设置日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：

var myDate = new Date();
myDate.setFullYear(2010,0,14);

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate = new Date();
myDate.setDate(myDate.getDate() + 5);

对象方法

getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

var d = new Date();
var n = d.getTime();

// 输出为 1581069604154

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

var d=new Date();
var n=d.toLocaleTimeString();
 
// 输出为 2020/2/7 下午6:04:45

Math对象

创建对象

Math对象不用创建，直接使用。

var x = Math.PI;
var y = Math.sqrt(16);

对象方法

方法描述
abs(x)返回 x 的绝对值。
ceil(x)对 x 进行上舍入。
floor(x)对 x 进行下舍入。
max(x,y,z,…,n)返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)返回 x,y,z,…,n中的最低值。
pow(x,y)返回 x 的 y 次幂。
random()返回 0 ~ 1 之间的随机数。
round(x)四舍五入，底层为 floor(x+0.5)。
sqrt(x)返回数的平方根。

如下所示：

Math.abs(1) // 1
Math.abs(-1) // 1

Math.ceil(1.1) // 2
Math.ceil(1.9) // 2

Math.floor(1.1) // 1
Math.floor(1.9) // 1

Math.max(1,2,3,4,5) // 5
Math.min(1,2,3,4,5) // 1

pow(2,10) // 1024

Math.round(-1) // floor(-0.5) = -1
Math.round(1) // floor(1.5) = 1

Math.round(-1.5) // floor(-1) = -1
Math.round(1.5) // floor(2) = 2

Math.sprt(1024) // 32

RegExp对象

RegExp：是正则表达式（regular expression）的简写。

正则表达式描述了字符的模式对象。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

创建对象

  • 模式(parttern) 描述了一个表达式模型。
  • 修饰符(modifiers) 描述了检索是否是全局，区分大小写等。
var patt=new RegExp(pattern,modifiers);

或更简单的方法

var patt=/pattern/modifiers;

例如：

var re = new RegExp("\\w+");
var re = /\w+/;

在字符串中不区分大小写找"is"：

var patt1 = /is/i;

全文查找 “is”：

var patt1=/is/g;

全文查找和不区分大小写搜索 “is”：

var patt1=/is/gi;

对象方法

test()方法搜索字符串指定的值，根据结果并返回真或假。

var str = 'runoob';

var patt1 = new RegExp('\\w', 'g'); // 有转义,作为正则表达式处理
var patt2 = new RegExp('\w', 'g');  // 无转义,作为字符串处理

document.write( patt1.test(str) ) //输出 true
document.write( patt2.test(str) ) //输出 false

Global对象

创建对象

Global全局对象，其方法不需要对象就可以直接调用。

对象方法

encodeURI() 方法可把字符串作为 URI 进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： , / ? : @ & = + $ #

encodeURI("123") // 123

encodeURI("abcABC") // abcABC

encodeURI("@") // @

encodeURI("￥") // %EF%BF%A5

encodeURI("笑") // %E7%AC%91

encodeURI("http://www.baidu.com?username=李白")
// http://www.baidu.com?username=%E6%9D%8E%E7%99%BD

decodeURI() 方法可对 encodeURI() 方法编码过的 URI 进行解码。

var str = "恭喜发财";

var uri = encodeURI(str); // ％E6％81％AD％E5％96％9C％E5％8F％91％E8％B4％A2

var str = decodeURI(uri); // 恭喜发财

encodeURIComponent() 方法可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。

decodeURIComponent() 方法可对 encodeURIComponent() 方法编码的 URI 进行解码。

encodeURIComponent("123") // 123

encodeURIComponent("abcABC") // abcABC

encodeURIComponent("@") // %40

encodeURIComponent("￥") // %EF%BF%A5

encodeURIComponent("笑") // %E7%AC%91

encodeURI("http://www.baiducom?username=李白")
// http%3A%2F%2Fwww.baidu.com%3Fusername%3D%E6%9D%8E%E7%99%BD

parseInt() 方法可解析一个字符串，并返回一个整数。

parseInt("11") // 11
parseInt("11.11") // 11
parseInt("11 12 13") // 11
parseInt(" 11 ") // 11

parseInt("11 years") // 11
parseInt("He was 11") // NaN

parseInt("10",16) // 16
parseInt("10",10) // 10
parseInt("10",8) // 8

parseInt("0x10") // 16
parseInt("010") // 10

isNaN() 方法用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

isNaN(123) // false
isNaN(-1.23) // false
isNaN(5-2) // false
isNaN(0) // false

isNaN("Hello") // true
isNaN("2005/12/12") // true

eval() 方法计算 JavaScript 字符串，并把它作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));

// 输出为 200 4 27

编码

URL

​ URL 统一资源定位符（Uniform Resource Locator），其实就是我们访问web页面时需要输入的”网页地址“”网址“，比如：https://www.google.com/ 就是URL。

完整定义如下：

协议类型 😕/ 登录信息（认证） @ 服务器地址 : 端口号 / 带层次的文件路径 ? 查询字符串 # 片段标识符

htttp 😕/ user:pass @ www.example.jp : 80 / dir/index.html ? uid=1 # ch

URI

​ URI 统一资源标识符（Uniform Resource Identifier），就是某个网络协议方案表示的资源的定位标识符，比如：https://www.google.com/ 也同样可以说是，在https网络协议下的一个URI。

如果想要了解 URI统一资源标识符，那么我们必须理清它和 URL统一资源定位符 之间的关系。

​ 第一，URL统一资源定位符 是一个具体的概念，而 URI统一资源标识符 是一个抽象的概念。

​ 第二，URL统一资源定位符 是 URI统一资源标识符 的子集。

它是 URL，而 URL 属于 URI。：

​ htttp 😕/ user:pass @ www.example.jp : 80 /dir/index.html ? uid=1#ch

它是 URI：

​ 联系地址 😕/ 访客:央视记者 @ 央视 : 直播 / 中国/湖北/武汉/红十字会的仓库 ? 物品=捐款物资

  • utf-8：每个汉字3个字节；gbk：每个汉字2个字节；
    • 在转码时，将1个字节转化成8个二进制，每4个二进制转化成1个十进制，每2个十进制分为1个组，在每组前头加上%。
      • 传智播客 = %E4%BC%A0 %E6%99%BA %E6%92%AD %E5%AE%A2

DOM

​ 当网页被加载时，浏览器会创建页面的 DOM 文档对象模型（Document Object Model）。通过这种可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

​ 也就是说，DOM将标记语言文档的各个组成部分封装为对象，然后我们可以使用这些对象，并对标记语言文档进行CRUD的动态操作。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

DOM 虽然属于 BOM，但由于DOM功能强大，所以单独算一类。

根据 W3C 标准，DOM 被分为3个不同的部分：

  • 核心 DOM：针对任何结构化文档的标准模型
    • Node：节点对象，其他5个的父对象
    • Document：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
  • XML DOM：针对 XML 文档的标准模型
  • HTML DOM：针对 HTML 文档的标准模型

Document对象

获取HTML元素

通过 id 查找 id=“intro” 元素：

<p id="intro"> Hello World!!! </p>
    
<script>
    x = document.getElementById("intro");
    document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

通过 标签名 查找 id=“main” 元素中的所有 <p> 元素：

<div id="main">
	<p> Hello World!!! </p>
    <p> Hello JavaScript!!! </p>
</div>

<script>
    var x = document.getElementById("main");
    var y = x.getElementsByTagName("p");
    document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

通过 class 查找 class=“intro” 的元素：

<p class="intro"> Hello World!!! </p>

<script>
    x = document.getElementsByClassName("intro");
    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>

改变HTML内容

document.write() 可用于直接向 HTML 输出流写内容。

<script>
    document.write(Date());
</script>

使用 innerHTML 属性 修改 HTML 内容。

<p id="p1">Hello World!</p>

<script>
	document.getElementById("p1").innerHTML="新文本!";
</script>

改变HTML属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute = 新属性值

本例改变了 <img> 元素的 src 属性：

<img id="image" src="smiley.gif">

<script>
	document.getElementById("image").src = "landscape.jpg";
</script>

改变HTML样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property = 新样式

下面的例子会改变 <p> 元素的样式：

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "larger";
</script>

还可以 通过 HTML 元素的方法，改变和删除元素的属性：

<body>
    <h1>恭喜发财</h1>
    <input id="set" type="button" value="setAttribute">
    <input id="remove" type="button" value="removeAttribute">
</body>

<script>
    var h = document.getElementsByTagName("h1")[0];
    
    document.getElementById("set").onclick = function () {
        h.setAttribute("style","color: lightblue");
    }
    
    document.getElementById("remove").onclick = function () {
        h.removeAttribute("style");
    }
</script>

事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

事件可以描述为，特定组件被执行了特定的操作后，触发特定代码的执行。

我们可以将这个过程比喻为：

  • 我方水晶被摧毁后，我就责备对友。
  • 敌方水晶被摧毁后，我就夸奖自己。

具体事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

分配事件

使用 HTML事件属性 向 button 元素分配 onclick 事件：

<p id="demo"></p>
<button onclick="displayDate()">点这里</button>

<script>
    function displayDate(){
        document.getElementById("demo").innerHTML = Date();
    }
</script>

使用 HTML DOM 向 button 元素分配 onclick 事件：

<p id="demo"></p>
<button id="myBtn">点这里</button>

<script>
    document.getElementById("myBtn").onclick = function(){displayDate()};
    function displayDate(){
        document.getElementById("demo").innerHTML = Date();
    }
</script>

onload/onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

<script>
    function checkCookies(){
        if (navigator.cookieEnabled == true){
            alert("Cookies 可用")
        }
        else{
            alert("Cookies 不可用")
        }
    }
</script>
	
</body>

onchange事件

onchange 事件 会在输入字段改变时被触发。

本例当用户改变输入字段的内容时，会调用 upperCase() 函数。

<head>
<script>
    function myFunction(){
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
</script>
</head>

<body>
    输入你的名字: <input type="text" id="fname" onchange="myFunction()">
    <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>

鼠标事件

属性描述
onclick当用户点击某个对象时调用的事件句柄。
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
ondblclick当用户双击某个对象时调用的事件句柄。
onmousedown鼠标按钮被按下。
onmouseenter当鼠标指针移动到元素上时触发。
onmouseleave当鼠标指针移出元素时触发
onmousemove鼠标被移动。
onmouseover鼠标移到某元素之上。
onmouseout鼠标从某元素移开。
onmouseup鼠标按键被松开。

键盘事件

属性描述
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。

框架/对象事件

属性描述
onabort图像的加载被中断。 ( <object>)
onbeforeunload该事件在即将离开页面（刷新或关闭）时触发
onerror在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange该事件在当前 URL 的锚部分发生修改时触发。
onload一张页面或一幅图像完成加载。
onpageshow该事件在用户访问页面时触发
onpagehide该事件在用户离开当前网页跳转到另外一个页面时触发
onresize窗口或框架被重新调整大小。
onscroll当文档被滚动时发生的事件。
onunload用户退出页面。 ( <body> 和 <frameset>)

表单事件

属性描述
onblur元素失去焦点时触发
onchange该事件在表单元素的内容改变时触发( <input><keygen><select><textarea>)
onfocus元素获取焦点时触发
oninput元素获取用户输入时触发
onreset表单重置时触发
onsearch用户向搜索域输入文本时触发 ( <input=“search”>)
onselect用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit表单提交时触发

剪贴板事件

属性描述DOM
oncopy该事件在用户拷贝元素内容时触发
oncut该事件在用户剪切元素内容时触发
onpaste该事件在用户粘贴元素内容时触发

Element对象

在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :

  • 文档本身就是一个文档对象
  • 所有 HTML 元素都是元素节点
  • 所有 HTML 属性都是属性节点
  • 插入到 HTML 元素文本是文本节点
  • 注释是注释节点

属性

属性描述
element.attributes返回一个元素的属性数组
element.childNodes返回元素的一个子节点的数组
element.className设置或返回元素的class属性
element.firstChild返回元素的第一个子节点
element.id设置或者返回元素的 id。
element.innerHTML设置或者返回元素的内容。
element.lang设置或者返回一个元素的语言。
element.lastChild返回的最后一个子节点
element.nextSibling返回该元素紧跟的一个节点
element.nodeName返回元素的标记名（大写）
element.nodeType返回元素的节点类型
element.nodeValue返回元素的节点值
element.parentNode返回元素的父节点
element.previousSibling返回某个元素紧接之前元素
element.style设置或返回元素的样式属性

方法

方法描述
element.appendChild()为元素添加一个新的子元素
element.focus()设置文档或元素获取焦点
element.getAttribute()返回指定元素的属性值
element.getAttributeNode()返回指定属性节点
element.hasFocus()返回布尔值，检测文档或元素是否获取焦点
element.removeAttribute()从元素中删除指定的属性
element.removeAttributeNode()删除指定属性节点并返回移除后的节点。
element.removeChild()删除一个子元素
element.replaceChild()替换一个子元素
element.setAttribute()设置或者改变指定属性并指定值。
element.setAttributeNode()设置或者改变指定属性节点。

BOM

BOM 浏览器对象模型（Browser Object Model）将浏览器的各个组成部分封装成对象。

Window对象

所有浏览器都支持 window 对象，它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Window对象不需要创建可以直接使用 window使用。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同，window引用可以省略：

document.getElementById("header");

尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于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 方案（涵盖所有浏览器）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<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>

</body>
</html>

弹窗

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

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法

window.alert("*sometext*");

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

alert("你好，我是一个警告框！");
确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 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>

定时器

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

  • setInterval()：间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout()：在指定的毫秒数后执行指定代码。
setInterval() 方法

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

语法

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

window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。

setInterval() 第一个参数是函数（function），第二个参数是间隔的毫秒数

注意: 1000 毫秒是一秒。

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

本例显示当前时间：

<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() 方法

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(*intervalVariable*)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

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

然后你可以使用 clearInterval() 方法来停止执行。

以下例子，我们添加了 “停止” 按钮：

<p>页面上显示时钟：</p>
<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() 方法

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(*timeoutVariable*)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量：

myVar = setTimeout("*javascript function*",*milliseconds*);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

以下是同一个实例, 但是添加了 “Stop the alert” 按钮：

<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>

其他

一些其他方法：

  • window.open() - 打开新窗口，返回Window对象
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸
<body>
<input id="open" value="open" type="button">
<input id="close" value="close" type="button"><br><br>
</body>

<script>
// open()：打开一个新的浏览器窗口，并返回一个新的Window对象
var openObj = document.getElementById("open");
var newWindow;
openObj.onclick = function () {
    newWindow = open("https://www.zhuye.kim");
}

// close()：关闭浏览器窗口。谁调用，谁关闭。
var closeObj = document.getElementById("close");
closeObj.onclick = function () {
    newWindow.close();
}
</script>

Window Location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

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

href 属性用于设置或返回完整的URL：

<body>
<input type="button" id="href" value="获取当前路径">
<input type="button" id="goto" value="跳转页面">
</body>
<script>
    var hr = document.getElementById("href");
    hr.onclick = function () {
        alert(location.href);
    }
    var goto = document.getElementById("goto");
    goto.onclick = function () {
        location.href = "https://www.zhuye.kim";
    }
</script>

reload() 方法用于重新加载当前文档：

<body>
<input type="button" id="reload" value="刷新">
</body>

<script>
     var rel = document.getElementById("reload");
     rel.onclick = function () {
         location.reload();
     }
</script>

Window History对象

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

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back()

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的。

本例在页面上创建后退按钮：

<head>
<script>
function goBack(){
    window.history.back()
}
</script>
</head>

<body>
<input type="button" value="Back" onclick="goBack()">
</body>

history.forward()

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的：

<head>
<script>
function goForward(){
    window.history.forward()
}
</script>
</head>

<body>
<input type="button" value="Forward" onclick="goForward()">
</body>

history.go()

history.go() 方法 加载 history 列表中的某个具体页面。

如果参数是正数，则前进几个历史记录；负数则后退。

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

history.go(0); // location.reload();

history.go(1); // history.foward();
water1127
关注
  • 12
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值