M. DIENG Abdoulaye 
1
1. Présentation de JavaScript 
2. Inclusion du JavaScript 
3. Variable 
4. Types 
5. Opérateurs 
6. Entrée/Sortie de base ...
 JavaScript, développé par Netscape en 1995, est un langage 
de script (côté client) incorporé dans un document 
(X)HTML ...
 Inclusion interne : n’importe où dans la page html, avec la 
balise script comme suit : 
<script type="text/javascript">...
 Une variable permet de désigner un emplacement mémoire 
et possède : 
• un identificateur ou nom 
• une valeur ou conten...
 Type number: 
• Entier : en base 10, en hexadécimal ou en octal. 
• Réels : forme décimal ou avec exposant (e ou E). 
 ...
 Number(obj) 
Convertit l’objet spécifié en nombre ou en NaN. 
Si obj est du type Date , Number retourne une valeur en ...
 Opérateurs arithmétiques 
+, -, *, /, % (modulo), ++(incrément), --(décrément) 
NB : + permet aussi de concaténer deux s...
 prompt("question" [, "texteParDéfaut"]) 
• Ecrit une question dans une boîte de dialogue munie d’une 
zone de saisie et ...
 confirm("texte") 
• Ecrit un texte (entre quotes dans le code source) et/ou la 
valeur d’une variable (hors quotes) dans...
 alert("texte") 
• Ecrit un texte (entre quotes dans le code source) et/ou la 
valeur d’une variable (hors quotes) dans u...
 document.write("texte") 
• Ecrit un texte (entre quotes dans le code source) et/ou la 
valeur d’une expression (hors quo...
 Les tableaux sont des objets (Array Object). 
 Déclaration d’un tableau : 
var nomTableau=new Array([dim]); 
 Déclarat...
 if (condition_1) 
{traitement_1} 
[else 
{traitement_2}] 
 if (condition_1) 
{traitement_1} 
else if (condition_2) 
{tr...
 while(condition){ 
traitement 
} 
 do{ 
traitement 
}while(condition); 
 for(initialisation; condition; itération ){ 
...
 Syntaxe de la définition d’une fonction : 
function nomDeLaFonction([param_1 [, param_2, …] ] ) { 
séquence d'instructio...
 Événement = changement d'état de l'environnement qui 
peut être intercepté par le code JavaScript 
 Quelques évènements...
 Gérer un événement = associer une action à un événement. 
 Syntaxe de la création d’un gestionnaire d'événement : 
• At...
 Il permet d’accéder et de modifier le contenu d’une page 
Web 
 Quelques méthodes de sélection 
• getElementById("nomId...
20 
Expression Retour 
elem Les balises elem. 
elem bal Balises bal contenues dans une balise elem. 
elem > bal Balises ba...
 Une fois sélectionné, tout contenu est accessible en lecture 
et en écriture 
 nomElement.innerHTML récupère ou définit...
https://developer.mozilla.org/fr/docs/JavaScript/Référence_Ja 
vaScript 
http://www.toutjavascript.com/reference/ 
http://...
Prochain SlideShare
Chargement dans…5
×

initiation au javascript

408 vues

Publié le

Objectif général : Savoir créer une réelle interactivité entre le contenu d'une page HTML et l'internaute

Objectifs opérationnels:
• Stocker et utiliser des données à l’aide des variables et des opérateurs
• Communiquer avec le programme à travers le clavier et l’écran
• Contrôler le flux d’exécution des instructions
• Définir et utiliser des fonctions
• Manipuler des tableaux et des chaînes de caractères
• Sélectionner du contenu dans une page Web
• Manipuler du contenu dans une page Web
• Interagir avec l’internaute

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
408
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

initiation au javascript

  1. 1. M. DIENG Abdoulaye 1
  2. 2. 1. Présentation de JavaScript 2. Inclusion du JavaScript 3. Variable 4. Types 5. Opérateurs 6. Entrée/Sortie de base 7. Tableaux 9. Structures de contrôle 10. Fonctions 11. Evénements 12. Objet document 2
  3. 3.  JavaScript, développé par Netscape en 1995, est un langage de script (côté client) incorporé dans un document (X)HTML pour créer des pages web interactives.  JavaScript permet, entre autres, de : • traiter les saisies et frappes faites au clavier; • traiter les mouvements et clicks de la souris ; • réagir aux actions précitées avec des sorties à l'écran ou des modifications dynamiques dans la page Web.  JavaScript permet de décharger le serveur de plusieurs tâches et d'éviter les attentes des réponses aux requêtes adressées via le réseau internet.  JavaScript est un langage interprété par le navigateur. 3
  4. 4.  Inclusion interne : n’importe où dans la page html, avec la balise script comme suit : <script type="text/javascript"> Placez ici le code de votre script </script>  Inclusion externe : écrire le code JavaScript ds un fichier .js que l’on inclura dans toute page html comme suit : <script type="text/javascript" src="chemin/du/fichier_inclus.js"></script>  Toute dépendance doit être incluse avant le code.  En production, pour le chargement rapide d’une page : • inclure éventuellement JavaScript après le contenu ; • combiner plusieurs fichiers JavaScript. 4
  5. 5.  Une variable permet de désigner un emplacement mémoire et possède : • un identificateur ou nom • une valeur ou contenu « provisoire »; • un type indiquant comment le contenu doit être interprété;  Syntaxe de déclaration d’une variable : var nomVariable; (Le mot var est facultatif, mais recommandé)  Le type d’une variable n’est déterminé que lors de l'affectation. 5
  6. 6.  Type number: • Entier : en base 10, en hexadécimal ou en octal. • Réels : forme décimal ou avec exposant (e ou E).  Type string: • une string représente une suite de caractères. • une string est délimitée par des guillemets (' ou " ). • l’anti-slash () permet d’échapper ou de déspécialiser les caractères (', ", ).  Type boolean: exprime la valeur true ou la valeur false. Seules les valeurs 0 et ses variations, "" (la chaîne vide), null(absence délibérée de valeur),NaN(Not a Number), undefined (variable non initialisée) donnent false par conversion. 6
  7. 7.  Number(obj) Convertit l’objet spécifié en nombre ou en NaN. Si obj est du type Date , Number retourne une valeur en millisecondes mesurées depuis le 01 Janvier 1970, positive après cette date, négative avant.  parseFloat(chaine) • Analyse une chaîne et retourne un nombre à virgule flottante ou retourne NaN.  parseInt(chaine, base) • Analyse une chaîne et retourne un entier dans la base base ou retourne NaN.  Si un caractère non conforme est rencontré, chacune de ces fonctions retourne la valeur analysée jusqu'à ce caractère (exclu). 7
  8. 8.  Opérateurs arithmétiques +, -, *, /, % (modulo), ++(incrément), --(décrément) NB : + permet aussi de concaténer deux string  Opérateurs d’assignation = (affectation), += (ajouter à), *=, /=, -=, %= NB : += permet aussi de concaténer deux string  Opérateurs logiques && (et), || (ou), ! (non)  Opérateurs de comparaison == (égalité), <, <=, >, >=, != (différent) 8
  9. 9.  prompt("question" [, "texteParDéfaut"]) • Ecrit une question dans une boîte de dialogue munie d’une zone de saisie et de deux boutons OK et Annuler; • Le texte par défaut, s’il est mis, s’affiche dans la zone de saisie pour aider l’internaute à répondre à la question • Retourne le texte saisi par le visiteur qui appuie aussi sur OK • Retourne null si le visiteur clique sur Annuler ou appuie sur la touche Echap. • Remplacer les caractères accentués par leur code latin-1 en octal précédé de l’anti-slash. Ex : é (351), è (350), ê (352), à (340) Table complète : www.pjb.com.au/comp/diacritics.html 9
  10. 10.  confirm("texte") • Ecrit un texte (entre quotes dans le code source) et/ou la valeur d’une variable (hors quotes) dans une boîte de dialogue munie de deux boutons OK et Annuler, • Retourne true si le visiteur clique sur Ok • Retourne false si le visiteur clique sur Annuler ou appuie sur la touche Echap. • Un texte et une variable sont concaténés par +. • Pour écrire sur plusieurs lignes, utiliser le caractère n. • Remplacer tout caractère non-ASCII par son code latin-1 en octal précédé de l’anti-slash. 10
  11. 11.  alert("texte") • Ecrit un texte (entre quotes dans le code source) et/ou la valeur d’une variable (hors quotes) dans une boîte de dialogue munie d’un bouton OK. • Un texte et une variable sont concaténés par +. • Pour écrire sur plusieurs lignes, utiliser le caractère spécial de retour chariot n. • Remplacer tout caractère non-ASCII par son code latin-1 en octal précédé de l’anti-slash. 11
  12. 12.  document.write("texte") • Ecrit un texte (entre quotes dans le code source) et/ou la valeur d’une expression (hors quotes) dans le corps (body) du document, à la position de l'appel du script. • Un texte et une expression sont concaténés par , ou par +. • Pour écrire sur plusieurs lignes, utiliser la balise <br>. • Remplacer tout caractère non-ASCII par son code html. x 12
  13. 13.  Les tableaux sont des objets (Array Object).  Déclaration d’un tableau : var nomTableau=new Array([dim]);  Déclaration et initialisation : • var nomTableau=new Array( element_1 [, element_2, …] ); • var nomTableau=[element_1 [, element_2, …] ];  length, seule propriété de l’objet Array renvoi le nombre d’éléments d’un tableau  Accès à un élément : nomTableau[ i ] où i varie de 0 à length-1 x 13
  14. 14.  if (condition_1) {traitement_1} [else {traitement_2}]  if (condition_1) {traitement_1} else if (condition_2) {traitement_2} … // suite de elseif else {traitement_n}  switch (expression){ case valeur_1 : traitement 1; break; case valeur_2 : traitement 2; break; … [default : traitement par défaut] } 14
  15. 15.  while(condition){ traitement }  do{ traitement }while(condition);  for(initialisation; condition; itération ){ traitement }  for(var x in obj){ traitement } x = indice ou propriété de obj 15 x
  16. 16.  Syntaxe de la définition d’une fonction : function nomDeLaFonction([param_1 [, param_2, …] ] ) { séquence d'instructions; [return nom_variable] }  Le nom de la fonction est optionnel  Variable locale = variable déclarée dans une fonction avec var.  Variable globale = variable déclarée en dehors d’une fonction ou déclarée sans var x 16
  17. 17.  Événement = changement d'état de l'environnement qui peut être intercepté par le code JavaScript  Quelques évènements click : l’élément associé est cliqué mouseOut : le pointeur de la souris quitte l’élément mouseOver : le pointeur de la souris survole l’élément focus : l’élément associé est ciblé blur : l’élément associé n’est plus ciblé change : le contenu du champ texte associé est modifié load : la page est chargée dans le navigateur submit : le formulaire associé est soumis 17
  18. 18.  Gérer un événement = associer une action à un événement.  Syntaxe de la création d’un gestionnaire d'événement : • Attribut HTML : <balise onEvenement='Action_JavaScript ou nomFonction();'> Ex : <body onLoad="alert(‘la page est chargée !’);" > • Propriété DOM element.onevenement=function(){ … }; Ex : <span id="clickme">Cliquez-moi !</span> <script type="text/javascript"> var elt = document.getElementById('clickme'); elt.onclick = function() { alert("Vous m'avez cliqué !"); }; </script> element.evenement() déclenche un événement ds le code Ex : form1.submit() // soumet le formulaire form1 18
  19. 19.  Il permet d’accéder et de modifier le contenu d’une page Web  Quelques méthodes de sélection • getElementById("nomId") retourne un objet html à partir de son id • getElementsByTagName("nomElement") retourne un tableau d‘éléments HTML à partir de leur nom • querySelector("selecteur") retourne le 1er élément satisfaisant au sélecteur CSS. • querySelectorAll("selecteur") retourne tous les éléments satisfaisant au sélecteur CSS. 19
  20. 20. 20 Expression Retour elem Les balises elem. elem bal Balises bal contenues dans une balise elem. elem > bal Balises bal directement descendantes d’une balise elem. elem + bal Balises bal immédiatement précédées d'une balise elem. elem ~ bal Balises bal précédées d'une balise elem. #nomId Balise ayant l'id "nomId". .nomClasse Balises ayant la classe "nomClasse". elem[attr] Balises elem dont l'attribut "attr" est spécifié. elem[attr="val"] Balises elem dont l'attribut "attr" vaut val. elem[attr^="val"] Balises elem dont l'attribut "attr" commence par val. elem[attr$="val"] Balises elem dont l'attribut "attr" se termine par val. elem[attr*="val"] Balises elem dont l'attribut "attr" contient val.
  21. 21.  Une fois sélectionné, tout contenu est accessible en lecture et en écriture  nomElement.innerHTML récupère ou définit tout le balisage et le contenu au sein d'un élément donné.  nomElement.nomAttribut récupère ou définit la valeur d’un attribut de l’élément concerné.  nomElement.style.propriétéCSS récupère ou définit une propriété de style de l’élément concerné. propriétéCSS a presque le même nom qu’en CSS Remplacer les "-" par une majuscule sur le mot suivant Ex : background-color → style.backgroundColor  nomElement.className récupère ou définit l’attribut class de x l’élément concerné. 21
  22. 22. https://developer.mozilla.org/fr/docs/JavaScript/Référence_Ja vaScript http://www.toutjavascript.com/reference/ http://www.w3schools.com/jsref/ 22

×