Embed Size (px)
Citation preview
1
Plan
Généralités sur Javascript
Bases de JavaScript
Les Evènements
Les Tableaux
Les Objets Prédéfinis
Akram Rekik | Js
2
Généralités sur JavascriptIntroduction
I Le Javascript est un langage de programmation de scriptsorienté objet.
I Le Javascript s’inclut directement dans la page Web (ou dans unfichier externe) et permet de dynamiser une page HTML, enajoutant des interactions avec l’utilisateur, desanimations,comme par exemple :
I Afficher/masquer du texteI Faire défiler des imagesI Créer un diaporama avec un aperçu « en grand » des imageI Créer des infobulles
I Le Javascript est un langage dit client-side, c’est-à-dire que lesscripts sont exécutés par le navigateur chez le client.
Akram Rekik | Js
3
Généralités sur JavascriptIntérêt
Page Statique
1 <html >2 <head >3 <title > Page statique </title >4 </head >5 <body >6 <div >7 Nous sommes le 28/10/20148 </div >9 </body >
10 </html >
Akram Rekik | Js
4
Généralités sur JavascriptIntérêt
Page Dynamique
1 <html >2 <head >3 <title > Page dynamique </title >4 </head >5 <body >6 <script type = "text/javascript">78 date = new Date ();9 document.writeln(" Nous sommes le ",date);
1011 </script >12 </body >13 </html >
Akram Rekik | Js
5
Bases de JavaScriptTypage et Variables
4 types de baseI entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16)I flottant : 0.123, -0.4e5, .67E-89I booléen : true, falseI chaine de caractères : "chaine" ou ’chaine’
Pas de déclaration des variablesI nbr = 10;I fl = 3.141;I str1 = "L’étoile";I str2 = ’brille’;I lien = ’<a href="index.htm">Home</a>’;
Akram Rekik | Js
6
Bases de JavaScriptOpérateurs
I affectation+=, -=, *=, /=, %=, &=, |=
I comparaison==, !=, <, <=, >, >=
I arithmétique%, ++, - -
I logique&&, ||, !
Akram Rekik | Js
7
Bases de JavaScriptStructures de contrôle
!!! Même Syntaxe que le C !!!
Structures de contrôleif else, switch case, for, while, break, continue, do while
Akram Rekik | Js
8
Bases de JavaScriptLire/Ecrire
I prompt()Ouvre une boite de dialogue avec une zone saisie et 2 boutonsOK et Annuler, retourne l’information lue
I confirm()Ouvre une boite de dialogue avec 2 boutons OK et Annuler,retourne un booléen
I alert()Permet d’écrire un message dans une fenêtre
Akram Rekik | Js
9
Bases de JavaScriptExemple
Exemple
1 < script >2 var nicks = ’ ’ , nick ,3 proceed = true ;4 while ( proceed ) {5 nick = prompt ( ’Entrez un prenom : ’ );6 if ( nick ) {7 nicks += nick + ’ ’;8 }9 else {
10 proceed = false ;11 }12 }13 alert ( nicks );14 </ script >
Akram Rekik | Js
10
Les Evènements
I onclick : un clic du bouton gauche de la souris sur une cibleI onMouseOver : passage du pointeur de la souris sur une cibleI onblur : une perte de focus d’une cibleI onfocus : une activation d’une cibleI onselect : une selection d’une cibleI onchange : une modification du contenue d’une cibleI onsubmit : une soumission d’un formulaireI onload : un chargement d’une pageI onunload : la fermeture d’une fenetre ou le chargement d’une
page autre que la courante
Akram Rekik | Js
11
Les EvènementsExemple
Exemple
1 <a href = " http :// www . ossec . tn "2 onclick = " alert ( ’Bonjour ’) " > Cliquez </ a >
Akram Rekik | Js
12
Les TableauxTableaux Classiques
var T = new Array()
Tableau classiquevar jours = new Array();
var jours = new Array("Lundi", "Mardi", "Mercredi, "Jeudi", "Vendredi","Samedi", "Dimanche");
jours[0]
jours.length
Akram Rekik | Js
13
Les TableauxTableaux Associatifs
Tableau associatifvar tableau = new Array();
tableau["un"] = "La première chaine";
tableau["deux"] = "La deuxième chaine";
tableau["tnt"] = "pleib d’autres chaines";
tableau.length
Akram Rekik | Js
14
Les TableuxLes Méthodes de l’objet Array
I var tableau3=tableau1.concat(tableau2);
I var chaine=tableau.join(séparateur);
I tableau.pop();
I tableau.reverse();
I tableau.sort();Le tri est irréversible ! Une fois trié, il est impossible de récupérervotre tableau dans l’ordre initial.
Akram Rekik | Js
15
Les TableauxExemple 1
Exemple 1
1 var table = new Array("Pierre","Paul","Jacques");2 table [3] = "Toto";3 table.sort ();45 function lire1(tab)6 {7 var chaine = "Le tableau contient :"8 for(var i=0; i<tab.length; i++)9 chaine += "\n" + i + " -> " + tab[i];
1011 alert(chaine );12 }1314 lire1(table);
Akram Rekik | Js
16
Les TableauxExemple 2
Exemple 2
1 var table = new Array("Pierre","Paul","Jacques");2 table [3] = "Toto";3 table.reverse ();45 function lire2(tab)6 {7 var chaine = "Le tableau contient :";8 for(var indice in tab)9 chaine +="\n" +indice+ " -> " +tab[indice ];
1011 alert(chaine );12 }1314 lire2(table);
Akram Rekik | Js
17
Les Objets PrédéfinisL’objet Date
L’Objet DateI getYear() : 2 chiffresI getFullYear() : 4 chiffresI getMonth() : 0 – 11I getDate() : 1 – 31I getDay() : 0 – 6 (dimanche – samedi)I getHours() : 0 – 23I getMinutes : 0 – 59I getSeconds() : 0 – 59
Akram Rekik | Js
18
Les Objets PrédéfinisL’Objet Math
L’Objet Math
PropriétésPropriétés: Math.PI et Math.E
Méthodesatan(), acos(), asin(),tan(), cos(), sin(),abs(), exp(), log(), max(), min(), pow(),round(), sqrt(), floor(), random()
Akram Rekik | Js
19
Les Objets PrédéfinisL’Objet Document
Objet Document
AttributsI title : titre
MéthodesI write() : écrireI getElementById("id")I getElementsByTagName("balise")
EvénementsI onClick et onDblClick : lors d’un clic / double clic sur l’élément en
questionI onMouseMove : lors d’un déplacement de la souris au-dessus
de cet élément
Akram Rekik | Js
20
Les Objets PrédéfinisL’Objet Form
Objet Form
AttributsI name : nomI action : fichierI method : get ou postI enctype : encodage
MéthodesI submit() : soumissionI reset() : remise à zèro
EvénementsI onSubmit() : lors de la soumissionI onReset() : lors de la remise à zèro
Akram Rekik | Js
21
Les Elèments d’un FormulaireInput Text
<input type="text" id="motclef" value="Mot clef">Les propriétés :
I value : valeurI defaultValue : valeur par défaultI form : objet formulaireI maxLength : longueur maximale
Les méthodes :I blur() : perte de focusI focus() : prise de focusI select() : donne le focus et sélectionne la zone de saisie
Les événements :I onBlur : lors de la perte de focusI onChange : lors d’un changementI onFocus : lors de la prise de focus
Akram Rekik | Js
22
Les Elèments d’un Formulaireinput button
input buttonLes propriétés :
I value : libelléLes méthodes :
I click() : clicLes événements :
I onClick : lors d’un clic
Akram Rekik | Js
23
Les Elèments d’un Formulaireselect
selectLes propriétés :
I size : nombre de lignesI options : tableau
I value : valeurI text : libelléI defaultSelected : true of falseI selected : true of false
I selectedIndex : indice de la ligne sélectionnée
Akram Rekik | Js
24
Les Elèments d’un FormulaireExemple
Exemple
1 // mettre cette fonction dans le script.js2 function Selection(liste)3 {4 var numero = liste.selectedIndex;5 var valeur = liste.options[numero ]. value;6 alert("Vous avez choisi : " + valeur );7 }8 //ce code dans la page html9 Vous etes :
10 <select name="genre" onchange="Selection(this)">11 <option value="rien">Choisissez ...</option >12 <option value="garcon">Un garçon </option >13 <option value="fille">Une fille </option >14 <option value="saispas">Je ne sais pas </option >15 </select >
Akram Rekik | Js
25
Les Elèments d’un FormulaireExemple
Exemple
1 <img src="ossec.png" alt="" id="uneImage" />2 document.getElementById("uneImage"). onclick =3 function ()4 {5 alert("Oui ?");6 }
Akram Rekik | Js
Merci !
