1. <script> tagı
HTML haqqında daha ətraflı öyrənməyə başlamazdan əvvəl, sizi daha bir əla şey ilə tanış etmək istəyirəm — JavaScript dili.
JavaScript — bu, dinamik və interaktiv veb-səhifələr yaratmaq üçün istifadə olunan güclü bir proqramlaşdırma dilidir. İstifadəçinin hərəkətlərinə reaksiya verməyə, veb-səhifələrin məzmununu dəyişməyə, serverlərlə qarşılıqlı əlaqə qurmağa və başqa bir çox üsullarla istifadəçinin saytdan istifadə zövqünü artırmağa imkan verir.
Hal-hazırda biz JavaScript-i öyrənməyəcəyik, amma bəzən nümunələrdə onu əlavə edəcəyəm, buna görə gəlin JavaScript-in HTML sənədinə necə yerləşdirildiyini izah edim.
<script> tagı JavaScript kodunu HTML sənədinə yerləşdirmək üçün istifadə olunur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript ilə tanışlıq</title>
</head>
<body>
<h1>Saytıma xoş gəlmisiniz!</h1>
<script>
// Burada sizin JavaScript kodunuz alert('Salam, dünya!');
</script>
</body>
</html>
Bu nümunədə sadə bir JavaScript kodunu yerləşdirmək üçün <script> tagı istifadə olunur. Kod istifadəçiyə "Salam, dünya!" mesajı ilə pop-up pəncərəsi göstərir.
2. Skripti qoşuruq
Bəzən daha yaxşıdır ki, JavaScript-kodu ayrı faylda saxlayasınız. Bu, kodun təşkilini və onun təkrar istifadəsini yaxşılaşdırır. JavaScript-faylını qoşmaq üçün də <script> teqindən istifadə olunur və src atributu ilə JavaScript-faylının adını təyin edə bilərsiniz.
Xarici JavaScript-faylının qoşulması:
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript ilə tanışlıq</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Saytıma xoş gəlmisiniz!</h1>
</body>
</html>
Bu html-fayl brauzerə script.js adlanan və yuxarıdakı nümunədəki eyni kodu ehtiva edə bilən JavaScript-faylını ona qoşmağı bildirir:
//script.js:
// Sizin JavaScript-kodunuz burada
alert('Salam, dünya!');
defer atributu brauzerə skirpti, bütün HTML-sənəd tam yüklənib və göstərildikdən sonra icra etməyi göstərmək üçün istifadə olunur.
3. Inline kod
Yadınızdadırsa, css stillərini elementin style atributunun içində birbaşa yazırdıq?
<p style="color:red"> Qırmızı</p>
Eyni qayda ilə JavaScript kodunu da yaza bilərsiniz.
Götürək ki, biz istəyirik ki, elementə klik etdikdə, onun rəngi mavi olsun. Bunun üçün aşağıdakı kodu yazmalıyıq:
<p style="color:red" onclick="this.style.color = 'blue';">Qırmızı</p>
Yaşıl rənglə bölüşdürülən JavaScript kodudur, bu kod istifadəçi <p> elementinə klik etdikdə icra olunacaq. Asandır, düzdür?
-
onclick: HTML atributu, hansı ki, elementə klik edildikdə icra olunan funksiyanı müəyyən edir. this: O elementə istinad edir ki, ona klik edilmişdir.-
style.color: Elementin mətni rəngini dəyişən CSS xüsusiyyəti.
GO TO FULL VERSION