- •JavaScript сабақтары Неден бастайық?!
- •Негізгі ұғымдар
- •Объектілік модель
- •Терезенің өлшемі мен орны
- •Модальды сұхбат/диалог
- •Оқиғалар
- •Формалар
- •Форманың толымдылығын тексеру
- •Тайминг
- •Құжатты оқып-үйренуді жалғастырамыз
- •Презентациялар жасау (жиымдар мен суреттерге ауысамыз)
- •Презентациялар (кодтың сипаттамасы)
- •Суреттер және тышқан оқиғасы
- •Фотоальбом құрайық
- •Суретті ауыстыру үшін сілтемені шертіңіз (бұл жерде олар істемейді, тек мысал үшін ғана):
- •Суреттерді үлкейту
Объектілік модель
Енді біз теориядан нақты іске көшейік. Біздер оқиға, обьект дегендердің не екенін білдік. Java Script тілінің обьектілік моделін қарастыруға кірісейік.
Сонымен обьектілік модель мыналардан: объектілерден; қасиеттерден; әдістерден; оқиғалардан; коллекциялардан құралады. Осы бүкіл бес ұғым өзара бірі-бірімен байланысқан. Осы өзара байланысты window обьектісінің мысалы арқылы қарастырайық.
Window обьектісінің мынадай қасиеттері бар: clientInformation, closed, defaultStatus, dialogArguments, dialogHeight, dialogLeft, dialogTop, dialogWidth, document, event, history, length, location, name, navigator, offscreenBuffering, opener, parent, returnValue, screen, self, status, top Window обьектісінің әдістеріне мыналар жатады: alert, blur, clearInterval, clearTimeout, close, confirm, execScript, focus, moveBy, moveTo, navigate, open, prompt, resizeBy, resizeTo, scroll, scrollBy, scrollTo, setInterval, setTimeout, showHelp, showModalDialog Window обьектісінің оқиғалары мыналар: onbeforeunload, onblur, onerror, onfocus, onhelp, onload, onresize, onscroll, onunload Ал Window обьектісінің коллекция элементі біреу, ол: frames Осы бір ғана Window обьектісінің көмегімен парақты әлдеқайда жандандыруға болады. Сондықтан бұл обьектіге біз бірнеше тарауды арнайтын боламыз. Ал енді осы бар құралдарды пайдаланып көрейік. Мына HTML құжатты көшіріп, сосын тестілеңіз:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тышқан тінтуірінің орны</title>
<SCRIPT LANGUAGE="JScript">
<!--
function setStatus()
{
window.status = "Жүктелді";
}
function MouseCoord() {
window.status = "X=" + window.event.x + " Y=" + window.event.y;
document.title = "Тінтуір орны (" + window.event.x + ",
" + window.event.y + ")";
}
-->
</SCRIPT>
</head>
<body onload="setStatus()" onmousemove="MouseCoord()">
<h3 align=center>Тышқан тінтуірінің қалып-күй жолы мен парақ //тақырыбындағы орнын қадағалаңыз. </h3>
</body>
</html>
Ал мұны келесі жолы бірге қарастырамыз.
Терезенің өлшемі мен орны
Java Script-те терезенің орнын орнатуға да window обьектісі жауап береді. Обьектінің мына әдістері:
moveBy
moveTo
resizeBy
resizeTo
scroll
scrollBy
scrollTo
терезенің өлшемі мен орнын анықтайтын болады. moveBy(X, Y) – терезені ағымдағы терезе орнына қарағанда санақ нүктесі сол жақ жоғарғы бұрыштан Х шамаға (көлденеңінен, пикселмен) және Y шамаға (тігінен) жылжытады.
moveTo(X, Y) – терезені санақ нүктесі сол жақ жоғарғы бұрыштан (X, Y) нүктесіне жылжытады. resizeBy(X, Y) – терезе өлшемін оның ағымдағы өлшеміне қарағанда Х шамаға (көлденеңінен, пикселмен) және Y шамаға (тігінен) өзгертеді.
resizeTo(X, Y) – терезенің ені Х (пикселмен) және биіктігі Y болатындай абсолюттік өлшемін береді.
scroll(X, Y) – терезенің жүйелік аумақтағы деректерін (X, Y) нүктесіне ауыстырады, яғни айналдыру жолақтарын X пен Y-ке ығыстырады. scrollBy(X, Y) - терезенің жүйелік аумақтағы деректерін ағымдағы орнына қарағанда көлденеңінен X-пикселге және тігінен Y-пикселге айналдырады.
scrollTo(X, Y) - терезенің жүйелік аумақтағы деректерін (X, Y) нүктесіне айналдырады. Осы әдістердің қалай жұмыс істейтіндігін көру үшін, мынадай HTML- құжат құрып, оны тестілейік:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>Терезені басқару функциясын тестілеу</title>
</head>
<body>
<h2 align=center>Терезенің өлшемі мен орнын басқару<br>батырманы таңдаңыз:</h2>
<center>
<input type="button" value="MoveBy(20,20)"
onclick="moveBy(20,20);">
<input type="button" value="MoveTo(10,10)"
onclick="moveTo(10,10);"><br><br>
<input type="button" value="resizeBy(50,50)"
onclick="resizeBy(50,50);">
<input type="button" value="resizeTo(400,400)"
onclick="resizeTo(400,400);"><br><br>
<input type="button" value="scroll(0,15)"
onclick="scroll(0,15);">
<input type="button" value="scrollBy(0,-15)"
onclick="scrollBy(0,-15);"><br><br>
<input type="button" value="scrollTo(0,30)"
onclick="scrollTo(0,30);">
</center>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
</body>
</html>
Мына код:
<p> </p><p> </p><p>
</p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p>
</p><p> </p><p> </p><p> </p>
көлденең скроллинг әдісін көру мақсатымен қолдап тік айналдыру жолағын жасау үшін қолданылған.