Паролингизни унутдингизми?
Login
Left, Right, Center Left, Center, Right Center, Left, Right



12-Dars JavaScript -1-КИСМ.КАТЛАМЛАР

1-КИСМ.КАТЛАМЛАР

Катлам – бу Netscape Navigator 4.0 браузерининг ажойиб янги имкрниятларидан биридир. У Web – сахифаларни тасвир каби объектларини аник жойлаштиришга имкон яратади. Бундан ташкари сиз HTML сахифангизга турли объектларни куйишингиз мумкин. Хаттоки объектларни куринмас килишингиз мумкин. Java S тилида ________ ни осон бошкаришингиз мумкин. Жорий вактда ________ дан сиз факат Netscape Navigator 4.0 фойдаланишингиз мумкин. Аслини олганда катлам деганда нимани тушунамиз? Буни тушунтириш осон ва буни оддий мисолда, бир неча когоз варагини олиб тушунтирамиз. Бир варакка матн ёзинг. Башкасига тасвир чизинг ва хакоза. Энди бу варакларни стол устига куйинг. Фараз киламиз хар бир варак бирор бир катлам . у хар хил объектларни бизнинг мисолимизда матн ва тасвирни ичига олиши мумкин. Энди тасвирли варакни олиб стол буйлаб харакатлантирамиз. Диккат билан тасвирни варак изидан харакатланишини кузатинг. Агар биз варакни унгга бурсак тасвир хам унгга бурилади! Катламлар узида турли объектларни саклаши мумкин, масалан тасвирлар, формалар, матнлар HTML сахифангизга куйилиши мумкин. Агар сиз бирор бир катламни харакатлантирсангиз у холда бу каватдаги колган барча объектлар хам бу харакатларни такрорлайди. Каватлар бир-бири билан стол устидаги оддий кагаз вараклари сингари жойлашиши мумкин. Хар бир каватда ялтирок майдон булиши мумкин. Варакда тешик яъни 1 чи варакдаги “ ялтирок майдон ” дан пастда жойлашган вараклар куринади.
Каватлар хосил килиш .
Кавт хосил килиш учун биз < layer > ва < ilayer > тегидан фойдаланишимиз керак. Куйидаги параметрлардан фойдаланишингиз мумкин:

Name = “ layerName”                                                     
Left = x position
Top = y position
z-index = layer index
width = layer width
clip = “ x1-offset, y1-offset,x2-offset,y2-offset ”
above = “ layerName”

below = “ layerName ”

visibility show/hide/inherit
bgcolor = “ rgbcolor ”

backround = “ imageurl ”

Варак номи
Чапдан юкори бурчакни абциссаси
Чапдан юкори бурчакни ординатаси
Кават учун индекс номери
Кават кенглиги ( нуктада )
Каватнинг куринувчи кисмини белгилайди
Бизнинг кават тагида кайси кават борлигини аниклайди
Кайси кават бизнинг кават устидалигини аниклайди
Бу каватнинг куриниши
Фон рангги стандарт ранг номи ёки rgb ёзув
Фон тасвир.

<layer> теги аник жолаштиришингиз мумкин булган каватлар учун ишлатилади. Агар сиз кават холатини курсатмасангиз (left top параметрлари ёрдамида) у холда жимлик холатига кура у дарчанинг юкори чап бурчакни эгаллайди.
<ilayer> тег ёрдамида
Келинг энди оддий мисолдан бошдаймиз. Биз 2 та кават хосил килмокчимиз. Улардан биринчисига тасвир, иккинчисига эса жойлаймиз. Бу килмокчи булган нарса ушбу матнни жорий тасвир устида курсатиш.
Дастлабки коди:
<html>
<layer name=pic z-index=0 left=200 top=100>
<img src = “img.gif” width=160 height=120>
</layer>
<layer name=txt z-index=1 left=200 top=100>
<font size =+4> <ilayers-demo> </i> </font>
</layer>
</html>
Куриб турибмизки <layer> теги ёрдамида биз 2 та кават шаклини аниклаймиз. 2 та кават хам 200/100 (left ва top параметрлариоркали) сингари жойлаштирилади. <layer> ва </layer> ёки <ilayer> ва </ilayer> теглари орасидаги барча нарсалар тавсифланаётган каватга тегишлидир. Бундан ташкари биз курсатилган каватларнинг пайдо булиш тартибини z-index параметрлари оркали белгиладик яъни бизнинг холатда сиз браузерга матн тасвир юкорисида ёзилишни хабар берамиз. Умума олганда, z-index нинг энг юкоридаги кавати барча каватлар устида курсатилади. Сиз z-index ни танлашда факатгина 0 ва1 кийматлар билан чегараланган эмассиз-умуман истаган мусбат сонларни танлашингиз мукин.
JavaScript ва каватлар.
Энди биз каватларга Java S оркали кандай рухсат олишни куриб чикамиз. Фойдаланувчи тугмачани босиш оркали бирор бир каватни курсатиши ёки бекитиш имкониятига эга булувчи мисолни куришдан бошлаймиз. Дастлаб бу каватлар Java S да кай тарзда хосил булишини куришимиз керак. Одатдагидек бунинг бир неча усуллари бор. Энг яхшиси хар бир каватга ном бериб чикиш. Демак, агар биз
<layer … name=mylayer>

</layer>
</layer> деб кават хосил килсак у холда биз унга кейинчалик document.layers[“mylayer”] конструкцияси оркали рухсат олишимиз мумкин. Бу каватларга рухсатни биз бутун сонли индекс оркали олишимиз мумкин. Демак, энг пастки каватга рухсат document.layers[0] деб ёзиш билан олинади. Шунга эътибор каратингки индекс бу z-index параметр билан бир хил нарса эмас. Агар мисол учун сиз layer1 ва layer2 деб номланувчи z-index номерлари 17 ва 100 булган каторларга эга буламиз. У холда сиз уларга document.layers[17] ва document.layers[100] деб эмас балки document.layers[0] ва document.layers[1] оркали рухсат олишингиз мумкин. Каватлар Java S скриптлари ёрдамида узгартириб булувчи бир неча хусусиятларга эга. Навбатдаги мисолда 1 – каватни бекитувчи ёки аксинчахосил килувчи тугмача ташкил килинган. (Netscape Novigator +4 ёки ундан юкори версиялари талаб килинади).
Дастлабки коди куйидаги куринишда булади:
<html>
<head>
<script Language = “JavaScript”
<! - - hide
function showHide ( ) {
if (document.layers[“mylayer”].visibility = = “show”)
document.layers[“mylayer”].visibility = “hide”
else (document.layers[“mylayer”].visibility = “show”);
}
//--
</script>
</head>
<body>
<ilayer name = mymylayer visibility show
<font size =+1 color= “#0000ff”> <i> this text inside a layer
</i> </font>
</ilayer>
<form>
<input type = “button” value = “show/hide layer” onclick = “ShoeHide”>
</form>
</body>
</html>
Берилган тугмача ShowHide ( ) функциясини чикаради. Бу функция layer (mylayer) объектининг куринувчанлик хусусиятига рухсат олиш масаласи ечилган. Document.layers[“mylayer”].visibility параметрига “show” ёки “hide” каватини бериб сиз ушбу каватни курсатиш ёки беркитиш имкониятига эга буласиз. Show ва hide бу киркиб олинган калит сузлар эмас балки сатр хисобланиб, сиз Document.layers[“mylayer”].visibility = show деб ёза олмайсиз.
§ Каватларни жойлаштириш.
Left ва top хусусиятлар берилган каватнинг холатини белгилайди. Сиз уларга янги каватлар бериб уни узгартиришингиз мумкин. Масалан навбатдаги сатрда каватнинг горизантал холати 200 нуктада бериляпти:
Document.layers[“mylayer2”].left = 200;
Энди биз каватларни аралаштириш дастурига утамиз, у браузер дарчасида кандайдир айланишлар яратади. Скрипт куйидаги куринишда:

<html>
<head>
<script Language = “JavaScript”
<! - - hide
function move ( ) {
if (pos<0) direction = true;
if (pos 200) direction = false;
if direction pos++ else pos --;
document.layers[“mylayer2”].left = pos;
}
//-- > </script>
</head>
<body onload = “setinterval (‘move ( )’,20)”
<ilayer name = mylayers2 left = 0>
<font size = +1 color = “#0000ff”> <i> this text is inside a layer </i>
</font>
</ilayer>
</body>
</html>
Биз mylayer2 номли кават яратдик. <body> тегида биз onload процедурасини ишлатганимизни куриш мумкин. Бизга сахифа юклатилгандан дарров кават айланишини бошлаш зарур. Onload ходисаларини кайта ишлаш процедурасида биз setInterval ( ) функциясидан фойдаланамиз. Бу Java S версиясининг янги усулларидан биридир. Ундан бирор бир функцияни яна ва кайта яна аник бир интервалида чакиришда фойдаланилади. Олдин биз бунинг учун setTimeOut вакт функциясидан фойдаланганмиз. SetInterval функцияси хам худди шундай ишлайди, бирок сиз уни бир марта чакирсангиз етарли булади.
SetInterval функциясида биз move ( ) функциясини хар бир 20 миллисекунддан чакириш имконига эгамиз. Move ( ) функцияси эса уз навбатида хар 20 миллисекунддан каватни янги сохага алмаштиради. Бу функцияни яна ва яна чакиришимиз натижасида матнимизни тез харакатланишини курамиз. Move( ) функциясида киладиган нарсамиз шуки кават учун янги координата хисоблаш ва уни ёзиш: document.layers[“mylayer2”].left = pos.

 


Share