Web сахифанинг барча элементлари JavaScript тилидаги иерархик тузилиши буйича курилади. Хар бир элемент объект куринишида номаён булади. Ва бундан хар бир объект аник таркибга ва усулга эга булади. Уз навбатида JavaScript тили Web сахифа объектларини осон бошкариш имкониятини беради. Ва бунда сиз объектлар иерархиясини тушунишингиз жуда мухим. Буларнинг кандай руй беришини навбатдаги мисол оркали тез тушунишингиз мумкин.
Оддий HTML сахифани курамиз:
<html>
<head>
<title My homepage >
</head>
<body bgcolor = # ffffff>
<center>
<img scr = home.gif name=“pic1” width = 200 height = 100>
</center>
<p>
<form name = “My form”>
Name:
<input type = “text” name = “home” value = “ ”> <br>
e – mail:
<input type=“button” value=“pushme” name= “mybutton” onclick = “alert(Y)”>
</form>
<p>
<center>
<img scr = “my.gif” name =“pic4” width = 300 height = 15>
<p>
<a href = http://maks/index.html”> </a>
</center>
</body>
</html>
Демак биз 2 та тасвир, 1 та мурожат ва кандайдир матн чикариш учун 2 майдондан иборат форма ва 1 та тугмачага эгамиз. JavaSсript нуктаий назаридан броузер дарчаси – аллакандай Window объекти булиб хисоблланади. Бу объект уз навбатида бир неча расмийлаштириш элементларига эга. Дарча ичкарисига биз html документини урнатишимиз урнатишимиз мумкин ( ёки бошка тилдаги файл, хозирча html файли билан чегараланиб турамиз ). Бундай сахифа document объектидан сира хам фарк килмайди. Бу шуни англатадики document объекти JavaScript тилида хозирги пайтда юкланган html документни намоён этади. Document объекти JavaScript тилида жуда мухим объектлардан бири хисобланади ва сиз ундан куп марта фойдаланасиз. Масалан Document объектининг таркибига , Web сахифанинг фонинг ранги киради. Шундай килиб биз учун шуниси мухимки html объектлвридан барчаси document объектининг таркибига киради. Html объектларига мисол, мурожаат ёки тулдирилган форма була олади.
Куйидаги расмда мисолимиз оркали яратилган html сахифанинг объектлари иерархияси тасвирланган:
Албатта биз бу иерархия ёрдамида турли объектлар хакида маълумотга эга булишимиз ва уни бошкариш имконига эга булишимиз керак. Бунинг учун биз JavaScript тилида турли объектларга рухсат кандай ташкил этилганлигини билишимиз шарт. Куриниб турибдики иерархик тузилишга кура хар бир объект уз номига эга. Мос равишда агар сиз html сахифадаги 1-расмга мурожат килмокчи булсангиз объектлар иерархиясидаги уз йуналишингизни танлаб олишингиз керак ва энг юкори чуккидан бошлаш керак. Бу тузилишдаги 1-объект document деб аталади. Сахифадаги 1-расм images [0] объекти каби тасвирланган. Бу шуни англатадики JavaScript да document.images[0] деб ёзиб бу объектга рухсат олган буламиз. Масалан агарда сиз форманинг 1-элементига кандай матн киритилганини билмокчи булсангиз датслаб кандай килиб объектга рухсат олишни аниклаб олишингиз керак ва яна объектлар иерархиясининг энг юкорисидан бошлаймиз. Сунгра elements[0] объектга йул курсатамиз ва кетма–кетлик билан барча объектларни номини ёзамиз ва натижада шу нарса аникланадики 1-майдонга рухсатни шуларни ёзиш оркали олиш мумкин:
Document.forms[0].Elements[0]. Энди фойдаланувчи томонидан киритилган матнни кандай килиб билиш мумкин. Объектнинг кайси тури ёки хоссаларидан бири бу информацияга рухсат бериши мумкинлигини аниклаш учун JavaScript хакидаги маълумотномаларга муржат килиш керак. У ерда сиз киритилган матн майдонига мос келувчи элемент value хоссаси борлиги ва у киритилган матнга мос келади. Демак энди биз киритилган кийматни укиш учун барча керакли нарсаларга эгамиз. Бунинг учун JavaScript сатрида куйидагини ёзиш мумкин.
Name = document.froms[0].elements[0].value
Олинган сатр name узгарувчисига юкланади. Энди биз бу узгарувчидан хохлаган керакли пайтда фойдаланишимиз мумкин. Масалан, биз alert (“Hi”+name) буйруги ёзилган дарча яратишимиз мумкин. Натижада, агар фойдаланувчи бу майдонга ‘Stefan’ cузини киритган булса alert (“Hi”+name) буйругига кура янги дарчада ‘Hi Stefan’ саломи пайдо булади. Агар сиз катта сахифалар билан иш курсангиз турли объектларга номлар буйича адреслаш процедурасида жуда чалкашлик булиши мумкин. Масалан document.forms[3].elements[17] document.forms[2].elements[18] объектларига мурожаат килиш керак булсин? Бундай муоммадан кутилиш учун турли объектларга узингиз ном беришингиз мумкин. Буларни кандай килишни мисол оркали куришингиз мумкин:
<form name = “myForm”
Name
< input type = “text” name = “kirit “ value = “ “ > <br>
бу ёзув шуни билдирадики, forms[0] объекти энди 2-чи исм myForm га эга булди. Худди шундай elements[0] урнига kirit ни ёзишингиз мумкин (<input> тегида охирги атрибути name да курсатилган). Шу тарика
name = document.forms[0].elements[0].value урнига
name = document.myForm.kirit.value ни ёзишингиз мумкин. Бу сезиларли даражада JavaScript да дастурлашни соддалаштиради, айникса катта Web-сахифалар куп микдорда объектларга эга булса. (Номларни ёзишда регистрларни, ката-кичик харфлар холатини эътиборга олиш керак, яъни myForm урнига myform ёзиш мумкин эмас) JavaScript да объектларнинг купчилик хусусиятларида рухсат факат укиш учун эмас. Яна сиз уларга янги кийматлар ёзиш имкониятига хам эгасиз.
JavaScript воситалари оркали курсатилган майдонга янги сатр ёзишингиз мумкин.
<form name = “myForm”
<input type = “text” name = “input” value = “ха ха ха”
<input type = “button” value = “write”
onclick = “ document.myForm.input.value = ‘уф! ;”
Дастлаб куйидаги мисолни куриб чикамиз:
Скриптни даслабки коди:
< html >
< head >
< title>Objects < /title >
< script language = “JavaScript”>
< !- -hide
function first() {
// форма киритилган
// матн майдонида дарча хосил килади
alert (“Текст элементининг киймати :”+ document.myForm.myText.value) ;
}
function second() {
// Жорий функция кучирувчилар кийматини аниклайди.
Var mystring = “ The checkbox is ” ;
// Кучирувчи учганми ёки йук?
If (document.myForm.mycheckbox.checked.) mystring += “checked”
else mystring += “notchecked”;
// Экранга сатрни чикариш
alert ( mystring ) ;
}
//- -
< /script >
< /head >
<body bgcolor = lightblue >
< form name = “myForm >
< input type = “text” name = “myText” value = “xa xa xa” >
< input type = “button” name=“button1” value = “button1” >
onclick = “first ()”
<br>
< input type = “checkbox” name = “mycheckbox”>
< input type = “button” name=“button 2” value = “button2” >
onclick = “second()”
< /form >
< p > < br > < br >
< script language = “ JavaScript ”>
<!- - hide
document.write( “Фон рангги бу : ”) ;
document.write( document.bgcolor+ “<br>”) ;
document.write( “ 2 чи button даги матн :”) ;
document.write( “ document.myForm.button 2.value”) ;
// --
< /script >
< /body >
</html >
Location объекти
JavaScript да window ва document объектларидан ташкари location деб аталувчи яна бир мухим объект мавжуд. Бу объектда HTML документ юкланган адрес сакланади. Агар сиз http://www.xyz.com/page/html сахифасини юклаган булсангиз, у холда location.href нинг киймати хам худди шу адресга мос тушади. Шундай булсада биз учун жуда мухим нарса шуки, сиз location.href га янги киймат ёзишингиз мумкин. Масалан, куйидаги мисолда тугмача жорий дарчадан янги сахифага утишни юклайди :
< form >
< input type = button value=“Yahoo”>
onclick = “location.href = ` http://www.Yahoo.com ` ; ”
< /form >
Copyright © Joomla Inc. All Rights Reserved.
E-DASTUR.UZ - 2010 
Professional Templates
