Kаватларни жойлаштириш - Информатика и ИТ - Рефераты

Kаватларни жойлаштириш

Загружено в:

20.09.2019

Скачано:

0

Размер:

107.5 KB

www.arxiv.uz K аватларни жойлаштириш Режа: 1. Event объекти. 2. Drag ва drop нима. 3. Харакатланаётган объектларни курсатиш.

Left ва top хусусиятлар берилган каватнинг холатини белгилайди. Сиз уларга янги каватлар бериб уни узгартиришингиз мумкин. Масалан навбатдаги сатрда каватнинг горизантал холати 200 нуктада бериляпти: Document . layers [“ mylayer 2”]. left = 200; Энди биз каватларни аралаштириш дастурига утамиз, у браузер дарчасида кандайдир айланишлар яратади. Скрипт куйидаги куринишда : Биз mylayer2 номли кават яратдик. <body> тегида биз onload процедурасини ишлатганимизни куриш мумкин . Бизга сахифа юклатилгандан дарров кават айланишини бошлаш зарур . Onload ходисаларини кайта ишлаш процедурасида биз setInterval ( ) функциясидан фойдаланамиз . Бу Java S версиясининг янги усулларидан биридир . Ундан бирор бир функцияни яна ва кайта яна аник бир интервалида чакиришда фойдаланилади . Олдин биз бунинг учун setTimeOut вакт функциясидан фойдаланганмиз . SetInterval функцияси хам худди шундай ишлайди , бирок сиз уни бир марта чакирсангиз етарли булади . SetInterval функциясида биз move ( ) функциясини хар бир 20 миллисекунддан чакириш имконига эгамиз . Move ( ) функцияси эса уз навбатида хар 20 миллисекунддан каватни янги сохага алмаштиради . Бу функцияни яна ва яна чакиришимиз натижасида матнимизни тез харакатланишини курамиз. Move ( ) функциясида киладиган нарсамиз шуки кават учун янги координата хисоблаш ва уни ёзиш: document . layers [“ mylayer 2”]. left = pos . 10 кисм. K аватлар 2. Биз аллакачон каватлар янги технологиясининг асосий тушунчаларига эга булдик. Бу кисмда куйидаги мавзуларни куриб чикамиз.  Каватдан киркиб олиш. 1

 Куйилган каватлар.  Ялтирок каватлар билан турли хил самаралар олиш. Каватлардан киркиб олиш. Каватнинг кандайдир кисми (туртбурчак) куринадиган килиш мумкин. Бундай усул киркиб олиш дейилади. Масалан, HTML сахифасида куйидаги киркиб олиш функциясини беришимиз мумкин: Берилган тасвир фрагменти 90х70 улчамга эга. Clip атрибутидаги 1 чи 2 та киймат киркилаётган кисмнинг чапдан юкори бурчакни курсатада. Навбатдаги 2 та киймат пастки унг бурчакни курсатади. Java S тили ёрдамида киркилган кисмни бошкариб бундан хам кизикарли натижаларга эришиш мумкин. Аникрок айтганда 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; 2

Document.layers[“imglayer”] конструкцияси ёрдамида бу imglayer номли каватга мурожат килишимиз мумкин . Бирок нима учун document.layers[“imglayer”] дан сунг document деб ёзилади ? Гап шундаки , хар бир кават узининг HTML сахифасига яъни хар бир кават document объектига эга . Imglayer каватдаги тасвирга рухсат олиш учун биз Варакнинг колган барча майдони тоза ушбу document объектига рухсат олишимиз керак . Юкорида келтирилган мисолимизда бундай тасвир dovinci номига эга эди . булиши керак . § Куриб утганимиздек, кават узида бир неча объектларни мужассамлаштириши мумкин. Улар хаттоки бошка каватларни уз ичига олиши мумкин. Хакикатан эса куйилган каватлардан фойдаланишнинг бир неча сабаблари бор. Бир неча куйилган каватларни номоён килувчи мисолларни куриб чикамиз. Биринчи мисолда иккита бошка ( layer 1 ва layer 2) кават куйилган кават ( parentlayer деб номланади) ишлатилади. Бу биринчи кават Бу иккинчи кават Бу асосий (она) кават Move/stopparent Move/stoplayer Move/stoplayer Сахифни очганимиздан сунг биз 3 та тугмача курамиз. Бу тугмачалар каватлар харакатини бошлаши ёки тухташи мумкин. parentlayer ичида биз 2 та каватни аникладик. Булар худди кушилган каватларга эга булади. Java S тилида бу каватларга рухсатни кандай олиш мумкин. Бу кандай килинади, уни move ( ) функциясида куриш мумкин: document.layers [ “ parentlayer ”].left = 100 + pos 0 ; - - - - - - - document.layers [ “ parentlayer ”].layers[ “ layer ”].top = 10 + pos 1 ; - - - - - - document.layers [ “ parentlayer ”].layers[ “ layer 2 ”].top = 10 + pos 2 ; Куйилган каватларга рухсат олиш учун layer 1 ва layer 2 каватлар parentlayer ичида жойлашганлиги сабабли сизга document.layers [ “layer 1”] ёки document.layers[ “ layer 2 ”] деб ёзиш етарли булмайди. 3

Энди кандай килиб каватдан куринадиган майдонни куриб чикамиз. Навбвтдаги мисолда тасвирни киркиш ва жойлаштириш механизмидан фойдаланилган. Ва яна куйилган каватга мурожатларни куриш мумкин: 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 ходисасини курайлик. Ушбу ходиса ёрдамида дарча улчами укувчи томонидан узгартирилганини аниклашингиз мумкин. Куйидаги скрипт буни кандай килишни курсатади: window . onresize = message Сатрида биз уша ходиса процедурасини берамиз. Аникрок килиб айтганда фойдаланувчи дарча улчамини узгартирганидан дарров ушбу message ( ) функцичси чакирилади. Эхтимол сиз ходисаларни кайта ишловчи программаларни бундай тарзда бериш билан топип билмасангиз керак. Бирок бу ерда хеч кандай янгилик йук. Масалан, агар сизда button объекти бор булса, бу ходисани кайта ишлаш процедурасини куйидаги тарзда аниклаш мумкин. Уйлаш мумкинки 2 чи вариант бироз мураккаброк. Лекин нима учун биз айнан ундан 1 чи скриптда фойдаландик? Сабаби шундаки биз window объектини бирор бир аник тег ёрдамида аниклай олмаймиз ва шунинг учун 4

биз 2 чи вариантни куллашимизга тугри келади. 2 та мухим эслатма: 1 – дан window . onResize деб ёзмаслигингиз керак балки барчасини катта харфлар билан ёзиш керак. Агар сиз window . onResize = message ( ) деб ёзсангиз браузер message ( ) ни функция чикарувчи деб кабул килади. Лекин бизнинг холатда биз функцияни тугридан – тугри чикаришни хохлаймиз, факат ходисаларни кайта ишловчини аниклаб куймокчимиз. Event объекти. Java S 1.2 тилига янги event объекти кушилган. У узида бирор ходисани ёзиб борувчи хусусиятга эга. Хар сафар бирор ходиса юз берганда event объекти мос кайта ишловчи дастурга юборилади. Навбатдаги мисолда экранга бирор бир тасвир чикарилади. Сиз унинг каергадир сичконча курсаткичи билан туртишингиз мумкин. Натижада экранда сичконча жорий вактда турган нуктасининг координаталари курсатилган хабар чикади. куриб турганингиздай JavaS нинг олдинги версияларида бажарганимиздагидек < a > тэгда onclick ходисани кайта ишловчи программани жойлаштирдик. Бу ерда янги булиб event.x ва event.y лар билан яратилган хабар дарчаси хисобланади . Худди шунинг узи бизга сичконча координаталарни аниклаб берувчи бизга керак булган event объектида . Бундан ташкари мен барча буйрукларни <layer> тэгига жойлаштирдим . Шу туфайли биз жорий каватга нисбатан яъни бизнинг холатда тасвирнинг узига нисбатан координаталар хакидаги хабарни кобул киламиз . Акс холда биз браузер дарчасига нисбатан координаталар олган булар эдик. ( return false инструкцияси бу ерда браузер жорий мурожатни узокрок кайта ишлаш учун фойдаланилган). Event объекти куйидаги хусусиятларга эга: Data – DragDrop ходисаси юз берганда тухтатилган объектларнинг URL адреслар массиви. 5

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 синоними У layer у синоними Ходисани камраб олиш. Java S тилининг асосий хусусиятларидан бири ходисани камраб олишдир. Масалан, агар кимдир тугмачани туртса у холда шу тугмачага мос onclick ходисасини ишловчи дастур чакирилади. Сиз ходисаларни ишлаш ёрдамида дарча, документ ёки каватга мос курсатилган тугмача объктнинг ходисасини ишловчи чакирилишига кадар ходисаларни ишлаш ва камраб олишга эришасиз. Худди шундай сизнинг дарчангиз, документингиз ёки каватингиз объекти узининг оддий адресини топгунга кадар ходиса хакида сигнални ишлаш мумкин. Бу нимага кераклигини куйидаги мисол ёрдамида курайик: Куриб турганингиздай бу < a > тегда ходисани ишловчи дастурни курсатмаймиз. Бунинг урнига 6

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 объектига эга булгунга кадар, у ходиса хакида сигнални кулга киритади. Албатта агар сиз haudle ( ) функцисини куйидагича аниклаймиз: R узгарувчиси Event объекти хисобланади. Бундан ташкари сиз ихтиёрий объектга бевосита сигнал юборишингиз мумукин. Бунинг учун сиз haudle Event ( ) усулидан фойдаланишимиз мумкин. Бу куйидаги куринишда булади. Бу куйидагича куринишда булади : 12 Кисм. Drag ва Drop. Drag ва Drop нима . Java S 1.2 ни ходисаларнинг янги модели ва каватлар механизми ёрдамида Web сахифамизда drag ва drop схемасини ишлатиш имкониятига эга буламиз . Drag ва drop нима ? Масалан , бир канча ОС лар ( windows 95/NT ёки Mac OS) бизга файлларни ахлат кутисига олиб борган холда тозалашга рухсат беради . Бошкача килиб айтганда сиз файл тасвирига сичконча тугмасини туртасиз ва 7

уни ахлат кутисига олиб борасиз – drag ва сунг уни у ерга ташлайсиз – drop. Биз бу ерда амалга оширмокчи булган drag ва drop механизми Web сахифада чегараланади . Шунинг учун сиз HTML c ахифадаги объектларни компьютерингизнинг каттик диски ёки бошка хусусий харакатларга келтириш учун бу ерда келтирилган хаддан фойдалана олмайсиз . JavaScript + тили тугридан тугри Drag ва Drop механизмини куллаб кувватламайди. Бу бизда image объекти учун drageable ёки бирор бир хусусиятни белгилаш имкони йук деган маънони беради . Шунинг учун биз бунинг учун зарур кодни узимиз ёзишимиз керак. Лекин бу унчалик кийин эмас. Демак бизга нима керак? Бизга икки нарса керак. Биринчидан биз сичконча билан боглик аник ходисани аниклашимиз керак, яъни кандай тушунишимиз керак. Сунгра биз экран буйлаб объектларни кандай килиб утказишни уйлашимиз керак. Албатта биз объектларни яратиш ва уларни экран буйлаб жойлаштиришни кават сингари янги имкониятдан фойдаланган холда бажарамиз. Хар бир объект узининг кавати билан намоён булади. JavaScript 1.2 да сичконча билан ишлашдаги ходисалар. Биз сичконча билан ишлашда юз берадиган ходисалардан кайси бирини ишлатишимиз керак? Бизда MouseDrag каби ходиса йук лекин бу уни Mouse Dam , Mouse Move ва Mouse up ходисаларни кайта ишлаб эришишимиз мумкин. Javas ни 1.2 версиясида ходисаларниниг янги модулидан фойдаланилади . Биз буларсиз ушбу масалани ечиб билмайбиз . Келинг бу янги моделнинг бир канча мухим кисмига яна бир куриб чикайлик. Фойдаланувчи браузер дарчасининг бирор бир жойида сичконча тугмасини босади. Бизнинг скрипт бу ходиса кайси объект (яъни кават) билан богликлигини ва бу ходисани бажариш керак.Бизга ушбу ходиса координата нукталарини билишимиз керак. Java S 1.2 да ушбу нукталарни координаталарини руй беришининг саклайдиган янги Event объекти ташкил килинган. Ходисани камраб олиниши бошка бир мухим моментни узх ичига олади. Масалан агар фойдаланувчи сичконча тугмачасини туртса, у холда унга мос ходиса тугридан-тугри Button объектига юборилади. Лекин бизнинг 8

мисолимизда бу ходиса Window объектида ишлатилиши керак. Шунинг учун биз дарча объектига сичконча билан боглик ходиса хакидаги сигнални камраб олишга рухсат берамиз. Бу навбатдаги мисолда номоён булади. ( Click ходисасида ) сиз браузер дарчасининг ихтиёрий жойига сичконча билан туртишингиз мумкин. Бунда дарчада ушбу ходиса руй берган жойнинг координатаси хакидаги хабар дарчаси номоён булади. Ушбу мисолнинг коди : Дастлаб биз window объекти click ходисаси хакидаги сигнални камраб олишини хабар киламиз . Бунинг учун биз Capture.Event ( ) усулидан фойдаланамиз . 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 ёрдамида сичкончанинг жорий координаталари холатлар сатрида намоён булади . Куришимиз мумкинки бу скрипт коди олдинги мисол билан бир хил: Сичконча координаталари холатлар сатрида намоён булади 9

</ html > Event . MouseMove ни ёзишда сиз MouseMove сузини бош харфлар билан ёзишингиз кераклигига эътиборни каратинг. MouseMove ходисаси содир булганда кайси функция чакирилишини курсатишга келганда эса сиз уни кичкина харфлар билан ёзишингиз керак булади: Window . on mousemove = … Энди биз охирги 2 та мисолни бирлаштиришимиз мумкин. Биз фойдаланувчи сичкончани тугмачасини босганда унинг координатаси пайдо булишини хохлаймиз. Мисолнинг коди куйидаги куринишда булади: Сичконча тугмаисини босинг ва уни юбормаган холда сичкончани узини харакатлантиринг. Сичконча координаталари холатлар сатрида номаён булади. </ html > 1 чи дан биз window объектини MouseDown ва MouseUp ходисаси хакида сичкончани кабул килишга мажбур киламиз. Window.CaptureEvents ( Event.MouseDown/Event.MouseUp ) ; Куриб турганингиздек биз / ( ёки ) белгисидан 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 ходисаси содир 10

булгандан сунг чакириладиган StartDrag ( ) функциясида топишингиз мумкин: Бу шуни билдирадики сичконча тугмачаси босилгандан дарров window объекти MouseMove ходисасини камираб олади . Ва агар MouseUp ходисаси содир булса биз MouseMove ходисасини тухтатишимиз керак . Бу EndDrag ( ) функциясида ReleaseEvents ( ) усули ёрдамида бажарилади . function EndDrag (l) { window.releaseEvents (Event.MouseMove); MoveIt ( ) функцияси сичкончани координаталарини холатлар сатрига ёзади. Энди бизда Drag ва Drop механизмини амалга оширувчи скриптнинг барча элементлари бор. Ва биз энди объектларимизни экранда чизишни бошласак хам булади. Харакатланаётган объектларни курсатиш. Оддинги дарсларимизда биз кандай килиб каватлар ёрдамида объектларни жойлаштиришни яратишни курган эдик. Бу энди фойдаланувчи кайси каватдаги сичконча тугмаси билан туртганини аниклашимиз керак. Мисолни коди: 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); 11

Which Obj (l) функцияси кайси объектга туртиш бажарилганини аниклайди . У мос кават номерини кайтаради. Агар хеч кайси кават белгиланмаган булса у null каватни кайтаради. Олинган киймат current Obj узгарувчисида сакланади. Бу шуни англатадики, жорий вактда биз жойлаштирмокчи булган каватнинг номерини current Obj дан олишимиз мумкин (агар хеч кайсини утказмокчи булмасак бу null каватда булади). Which Obj функциясида сиз хар бир каватнинг left , top , width ва height хусусиятини текширишимиз мумкин. Ушбу кийматлар ёрдамида бир фойдаланувчининг кайси объектни тугмача билан туртганини текширишимиз мумкин. Адабиётлар: 12

1. Шафран Э. Создание Web -страниц: самоучитель-СПб:Питер,2001.-320с. 2. Игорь Шапошников HTML 4 «БХВ-Петербург» 2002. 3. www.intuit.ru 4. www.citforum.ru 5. www.ziyonet.uz 6. www.tuit.uz 13

Похожие

Интернет серверида Web–сайтни жойлаштириш

Microsoft Word мавзусидаги маърузани укувчиларга утиш тартиби

Microsoft Word

Adobe PageMaker дастурида ишлаш

Microsoft Excel 98 (2)