5-Dars JavaScript - ФРЕЙМЛАР

ФРЕЙМЛАР

Фрейм яратиш.
Фрейм ва JavaScript кандай килиб бирга ишлайди деган савол тез-тез бериладиган саволлардан биридир. Дастлаб биз фрейм нима ва у нима учун ишлатилади деган саволни тушунтирамиз. Сунгра JavaScript ва фреймлар кандай биргаликда ишлатилишини куриб чикамиз.Умуман олганда броузер дарчаси бир неча алохида фреймларга ажратилиши мукин. Бу шуни англатадики,фрейм бу броузер дарчасидаги тугри туртбурчак шаклидаги бирор бир белгиланган майдон. Хар бир фрейм экранга узининг документини чикаради. Шу тарика мисол учун сиз 2 та фрейм яратмокчисиз. Биринчи фреймга сиз Netscape фирмасининг “Уй сахифасини” юклашингиз, 2 чига эса Microsoft фирмасиникини юклашингиз мумкин. Фреймлар яратиш HTML тили масаласи булcади, биз бу ерда бу жараённинг асосий куринишини тавсифлаб утамиз. Фрейм яратиш учун бизга <frameset> ва <frame> теглари керак булади. 2 та фрейм яратувчи HTML сахифа куйидаги куринишда булиши мумкин :

< html >
< frameset rows “ 50% , 50% ”
< frame src = “ page 1.htm ” name = “frame1”
< frame src = “ page 2.htm ” name = “frame2”
< /frameset >
</html >

Натижада 2 та фрейм яратилади. <frameset> тегида rows хоссасининг фойдаланилганини сезган булсангиз керак. Бу фреймлар бир-бири устидан жойланганини билдиради. Юкори фреймга page1.htm сахифаси юкланади, пастки фреймга эса page2.htm документи жойлаштирилади. Тула яратилган фрейм таркиби куйидаги киёфада булади :

Агар сиз документлар усти-устига эмас, ёнма-ён туришини хохласангиз, у холда <frameset> тегида rows эмас cols сузини ёзиш керак. “ 50% , 50% ” фрегменти фреймларни канчалик катталигини билдиради. Агар сиз хисоб-китоб билан узингизни кийнашни истамасангиз ва хисобда барибир 100% хисоб-китоб булишини истасангиз “ 50% * % ” ёзишингиз мумкин. Фрейм улчамини нукталарда бермокчи булсангиз сондан сунг % белгисини куймаслигингиз керак. Истаган фреймга ном бериш учун < frame > тегида name атрибутидан фойдалансангиз етарли. Бундай имконият бизга JavaScript тилида фреймларга рухсат учун керак булади. Web - сахифалар яратишда бир неча куйилган < frameset > тегларидан фойдаланишингиз мумкин.
<frameset cols = “50%,50%”>
<frameset rows=”50%,50%”>
<frome src=”cell.htm”>
<frome src=”cell.htm”>
</frameset>
<frameset rows=”33%,33%,33%”>
< frame src=”cell.htm”>
<frame sec=”cell.htm”>
<frame crc=”cell.htm”>
</frameset>
</frameset>
Натижада керак булган фреймлар таркиби куйидагича булади:
<frameset> тилида border параметрини ишлатган холда фреймлар орасидаги йугинликни беришингиз мумкин.Агар border=0 деб берилса бу сиз фреймлар орасида кандайдир масофа булишини хохламаётганингизни билдиради.

Фреймлар Ва Javascript

Энди келинг JavaScript да фреймларни браузер дарчасида кандай “куринишни” куриб чикамиз. Бу максадда ушбу кисмни берилишида келтирилган биринчи мисолдагидек иккита фрейм яратамиз. Куриб утганимиздек JavaScript web-сахифадаги курсатилганларнинг барча элементларини аллакандай иерархик таркибдаги куринишда ташкил килади. Худди шулар фреймларга хам таалуклидир.Навбатдаги расмда биринчи мисолдаги обьектлар иерархияси курсатилган:

 Иерархия чуккисида браузер дарчаси жойлашган (browser window). Жорий холатда у иккита фреймга ажратилган. Шу тарика дарча объект сифатида тур бошлиги яъни ушбу иерархиянинг онаси (parent), иккита фрейм эса мос равишда уларнинг авлодлари (children) хисобланади. Биз бу иккита фреймга frame1 ва frame2 деб ном бердик. Улар ёрдамида биз келтирилган иккита фреймлар билан маьлумот алмашишимиз мумкин. Скрипт ёрдамида куйидаги масалани ечиш мумкин: Айтайлик, фойдаланувчи кандайдир мурожатни биринчи фреймда фаоллаштирса, бирок унга мос сахифа уша фреймда эмас, бошкасида юкланиши керак. Ушбу масалага мисол булиб мундарижа тузишни келтирсак ва бунда битта фрейм узгармас булиб колади, лекин фойдаланувчига бир неча турли мурожатларни урганишга таклиф килади.

Ушбу масалани ечиш учун биз 3 та холни куриб чикишимиз керак:

асосий дарчалар фрейм авлод фреймга рухсат олади

авлод-фрейм она дарчалар фреймга рухсат олади

авлод фрейм бошка бир авлод фреймга рухсат олади

Объект нукталари назаридан «дарча» ( window) иккита курсатилган фрейм frame1 ва frame2 деб номланади. Олдинги расмда куриш мумкинки, она дарча ва фреймлар орасида тугри олака мавжуд. Яъни агар сиз она дарча учун скрипт ёзсангиз яъни бу фреймларни яратувчи сахифалар учун скрипт ёзсангиз у холда бу фреймларга уларни номлари оркали мурожаат килишингиз мумкин. Маслан: Frame2.document.write («ушбу хабар она дарчадан юборилган»);

Айрим холлларда сизга 1 фреймда туриб она дарчага рухсат олиш зарур булиб колади. Масалан, бу агар сиз келаси утишда фреймлардан кутилишда зарур булади. Бундай холда фреймларни йук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.frame2.document.write(“Салом, бу чакирик / чи фреймдан! ”)

Навигацион панеллар (катновчи йулкалар)
Келинг, катнавчи йулкалар кандай яратилишини куриб чикамиз. Битта фреймда Бир неча мурожатларни яратамиз. Лекин, агар фойдаланувчи улардан биттасини фаоллаштирса мос сахифа уша фреймда эмас, бошкасида жойлашшади.

Бунга мисол:
Дастлаб курсатилган фреймларни яратувчи скриптни ёзиб олишингиз керак. Бу документ худди олдинги кисмимизнинг берилишида куриб чиккан документдек куринишда булади.
Fromes3.htm

<html>
<frameset rows="80%,20%">
<frame src="/start.htm" mce_src="/start.htm" name="main">
<frame src="/menu.htm" mce_src="/menu.htm" name="menu">
</frameset>
</html>

бу ерда start.htm сахифа асосий фрейм (main) да курсатиладиган сахифа хисобланади. Бизда бу мавжуд сахифа учун махсус талаблар йук.
Menu.htm

<html>
<head>
<script language="JavaScript">
<!-- hide

function load(url) {
parent.main.location.href= url;
}

// -->
</script>
</head>
<body>

<a href="javascript:load('first.htm')" mce_href="javascript:load('first.htm')">first</a>
<a href="/second.htm" mce_href="/second.htm" target="main">second</a>
<a href="/third.htm" mce_href="/third.htm" target="_top">third</a>

</body>
</html>

Куриб турганингиздек, янги сахифа юклаш урнига биз браузерга JavaScript да кандайдир буйрукни бажаришни таклиф киламиз. Яъни бунинг учун биз оддий href урнига JavaScript: параметридан фойдаланишимиз керак холос. Сунграк кавс ичида “first.htm” ни ишлатганимизни куришимиз мумкин. Бу сатр load функциясининг аргументи сифатида берилган. Load ( ) функциясининг узи куйидаги тарзда аникланади.
Function load (url) {
Parent.main.location.href = url;
}
бу ерда кавс ичида 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 функциясидан фойдаланиш афзалрокдир. Фараз киламиз биз frame1 frame2 frame3 номли фреймларга эгамиз. Айтайлик frame1 да мурожатни фаоллаштирганда 2 та фреймнинг хар бирида хар хил Web сахифа юклансин. Ечим сифатида куйидаги функциядан фойдалансангиз булади.
Function load two ( ) {
Parent.frame 1.location.href = “first.htm”;
Parent.frame 2.location.href = “second.htm”;
}
Агарда шу функциянгиз янада ихчам булишини хохласангиз, у холда узгарувчини аргумент сифатида узатиш имкониятидан фойдалансангиз булади: Натижа куйидаги куринишда булади:
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” ) функция чакиригини тахлил килса булади. Шубхасиз бу сизнинг функциягизни янада ихчам ва уни тез-тез, турли контекстларда ишлатишингиз мумкин булади.