- •Мазмұны
- •Кіріспе
- •1Web беттерінің сценарийлерін бағдарламалау
- •1.1 Html тілінің негіздері
- •1.2 Html тілінін атқаратын қызметі
- •1.4 Html5 тілінің ерекшеліктері
- •1.5 JavaScript тілінің негіздері
- •1.6 JavaScript тілінде сценарийлерді бағдарламалау
- •2 Web бетті жүзеге асыруға арналған программалық қамсыздандыруды талқылау және таңдау
- •3 JQuery арқылы Web бетінің интерфейсін құру
- •3.1 JQuery кітапханасы
- •3.2 Jquery-де анимация
- •Қорытынды
- •Қолданылған әдебиеттер тізімі
- •Қосымша
3 JQuery арқылы Web бетінің интерфейсін құру
JQuery - дің міндеті JavaScript – мен бірдей функциялар мен методдардардың өте бай жиынтығынан тұрады. Негізгі өзгешелігі бағдарламашылар үшін өте икемді әрі қолданысқа оңай болған, бүгінгі таңдағы ең танымал JavaScript library – JavaScript жиынтығы ретінде жоғары қолданысқа ие болған клиент – жақтың скрипт тілі болып табылады.
Нақтырақ айтқанда веб сайт дамытуда кездесетін HTML document traversing, event handling, animating, ajax сияқты ұғымдарды барынша жеңілдеткен MIT License – лы тегін, ашық кодты бағдарлама.
Ең алғаш JQuery – ді 2006 жылы қаңтар айында, Нью – Йорк қаласында болған BarCamp – тың бірінде John Resig деген адам таныстырған.Бүгінде ең көп адамдар қолданатын 10, 000 веб сайттың 55% - тен астамы осы JQuery – ді қолданады.
3.1 JQuery кітапханасы
JQuery кітапханасын HTML бетіне қосу үшін алдымен JQuery кітапханасын жүктеп аламыз. Оны jquery.com ресми сайтынан жүктеуге болады. Кітапхананы жүктеп болған соң, jQuery-ді HTML бетіне қосу үшін<head>…</head>тегтерінің ортасына скриптіге сілтеме жасаймыз.Сілтеме жасаудың екі жолы бар:
кітапхананы ДК жадына жүктеу, яғни ғаламтордан өз компьютерімізге жүктеп алып,скриптіде кітапхананың орналасқан бумасын (жолын) тікелей көрсетеміз:
<script language="Javascript" type="text/javascript" src="js/jquery-x.x.x.min.js">
кітапхананы қандай да бір себептермен жүктей алмайтын болсаңыз, Google компаниясы ұсынған ғаламтордан jQuery-ді тікелей қолдануға болады.Тек қана <head>…</head> тегтерінің ортасына скриптіге мынадай сілтеме жасаймыз (сурет 4)[30]:
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Сурет 4. Ғаламтордан jQuery-ді тікелей қолдану
JQuery коды JavaScript кодтары секілді кезектесіп келетін командалар жиынынан тұрады.Мысалға:
JQuery-ді қолдану синтаксисі (сурет 5):
$(селектор).әдіс();
Сурет 5.Жазылу синтаксисі
1.$ белгісі,одан кейін тұрған кодтардың Jquery екендігін айқындап тұрады;
2.селектор-бізге беттегі элементті тандауға мүмкіндік береді;
3.әдіс-тандаған элементімізге қандай іс-қимыл қолдану керектігін анықтайды.Jquery әдістерін келесі топтарға бөліп қарастыруға болады(сурет 6):
DOM басқаратын әдістер;
элементтерді рәсімдеу әдістер;
Ajax-сұратулар жасау әдістері;
эффектілер жасау әдістері;
оқиғаларды өңдеуішпен байланыс жасайтын әдістер.
$ белгісі. JQuery-ді қарапайым JavaScript кодтарымен араластырып (комбинировать) қолдануға болады.
Егер жол $ белгісінен басталса онда бұл- Jquery,ал егер ол белгі болмаса онда ол қарапайым JavaScript коды.
function start(){
//id="hid" абзацын jQuery-мен жасырып қоямыз
$("p#hid").hide();
//id="change"-пен абзацты өзгерту
document.getElementById("change").innerHTML="Данное содержимое было изменено с помощью JavaScript.";
}
Сурет 6.Әдіс қолдану
Кейбір JavaScript кітапханалары $ белгісін өз кодтарын анықтауға қолданылуы мүмкін.Сол себептен, конфликт туындамас үшін Jquery – да noConflict() командасы қолданылады. noConflict() командасының көмегімен біз $ белгісін кез келген басқа бос символға меншіктей аламыз.Жазылу синтаксисі(сурет 7)[31]:
var символ=jQuery.noConflict();
Сурет 7. noConflict() командасы
Мысалы (сурет 8):
//$ белгісін nsign- ға өзгерту
var nsign=jQuery.noConflict();
//$ орнына nsign-ді қолданып абзацтің түсін өзгертеміз
nsign(document).ready(function(){
nsign("p").css("color","green");
});
Сурет 8.$ белгісін nsign- ға өзгерту
JQuery селекторлары.Селекторлар көмегімен сіз беттегі кез келген элементті тандай отырып, оларға қандай да бір әдістер қолдана аласыз (кесте 1).
Кесте 9
JQuery селекторлары
|
Мысал |
Нәтиже |
|
$("p") |
Беттегі барлық р элементтері тандалады. |
|
$(".par") |
Беттегі барлық class="par" элементтері тандалады. |
|
$("#par") |
Беттегі барлық id="par" элементтері тандалады. |
|
$(this) |
Ағымдағы HTML элементі тандауға мүмкіндік береді. |
|
$("p.par") |
Беттегі барлық class="par"-дағы р элементтері тандалады. |
|
$("p#par") |
Беттегі барлық id="par"-дағы р элементтері тандалады. |
|
$(".par,.header,#heat") |
Беттегі барлық атрибут мәндері class="par", class="header" және id='heat' элементтері тандалады. |
|
$("[src]") |
Беттегі барлық src атрибутты элементтері тандалады. |
|
$("[src='значение']") |
Беттегі барлық атрибут мәндері src="значение" элементтері тандалады. |
|
$("[src$='.gif']") |
Беттегі барлық .gif–пен аяқталатын src атрибутты элементтері тандалады. |
JQuery-де оқиға өндеуіштер. JQuery-де оқиға өндеуіштер – бұл кодтары анықталған бір әрекеттерді орындап болған соң орындалатын функциялар.
Оның себебі код әлі толық жүктелмеген құжатқа көңіл аударуы мүмкін,ал ол кезде біз қате немесе күтпеген нәтиже аламыз.
JQuery селекторларын қолдану мысалы (сурет 9)[32]:
$(document).ready(function(){
//Установим размер шрифта всех абзацев равным 20 пикселям
$("p").css("fontSize","20px");
//Изменим на зеленый цвет шрифта элемента с id=el2
$("#el2").css("color","green");
//Изменим на красный цвет шрифта элемента с class=el3
$(".el3").css("color","red");
//Сделаем жирным шрифт элементов с id=el2 и class=el3
$("#el2,.el3").css("fontWeight","bold");
//Изменим на синий цвет текста кнопки
$(":input").css("color","blue");
//Установим размер шрифта всех элементов имеющих атрибут href равным 20 пикселям
$("[href]").css("fontSize","20px");
});
Сурет 9. JQuery селекторларын қолдану
Кодтың алдын ала орындалуын шешу.Біз Javascript - тен білетіндей , кодтың алдын ала орындалуы құжаттың толық жүктелгеніне дейін орындалуы қатеге әкеледі.
Оның себебі код әлі толық жүктелмеген құжатқа көңіл аударуы мүмкін,ал ол кезде біз қате немесе күтпеген нәтиже аламыз.
Бұл қатені түзету үшін біз кодқа құжат толық жүктелген сон ғана көңіл аударатын функция жазуымызға болады.JavaScript-те кодтың алдын ала орындалуын шешу (сурет 10).
Ал JQuery – де келесі жолмен бұл қатені былай шешуге болады (сурет 11).
JQuery-дағы командалар тізбегі.Кодтарды қысқарту үшін біз JQuery-дағы командаларды бір тізбекке жалғай аламыз.Тізбектегі командалар солдан оңға қарай кезекпен орындалады (сурет 12).
JQuery-де оқиға өндеуіштер. JQuery-де оқиға өндеуіштер – бұл кодтары анықталған бір әрекеттерді орындап болған соң орындалатын функциялар.
Оқиға өндеуіштер JavasScript-те де болған,бірақ Jquery олармен жұмыс жасауды одан да жеңілдете түсті. Оқиға өндеуіштерді анықтайтын жалпы синтаксис (сурет 13).
<html>
<head>
<scripttype="text/javascript">
function start()
{
Кодкоторыйбудетвыполненпослеполнойзагрузкидокумента
}
</script>
</head>
<bodyonload="start()">
</body>
</html>
Сурет 10.JavaScript-те кодтың алдын ала орындалуын шешу
<scripttype='text/javascript'>
//Бірінші әдіс:
$(document).ready(function(){
Кодкоторыйбудетвыполненпослеполнойзагрузкидокумента
});
//Екінші әдіс:
$().ready(function(){
Кодкоторыйбудетвыполненпослеполнойзагрузкидокумента
});
//Үшінші әдіс:
$(function(){
Кодкоторыйбудетвыполненпослеполнойзагрузкидокумента
});
</script>
Сурет 11. JQuery – де кодтың алдын ала орындалуын шешу
<scripttype='text/javascript'>
//Қысқартусыз код
$("p").css("color","green");
$("p").css("font-size","30px");
//Қысқартылған код
$("p").css("color","green").css("font-size","30px");
</script>
Сурет 12. JQuery-дағы командалар тізбегі
$(селектор). оқиға_өндеуіш(function(){оқиға_өндеуіш_коды}
);
Сурет 13.Оқиға өңдеуіш жазылу синтаксисі