Définit la description d'un élément dans une liste de définitions
Le code JavaScript est une séquence d'instructions à exécuter par le navigateur
Dans ce chapitre vous allez apprendre :
Le code JavaScript est une séquence d'instructions à exécuter par le navigateur.
À 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.
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.
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 : Copier 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 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 : Copier 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.
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.
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
Exemple :
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.
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
Exemple :
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.
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
Exemple :
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
Exemple :
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>
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
Exemple :
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>
|
Cours precedent: |
Sommaire : |
Cours suivant: |