1.javascript概述
2.如何使用
3.基础语法
4.常用对象
a.js中的对象
b.String对象
c.数组:存储一些类似的数据
d.Math对象:常见的数学计算
e.Number 对象
f.正则表达式对象
g.Date 日期对象
h.Function 对象
1).定义函数/方法
2).重载
3).js中定义方法
i).全局函数
5.DHTML--动态的 HTML
a) 什么是 DHTML
b) 对象模型树
c) window 对象
d) document 对象
1).找到节点对象:遍历树
2).读取或者修改节点的信息
3).为文档添加新的内容
4).删除节点
e) HTML DOM
1).Select和Option
2).Table
f) screen 对象
g) history 对象
h) location 对象
j) event:事件
1).事件的分类
2).事件可以取消
3).js中,事件有冒泡机制
4).event 对象:
5).元素定义事件
6.面向对象基础:数据和行为的封装
a).使用 Object 对象实现简单封装
b).实现自定义封装:构造函数,实现真正的封装
C).JSON语法实现封装
-----------------------------------------
1、javascript概述
什么是 javascript:一种基于对象和事件驱动的解释性的脚本语言,
内嵌到 html 页面上,由浏览器解释运行
作用:为 html 页面添加动态效果,
常用于 页面元素的动态显示、输入验证、客户端计算等
js语言的组成:标准的 js 代码 + jquery + ajax
2.如何使用 js 代码
方式1:onXXXX=""
方式2:script代码块---封装当前页面的代码
<head><script>代码
方式3:js文件---建议使用
代码写入单独的 js 文件
页面使用 <script src 引入
3.基础语法:js 类似于 c/java
a、基础
常量和变量
声明变量 var 变量名称 = 初始值 ;
标识符: 由字母、数字、下划线、$组成,不能以数字开头;不能与系统关键字重复
注释 // /**/
大小写敏感,以 ; 代表一行代码的结束
b、数据类型
基本类型:string、number、boolean
number:存储的都是浮点类型 1----1.00000000000000001/0.99999999999999999999
特殊类型:null、undefiend
复杂类型:Date、Math、Array、Object
...
c、数据类型的转换
隐式转换:直接转换--规则
显式转换:调用方法---parseInt/parseFloat/toString/typeof
额外的方法: isNaN---是否为数值
--------------------------------
练习:求平方
.html:
<input type="text" id="txtData" />
<input type="button" value="计算" onclick="getSquare();"/>
.js:
function getSquare(){
var s= document.getElementById("txtData").value;
if(isNaN(s)){
alert("清重新输入 ");
}else{
var data=parseFloat(s);
alert(data*data);
}
}
-------------------------
d、运算符
相等和严格相等 == ===
三元运算符 表达式?value1:value2;
---------------------------------
练习:利用三元运算符猜数字
.html:
<input type="text" id="txtNum" onblur="guess();"/>
.js:
function guess(){
var s=document.getElementById("txtNum").value;
if(isNaN(s)){
alert("清重新录入");
}else{
var n=parseInt(s);
var result= n>56?"大了":"小了";
result = n==56?"对了":result;
alert(result);
}
}
------------------------------------------
e、流程控制
条件
if/else
switch/case
循环
for
while
------------------------------------
练习:
.html:
<input type="button" value="1-50的和" onclick="getSum();"/>
.js:
function getSum(){
var sum=0;
for(var i=1;i<=50;i++){
sum+=i;
}
alert(sum);
}
------------------------------------
---------------------------------------------------------------------------------------
4、js对象
------------------------------------------------
a、js中的对象
内置对象
简单对象:String/Number/Boolean
复杂对象:Array/Date/Math/Regex...
浏览器对象
DOM对象
ActiveX对象
------------------------------------------------
b、String对象
创建:var s=""; var s = new String();
属性: length
方法:
常用方法
toLowerCase/toUpperCase
indexOf/lastIndexOf
charAt/charCodeAt
substring
replace(oldstr,newstr)
split
结合正则表达式使用,实现对字符串的搜索、匹配和替换---常用于操作字符串
search
match
replace
------------------------------------
练习:计算字符串中出现js的次数
.html:
<input type="text" id="txtString" onblur="tryString();" />
.js:
function tryString(){
var s=document.getElementById("txtString").value;
var count=0;
var index=s.indexOf("js");
while(index>-1){
//abcjsjkjsd
// 012345 6789
count++;
index=s.indexOf("js",index+2);
}
alert(count);
}
---------------------------------
练习:用正则表达式代换字符串中的数字
.html:
<input type="text" id="txtString" onblur="tryString();" />
.js:
function tryString(){
var s = document.getElementById("txtString").value;
var s= s.replace(/\d+/g,"*");
document.getElementById("txtString").value=s;
}
----------------------------------------
------------------------------------------------
c、数组:存储一些类似的数据
创建数组、赋值
var r = new Array();
r[0] = "mary";
r[1] = 10;
r[2] = true;
var r = new Array(100,"mary",false);
var r = [100,"mary",false];
属性:length
方法
toString/join:链接,常用于输出
concat:相加
reverse:翻转
sort:默认,按照字符比较;可以自定义一个用于比较的方法,由sort方法调用
slice:
------------------------------------
练习:翻转,排序方法,用传参数的方法
.html:
<input type="text" id="txtArray" value="123,2,3,56,789,6" />
<input type="button" value="翻转" onclick="operateArray(1);"/>
<input type="button" value="默认按字符排序" onclick="operateArray(2);"/>
<input type="button" value="按数值排序" onclick="operateArray(3);"/>
.js:
function operateArray(t){
var s= document.getElementById("txtArray").value;
var array =s.split(",");
//判断操作的类型
switch(t){
case 1:
//翻转
array.reverse();
break;
case 2:
//排序--按照字符排序
array.sort();
break;
case 3:
//按照--数值排序
array.sort(sortFunc);
break;
}
//用分号连接和输出
alert(array.join(";"));
}
//自定义的比较方法
function sortFunc(a,b){
return a-b;
}
-------------------------------------
------------------------------------------------
d、Math对象:常见的数学计算
使用,不需要new ,直接使用
属性:数学常数
方法:round/random/floor/ceil/abs/max/...
------------------------------------
练习:指定一个范围获取随机数
.html:
<input type="button" value="范围" onclick="randomNumber();"/>
.js:
function randomNumber(){
var r=Math.random();//得到的是一个随机的小数 0 =< r < 1
var max=30;
var min=1;
var result=Math.floor(r*(max-min)+min);
alert(result);
}
------------------------------------------------
e、Number 对象
toFixed 方法
------------------------------------------------
f、正则表达式对象
var r = /\d{3}/;
r.test(string);---true/false
正则表达式:/ /
/^ $/ 从头到尾
/ /gi , g全局 i不区分大小写
汉字的范围:\u4e00-\u9fa5
-----------------------------
实现录入的验证
用户名:_________ 必须是3到5个长度的大、小写字母、数字的组合 [a-zA-Z0-9]{3,5}
练习:实现对文本的验证
.html:
<input type="text" id="txtName" onblur="judgeName();" />
.js:
function judgeName(){
var name=document.getElementById("txtName").value;
//定义一个正则表达式
var reg=/^[\u4e00-\u9fa5]{3}$/;
//验证string,并判断,提示
if(!reg.test(name))
alert("清重新录入");
}
------------------------------------------------
g、Date 日期对象
创建日期对象
var d = new Date();---当前日期和时间
var d = new Date("2013-01-01 12:12:12");
* 对Date的扩展,将 Date 转化为指定格式的String
* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
* eg:
* (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
方法
toXXX:转换为某种格式的字符串,常用于界面的显示,如 toDateString/toTimeString/.
...
getXXX:读取时间,如getFullYear/getMonth/getDate
setXXX:修改时间,如setDate/setMonth/...
---------------------------------------------------------------------------------------
-----------------------------------------------------------
--------------第二天-------------
--------------------------------------------
h, function对象
函数的参数 不用写数据类型
1.使用 function关键字,参数直接定义,使用return返回值
2.不能定义重载的方法,新的方法覆盖旧的方法
重载:js中方法名相同,覆盖(以最后一次为准)
模拟方法重载的实现:(只需要一个方法就可以)用arguments
arguments:当前方法的参数数组
arguments.length-----得到个数
xxx[index]------得到元素
练习 :
.html:
<input type="button" value="模拟重载" onclick="tryArguments(12);" />
.js:
function tryArguments(){
if(arguments.length==1){
var data=arguments[0];
alert(data*data);
}else if(arguments.length==2){
alert(arguments[0]+arguments[1]);
}
}
3.定义方法
方式一:function 声明(一般方式)
方式二:使用function对象,创建一个方法的实例,最后一个参数是方法体,其它参数是方法的参数
例子:function对象
function testFunc(){
var array=[1,12,56,789];
//function对象
var sortFunc =new Function("a","b","return a-b;");
array.sort(sortFunc);
alert(array.toString);
}
方式三:使用匿名函数实现(优先使用)
var f1=function(a,b){
alert(a+b);
};
f1(10,20);
例子:匿名函数
function testFunc(){
var array=[1,12,56,789];
//匿名函数
var sortFunc =function(a,b){
return a-b;
};
array.sort(sortFunc);
alert(array.toString);
}
4.全局方法
parserInt/parseFloat
isNaN
eval 用于计算某个字符串 "1+2-3+5" -> 5
decodeURI/encodeUrI
解码/编码
练习:模拟简单的计算器
.html:
<input type="button" value="1" onclick="cal(this.value);" >
<input type="button" value="2" onclick="cal(this.value);" >
<input type="button" value="3" onclick="cal(this.value);" >
<input type="button" value="4" onclick="cal(this.value);" >
<input type="button" value="5" onclick="cal(this.value);" >
<input type="button" value="6" onclick="cal(this.value);" >
<input type="button" value="7" onclick="cal(this.value);" >
<input type="button" value="8" onclick="cal(this.value);" >
<input type="button" value="9" onclick="cal(this.value);" >
<input type="button" value="0" onclick="cal(this.value);" >
<input type="button" value="+" onclick="cal(this.value);" >
<input type="button" value="-" onclick="cal(this.value);" >
<input type="button" value="=" onclick="cal(this.value);" >
<input type="text" id="txtData" >
.js:
function cal(str){
if(str=="="){
var v=document.getElementById("txtData").value;
document.getElementById("txtData").value=eval(v);
}else{
document.getElementById("txtData").value+=str;
}
}
--------------------------------------------------------------------------------
5.DHTML---------动态的HTML----
-----------
a.DHTML:利用js方法和对象,实现动态效果
b.对象模型树DOM
window
-history
-navigator
-document
-location-------导航栏
-event----------事件
c.window对象 window.xxx
window对象表示浏览器中打开的窗口
常用属性:
-document:整个html文档
-history:历史访问记录
-location:导航地址栏
-name:
-opener:
对话框
alert(str)
confirm(str);//确认对话框, str 提示信息, 有返回值true/false
prompt(str,value);//输入框,str提示信息 ,s有返回值
窗口的打开和关闭
open---- 代码中动态的打开某个页面
open(url);
open(url,name);//为窗口取了名字不会重复打开
open("url","name","width=xxx,height=xxx,toolBar=yes");
例子;
.html:
<input />
.js:
window.open("url");
定时器方法:时钟
setInterval(对象或则代码,时间例如1000毫秒);周期性触发代码,返回一个定时器对象
clearInterval(定时器对象);停止定时器对象
setTimeout(,);一次性触发,时间倒计时
例子:每隔1s调用showTime方法
.html:
<input type="text" id="txtTime" />
<input type="button" value="显示时间" onclick="showTime();" />
<input type="button" value="启动时钟" onclick="startClock();" />
<input type="button" value="停止时钟" onclick="stopClock();" />
.js:
function showTime(){
var now =new Date();
document.getElementById("txtTime").value=now.toLocaleTimeString();
}
var timer;
function startClock(){
//每隔一秒地调用showTime对象
timer=window.setInterval(showTime,1000);
//window.setInterval("showTime();",1000);//也可
}
function stopClock(){
window.clearInterval(timer);
}
例子:一次性倒计时时间,和取消
.html:
<input type="button" value="一次性" onclick="wait();" />
如果想取消此操作清点击<a href="javascript:cancelWait();">这里</a>
.js:
var timer1;
function wait(){
timer1= window.setTimeout("alert('hello');",5000);
}
function cancelWait(){
window.clearTimeout(timer1);
}
d.document对象:代表整个html文档, 将整个文档做成一颗节点树,以DOM的方式操作document
DOM(文档对象模型)节点树 根元素-html-head body --...
((增删改查))
1.找到节点对象:遍历树(三种查找方法)
*.document.getElementById();------根据id精确查询
*.层次结构查询:
parentNode/childNodes/lastChild/firstChild
返回对象(不同的名字使用)
length属性 , 空白算一个子节点,每个子节点的属性nodeName
*.getElementsByTagName(标签名字)---根据标签的名称,返回一个数组
2.读取或者修改节点的信息:将html标记对象化,对象可用标记的属性
1).将html标记对象化; 例如:xxx.src,xxx.href,xx.value
2).innerHTML ; 改变标记中间文本 ;
3).style.color/fontsize/dispaly;修改简单样式,每次只能修改一个
4).className="";修改复杂样式(先定义一个样式类,再调用)
5).nodeName 属性;得到全大写的节点名称(不知道是什么节点的时候)
onxxx="return false;";取消事件
例子:修改html,js
.html:
<input type="button" value="按钮" onclick="testDOM();" />
<img id="img1" src="xxx.jpg" />
<a id="link1" href="#"> Click me </a>
<p id="p1">段落</p>
<h3 id="h3">h3 text</h3>
.js:
function testDom(){
//修改图片
var obj=document.getElementById("img1");
obj.scr="xxx.jpg";
//修改链接
var linkObj=document.getElementById("link1");
linkObj.href="http://www.google.com";
linkObj.innerHTML="google";
//修改简单样式
var pObj=document.getElementById("p1");
pObj.innerHTML="new text";
pObj.style.color="red";
pObj.style.backgroundColor="gray";
pObj.style.fontSize="30";
//修改复杂样式
var h3Obj=document.getElementById("h3");
h3Obj.className="style1";
}
例子:模拟输入验证
.html:
用户名:<input style="text" id="txtName" onblur="valiName();" />
<span id="nameInfo">3-5位字母和数字的组合</span>
<br/>
电话:<input type="text" id="txtPhone" onblur="valiPhone();" />
<span id="phoneInfo">5位数字</span>
<input type="button" value="保存" onclick="return validateDate();" />
.js:
//验证姓名
function valiName(){
var name=document.getElementById("txtName").value;
var reg=/^[a-zA-Z0-9]{3,5}$/;
var spanObj=document.getElementById("nameInfo");
if(reg.test(name)){
spanObj.style.color="green";
}else{
spanObj.style.color="red";
}
return reg.test(name);
}
//验证电话
function valiPhone(){
var phone=document.getElementById("txtPhone").value;
var reg=/^\d{5}$/;
var spanObj=document.getElementById("phoneInfo");
if(reg.test(phone)){
spanObj.style.color="green";
}else{
spanObj.style.color="red";
}
return reg.test(phone);
}
逐一验证所有的项
function validateDate(){
var r1=valiName();
var r2=valiPhone();
return r1&&r2;
}
例子:模拟购物车
.html
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>aaa</td>
<td>10.0</td>
<td>
<input type="button" value="-" onclik="sub(this);" />
<input type="text" value="1"/>
<input type="button" value="+" onclick="add(this);" />
</td>
<td></td>
</tr>
<tr>
<td>bbb</td>
<td>20.0</td>
<td>
<input type="button" value="-" onclik="sub(this);" />
<input type="text" value="1"/>
<input type="button" value="+" onclick="add(this);" />
</td>
<td></td>
</tr>
</table>
总计:<span id="totalPrice"> </span>
.js:
function sub(btnObj){
var nodes=btnObj.parentNode.childNodes;
for(var i=0;i<nodes.length;i++){
var child=nodes[i];
if(child.nodeName=="INPUT"&&child.type=="text"){
var n=parseInt(child.value);
if(n>0){
n--;
child.value=n;
}
}
}
//计算
calSum();
}
function add(btnObj){
var nodes=btnObj.parentNode.childNodes;
for(var i=0;i<nodes.length;i++){
var child=nodes[i];
if(child.nodeName=="INPUT"&&child.type=="text"){
var n=parseInt(child.value);
n++;
child.value=n;
}
}
//计算
calSum();
}
//表行:价格在第二个td里,数量在第三个td里的第二个input里
/*循环行
;*/
function calSum() {
//找到所有的tr表行
var tableObj = document.getElementById("table1");
var rows = tableObj.getElementsByTagName("tr");
//从第二行开始循环
var total = 0;
for(var i=1;i<rows.length;i++)
{
//得到当前行
var row = rows[i];
//先找到价格
var price = parseFloat(row.getElementsByTagName("td")[1].innerHTML);
//找到数量
var quantityStr = row.getElementsByTagName("td")[2].
getElementsByTagName("input")[1].value;
var q = parseInt(quantityStr);
//计算小计:显示第4个td,计算总计
var sum = price * q;
row.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
//计算总计
total += sum;
}
//显示总计
document.getElementById("totalPrice").innerHTML = total.toFixed(2);
}
------------------------------------------------------------------------------------------
----------第二天------------
------------------------------------------------------
3.为文档添加新的内容
a)创建新节点createElement("")
b)设置节点的信息
c)加入文档appendChild/insertBefore
新节点必须加入某个父节点
创建新节点
document.createElement(标签名字);
添加新节点(作为已有节点的子节点添加)
parentNode.appendChild(newNode);默认在最后添加
添加新节点,加在谁(refNode)之前
parentNode.insertBefore(newNode,refNode)
删除节点
parentNode.removeChild(childNode);删除某个子节点
例子:添加节点
.html:
<form id="form1">
<input type="button" value="添加一个新节点" onclick="addNewNode()" />
</form>
.js:
function addNewNode(){
var formObj=document.getElementById("form1");
//按钮后添加一个文本框
var txtObj=document.createElement("input");
txtObj.type="text";
txtObj.value="java";
formObj.appendChild(txtObj);
//按钮前添加一个段落
var pObj=document.createElement("p");
pObj.innerHTML="段落的文本";
formObj.insertBefore(pObj,formObj.firstChild);
//文本框后添加一个按钮,为按钮添加设置单击事件
var btnObj=document.createElement("input");
btnObj.type="button";
btnObj.value="new button";
btnObj.onclick=function(){
alert("hello");
};
formObj.appendChild(btnObj);
}
例子:
onchange事件
.selectedIndex 获取被选择的option下标
.html:
省:<select id="sel1" onchange="createCities">
<option>请选择</option>
<option>北京</option>
<option>山东</option>
<option>济宁</option>
</select>
城市:<select id="selcity">
<option>请选择</option>
</select>
.js:
var array=new Array();
array[0]=["请选择"];
array[1]=["海淀","朝阳"];
array[2]=["济南","青岛","济宁"];
array[3]=["邹城","曲阜","任城"];
function createCities(){
var index=document.getElementById("sel1").selectedIndex;
var data=array[index];
var selCity=document.getElementById("selcity");
while(selCity.childNodes.length>0){
selCity.removeChild(selCity.lastChild);
}
for(var i=0;i<data.length;i++){
var obj=document.createElement("option");
obj.innerHTML=dara[i];
selCity.appendChild(obj);
}
}
--------------------------------------------------------------------------------
e.HTML DOM :原有的DOM基础上,对一些常用的操作进行封装 ,简化代码---将所有的元素封装为对象
比如Input对象,A对象,Select对象,Table对象等
1.Select 对象
Select对象代表HTML表单中的一个下拉列表
<select>标签表示一个Select对象
常用属性:
options,selectedIndex,size
常用方法:
add(option),remove(index)
事件:
onchange
Option对象
Option对象代表HTML表单中下拉列表中的一个选项
<option>标签表示一个Option对象
创建对象
var o=new Option(text,value);
常用属性:
index,text,value,selected
-------
sel.options
sel.add
var o = new Option(text,value);
例子:
function createCities(){
var index=document.getElementById("sel1").selectedIndex;
var data=array[index];
var selCity=document.getElementById("selcity");
selCity.options.length=0;
for(var i=0;i<data.length;i++){
var obj=new Option(data[i]);
//selCity.options[i]=obj;
selCity.add(obj);
}
}
2.Table
Table对象代表一个HTML表格
<table> 标签表示一个table对象
常用属性:
rows,cells
常用方法
indertRow(imdex),返回TableRow对象
deleteRow(index)
TableRow对象
TableRow对象代表一个HTML表格行
<tr>标签表示一个TableRow对象
常用属性
cells,innerHTML,rowIndex
常用方法
insertCell(index):返回TableCell对象
deleteCell(index)
TableCell对象
TableCell对象代表一个HTML表格单元格
<td>标签表示一个TableCell对象
常用属性
cellIndex,innerHTML,colSpan,rowSpan
rows属性:所有的行,有length,
insertRow(index);行,index是索引,行放的位置,返回新创建的行对象
row.insertCell(index);单元格,返回新创建的单元格对象
.html:
ID:<input type="text" id="txtID" />
名称:<input type="text" id="txtName" />
<input type="button" value="增加" onclick="addRow();" />
<table id="t1" border="1">
<tr>
<td>ID</td>
<td>名称</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
</tr
<tr>
<td>2</td>
<td>bbb</td>
</tr>
</table>
.js:
//为表格添加行及单元格
function addRow(){
//最后添加(t.rows.length)
var t=document.getElementById("t1");
var row=t.insertRow(t.rows.length);
//为行添加单元格
var cell1=row.insertCell(0);
cell1.innerHTML=document.getElementById(txtID).value;
var cell2=row.insertCell(1);
cell2.innerHTML=document.getElementById(txtName).value;
}
--------------------------------------------------------------------------------
f.screen 对象:屏幕的信息
包含有关客户端显示屏幕的信息
获取分辨率和色彩
只有属性没有方法
属性:读取
方法:改变行为
常用属性:
width/height
availWidth/avilHeigth
g.history对象:所有的历史访问记录
属性:
length属性:浏览器历史列表中的URL数量
方法:
back()后退
forward()前进
go(num)去访问过的页面,+前-后
h.location对象:当前的地址栏
href属性 :实现网页跳转,原网页在历史记录
方法:
replace("");实现网页跳转,原网页不会保留历史记录,避免重复提交时
reload();
例子:
.html:
<input type="button" value="网页跳转" onclick="testLocation();" />
.js:
function testLocation(){
location.href="http://www.google.com";
location.replace("http://www.google.com");
}
总结:
A页面------->B页面
跳转页面的三中方式:
a:静态
window.open:动态,在新窗口打开
location:动态,不需要在新窗口打开 (需不需要保留记录)
i.navigator:浏览器软件的相关信息
代码动态的遍历某个对象的所有属性
//js中对象所有的属性以数组的方式存在
//低层的封装location.href==location["href"]
.html:
<input type="button" value="得到所有的属性" onclick="testNavigator();" />
.js:
function testNavigator(){
var str="";
for(var r in navigator){
str+=r+":"+navigator[r]+"\n";
}
alert(str);
}
j.event:事件
事件触发后将产生一个event对象
1).事件的分类
鼠标事件:onclick,...
键盘事件:onkeydown,onkeyup...(return false;事件失效)
状态改变事件:onfocus,onchange,onblur,onload onunload(加载,body),onsubmit(提交,form)
2).事件可以取消
onxxx="return false;"
3).js中,事件有冒泡机制
就是在大框架上定义的事件在里面的小元素内也有作用
如果层次元素定义了相同的事件,从最底层开始触发,层层向上,直到最高层---就是冒泡机制
(底层元素能够触发高层的事件)
利用冒泡机制,解决大量事件重复定义问题
4).event对象:只要有事件发生,event
事件触发后产生一个event对象,记录(位置,键盘的按键信息,和触发对象)
火狐浏览器: 在页面中获得event传入js
其他浏览器:页面或则js中直接使用event
event.srcElement/target;得到触发事件的对象
eObj.target||eObj.srcElement(解决浏览器兼容问题)
例子:改进计算器
.html:
<div onclick="cal(event);">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="0" />
<input type="button" value="+" />
<input type="button" value="-" />
<input type="button" value="=" />
<input type="txt" id="txtData" />
</div>
.js:
function cal(e){
var node=e.target||e.srcElement;
var txtObj=document.getElementById("txtData");
if(node.nodeName=="INPUT"&&node.type=="button"){
if(node.value=="="){
txtObj.value=eval(txtObj.value);
}else{
txtObj.value+=node.value;
}
}
}
5).元素定义事件
静态定义:onxxx="";大多数用的
动态定义:onxxx=function对象;//function(){};
--------------------------------------------------------------------------------------
6.js的面向对象基础:数据和行为的封装
封装的数据:
自用:js代码中用,(简单封装,自定义封装)
他用:数据封装后传递给服务器端,通用的代码格式,(JSON)
js中如何实现封装
a).使用Object对象实现简单封装
创建一个Object对象,直接定义属性和方法不能实现重用
b).实现自定义封装,打包数据
构造函数,实现真正的封装
undefined???
c).JSON
JSON是一种轻量级的数据交换格式
一般只封装数据,不封装方法
语法: var p={
"":"",
"":""
};
例子 :简单封装
.html:
<input type="button" value="封装" onclick="testObject();">
.js:
function testObject(){
//实现封装
var o = new Object();
o.name="java";
o.age=18;
o.sing=function(){alert("hello");};
//测试封装
alert(o.name);
alert(o.age);
o.sing();
}
例子:自定义封装
定义
function Person(n,a){
this.name=n;
this.age=a;
this.introSelf=function(){
var str="i am " +this.name+",i am " +this.age +"years old.";
alert(str);
};
}
测试
function testPerson(){
var p1 = new Person("j",20);
p1.introSelf();
var p2 = new Person("s",30);
p2.introSelf();
}
例子:JSON封装
function testJSON{
var p={
"name":"java",
"age":20
};
}
----------------------------------------------------------------------------------