La balise output existe aussi !

Pour en savoir plus sur la balise <output>
Exemple plus complexe :

Order Details

Product Code	Description	Price	Total
COMP001	The Ultimate book	$100	$0
COMP002	The Ultimate Netbook	$299	$0
Order Total			$0.00

JS Bin

Foundation: http://foundation.zurb.com/

Yaml: http://www.yaml.de/

960 Grid: http://960.gs/

Suzy: http://susy.oddbird.net/

Frameless: http://framelessgrid.com/

Bootstrap: http://getbootstrap.com/

Normaliser le CSS

Pour éviter des comportement dépendant des navigateurs anciens.

Utilisation de la mise à zéro des CSS

Flex : un bug !

En utilisant Mozilla cette présentation ne marche pas : trouvez le bug.

Installation SASS

Vous devez d'abord installer ruby

Dans une fenêtre de promt : $ gem install sass

Installation de ruby

Vérifier la version

downloads

Cocher les options si nécessaire.

Rechercher dans vos programme Ruby et lancer un prompt.

Installation nodejs

Son installation ne pose pas de problème particulier :
http://nodejs.org/

Notez l'installation de npm le chargeur d’extensions.

Vérifiez sa version

input : message perso !

Afficher un message en fonction des entrées exemple de code

Test

On peut facilement mettre en place un test. JS Bin

HTML

JS

function assert(pass, msg){

var type = pass ? "VRAI" : "FAUX";
var newLI = document.createElement("li");
var ulTag = document.querySelector("#results");

newLI.innerHTML="<li class='" + type + "'>
<b>" + type + "</b> " + msg +
"</li>";
ulTag.appendChild(newLI);
}

CSS

.VRAI{

color: green;

}

.FAUX{

color: red;

}

Retour sur un classique des regExp

Nous savons que nous pouvons utiliser classList pour connaitre si une classe fait partie d'un élément.

element.classList.contains('cssClass');

Mais avant ?

Plus d'infos »

Extention pour Chrome

testez cette extension sur un site comme http://getbootstrap.com/

Editeur : Sublime Text 3

Lancez l'application et enregistrer sous : index.html

Tapez uniquement HTML puis tab

Lecture :
tips

Installation des package Control permet de mettre à jour l'editeur !

Installation de plugins

dans votre éditeur tapez :

Tapez : autoprefixer (en bas un message indique que le package est installé)

Créer un fichier CSS

tapez ctrl shift p, puis selectionner : autoprefix CC

package ?

https://sublime.wbond.net/browse

Les événements en action

Partie code :

var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');

for(var i = 0; i < tabBtns.length; i++) {
tabBtns[i].addEventListener('click',
onTabClick(i, tabBtns[i]), true);
}

function onTabClick(index, btn) {
return function(e) {
currentSelectedTab = index;
selectTab(btn);
};
}

function selectTab(btn) {
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
if(currentTab) {
currentTab.classList.remove('selected');
}
btn.classList.add('selected');
}

Partie test

var currentSelectedTab = 0;

countUp = function () {
currentSelectedTab++;
currentSelectedTab=currentSelectedTab%tabBtns.length;
console.log( currentSelectedTab );
selectTab(tabBtns[currentSelectedTab]);
};

var anim = setInterval( countUp, 1000 );

// on peut mettre un bouton : ici action sur le body
var stopBtn = document.querySelector('body');

stopBtn.addEventListener('click',function(){clearInterval(anim);},true);

JS Bin

Les évenements en JS

Nous avons déjà vu les pièges à éviter lors de l'écriture de la gestion d'événements.

perte du this,
passage de paramètres.

Voici un exemple des problèmes de passage de paramètres :
Voici donc comment écrire la gestion d'événements en Javascript.

Pré-requis : La compréhension fait appel à la notion de closure.

Pour exemple, nous simulons un comportement basique (code jquery)
$( "p" ).on( "click", function() {
$(this).toggleClass("selected");
});

En JavaScript
for (var i = 0; i < ps.length; i++) {
ps[i].addEventListener("click", function(){
this.classList.toggle('selected');
}, true);
}

Allons plus loin.Nous voulons manipuler l'objet cliqué et connaître son indice.

Voici le code en JS (code que nous allons rendre beaucoup plus compréhensif par la suite)
(function(){
var zone = document.body.querySelector("div");
var zonePs = zone.querySelectorAll('p','div');

for (var i = 0; i < zonePs.length; i++) {
zonePs[i].addEventListener("click",
(function(index, para){
return function(e) {
console.log("nb =" + index);
para.classList.toggle('selected');
};
})(i,zonePs[i]),
true);
}
})();

Nous allons décomposer le code en trois étapes

sélection
closure
action

Etape de sélection

var zone = document.body.querySelector("div");

var zonePs = zone.querySelectorAll('p');

Ecriture de la closure

L'idée est simple, la closure va permettre de rendre accessibles à une fonction (portée des variables) des paramètres.

Les paramètres sont ici le paragraphe et son numéro dans la liste des paragraphe à traiter.
La fonction est l'action a réaliser lors du clique.

Par défaut seul l'événement est disponible dans la fonction action, la closure rajoute des variables supplémentaires (par exemple : le numéro de paragraphe et l'identifiant).

Sans closure seul l'événement est accessible à l'action

Grace à la closure, d'autres paramètres sont disponibles

for (var i = 0; i < zonePs.length; i++) {
zonePs[i].addEventListener("click",
closure(i, zonePs[i]),
true);

}

Remarquez que la fonction closure est immédiatement exécutée.

function closure(index, para) {
//closure index et para dispo pour la fonction suivante
console.log("closure index = "+ index);
console.log("closure type = "+ para.nodeName);

//déclaration d'une fonction anonyme actionnée lors du clic
return function(e) {
console.log(e.type + " index = "+ index);
console.log(e.type + " typeNode " + para.nodeName);
action(para);
};

}

Ainsi, lors de l'exécution de la boucle, on exécute deux fois la fonction closure.

Exemple d'application :

Remarque

L'arrivée de Array.from et de la délégation permet de simplifier le code et diminue le nombre d'événement à écrire.

Simuler des appareils photos ou tablettes !

La balise template existe.

En 2008, J. Resig écrivait un post JavaScript Micro-Templating.

Pour résumer, on ecrit un template sous la forme

<script type="text/html" id="user_tmpl">
<% for ( var i = 0; i < users.length; i++ ) { %>
<li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
<% } %>
</script>

L'appel à une fonction va d'abord transformer grâce aux expression régulières le code puis l'exécuter.
La transformation sera sous la forme :

var p=[];

for ( var i = 0; i < users.length; i++ ) {

p.push('<li><a href="' + users[i].url + '">' + users[i].name + '</a></li>');

}

p.join(';');

Depuis, les bibliothèques ont facilité la prise en charge de code répétitif.

Aujourd'hui, la balise <template> existe.

See the Pen PozwqBK by dupont (@dupontcodepen) on CodePen.

JS Bin
Ref (voir exemple).
http://www.w3.org/TR/html5/scripting-1.html#template-contents

Les tableaux

article

Facture

Prérequis

les événements : Attention au passage de paramètres

Construire la table suivante.

Les inputs seront de la forme ;

Pour formater les totaux on pourra utiliser la fonction

var formatMoney = function(value) {

   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

Aide : 

version Jquery

Version JS

Remarque : pas de MVC

JS Bin

Découvrez les nouveaux types d'input

Input Types

type="color" value:

type="date" value:

type="email" value:

type="number" value:

type="range" value:

type="time" value:

type="url" value:

datalist value:

remarque : Autre code pour modifier les valeurs

Vérification par les patterns

2ab : (* = 0 ; d = 2)
a2b : (* = 1)
ab2 : (* = 2)
abc : (erreur)

2ab : (* = 1)
a2b : (* = 0)
ab2 : (* = 0)
222 : (erreur)

Nous pourrons écrire pattern="^(?=.*[a-z])(?=.*[\d]).*$" pour vérifier les conditions au moins un caractère et un nombre.

(?=.{8,}) : au - 8 Entrées
(?=.*[A-Z]) : au - 1 Majuscule
(?=.*[\W]) : au - 1 Caractère Spécial/li>

Découvrez une liste de patterns : https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation

TD

Pages