oujood.com

Contruction du code de javascript

Le code JavaScript est une séquence d'instructions à exécuter par le navigateur

Dans ce chapitre vous allez apprendre :

Contruction du code de javascript

Le code JavaScript est une séquence d'instructions à exécuter par le navigateur.

Le Javascript distingue les majuscules et minuscules

À la différence du HTML, le Javascript distingue les majuscules et minuscules – surveillez donc votre capitalisation étroitement quand vous écrivez des codes Javascript, créez ou appelez des variables, des objets et des fonctions.

Les instructions JavaScript

Une instruction JavaScript est une commande au navigateur.
Le but de la commande est de dire au navigateur ce qu'il faut faire.
Dans l’exemple suivant JavaScript demande au navigateur d’écrire dans la page Web "Bonjour Visiteur" :


document.write("Bonjour Visiteur ");

Il est normal d'ajouter un point-virgule à la fin de chaque instruction exécutable.
Le plus souvent vous verrez ceci dans des exemples de Javascript sur le Web.
Le point-virgule est facultatif (selon la norme de Javascript), et le navigateur va interpréter la fin de la ligne comme fin de l’instruction. C'est pour cette raison qu'il est possible que vous verrez des instructions javascript sans point-virgule à l'extrémité. Mais il faut mettre une instruction par ligne.
Alor que si on met le point virgule on peut mettre plusieurs instructions javascript dans une même ligne.

Note : L'utilisation des points-virgules permet d’écrire des instructions multiples sur une meme ligne.

Code de Javascript

Le code de Javascript (ou juste le Javascript) est une séquence d'instructions JavaScript.
Chaque séquence est exécuté par le navigateur dans l'ordre où elle est écrite (donc premier arrivé premier servie).
Cet exemple écrira un titre et deux paragraphes à une page Web :

Exemple :

Sélectionner le code

<script>
document.write ("<h1> Il s'agit d'un titre </ h1>");
document.write ("<p> Ceci est un paragraphe </ p>.");
document.write ("<p> C'est un autre paragraphe </ p>.");
</ Script>

 

Les blocs de code JavaScript

Les instructions JavaScript peuvent être regroupés dans des blocs de code.
le bloc de code commence par une accolade gauche { et se termine par une accolade droit }.
Le bute est d’éviter d’écrire <script> et </script> pour chaque ligne d'instruction. L'exemple qui suit écrit un titre et deux paragraphes dans une page Web:

Exemple :

Sélectionner le code

<script>
{
document.write("<h1>Ceci est un titre</h1>");
document.write("<p>Ceci est un paragraphe <p>");
document.write("<p>Ceci est un autre paragraphe.</p>");
}
</script> 

 

L'exemple ci-dessus montre l'utilisation d'un bloc de code. Normalement un bloc de code est employé pour grouper des instructions ensemble dans une fonction ou en condition (où un groupe d’instructions devrait être exécuté si une condition est remplie).
Vous apprendrez plus au sujet des fonctions et des conditions dans des chapitres postérieurs.

Générer une sortie en JavaScript

Dans certaines situations, il est nécessaire de générer une sortie à partir de votre code JavaScript. Par exemple, vous souhaitez voir la valeur d'une variable, ou écrire un message dans la console du navigateur pour vous permettre de déboguer un problème dans votre code JavaScript en cours d'exécution, etc.

Le JavaScript offre plusieurs façons de générer des résultats, par exemple en écrivant les résultats dans la fenêtre du navigateur ou dans la console du navigateur, en affichant les résultats dans des boîtes de dialogue, en écrivant les résultats dans un élément HTML, etc. Nous examinerons de plus près chacune de ces méthodes dans la suite de cet article.

Sortie vers la console du navigateur

Pour avoir accès à la console de votre navigateur web, appuyer sur la touche F12 du clavier pour ouvrir les outils de développement puis cliquer sur l'onglet console.

vous pouvez facilement produire un message ou écrire des données dans la console du navigateur en utilisant la méthode console.log(). Il s'agit d'une méthode simple, mais très puissante pour générer une sortie détaillée. Voici un exemple :

Code : HTML


  Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
 <title>Sortie vers la console du navigateur</title>
</head>
<body>
<script>
// Impression d'un message texte simple
console.log(" Bonjour le monde ! ") ; // ce qui imprime : Bonjour le monde !

// Impression de la valeur d'une variable 
var x = 10 ;
var y = 20 ;
var sum = x + y ;
console.log(sum) ; // Cequi imprime : 30
</script>
</body>
</html>

Ce code javascript peut être placé dans le body comme dans le head, le résultat sera le même.

Affichage des résultats dans une boîte de dialogue d'alerte

Vous pouvez également utiliser les boîtes de dialogue d'alerte pour afficher le message ou les données de sortie destinées à l'utilisateur. Une boîte de dialogue d'alerte est créée à l'aide de la méthode. Voici un exemple : alert()

Exemple code HTML


  Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
 <title>Affichage des résultats dans des boîtes de dialogue d'alerte</title>
 <script>
// Impression d'un message texte simple
alert(" Bonjour le monde ! ") ; // ce qui imprime : Bonjour le monde !

// Impression de la valeur d'une variable 
var x = 10 ;
var y = 20 ;
var sum = x + y ;
alert(sum) ; // Cequi imprime : 30
</script>
</head>
<body>

</body>
</html>

Vous pouvez également placer ce code dans le head.

Ecriture de la sortie dans la fenêtre du navigateur

Vous pouvez utiliser la méthode document.write() pour écrire le contenu dans le document actuel uniquement pendant l'analyse de ce document. Voici un exemple :

Exemple code HTML


  Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
 <title>Ecriture de la sortie dans la fenêtre du navigateur</title>
 <script>
// Impression d'un message texte simple
alert(" Bonjour le monde ! ") ; // ce qui imprime : Bonjour le monde !

// Impression de la valeur d'une variable 
var x = 10 ;
var y = 20 ;
var sum = x + y ;
alert(sum) ; // Cequi imprime : 30
</script>
</head>
<body>

</body>
</html>

Si vous appliquez la méthode document.write() après le chargement de la page, elle remplacera tout le contenu existant dans ce document. Voir l'exemple suivant :

Code : HTML


  Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
 <title>Sortie vers la fenêtre du navigateur</title>
</head>
<body>
<h1>Ceci est un titre</h1>
    <p>Ceci est un paragraphe.</p>
    
    <button type="button" onclick="document.write('Bonjour le monde !')">Clique ici</button>
</body>
</html>

Ajouter la sortie à l'intérieur d'un élément HTML

On peut également écrire ou insérer une sortie à l'intérieur d'un élément HTML en utilisant la propriété de l'élément innerHTML.
Mais avant d'écrire la sortie, nous devons d'abord sélectionner l'élément à l'aide d'une méthode telle que getElementById(), comme le montre l'exemple suivant :

Code : HTML


  Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
 <title>Ajouter la sortie à l'intérieur d'un élément HTML</title>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>

<p id="hello"></p>
<p id="sum"></p>

<script>
// Écriture d'une chaîne de texte à l'intérieur d'un élément
document.getElementById("hello").innerHTML = "Hello World !";

// Écriture d'une valeur variable dans un élément
var x = 10 ;
var y = 20 ;
var sum = x + y ;
document.getElementById("sum").innerHTML = "lasomme  de 10 et 20 est : "+sum ;
</script>
</body>
</html>



Par carabde 30 mars 2014 mis à jour le 27 Janvier 2022

Trafic Booster
hebergement web


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise track

Définit pistes de texte pour les éléments multimédias ( video et audio )

outline-color

Définit la couleur d'une esquisse

Elément XSLT xsl:choose

Elément XSLT xsl:choose



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci