Exemples courants JavaScript

Cette page contient quelques exemples de ce que JavaScript peut faire.

Attention :Si ces exemples utilisent des méthodes que vous n'avez pas encore appris,S'il vous plaîtNe vous inquiétez pas. Vous en apprendrez davantage sur eux au chapitre suivant.

JavaScript peut modifier le contenu HTML

La méthode getElementById() retourne l'élément qui correspond à l'ID spécifié.

Dans cet exemple, cette méthode est utilisée pour trouver un élément HTML (id="para") et modifier le contenu de l'élément (innerHTML) en "Hello world":

document.getElementById("para").innerHTML = "Hello world";

JavaScript peut modifier les valeurs des attributs HTML

Dans cet exemple, JavaScript a modifié<img>de l'étiquettesrcLa valeur de l'attribut :

JavaScript peut modifier les styles HTML (CSS)

JavaScript styleLes attributs peuvent être utilisés pour définir les styles en ligne des éléments.

document.getElementById("demo").style.color = "blue";

JavaScript peut cacher des éléments HTML

Cacher un élément HTML peut également être réalisé en modifiant le style de display.

document.getElementById("demo").style.display = "none";

JavaScript peut afficher des éléments HTML

Afficher un élément HTML caché peut également être réalisé en modifiant le style de display.

document.getElementById("demo").style.display = "block";

JavaScript peut créer des fenêtres pop-up d'alerte

Dans cet exemple, JavaScript crée un dialogue d'alerte.

alert("Hello world!");

JavaScript peut ajouter un gestionnaire d'événement au document

Dans cet exemple, JavaScript surveille l'événement de clic de la souris et y réagit.

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

JavaScript peut afficher l'heure

Dans cet exemple, JavaScript affiche l'heure actuelle.

var intervalID = setInterval(startTimer,　1000);
function startTimer() {
　　　　var date = new Date();
　　　　var x = document.getElementById("result");
　　　　x.innerHTML = date.getHours();　+　:　+　date.getMinutes();　+　:　+　date.getSeconds();
}