JavaScript

JavaScript速成

HTML中使用

<head>
    <meta charset="utf-8">
    <script language="javascript">

			var str = "hello world";
			alert(typeof str); 弹出对话框
			str = 9999 ;
			alert(typeof str);

			var person = new Object();
			person.pid = "p001";
			person.pname="鸠摩智";
			alert(person.pid+"_"+person.pname);

        //js 方法
        function hello(num1 , num2 , name){
            if(num1>num2){
                return "hello to" + name ;
            }else{
                alert("HELLO");
            }
        }
        hello();
        hello(1);
        hello(1,2,3);
        hello(1,2,3,"hello");//任意参数个数都可以赋值
    </script>

<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo07.js"></script>

鼠标悬浮事件

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/demo05.css">
		<script type="text/javascript" src="js/demo09.js"></script>
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<table id="tbl_fruit">
					<tr>
						<th class="w20">名称</th>
						<th class="w20">单价</th>
						<th class="w20">数量</th>
						<th class="w20">小计</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>5</td>
						<td>20</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>	
						<td>西瓜</td>
						<td>3</td>
						<td>20</td>
						<td>60</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>菠萝</td>
						<td>4</td>
						<td>25</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>榴莲</td>
						<td>3</td>
						<td>30</td>
						<td>90</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">999</td>
					</tr>
				</table>
				<hr/>
				<div id="add_fruit_div">
					<table>
						<tr>
							<td>名称：</td>
							<td><input class="input" type='text' id='fname'/></td>
						</tr>
						<tr>
							<td>单价：</td>
							<td><input class="input" type='text' id='price'/></td>
						</tr>
						<tr>
							<td>数量：</td>
							<td><input class="input" type='text' id='fcount'/></td>
						</tr>
						<tr>
							<th colspan="2">
								<input type="button" id="addBtn" class="btn" value="添加"/>
								<input type="reset" class="btn" value="重填"/>
							</th>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

window.onload = function () {
	updateZJ();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl = document.getElementById("tbl_fruit");
	//获取表格中的所有的行
	var rows = fruitTbl.rows;
	for (var i = 1; i < rows.length - 1; i++) {
		var tr = rows[i];
		trBindEvent(tr);

	}
	$("addBtn").onclick=addFruit;
}

function $(id){
	return document.getElementById(id);
}

function delFruit() {
	if (event && event.srcElement && event.srcElement.tagName == "IMG") {
		//alert表示弹出一个对话框，只有确定按钮
		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
		if (window.confirm("是否确认删除当前库存记录")) {
			var img = event.srcElement;
			var tr = img.parentElement.parentElement;
			var fruitTbl = document.getElementById("tbl_fruit");
			fruitTbl.deleteRow(tr.rowIndex);
			updateZJ();
		}
	}

}

//当鼠标点击单价单元格时进行价格编辑
function editPrice() {
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var priceTD = event.srcElement;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
		if (priceTD.firstChild && priceTD.firstChild.nodeType == 3) {
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTD.innerText;
			//innerHTML 表示设置当前节点的内部HTML
			priceTD.innerHTML = "<input type='text' size='4'/>";
			// <td><input type='text' size='4'/></td> 四个字符
			var input = priceTD.firstChild;
			if (input.tagName == "INPUT") {
				input.value = oldPrice;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
				input.onblur = updatePrice;

				//8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
				input.onkeydown = ckInput;
			}
		}

	}
}

//检验键盘摁下的值的方法
function ckInput() {
	var kc = event.keyCode;
	// 0 ~ 9 : 48~57
	//backspace : 8
	//enter : 13
	//console.log(kc);

	if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {
		event.returnValue = false;
	}

	if (kc == 13) {
		event.srcElement.blur();
	}

}

//更新单价的方法
function updatePrice() {
	if (event && event.srcElement && event.srcElement.tagName == "INPUT") {
		var input = event.srcElement;
		var newPrice = input.value;
		//input节点的父节点是td
		var priceTD = input.parentElement;
		priceTD.innerText = newPrice;

		//5. 更新当前行的小计这一个格子的值
		//priceTD.parentElement td的父元素是tr
		updateXJ(priceTD.parentElement);

	}
}

//更新指定行的小计
function updateXJ(tr) {
	if (tr && tr.tagName == "TR") {
		var tds = tr.cells;
		var price = tds[1].innerText;
		var count = tds[2].innerText;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj;

		//6. 更新总计
		updateZJ();
	}

}

//更新总计
function updateZJ() {
	var fruitTbl = document.getElementById("tbl_fruit");
	var rows = fruitTbl.rows;
	var sum = 0;
	for (var i = 1; i < rows.length - 1; i++) {
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);		//NaN    not a number 不是一个数字
		sum = sum + xj;
	}
	rows[rows.length - 1].cells[1].innerText = sum;
}


//当鼠标悬浮时，显示背景颜色
function showBGColor() {
	//event : 当前发生的事件
	//event.srcElement : 事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);	--> TD
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;
		//td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement;
		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "navy";

		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		for (var i = 0; i < tds.length; i++) {
			tds[i].style.color = "white";
		}
	}
}

//当鼠标离开时，恢复原始样式
function clearBGColor() {
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;
		var tr = td.parentElement;
		tr.style.backgroundColor = "transparent";
		var tds = tr.cells;
		for (var i = 0; i < tds.length; i++) {
			tds[i].style.color = "threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand() {
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;
		//cursor : 光标
		td.style.cursor = "hand";
	}

}

function addFruit() {
	var fname=$("fname").value ;
	var price=parseInt($("price").value );
	var fcount=parseInt($("fcount").value );
	var xj=price*fcount;

	var fruitTbl=$("tbl_fruit");
	var tr=fruitTbl.insertRow(fruitTbl.rows.length-1);//加在倒数第二行后

	var fnameTD=tr.insertCell();
	fnameTD.innerText=fname;
	var priceTD=tr.insertCell();
	priceTD.innerText=price;
	var fcounTD=tr.insertCell();
	fcounTD.innerText=fcount;
	var xjTD=tr.insertCell();
	xjTD.innerText=xj;
	var imgTD=tr.insertCell();
	imgTD.innerHTML="<img src='imgs/del.jpg' class='delImg'/>";
	trBindEvent(tr);
	updateZJ();
}
function trBindEvent(tr){
	//1.绑定鼠标悬浮以及离开时设置背景颜色事件
	tr.onmouseover = showBGColor;
	tr.onmouseout = clearBGColor;
	//获取tr这一行的所有单元格
	var cells = tr.cells;
	var priceTD = cells[1];
	//2.绑定鼠标悬浮在单价单元格变手势的事件
	priceTD.onmouseover = showHand;
	//3.绑定鼠标点击单价单元格的事件
	priceTD.onclick = editPrice;
	//7.绑定删除小图标的点击事件
	var img = cells[4].firstChild;
	if (img && img.tagName == "IMG") {
		//绑定单击事件
		img.onclick = delFruit;
	}
}

学生查询与添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生查询</title>
    <link rel="icon" href="/image/xhxh.png" >
    <link rel="stylesheet" href="css/studentviewtest.css">
    <script type="text/javascript" src="js/studentviewtest.js"></script>
</head>
<body>
<div id="div_container">
    <div id="div_stu_list">
        <table id="tbl_stu">
            <tr>
                <th class="w20">学号</th>
                <th class="w20">姓名</th>
                <th class="w20">密码</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>10000</td>
                <td>测试人名</td>
                <td>123456</td>
                <td><img src="image/del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>10000</td>
                <td>测试人名</td>
                <td>123456</td>
                <td><img src="image/del.jpg" class="delImg"/></td>
            </tr>
            <tr>
                <td>10000</td>
                <td>测试人名</td>
                <td>123456</td>
                <td><img src="image/del.jpg" class="delImg"/></td>
            </tr>
        </table>
        <hr/>
    </div>
    <form action="add" method="post">
        <div id="add_stu_div">
            <table>
                <tr>
                    <td>学生：</td>
                    <td><input type="text" id="sname" value="王宏"/></td>
                </tr>
                <tr>
                    <td>学号:</td>
                    <td><input type="text" id="sid" value="10013"/></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="text" id="password" value="123456"/></td>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="添加至数据库">
                        <input type="button" id="addBtn" class="btn" value="添加"/>
                        <input type="reset" class="btn" value="重填"/>
                    </th>
                </tr>
            </table>
        </div>
    </form>
</div>

</body>
</html>

*{
    color: threeddarkshadow;
}
body{
    margin:0;
    padding:0;
    background-color:#808080;
}
div{
    position:relative;
    float:left;
}

#div_container{
    width:80%;
    height:100%;
    border:0px solid blue;
    margin-left:10%;
    float:left;
    background-color: honeydew;
    border-radius:8px;
}
#div_stu_list{
    width:100%;
    border:0px solid red;
}
#tbl_stu{
    width:60%;
    line-height:28px;
    margin-top:120px;
    margin-left:20%;
}
#tbl_stu , #tbl_stu tr , #tbl_stu th , #tbl_stu td{
    border:1px solid gray;
    border-collapse:collapse;
    text-align:center;
    font-size:16px;
    font-family:"黑体";
    font-weight:lighter;

}
.w20{
    width:20%;
}
.delImg{
    width:24px;
    height:24px;
}
.btn{
    border:1px solid lightgray;
    width:80px;
    height:24px;
}

window.onload = function () {
    //当页面加载完成，我们需要绑定各种事件
    //根据id获取到表格
    var stuTbl = document.getElementById("tbl_stu");
    //获取表格中的所有的行
    var rows = stuTbl.rows;
    for (var i = 1; i < rows.length; i++) {
        var tr = rows[i];
        trBindEvent(tr);
    }
    $("addBtn").onclick=addStu;
}

function $(id){
    return document.getElementById(id);
}

function delStu() {
    if (event && event.srcElement && event.srcElement.tagName == "IMG") {
        //alert表示弹出一个对话框，只有确定按钮
        //confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
        if (window.confirm("是否确认删除当前记录")) {
            var img = event.srcElement;
            var tr = img.parentElement.parentElement;
            var stuTbl = document.getElementById("tbl_stu");
            stuTbl.deleteRow(tr.rowIndex);
        }
    }

}

//当鼠标点击单价单元格时进行价格编辑
function editPrice() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var priceTD = event.srcElement;
        //目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
        if (priceTD.firstChild && priceTD.firstChild.nodeType == 3) {
            //innerText 表示设置或者获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            //innerHTML 表示设置当前节点的内部HTML
            priceTD.innerHTML = "<input type='text' size='4'/>";
            // <td><input type='text' size='4'/></td> 四个字符
            var input = priceTD.firstChild;
            if (input.tagName == "INPUT") {
                input.value = oldPrice;
                //选中输入框内部的文本
                input.select();
                //4.绑定输入框失去焦点事件 , 失去焦点，更新单价
                input.onblur = updateText;
            }
        }

    }
}


//更新单价的方法
function updateText() {
    if (event && event.srcElement && event.srcElement.tagName == "INPUT") {
        var input = event.srcElement;
        var newPrice = input.value;
        //input节点的父节点是td
        var priceTD = input.parentElement;
        priceTD.innerText = newPrice;


    }
}

//当鼠标悬浮时，显示背景颜色
function showBGColor() {
    //event : 当前发生的事件
    //event.srcElement : 事件源
    //alert(event.srcElement);
    //alert(event.srcElement.tagName);	--> TD
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        //td.parentElement 表示获取td的父元素 -> TR
        var tr = td.parentElement;
        //如果想要通过js代码设置某节点的样式，则需要加上 .style
        tr.style.backgroundColor = "navy";

        //tr.cells表示获取这个tr中的所有的单元格
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "white";
        }
    }
}

//当鼠标离开时，恢复原始样式
function clearBGColor() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        var tr = td.parentElement;
        tr.style.backgroundColor = "transparent";
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "threeddarkshadow";
        }
    }
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        //cursor : 光标
        td.style.cursor = "hand";
    }

}

function addStu() {
    var sid=$("sid").value;
    var sname=$("sname").value ;
    var password=$("password").value;
    var stuTbl=$("tbl_stu");
    var tr=stuTbl.insertRow(stuTbl.rows.length);
    var sidTD=tr.insertCell();
    sidTD.innerText=sid;
    var snameTD=tr.insertCell();
    snameTD.innerText=sname;
    var passwordTD=tr.insertCell();
    passwordTD.innerText=password;

    var imgTD=tr.insertCell();
    imgTD.innerHTML="<img src='image/del.jpg' class='delImg'/>";
    trBindEvent(tr);
}
function trBindEvent(tr){
    //1.绑定鼠标悬浮以及离开时设置背景颜色事件
    tr.onmouseover = showBGColor;
    tr.onmouseout = clearBGColor;
    //获取tr这一行的所有单元格
    var cells = tr.cells;
    var priceTD = cells[1];
    //2.绑定鼠标悬浮在单价单元格变手势的事件
    priceTD.onmouseover = showHand;
    //3.绑定鼠标点击单价单元格的事件
    priceTD.onclick = editPrice;


    //7.绑定删除小图标的点击事件
    var img = cells[3].firstChild;
    if (img && img.tagName == "IMG") {
        //绑定单击事件
        img.onclick = delStu;
    }
}

JavaScript语法

输出

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

使用 window.alert() 弹出警告框
使用 document.write() 方法将内容写到 HTML 文档中,如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
使用 innerHTML 写入到 HTML 元素,修改元素的 HTML 内容
使用 console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write(Date());
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

变量

字面量

在编程语言中，一般固定值称为字面量

数字: 可以是整数或小数,或者科学记数法
字符串: 可以单引号,双引号
表达式
数组
对象
函数

var a=[40, 100, 1, 5, 25, 10];

var b={firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

function myFunction(a, b) { return a * b;}

JavaScript 使用关键字 var 来定义变量,未使用值来声明的变量，其值实际上是 undefined

var x, length
x = 5
length = 6

折行: 可以在文本字符串中使用反斜杠对代码进行进行换行
document.write("你好 \
世界!");

重新声明变量: 如果重新声明 JavaScript 变量，该变量的值不会丢失
var carname="Volvo";
var carname;

let const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，必须初始化，不能通过再赋值修改，也不能再次声明

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

HTML 代码中使用全局变量,使用 let 关键字声明的全局作用域变量不属于 window 对象,使用 var 关键字声明的全局作用域变量属于 window 对象

var carName = "Volvo";
// 可以使用 window.carName 访问变量

let carName = "Volvo";
// 不能使用 window.carName 访问变量

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量
在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量
在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量
let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:
var 关键字定义的变量可以在使用后声明
let 关键字定义的变量则不可以在使用后声明

const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的,但是不能对常量对象重新赋值

未声明的变量

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除，该变量将被自动作为 window 的一个属性

carname="Volvo";//将声明 window 的一个属性 carname

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

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

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

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

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部 var x;

JavaScript 只有声明的变量会提升，初始化的不会。var x = 5; // 初始化 x

数据类型

动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型, 变量的数据类型可以使用 typeof 操作符来查看

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

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

字符串

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

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

var sln = answer.length;//计算字符串changdu

支持转移字符\
字符串可以被定义成对象var y = new String("John"); ,typeof 返回 Object

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带, 极大或极小的数字可以通过科学（指数）计数法来书写

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

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

数组

创建数组

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

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

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

对象

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

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

对象访问方式:

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

对象方法

对象方法通过添加 () 调用

name = person.fullName();

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

undefined null

undefined 这个值表示变量不含有值 , 可以通过将变量的值设置为 null 来清空变量

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

指定类型

var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person=new Object;

typeof 查看类型

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

类型转换

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

//查看对象是否为数组 (包含字符串 "Array"):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

类型转换为字符串

全局方法 String() 可以将数字转换为字符串 , 该方法可用于任何类型的数字，字母，变量，表达式：
toString() 也是有同样的效果。

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()

String(false)        // 返回 "false"
String(true)         // 返回 "true"
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

字符串转换为数字

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

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

一元运算符 +

Operator + 可用于将变量转换为数字：
如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)

<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var y = "5";
    var x = + y;
    document.getElementById("demo").innerHTML =
		typeof y + "<br>" + typeof x;
}
    //string number
</script>

<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var y = "5";
    var x = + y;
    document.getElementById("demo").innerHTML =
		typeof y + "<br>" + typeof x;
}
    //string number
</script>

布尔值转换为数字4

//全局方法 Number() 可将布尔值转换为数字。
Number(false)     // 返回 0
Number(true)      // 返回 1

日期转换为数字

//全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d)          // 返回 1404568027739
//日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime()        // 返回 1404568027739

自动类型转换

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

原始值	转换为数字	转换为字符串	转换为布尔值	实例
false	0	“false”	false	尝试一下 »
true	1	“true”	true	尝试一下 »
0	0	“0”	false	尝试一下 »
1	1	“1”	true	尝试一下 »
“0”	0	“0”	true	尝试一下 »
“000”	0	“000”	true	尝试一下 »
“1”	1	“1”	true	尝试一下 »
NaN	NaN	“NaN”	false	尝试一下 »
Infinity	Infinity	“Infinity”	true	尝试一下 »
-Infinity	-Infinity	“-Infinity”	true	尝试一下 »
“”	0	“”	false	尝试一下 »
“20”	20	“20”	true	尝试一下 »
“Runoob”	NaN	“Runoob”	true	尝试一下 »
[ ]	0	“”	true	尝试一下 »
[20]	20	“20”	true	尝试一下 »
[10,20]	NaN	“10,20”	true	尝试一下 »
[“Runoob”]	NaN	“Runoob”	true	尝试一下 »
[“Runoob”,“Google”]	NaN	“Runoob,Google”	true	尝试一下 »
function(){}	NaN	“function(){}”	true	尝试一下 »
	NaN	“[object Object]”	true	尝试一下 »
null	0	“null”	false	尝试一下 »
undefined	NaN	“undefined”	false	尝试一下 »

函数

函数可以在声明之前调用

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

匿名函数

var x = function (a, b) {return a * b};
var z = x(4, 3);

Function() 构造函数

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

自调用函数

自调用表达式会自动调用 , 如果表达式后面紧跟 () ，则会自动调用 , 不能自调用声明的函数。

(function () {
    var x = "Hello!!";      // 调用自己
})();

lambda

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的

(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号

() => {函数声明}

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

const x = (x, y) => { return x * y };

默认参数

ES5中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

//设置默认值
function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

//or

function myFunction(x, y) {
    y = y || 0;
}

ES6 支持函数带有默认参数

function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
}
 
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值

arguments 对象

argument 对象包含了函数调用的参数数组

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

函数调用

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。myFunction() 和 window.myFunction() 是一样的

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

当函数没有被自身的对象调用时 this 的值就会变成全局对象。在 web 浏览器中全局对象是浏览器窗口（window 对象）。

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

call() apply()

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身

apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值，即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

事件

HTML 事件是发生在 HTML 元素上的事情 , 当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件 , HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

<button onclick="displayDate()">现在的时间是?</button>

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

运算符

=== 为绝对相等，即数据类型与值都必须相等
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
字符串可以通过+连接

x=5+5;
y="5"+5;
z="Hello"+5;

//10 55 Hello5

判断与循环

for in 循环

类似Python

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}
//BillGates56

outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

正则表达式

搜索与替换

// /runoob/i  是一个正则表达式。
//runoob  是一个正则表达式主体 (用于检索)。
//i  是一个修饰符 (搜索不区分大小写)。
var patt = /runoob/i

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

<p>替换 "microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>

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

test()

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var patt = /e/;
patt.test("The best things in life are free!");
//返回true

//or 
/e/.test("The best things in life are free!")

exec()

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

/e/.exec("The best things in life are free!");
//e

异常

try-catch

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

throw

<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
</script>

调试

浏览器窗口

a = 5;
b = 6;
c = a + b;
console.log(c);

debugger

与在调试工具中设置断点的效果是一样的

var x = 15 * 5;
debugger;//停止
document.getElementbyId("demo").innerHTML = x;

严格模式

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量

"use strict";
x = 3.14;       // 报错 (x 未定义)

"use strict";
myFunction();
function myFunction() {
    y = 3.14;   // 报错 (y 未定义)
}

在函数内部声明是局部作用域 (只在函数内使用严格模式):

x = 3.14;       // 不报错
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

严格模式限制:

不允许使用未声明的变量
不允许删除变量或对象
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 “eval” 字符串
变量名不能使用 “arguments” 字符串
由于一些安全原因，在作用域 eval() 创建的变量不能被调用
禁止this关键字指向全局对象

表单验证

<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

HTML自动认证

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>

<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="text" class="inputstyles" name="stars" value="" placeholder="How many st

约束验证DOM方法

Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：`setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)`

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>

约束验证 DOM 属性

属性	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

this

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

<h2>JavaScript <b>this</b> 关键字</h2>
<p>实例中，<b>this</b> 指向了 <b>person</b> 对象。</p>
<p>因为 person 对象是 fullName 方法的所有者。</p>
<p id="demo"></p>
<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
</script>

方法中的 this

在对象方法中， this 指向调用它所在方法的对象。

<h2>JavaScript <b>this</b> 关键字</h2>
<p>实例中，<b>this</b> 指向了 <b>person</b> 对象。</p>
<p>因为 person 对象是 fullName 方法的所有者。</p>
<p id="demo"></p>
<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
</script>

单独使用 this

单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]:

严格模式下，如果单独使用，this 也是指向全局(Global)对象。

函数中的this

在函数中，函数的所属者默认绑定到 this 上。

在浏览器中，window 就是该全局对象为 [object Window]:

严格模式下:严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

事件中的this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素

<h2>JavaScript <b>this</b> 关键字</h2>

<button onclick="this.style.display='none'">点我后我就消失了</button>

JSON

JSON 格式在语法上与创建 JavaScript 对象代码是相同的

JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

{"name":"Runoob", "url":"www.runoob.com"}

"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

JSON.stringify()

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

JSON.stringify(value[, replacer[, space]])

value:

必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

返回包含 JSON 文本的字符串。

var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一个参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
 
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
document.write( "使用参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出

只有一个参数情况：
{"name":"菜鸟教程","site":"http://www.runoob.com"}

使用参数情况：
{
    "name": "菜鸟教程",
    "site": "http://www.runoob.com"
}

JSON.parse()

JSON.parse(text[, reviver])

**text:**必需，一个有效的 JSON 字符串
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数

返回给定 JSON 字符串转换后的对象

<h2>从 JSON 字符串中创建一个对象</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
	'{"name":"菜鸟教程","site":"http://www.runoob.com" },' +
	'{"name":"Google","site":"http://www.Google.com" },' +
	'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
	obj.employees[1].name + " " + obj.employees[1].site;
</script>

void(0)

<a href="javascript:void(0)">单击此处什么也不会发生</a>

<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>

//参数 a 将返回 undefined :
function getValue(){
   var a,b,c;
   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

异步编程

回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。

<p>回调函数等待 3 秒后执行。</p>
<p id="demo"></p>
<script>
function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
</script>

setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>

类

class ClassName {
  constructor() { ... }//构造函数
}
    
class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

let site = new Runoob("菜鸟教程",  "https://www.runoob.com");

类表达式

// 未命名/匿名类
let Runoob = class {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// output: "Runoob"
 
// 命名类
let Runoob = class Runoob2 {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// 输出: "Runoob2"

严格模式 “use strict”

class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // 错误
    let date = new Date(); // 正确
    return date.getFullYear() - this.year;
  }
}

extends 继承
static 静态方法
super 调用父类构造器

class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜欢' + this.sitename;
  }
}
 
class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  show() {
    return this.present() + ', 它创建了 ' + this.age + ' 年。';
  }
}
 
let noob = new Runoob("菜鸟教程", 5);
document.getElementById("demo").innerHTML = noob.show();

类中添加 getter 和 setter 使用的是 get 和 set 关键字
很多开发者在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开：

class Runoob {
  constructor(name) {
    this._sitename = name;
  }
  get sitename() {
    return this._sitename;
  }
  set sitename(x) {
    this._sitename = x;
  }
}
 
let noob = new Runoob("菜鸟教程");
 
document.getElementById("demo").innerHTML = noob.sitename;

DOM

简介

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 模型被构造为对象的树

DOM

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

查找HTML元素

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

//查找 id="intro" 元素
var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素 , 如果未找到该元素，则 x 将包含 null

//查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//查找 class="intro" 的元素
var x=document.getElementsByClassName("intro");

HTML

改变输出流

不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档

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

改变HTML内容

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

<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

改变HTML属性

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

CSS

改变HTML样式

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

使用事件

<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

DOM事件

事件

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

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

<script>
    //使用 JavaScript 来向 HTML 元素分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload onunload

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

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

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

<body onload="checkCookies()">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function mymessage(){
	alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()"></body>

</html>

onchange

onchange 事件常结合对输入字段的验证来使用

<input type="text" id="fname" onchange="upperCase()">

onmouseover onmouseout

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown onmouseup onclick

首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function lighton(){
	document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
	document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

onfocus

输入框获得焦点时触发

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

EventListener

addEventListener()

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的

注意:不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”

addEventListener() 方法用于向指定元素添加事件句柄
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄
可以向一个元素添加多个事件句柄
可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听。

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

一个元素多个事件

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象

<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

冒泡与捕获

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

<div>
    <p>
        dhuah
    </p>
</div>

addEventListener(event, function, useCapture);
//addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型 , 默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

removeEventListener()

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

element.removeEventListener("mousemove", myFunction);

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

DOM 元素

创建HTML元素

appendChild() 方法，用于添加新元素到尾部

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

将新元素添加到开始位置，可以使用 insertBefore() 方法

element.insertBefore(para, child);

移除已存在的元素

removeChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换HTML元素

使用 replaceChild() 方法来替换 HTML DOM 中的元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

DOM 集合

HTMLCollection

getElementsByTagName() 方法返回 HTMLCollection对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组

属性 / 方法	描述
item()	返回 HTMLCollection 中指定索引的元素。
length	返回 HTMLCollection 中元素的数量。
namedItem()	返回 HTMLCollection 中指定 ID 或 name 属性的元素。

<p>使用 getElementsByTagName() 方法获取 HTMLCollection 对象。</p>
<p>这个页面上 p 元素是数量为：</p>
<script>
var x = document.getElementsByTagName("p");
document.write(x.length);
</script>

var x = document.getElementsByTagName("P")[0];

document.getElementsByTagName("P").item(0).innerHTML = "段落已修改";

<h1>HTMLCollection item() 方法</h1>

<p>第一个 p 元素</p>
<p>第二个 p 元素</p>
<p>第三个 p 元素</p>

<p>点击按钮修改第一个 p 元素的内容。</p>

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

<script>
function myFunction() {
  document.getElementsByTagName("P")[0].innerHTML = "段落已修改";
}
</script>

<h1>HTMLCollection namedItem() 方法</h1>

<p id="myElement">namedItem() 方法返回指定 ID 或 name 属性的元素。</p>

<p>点击按钮返回 ID 为 "myElement" 的 p 元素内容:</p>

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

<script>
function myFunction() {
  var x = document.getElementsByTagName("P").namedItem("myElement");
  alert(x.innerHTML);
}
</script>

NodeList

NodeList 对象是一个从文档中获取的节点列表 (集合)

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

<h2>JavaScript HTML DOM!</h2>
<p>Hello World!</p>
<p>Hello Runoob!</p>
<p id="demo"></p>
<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";
</script>

区别

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

BOM

浏览器对象模型（Browser Object Model (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

<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() - 调整当前窗口的尺寸

Window Screen

window.screen 对象包含有关用户屏幕的信息

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

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

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

<script>
document.write("可用宽度: " + screen.availWidth);
</script>

Window Location

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

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

一些实例:

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

<script>
//返回（当前页面的）整个 URL：
document.write(location.href);
</script>

<script>
//location.pathname 属性返回 URL 的路径名
document.write(location.pathname);
</script>

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>

Window History

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

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

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

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
function goBack()
{
    window.history.back()
}
function goForward()
{
    window.history.forward()
}  
</script>
</head>
<body>
 
<input type="button" value="Back" onclick="goBack()">
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>

Window Navigator

window.navigator 对象包含有关访问者浏览器的信息

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改

一些浏览器对测试站点会识别错误

浏览器无法报告晚于浏览器发布的新操作系统

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

弹窗

警告框

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

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

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("你好，我是一个警告框！");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="显示警告框">

</body>
</html>

确认框

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

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

当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

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

</body>
</html>

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null

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

<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) 来设置换行

alert("Hello\nHow are you?");

计时事件

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

setInterval()

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

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

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

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

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

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

setTimeout() 方法会返回某个值

myVar= window.setTimeout("javascript function", milliseconds);

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