Leçon : Organiser les dossiers du site et mise en place du CSS

• Compétences visées :
• Définir JavaScript ET énoncer les limites du HTML liées à l’interactivité
• Utiliser la balise script
• Déclarer les variables en JavaScript
• Utiliser les instructions de base en JS

INTRODUCTION
Le html et le CSS nous permettent de créer et mettre en forme des pages web dites statiques car elles ne peuvent
pas interagir avec l’utilisateur (récupérer ou vérifier les données saisies par un utilisateur par exemple). Pour
Remédier à ce problème, des langages tels que, ASP, PHP, ou JavaScript ont vu le jour. Le JavaScript a été
développé par Netscape en 1995 sous le nom de LiveScript et s’exécute directement sur le navigateur de
l’utilisateur.
I. DÉFINITION, IMPORTANCE ET LIMITE DE JAVASCRIPT
Un script est une suite d’instructions permettant d’automatiser certaines tâches.
Le JavaScript est un langage de script orienté objet exécutable par les navigateurs web. Pour cela on dit que
c’est un langage qui s’exécute coter client.
JavaScript permet aux programmeurs web de créer les pages dynamiques ; c’est-à-dire :
▪ Interagir avec l’utilisateur : JavaScript permet au navigateur de traiter directement (sans accéder au
serveur) certaines actions de l’utilisateur ;
▪ Embellir les pages : Afficher/masquer du texte, faire défiler des objets, créer des info-bulles, gérer des
menus ;
▪ Réagir aux événements de la souris
▪ Effectuer des calculs et des tests.
Les principales limites de ce langage sont :
▪ Ne permet pas la connexion à une base de données,
▪ Ne permet pas de lire ou écrire dans un disque dur,
▪ N’est pas autonome car ne peut fonctionner sans le HTML, est très dépendant du navigateur.

II. UTILISATION DE LA BALISE SCRIPT

Le code JavaScript est placé entre les balises <script> et </script> selon l’une des structures suivantes :
<script type= ‘’ text/javascript’’> <scriptlanguage= ‘’ javascript’’>
Taper des instructions JavaScript ici Taper des instructions JavaScript ici
</script> </script>
Notons qu’il existe plusieurs façons d’utiliser un script dans une page web :
- De manière interne : dans l’entête ou le corps de la page
- De manière externe : dans un fichier externe (avec une extension .js) à la page web.
Dans ce second cas, la balise <script> contiendra un attribut src faisant référence au fichier externe : <script
src=”mon_fichier_externe.js”> ; Ceci a pour avantages entre autres d’alléger la page HTML la rendant plus
lisible, et rendre le code réutilisable et plus facilement maintenable.
Remarque : Il est vivement conseiller d’inclure des commentaires personnels dans vos codes JavaScript
comme pour tous les langages de programmation. JavaScript utilise le symbole « // » pour des commentaires de
fin de ligne et « /* … */ » pour des commentaires sur plusieurs lignes.

III. DÉCLARATION DES VARIABLES EN JAVASCRIPT

En JavaScript, les noms de variable peuvent être aussi longs que l'on désire, mais doivent répondre à certains
critères :
• Commencer par une lettre (majuscule ou minuscule) ou un "_" ;
• Comporter uniquement des lettres, des chiffres et les caractères _ et $ ;
• Ne peuvent pas être des mots réservés du langage.
Exemples : surface, stylo_rouge ; Contre Exemples : peri-metre, demi périmètre

NB : JS est sensible à la casse. Attention donc aux majuscules et minuscule !

Les variables peuvent se déclarer de deux façons :
➢ Soit de façon explicite : on dit à JS que ceci est une variable. Le mot clé (la commande) de déclaration
d’une variable est « var » Syntaxe : var nom_variable = valeur
Exemples : var nombre = 19 ; var prenom = "zavier" ; var note
➢ Soit de façon implicite : on écrit directement le nom de la variable suivi de la valeur que l’on lui
attribue et JS s’en accommode. Syntaxe : nom_variable = valeur
Exemples : nombre = 19 ; prénom= "zavier"
Le mot clé de déclaration d’une constante est « const ». Syntaxe :Const nom_constante = valeur
Exemples : Const taux_TVA = 0.1925 ; Const PI = 3.14

IV. LES INSTRUCTIONS DE BASES EN JAVASCRIPT

Une instruction est l’opération élémentaire que le processeur peut accomplie en une seule fois. Les instructions
d’entrées/sorties en javascript sont généralement effectuées au moyen de boites de dialogues ou de méthodes.
1) L’instruction d’affectation.
Cette instruction permet d’attribuer une valeur ou le résultat d’une expression à une variable.
Syntaxe : nom_variable=valeur ; Exemple : nombre = 19 ; prénom = "zavier"
2) L’instruction de lecture ou d’entrée.
Cette instruction permet de récupérer les informations saisies par l’utilisateur et de les stocker dans les
variables. Pour cela on utilisera la méthode prompt().
Syntaxe : variable=prompt("texte à afficher", "valeur par défaut") ; La valeur par défaut est optionnelle.
Exemple : Nom = prompt("Entrer votre nom" , "Bineta") ;
l’exécution de cette commande fera appel à la boite de dialogue
ci-contre où l’utilisateur peut entrer son nom et cliquer sur ok
pour valider ou sur annuler.
3) L’instruction d’affichage ou de sortie ou d’écriture.
Pour afficher du texte en JavaScript on peut utiliser la méthode write() ou la méthode alert().
Syntaxe : document.write("texte à afficher") ; ou alert("texte à afficher") ;
document.write(nom_variable) ; ou alert(nom_variable) ;
Exemple : alert("Que c’est facile la première scientifique !") ;
l’exécution de cette commande va afficher une boite de
dialogue d’alerte similaire à celle présentée ci-contre et
l’utilisateur n’a plus qu’a cliquer sur ok pour continuer.
NB : Il est aussi possible de demander une confirmation pour une
action (suppression d’élément, fermeture de page, …). On utilise
la fonction «confirm» dont la syntaxe est :confirm("Demande de
confirmation") ;
Exemple : variable=confirm("Voulez-vous fermer la page ?") ;

Remarque : La réponse de la commande prompt() est toujours une chaîne de caractères. Si on désire récupérer
un nombre, il faut utiliser la fonction parseInt (pour convertir en un nombre entier) ou parseFloat (pour la
convertir en nombre à virgule). Syntaxe : parseInt(chaine) ou parseInt(var) ; parseFloat(chaine) ou
parseFloat(var)
Exemples : Age= prompt("Entrer votre age")Ou; Age = parseInt(prompt("Entrer votre age")) ;
parseInt(Age) ;
parseInt(“23AZer”) et parseInt(“23”) ; //ces deux instructions retournent le nombre 23.
Rayon = parseFloat("24.568Bonjour38") ; //cette instruction renvoie le nombre 24.568

V. LES OPÉRATIONS EN JAVASCRIPT

Les opérations sont effectuées au moyen d’opérateurs qui permettent d’élaborer une expression en vue
d’effectuer un calcul ou une comparaison ; l’usage des parenthèses est vivement conseillé dans le cas
d’expressions complexes. Ainsi on peut distinguer :

L’opération entre les chaines de caractère s’appelle la concaténation, c'est-à-dire la juxtaposition des objets
de type chaine. L’opérateur de concaténation est ‘+’.

Exemples : a=2 ; b=8 ; c=5 ; texte1= "bonjour " ; texte2= "le monde ! " ;
c = b - c ; renvoie 3 d = (a > 0) && (c < b) ;renvoie False (0) a++ ; renvoie 3 b-- ; renvoie 7
alert (texte1 + texte2) ; affiche bonjour le monde ! (a + c) == (b – c % 2) ; renvoie True (1)
Remarque : L’expression variable = variable operateur constante (a = a + 3 par exemple) peut être simplifiée
en variable opérateur= constante (a += 3, qui lui est équivalente). Ainsi, au lieu d’écrire nombre = nombre *
26, on peut écrire simplement nombre*=26 ; il en est de même pour tous les opérateurs arithmétiques.
EXERCICES