- •JavaScript сабақтары Неден бастайық?!
- •Негізгі ұғымдар
- •Объектілік модель
- •Терезенің өлшемі мен орны
- •Модальды сұхбат/диалог
- •Оқиғалар
- •Формалар
- •Форманың толымдылығын тексеру
- •Тайминг
- •Құжатты оқып-үйренуді жалғастырамыз
- •Презентациялар жасау (жиымдар мен суреттерге ауысамыз)
- •Презентациялар (кодтың сипаттамасы)
- •Суреттер және тышқан оқиғасы
- •Фотоальбом құрайық
- •Суретті ауыстыру үшін сілтемені шертіңіз (бұл жерде олар істемейді, тек мысал үшін ғана):
- •Суреттерді үлкейту
Форманың толымдылығын тексеру
Айталық сіз поштаны жөнелтуге арналған форманы құрдыңыз делік.
<center>
<form action="mailto:сіздің е-mail?SUBJECT=From site"
enctype=text/plain method=POST name="poster">
<input type=hidden name="tip" value="Менің сайтымнан жөнелтілген хабарлама...">
<p>E-mail-ды енгізіңіз:
<input type="text" name="address" value="">
<p>Хабарлама тақырыбын енгізіңіз:
<input type="text" name="subject" value="">
<p>Хабарлама мәтіні: <br>:
<textarea name="adding" cols="30" rows="10">
</textarea>
<p> </p>
<input type=Submit value="Жөнелту" name="Submit">
<input type="reset" value="Форманы тазарту" name="reset">
</form>
<
Форманың түрі мынадай болады: (соңына дейін оқып болғанша, ештеңе баспаймыз)
E-mail-ды енгізіңіз E-mail-ды енгізіңіз Начало формы
E-mail
ды енгізіңіз:
Хабарлама тақырыбын енгізіңіз:
Хабарлама
тақырыбы:
Конец формы
"Форманы тазарту" батырмасы түсінікті сияқты, бірақ "Жөнелту" батырмасын біз былай қайта жазайық:
<input type=button value="Жөнелту" name="submit" onclick="checkform();">
Оның қалай көрінетінін қарайық:
Көріп отырғанымыздай, ештеңе өзгерген жоқ. Бірақ енді бұл батырма форманы жөнелтіп қана қоймайды, checkform() функциясын да шақыратын болады.
Бұл функция не істейді? Бізде форманың – poster (ол <form> тэгімен берілген) деген аты бар. Java Script-те ол бізге басқаруға мүмкіндік беретін обьект ретінде болады:
фокустың бар екендігін тексереді, яғни осы жағдайда форманың қай элементі белсенді екендігін немесе біз қайсысымен жұмыс істеп тұрғанымызды анықтайды. Форма элементіне фокус орнатылып қойылуы да мүмкін.
Форманың қандай бір өрісі толтырылған ба соны тексереді.
Обьект әдістері (немесе функциялары) нүкте арқылы шақырылады.
Сонымен біздегі обьект - poster, ал оның ішкі обектілері – формадағы өріс аттары.
Адрес өрісі толған-толмағанын қалай тексеруге болады? Әрине, ол тіпті оңай!
if (poster.address.value=="")
{
alert("Адрес өрісі бос! Жөнелтетін адам жоқ");
poster.address.focus();
}
Біз мұнда не істегіміз келіп еді? Адрес өрісі – address-тің бос екендігін тексергіміз келген. Бұл құрылымның түсіндірмесі мынау: "егер poster формасының address өрісінің мәні бос-қа тең болса (бірінен кейін бірі қойылған екі тырнақша, осыны білдіреді), онда ескерту терезесі – alert-ті шақыру және пайдаланушыны мәжбүрлеп форманың осы өрісіне әкелу, яғни фокусты poster формасының address өрісіне орналастыру " .
Ал форманы қалай жөнелтеміз? Ол тіпті оңай!
poster.submit();
Біз енді ньюанстарды білдік деп есептеп, checkform() функциясының қалай жазылып, қалай орналасуын қарастырайық.
function checkform()
{
if (poster.address.value=="")
{
alert("Адрес өрісі бос! Жөнелтетін адам жоқ!");
poster.address.focus();
}
else if (poster.subject.value=="")
{
alert("Хабарлама тақырыбы көрсетілмеген!!!");
poster.subject.focus();
}
else if (poster.adding.value=="")
{
alert("Сіз бос хат жөнелтесіз бе!");
poster.address.focus();
}
else
poster.submit();
}
Бұл функцияны <head> және </head> тэгтерінің аралығына орналастырған жөн (дұрысы <title>-ден кейін), мұның Java Script екенін ескеріп, оны <script> пен </script> жақтауына алуды ұмытпаңыз.
Енді ең басында орналасқан формамен эксперимент жасап көруіңізге болады. Оны жөнелтуге қорықпаңыз. Ең болмағанда Мен Сізден хат алатын боламын, ал ол маған да жақсы.
