Chapitre II : LES BASES DE JAVA SCRIPT
I- STRUCTURE DE CODE
Le code java script peut se présenter de deux manières. Intégré dans une
page HTML ou intégré dans un fichier externe. La manière la plus fréquente de
l’inclure consiste à utiliser les éléments <Script>
1- La balise script
Dans la logique du langage HTML, il faut donc signaler au browser (navigateur)
par une balise que ce qui suit est un script et que c’est du Java Script.
Exemple : <Script Language= ‘JavaScript’ type=’text/javascript’)
// Code Javascript
</Script>
On peut utiliser du Java Script dans un fichier externe, le code prend l’extension
.js
Exemple :
<Script Language= ‘Javascript’ type=’text/javascript SRC=’js/[Link]’’)
// Code Javascript
</Script>
Le code ci-dessus signifie que nous avons un fichier [Link] Java Script
dans le dossier js. Il est très pratique d’utiliser un ou plusieurs fichiers javascript
en externe, notamment, lorsque vous réutilisez le code javascript dans vos
applications web
2- Les commentaires
Il est utile d’inclure des commentaires personnels dans les codes
javascript. C’est même recommandé comme pour tous les langages de
programmation. Javascript utilise la convention utilisée en C et C++.
Exemple : Commentaire sur une ligne
//Commentaire sur une ligne
Commentaire sur plusieurs lignes
/*Commentaire sur plusieurs
Lignes*/
Ne pas confondre les commentaires Javascript et les commentaires HTML.
Pour rappel le commentaire en HTML est < !--Commentaire-->
3- Masquer le script pour les anciens browsers
Les navigateurs qui ne comprennent pas le langage javascript ignore la
balise script. Donc, ils vont afficher le code source sans l’exécuter. Pour éviter
l’affichage peu esthétique, on utilisera les commentaires en HTML afin de
masquer le code.
Exemple :
<Script Language= ‘Javascript’ type=’text/javascript’ SRC=’js/[Link]’)
< !--programme en java script-->
</Script>
4- Où inclure le programme Javascript
On peut inclure le code Javascript au niveau de l’entête d’une page en
HTML (entre les balises Head), au niveau de la balise Body ou la fin d’un
document en HTML. Il faut aussi noter que l’usage de la balise script n’est pas
toujours obligatoire, ça sera le cas des évènements Javascript.
Javascript fonctionne, en quelque sorte, comme une extension du langage
HTML.
Exemple : Ma première page HTML avec du javascript
< ! doctype HTML>
<HTML>
<Head>
<Title> JS </Title>
</Head>
<Body>
<script Language=’’Java Script’’>
< !—
alert (’’Bonjour IDA’’) ;
-->
</Script>
</Body>
</HTML>
Remarque : Javascript est sensible à la casse. C’est-à-dire il fait la différence
entre la majuscule et la minuscule. Les caractères accentuels comme (é ou à) ne
sont pas autorisés pour déclarer les variables. Aussi, les guillemets (’’) ou
l’apostrophe (‘) sont des caractères spéciaux en Javascript. Enfin, si l’on peut
saisir des guillemets ou l’apostrophe dans notre chaine de caractère, il faut
utiliser les symboles (\’) ou (\’’)
Exemple : <script Language=’’Java Script’’>
< !—
alert (’’Bonjour N\’Goran’’);
-->
</Script>
5- Javascript dans un fichier externe avec l’extension .js
03/12/18
Il est possible d’utiliser des fichiers externes pour des programmes
JavaScript. On peut ainsi stocker des scripts dans des fichiers distincts et les
appeler à partir d’un fichier HTML.
Exemple :
<script language= ’’JavaScript’’ type=’’text/javascript’’
src=’’JS/[Link]’’>
</script>
Remarque : Chaque instruction en JavaScript se termine par un point-virgule (;)
6- Les fonctions alert () et write ()
a- Alert ()
Alert est une méthode de l’objet Window. Pour se conformer à la mutation
classe de la programmation orientée objet en JavaScript, on notera
[Link](). Window venant en tête des objets Javascript, celui-ci est reconnu
par défaut par l’interpreteur et devient en quelque sorte facultative.
Nous étudierons plus loin les objets en Javascript.
b- Write ()
A la méthode document, javascript a dédié la méthode ’’écrire dans le
document’’ l’élément write.
Syntaxe : write (’’Bonjour IDA’’) ;
Ou
[Link] (’’Bonjour IDA’’) ;
Exemple : Ecrire un programme en Javascript permettant d’afficher
Bienvenue à HETEC
<HTML>
<head>
<title> Java Script </title>
</head>
<body>
<script language=’’javascript’’>
< !—
[Link](’’Bienvenue à HETEC’’) ;
-->
</script>
</body>
</HTML>
II- Les variables
Les variables sont des lieux et des caractères. Elles peuvent se déclarer de deux
manières :
De façon explicite : on dit à Javascript que ceci est une variable
Exemple : Var nomvariable ;
Var b ;
Var nom ;
La déclaration implicite consiste à déclarer une variable tout en l’affectant
une valeur
En Javascript, on n’a pas besoin de déclarer le type de la variable comme dans
d’autres langages évoluée, comme le langage C par exemple. En effet, Javascript
autorise la manipulation de 04 types de données : les nombres, chaines de
caractères, booléens et des variables de type nul
III- Les opérateurs
En Javascript, il existe différents types d’opérateurs :
Opérateurs de comparaison
Opérateurs associatifs
Opérateurs de calcul
1- Les opérateurs de calcul
10/12/18
Les opérateurs de calcul sont définis dans le tableau ci-dessous :
Symbole Nom Signification Exemple Résultat
+ Plus Addition a+4 15
- Moins Soustraction a-5 6
* Fois Multiplication a*3 33
/ Divisé par Division a/2 5.5
% Modulo Reste de la a%2 1
division
= Egal Affectation a=6 6
2- Opérateur de comparaison
Les opérateurs de comparaisons servent à exprimer des conditions. Les
opérateurs de comparaison sont :
Opérateur Signification
== Egal à
> Supérieur à
>= Supérieur ou égal
< inférieur
<= Inférieur ou égal
!= Différent de
3- Les opérateurs associatifs
Les opérateurs associatifs sont formés par la combinaison des opérateurs
arithmétiques et d’opérateur d’affectation
Opérateur Signification Exemple Signification
+= Plus égal a+=2 a=a+2
-= Moins égal a-=4 A=a-4
*= Multiplié égal a*=2 A=a*2
/= Divisé égal a/=3 a=a/3
4- Les opérateurs logiques
Aussi appelé opérateurs booléens, ces opérateurs permettent de vérifier deux ou
plusieurs conditions. Ainsi, nous avons :
Opérateur Signification
&& Et logique
|| Ou logique
! Non logique
Exercice 1 : Ecrire un programme en javascript permettant de calculer l’air et la
surface d’un cercle à partir de son rayon
Exercice 2 : soit les notes ci-dessous
-Anglais 12/20 ; Coefficient 2
-Math 14/20 ; Coefficient3
-Info 13/20 ; Coefficient 3
-Droit 08/20 ; Coefficient 2
Ecrire un programme permettant d’afficher la somme totale des notes
coefficientées, la somme total des coefficients et la moyenne.
Exercice 3 : Ecrire un programme en javascript permettant de faire la somme, la
soustraction, la multiplication et la division de deux nombres quelconques et
d’afficher les différents résultats de la manière suivante :
-Addition : dans un cadre de fond rouge et de police blanche
-Soustraction : Un cadre de fond vert et de police blanche
-Multiplication : un cadre de fond violé et de police blanche
-Division : un cadre de fond bleu et de police blanche
Exercice 4 : Ecrire un programme en Javascript permettant d’afficher « HETEC LA
TRAJECTOIRE DE LA REUSSITE » en italique, en gras et souligné