docProgrammation Web JavaScript - CRIL
download 
Plainte Transcription
Programmation Web JavaScript - CRIL
Programmation Web JavaScript Christophe Lecoutre [email protected] IUT de Lens - CRIL CNRS UMR 8188 Université d’Artois France Septembre 2015 1 Outline Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 2 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 3 Bibliographie I Nicholas Zakas Professional JavaScript for Web developpers, 3rd Edition, Wrox, 2011. I Stoyan Stefanov JavaScript Patterns, O’Reilly, 2010. Sites : I Javascriptfr http://www.javascriptfr.com I w3school-Javascript sur http://www.w3schools.com/js/default.asp 4 Description Générale JavaScript est un langage de programmation de plus en plus utilisé pour le développement Web. Il est formé de trois composants: I ECMAScript, qui est défini dans l’édition ECMA-262, et qui fournit les fonctionnalités centrales I DOM (Document Object Model) qui fournit les fonctionnalités pour interagir avec le contenu d’une page web I BOM (Browser Object Model) qui fournit les fonctionnalités pour interagir avec le navigateur Remarque Il y a de grandes disparités de support des trois composants de Javascript par les navigateurs principaux (Firefox, IE, Chrome, Safari, Opera). 5 Javascript couplé à HTML L’élément HTML <script> permet d’utiliser du code Javascript avec une page HTML. Les attributs possibles pour cet élément sont : I type : indique le type de contenu (appelé aussi type MIME). La valeur par défaut est "text/javascript" I charset : indique le jeu de caractères utilisé I defer : indique si l’exécution du script doit être différée I src : indique que le code se situe dans un fichier externe Attention Même en utilisant defer, certains navigateurs ne retarderont pas l’exécution du code. 6 Inline Code Il suffit d’utiliser l’élément <script>. <script> function sayHi() { console.log("Hi!"); } </script> Attention Un erreur se produit si </script> apparaı̂t dans le code. <script> function sayScript() { console.log("</script>"); // Provoque une erreur } </script> 7 Fichiers externes Il suffit d’utiliser l’élément <script> avec l’attribut src. <head> <title> Example </title> <script src="example1.js"> </script> <script src="example2.js"> </script> ... Attention Pour exécuter le code après le chargement de la page, on utilisera : <body> <!-- content here --> <script src="example1.js"> </script> <script src="example2.js"> </script> </body> 8 Inline code et symboles spéciaux Le code suivant n’est pas correct en HTML : <script> function test(a,b) { if (a < b) console.log("1er parametre plus petit"); } </script> Première solution : remplacer < par < Deuxième solution : utiliser CDATA <script> // <![CDATA function test(a,b) { if (a < b) console.log("1er parametre plus petit"); } // ]]> </script> 9 Inline code ou External Files ? Il est préférable d’utiliser des fichiers externes pour des raisons de : I maintenabilité : le code javascript peut être rassemblé dans un unique répertoire I caching : un fichier js partagé par deux pages ne sera téléchargé qu’une seule fois I lisibilité : pas besoin d’astuces telles que // ... [CDATA qui polluent la page Remarque L’élément <noscript> permet d’afficher un contenu lorsque le navigateur ne supporte pas JS. Par exemple : <body> <noscript> <p> Cette page nécessite JavaScript </p> </noscript> 10 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 11 Identificateurs et commentaires Les identificateurs : I sont sensibles à la casse: test n’est pas Test I sont formés par convention en utilisant le style camel case comme dans sommeNotes Les commentaires : // single line comment /* * multi-line * comment */ 12 Identificateurs et commentaires Les instructions : I se terminent par un point-virgule I nécessitent des accolades lorsqu’elles forment un bloc Example ... var sum = a + b; ... if (sum > 0) console.log("positif"); ... if (a < b) { var tmp = a; a = b; b = tmp; } 13 Variables Déclarer une variable nécessite l’utilisation du mot-clé var. Example var ... var ... v = ... var sum; v = 100; "coucou"; // autorise mais deconseille x = 10, y = 20, z = false; Portée locale function test() { var message = "hi"; } test(); alert(message); // undefined // multiple declaration Portée globale function test() { message = "hi"; } test(); alert(message); // "hi" 14 Types Il y a principalement trois types classiques de données Boolean, Number and String et un type complexe Object (liste de couples nom-valeurs). Il est possible de déterminer le type (courant) d’une variable avec l’opérateur typeof qui retourne l’une des valeurs suivantes: I undefined si la valeur est indéfinie (variable déclarée mais pas initialisée ou variable non déclarée) I boolean I number I string I object si la valeur est un objet ou null I function si la valeur est une fonction Remarque Les fonctions sont considérées comme des objets qui ont des propriétés spéciales. 15 Valeurs undefined et null La valeur undefined fait référence à une variable non déclarée ou déclarée mais pas initialisée, null fait référence à une variable censée référencer un objet mais non encore disponible. Example var message = "coucou"; console.log(typeof message); // "string" var m1; console.log(m1); // "undefined" console.log(m2); // erreur console.log(typeof m1); // "undefined" console.log(typeof m2); // undefined ... var car = null; console.log(typeof car); // "object" 16 Boolean et Number Le type Boolean a deux valeurs true et false. Le type Number sert à représenter des valeurs entières et des valeurs flottantes (réelles). Example var var var var var var x = 55; y = 070; //octal pour 56 (en base 10) z = 0xA, //hexadecimal pour 10 f1 = 10.2; f2 = 3.12e7; // represente 31 200 000 f3 = 3e-10; // represente 0,0000000003 Remarque Les valeurs particulières du type Number sont : I Number.MIN VALUE, Number.MAX VALUE I Number.NEGATIVE INFINITY, Number.POSITIVE INFINITY I NaN (Not a Number) 17 Conversions numériques Relatifs aux valeurs et conversions des nombres, on trouve 4 fonctions : I isNaN détermine si un paramètre donné n’est pas un nombre I Number effectue une conversion I parseInt effectue une conversion en valeur entière I parseFloat effectue une conversion en valeur réelle Example console.log(isNaN(10)); // false console.log(isNaN("10")); // false - peut etre convertie console.log(isNaN("blue")); // true - pas convertible var num1 = Number("hello world"); // NaN var num2 = Number("00001"); // 1 var num3 = Number(true); // 1 var num3 = parseInt(""); // NaN var num4 = parseInt(22.5); // 22 var num5 = parseInt("70",10); // 70 - base 10 specifiee var num6 = parseFloat("22.5"); // 22.5 18 String On utilise les quotes simples (apostrophes) ou doubles (guillemets) pour définir des valeurs chaı̂nes de caractères. L’attribut length permet de déterminer la longueur d’une chaı̂ne. Example var nom = "Wilde"; var prenom = ’Oscar’; console.log(prenom.length); // 6 var message = "toto a dit \"je suis malade\"."; Il est possible de transtyper une valeur en chaı̂ne avec String(). Example var var var var v1 = 10; v2 = true; v3 = null; v4; console.log(String(v1)); // "10" console.log(String(v2)); // "true" console.log(String(v3)); // "null" console.log(String(v4)); // "undefined" 19 String Il existe de nombreuses fonctions sur les chaı̂nes de caractères. Example var s = "hello world"; console.log(s.length); // 11 console.log(s.charAt(1)); // "e" console.log(s.charCodeAt(1)); // 101 console.log(s.slice(3)); // "lo world" console.log(s.slice(-3)); // "rld" console.log(s.substring(3,7)); // "lo w" console.log(s.indexOf("o")); // 4 console.log(s.lastIndexOf("o")); // 7 console.log(s.toUpperCase()); // HELLO WORLD console.log(s + " !"); // hellow world ! 20 Math Il s’agit d’un objet définissant de nombreuses constantes et fonctions mathématiques. Example console.log(Math.E); // la valeur de e console.log(Math.PI); // la valeur de pi console.log(Math.min(5,12)); // 5 console.log(Math.max(23,5,7,130,12)); // 130 console.log(Math.ceil(25.3)); // 26 console.log(Math.floor(25.8)); //25 console.log(Math.random()); // valeur aleatoire entre 0 et 1 var n = Math.floor(Math.random()*nb + min); console.log(n); // valeur aleatoire entre min et min+nb (exclus) D’autres fonctions : Math.abs(x) Math.pow(x,y) Math.sin(x) Math.exp(x) Math.sqrt(x) Math.cos(x) Math.log(x) Math.tan(x) 21 Opérateurs Typiquement, ceux de C, C++ et java: I incrémentation/décrémentation (++, −−) I arithmétiques (+,−,∗,/,%) I relationnels (>,<,>=,<=,==,! =) et (===,! ==) I logique (!,&&,||) I affectation (=,+=,−=,*=,/=,%=) I bit à bit (&,|,<<,>>, ...) Example var age = 10; age++; console.log(age); // console.log(age > 10 console.log(26 % 5); age*=2; console.log(age); // 11 && age < 20); // true // 1 22 22 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 23 Structures de contrôle Elles sont très proches de celles de langages tels que C, C++ et Java. Pour rappel, les structures de contrôles sont de trois types : I Séquence : exécution séquentielle d’une suite d’instructions séparées par un point-virgule I Alternative : structure permettant un choix entre divers blocs d’instructions suivant le résultat d’un test logique I Boucle : structure itérative permettant de répéter plusieurs fois la même bloc d’instructions tant qu’une condition de sortie n’est pas avérée Remarque Toute condition utilisée pour une alternative ou boucle sera toujours placée entre parenthèses. Attention Il ne faut pas confondre x == y (test d’égalité) avec x = y (affectation). 24 Alternative L’instruction if sans partie else : if (condition) instruction; if (condition) { instruction; } if (condition) { instruction1; instruction2; ... } Example if (x >= 0) console.log("valeur positive ou nulle"); ... if (note > 12 && note <= 14) { console.log("bravo"); mention="bien"; } 25 Alternative L’instruction if...else : if (condition) instruction1; else instruction2; if (condition) { instructions1; } else { instructions2; } if (condition1) { instructions1; } else if (condition2) { instructions2; } else { instructions3; } Example if (rank == 1) medaille="or"; else if (rank == 2) medaille="argent"; else if (rank == 3) medaille="bronze"; 26 Alternative L’instruction switch : switch (expression) { case valeur1 : instructions1; break; case valeur2 : instructions2; break; ... case valeurN : instructionsN; break; default: instructionsDefault; } Remarque Le branchement par défaut n’est pas obligatoire. 27 Alternative L’opérateur ternaire ?: permet de remplacer une instruction if...else simple. Sa syntaxe (lorsqu’utilisée pour donner une valeur à une variable) est : variable = condition ? expressionIf : expressionElse; Elle est équivalente à : if (condition) variable=expressionIf; else variable=expressionElse; Example var civilite = (sexe == "F") ? "Madame" : "Monsieur"; var medaille = rank == 1 ? "or" : rank == 2 ? "argent" : " bronze"; Remarque Cet opérateur est utile pour les expressions courtes. 28 Boucle L’instruction while : while (condition) instruction; while (condition) { instruction1; instruction2; ... } Example var num = 1; while (num <= 5) { console.log(num); num++; } 29 Boucle L’instruction for : for (instructionInit; condition; instructionIter) instruction; for (instructionInit; condition; instructionIter) { instruction1; instruction2; ... } Example for (var num = 1; num <= 5; num++) console.log(num); Remarque Il n’est pas nécessaire de placer des parenthèses autour de la condition pour le for. 30 Boucle L’instruction do...while : do { instruction1; instruction2; ... } while (condition); L’instruction for-in pour les objets : for (var prop in window) document.writeln(prop); 31 Boucle Certaines instructions permettent un contrôle supplémentaire sur les boucles : I break permet de quitter la boucle courante I continue permet de terminer l’itération en cours de la boucle courante Example for (var i=0; i<5; i++) { for (var j=0; j<5; j++) { if ((i+j)%3 == 0) continue; for (var k=0; k<5; k++) { if ((i+j+k)%3 == 0) break; console.log(i + " " + j + " " + k); } } } 32 Exercice Écrire le code Javascript qui détermine si un nombre entier x est parfait. Definition Un nombre est parfait ssi il est égal à la somme de ses diviseurs stricts. 6 est parfait car 6 = 1 + 2 + 3. 33 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 34 Object Peut être utilisé notamment pour stocker des données. Création d’une variable (de type Object) de manière littérale (énumération entre accolades). Example var person = { name : "Julien", age : 23, gender : "M" } Remarque Il est possible d’utiliser les crochets pour accéder à un champ. console.log(person.name); console.log(person["name"]); var field="name"; console.log(person[field]); 35 Array Les tableaux peuvent contenir des données de nature différente. Example var t1 = []; // tableau vide var t2 = new Array(20); // tableau avec 20 cases var colors = ["red","blue","green"]; // notation litterale Remarque Le champ length indique la taille d’un tableau. Example var colors = ["red","blue","green"]; console.log(colors.length); // 3 colors[colors.length]="black"; // nouvelle couleur colors[99]="pink"; console.log(colors.length); // 100 console.log(colors[50]): // undefined colors.length=10; // plus que 10 cases 36 Array De nombreuses méthodes existent sur les tableaux. Example var colors = ["red","blue","green"]; console.log(colors); // red,blue,green console.log(colors.join(";")); // red;blue;green colors.push("black"); console.log(colors); // red,blue,green,black var item = colors.pop(); console.log(item + " " + colors); // black red,blue,green var item2= colors.shift(); console.log(item2 + " " + colors); // red blue,green Remarque Il existe d’autres méthodes telles que concat, slice et splice. 37 Réordonner les tableaux On peut utiliser reverse et sort. Example var values = [0, 1, 2, 3, 4]; console.log(values.reverse()); // 4,3,2,1,0 values = [0, 1, 5, 10, 15]; console.log(values.sort()); // 0,1,10,15,5 function compare(value1, value2) { ... } values = [0, 1, 5, 10, 15]; console.log(values.sort(compare)); // 0,1,5,10,15 Exercice. Écrire le corps de la fonction compare ci-dessus qui retourne -1 lorsque le premier argument est inférieur au second, +1 lorsque le premier argument est supérieur au second, et 0 sinon. 38 Fonctions La syntaxe pour définir une fonction est : function name(arg0, arg1, ..., argN) { statements } Example Example function sayHi(name) { console.log("Hello " + name); } function sum(num1, num2) { return num1+num2; } sayHi("Nicolas"); console.log(sum(5,10)); // 15 Remarque Une fonction peut retourner un résultat avec l’instruction return même si rien ne l’indique au niveau de la signature (en-tête) de la fonction. 39 Arguments Il existe toujours un tableau arguments implicite lors de l’appel à une fonction. Example function f() { console.log(arguments.length); for (var i=0; i<arguments.length; i++) console.log(arguments[i]); } f("Nicolas"); // affiche 1 Nicolas f("Nicolas",25); // affiche 2 Nicolas 25 Remarque La possibilité de faire appel à une fonction avec un nombre variable de paramètres pallie l’impossibilité de surcharge (overloading). 40 Fonctions comme objets Il y a deux manières (sensiblement équivalentes) de définir une fonction. Example function sum(n1, n2) { return n1+n2; } console.log(sum(5,10)); //15 Example var sum = function (n1, n2) { return n1+n2; }; console.log(sum(5,10)); //15 Remarque Il est possible de référencer une fonction par deux variables différentes ou de passer une fonction comme paramètre à une autre fonction. 41 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 42 Window L’objet window représente la fenêtre du navigateur. Example window.moveTo(0,0); window.resizeTo(800,800); var wrWindow = window.open("http://www.wrox.com","wrox"); if (wrWindow == null) console.log("fenetre bloquee"); else { ... wrWindow.close(); } Remarque Le navigateur peut être configuré de manière à empêcher de modifier son emplacement, de modifier sa taille ou encore d’afficher une fenêtre pop-up. 43 Timer Il est possible de programmer l’exécution d’une méthode à un instant donné ou à des temps réguliers grâce à setTimeout et setInterval. Example function helloWorld() { console.log("hello world"); } var id = setTimeout(helloWorld, 1000); var num=0, max=4; var intervalId = setInterval(incrementNumber,500); function incrementNumber() { if (++num == max) clearInterval(intervalId); else console.log(num); } Remarque Il est possible d’annuler avec clearTimeout et clearInterval. 44 Boites de dialogues Des boites de dialogues peuvent être ouvertes en utilisant les méthodes alert, confirm et prompt. Example if (confirm("Are you sure?")) alert("I am glad"); else alert("I am sorry"); var name = prompt("What is your name?","Toto"); if (name != null) alert("Welcome " + name); Remarque Il existe deux autres méthodes asynchrones print et find. 45 Objets du BOM En plus de window, il est possible d’utiliser les objets location, navigator, screen et history. Example location.href="http://www.wrox.com"; location.reload(); location.port=8080; // change le port console.log(navigator.appName); // nom du navigateur console.log(navigator.javaEnabled); console.log(screen.colorDepth); console.log(screen.width); window.resizeTo(screen.availWidth,screen.availHeight); history.go(2); // go forward 2 pages history.back(); // go back one page if (history.length == 0) console.log("this is the first page"); 46 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 47 DOM DOM (Document Object Model) est une API pour manipuler les documents HTML et XML. L’objet document représente la page HTML chargée par le navigateur. Example var html = document.documentElement; alert (html == document.firstChild); // true var body = document.body; document.title="nouveau titre"; var url = document.URL; var domain = document.domain; console.log(url + " " + domain); 48 Méthode getElementById() Cette méthode prend comme argument l’id d’un élement. Example // dom.html <head> ... </head> <body> <p id="p1"> An ordered list: </p> ... <script src="dom.js"> </script> </body> // dom.js var p = document.getElementById("p1"); p.style.color="blue"; 49 Méthode getElementsByTagName() Cette méthode prend comme argument le nom de balise des éléments à récupérer. Example // dom.html <body> <ol> <li>XHTML</li> <li>CSS</li> ... </ol> <script src="dom.js"> </script> </body> // dom.js var list = document.getElementsByTagName("li"); for (var i=0; i< list.length; i++) list[i].style.color="green"; 50 Propriété innerHTML En utilisant cette propriété, il est possible de modifier le contenu d’un élément. Example var div1 = document.getElementById("d1"); var div2 = document.getElementById("d2"); var div3 = document.getElementById("d3"); div2.innerHTML=div1.innerHTML; div3.innerHTML="je suis <strong> content </strong>"; Remarque La propriété innerText (textContent pour Firefox) est similaire à innerHTML, mais ne traite que du texte simple. Attention Éviter d’utiliser outerText et outerHTML. 51 Créer des éléments HTML Il existe de nombreuses méthodes DOM pour créer dynamiquement des éléments. Example var table = document.createElement("table"); for (var i=1; i<=10; i++) { var row = document.createElement("tr"); for (var j=1; j<=10; j++) { var cell = document.createElement("td"); cell.appendChild(document.createTextNode(i*j)); row.appendChild(cell); } table.appendChild(row); } document.getElementById("d1").appendChild(table); 52 Modifier le style dynamiquement Tout élément HTML dispose d’un attribut style en JS. Les noms des propriétés CSS doivent être convertis en camel case. Par exemple : Propriété CSS Propriété JavaScript background-image color font-family style.backgroundImage style.color style.fontFamily Example var div = document.createElement("myDiv"); myDiv.style.backgroundColor="red"; myDiv.style.width="100px"; myDiv.style.border="1px solid border"; Attention La propriété float correspond à un mot réservé de Javascript. Il faut alors utiliser cssFloat (ou styleFloat pour IE). 53 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 54 Événements Un événement est provoqué par une action de l’utilisateur ou du navigateur lui-même. Les événements ont des noms tels que click, load et mouseover. Une fonction appelée en réponse à un événement se nomme un écouteur (event handler ou event listener). Souvent, leur nom commence par on comme par exemple onclik ou onload. Associer des écouteurs aux évènements possibles peut se faire de trois manières différentes: I HTML I DOM Level 0 I DOM Level 2 (pas présenté ici) 55 HTML Event Handlers On utilise des attributs HTML pour déclarer les écouteurs. La valeur de ces attributs est le code JavaScript à exécuter lorsque l’événement est produit. Example <input type="button" onclick="console.log(’clicked’)" /> <script> function showMessage() { console.log("hello world"); } </script> <input type="button" onclick="showMessage()" /> Remarque Il faut parfois échapper des caractères. Par exemple : onclick="console.log("clicked")" 56 Dom Level 0 Event Handlers On utilise les propriétés des éléments pour leur associer des écouteurs. Example // dom0.html <input type="button" id="but1" value="bouton 1" /> // dom0.js function but1Listener() { console.log("but1 cliqued"); } var but1 = document.getElementById("but1"); but1.onclick=but1Listener; Remarque Pour éliminer l’écouteur, on place la valeur null. Par exemple : but1.onclick=null; 57 L’objet event Quand un événement se produit, toutes les informations le concernant sont enregistrées dans un objet appelé event. Il est possible de récupérer cet objet sous forme de paramètre d’une fonction écouteur. Example function but3Listener(event) { switch(event.type) { case "click" : console.log("clicked at " + event.clientX + " " + event.clientY); break; case "mouseover" : this.style.backgroundColor="red"; break; case "mouseout" : this.style.backgroundColor=""; break; } } but3.onclick=but3Listener; but3.onmouseover=but3Listener; but3.onmouseout=but3Listener; 58 Événements souris Ce sont : click mousedown mouseover mousemove dblclick mouseup mouseout Les propriétés utiles et accessibles à partir de l’objet event sont : clientX screenX shiftkey altKey clientY screenY ctrlKey metaKey 59 Événements clavier Ce sont : keydown keypress keyup Les propriétés utiles et accessibles à partir de l’objet event sont : shiftkey altKey keyCode ctrlKey metaKey Exemples de valeurs pour keyCode: I 40 pour Down Arrow I 65 pour A I 112 pour F1 60 Événements HTML Ce sont : load abort select submit resize focus unload error change reset scroll blur Remarque La plupart de ces évènements sont liés aux formulaires ou l’objet window. 61 Événements load et unload Pour l’objet window, l’événement load se produit lorsque la page complète est chargée, incluant les ressources externes telles que les images, les fichiers JavaScript et CSS. Example function loadListener() { console.log("loaded"); } window.onload=loadListener; Remarque Il est possible d’associer cet événement à des éléments img. Remarque L’évènement unload se produit typiquement lorsqu’on change de page. Cela permet par exemple de libérer proprement certaines ressources. 62 Événements submit et reset Ils sont associés à un formulaire. Pour valider la soumission ou la ré-initialisation, la fonction écouteur doit retourner true. Example function submitListener() { if (this.name1.value.length == 0) return false; // autres controles a effectuer return true; } function resetListener() { return confirm("Are you sure?"); } var form = document.getElementById("form1"); form.onsubmit=submitListener; form.onreset=resetListener; Remarque this.name1.value représente la valeur du champ name1 de l’objet this qui est le formulaire auquel est associé l’écouteur. 63 Événements focus et blur Utiles par exemple pour contrôler les champs de saisie. Example function focusListener() { if (this.style.backgroundColor != "red") this.style.backgroundColor="yellow"; } function blurListener() { if (this.value.match(/\d/g)) this.style.backgroundColor = "red"; else this.style.backgroundColor = ""; } var field = document.getElementById("name1"); field.onfocus=focusListener; field.onblur=blurListener; 64 Expressions régulières La syntaxe est /pattern/modifiers Modifiers are used to perform case-insensitive and global searches: I i : perform case-insensitive matching I g : perform a global match (find all matches rather than stopping after the first match) I m : perform multiline matching Le motif (pattern) est la séquence de caractères à rechercher. Il est possible d’utiliser des méta-caractères, crochets, etc. Voir http://www.w3schools.com/jsref/jsref_obj_regexp.asp 65 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 66 Bibliothèque jQuery Librairie Javascript développée depuis 2006 Avantages : I interface simple et puissante pour écrire du code I aplanit les différences entre navigateurs I beaucoup de ressources disponibles Utiliser jQuery : I download à www.jquery.com I ou utiliser un CDN (Content Delivery Network). Par exemple : <script src="http://ajax.googleapis.com/ajax/libs/jquery /1.11.1/jquery.min.js"> </script> 67 Sélectionner avec jQuery L’instruction $(selecteur), ou jquery(selecteur), retourne le ou les éléments sélectionnés. Example <h1 id="test"></h1> $("#test").text("premier essai"); L’instruction $(document).ready() permet d’executer du code (en argument de ready) lorsque le document DOM est totalement chargé Example $(document).ready(function() { $("#test").text("premier essai"); }); Attention Utiliser une fonction anonyme dans ready() 68 Sélectionner avec jQuery Example <body> <ul id="menu"> <li class="item"><p>This is a paragraph</p></li> <li class="item">No paragraph here</li> <li class="item">No paragraph here</li> </ul> <p>Email: <input type="email" id="email"/></p> <p>Plain Text: <input type="text" id="text"/></p> <script src="//ajax.googleapis.com/.../jquery.min.js"> </script> <script src="my.js"></script> </body> $(document).ready(function(){ $(".item").css("color", "blue"); $("#menu .item p").css("color", "red"); $("input[type=email]").css("border", "10px solid blue"); }); 69 Sélectionner des éléments avec jQuery Sélecteurs spécifiques à jQuery ( voir http://api.jquery.com/ category/selectors/jquery-selector-extensions/) : Sélecteur :eq() :gt() :lt() :first :last :even :odd :animated :selected :visible :hidden :has() :parent Sens élement à la position donnée élements aux positions supérieures éléments aux positions inférieures premier élément matché dernier élément matché élements aux positions paires éléments aux positions impaires éléments en cours d’animation éléments sélectionnés éléments visibles élements cachés éléments contenant éléments parents Exemple $(”li:eq(2)”) $(”li:gt(2)”) $(”li:lt(2)”) $(”tr:first”) $(”tr:last”) $(”tr:even”) $(”tr:odd”) $(”p:animated”) $(”option:selected”) $(”p:visible”) $(”p:hidden”) $(”div:has(p)”) $(”p:parent”) 70 Créer des éléments avec jQuery L’instruction $(element) crée un nouvel élément. Example <div id="container"></div> $(document).ready(function(){ var time = new Date().getHours(); var elem = $("<h1>").attr("id","greeting").hide(); if (time < 12) elem.text("Good Morning"); else elem.text("Good Afternoon"); $("#container").append(elem); $("#greeting").show("slow"); }); Remarque Il est possible d’écrire : if (time < 12) elem = $("<h1 id=’greeting’>Good Morning</h1>").hide(); 71 Quelques méthodes Les méthodes suivantes sont couramment utilisées : I text() : get/set le contenu textuel de l’élément I html() : get/set le contenu html d’ l’élément I css() : get/set les propriétés CSS I attr() : get/set les attributs de l’élement I hide(), show() et toggle() : cache ou rend visible l’élément I fadeIn(), fadeOut() et fadeToggle() : pour jouer avec l’opacité I slideUp(), slideDown() et slideToggle() : pour un effet glissant I addClass(), removeClass(), hasClass() et toggleClass() permettent de modifier dynamiquement la valeur de l’attribut class Remarque La plupart permettent d’effectuer du method chaining 72 Exemple avec attr() Example <ul> <li id="contact"><a>Toto</a></li> </ul> $(document).ready(function(){ $("#contact a").attr({ "href" : "http://www.toto.com/", "title" : "Visit Toto website", "id" : "atoto" }); var li = $("<li>").text($("#contact a").attr("title")); $("ul").append(li); }); 73 Exemple avec css() Example <h1>Beginning HTML and CSS</h1> <p> <strong>The border property is:</strong> <span id="result"></span> </p> $(document).ready(function(){ $("h1").css({ "font-size" : "200%", "color" : "#ffffff", "height" : "100px", "width" : "500px", "background-color" : "#61b7ff", "border" : "10px solid #003366" }); $("#result").text($("h1").css("border")); }); 74 Exemple avec html() Example $(document).ready(function(){ var methods = ["attr()", "css()", "html()", "addClass()" , "removeClass()", "hasClass()", "toggleClass()"]; var list=""; for (var i=0, len=methods.length; i < len; i++) list += "<li>" + methods[ i ] +"</li>"; $("#methods").html(list); }); 75 Exemple avec toggleClass() Example .selected { background : #666; color : #fff; } <ul> <li id="home" class="item">Home</li> <li id="about" class="item">About</li> <li id="contact" class="item">Contact</li> </ul> $(document).ready(function(){ $("#home").on("click", function(){ $("#home").toggleClass("selected"); }); }); 76 Exemple avec show() et toggle() Example $(document).ready(function(){ $("#slow").show("slow"); $("#fast").show("fast"); $("#ms").show(1500); $("#toggle").on("click", function(){ $("#toggled").toggle(); }); }); 77 Exemple avec slideToggle() Example <dl> <dt>Term </dt> <dd> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </dd> ... </dl> $(document).ready(function(){ $("dt").on("click", function(){ $(this).next().slideToggle(); }) }); 78 Gestion des événements Méthodes importantes : I I I on() pour enregistrer un écouteur off() pour supprimerun écouteur trigger() pour déclencher un évenement en remplacement depuis jQuery 1.7 de click(), submit(), live(), die(), delegate(), undelegate(), bind() and unbind() Example $(document).ready(function(){ function toggler(){ $(this).next().slideToggle(); } $("dt").on("click", toggler;) $("button").on("click", function(){ $("dt").trigger("click").off("click", toggler); }); }); 79 Méthode on() à trois arguments Le second paramètre désigne le type d’éléments qui est concerné par l’écouteur (même si un élément de ce type est créé plus tard). “Listen to every click on the whole document, and if it happens on an <a> element, fire this event.” : Example $(document).on( "click", "a", function(){ //code goes here }); 80 jQuery UI jQuery UI: I collection de GUI widgets I download à www.jqueryui.com ou utiliser un CDN Squelette : <head> <meta charset="utf-8"> <title>jQuery UI Draggable and Droppable</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ ajax/libs/jqueryui/1.11.1/themes/smoothness/jqueryui.css"/> </head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery /1.11.1/jquery.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/ jqueryui/1.11.1/jquery-ui.min.js"> </script> </body> 81 Drag and Drop Example <div id="container"> <div id="draggable"> <p>Drag here</p> </div> <div id="droppable"> <p>Drop here</p> </div> </div> $(document).ready(function(){ $("#draggable").draggable(); $("#droppable").droppable( { drop: function(event, ui) { $(this).css("border","4px solid").html("<p>Dropped !</p>"); } }); }); 82 Resizable ans Selectable Example <div id="resizable"> <p>Resizable Element</p> </div> $(document).ready( function(){ $("#resizable").resizable(); }); <ol id="selectable"> <li>These items are selectable </li> <li>These items are selectable </li> <li>These items are selectable </li> </ol> $(document).ready(function(){ $("#selectable").selectable(); }); 83 Sortable Example <ol id="sortable"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ol> $(document).ready(function() { $("#sortable").sortable().disableSelection(); }); Et tous les autres widgets sur http://jqueryui.com/. En particulier : I accordion I tabs 84 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 85 Création d’un objet Notation littérale à privilégier : I symboles ’{’ et ’}’ encadrant la définition de l’objet I introduction de champs (propriétés) et fonctions (méthodes), constitués d’un nom suivi de ’:’ et de la valeur I symbole ’,’ comme séparateur entre les différents champs/fonctions Example var person = { name: "Alice", age: 20, job: "singer", introduction: function() { console.log(this.name+ " " + this.age + " " + this.job ); } }; 86 Accés aux membres d’un objet On utilise : I I this si on se trouve dans le code d’une fonction de l’objet le nom de la variable (objet) si on se trouve dans du code par ailleurs Example var game = { occupied: false, ... cellAt: function (row, col) { return $("[data-r=’"+row+"’][data-c=’"+col+"’] span"); }, getDigitAt: function (row, col) { var val = this.cellAt(row, col).text(); return val == "" ? 0 : parseInt(val); } }; var v = game.getDigit(2,3); 87 Parcours des membres d’un objet On utilisera : I for in pour itérer sur le nom des membres d’un objet I hasOwnProperty pour ne traiter que les membre non hérités I la notation [] pour accéder à la valeur des membres Example for (var memberName in object) { console.log(memberName); } for (var memberName in object) { console.log(memberName + " " + object[memberName]); } for (var memberName in object) { if (object.hasOwnProperty(memberName)) console.log(memberName); } 88 Héritage L’héritage est basé sur le concept de prototype. La gestion de ”classes” et de l’héritage est : I assez complexe en ECMAScript 5 I plus facile en ECMAScript 6 Remarque Orientez-vous vers les nouvelles facilités de ECMAScript 6 89 Functional Programming Forme de programmation caractérisée par l’enchainement des appels de fonctions (method chaining). Fonctions caractéristiques : filter, map, reduce Example var t1 = [5, "poisson", 10, "zebre", true]; var t2 = t1.filter( function (value) { return (typeof value === ’string’); } ); console.log(t2); // poisson, zebre 90 Functional Programming Example var t1 = [1, 2, 3, 4]; var t2 = t1.map(function(number){ return number * 2; }).map(function(number){ return number + 1; }); console.log(t2); // [3, 5, 7, 9] var total = t1.map(function(number){ return number * 2; }).reduce(function(total, number){ return total + number; }, 0); console.log("The total number is", total); // 20 91 Functional Programming en Java 8 Nombre de langages intégrent aujoud’hui des mécanismes de programmation fonctionelle. En Java 8, c’est par le biais de Stream. Example List<String> myList = Arrays.asList("a1", "a2", "b1", "c2", "c1"); myList .stream() .filter(s -> s.startsWith("c")) .map(s -> s.toUpperCase()) .sorted() .forEach(s -> System.out.print(s)); // c1c2 92 Plan Introduction Bases du langage Structures de contrôle Types/Classes Navigateur DOM Événements jQuery Objets Meteor 93 Full-stack Framework of Meteor Meteor is a full-stack solution that contains: I frontend libraries I a Node.js-based server I a command-line tool Useful sites: I Meteor site: https://www.meteor.com I Meteor documents: http://docs.meteor.com I Atmosphere: for exploring Meteor packages https://atmospherejs.com I StackOverflow http://stackoverflow.com/questions/tagged/meteor Meteor implements Reactive Programming 94 Structure of Meteor Applications Creating a Meteor Application with three main drectories : meteor create test cd test rm test.* mkdir client server both meteor Now, you have to put your files at the right place. Some must be used: I only on the client I or only the server or both on the client and the server I Remarque For ressources (images, icons,...) you can build two additional folders called public (available on the client) and private (available on the server). 95 Templates Building templates is made as simple as writing something that looks like (to be put in a file in folder client): <template name="myTemplate"> <p> hello ! </p> </template> It can now be used. <body> <p> Paragraphe before the template </p> {{> myTemplate}} <p> Paragraphe after the template </p> </body> It is just like a ”query replace” 96 Helpers In a js file, we can introduce helpers, that typically are functions that can be called withing the template. Template.myTemplate.helpers({ hi : function() { return "hi !"; }, square : function(i) { return i*i; } }); We can use these helpers as follows: <template name="myTemplate"> <p> hello ! </p> <p> {{hi}} </p> <p> The square of 10 is {{square 10}} </p> </template> 97 Helpers Sometimes, a helper returns an array. We can then use #each. Template.myTemplate.helpers({ medals : function() { return [ {metal:"Gold", rank:1}, {metal:"Silver", rank:2}, {metal:"Bronze", rank:3} ]; } }); We can use this helper as follows: <template name="myTemplate"> <p> Medals ! </p> {{#each medals}} <p> Metal: {{metal}} Rank: {{rank}} {{/each}} </template> 98 Helpers What about an array of simple values? Template.myTemplate.helpers({ days : function() { return ["Mon","Tue","Wed","Thi","Fri","Sat","Sun"]; } }); We can use this helper as follows: <template name="myTemplate"> <p> Days of the week: </p> {{#each days}} <p> {{this}} </p> {{/each}} </template> 99 Helpers Sometimes, a helper returns a cursor allowing us to iterate over the documents of a collection. Again, we can use #each. Imagine that we have a Mongo collection called Movies, containing documents that systematically have two fields called title and length. Template.myTemplate.helpers({ movies : function() { return Movies.find({}); } }); We can use this helper as follows: <template name="myTemplate"> <p> My movies with their lengths: </p> {{#each movies}} <p> Title: {{title}} Length: {{length}} {{/each}} </template> 100 Listeners We can also associate listeners for events concerning a template. Template.myTemplate.events({ ’click button’ : function(e) { console.log("I have clicked on a button"); console.log(e); }, ’dblclick #toto’ : function() { console.log("I have double clicked on #toto"); }, ’change select’ : function() { console.log("I have selected another option"); } }); 101
