JavaScript. Entrée/sortie de données avec JavaScript. Qu est ce que c est? HTML et Javascript. HTML et Javascript. Gérer les erreurs 03/10/16

Transcription

1 Qu est ce que c est? JavaScript Partie 1 Dynamiser un site web codé en HTML Développer des applications Internet Langage de script simplifié orienté objet Exécuté coté client Scripts interprétés écrit dans le document HTML entre des balises S 2 HTML et Javascript HTML et Javascript Balises spécifiques indispensables <script type="text/javascript"></script> Possibilité de spécifier une version <script type="text/javascript1.3"></script> JavaScript désactivé <noscript>cette page utilise JavaScript</noscript> 3 alert('coucou'); Insertion dans le corps : exécution directe fichierjs.js function coucou() alert('coucou'); <body> <script type='text/javascript' src='fichierjs.js'></script> </body> Insertion dans l entête : appel par un évènement fichierjs.js <head> <script type='text/javascript' src='fichierjs.js'></script> </head> <body onload='fonctionjs()'> 4 Gérer les erreurs Sous Firefox Menu Outils de développement web / Console Sous IE <9 : En cas d erreur, double cliquer sur le attention de la barre d état Opera Page/Outils de développeur/console d erreurs Google chrome Icône clé menu Outils de développement/console Safari Activer menu Développement. Clic sur roue/préférences onglet Avancées/cochez Afficher le menu Icône/Développement/Afficher la console des erreurs 5 Entrée/sortie de données avec JavaScript Méthode alert() : ne renvoie rien alert( Salut!!!'); Méthode confirm() : renvoie true ou false var res=confirm('etes vous sur?'); Méthode prompt() : renvoie chaine de caractère ou null var text=prompt('quel est votre nom?','toto'); 6 1

2 Syntaxe du JavaScript Création de variables (1) Règles générales Espaces n'importe où dans le script. ; à la fin de chaque commande 2.5 et pas 2,5 Le langage JavaScript est sensible à la casse Deux manières pour intégrer des commentaires //Double slash devant la ligne de code /*Encadrer le code sur plusieurs lignes */ 7 Déclaration var pour déclarer une ou plusieurs variables Affectation = pour affecter une valeur var i, j, k=2; //Déclaration de i, j et k i = 0; //Affecter 0 à i var max = 10; //Déclaration et affectation de max var caractere = ['a', 'b', 'c']; //Déclaration et affectation de caractère 8 Création de variables (2) Portée des variables Variable globale Déclaration et affectation Utilisation variable non déclarée : erreur Lecture variable non déclarée mais valeur affectée : propriété de window variable déclarée mais aucune valeur affectée : indéfinie (undefined). 9 i=0; alert(i); //0 var k; alert(k); //undefined alert(j); //erreur Déclarée en début de script Accessible à n'importe quel endroit du programme Variable locale Déclarée à l'intérieur d'une fonction Utilisable que dans la fonction elle-même Pas de variable locale pour les boucles Bonnes pratiques Utiliser une fonction parente pour éviter les variables globales 10 Noms des variables Premier caractère Lettre (majuscule ou minuscule) var 123;//non valide Type des variables Caractères autorisés Lettres, chiffres, ou _ (underscore) var indice_tab1;//valide Caractères interdits Caractères spéciaux et accentués (é, à, ç, ï, etc..),espaces Casse Différence entre lettre majuscules et minuscules var Indice, indice;//2 variables différentes Mots interdits Mots réservés JavaScript 11 Automatique En fonction du type de données affectées à la variable Principaux types de valeurs Chaine de caractères Nombre Booléen : true et false 12 var variable = 'nom'; var variable = 2; 2

3 Type spéciaux Fonctions prédéfinies null Absence de données dans une variable Une seule valeur : null undefined Aucune valeur affectée à une variable non déclarée Une seule valeur : undefined (non définie) isfinite Renvoie true si l élément passé paramètre est un nombre fini Renvoie false si ce n'est pas un nombre ou l'infini isnan isfinite(240) //retourne true isfinite("un nombre") //retourne false Renvoie true si le paramètre n est pas un nombre (NaN : Not a Number) Renvoie false si c est un nombre isnan("un nombre") //retourne true isnan(20) //retourne false Fonctions prédéfinies Les Fonctions parsefloat analyse une chaîne de caractères et retourne un nombre décimal Renvoie NaN (Not a Number) si l'argument évalué n'est pas un nombre parseint var numero="32"; var nombre=parsefloat(numero); // retourne 32 Analyse une chaîne et retourne un nombre entier de la base spécifiée. La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2 (binaire). var note=15.5; var arrondi = parseint(note, 10); //retourne 15 Définition //sans parametres function bye() alert('bye!!!'); Appel < onclick="bye();"/> < onclick="bye('harry', 'Potter');"/> //avec parametres function bye(mot1,mot2) alert('bye ' + mot1 + mot2 +'!!! '); var nom = 'Potter'; var prenom = 'Harry'; bye(prenom, nom); Les opérateurs (1) Les opérateurs (2) Priorité croissante + Concatène des chaînes etudiant = "nom" + " prenom"; + Additionne somme = 2 + 5; - Soustrait somme = 2-5; * Multiplie somme = 2 * 5; / Divise moyenne = somme / 3; % Modulo nbre_pair = nbre %2; ++ Incrémente de 1 compteur++; -- Décrémente de 1 somme--; 17 Opérateurs de comparaison Opérateurs logiques < Inférieur strict > Supérieur strict <= Inférieur ou égal x <= 2 ; >= Supérieur ou égal x >= 2 ; = = Egal ( "identique à" ) x < 2 ; compteur < 101 'notte' < 'pomme' x > 2 ; compteur > x 'chat' > 'chien' x = = 2 ;!= Différent x!= 2 ; && ET (x >2 && x < 5) OU (x < -2 x > 2) 1 8 3

4 Le Test if Le test switch() case: if( ) if(nb == 1) alert('nb vaut 1'); if( ) else if(nom == '') alert('entrez votre nom'); else alert ('bonjour' + nom); 19 if(nom == '') alert('entrez votre nom'); var pays; pays = prompt('votre pays d\'origine=','france'); switch (pays) case 'Allemagne': alert('guten Tag'); break; case 'Italie' : alert('buon giorno'); break; case 'France' : alert('bonjour'); break; default: alert('je ne parle pas votre langue'); 20 Les boucles Les Objets S for ( ) for (i=1 ; i < 10 ; i++) alert('i vaut ' + i); S do while( ); do nom = prompt ('entrez votre nom'); while(isfinite(nom)); 2 1 S while( ) var i = 1; while (i < 10) alert('i vaut ' + i); i++; Objets globaux navigator : le navigateur window : la fenêtre du navigateur document : la page HTML Les éléments de la page HTML Modification des objets Appel à partir d évènements Via les propriétés et les méthodes des objets Différents navigateurs Ils ne supportent pas tous les mêmes objets 22 Les Objets JavaScript L objet String Objets prédéfinis ou définis par l utilisateur Array, Boolean, Date, Function, Image, Number, Object ou String Création : nouvelle instance ou nouveau type d objet monobjet = new type_objet(parametres) var texte = new String('Une chaîne de caractère'); var texte='une chaîne de caractère ; Accès aux propriétés monobjet.propriété var longueur = texte.length; Concaténation var etudiant = 'nom' + ' prenom';//nom prenom Longueur d une chaîne var longueur = etudiant.length;//10 n ième caractère d une chaîne var lettre5 = etudiant.charat(4);//p Extraction d une partie de la chaîne Accès aux méthodes monobjet.méthode() var longueur = texte.touppercase(); 23 var date1 = "16/10/06"; var mois = date1.substring(3,4);//

5 L objet Array L objet Math Exemple Exemple var pays = new Array('Grece','Italie','Espagne'); pays[0];// Grece pays.sort();//espagne Grece Italie pays[0];// Espagne var alea=math.random();// var arrondi=alea*100; // arrondi=math.round(alea*100);// L objet Date L opérateur Typeof Exemple var aujourd=new Date(); var jour=aujourd.getdate(); var mois=aujourd.getmonth(); var annee=aujourd.getfullyear(); alert(jour+' '+mois+' '+annee); var i = 1; typeof i; //retourne number var nom="toto"; typeof nom; //retourne string var jour = new Date();typeof jour; //retourne object var choix = true; typeof choix; //retourne boolean var cas = null; typeof cas; //retourne object typeof parsefloat; //retourne function typeof Math; //retourne object Les objets du navigateur L objet document document images[0] forms[0] links[0] elements[0] elements[1] elements[2] elements[3]

6 Méthodes de document L objet document S Méthodes de document : S close( ) : ferme le document en écriture; S open( ) : ouvre le document en écriture; S write( ) : écrit dans le document; S writeln( ) : écrit dans le document et effectue un retour à la ligne S getelementbyid(id) retourne l élément correspondant à l ID document images[0] forms[0] links[0] form1 elements[0] elements[1] elements[2] elements[3] 31 nom prenom tel ok 32 Différents accès aux éléments <form id="form1" action="message()" onsubmit="return test()"> <div><label for="nom">nom <input type="text" id="text" /></label> <label for="prenom">prenom <input type="text" id="prenom" /></label> <label for="tel">tel <input type="text" id="tel" /></label> <input type="submit" value="ok" /></div> <div id="message">message <input type="text" name="message" /> </div> </form> function message() var nom=document.forms[0].elements[0].value; //numero form ou element var prenom=document.forms['form1'].elements['prenom'].value; //id ou name var tel=document.getelementbyid("tel").value; //id directe document.getelementbyid("form1").message.value="bonjour "+prenom +" "+nom; //id et name 33 Valider un formulaire (1) <form id="form1" action="message()" onsubmit="return test()"> <div><label for="nom">nom <input type="text" id="text" /></label> <label for="prenom">prenom <input type="text" id="prenom" /></label> <label for="tel">tel <input type="text" id="tel" /></label> <input type="submit" value="ok" /></div> <div id="message">message <input type="text" name="message" /></ div> </form> function test() var nom=document.forms[0].elements[0].value; var prenom=document.forms['form1'].elements['prenom'].value; var tel=document.getelementbyid("tel").value; var res = true; return res; 34 Valider un formulaire (2) Valider un formulaire (3) function test() var nom=document.forms[0].elements[0].value; var prenom=document.forms['form1'].elements['prenom'].value; var tel=document.getelementbyid("tel").value; var res = true; if (nom == "") res=false; alert("remplir le champ nom"); else if (prenom == "") res=false; alert("remplir le champ pr\351nom"); else if (tel == "") res=false; alert("remplir le champ tel"); return res; 35 S Envoyer sur une autre page <body> <form id="form1" method="get" action="resultat.html" onsubmit="return test()"> </form></body> //resultat.html <body onload="merci()"> <h2 id="titre2">formulaire valide</h2> </body> 36 6

7 Valider un formulaire (4) Accéder aux balises S Envoyer sur une autre page S Récupérer les valeurs (method = " get " ) S location.search :?nom=vnom&prenom= function merci() var texte=location.search.substring(1,location.search.length); texte = texte.split("&"); nom = texte[0].substring(texte[0].indexof("=")+1,texte[0].length); prenom = texte[1].substring(texte[1].indexof("=")+1, texte[1].length); document.getelementbyid("titre2").innerhtml+="<br/>merci "+prenom +" "+nom; 37 <h1 id="titre" class="bleu"> Titre 1</h1> <div><input type="button" name="nom" value="go!" onclick="change();" /></div> function change() var entete; entete = document.getelementbyid("titre"); document.getelementbyid("titre").innerhtml= "Titre 2"; //entete.firstchild.nodevalue= "Titre 2"; entete.style.color = "#bb4488"; 38 innerhtml Accéder au contenu <div id='mondiv'>du texte <a href=''>un lien</a></div> <div id='message'></div> Créée par Microsoft pour IE, normalisée pour HTML5 var contenumondiv=document.getelementbyid('mondiv').innerhtml; document.getelementbyid('message').innerhtml = 'Bonjour!'; //récupérer document.getelementbyid('mondiv').innerhtml += 'Bonjour!'; //modifier Créer une fenêtre NvelleFenetre=window.open ( URL, NomFenetre, caractéristiques ) PetiteFenetre=window.open("forms.html", "petite", "width=200, height=200,toolbar=0, status=1, location=0, directories=0, menubar=0, scrollbars=0, resizable=1"); Barre d outils (toolbar) Barre de menu(menubar) Adresse (location) innertext pour IE / textcontent sauf <IE9 S utilise comme innerhtml Récupère uniquement le texte et pas les balises Ascenseur (scrollbar) 39 dossier (directories) 40 Barre d état (status) Autres actions sur une fenêtre Évènements de la souris S Fenêtre active S Modifier le texte de la barre d état (à éviter, ne fonctionne pas sous Firefox) S Fermer PetiteFenetre.focus(); PetiteFenetre.status="votre message"; PetiteFenetre.close(); click dblclick mouseover mousedown mouseup mousemove Cliquer sur l'élément Double-cliquer sur l'élément Placer le curseur sur l'élément Laisser appuyer le bouton gauche de la souris sur l'élément Relâcher le bouton de la souris sur l'élément Déplacer le curseur sur l'élément

8 Évènements du clavier Évènements de formulaire keydown keyup keypress Appuyer sur une touche de clavier sur l'élément Relâcher une touche de clavier sur l'élément Frapper (appuyer puis relâcher) une touche de clavier sur l'élément change select submit reset Changer la valeur d'un élément spécifique aux formulaires (input, checkbox, etc.) Sélectionner le contenu d'un champ de texte (input, textarea, etc.) Envoyer le formulaire Réinitialiser le formulaire Évènements Évènements Drag & Drop focus blur load unload «Cibler» l'élément Annuler le «ciblage» de l'élément Au chargement de la page À la fermeture de la page dragenter dragoverblur dragleave drop Quand un élément à déplacer entre dans la zone de drop Quand un élément à déplacer se déplace dans la zone de drop Quand un élément à déplacer quitte la zone de drop Quand un élément à déplacer est déposé dans la zone de drop 45 dragend Quand un drag& drop se termine (appliqué à document) 46 Sans DOM S précédé de on <span id="clic" onclick="alert('le clic!');">cliquez ici</span> Avec le DOM <span id="clic" onclick="mafonction();">cliquez ici</span> function mafonction() alert("le clic!"); 47 S 8

9 Avec DOM 0 Avec DOM 2 S element.on +evenement <span id="clic">cliquez ici</span> <span id="clic">cliquez ici</span> S element.addeventlistener var element = document.getelementbyid('clic'); var element = document.getelementbyid('clic'); element.onclick = function() alert("le clic!"); ; var element = document.getelementbyid('clic'); element.onclick = mafonction; 49 element.addeventlistener('click', function() alert("le clic!");, false); var element = document.getelementbyid('clic'); var mafunction = function() alert("le clic!"); ; element.addeventlistener('click', 50 mafunction, false); Suppression d un événement DOM 0 Suppression d un événement DOM 2 element.onclick = function() ; element.removeeventlistener('click', myfunction, false); Et le DOM 2 pour IE? Objet Event element.attachevent( onclick', myfunction); function addevent(element, event, func) if (element.addeventlistener) // Si élément a une méthode addeventlistener() element.addeventlistener(event, func, false); else // Si notre élément ne possède pas la méthode addeventlistener() element.attachevent('on' + event, func); 53 element.onclick = function(e) // L'argument «e» récupère une référence vers l'objet «Event» alert(e.type); // Ceci affiche le type de l'événement (click, mouseover...) ; element.addeventlistener('click', function(e) // L'argument «e» va récupérer une référence vers l'objet «Event» alert(e.type); // Ceci affiche le type de l'événement (click, mouseover...), false); e = e window.event; // compatibilité IE Propriétés et méthodes de event :

10 Bibliographie OpenClassRooms dynamisez-vos-sites-web-avec-javascript W3C events.html Mozilla Developper Network JavaScript 55 10