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

Ajout base formation Javascript

This commit is contained in:
wpetit 2015-03-25 17:27:03 +01:00
parent 72ba644959
commit a2650f1ebd
31 changed files with 7362 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
javascript/.editorconfig Normal file
View File

@ -0,0 +1,7 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

16
javascript/README.md Normal file
View File

@ -0,0 +1,16 @@
# Formations Javascript
Les formations Javascript sont au format HTML et utilisent la librairie [remark](https://github.com/gnab/remark).
## Générer le PDF de la formation
Utiliser le script `generate-pdf.sh`
## Visualiser une des formations
```
cd formations
python -m SimpleHTTPServer
```
Puis ouvrir votre navigateur sur l'adresse `http://localhost:8080/javascript/<formation>`

6
javascript/base/cover.md Normal file
View File

@ -0,0 +1,6 @@
# .cadoles-blue[Formation Javascript]
## .cadoles-blue[EOLE]
### William Petit
<img style="height: 30px" src=../../beamer-skel/img/logo-cadoles-01.png />
### 02 Avril 2015

29
javascript/base/fonctions-1.md Normal file
View File

@ -0,0 +1,29 @@
# .cadoles-slide-title[Fonctions (1/3)]
.cadoles-clearfix[
**Déclaration et invocation**
]
```js
// Déclaration
function myFunc() {
return 'Hello from myFunc';
}
var myFunc2 = function() {
return 'Hello from myFunc2';
};
// Invocation
myFunc(); // -> 'Hello from myFunc'
myFunc2(); // -> 'Hello from myFunc2'
```
**Arguments**
Comme les variables, les arguments d'une fonction en Javascript ne sont pas typés, et leur nombre n'est pas fixe.
```js
function myFunc(arg1, arg2) {
console.log(arg1, arg2);
}
myFunc('foo', 'bar'); // -> affiche 'foo bar' dans la console;
myFunc('foo', 'bar', 'baz'); // Pas d'erreur
```

18
javascript/base/fonctions-2.md Normal file
View File

@ -0,0 +1,18 @@
# .cadoles-slide-title[Fonctions (2/3)]
.cadoles-clearfix[
**La variable `arguments`**
]
Dans le contexte d'exécution d'un fonction, la variable `arguments` permet de manipuler les arguments, même si ceux ci n'ont pas été déclarés par la fonction.
```js
function myFunc() {
console.log(arguments.length, arguments[0], arguments[1]);
}
myFunc('arg1', 'arg2'); // Affiche '2 "arg1" "arg2"' dans la console
myFunc(); // Affiche '0 undefined undefined' dans la console
```
**Contexte d'exécution et `this`**
En Javascript, le mot clé `this` permet d'obtenir une référence vers le contexte d'exécution.

8
javascript/base/fonctions-3.md Normal file
View File

@ -0,0 +1,8 @@
# .cadoles-slide-title[Fonctions (3/3)]
.cadoles-clearfix[
**"Levage" de fonctions**
]
```js
```

16
javascript/base/historique.md Normal file
View File

@ -0,0 +1,16 @@
# .cadoles-slide-title[Historique]
.cadoles-list.cadoles-clearfix[
- Créé en 1995 par [Brendan Eich](https://fr.wikipedia.org/wiki/Brendan_Eich) pour [Netscape](https://fr.wikipedia.org/wiki/Netscape_Communications);
- Normalisé par le standard [ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript) en juin 1997;
- Actuellement en version 1.8.5, implémentant la version 5 de la norme ECMA-262;
- La version 6 de la norme ECMA-262 devrait sortir à la mi 2015.
]
.cadoles-list[
- Premier langage en terme de volume de dépôts créés sur [Github](https://github.com/) (d'après [Githut.info](http://githut.info/)).
]

31
javascript/base/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Cadoles - Formation Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body {
font-family: 'Droid Sans';
}
h1, h2, h3 {
font-family: 'Caviar Dream', 'Droid Sans';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<link href="../cadoles-theme.css" rel="stylesheet">
</head>
<body>
<script src="../bower_components/remark/out/remark.js"></script>
<script src="../cadoles-remark-macros.js"></script>
<script type="text/javascript">
var slideshow = remark.create({
sourceUrl: 'index.md'
});
</script>
</body>
</html>

28
javascript/base/index.md Normal file
View File

@ -0,0 +1,28 @@
class: middle, center
![:include](cover.md)
---
![:include](plan.md)
---
![:include](historique.md)
---
![:include](langage.md)
---
![:include](variables-1.md)
---
![:include](variables-2.md)
---
![:include](structures-1.md)
---
![:include](structures-2.md)
---
![:include](structures-3.md)
---
![:include](fonctions-1.md)
---
![:include](fonctions-2.md)
---
![:include](fonctions-3.md)
---
![:include](tableaux-1.md)
---
![:include](tableaux-2.md)

9
javascript/base/langage.md Normal file
View File

@ -0,0 +1,9 @@
# .cadoles-slide-title[Le langage]
.cadoles-list.cadoles-clearfix[
- Variables
- Structures de contrôles
- Fonctions
- Tableaux
- Objets
]

46
javascript/base/plan.md Normal file
View File

@ -0,0 +1,46 @@
# .cadoles-slide-title[Plan]
.cadoles-list.cadoles-clearfix[
- Historique
- Le langage
- L'héritage prototypal
- Modularisation
- L'écosystème Javascript
- Les alternatives
]
???
## Plan complet
- Historique
- Le langage
- Variables
- Structures de contrôles
- Fonctions
- Tableaux
- Objets
- L'héritage prototypal
- Modularisation
- État des lieux
- Variable globale
- AMD
- CommonJS
- Modules ES6
- L'écosystème Javascript
- Outils de debug
- Console de débogage
- Tests unitaires
- Linting
- `'use strict';`
- Gestionnaires de paquets
- Pipeline d'intégration
- Grunt
- Gulp
- Les alternatives
- CoffeeScript
- Dart
- TypeScript
- Haxe

31
javascript/base/structures-1.md Normal file
View File

@ -0,0 +1,31 @@
# .cadoles-slide-title[ Structures de contrôle (1/3) ]
.cadoles-clearfix[
**Tests et conditions**
]
```js
// Opérateurs de comparaison: <, >, >=, <=, ==, ===, !=, !==
var test = 1;
if(test < 1) {
console.log('test est strictement inférieur à 1');
} else if(test > 1) {
console.log('test est strictement supérieur à 2');
} else {
console.log('test est égal à 1');
}
test = 'foo';
switch(test) {
case 'foo':
console.log('foo !');
break;
case 'bar':
console.log('bar !');
break;
default:
console.log('default !');
}
```

27
javascript/base/structures-2.md Normal file
View File

@ -0,0 +1,27 @@
# .cadoles-slide-title[Structures de contrôle (2/3)]
.cadoles-clearfix[
**Tests, transitivité, égalité stricte et petites subtilités**
]
```js
var test;
test = 1 == '1'; // -> true
test = 1 === '1'; // -> false
test = 0 == false; // -> true
test = 0 === false; // -> false
test = 1 == true; // -> true
test = 1 === true; // -> false
test = '' == false; // -> true
test = '' === false; // -> false
test = [] == false; // -> true
test = [] === false; // -> false
test = undefined == null; // -> true
test = undefined == false; // -> false
test = NaN == NaN; // -> false
```

28
javascript/base/structures-3.md Normal file
View File

@ -0,0 +1,28 @@
# .cadoles-slide-title[Structures de contrôle (3/3)]
.cadoles-clearfix[
**Itérations**
]
```js
for(var i = 0; i < 5; i++) {
console.log(i);
}
var j = 5;
while(j > 0) {
console.log('Loop:', j);
j -= 1;
}
j = 0;
do {
console.log('Loop:', j);
j += 1;
} while(j < 5);
```
** Instructions de contrôle des boucles **
- `break;` Sort de la boucle
- `continue;` Interromp la boucle et passe à l'itération suivante

30
javascript/base/tableaux-1.md Normal file
View File

@ -0,0 +1,30 @@
# .cadoles-slide-title[Tableaux (1/2)]
.cadoles-clearfix[
**Différentes notations**
]
```js
var arr = [1, 2, 3]; // A préférer
arr = new Array(1, 2, 3);
// Attention !
arr = new Array(3); // -> [undefined, undefined, undefined]
```
**Manipulation d'un tableau**
```js
var arr = [1, 2, 3];
// Propriétés
arr.length // -> 3
arr[0] // -> 1
// Méthodes (liste non exhaustive)
arr.push(4); // -> [1, 2, 3, 4]
arr.pop(); // -> [1, 2, 3]
arr.unshift(0); // -> [0, 1, 2, 3]
arr.shift(); // -> [1, 2, 3]
arr.indexOf(2) // -> 1
arr = [2, 3, 1];
arr.sort(); // -> [1, 2, 3]
arr.join(', '); // -> '1, 2, 3'
```

48
javascript/base/tableaux-2.md Normal file
View File

@ -0,0 +1,48 @@
# .cadoles-slide-title[Tableaux (2/2)]
.cadoles-clearfix[
**Méthodes de parcours et transformations**
]
```js
var arr = [1, 2, 3];
// Traverser le tableau
arr.forEach(function(item, index) {
console.log('Item:', item, 'Index:', index);
});
// Transformer un tableau
var square = arr.map(function(item, index) {
return item*item;
}); // -> [1, 4, 9]
// Réduire un tableau
var sum = arr.reduce(function(memo, item, index) {
return memo+item;
}, 0); // -> 6
```
**Exercice**
```js
var arr = [15, 20, 15, 16, -1, 4];
var max = arr.??(function(??) {
??
}, ??);
console.log(max); // -> 20
```
???
Solution Exo
```js
var arr = [15, 20, 15, 16, -1, 4];
var max = arr.reduce(function(memo, item, index) {
if(!memo) {
memo = item;
} else if(item >= memo) {
memo = item;
}
return memo;
});
```

33
javascript/base/variables-1.md Normal file
View File

@ -0,0 +1,33 @@
# .cadoles-slide-title[Variables (1/2)]
.cadoles-clearfix[
Javascript est un langage **faiblement typé**.
]
```js
var foo; // Une variable peut être déclarée, avec ou sans valeur
var bar = 'hello world !';
// Elle peut changer de type de valeur en cours d'exécution
bar = 5
// Incrémentation...
bar += 1; // -> 6
bar -= 2; // -> 4
// ... ou concaténation
bar = 'hello';
bar += ' world !';
console.log(bar); // -> 'hello world !'
```
**À votre avis ?**
```js
var foo = 'foo';
foo += 1;
console.log(foo) // Résultat ?
var bar = 'bar';
bar -= 1;
console.log(bar) // Résultat ?
```

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

@ -0,0 +1,25 @@
# .cadoles-slide-title[Variables (2/2)]
.cadoles-clearfix[
**Types**
]
```js
var foo;
// Types primaires
foo = 0; // Number, pas de distinction entre nombres flottants ou entiers
foo = 'baz'; // String, peut être délimité par ' ou ", pas de signification particulière
foo = true; // Boolean
// Types composites
foo = { prop1: 'World' }; // Object
foo = [1, 2, 3]; // Array
// Types spéciaux
foo = undefined;
foo = null;
foo = NaN;
```

20
javascript/bower.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "javascript",
"version": "0.0.0",
"authors": [
"William Petit <wpetit@cadoles.com>"
],
"license": "CC BY-NC-SA 2.0",
"homepage": "https://www.cadoles.com/wordpress/formations/",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"remark": "~0.10.2"
}
}

42
javascript/bower_components/remark/.bower.json vendored Normal file
View File

@ -0,0 +1,42 @@
{
"name": "remark",
"homepage": "http://remarkjs.com/",
"authors": [
"Ole Petter Bang <olepbang@gmail.com>"
],
"description": "A simple, in-browser, markdown-driven slideshow tool.",
"main": "out/remark.js",
"keywords": [
"Markdown",
"Slides"
],
"license": "MIT",
"ignore": [
".gitignore",
".gitmodules",
".jshintignore",
".jshintrc",
"HISTORY.md",
"LICENSE",
"make.js",
"Makefile",
"package.json",
"bower_components",
"node_modules",
"src",
"test",
"vendor",
"out/tests.js"
],
"version": "0.10.2",
"_release": "0.10.2",
"_resolution": {
"type": "version",
"tag": "v0.10.2",
"commit": "359f491fae0e53b2e8102b6a264a236fc28b5480"
},
"_source": "https://github.com/gnab/remark.git",
"_target": "~0.10.2",
"_originalSource": "remark",
"_direct": true
}

3
javascript/bower_components/remark/.travis.yml vendored Normal file
View File

@ -0,0 +1,3 @@
language: node_js
node_js:
- "0.10"

20
javascript/bower_components/remark/LICENCE vendored Normal file
View File

@ -0,0 +1,20 @@
Copyright (c) 2011-2013 Ole Petter Bang <olepbang@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

116
javascript/bower_components/remark/README.md vendored Normal file
View File

@ -0,0 +1,116 @@
# remark
[![Build Status](https://travis-ci.org/gnab/remark.svg?branch=develop)](https://travis-ci.org/gnab/remark)
A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
- Markdown formatting, with smart extensions
- Presenter mode, with cloned slideshow view
- Syntax highlighting, supporting a range of languages
- Slide scaling, thus similar appearance on all devices / resolutions
- Touch support for smart phones and pads, i.e. swipe to navigate slides
Check out [this remark slideshow](http://gnab.github.com/remark) for a brief introduction.
To render your Markdown-based slideshow on the fly, checkout [Remarkise](https://gnab.github.io/remark/remarkise).
### Getting Started
It takes only a few, simple steps to get up and running with remark:
1. Create a HTML file to contain your slideshow (see below)
2. Open the HTML file in a decent browser
3. Edit the Markdown and/or CSS styles as needed, save and refresh!
Below is a boilerplate HTML file to get you started:
```html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Title
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
---
# Introduction
</textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
```
### Moving On
For more information on using remark, please check out the [wiki](http://github.com/gnab/remark/wiki) pages.
### Real-world remark slideshows
On using remark:
- [The Official remark Slideshow](http://gnab.github.com/remark)
- [Coloured Terminal Listings in remark](http://joshbode.github.com/remark/ansi.html) by [joshbode](https://github.com/joshbode)
Other interesting stuff:
- [gnab.github.com/editorjs](http://gnab.github.com/editorjs)
- [judoole.github.com/GroovyBDD](http://judoole.github.com/GroovyBDD)
- [kjbekkelund.github.com/nith-coffeescript](http://kjbekkelund.github.com/nith-coffeescript)
- [kjbekkelund.github.com/js-architecture-backbone](http://kjbekkelund.github.com/js-architecture-backbone)
- [bekkopen.github.com/infrastruktur-som-kode](http://bekkopen.github.com/infrastruktur-som-kode)
- [ivarconr.github.com/Test-Driven-Web-Development/slides](http://ivarconr.github.com/Test-Driven-Web-Development/slides)
- [havard.github.com/node.js-intro-norwegian](http://havard.github.com/node.js-intro-norwegian)
- [mobmad.github.com/js-tdd-erfaringer](http://mobmad.github.com/js-tdd-erfaringer)
- [torgeir.github.com/busterjs-lightning-talk](http://torgeir.github.com/busterjs-lightning-talk)
- [roberto.github.com/ruby-sinform-2012](http://roberto.github.com/ruby-sinform-2012)
- [http://asmeurer.github.io/python3-presentation/slides.html](http://asmeurer.github.io/python3-presentation/slides.html)
### Other systems integrating with remark
- [http://platon.io](http://platon.io)
- [http://markdowner.com](http://markdowner.com)
- [http://remarks.sinaapp.com](http://remarks.sinaapp.com/)
### Credits
- [torgeir](http://github.com/torgeir), for invaluable advice and feedback.
- [kjbekkelund](https://github.com/kjbekkelund), for numerous pull requests.
- [gureckis](https://github.com/gureckis), for several pull requests.
- [freakboy3742](https://github.com/freakboy3742), for several pull requests.
### License
remark is licensed under the MIT license. See LICENSE for further
details.

50
javascript/bower_components/remark/boilerplate-local.html vendored Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# My Awesome Presentation
???
Notes for the _first_ slide!
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
[NOTE]: Note that you need remark.js alongside this html file, but no internet connection.
---
# Introduction
</textarea>
<script src="out/remark.js" type="text/javascript">
</script>
<script type="text/javascript">
var slideshow = remark.create();
</script>
</body>
</html>

46
javascript/bower_components/remark/boilerplate-remote.html vendored Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# My Awesome Presentation
---
# Agenda
1. Introduction
2. Deep-dive
3. ...
[NOTE]: Note that you need active internet connection to access remark.js script file
---
# Introduction
</textarea>
<script src="http://gnab.github.io/remark/downloads/remark-0.5.9.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var slideshow = remark.create();
</script>
</body>
</html>

44
javascript/bower_components/remark/boilerplate-single.html vendored Normal file
View File

File diff suppressed because one or more lines are too long

31
javascript/bower_components/remark/bower.json vendored Normal file
View File

@ -0,0 +1,31 @@
{
"name": "remark",
"homepage": "http://remarkjs.com/",
"authors": [
"Ole Petter Bang <olepbang@gmail.com>"
],
"description": "A simple, in-browser, markdown-driven slideshow tool.",
"main": "out/remark.js",
"keywords": [
"Markdown",
"Slides"
],
"license": "MIT",
"ignore": [
".gitignore",
".gitmodules",
".jshintignore",
".jshintrc",
"HISTORY.md",
"LICENSE",
"make.js",
"Makefile",
"package.json",
"bower_components",
"node_modules",
"src",
"test",
"vendor",
"out/tests.js"
]
}

6491
javascript/bower_components/remark/out/remark.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
javascript/bower_components/remark/out/remark.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
javascript/cadoles-remark-macros.js Normal file
View File

@ -0,0 +1,10 @@
(function() {
remark.macros.include = function() {
var req = new XMLHttpRequest();
req.open('GET', this, false);
req.send();
return remark.convert(req.responseText.replace(/\r\n/g, '\n'));
};
}());

47
javascript/cadoles-theme.css Normal file
View File

@ -0,0 +1,47 @@
/* Thème Cadoles */
ul {
list-style: none;
}
ul li:before {
content: "\25B8 ";
color: #5379B4;
margin-right: 5px;
}
ul > li {
line-height: 1.5em;
}
.remark-slide-content {
background-image: url('../beamer-skel/img/banner01.png'), url('../beamer-skel/img/logo-cadoles-01.png');
background-position: top center, center 98% !important;
background-size: contain, 150px !important;
}
.remark-code-line {
font-size: 0.85em;
}
.cadoles-slide-title {
color: white;
float: left;
clear: right;
font-size: 50px;
margin-top: -40px;
margin-left: -50px;
margin-bottom: 50px;
}
.cadoles-slide-title:after {
content: '';
clear: both;
}
.cadoles-blue { color: #5379B4; }
.cadoles-clearfix { clear: both; }
.cadoles-list > ul { font-size: 1.5em; }
.cadoles-list > ul ul { font-size: 1em; }
.cadoles-small { font-size: 0.8em; }
.cadoles-xs { font-size: 0.7em; }