La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Java : Concepts avancés du langage

Présentations similaires


Présentation au sujet: "Java : Concepts avancés du langage"— Transcription de la présentation:

1 Java : Concepts avancés du langage
Javascript Présenté par : M. Betari Amine Blog Personnel : Année Scolaire: J-2 10/04

2 Java : Concepts avancés du langage
Sommaire Javascript : Vue d’ensemble Syntaxe Javascript Les fonctions Les tableaux Les objets Les événements Introduction jQuery J-2 10/04

3 Java : Concepts avancés du langage
Javascript: Vue d’ensemble Javascript est un langage de script simplifié orienté objet Javascript permet de rendre un site internet développé en HTML dynamique Javascript est exécuté par le navigateur du visiteur Javascript est déterminé par une norme, nommé ECMA-262/ECMAScript Script : un bout de code Javascript qui a une tâche précise Langage interprété par le navigateur (client) J-2 10/04

4 Java : Concepts avancés du langage
Javascript: Vue d’ensemble Historique 1995 : inventé par Brendan Eich et développé par Netscape LiveScript comme première appellation J-2 10/04

5 Java : Concepts avancés du langage
Javascript : Vue d’ensemble Dans une utilisation web, l’exécution du code PHP se déroule comme suit : Votre ordinateur récupère le code source de la page en question Votre navigateur interprète la page et les scripts qu’elle contient La page formatée s’affiche sur votre écran, les scripts sont mis en mémoire et seront lancés dès que l’événement attendu se produira. J-2 10/04

6 Java : Concepts avancés du langage
Javascript : Vue d’ensemble Le code Javascript est placé dans une page HTML Un minimum d’une page HTML J-2 10/04

7 Java : Concepts avancés du langage
Javascript : Vue d’ensemble Il y a deux méthodes pour insérer du Javascript dans une page web : Directement dans les balises HTML (événements) Directement dans le code HTML (<script></script>) Placer le code dans un fichier séparé <script type="text/javascript" src="script.js"></script> J-2 10/04

8 Syntaxe Javascript : Les variables
Déclaration et affectation Le mot clé var permet de déclarer une ou plusieurs variables Après la déclaration de la variable, il est possible de lui affecter une valeur //Déclaration de i, de j et de k. var i, j, k;  //Affectation de i. i = 1;  //Déclaration et affectation de prix. var prix = 0;  //Déclaration et affectation de caractere var caractere = ["a", "b", "c"];

9 Java : Concepts avancés du langage
Syntaxe Javascript : Les variables Déclaration des variables On ne peut pas donner qu’on veut à nos variables Le nom de variable peut contenir des lettres en minuscules et en majuscules, des chiffres ainsi que le underscore Le nom ne doit pas commencer par un chiffre Il existe des mots prédéfinies comme : break, case, char…. Le type d’une variable dépend de la valeur stockée dans cette variable Notez que nous utilisons une mémoire temporaire : les variables sont détruites lorsque le visiteur quitte la page J-2 10/04

10 Java : Concepts avancés du langage
Syntaxe Javascript : Les variables Déclaration des variables (chaine de caractères) Caractères spéciaux et échappement // deux chaines de caracteres var message1 = 'Une chaine de caracteres'; var message2 = "C'est une chaine de caracteres "; // maintenant, on les affiche alert(message1); alert(message2); Le javascript peut être placé directement dans une balise HTML, dans ce cas on ne peut pas mettre de double quotes. On utilise donc les simples quotes // deux chaines de caracteres var message1 = "Ceci est un \" petit \" test"; var message2 = "Ceci est un \n petit \test"; // maintenant, on les affiche alert(message1); alert(message2); J-2 10/04

11 Java : Concepts avancés du langage
Syntaxe Javascript : Les variables Les opérations sur les chaînes La concaténation var chaine = « Salam » + «  alikem »; Déterminer la longueur d’une chaîne : chaine.length; Identifier le nième caractère d’une chaîne : chaine.charAt(index); Extraction d’une chaine de carcatère chaine.substring(start,end); J-2 10/04

12 Java : Concepts avancés du langage
Syntaxe Javascript : Les variables Déclaration des variables (Les nombres) Les nombres entiers Les nombres à virgule // var nombre = 1.234; alert(nombre); // on demande les nombres var nombre1 = prompt('Premier nombre ?'); var nombre2 = prompt('Deuxieme nombre ?'); // on calcule le quotient et on l'affiche var resultat = nombre1 / nombre2; alert("Le quotient de ces deux nombres est " + resultat); Le javascript peut être placé directement dans une balise HTML, dans ce cas on ne peut pas mettre de double quotes. On utilise donc les simples quotes J-2 10/04

13 Java : Concepts avancés du langage
Syntaxe Javascript: Les fonctions Voici une liste des fonctions prédéfinies decodeURI() encodeURI() eval() isFinite() isNaN() parseFloat() parseInt() Prompt() Alert() Confirm() . …. J-2 10/04

14 Java : Concepts avancés du langage
Syntaxe Javascript: Les fonctions Il est parfois utile de regrouper un certain nombre d’instructions dans un bloc réutilisable plusieurs fois Une fonction peut renvoyer un résultat et utiliser des paramètres function nom_de_la_fonction(liste de paramètres) {    instruction 1;    instruction 2;    ......    return résultat;  } // Appel de la fonction nom_de_la_fonction(); J-2 10/04

15 Java : Concepts avancés du langage
Syntaxe Javascript: Les fonctions Portée des variables Variable locale Variable globale function essai() { var variable = 'Bonjour'; alert(variable ); } essai(); alert(variable); // Erreur variable is not defined Variable locale: à la fin d’une fonction, toutes les variables déclarées à l’intérieur de celle-ci sont détruites var variable ; function essai() { variable = 'Bonjour'; } essai(); alert(variable); // OK J-2 10/04

16 Java : Concepts avancés du langage
Syntaxe Javascript: Les fonctions Exemple var MaVar1 = 8; var MaVar2 = 12; function TesterVar() { MaVar1 = 12 var MaVar2 = 15; document.write("Dans la fonction<BR>"); document.write("MaVar1 = " + MaVar1 + "<BR>"); document.write("MaVar2 = " + MaVar2 + "<BR>"); } document.write("Avant l'appel à la fonction<BR>"); TesterVar(); document.write("Après l'appel à la fonction<BR>"); document.write(" MaVar2 = " + MaVar2 + « <BR>"); J-2 10/04

17 Java : Concepts avancés du langage
Syntaxe Javascript: Opérateurs et conditions Opérateurs de comparaison Ces deux opérateurs fonctionnent aussi pour les chaines de caractères == : si les deux valeurs sont égales != : si les deux valeurs sont différentes a < b / a > b / a <= b / a >= b ( pour les valeurs numériques) ET (&&)/ OU (||) Les conditions if(condition_vrai) // execution d’un bloc d’instructions { alert("La condition est vrai"); } else { alert("la condition est fausse J-2 10/04

18 Java : Concepts avancés du langage
Syntaxe Javascript: Opérateurs et conditions Les conditions var nom = prompt("Entrez un nom d'animal"); switch(nom) { case "chat": alert("1"); break; case "pingouin" : alert(« 2"); default : alert("Je n'ai rien à te dire..."); } J-2 10/04

19 Java : Concepts avancés du langage
Syntaxe Javascript: Opérateurs et conditions Les conditions switch(ma_var) { var egal_deux = 2 case 1 : alert("Ma variable vaut 1"); break; case egal_deux : alert("Ma variable vaut 2"); default : alert("Ma variable vaut autre chose que 1 ou 2"); } J-2 10/04

20 Java : Concepts avancés du langage
Syntaxe Javascript: Les boucles Les boucles var i; i = 0; // initialisation while(i < 10) // condition { alert(i); // action i++; // incrementation } for(initialisation ; condition ; incrementation) { instructions } do { instructions } while(condition); J-2 10/04

21 Java : Concepts avancés du langage
TP 1/3 Créer un fichier html (formation.html) Mettre une structure html de base Créer un fichier scripts.js Faire un appel du fichier à partir de la page HTML Reprendre les exemples des slides J-2 10/04

22 Java : Concepts avancés du langage
TP 2/3 Ecrire un programme qui permet d’échanger deux valeurs entiers Ecrire le même programme sans passer par une variables temporaire Ecrire une fonction qui demande de taper deux valeurs(largeur et longueur) et affiche la surface du rectangle Ecrire une fonction qui calcule la somme des entiers de 1 à n, la fonction doit retourner une valeur. J-2 10/04

23 Java : Concepts avancés du langage
TP 3/3 Ecrire une fonction qui permet de déterminer le jour de la semaine. Pensez à la classe Date // D = new Date(); Utiliser des (if…else) Même programme avec l’utilisation du switch J-2 10/04

24 Java : Concepts avancés du langage
Syntaxe Javascript :Les Tableaux JavaScript propose une structure de données permettant de stocker l’ensemble de ces données dans une variables commune. Un tableau est une variable pouvant contenir plusieurs données indépendantes Tableaux unidimensionnels Tableaux multidimensionnels Tableaux associatifs La première case portera le numéro 0 et la énième case le numéro n-1 J-2 10/04

25 Java : Concepts avancés du langage
Syntaxe Javascript :Les Tableaux Créer un tableau JavaScript fournit plusieurs façons de créer un tableau // Déclaration et affectation var MonTableau1= ["donnée 1", "donnée 2", "donnée 3", "donnée 4"]; var MonTableau2 = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4"); // Déclaration var tab1 = new Array(); var tab2 = []; // Affectation des valeurs tab1[0] = "Ensao"; J-2 10/04

26 Java : Concepts avancés du langage
Syntaxe Javascript :Les Tableaux Lire et modifier une valeur Pour accéder à un élément, on utilise tableau[indice] // Déclaration et affectation var table= ["esto", "ensao", "encgo"]; alert("La seconde case vaut : " + table[1]); // on lit l'element d'indice 1 table[1] = "ista"; // on le modifie table[3] = "faculté"; // on cree un nouvel element // Déclaration var tab1 = new Array(); var tab2 = []; // Affectation des valeurs tab1[0] = "Ensao"; J-2 10/04

27 Java : Concepts avancés du langage
Syntaxe Javascript :Les Tableaux Tableau associatif Pour les tableaux associatif , on crée un tableau vide, et on associe manuellement une par une toutes les valeurs On utilise une chaîne de caractères en tant qu’indice // Déclaration et affectation var scores = new Array(); scores["Toto"] = 142; scores["Pierre"] = 137; J-2 10/04

28 Java : Concepts avancés du langage
Syntaxe Javascript :Les Tableaux Quelques fonctions Pour un tableau nommé tableau: tableau.length tableau.sort(); …. TP sur les tableaux : le-javascript/exploiter-un-tableau-1 J-2 10/04

29 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets Se sont soit des entités prédéfinies du langage, soit créé par le programmeur On trouve deux type d’objets : Objets du navigateur Objets créés par le programmeur Le concept de la POO est l’objet, entité désignée également par le terme instance. Il correspond à une entité manipulée d ans l’application. La notion d’objet est associé u concept de classe qui permet de définir la structure de l’objet, à savoir ses attributs et ses méthodes. EN javascript le tout fonctionne sur des objets. Plus de détail sur les objets et la création J-2 10/04

30 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets Construction des objets var objet = new Classe(); Utilisation des objets objet.propriete() objet.methode() Classes d’objets prédéfinis Math / String / Date / Image / RegExp / … J-2 10/04

31 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets Classes d’objets prédéfinis x = Math .abs(-3.26); x = Math.ceil(3.89); x = Math.round(6.01); d = new Date(); d.getDate(); Plus en détail : J-2 10/04

32 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets JavaScript traite les éléments qui s’affichent dans votre navigateur comme des objets. Classés selon une hiérarchie pour pouvoir les désigner Auxquels des propriétés sont associées JavaScript divise la page du navigateur en objets, afin de permettre d’accéder à n’importe lequel d’entre eux et de pouvoir les manipuler par leurs propriétés J-2 10/04

33 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets J-2 10/04

34 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets L’objet le plus haut dans la hiérarchie est window qui correspond à la fenêtre même du navigateur. L’objet document est un sous-objet de window. Cet objet représente la page HTML affichée dans le navigateur. J-2 10/04

35 Java : Concepts avancés du langage
Syntaxe Javascript :Les Objets Il est possible d’atteindre tous les éléments de la page HTML avec ces deux méthode de l’objet document document.getElementById("id") document.getElementsByTagName("balise") document.getElementsByName("name") J-2 10/04

36 Java : Concepts avancés du langage
Syntaxe Javascript :Les Evénements Les événements sont des actions de l’utilisateur, qui vont donner lieu à une interactivité. Grâce au JavaScript il est possible d’associer des fonctions à des événements tels que le passage de la souris au-dessus d’une zone par exemple Ce sont les gestionnaires d’événements qui permettent d’associer une action à un événement Chaque événement ne peut pas être associé à n’importe quel objet. Il est évident qu’un événement OnChange ne pourra pas s’appliquer à un lien hypertexte J-2 10/04

37 Java : Concepts avancés du langage
Syntaxe Javascript :Les Evénements Événements page et fenêtre onabort : s’il y a une interruption dans le chargement onerreur : en cas d’erreur durant le chargement de la page onload : après la fin du chargement de la page onresize : quand la fenêtre est redimensionnée ….. <body onload = "alert('salam')"> <body onresize= " alert('tu es entrain de redimensionner la page' "> J-2 10/04

38 Java : Concepts avancés du langage
Syntaxe Javascript :Les Evénements Événements souris onclick : sur un simple click onmousedown: lorsque le button de la souris est enfoncé onmousemove: lorsque la souris est déplacée onmouseover: lorsque la souris est sur l’element ….. Événements clavier onkeydown : lorsqu’une touche est enfoncée onkeypress : lorqu’une touche est pressé et relâchée onkeyup : lorsqu’une touche est relâchée J-2 10/04

39 Java : Concepts avancés du langage
Syntaxe Javascript :Les Evénements Événements formulaire onchange : à la perte du focus si la valeur a changé onselect : quand du texte est sélectionné onsubmit : quand le formulaire est validé (via un button de type « submit ») onfocus : lorsque l’élément prend le focus (devient actif) onreset : lors de la remise à zéro du formulaire J-2 10/04

40 Java : Concepts avancés du langage
Syntaxe Javascript :Les Evénements Il existe un cas où accéder à un élément est simple : c’est lorsque le code se trouve dans la balise HTML. On utilise dans ce cas le mot-clé this qui désigne cet élément <select name="color" onchange="color(this.value)"> <option value="white">White</option> <option value="black">Black</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="gray">Gray</option> </select> J-2 10/04

41 Java : Concepts avancés du langage
TP 1/3 Créer un tableau qui contient les éléments suivants : esto/ensao/encgo var table = ["esto", "ensao", "encgo"]; Créer une fonction qui prend en paramètre le tableau crée et affiche sont contenu de cette façon : J-2 10/04

42 Java : Concepts avancés du langage
TP 2/3 Créer une page HTML contient un formulaire avec une liste déroulante. La liste contient des couleurs La couleur du background de la page par défaut est le blan Le choix d’une valeur de la liste change le background de la page J-2 10/04

43 Java : Concepts avancés du langage
TP 3/3 Créer un formulaire comme ci-dessous: Afficher les informations saisies par l’utilisateur dans une boite de dialogue « alert », puis dans une autre page HTML. J-2 10/04

44 Java : Concepts avancés du langage
jQuery : Introduction jQuery est une bibliothèque JavaScript gratuite, ayant une syntaxe courte et compatible avec tous les navigateurs courants. jQuery permet de traverser et manipuler très facilement l’arbre DOM des pages web jQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. jQuery permet de gérer les événements JavaScript jQuery permet de faire des requêtes AJAX John Resig est le créateur et développeur principal de la jQuery library Le Document Object Modem (DOM) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents XML / HTML J-2 10/04

45 Java : Concepts avancés du langage
jQuery : Introduction jQuery est une simple bibliothèque à importer Disponible sur le site : <script type="text/javascript" src="jqueryr.js"></script> Ou Directement sur Google code <script type="text/javascript" src=" eapis.com/ajax/libs/jquery/1/jquery.min.js">< /script> jQuery n’est pas la seule bibliothèque JS disponible, vous pouvez aussi vous intéresser à d’autres comme Mootools, Scriptaculous, Prototype, Yahoo UI, Dojo Une bibliothèque JS est composée de un ou plusieurs fichiers js(donc écrite dans langage javascript) et rassemble une multitude de fonctions qui permettent de synthétiser certaines tâches répétitives. J-2 10/04

46 Java : Concepts avancés du langage
jQuery : Rappel sur le DOM J-2 10/04

47 Java : Concepts avancés du langage
jQuery : Exemple <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src=" <script type="text/javascript"> $(function(){ $('#contenu').html('Hello World'); }); </script> </head> <body> <div id="contenu">Salut tout le monde !</div> </body> </html> Quand o fait appel à la fonction principale, il se peut parfois qu’elle retourne rien. On a placer son code en fin de body, les éléments de la page web ne sont pas encore placés. Le DOM peut être manipulé en toute sûreté car vous pouvez être sûrs que tous les éléments existent. Presque tous les bouts de code jQuery devront être entourés de $(function(){…})// sauf pour les fonctions qui se déclenchent avec les boutons par exemple. J-2 10/04

48 Java : Concepts avancés du langage
jQuery : Fonction principale Toute jQuery repose autour d’une fonction : jQuery() ( abrégée $() car le dollar est un caractère autorisé pour les noms de fonctions en Javascript) qui permettra de sélectionner des éléments dans votre page web. Cette fonction accepte des paramètres et retourne un objet jQuery() ou $() Elle accepte des sélecteurs en argument J-2 10/04

49 Java : Concepts avancés du langage
jQuery : Les sélecteurs Sélecteurs CSS Expression Retour #titre La balise ayant pour id « titre » h1 Les balises h1 .class Les balises qui ont la classe « class » a, h1, h2 Les balises a,h1 et h2 * Toutes les balises elem[attr] Balises elem dont l’attribut « attr » est spécifié elem[attr="val"] Balises elem dont l'attribut "attr" est à la valeur val. elem bal Balises bal contenues dans une balise elem. La liste des sélecteurs CSS3 est disponible sur le lien : J-2 10/04

50 Java : Concepts avancés du langage
jQuery : Les sélecteurs Expression Retour elem > bal Balises bal directement descendantes de balises elem. elem + bal Balises bal immédiatement précédées d'une balise elem. J-2 10/04

51 Java : Concepts avancés du langage
jQuery : Les sélecteurs Sélecteurs spécifiques jQuery Expression Retour :hidden Éléments invisibles, cachés. :visible Éléments visibles. :parent Éléments qui ont des éléments enfants. :header Balises de titres : h1, h2, h3, h4, h5 et h6. :contains(t) Éléments qui contiennent du texte t. :empty Éléments dont le contenu est vide. J-2 10/04

52 Java : Concepts avancés du langage
jQuery : Les sélecteurs Expression Retour :first Le premier élément (équivaut à :eq(0)). :last Le dernier élément J-2 10/04

53 Java : Concepts avancés du langage
jQuery : Les sélecteurs <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> </head> <body> 1: <p id="premier_texte"> 2: <span class="texte"> Salam Alikem </span> 3: <img src="images/photo_1.png" alt="Premiere Photo" class="image1" /> </p> 4: <p> 5: <img src="images/photo_1.png" alt="Second Photo" /> 6: <span class="texte">Genie Informatique </span> 7: <img src="images/photo_1.png" alt="Second Photo" style="display:none"/> </body> </html> J-2 10/04

54 Java : Concepts avancés du langage
jQuery : Les sélecteurs Expression Numéros des éléments sélectionés #premier_text 1 #premier_texte .texte 2 span + img 3 p 1 et 4 p[class] rien p[id] img:visible 3 et 5 :hidden 7 p:contains('Salam') J-2 10/04

55 Java : Concepts avancés du langage
jQuery : Fonctions utiles Les méthodes s’appliquent généralement à tous les éléments sélectionnés $(‘.classe’).hide() $(‘.classe’).show() Parcourir le DOM : $(‘.classe’).parent(), $(‘.classe’).next() $(‘.classe’).children(), $(‘.classe’).parents() Ajouter ou retirer des classes CSS : addClass, removeClass Manipuler : append, wrap, prepend J-2 10/04

56 Java : Concepts avancés du langage
jQuery : Fonctions utiles Exemples <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(function(){ alert($('#div').html()); $('#div').html('Salam'); }); </script> </head> <body> <div id="div"> Bonjour </div> </body> </html> J-2 10/04

57 Java : Concepts avancés du langage
jQuery : Fonctions utiles Exemples <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(function(){ $('#div').append('<strong>les ingénieurs</strong>') }); </script> </head> <body> <div id="div"> Bonjour </div> <p><a href="#" onclick="$('#div').hide()"> Disparition</a></p> </body> </html> J-2 10/04

58 Java : Concepts avancés du langage
jQuery : Fonctions utiles <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(function(){ $('p').before('Avant la balise p <br />'); $('textarea').after('<p>Veuillez ne pas poster de commentaires </p>'); }); </script> </head> <body> <p>First paragraphe</p> <p>Second paragraphe</p> <textarea></textarea> </body> </html> prepend() et append() permettent d’ajouter un élément ou du texte à l’intérieur de la balise before() et after() permettent d’ajouter un élément ou du texte à l’extérieur de la balise J-2 10/04

59 Java : Concepts avancés du langage
jQuery : Fonctions utiles La méthode css() : permet d’obtenir la valeur d’une propriété de style, il est aussi possible avec cette méthode de définir ou modifier un propriété de style, il suffit de passer un 2eme paramètre à la méthode .css(propertyName) .css(propertyName, value) .css(properties) J-2 10/04

60 Java : Concepts avancés du langage
jQuery : Fonctions utiles La méthode html() : permet de remplacer le contenu d’un élément ou le récupérer La méthode text() : permet de manipuler le contenu comme du texte La méthode wrap() permet d’envelopper n’importe quel élément entre deux balises. <p id="premier">   <span class="texte">    Salut tout le monde  </span> </p> $('#premier').text(); // Renvoie salut tout le monde $('#premier').html(); // Renvoie la balise <span> $(‘.texte').wrap(‘<h1></h1>’); J-2 10/04

61 Java : Concepts avancés du langage
jQuery : Fonctions utiles La méthode wrapAll() est pareille à wrap() sauf que wrap() enveloppe chaque élément un par un, alors que wrapAll() enveloppe tous les éléments d’un coup J-2 10/04

62 Java : Concepts avancés du langage
jQuery : créer sa propre fonction Il est possible dans jQuery de créer sa propre fonction : <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(function(){ fonctionJs = function() { alert(‘fonction'); }; }); </script> </head> <body onload='fonctionJs()' > </body> </html> J-2 10/04

63 Java : Concepts avancés du langage
jQuery : Les événements <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(function(){ $("select").change(function(){ alert(‘text’); }); }); </script> </head> <body> <select name="color"> <option value=“a”>A</option> <option value=“b”>B</option> </select> </body> </html> J-2 10/04

64 Java : Concepts avancés du langage
jQuery : Les événements <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ alert($(this).attr('href')); return false; }); </script> </head> <body> <a href=" </body> </html> J-2 10/04

65 Java : Concepts avancés du langage
jQuery : Les événements <!DOCTYPE HTML> <html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery js"></script> <script type="text/javascript"> $(document).keyup(function(touche){ // on écoute l'évènement keyup() var appui = touche.which || touche.keyCode; if(appui == 13){ alert('Vous venez d\'appuyer sur la touche Entrée !'); } }); </script> </head> <body> </body> </html> J-2 10/04

66 Java : Concepts avancés du langage
jQuery : Tp 1/3 Mettre le code du dernier slide dans une page HTML Ajouter un button/lien, après le clique : Enlever les liens; Voir le code dans une boite de dialogue Transformer les liens en buttons Regrouper les buttons dans un bloc (div) Colorer le texte ( se baser sur les classe existent déjà) Vider la page HTML J-2 10/04

67 Java : Concepts avancés du langage
jQuery : Tp 2/3 Reprendre les exemples des slides Reprendre le TP de la création d’une page HTML qui contient une liste déroulante et à chaque changement d’une valeur de la liste, la couleur de la page se change. Utilisez jQuery !! J-2 10/04

68 Java : Concepts avancés du langage
jQuery : Tp 3/3 Créer une page HTML qui a comme affichage : Au clic sur un div, on affiche : Pensez à .css() J-2 10/04

69 Java : Concepts avancés du langage
jQuery : Annexe <p id="contenu"> Lorem <span class="vert">ipsum dolor</span> sit amet, <span class="titre2"> consectetur adipiscing elit</span>.Etiam <a href="#">facilisis</a> <span class="rouge">ultrices</span> dolor, eu <span class="orange">fermentum eros</span> aliquet ac. Aenean varius <span class="titre2">ultrices nisi </span> vel aliquet. Nam eu viverra sem. <span class="gras">Fusce facilisis </span> eros ac <span class="titre1">elit scelerisque molestie</span>. Morbi lacus orci, interdum ac <span class="souligne">faucibus hendrerit</span>, <span class="barre">facilisis vel</span> nunc. <span class="souligne">Sed in </span> <span class="bleu">mauris</span> <span class="gras">lorem</span>. Integer facilisis, <span class="italique">augue et suscipit</span> molestie, <span class="barre">lectus lectus</span> pellentesque mi, <span class="vert"> at</span> condimentum <span class="italique">nulla</span> nibh ut turpis. <span> Cum sociis</span> natoque <span class="vert">penatibus et magnis</span> dis <a href="#">parturient montes</a>, nascetur ridiculus mus. Etiam quis nisl metus.<span class="vert">Phasellus</span>ullamcorper posuere augue quis placerat. <span class="titre1">Duis sed quam</span>odio. Donec <span class="vert">aliquam metus</span> a <a href="#">ligula lacinia</a> a tempor leo <span class="bleu">imperdiet</span>. Cras augue purus, <span class="souligne">lobortis eu</span> scelerisque sed, <span class="vert">venenatis ut</span> turpis. Donec <span class="bleu">quis magna sapien</span>. Ut ut diam arcu. <span class="souligne">Suspendisse nec risus</span> id lacus venenatis <a href="#">rhoncus.</a> In vitae <span class="vert">justo tellus</span>, <span class="bleu">vitae lacinia nunc </span>. Aliquam <span class="italique">erat</span> <span class="rouge">volutpat.</span> </p> J-2 10/04


Télécharger ppt "Java : Concepts avancés du langage"

Présentations similaires


Annonces Google