Day01
客户端与服务器端
1 javascript 脚本语言:嵌入到网页上,实现一些动态的效果
动态的显示
数据录入的验证
DOM效果(动态的安排页面元素的显示)
BOM效果:browser
2 javascript 的基础应用--UI相关
JQuery
Ajax
3 NetScape---javascript语言
Microsoft---JScript
4 语言特点
一种基于对象和事件驱动的脚本语言
由浏览器软件解释运行
5 基础语法
弱类型的语言
统一使用var声明变量,变量的类型以赋值为准
var s = "hello";
var n = 12;
n = true;
变量的命名(标识符)
字母/数字/下划线/$组成
不能以数字开头
大小写敏感
语句:以分号结束
注释: // /**/
6 书写脚本的方式
<head>里<script>
js文件:脚本代码书写在一个后缀为js的文件里
引入js文件
7 流程控制语句
条件语句:if/else switch/case
循环语句:for/while
8 数据类型的转换
弱类型的语言:
== 比较的值
=== 比较值和类型---严格相等
奇怪的比较,比如 0和 ""
比如 0 和 true
基础数据类型:string/number/bool
其他:null/undefined
直接(隐式)转换:不同数据类型进行运算
string 和 number:string
number 和 bool:number
string 和 bool:string
显式转换:
转换为数值类型:parseInt/parseFloat
有可能转换失败:
isNaN:is not a number
var i = parseInt("12");
var i = parseint("12");//error
转换为字符串类型:toString
6 常用内置对象
String/Array/Math/Date
7 DOM:动态的安排页面元素
8 BOM/高级应用
first.html
<html>
<head>
<script language="javascript">
function FirstMethod()
{
alert("hello!");
}
</script>
<!--引入外部的js文件-->
<script language="javascript" src="first.js"></script>
</head>
<body>
<form>
<input type="button" value="第一个按钮" οnclick="FirstMethod();">
<input type="button" value="调用js中的方法" οnclick="SecondMethod();">
<input type="button" value="从1累加45的和" οnclick="TestSum();">
<br>
<input type="button" value="测试数据类型" οnclick="TestType();">
<input type="button" value="数据类型的隐式转换" οnclick="TestConvert();">
<br>
计算录入数值的平方:
<input type="text" id="txtNumber" value="12">
<!--放置一个文本标记-->
<span id="spanInfo"></span>
<input type="button" value="Calculate" οnclick="Calculate();">
</form>
</body>
</html>
first.js
//只能包含符合js语法的代码
function SecondMethod()
{
alert("位于js文件中的方法");
}
function TestSum()
{
var sum = 0;
for(var i=0;i<=45;i++)
{
sum += i;
}
alert(sum);
}
function TestType()
{
var s = "100";
var n = 100;
//测试相等
if(s == n)
alert("equal");
else
alert("no");
//测试相同
if( s === n)
alert("same");
else
alert("no");
//比较数值0和空字符串
if ( 0 == "")
alert("ok");
}
//测试隐式转换
function TestConvert()
{
var s = "aa";
var n1 = 100;
var n2 = 200;
alert(n1+n2);//300
alert(s+n1);//aa100
var b1 = true;
var b2 = false;
alert(b1+b2);//1
alert(n1 + b1);//101
alert(s + b1);//aatrue
}
function Calculate() {
//找到文本框元素并得值
var txt = document.getElementById("txtNumber");
var data = txt.value;
var span = document.getElementById("spanInfo");
//先判断
if(isNaN(data)) {
//提示
//alert("请重新录入");
span.innerHTML = "请录入数值类型";
}
else {
//转换为数值类型
var n = parseInt(data);
//将结果显示在文本框
var result = n* n;
txt.value = result.toString();
span.innerHTML = "";
}
}
Day02
客户端与服务器端
1 javascript 脚本语言:嵌入到网页上,实现一些动态的效果
动态的显示
数据录入的验证
DOM效果(动态的安排页面元素的显示)
BOM效果:browser
2 javascript 的基础应用--UI相关
JQuery
Ajax
3 NetScape---javascript语言
Microsoft---JScript
4 语言特点
一种基于对象和事件驱动的脚本语言
由浏览器软件解释运行
5 基础语法
弱类型的语言
统一使用var声明变量,变量的类型以赋值为准
var s = "hello";
var n = 12;
n = true;
变量的命名(标识符)
字母/数字/下划线/$组成
不能以数字开头
大小写敏感
语句:以分号结束
注释: // /**/
6 书写脚本的方式
<head>里<script>
js文件:脚本代码书写在一个后缀为js的文件里
引入js文件
7 流程控制语句
条件语句:if/else switch/case
循环语句:for/while
8 数据类型的转换
弱类型的语言:
== 比较的值
=== 比较值和类型---严格相等
奇怪的比较,比如 0和 ""
比如 0 和 true
基础数据类型:string/number/bool
其他:null/undefined(声明了但是没有赋值)
直接(隐式)转换:不同数据类型进行运算
string 和 number:string
number 和 bool:number
string 和 bool:string
显式转换:
转换为数值类型:parseInt/parseFloat
有可能转换失败:
isNaN:is not a number
var i = parseInt("12");
var i = parseint("12");//error
转换为字符串类型:toString
获取变量的数据类型
typeof(s)---string/number/bool/object
9 内置对象(string)
创建一个字符串对象:一对单引号或者双引号括起文本
var s = "mary";
var s = 'mary';
var s = new String("mary");
属性
s.length
方法
获取单个字符
charAt(index)--字符
查询字符出现的位置
indexOf("a")---位置 -1
lastIndexOf
截取子字符串
substring(start,end)
end是真实的结束位置加1
大小写转换
toLowerCase
toUpperCase
GCD Gcd GCd gcd
常和正则表达式一起使用
replace(findstr,replacestr)
search("abc")---index
search(/\d+/)
match---匹配的结果--数组
正则表达式:匹配/替换/搜索等
匹配 \d \w [a-e] \d{3,5}
+(1-n)
?(0/1)
*(0-n)
拆分方法
split(",")---数组
10 常用内置对象(Array)
创建数组,初始化
var a = new Array();
a[0] = "mary";
a[1] = true;
a[2] = 100;
//或
var a = ["mary",true,100];
属性:length
方法
得到数组的内容
join("|")
toString();返回以逗号分开的内容串联值
数组的相加,得到一个大数组
a1.concat(a2)
返回数组的一部分
a1.slice(start,end)--end还是+1
翻转
reverse()
排序
sort():按照字符串的比较
sort(方法的名称):传入一个方法对象
11 常用内置对象Math
使用 Math.
属性:常用于得到数学常数
Math.PI
方法
计算用:min/max/round/ceil/floor
random:0=< <1的小数
复杂计算:
三角函数sin
12 function 对象
声明和调用
function MethodName(p1,p2,p3)
{
//方法语句
return返回值;
}
var r = MethodName(12,34);
方法的重载:没有
如果定义了相同名称的方法,以最后一次定义的为准
必须要实现类似于重载的效果:
arguments:得到当前方法的参数的数组
方法定义时,没有定义参数,依然可以传入
传入的参数都存放到arguments
function M()
{
//方法体
}
局部变量和全局变量
脚本中直接调用执行方法:在页面显示之前就执行
练习:模拟机选一注双色球号码
按钮,点击:
1/随机出6个1到33(包括1和33)之间的整数
2/6个数不能重复,且按照升序排列,显示
3/随机出1个1到16(包括1和16)之间的整数
4/显示在界面上
13 DOM:document object model
将整个 html文档对象化:树形结构
第一步:找到目标节点
通过id查找单个节点:document.getElementById
查找多个节点:document.getElementsByTagName
查找某类,返回节点对象的数组
第二步:操作目标节点(查询,修改)
查询:将 html标记对象化--元素标记的属性作为对象的属性用
比如style为集合属性
obj.style.样式属性
style.color
style.backgroundColor
style.fontSize
样式比较复杂:
声明样式类
obj.className = "有效的样式类的名称";
.innerHTML --元素标记的文本内容
常见的效果:页签/二级菜单/输入验证
输入验证:检查用户的录入,提示,不允许提交
正则表达式的用法:
和字符串对象的方法一起使用:实现对于字符串的操作处理
string.replace/search/match
使用正则表达式对象的方法实现验证
var reg = /[a-z]{3}/;
reg.test(string)--bool
取消事件:取消提交
onxxxx = "return false;"
先在页面上布置好标记,修改样式/文本
创建新元素
createElement("a/img/input")
appendChild--追加
parent.insertBefore(newEle,refEle)
--定位在谁的某个子元素前面
obj.childNodes[index]
其他操作
obj.removeChild(childNode)
obj.replaceChild(newEle,oldChildNode)
下拉框的联动效果
onclick
onblur:失去焦点,录入完毕
onmouseover:移入
onmouseout:移出
onchange:下拉框的选择改变
second.html
<html>
<head>
<link type="text/css" href="second.css" rel="stylesheet">
<script language="javascript">
</script>
<!--引入外部的js文件-->
<script language="javascript" src="second.js"></script>
</head>
<body>
<!--下拉框联动的效果-->
<form>
<select id="selSubjects" οnchange="showClasses();" >
<option>--请选择--</option>
<option>java</option>
<option>php</option> <option>.net</option>
</select>
<select id="selClasses">
</select>
</form>
<!--模拟登陆的验证-->
<form id="form1">
<input type="button" value="在页面上添加新元素" οnclick="createNewObj();">
<br>
用户名:
<input id="txtName" type="text" οnblur="checkName();" ><!--目标位置-->
<span id="nameError"></span>
<br>
密码:
<input id="txtPwd" type="text" οnblur="checkPwd();" >
<span id="pwdError"></span>
<br>
<input type="submit" value="login" οnclick="return checkData();">
</form>
<!--二级菜单的动态显示-->
<ul >
<li οnmοuseοver="showSubMenu(this,true);" οnmοuseοut="showSubMenu(this,false);">
aaaaa
<ul class="subMenu" >
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</li>
<li οnmοuseοver="showSubMenu(this,true);" οnmοuseοut="showSubMenu(this,false);">
bbbbb
<ul class="subMenu">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
</ul>
<!--多个页签-->
<div id="divTabs">
<div οnclick="changeTab(0);">我的帐户</div>
<div οnclick="changeTab(1);">上传照片</div>
<div οnclick="changeTab(2);">修改密码</div>
</div>
<form>
<input type="text">
<input type="button" value="测试dom的用法" οnclick="TestDom();">
<input type="button" value="查找多个元素对象" οnclick="FindElements();">
</form>
<p id="p1" style="color:red;font-size:10pt;">段落元素</p>
<p>sddf</p>
<div id="div1">div text</div>
<img id="img1" src="">
</body>
</html>
Second.css
div.style1 {
width:200px;
height:50px;
border:1px solid red;
border-top:2px dashed green;
color:yellow;
font-size:20pt; }
#divTabs div {
width:100px;
height:30px;
border:1px solid black;
background-color:gray;
float:left;
margin-left:3px;
text-align:center;
}
/*display:block/inline/none*/
ul {list-style-type:none;}
ul.subMenu {display:none;}
second.js
function TestDom() {
//修改图片的显示
var imgObj = document.getElementById("img1");
imgObj.src = "cat.jpg";
//修改段落中的文本/字体颜色/背景色
var pObj = document.getElementById("p1");
pObj.innerHTML = "new text";
//集合属性:适用于修改个别属性
pObj.style.color = "green";
pObj.style.backgroundColor = "silver";
//修改div元素的样式类:样式比较复杂
var divObj = document.getElementById("div1");
divObj.className = "style1";
}
function FindElements()
{
/*
//得到页面上每个段落的文本
var array = document.getElementsByTagName("p");
for(var i=0;i<array.length;i++)
{
//每个p元素对象
alert(array[i].innerHTML);
}
//show界面上的按钮的个数
var inputArray = document.getElementsByTagName("input");
//得到type="button"的元素的个数
var count = 0;
for(var i=0;i<inputArray.length;i++) {
//是否为普通按钮
if(inputArray[i].type == "button") {
count++;
}
}
alert(count);*/
}
/*1/先构建页面 2/构建样式 3/js动态的修改*/
function changeTab(index){
//先找到父div
var parentDiv = document.getElementById("divTabs");
//找到divTabs标记里的所有的div元素
var divArray = parentDiv.getElementsByTagName("div");
//修改背景色
for(var i=0;i<divArray.length;i++) {
if(i == index)
divArray[i].style.backgroundColor = "silver";
else
divArray[i].style.backgroundColor = "gray";
}
}
function showSubMenu(liObj,isShow){
//从参数得到li的对象
var ddd = liObj.getElementsByTagName("ul")[0];
if(isShow)
ddd.style.display = "block";
else
ddd.style.display = "none";
}
//验证用户名必须为3到5位的字母和数字的组合
function checkName() {
//定义正则表达式对象
var reg = /^[a-zA-Z0-9]{3,5}$/;
var name = document.getElementById("txtName").value;
var isMatch = reg.test(name);
if(isMatch)
document.getElementById("nameError")
.innerHTML = "";
else
document.getElementById("nameError")
.innerHTML = "用户名错误";
//返回验证是否通过
return isMatch;
}
//密码必须为4位数字
function checkPwd() {
var reg = /^\d{4}$/;
var name = document.getElementById("txtPwd").value;
var isMatch = reg.test(name);
if(isMatch)
document.getElementById("pwdError").innerHTML = "";
else
document.getElementById("pwdError").innerHTML = "密码错误";
//返回验证是否通过
return isMatch;
}
//调用,得到验证是否通过,决定是否提交
function checkData(){
var r1 = checkName();
var r2 = checkPwd();
return r1&&r2;
}
//方法:替代document.getXXX,类似于第三方封装
function $(id) {
return document.getElementById(id);
}
//创建一个超级链接元素,加入到form中
//创建一个按钮
function createNewObj() {
//创建:<a href="">ccc</a>
var aObj = document.createElement("a");
aObj.href = "http://bbs.tarena.com.cn";
aObj.innerHTML = "Click Me";
//加入到文档中的form中
$("form1").appendChild(aObj);
//一个按钮:<input type="button" value="">
var btn = document.createElement("input");
btn.type = "button";
btn.value = "new button";
//为按钮添加事件:将function对象赋值
btn.onclick = AAA;
$("form1").appendChild(btn);
//创建一个文本框
var txt = document.createElement("input");
//得到参考位置的节点:通过索引或者id查找
var refNode = $("form1").childNodes[0];
//var refNode = $("nameError");
$("form1").insertBefore(txt,refNode);
}
function AAA() {
alert("new button click");
}
//用二维数组存储数据
var dataArray =
[
["JSD1204","JSD1205","JSD1206"],
["PSD1201","PSD1202"],
["MSD1207"]
];
//根据第一个下拉框的选项,创建第二个下拉框的选项
function showClasses()
{
var index = $("selSubjects").selectedIndex;
//先清除旧数据,再添加
$("selClasses").options.length = 0;
//得到目标数据:选择0 java 1 php 2 net 3
if(index < 1)
return;
var classesArray = dataArray[index-1];
for(var i=0;i<classesArray.length;i++)
{
var option = document.createElement("option");
option.innerHTML = classesArray[i];
$("selClasses").appendChild(option);
}
}
Day03
客户端与服务器端
1 javascript 脚本语言:嵌入到网页上,实现一些动态的效果
动态的显示
数据录入的验证
DOM效果(动态的安排页面元素的显示)
BOM效果:browser
2 javascript 的基础应用--UI相关
JQuery
Ajax
3 NetScape---javascript语言
Microsoft---JScript
4 语言特点
一种基于对象和事件驱动的脚本语言
由浏览器软件解释运行
5 基础语法
弱类型的语言
统一使用var声明变量,变量的类型以赋值为准
var s = "hello";
var n = 12;
n = true;
变量的命名(标识符)
字母/数字/下划线/$组成
不能以数字开头
大小写敏感
语句:以分号结束
注释: // /**/
6 书写脚本的方式
<head>里<script>
js文件:脚本代码书写在一个后缀为js的文件里
引入js文件
7 流程控制语句
条件语句:if/else switch/case
循环语句:for/while
8 数据类型的转换
弱类型的语言:
== 比较的值
=== 比较值和类型---严格相等
奇怪的比较,比如 0和 ""
比如 0 和 true
基础数据类型:string/number/bool
其他:null/undefined(声明了但是没有赋值)
直接(隐式)转换:不同数据类型进行运算
string 和 number:string
number 和 bool:number
string 和 bool:string
显式转换:
转换为数值类型:parseInt/parseFloat
有可能转换失败:
isNaN:is not a number
var i = parseInt("12");
var i = parseint("12");//error
转换为字符串类型:toString
获取变量的数据类型
typeof(s)---string/number/bool/object
9 内置对象(string)
创建一个字符串对象:一对单引号或者双引号括起文本
var s = "mary";
var s = 'mary';
var s = new String("mary");
属性
s.length
方法
获取单个字符
charAt(index)--字符
查询字符出现的位置
indexOf("a")---位置 -1
lastIndexOf
截取子字符串
substring(start,end)
end是真实的结束位置加1
大小写转换
toLowerCase
toUpperCase
GCD Gcd GCd gcd
常和正则表达式一起使用
replace(findstr,replacestr)
search("abc")---index
search(/\d+/)
match---匹配的结果--数组
正则表达式:匹配/替换/搜索等
匹配 \d \w [a-e] \d{3,5}
+(1-n)
?(0/1)
*(0-n)
拆分方法
split(",")---数组
10 常用内置对象(Array)
创建数组,初始化
var a = new Array();
a[0] = "mary";
a[1] = true;
a[2] = 100;
//或
var a = ["mary",true,100];
属性:length
方法
得到数组的内容
join("|")
toString();返回以逗号分开的内容串联值
数组的相加,得到一个大数组
a1.concat(a2)
返回数组的一部分
a1.slice(start,end)--end还是+1
翻转
reverse()
排序
sort():按照字符串的比较
sort(方法的名称):传入一个方法对象
11 常用内置对象Math
使用 Math.
属性:常用于得到数学常数
Math.PI
方法
计算用:min/max/round/ceil/floor
random:0=< <1的小数
复杂计算:
三角函数sin
Date
var t1 = new Date();
var t2 = new Date("2011-01-01");
12 function 对象
声明和调用
function MethodName(p1,p2,p3)
{
//方法语句
return返回值;
}
var r = MethodName(12,34);
方法的重载:没有
如果定义了相同名称的方法,以最后一次定义的为准
必须要实现类似于重载的效果:
arguments:得到当前方法的参数的数组
方法定义时,没有定义参数,依然可以传入
传入的参数都存放到arguments
function M()
{
//方法体
}
局部变量和全局变量
脚本中直接调用执行方法:在页面显示之前就执行
练习:模拟机选一注双色球号码
按钮,点击:
1/随机出6个1到33(包括1和33)之间的整数
2/6个数不能重复,且按照升序排列,显示
3/随机出1个1到16(包括1和16)之间的整数
4/显示在界面上
13 DOM:document object model
将整个 html文档对象化:树形结构
第一步:找到目标节点
通过id查找单个节点:document.getElementById
查找多个节点:document.getElementsByTagName
查找某类,返回节点对象的数组
第二步:操作目标节点(查询,修改)
查询:将 html标记对象化--元素标记的属性作为对象的属性用
比如style为集合属性
obj.style.样式属性
style.color
style.backgroundColor
style.fontSize
样式比较复杂:
声明样式类
obj.className = "有效的样式类的名称";
.innerHTML --元素标记的文本内容
常见的效果:页签/二级菜单/输入验证
输入验证:检查用户的录入,提示,不允许提交
正则表达式的用法:
和字符串对象的方法一起使用:实现对于字符串的操作处理
string.replace/search/match
使用正则表达式对象的方法实现验证
var reg = /[a-z]{3}/;
reg.test(string)--bool
取消事件:取消提交
onxxxx = "return false;"
先在页面上布置好标记,修改样式/文本
创建新元素
createElement("a/img/input")
appendChild--追加
parent.insertBefore(newEle,refEle)
--定位在谁的某个子元素前面
obj.childNodes[index]
其他操作
obj.removeChild(childNode)
obj.replaceChild(newEle,oldChildNode)
下拉框的联动效果
dom回顾:动态的安排页面元素(是否显示/显示的外观)
纯粹的js代码:
find元素/修改
create元素/设置属性/加入
第三方封装:JQuery
对于表格的操作做了封装
var row = tableObj.insertRow(index);<tr></tr>
var cell = row.insertCell(index); <td class=""></td>
cell.innerHTML = "";
cell.rowspan = "3";
cell.className = "";
如果需要创建一个option:<option value="1">text</option>
js代码:
var obj = document.createElement("option");
obj.innerHTML = "text";
obj.value = "1";
selectObj.appendChild(obj);
封装:html页面引入prototype.js文件
var obj = new Option("text","1");
selectObj.options[index] = obj;
14 对象模型(树形)---BOM(brower object model)
window
document location history navigator screen event
文档的内容 地址栏 历史 浏览器软件 屏幕 事件
15 window对象:代表浏览器窗口
常用属性
window.status
常用方法
window.open(url,name,config):动态
静态<a target="_blank" href="">click</a>
window.close
window.focus
弹出对话框窗口
window.alert();--警告框
window.confirm();--确认框
window.prompt();--输入框
定时器
window.setInterval(function,time以毫秒为单位)
启动周期性时钟,返回时钟对象
window.clearInterval(timer);
window.setTimeout(function,time)
启动一次性时钟,返回时钟对象
常用于类似于倒计时的效果
window.clearTimeout(timer)
<a href="javascript:method();"></a>
16 location 对象
是window对象的子对象,代表地址栏,
使用它修改载入的页面
window.location.
或者
location.
属性
location.href = "url";
方法
location.replace("url");
与window.open的区别:打开新窗口
17 history 对象
也是window对象的子对象,代表的历史访问记录
history.length
history.back()
history.forward()
18 screen 对象
window 对象的子对象,机器的屏幕信息
只有属性,没有方法
width/height:高和宽
availWidth/availHeight:可用的高和宽
19 navigator 对象:代表的浏览器及操作系统的软件信息
只有属性,访问信息
for(var p in navigator)
{
navigator[p]
}
20 事件
事件的类型
鼠标事件
onmouseover:移入
onmouseout:移出
onclick:单击
ondblclick:双击
键盘事件
onkeydown
onkeyup
状态改变事件
onblur:失去焦点,录入完毕
onfocus:得到焦点
onchange:下拉框的选择改变
onload:body元素
onsubmit:form元素
可以取消事件
onxxx = "return false;"
冒泡机制
各层元素都定义了相同的事件,
引发该事件时,会从触发层开始,层层向上传递
大多数情况下,可以取消冒泡机制
event.cancelBubble=true;
元素有大量的子元素具有相同的事件
为了避免重复定义,为其父元素定义事件
event 对象:只要页面发生事件,包含与事件相关的所有信息
event.clientX
event.clientY
event.srcElement:引发事件的元素(仅限于firefox以外)
event.target:引发事件的元素(firefox)
考虑浏览器兼容问题
IE/Chrome:event获取事件对象
firefox:在页面上使用event关键字将事件对象传入
事件的动态注册:onxxx = function对象
先声明一个function,赋值
使用匿名方法
btn.onclick =
function(){alert("function");}
;
如何选择:
1.取决于逻辑代码的复杂程度
2.如果要传参数,使用匿名函数,
21 自定义对象对于数据的封装
使用 Object对象:适用于当前方法里
var p = new Object();
p.name = "mary";
p.age = 23;
p.sex = "F";
使用new实现自定义对象:实现重用
function Person(n,a)
{
this.name = n;
this.age = a;
}
var p = new Person("mary",23);
JSon:服务器端要求客户端传递数据
var p = {"name":"mary" , "age":13, "sing":AAA};
alert(p.name);
练习(选做):
走马灯的效果(每隔3s切换图片,
当鼠标移入图片上,停止切换;
鼠标移走,继续):
<img src="a1.jpg">
third.html
<html>
<head>
<!--引入外部的js文件-->
<script language="javascript" src="third.js"></script>
</head>
<body οnlοad="AddEventToButton();">
<form>
<!--使用object对象实现数据的封装-->
<input type="button" value="使用object对象" οnclick="TestObject();">
<input type="button" value="使用自定义类" οnclick="TestCreateClass();">
<input type="button" value="使用JSon" οnclick="TestJSon();">
<br>
<input id="btn1" type="button" value="动态注册点击事件">
<!--模拟计算器-->
<div οnclick="Calculator(event);" style="border:1px solid red;width:200px;height:100px;">
<input type="button" value="1">
<input type="button" value="2"> <input type="button" value="3"><br>
<input type="text" id="txtNumber">
</div>
</form>
<!--事件的冒泡机制-->
<div οnclick="alert('1');" style="border:1px solid red;width:200px;height:200px;">
<div οnclick="alert('2');" style="border:1px solid green;width:100px;height:100px;">
<div οnclick="alert('3');" style="border:1px solid red;width:50px;height:50px;">
</div>
</div>
</div>
<form>
<input type="button" value="测试navigator对象" οnclick="TestNavigator();">
<br>
<input type="button" value="测试location对象" οnclick="TestLocation();">
<!--5s后页面将自动跳转(重定向)-->
<input type="button" value="5s后页面将自动跳转" οnclick="AutoRedirect();"><br>
<span id="spanInfo" style="display:none;">5s后页面将自动跳转,如果取消请点击
<a href="javascript:CancelRedirect();">这里<a/></span>
<br>
<span id="spanTime"></span><br>
<input type="button" value="显示当前时间" οnclick="ShowTime();">
<input type="button" value="启动时钟" οnclick="StartTime();">
<input type="button" value="停止时钟" οnclick="StopTime();">
<br>
<!--在新窗口中打开页面-->
<input type="button" value="打开新窗口" οnclick="OpenNewWindow();">
<!--模拟删除-->
<input type="submit" value="删除" οnclick="return Delete();">
<!--输入框-->
<input type="button" value="录入数据" οnclick="InputData();">
<table id="t1" border="1" width="200">
<caption>信息列表</caption>
<tr>
<td>name</td>
<td>age</td>
</tr>
</table>
用户名:<input id="txtName"><br>
年龄:<input id="txtAge"><br>
<input type="button" value="Save" οnclick="SaveData();">
<input type="button" value="封装方式实现" οnclick="SaveData1();">
</form>
</body>
</html>
third.js
//js实现
/*
<tr>
<td colspan="3">mary</td>
</tr>
*/
function SaveData() {
var name = document.getElementById("txtName").value;
var age = document.getElementById("txtAge").value;
//创建行
var row = document.createElement("tr");
//创建两个单元格
var cell1 = document.createElement("td");
cell1.innerHTML = name;
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = age;
row.appendChild(cell2);
//将行加入表
var t = document.getElementById("t1");
t.appendChild(row);
}
function SaveData1() {
var name = document.getElementById("txtName")
.value;
var age = document.getElementById("txtAge")
.value;
//得到表格对象
var t = document.getElementById("t1");
//创建行
var row = t.insertRow(t.rows.length);
//创建列
var cell1 = row.insertCell(0);
cell1.innerHTML = name;
var cell2 = row.insertCell(1);
cell2.innerHTML = age;
}
function OpenNewWindow()
{
//只设置url属性,默认打开多个
//第二个参数:为新窗口命名
//第三个参数:配置新窗口的大小等设置
//返回新窗口对象
var newWin = window.open(
"http://bbs.tarena.com.cn",
"aa",
"width=200,height=150,toolbar=yes");
newWin.focus();
}
function Delete()
{
//询问,根据结果来决定是否提交
var r = window.confirm("Are you really....?");
return r;
}
//输入框
function InputData()
{
var data = window.prompt("请录入ID:",
"default value");
alert(data);
}
function ShowTime() {
//系统的当前时间
var d = new Date();
document.getElementById("spanTime").innerHTML
= d.toLocaleTimeString();
}
//启动时钟:每1 s 调用ShowTime方法
var timer;
function StartTime() {
timer = window.setInterval(ShowTime,1000);
}
//停止时钟
function StopTime() {
window.clearInterval(timer);
}
//定义一个方法:用于实现页面的跳转
var timer1;
function PageRedirect(){
location.href = "http://bbs.tarena.com.cn";
}
//显示文本,设置5s后跳转
function AutoRedirect() {
document.getElementById("spanInfo").style.
display = "inline";
timer1 = window.setTimeout(PageRedirect,5000);
}
//取消跳转
function CancelRedirect() {
window.clearTimeout(timer1);
}
//实验 location 对象的两种页面跳转方式
function TestLocation() {
//当前窗口内跳转,会产生历史记录
//location.href = "http://bbs.tarena.com.cn";
//或者
//当前窗口内跳转,不会产生历史记录
location.replace("http://bbs.tarena.com.cn");
}
function TestNavigator() {
//使用for循环实现类似于foreach的效果
//常用于遍历对象的所有属性及其值
var str = "";
for(var p in navigator)
{
str += p + "=" + navigator[p] + "\n";
}
alert(str);
}
function Calculator(e) {
//点击的是哪个子元素(兼容)
var obj = e.srcElement || e.target;
//当点击按钮时,将按钮上的文本写入文本框
if(obj.nodeName == "INPUT"
&& obj.type == "button") {
document.getElementById("txtNumber")
.value += obj.value;
}
}
function AddEventToButton() {
//选择aa或者bb作为按钮的点击事件
var btn = document.getElementById("btn1");
btn.onclick =
function() {
bb("mary");
};
}
function bb(str) {
alert(str);
}
function TestObject() {
//使用object封装:name/age 数据和行为(方法)
var p = new Object();//通用类型对象
p.name = "mary";
p.age = 34;
p.sing = function(){
alert("i am singing...");};
//调用测试方法
Test(p);
}
//测试方法
function Test(obj) {
alert(obj.name + ":" + obj.age);
obj.sing();
}
//方式2:使用自定义类封装数据
function Person(n,a) {
this.name = n;
this.age = a;
this.introduceSelf = AAA;
}
function AAA() {
alert("my name is " + this.name
+",i am " + this.age
+ " years old.");
}
function TestCreateClass() {
var p = new Person("jerry",24);
var p1 = new Person("mary",13);
alert(p.name + ":" + p.age);
p.introduceSelf();
}
//方式3:使用JSon的语法实现数据的封装
function TestJSon() {
var p = {"name":"john","age":23};
alert(p.name);
}