logo
  1. Главная страница
  2. Рефераты
  3. Информатика и ИТ
  4. HTML хужжатлар ва javascript даги объектлар иерархияси

HTML хужжатлар ва javascript даги объектлар иерархияси

Загружено в:

20.09.2019

Скачано:

0

Размер:

255 KB
Скачать
HTML хужжатлар ва javascript даги объектлар иерархияси Режа : 1. Фреймлар . 2. Дарча яратиш. 3. Vrml -сахналарини динамик яратиш. 4. Image объекти . Web сахифанинг барча элементлари JavaScript тилидаги иерархик тузилиши буйича курилади . Хар бир элемент объект куринишида номаён булади. Ва бундан хар бир объект аник таркибга ва усулга эга булади. Уз навбатида JavaScript тили Web сахифа объектларини осон бошкариш имкониятини беради. Ва бунда сиз объектлар иерархиясини тушунишингиз жуда мухим. Буларнинг кандай руй беришини навбатдаги мисол оркали тез тушунишингиз мумкин. Оддий HTML сахифани курамиз: Демак биз 2 та тасвир, 1 та мурожат ва кандайдир матн чикариш учун 2 майдондан иборат форма ва 1 та тугмачага эгамиз. JavaS с ript нуктаий назаридан броузер дарчаси – аллакандай Window объекти булиб хисоблланади . Бу объект уз навбатида бир неча расмийлаштириш элементларига эга . Дарча ичкарисига биз html документини урнатишимиз урнатишимиз мумкин ( ёки бошка тилдаги файл, хозирча html файли билан чегараланиб турамиз ). Бундай сахифа document объектидан сира хам фарк килмайди . Бу шуни англатадики document объекти JavaScript тилида хозирги пайтда юкланган html документни намоён этади . Document объекти JavaScript тилида жуда мухим объектлардан бири хисобланади ва сиз ундан куп марта фойдаланасиз . Масалан Document объектининг таркибига , Web сахифанинг фонинг ранги киради . Шундай килиб биз учун шуниси мухимки html объектлвридан барчаси document объектининг таркибига киради . Html объектларига мисол , мурожаат ёки тулдирилган форма була олади . Куйидаги расмда мисолимиз оркали яратилган html сахифанинг объектлари иерархияси тасвирланган : Албатта биз бу иерархия ёрдамида турли объектлар хакида маълумотга эга булишимиз ва уни бошкариш имконига эга булишимиз керак . Бунинг учун 1 биз 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 ’ саломи пайдо булади. Агар сиз катта сахифалар билан иш курсангиз турли объектларга номлар буйича адреслаш процедурасида жуда чалкашлик булиши мумкин. Масалан 2 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 воситалари оркали курсатилган майдонга янги сатр ёзишингиз мумкин . Location объекти JavaScript да window ва document объектларидан ташкари location деб аталувчи яна бир мухим объект мавжуд . Бу объектда HTML документ юкланган адрес сакланади . Агар сиз http://www.xyz.com/page/html сахифасини юклаган булсангиз , у холда location.href нинг киймати хам худди шу адресга мос тушади . Шундай булсада биз учун жуда мухим нарса шуки , сиз location.href га янги киймат ёзишингиз мумкин. Масалан, куйидаги мисолда тугмача жорий дарчадан янги сахифага утишни юклайди : 3 ФРЕЙМЛАР. Фрейм яратиш. Фрейм ва JavaScript кандай килиб бирга ишлайди деган савол тез - тез бериладиган саволлардан биридир . Дастлаб биз фрейм нима ва у нима учун ишлатилади деган саволни тушунтирамиз. Сунгра JavaScript ва фреймлар кандай биргаликда ишлатилишини куриб чикамиз.Умуман олганда броузер дарчаси бир неча алохида фреймларга ажратилиши мукин. Бу шуни англатадики,фрейм бу броузер дарчасидаги тугри туртбурчак шаклидаги бирор бир белгиланган майдон. Хар бир фрейм экранга узининг документини чикаради. Шу тарика мисол учун сиз 2 та фрейм яратмокчисиз. Биринчи фреймга сиз Netscape фирмасининг “Уй сахифасини” юклашингиз, 2 чига эса Microsoft фирмасиникини юклашингиз мумкин. Фреймлар яратиш HTML тили масаласи бул c ади, биз бу ерда бу жараённинг асосий куринишини тавсифлаб утамиз. Фрейм яратиш учун бизга < frameset > ва < frame > теглари керак булади. 2 та фрейм яратувчи HTML сахифа куйидаги куринишда булиши мумкин : Натижада 2 та фрейм яратилади. <frameset> тегида rows хоссасининг фойдаланилганини сезган булсангиз керак . Бу фреймлар бир - бири устидан жойланганини билдиради . Юкори фреймга page1.htm сахифаси юкланади , пастки фреймга эса page2.htm документи жойлаштирилади. Тула яратилган фрейм таркиби куйидаги киёфада булади : Агар сиз документлар усти-устига эмас, ёнма-ён туришини хохласангиз, у холда <frameset> тегида rows эмас cols сузини ёзиш керак . “ 50% , 50% ” фрегменти фреймларни канчалик катталигини билдиради. Агар 4 сиз хисоб-китоб билан узингизни кийнашни истамасангиз ва хисобда барибир 100% хисоб-китоб булишини истасангиз “ 50% * % ” ёзишингиз мумкин. Фрейм улчамини нукталарда бермокчи булсангиз сондан сунг % белгисини куймаслигингиз керак. Истаган фреймга ном бериш учун < frame > тегида name атрибутидан фойдалансангиз етарли . Бундай имконият бизга JavaScript тилида фреймларга рухсат учун керак булади . Web - сахифалар яратишда бир неча куйилган < frameset > тегларидан фойдаланишингиз мумкин . <frameset> тилида border параметрини ишлатган холда фреймлар орасидаги йугинликни беришингиз мумкин . Агар border=0 деб берилса бу сиз фреймлар орасида кандайдир масофа булишини хохламаётганингизни билдиради . Фреймлар Ва Javascript Энди келинг JavaScript да фреймларни браузер дарчасида кандай “ куринишни ” куриб чикамиз . Бу максадда ушбу кисмни берилишида келтирилган биринчи мисолдагидек иккита фрейм яратамиз . Куриб утганимиздек JavaScript web- сахифадаги курсатилганларнинг барча элементларини аллакандай иерархик таркибдаги куринишда ташкил килади . Худди шулар фреймларга хам таалуклидир . Навбатдаги расмда биринчи мисолдаги обьектлар иерархияси курсатилган : Иерархия чуккисида браузер дарчаси жойлашган ( browser window ). Жорий холатда у иккита фреймга ажратилган. Шу тарика дарча объект 5 сифатида тур бошлиги яъни ушбу иерархиянинг онаси ( parent ), иккита фрейм эса мос равишда уларнинг авлодлари ( children ) хисобланади. Биз бу иккита фреймга frame 1 ва frame 2 деб ном бердик. Улар ёрдамида биз келтирилган иккита фреймлар билан маьлумот алмашишимиз мумкин. Скрипт ёрдамида куйидаги масалани ечиш мумкин: Айтайлик, фойдаланувчи кандайдир мурожатни биринчи фреймда фаоллаштирса, бирок унга мос сахифа уша фреймда эмас, бошкасида юкланиши керак. Ушбу масалага мисол булиб мундарижа тузишни келтирсак ва бунда битта фрейм узгармас булиб колади, лекин фойдаланувчига бир неча турли мурожатларни урганишга таклиф килади. Ушбу масалани ечиш учун биз 3 та холни куриб чикишимиз керак:  асосий дарчалар фрейм авлод фреймга рухсат олади  авлод-фрейм она дарчалар фреймга рухсат олади  авлод фрейм бошка бир авлод фреймга рухсат олади Объект нукталари назаридан «дарча» ( window ) иккита курсатилган фрейм frame 1 ва frame 2 деб номланади. Олдинги расмда куриш мумкинки, она дарча ва фреймлар орасида тугри олака мавжуд. Яъни агар сиз она дарча учун скрипт ёзсангиз яъни бу фреймларни яратувчи сахифалар учун скрипт ёзсангиз у холда бу фреймларга уларни номлари оркали мурожаат килишингиз мумкин. Маслан: Frame 2. document . write («ушбу хабар она дарчадан юборилган»); Айрим холлларда сизга 1 фреймда туриб она дарчага рухсат олиш зарур булиб колади. Масалан, бу агар сиз келаси утишда фреймлардан кутилишда 6 зарур булади. Бундай холда фреймларни йук o тиш факатгина мавжуд фреймлар урнига янги сахифани юклаш оркали бажарилади. Бундай холатда бу юкланиш она дарча сахифасига булади. Буни она дарча - parent (ёки она фрейм) га унинг авлодлари булмиш фреймлардан рухсат олиш билан амалга ошириш мумкин. Янги документ юклаш учун location . href га янги URL адресларни киритиш керак. Фреймлардан кутилиш истагида эканмиз она дарчада location объектидан фойдаланиш керак. (шуни эслатамизки хар бир фреймга алохида сахифа юклаш мумкин ва хар бир фрейм узининг location объектига эга). Демак биз она дарчага ушбу буйрук оркали янги сахифа юклашимиз мумкин: Parent . location . href = “ http://… ” Ва нихоят , сизга тез – тез учраб турадиган масалаларни бори бу 1 авлод фреймда туриб 2 авлод фреймга рухсат таъимнлаш масаласидир . Бизнинг масаламизда кандай килиб иккита фрейм орасида хеч кандай тугри олака йуклигини куриш мумкин . Ва шунинг учун 2 чи фрейм борлиги хакида хеч нарсани билмайдиган frame 1 да туриб frame 2 ни чикаришимиз мумкин эмас . Она дарча нуктаси назарига кура 2 чи фрейм мавжуд ва у frame 2 деб номланади ва 1 чи фреймдан она дарчага parent номи билан мурожат килса булади . Шу тарика 2 чи фреймга жойлашган документга рухсатни куйидагини ёзиш оркали олиш мумкин: Parent . frame 2. document . write (“Салом, бу чакирик / чи фреймдан! ”) 7 Навигацион панеллар (катновчи йулкалар) Келинг, катнавчи йулкалар кандай яратилишини куриб чикамиз. Битта фреймда Бир неча мурожатларни яратамиз. Лекин, агар фойдаланувчи улардан биттасини фаоллаштирса мос сахифа уша фреймда эмас, бошкасида жойлашшади. Бунга мисол: Дастлаб курсатилган фреймларни яратувчи скриптни ёзиб олишингиз керак. Бу документ худди олдинги кисмимизнинг берилишида куриб чиккан документдек куринишда булади. Fromes3.htm Куриб турганингиздек , янги сахифа юклаш урнига биз браузерга JavaScript да кандайдир буйрукни бажаришни таклиф киламиз . Яъни бунинг учун биз оддий href урнига JavaScript: параметридан фойдаланишимиз керак холос . Сунграк кавс ичида “first.htm” ни ишлатганимизни куришимиз мумкин . Бу сатр load функциясининг аргументи сифатида берилган . Load ( ) функциясининг узи куйидаги тарзда аникланади . Function load (url) { Parent.main.location.href = url; } 8 бу ерда кавс ичида url деб ёзилганини куришингиз мумкин . Бизнинг мисолимизда ‘first.htm’ сатри функция чакирилганда url узгарувчисига узлаштирилади . Ва бу янги узгарувчини load ( ) функцияси *** фойдаланиш мумкин . Биз кейинрок узгарувчиларни бошка бир мисолда ишлатилиши билан танишамиз . Иккинчи мурожатда torget параметри катнашган . Аслини олганда Java S тегшили эамас . У html тилининг кулланмаларидан биридир. Куриниб турганидек,биз факат керакли фрейм номини курсатамиз. Бу холда курсатилган фрейм номидан олдин parent сузини ишлатиш шарт эмас, чунки torget параметри Java S эмас html тилининг функцияси хисобланади. Ва учунчи мурожатда torget ёрдамида кандай килиб фрейм кутилишни куришингиз мумкин. Агар сиз load ( ) функцияси ёрдамида фреймларни йукотмокчи булсангиз факатгина унга parent . location . href = url деб ёзсангиз етарли булади. Демак кайси усулни танлашингиз керак? Бу сизнинг нима килмокчилигингизга яъни script га боглик. Torget параметри жуда оддий ишлатилади. Сиз ундан янги сахифани бошка фреймга юкламокчи булган пайтингиздагина фойдаланишингиз мумкин. Java s тили асосида ечилган усул (бунга мисол биринчи мурожат булади) одатда агарда сиз мурожатни фаоллаштирганингизда 1 неча ходисалар руй бериш кузда тутилганда ишлатилади. Тез-тез учраб турадиган муоммалардан бири 2 сахифани 2 та фреймга юклаш шу турдаги масалаларга киради. Бу масалани torget параметри ёрдамида хам хал этиш мумкин, лекин Java S функциясидан фойдаланиш афзалрокдир. Фараз киламиз биз frame 1 frame 2 frame 3 номли фреймларга эгамиз. Айтайлик frame 1 да мурожатни фаоллаштирганда 2 та фреймнинг хар бирида хар хил Web сахифа юклансин. Ечим сифатида куйидаги функциядан фойдалансангиз булади. Function load two ( ) { Parent.frame 1.location.href = “first.htm”; Parent.frame 2.location.href = “second.htm”; } 9 Агарда шу функциянгиз янада ихчам булишини хохласангиз , у холда узгарувчини аргумент сифатида узатиш имкониятидан фойдалансангиз булади : Натижа куйидаги куринишда булади: Function load two ( url1, url2 ) { Parent.frame 1.location.href = url1; Parent.frame 2.location.href = url2; } Бундан сунг load two( “first.htm”, “second.htm” ) ёки load two( “first.htm”, “forth.htm” ) функция чакиригини тахлил килса булади . Шубхасиз бу сизнинг функциягизни янада ихчам ва уни тез - тез , турли контекстларда ишлатишингиз мумкин булади . ДАРЧА ВА ДИНАМИК ЯРАТИЛУВЧИ ДОКУМЕНТЛАР. Дарча яратиш. Броузерда янги дарча яратиш JavaS нинг энг зур кулайликларидан биридир. Биз бу янги дарчада янги документларни (масалан уша html документларини) ёки янги материалларни (динамик равишда) яратиб куйиш мумкин. Дастлаб биз янги дарча очиш кейин унга html – сахифани кандай юклашни ва нихоят уни кандай ёпишни курамиз. Куйида келтирилган скрипт браузерда янги дарча очади ва унга кандайдир Web сахифани юклайди. Келтирилган мисолимизда янги дарча open усули ёрдамида menu.htm сахифаси ёзилади . Биз дарча яратиш жараёнини бошкариш имкониятига эга эканлигингизни айтиб утишимиз керак . Масалан , янги дарча макола сатрига , ускуналар сатрига ёки мундарижага эга булиш мумкинлигини курсатишингиз мумкин . Масалан, навбатдаги скриптда 400х300 нуктали 10 улчамдан иборат янги дарча очилади, уларга макола сатрига, на ускуналар панелига ва яна мундарижага эга. Куриб турганингиздек дарча тартибини “width = 400, width = 300, status = no, toolbar=no,menubar = no” сатрида расмийлаштирамиз. Шунга эътиборингизни каратингки сизга бу сатрда символлар орасида буш жой куйиш талаб куйидмайди. Дарча бошкариладиган хоссалар руйхати directorie s yes|no height количество пикселов location yes|no menubar yes|no resizable yes|no scrollbar s yes|no status yes|no toolbar yes|no width количество пикселов JavaS тилининг 1.2 версиясига бир неча янги хоссалар кушилган (яъни netscape navigator 4.0) сиз бу янги хосасаларни netscape 2 x , 3 x ёки Microsoft Internet Explorer 3 x учун материал тайёрлашда ишлата олмайсиз чунки браузер Java s ни 1.2 версиясига тушунмайди. Дарчанинг янги хоссалари alwaysLower ed yes|no alwaysRaised yes|no dependent yes|no hotkeys yes|no innerWidth количество пикселов (заменяет 11 width) innerHeight количество пикселов (заменяет height) outerWidth количество пикселов outerHeight количество пикселов screenX количество пикселов screenY количество пикселов titlebar yes|no z-lock yes|no Биз бу хоссаларнинг изохини Java S тилининг 1.2 версияси тарифидан топишингиз мумкин. Сунгрок улардан бир нечасига тушинтириш ва мисоллар бериб утамиз. Масалан, энди сиз бу хоссалар ёрдамида янги очилаётган экраннинг кайси жойида жойлашишини аниклашингиз мумкин. Java S нинг эски версиясида сузда бундай имконият йук. Дарча номи. Куриб турганингиздек дарча очаётганда бу учта аргументдан фойдаланишимиз керак: myWin= open(&#34;bla.htm&#34;, &#34;displayWindow&#34;, &#34;width=400,height=300,status=no,toolbar=no,menubar=no&#34;) ; 2 – аргумент кимга керак? Бу дарча номи юкорида бу у target параметрида кандай ишлатилишини курган эдик. Демак, агар сиз дарча номини билсангиз у ерга янги сахифа юклашингиз мумкин: <a href=&#34;bla.html&#34; target=&#34;displayWindow&#34;> Бунда сиздан мос дарча номини курсатиш талаб килинади (агар шундай дарча мавжуд булмаса, шу номли янги дарча яратилади ). Шунга эътиборингизни каратингки, бу ердаги mywin дарча номи эмас. Факатгина шу узгарувчи билан дарчага рухсатни олмайсиз. Модомики у оддий узгарувчи экан, унинг харакат майдони факатгина у аниклаганунча скрипт 12 билан белгиланади. Бундан ташкари дарча номи ( жорий холатда display window ) ажойиб узгарувчи булиб уни ихтиёрий броузер дарчасидан туриб фойдаланса булади. Дарчаларни ёпиш. Сиз шунингдек Java S тили ёрдамида дарчаларни ёпиш имкониятига эгасиз. Буни килишда сизга close ( ) усули ёрдам беради. Келинг олдин килганимиздек, янги дарча очамиз ва унга навбатдаги сахифани юклаймиз. Энди эса, агар сиз янги дарча тугмачани боссангиз у ёпилади. Open ( ) ва close ( ) бу window объектининг усуллари хисобланади . Шуни эсда тутиш керакки , биз факат open( ) ва close( ) деб эмас , балки window.open( ) ва window.close ) деб ёзишимиз керак . Лекин бизникидай холатда window объектининг тушириб колдириш мумкин , чунки агар сиз бу объектнинг факатгина 1 усулини чакирмокчи булсангиз window ни колдирса булади . ( Бу факат шу объект учун мумкин булган хол ). Документларни динамик яратиш. Энди биз Java S нинг энг зур имконияти хисобланиш документларни динамик яратишларни куриб чикамиз. Яъни энди сиз скриптингизга Java S тилида узи янги html сахифалар яратишга рухсат беришингиз керак. Бундан ташкари сиз шу тарика бошка Web документлар яъни vrlm – сахналар ва бошкалар каби. Кулайлик учун сиз бу документларни алохида дарча ёки фреймларда жойлаштиришингиз мумкин. Дастлаб биз оддий html документ яратамиз ва буни янги дарчада курсатамиз. Унинг скрипти куйидагича: Келинг mywin 3() функциясини куриб чикамиз. Афтидан бу дастлаб браузерга янги дарча очамиз. Open () функциянинг 1 чи аргументи () буш сатр булгани учун яъни у шуни билдирадики, бу жорий холатда url нинг аник 13 адресини курсатишини мумкин. Браузер факат мавжуд документларни ишлаш эмас, балки у янги документларни кушимча равишда яратиши хам керак. Скриптда бу mywin узгарувчисини аниклаймиз. Ва унинг ёрдамида биз янги дарчага рухсат олиб биламиз. Шунга эътиборингизни каратингки, жорий холатда ушбу максад билан биз дарча номига ( DisplayWindow ) мурожат кила олмаймиз. Дарчани очганимиздан сунг document нинг объектини ёзиш учун очишга жавоб келади. Бу ушбу буйрук ёрдамида амалга оширилади: // документ объектини навбатдаги босмада очиш myWin.document.open(); Бу ерда биз document объектининг усули open ( ) га мурожат киламиз. Бирок бу усул window объектининг open ( ) усули билан умуман бир хил эмас. Бу буйрук янги дарча очмайди, у факат document ни навбатдаги босмага тайёрлайди. Бундан ташкари, бу my win олд кушимчасини document open ( ) олдидан кушишингиз керак, бу бизга янги дарча ёзиш имконини беради. Куйидаги скрипт сатрларидаги document . write ( ) чакириги ёрдамида янги документ ёрдамида янги документ матни шаклланади: // янги документ ташкил этиш myWin.document.write(&#34;<html><head><title>On-the-fly&#34;); myWin.document.write(&#34;</title></head><body>&#34;); myWin.document.write(&#34;<center><font size=+3>&#34;); myWin.document.write(&#34;This HTML-document has been created &#34;); myWin.document.write(&#34;with the help of JavaScript!&#34;); myWin.document.write(&#34;</font></center>&#34;); myWin.document.write(&#34;</body></html>&#34;); 14 куриб турганингиздек , биз бу ерда html тилининг оддий тегларини ёзамиз . Яъни бу хакикий html лойихасини ташкил этамиз . Бунда сиз html нинг ихтиёрий тегларидан фойдаланишингиз мумкин . Буни тугатиш учун биз яна документни ёпишимиз керак. Бу навбатдаги буйрук оркали бажарилади: // документни ёпиш - ( дарчани эмас ) mywin . document . close ( ); Айтиб утганимиздек, сиз факат документларни динамик яратиш эмас, балки уз ихтиёрингизга кура уларни у ёки бу фреймларда жойлаштиришимиз мумкин. Масалан, сиз 2 та фреймга эга булсангиз ва улар frame 1 ва frame 2 номли булса ва frame 2 да янги документ ташкил килмокчи булсангиз у холда сиз frame 1 да туриб ушбуларни ёзсангиз етарли булади: parent.frame2.document.open(); parent.frame2.document.write(&#34;Here goes your HTML- code&#34;); parent.frame2.document.close(); VRML-САХНАЛАРИНИ ДИНАМИК ЯРАТИШ . JavaS тилининг ихчамлигини намоиш килиш учун , келинг энди VRML тилида динамик тарзда сахна ташкил этамиз . Эслатиб утамизки ,VRML вокеликни ветуал моделлаштириш каби кенгайтирилади . Яъни бу тил 3 улчовни сахналар яратиш тилидир . Оддий мисол келтирамиз кук куб . Бундан ташкари буни куриш учун сизнинг браузерингизга VRML нинг дастурий приставкаси керак булади . Киритилган скрипт VRML нинг браузерга кира олиш имкониятини аниклайди . 15 Куриниб турибдики, скрипт матни олдинги мисолимиздагидай. Дастлаб янги дарча очилади . Сунгра унга маълумот чикариш учун document очамиз . Унга мос буйрукни батафсил куриб чикамиз: // куйидаги маълумотни чикариш учун document очиш vrml.document.open ( “x – world /x – vrml ”); Олдинги мисолларда бу кавс ичида хеч нарса курсатмаган эдик. У холда “ x – world / x – vrml ” ёзув нимани англатади? Аслида олганда биз ушбу кулланма ёрдамида яратаётган document га MIME типини берамиз. Яъни биз бу билан браузерга бериладиган маълумотлар кандай типдалигини хабар киламиз. Агар биз уша жойда кавс ичида MIME нинг аник типини аниклаб олмаганимизда янги документга “ text / html ” типи танланган булар эди. ( Бу эса html файллар учун MIME типининг узидир ). Уч улчамли сахна яратиш учун биз vrml . document . write ( ) кулланмасини ташкил килишимиз керак. Лекин бу жуда узун булганлиги сабабли, биз оддий vr дан vrml . document узгарувчисини аниклаб оламиз. Ва сунгра vrml . document . write ( ) деб ёзиш урнига биз факат vr . write ( ) деб ёзамиз. Буни тамомлагандан сунг биз vrml тилида оддий кулланмаларни ёзишимиз мумкин. Биз бу ерда vrml сахнасининг элементарини тавсифини келтириб утирмаймиз. Улар билан танишишни истовчилар учун интернетда бир неча яхши маълумот манбалари бор. Vrml тилида оддий матн куйидагича булади: Бу document . write буйруги ёрдамида экранга чикармокчи булган коднинг худди узи. Лекин оддий vrml файли билан юклаш мумкин булган имкониятни динамик тарзда сахна яратиш бемаъниликдир . КИСМ. ХОЛАТЛАР САТРИ САТР ХОЛАТИ ВА ТАЙМЕРЛАР. § Сатр холати (холатлар сатри) Java S да сиз томондан тузилган дастурлар холатлар сатрига ёзув ёзиш мумкин яъни у сизни браузерингиз дарчасини пастки кисмида туртбурчак 16 шаклида булади. Буни килиш учун сизга атиги window . status да керакли сатрни ёзишингиз етарлидир. Навбатдаги мисолда шундай иккита тугмача ташкил килинадики улар оркали сиз холат сатрига бирор бир матнни ёзишингиз ва мос холда сунгра уларни учриришингиз мумкин: Демак, биз иккита тугмадан иборат форма ташкил этамиз. Бу иккала тугмача хам statbar () функциясини чикаради. Ёзиш тугмачасидан чакурув куйидагича булади: statbar ‘салом! Бу холатлар сатри!’ Кавс ичига биз ‘салом! Бу холатлар сатри!’ деб ёздик. Ва бу statbar функциясига юборилалиган матннинг узидир. Уз навбатида statbar () функциясини кандай аникланганини куришингиз мумкин: Функция сахифасида txt сузи жойлаштирилган бу биз функцияга узатайтган сатр txt узгарувчисига узлаштиришини билдиради. Функцияга узгарувчилар кириртиш тез – тез кулланиладиган ва функцияга ихчамлик келтирадиган холатдир. Сиз функцияга бир неча аргументларни киритишингиз мумкин, факат уларни вергул билан ажратиш керак. Txt сатри window . status = txt буйруги оркали холатлар сатрига олиб борилади. Шунга мос холда матнни холатлар сатридан йукотиш window . status ёзувида буш сатрни узлаштириш оркали бажарилади. Холатлар сатрига матнни чикариш механизми мурожатлар билан ишлашда жуда кулай. Жорий мурожатнинг url ини экранга чикариш урнига, сиз оддийгина кейинги сахифада нима дейилишини суз билан тушинтиришингниз мумкин. Ушбу мисолдаги link – факатгина сичконча курсаткичини мурожат устига жойлаштиришни намоиш килади. onmouseover га нима учун true кийматни беришимиз керак деб сурашингиз мумкин. Аслини олганда бу шуни англатадики , браузер бундан кейин mouseover ходисасини ишлашнинг ш ахсий кодини бажармсалиги керак. Коидага кура браузер холатлар сатрида мос мурожатнинг url ини курсатади. 17 Агар биз true кийматини бермасак, у холда бизнинг код бажарилгандан дарров браузер уз усули буйича холатлар сатрига ёзади, яъни бизнинг матн шу ернинг узида учирилади ва укувчилар кура олмайди. Бу скриптда сиз яна бир нарсани куришингиз мумкин. Айрим холларда сизга куштирнок символларни чоп этиш керак булиб колади. Масалан биз dont click me матнини чоп этишимиз керак ва биз уни onmouseover ходисаларни ишлаш процедурасига берсак унда бирлик куштирноклар ишлатилади. Натижада биз dont … деб ёзсак, браузер апостров символарида адашади. Ушбу муоммани ечиш учун бизга факат куштирнок белгиси олдидан \ белгини куйиш етарли, бу жорий белги факат чоп этиш учун куйилганини билдиради (бу холат иккилик куштирноклар учун хам мумкин). § Таймерлар. Time out (ёки таймерлар) функцияси ёрдамида сиз компъютерни бир неча буйрукларини кандайдир вактгача бажарилишини дастурлаштиришингиз мумкин. Навбатдаги скриптда шундай тугмача намойиш килинганки, у тушаётган дарчани дарров эмас, балки 3 секунддан сунг бажаради: Бу ерда settimeout () window объектининг усуулларидан биридир. У вакт интервалини урнатади, мен уйлашимча бу кандай содир булишини англадингниз? Биринчи чакирув аргументи бу Java S коди булиб у берилган вактда бажарилувчи хиобланади. Бизнинг холатда у “ alert (‘вакт булди’)” га тенг. Илтимос шунга эътиборингизни каратингки Java S коди куштирнокка олиниши керак. 2 чи аргументда компьютерга ушбу код качон бажарилиши хабар килинади. Бунда биз вактни миллисекундларда курсатишимиз керак. (3000 миллисекунд = 3 секунд). § Прокрутка (Айлантириш). 18 Энди сиз кандай килиб холатлар сатрига ёзув ёзишни ва таймерлар билан кандай ишлашни билган вактингизда айлантиришни бошкаришни урганишга утсак хам булади. Сиз аллакачон матнли холатлар сатридан жойлаштиришни куриб олдингиз. Интернетда бу усулдан хамма жойда кулланилади. Энди биз асосий чизгичда кандай килиб айланишни дастурлаштиришни куриб чикамиз. Хамда бу чизгичнинг барча мумкин булган ижобий узгартиришларини куриб чикамиз. Югурувчи сатр яратиш деярли оддий. Келинг дастлаб кандай килиб холатлар сатрида жойлашувчи матн – югурувчи сатрни яратиш мумкинлиги хакида уйланиб оламиз. Эхтимол, биз олдин холатлар сатрига бирор бир матн ёзиб олишимиз керакдир. Кейин вакт утиши билан биз у ерга факат уни сал чапрокка суриб уша матнни узини ёзишимиз керак. Агар биз буни бир неча марта килсак, фойдаланувчида у югурувчи сатр билан иш олиб бораётгандай таасурот колдиради. Лекин, биз шуни эсда тутишимиз керакки хар сафар холатлар сатрида матннинг кайси кисми куринишини хисоблаб боришимиз керак. (Коида буйича матннинг катталиги холатлар сатрини улчамини ошириб юборади). Бу тугмача дарча очади ва айлантиришга мисол келтиради. Scroll () Функциясининг куп кисми матнни фойдаланувчи курадиган кисмини ажратиб олишдан иборат. Биз бу кодни кенг равишда тушунтириб утирмаймиз, факатгина сиз умуман бу айлантириш кандай жойлаштирилганини тушунсангиз булди. Ушбу жараённи ишга тушуриш учун биз < body > тегидан ёзилган onload ходисаларини ишлаш процедурасидан фойдаланамиз. Яъни scroll () функцияси HTML сахифа юклангандан дарров чакирилади. Onload процедураси воситасида scroll () функциси чакирилади. Scroll () функциясида биз биринчи булиб таймерни урнатамиз. Бу билан биз scroll () функцияси хар 300 секундда чикарилишини кафолатлаймиз. Бунда матн бир кадамга утказилади ва бошка таймер юборилади ва шу тарика у бетухтов давом этади. 19 JAVASCRIPT ДА ФОРМАЛАР. Формалар интернетда кенг ишлатилади. Формага киритилгпн маълумотлар тез – тез кайта серверга юборилади ёки бирор бир адресга элекетрон почта оркали жунатилади. Муаммо шундай, фойдаланувчи томонидан киритилган маълумот тугрилигига ишониш. Уни интернетга юборишдан олдин Java S тили ёрдамида осон текшириш мумкин. Олдин бу формани текшириш кандай булишини курсатмокчи эдик, кейин эса интернетга маълумот жунатишнинг кандай имкониятлари борлигини курсатамиз. Дастлаб биз оддий скрипт яратайлик. Айтайлик html -сахифа 2 та матн киритувчи элементга эга булсин. Улардан бирига фойдаланувчи уз исмини, 2 – сига электрон почта манзилини киритсин. Сиз у ерга бирор бир маълумотни киритиб тугмани босиб куринг. Агар сиз у ерга хеч нарса киритмаган булсангиз хатолик юз бериш хакида маълумот оласиз. 1 – элементдаги исталган маълумот тугрилик жихатдан текширилади. Албатта агар фойдаланувчи бошка номни киритган булса у буларни кафолатламайди. Браузер хатоларни сонларга хам каршилик курсатмайди. Масалан, сиз ’17’ деб киритсангиз у холда сиз ‘Салом 17’ деган саломни оласиз. Демак, бу текшириш идеал була олмайди. Форманинг 2 чи элементи бир мунча мураккабирокдир. Унга оддий сатр киргизиб, масалан исмингизни. Сиз унга @ ни ёзмагунча бу элемент иш бажармайди. @ белгини мавжудлиги билан фойдаланувчи электрон почта манзилини тугри киритган була олади. Гарчи маъносиз булсада биргина @ белгиниг узи хам бу шартга тугри келади.интернетдаги хар бир электрон почта манзилида @ белги катнашади. Шундай экан бу белгига текшириш бу ерда жуда уринли. Скрипт бу 2 та элемент билан кандай ишланди ва унда текшириш кай куринишда булади. Бу куйидагича олиб борилади : 20 Дастлаб </body> булимидаги кодни куриб чикамиз. Биз бу ерда факат 2 та тугмачани матн киритиш учун яратамиз. Бу тугмачалар test 1(…) ва test 2 (…) функцияларини кай бири босилганини караб чикаришда. Функцияга аргумент сифатида this . form комбинациясини берамиз, чунки у кийинчилик бизга уша функцияга ва худди уша бизга керак элементга мурожат килишга рухсат беради. Test 1 ( form ) функция берилган сатр бушлигини текширади. If ( form . text 1. value = = “”)… оркали бажарилади. Бу ерда узгарувчи ‘ form ’ га функция чакирилганда ‘ this form ’ дан олинган киймат берилади. Биз элементга киритилаётган сатрни form text ига value сузини кушиб аниклаб олишимиз мумкин. Сатр буш эмаслигига ишониш учун уни “ ” билан таккослаб курамиз. Агар киритилган сатр “ ” билан мос келса у холда сатрга хеч нима киритилмаган булади ва булардан фойдаланувчи хато хакида хабар кабул килади. Агар бирор бир нарса киритилган булса фойдаланувчи “ ok ” тасдигини олади. Кейинги муаммо шундан иборатки фойдаланувчи форма майдонига пробел киритиш мумкин ва бу тугри маълумот сифатида кабул килинади! Агар сида бу пробелларни олиб ташлаш истаги булса у холда албатта унга бу имкониятни текширишни кушишингиз мумкин. Энди test 2( form ) функциясини курамиз. Бу ерда яна киритилган сатр бушлик билан текширилади. (укувчи томонидан киритилган маълумот хакикатдан бор йуклигига ишониш учун). Лекин биз if буйругига яна нимадир кушдик. // белгилар йигиндиси “ ok ” буйруги деб аталади. If буйркги биринчи ва иккинчи таккослаш нима билан тугалланишини текширади. Агар булардан биттаси бажарилса if буйруги true кийматига эришади ва кейинги скрипт бажарилади. Суз билан тушунтирганда келтирилган сатр ёки буш ёки унда @ белгиси йуклиги хакида хатолик деган хабар оласиз. ( if буйругидаги 2 чи оператор киритилган сатр @ белгисига эга эканлигини текширади). Маълум бир белгилар борлигини текшириш. Айрим холларда формага киритилаётганлар факат айрим белгилар ёки сонлардан иборат булиши яъни маълумотни чегаралаш керак булиб колади. 21 Келтирилган маълумот факат сонлардан иборат булган телефон номерлари хакида эслашимиз кифоя. Бунда сизга келтирилган маълумотлар сонми йукми, шуни текшириш керак булади. Бу холатда мураккаблик шундан иборатки купчилик одамлар телефон номерларига яна хар хил белгилар, масалан, 01234-5678, 01234/56789 ёки 1234_56789 кушишлари мумкин. Фойдаланувчидан телефон номерларида бундай белгиларни фойдаланишини ман килиб булмайди. Шу боис биз скриптимизни сонлар ва бир неча белгиларни текширувчи процедурани кушишимиз керак. Скриптнинг дастлабки коди куйидагича: Формага киритилган маълумотни такдим этиш. Формага киритилган маълумотларни беришнинг кандай имкониятлари мавжуд? Форма маълумотларини беришнинг энг оддий усули бу электрон почта оркали узатишдир. ( бу усулни кенгрок урганамиз ). Агар сиз формага киритилаётган маълумотларга сервер куз-кулок булиб туришини хохласангиз у холда сиз CGI интерфейсидан фойдаланишингиз керак. У сизга маълумотларни автоматик равишда кайта номлашга имкон беради. Масалан, сервер мижозлардан айримлари кира олиш имконияти булган маълумотлар базасини яратиш мумкин. Бошка мисол- yahoo сингари кидириш сахифалари. Одатда унда шахсий маълумотлар базасидан яратилган суровни кидириш учун форма ташкил килинган. Натижада фойдаланувчи мос тугмачани босишдан олдинрок жавобни олади. Унга токи жорий серверни куллаб- кувватловчи одамлар уларга курсатилган маълумотларни укиш ва кидиришни кутиб утиришга хожат колмайди.Буларнинг барчасини сервернинг узи бажаради. Java S бундай имкониятларни бажаришга йул куймайди. Java S маълумотларни сервердаги ьирор бир файлга ёзиб олиш имконияти булмагани сабабли у ёрдамида укув такризлари китобини яратаолмайсиз. Буни факат CGI интерфейси оркали бажариш мумкин. 22 Албатта, сиз фойдаланувчилар электрон почта оркали юборган маълумотлар учун такриз китоби яратишингиз мумкин. Лекин бу холда сиз электрон почта оркали олинган такризларни кулда битта файлга киритишингиз керак. Агар сиз хар куни 1000 такриз олишни назарда тутмасангиз шундай килишингиз мумкин. Шунга мос скрипт оддий HTML матндан иборат булади ва хеч кандай Java S дастурлаштириш керак эмас. Албатта битта холни хисобга олмаганда, яъни агар сизга маълумотларни юборишдан олдин текшириш керак булса бу ерда хакикатан хам Java S керак булади. Факат биз хамма ерда хам ишламайдиган mailto буйругини киритамиз, у факат Microsoft Explorer 3.0 да куллаб-кувватланмайди. Enctype =” text / plane ” параметри матнни худди узини хеч кодланган кисмларсиз юбориш учун ишлатилади. Бу сезиларли даражада бундай почтани укишни соддалаштиради. Агар сиз формани сетга узатилмасдан текширишни истасангиз , у холда onSubmit ходисалар ишловчи дастурдан фойдаланишингиз мумкин . Сиз бу дастур учун < form > тегида чакирик жойлаштиришингиз мумкин . Масалан : Агар шу тарика тузилган формада нотугри маълумотлар киритилган булса бу форма интернетга юборилмайди. § Форманинг аник элементини белгилаш. Focus () усули ёрдамида формани янада самимий килиш мумкин. Демак, сиз кайси элемент биринчи булиб белгиланишини танлашингиз мумкин. Демак, сиз кайси элемент биринчи булиб белгиланишини танлашингиз мумкин. Ёки браузерга нотугри маълумотлар киритилган фораматни белгилашни буюришингиз мумкин. Яъни бразернинг узи курсорни сиз курсатган формат элементига урнатади ва фойдаланувчига бирор нарса курсатишда форматни чикаришга тугри келмайди. Буни куйидаги скрипт формати оркали килиш мумкин: 23 Function setfocus ( ) { Docuent . first . text 1. focus ( ); } бу ёзув мен курсатиб утган критилувчи матннинг биринчи элементини бегилайди. Сиз барча формаланинг жисмларни курсатишингиз керак, жорий холда у first деб аталади ва форманинг элементи номи text 1. Агар сиз сахифа юкланганда жорий элемент белгиланишини истасангиз бунинг учун сиз < body > тэгини onload атрибути билан тулдиришингиз мумкин. Бу шундай куринишда булади: < body onload = “ setfocus ( )”> Яна бир мисол билан тулдиришингизга тугри келади: Function setfocus( ) { Document.first.text1.focus( ); Document.first.text1.select( ); } Яна бир кдни куринг : Бунда факат элемент белгиланмайди, балки ундаги матн хам белгиланади. IMAGE ОБЪЕКТИ. Web сахифада тасвир. Энди Java S нинг 1.1 версиясидан бошлаб ишлаш мумкин булган Image объектини куриб чикамиз. (яъни netscape navigator 3.0 билан). Image объекти ёрдамида сиз Web сахифангизга график образлар билан узгартиришлар киритишингиз мумкин. Бу бизга кисман мультипликатция яратиш имконини беради. Шуни эслатамизки, фойдаланувчилар браузерларнинг эски версиялари оркали ушбу кисмда келтирилган скриптларда фойдалана олмайди. ( Netscape Navigator ёки Internet Exproler 3.0 каби). Ёки яхши холатда хам улардан тула эффект олиб булмайди. 24 Келинг дастлаб Java S да Web сахифага тасвирни кандай килиб жойлаштиришни куриб чикамиз. Биз кураётган тилда тасвир массив куринишда берилади. Массив бу image деб номланади ва document объектининг асосларидан бири хисобланади. Web сахифадаги хар бир тасвир тартиб ракамига эга: 1-тасвир 0 ракамини, 2-эса 1 ва х к каби ракамларни олади. Шу тарика 1-тасвирга биз document . image [0] деб мурожат килишимиз мумкин. Html документдаги хар бир тасвир Image объекти узининг аник бир хусусиятига эгаки, кайсики Java S тилидан унга мурожат килиш мумкин. Масалан, сиз унинг хусусиятлари дан width ва height лар оркали тасвирнинг улчамини аниклашингиз мумкин. Яъни document . image [0]. width ёзув оркали Web сахифадаги тасвирнинг кенглигини аниклашингиз мумкин(нукталарда). Бахтга карши, барча тасвирнинг индексларини узгартириб туриш кийин кечади, айникса агар бир сахифангизда улар етарли куп булса. Ушбу муаммо тасвирларга узининг шахсий номини белгилаш оркали хам булади. Демак, агар сиз тасвирни ушбу тег < img src = “ imj . gif ” name = “ myimage ” width = “”100” height =”100”> оркали киритсангиз у холда сиз унга document . myimage ёки document . images [“ myimage ”] деб ёзиш билан мурожат килишингиз мумкин. Янги тасвирлврни юклаш. Албатта бу биз хохлаган нарса булмаса хам Web сахифада тасвир улчамини кандай олишни билиб куйган мумкин. Бу Web сахифада тасвирлар алмашиниши жорий килишни истаймиз ва бунинг учун бизга src атрибути керак булади. < img > тегидаги холатдаги каби src атрибути келтирилган тасвирнинг манзилини саклайди. Энди сиз Java S нинг 1.1 версиясида аллакачон Web сахифага юкланган тасвирга янги адрес бериш имкониятига эгасиз. Ва натижада тасвир Web сахифага эски адресни янги адрес билан алмаштирган холда юкланади. Мисол учун ушбу ёзувни курамиз: <img src = “img1.gif” name = “Myimg” width = 100 height = 100> 25 Бу ерда img1.gif тасвир юкланади ва Myimg номини олади. Навбатдаги сатрда олдинги img1.gif тасвир аллакачон яниг img2.gif билан алмашади: Documunt.MyImages.src = “img2.gif”; Бунда янги тасвир хар доим эски тасвир улчамини олади. Ва сиз энди унинг улчамини узлаштираолмайсиз. Тасвирларни огохлантирувчи юкланиши. Бундай харакатларимизнинг камчиликларидан бири булиб, src га янги адрес берилгандан сунг унга мос тасвир юкланиш жараёни бошланиши хисобланади. Ва бу олдиндан килинмаганлиги сабабли янги тасвир интернет оркали узатилгунча ва уз жойига боргунча бир неча вакт утади. Айрим холларда бу мумкин, лекин бундай тез – тез тухталишларга куниш мумукин эмас. Бу холат билан биз нима килишимиз керак? Албатта, ба масаланинг ечими булиб, тасвирларни огохлантирувчи юкланишдан фойдаланиш хисобланади. Бунинг учун бу янги Image объектини яратишимиз керак. Навбатдаги сатрларни куриб чикамиз: HiddenImg = new Images (); HiddenImg . sec = “ img 3. gif ”; 1 – сатрда янги Image объекти яратилади. 2 – сатрда кейинчалик hiddenimg объекти ёрдамида номаён буладиган тасвир адреси курсатилади. Куриб утганимиздек, src атрибутидаги янги адрес браузерини ушбу берилган адресли тасвирни юклашга мажбур килади. Шунинг учун, бизнинг мисолимиздаги 2-сатр бажарилганда img 2. gif тасвир юклана бошлайди. Лекин HiddenImg нинг уз номидан келиб чиккан холда (“яширин тасвир”) браузер юклашни тамом килгандан сунг экранда тасвир пайдо булмайди. У факат компьютернинг хотирасида келгуси фойдаланиш учун сакланган булади. Экранга тасвирни чикариш учун биз document.myImage.src = hiddenImg.src; сатридан фойдаланамиз: 26 лекин энди тасвир хотирадан дарров олинади ва экранда намоён булади. Шу тарика биз тасвирни огохлантирувчи юкланишни бошкардик. Сиз аник бир ходисага реакция сифатида тасвирларнинг алмашинишидан фойдаланган холда ажойиб натижа олишингиз мумкин. Масалан, сичконча курсаткичи сахифанинг аник бир жойига борганда тасвирни алмаштиришингиз мумкин. Навбвтдаги мисолда оддий килиб сичконча курсаткичи тасвирга жойлаштирилганида текшириб куринг ( умуман бунда сиз агар браузерингиз факатгина Java S 1.0 ни к-кув.диган булса, хатолар хакида хабар оласиз, бундан кутилишни сунгрок куриб чикамиз ).  Укувчи Java S 1.1 к-кув.майдиган браузердан фойдаланяпти  2 чи тасвир юклатилмаган  Бунинг учун биз Web сахифадаги хар бир тасвир учун янги командалар ёзишимиз керак  Биз шундай скриптга эга булишни хохлар эдикки, кайсики уни Web сахифаларнинг купчилигида яна ва яна ишлатиш имкони булса. Энди биз ушбу муоммаларни ечувчи скриптни тула вариантини куриб чикамиз. Бу скрипт узун булганига карамасдан сиз уни бир ёзиб олишингиз билан ушбу муоммалар хакида кайгурмайсиз. Ушбу скрипт узини ихчамлигини саклаб колиши учун 2 та шартни куриб чикиш керак: Берилган скрипт барча тасвирларни pics массивига жойлаштиради. Ушбу иассив энг дастлаб чакирилган preload ( ) функцияси ёрдамида яратилади . Preload ( ) функциясини чакируви оддийгина куйидаги куринишда булади. Бу шуни англатадики , бу скрипт сервердан 2 та img1.gif ва img2.gif тасвирларини юклаши керак. Улардан биринчисини сичконча курсаткичи тасвир майдонига тушмаганда хосил буладиган тасвирдир. Фойдаланувчи сичконча курсаткичини тасвирга жойлаштирса, у холда 2 чи тасвир пайдо булади. Preload ( ) функциясини чакириш мабойнида “ link 1 ” сузини 1 чи аргумент сифатида курсатамиз ва Web сахифадаги Image объектига олдиндан юклатилган 2 та тасвирни бериб куямиз. Агар сиз бизнинг мисолимизда < 27 body > булимини куриб чиксангиз уша link 1 ном билан аталган тасвирни топасиз. Биз тасвирни Web -сахифада хосил килиш учун скриптни ёзиб юрмасдан унинг тартиб ракамидан эмас балки унинг номидан фойдаланамиз. On ( ) ва off ( ) функцияларни иккаласи хам onMouseOver ва onMouseOut ходисаларни кайта ишлаш программаси воситасида чакирилади. Image элементининг узи MouseOver ва MouseOut ходисаларини бажариб билмагани учун биз бу тасвирларни мурожаат килишимиз керак. On ( ) функцияси курсатилган тасвирдан бошкасини дастлабки холатига келтиришни куришимиз мумкин. Акс холда дарров бир неча тасвир белгиланган булиб колади, шунинг учун буни килиш жуда зарур. ( Гап шундаки агарда фойдаланувчи дархол дарча чегарасидан курсаткични тасвирга жойлаштирса MouseOut ходисаси регистрация килинмайди ). КИСМ.КАТЛАМЛАР. Катлам – бу Netscape Navigator 4.0 браузерининг ажойиб янги имкрниятларидан биридир . У Web – сахифаларни тасвир каби объектларини аник жойлаштиришга имкон яратади. Бундан ташкари сиз HTML сахифангизга турли объектларни куйишингиз мумкин. Хаттоки объектларни куринмас килишингиз мумкин. Java S тилида ________ ни осон бошкаришингиз мумкин. Жорий вактда ________ дан сиз факат Netscape Navigator 4.0 фойдаланишингиз мумкин. Аслини олганда катлам деганда нимани тушунамиз? Буни тушунтириш осон ва буни оддий мисолда, бир неча когоз варагини олиб тушунтирамиз. Бир варакка матн ёзинг. Башкасига тасвир чизинг ва хакоза. Энди бу варакларни стол устига куйинг. Фараз киламиз хар бир варак бирор бир катлам . у хар хил объектларни бизнинг мисолимизда матн ва тасвирни ичига олиши мумкин. Энди тасвирли варакни олиб стол буйлаб харакатлантирамиз. Диккат билан тасвирни варак изидан харакатланишини кузатинг. Агар биз варакни унгга бурсак тасвир хам унгга 28 бурилади! Катламлар узида турли объектларни саклаши мумкин, масалан тасвирлар, формалар, матнлар 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 параметрлари ёрдамида) у холда жимлик холатига кура у дарчанинг юкори чап бурчакни эгаллайди. 29 < ilayer > тег ёрдамида Келинг энди оддий мисолдан бошдаймиз. Биз 2 та кават хосил килмокчимиз. Улардан биринчисига тасвир, иккинчисига эса жойлаймиз. Бу килмокчи булган нарса ушбу матнни жорий тасвир устида курсатиш. Куриб турибмизки <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 > деб кават хосил килсак у холда биз унга кейинчалик document . layers [“ mylayer ”] конструкцияси оркали рухсат олишимиз мумкин. Бу каватларга рухсатни биз бутун сонли индекс оркали олишимиз мумкин. Демак, энг пастки каватга рухсат document . layers [0] деб ёзиш билан олинади. Шунга эътибор каратингки индекс бу z - index параметр билан бир хил нарса эмас. Агар мисол учун сиз layer 1 ва layer 2 деб номланувчи z - index номерлари 17 ва 100 булган каторларга эга буламиз. У холда сиз уларга 30 document . layers [17] ва document . layers [100] деб эмас балки document . layers [0] ва document . layers [1] оркали рухсат олишингиз мумкин. Каватлар Java S скриптлари ёрдамида узгартириб булувчи бир неча хусусиятларга эга. Навбатдаги мисолда 1 – каватни бекитувчи ёки аксинчахосил килувчи тугмача ташкил килинган. ( Netscape Novigator +4 ёки ундан юкори версиялари талаб килинади). Берилган тугмача ShowHide ( ) функциясини чикаради . Бу функция layer (mylayer) объектининг куринувчанлик хусусиятига рухсат олиш масаласи ечилган . Document.layers[“mylayer”].visibility параметрига “show” ёки “hide” каватини бериб сиз ушбу каватни курсатиш ёки беркитиш имкониятига эга буласиз . Show ва hide бу киркиб олинган калит сузлар эмас балки сатр хисобланиб , сиз Document.layers[“mylayer”].visibility = show деб ёза олмайсиз . § Каватларни жойлаштириш . Left ва top хусусиятлар берилган каватнинг холатини белгилайди . Сиз уларга янги каватлар бериб уни узгартиришингиз мумкин. Масалан навбатдаги сатрда каватнинг горизантал холати 200 нуктада бериляпти: Document . layers [“ mylayer 2”]. left = 200; Энди биз каватларни аралаштириш дастурига утамиз, у браузер дарчасида кандайдир айланишлар яратади. Скрипт куйидаги куринишда : Биз mylayer2 номли кават яратдик. <body> тегида биз onload процедурасини ишлатганимизни куриш мумкин . Бизга сахифа юклатилгандан дарров кават айланишини бошлаш зарур . Onload ходисаларини кайта ишлаш процедурасида биз setInterval ( ) функциясидан фойдаланамиз . Бу Java S версиясининг янги усулларидан биридир . Ундан бирор бир функцияни яна ва кайта яна аник бир интервалида чакиришда фойдаланилади . Олдин биз бунинг учун setTimeOut вакт функциясидан фойдаланганмиз . SetInterval 31 функцияси хам худди шундай ишлайди , бирок сиз уни бир марта чакирсангиз етарли булади . SetInterval функциясида биз move ( ) функциясини хар бир 20 миллисекунддан чакириш имконига эгамиз . Move ( ) функцияси эса уз навбатида хар 20 миллисекунддан каватни янги сохага алмаштиради . Бу функцияни яна ва яна чакиришимиз натижасида матнимизни тез харакатланишини курамиз. Move ( ) функциясида киладиган нарсамиз шуки кават учун янги координата хисоблаш ва уни ёзиш: document . layers [“ mylayer 2”]. left = pos . 10 КИСМ. КАВАТЛАР 2. Биз аллакачон каватлар янги технологиясининг асосий тушунчаларига эга булдик. Бу кисмда куйидаги мавзуларни куриб чикамиз.  Каватдан киркиб олиш.  Куйилган каватлар.  Ялтирок каватлар билан турли хил самаралар олиш. Каватлардан киркиб олиш. Каватнинг кандайдир кисми (туртбурчак) куринадиган килиш мумкин. Бундай усул киркиб олиш дейилади. Масалан, HTML сахифасида куйидаги киркиб олиш функциясини беришимиз мумкин: <ilayer left = 0 top = 0 clip = “20,50,110,120”> <img scr = “daviner.jpg” width = 209 height = 264> </ilayer> Берилган тасвир фрагменти 90х70 улчамга эга. Clip атрибутидаги 1 чи 2 та киймат киркилаётган кисмнинг чапдан юкори бурчакни курсатада. Навбатдаги 2 та киймат пастки унг бурчакни курсатади. Java S тили ёрдамида киркилган кисмни бошкариб бундан хам кизикарли натижаларга эришиш 32 мумкин. Аникрок айтганда Layer объектини хусусиятлари булган clip . left , clip . top , clip . right ва clip . button ларни узгартиришингиз мумкин. Агарда бу хусусиятларга янги киймат берсангиз худди шу вактнинг узида бу узгариш мос равишда кабул килинади. Куйидаги мисолда тасвирни киркиб олинган кисмини параметрлари динамик равишда узгариб туради ва фойдаланувчида тасвир аста-секин “усаётган” дай таасурот колади: < body > тегида тавсифланган тугмача start ( ) функциясини чакиради. Дастлаб биз ишни тасвирни кайсидир нуктасидан бошлашни аниклаймиз . Бу нуктанинг х ва у координаталарини midde x ва midde y узгарувчиларга юклаймиз. Бундан сунг биз тасвирни киркилган кисмига middeleX, middleY ва pos узгарувчиларига боглик равишда улчам берувчи show ( ) функциясини чикарамиз . Хар сафар show ( ) функцияси чакирилганда pos функцияси киймати автоматик равишда ошиб боради . Show ( ) функцияси охирида setTimeOut ( ) чакириги ёрдамида таймер урнатамиз ва бунда бу функция ва яна чакирилади . Бу жараён качонки бу киркилган кисм бутун булиб курингунча давом этади. Шу ерда Start ( ) функцияси бошида тасвирнинг улчамини олганимизни эътиборга олиб утиш керак. Var width = document.layers[“imglayer”].document.dowiuci.width; Var height = document.layers[“imglayer”].document.dowiuci.height; Document.layers[“imglayer”] конструкцияси ёрдамида бу imglayer номли каватга мурожат килишимиз мумкин . Бирок нима учун document.layers[“imglayer”] дан сунг document деб ёзилади ? Гап шундаки , хар бир кават узининг HTML сахифасига яъни хар бир кават document объектига эга . Imglayer каватдаги тасвирга рухсат олиш учун биз Варакнинг колган барча майдони тоза ушбу document объектига рухсат олишимиз керак . Юкорида келтирилган мисолимизда бундай тасвир dovinci номига эга эди . булиши керак . § Куриб утганимиздек, кават узида бир неча объектларни мужассамлаштириши мумкин. Улар хаттоки бошка каватларни уз ичига олиши мумкин. Хакикатан 33 эса куйилган каватлардан фойдаланишнинг бир неча сабаблари бор. Бир неча куйилган каватларни номоён килувчи мисолларни куриб чикамиз. Биринчи мисолда иккита бошка ( layer 1 ва layer 2) кават куйилган кават ( parentlayer деб номланади) ишлатилади. Бу биринчи кават Бу иккинчи кават Бу асосий (она) кават Move/stopparent Move/stoplayer Move/stoplayer Сахифни очганимиздан сунг биз 3 та тугмача курамиз. Бу тугмачалар каватлар харакатини бошлаши ёки тухташи мумкин. document.layers [ “ parentlayer ”].layers[ “ layer 2 ”].top = 10 + pos 2 ; Куйилган каватларга рухсат олиш учун layer 1 ва layer 2 каватлар parentlayer ичида жойлашганлиги сабабли сизга document.layers [ “layer 1”] ёки document.layers[ “ layer 2 ”] деб ёзиш етарли булмайди. Энди кандай килиб каватдан куринадиган майдонни куриб чикамиз. Навбвтдаги мисолда тасвирни киркиш ва жойлаштириш механизмидан фойдаланилган. Ва яна куйилган каватга мурожатларни куриш мумкин: document.layers [ “ clippinglayer ”].layers[ “ imglayer ”].top = 100 + pos ; скриптнинг колган элементлари билан аллакачон таниш булишингиз керак. 11 Кисм javascript 1.2 да ходисалар модеми. Янги ходисалар Javas 1.2 куйидаги ходисаларни кайта ишлашни куллаб куватлайди: Abort Dblclick Keydown Mousedown Mouseup Select Blur DragDrob KeyPress Mousemove Move Submit Click Error Keyup Mouseout Reset Unload Change Fox Load Mouseover Resize Жадвални урганиш давомида куришимиз мумкинки бу янги ходисаларнинг бир нечтаси руёбга чикарилган. Биз бу кисмда уларнинг бир нечтасини куриб чикамиз. Датлаб resize ходисасини курайлик. Ушбу ходиса ёрдамида дарча 34 улчами укувчи томонидан узгартирилганини аниклашингиз мумкин. Куйидаги скрипт буни кандай килишни курсатади: window . onresize = message Сатрида биз уша ходиса процедурасини берамиз. Аникрок килиб айтганда фойдаланувчи дарча улчамини узгартирганидан дарров ушбу message ( ) функцичси чакирилади. Эхтимол сиз ходисаларни кайта ишловчи программаларни бундай тарзда бериш билан топип билмасангиз керак. Бирок бу ерда хеч кандай янгилик йук. Масалан, агар сизда button объекти бор булса, бу ходисани кайта ишлаш процедурасини куйидаги тарзда аниклаш мумкин. Уйлаш мумкинки 2 чи вариант бироз мураккаброк. Лекин нима учун биз айнан ундан 1 чи скриптда фойдаландик? Сабаби шундаки биз window объектини бирор бир аник тег ёрдамида аниклай олмаймиз ва шунинг учун биз 2 чи вариантни куллашимизга тугри келади. 2 та мухим эслатма: 1 – дан window . onResize деб ёзмаслигингиз керак балки барчасини катта харфлар билан ёзиш керак. Агар сиз window . onResize = message ( ) деб ёзсангиз браузер message ( ) ни функция чикарувчи деб кабул килади. Лекин бизнинг холатда биз функцияни тугридан – тугри чикаришни хохлаймиз, факат ходисаларни кайта ишловчини аниклаб куймокчимиз. Event объекти. Java S 1.2 тилига янги event объекти кушилган. У узида бирор ходисани ёзиб борувчи хусусиятга эга. Хар сафар бирор ходиса юз берганда event объекти мос кайта ишловчи дастурга юборилади. Навбатдаги мисолда экранга бирор бир тасвир чикарилади. Сиз унинг каергадир сичконча курсаткичи билан туртишингиз мумкин. Натижада экранда сичконча жорий вактда турган нуктасининг координаталари курсатилган хабар чикади. куриб турганингиздай JavaS нинг олдинги версияларида бажарганимиздагидек <a> тэгда onclick ходисани кайта ишловчи 35 программани жойлаштирдик . Бу ерда янги булиб event.x ва event.y лар билан яратилган хабар дарчаси хисобланади . Худди шунинг узи бизга сичконча координаталарни аниклаб берувчи бизга керак булган event объектида . Бундан ташкари мен барча буйрукларни <layer> тэгига жойлаштирдим . Шу туфайли биз жорий каватга нисбатан яъни бизнинг холатда тасвирнинг узига нисбатан координаталар хакидаги хабарни кобул киламиз . Акс холда биз браузер дарчасига нисбатан координаталар олган булар эдик. ( return false инструкцияси бу ерда браузер жорий мурожатни узокрок кайта ишлаш учун фойдаланилган). Event объекти куйидаги хусусиятларга эга: Data – DragDrop ходисаси юз берганда тухтатилган объектларнинг URL адреслар массиви. Layer x Каватга нисбатан курсаткичнинг горизонтал холати (нукталарда) resize ходисаси билан биргаликда бу хусусият браузер дарчаси кенглигини билдиради. Layer y Каватга нисбатан курсаткичнинг вертикал холати (нукталарда) resize ходисаси билан биргаликда бу хусусият браузер дарчаси баландлигини билдиради. Modifiers Модификатор калитини берувчи сатр – alt _ Mask , control _ mask , meta _ mask ёки saift _ mask . Page x Браузур дарчасига нисбатан курсаткичнинг горизантал холати ( нукталарда ) Page y Браузур дарчасига нисбатан курсаткичнинг вертикал холати (нукталарда) Screen x Экранга нисбатан курсаткичнинг горизантал холати. (нукталарда) Screen у Экранга нисбатан курсаткичнинг вертикал холати. (нукталарда) Target Дастлаб ходиса юборилган объектни намоён килувчи сатр. Type Ходиса тилини курсатувчи сатр. Which Сичконча ёки тугмачанинг ASCII киймати. Х layer x синоними 36 У layer у синоними § Ходисани камраб олиш. Java S тилининг асосий хусусиятларидан бири ходисани камраб олишдир. Масалан, агар кимдир тугмачани туртса у холда шу тугмачага мос onclick ходисасини ишловчи дастур чакирилади. Сиз ходисаларни ишлаш ёрдамида дарча, документ ёки каватга мос курсатилган тугмача объктнинг ходисасини ишловчи чакирилишига кадар ходисаларни ишлаш ва камраб олишга эришасиз. Худди шундай сизнинг дарчангиз, документингиз ёки каватингиз объекти узининг оддий адресини топгунга кадар ходиса хакида сигнални ишлаш мумкин. Бу нимага кераклигини куйидаги мисол ёрдамида курайик: Куриб турганингиздай бу < a > тегда ходисани ишловчи дастурни курсатмаймиз. Бунинг урнига Window . Capture Events ( Event . click ); Сатрни window объектини click ходисаси камраб олиши учун ёзилади. Одатда window объекти click ходисаси билан ишламайди. Бирок караб олиб у кайтадан уни window объкутига йуллайди. Шуни эътиборга олиш керакки Event . click даги click фрагменти бош харфлар билан ёзилиши керак. Агар сиз бир неча ходисаларни камрашини истасангиз у холда сизга уларни бир биридан / белгилари оркали ажратишингиз керак булади. Масалан: Window . Capture Events ( Event . click / Event . move ); Haudle ( ) функциясида ходисани ишлаш дастури сифатида return true дан фойдаланамиз. Бу хакикатдан шуни англатадики, haudle ( ) функцияси тамом булгандан сунг браузер мурожатнинг узини ишлаб чикиш керак. Агар сиз унинг урнинга return false ёзсангиз шу ернинг узида барчаси тамом булади. Агар энди сиз < a > теги onclick ходисасини ишловчи дастур берсангиз, у холда ушбу ходисани руй беришида жорий дастур чикарилмаслигини тушуниб етасиз. Хайрон коларли жойи йукки, window объекти link объектига 37 эга булгунга кадар, у ходиса хакида сигнални кулга киритади. Албатта агар сиз haudle ( ) функцисини куйидагича аниклаймиз: Function haudle ( l ) { Alert (“ window объекти ушбу ходисани кулга киритади”); Window.route Event (l); Return true; } R узгарувчиси Event объекти хисобланади. Бундан ташкари сиз ихтиёрий объектга бевосита сигнал юборишингиз мумукин. Бунинг учун сиз haudle Event ( ) усулидан фойдаланишимиз мумкин. Бу куйидаги куринишда булади. Бу куйидагича куринишда булади : Агар сиз хеч бир мурожатни туртмаган булсангиз хам click ходисасидаги силжаллар 2 чи мурожатни ишлаш учун юборилади . Навбатдаги скрипт тугмача босилишидаги силжалларни сизнинг скриптингиз кандай силжишини намоён килади : 12 Кисм. Drag ва Drop. § Drag ва Drop нима . Java S 1.2 ни ходисаларнинг янги модели ва каватлар механизми ёрдамида Web сахифамизда drag ва drop схемасини ишлатиш имкониятига эга буламиз . Drag ва drop нима ? Масалан , бир канча ОС лар ( windows 95/NT ёки Mac OS) бизга файлларни ахлат кутисига олиб борган холда тозалашга рухсат беради . Бошкача килиб айтганда сиз файл тасвирига сичконча тугмасини туртасиз ва уни ахлат кутисига олиб борасиз – drag ва сунг уни у ерга ташлайсиз – drop. Биз бу ерда амалга оширмокчи булган drag ва drop механизми Web сахифада чегараланади . Шунинг учун сиз HTML c ахифадаги объектларни компьютерингизнинг каттик диски ёки бошка хусусий харакатларга келтириш учун бу ерда келтирилган хаддан фойдалана олмайсиз . JavaScript + тили тугридан тугри Drag ва Drop механизмини куллаб кувватламайди. Бу бизда image объекти учун drageable ёки бирор бир хусусиятни белгилаш имкони йук деган маънони беради . Шунинг учун биз бунинг учун зарур 38 кодни узимиз ёзишимиз керак. Лекин бу унчалик кийин эмас. Демак бизга нима керак? Бизга икки нарса керак. Биринчидан биз сичконча билан боглик аник ходисани аниклашимиз керак, яъни кандай тушунишимиз керак. Сунгра биз экран буйлаб объектларни кандай килиб утказишни уйлашимиз керак. Албатта биз объектларни яратиш ва уларни экран буйлаб жойлаштиришни кават сингари янги имкониятдан фойдаланган холда бажарамиз. Хар бир объект узининг кавати билан намоён булади. JavaScript 1.2 да сичконча билан ишлашдаги ходисалар. Биз сичконча билан ишлашда юз берадиган ходисалардан кайси бирини ишлатишимиз керак? Бизда MouseDrag каби ходиса йук лекин бу уни Mouse Dam , Mouse Move ва Mouse up ходисаларни кайта ишлаб эришишимиз мумкин. Javas ни 1.2 версиясида ходисаларниниг янги модулидан фойдаланилади . Биз буларсиз ушбу масалани ечиб билмайбиз . Келинг бу янги моделнинг бир канча мухим кисмига яна бир куриб чикайлик. Фойдаланувчи браузер дарчасининг бирор бир жойида сичконча тугмасини босади. Бизнинг скрипт бу ходиса кайси объект (яъни кават) билан богликлигини ва бу ходисани бажариш керак.Бизга ушбу ходиса координата нукталарини билишимиз керак. Java S 1.2 да ушбу нукталарни координаталарини руй беришининг саклайдиган янги Event объекти ташкил килинган. Ходисани камраб олиниши бошка бир мухим моментни узх ичига олади. Масалан агар фойдаланувчи сичконча тугмачасини туртса, у холда унга мос ходиса тугридан-тугри Button объектига юборилади. Лекин бизнинг мисолимизда бу ходиса Window объектида ишлатилиши керак. Шунинг учун биз дарча объектига сичконча билан боглик ходиса хакидаги сигнални камраб олишга рухсат берамиз. Бу навбатдаги мисолда номоён булади. ( Click ходисасида ) сиз браузер дарчасининг ихтиёрий жойига сичконча билан туртишингиз мумкин. Бунда дарчада ушбу ходиса руй берган жойнинг координатаси хакидаги хабар дарчаси номоён булади. 39 Window.onClick = displayCords; сатри шуни англатадики , click ходисаси содир булганида нима содир булади . Аникрок килиб айтганда браузернинг click ходисасига реакцияси сифатида displayCoords ( ) функцияси чакирилади (dispayCoords дан сунг кавс куйиш керак эмаслигини эътиборга олинг ). Уз навбатида dispayCoords функцияси куйидаги куринишда аникланади: Function dispayCoords (l) { Alert (“x:”+l.page.x+ “y:”+l.page.y:); Куриб турганингиздай бу функция аргументга эга (уни l деб атадик). Хакикитдан эса бу Event объекти булиб бу dispayCoords ( ) функциясига ишлатилишига берилади. Event объекти pege x ва page y каби хусусиятларга эга, улардан ходиса содир булган жой нуктасини координаталарини олиш мумкин. Хабар дарчаси эса факатгина шу кийматни курсатади. MouseDown , MouseMove ва MouseUp . Айтиб утганимиздек Java S да MouseDrag ъодисаси йук . Шунинг учун биз Drag ва Drop механизмини хосил килишда MouseDown, MouseMove ва MouseUp ходисаларидан фойдаланишимиз керак . Навбатдаги мисолимизда MouseMove ёрдамида сичкончанинг жорий координаталари холатлар сатрида намоён булади . намоён булади Event.MouseMove ни ёзишда сиз MouseMove сузини бош харфлар билан ёзишингиз кераклигига эътиборни каратинг . MouseMove ходисаси содир булганда кайси функция чакирилишини курсатишга келганда эса сиз уни кичкина харфлар билан ёзишингиз керак булади: Window . on mousemove = … Энди биз охирги 2 та мисолни бирлаштиришимиз мумкин. Биз фойдаланувчи сичкончани тугмачасини босганда унинг координатаси пайдо булишини хохлаймиз. Мисолнинг коди куйидаги куринишда булади: 1 чи дан биз window объектини MouseDown ва MouseUp ходисаси хакида сичкончани кабул килишга мажбур киламиз. Window.CaptureEvents ( Event.MouseDown/Event.MouseUp ) ; 40 Куриб турганингиздек биз / ( ёки ) белгисидан window объекти курсатилган ходисалардан бир нечтасини кабул килиш керак деган максадда фойдаланамиз . Курсатилган ходисалар жойга эга булса унда нима содир булишини куйидаги 2 та сатр оркали тавсифланади. Wihdow.On MouseDown = StartDrag; Wihdow.On MouseUp = EndDrag; Куйидаги сатрда MouseMove ходисаси руй бериб window объекти сигнал кабул килганда нима содир булиши аник булган . Wihdow.On MouseMove = MoveIt; Лекин тухтанг ахир биз Event.MouseMove ни window.captureEvents ( ) да аникламадикку ! Бу шуни англатадики жорий ходиса window объекти томонидан камраб олинмайди. Унда нимага агар window объекти бу ходиса хакида хеч нимага эга булмаса, биз window объектига MoveIt ( ) функциясини курсатамиз! Бу саволга жавобни MouseDown ходисаси содир булгандан сунг чакириладиган StartDrag ( ) функциясида топишингиз мумкин: function StartDrag (l) { Window.CaptureEvents ( Event.MouseMove); Бу шуни билдирадики сичконча тугмачаси босилгандан дарров window объекти MouseMove ходисасини камираб олади . Ва агар MouseUp ходисаси содир булса биз MouseMove ходисасини тухтатишимиз керак . Бу EndDrag ( ) функциясида ReleaseEvents ( ) усули ёрдамида бажарилади . MoveIt ( ) функцияси сичкончани координаталарини холатлар сатрига ёзади. Энди бизда Drag ва Drop механизмини амалга оширувчи скриптнинг барча элементлари бор. Ва биз энди объектларимизни экранда чизишни бошласак хам булади. § Харакатланаётган объектларни курсатиш. Оддинги дарсларимизда биз кандай килиб каватлар ёрдамида объектларни жойлаштиришни яратишни курган эдик. Бу энди фойдаланувчи кайси каватдаги сичконча тугмаси билан туртганини аниклашимиз керак. Мисолни 41 Drag Obj массиви фойдаланувчи жойлаштирмокчи булган каватларни узининг ичига олади . Хар бир кават Drag Obj да бирор бир номерга эга. Уни биз кейинрок курамиз. Сичконча билан богланган ходисани камраб олиш кодини (биз олдин хам ишлатган) яна ишлатганимизни куриш мумкин. Window.CaptureEvents ( Event.MouseDown/Event.MouseUp ) ; Wihdow.On MouseDown = StartDrag; Wihdow.On MouseUp = EndDrag; Wihdow.On MouseMove = MoveIt; Биз Stand Drag функциясига куйидагини кушдик . Current Obj = which Obj (l); Which Obj (l) функцияси кайси объектга туртиш бажарилганини аниклайди . У мос кават номерини кайтаради. Агар хеч кайси кават белгиланмаган булса у null каватни кайтаради. Олинган киймат current Obj узгарувчисида сакланади. Бу шуни англатадики, жорий вактда биз жойлаштирмокчи булган каватнинг номерини current Obj дан олишимиз мумкин (агар хеч кайсини утказмокчи булмасак бу null каватда булади). Which Obj функциясида сиз хар бир каватнинг left , top , width ва height хусусиятини текширишимиз мумкин. Ушбу кийматлар ёрдамида бир фойдаланувчининг кайси объектни тугмача билан туртганини текширишимиз мумкин. 42 Адабиётлар 1. Шафран Э. Создание Web -страниц: самоучитель- СПб:Питер,2001.-320с. 2. Игорь Шапошников HTML 4 «БХВ-Петербург» 2002. 3. www.intuit.ru 4. www.citforum.ru 5. www.ziyonet.uz 43

Похожие

Ишоратларни ўрнатиш. «Bookmark» ташкил қилиш. График ишоратлар ва тасвир харитасини қўйиш
Функциялар
avaScript тили. Браузернинг объектли моделидан JavaScript да фойдаланиш. Window, Document, Link, Anchor, History объектлари – хоссалари, усуллари, ҳодисалар
Mijoz tоmоnidа dаsturlаsh. JavaScript ni HTML-hujjаtlаrgа jоylаshtirish
JavaScript дастурлаш тили. Скриптларни дастурлаш тиллари. JavaScript да тузилган дастурларни HTML-саҳифага киритиш