Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout!

Dimension: px

Commencer à balayer dès la page:

Download "Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout!"

Hélène Laberge
il y a 8 ans
Total affichages :

1 JavaScript M4103C - Programmation Web client riche Table des matières À quoi ça sert? 2ème année - S4, cours - 1/ 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.

Exemple 2 Département informatique 1ère partie IUT de Villetaneuse Université

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!

2 JS = navigateur Serveur = lent client navigateur HTML CSS Javascript site.org serveur web PHP ou Java client (navigateur) votre adresse: toto@site.o envoyer 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

3 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

..) 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!

4 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

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.

5 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

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

6 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>

css('color','red'); ".css()" change la propriété «style» des éléments : <p> <p style="color: red;"> Fonctions jquery : class Fonctions jquery :.text().

7 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

$classname+=' actu'; d.classname=d.classname.repla ce(/\bactu\b/,' ') d.textcontent='bonjour'; d.innerhtml('bonjour <a...>joe</a>'); $(d) $('#photo')[0].$

8 É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

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.

9 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

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> </>

10 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>')

text(texte); $('#liste').append(ligne); <select> <input type="text"/> <textarea> Créer un élément Ajouter dans l'arbre DOM $('#ajouter').

11 Où ajouter dans l'arbre DOM? $('ul').before(...); $('ul').after(...); div ul li li Ce document est distribué librement. Sous licence GNU FDL : Les originaux sont disponibles au format LibreOffice $('ul').prepend(...); $('ul').append(...);

Sous licence GNU FDL : http://www.gnu.org/copyleft/fdl.

Documents pareils

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des