DokuWiki jet

jet:accessing_dom_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T17:35:12+00:00

<- Working with nodes and elementsChanging DOM elements -> * getElementById(“Id”); -> référence à l'élément ou null * getElementsByTagName(“div”); -> HTMLCollection (Array) element.nodeType // nodetype property element.innerHTML element.childNodes.length

jet:accessing_form_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T21:37:41+00:00

<- Going through a debugging sessionPreventing a form from being submitted -> * field properties * value * field events * onfocus * onblur (si on sort de l'input même sans changement) * onchange * onkeypress * onkeydown * onkeyup * form events * onsubmit (on peut interrompre le processus avec un event handler retournant flase).

jet:accordion

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T12:01:56+00:00

<- ResizeWhere to go from here -> (exemple d'usage de jquery)

jet:changing_dom_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T17:44:35+00:00

<- Accessing DOM elementsCreating DOM elements -> attributs * element.getAttribute(“href”); * element.setAttribute(“href”,“domain.com”); contenu * element.innerHTML * element.innerHTML = “content”;

jet:changing_inline_styles

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T21:59:16+00:00

<- Removing and applying CSS classesUnderstanding JavaScript style -> ...

jet:common_javascript_errors

Anonymous (anonymous@undisclosed.example.com) — 2016-01-21T12:57:37+00:00

<- Working with timersUsing Firebug -> * element manquant * function( {} -> function() {} * function () { -> function() {} * “string -> “string” * fonction inexistante appelée * erreur de non (mafonction() au lieu de ma_fonction() ou getElementByID au lieu de

jet:countdown

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T11:49:10+00:00

<- Working with objects and prototypesResize -> ...

jet:creating_dom_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T17:59:48+00:00

<- Changing DOM elementsIntroduction to JavaScript event handling -> creating elements var myNewElement = document.createElement("li"); // création de l'élément myOldElement.appendChild(myNewElement); // on le place dans le DOM myNewElement.innerHTML = "texte"; //méthode bourrin pour peupler le node créer des nodes texte

jet:creating_functions

Anonymous (anonymous@undisclosed.example.com) — 2016-01-13T01:24:59+00:00

<- Working with loopsWorking with arrays -> functions function name (parameters) { // code } Déclarer les fonctions avant de les appeler ! retourner des valeurs function name () { // code return variable; } paramètres * les paramètres en trop sont ignorés * ceux manquant sont

jet:creating_variables

Anonymous (anonymous@undisclosed.example.com) — 2016-01-10T19:54:39+00:00

<- Where to write your JavaScriptWorking with conditional code -> Variable (espace en mémoire) = identifier + valeur + type Créer une variable var identifier; Peut contenir : * lettres * nombres * underscore _ * $ Mais ne doit pas commencer par un chiffre. assignation de valeur On utilise le signe =

jet:creating_your_first_javascript

Anonymous (anonymous@undisclosed.example.com) — 2015-11-29T23:34:30+00:00

<- Introduction to JavaScriptGetting to know the tools and applications ->

jet:getting_to_know_the_tools_and_applications

Anonymous (anonymous@undisclosed.example.com) — 2015-11-29T23:35:18+00:00

<- Creating your first JavaScriptUnderstanding the structure of JavaScript code ->

jet:going_through_a_debugging_session

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T21:03:11+00:00

<- Using FirebugAccessing form elements -> * on peut placer un breakpoint sur n'importe quelle ligne de code contenant une instruction (et non juste des brackets ou une ligne vide). * Le code pausera en arrivant dessus et proposeras plusieurs options/boutons : * rerun * continue (jusqu'au prochain breakpoint)

jet:hiding_and_showing_form_sections

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T21:47:23+00:00

<- Preventing a form from being submittedRemoving and applying CSS classes -> Best practices “progressive enhancement”. exemple donnée : un formulaire avec des éléments cachés par défaut grâce au js de cette manière quelqu'un sans js ne perds pas l'info ! On cache via element.style.display = “none”;

jet:introduction_to_javascript_event_handling

Anonymous (anonymous@undisclosed.example.com) — 2016-01-21T11:45:56+00:00

<- Creating DOM elementsWorking with onClick and onLoad events -> Les events sont déclenchés lors de la consultation de la page, lorsqu'un élément est cliqué, survolé, etc. On n'écrit donc pas les events mais les écouteurs (event handler/listener). Event names : * onload * onclick * onmouseover

jet:introduction_to_javascript_libraries

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T22:46:36+00:00

<- Using JavaScript code checkersLinking to multiple JavaScript files -> * Google closures library -> code.google.com/closure/library * MooTools -> mootools.net * YUI -> developer.yahoo.com/yui * dojo -> dojotoolkit.org * jquery -> jquery.com autres exemples : * lightbox2 * script.aculo.us * moo.fx

jet:introduction_to_javascript

Anonymous (anonymous@undisclosed.example.com) — 2015-11-29T23:31:56+00:00

Creating your first JavaScript -> What is a scripting language HTMLMarkup languagecontentCSSStyle sheet languagepresentationJavascriptProgramming languagebehaviour - can't access local files - can't directly access database - can't access hardware (USB, etc.) Javascript is a client-side language

jet:introduction_to_jquery

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T22:54:17+00:00

<- Linking to multiple JavaScript filesUsing a content distribution network to deliver JavaScript files -> ...

jet:introduction_to_regular_expressions

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T00:08:41+00:00

<- Knowing the JavaScript to avoidWorking with AJAX -> introduction aux expressions régulières Toujours deux parties : * créer l'expression régulière * l'appliquer à quelque chose afin de voir si cela correspond // étape 1: var myRE = /hello/; // or var myRE = new RegExp("hello"); //étape 2 var myString = "Does this sentence have the word hello in it?"; if ( myRE.test(myString) ) { alert(yes); }

jet:javascript_in_html5

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T23:30:27+00:00

<- Using a content distribution network to deliver JavaScript filesUsing Modernizr -> * video * audio * canvas * offline * form * drag and drop * geolocation * local storage * web workers -> multithreading feature detection != browser detection -> on teste si un objet existe

jet:knowing_the_javascript_to_avoid

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T23:59:03+00:00

<- Using Strict ModeIntroduction to regular expressions -> * document.write (only when document is loading) * browser sniffing : if(navigator.useragent.indexOf('Netscape“)/if(navigator.appName == 'Microsoft Internet Explorer'), etc. * eval * pseudo-protocols

jet:linking_to_multiple_javascript_files

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T22:49:57+00:00

<- Introduction to JavaScript librariesIntroduction to jQuery -> * un minimum d'appels vers du js externe * -> chacun est une requête en plus * -> bloque le process du code qui suit * -> une solution -> les combiner ! * l'ordre est important !

jet:minifying_your_code

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T22:30:20+00:00

<- Understanding JavaScript style Using JavaScript code checkers -> * réduit le poids du js * JSMin * YUI Compressor * Google Closure Compiler -> closure-compiler.appspot.com/home

jet:preventing_a_form_from_being_submitted

Anonymous (anonymous@undisclosed.example.com) — 2016-01-25T14:36:52+00:00

<- Accessing form elementsHiding and showing form sections -> On peut exécuter du code avant la soumission du formulaire voir empêcher sa soumission en utilisant un event handler onsubmit et en retournant true or false, false annulant la soumission des données. document.getElementById("form_id").onsubmit = function() { if (condition) { //code return false; // le formulaire ne sera pas soumis } else { // code return true; // le formulaire sera soumis }

jet:removing_and_applying_css_classes

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T21:56:26+00:00

<- Hiding and showing form sectionsChanging inline styles -> setting inline styles myElement.style. = “”; Attention : par exemple font-weight en CSS sera FontWeight en JS ! hyphen -> camelCase setting the class myElement.className = “”; myElement.className =

jet:resize

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T11:56:18+00:00

<- CountdownAccordion -> // détection de la taille, cross browser if (window.innerHeight) { width = window.innerWidth; } else if (document.documentElement && document.documentElement.clientHeight) { width = document.documentElement.clientHeight; } else if (document.body) { width = document.body.clientWidth; }

jet:sending_messages_to_the_console

Anonymous (anonymous@undisclosed.example.com) — 2016-01-13T00:42:59+00:00

<- Working with operatorsWorking with loops -> console.log("str"); >> str console.log(foo); >> foo console.log(foo, bar); >> foo bar (Pas une partie officielle de js mais souvent implémentée) console.debug(); // la même ? console.info(); // la même avec icône info en plus console.warn(); // encore la même avec icône /!\ console.error(); //idem avec icone (x) + notif dans la status bar

jet:understanding_javascript_style

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T22:24:05+00:00

<- Changing inline stylesMinifying your code -> Votre code doit être lisible. Votre code devrait être constant (consistent). Vous devriez connaître les conventions/bonnes pratiques (accepted best practices). conventions de nommage * CamelCase (Yahoo/Google/jQuery style guides/Dom methods)

jet:understanding_the_structure_of_javascript_code

Anonymous (anonymous@undisclosed.example.com) — 2016-01-10T19:09:36+00:00

<- Getting to know the tools and applicationsWhere to write your JavaScript -> * JS -> langage interprété et non compilé. * sensible à la casse * insensibles aux whitespaces * chaque statement finit par un ; * Ne pas oublier le ; ! peut donner des résultats non voulus sinon ! * un statement peut être split

jet:using_a_content_distribution_network_to_deliver_javascript_files

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T23:08:25+00:00

<- Introduction to jQueryJavaScript in HTML5 -> * improved speed/redundancy * improved bandwidth * improved parallel download (les navigateurs imposent une limite par domaine, d'où l'usage par ex de lmde.fr pour lemonde, ça permet de lancer d'autres requêtes. * cache Pour voir d'autres librairies sur des cdn : code.google.com/apis/libraries

jet:using_firebug

Anonymous (anonymous@undisclosed.example.com) — 2016-01-21T13:02:32+00:00

<- Common JavaScript errorsGoing through a debugging session -> Intéressant -> DOM ! Script panel -> intéressant aussi !

jet:using_javascript_code_checkers

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T22:38:59+00:00

<- Minifying your codeIntroduction to JavaScript libraries -> JScode quality checker -> jslint (le plus connu) jslint.com Options intéressantes : assume a browser, assume no use strict pour virer des erreurs.

jet:using_modernizr

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T23:35:49+00:00

<- JavaScript in HTML5Using Strict Mode -> * À placer dans le head. * pas un polyfill if (Modernizer.video) { //yes - html5 video } else { // no, flash maybe ? }

jet:using_strict_mode

Anonymous (anonymous@undisclosed.example.com) — 2016-01-24T23:49:16+00:00

<- Using ModernizrKnowing the JavaScript to avoid -> Strict mode -> ECMAScript 5 "use strict"; function fun(){ "use strict"; // code } * déclaration avec var obligatoire * faire attention si on utilise le mode strict à si l'on utilise du code (librairie) peut-être pas en mode strict

jet:what_is_the_dom

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T16:58:51+00:00

<- Working with objectsWorking with nodes and elements -> Qu'est-ce que le DOM ? * -> Document Object Model * -> Structure en arbre, avec des nodes, child nodes, parent nodes... * Le “modèle” est un ensemble de termes décrivant la représentation du document Document“web page”Object“

jet:where_to_go_from_here

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T18:29:12+00:00

<- accordionGoodbye -> Faire très attention avec le javascript car il est facile de trouver de très mauvaises informations. Bien : * Mozilla Developer Network * dev.opera.com * jquery.com * developer.yahoo.com/javascript * developer.yahoo.com/performance

jet:where_to_write_your_javascript

Anonymous (anonymous@undisclosed.example.com) — 2016-01-10T19:33:24+00:00

<- Understanding the structure of JavaScript codeCreating variables -> Où mettre le javascript * inline javascript -> Dans le html * dans des fichiers javascript à propos du tag L'attribut type peut officiellement avoir pour valeur :

jet:working_with_ajax

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T00:29:51+00:00

<- Introduction to regular expressionsWorking with objects and prototypes -> AJAX = Asynchronous Javascript and XML XML = not required AJAX == JavaScript * Créer une requête * Gérer la réponse // 1. créer la requête var myRequest = new XMLHttpRequest(); // En vrai on vérifie d'abord que c'est possible : var myRequest; if (window.XMLHttpRequest) { var myRequest = new XMLHttpRequest(); } else if (winow.ActiveXObject) { // IE myRequest = new ActiveXObject("Microsoft.XMLHTTP"); } // 2. …

jet:working_with_arrays

Anonymous (anonymous@undisclosed.example.com) — 2016-01-19T18:45:38+00:00

<- Creating functionsWorking with numbers -> Arrays var name = []; var name = new Array(); // idem var name = Array(); // idem var name = Array(); name[] = value; var name = [0,1,"value",...] Arrays -> dynamiques Propriétés * name.length Méthodes * name.reverse();

jet:working_with_conditional_code

Anonymous (anonymous@undisclosed.example.com) — 2016-01-10T20:26:08+00:00

<- Creating variablesWorking with operators -> vocabulaire () = parentheses [] = brackets {} = braces : définissent un “code block” Structures conditionnelles if else // syntaxe if ( condition ) { // code } else if { // code } else { // code } La condition doit être évaluée en true or false (ndr : ou en truthy et falsy)

jet:working_with_dates

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T00:30:38+00:00

<- Working with stringsWorking with objects -> var today = new Date(); // pas de paramètre = date et heure actuelle // année, mois, jour var y2k = new Date(2000,0,1); // année, mois, jour, heure, minute, seconde var y2k = new Date(2000,0,1,0,0,0); méthodes * getMonth() * getFullYear();

jet:working_with_loops

Anonymous (anonymous@undisclosed.example.com) — 2016-01-13T01:15:07+00:00

<- Sending messages to the consoleCreating functions -> while while (condition) { // code } do ... while do { // code } while (condition); Sera exécuté au moins une fois, toujours. for for (setup index;check condition;increment index){ // code } for (var i=0;i<10;i++){ // code }

jet:working_with_nodes_and_elements

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T17:31:29+00:00

<- What is the DOMAccessing DOM elements -> nodes et éléments * elements * element attributes node types 12 types : * Node.ELEMENT_NODE == 1 -> node élément * Node.ATTRIBUTE_NODE == 2 -> node attribut * Node.TEXT_NODE == 3 -> node texte (contenu) * Node.CDATA_SECTION_NODE == 4

jet:working_with_numbers

Anonymous (anonymous@undisclosed.example.com) — 2016-01-19T23:57:22+00:00

<- Working with arraysWorking with strings -> Numbers - Pas d'interger, long, float, etc. : En js tous les nombres sont représentés par des 64bits floating point numbers. addition vs. concaténation var foo = 5; var bar = 5; console.log(foo+bar); //10 var foo = "5"; var bar = "5"; console.log(foo+bar); // "55" var foo = 5; var bar = "5"; console.log(foo+bar); // "55" var foo = "5"; var bar = "b"; console.log(foo * bar); // NaN

jet:working_with_objects_and_prototypes

Anonymous (anonymous@undisclosed.example.com) — 2016-01-26T00:50:19+00:00

<- Working with AJAXCountdown -> Déclarer des objets en général var today = new Date(); var tableau = new array(); var RE = new RegExp("he..o"); aussi var my_player = { name: "José", score: 1000, rank: 1 }; // nouvelle propriété my_player.gameType = "MEUPORG"; // nouvelle méthode my_player.log_score = function(){ console.log(this.score); }

jet:working_with_objects

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T00:40:53+00:00

<- Working with datesWhat is the DOM -> var player = new Object(); player.name = "Bazounga"; player.score = 1000 player.rank = 1; shorthand var player1 = { name:"Bazounga", score:1000, rank:1 }; console.log(player.name); // "Bazounga"; function fn(){console.log(this.name;);}; player1.my_fn = fn;

jet:working_with_onblur_and_onfocus_events

Anonymous (anonymous@undisclosed.example.com) — 2016-01-21T12:35:00+00:00

<- Working with onClick and onLoad eventsWorking with timers -> * input a le focus -> onfocus event * input perd le focus -> onblur event

jet:working_with_onclick_and_onload_events

Anonymous (anonymous@undisclosed.example.com) — 2016-01-21T12:30:22+00:00

<- Introduction to JavaScript event handlingWorking with onBlur and onFocus events -> Mettre le lien vers le js avant la balise -> garantit que tout le html est chargé avant que le js soit lu. onload function ecouteurs() { var element = document.getElementById("Id"); element.onclick = function() { // code } // etc. } window.onload = function() { //code ecouteurs(); }

jet:working_with_operators

Anonymous (anonymous@undisclosed.example.com) — 2016-01-13T00:28:47+00:00

<- Working with conditional code Sending messages to the console -> Opérateurs et expressions opérateurs arithmétiques * + * - * * * / Raccourci : * += * -= * *= * /= operator precedence * = / > + = - égalité * = assignement * == égalité * === égalité strict (même valeur, même type, pas juste égaux mais identiques !)

jet:working_with_strings

Anonymous (anonymous@undisclosed.example.com) — 2016-01-20T00:19:01+00:00

<- Working with numbersWorking with dates -> quotes var phrase_ok = "ça c'est ok."; var phrase_pas_ok = 'ça c'est pas ok'; var phrase_ok = "ça c'est \"ok\"."; var phrase_pas_ok = "ça c'est pas "ok""; propriétés Strings sont des objets avec des propriétés, méthodes. Peuvent dans une certaine mesure être traités comme des Arrays de characters.

jet:working_with_timers

Anonymous (anonymous@undisclosed.example.com) — 2016-01-21T12:43:59+00:00

<- Working with onBlur and onFocus eventsCommon JavaScript errors -> setTimeout setTimeout(,) : appelle la au bout de . setInterval setInterval(,) : appelle la tous les . clearInterval var intervalHandle = setInterval(,); // setInterval renvoi une référence; clearInterval(intervalHandle); // qui nous permet de stopper la boucle.