Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Ähnlich wie Foramtion Js
Ähnlich wie Foramtion Js (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Foramtion Js
- 1. Open Source Software Ensi Club Formation JavaScript Akram Rekik akram1rekik@gmail.com October 28, 2014
- 2. 1 Plan Généralités sur Javascript Bases de JavaScript Les Evènements Les Tableaux Les Objets Prédéfinis Akram Rekik | Js
- 3. 2 Généralités sur Javascript Introduction Le Javascript est un langage de programmation de scripts orienté objet. Le Javascript s’inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l’utilisateur, des animations,comme par exemple : Afficher/masquer du texte Faire défiler des images Créer un diaporama avec un aperçu « en grand » des image Créer des infobulles Le Javascript est un langage dit client-side, c’est-à-dire que les scripts sont exécutés par le navigateur chez le client. Akram Rekik | Js
- 4. 3 Généralités sur Javascript Inté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/2014 8 </div > 9 </body > 10 </html > Akram Rekik | Js
- 5. 4 Généralités sur Javascript Intérêt Page Dynamique 1 <html > 2 <head > 3 <title > Page dynamique </title > 4 </head > 5 <body > 6 <script type = "text/javascript"> 7 8 date = new Date (); 9 document.writeln(" Nous sommes le ",date ); 10 11 </script > 12 </body > 13 </html > Akram Rekik | Js
- 6. 5 Bases de JavaScript Typage et Variables 4 types de base entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16) flottant : 0.123, -0.4e5, .67E-89 booléen : true, false chaine de caractères : "chaine" ou ’chaine’ Pas de déclaration des variables nbr = 10; fl = 3.141; str1 = "L’étoile"; str2 = ’brille’; lien = ’<a href="index.htm">Home</a>’; Akram Rekik | Js
- 7. 6 Bases de JavaScript Opérateurs affectation +=, -=, *=, /=, %=, &=, |= comparaison ==, !=, <, <=, >, >= arithmétique %, ++, - - logique &&, ||, ! Akram Rekik | Js
- 8. 7 Bases de JavaScript Structures de contrôle !!! Même Syntaxe que le C !!! Structures de contrôle if else, switch case, for, while, break, continue, do while Akram Rekik | Js
- 9. 8 Bases de JavaScript Lire/Ecrire prompt() Ouvre une boite de dialogue avec une zone saisie et 2 boutons OK et Annuler, retourne l’information lue confirm() Ouvre une boite de dialogue avec 2 boutons OK et Annuler, retourne un booléen alert() Permet d’écrire un message dans une fenêtre Akram Rekik | Js
- 10. 9 Bases de JavaScript Exemple 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
- 11. 10 Les Evènements onclick : un clic du bouton gauche de la souris sur une cible onMouseOver : passage du pointeur de la souris sur une cible onblur : une perte de focus d’une cible onfocus : une activation d’une cible onselect : une selection d’une cible onchange : une modification du contenue d’une cible onsubmit : une soumission d’un formulaire onload : un chargement d’une page onunload : la fermeture d’une fenetre ou le chargement d’une page autre que la courante Akram Rekik | Js
- 12. 11 Les Evènements Exemple Exemple 1 <a href = " http :// www . ossec . tn " 2 onclick = " alert ( ’Bonjour ’) " > Cliquez </ a > Akram Rekik | Js
- 13. 12 Les Tableaux Tableaux Classiques var T = new Array() Tableau classique var jours = new Array(); var jours = new Array("Lundi", "Mardi", "Mercredi, "Jeudi", "Vendredi", "Samedi", "Dimanche"); jours[0] jours.length Akram Rekik | Js
- 14. 13 Les Tableaux Tableaux Associatifs Tableau associatif var 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
- 15. 14 Les Tableux Les Méthodes de l’objet Array var tableau3=tableau1.concat(tableau2); var chaine=tableau.join(séparateur); tableau.pop(); tableau.reverse(); tableau.sort(); Le tri est irréversible ! Une fois trié, il est impossible de récupérer votre tableau dans l’ordre initial. Akram Rekik | Js
- 16. 15 Les Tableaux Exemple 1 Exemple 1 1 var table = new Array("Pierre","Paul","Jacques"); 2 table [3] = "Toto"; 3 table.sort (); 4 5 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]; 10 11 alert(chaine ); 12 } 13 14 lire1(table ); Akram Rekik | Js
- 17. 16 Les Tableaux Exemple 2 Exemple 2 1 var table = new Array("Pierre","Paul","Jacques"); 2 table [3] = "Toto"; 3 table.reverse (); 4 5 function lire2(tab) 6 { 7 var chaine = "Le tableau contient :"; 8 for(var indice in tab) 9 chaine +="n" +indice+ " -> " +tab[indice ]; 10 11 alert(chaine ); 12 } 13 14 lire2(table ); Akram Rekik | Js
- 18. 17 Les Objets Prédéfinis L’objet Date L’Objet Date getYear() : 2 chiffres getFullYear() : 4 chiffres getMonth() : 0 – 11 getDate() : 1 – 31 getDay() : 0 – 6 (dimanche – samedi) getHours() : 0 – 23 getMinutes : 0 – 59 getSeconds() : 0 – 59 Akram Rekik | Js
- 19. 18 Les Objets Prédéfinis L’Objet Math L’Objet Math Propriétés Propriétés: Math.PI et Math.E Méthodes atan(), acos(), asin(),tan(), cos(), sin(), abs(), exp(), log(), max(), min(), pow(), round(), sqrt(), floor(), random() Akram Rekik | Js
- 20. 19 Les Objets Prédéfinis L’Objet Document Objet Document Attributs title : titre Méthodes write() : écrire getElementById("id") getElementsByTagName("balise") Evénements onClick et onDblClick : lors d’un clic / double clic sur l’élément en question onMouseMove : lors d’un déplacement de la souris au-dessus de cet élément Akram Rekik | Js
- 21. 20 Les Objets Prédéfinis L’Objet Form Objet Form Attributs name : nom action : fichier method : get ou post enctype : encodage Méthodes submit() : soumission reset() : remise à zèro Evénements onSubmit() : lors de la soumission onReset() : lors de la remise à zèro Akram Rekik | Js
- 22. 21 Les Elèments d’un Formulaire Input Text <input type="text" id="motclef" value="Mot clef"> Les propriétés : value : valeur defaultValue : valeur par défault form : objet formulaire maxLength : longueur maximale Les méthodes : blur() : perte de focus focus() : prise de focus select() : donne le focus et sélectionne la zone de saisie Les événements : onBlur : lors de la perte de focus onChange : lors d’un changement onFocus : lors de la prise de focus Akram Rekik | Js
- 23. 22 Les Elèments d’un Formulaire input button input button Les propriétés : value : libellé Les méthodes : click() : clic Les événements : onClick : lors d’un clic Akram Rekik | Js
- 24. 23 Les Elèments d’un Formulaire select select Les propriétés : size : nombre de lignes options : tableau value : valeur text : libellé defaultSelected : true of false selected : true of false selectedIndex : indice de la ligne sélectionnée Akram Rekik | Js
- 25. 24 Les Elèments d’un Formulaire Exemple Exemple 1 // mettre cette fonction dans le script.js 2 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 html 9 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
- 26. 25 Les Elèments d’un Formulaire Exemple Exemple 1 <img src="ossec.png" alt="" id="uneImage" /> 2 document.getElementById("uneImage"). onclick = 3 function () 4 { 5 alert("Oui ?"); 6 } Akram Rekik | Js
- 27. Merci !