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[EOLE]

View File

@ -1,7 +1,5 @@
# .cadoles-slide-title[Fonctions (1/3)]
.cadoles-clearfix[
# .cadoles-slide-title[Fonctions (1/4)]
**Déclaration et invocation**
]
```js
// Déclaration
function myFunc() {
@ -16,7 +14,7 @@ var myFunc2 = function() {
myFunc(); // -> 'Hello from myFunc'
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.
```js

View File

@ -1,10 +1,22 @@
# .cadoles-slide-title[Fonctions (2/3)]
# .cadoles-slide-title[Fonctions (2/4)]
.cadoles-clearfix[
**La variable `arguments`**
]
**Déclaration et portée des variables**
```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.
```js
function myFunc() {
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(); // 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
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-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);
- 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>
<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';
font-family: 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
}
h1, h2, h3 {
font-family: 'Caviar Dream', 'Droid Sans';
font-family: 'Caviar Dream', 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; }
</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 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({
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>
</body>
</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-list.cadoles-clearfix[
.cadoles-list[
- Variables
- Structures de contrôles
- Objets
- Fonctions
- 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-list.cadoles-clearfix[
.cadoles-list[
- Historique
- Le langage
@ -19,9 +19,9 @@
- Le langage
- Variables
- Structures de contrôles
- Objets
- Fonctions
- Tableaux
- Objets
- L'héritage prototypal
- Modularisation
- État des lieux

View File

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

View File

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

View File

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

View File

@ -1,8 +1,6 @@
# .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);

View File

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

View File

@ -1,17 +1,17 @@
# .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 être globale
myGlob = 'global';
// Elle peut changer de type de valeur en cours d'exécution
bar = 5
// Incrémentation...
bar += 1; // -> 6
bar -= 2; // -> 4

View File

@ -1,8 +1,6 @@
# .cadoles-slide-title[Variables (2/2)]
.cadoles-clearfix[
**Types**
]
```js
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;
}
.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-position: top center, center 98% !important;
background-size: contain, 150px !important;
background-position: top center, center calc(100% - 10px) !important;
background-size: contain, 100px !important;
background-repeat: no-repeat;
}
.remark-slide-content {
background-color: transparent;
}
.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 {
color: white;
float: left;
@ -31,12 +48,7 @@ ul > li {
font-size: 50px;
margin-top: -40px;
margin-left: -50px;
margin-bottom: 50px;
}
.cadoles-slide-title:after {
content: '';
clear: both;
display: inline-block;
}
.cadoles-blue { color: #5379B4; }