Formation JS, ajout slides suppl.

This commit is contained in:
wpetit 2015-03-26 17:36:34 +01:00 committed by Benjamin Bohard
parent a041e90b70
commit 95b99232a6
22 changed files with 224 additions and 94 deletions

View File

@ -1,3 +1,5 @@
class: middle, center
# .cadoles-blue[Formation Javascript] # .cadoles-blue[Formation Javascript]
## .cadoles-blue[EOLE] ## .cadoles-blue[EOLE]

View File

@ -1,7 +1,5 @@
# .cadoles-slide-title[Fonctions (1/3)] # .cadoles-slide-title[Fonctions (1/4)]
.cadoles-clearfix[
**Déclaration et invocation** **Déclaration et invocation**
]
```js ```js
// Déclaration // Déclaration
function myFunc() { function myFunc() {
@ -16,7 +14,7 @@ var myFunc2 = function() {
myFunc(); // -> 'Hello from myFunc' myFunc(); // -> 'Hello from myFunc'
myFunc2(); // -> 'Hello from myFunc2' myFunc2(); // -> 'Hello from myFunc2'
``` ```
**Arguments** **Les arguments**
Comme les variables, les arguments d'une fonction en Javascript ne sont pas typés, et leur nombre n'est pas fixe. Comme les variables, les arguments d'une fonction en Javascript ne sont pas typés, et leur nombre n'est pas fixe.
```js ```js

View File

@ -1,10 +1,22 @@
# .cadoles-slide-title[Fonctions (2/3)] # .cadoles-slide-title[Fonctions (2/4)]
.cadoles-clearfix[ **Déclaration et portée des variables**
**La variable `arguments`** ```js
] var outer = 'foo';
var myFunc = function() {
var inner = 'bar';
console.log(outer, inner);
};
console.log(inner) // -> Soulève une erreur, variable non définie
myFunc(); // -> 'foo' 'bar';
```
**La variable spéciale `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. 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 ```js
function myFunc() { function myFunc() {
console.log(arguments.length, arguments[0], arguments[1]); console.log(arguments.length, arguments[0], arguments[1]);
@ -13,6 +25,3 @@ function myFunc() {
myFunc('arg1', 'arg2'); // Affiche '2 "arg1" "arg2"' dans la console myFunc('arg1', 'arg2'); // Affiche '2 "arg1" "arg2"' dans la console
myFunc(); // Affiche '0 undefined undefined' 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.

View File

@ -1,8 +1,24 @@
# .cadoles-slide-title[Fonctions (3/3)] # .cadoles-slide-title[Fonctions (3/4)]
**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.
Ce contexte est **dynamique** selon la méthode d'invocation de la fonction.
.cadoles-clearfix[
**"Levage" de fonctions**
]
```js ```js
console.log(this); // -> Window
var showThis = function() {
console.log(this);
};
showThis(); // -> Window
var obj = {
"showThis": showThis
};
obj.showThis(); // -> obj
``` ```

View File

@ -0,0 +1,23 @@
# .cadoles-slide-title[Fonctions (4/4)]
**Manipulation du contexte d'exécution et injection d'arguments**
```js
var showThisAndArgs = function() {
console.log(this, arguments);
};
showThisAndArgs(); // -> Window, []
// Lier un fonction à un contexte
var myContext = {};
var bound = showThisAndArgs.bind(myContext);
bound(); // -> myContext, []
// Invoquer une fonction en modifiant son contexte et/en injectant des arguments
showThisAndArgs.call(myContext, 'arg1', 'arg2'); // -> myContext, ['arg1', 'arg2']
showThisAndArgs.apply(myContext, ['arg1', 'arg2']); // -> myContext, ['arg1', 'arg2']
```

View File

@ -0,0 +1,29 @@
# .cadoles-slide-title[Héritage et chaîne prototypale]
Javascript est un langage objet orienté **prototype**.
**Constructeur et opérateur `new`**
```js
function Person(name) {
this.name = name;
}
// "Méthode" d'instance
Person.prototype.sayHello = function() {
return 'Hello, my name is ' + this.name;
};
// On créait une instance de Person
var p = new Person('John Doe');
console.log(p.name);
console.log(p.sayHello()); // -> 'Hello, my name is John Doe'
```
**Ce qui peut déstabiliser:**
.cadoles-list.cadoles-small[
- Les méthodes et propriétées privées n'existent pas.
- Le prototype d'un objet peut être modifié/remplacé en cours d'exécution (les objets **déjà** seront également impactés).
]

View File

@ -1,6 +1,6 @@
# .cadoles-slide-title[Historique] # .cadoles-slide-title[Historique]
.cadoles-list.cadoles-clearfix[ .cadoles-list[
- Créé en 1995 par [Brendan Eich](https://fr.wikipedia.org/wiki/Brendan_Eich) pour [Netscape](https://fr.wikipedia.org/wiki/Netscape_Communications); - 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; - Normalisé par le standard [ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript) en juin 1997;

View File

@ -4,28 +4,55 @@
<title>Cadoles - Formation Javascript</title> <title>Cadoles - Formation Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css"> <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 { body {
font-family: 'Droid Sans'; font-family: 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
} }
h1, h2, h3 { h1, h2, h3 {
font-family: 'Caviar Dream', 'Droid Sans'; font-family: 'Caviar Dream', 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
font-weight: normal; font-weight: normal;
} }
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; } .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; }
</style> </style>
<link href="../cadoles-theme.css" rel="stylesheet"> <link href="../cadoles-theme.css" rel="stylesheet">
</head> </head>
<body> <body>
<script src="../bower_components/remark/out/remark.js"></script> <script src="../bower_components/remark/out/remark.js"></script>
<script src="../cadoles-remark-macros.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var slides = [
'cover',
'plan',
'historique',
'langage',
'variables-1',
'variables-2',
'structures-1',
'structures-2',
'structures-3',
'objets-1',
'objets-2',
'fonctions-1',
'fonctions-2',
'fonctions-3',
'fonctions-4',
'tableaux-1',
'tableaux-2',
'heritage-1'
];
var slideshow = remark.create({ var slideshow = remark.create({
sourceUrl: 'index.md' source: slides.map(fetchSlide).join('\n---\n'),
highlightStyle: 'github',
highlightLanguage: 'javascript'
}); });
function fetchSlide(slideName) {
var req = new XMLHttpRequest();
req.open('GET', slideName+'.md', false);
req.send();
return req.responseText.replace(/\r\n/g, '\n');
};
</script> </script>
</body> </body>
</html> </html>

View File

@ -1,28 +0,0 @@
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)

View File

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

View File

@ -0,0 +1,32 @@
# .cadoles-slide-title[Objets (1/2)]
**Déclaration et manipulation**
```js
// Notation Javascript classique
var obj = {
pro1: 1,
prop2: {
subProp1: "foo"
},
prop3: "bar",
prop4: function() { console.log('Hello Word !'); }
};
// Notation JSON stricte
obj = {
"pro1": 1,
"prop2": {
"subProp1": "foo"
},
"prop3": "bar",
"prop4": function() { console.log('Hello Word !'); }
};
// Accès et manipulation des propriétés
obj.prop1 = 2;
obj['prop1'] = 3;
obj.prop2.subProp1 = "hello world !";
obj['prop2']['subProp1'] = "hello world !";
obj.prop4();
```

View File

@ -0,0 +1,31 @@
# .cadoles-slide-title[Objets (2/2)]
**Itération sur les propriétés**
```js
var obj = {
pro1: 1,
prop2: 'test',
prop3: {}
};
// Boucle for..in
var value;
for(var key in obj) {
if( obj.hasOwnProperty(key) ) {
value = obj[key];
console.log('Key: ', key, 'Value:', value);
}
}
// Méthode Object.keys()
Object.keys(obj)
.forEach(function(key) {
var value = obj[key];
console.log('Key: ', key, 'Value:', value);
})
;
```

View File

@ -1,6 +1,6 @@
# .cadoles-slide-title[Plan] # .cadoles-slide-title[Plan]
.cadoles-list.cadoles-clearfix[ .cadoles-list[
- Historique - Historique
- Le langage - Le langage
@ -19,9 +19,9 @@
- Le langage - Le langage
- Variables - Variables
- Structures de contrôles - Structures de contrôles
- Objets
- Fonctions - Fonctions
- Tableaux - Tableaux
- Objets
- L'héritage prototypal - L'héritage prototypal
- Modularisation - Modularisation
- État des lieux - État des lieux

View File

@ -1,8 +1,6 @@
# .cadoles-slide-title[ Structures de contrôle (1/3) ] # .cadoles-slide-title[ Structures de contrôle (1/3) ]
.cadoles-clearfix[
**Tests et conditions** **Tests et conditions**
]
```js ```js
// Opérateurs de comparaison: <, >, >=, <=, ==, ===, !=, !== // Opérateurs de comparaison: <, >, >=, <=, ==, ===, !=, !==

View File

@ -1,8 +1,6 @@
# .cadoles-slide-title[Structures de contrôle (2/3)] # .cadoles-slide-title[Structures de contrôle (2/3)]
.cadoles-clearfix[
**Tests, transitivité, égalité stricte et petites subtilités** **Tests, transitivité, égalité stricte et petites subtilités**
]
```js ```js
var test; var test;

View File

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

View File

@ -1,8 +1,6 @@
# .cadoles-slide-title[Tableaux (1/2)] # .cadoles-slide-title[Tableaux (1/2)]
.cadoles-clearfix[
**Différentes notations** **Différentes notations**
]
```js ```js
var arr = [1, 2, 3]; // A préférer var arr = [1, 2, 3]; // A préférer
arr = new Array(1, 2, 3); arr = new Array(1, 2, 3);

View File

@ -1,8 +1,5 @@
# .cadoles-slide-title[Tableaux (2/2)] # .cadoles-slide-title[Tableaux (2/2)]
.cadoles-clearfix[
**Méthodes de parcours et transformations** **Méthodes de parcours et transformations**
]
```js ```js
var arr = [1, 2, 3]; var arr = [1, 2, 3];

View File

@ -1,17 +1,17 @@
# .cadoles-slide-title[Variables (1/2)] # .cadoles-slide-title[Variables (1/2)]
.cadoles-clearfix[
Javascript est un langage **faiblement typé**. Javascript est un langage **faiblement typé**.
]
```js ```js
var foo; // Une variable peut être déclarée, avec ou sans valeur var foo; // Une variable peut être déclarée, avec ou sans valeur
var bar = 'hello world !'; var bar = 'hello world !';
// Elle peut être globale
myGlob = 'global';
// Elle peut changer de type de valeur en cours d'exécution // Elle peut changer de type de valeur en cours d'exécution
bar = 5 bar = 5
// Incrémentation... // Incrémentation...
bar += 1; // -> 6 bar += 1; // -> 6
bar -= 2; // -> 4 bar -= 2; // -> 4

View File

@ -1,8 +1,6 @@
# .cadoles-slide-title[Variables (2/2)] # .cadoles-slide-title[Variables (2/2)]
.cadoles-clearfix[
**Types** **Types**
]
```js ```js
var foo; var foo;

View File

@ -1,10 +0,0 @@
(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'));
};
}());

View File

@ -14,16 +14,33 @@ ul > li {
line-height: 1.5em; line-height: 1.5em;
} }
.remark-slide-content { .remark-slide {
background-color: white;
background-image: url('../beamer-skel/img/banner01.png'), url('../beamer-skel/img/logo-cadoles-01.png'); background-image: url('../beamer-skel/img/banner01.png'), url('../beamer-skel/img/logo-cadoles-01.png');
background-position: top center, center 98% !important; background-position: top center, center calc(100% - 10px) !important;
background-size: contain, 150px !important; background-size: contain, 100px !important;
background-repeat: no-repeat;
}
.remark-slide-content {
background-color: transparent;
} }
.remark-code-line { .remark-code-line {
font-size: 0.85em; font-size: 0.80em;
} }
.remark-slide-content h1:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.remark-slide-content h1 { display: inline-block; }
.cadoles-slide-title { .cadoles-slide-title {
color: white; color: white;
float: left; float: left;
@ -31,12 +48,7 @@ ul > li {
font-size: 50px; font-size: 50px;
margin-top: -40px; margin-top: -40px;
margin-left: -50px; margin-left: -50px;
margin-bottom: 50px; display: inline-block;
}
.cadoles-slide-title:after {
content: '';
clear: both;
} }
.cadoles-blue { color: #5379B4; } .cadoles-blue { color: #5379B4; }