Le langage de programmation Javascript est un outil puissant pour créer des sites web dynamiques et interactifs. Une des fonctionnalités les plus utiles de Javascript est le Document Object Model (DOM), qui permet aux développeurs de manipuler le contenu HTML d’une page web. Dans cet article, nous allons voir comment ajouter des éléments à la page HTML à l’aide d’une fonction print(). Nous verrons comment cette fonction peut être utilisée pour créer des pages web plus riches et plus interactives.
Javascript : DOM : Ajouter des éléments à la page HTML à l’aide d’une fonction print()
- Dans ce code Javascript intégré dans une page HTML, on montre comment ajouter des éléments de texte à la page HTML, mais ici à l’aide d’une fonction print() de façon à utiliser la page HTML un peu comme une console… Très utile potentiellement pour mettre au point des codes.
<!DOCTYPE html>
<!– Debut de la page –>
<html>
<!– Debut entete –>
<head>
<meta charset=« utf-8 » /> <!– Encodage de la page –>
<title>Titre </title> <!– Titre de la page –>
<!– Debut du code Javascript –>
<script language=« javascript » type=« text/javascript »>
<!–
// code Javascript
//— variables globales —
//— fonction appelee au chargement de la page
window.onload = function () { // au chargement de la page
// code Javascript ici, avec sa syntaxe specifique…
document.write(« Hello World! »); // efface le contenu de la page
print(« salut »)
} // fin onload
//—- fonctions utiles —
function print(textIn) { // fonction pour ajouter un element a la page – utile ++ pour debug
// Ajouter un élément à la page sans effacer le reste
//var txt= »Hello »;
var txt=textIn;
var newtext = document.createTextNode(txt);
document.body.appendChild(newtext);
document.body.appendChild(document.createElement(« br »)); // ajoute saut de ligne
document.body.appendChild(newtext);
} // fin print
</script>
<!– Fin du code Javascript –>
</head>
<!– Fin entete –>
<!– Debut Corps de page –>
<body >
<!– ATTENTION : tout ce qui sera mis ici sera efface par la fonction javascript write… –>
</body>
<!– Fin de corps de page –>
</html>
<!– Fin de la page –>
