Зертханалық жұмыс №15.2
Тақырыбы: Интернет-дүкен, Слайд-шоу құру.
Сабақтың мақсаты: JavaScript тілін пайдаланып интернет-дүкен құру мүмкіндіктерін меңгеру
Материалдар жане құралдар: жұмысты орындауға арналған методикалық нұсқау , дербес компьютер, Netscape Navigator және Internet Explorer браузерлері .
Жұмыстың орындалу реті:
1. Теориялық материалды игеру.
2. Жұмыстың орындалуы.
3. Бақылау сұрақтары.
Зертханалық жұмыстың орындалуына есеп беру формасы:
1. Зертханалық жұмыс номері
2. Tапсырма
3. Бағдарлама мәтіні.
4. Тестілеу нәтижесі.
5. Бақылау сұрақтарына жауап беру.
Әдістемелік нұсқау
Жалпы Интернеттік дүкен өте күрделі құралдарды талап етеді. Оны бір сабақ соңына дейін жасау мүмкін емес. Ол үшін жаңадан input түрімен танысамыз. Бұл тэг бағананы енгізуге арналған. Бұл – checkbox. Ол көптеген тізімдегі көп түрін таңдауға арналған. Мынадай суреттегі констуркциясындағы келесідегідей HTML - Операторында қортынды жасайды. (Сурет 20.1)
Сурет 20.1. Қарапайым таңдау тізімі
<html><head><title> Интернет - дүкен </title>
<script src=«cod4_2.js»>
</script><body>
<br><center><h1>Internet - дүкен</center></h1>
<center><img src =«11.gif» height=«50%»>
</center><br><center><h2>Гүлдер дүкені</center></h2>
<h2>Керекті гүлді таңдаңыз:</h2>
<h4><input type=«checkbox» id=«tov1» value=«7345»>Қызыл раушан
<br><input type=«checkbox» id=«tov2» value=«3220»>Жауқазын
<br><input type=«checkbox» id=«tov3» value=«4750»>Ақ раушан
<br><input type=«checkbox» id=«tov4» value=«2160»>Қырмызы
<br><input type=«checkbox» id=«tov5» value=«2300»>Сары раушан
<br><input type=«button» onclick=«count1()» value=«Құнының есебі»>
<input id=«itog»></br></body></html>
Сhecked –түрінің объектісі келесі негізгі қасиеттен тұрады:
Value-бұл осы мағынадағы келесідегідей бағдарламаның жасалуы үшін және Сhecked-логикалық мағанасын береді. Егер ішкі объектілердің жадысы жаңа таңдалынған болса және true мағынасы керісінше. Мұндай жағдайларда басқа бағдарлама count1() біз өзіміздің таңдаған затымыз жалпылай бағасын санағанда келесідегідей түрде болады:
function count1()
{itog.value=0;
if(tov1.checked)
{itog.value=Number(itog.value)+Number(tov1.value);} }
Number() функциясы жолдық сандағы мағынасы бұрынғыдай арифметикалық түсініктегі «+» белгісін қажет етеміз.
Слайд-шоу жасау үшін басқаша айтқанда сіз жасаған суреттер әр-бір 5-секунд сайын өзгеріп отыру үшін JavaScript бағдарламмасында мұндай мүмкіндікті сізге береді. Жаңа бетті қажет етуге сол пайдалы болады.
Сурет 20.2. слайд – шоу бетінде көрсетілген
Бірнеше жаңа суреттер бізге басты функцияның мәні бойынша қажет етіліп жабылады. Басқаша айтқанда JavaScript-тің файылы бөлім бойынша жауап береді. Бағдарламмалар келесі мысалда көрсктіледі:
x=0;
function slide() {
pictures=new Array("ex.jpg","ex1.jpg","ex2.jpg","ex3.jpg");
period=1000; setTimeout("slide()",period); ris1.src=pictures[x];
x=x+1;
if(x>=pictures.length)
{x=0}; }
Сіздер үшін массивтік кеңейтілуі length. Егоатауымен анықтауға болады. Оның қолданылуы массив элементін қолдан санау емес және бағдарламаның түр сипатын өзгерту емес тек тікелей аптаматты түрде қолданылуында.JavaScript салыстыру операторын төмендегідей көзсетейік:
|
== (двойное равенство без пробел) |
тең (қатарынан екі тең) |
|
!= |
тең |
|
> |
үлкен |
|
>= |
Үлкен және тең |
|
< |
Кіші |
|
<= |
Кіші және тең |
Тапсырмалар:
1. count1() бағдарламасын аяқтаңыз.
2. Өз қалауыңызша басқа Интернет –дүкенді құрыңыз интернет арқылы сатып алушылар үшін :мысалы: азық-түлік сату,техникалық құралдарды сату үшін жарнамалау керек.
3. Жаңа бетке слайд – шоуды беріңіз.
4. Аяқ жағына келесілерді қосыңыз: жылдамдату, бәсеңдету және практикалық сурет жасап қойыңыз.
5. Слайд-шоуды жан-жақты етіп қандай пәнге болса да қолдануға болатындай жасау керек.
Бақылау сұрақтары:
1. Интернет дүкен құру үшін негізгі компоненттер
2. JavaScript тілін пайдаланып интернет-дүкен құру мүмкіндіктері.
3. Интернет дүкеннің пайдалылығы.
4. Слайд-шоу дегеніміз не?
5. Слайд шоу құру жолдары.
6. JavaScript тілін пайдаланып слайд-шоу құру мүмкіндіктері.
Блиц-тест
1.JavaScript. join(ажыратқыш) тәсілі не үшін қажет?
A) Ажыратқыш арқылы бөлініп орналасқан массив элементтері жолын береді.
B) Бұрынғы массивке array массиві қосылған жаңа массив жасап береді
C) Массив элементтерін оның 1-элементі соңғысы болатындай етіп кері бағытта орын ауыстырыпбереді.
D) Массив ұзындығын береді.
E) Массивті сұрыптайды.
2.JavaScript. sort(function) не sort() тәсілдері нені береді?
A) Массив элементтерін сұрыптайды.
B) Бөлініп орналасқан массив элементтері жолын береді.
C) Бұрынғы массивке array массиві қосылған жаңа массив жасап береді
D) Массив элементтерін оның 1-элементі соңғысы болатындай етіп кері бағытта орын ауыстырып береді.
E) Массив ұзындығын береді.
3.JavaScript. length тәсілі не үшін керек:
A) Массив ұзындығын береді.
B) Бөлініп орналасқан массив элементтері жолын береді.
C) Бұрынғы массивке array массиві қосылған жаңа массив жасап береді
D) Массив элементтерін оның 1-элементі соңғысы болатындай етіп кері бағытта орын ауыстырып береді.
E) Массивті сұрыптайды.
4.JavaScript. Ашылатын терезеге нұсқауыш:
A) айнымалы
B) сөз тіркесі
C) терезе_қасиеттері
D) Файл
E) терезе_аты