vendredi 11 décembre 2015

التدريب في جافا سكريبت (الجزء 2) Formation en JavaScript (part 2 )

2-las bases

   


Exercice 1 : Déclaration des variables

 Les variables peuvent se déclarer de deux façons :
·      soit de façon explicite. On dit à Javascript que ceci est une variable. La commande qui permet de déclarer une variable est le mot var. Par exemple :

var Numero = 1 ;
var Prenom = "Abdelilah" ;

·      soit de façon implicite. On écrit directement le nom de la variable suivi de la valeur que l'on lui attribue et Javascript s'en accommode. Par exemple :
 Numero = 1 ;
 Prenom = "Rachid" ;
Attention! la façon dont on déclare la variable aura une grande importance pour la "visibilité" de la variable dans le programme Javascript.

 Voir à ce sujet, la distinction entre variable locale et variable globale dans le Javascript avancé de ce chapitre.

Pour la clarté de votre script et votre facilité, on ne peut que conseiller d'utiliser à chaque fois le mot var pour déclarer une variable.

Javascript utilise 4 types de données :

Type
Description
Des nombres
Tout nombre entier ou avec virgule tel
que 22 ou 3.1416
Des chaînes de caractères
Toute suite de caractères comprise entre guillemets telle que "suite de caractères"
Des booléens
Les mots true pour vrai et false pour faux
Le mot null
Mot spécial qui représente pas de valeur

Notons aussi que contrairement au langage C ou C++, Il ne faut pas déclarer le type de données d'une variable. On n'a donc pas besoin de int, float, double, char et autres long en Javascript.

Exercice :

Nous allons employer la méthode write() pour afficher des variables. On définit une variable appelée texte qui contient une chaîne de caractères "Mon chiffre préféré est " et une autre appelée variable qui est initialisée à 7.

<body>
<script language="Javascript">
<!—
document.write("<h1>Variables en JS</h1>") ;
var texte = "Mon chiffre préféré est le "
var variable = 7
document.write(texte + variable);
//-->
</script>
</ body >

Exercice 2 : les opérateurs

Opérateurs de calcul

Signe
Signification
Exemple
Résultat
+
addition
x + 3
14
-
soustraction
x - 3
8
*
multiplication
x*2
22
/
par division
x /2
5.5
%
reste de la division par
x%5
1
=
affectation
x=5
5

Opérateurs de comparaison

Signe
Nom
Exemple
Résultat




==
Egal
x==11
true
< 
Inférieur
x<11
false
<=
Inférieur ou égal
x<=11
true
> 
Supérieur
x>11
false
=<
Supérieur ou égal
x>=11
true
!=
Différent
x!=11
false

                       Opérateurs d’affectation
On appelle ainsi les opérateurs qui réalisent une affectation directe ou par un calcul dans la variable située à gauche du signe .

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.
Signe
Description
Exemple
Signification
x
=

x = y
x = y
5
+=
plus égal
 x += y
x = x + y
16
-=
moins égal
x -= y
x = x - y
6
*=
multiplié égal
x *= y
x = x * y
55
/=
divisé égal
x /= y
x = x / y
2.2


                       Opérateurs logiques

Signe
Nom
Exemple
Signification
&&
et
(condition1) && (condition2)
condition1 et condition2
||
ou
(condition1) || (condition2)
condition1 ou condition2

                       Opérateurs d’incrémentation/ décrémentation
Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une unité. Ce qui sera fort utile, par exemple, pour mettre en place des boucles.
Dans les exemples x vaut 3.

Signe
Description
Exemple
Signification
Résultat
x++
incrémentation
y = x++
Y  = X+1
4
x--
décrémentation
y= x--
Y = x-1
2


                     Exercice :
               Tester des exemples d’opérations avec les différents opérateurs :
-          calculs
-          affectation
-          incrémentation/Décrémentation
              pour les opérateurs logiques, nous les étudierons plus loin avec les structures de contrôle SI …ALORS   SINON
              ou TANT QUE

Variables locales et globales

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions (voir plus loin...), seront toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle. On pourra donc les exploiter partout dans le script.

Dans une fonction, une variable déclarée par le mot clé var aura une portée limitée à cette seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'où son nom de locale. Par contre, toujours dans une fonction, si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale.
Nous reviendrons sur tout ceci dans l'étude des fonctions


التدريب في جافا سكريبت (الجزء 1) Formation en JavaScript (part 1 )

1-Integrer javascript a html



Exercice 1 : Premier script Javascript

Il faut bien débuter un jour, alors allons-y ! Avec un script simple :
alert("C'est mon 1er script");
Ce qui a pour effet d’afficher un message d’alerte :



1. Créez une page HTML vide.
2. Avant la balise </HEAD>, écrivez les balises d’ouverture et de fermeture d’un script Javascript :

<script language="JavaScript">
<!-- Debut script

//  Fin script -->
</script>

Les commentaires <!-- et // --> sont indispensables afin que les navigateurs ne supportant pas Javascript ne retournent pas une erreur ("Debut script" et "Fin script" sont optionnels).
3. Intégrer votre instruction dans le script :

<script language="JavaScript">
<!-- Debut script

alert("C'est mon 1er script");

//  Fin script -->
</script>

Voici à quoi doit ressembler votre page HTML :

<html>
<head>
<title>mon 1er script</title>

<script language="JavaScript">
<!-- Debut script

alert("C'est mon 1er script");

//  Fin script -->
</script>

</head>
<body>


</body>
</html>

4. Afficher votre page dans un navigateur

Exercice 2 : écrire dans la page html
On va continuer dans la même veine, mais avec quelques difficultés.
document.write("C'est mon 2ème script");
Ce qui a pour effet d’écrire dans la page Web : « C’est mon 2ème script »

Voici votre page Web avec le script :

<html>
<head>
<title>mon 2ème script</title>

<script language="JavaScript">
<!-- Debut script

document.write("C'est mon 2ème script");

//  Fin script -->
</script>
</head>
<body>
</body>
</html>

Afficher-la dans un navigateur et vous aurez une ligne simple qui affiche « C’est mon 2ème script »

Exercice 3 : intégrer des balises HTML

Vous pouvez intégrer des balises HTML dans votre texte, ce qui vous permet de choisir la police, la couleur, de centrer...( bien qu’il soit préférable de traiter les présentations par des feuilles e style ! )
1er essai
Choisissons la police Arial en gras, une couleur bleue et de centrer le tout. Notre instruction document.write devient :

document.write("<center><font face="Arial"
   color="#0000ff"><b>C'est mon 2ème script
   </b></font></center>");

(tout est sur la même ligne, mais pour des raisons d’affichage la ligne est coupée)
Essayez d’intégrer cette instruction à la place de la précédente, ça donne une erreur :-(
Pourquoi ?
document.write (comme alert, d’ailleurs) a comme argument une chaîne de caractères délimitée par des guillemets ("). Si vous rajoutez d’autres guillemets ("), Javascript ne comprend plus où commence et où finit la chaîne.
Comment faire ?
Remplacer les guillemets (") à l’intérieur de la chaîne par des apostrophes (’) :

document.write("<center><font face='Arial'
color='#0000ff'><b>C'est mon 2ème     script</b></font></center>");

Et là, ça marche ! Ca donne la même chose que l’image en haut.
Guillemets et apostrophes sont interchangeables

document.write('<center><font face="Arial"
color="#0000ff"><b>C'est mon 2ème script</b></font></center>');

On a interverti guillemets (") et apostrophes (’) et - en théorie - le résultat devrait être le même.
En théorie, seulement, car il y a un problème avec l’apostrophe de "C’est". Pour remédier à ça on doit remplacer ’ par \’ :

document.write('<center><font face="Arial" color="#0000ff">
<b>C\'est mon 2ème script</b></font></center>');

Et là, on obtient le résultat précédent.
De même, on aurait pu écrire :

document.write("<center><font face=\"Arial\" color=\"#0000ff\">
<b>C'est mon 2ème script</b></font></center>");

Règle usuelle pour les chaînes de caractères

On utilise en général la 1ère forme :

document.write("<center><font face='Arial'
color='#0000ff'><b>C'est mon 2ème script</b></font></center>");
Soit des guillemets (") pour délimiter la chaîne et des apostrophes (’) à l’intérieur, surtout à cause des nombreuses apostrophes (’) du français. Mais sachez que les deux sont interchangeables.

Cliquez ici pour compléter: Formation en JavaScript (part 2 ) 



Cliquez ici pour compléter: Formation en JavaScript (part 2 )