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
标签
如需标记 JavaScript 语句,请在语句之前加上冒号:
//break 和 continue 语句仅仅是能够跳出代码块的语句。
//continue 语句(带有或不带标签引用)只能用在循环中
//break 语句(不带标签引用),只能用在循环或 switch 中
label:
statements
break labelname;
continue labelname;
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
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 模型被构造为对象的树
- 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);
停止执行
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
window.clearTimeout(timeoutVariable)
要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie
创建Cookie
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//内容 过期时间 cookie路径(默认为当前)
读取
var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
修改
修改 cookie 类似于创建 cookie,旧的 cookie 将被覆盖
删除
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,您删除时不必指定 cookie 的值
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
Q.E.D.