Compétences :
à la fin de cette
leçon, chaque apprenant doit être capable de :
- Donner la structure minimale d’un
code javascript
- Inclure un code javascript dans un code
html
- Manipuler les variables et les
instructions de base en javascript
Introduction
Nous avons
appris à utiliser le html pour créer des
pages web. Si nous souhaitons qu’une page web puisse interagir avec un
utilisateur, cela nous est impossible si nous n’utilisons que du code html. Il
devient donc impératif d’intégrer du code javascript
dans le code html. Dans cette leçon,
nous verrons la structure minimale d’un code javascript, l’intégration du code javascript
dans un code html, l’utilisation des variables en javascript les
instructions de base en javascript et les objets.
I-
INCLUSION DU CODE JAVASCRIPT DANS UNE PAGE HTML
Javascript
est un langage de script incorporé dans le html. Il est donc dépendant su
langage html qui est le langage de base du web.
1- Structure minimale d’une page html
Bien que le javascript soit dépendant du
navigateur, la façon d’intégrer un code javascript dans un code html reste la même. Elle consiste à utiliser la
balise <script> en l’enrichissant
de l’attribut language ayant pour valeur javascript
ou encore l’attribut type avec pour valeur text/javascript.
<script
language="javascript">
</script>
|
<script type="text/javascript">
</script>
1- Où inclure le code JavaScript dans le
code html
Il existe plusieurs manières d’utiliser JavaScript dans une page
Web. On peut mettre un script :
-
Dans l’en-tête de la
page (entre les balises
<head></head>)
-
Dans le corps de la
page (entre les balises
<body></body>)
-
Directement dans la
balise (par des évènements que nous verrons plus
tard)
-
A l’extérieur de la
page en faisant référence au fichier
contenant le script avec l’attribut src ayant pour valeur le chemin absolu vers
le fichier script.
Exemple : <script language="javascript" src="mon_code.js"></script>
2- Les commentaires en JavaScript
Les
commentaires permettent d’enrichir le code d’explication. On distingue deux
types de commentaire en javascript :
- Les commentaires sur une ligne :
//ceci est un commentaire sur une ligne
- Les commentaires sur plusieurs
lignes : /* ceci est un commentaire sur
Plusieurs ligne */
I-
LES VARIABLES EN JAVASCRIPT
1- Définition
Une variable est un
objet repéré par son nom pouvant contenir des données qui peuvent changer au
cours de l’exécution du programme. C’est donc un objet dont le contenu peut varier au cours de
l’exécution du programme. Une variable en réalité est un espace mémoire réservé
pour le stockage d’informations de type différents. Javascript manipule
principalement 05 types de variables :
- Number : ce sont des variables
qui contiennent des nombres
- String : elles contiennent des
chaines de caractères
- Boolean : elles contiennent des
valeurs booléennes (true ou false)
- Array : elles contiennent des
tableaux
- Date : elles contiennent des
dates au format AAAA-MM-JJ
NB :
lorsqu’une variable ne
contient aucun élément, sa valeur est NULL
2- Déclaration des variables
La
déclaration d’une variable peut être explicite ou implicite
- Une déclaration explicite se fait
en précédant le nom de la variable par le mot clé var EX : var ville = "Bertoua";
- Une déclaration implicite se fait
sans utiliser le mot clé var. C’est le navigateur qui détermine qu’il s’agit
d’une variable. EX : ville = "Bertoua";
NB : - pour la clarté du script, il est conseillé
d’utiliser le mot var à chaque déclaration
-lorsqu’une variable est
déclaré de façon explicite sans affectation elle de type « chaine de
caractère(String) » par défaut c’est pourquoi si on doit utiliser des nombre
entiers, il faut toujours les convertir avec la fonction parseInt() avant de le réutiliser.
Ex :
<script
type="text/javascript">
var n = parseInt(prompt("entrer le
nombre à multiplier par 2"));
alert("le résultat est "+n*2);
</script>
|
-certains mot ne peuvent pas être utilisés comme nom de
variable :ce sont des mots réservés (goto, while, package, void, long...)
-Le JavaScript est un langage non typé : c’est lorsqu’on
affecte une valeur à une variable qu’on détermine son type
1- L’affectation
Une affectation consiste
à donner une valeur à une variable. Elle se fait par le symbole =. La syntaxe d’une affectation est la suivante nom_variable =
valeur ; EX : nom = "justine";
I-
LES INSTRUCTIONS DE BASE ET LES OBJETS
Une instruction
est un ordre élémentaire adressé à la machine.
1- L’instruction de lecture ou de saisie
ou d’entrée
Une
instruction de lecture permet de récupérer une information saisie par
l’utilisateur et d’attribuer une valeur ou le résultat d’une expression à une
variable. La lecture en javascript se fait à l’aide de la fonction prompt()
; de la manière suivante :
var
nom_variable = prompt("texte à afficher",
"valeur_par_défaut") ;
EX :
<script
type="text/javascript">
var nom = prompt("Entrez votre nom
", "AU-INFO")
</script>
Ce code fait
apparaitre la boite de dialoguer suivante avec une fenêtre de saisie ayant pour
valeur par défaut AU-INFO.
NB: Il n'est
pas obligatoire de mettre la valeur par défaut.
Exemple :
var nom = prompt("veillez entrer votre nom");
1- Les instructions d’écriture ou de
sortie ou d’affichage
Une instruction d'écriture peut
permettre :
-
D'afficher une expression sur une boite de dialogue avec la fonction alert()
EX: alert("bonjour");
EX :
<script type="text/javascript">
alert("Bienvenue dans le
site AU-INFO");
</script>
Affiche la boite de dialogue suivante
-
D'écrire sur le document html avec
l'instruction document.write(expression);
Remarque : expression peut être le contenu d'une variable, un
message (texte) ou le résultat d'un calcul.
1- La concaténation
Une
concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre.
L’opérateur utilisé pour la concaténation est le +. Il est aussi
possible de concaténer une chaine à une variable
Exemple
:
var
salutation = 'Bonjour', nom = ' toi', result = salutation + nom; alert(result);
Ce code Affiche : «
Bonjour toi »
Pour
concaténer une chaine de caractère à une variable, à chaque limite de la chaine
avec la variable, on y ajoute un +
Exemple
:
var
ville = "Bertoua";
alert("vous êtes dans la ville de "+ville); ce code affiche vous êtes dans la ville de bertoua
2- Les objets en javascript
Un objet est
un contenant qui permet de stocker des valeurs utilisées par un programme. Une
variable est un objet. La création d’un nouvel objet se fait
par l’instruction new.
EX : var
nb = new
Number(45) ; ici, on crée un nouvel objet de type Number (nombre) de
valeur 45 et on le stocke dans la variable nb.
En
javascript on peut également accéder à des objets contenus dans la page web.
Ces objets sont appelés variables du navigateur. On distingue :
L’objet Windows :
il représente une fenêtre du navigateur
L’objet Document :
il représente une page web affichée dans une fenêtre du navigateur.
Il contient des objets image ; Anchor(liens), Form(formulaire)
Un objet form peut également contenir des éléments (texte,
boutons, zone de saisie…)
|
Précédent
Suivant
Aucun commentaire:
Enregistrer un commentaire
Posez votre question ici