Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Magali Contensin Introduction JoSy AJAX et bibliothèques JS pour les ASR 3 nove

Magali Contensin Introduction JoSy AJAX et bibliothèques JS pour les ASR 3 novembre 2011 JavaScript DOM & CSS Publication sur Internet : HTML & CSS Présentation de JavaScript ECMAScript : le noyau du langage JavaScript Manipulation des objets du document Des débuts du dynamisme au DOM Modifier une page web avec JS, DOM et CSS Formulaires Sécurité Outils Plan Introduction JavaScript, DOM & CSS Publication sur Internet HTML Contenu d’une page HTML bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla x t a d i l y u b e j m z V c f K n bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla :  bla bla bla  bla bla  bla bla bla Titre texte tableau liste lien hypertexte objets image, vidéo, son formulaire bibliographie Mise en page navigateur : style par défaut avant HTML 4.0.1 : éléments et attributs de style <foŶt Đoloƌ="ƌed" size="4">…</foŶt> <ĐeŶteƌ>…</ĐeŶteƌ> <hϭ aligŶ="ĐeŶteƌ">…</hϭ> utilisation de tableaux HTML 4.01 séparation structure / mise en forme foŶt, ĐeŶteƌ, … deprecated => feuilles de style CSS Spécifications CSS 2.1 CSS 3 en cours de développement Quelques nouveautés CSS3 : Tableaux : cadre, légende, fond Publication sur Internet Feuilles de style CSS Fond : couleur, image (position, répétition, attachement) Listes : puce, numérotation bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bibliographie Textes : police, style, décoration, couleur, aligŶeŵeŶt, espaceŵeŶt, … Liens : couleur, décoration Titre Blocs : marges, cadre couleur Curseurs Format visuel : position, flottant, visibilité, z-index Contrôler la présentation du document en foŶĐtioŶ du ŵĠdia ;ĠĐƌaŶ, iŵpƌiŵaŶte, …Ϳ Survol BIBLIOGRAPHIE bla bla bla bla bla bla x t a d i l y u b e j m z V c f K n bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla :  bla bla bla  bla bla  bla bla bla transformations ombre colonnes effets sur le texte dégradé transparence rgba arrondi sélecteurs pair/impair <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css">  </style> </head> <body> <h1 style="text-align:center; color:navy">titre</h1> <p>C’est uŶ <eŵ>test</eŵ> de stǇle.</p> <p id="p2">Un 2eme <em>paragraphe</em></p> <p class="ex" style="color:black">test de classe</p> </body> </html> Publication sur Internet Feuilles de style CSS Le CSS peut être placé dans : (1) fichier externe .css (2) élément style (3) attribut style 1 3 p { font-family:Calibri; color:purple; /* sélectionne les éléments p */ } *.ex { /* éléments qui ont class=ex */ border: 1px solid silver; } /* équivalent à .ex (* implicite) */ h1:hover { /* survol de h1 */ background-color:#CCCCCC } #p2 { /* l’ĠlĠŵeŶt Ƌui a id=pϮ */ text-align:right; } style.css externe global local style du navigateur préférences utilisateur Priorités règle propriété:valeur sélecteur { [déclaration ; ]+ } Sélecteur élément * #id .classe :pseudo- classe 1 2 3 4 5 1 1 5 3 4 2 2 titre C’est un test de style. Un 2eme paragraphe test de classe 1 Langage de programmation orienté-objet interprété par le navigateur syntaxe proche de Java Histoire Netscape 2.0 JavaScript – mars 1996 Microsoft IE 3.0 JScript (en partie compatible avec JS) – août 1996 Rendu public par Netscape, standardisé par l’ECMA en juin 1997 Evénementiel : permet de réagir à des actions de l’utilisateur Ajout de dynamisme dans la page web Vérification de formulaires Avant CSS : roll-over, menus Modification de la structure, du contenu et du style de la page Deux parties : Syntaxe du langage : ECMAScript Manipulation des objets du document : DOM Présentation de JavaScript Présentation de JavaScript insertion de code JS dans la page web <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test JS</title> <script type="text/javascript" src="script.js"></script> </head> <body> <script type="text/javascript">  </script> <noscript><p>activez JS !</p></noscript> <div> <h1>Test JS</h1> <a href="javascript:affiche_date()">date</a> <a href="javascript:alert('hello')">hello</a> <form action="test.php"> <div><input type="button" value="clic" onclick="pair()"></div> </form> </div> </body> </html> function pair(){ nb = prompt('entrez un nombre', ''); (nb%2 == 0) ? alert('pair') : alert('impair'); } mercredi 26 octobre 2011 23:10:18 script.js entrez un nombre impair Le code peut être placé dans : (1) fichier externe .js (2) élément script (3) attribut contenant URL (4) attribut événementiel onclick, onchange, onselect,… 2 1 1 3 4 hello ECMAScript bases du langage var ne = 0; var age = 0; var txt = ''; var date_courante = new Date(); var annee_courante = date_courante.getFullYear(); var exp = /^[12]\d{3}$/; // format 1xxx ou 2xxx /* tant que l'utilisateur n'a pas saisi une annee correcte afficher boite dialogue */ do { ne = prompt('annee ', ''); } while ( !exp.test(ne ) || (ne > annee_courante)); age = annee_courante - ne; txt= 'vous avez ' + age + ' ans'; (age%10 == 0) ? alert(txt+' ... nouvelle decennie') : alert(txt); ŵaƌƋue de fiŶ d’iŶstƌuctioŶ marques de bloc commentaires variable arithmétiques + - */ % relationnels < <= > >= == != === !== concaténation + logiques ! && || affectation = += -= *= /= %= opérateur conditionnel ternaire autres opérateurs incrémentation ++ décrémentation -- séquentiel , objets : this, in types boolean number string object null undefined création objet invocation méthode opérateurs ECMAScript bases du langage if (expr){ // code si expression true } else { // code si expression false } var today = new Date(); switch (today.getDay()){ case 0 : case 6 : jour = "week-end"; break; case 1 : case 2 : case 4 : case 5 : jour = "semaine"; break; case 3 : jour = "mercredi"; break; default : jour = "non defini"; } alert(jour); while (expr){ … } do{ … } while (expr); for (exp1 ; exp2 ; exp3){ ... } for (var i in objet){ ... }  Instructions conditionnelles  Instructions itératives  Instructions d’interruption : break, continue ECMAScript bases du langage  Fonctions Déclaration function nom_fonction([arg1,...,argN]){ ... return expression; // optionnel } Appel Ŷoŵ_foŶĐtioŶ;΀aƌgϭ, aƌgϮ, …΁Ϳ ; Les arguments sont passés par valeur Les objets sont passés par adresse  Mathématiques Math Ne peut pas être utilisé avec new alert(Math.ceil(7.48)); alert(Math.random()); Méthodes ceil, floor, round min, max random abs, sqrt, pow tƌigoŶoŵĠtƌie : siŶ, Đos, … Constantes Math.PI ECMAScript bases du langage  Tableaux Création var tab1 = new Array;valϭ, valϮ, …Ϳ; vaƌ taďϮ = ΀valϭ, valϮ, …΁; var tab3 = new Array(); var tab = new Array(125, 'hello', false); tab[0] = 'xxx'; var contenu = ''; for (var i=0; i < tab.length; i++){ contenu += tab[i]+', '; } alert(contenu); contenu = ''; tab.reverse(); for (i in tab){ contenu += tab[i]+', '; } alert(contenu); Méthodes join, reverse, sort, … Propriétés Taille d’uŶ taďleau : length Parcours for, for in, while 125 hello false Accès tab[i] avec i >= 0 xxx hello false 0 1 2 length : 3 xxx, hello, false, false hello xxx false, hello, xxx, <input type="text" name="nb1"> + <input type="text" name="nb2"> = <input type="text" name="res"> <input type="button" value="calculer" onclick="res.value = nb1.value + nb2.value"> <input type="button" value="calculer" onclick="res.value = parseFloat(nb1.value) + parseFloat(nb2.value)"> ECMAScript bases du langage Création var ch1 = new String('hello !'); var ch2 = 'hello !'; ch2 = "test"; Caractères spéciaux CaƌaĐtğƌe d’ĠĐhappeŵeŶt : \ Caractères espacement : \n \t \f Méthodes substring, toLowerCase, toUpperCase split, … Conversion : parseInt, parseFloat Propriétés Taille d’uŶe ĐhaîŶe : length  Chaînes de caractères ECMAScript bases du langage  Expressions régulières Déclaration var exp = new RegExp('modele'[,'options']); var exp = /modele/[options] Options : i insensible à la casse m multi-ligne g toutes les correspondances IŶdicateuƌs d’occuƌƌeŶce {n} exactement n fois * {0,} {n,} au moins n fois + {1,} {n,m} entre n et m fois ? {0,1} Mode glouton par défaut (paresseux ajouter ?) Caractères spéciaux | ou . tout caractère sauf \n \t tabulation \n saut de ligne \0 car. nul \ Đaƌ. d’ĠĐhappeŵeŶt Classes uploads/s3/ 0253-formation-javascript-dom-css.pdf