1 / 160

Programmation JavaScript

Programmation JavaScript. cours inspiré du cours de R. Vivian. Plan. Introduction à JS Structure d’un script Les chaînes de caractères Les formulaires Accéder aux éléments Le langage objet JS JS et les maths JS et les cookies JS et les popup Annexes Trucs et astuces des formulaires

baby
Download Presentation

Programmation JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programmation JavaScript cours inspiré du cours de R. Vivian

  2. Plan • Introduction à JS • Structure d’un script • Les chaînes de caractères • Les formulaires • Accéder aux éléments • Le langage objet JS • JS et les maths • JS et les cookies • JS et les popup • Annexes • Trucs et astuces des formulaires • Les tableaux • Le modèle objet JS

  3. I. Présentation • JavaScript est un langage de programmation complètement lié au langage HTML. • Le développeur Internet code ses pages HTML en y intégrant des sources JavaScript. • Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages.

  4. I. Présentation • C'est le navigateur qui interprète le code HTML et JavaScript • L'interprétation dépend naturellement du type de navigateur utilisé et de sa version • JavaScript est un langage objet et événementiel

  5. I. Présentation • Le développeur crée et utilise des objets ayant des propriétés et des méthodes. • L'interprète gérant votre page détecte automatiquement tous les événements déclenchés par le visiteur • passage de souris • clic • saisie clavier... • À ces événements sont associées des actions • Par exemple onClick permet de spécifier des actions lors d'un clic de souris sur un objet donné

  6. I.1 HTML et JavaScript • Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript • dans le corps de la page, • en entête de page, • dans un événement d'un objet de la page.

  7. I.1 HTML et JavaScript <HTML> <HEAD> <TITLE> Titre de page </TITLE> <SCRIPT language="JavaScript"> <!-- // Cache ce qui suit aux navigateurs ne supportant pas JavaScript //--> // Fin de la partie cachée </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/JavaScript"> <!-- // Cache ce qui suit aux navigateurs ne supportant pas JavaScript //--> // Fin de la partie cachée </SCRIPT> </BODY> </HTML>

  8. I.2 Variables • JavaScript utilise l'instruction var pour la déclaration. • Pour déclarer une variablebasique (càd de type entier, numérique, chaîne de caractères), il ne faut pas déclarer le type. Le navigateur le détecte tout seul. • Par contre toute nouvelle variable doit être initialisée.

  9. I.2 Variables : Exemple var prenom_visiteur="Marcel"; var nom_visiteur="Dupond"; var age_visiteur=29; • On remarque la présence du point virgule (;) à la fin de chaque instruction. • Il est possible de placer sur une même ligne plusieurs instructions séparées par des points virgules.

  10. I.2 Variables : Exemple • Une variable déjà déclarée s'utilise ensuite normalement var accueil="Bonjour " + prenom + " " + nom;

  11. <HTML> <HEAD> <TITLE> Exemple 1 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var bonjour = "Bonjour !"; var question = "Comment allez vous "; var phrase = bonjour + "<BR>" + question; window.document.write( phrase, "aujourd'hui ?" ); </SCRIPT> </BODY> </HTML> I.2 Variables : Exemple

  12. <HTML> <HEAD> <SCRIPT> function saluer() { alert("Bonjour tout le monde !"); }</SCRIPT> </HEAD> <BODY> <H4>Exécution immédiate</H4> <SCRIPT> alert("Bonjour tout le monde !"); </SCRIPT> <H4>Exécution sur événement onClick</H4> <FORM> <INPUT type="button" name="Bouton1" value="Salut" onClick="saluer()"> </FORM> <H4>Exécution sur protocole javascript:</H4> <A HREF = "javascript:saluer()"> pour saluer </A> </BODY> </HTML> I.2 Variables : Exemple

  13. I.3 Objets • Les éléments manipulés par JavaScript et affichés dans votre navigateur sont des objets • Càd des éléments • Classés selon une hiérarchie pour pouvoir les désigner précisément • Auxquels on associe des propriétés et des méthodes

  14. I.3 Objets • Cette notion est importante mais nous allons en aborder que le strict nécessaire pour ce cours! • Voyons cela sur un exemple concret • Imaginez un un jardin dans lequel on trouve • une branche sur laquelle se trouve un nid • une balançoire avec un trapèze, une corde et un autre nid • Une salade (ce sont des maraîchers d'occaz)

  15. jardin arbre branche balançoire feuille trapèze nid Largeur 20 Color jaune corde Hauteur 4 nid Largeur 15 tronc Color maron racine Hauteur 6 salade

  16. I.3 Objets • Le nid sur l'arbre est donc désigné par • Contrairement au nid situé sur la balançoire • Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour le peindre en vert • il suffirait de taper une commande du genre • C'est donc ainsi que l'on représente les objets en JavaScript, à la seule différence que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur... jardin.arbre.branche.nid jardin.balançoire.nid jardin.arbre.branche.nid.couleur= vert;

  17. I.3 Objets • JavaScript intègre d'origine plusieurs type d'objets. • L'objet le plus grand est la fenêtrewindow • Dans la fenêtre s'affiche une pagedocument • ATTENTION, le respect des majuscules/minuscules est indispensable et source de nombreuses erreurs.

  18. Pour accéder à cet élément, on utilise la notation pointée window.document.form.textarea

  19. I.3 Objets : Exemple • Voyons en détail l'objet Date, très utile dans un environnement Internet. • La déclaration se fait toujours avec var. • Pour créer un objet, il faut utiliser le mot clé new suivi du type d'objet; ici date. // crée un objet date contenant la date du jour. var date_jour=new date(); // crée un objet date avec une date paramétrable. var une_date=new date(annee,mois-1,jour,heure,min) ;

  20. I.3 ObjetsAffichage de la date <HTML> <HEAD> </HEAD> <BODY> <SCRIPT> var date_jour = new Date(); window.document.write( date_jour ); </SCRIPT> </BODY> </HTML>

  21. I.5 Fonctions • Les fonctions sont déclarées et codées dans l'entête de la page et peuvent être appelées ensuite à n'importe quel endroit de la page.

  22. I.5 Fonctions • Pour déclarer une fonction on utilise le mot-clé function, suivi de son nom et des éventuels paramètres. function ma_fonction(param1, param2) { ... } function mon_autre_fonction() { ... }

  23. I.5 Fonctions • Le corps des fonctions est délimité par { et } dans lequel on place la déclaration des variables locales, propres à la fonction, ainsi que l'ensemble des traitements. • Remarque • non précédée de var, une variable a une visibilité globale. • Précédée de var, une variable a une visibilité limitée à la fonction ou elle a été définie.

  24. I.5 Fonctions • Une fonction aura dans son corps une ou plusieurs instructions return qui permet(tent) de renvoyer une valeur ou un objet. • Une fonction sans instruction return est une procédure.

  25. I.5 Fonctions : Exemple <HTML> <HEAD> <SCRIPT> function bonjour(prenom) { // déclaration de la procédure document.write("Bonjour, comment vas-tu ",prenom,"?<br>"); } function volumeSphere(rayon) { // déclaration de fonctions return 4/3*Math.PI*Math.pow(rayon,3); } function calculerPrix(PrixUnitaire, NbArticles) { // Facturation return PrixUnitaire* NbArticles; } </SCRIPT> </HEAD> L’entête

  26. I.5 Fonctions : Exemple <BODY> <SCRIPT> // appel de la procédure bonjour("Toto") ; //appels des fonctions var montant=calculerPrix( 150 , 4) ; document.write(“Tu dois “,montant,”F.<BR>”); document.write( "Tu dois ", calculerPrix( 150, 4), "F.<BR>"); document.write( "Volume de la sphère unité : ", volumeSphere(1)," ?<BR>" ); </SCRIPT> </BODY> </HTML>

  27. II Structure d'un Script • Le JavaScript a une structure de programmation proche du langage C; moins riche naturellement

  28. II.1 Écrire un commentaire • Indispensable les commentaires en programmation. • Pour mettre en commentaire une partie de code, jusqu'au prochain retour à la ligne var age=25;// Ceci est en commentaire

  29. II.1 Écrire un commentaire • Pour mettre en commentaire plusieurs lignes de code /* Ceci est en commentaire Ligne 1 Ligne 2 Dernière ligne */

  30. II.2 Grouper les instructions • Les instructions sont regroupées par les accolades { et }. • Il doit y avoir autant d'accolades ouvertes que d'accolades fermées. • Le groupement d'instructions est utile.

  31. II.2 Grouper les instructions • Il permet par exemple de regrouper les instructions d'une fonction function somme(a,b) { var sum=a+b; return sum; }

  32. II.3 Test Conditionnel • L'instruction if permet d'effectuer certaines actions uniquement quand un test donné a pour valeur true( vrai : valeur booléenne)

  33. II.3 Test Conditionnel • Il y a 2 moyens d'utiliser if • Action à réaliser = une instruction • Action = plusieurs instructions // Si l'âge est inf à 18 ans, un message est affiché if ( age < 18 ) alert( "Vous devez être majeur" ); // si l'âge est inf à 18 ans, un message est affiché et // le visiteur est redirigé vers la page mineur.php3. if (age<18) { alert("Vous devez être majeur"); window.location="mineur.php3"; }

  34. II.3 Test Conditionnel • L'instruction ifpeut être complétée par l'instruction else pour gérer les actions à associer à la valeur falsedu test

  35. II.3 Test Conditionnel Exemple <HTML> <HEAD> </HEAD> <BODY> <SCRIPT> var age=15; var wl = "mineur.php3"; if (age < 18) alert(" encore un peu jeune petit"); else { alert( "c'est bon tu peux entrer"); wl = "majeur.php3"; } window.location = wl ; </SCRIPT> </BODY> </HTML>

  36. II.4 Boucle for • Une boucle forrépèteun groupe d'instructions tant que la partie condition est vraie. • Une ou plusieurs variables définissent le nombre d'itérations for ( initialisation; condition; incrément ) { // Vos instructions }

  37. II.4 Boucle for • Ces variables sont initialisées au 1er passage puis la condition est évaluée • Ensuite, à chaque début d'itération les instructions de la partie incrément sont exécutées • En générale elles modifient les variables d'itération • Après la partie incrément faite, la condition est réévaluée

  38. II.4 Boucle for : Exemples • Faire une boucle pour i variant de 0 à 100 inclus par pas de 1 • Faire une boucle pour i variant de 10 à 0 inclus par pas de -1 for (var i=0;i<=100;i=i+1) for (var i=10;i>0;i=i-1)

  39. II.4 Boucle for : Exemple • Voici une application mathématique. • Il s'agit de calculer la somme des nombres de 1 à N. function somme(N) { var sum=0; for (var i=1;i<=N;i=i+1) { sum=sum+i; } alert("Somme de 1 à "+N+" = "+sum); }

  40. II.4 Boucle for : Astuces • Écrire a++ est équivalent à a=a+1 • Et a-- est équivalent à a=a-1 • Dans la même idée, on peut aussi remplacer a=a+5par a+=5 • Vous trouverez donc souvent les boucles for avec cette syntaxe for(var i=0;i<100;i++)

  41. II.4 Boucle for : Exemple <HTML> <HEAD> </HEAD> <BODY> <SCRIPT> for(var i=0;i<10;i++) { alert(" message " + i); } </SCRIPT> </BODY> </HTML>

  42. III Chaînes de caractères • Tous les langages de programmation prévoient une gestion des chaînes de caractères • JavaScript est particulièrement bien adapté pour le traitement des chaînes

  43. III.1 Déclaration • Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets " ou l'apostrophe ' var chaine1="Bonjour"; var chaine2='Bonjour'; // Ces deux lignes ont le même effet

  44. III.1 Déclaration • Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces caractères • Le secret est d'alterner les guillemets et les apostrophes selon les caractères spéciaux à afficher • Il faut veillez à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs JavaScript var chaine1="Bonjour l'ami"; var chaine2='Je vous dis "Bonjour " ';

  45. III.1 Déclaration • Exemple de déclaration incorrecte • Il existe aussi une autre solution • La variable chaine1 contient Je lui dis "Bonjour l'ami". • Javascript a interprété \" comme un guillemet. var chaine1="Je vous dis "Bonjour""; // ici, le " indique la fin de chaîne var chaine1="Je lui dis \"Bonjour l'ami\" ";

  46. III.1 Déclaration • Une variable peut être transformée en une chaîne de caractères à tout moment • Il est possible de modifier dynamiquement le type de la variable • A la fin de ce script, chaine est un nombre qui vaut 3.14159 ; pi est une chaîne qui contient "3.14152654". var chaine="azerty"; var pi=3.14159; chaine=pi; pi=pi+"2654";

  47. III.1 Déclaration • La différence peut sembler sans importance. Il n'en est rien! • Quand une variable est un nombre, il est possible de lui appliquer des opérations (addition, multiplication, ...) • Quand une variable est de type chaîne de caractères, on peut lui appliquer les méthodes propres aux objets chaînes

  48. III.2 Opérations • L'opération de base est la concaténation de chaînes • Elle consiste à assembler deux chaînes en une • L'opérateur est le +, à ne pas confondre avec l'opérateur addition qui s'applique aux nombres • La variable chaine contient après ce script "Vive le JavaScript". La concaténation est une opération simple et très utile var chaine1="Vive le "; var chaine2="JavaScript"; var chaine=chaine1+chaine2;

  49. III.2 Opérations • Une chaîne de caractères en JavaScript est un objet string sur lequel s'appliquent des propriétés et des méthodes. • La propriété length indique le nombre de caractères de la chaîne • chaine.length retourne le nombre de caractères, ici 6 caractères var chaine="azerty";

  50. III.2 Opérations • La méthode charAt(n) récupère le nième caractère • Attention, le premier caractère a comme indice 0 • chaine.charAt(1) retourne "z" var chaine="azerty"

More Related