2015-09-06
1650
Window иерархияның жоғарғы жағында орналасады. Бұл қалған объектілердің одан төмен орналасып, соның қасиеттері түрінде қарастырылатынын білдіреді. Үш тәсілді біз бұрыннан білеміз, олар: alert, prompt және confirm.
Егер келесі түрде жазылса:
Window.alert ("alert функциясы – бұл window объектісінің тәсілі болып табылады "};
– онда браузер осы хабарламаны шығаратын қосалқы терезе ашады.
Біз бұрын былай жазатынбыз:
alert("alert функциясы – бұл window объектісінің тәсілі болып табылады");
Негізгі объект болып саналатын window объектісінің атын жазбауға да болады. Келесі жолдардың нәтижелері бірдей болады:
window.alert("Ат айналып қазығын табар"); alert("Ат айналып қазығын табар");
Жаңа терезелер ашу
Көп жағдайда пайдаланушыға жұмыс нәтижесін көрсету үшін бұрынғы терезе ашық тұрғанда, жаңа терезе ашуға тура келеді. Жаңа терезе ашу үшін window объектісінің open тәсілін қолданамыз. Оны келесі тәсілдердің бірін қолдану арқылы жазуға болады:
var айнымалы = open();
var айнымалы = open(файл);
var айнымалы = open(файл, терезе_аты);
var айнымалы = open(файл,терезе_аты, терезе_параметрлері);
Мұндағы:
· айнымалы – ашылатын терезеге нұсқауыш;
· файл – сөз тіркесі (строка). Ашылған терезеде көрсетілетін файл аты. Егер бұл параметр берілмесе, бос терезе ашылады;
· терезе_аты — сөз тіркесі. Терезе аты сол терезеге мәлімет шығару үшін керек (window объектісінің name қасиеті мәні);
· терезе_параметрлері – сөз тіркесі. Терезе қасиеттерін сипаттау. Егер параметр берілмесе, үнсіз келісім бойынша тағайындалған қасиеттер қолданылады. Параметрлер арасындағы үтірден соң, бос орын қоймаған дұрыс.
Мысал. Пілдердің суреті slon.jpg орналасқан жеке терезе ашу
<HTML>
<HEAD>
<TITLE>Браузерді тексеру</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Браузерді тексеру</H2> <HR>
<SCRIPT language=JavaScript>
<!--
var win = open("slon.jpg","",
"width = 320,height = 260"+
"resizable =0,scrollbars =1"+
"menubar =0,location = 1" +
"status = 0, toolbar = no");
//-->
</SCRIPT>
<P>
Негізгі мәтінге оралу үшін браузердің саймандар тақтасында орналасқан <EM>Артқа қарай (Назад)</EM>батырмасын басыңыз.
</BODY>
</HTML>
Терезеде көрсетілетін файл ретінде мыналарды көрсете аламыз:
· HTML-файл, мысалы, file1.htm;
· сурет файлы, мысалы,./pic/fish.gif;
· мәтіндік файл, мысалы, 010401.txt.
Осы программа нәтижесі:
Сlose тәсілі ашық терезені жабады. Мұндағы close()немесе window.close() ағымдағы терезені жабады. Ал win.close() немесе window, win.close() — осы терезеден open тәсілі арқылы ашылған win нұсқауышы бар терезені жабады:
var win = window.open(...);
Document объектісі
Document объектісі (ол document объектісі қасиеттері болып табылады) <html>...</html> блоктарында орналасқан тәгтерді модельдейтін объектілер үшін қажет.
Document объектісінің кең тараған тәсілі – write тәсілі. Бұл тәсіл құжат терезесіне мәлімет жазу үшін керек. Write тәсілін қолдану алдында жазба ашу керек (open тәсілі), ал шығарған соң, оны жабу керек (close тәсілі).
Open тәсілі форматы:
айнымалы.document.open();
Мұндағы: айнымалы – бұл мәлімет жазылатын терезеге нұсқауыш.
Write тәсілі форматы:
document.write(жазба); немесе
айнымалы.document.write(жазба);
Мұндағы: айнымалы – бұл шығарылатын мәлімет көрсетілетін терезеге нұсқауыш. Егер айнымалы берілмесе, онда мәлімет ағымдағы терезеге жіберіледі; жазба – шығарылатын мәлімет көрсетілетін сөз тіркесі.
Close тәсілі форматы:
document.close(); немесе
айнымалы.document.close();
Мұндағы айнымалы – жазба шығарылмай жабылатын терезеге нұсқауыш. document.open тәсілін қолдану міндетті емес, өйткені document.write тәсілі жабылған құжатқа мәлімет жазу кезінде оның ішіндегі ескі мәліметті өшіріп, оны жаңа жазба үшін ашады.
Мысал. Келесі суреттегі бейнені құру программасы:
var win = open("","","width=300,height=200"); win.document.write("Мысал: Бұл парақ "); win.document.write("программалық тәсілмен құрылған."); win.document.close();
Терезеге мәтін шығару кезінде write функциясы бірнеше рет қолданылғанымен, оның нәтижесі бір тұтас азат жол ретінде шығарылады.
|
Write тәсілі арқылы терезеге жай мәтіннен басқа тәгтермен белгіленген мәтінді де шығаруға болады (4.24- сурет).
var win = open("","","width=300,height=200"); win.document.write("<H2>Мысал </H2>"+
"<HR>" +
"<P>" +
"Бұл парақ" +
" программалық тәсілмен құрылған.");
win.document.close();
|
4.12. Оқиғалар
Браузер тұтынушы әрекеттерін қадағалап, соларға сәйкес әрекет ете алады. Егер терезеде тышқанды шерту сілтемеге сәйкес келсе, браузер жаңа құжат жүктейді. “Alt + ” пернелерін басу терезені бұрынғы қалпына қайтарады.
Егер тұтынушы тышқан курсорын суретке алып барса, онда браузер шағын терезеге сол <img> тәгіне, яғни суретке сәйкес alt-мәтін шығарады. Тұтынушы бағыттауыш пернелерді басса, браузер сәйкесінше терезедегі мәтінді жылжытады.
Бұлардың бәрі тышқан мен пернеліктің браузерге тұтынушының не істеп жатқаны жайлы «хабар беріп» отыратынын білдіреді. Оған қоса, браузер құжаттың жүктелуі жайлы да толық хабардар болып отырады. Егер сурет жүктелмесе (дискіде жоқ, сервермен байланыс үзілді), браузер оның орнына тіктөртбұрыш қояды. Осындай информациялық хабарламалар оқиғалар (события) деп аталады. Кейбір оқиғаларға браузер бірден жауап береді, ал басқаларына жайбарақат қарап тұра беруі де мүмкін. Мұндайда браузерге не істеуі керек екендігі айтылмаған деп ұққан жөн.
HTML-код арқылы браузер салған батырма мынадай болады(4.25 суретті):
<FORM>
<INPUT type=button
value="Кәдімгі батырма">
</FORM>
Батырма <form>...</form> тәгінің ішкі <input> тәгі арқылы берілген. value атрибуты батырма бетіндегі жазуды береді, ал type атрибуты енгізу өрісінің типін сипаттайды. Браузер батырманы шерткенде, оған жауап бере ме? Әрине, ол экранда батырманы басқанды көрсетеді, бірақ басқа ешнәрсе істемейді.
Ал енді басқа батырмаларды қарастырайық.
<FORM>
<INPUT type=button value="Құпиялы батырма"
onclick="alert('Сәлем!')">
</FORM>
Экранға «Сәлем!» сөзі бар alert терезесі шығады (4.26-сурет). <input> тәгінің onclick атрибуты бар. Оның мәні ретінде: "alert('Сәлем!')" сөзі жазылған. onclick атрибуты браузерге батырма басылғанда не істеу керек екендігін көрсетіп тұр. Атрибут мәні ретінде ұзын сөз жазудың қажеті жоқ, көбінесе келесі түрде программаланады.
<SCRIPT language=JavaScript>
<!--
function Fun()
{ var now = new Date();
alert("Бүгін: "+now.getDate()+"/"+
(now.getMonth()+1)+"/"+ now.getYear() +
"\nҚәзір: "+now.getHours()+":"+now.getMinutes());
}
//--> </SCRIPT>
<FORM>
<INPUT type=button
value=Күнтізбе onclick="Fun();">
</FORM>
onclick оқиғасы туғанда – батырманы шерткенде жұмыс істейтін Fun() функциясы сол оқиғаның өңдеуіші болып саналады.
|
Осы программаны браузерге жүктеп бірнеше тәжірибе жүргізіңдер.
1. Батырмадағы сөзді өзгертіп «Күнтізбе» орнына басқа мәтін жазыңдар.
2. Fun функциясы кодын басқаға, мысалы, мынаған өзгертіңдер:
var sum = 0;
for (var i = 100; i; i --) sum += i;
alert("Қосынды 1 + 2 +... + 100 = " + sum);
3. Өз функцияларыңды жазып шығыңдар. Мысалы, бір сан енгізіп оның квадратын немесе кубын табыңдар.
Сонымен, JavaScript HTML-кодтарында оқиғаларды өңдейтін программалар жазуға мүмкіндік береді де, оны интерактивті бет етуге, яғни тұтынушы әрекетіне жауап беретіндей күйге келтіре алады.
Тәгтегі onclick түйінді сөзі - «оқиғалық» атрибуттың аты, алдына «on» сөзі қойылып жазылады. Мұндай атрибут мәні скриптік код болып табылады. Егер оқиға орындалса, онда атрибут аты арқылы кодталған скрипт іске қосылады. Onclick атрибуты «экрандағы белгілі нүктені тышқанмен шерткенде» орындалатын оқиғаны өңдеуді жүзеге асырады.
Мысалы: Қабырғасының ұзындығы берілген жағдайда квадраттың ауданын анықтау программасын жазайық. Ауданның мәні қабырғаның мәні өзгерген сәтте есептелуі тиіс. Екі мәтіндік өріс енгізілген форма құрайық: оның бірі квадраттың қабырғасының мәнін енгізу, ал екіншісі аудан мәнін есептелген мәнін шығару үшін қажет. Жаңарту батырмасы форма өрістерін тазалайды. Квадрат ауданы change оқиғасы туындаған мезетте, формадағы numl деген элемент мәні өзгергенде және элемент фокусын жоғалтқанда есептеледі.
<HTML>
<HEAD>
<title> Change -элемент мәнін өзгерту оқиғасы</title>
<script>
function srec(obj)
{ obj.res.value=obj.numl.value* obj.numl.value}
</script>
</HEAD>
<BODY>
<h2>Квадрат ауданын есептеу</h2>
<FORM name="forml">
Қабырғасының ұзындығы: <input type="text" size=7 name="numl"
onChange="srec(forml)">
<hr>
Аудан: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Жаңарту>
</FORM>
</BODY>
</HTML>
Интерактивті құжат мысалы
Экранда бір енгізу өрісі және төмендегідей сипаттамалары бар төрт батырма болсын:
– ағымдағы уақытты береді;
– жаңа терезе ашып, оған сәлемдесу мәтінін шығарады да, терезені жабады;
– есептелетін өрнекті енгізу өрісі;
– енгізу өрісіндегі арифметикалық өрнектің мәнін көрсету өрісі;
– терезе жабу батырмасы.
Енді осы әрекеттерді программалайық.
<HTML>
<HEAD><TITLE>Интерактивті парақ</TITLE>
<SCRIPT language=JavaScript>
function CurTime()
{ var now = new Date();
alert("Бүгін: "+now.getDate()+"/"+
(now.getMonth()+1)+"/"+ now.getYear() +
"\nҚәзір: "+now.getHours()+":"+
now.getMinutes()); }
function Hallo()
{ var win=window.open("","",
"width=400,height=300");
win.document.open();
var str = "";
str += '<H1>Сәлем!</H1>';
str += '<HR>';
str += '<P>';
str+='Веб-программалаушылар! Қатарларың толыға берсін!';
str += '<P>';
str += '<FORM>';
str += '<INPUT type=button value=Жабу';
str +=' "onclick"="window.close()">';
str += '</FORM>';
win.document.write(str);
win.document.close(); }
</SCRIPT>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Интерактивті парақ</H2> <HR>
<FORM>
<INPUT type=button value=Уақыт
onclick="CurTime()">
<INPUT type=button value=Сәлем
onClick="Hallo()">
<INPUT type=text value="2*2" size=25
name=calc>
<INPUT type=button value=жауап
onclick="alert(eval(this.form.calc.value))">
<P>
<INPUT type=button value=жабу
onclick="window.close()">
</FORM>
</BODY>
</HTML>
Мұндағы: CurTime функциясы Уақыт батырмасын шертуді өңдейді. Hallo функциясы Сәлем батырмасын шертуді өңдейді. alert функциясы Жауап батырмасын шертуді өңдейді. alert функциясы аргументі болып eval функциясының мәні есептеледі. eval (document,forma,calc.value) Еval функциясы аргументі болып берілген енгізу өрісінің мәні болып табылады. Мұндағы: forma – бұл объект, ол мынадай блокбейнесі
<form name=forma … >...< /FORM >;
calc- бұл объект, ол мынадай тәгбейнесі
< INPUTname=calc … >;
value – бұл calc объектісі қасиеті. Window.close (...) функциясы Жабу батырмасын өңдейді.CurTime және Hallo функциялары сипатталған <script>...</script> блогы HTML-коды тақырыбында келтірілген. Себебі браузер функция сипатталуын оларды пайдаланғанға дейін оқуы тиіс, құжат тақырыбы ең алдымен орындалады ғой.
Программа жұмысы нәтижесі:
|
Window объектісі және оның тәсілдері
1. Тәсіл түрі – open(файл, терезе_ параметрі). Жыл мәнін береді, 20-ғасыр үшін соңғы 2 цифрды береді.
Мысал:
var okno = window.open(‘.pic/dog03.jpg,””, ”width=250,height=300,left=50,top=100,”+
“scrollbars=1,resizable=no,menubar=no,”+
“location=no,status=no,toolbar=no,”+
“fullscreen=no”);
2. Тәсіл түрі – alert(хабарлама). Мәліметі бар ақпараттық терезе шығарады.
Мысал:
window.alert(“Палуанның жаманы–\n”+
“Шалдырған соң өкінер,\n”+
“Күзетшінің жаманы,\n”+
“Алдырған соң өкінер\n”+
“Мақал”);
3. Тәсіл түрі – confirm(хабарлама). 2 батырмасы бар сұрақ мәліметі бар терезе шығарады. ОК және Отмена. Функция нәтижесі: - true, егер ОК басылса; - false, егер Отмена басылса.
Document объектісі және оның тәсілдері
write және writeln тәсілдерін пайдалану келесі жағдайларда ғана тиімді болып табылады:
§ ұзын HTML-кодты қысқа скрипт алмастыра алса;
§ құжат браузер ерекшелігі - экран мүмкіндігі және т.б. есепке алынып тұрғызылса;
§ құжат толық программалық жолмен жасалса.
Программалық басқару принципі
1.
Браузер гипермәтіндік парақ ішіндегі әрбір тәг үшін объект жасай алады. Ал сол объектімен программалаушы name атрибутында көрсетілетін оның аты арқылы қатынас құра алады. Сонымен, тәгтерді программалық басқару мүмкіндігі пайда болады. Мысалы, HTML-кодта экранға сурет шығаратын мынадай тәг берілген болсын делік:
<IMG src=./pic/ris1.gif
border=0 alt="" name=pic>
Осы тәг арқылы pic атты стандартты image объектісінің данасын мынадай эквивалентті конструкциялар арқылы пайдалануға болады:
window.document.images["pic"]
window.document.images.pic
немесе ағымдағы терезе ішінде болатын болса:
document.images["pic"]
document.images.pic.
Мысалы, image объектісінің суреті бар файлға нұсқайтын src қасиеті бар екені белгілі. Программада осы қасиетті төмендегі жолды жазып оқуға болады:
document.images.pic.src
Тек қана оқып қана қоймай, бұл қасиеттің мәнін де өзгерте аламыз:
document.images.pic.src = "./pic/ris2.gif"
сонда сурет сәйкесінше басқа суретке ауысады.
<Form> блогы
Гипермәтіндік құжаттармен жұмыс істей отырып, мәтіндерді енгізу өрісіне жазып, меню пункттерін таңдап, жалауша арқылы бір жолды таңдап, батырмаларды шертуге болатынын көргенбіз. Мұндайда әрекетке байланысты құжаттың соған жауап беретінін байқаймыз.
Осы интерфейстік элементтердің бәрі браузер экранына контейнер-команда <form>...</form> арқылы шығарылады, ал батырмалар, енгізу өрісі, жалаушалар және меню осы блок ішіндегі әр түрлі тәгтер арқылы берілетін.
<form>...</form> блогы форма деп аталады. Оның ашылу тәгінде мынадай атрибуттар жазылады.
action - форманы желі бойынша жөнелту адресін береді. Форманы оны өңдейтін программасы (CGI-скрипт) бар серверге жіберуге болады немесе оның мәні ретінде электрондық пошта адресі көрсетілсе, форма e-mail арқылы жөнелтіледі. Мысалы, былай жазуға болады:
<FORM action="mailto:myaddres@mail.ru">
Егер ол көрсетілмесе форма сайттағы адресі бойынша жөнелтіледі.
enctype – желі арқылы берілетін мәліметтерді кодтауды береді. Мұнда біз формадан алынған мәліметтерді өңдейтін программаларды қарастырмаймыз. Бірақ браузер тұтынушы толтырған форманы сіздің электрондық адресіңізге жібереді. Сол мәліметтерді қарап шығуға немесе басқа программа арқылы оны өңдеуге болады. Көбінесе төмендегідей толтырылған мәндер дұрыс жұмыс істейді:
<FORM action="mailto:myaddres@mail.ru" enctype="text/plain">
method - форманы тасымалдау тәсілін береді. Атрибуттың екі мәні бар: get және post. post тәсілі әмбебап болып саналады (форма URL-ден бөлек жіберіледі). get мәні форманың URL-мен бірге жіберілетінін көрсетеді. e-mail арқылы былай жіберуге болады:
<FORM action="mailto:myaddres@mail.ru"
enctype="text/plain" method="post">
name - форма атын береді. Мұны скриптерде форма өрістерін пайдалану үшін береді. Егер форманы ешқайда жібермеу керек болса, онда тек name көрсетіледі: <FORM name=anketa>
Енді JavaScript-кодтарында осы форманы былай пайдалануға болады: document.anketa. Егер форманың work атты жолдық өрісі болса, сол жолды айнымалыға меншіктеуге болады:
var str = document.anketa.work.value;
Осы өріс мәнін өзгерте аламыз:
document.anketa.work.value = "веб-мастер";
Бұдан кейін бұл өріс мәні өзгереді.
Е-mail арқылы форманы жөнелту
Келесі мысалды форманы электрондық пошта арқылы жіберудің үлгісі ретінде қарауға болады (4.30-сурет).
<FORM action = mailto:myaddres@mail.ru
enctype = "text/plain" method="post">
Басыңыз “Тазалау”Тапсырысты толтырыңыз.<BR>
<INPUT type=reset value=Тазалау><BR>
<P>
<TABLE border=0 cellspacing=0 cellpadding=5>
<TR> <TD>Сіздің атыңыз:</TD>
<TD> <INPUT type=text size=33 name=name
value="Қанатбек Жантөре">
</TD>
</TR>
<TR> <TD> Сіздің адресіңіз:</TD>
<TD> <INPUT type=text size=33 name=email
value="Jantore@mail.ru">
</TD>
</TR>
<TR> <TD>Жөнелту:</TD>
<TD> <INPUT type=text size=33 name=obj
value="Программалық шырынсыққыш">
</TD>
</TR>
</TABLE>
<INPUT type=submit value="тапсырысты жөнелту">
</FORM>
|
Егер осы кодты HTML-программаға кірістірсе, онда гипермәтіндік бетте төмендегі суреттегідей бейне пайда болады. Егер тазалау, батырмасын басып үнсіз келісім бойынша тағайындалған мәндерді өшіріп, жаңа мәндерді енгізуге болады. Форма толтырылған соң, Тапсырысты жөнелту батырмасын шертіп, оны қажетті адреске myaddres@mail.ru жөнелтуге болады.
Әдетте браузер мәліметті өзі жөнелтпейді, оны компьютердің операциялық жүйесіндегі пошта программасы атқарады (мысалы, Outlook).
5.
2.
3.
4.
5.
6.
7.
Батырмалар. <INPUT> элементі
Формада әр түрлі енгізу және басқару элементтерін орнатуға болады. Ол үшін <input> тәгі қолданылады.
Әрбір <input> тәгінде name атрибуты болады. Оның мәні браузер ашатын объект атауы (типі) болып табылады. Мысалы, бір ғана мәтін енгізу жолы бар форма берілсін делік:
<FORM name=anketa>
<INPUTtype=textvalue=Қаламұш
name=obj>
</FORM>
JavaScript программасындағы мынадай конструкция document.anketa.obj.value объектінің <input> тәгі үшін тұрғызылған value қасиетін пайдаланады (өзгертеді), Мұндай жазуды былайша түсіну керек:
document – document объектісі (атасы (тегі) - window объектісі); document.anketa – anketa объектісі (атасы - document объектісі); document.anketa.obj – obj объектісі (атасы - anketa объектісі); document.anketa.obj.value – obj объектісінің value қасиеті, ол <input> тәгінің obj атты value атрибутына сәйкес келеді. value қасиетінің мәнін былай меншіктеп оқуға болады:
var str = document.anketa.obj.value;
Бұл қасиеттің мәнін өзгерте аламыз:
document.anketa.obj.value = "қарындаш"
Мұндай меншіктеу экрандағы мәнді бірден өзгертеді.Енгізу өрісіндегі «қалам» мәні «қарындаш» мәніне ауысады.
Name атрибуты мәні айнымалы
аты тәрізді, сондықтан орыс/қазақ
әріптерін пайдаланбау керек және бірінші символ цифр болмауы тиіс.
Экрандық батырмалар
<input> тәгіндегі интерфейстік элементтің нақты бейнесі type атрибутымен беріледі. Осы атрибуттың экрандық батырмалар тұрғызатын мәндерін қарастырайық:
reset - шерткен кезде форманы автоматты түрде бастапқы қалыпқа келтіретін батырма жасайды (форманың барлық енгізу өрістері келісім бойынша HTML-кодта орнатылған алғашқы мәндерді қабылдайды). Ал value атрибуты батырмадағы жазуды көрсетеді:
<INPUT type=reset value=Тазалау>
submit - шерткен кезде форманы желі бойынша жөнелтетін батырма тұрғызады.
value атрибуты батырмадағы жазуды көрсетеді:
<INPUT type=submit value=жөнелту>
button – қарапайым батырма тұрғызады:
<INPUT type=button value= "Басу">
программалық басқару
Төмендегі тәг үшін браузер тұрғызған объектің <input type=button> (не мынадай тәгтер үшін <INPUT type=submit>,
<INPUT type=reset>)
value қасиеті болады, ол батырмадағы жазуды анықтайды. Төменде осы қасиетті пайдаланатын мысал келтірілген.
Браузерге осы мысалды енгізіп, ондағы батырмалар жұмысын тексеруге немесе өзгертуге, яғни алгоритмін бақылауға болады (4.31-сурет).
<HTML>
<HEAD>
<TITLE>Ақылды батырма</TITLE>
<SCRIPT language=JavaScript>
<!--
var num=0;
var name0="басу саны:0";
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Ақылды батырма</H2> <HR>
<FORM name=count>
<INPUT type=button value=сброс
onclick="document.count.key.value=name0;
num=0;">
<INPUT type=button name=key value="басу саны: 0"
onclick="document.count.key.value='басу саны:'+(++num);">
</FORM>
|
Форма өрістерін пайдалануды жеңілдету үшін, this нұсқауын - объектінің ағымдағы данасын көрсетуді және this.form нұсқауын - ағымдағы форма үшін тұрғызылған объектіге нұсқауды пайдаланамыз:
<FORM>
<INPUT type=button value=c6poc
onclick="this.form.key.value=name0;
num=0;">
<INPUT type=button name=key value="басу саны
onclick="this.value='басу саны:'+(++num);">
</FORM>
Бұл мысалда форма атын көрсету қажет болмады. Форма ішіндегі оның синонимі ретінде this.form конструкциясы қолданылды.
Ал екінші <input> тәгінде де оның атын жазбай-ақ, орнына оның синонимі this жазылды.
