• Aucun résultat trouvé

[PDF] Cours JavaScript pour tout apprendre sur le langage de script | Cours javascript

N/A
N/A
Protected

Academic year: 2021

Partager "[PDF] Cours JavaScript pour tout apprendre sur le langage de script | Cours javascript"

Copied!
16
0
0

Texte intégral

(1)

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 <head> …….</head>. De même, il existe 2 écritures possibles pour introduire ce dernier :

1ére Ecriture :

<script language="javascript">

... ... </script> 2ére Ecriture : <script type="text/javascript"> ... ... </script>

A

(2)

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 ("<h1>C’est ma première phrase</h1>"); 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 <br/> Ligne 2") ;

(3)

 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 Description Exemple

\n Nouvelle ligne window.alert("ligne1\n ligne2");

\t Espace window.alert("Item1\n Item2");

\r 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.

(4)

Bouton Valeur renvoyé

OK True

Annuler 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")}; </script>

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é.

(5)

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<Y

Supérieur ou égale >= X>=Y Inférieur ou égale <= X<=Y

(6)

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.

(7)
(8)

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.

(9)
(10)

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)

(11)
(12)

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 :

(13)

Les principales méthodes de l’API Math :

Méthode Description Exemple

abs(X) Valeur absolu de X Math.Abs(-5.1)=5.1 ceil(X) Rapprochement au plus

grand entier naturel

Math.Ceil(9.2)=10 Math.Ceil (-13.1)=-13 floor(X) Rapprochement au plus

petit entier naturel

Math.floor(9.2)=9 Math.floor(-9.8)=-10 max(X,Y) Le max entre X et Y Math.max(12,13)=13 min(X,Y) Le min entre X et Y Math.min(12,13)=12

pow(X,Y) XY Math.pow(2,3)=8

round(X) Arrondement de X à l’entier le plus proche

Math.round(9.2)=9 Math.round(9.6)=10 cos(X) Le cosinus de X Math.cos(0)=1

sin(X) Le sinus de X Math.sin(0)=0 tan(X) La tangente de X Math.tan(0)=0 log(X) Le log de X Math.log(E)=1 exp(X) L’exponentiel de X Math.exp(0)=1 sqrt(X) Le racine Carré de X 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.

(14)

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 :

(15)

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).

(16)

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§.

Références

Documents relatifs

Par ailleurs, les enfants ont tous utilisé PLAY-ON à partir du clavier, c'est à dire des flèches directionnelles (la gauche et la droite pour la discrimination et les quatre pour

Multi-level analysis was then performed to test both hypotheses: to determine the differences in the intensity of physiological arousal (DVs: heart rate and skin conductance

Ainsi, pour reprendre l’exemple de Gosselin, un énoncé comme « La fenêtre est ouverte » est, certes, constitué d’une proposition validée sous une modalité

سفنلا تايعادتو ناطيشلا تابعلات نم ملاحأ ثاغضأ صنلاو ول لّوؤلداو لَّوؤلدا( يى رصانع ةثلاث رّفوت نم اًمومع ليوأتلا ةيلمع لمتكت تىح ّدبلاو ) لَّوؤلدا 1

Mais malgré la dotation à l’Égypte, par le budget saoudien, d’avions Rafale et de navires Mistral, en sus de l’aide financière annuelle des États-Unis, l’armée égyptienne

photojournalismes que se clôt cet ouvrage de Vincent Lavoie selon qui la nécessité d’une légitimation morale de la pratique du photojournalisme aurait entraîné la

Une majorité des patients qui utili- sent des thérapies alternatives espè- rent obtenir un délai dans la progression de leur infection et un soulagement des symptômes ,

L’archive ouverte pluridisciplinaire HAL, est destinée au dépôt et à la diffusion de documents scientifiques de niveau recherche, publiés ou non, émanant des