- •JavaScript сабақтары Неден бастайық?!
- •Негізгі ұғымдар
- •Объектілік модель
- •Терезенің өлшемі мен орны
- •Модальды сұхбат/диалог
- •Оқиғалар
- •Формалар
- •Форманың толымдылығын тексеру
- •Тайминг
- •Құжатты оқып-үйренуді жалғастырамыз
- •Презентациялар жасау (жиымдар мен суреттерге ауысамыз)
- •Презентациялар (кодтың сипаттамасы)
- •Суреттер және тышқан оқиғасы
- •Фотоальбом құрайық
- •Суретті ауыстыру үшін сілтемені шертіңіз (бұл жерде олар істемейді, тек мысал үшін ғана):
- •Суреттерді үлкейту
Модальды сұхбат/диалог
Window обьектісі Java Script-те (open әдісіне ұқсас) қалқымалы сұхбат-терезесін жасауға мүмкіндік береді. Мұндай сұхбаттарда белгілі бір ақапаратты енгізіп және соның негізінде сұхбатты шақыратын терезені, осы енгізілген ақпараттарды өңдеу нәтижелерін қайтаруға болады. Төменде біз ашылатын сұхбат-терезеде енгізілетін параметрлер ретінде екі қосылғышы бар, ал сұхбат шақырылатын терезеге олардың қосындысын қайтаратын қарапайым мысалды қарастырайық. Бірақ әуелі оның теориясына қысқаша тоқталайық.
Window обьектісінің showModalDialog әдісі бар. Оның синтаксисі мынау:
showModalDialog(URL, Arguments, Features) URL шақырылатын HTML- құжат (open() әдісіндегі сияқты). Arguments жиым сұхбатына параметрлер жеткізу қызметін атқаратын міндетті емес параметр. Әзірге жиымды қарастырмағандықтан бұл параметрді қолданбаймыз. Алайда бұл параметр window обьектісінің – dialogArguments қасиетінің көмегімен берілетінін білген жөн. Features те, шақырылатын терезенің өлшемін анықтайтын міндетті
dialogWidth: сұхбат терезенің енін білдіретін сан. dialogHeight: сұхбат терезенің биіктігін білдіретін сан. dialogTop: шақырылатын терезенің тігінен алғандағы сұхбат терезенің сол жақ жоғарғы бұрыштағы орнын білдіретін сан.
dialogLeft: шақырылатын терезенің көлденеңінен алғандағы сұхбат терезенің сол жақ жоғарғы бұрыштағы орнын білдіретін сан.
center:{yes | no | 1 | 0 } Сұхбат терезедегі ортаға туралау. Үнсіз келісім бойынша - yes. Мұнда өлшем бірлігі ретінде не алынатыны түсініксіздеу, анығы пикселмен емес, шамасы символдың санымен болуы мүмкін. Сол үшін де мен біздің мысал үшін шаманы тәжірибелік жолмен таңдадым. Сұхбат жұмысының нәтижесі, window обьектісінің қасиеті – returnValue-нің көмегімен алынатын мән болып табылады. Теорияны айтып болған сияқтымыз. Қалғанын іс барысында көрерміз. Кірісейік. Ол үшін әуелі dialog.htm деген атаумен HTML- құжат құрайық.
<html>
<head>
<title> Сұхбат </title>
<script>
function myDialog()
{
var left, top;
left = screen.width/2 - 20;
top = screen.height/2 - 12;
var argums =
"dialogWidth:20;dialogHeight:12;
dialogTop:top;dialogLeft:left;center:yes";
window.document.all.mySumm.value =
window.showModalDialog("adding.htm","", argums);
}
</script>
</head>
<body>
<center>
<h3>Сандар қосындысы </h3>
Қосынды: <input type=text value="0"
ID="mySumm"> <br> <br>
<input type=button value="Қосылғыштар"
onclick="myDialog();">
<input type=button value="Алып тастау"
onclick="window.document.all.mySumm.value=0;">
</center>
</body>
</html>
Біз мұнда не істедік. Біріншіден, кейін оған қатынас жасау үшін, mySumm идентификаторлы мәтіндік өрісті анықтадық. Бір ғана myDialog функциясын қарастырайық:
function myDialog()
{
var left, top; //айнымалыларды жариялау
left = screen.width/2 - 20;
top = screen.height/2 - 12;
var argums =
"dialogWidth:20;dialogHeight:12;
dialogTop:top;dialogLeft:left;center:yes";
window.document.all.mySumm.value =
window.showModalDialog("adding.htm","", argums);
}
Бұл жерде біз экран өлшемінің мәнін және шақырылған сұхбатты ортасы бойынша орналастыруға қажетті мәндерді алу үшін window обьектісінің қасиеті – screen-нің көмегіне жүгіндік. Мұндағы 20 мен 12 не қылған цифр? Бұлар алдында айтқан осы сұхбат үшін тәжірибелік жолмен алған сандарым. Ал showModalDialog әдісінің Features параметрін var argums ретінде жариялап, жолмен берейік. Одан әрі теңдік таңбасынан соң нүктелі үтір арқылы бергіміз келген барлық параметрлерді жазамыз. Осы функцияның негізгі қызметі showModalDialog әдісін шақыру болып табылады.
window.showModalDialog("adding.htm","", argums)
Бұрын айтқанымыздай, Arguments-ке тоқталмаймыз. adding.htm бұл жаңадан ашылатын сұхбат терезеге жүктелетін HTML- құжат. Біз қазір осыны қарастырамыз. Алдымен біздің сұхбат нені қайтаратынын көрейік. Оның жұмысының нәтижесі mySumm атты мәтіндік өріске меншіктелуі тиіс. window.document.all.mySumm.value түріндегі жазба мынаны білдіреді. Біз мұнда терезенің тек өзіне ғана емес, осы терезедегі құжаттың барлық (all) элементтеріне қатынас жасаймыз, соның ішінен идентификатор ID=mySumm болатын құжатты таңдаймыз. Яғни осындай идентификаторлы мәтіндік өрістің (value) мәніне өз жұмысының нәтижесінде сұхбат терезе қайтарған мәнді меншіктейміз. Ал енді adding.htm HTML- құжатын қарастырайық.
<html>
<head>
<title> Қосу </title>
<script>
function mySumm()
{
window.returnValue =
parseInt(window.document.all.first.value) +
parseInt(window.document.all.second.value);
window.close();
}
</script>
</head>
<body>
<center>
<h3>Қосылғыштарды енгізіңіз </h3> 1-қосылғыш: <input type=text
ID="first"> <br>2-қосылғыш: <input type=text ID="second"> <br> <br>
<input type=button value="Қосындыны алу"
onclick="mySumm()";>
</center>
</body>
</html>
Бұл жерден біз жаңа бір нәрсені көргеніміз жоқ. Идентификаторлары first және second болатын, екі қосылғышты білдіретін екі мәтіндік өрісті көрдік. Соңында window обьектісінің қасиеті – returnValue-ге екі қосылғыш қосындысының мәнін меншіктейміз.
parseInt(window.document.all.first.value)
біздің first атаулы мәтіндік өріс мәнін жол ретінде емес, сан түрінде интерпретациялау қажеттігін білдіреді. Айталық қосылғыш first = 3, ал second = 4 болса, онда мына түрдегі жазба:
window.document.all.first.value +
window.document.all.second.value
мынаның орнына
parseInt(window.document.all.first.value) +
parseInt(window.document.all.second.value)
"7"-нің орнына, "34"-ті қайтарар еді. Window обьектісінің close() әдісімен біз сұхбат терезесін жабамыз. Бұл әдіс бүкіл терезені жабуға мүмкіндік береді. Енді бізге dialog.htm және adding.htm HTML- құжаттарын құрып, оларды тестілеуден өткізу ғана қалды. Кәне бұларды өздерің жасап көріңдер.