03前端第三章Javascript

html是网页内容（骨架），css是网页样式（皮肤），JavaScript是网页行为（动作）。

JavaScript概述

JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript不需要编译，是有解释器逐行解释执行。

例如，SQL，JavaScript，Python
java是先编译，后交给JVM

javaScript历史:

JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。

Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。

Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB开发工具。

作用

为网页添加动态效果。

响应客户端鼠标和键盘事件

onclick 当点击标签时，标签会产生一个事件（动作），可以通过事件调用js函数（完成某个操作）
<input type-"button" οnclick="alert()">

客户端页面表单数据验证

在前端把一些无效数据过滤掉，减轻服务器端压力（工作量大）。
动态的改变页面标签的样式（动态操作）

JavaScript与html,css关系

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。

基本语法

脚本写在哪里

javaScript脚本写在一组

对话框

alert(‘welcome!’); 提示对话框

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入外部的js脚本文件 --><script src="js/out.js" type="text/javascript" charset="utf-8">/* 这里不能写脚本 */</script><script type="text/javascript">//这里可以写js脚本//单行注释/* 多行注释 */alert("你好，JavaScript"); //调用js中的全局函数，对话框（弹出框）</script></head><body></body>
</html>

alert("你好，我是外部的JavaScript");

变量的声明

● 声明变量用var关键字

例如 var name;

● 声明变量的同时对其赋值

var test=“THIS IS A BOOK”

/* 基本语法：只讲与java中不同，js特有的 */
/* 变量的声明 variable  命名规则遵循java中的标识符的命名规则 js是弱类型语言，声明变量，可以给他赋任何类型的数据
*/
var a = 10;
var b = "abc";
b = true;

数据类型

JavaScript支持的数据类型

1、数值型(number)：其中包括整型数和浮点型数。

2、布尔型(boolean)：即逻辑值，true或flase。

3、字符串型：由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）

4、undefined类型

5、 Object类型

/* 数据类型 */
//数值型  整数、浮点
//boolean型  true false
//字符串
var s = "abc";
s1 = 'abc';  //单引号表示的也是字符串
typeof(s1); //返回s1的类型
alert(typeof(s1)); //alert对结果进行输出
//undefined类型 声明后未赋值的变量
var c;
alert(c);  返回undifined
//Object类型 对象型 js对象结构与java对象结构不同
var date = new Date();
alert(date);

算数运算符

/* 运算符 */
var x = 10;
var y = 5;
var z = "5";
console.log(x+y);  //15 log日志:将其打印到浏览器控制台
console.log(x+z); //105 数值+字符串（不会转换）   +是连接功能
console.log(x-y); //5
console.log(x*z); //50
console.log(x-z); //5 数值-*/字符串数字（隐式的进行转换）=数值
console.log(x-"a"); //返回NaN not a number
//比较运算  =（赋值）  ==（比较值是否相等）  ===(比较值和类型)
console.log(x>y); //true
console.log(x>z); //true 遵循隐式转换    数值>字符串数字（隐式转换），然后比较
console.log(y==z); //true 只比较值是否相等
console.log(y===z); //false 值相等类型不等

控制语句

/* 流程控制 */
/* if else
switch(a){case1:break;case2:break;default;
} *//* for(var i = 0;i<10;i++){console.log(i);
} *//* while(){} *//* do{}while(); *//* break;
continue; */

函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">/* 虽然js是面向对象的语言，但是函数可以独立的定义函数：为完成某一个特定功能，定义的函数，可以重复多次调用java中的方法必须写在类中，对象调用*//* 如何定义函数 */function demo(){alert("hello function");}/* 调用函数 *///demo();</script></head><body><input type="button" value="测试按钮" onclick="demo()"/> //也可通过按钮调用</body>
</html>

/* 如何定义函数 */
/* function demo(){alert("hello function");
} */
/* 调用函数 */
//demo();/* 定义有参的方法，不需要var声明 */
/* function demo(a,b,c){alert(a+":"+b+":"+c);
} */
//demo(10,"abc",true); //可以接收任意类型/* 有返回值  不需要声明有返回值的类型 */
function demo(a,b){return a+b;
}
var res = demo(10,5);
console.log(res);

全局函数

parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。

parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。

typeof (arg)返回arg值的数据类型。

eval(arg) 可运算某个字符串。

/* js函数库中提供的全局函数 函数库在浏览器中，我们可以直接使用parseInt("字符串") 把字符串转化为整数
*///var a = "10.5"; //15//var a = "10"; //15//var a = "1a0"; //6 把开头的数字部分转换//var a = "q0"; NaN 字母开头无法转换//console.log(parseInt(a)+5);// var b = 10.5; //15.5// var b = "10.5"; //15.5//var b = "10a.5"; //15// var b = "a10a.5"; //NaN/* console.log(parseFloat(b)+5); *//* 返回变量的数据类型 *//* console.log(typeof(10));console.log(typeof("1o"));console.log(typeof(true)); */console.log("5+5"); //5+5/* eval()运算某一个字符串 可以把字符串当做脚本执行 */console.log(eval("5+5")); //10var a = 10;console.log(eval("a+5")); //15

内置对象

String字符串

属性

length 用法：返回该字符串的长度.

方法

charAt(n)：返回该字符串位于第n位的单个字符.

indexOf(char)：返回指定char首次出现的位置.

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678。

/*
java有自己的标准（jdk）
前端五花八门，每一个浏览器的标准不同的，写的一个网页，在不同的浏览器效果不同的。
一个页面可以在不同的终端运行PC端、手机端、pad端
在所有的前端开发工具中，.提示都是不太准确的 */
var s = "ab:cdefg";
//s.big() //文字变大一倍
console.log(s.length);
console.log(s.substring(1,4)); //bcd substring(开始的位置，结束的位置)
console.log(s.substr(1,4)); //bcde substr(开始的位置，截取的长度)
console.log(s.split(":")); //['ab', 'cdefg']

Array组

数组的定义方法：var <数组名> = new Array();

这样就定义了一个空数组。以后要添加数组元素，就用：<数组名>[下标] = 值;

如果想在定义数组的时候直接初始化数据，请用： var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);

还可以var <数组名> = [<元素1>, <元素2>, <元素3>…];

属性

length ：数组的长度，即数组里有多少个元素。

方法

concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)

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

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

join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。

reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。

sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。

对数字排序需要调用排序函数。

function sortNumber(a,b){

return a - b;

}

/* 数组 */
/* var a = new Array(); //创建一个数组
a[0]=1;
a[1]="abc";
a[2]=true;
a[3]=new Date();
console.log(a); */
/* var a = new Array(1,2,3,true,"abc");
console.log(a);
console.log(a[3]); */
/* var a = [1,2,3,4,5,6,7];
var b = [8,9,10];
console.log(a.concat(b)); //连接
console.log(a.pop()); //删除并返回最后一个
console.log(a.push(11)); //向末尾添加元素并返回新长度
console.log(a); *//* var s = a.join(":"); //将数组转为字符串，用指定的符号连接每一个元素
console.log(s); *///sort()默认按照字符的编码排序 支持自定义排序规则
var c = ['a','c','d','b'];
var s = [2,1,4,13];
c.sort(); //默认按照字符的编码排序
console.log(c);
console.log(s); //[2, 1, 4, 13]
s.sort(mysort);
//自定义排序规则，两个数相减，按照数值大小排序
function mysort(a,b){return a-b;
}

Date

获取日期

new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

var date = new Date();
console.log(date.getFullYear());
console.log(Math.pow(2,3))

事件

一些常用的事件:

onclick()鼠标点击时；

ondblclick鼠标双击时;

onblur()标签失去焦点;

onfocus()标签获得焦点;

onmouseover()鼠标被移到某标签之上;

onmouseout鼠标从某标签移开;

onload()是在网页加载完毕后触发相应的的事件处理程序;

onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

Onkeydown键盘按下

Onkeyup 键盘抬起

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function demo(){console.log("函数被触发了");}</script></head><body onload="demo()"><!-- 事件：对标签进行的操作（例如，鼠标点击标签，鼠标移动到标签上，键盘输入……）标签就会产生一个事件（动作），单击、双击通过事件来触发js函数，在函数中执行对网页进行操作的逻辑。标签的事件种类有哪一些，何时会触发事件onclick 单击事件 鼠标左键单击标签时触发 几乎所有的标签都拥有此事件ondblclick 鼠标双击事件 onblur() 标签失去焦点  失去焦点就说明输入完毕    onfocus() 标签获得焦点onmouseover  鼠标移入到标签上触发onmouseout  鼠标移出标签触发onload  网页内容加载完毕后自动执行，一般写于body标签中onchange  失去焦点，且内容改变onkeydown  键位按下触发onkeyup  键位抬起触发--><!-- 单击事件 --><input type="button" value="点击事件" onclick="demo()"/><div onclick="demo()">单击事件</div> <!-- 双击事件 --><input type="button" value="双击事件" ondblclick="demo()"/><br><!-- 文本框标签 --><input type="text" onblur="demo()"/><input type="text" onfocus="demo()"/><!-- 鼠标移入移除事件 --><div onmouseover="demo()" onmouseout="demo()" style="background-color: beige; width: 200px;">鼠标移入移出事件</div><br><input type="text" onchange="demo()"/><br><!-- 键盘触发 --><input type="text" onkeydown="demo()"/><br><input type="text" onkeyup="demo()"/><br></body>
</html>

事件对象

Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。

type 事件类型

Button 被点击的鼠标键位

altKey 按下altKey返回true

ctrlKey 按下ctrlKey返回true

shiftKey按下shiftKey返回true

keyCode 返回被按下的键位编码

offsetX 当前标签内的鼠标X轴

offsetY 当前标签内的鼠标Y轴

clientX 鼠标在浏览器内部X轴

clientY鼠标在浏览器内部Y轴

screenX 鼠标在显示器内的X轴

screenY鼠标在显示器内的Y轴

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function demo(e){/* 键盘事件console.log(e); //e就是事件对象console.log(e.keyCode);console.log(e.ctrlKey);console.log(e.shiftKey);console.log(e.altKey); *//* 鼠标事件console.log(e.button); 获得鼠标键位 0左键 1滚轮 2右键 */console.log(e.offsetX+"::"+e.offsetY); //获得鼠标在当前标签内的坐标console.log(e.clientX+"::"+e.clientY); //获得鼠标在浏览器中的坐标console.log(e.screenX+"::"+e.screenY);  //获得鼠标在显示器内的坐标}</script></head><body><!-- 事件产生后，还会产生一个事件对象。事件对象中，包含一些事件相关信息onmousedown 鼠标按下事件 包含鼠标的左键、滚轮、右键--><!-- 键盘事件 --><input type="text" onkeydown="demo(event)"/><!-- 鼠标事件 --><div onmousedown="demo(event)" style="background-color: aquamarine; height: 200px; width: 200px;"></div></body>
</html>

HTML DOM

js是面向对象的语言，通过js可以对网页进行操作。

网页是由一个个标签构成的，操作网页本质就是操作标签。

js怎么能操作网页中的标签？

DOM是Document Object Model文档对象模型
在js中，认为网页中的每一个标签就是对象（实际存在的，可以使用的），操作标签其实就是操作对象。
DOM对象，是对这一类对象的统称。

js中如何获得到网页中的标签？

要操作，先得到。

查找元素

通常，通过 JavaScript，您需要操作 HTML 标签。

为了做到这件事情，您必须首先找到该标签。

要操作，先得到

有四种方法来做这件事：

通过 id 找到 HTML 标签 document.getElementById(“id");
通过标签名找到 HTML 标签 document.getElementsByTagName(“p”);
通过类名找到 HTML 标签 document.getElementsByClassName(“p”);
通过name找到 HTML 标签 document.getElementsByName(“name");

● Html dom允许javaScript 改变html标签的内容。

改变 HTML 标签的属性

Html dom允许javaScript 改变html标签的内容。

改变 HTML 标签的属性：

document.getElementById(“username").value=“new value";

document.getElementById(“image”).src=“new.jpg";
修改 HTML 内容的最简单的方法时使用 innerHTML 属性：

document.getElementById(“div”).innerHTML=new HTML

改变css

html dom允许 javaScript改变html标签的样式。

语法：

document.getElementById(“id”).style.property=new style;

例：

document.getElementById(“p2”).style.backgroundImage=“url(bg.jpg)”;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--js中如何获得到网页中的标签？要操作，先得到。有四种方式获得网页中的标签：window是浏览窗口，是js中最大的一个对象document是一个文档对象，表示整个html文档document.getElementById(); 通过标签的id属性，获得到网页中唯一的一个标签(id不重复)js对标签的三种操作：1.操作标签的属性 获取属性值，给属性赋值 tobj2.value = tobj1.value; bobj.bgColor = color;2.操作标签体中的内容3.操作标签的css--><script type="text/javascript">// window.document// document.getElementById("");function test(){//获得文本框1的值（value属性）var tobj1 = document.getElementById("tid1"); //获得的是一个文本框标签对象// alert(tobj1);console.log(tobj1.value);/* console.log(tobj1.type);console.log(tobj1.id); */var tobj2 = document.getElementById("tid2");//把框1的值赋给框2tobj2.value = tobj1.value;tobj1.value = ""; //清空框1的值tobj1.type = "radio"; //把框1变成单选框}function changeBgColor(color){var bobj = document.getElementById("bid");bobj.bgColor = color;}</script></head><body id="bid"><input type="text" id="tid1"/><input type="text" id="tid2"/><input type="button" value="测试按钮" onclick="test()"/><!-- 点击按钮改变背景颜色 --><input type="button" id="" value="红色" onclick="changeBgColor('red')"/><input type="button" id="" value="绿色" onclick="changeBgColor('green')"/><input type="button" id="" value="蓝色" onclick="changeBgColor('blue')"/></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--js中如何获得到网页中的标签？要操作，先得到。有四种方式获得网页中的标签：window是浏览窗口，是js中最大的一个对象document是一个文档对象，表示整个html文档document.getElementById(); 通过标签的id属性，获得到网页中唯一的一个标签(id不重复)js对标签的三种操作：1.操作标签的属性 获取属性值，给属性赋值 tobj2.value = tobj1.value; bobj.bgColor = color;2.操作标签体中的内容dobj1.innerHTM  连同子标签一起可以获取到3.操作标签的css--><script type="text/javascript">// window.document// document.getElementById("");function test(){var dobj1 = document.getElementById("div1");console.log(dobj1.innerHTML); //可以获得标签体里面的内容//把div1的值赋给div2var dobj2 = document.getElementById("div2");dobj2.innerHTML = dobj1.innerHTML;//操作css dobj1.style拿到标签中style属性dobj1.style.width = "200px";dobj1.style.height = "200px";dobj1.style.backgroundColor = "aliceblue";}</script></head><body><div id="div1">第一个div</div><div id="div2"></div><input type="button" value="测试按钮" onclick="test()"/></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--js中如何获得到网页中的标签？要操作，先得到。有四种方式获得网页中的标签：window是浏览窗口，是js中最大的一个对象document是一个文档对象，表示整个html文档document.getElementById(); 通过标签的id属性，获得到网页中唯一的一个标签(id不重复)ocument.getElementsByTagName("input"); 通过标签名获取var objs = document.getElementsByClassName("ck"); 通过class属性名获取document.getElementsByName("hobby"); 通过标签的name属性获取以上三种获取到的都是一个集合对象（数组），即使获取到的只有一个标签对象，也是一个集合，集合没有value值js对标签的三种操作：1.操作标签的属性 获取属性值，给属性赋值 tobj2.value = tobj1.value; bobj.bgColor = color;2.操作标签体中的内容dobj1.innerHTM  连同子标签一起可以获取到3.操作标签的css--><script type="text/javascript">// window.document// document.getElementById("");function test(){//获得到多个标签，获得到之后，一个标签集合（数组）//通过标签名获取/* var objs = document.getElementsByTagName("input");alert(objs.length); 6 *///通过class属性名获取/* var objs = document.getElementsByClassName("ck");alert(objs.length); //5//即使class只有一个值，拿到的仍然是一个集合，集合没有value值 *///通过标签的name属性获取var objs = document.getElementsByName("hobby");//对集合进行循环遍历console.log(objs);for(var i=0;i<objs.length;i++){//全选 以下两种方式均可/* objs[i].checked = true; */objs[i].checked = "checked";}}</script></head><body><input type="checkbox" class="ck" name="hobby"/><input type="checkbox" class="ck" name="hobby"/><input type="checkbox" class="ck" name="hobby"/><input type="checkbox" class="ck" name="hobby"/><input type="checkbox" class="ck" name="hobby"/><input type="button" value="全选" onclick="test()"/></body>
</html>

表单验证

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function subform(){//验证条件var accobj = document.getElementById("accountid");var account = accobj.value;if(account.length==0){document.getElementById("accountmsgID").innerHTML = "账号不能为空";document.getElementById("accountmsgID").style.color = "red";return;}else{document.getElementById("accountmsgID").innerHTML = "√";document.getElementById("accountmsgID").style.color = "green";}if(account.length<6 || account.length>10){document.getElementById("accountmsgID").innerHTML = "账号长度区间在6-10位之间！";document.getElementById("accountmsgID").style.color = "red";return;}else{document.getElementById("accountmsgID").innerHTML = "√";document.getElementById("accountmsgID").style.color = "green";}//验证密码var passobj = document.getElementById("passwordid");var password = passobj.value;if(account.length==0){document.getElementById("passwordmsgID").innerHTML = "账号不能为空";document.getElementById("passwordmsgID").style.color = "red";return;}else{document.getElementById("passwordmsgID").innerHTML = "√";document.getElementById("passwordmsgID").style.color = "green";}document.getElementById("formID").submit(); //在js中获得表单对象，并提交表单数据}</script></head><body><!-- 对表单数据进行验证，减少一些无效的数据提交到服务器端在提交表单数据之前，对表单数据进行验证，满足我们的输入条件，就提交表单；否则，不提交。     --><form action="server表单验证.html" method="get" id="formID">账号<input type="text" id="accountid"/><br><span id="accountmsgID"></span><br> <!-- 不放东西，在网页上不占空间-->密码<input type="password" id="passwordid"/><br><span id="passwordmsgID"></span><br><input type="button" value="保存" onclick="subform()"/></form></body>
</html>

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

正则表达式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function subform(){var account = document.getElementById("accountid").value;//定义一个正则表达式/* var reg = new RegExp("a"); *//* var reg = /^\d*$/; //以数字开头以数字结尾 \d数字 *零个或多个var reg = /^1[]3578\d{9}$/; //电话 */// var reg = /^[a-zA-Z]+$/; 大小写字母var reg = /^\w=$/; //[0-9a-zA-Z]var res = reg.test(account); console.log(res);}</script></head><body><!-- 对表单数据进行验证，减少一些无效的数据提交到服务器端在提交表单数据之前，对表单数据进行验证，满足我们的输入条件，就提交表单；否则，不提交。--><form action="server表单验证.html" method="get" id="formID">账号<input type="text" id="accountid"/><br><span id="accountmsgID"></span><br> <input type="button" value="保存" onclick="subform()"/></form></body>
</html>

浏览器对象

window

它表示浏览器窗口。

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

全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 html dom 的 document 也是 window 对象的属性之一。

window.document.getElementById(“header”);

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 内置对象 String Array Date Math RegExpDOM 指的是网页中的标签浏览器对象（BOM Browser）：window：表示浏览器窗口，是js中最大的一个对象，其他的全局函数、对象都是它的成员。location计时--><script type="text/javascript">/* window.documentwindow.alert(); *//* alert(window.innerHeight+":"+window.innerWidth);  //浏览器宽高 */</script></head><body></body>
</html>

Window对象常用的属性：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.parent获得父级窗口对象(父子级之间调用)
Window对象常用的方法

window.open(‘url’, ‘name’,’features’) - 打开新窗口

features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。

width=100,height=100,top=100,left=100

index
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//方法二：function show(msg){document.getElementById("showID").innerHTML = msg; }</script></head><body>index<div id="showID"></div><iframe src="child.html"></iframe></body>
</html>

child
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function send(){var msg = document.getElementById("msgID").value;// window.parent 获得父级窗口//方法一：/* window.parent.document.getElementById("showID").innerHTML = msg;   //父级窗口的document */window.parent.show(msg); //方法二：在子集窗口可以调用父级窗口函数}</script></head><body>child<input type="text" id="msgID"/><input type="button" value="发送" onclick="send()"/></body>
</html>

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

Location

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

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

方法：

assign(url)加载一个新的文档

reload()重新加载当前文档

replace(url) 可用一个新文档取代当前文档。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function testAssign(){location.assign("newPage.html"); //加载一个新页面到浏览器的窗口中，保留了原来的，可回退}function testReplace(){location.replace("newPage.html"); //用新的替换原来的窗口中的页面，不可回退}function testReload(){location.reload(); //重写加载}</script></head><body><input type="button" value="assign" onclick="testAssign()"/><input type="button" value="replace" onclick="testReplace()"/><input type="button" value="reload" onclick="testReload()"/></body>
</html>

计时

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

方法:

setTimeout(“函数”,”时间”)未来的某时执行代码

clearTimeout()取消setTimeout()

setInterval(“函数”,”时间”)每隔指定时间重复调用

clearInterval()取消setInterval()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function demo(){alert("你好 计时");}/* //设置一个定时器，在触发后间隔5秒后，只调用一次指定函数var t = setTimeout("demo()",5000); 只调用一次*///也是设置一个定时器，在触发后，间隔指定时间后调用指定函数，可以多次循环调用var t = setInterval("demo()",5000); //取消定时function cannel(){/* clearTimeout(t);  //取消定时任务 */clearInterval(t);}</script></head><body><input type="button" value="取消定时" onclick="cannel()"/></body>
</html>