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

Ajout base formation Javascript

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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