Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

initiation au javascript

518 views

Published on

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

Published in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×