Accueil › Cours › JavaScript et la page

Les leçons de ce chapitre

1. Lire et écrire dans la page
2. Événements, styles et attributs
3. Contrôler un formulaire

Leçon 26.1 : Lire et écrire dans la page

12 min

Chaque élément de la page avec un attribut id se retrouve avec document.getElementById("id"). On lit ce qu'un champ contient avec .value, et on change le contenu d'un élément avec .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()" appelle la fonction à chaque clic.
• Des boutons radio partagent un name : document.getElementsByName("niveau") donne la liste, et .checked dit lequel est coché.
• Une liste <select> : .value est la valeur choisie, .selectedIndex son numéro (à partir de 0).

Attention : getElementById renvoie null si l'id n'existe pas (attention aux majuscules) : .value provoque alors l'erreur « Cannot read properties of null ».

Leçon 26.2 : Événements, styles et attributs

12 min

Les événements

• onclick : un clic. onmouseover / onmouseout : la souris arrive sur l'élément / le quitte.
• onfocus / onblur : un champ prend / perd la main. oninput : à chaque lettre tapée. onchange : quand la valeur a changé (liste, case à cocher).
• onload sur <body> : quand la page a fini de charger.

Changer le style et les 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";

En JavaScript, une propriété CSS à tiret s'écrit en un seul mot : background-color devient backgroundColor, font-size devient fontSize. Les attributs comme disabled, checked, readOnly valent true ou false.

Astuce : Pour un son ou une vidéo (<audio id="son">), document.getElementById("son").play() lance la lecture et .pause() l'arrête.

Leçon 26.3 : Contrôler un formulaire

14 min

Avant d'envoyer un formulaire au serveur, JavaScript vérifie les champs. On écrit onsubmit="return verifier()" dans la balise <form> : si verifier() retourne false, le formulaire n'est pas envoyé.

<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;
}

• Un champ vide : ch == "". Un nombre : !isNaN(ch) && ch != "". Une longueur : ch.length.
• Pour vérifier chaque caractère (que des chiffres, que des lettres), on parcourt la chaîne avec une boucle et charAt(i), comme le demande le programme, sans l'attribut pattern.

Attention : onsubmit="verifier()" sans return envoie le formulaire même si verifier() retourne false.

S'entraîner gratuitement

Chaque leçon a 3 exercices gratuits avec indices pour appliquer ce chapitre avec Hannibot.

← Chapitre précédent : JavaScript : les bases · Chapitre suivant : Bases de données : créer les tables →

Tous les chapitres · Voir les devoirs corrigés de 2ème TI

Cours écrit pour Mission Carthage d'après le programme officiel. Ton professeur reste la référence.