Scribd
Importer
183 vues16 pages

Tutorial Javascript

Ce document introduit le langage JavaScript et décrit ses principales caractéristiques et fonctionnalités, notamment les commentaires, instructions, variables, opérateurs, structures de contrôle, fonctions, tableaux, objets et méthodes.

Transféré par

Oussama Mimouni
Copyright
© Public Domain
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
183 vues16 pages

Tutorial Javascript

Ce document introduit le langage JavaScript et décrit ses principales caractéristiques et fonctionnalités, notamment les commentaires, instructions, variables, opérateurs, structures de contrôle, fonctions, tableaux, objets et méthodes.

Transféré par

Oussama Mimouni
Copyright
© Public Domain
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 16

Apprendre JavaScript :getTheBest( )

2009

vant de commencer ce cours -propos JavaScript, il faut mentionner que ce langage est tout fait diffrent du java ou dautre langages de programmation telle que le C ou le C++ mais il existe nanmoins une similitude du point de vue jeu dinstructions. 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 (arrire plan, marge, couleurs et thmes, .). Les commentaires: Commentaire un bloc de lignes : /**/ Commentaire pour une seule ligne : //... Le jeu dinstruction: 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: Dune faon gnrale, on insre le code JavaScript dans lentte de page HTML c..dire entre les balises <head> .</head>. De mme, il existe 2 critures possibles pour introduire ce dernier : 1re Ecriture : <script language="javascript"> .............................. .............................. </script> 2re Ecriture : <script type="text/javascript"> .............................. .............................. </script>

Apprendre JavaScript :getTheBest( )


Illustration de quelques mthodes : Imprimer sur le document :

2009

Write () : Cette mthode permet dimprimer lobjet passer comme paramtre dans le document HTML. Exemple : document.write ("Cest ma premire phrase"); On peut de mme formater lobjet pass en argument comme le montre lexemple suivant. Exemple : document.write ("<h1>Cest ma premire phrase</h1>"); On aussi les alternatifs suivantes: Exemple : document.write (Sum); // Avec Sum est une variablesans "" Exemple : document.write ("Le rsultat de la somme est"+Sum); // + :cest un oprateur de concatnation qui rattache la chaine de caractre avec le rsultat de la somme Sum. Exemple : document.write ("Le pourcentage est :" +Rst+"%" ) ; Remarque : Si on utilise la mthode Write 2 fois ou +, alors cest comme si on procde lajout (mthode append ( ) en Java) sans avoir despace entre les diffrentes arguments ajouts. Pour remdier ce manque on prfre utiliser la mthode writeln () qui laisse despace entre les diffrentes arguments. Si on veut crire une phrase sur 2 lignes on procde comme suit : document.write ("Ligne 1 <br/> Ligne 2") ; // la balise <br /> : Saut de ligne

Apprendre JavaScript :getTheBest( )


Les Objets de type Windows : Les Alertes : Comme son nom lindique (Alerte), ce son des msgs servant alerter lutilisateur. Exemple : window.alert("Cest ma premire Alerte"); ou encore : alert("Cest ma premire Alerte");

2009

*Voici un tableau illustrant quelque commande quon peut les utiliser au niveau du corps de lalerte. 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 caractres spciaux Pour crire le caractre \ window.alert("\\"); Pour crire le caractre" window.alert("\""); Pour crire le caractre window.alert("\"); Les Inputs : Cest comme sil sagissait dune InputBox( ) dans Visual Basic. Cest une interface ou Window qui demande lutilisateur de saisir quelque chose qui sera trait par la suite. Exemple : window.prompt("Veuillez entrer votre nom","Oussama"); avec : 1re argument => Corps du message 2re argument => Valeur par dfaut Ou encore : prompt("Veuillez entrer votre nom","Oussama"); Les messages de confirmation : Ce son des fentres de confirmation. Exemple : var rep=confirm("Voulez vous enregistrer les modifications"); Bien entendu, il faut attendre la confirmation ou lannulation de lopration de la part de lutilisateur. Si confirmation, alors la valeur renvoyer est Ture sinon sa sera False.

Apprendre JavaScript :getTheBest( )


Bouton OK Annuler Remarque : Valeur renvoy True False

2009

Il est vrai quil existe 2 boutons (OK,Annuler) dans le cas dun 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 lutilisateur et le deuxime est selon le bouton sur lequel lutilisateur appuyer. Pour plus dexplication retournons nous lexemple 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 lautorisation")}; </script> Analysons ce script : le script en Jaune va tre excuter si la condition est vrai + lutilisateur appuyer sur le bouton OK , si lune des prcdentes condition nest pas satisfaites (c..dire que la condition nest pas vrai ou que lutilisateur appuy sur le bouton annuler) alors le script en Vert va se dclench.

Apprendre JavaScript :getTheBest( )


Les types de donnes: Les variables : var nom_variable Exemple : var x,y,z ; La conversion dun type de donne vers un autre (var integer ou var float) se fait comma suit : en utilisant la mthode parseInt(var) pour rendre la variable un entier et par la mthode parseFloat(var) pour rendre la variable de type float Exemple : Les oprateurs : var x=3 ; if (parseInt(var)==3) var x=3 ; if (parseFloat(var)==3.1 )

2009

Les oprateurs Arithmtiques Nom de lopration Oprateur 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 oprateurs de comparaison Egalit == X==Y Ingalit != X !=Y Suprieur > X>Y infrieur < X<Y Suprieur ou gale >= X>=Y Infrieur ou gale <= X<=Y

Apprendre JavaScript :getTheBest( )


Les structures de contrle :

2009

Il faut noter que linstruction break permet de sortir de la clause switch sans vrifier les autres cases une fois quune instruction est excute.

Apprendre JavaScript :getTheBest( )

2009

Apprendre JavaScript :getTheBest( )

2009

A ce niveau une question se pose. Quelle est la diffrence entre les boucles while et do..while ? Bon, dans la boucle while on nexcute pas les instructions que ssi la condition est vrifie alors quavec do..while on excute une itration puis on vrifie avec while et cest tout fait vidant puisque la programmation en JavaScript est une programmation squentielle. Exemple dillustration :

break et continue ? On a vu auparavant que linstruction break est un excellant moyen pour sortir dune boucle telle que switch ou while ou dowhile ou for, mais quoi sert donc linstruction continue. En faite cette instruction ressemble beaucoup un ordre de Skip c..dire quon va ignorer une itration bien dtermin. Lexemple ci-dessous illustre le principe de fonctionnement de deux commandes.

Apprendre JavaScript :getTheBest( )

2009

Apprendre JavaScript :getTheBest( )


Les fonctions : La dclaration dune fonction se fait comme suit : function nom_fonction (paramtre1, paramtre2,.) { instruction .. .. return rsultat }

2009

Remarque : Dans une fonction on nest pas obliger de retourne un rsultat, dans certaine cas on prfre traiter le rsultat de la fonction au sein de cette dernire. Cest une point de vu ni plus ni moins ! De plus une fonction peut faire appelle dautres fonctions. Si on est dans une sorte de situation o le script entire est sous forme des fonctions qui se rappelle les une les autres, alors qui va appeler la 1re fonction ? Dans ce cas on utilise lvnement onload( ) dans le body tout en mention la fonction principale -qui doit tre dpourvu de paramtre- qui va lancer les autres fonctions. (voir lexemple2 ci-dessous)

Apprendre JavaScript :getTheBest( )

2009

Apprendre JavaScript :getTheBest( )


Les tableaux dans JavaScript : A un dimension :

2009

Pour les tableaux ayant une longueur, on peut utiliser la mthode 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 mthodes de lAPI Math : Mthode 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 lentier le plus proche Le cosinus de X Le sinus de X La tangente de X Le log de X Lexponentiel 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 quil faut indiquer lAPI Math.opration(oprande(s)) et nom pas lopration(oprande(s)). Les principales mthodes et fonctions sur les chaines de caractres : Plus avoir des informations fiable et prcise -propos les diffrentes mthodes et fonctions sur les chaines de caractres, je vous conseille normment de consult le fragment de code du Dreamweaver CS3 dans la section manipulation des chaines. Pour y joindre Cliquer sur le menu Fentre=> Fichiers (Raccourci clavier F8) puis activer langlet Fragments de code et choisissez le dossier manipulations de chane.

Apprendre JavaScript :getTheBest( )

2009

Remarque : Les chaine de caractres scrivant entre deux guillemets Exemple : window.alert("Cest ma premire Chaine"); Alors que les caractres scrivant entre deux apostrophes document.writeln(replaceCharacters(a,'b','c')); Les principales mthodes de lobjet Date :

Vous trouveriez les diffrentes mthodes associ lobjet Date ainsi que leurs explication on consultant la rfrence fournie avec Dreamweaver CS3. Pour y joindre Cliquer sur le menu Fentre=> Proprits (Raccourci clavier Ctrl+F3) puis activer langlet Rfrence et choisissez comme livre Rfrence JavaScript et comme objet mettez Date puis rgaler vous !. Remarque : La mthode getDay( ) renvoi un entier compris entre 0 et 6. Bien entendue 0 voque dimanche et 1 voque le lundi ainsi de suite aussi la mthode getMonth( ) renvoi un entier compris entre 0 et 11 pour dsigner les 12 mois de lanne. Remarque : Pour avoir toutes les proprits dune balise penser utiliser linspecteur de balise de Dreamweaver. Vous allez maintenant apprendre utiliser l'inspecteur de balises pour trouver une balise dans une page bien dterminer 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 dj ouvert.

Apprendre JavaScript :getTheBest( )

2009

2 Procdez de l'une des manires suivantes pour ouvrir l'inspecteur de balises, si ce n'est pas dj fait : Choisissez Fentre > Inspecteur de balises. (Raccourci clavier F9) Dans le groupe de panneaux Balise, cliquez sur l'onglet attributs afin daffiche une vue structure de toutes les attribues da la balise slectionner de votre page ou sur langlet Comportements afin de dfinir les comportements dclencher par la baise (Objet).

Apprendre JavaScript :getTheBest( )

2009

De mme on vous conseille de pens utiliser l'aide sur les attributs, les valeurs des balises et les mthodes que vous pourriez les consulter dans le rfrence de Dreamweaver. Pour y trouver faites comme suit : Choisissez Fentre > Rfrence. (Raccourci clavier Maj+F1) Dans le groupe de panneaux Rsultats, cliquez sur l'onglet Rfrence et choisissez votre livre, la balise dont vous voulez tre renseign et les attributs ou mthodes en question. Enfin Enjoy.

Vous aimerez peut-être aussi