Cadoles
/
formations
18
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ajout slides supplémentaires formation JS

This commit is contained in:
William Petit 2015-03-31 23:29:23 +02:00
parent 006c3f5a42
commit 5cf0c82685
36 changed files with 575 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
javascript/base/api-dom-1.md Normal file
View File

@ -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
]

34
javascript/base/api-dom-2.md Normal file
View File

@ -0,0 +1,34 @@
# .cadoles-slide-title[API du DOM (2/4)]
**Sélection des éléments du DOM**
```html
<html>
<head>
</head>
<body>
<div id="my-container">
<ul class="my-list first-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="my-list second-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
```
```js
document.head // -> <head>...</head>
document.body // -> <body>...</body>
document.body.children // -> [<div id="my-container">...</div>]
document.body.parentElement // -> <html>...</html>
document.getElementById('my-container'); // -> <div id="my-container-1">...</div>
document.querySelector('.my-list') // -> <ul class="my-list first-list">...</ul>
document.querySelectorAll('.my-list')
// -> [<ul class="my-list first-list">...</ul>, <ul class="my-list second-list">...</ul>]
```

20
javascript/base/api-dom-3.md Normal file
View File

@ -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 = '<ul><li>Item 1</li></ul>';
// 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);
```

31
javascript/base/api-dom-4.md Normal file
View File

@ -0,0 +1,31 @@
# .cadoles-slide-title[API du DOM (4/4)]
**Gestion des évènements**
```html
<html>
<head>
</head>
<body>
<button id="my-button" onclick="myButtonClickHandler()"></button>
</body>
</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);
```

13
javascript/base/ecosysteme-1.md Normal file
View File

@ -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
]

9
javascript/base/ecosysteme-2.md Normal file
View File

@ -0,0 +1,9 @@
# .cadoles-slide-title[Écosystème (2/7)]
### Console du navigateur
.cadoles-center[
**Veuillez ouvrir votre navigateur et appuyer sur "F12"**
]
<img src="./img/console.png" style="max-width: 100%" />

29
javascript/base/ecosysteme-3.md Normal file
View File

@ -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();
});
});
```

10
javascript/base/ecosysteme-4.md Normal file
View File

@ -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/)
]

25
javascript/base/ecosysteme-5.md Normal file
View File

@ -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
}());
```

19
javascript/base/ecosysteme-6.md Normal file
View File

@ -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[
<img src="img/npm-logo.svg" style="display:inline-block;max-width: 49%; max-height: 80px;margin-right:20px" />
<img src="img/bower-logo.png" style="display:inline-block;max-width: 49%; max-height: 80px;" />
]

18
javascript/base/ecosysteme-7.md Normal file
View File

@ -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[
<img src="img/grunt-logo.svg" style="display:inline-block;max-width: 49%; max-height: 80px;margin-right:20px" />
<img src="img/gulp-2x.png" style="display:inline-block;max-width: 49%; max-height: 80px;" />
]

8
javascript/base/es6-1.md Normal file
View File

@ -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))
]

25
javascript/base/es6-2.md Normal file
View File

@ -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 !');
}
}
```

29
javascript/base/es6-3.md Normal file
View File

@ -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
```

12
javascript/base/es6-4.md Normal file
View File

@ -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
- ...

BIN
javascript/base/img/bower-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
javascript/base/img/console.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

139
javascript/base/img/grunt-logo.svg Normal file
View File

@ -0,0 +1,139 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="360px" height="424px" viewBox="0 0 360 424" enable-background="new 0 0 360 424" xml:space="preserve">
<g id="Layer_2" display="none">
<g id="O3btSA_1_" display="inline">
<image overflow="visible" enable-background="new " width="190" height="225" id="O3btSA_2_" xlink:href="9AEA89CAF88516A3.jpeg" transform="matrix(1.8929 0 0 1.8844 0.1777 -0.7471)">
</image>
</g>
</g>
<g id="Layer_1_1_">
<g>
<path fill="#FBA919" d="M67.892,81.419c0,0,5.737,22.127,6.555,29.504c0.821,7.375-14.751,23.765-14.751,31.961 c0,8.196,3.274,22.947,21.306,30.324c18.032,7.376,20.488,26.224,20.488,37.7c0,11.473-6.555,33.598-6.555,33.598 s-4.096,54.908,18.029,64.742c22.125,9.833,17.21,9.833,22.125,9.833c4.916,0,40.977,14.755,62.283,9.018 c21.308-5.737,27.041-12.292,27.041-12.292s21.31,1.637,27.865-17.214c6.559-18.847,10.654-58.183,8.195-76.214 c-2.459-18.032-5.736-41.794,9.014-49.991c14.755-8.196,30.324-18.027,27.865-26.224c-2.459-8.196-15.568-19.67-15.568-19.67 s-3.279-20.486-0.822-25.404c2.457-4.917,17.21-17.213,9.014-26.226c-8.191-9.014-22.947-9.014-22.947-9.014l-18.847,1.637 c0,0-31.961-28.682-73.757-27.043c-41.794,1.639-68.021,27.043-68.021,27.043s-13.93-4.917-26.224,0 C67.886,72.406,65.435,67.486,67.892,81.419z"/>
<path fill="#E78724" d="M142.775,203.437c0,0-16.229,24.815-28.133,42.425c-1.842,2.724,11.904,2.913,11.904,2.913 L142.775,203.437z"/>
<path fill="#E78724" d="M150.502,151.989c0,0-4.892,12.205-7.572,18.675c-2.909,7.034-14,10.533-14,10.533 s5.749-6.03,5.749-21.306c0-6.409,8.274-8.957,8.274-8.957L150.502,151.989z"/>
<path fill="#E78724" d="M145.56,158.89c0,0-10.023,11.931-28.633,5.249c-18.614-6.68-20.522-30.545-20.522-37.227 c0-6.682,35.317,6.682,40.091,9.546S150.332,150.775,145.56,158.89z"/>
<path fill="#E78724" d="M75.261,31.399c0,0,17.18-3.343,28.633,5.726c11.458,9.067,14.794,16.228,14.794,16.228L99.383,68.656 c0,0-9.328-4.325-12.192-16.735C84.328,39.512,86.237,33.786,75.261,31.399z"/>
<path fill="#E78724" d="M140.549,124.427c-7.397-10.5-19.587-15.08-29.32-15.839c-16.596-1.298-24.475,4.569-24.475,4.569 s27.18,1.151,35.014,11.44c14.584,19.15,35.86,20.706,39.262,16.5c-3.934,0.196-8.262-1.753-12.894-6.133 C145.242,132.224,142.896,127.76,140.549,124.427z"/>
<path fill="#E78724" d="M94.666,161.554c0,0-30.157-10.367-24.425-20.865c5.726-10.501,1.168-16.222,1.168-16.222 s-16.839,12.57-12.548,25.932c2.637,8.202,7.061,14.14,31.354,25.525c11.652,21.643,2.406,60.6,2.96,60.783 c0.923,0.307,16.36-7.63,15.306-44.077C108.16,181.438,107.265,166.159,94.666,161.554z"/>
<path fill="#E78724" d="M134.184,50.074c-12.645,6.424-29.968,15.37-29.968,15.37l6.818,3.411 c-0.651,1.054-0.965,1.683-0.965,1.683l6.998,3.182c0,0,17.083,12.375,27.55,20.331c-3.49-10.746-13.734-27.628-13.734-27.628 S127.98,58.666,134.184,50.074z"/>
<path fill="#E78724" d="M176.191,311.934c-38.866,0-52.031-19.731-52.031-19.731l6.074,14.791 c2.296,6.399,26.788,26.311,45.898,26.311"/>
<path fill="#E78724" d="M128.419,278.871c0,0,3.576,21.854,17.894,21.854c12.167,0,15.752-18.46,15.752-22.275L128.419,278.871z"/>
<path fill="#E78724" d="M104.592,245.912c1.272-3.502,5.726-17.66,7.157-30.545c1.715-15.432,1.09-38.003,1.09-38.003 s-3.82,14.795-7.161,17.186c-3.339,2.385-9.545,18.61-9.545,18.61s-3.324,24.156-4.906,32.275 C95.605,246.312,99.291,243.732,104.592,245.912z"/>
<path fill="#E78724" d="M70.016,150.162c0,0,8.111-2.866,10.5-20.522c2.385-17.66-2.866-32.932-2.866-32.932 s0.477,24.34-2.385,29.114c-2.866,4.771-5.249,6.203-8.592,12.409C63.33,144.438,68.104,148.252,70.016,150.162z"/>
<path fill="#87CCEE" d="M113.063,69.061"/>
<path fill="#FDC168" d="M79.701,35.576l-1.656-1.049C73.162,34.692,79.701,35.576,79.701,35.576z"/>
<path fill="#FBA919" d="M140.786,44.846c0,0-7.634-1.272-11.454-6.998c-3.82-5.728-14.636-17.184-31.879-17.312 c-17.242-0.129-34.301,4.583-34.301,4.583l14.891,9.409c1.575-0.051,4.329-0.03,8.883,0.122 c18.688,0.621,21.565,19.106,21.565,19.106l65.862-9.069"/>
<path fill="#FFFFFF" d="M147.151,146.942c0,0-8.91,8.91-22.593,6.044c-13.683-2.862-21.957-8.908-22.593-19.409 c-0.636-10.5,2.866-14.636,2.866-14.636s15.271,4.776,22.593,11.14C134.742,136.443,140.15,146.625,147.151,146.942z"/>
<path fill="#C9C9C9" d="M136.368,143.759c0,0-7.727,3.53-16.364,0.655c-11.306-3.771-12.059-15.529-12.059-15.529 s-6.936,20.354,12.51,24.272c15.597,3.142,24.821-5.896,24.821-5.896L136.368,143.759z"/>
<path fill="#463014" d="M145.249,257.84"/>
<path fill="#463014" d="M141.859,40.528c-0.831-17.456,13.479-31.359,18.437-31.951c0.274,2.958-0.276,14.496,4.681,18.044 C166.42,17.197,171.3,6.807,190.57,0c-4.127,10.946-0.551,20.115,1.152,24.365c13.159-11.944,22.025-9.97,22.025-9.97 s-9.143,15.777-5.567,26.129C181.764,38.453,141.988,43.331,141.859,40.528z"/>
<path fill="#463014" d="M85.857,67.117c-6.303-5.229-1.605-10.082-2.103-16.023c-0.271-3.161-0.521-6.144-1.563-7.789 c-5.8-9.159-19.483-11.938-19.62-11.967l-6.422-1.258l4.251-4.973c0.551-0.644,18.009-17.301,45.025-8.579 c18.898,6.095,32.888,26.763,33.409,27.598l-9.476,4.456c-0.111-0.176-11.171-19.603-27.384-24.831 c-13.106-4.229-25.185-0.206-30.359,2.431c5.5,2.196,12.691,6.195,17.024,13.036c2.044,3.231,2.389,7.299,2.722,11.238 c0.439,5.215,0.85,10.138,4.688,13.326L85.857,67.117z"/>
<path fill="#463014" d="M69.023,143.45c0,0,7.941-9.847,10.293-29.008c0.924-7.547-0.717-22.433-3.343-28.16 c0.477,14.079-3.102,28.16-3.102,28.16S70.458,140.586,69.023,143.45z"/>
<path fill="#463014" d="M110.896,57.172c-0.004-0.021-2.548-11.138-9.601-16.75c-9.949-7.914-22.097-3.704-22.214-3.667 l-1.764-5.449c0.588-0.191,14.473-4.566,27.269,4.429c12.873,9.046,14.418,17.246,14.552,18.152L110.896,57.172z"/>
<path fill="#463014" d="M93.964,136.388c0,0-4.166-5.964-3.417-12.523c0.373-3.239,1.874-6.564,4.554-7.744 c4.98-2.188,7.187,3.457,7.187,3.457S95.279,121.308,93.964,136.388z"/>
<path fill="#463014" d="M145.249,257.84"/>
<path fill="#463014" d="M139.707,145.478c0.174,0.325,0.263,0.507,0.263,0.507s-12.994,9.752-26.311-0.144 c-7.128-5.302-6.455-18.417-4.271-23.979c5.679,1.287,10.496,3.607,14.522,6.316c-5.088-4.541-9.542-7.884-9.53-7.961 l-5.783-1.637l-11.24-3.854c-0.144,0.857-4.244,20.074,7.59,33.168c5.245,5.806,29.835,18.808,41.51-3.424L139.707,145.478z"/>
<path fill="#463014" d="M138.49,146.907c7.316,11.135,25.775,4.772,25.457-7c0,0-12.334,6.807-23.231-5.726 c-6.362-7.317-26.748-27.492-54.394-20.787C105.414,117.592,130.689,135.035,138.49,146.907z"/>
<g>
<path fill="#463014" d="M145.249,257.84"/>
</g>
<path fill="#463014" d="M83.739,178.333c1.76,1.017,7.967,7.445,7.971,17.059c0,4.821-0.48,29.04-2.866,43.836 c3.589,2.332,6.089,2.828,9.663,5.205c1.789-17.136,3.072-41.972,2.474-51.998c-0.684-11.429-6.803-19.099-12.478-22.37 c-1.777-1.022-3.634-2.027-5.504-3.038c-9.72-5.252-19.771-10.685-19.771-19.962c0-7.257,2.821-9.527,5.808-11.933l0.322-0.261 c1.982-1.601,4.225-3.417,5.554-6.399c3.626-8.153,4.219-28.921,0-34.193c-2.103-2.627-7.738-11.461-6.118-17.397 c0.617-2.266,2.044-3.945,4.367-5.135c2.458-1.259,5.779-1.897,9.867-1.897c8.03,0,16.936,2.444,21.531,3.899 c16.419,5.204,36.231,20.208,41.91,24.683c0.163,0.125,0.259,0.198,0.276,0.21l3.634,2.527l-2.273-3.803 c-0.14-0.237-14.534-23.905-40.271-32.583c-5.007-1.688-14.844-4.521-24.511-4.521c-5.756,0-10.64,1.005-14.507,2.985 c-4.713,2.411-7.905,6.258-9.231,11.121c-3.25,11.921,7.335,25.194,7.696,25.618c1.234,2.203,1.757,18.206-1.094,24.611 c-0.392,0.884-1.467,1.753-2.828,2.851c-0.426,0.345-0.903,0.703-1.408,1.086c-4.022,3.036-10.104,7.623-10.104,18.196 c0,14.467,14.662,22.311,26.445,28.618C80.226,176.388,82.071,177.372,83.739,178.333z"/>
<g>
<g>
<path fill="#463014" d="M85.857,67.117c-6.303-5.229-1.605-10.082-2.103-16.023c-0.271-3.161-0.521-6.144-1.563-7.789 c-5.8-9.159-19.483-11.938-19.62-11.967l-6.422-1.258l4.251-4.973c0.551-0.644,18.009-17.301,45.025-8.579 c18.898,6.095,32.888,26.763,33.409,27.598l-9.476,4.456c-0.111-0.176-11.171-19.603-27.384-24.831 c-13.106-4.229-25.185-0.206-30.359,2.431c5.5,2.196,12.691,6.195,17.024,13.036c2.044,3.231,2.389,7.299,2.722,11.238 c0.439,5.215,0.85,10.138,4.688,13.326L85.857,67.117z"/>
</g>
<g>
<path fill="#463014" d="M85.652,68.188l-0.407-0.337c-4.674-3.879-3.845-7.7-3.042-11.397c0.365-1.706,0.75-3.47,0.594-5.279 c-0.255-3.042-0.5-5.912-1.416-7.361c-5.523-8.72-18.87-11.514-19.002-11.541L54.358,30.7l5.317-6.216 c0.097-0.116,11.306-11.431,30.29-11.431c5.175,0,10.477,0.861,15.752,2.565c19.724,6.36,33.795,27.789,33.928,28.001 l0.569,0.91l-11.209,5.272l-0.45-0.714c-1.206-2.056-11.834-19.583-26.869-24.433c-3.693-1.192-7.583-1.794-11.56-1.794 c-7.203,0-13.044,1.963-16.152,3.281c5.194,2.339,11.493,6.276,15.479,12.562c2.167,3.424,2.518,7.609,2.862,11.652 c0.422,5.028,0.821,9.756,4.348,12.684l1.331,1.104L85.652,68.188z"/>
</g>
</g>
<g>
<g>
<path fill="#463014" d="M110.896,57.172c-0.004-0.021-2.548-11.138-9.601-16.75c-9.949-7.914-22.097-3.704-22.214-3.667 l-1.764-5.449c0.588-0.191,14.473-4.566,27.269,4.429c12.873,9.046,14.418,17.246,14.552,18.152L110.896,57.172z"/>
</g>
<g>
<path fill="#463014" d="M110.212,58.472l-0.248-1.094c-0.026-0.107-2.521-10.844-9.266-16.207 c-3.844-3.061-8.48-4.615-13.771-4.615c-4.13,0-7.199,0.986-7.534,1.102l-0.912,0.303l-2.366-7.269l0.907-0.293 c0.407-0.129,4.092-1.278,9.305-1.278c6.877,0,13.379,2.018,18.811,5.832c13.195,9.273,14.806,17.848,14.944,18.794l0.116,0.748 L110.212,58.472z M86.928,34.65c5.652,0,10.829,1.738,14.961,5.024c5.989,4.77,8.806,13.191,9.658,16.21l6.492-2.587 c-0.588-2.292-3.176-9.171-14-16.78c-5.179-3.64-11.136-5.484-17.711-5.484c-3.608,0-6.411,0.574-7.796,0.924l1.171,3.619 C81.061,35.211,83.674,34.65,86.928,34.65z"/>
</g>
</g>
<path fill="#463014" d="M145.715,295.482L145.715,295.482c-2.82,0-5.698-1.023-7.693-2.75c-1.527-1.316-6.691-6.059-8.968-11.87 c-0.85-2.173-0.659-3.911,0.574-5.162c0.85-0.857,2.614-1.882,6.195-1.882l2.548-0.004c3.036-0.003,8.148-0.003,12.517-0.003 h4.189c2.724,0,4.677,0.589,5.8,1.737c1.442,1.482,0.98,3.367,0.577,4.359c-0.702,1.738-3.607,7.394-8.525,12.652 C151.168,294.443,148.605,295.482,145.715,295.482z"/>
<path fill="#463014" d="M148.671,147.562l-10.182-0.655c0,0,2.603,4.588,4.289,10.522c1.904,6.712-1.741,16.521-1.741,16.521 S154.613,158.58,148.671,147.562z"/>
<g>
<path fill="#463014" d="M135.961,322.367c-36.239-2.785-48.989-37.028-48.989-44.16l9.464,0.004l-4.732-0.004h4.732 c0.047,3.083,9.678,32.375,40.25,34.726L135.961,322.367z"/>
</g>
<path fill="#FFFFFF" d="M125.777,261.016c-0.566-3.273-0.625-6.377,0.066-9.427c-2.754-2.07-7.696-2.839-11.404-4.041 c-3.032-1.919-18.548,1.967-29.805-11.656c-14.104-17.059-11.136-27.244-11.136-27.244c-3.616,4.018-7.121,2.487-12.633,21.221 c-5.52,18.738,2.591,31.801,17.708,44.915c7.142,6.195,17.238,8.747,25.922,9.724c-2.909-2.921,4.969-3.213,10.399-5.245 c-0.433-4.384,0.292-8.64,3.561-12.067c1.971-2.066,4.507-3.301,7.138-4.285c0.147-0.34,0.271-0.654,0.411-0.98 C125.917,261.633,125.832,261.332,125.777,261.016z"/>
<path fill="#C9C9C9" d="M114.821,279.149c-0.314-0.92-0.551-1.858-0.784-2.802c-0.251-1.031-1.501-3.952,0.04-0.617 c-0.396-0.854-0.655-1.734-0.846-2.621c-24.482-0.031-45.781-16.84-41.666-52.179c-3.205-4.255-7.693,8.58-7.693,8.58 s-12.256,35.588,19.398,49.381c10.547,4.6,19.868,7.897,22.067,6.566c4.581,0.931,8.716-2.263,10.267-4.363 C115.313,280.449,115.048,279.803,114.821,279.149z"/>
<path fill="#463014" d="M125.336,255.892c0.038-2.983,0.647-5.872,2.089-8.751c0.101-0.198,0.218-0.388,0.326-0.581 c-9.421-0.081-20.271-0.983-29.51-4.681c-10.155-4.062-22.858-17.959-25.041-34.287c0,0-19.125,14.758-13.505,46.346 c5.275,29.662,30.096,39.332,58.404,40.968c0.015-0.192-3.184-6.8-2.173-10.845c-16.074,1.168-34.049-5.042-42.726-19.32 c-7.944-13.068-5.716-35.379-2.451-38.648C78.713,251.222,107.369,256.33,125.336,255.892z"/>
<path fill="#463014" d="M176.191,294.839"/>
<path fill="#463014" d="M128.302,237.902c-5.094,14.949-15.499,27.047-15.499,27.047s14.313-0.651,15.103-3.184 c0.585-1.867,12.924-30.752,17.66-64.589C141.111,204.495,128.738,236.622,128.302,237.902z"/>
<path fill="#E78724" d="M209.393,203.437c0,0,16.225,24.815,28.133,42.425c1.842,2.724-11.908,2.913-11.908,2.913L209.393,203.437 z"/>
<path fill="#E78724" d="M201.664,151.989c0,0,4.893,12.205,7.569,18.675c2.909,7.034,13.999,10.533,13.999,10.533 s-5.748-6.03-5.748-21.306c0-6.409-8.273-8.957-8.273-8.957L201.664,151.989z"/>
<path fill="#E78724" d="M206.605,158.89c0,0,10.023,11.931,28.638,5.249s20.522-30.545,20.522-37.227 c0-6.682-35.317,6.682-40.091,9.546C210.9,139.322,201.834,150.775,206.605,158.89z"/>
<path fill="#E78724" d="M276.906,31.399c0,0-17.18-3.343-28.637,5.726c-11.453,9.067-14.795,16.228-14.795,16.228l19.306,15.302 c0,0,9.332-4.325,12.196-16.735C267.838,39.512,265.93,33.786,276.906,31.399z"/>
<path fill="#E78724" d="M211.618,124.427c7.397-10.5,19.583-15.08,29.32-15.839c16.597-1.298,24.472,4.569,24.472,4.569 s-27.18,1.151-35.015,11.44c-14.585,19.15-35.854,20.706-39.256,16.5c3.933,0.196,8.263-1.753,12.892-6.133 C206.924,132.224,209.271,127.76,211.618,124.427z"/>
<path fill="#E78724" d="M257.501,161.554c0,0,30.153-10.367,24.426-20.865c-5.726-10.501-1.172-16.222-1.172-16.222 s16.843,12.57,12.548,25.932c-2.637,8.202-7.061,14.14-31.354,25.525c-11.652,21.643-2.406,60.6-2.957,60.783 c-0.924,0.307-16.359-7.63-15.305-44.077C244.007,181.438,244.902,166.159,257.501,161.554z"/>
<path fill="#E78724" d="M217.984,50.074c12.641,6.424,29.967,15.37,29.967,15.37l-6.817,3.411 c0.651,1.054,0.966,1.683,0.966,1.683l-6.998,3.182c0,0-17.084,12.375-27.551,20.331c3.486-10.746,13.73-27.628,13.73-27.628 S224.189,58.666,217.984,50.074z"/>
<path fill="#E78724" d="M175.978,311.934c38.86,0,52.025-19.731,52.025-19.731l-6.07,14.791 c-2.296,6.399-26.79,26.311-45.896,26.311"/>
<path fill="#E78724" d="M223.748,278.871c0,0-3.58,21.854-17.894,21.854c-12.165,0-15.751-18.46-15.751-22.275L223.748,278.871z"/>
<path fill="#E78724" d="M247.575,245.912c-1.272-3.502-5.726-17.66-7.161-30.545c-1.715-15.432-1.086-38.003-1.086-38.003 s3.819,14.795,7.156,17.186c3.344,2.385,9.546,18.61,9.546,18.61s3.324,24.156,4.906,32.275 C256.559,246.312,252.877,243.732,247.575,245.912z"/>
<path fill="#E78724" d="M282.154,150.162c0,0-8.115-2.866-10.5-20.522c-2.385-17.66,2.865-32.932,2.865-32.932 s-0.48,24.34,2.385,29.114c2.866,4.773,5.25,6.203,8.592,12.409C288.834,144.437,284.062,148.252,282.154,150.162z"/>
<path fill="#87CCEE" d="M239.106,69.061"/>
<path fill="#FDC168" d="M272.465,35.576l1.659-1.049C279.008,34.692,272.465,35.576,272.465,35.576z"/>
<path fill="#FBA919" d="M211.378,44.846c0,0,7.638-1.272,11.454-6.998c3.819-5.728,14.639-17.184,31.883-17.312 c17.242-0.129,34.301,4.583,34.301,4.583l-14.892,9.409c-1.575-0.051-4.329-0.03-8.887,0.122 c-18.685,0.621-21.562,19.106-21.562,19.106l-65.86-9.069"/>
<path fill="#FFFFFF" d="M205.016,146.942c0,0,8.91,8.91,22.59,6.044c13.684-2.862,21.957-8.908,22.594-19.409 c0.635-10.5-2.863-14.636-2.863-14.636s-15.275,4.776-22.593,11.14S212.018,146.625,205.016,146.942z"/>
<path fill="#C9C9C9" d="M215.796,143.759c0,0,7.73,3.53,16.364,0.655c11.309-3.771,12.062-15.529,12.062-15.529 s6.932,20.354-12.514,24.272c-15.594,3.142-24.82-5.896-24.82-5.896L215.796,143.759z"/>
<path fill="#463014" d="M206.916,257.84"/>
<path fill="#463014" d="M266.309,67.117c6.303-5.229,1.609-10.082,2.107-16.023c0.266-3.161,0.516-6.144,1.559-7.789 c5.801-9.159,19.483-11.938,19.624-11.967l6.423-1.258l-4.252-4.973c-0.551-0.644-18.009-17.301-45.029-8.579 c-18.895,6.095-32.885,26.763-33.405,27.598l9.472,4.456c0.115-0.176,11.176-19.603,27.389-24.831 c13.105-4.229,25.184-0.206,30.355,2.431c-5.497,2.196-12.691,6.195-17.024,13.036c-2.044,3.231-2.386,7.299-2.718,11.238 c-0.439,5.215-0.854,10.138-4.693,13.326L266.309,67.117z"/>
<path fill="#463014" d="M283.14,143.45c0,0-7.937-9.847-10.289-29.008c-0.924-7.547,0.714-22.433,3.339-28.16 c-0.477,14.079,3.105,28.16,3.105,28.16S281.709,140.586,283.14,143.45z"/>
<path fill="#463014" d="M241.271,57.172c0.004-0.021,2.548-11.138,9.602-16.75c9.948-7.914,22.097-3.704,22.21-3.667l1.769-5.449 c-0.59-0.191-14.473-4.566-27.273,4.429c-12.873,9.046-14.414,17.246-14.552,18.152L241.271,57.172z"/>
<path fill="#463014" d="M258.203,136.388c0,0,4.166-5.964,3.413-12.523c-0.369-3.239-1.87-6.564-4.55-7.744 c-4.98-2.188-7.188,3.457-7.188,3.457S256.888,121.308,258.203,136.388z"/>
<path fill="#463014" d="M206.916,257.84"/>
<path fill="#463014" d="M212.461,145.478c-0.174,0.325-0.264,0.507-0.264,0.507s12.99,9.752,26.307-0.144 c7.133-5.302,6.459-18.417,4.271-23.979c-5.676,1.287-10.492,3.607-14.52,6.316c5.089-4.541,9.543-7.884,9.527-7.961l5.787-1.637 l11.239-3.852c0.144,0.857,4.243,20.074-7.595,33.168c-5.244,5.806-29.834,18.808-41.506-3.424L212.461,145.478z"/>
<path fill="#463014" d="M213.674,146.907c-7.316,11.135-25.77,4.772-25.451-7c0,0,12.33,6.807,23.227-5.726 c6.362-7.317,26.752-27.492,54.397-20.787C246.756,117.592,221.479,135.035,213.674,146.907z"/>
<g>
<path fill="#463014" d="M206.916,257.84"/>
</g>
<path fill="#463014" d="M268.431,178.333c-1.761,1.017-7.971,7.445-7.971,17.059c-0.004,4.821,0.477,29.04,2.866,43.836 c-3.59,2.332-6.09,2.828-9.664,5.205c-1.789-17.136-3.076-41.972-2.474-51.998c0.683-11.429,6.8-19.099,12.474-22.37 c1.777-1.022,3.635-2.027,5.509-3.038c9.72-5.252,19.771-10.685,19.771-19.962c0-7.257-2.824-9.527-5.811-11.933l-0.318-0.261 c-1.982-1.601-4.229-3.417-5.554-6.399c-3.627-8.153-4.222-28.921-0.004-34.193c2.103-2.627,7.742-11.461,6.122-17.397 c-0.621-2.266-2.049-3.945-4.371-5.135c-2.459-1.259-5.775-1.897-9.867-1.897c-8.025,0-16.936,2.444-21.527,3.899 c-16.419,5.204-36.231,20.208-41.914,24.683c-0.162,0.125-0.256,0.198-0.274,0.21l-3.636,2.527l2.273-3.803 c0.144-0.237,14.535-23.905,40.271-32.583c5.008-1.688,14.844-4.521,24.512-4.521c5.756,0,10.635,1.005,14.506,2.985 c4.714,2.411,7.904,6.258,9.232,11.121c3.25,11.921-7.336,25.194-7.697,25.618c-1.234,2.203-1.756,18.206,1.091,24.611 c0.392,0.884,1.467,1.753,2.831,2.851c0.426,0.345,0.899,0.703,1.408,1.086c4.023,3.036,10.102,7.623,10.102,18.196 c0,14.467-14.662,22.311-26.441,28.618C271.941,176.388,270.094,177.372,268.431,178.333z"/>
<path fill="#463014" d="M250.94,65.415c-2.332-3.95-8.296-11.577-22.042-18.279c-15.34-7.477-33.094-11.272-52.777-11.281v-0.004 c0,0-0.026,0-0.038,0c0,0-0.026,0-0.038,0v0.002c-19.686,0.01-37.443,3.805-52.779,11.281 c-13.746,6.703-19.708,14.329-22.042,18.279l-1.001,1.325l11.771,2.62l0.373-0.471l0.197-0.432 c0.182-0.778,1.76-4.978,14.884-11.378c14.03-6.843,30.394-10.312,48.633-10.318c18.241,0.006,34.598,3.475,48.627,10.318 c13.125,6.4,14.708,10.6,14.888,11.378l0.196,0.432l0.369,0.471l11.775-2.62L250.94,65.415z"/>
<g>
<g>
<path fill="#463014" d="M266.309,67.117c6.303-5.229,1.609-10.082,2.107-16.023c0.266-3.161,0.516-6.144,1.559-7.789 c5.801-9.159,19.483-11.938,19.624-11.967l6.423-1.258l-4.252-4.973c-0.551-0.644-18.009-17.301-45.029-8.579 c-18.895,6.095-32.885,26.763-33.405,27.598l9.472,4.456c0.115-0.176,11.176-19.603,27.389-24.831 c13.105-4.229,25.184-0.206,30.355,2.431c-5.497,2.196-12.691,6.195-17.024,13.036c-2.044,3.231-2.386,7.299-2.718,11.238 c-0.439,5.215-0.854,10.138-4.693,13.326L266.309,67.117z"/>
</g>
<g>
<path fill="#463014" d="M254.178,64.147l1.326-1.104c3.53-2.928,3.926-7.657,4.352-12.684c0.342-4.045,0.695-8.23,2.862-11.652 c3.982-6.284,10.286-10.222,15.479-12.563c-3.109-1.317-8.951-3.28-16.155-3.28c-3.979,0-7.862,0.602-11.556,1.794 c-15.039,4.85-25.666,22.377-26.869,24.433l-0.451,0.713l-11.209-5.271l0.57-0.91c0.132-0.212,14.199-21.641,33.924-28.001 c5.275-1.704,10.576-2.564,15.756-2.564c18.983,0,30.193,11.317,30.289,11.431l5.317,6.216l-8.022,1.573 c-0.133,0.027-13.479,2.819-19.006,11.541c-0.916,1.45-1.156,4.317-1.416,7.361c-0.151,1.81,0.229,3.574,0.599,5.279 c0.802,3.697,1.63,7.521-3.046,11.397l-0.406,0.337L254.178,64.147z"/>
</g>
</g>
<g>
<g>
<path fill="#463014" d="M241.271,57.172c0.004-0.021,2.548-11.138,9.602-16.75c9.948-7.914,22.097-3.704,22.21-3.667 l1.769-5.449c-0.59-0.191-14.473-4.566-27.273,4.429c-12.873,9.046-14.414,17.246-14.552,18.152L241.271,57.172z"/>
</g>
<g>
<path fill="#463014" d="M231.975,54.495l0.111-0.748c0.14-0.946,1.752-9.519,14.945-18.794 c5.428-3.814,11.932-5.832,18.809-5.832c5.216,0,8.901,1.147,9.309,1.278l0.906,0.293l-2.365,7.269l-0.913-0.303 c-0.341-0.115-3.409-1.102-7.537-1.102c-5.29,0-9.923,1.552-13.767,4.615c-6.746,5.365-9.243,16.101-9.266,16.207l-0.248,1.092 L231.975,54.495z M272.465,35.576l1.175-3.619c-1.386-0.352-4.192-0.924-7.8-0.924c-6.574,0-12.533,1.846-17.709,5.484 c-10.828,7.611-13.416,14.488-14.003,16.78l6.497,2.587c0.85-3.021,3.664-11.442,9.656-16.21 c4.135-3.286,9.306-5.024,14.958-5.024C268.489,34.65,271.107,35.211,272.465,35.576z"/>
</g>
</g>
<path fill="#463014" d="M199.242,292.559c-4.917-5.257-7.826-10.914-8.529-12.652c-0.402-0.99-0.86-2.877,0.582-4.359 c1.124-1.148,3.072-1.737,5.796-1.737h4.192c4.369,0,9.478,0,12.516,0.003l2.548,0.004c3.579,0,5.342,1.024,6.191,1.882 c1.234,1.249,1.427,2.987,0.577,5.162c-2.277,5.812-7.442,10.555-8.969,11.87c-2,1.727-4.871,2.75-7.691,2.75l0,0 C203.564,295.482,201.003,294.443,199.242,292.559z"/>
<path fill="#463014" d="M203.498,147.562l10.176-0.655c0,0-2.599,4.588-4.285,10.522c-1.904,6.712,1.741,16.521,1.741,16.521 S197.553,158.58,203.498,147.562z"/>
<path fill="#E78724" d="M176.085,111.211c-6.489,0-14.95-0.178-21.298-4.74c0,0,8.312,14.571,21.287,14.571l0.011-1.844 l0.011,1.844c12.976,0,21.287-14.571,21.287-14.571C191.035,111.033,182.568,111.211,176.085,111.211z"/>
<path fill="#463014" d="M193.952,111.141c-6.509,3.939-12.322,5.304-17.867,5.425c-5.546-0.121-11.357-1.486-17.867-5.425 c0,0,9.479,11.567,17.819,11.656v0.007c0.015,0,0.03-0.004,0.047-0.004c0.015,0,0.03,0.004,0.047,0.004v-0.007 C184.469,122.708,193.952,111.141,193.952,111.141z"/>
<g>
<path fill="#463014" d="M216.207,322.367l-0.726-9.435c30.565-2.351,40.196-31.643,40.246-34.726h9.464 C265.195,285.337,252.441,319.582,216.207,322.367z"/>
</g>
<path fill="#FFFFFF" d="M226.389,261.016c0.569-3.273,0.624-6.377-0.066-9.427c2.758-2.07,7.696-2.839,11.404-4.041 c3.032-1.919,18.552,1.967,29.809-11.656c14.104-17.059,11.132-27.244,11.132-27.244c3.619,4.018,7.121,2.487,12.637,21.221 c5.52,18.738-2.595,31.801-17.712,44.915c-7.141,6.195-17.238,8.747-25.922,9.724c2.909-2.921-4.969-3.213-10.396-5.245 c0.434-4.384-0.295-8.64-3.563-12.067c-1.967-2.066-4.507-3.301-7.136-4.285c-0.148-0.34-0.275-0.654-0.411-0.98 C226.252,261.633,226.334,261.332,226.389,261.016z"/>
<path fill="#C9C9C9" d="M237.342,279.149c0.318-0.92,0.551-1.858,0.784-2.802c0.255-1.031,1.505-3.952-0.038-0.617 c0.396-0.854,0.655-1.734,0.846-2.621c24.482-0.031,45.781-16.84,41.662-52.179c3.205-4.255,7.696,8.58,7.696,8.58 s12.257,35.588-19.397,49.381c-10.547,4.6-19.867,7.897-22.067,6.566c-4.585,0.931-8.72-2.263-10.267-4.363 C236.85,280.449,237.121,279.803,237.342,279.149z"/>
<path fill="#463014" d="M226.827,255.892c-0.034-2.983-0.647-5.872-2.085-8.751c-0.102-0.198-0.219-0.388-0.326-0.581 c9.42-0.081,20.271-0.983,29.51-4.681c10.154-4.062,22.857-17.959,25.041-34.287c0,0,19.125,14.758,13.505,46.346 c-5.279,29.662-30.097,39.332-58.404,40.968c-0.015-0.192,3.185-6.8,2.173-10.845c16.07,1.168,34.045-5.042,42.727-19.32 c7.939-13.068,5.712-35.379,2.447-38.648C273.454,251.222,244.795,256.33,226.827,255.892z"/>
<g>
<path fill="#463014" d="M175.978,294.839"/>
<path fill="#463014" d="M238.258,263.332c-3.382-3.656-9.6-8.014-23.937-8.014c0,0-27.182-0.016-38.188-0.023l0,0 c-0.015,0-0.034,0-0.047,0c0,0-0.034,0-0.047,0l0,0c-11.005,0.008-38.194,0.023-38.194,0.023 c-14.333,0-20.551,4.359-23.935,8.014c-4.929,5.321-5.702,12.723-2.292,21.975c9.061,24.626,21.794,49.645,64.419,49.68v0.004 c0.016,0,0.03-0.004,0.047-0.004c0.015,0,0.03,0.004,0.047,0.004v-0.004c42.621-0.037,55.354-25.054,64.418-49.68 C243.959,276.055,243.184,268.653,238.258,263.332z M231.622,283.58c-4.317,12.366-15.919,42.298-55.539,42.35 c-39.625-0.052-51.223-29.983-55.54-42.35c-2.389-6.861-2.207-11.938,0.559-15.092c1.889-2.156,6.229-4.729,16.12-4.729 l10.333-0.004c7.623-0.007,17.194-0.015,28.529-0.019c11.331,0.004,20.907,0.012,28.528,0.019l10.329,0.004 c9.894,0,14.233,2.572,16.123,4.729C233.827,271.645,234.011,276.719,231.622,283.58z"/>
</g>
<path fill="#463014" d="M223.863,237.902c5.094,14.949,15.498,27.047,15.498,27.047s-14.312-0.651-15.103-3.184 c-0.581-1.867-12.921-30.752-17.657-64.589C211.053,204.495,223.426,236.622,223.863,237.902z"/>
</g>
<g>
<path fill="#463014" d="M62.229,357.738c-1.906-1.15-4.042-2.159-6.349-2.996c-2.291-0.831-4.823-1.493-7.53-1.969 c-2.711-0.479-5.637-0.719-8.7-0.719c-5.934,0-11.395,0.888-16.229,2.639c-4.85,1.762-9.048,4.266-12.478,7.444 c-3.443,3.184-6.125,7.024-7.973,11.417c-1.844,4.377-2.777,9.236-2.777,14.453c0,5.127,0.979,9.95,2.909,14.332 c1.929,4.38,4.632,8.217,8.029,11.41c3.392,3.189,7.456,5.725,12.09,7.532c4.623,1.802,9.716,2.72,15.141,2.72 c2.979,0,5.803-0.14,8.396-0.424c2.603-0.282,5.1-0.734,7.424-1.34c2.321-0.604,4.543-1.388,6.606-2.336 c2.062-0.943,4.07-2.088,5.966-3.395c0.347-0.236,0.551-0.628,0.551-1.047v-28.667c0-0.7-0.568-1.271-1.27-1.271H40.345 c-0.703,0-1.272,0.57-1.272,1.271v6.892v1.779v2.8c0,0.704,0.569,1.272,1.272,1.272h9.243v8.143 c-1.282,0.456-2.639,0.835-4.051,1.128c-1.688,0.354-3.668,0.534-5.887,0.534c-2.866,0-5.541-0.482-7.942-1.429 c-2.383-0.938-4.469-2.321-6.195-4.106c-1.738-1.792-3.124-4.027-4.113-6.649c-1-2.64-1.507-5.718-1.507-9.151 c0-3.1,0.46-5.941,1.363-8.446c0.897-2.485,2.187-4.64,3.826-6.396c1.633-1.752,3.647-3.131,5.979-4.097 c2.345-0.975,5.035-1.463,7.997-1.463c1.634,0,3.12,0.073,4.415,0.222c1.287,0.146,2.523,0.39,3.672,0.707 c1.155,0.326,2.3,0.748,3.403,1.258c1.159,0.537,6.553,3.609,7.804,4.312c0.856,0.479,1.382,0.509,1.954-0.3l7.269-10.613 c0.369-0.521,0.288-1.246-0.193-1.674C65.868,360.162,64.134,358.894,62.229,357.738z"/>
<path fill="#463014" d="M126.014,397.661c-0.793-1.225-1.745-2.283-2.828-3.146c-0.343-0.273-0.691-0.531-1.051-0.775 c1.482-0.683,2.849-1.481,4.081-2.373c1.898-1.376,3.526-2.963,4.836-4.723c1.319-1.77,2.326-3.721,2.994-5.8 c0.667-2.078,1.003-4.304,1.003-6.634c0-3.05-0.57-5.916-1.692-8.522c-1.141-2.644-2.983-4.963-5.472-6.89 c-2.455-1.895-5.641-3.387-9.468-4.439c-3.78-1.033-8.389-1.555-13.701-1.555H81.208c-0.702,0-1.27,0.568-1.27,1.27v67.912 c0,0.698,0.568,1.27,1.27,1.27h16.763c0.702,0,1.27-0.571,1.27-1.27v-23.857h2.995c1.336,0,2.05,0.229,2.41,0.418 c0.501,0.263,0.958,0.734,1.365,1.396l12.004,19.724c1.463,2.384,3.865,3.589,7.132,3.589h15.177c0.017,0.002,0.034,0,0.042,0 c0.705,0,1.272-0.571,1.272-1.27c0-0.365-0.153-0.695-0.399-0.926L126.014,397.661z M115.521,379.115 c-0.397,1.109-1.022,2.051-1.902,2.883c-0.894,0.834-2.063,1.502-3.483,1.981c-1.463,0.497-3.286,0.749-5.419,0.749h-5.476 v-17.594h5.476c4.009,0,6.968,0.754,8.794,2.235c1.77,1.438,2.629,3.401,2.629,6.005 C116.143,376.715,115.933,377.971,115.521,379.115z"/>
<path fill="#463014" d="M210.252,352.804H193.49c-0.704,0-1.27,0.569-1.27,1.271v40.223c0,2.241-0.305,4.258-0.901,5.999 c-0.585,1.698-1.435,3.151-2.526,4.321c-1.089,1.158-2.444,2.065-4.03,2.691c-3.224,1.272-7.894,1.272-11.119,0 c-1.582-0.626-2.934-1.537-4.022-2.712c-1.094-1.184-1.946-2.645-2.531-4.351c-0.594-1.731-0.899-3.751-0.899-5.996v-40.178 c0-0.7-0.568-1.27-1.27-1.27h-16.763c-0.702,0-1.27,0.569-1.27,1.27v40.223c0,4.314,0.75,8.335,2.226,11.948 c1.484,3.636,3.655,6.814,6.455,9.443c2.79,2.622,6.226,4.69,10.205,6.141c3.954,1.44,8.47,2.171,13.43,2.171 c4.924,0,9.424-0.732,13.383-2.171c3.979-1.452,7.408-3.519,10.202-6.141c2.8-2.631,4.979-5.804,6.479-9.436 c1.495-3.621,2.252-7.644,2.252-11.954v-40.223C211.521,353.373,210.955,352.804,210.252,352.804z"/>
<path fill="#463014" d="M289.203,352.804h-14.781c-0.701,0-1.269,0.569-1.269,1.271v35.936c0,1.075,0.03,2.217,0.093,3.428 l-31.793-37.781c-0.513-0.581-0.967-1.043-1.366-1.385c-0.466-0.396-0.96-0.705-1.462-0.92c-0.503-0.219-1.068-0.365-1.688-0.443 c-0.536-0.068-1.204-0.102-1.992-0.102h-8.83c-0.698,0-1.268,0.568-1.268,1.27v67.912c0,0.698,0.569,1.27,1.268,1.27h14.781 c0.701,0,1.274-0.571,1.274-1.27v-36.4c0-0.904-0.028-1.854-0.083-2.869l31.554,37.471c0.956,1.147,1.987,1.961,3.068,2.414 c1.045,0.434,2.313,0.654,3.763,0.654h8.729c0.698,0,1.268-0.571,1.268-1.27v-67.912 C290.471,353.373,289.903,352.804,289.203,352.804z"/>
<path fill="#463014" d="M358.532,352.804h-57.431c-0.701,0-1.272,0.569-1.272,1.271v12.49c0,0.701,0.571,1.272,1.272,1.272h19.064 v54.149c0,0.698,0.57,1.27,1.272,1.27h16.759c0.702,0,1.272-0.571,1.272-1.27v-54.149h19.061c0.7,0,1.271-0.571,1.271-1.272 v-12.49C359.803,353.373,359.232,352.804,358.532,352.804z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
javascript/base/img/gulp-2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
javascript/base/img/jshint-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1
javascript/base/img/npm-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="518pt" height="202pt" viewBox="0 0 18 7"><path fill="#CB3837" d="M0,0v6h5v1h4v-1h9v-6"/><path fill="#FFF" d="M1,1v4h2v-3h1v3h1v-4h1v5h2v-4h1v2h-1v1h2v-4h1v4h2v-3h1v3h1v-3h1v3h1v-4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 235 B

BIN
javascript/base/img/vanilla.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

37
javascript/base/index.html
View File

@ -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 @@
};
</script>
<script id="cadoles-ascii" type="text/ascii-art">
___ _ _
/ __\__ _ __| | ___ | | ___ ___
/ / / _` |/ _` |/ _ \| |/ _ \ __|
/ /___ (_| | (_| | (_) | | __\__ \
\____/\__,_|\__,_|\___/|_|\___|___/
Formation Javascript 2015
Bienvenue dans la console de votre navigateur !
</script>
<script>
(function() {
var asciiText = document.getElementById('cadoles-ascii').innerHTML;
console.log('%c '+asciiText, 'color: #2A80AF;');
}());
</script>
</body>
</html>

12
javascript/base/licence.md Normal file
View File

@ -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.

14
javascript/base/mise-en-pratique.md Normal file
View File

@ -0,0 +1,14 @@
# .cadoles-slide-title[Mise en pratique]
<style type="text/css">
.vanillatodos { font-family: 'serif'; }
</style>
.cadoles-center[
### .vanillatodos[ VanillaTodos ]
<img src="img/vanilla.png" style="width:150px; transform:rotate(45deg); margin-top:-50px" />
]
.cadoles-center[
_Assuré 100% sans dépendances !_
]

3
javascript/base/modularisation-1.md
View File

@ -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
]

2
javascript/base/modularisation-2.md
View File

@ -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.

6
javascript/base/modularisation-3.md
View File

@ -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) {

2
javascript/base/modularisation-4.md
View File

@ -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)

2
javascript/base/modularisation-5.md
View File

@ -1,4 +1,4 @@
# .cadoles-slide-title[Modularisation (5/6)]
# .cadoles-slide-title[Modularisation (5/8)]
**Format AMD**

4
javascript/base/modularisation-6.md
View File

@ -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...)

10
javascript/base/modularisation-7.md
View File

@ -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;
```

10
javascript/base/modularisation-8.md Normal file
View File

@ -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.

19
javascript/base/plan.md
View File

@ -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

5
javascript/base/questions.md Normal file
View File

@ -0,0 +1,5 @@
# .cadoles-slide-title[end();]
.cadoles-center[
## Des questions ?
]

38
javascript/cadoles-theme.css
View File

@ -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;
}