Лекция · 4.9

Web-бетте скрипттерді қолдану (JavaScript негіздері)

Батырманы бассаң, форма деректі тексеріп, қате болса ескерту шығарса; сурет автоматты айналса — мұның бәрі HTML/CSS-тің қолынан келмейді! Оларға «өмір» сыйлайтын — JavaScript. Бүгін веб-бетті ИНТЕРАКТИВТІ ететін осы скрипт тілінің негіздерін үйренеміз.

JavaScript деген не
Анықтама
Скрипт — пайдаланушы интерфейсі арқылы тапсырмаларды автоматтандыратын код. JavaScript — HTML бетті ИНТЕРАКТИВТІ ететін (пайдаланушымен «байланысуға қабілетті») кіріктірілген сценарий тілі.

JavaScript коды <script>...</script> тегінің ішінде орналасады, оны HTML-ге қосудың екі жолы бар:

<!-- Ishki qosu: -->
<script type="text/javascript">
    document.write("Salem!");
</script>

<!-- Syrtqy fail arqyly: -->
<script src="myscript1.js"></script>
⚠️
Ескеру: <script> тегінің беттегі ОРНЫ маңызды — сценарий қай жерге орналасса, HTML құжатты интерпретациялау сол жерге жеткенде орындалады.
Диалог функциялары

JavaScript-тің пайдаланушымен «сөйлесетін» дайын функциялары бар:

ФункцияҚызметі
document.write()Мәтінді ТІКЕЛЕЙ бет мазмұнына шығарады
alert(хабарлама)Модальді терезе, OK батырмасын күтеді
prompt(тақырып)Мәтін енгізу өрісі бар терезе, енгізілген жолды қайтарады
confirm(сұрақ)OK/CANCEL терезесі, OK — true, CANCEL — false қайтарады
Есеп (орта): пайдаланушымен диалог

Берілді: пайдаланушыдан атын сұрап, сәлемдесіп, жұмысты аяқтау сұрағын қою.

var name = prompt('Atynyz kim?', '');
alert('Salem, ' + name);
var result = confirm('Siz zhumysty shynymen ayaqtagyngyz kele me?');
alert('Sau bolynyz, ' + name);

Жауабы: пайдаланушы «Ләззат» деп енгізсе — «Salem, Ләззат», содан кейін растау сұрағы, соңында «Sau bolynyz, Ләззат» терезесі шығады.

Оқиға өңдегіштер (event handlers)
Анықтама
Оқиға өңдегіштер — белгілі бір оқиға (батырма басу, мән өзгерту) болғанда орындалатын JavaScript кодын көрсететін HTML атрибуттары. Кең тарағандары: onclick, onChange, onload.
Есеп (орта): растау сұрағы қою

Берілді: «Жою» сілтемесін басқанда растау сұрағы шығуы керек.

<a href="delete.php" onclick="return confirm('Siz senimdisiz be?');">Zhoyu</a>

Түсіндірме: CANCEL басылса, return false арқасында сілтеме әрекеті ОРЫНДАЛМАЙДЫ.

Есеп (қиын): квадрат ауданын автоматты есептеу

Берілді: форма арқылы қабырға ұзындығын енгізгенде, ауданы автоматты есептелуі керек.

<script>
    function srec(obj) {
        obj.res.value = obj.num1.value * obj.num1.value;
    }
</script>
...
<form name="form1">
    Qabyrgasy: <input type="text" name="num1" onChange="srec(form1)">
    Audany: <input type="text" name="res">
</form>

Түсіндірме: onChange пайдаланушы мән енгізіп, өрістен ШЫҚҚАНДА (фокусты жоғалтқанда) іске қосылады.

Тип түрлендіру ерекшелігі

JavaScript-те сан мен жолды бірге қолданғанда таңғаларлық нәрсе болады:

Есеп (қиын): жол мен санды араластыру
var str = "20";
var a = 5;
document.write(str + a);   // ?
document.write(str - a);   // ?
document.write(str * "2"); // ?

Неге нәтижелер әртүрлі? + операторы, егер операндтардың БІРЕУІ жол болса, БІРІКТІРУ (конкатенация) жасайды. Ал -, *, / операторлары операндтарды АВТОМАТТЫ түрде санға түрлендіреді.

  • str + a → "205" (жол біріктіру!)
  • str - a → 15 (сандық азайту)
  • str * "2" → 40 (сандық көбейту)

Жауабы: тек + операторы жолмен «біріктіреді», қалғандары санға түрлендіріп есептейді.

⚠️
Жиі кездесетін қате: сандарды жол ретінде сақтап, + арқылы «қосу» деп ойлау — нәтижесінде екі санды қоспай, БІРІКТІРІП жібересің.
🎯 ҰБТ байланысы
Диалог функцияларының қайтаратын мәні мен тип түрлендіру ерекшелігі жиі тексеріледі.
1
confirm() — true/false, prompt() — жол немесе null қайтарады.
2
«+» операторы жолмен біріктіреді, «-», «*», «/» санға түрлендіреді.
3
onclick, onChange — оқиға болғанда іске қосылатын атрибуттар.
Сабақ қорытындысы
  • JavaScript — веб-бетті интерактивті ететін сценарий тілі, <script> тегінде жазылады.
  • alert(), prompt(), confirm() — пайдаланушымен диалог жүргізетін дайын функциялар.
  • onclick, onChange, onload — оқиға болғанда орындалатын атрибуттар.
  • «+» жолды біріктіреді, «-»/«*»/«/ » автоматты санға түрлендіреді.