Mise en route avec Javascript

Dernière mise à jour : 05/06/2022

Dans ce chapitre, vous apprendrez à créer une page Web alimentée par JavaScript.

Premiers pas avec JavaScript

Ici, vous apprendrez à quel point il est facile d'ajouter de l'interactivité à une page Web à l'aide de JavaScript. Mais, avant de commencer, assurez-vous que vous avez des connaissances pratiques en HTML et CSS.

Si vous débutez dans le monde du développement Web, commencez à apprendre à partir d'ici »

Eh bien, commençons par le langage de script côté client le plus populaire.

Ajout de JavaScript à vos pages Web

Il existe généralement trois façons d'ajouter JavaScript à une page Web :

Incorporation du code JavaScript entre une paire de balises <script> et </script>.
Créer un fichier JavaScript externe avec l'extension .js, puis le charger dans la page via l'attribut src de la balise <script>.
Placer le code JavaScript directement dans une balise HTML en utilisant les attributs de balise spéciaux tels que onclick, onmouseover, onkeypress, onload, etc.

Les sections suivantes décrivent chacune de ces procédures en détail :

Intégration du code JavaScript

Vous pouvez intégrer le code JavaScript directement dans vos pages Web en le plaçant entre les balises <script> et </script>. La balise <script> indique au navigateur que les instructions contenues doivent être interprétées comme un script exécutable et non comme du HTML. Voici un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajouter JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); //affiche: Hello World!
    </script>
</body>
</html>

Le code JavaScript dans l'exemple ci-dessus imprime simplement un message texte sur la page Web. Vous apprendrez ce que chacune de ces instructions JavaScript signifie dans les prochains chapitres.

Remarque : L'attribut type pour la balise <script>(c'est-à-dire <script type="text/javascript">) n'est plus requis depuis HTML5. JavaScript est le langage de script par défaut pour HTML5.

Appel d'un fichier JavaScript externe

Vous pouvez également placer votre code JavaScript dans un fichier séparé avec une extension .js, puis appeler ce fichier dans votre document via l'attribut src de la balise <script>, comme ceci :

<script src ="js/hello.js"> </script>

Ceci est utile si vous souhaitez que les mêmes scripts soient disponibles pour plusieurs documents. Cela vous évite de répéter la même tâche encore et encore et rend votre site Web beaucoup plus facile à entretenir.

Eh bien, créons un fichier JavaScript nommé "hello.js" et plaçons-y le code suivant :

/* une fonction pour afficher un message */
function sayHello() {
    alert("Hello World!");
}
/* appeler une fonction au click sur un bouton */
document.getElementById("myBtn").onclick = sayHello;

Désormais, vous pouvez appeler ce fichier JavaScript externe dans une page Web à l'aide de la balise <script>, comme ceci :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inclure un fichier javascript externe</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Moi</button>
    <script src="js/hello.js"></script>
</body>
</html>

Remarque : généralement, lorsqu'un fichier JavaScript externe est téléchargé pour la première fois, il est stocké dans le cache du navigateur (tout comme les images et les feuilles de style), il n'aura donc pas besoin d'être téléchargé plusieurs fois depuis le serveur Web qui crée les pages Web. Pour charger plus rapidement.

Placer le code JavaScript en ligne

Vous pouvez également placer du code JavaScript en ligne en l'insérant directement dans la balise HTML à l'aide des attributs de balise spéciaux tels que onclick, onmouseover, onkeypress, onload, etc.

Cependant, vous devez éviter de placer une grande quantité de code JavaScript en ligne car cela encombre votre HTML avec JavaScript et rend votre code JavaScript difficile à maintenir. Voici un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript en ligne</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

L'exemple ci-dessus vous montrera un message d'alerte lors d'un clic sur l'élément bouton.

Conseil : vous devez toujours séparer le contenu et la structure de votre page Web (c'est-à-dire HTML), de la présentation (CSS) et du comportement (JavaScript).

Positionnement du script dans le document HTML

La balise <script> peut être placé dans la balise <head>, ou <body> d'un document HTML. Mais idéalement, les scripts doivent être placés à la fin de la balise body, juste avant la balise de fermeture </body>, cela accélérera le chargement de vos pages Web, car cela empêchera l'obstruction du rendu initial de la page.

Chaque balise <script> bloque le processus de rendu de la page jusqu'à ce qu'elle ait entièrement téléchargé et exécuté le code JavaScript. Par conséquent, les placer dans la section d'en-tête (c'est-à-dire la balise <head>) du document sans aucune raison valable aura un impact significatif sur les performances de votre site Web.

Astuce : Vous pouvez placer n'importe quel nombre d'éléments <script> dans un seul document. Cependant, ils sont traités dans l'ordre dans lequel ils apparaissent dans le document, de haut en bas.

Différence entre les scripts côté client et côté serveur

Les langages de script côté client tels que JavaScript, VBScript, etc. sont interprétés et exécutés par le navigateur Web, tandis que les langages de script côté serveur tels que PHP, ASP, Java, Python, Ruby, etc. s'exécutent sur le serveur Web et la sortie renvoyé au navigateur Web au format HTML.

Les scripts côté client présentent de nombreux avantages par rapport à l'approche traditionnelle des scripts côté serveur. Par exemple, vous pouvez utiliser JavaScript pour vérifier si l'utilisateur a saisi des données non valides dans les champs du formulaire et afficher les notifications d'erreurs de saisie en conséquence en temps réel avant de soumettre le formulaire au serveur Web pour la validation finale des données et un traitement ultérieur afin d'éviter les utilisations inutiles de la bande passante du réseau et l'exploitation des ressources système du serveur.

De plus, la réponse d'un script côté serveur est plus lente que celle d'un script côté client, car les scripts côté serveur sont traités sur l'ordinateur distant et non sur l'ordinateur local de l'utilisateur.

Vous pouvez en savoir plus sur les scripts côté serveur dans la section des tutoriels sur PHP.

Introduction Comprendre la syntaxe Javascript

Suivez nous

Table de matières

Javascript les bases

Table de matière