الرئيسية › الدروس › JavaScript والصفحة

دروس هذا الفصل

1. نقراو ونكتبو في الصفحة
2. الأحداث والأنماط والـ attributs
3. نثبّتو في formulaire

الدرس 26.1 : نقراو ونكتبو في الصفحة

12 دقيقة

كل عنصر في الصفحة عندو attribut id نلقاوه بـ document.getElementById("id"). نقراو اللي في خانة بـ .value، ونبدّلو المحتوى متاع عنصر بـ .innerHTML.

<input type="text" id="ville">
<button onclick="afficher()">Afficher</button>
<p id="sortie"></p>

function afficher() {
  let v = document.getElementById("ville").value;
  document.getElementById("sortie").innerHTML = "Tu habites à <b>" + v + "</b>";
}

• onclick="afficher()" تعيّط للـ fonction في كل كليك.
• الـ boutons radio يشتركو في name: document.getElementsByName("niveau") تعطي القائمة، و .checked تقول أنهو المأشّر.
• قائمة <select>: .value هي القيمة المختارة، و .selectedIndex الرقم متاعها (من 0).

انتبه : getElementById ترجّع null كان الـ id موش موجود (ردّ بالك من الحروف الكبار): .value تعمل وقتها الغلطة « Cannot read properties of null ».

الدرس 26.2 : الأحداث والأنماط والـ attributs

12 دقيقة

الأحداث

• onclick: كليك. onmouseover / onmouseout: الفأرة توصل للعنصر / تخرج منو.
• onfocus / onblur: الخانة تاخو / تخلّي الـ focus. oninput: في كل حرف يتكتب. onchange: كي القيمة تتبدّل (قائمة، case à cocher).
• onload على <body>: كي الصفحة تكمّل التحميل.

نبدّلو النمط والـ attributs

let t = document.getElementById("titre");
t.style.color = "red";
t.style.backgroundColor = "yellow";
t.style.width = "300px";
document.getElementById("envoyer").disabled = true;
document.getElementById("photo").src = "carthage.jpg";

في JavaScript، الـ propriété CSS اللي فيها tiret تتكتب كلمة وحدة: background-color تولّي backgroundColor، و font-size تولّي fontSize. الـ attributs كيما disabled، checked، readOnly يساوو true ولا false.

نصيحة : لصوت ولا فيديو (<audio id="son">)، document.getElementById("son").play() تبدّاه و .pause() توقّفو.

الدرس 26.3 : نثبّتو في formulaire

14 دقيقة

قبل ما يتبعث formulaire للـ serveur، JavaScript يثبّت في الخانات. نكتبو onsubmit="return verifier()" في الـ balise <form>: كان verifier() ترجّع false، الـ formulaire ما يتبعثش.

<form action="inscription.php" method="post" onsubmit="return verifier()">
  <input type="text" id="email" name="email">
  <input type="submit" value="Envoyer">
</form>
<p id="erreur"></p>

function verifier() {
  let e = document.getElementById("email").value;
  if (e.indexOf("@") == -1) {
    document.getElementById("erreur").innerHTML = "Adresse sans @";
    return false;
  }
  return true;
}

• خانة فارغة: ch == "". عدد: !isNaN(ch) && ch != "". طول: ch.length.
• باش نثبّتو في كل حرف (أرقام برك، حروف برك)، نعدّيو على الـ chaîne بحلقة و charAt(i)، كيما يطلب البرنامج، من غير الـ attribut pattern.

انتبه : onsubmit="verifier()" من غير return تبعث الـ formulaire حتى كان verifier() ترجّع false.

تدرّب مجانًا

كل درس فيه 3 تمارين مجانية مع تلميحات باش تطبّق الفصل هذا مع هنّيبوت.

← الفصل اللي قبل : JavaScript: الأساسيات · الفصل اللي بعد : قواعد البيانات: نصنعو الـ tables →

كل الفصول · شوف فروض 2 تكنولوجيا المصلّحة

الدروس كتبناها لـ Mission Carthage على أساس البرنامج الرسمي. الأستاذ متاعك يبقى المرجع.