Apprendre JavaScript :getTheBest( )

2009

A

vant de commencer ce cours à-propos JavaScript, il faut mentionner que ce langage est tout à fait différent du java ou à d’autre langages de programmation telle que le C ou le C++ mais il existe néanmoins une similitude du point de vue jeu d’instructions. Ce langage à été apparu pour donner une sorte de dynamisme aux sites web puisque le code HTML sert à structurer le document et le CSS (Cascading Style Sheet : les feuilles de style en cascade) servent à formater le document (arrière plan, marge, couleurs et thèmes, ….). Les commentaires: Commentaire un bloc de lignes : /*…………………*/ Commentaire pour une seule ligne : //…………………... Le jeu d’instruction: break case continue delete do else false for function if in new null return switch this true type of var void while with Où se met le code du JavaScript: D’une façon générale, on insère le code JavaScript dans l’entête de page HTML c.à.dire entre les balises …….. De même, il existe 2 écritures possibles pour introduire ce dernier : 1ére Ecriture : <script language="javascript"> .............................. .............................. 2ére Ecriture : <script type="text/javascript"> .............................. ..............................

Apprendre JavaScript :getTheBest( )

2009

Illustration de quelques méthodes :  Imprimer sur le document : Write () : Cette méthode permet d’imprimer l’objet passer comme paramètre dans le document HTML. Exemple : document.write ("C’est ma première phrase"); On peut de même formater l’objet passé en argument comme le montre l’exemple suivant. Exemple : document.write ("

C’est ma première phrase

"); On à aussi les alternatifs suivantes: Exemple : document.write (Sum); // Avec Sum est une variablesans "" Exemple : document.write ("Le résultat de la somme est"+Sum); // + :c’est un opérateur de concaténation qui rattache la chaine de caractère avec le résultat de la somme Sum. Exemple : document.write ("Le pourcentage est :" +Rst+"%" ) ; Remarque : Si on utilise la méthode Write 2 fois ou +, alors c’est comme si on procède à l’ajout (méthode append ( ) en Java) sans avoir d’espace entre les différentes arguments ajoutés. Pour remédier à ce manque on préfère utiliser la méthode writeln () qui laisse d’espace entre les différentes arguments. Si on veut écrire une phrase sur 2 lignes on procède comme suit : document.write ("Ligne 1
Ligne 2") ; // la balise
: Saut de ligne

Apprendre JavaScript :getTheBest( )

2009

 Les Objets de type Windows : Les Alertes : Comme son nom l’indique (Alerte), ce son des msgs servant à alerter l’utilisateur. Exemple : window.alert("C’est ma première Alerte"); ou encore : alert("C’est ma première Alerte"); *Voici un tableau illustrant quelque commande qu’on peut les utiliser au niveau du corps de l’alerte. Commande \n \t \r \\ \" \’

Description Exemple Nouvelle ligne window.alert("ligne1\n ligne2"); Espace window.alert("Item1\n Item2"); Retour Chariot window.alert("Parag1\n Parag2"); Les caractères spéciaux Pour écrire le caractère \ window.alert("\\"); Pour écrire le caractère" window.alert("\""); Pour écrire le caractère‘ window.alert("\’"); Les Inputs :

C’est comme s’il s’agissait d’une InputBox( ) dans Visual Basic. C’est une interface ou Window qui demande à l’utilisateur de saisir quelque chose qui sera traité par la suite. Exemple : window.prompt("Veuillez entrer votre nom","Oussama"); avec : 1ére argument => Corps du message 2ére argument => Valeur par défaut Ou encore : prompt("Veuillez entrer votre nom","Oussama"); Les messages de confirmation : Ce son des fenêtres de confirmation. Exemple : var rep=confirm("Voulez vous enregistrer les modifications"); Bien entendu, il faut attendre la confirmation ou l’annulation de l’opération de la part de l’utilisateur. Si confirmation, alors la valeur renvoyer est Ture sinon sa sera False.

Apprendre JavaScript :getTheBest( ) Bouton OK Annuler

2009

Valeur renvoyé True False

Remarque : Il est vrai qu’il existe 2 boutons (OK,Annuler) dans le cas d’un objet Window de type prompt, mais il faut noter que le traitement va se faire de deux points de vus. Le premier est selon la chaine tapé par l’utilisateur et le deuxième est selon le bouton sur lequel l’utilisateur à appuyer. Pour plus d’explication retournons nous à l’exemple ci-dessous : <script language="javascript"> var name name = window.prompt ( "Entrez votre nom","Oussama"); if(name=="Oussama") {document.write( "Welcom " + name ) ;} else{ window.alert("Vous n'avez pas l’autorisation")}; Analysons ce script : le script en Jaune va être exécuter si la condition est vrai + l’utilisateur à appuyer sur le bouton OK , si l’une des précédentes condition n’est pas satisfaites (c.à.dire que la condition n’est pas vrai ou que l’utilisateur à appuyé sur le bouton annuler) alors le script en Vert va se déclenché.

Apprendre JavaScript :getTheBest( )

2009

Les types de données:  Les variables : var nom_variable Exemple : var x,y,z ; La conversion d’un type de donnée vers un autre (var integer ou var float) se fait comma suit : en utilisant la méthode parseInt(var) pour rendre la variable un entier et par la méthode parseFloat(var) pour rendre la variable de type float Exemple :

var x=3 ; if (parseInt(var)==3) var x=3 ; if (parseFloat(var)==3.1 )

Les opérateurs : Les opérateurs Arithmétiques Nom de l’opération Opérateur Exemple Affectation Var x = 3 ; = Addition + ou += X+Y ou X+=Y ; Soustraction - ou - = X-Y ou X- = Y ; Multiplication * ou *= X*Y ou X*=Y ; Division / X/Y Reste de la division euclidienne % X%Y Les opérateurs de comparaison Egalité == X==Y Inégalité != X !=Y Supérieur > X>Y inférieur < X= X>=Y Inférieur ou égale <= X<=Y

Apprendre JavaScript :getTheBest( )

2009

Les structures de contrôle :

Il faut noter que l’instruction break permet de sortir de la clause switch sans vérifier les autres cases une fois qu’une instruction est exécutée.

Apprendre JavaScript :getTheBest( )

2009

Apprendre JavaScript :getTheBest( )

2009

A ce niveau une question se pose. Quelle est la différence entre les boucles while et do..while ? Bon, dans la boucle while on n’exécute pas les instructions que ssi la condition est vérifiée alors qu’avec do..while on exécute une itération puis on vérifie avec while et c’est tout à fait évidant puisque la programmation en JavaScript est une programmation séquentielle. Exemple d’illustration :

break et continue ? On a vu auparavant que l’instruction break est un excellant moyen pour sortir d’une boucle telle que switch ou while ou do…while ou for, mais à quoi sert donc l’instruction continue. En faite cette instruction ressemble beaucoup à un ordre de Skip c.à.dire qu’on va ignorer une itération bien déterminé. L’exemple ci-dessous illustre le principe de fonctionnement de deux commandes.

Apprendre JavaScript :getTheBest( )

2009

Apprendre JavaScript :getTheBest( )

2009

Les fonctions : La déclaration d’une fonction se fait comme suit : function nom_fonction (paramètre1, paramètre2,….) { instruction ……………………….. ……………………….. return résultat }

Remarque : Dans une fonction on n’est pas obliger de retournée un résultat, dans certaine cas on préfère traiter le résultat de la fonction au sein de cette dernière. C’est une point de vu ni plus ni moins ! De plus une fonction peut faire appelle à d’autres fonctions. Si on est dans une sorte de situation où le script entière est sous forme des fonctions qui se rappelle les une les autres, alors qui va appeler la 1ére fonction ? Dans ce cas on utilise l’événement onload( ) dans le body tout en mention la fonction principale -qui doit être dépourvu de paramètre- qui va lancer les autres fonctions. (voir l’exemple2 ci-dessous)

Apprendre JavaScript :getTheBest( )

2009

Apprendre JavaScript :getTheBest( )

2009

Les tableaux dans JavaScript :  A un dimension :

Pour les tableaux ayant une longueur, on peut utiliser la méthode length qui nous renvoi la longueur du tableau.  A deux dimensions :

Constructeur : var Matrice= [["Un ","Deux","Trois"], ["Quatre ", "Cinque "]];

Apprendre JavaScript :getTheBest( )

2009

Les principales méthodes de l’API Math : Méthode abs(X) ceil(X) floor(X) max(X,Y) min(X,Y) pow(X,Y) round(X) cos(X) sin(X) tan(X) log(X) exp(X) sqrt(X)

Description Valeur absolu de X Rapprochement au plus grand entier naturel Rapprochement au plus petit entier naturel Le max entre X et Y Le min entre X et Y XY Arrondement de X à l’entier le plus proche Le cosinus de X Le sinus de X La tangente de X Le log de X L’exponentiel de X Le racine Carré de X

Exemple Math.Abs(-5.1)=5.1 Math.Ceil(9.2)=10 Math.Ceil (-13.1)=-13 Math.floor(9.2)=9 Math.floor(-9.8)=-10 Math.max(12,13)=13 Math.min(12,13)=12 Math.pow(2,3)=8 Math.round(9.2)=9 Math.round(9.6)=10 Math.cos(0)=1 Math.sin(0)=0 Math.tan(0)=0 Math.log(E)=1 Math.exp(0)=1 Math.sqrt(9)= 3

Noter bien qu’il faut indiquer l’API Math.opération(opérande(s)) et nom pas l’opration(opérande(s)). Les principales méthodes et fonctions sur les chaines de caractères : Plus avoir des informations fiable et précise à-propos les différentes méthodes et fonctions sur les chaines de caractères, je vous conseille énormément de consulté le fragment de code du Dreamweaver CS3 dans la section manipulation des chaines. Pour y joindre Cliquer sur le menu Fenêtre=> Fichiers (Raccourci clavier F8) puis activer l’anglet Fragments de code et choisissez le dossier manipulations de chaîne.

Apprendre JavaScript :getTheBest( )

2009

Remarque : Les chaine de caractères s’écrivant entre deux guillemets “ “ Exemple : window.alert("C’est ma première Chaine"); Alors que les caractères s’écrivant entre deux apostrophes’ ‘ document.writeln(replaceCharacters(a,'b','c')); Les principales méthodes de l’objet Date :

Vous trouveriez les différentes méthodes associé à l’objet Date ainsi que leurs explication on consultant la référence fournie avec Dreamweaver CS3. Pour y joindre Cliquer sur le menu Fenêtre=> Propriétés (Raccourci clavier Ctrl+F3) puis activer l’anglet Référence et choisissez comme livre Référence JavaScript et comme objet mettez Date puis régaler vous !. Remarque : La méthode getDay( ) renvoi un entier compris entre 0 et 6. Bien entendue 0 évoque dimanche et 1 évoque le lundi ainsi de suite aussi la méthode getMonth( ) renvoi un entier compris entre 0 et 11 pour désigner les 12 mois de l’année. Remarque : Pour avoir toutes les propriétés d’une balise penser à utiliser l’inspecteur de balise de Dreamweaver. Vous allez maintenant apprendre à utiliser l'inspecteur de balises pour trouver une balise dans une page bien déterminer et la modifier rapidement. Pour modifier une balise à l'aide de l'inspecteur de balises : 1 Ouvrez la page concerné en mode Code, s'il n'est pas déjà ouvert.

Apprendre JavaScript :getTheBest( )

2009

2 Procédez de l'une des manières suivantes pour ouvrir l'inspecteur de balises, si ce n'est pas déjà fait : Choisissez Fenêtre > Inspecteur de balises. (Raccourci clavier F9) Dans le groupe de panneaux Balise, cliquez sur l'onglet attributs afin d’affiche une vue structurée de toutes les attribues da la balise sélectionner de votre page ou sur l’anglet Comportements afin de définir les comportements déclencher par la baise (Objet).

Apprendre JavaScript :getTheBest( )

2009

De même on vous conseille de pensé à utiliser l'aide sur les attributs, les valeurs des balises et les méthodes que vous pourriez les consulter dans le référence de Dreamweaver. Pour y trouver faites comme suit : Choisissez Fenêtre > Référence. (Raccourci clavier Maj+F1) Dans le groupe de panneaux Résultats, cliquez sur l'onglet Référence et choisissez votre livre, la balise dont vous voulez être renseigné et les attributs ou méthodes en question. Enfin Enjoy§.