- •Мазмұны
- •Кіріспе
- •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-де анимация
- •Қорытынды
- •Қолданылған әдебиеттер тізімі
- •Қосымша
1.6 JavaScript тілінде сценарийлерді бағдарламалау
Скриптер. Элементтер қасиеттеріне рұқсат және олардың веб-парақтағы динамикалық басқарылуы HTML құжатымен байланысқан программа арқылы іске асады. Мұндай программаларды скриптілер деп атайды немесе басқа әдебиеттерде кездесетіндей – сценарийлер деп атауға болады. Скриптілер Script тегі арқылы сипатталады, яғни оның құрамында программаға немесе анықталған тілдегі оның мәтініне сілтемесі бар. Негізгі екі программалау тілдері қолданылады - JavaScript және VB Script[25].
Скриптерді құру.Скриптілер бірнеше түрмен құрылады. Солардың ішіндегі ең кең тарағанының ерекшелігі – бұл Script контейнерінің ішінде программаның орналасуы. Осы тег сыртқы файлға сілтей алады немесе өзінің ішкі құрамында программаны қамтиды.
Скрипт жазылу синтаксисы:
<script language="язык программирования" type="тип MIME" src="имя файла"> Текст программы
</script>
Language параметрі скрипттің жазылу тіліне нұсқайды, ол JavaScript немесе VB Script мәндерін қабылдайды. JavaScript үшін әдетте тіл атауына нұсқа (версия) нөмірін қосады. Мысалы JavaScript 1.3 (30 мысал).
30 мысал. Браузер қолдайтын тілдерді анықтау
<html>
<head>
<script language="VBScript"> VB = True </script>
<script language="JavaScript"> JS = 1; </script>
<script language="JavaScript1.1"> JS11 = 1; </script>
<script language="JavaScript1.2"> JS12 = 1; </script>
<script language="JavaScript1.3"> JS13 = 1; </script>
<script language="JavaScript1.4"> JS14 = 1; </script>
<script language="JavaScript1.5"> JS15 = 1; </script>
<script language="JavaScript">
document.write("<b>Поддерживаемые языки:</b><br>");
if(window.JS) document.write("JavaScript<br>");
if(window.JS11) document.write("JavaScript 1.1<br>");
if(window.JS12) document.write("JavaScript 1.2<br>");
if(window.JS13) document.write("JavaScript 1.3<br>");
if(window.JS14) document.write("JavaScript 1.4<br>");
if(window.JS15) document.write("JavaScript 1.5<br>");
if(window.VB) document.write("Visual Basic<br>");
</script>
</head>
<body>
...
</body>
</html>
Орындаудың нәтижесі төменде көрсетілген. Language параметрін көрсету ұсынылады, себебі егер, браузер программалау тілін анықтамаса, онда скрипт қабылдамайды және орындамайды да. Сонымен қатар, HTML 4.0 нұсқасында осы параметрді қолдану аса тиімді емес. Оның орнына type параметрін қолданған дұрыс, ал ол анықталған тіл үшін MIME типін нұсқайды: JavaScript үшін – «text/java script», ал VB Script үшін - «text/vb script»[26]. Бірақ кейбір браузерлер type параметрін түсіне алмайды, сондықтан language және type екі атрибутын бір уақытта берген дұрыс. Егер браузер type параметрінің мәнін анықтамаса, онда language мәні орындалмайды.
<script language="JavaScript" type="text/JavaScript">
JavaScript тіліндегі бағдарлама
</script>
Скриптілер сыртқы файлдарда да орналасып, кез-келген HTML құжатымен байланыса алады. Мұндай қадам көптеген-көптеген веб-парақтарда ортақ бір функцияны қолдану мүмкіндігін туғызады және олардың жүктелуін жеделдетеді, яғни сыртқы файл бірінші жүктелуден кейін-ақ кэштеледі және келесі шақырылуда скрипт тез шақырылады.
<script language="JavaScript" type="text/JavaScript" src="main.js"></script>
Скрипттің сыртқы файлына сілтеу жасағанда Script контейнерін бос қалдырамыз. Ал программасы бар файлдың өзі сайттың кез-келген жерінде орналасады, оның шақырылуы үшін сілтемедегідей ережелер орындалады.
Скриптілердің орналасқан жері. Скрипттер HTML құжатының денесінде немесе бас жағында шектеусіз көлемде орналасады. Көп жағдайларда скриптілердің орналасуы программа жұмысына мүлдем әсер етпейді. Алайда, алдыңғы ретті орындалатын скриптілерді әдетте құжат басына орналастырады. Программалық құралдар арқылы объектілерді құруда скриптілерді құжаттың дәл өзіне орналастырып, document.write немесе document.writeln әдісінің көмегімен нәтижесін шығарады.Ол 2 мысалда көрсетілген.
31 мысал. Скрипт көмегімен кесте құру
<html>
<body>
<table width=400 border=1>
<script language="JavaScript">
for (i=1; i<6; i++) {
document.writeln("<tr>");
for (j=1; j<6; j++) document.write("<td>" + i + j + "</td>");
document.writeln("</tr>");}
</script>
</table>
</body>
</html>
Мысалда скрипт 5 те 5 өлшемді ұяшықтары бар кестені құрып, оны сандармен толтырады.
Скриптілерді түсінбейтін браузерлерден программа кодын жасыру үшін, бастамас бұрын және аяқтағаннан кейін НТМL түсініктемесін қосады.
<script language="JavaScript">
<!—
Бағдарлама тексті //-->
</script>
НТМL түсініктемесін жапқаннан кейін JavaScript (II) тілінің түсініктемелері немесе VB Script (I) түсініктемелері шығуы керек.
Қазіргі таңда барлық жаңа шыққан браузерлер скриптерді түсінеді, сондықтан түсініктемелер міндетті түрде болуы шарт емес.
Скриптерді шақыру және іске қосу
Скриптерді орындаудың негізгі әдістері функцияларды шақыру және белгілі оқиғаға қол жеткізу арқылы іске асады. Скриптті 32 мысалда көрсетілгендей парақты жүктеуден кейін автоматты түрде іске қосуға болады.
32 мысал. Скриптті автоматты түрде іске қосу
<html>
<head>
<script language="JavaScript">
alert("Hello, world!")
</script>
</head>
<body></body>
</html>
Тура сол программаны функция арқылы жазуға болады.
33 мысал.Скриптердің автоматты түрде ашылуы
<html>
<head>
<script language="JavaScript">
function foo() {
alert("Hello, world!")}
foo();
</script>
</head>
<body></body>
</html>
Foo функциясы парақты жүктеуде іске қосылады себебі оның шақыруы айқын көрсетілген.
Оқиғалар мен скриптілерді байланыстырудың екі әдісі бар. Біріншісінде тіркелген оқиғалар қолданылады тышқан немесе пернетақта. Мысалы, тышқанның сол жағына басқанда onclick оқиғасымен кезек жүреді.
34 мысал. Тышқан оқиғасын қолдану
<input type= button value= “ баспаңыз!” onclick = “alert” ( сіз батырмаға бастыңыз мұны жасауға болмайды деп ескерткенбіз)
Белгілі оқиғаларға көңіл бөлудің басқа әдісі SCRIPT - for тегінің параметрлерімен байланысты, яғни оқиғаларды анықтайтын скрипт event элемент атауының берілгені үшін орындалады.
<script language="JavaScript" for="document" even="onLoad">
alert("Загрузка страницы завершена...")
</script>
Хабарламаны шақыру мысалында құжатты жүктегеннен кейін пайда болады кейбір браузерлер for және event параметрлерін түсінбейді және сктиптті жедел іске қосады. Бұл жағдайда оқиғаларды қолданған жөн.