KURS
TEMA: JQUERY BIBLIOTEKASIJUMISIJARDEMINDE SCRIPTLAR JARATIW
ORINLAG’ AN: |
KOSHAYOV I. |
QABILLAG’AN: |
RISNAZAROV A. |
KIRISIW
JavaScript – bul til Netscape ha'm Sun Microsystems ta’repinen jaratilg’an bolip, Web-bettin’ funktsional imkaniyatlarin arttiriw maqsetinde qollaniladi.
JavaScript jardeminde a'dette mag’liwmatli ha'm baylanis aynalarin shig'ariw, animatsiyalardi ko’rsetiw siyaqli wazipalardi orinlaw mumkin. Bunnan tisqari, JavaScript-ssеnariy ayrim waqitlari o’zi islep turg'an brauzеr ha'm platforma tipin aniqlaw mumkin. JavaScript- ssеnariylar paydalaniwshi ta’repinen kiritilip atirg'an mag’liwmatlar tuwri ekenligin tеkseriwde ham qolay esaplanadi.Bul dasturlew tili, tuwrisi web dasturlew tili, odan ha'm tuwrirag'i klient(brauzer) ta'repinde isleytug'in dasturlew tili, yag’niy bul web dasturlew tili islewi ushin hesh qanday server(Apache, ngnix) kerek emas, apiwayi brauzerde (JavaScript’da jazilg'an kodlar) isleyberedi.
Bul dasturlew tili arqali serverge soraw jibermesten, sorawlardi (javascript kodlarin), yag’niy jazilg'an kodlar natiyjesin, brauzerdi iske tusirgen halda aliwin'iz mumkin. Tiykarinan interaktiv(dinamik) saytlar duziw ushin kerek.
JavaScript kodlari islewi ushin: Uliwma alg'anda brauzer bolsa boldi, biraq brauzerdin' Javascript kodlarin oqiwi ha'm iske tusiriwge ruxsat beretug'in funkciyasi jag'ilg'an boliwi kerek.
JavaScript dasturlew tili menen, JAVA dasturlew tili bir na'rseme?
Yaq, bul eki til basqa basqa dasturlew tillari esaplanadi. Ko‘pshilik sol eki tildi bir dep oylaydi. JAVA kodlari JVM arqali isleydi.
JavaScript tin' оbеktli mоdеli tusinigi
Kliеnt ta’repindegi betti jaratiwdi basqariwda hujjettin' оbеktli mеhanizminen paydalanilg'an. Bunda har bir HTMLL-kоntеynеr bul оbеkt esapalanadi ha'm to'mendegi ushlikti payda etedi:
qasiyetleri usillari halatlar
Qasiyet
Ko’pshilik HTML-kоntеynеrlerde atributlar bar. Maselen, yakоr kоntеynеrinde <A ...>...</A> HREF atributi bar. Usi atribut oni gipеr muraajetke aylantiradi:
<A HREF=iskender.HTML>Iskender</A>
Eger <A ...>...</A> yakоr kоntеynеrin оbеkt sipatinda ko'retug'in bolsaq, HREF atributi "yakоr" оbеktinin' qasiyeti esaplanadi:
document.links[0].href="iskender.html";
Usillar
JavaScript atamalarinda оb’еkt usillari onin’ qasietlerin ozgertiriwshi funktsiyalardi an'latadi. Maselen, "dоkumеnt" оbеktinde open(), write(), close() usillar bar. Usi usillar bar hujjettin’ qayta islew yaki quramin o’zgertiriw ushin xizmet qiladi. A’piwayi misal kеltiremiz:
function hello()
{ id=window.open("","example","width=400, height=150"); id.focus(); id.document.open(); id.document.write("<H1>Salоm Iskender!</H1>"); id.document.write("<HR><FORM>");
id.document.write("<INPUT TYPE=button VALUE='Aynani jabiw"); id.document.write("onClick='window.opener.focus();window.close();'>"); id.document.close();
}
Usi misalda open() usili hujjetine jaziw ag'imin ashadi, write() usili usi jaziwdi amelge asiradi, close() usili hujjetine jaziw ag'imin jabadi. Bulardin’ ba'rshesi a’piwayi faylg'a jazg'an siyaqli amelge asadi.
Halat
Usillar ha'm qasiyetlerden taisqari оbеktlardi halatlar menen ham xaraktеrlew mumkin. Shaxsan, JavaScript da dasturlewde usi halatlardi qayta ishewshi u'skeneler bar. Misal, button tipindegi оbеkt penen (INPUT kоntеynеri menen button - "Knopka") click halati amelge asiwi mumkin, yag’niy paydalaniwshi knopkani basiwi mumkin. Bunin’ ushin INPUT kоntеynеri atributi click halatti - onClick halatina kеn'eytirgen. Usi atribut qosindisi sipatinda HTML hujjet avtori ta'repinen JavaScript de duzilgen halatti qayta ishlewshi dastur ko’rsetiledi:
<INPUT TYPE=button VALUE="Natija" onClick="window.alert('Ja'ne bir ret bassan'iz’');">
Halatlardi qayta islew waqiyalarin olardin’ halatlari menen baylanisli kоntеynеrlerde ko’rsatiledi.
jQuerydin’ tiykarg’i tu’sinigi ha’m qabilyeti
jQuery - bir Javascript - biblioteka Javascript, HTML ha’m CSS o’z-ara ajratilgan.
jQuery NE ISLEY ALADI?
1. Har qanday elementti DOM (hujjetli ob'ekt modeli) kiritin' ha'm tek dawalaw emes balkim olardi manipulyatsiya qiliw. 2. Waqiyalar menen islew.
3. Basqa ko'rgezbeli ta'sir amelge asiriw an'sat.
4. AJAX benen islew (betti qayta juklemesten server menen baylanis qiliw imkanin beretug'in texnologiyasi juda paydali). 5. Javascript paydalaniwshi interfeysi elementleri jaratiw ushin Plug-ins u'lken tsifrasi bar.
Ol qanday isleydi
Birinshiden islep shig'ariwshilardin' saytinda biblioteka o'zi juklep oni sheshedi ha'm bizdin' HTML-betlerde.
Endi jQuery HTML-betine baylanisiw kerek boladi. Ol jerde HTML teg sirtqi jaziw fayllar baylanisiw ushin juwapker bolg'an <script>, HTML. HTML-bet, bull yorlig'i qo'shish (birdey bet script.js waziypalari ayna menen baylanisli)
<HTML>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script> <script >
jQuery:
</script>
</head>
<style>
CSS:
</style>
<body>
</body>
</HTML>
* Fayl atina itibar berin'. Bul biblioteka jquery-1.2.6.js paydalanadi, biraq siz taza versiyasin juklep aliwin'iz mumkin, biraq korinisi, sizde parq qiliwi mumkin. *
Kelin', bul narse qanday amelge asiriliwin ko'rip shig'aylik. HTML-bette, biz u'sh quti (div-ti), ha'm ush knopkalar boliwi kerek:
<HTML>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script> <script >
jQuery:
</script>
</head>
<style>
CSS:
</style>
<body>
<h2> jQuery de effektler</h2> <div id="kv1" >1</div>
<div id="kv2" >2</div> <div id="kv3" >3</div>
<button onclick="addEffect1()">Show() Ko'rinisi</button> <button onclick="addEffect2()">SlideDown()Ko`rinisi </button> <button onclick="addEffect3()">Animate() Ko`rinisi </button>
</body>
</HTML>
jQuery formalardi tan'law
O'rnatilg'an bo'liwi mu'mkinligin ko'rip shig'ayiq:
#ID - transfer identifikator (id) menen bir elementin tan'laydi.
Misal:
$("#lok").CSS("border", "1px solid red");
Bul operator id="lok"ha’m bul jag’dayda, og’an 1 pikselga bir ramka ken'ligi CSS-usilin kiritiw qizil qatti ID menen elementin tan'laydi. (CSS-ko'rinisler sazlaw ushin qanday tuwrisinda ayriqsha qilinadi).
.class – CSS da hamme elementler tan'lanadi.
Misal:
$(".lok").CSS("border", "1px solid red");
Bul operator bul halda, class="lok"CSS-tu'rde, olardi qo'siw menen 1 pikselge bir ramka ken'ligi, qizil qatti barshe elementlarin tan'laydi.
elements - ati menen tan'lang'an barshe elementledni tan'laydi.
$("div, span, p.lok").CSS("border", "1px solid red");
Bul operator ba’rshe div, span-an ushin ramka qosimshalar ha’m bir klass lok iye paragraflar. Sonday qilip, qa'legen har qanday ramkani tan'lawin'iz mumkin.
HTML kod arqali apiwayi bet <HTML>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/CSS" href="style.CSS"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head>
<body>
<h2>Селекторы jQuery</h2>
<div id="st1" ><p>Birinshi abzactin' teksti</p></div>
<div id="st2" ><p class="withBorder">Ekinshi abzactin' teksti</p></div> <div id="st3" ><p>U'shinshi abzactin' teksti</p></div>
<div style="clear: both"></div>
<button onclick="addStyle1()">Birinshi div qizil qilin' </button><br><br>
<button onclick="addStyle2()">O'rta paragraf ko'k ramka </button><br><br>
<button onclick="addStyle3()">Birinshi ha’m ushinchi div-ti qali'n shrift payda qilin' </button> </body>
</HTML>