面向对象与面向过程选项卡实例分析.pdfVIP

面向对象的方式选项卡实例：

面向过程的选项卡:!DOCTYPEHTMLhtmll

angzh‑CNheadmetacharsetUTF‑8

title面向对象的选项卡/titlestyletype

text/css#myinput{background:#fff;

border:none;}#myinput.active{

background:green;}#mydiv{width:200px;

height:200px;background:#ccc;disy:none;}/

stylescripttypetext/javascript

window.onloadfunction(){varoMy

document.getElementById(my);

面向对象的方式选项卡实例：

面向过程的选项卡：

!DOCTYPEHTML

htmllang=en-US

head

metacharset=UTF-8

title面向对象的选项卡/title

styletype=text/css

#myinput{

background:#fff;

border:none;

}

#myinput.active{

background:green;

}

#mydiv{

width:200px;

height:200px;

background:#ccc;

disy:none;

}

/style

scripttype=text/javascript

window.onload=function(){

varoMy=document.getElementById(my);

varoBtnoMy.getElementsByTagName(input);

varoDivoMy.getElementsByTagName(div);

for(vari=0;ioBtn.length;i++){//为按钮添加点击

oBtn[i].indexi;oBtn[i].onclickfunction(){for(var

k=0;koBtn.length;k++){oBtn[k].className;o

Div[k].style.disynone;}this.className

active;oDiv[this.index].style.disyblock;}}}/

script/headbodydividmyinputtype

buttonvalueaaaclassactive/inputtype

buttonvaluebbb/inputtypebuttonvalue

ccc/divstyledisy:block;aaa/divdiv

bbb/divdivccc/div/div/body/html如何封

装呢？改写:1window.onload2变量3函数4函数不能

嵌套函数的嵌套用全局变量实现，避免了函数中局部变量

无法的问题。

问到。VaroDivnull;

各部分的对应关系

1window.onload初始化整个程序，可以将onload变成构造函数

2变量成为对象的属性3函数成

为对象的方法

!DOCTYPE

HTMLhtmllang

zh‑CNhead

varoBtn=oMy.ge