Guide de débutant pour HTML et JavaScript

Salut à toi, futur(e) développeur(euse) web ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde de l'HTML et du JavaScript. En tant que quelqu'un qui enseigne la programmation depuis plus d'une décennie, je peux t'assurer que tu es en train de t'apprêter à un treat. Mettons-nous à fondir ensemble et à découvrir les mystères du développement web !

HTML - Javascript

Qu'est-ce que le JavaScript ?

Avant de plonger dans les détails, comprenons ce qu'est le JavaScript. Le JavaScript est un langage de programmation puissant qui donne vie aux pages web. C'est comme la baguette magique d'Internet, qui fait danser, interagir et répondre aux actions des utilisateurs les pages HTML statiques.

Imagine un site web comme une maison. L'HTML est la structure - les murs, le toit et les fondations. Le CSS est la peinture et les décorations. Le JavaScript ? Eh bien, c'est l'électricité, la plomberie et tous les gadgets sympas qui rendent la maison fonctionnelle et interactive !

Syntaxe

JavaScript a son propre ensemble de règles, tout comme n'importe quel langage. Decomposons les bases :

Variables

Les variables sont comme des contenants qui gardent des informations. Voici comment tu les déclares :

let monNom = "Alice";
const monAge = 25;
var monLoisir = "coder";

Dans cet exemple :

let est utilisé pour les variables qui peuvent changer.
const est pour les variables qui ne changeront pas.
var est une ancienne façon de déclarer des variables, mais let et const sont préférés maintenant.

Fonctions

Les fonctions sont des blocs de code réutilisables. Elles sont comme des recettes pour ton programme :

function saluer(nom) {
console.log("Bonjour, " + nom + "!");
}

saluer("Bob"); // Affiche : Bonjour, Bob!

Cette fonction prend un nom en entrée et imprime un salut. C'est comme un robot sympa qui dit bonjour à n'importe qui tu lui présentes !

Instructions conditionnelles

Ces instructions aident ton code à prendre des décisions :

let temperature = 22;

if (temperature > 30) {
console.log("Il fait chaud dehors !");
} else if (temperature > 20) {
console.log("C'est une belle journée !");
} else {
console.log("Il fait un peu frais.");
}

Ce code vérifie la température et donne des messages différents en fonction de combien il fait chaud. C'est comme apprendre à ton ordinateur à être un commentateur météo !

Exemples de JavaScript dans les pages HTML

Maintenant, voyons comment nous pouvons utiliser JavaScript dans nos pages HTML. Il y a trois principales méthodes pour le faire :

1. JavaScript en ligne

C'est comme chuchoter une instruction rapide :

<button onclick="alert('Bonjour !')">Clique-moi</button>

Quand tu cliques sur ce bouton, il affichera une fenêtre contextuelle disant "Bonjour !". C'est rapide et facile, mais pas très bien pour des scripts plus importants.

2. JavaScript interne

C'est comme donner à ta page HTML un cerveau tout à elle :

<!DOCTYPE html>
<html>
<head>
<title.Ma Page</title>
<script>
function changerCouleur() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<button onclick="changerCouleur()">Changer de couleur</button>
</body>
</html>

Ce script change le fond de la page en bleu clair lorsque tu cliques sur le bouton. C'est comme donner à ta page web l'aptitude d'un caméléon !

3. JavaScript externe

C'est comme donner à ta page web un cerveau séparé auquel elle peut se référer :

<!DOCTYPE html>
<html>
<head>
<title.Ma Page</title>
<script src="monscript.js"></script>
</head>
<body>
<button onclick="saluer()">Dis bonjour</button>
</body>
</html>

Et dans monscript.js :

function saluer() {
alert("Bonjour depuis un fichier externe !");
}

Cela garde ton HTML propre et ton JavaScript organisé. C'est comme garder tes outils dans une boîte à outils au lieu de les éparpiller dans la maison.

Élément HTML

Parfois, le JavaScript pourrait ne pas être disponible ou activé dans le navigateur d'un utilisateur. C'est là que l'élément <noscript> devient pratique :

<script>
document.write("Bonjour, JavaScript fonctionne !");
</script>
<noscript>
<p>Oh non ! Ton navigateur ne supporte pas JavaScript ou il est désactivé.</p>
</noscript>

C'est comme avoir un plan de secours. Si JavaScript fonctionne, les utilisateurs voient le premier message. Sinon, ils voient le second. Il est toujours bon de être préparé !

Table des méthodes JavaScript

Jetons un coup d'œil à quelques méthodes JavaScript courantes que tu utiliseras souvent :

Méthode	Description	Exemple
`alert()`	Affiche une fenêtre contextuelle de message	`alert("Bonjour, le monde !");`
`console.log()`	Imprime dans la console du navigateur	`console.log("Ceci est un log");`
`document.getElementById()`	Trouve un élément HTML par son ID	`let elem = document.getElementById("monDiv");`
`addEventListener()`	Attache un gestionnaire d'événement à un élément	`button.addEventListener("click", function() { alert("Cliqué !"); });`
`setTimeout()`	Exécute une fonction après un délai	`setTimeout(function() { console.log("Message différé"); }, 2000);`

Ces méthodes sont comme les couteaux suisses de JavaScript - polyvalentes et incroyablement utiles !

Conclusion

Félicitations ! Tu as fait tes premiers pas dans le monde de l'HTML et du JavaScript. souviens-toi, apprendre à coder, c'est comme apprendre à faire du vélo - cela peut sembler bancal au début, mais avec de la pratique, tu seras bientôt en train de rouler à toute vitesse.

N'aie pas peur d'expérimenter, de faire des erreurs et d'apprendre de них. C'est ainsi que tous les grands programmeurs ont commencé ! Continue de coder, continue d'apprendre, et, surtout, amuse-toi avec ça. Avant de t'en rendre compte, tu seras en train de construire des sites web et des applications web incroyables.

Bonne programmation, futurs(mes) mage(s) du web ! ??‍??‍?

Credits: Image by storyset

Tutoriel précédent:

HTML - Ajouter une favicon

Tutoriel suivant:

HTML - Mises en page