diff --git a/javascript/base/api-dom-1.md b/javascript/base/api-dom-1.md new file mode 100644 index 0000000..31a3d81 --- /dev/null +++ b/javascript/base/api-dom-1.md @@ -0,0 +1,11 @@ +# .cadoles-slide-title[API du DOM (1/4)] + +.cadoles-list[ + +- Le DOM + - Sélection des éléments + - Manipulation et création des éléments + - Gestion des évènements +- XMLHttpRequest + +] diff --git a/javascript/base/api-dom-2.md b/javascript/base/api-dom-2.md new file mode 100644 index 0000000..2a5af9e --- /dev/null +++ b/javascript/base/api-dom-2.md @@ -0,0 +1,34 @@ +# .cadoles-slide-title[API du DOM (2/4)] + +**Sélection des éléments du DOM** +```html + + + + +
+ + +
+ + +``` +```js +document.head // -> ... +document.body // -> ... +document.body.children // -> [
...
] +document.body.parentElement // -> ... + +document.getElementById('my-container'); // ->
...
+document.querySelector('.my-list') // -> +document.querySelectorAll('.my-list') +// -> [, ] +``` diff --git a/javascript/base/api-dom-3.md b/javascript/base/api-dom-3.md new file mode 100644 index 0000000..decd604 --- /dev/null +++ b/javascript/base/api-dom-3.md @@ -0,0 +1,20 @@ +# .cadoles-slide-title[API du DOM (3/4)] + +**Création, modification, ajout et suppression d'éléments** +```js + +// Création d'un nouvel élément +var myDiv = document.createElement('div'); + +// Modification du contenu de l'élément +myDiv.innerHTML = ''; + +// Manipulation des attributs +myDiv.className = 'my-class'; +myDiv.classList.add('my-other-class'); +myDiv.classList.remove('my-class'); + +// Ajout/suppression du DOM +document.body.appendChild(myDiv); +document.body.removeChild(myDiv); +``` diff --git a/javascript/base/api-dom-4.md b/javascript/base/api-dom-4.md new file mode 100644 index 0000000..38f623c --- /dev/null +++ b/javascript/base/api-dom-4.md @@ -0,0 +1,31 @@ +# .cadoles-slide-title[API du DOM (4/4)] + +**Gestion des évènements** + +```html + + + + + + + +``` +```js +var myButton = document.getElementById('my-button'); + +// Méthode classique via les attributs (voir HTML) +function myButtonClickHandler(evt) { + console.log(evt); +} + +// Enlever le listener +myButton.onClick = null; + +// via addEventListener + +myButton.addEventListener('click', myButtonClickHandler); + +// Enlever le listener +myButton.removeEventListener('click', myButtonClickHandler); +``` diff --git a/javascript/base/ecosysteme-1.md b/javascript/base/ecosysteme-1.md new file mode 100644 index 0000000..b590444 --- /dev/null +++ b/javascript/base/ecosysteme-1.md @@ -0,0 +1,13 @@ +# .cadoles-slide-title[Écosystème (1/7)] + +.cadoles-list[ + +- Outils de débogage + - Console du navigateur + - Tests unitaires + - Linting + - `"use strict";` +- Gestionnaires de paquets +- Pipeline d'intégration + +] diff --git a/javascript/base/ecosysteme-2.md b/javascript/base/ecosysteme-2.md new file mode 100644 index 0000000..0a01226 --- /dev/null +++ b/javascript/base/ecosysteme-2.md @@ -0,0 +1,9 @@ +# .cadoles-slide-title[Écosystème (2/7)] + +### Console du navigateur + +.cadoles-center[ +**Veuillez ouvrir votre navigateur et appuyer sur "F12"** +] + + diff --git a/javascript/base/ecosysteme-3.md b/javascript/base/ecosysteme-3.md new file mode 100644 index 0000000..3a883bb --- /dev/null +++ b/javascript/base/ecosysteme-3.md @@ -0,0 +1,29 @@ +# .cadoles-slide-title[Écosystème (3/7)] + +**Les tests unitaires** + +Différentes librairies, différents styles... + +[NodeUnit](https://github.com/caolan/nodeunit) +```js +this.MathSuite = { + + 'should return the square root of 8': function(test) { + test.ok( Math.sqrt(4) === 2, 'It should return 2 !'); + test.done(); + } + +}; +``` + +[Jasmine](https://jasmine.github.io/) +```js +describe('Math', function() { + + it('should return the square root of 8', function(done) { + expect( Math.sqrt(4) ).toBe(2); + done(); + }); + +}); +``` diff --git a/javascript/base/ecosysteme-4.md b/javascript/base/ecosysteme-4.md new file mode 100644 index 0000000..2c288e7 --- /dev/null +++ b/javascript/base/ecosysteme-4.md @@ -0,0 +1,10 @@ +# .cadoles-slide-title[Écosystème (4/7)] + +**Linting** + +- Permet de s'assurer que le code respecte les conventions communes de l'équipe. +- Évite certaines erreurs d'étourderie qui peuvent passer inaperçues et être couteuses lors de la mise en production du code. + +.cadoles-center[ +### [JSHint](http://jshint.com/) +] diff --git a/javascript/base/ecosysteme-5.md b/javascript/base/ecosysteme-5.md new file mode 100644 index 0000000..86bd07f --- /dev/null +++ b/javascript/base/ecosysteme-5.md @@ -0,0 +1,25 @@ +# .cadoles-slide-title[Écosystème (5/7)] + +**`"use strict";`** +- Apparu avec la norme HTML5 +- Permet d'indiquer à l'interpréteur que l'on veut fonctionner en mode "strict", et ainsi délaisser certaines fonctionnalités pièges +- S'applique uniquement au contexte courant et aux différents sous contextes + +```js + // Mode non strict + + (function() { + + "use strict"; // Mode strict + + foo = "bar"; // -> Erreur + + var obj = { + prop1: "val1", + prop1: "val2" // -> Erreur + }; + + eval('console.log("test");'); // -> Erreur + + }()); +``` diff --git a/javascript/base/ecosysteme-6.md b/javascript/base/ecosysteme-6.md new file mode 100644 index 0000000..621b3d2 --- /dev/null +++ b/javascript/base/ecosysteme-6.md @@ -0,0 +1,19 @@ +# .cadoles-slide-title[Écosystème (6/7)] + +**Gestionnaires de paquets** + +**Pourquoi faire ?** +- Permet de gérer ses dépendances sans surcharger sa base de code +- Permet de publier simplement son code source et de le diffuser +- Approche "locale" par défaut (_on ne laisse pas trainer ses jouets_) +- Différents gestionnaires de paquets pour différents besoins et différentes contraintes + +**Les deux principaux à ce jour:** + + - [NPM](https://www.npmjs.com/) Gestionnaire de paquets par défaut de NodeJS + - [Bower](http://bower.io/) Gestionnaire de paquets plutôt orienté navigateur + +.cadoles-center[ + + +] diff --git a/javascript/base/ecosysteme-7.md b/javascript/base/ecosysteme-7.md new file mode 100644 index 0000000..0a56997 --- /dev/null +++ b/javascript/base/ecosysteme-7.md @@ -0,0 +1,18 @@ +# .cadoles-slide-title[Écosystème (7/7)] + +**Pipeline d'intégration** + +**Pourquoi faire ?** +- Gérer la minification/concaténation des scripts +- Gérer le processus de livraison du code +- Gérer le lancement des tests unitaires ou fonctionnels + +**Les deux "concurrents" actuels:** + +- [Gulp](http://gulpjs.com/), approche impérative/"stream" +- [Grunt](http://gruntjs.com/), approche déclarative + +.cadoles-center[ + + +] diff --git a/javascript/base/es6-1.md b/javascript/base/es6-1.md new file mode 100644 index 0000000..67031e4 --- /dev/null +++ b/javascript/base/es6-1.md @@ -0,0 +1,8 @@ +# .cadoles-slide-title[Le futur (proche): ES6 (1/4)] + +.cadoles-list[ +- Prochaine spécification ECMAScript +- Prévu pour la mi 2015 +- Beaucoup de nouveautés et de nouvelles fonctionnalités +- Déjà utilisable aujourd'hui grâce à différents "transpileurs" ([Babel](https://babeljs.io/), [Traceur](https://github.com/google/traceur-compiler)) +] diff --git a/javascript/base/es6-2.md b/javascript/base/es6-2.md new file mode 100644 index 0000000..1eb0f71 --- /dev/null +++ b/javascript/base/es6-2.md @@ -0,0 +1,25 @@ +# .cadoles-slide-title[Le futur (proche): ES6 (2/4)] + +**Écriture simplifiée des classes** + +```js +class Animal { + + constructor(hasFur) { + this.hasFur = hasFur; + } + +} + +class Dog extends Animal { + + constructor() { + super(true); + } + + bark() { + console.log('Woaf !'); + } + +} +``` diff --git a/javascript/base/es6-3.md b/javascript/base/es6-3.md new file mode 100644 index 0000000..749bc53 --- /dev/null +++ b/javascript/base/es6-3.md @@ -0,0 +1,29 @@ +# .cadoles-slide-title[Le futur (proche): ES6 (3/4)] + +**Valeur par défaut et gestion des arguments dynamiques simplifiée** + +```js +// Valeur par défaut + +function defaultValue(x, y=12) { + console.log(x + y); +} + +defaultValue(1); // -> 13 + +// "Reste" + +function rest(x, ...y) { // y est un tableau contenant le reste des arguments + return x * y.length; +} + +// "Décomposition" + +var arr = [1, 2, 3]; + +function decompose(a, b, c) { + console.log(a, b, c); +} + +decompose(...arr); // -> 1 2 3 +``` diff --git a/javascript/base/es6-4.md b/javascript/base/es6-4.md new file mode 100644 index 0000000..ce3ae8a --- /dev/null +++ b/javascript/base/es6-4.md @@ -0,0 +1,12 @@ +# .cadoles-slide-title[Le futur (proche): ES6 (4/4)] + +**Et plein d'autres...** + +- Générateurs ( `yield` ) +- Constantes +- Templating des chaines de caractères +- Symboles +- Promises +- Notation concise ( `(x, y) -> x+y;` ) pour les fonctions anonymes +- Déstructuration d'objets +- ... diff --git a/javascript/base/img/bower-logo.png b/javascript/base/img/bower-logo.png new file mode 100644 index 0000000..41d1e72 Binary files /dev/null and b/javascript/base/img/bower-logo.png differ diff --git a/javascript/base/img/console.png b/javascript/base/img/console.png new file mode 100644 index 0000000..83659ce Binary files /dev/null and b/javascript/base/img/console.png differ diff --git a/javascript/base/img/grunt-logo.svg b/javascript/base/img/grunt-logo.svg new file mode 100644 index 0000000..d0181e1 --- /dev/null +++ b/javascript/base/img/grunt-logo.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/base/img/gulp-2x.png b/javascript/base/img/gulp-2x.png new file mode 100644 index 0000000..2c2ccbe Binary files /dev/null and b/javascript/base/img/gulp-2x.png differ diff --git a/javascript/base/img/jshint-dark.png b/javascript/base/img/jshint-dark.png new file mode 100644 index 0000000..3b71204 Binary files /dev/null and b/javascript/base/img/jshint-dark.png differ diff --git a/javascript/base/img/npm-logo.svg b/javascript/base/img/npm-logo.svg new file mode 100644 index 0000000..4330983 --- /dev/null +++ b/javascript/base/img/npm-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/javascript/base/img/vanilla.png b/javascript/base/img/vanilla.png new file mode 100644 index 0000000..3f45426 Binary files /dev/null and b/javascript/base/img/vanilla.png differ diff --git a/javascript/base/index.html b/javascript/base/index.html index 303b61a..3257bf6 100644 --- a/javascript/base/index.html +++ b/javascript/base/index.html @@ -47,7 +47,26 @@ 'modularisation-4', 'modularisation-5', 'modularisation-6', - 'modularisation-7' + 'modularisation-7', + 'modularisation-8', + 'ecosysteme-1', + 'ecosysteme-2', + 'ecosysteme-3', + 'ecosysteme-4', + 'ecosysteme-5', + 'ecosysteme-6', + 'ecosysteme-7', + 'api-dom-1', + 'api-dom-2', + 'api-dom-3', + 'api-dom-4', + 'mise-en-pratique', + 'es6-1', + 'es6-2', + 'es6-3', + 'es6-4', + 'questions', + 'licence' ]; var slideshow = remark.create({ @@ -64,5 +83,21 @@ }; + + diff --git a/javascript/base/licence.md b/javascript/base/licence.md new file mode 100644 index 0000000..67af496 --- /dev/null +++ b/javascript/base/licence.md @@ -0,0 +1,12 @@ +# .cadoles-slide-title[Licence] + +Cette œuvre est mise à disposition sous licence [cc-by-nc-sa-2.0](http://creativecommons.org/licenses/by-nc-sa/2.0/fr/) + +- Attribution +- Pas d’Utilisation Commerciale +- Partage dans les Mêmes Conditions 2.0 +- France + +Pour voir une copie de cette licence, visitez http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ +ou écrivez à Creative Commons, 444 Castro Street, Suite 900, +Mountain View, California, 94041, USA. diff --git a/javascript/base/mise-en-pratique.md b/javascript/base/mise-en-pratique.md new file mode 100644 index 0000000..561fea0 --- /dev/null +++ b/javascript/base/mise-en-pratique.md @@ -0,0 +1,14 @@ +# .cadoles-slide-title[Mise en pratique] + + + +.cadoles-center[ +### .vanillatodos[ VanillaTodos ] + +] + +.cadoles-center[ + _Assuré 100% sans dépendances !_ +] diff --git a/javascript/base/modularisation-1.md b/javascript/base/modularisation-1.md index 83b4a90..321f493 100644 --- a/javascript/base/modularisation-1.md +++ b/javascript/base/modularisation-1.md @@ -1,9 +1,8 @@ -# .cadoles-slide-title[Modularisation (1/6)] +# .cadoles-slide-title[Modularisation (1/8)] .cadoles-list[ - État des lieux - Variable globale et S.E.A.F. - Format "AMD" - CommonJS -- Modules ES6 ] diff --git a/javascript/base/modularisation-2.md b/javascript/base/modularisation-2.md index c97f0e7..7705635 100644 --- a/javascript/base/modularisation-2.md +++ b/javascript/base/modularisation-2.md @@ -1,4 +1,4 @@ -# .cadoles-slide-title[Modularisation (2/6)] +# .cadoles-slide-title[Modularisation (2/8)] .cadoles-list[ - Javascript (jusqu'à ES6) n'intègre pas de mécanisme particulier afin de modulariser le code. diff --git a/javascript/base/modularisation-3.md b/javascript/base/modularisation-3.md index b9b8889..565e38d 100644 --- a/javascript/base/modularisation-3.md +++ b/javascript/base/modularisation-3.md @@ -1,8 +1,8 @@ -# .cadoles-slide-title[Modularisation (3/6)] +# .cadoles-slide-title[Modularisation (3/8)] -**Variable global et S.E.A.F.** +**Variable global et SEAF** -> **S.E.A.F.:** _Self Executable Anonymous Function_ +> **SEAF:** _Self Executable Anonymous Function_ ```js (function(MyModule) { diff --git a/javascript/base/modularisation-4.md b/javascript/base/modularisation-4.md index dec2887..7c98582 100644 --- a/javascript/base/modularisation-4.md +++ b/javascript/base/modularisation-4.md @@ -1,4 +1,4 @@ -# .cadoles-slide-title[Modularisation (4/6)] +# .cadoles-slide-title[Modularisation (4/8)] **Avantages** - Simple à mettre en place, méthode très répandue (ex: jQuery) diff --git a/javascript/base/modularisation-5.md b/javascript/base/modularisation-5.md index 4d912d5..64754f5 100644 --- a/javascript/base/modularisation-5.md +++ b/javascript/base/modularisation-5.md @@ -1,4 +1,4 @@ -# .cadoles-slide-title[Modularisation (5/6)] +# .cadoles-slide-title[Modularisation (5/8)] **Format AMD** diff --git a/javascript/base/modularisation-6.md b/javascript/base/modularisation-6.md index 59b6dc7..f9be356 100644 --- a/javascript/base/modularisation-6.md +++ b/javascript/base/modularisation-6.md @@ -1,9 +1,9 @@ -# .cadoles-slide-title[Modularisation (6/6)] +# .cadoles-slide-title[Modularisation (6/8)] **Avantages** - Gestion et injection des dépendances - Inter-opérable avec les autres méthodes de modularisation via configuration -- Véritable [spécification](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), de nombreux "loaders" compatibles existent +- Véritable [spécification](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), de nombreux "loaders" (Exemple: [requirejs](http://requirejs.org/)) compatibles existent - "Lazy-loading" possible de certaines parties du code - Possibilité de charger des ressources autres que du Javascript via un mécanisme de plugin (ressources type texte, templates, etc...) diff --git a/javascript/base/modularisation-7.md b/javascript/base/modularisation-7.md index 3854029..e4b3696 100644 --- a/javascript/base/modularisation-7.md +++ b/javascript/base/modularisation-7.md @@ -1,4 +1,4 @@ -# .cadoles-slide-title[Modularisation (7/6)] +# .cadoles-slide-title[Modularisation (7/8)] **CommonJS** ```js @@ -24,4 +24,12 @@ exports.myPublicFunc = function() { var myModuleA = require('./myModuleA'); myModuleA.myPublicFunc(); +myPublicApi = { + myPublicFunc: function() { + console.log('Fonction publique !'); + } +}; + +module.exports = myPublicApi; + ``` diff --git a/javascript/base/modularisation-8.md b/javascript/base/modularisation-8.md new file mode 100644 index 0000000..3e49217 --- /dev/null +++ b/javascript/base/modularisation-8.md @@ -0,0 +1,10 @@ +# .cadoles-slide-title[Modularisation (8/8)] + +**Avantages** +- Gestion des dépendances +- Mécanismes simples +- Véritable [spécification](http://www.commonjs.org/specs/modules/1.0/) +- Isolation par défaut des modules + +**Désavantages** +- Conçu initialement pour le Javascript côté serveur (chargement synchrone des dépendances), nécessite d'être transformé par des outils comme [Browserify](http://browserify.org/) ou chargé par des "loaders" comme [SystemJS](https://github.com/systemjs/systemjs) afin d'être utilisé dans le navigateur. diff --git a/javascript/base/plan.md b/javascript/base/plan.md index a7db613..b4ef4ee 100644 --- a/javascript/base/plan.md +++ b/javascript/base/plan.md @@ -2,12 +2,14 @@ .cadoles-list[ -- Historique +- Historique et état des lieux - Le langage - Le modèle objet - Modularisation - L'écosystème Javascript -- Les alternatives +- API du DOM +- Mise en pratique: VanillaTodos +- ES6: le futur (proche) ] @@ -28,7 +30,6 @@ - Variable globale - AMD - CommonJS - - Modules ES6 - L'écosystème Javascript - Outils de debug - Console de débogage @@ -39,8 +40,10 @@ - Pipeline d'intégration - Grunt - Gulp -- Les alternatives - - CoffeeScript - - Dart - - TypeScript - - Haxe +- API du DOM + - Sélection des éléments + - Manipulation et création des éléments + - Gestion des évènements + - XMLHttpRequest +- Mise en pratique: VanillaTodos +- Le futur (proche): ES6 diff --git a/javascript/base/questions.md b/javascript/base/questions.md new file mode 100644 index 0000000..749f54f --- /dev/null +++ b/javascript/base/questions.md @@ -0,0 +1,5 @@ +# .cadoles-slide-title[end();] + +.cadoles-center[ +## Des questions ? +] diff --git a/javascript/cadoles-theme.css b/javascript/cadoles-theme.css index 922f5c7..54a028b 100644 --- a/javascript/cadoles-theme.css +++ b/javascript/cadoles-theme.css @@ -1,4 +1,16 @@ /* Thème Cadoles */ +a { + color: #3080AF; + text-decoration: none; +} + +a::before { + content: '['; +} + +a::after { + content: ']'; +} ul { list-style: none; @@ -6,7 +18,7 @@ ul { ul li:before { content: "\25B8 "; - color: #5379B4; + color: #3080AF; margin-right: 5px; } @@ -54,6 +66,28 @@ ul > li { .cadoles-blue { color: #5379B4; } .cadoles-clearfix { clear: both; } .cadoles-list > ul { font-size: 1.5em; } -.cadoles-list > ul ul { font-size: 1em; } +.cadoles-list > ul ul { font-size: 0.8em; } .cadoles-small { font-size: 0.8em; } .cadoles-xs { font-size: 0.7em; } +.cadoles-center { text-align: center; } + +.cadoles-left-column { + display: inline-block; + width: 49%; + float: left; +} + +.cadoles-right-column { + display: inline-block; + width: 49%; + float: right; +} + +.cadoles-right-column:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +}