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

Corrections typo + exo VanillaTodos complet

This commit is contained in:
wpetit 2015-04-01 15:11:13 +02:00
parent 16cf72bb59
commit 9a2452b334
8 changed files with 121 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
javascript/base/exercices/vanilla-todos/index.html
View File

@ -1,32 +1,33 @@
<html> <html>
<head> <head>
<meta charset="utf8">
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Vanilla Todos</h1> <h1><img class="logo" src="../../img/vanilla.png" /> Vanilla Todos</h1>
<div id="vanilla-todos"> <div id="vanilla-todos">
<table> <table>
<thead> <thead>
<tr> <tr>
<th colspan="2"> <th colspan="2">
<input class="search-todos" type="text" placeholder="Filter todos..." /> <input class="search-todos" type="text" placeholder="Filtrer les tâches..." />
</th> </th>
</tr> </tr>
<tr> <tr>
<th>Todo</th> <th>Mes tâches</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody class="todos-list"> <tbody class="todos-list">
<tr> <tr>
<td colspan="2">Aucune todo pour le moment !</td> <td colspan="2" class="no-todo">Pas de tâches pour le moment !</td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2"> <td colspan="2">
<input class="new-todo" type="text" /> <input class="new-todo" type="text" placeholder="Créer une nouvelle tâche..."/>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>

60
javascript/base/exercices/vanilla-todos/style.css
View File

@ -1,4 +1,62 @@
body {
font-family: "Droid Sans", "sans-serif";
font-size: 16px;
background-color: #F8F8F8;
color: #333;
}
.container { .container {
margin: 0 auto;
width: 80%;
}
.logo {
transform: rotate(45deg);
height: 40px;
display: inline-block;
vertical-align: bottom;
margin-right: 5px;
}
#vanilla-todos {
width: 100%;
}
#vanilla-todos table {
width: 100%;
text-align: left;
border-collapse: collapse;
}
#vanilla-todos tr {
height: 40px;
}
#vanilla-todos tr:hover {
background-color: #f4F4F4;
}
#vanilla-todos tbody td {
border-bottom: 1px solid #CCC;
}
#vanilla-todos tbody tr:last-child td {
border-bottom: none;
}
#vanilla-todos table td:last-child {
width: 100px;
}
#vanilla-todos .no-todo {
text-align: center;
}
#vanilla-todos input[type="text"] {
border-radius: 3px;
border: 1px solid #ccc;
height: 40px;
padding: 3px 10px;
width: 100%;
} }

54
javascript/base/exercices/vanilla-todos/vanilla-todos.js
View File

@ -5,8 +5,11 @@
// Déclaration des variables // Déclaration des variables
var _rootEl; // Élement racine de notre application var _rootEl; // Élement racine de notre application
var _todos = []; // Notre liste de todos var _todos = []; // Notre liste de todos
var document = window.document; // Alias
// API publique /*
* API publique
*/
/* /*
* "Monte" l'application VanillaTodo sur l'élément du DOM * "Monte" l'application VanillaTodo sur l'élément du DOM
@ -14,18 +17,23 @@
*/ */
VT.mount = function(selector) { VT.mount = function(selector) {
_rootEl = window.document.querySelector(selector); _rootEl = document.querySelector(selector);
if(!_rootEl) { if(!_rootEl) {
throw new Error('Invalid selector "'+selector+'" !'); throw new Error('Invalid selector "'+selector+'" !');
} }
_initHandlers(); _initHandlers();
_renderTodos(); _todos = _loadTodos();
if(_todos.length > 0) {
_renderTodos();
}
}; };
// API privée /*
* API privée
*/
function _initHandlers() { function _initHandlers() {
@ -34,8 +42,25 @@
var searchInput = _rootEl.querySelector('.search-todos'); var searchInput = _rootEl.querySelector('.search-todos');
searchInput.addEventListener('keyup', _searchInputChangeHandler); searchInput.addEventListener('keyup', _searchInputChangeHandler);
//searchInput.addEventListener('change', _searchInputChangeHandler);
// Délégation d'évènement, voir _removeTodoClickHandler
_rootEl.addEventListener('click', _removeTodoClickHandler);
}
function _removeTodoClickHandler(evt){
if(evt.target.matches('a.remove-todo')) {
var todoId = evt.target.dataset.todoId;
var todo;
for(var i = 0; i < _todos.length; ++i) {
todo = _todos[i];
if(todo.id == todoId) {
_todos.splice(i, 1);
_renderTodos(_todos);
_saveTodos(_todos);
}
}
}
} }
function _searchInputChangeHandler(evt) { function _searchInputChangeHandler(evt) {
@ -64,6 +89,7 @@
var newTodoInput = evt.currentTarget; var newTodoInput = evt.currentTarget;
var todo = { var todo = {
id: Date.now(),
text: newTodoInput.value text: newTodoInput.value
}; };
@ -73,6 +99,8 @@
_renderTodos(_todos); _renderTodos(_todos);
_saveTodos(_todos);
} }
function _renderTodos(todos) { function _renderTodos(todos) {
@ -105,8 +133,24 @@
function _createActionsCell(todo) { function _createActionsCell(todo) {
var cell = document.createElement('td'); var cell = document.createElement('td');
var removeLink = document.createElement('a');
removeLink.href = '#';
removeLink.className = "remove-todo";
removeLink.dataset.todoId = todo.id;
removeLink.innerHTML = 'Supprimer';
cell.appendChild(removeLink);
return cell; return cell;
} }
function _loadTodos() {
var todosStr = window.localStorage.getItem('vanillaTodos.todos');
return JSON.parse(todosStr || '[]');
}
function _saveTodos(todos) {
var todosStr = JSON.stringify(todos);
window.localStorage.setItem('vanillaTodos.todos', todosStr);
}
}(this.VanillaTodos = this.VanillaTodos || {}, window)); }(this.VanillaTodos = this.VanillaTodos || {}, window));

4
javascript/base/fonctions-4.md
View File

@ -9,13 +9,13 @@ var showThisAndArgs = function() {
showThisAndArgs(); // -> Window, [] showThisAndArgs(); // -> Window, []
// Lier un fonction à un contexte // Lier une fonction à un contexte
var myContext = {}; var myContext = {};
var bound = showThisAndArgs.bind(myContext); var bound = showThisAndArgs.bind(myContext);
bound(); // -> myContext, [] bound(); // -> myContext, []
// Invoquer une fonction en modifiant son contexte et/en injectant des arguments // Invoquer une fonction en modifiant son contexte et/ou en injectant des arguments
showThisAndArgs.call(myContext, 'arg1', 'arg2'); // -> myContext, ['arg1', 'arg2'] showThisAndArgs.call(myContext, 'arg1', 'arg2'); // -> myContext, ['arg1', 'arg2']
showThisAndArgs.apply(myContext, ['arg1', 'arg2']); // -> myContext, ['arg1', 'arg2'] showThisAndArgs.apply(myContext, ['arg1', 'arg2']); // -> myContext, ['arg1', 'arg2']

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

@ -3,5 +3,5 @@
.cadoles-list[ .cadoles-list[
- Javascript (jusqu'à ES6) n'intègre pas de mécanisme particulier afin de modulariser le code. - Javascript (jusqu'à ES6) n'intègre pas de mécanisme particulier afin de modulariser le code.
- L'envergure des projets Javascript devenant de plus en plus importante, différentes méthodes ont vu le jour dans les projets portées par la communauté. - L'envergure des projets Javascript devenant de plus en plus importante, différentes méthodes ont vu le jour dans les projets portées par la communauté.
- Certaines sont accompagnées de spécification facilitant l'inter-opérabilité des projets, d'autres tiennent plus de la convention. - Certaines sont accompagnées de spécification facilitant l'interopérabilité des projets, d'autres tiennent plus de la convention.
] ]

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

@ -4,7 +4,8 @@
- Simple à mettre en place, méthode très répandue (ex: jQuery) - Simple à mettre en place, méthode très répandue (ex: jQuery)
- Peu de surcoût d'exécution - Peu de surcoût d'exécution
- Pas de transformation à apporter au code pour le rendre exécutable dans le navigateur - Pas de transformation à apporter au code pour le rendre exécutable dans le navigateur
- Interopérable avec les autres systèmes de modularisation via [UMD](https://github.com/umdjs/umd)
**Désavantages** **Désavantages**
- Beaucoup de variantes, avec parfois des comportements légèrement différents - Beaucoup de variantes, avec parfois des comportements légèrement différents
- Ne gère par les dépendances - Ne gère pas directement les dépendances

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

@ -2,7 +2,7 @@
**Avantages** **Avantages**
- Gestion et injection des dépendances - Gestion et injection des dépendances
- Inter-opérable avec les autres méthodes de modularisation via configuration - Interopé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" (Exemple: [requirejs](http://requirejs.org/)) 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 - "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...) - Possibilité de charger des ressources autres que du Javascript via un mécanisme de plugin (ressources type texte, templates, etc...)

2
javascript/base/structures-1.md
View File

@ -9,7 +9,7 @@ var test = 1;
if(test < 1) { if(test < 1) {
console.log('test est strictement inférieur à 1'); console.log('test est strictement inférieur à 1');
} else if(test > 1) { } else if(test > 1) {
console.log('test est strictement supérieur à 2'); console.log('test est strictement supérieur à 1');
} else { } else {
console.log('test est égal à 1'); console.log('test est égal à 1');
} }