JavaScript M4103C - Programmation Web client riche Table des matières À quoi ça sert? 2ème année - S4, cours - 1/5 2014-2015 Présentation Exemple 1 Marcel Bosc Exemple 2 Département informatique 1ère partie IUT de Villetaneuse Université Paris-13 Exemples Google Maps Js partout! À quoi ça sert? Menus déroulants etc.
JS = navigateur Serveur = lent client navigateur HTML CSS Javascript site.org serveur web PHP ou Java client (navigateur) votre adresse: toto@site.o envoyer http://site.org/saisie.php 1 serveur site.org apache 2 saisie.php 3 SQL adresse non valide! toto@site.o envoyer 4 lenteur réseau exécution PHP - serveur chargé lenteur réseau lenteur affichage internet JavaScript = rapide très simplifié... internet Utile et sympa! client (navigateur) votre adresse: toto@site.o envoyer adresse non valide! toto@site.o envoyer 1 2 script client serveur apache pas d'interaction client / serveur lente site.org Stages : presque tous Web => JS Emploi : très demandé Sympa! internet
2ème partie Présentation Syntaxe Exemple <html> exemple.html <head> <title>exemple</title> <script src="jquery.js"></script> <script src="exemple.js"></script> </head> <> <h1>ceci est un titre</h1> <p>bla bla bla</p> </> </html> exemple.js $('h1').click(function() $('p').text('bonjour!'); Changer l'affichage Syntaxe "C" (PHP, Java...) var i; for(i=0; i<10; i++) console.log('exemple '+i); if(i>5)console.log('i est > 5');} } une_fonction_exemple(); function une_fonction_exemple() alert("c'est moi!"); }; Type implicite (pas de "int", "String"...) var i; for(i=0; Changer i<10; i++) couleur console.log('exemple '+i); if(i>5)console.log('i est > 5');} } Programme js Cacher / montrer $('#bouton').click(function() alert('le bouton a été appuyé!'); Ajouter image Un titre Navigateur un paragraphe
HTML arbre <> <h1>ceci est un titre</h1> <p> Un paragraphe de texte avec un <a href="page2.html">lien</a> vers une autre page. Les mots suivants <strong>sont importants</strong> </p> </> h1 p p a img a strong img un objet! DOM Document Object Model représentation objet des éléments HTML du document <img id="photo"... /> On peut le manipuler en Javascript Text Ceci est un titre Text Un para... avec un a Text lien Text vers une... suivants strong Text sont importants i=document.getelementbyid("photo"); i.style.border="1px solid red"; Principaux objets DOM jquery window Un titre DOM brut : Facilite l'accès au DOM document un paragraphe HTMLElement document.getelementbyid('photo').style.display="none"; jquery : $('#photo').hide(); «$» = jquery
3ème partie Exemple Exemple 1 $('h1').click(function() $('p').text('bonjour!'); «#» = id balise «.» = class Rappel : sélecteurs CSS #para1 color: green;} p color: red;}.actu color: blue;} <h1>un essai</h1> <h2>titre section-1</h2> <p id="para1">bla bla bla bla</p> <h2 class="actu">titre section-2</h2> <p>bli bli bli bli bli</p> <h2>titre section-3</h2> <p>qu'est qu'on s'amuse!</p> <h2 class="actu">titre section-4</h2> <p>abc def ghi jkl mno</p> <h2 class="actu">titre section-5</h2> h1 p Liste jquery <> <h1>ceci est un titre</h1> <p>bla bla bla</p> </> $('xyz') liste de tous les éléments correspondant au sélecteur xyz
Liste jquery Fonction jquery :.css() h1 p p <> <h1 class="actu">un titre</h1> <p class="actu">bla bla</p> <p>bla bla</p> </> Sur la liste appeler la fonction "css" $('.actu').css('color','red'); ".css()" change la propriété «style» des éléments : <p> <p style="color: red;"> Fonctions jquery : class Fonctions jquery :.text().html() $('p').addclass('actu'); $('p').text('bonjour'); <p> <p class="actu"> <p>bla bla</p> <p>bonjour</p> Mieux que.css()! class + fichier CSS $('p').removeclass('actu'); <p class="actu"> <p> $('p').html('bonjour <a href="...">joe</a>'); <p>bla bla</p> $('p').hasclass('actu') true false <p>bonjour <a href="...">joe</a></p>
DOM & jquery DOM & jquery j=«liste» d'un seul élément jquery var j=$('#photo'); d = un élément DOM var d=document.getelementbyid('photo'); DOM jquery jquery DOM DOM jquery jquery j.css('color','red'); j.width(100); j.addclass('actu'); j.removeclass('actu'); j.text('bonjour'); j.html('bonjour <a...>joe</a>'); DOM d.style.color="red"; d.style.width="100px"; d.classname+=' actu'; d.classname=d.classname.repla ce(/\bactu\b/,' ') d.textcontent='bonjour'; d.innerhtml('bonjour <a...>joe</a>'); $(d) $('#photo')[0]... jquery Exemple DOM Réagir à un événement $('h1').click(function() $('p').text('bonjour!'); Ceci est un titre h1 p bla bla bla click sur h1 $('h1').click(une_fonction_a_appeler); Gestionnaire d événement : une fonction qui sera appelée plus tard, lorsqu'un événement se produit
Événements Programmation événementielle click click bouton souris Séquentielle «classique» Événementielle mousedown bouton souris enfoncé début. début. mouseover mousemove keydown keyup keypress ready / load souris entre sur un élément souris bouge sur un élément touche enfoncée touche relâchée touche enfoncée et relâchée élément a fini de charger 1. Afficher "bonjour" 2. Afficher carré rouge 3. Afficher ligne... fin. 1. Afficher "bonjour" 2. si click appeler fonction "reagir_click" attendre click utilisateur change submit élément formulaire modifié formulaire envoyé reagir_click() Afficher carré rouge... Event / this Exemple $('h1').click(une_fonction_a_appeler);... function une_fonction_a_appeler(event) if(event.which===1) $(this).css('font-size','12px'); } } $('h1').click(function() $('p').text('bonjour!'); this : élément DOM cible de l'événement event : objet décrivant l'événement
Fonction anonyme 4ème partie Approche «habituelle» $('h1').click(une_fonction_a_appeler);... function une_fonction_a_appeler() } lourd... Exemple 2 Fonction anonyme $('h1').click(function() pratique... très utilisé! Exemple 2 <> <div> <input id="saisie" type="text"> <input id="ajouter" type="button" value="ajouter"/> </div> <ul id="liste"> <li>tom</li> <li>joe</li> </ul> </> exemple2.js $('#ajouter').click(function() var ligne=$('<li></li>'); var texte=$('#saisie').val(); ligne.text(texte); $('#liste').append(ligne); <div> <input id="saisie" type="tex <input id="ajouter" type="but </div> <ul id="liste"> <li>tom</li> <li>joe</li> </ul> div ul input input li li
Rappels Fonction jquery :.val() $('#ajouter').click(function() var ligne=$('<li></li>'); var texte=$('#saisie').val(); ligne.text(texte); $('#liste').append(ligne); attendre événement «prêt» sur doc. attendre événement «click» sur élém. id="ajouter" changer texte dans él. jquery «ligne» $('#ajouter').click(function() var ligne=$('<li></li>'); var texte=$('#saisie').val(); ligne.text(texte); $('#liste').append(ligne); <select> <input type="text"/> <textarea> Créer un élément Ajouter dans l'arbre DOM $('#ajouter').click(function() var ligne=$('<li></li>'); var texte=$('#saisie').val(); ligne.text(texte); $('#liste').append(ligne); élément <li> pas encore dans l'arbre DOM input div ul input li li <ul id="liste"> $('<xyz..>...</xyz>') Crée des nouveaux éléments à partir du code HTML. $('#liste').append(ligne); éléments à ajouter : endroit où ajouter $('<li></li>')
Où ajouter dans l'arbre DOM? $('ul').before(...); $('ul').after(...); div ul li li Ce document est distribué librement. Sous licence GNU FDL : http://www.gnu.org/copyleft/fdl.html Les originaux sont disponibles au format LibreOffice http://www-info.iutv.univ-paris13.fr/~bosc $('ul').prepend(...); $('ul').append(...);