1. Keypress, c'est quoi ?

C'est tout simplement une bibliothèque javascript qui vous permet d'intercepter toutes les touches pressées au clavier et d'effectuer une action en conséquence.

Exemple: Utilisez les flèches du clavier pour déplacer le cadre rouge.

2. Mise en place

Comme toujours, il faut charger un script. Téléchargez keypress-2.0.3.min.js et enregistrez le parmi les fichiers de votre blog. 

Récupérez l'url du fichier puis chargez le comme ceci:

<script src="url de keypress-2.0.3.min.js"></script>

3. Utilisation

Exemple 1:Faire une action lorsqu'une touche est pressée

<script>
onJSFilesLoaded.push(function(){
    var listener = new window.keypress.Listener();listener.simple_combo("b", function() {
    alert ("Vous avez pressé la touche b");
   });
});</script>

Ce code est très simple. Lors de l'appui sur la touche b, une fonction de callback est appelée et dans notre cas, elle affiche une fenêtre qui nous dit que l'on a appuyé sur la touche b.

Exemple 2: Détecter une combinaison de touches

Il est tout aussi possible de détecter une combinaison de touches par exemple Maj+l (faites l'essai). Dans ce cas on écrira:

var listener = new window.keypress.Listener();listener.simple_combo("shift l", function() {
   alert ('Bravo vous avez bien suivi :)');
   });

Exemple3: Compter le nombre de pressions

Si vous appuyez sur Maj et m, alors je vous dit que vous l'avez fait 0 fois

var listn=new window.keypress.Listener();listener.counting_combo("shift m", function(e, count) {
    $('n').innerHTML= count;
});

Exemple 4: Réagir à une séquence

Appuyez successivement sur les touches a b c d e f puis la touche entrée pour voir apparaître un message.

var listx=new window.keypress.Listener();listener.sequence_combo("a b c d e f enter", function() {
   $('hiddendiv').setStyle("display",'block');
}, true);

Je ne vous ai donné qu'un apperçu de Keypress mais sachez qu'il existe d'autres possibilités et options sur la page officielle de Keypress

Pour une liste complète des touches, suivez ce lien:https://github.com/dmauro/Keypress/blob/master/keypress.coffee#L728-864

Si vous n'avez jamais entendu parler de javascript, alors tout ce qui est dans ce blog n'est pas pour vous. Ou plus exactement, il n'est pas le plus à même pour vous apprendre le javascript.

Par contre, si vous avez commencé à tripatouiller le javascript, vous savez qu'il permet de faire quantité de choses mais d'une manière pas toujours simple. Le javascript est un langage orienté objet et qui s'exécute du coté client donc sur votre machine. (Nota: il existe bien un javascript exécutable coté serveur, NodeJS, mais c'est une autre histoire).

Ecrire ou lire un code javascript n'est pas toujours facile et même parfois très long. Il est sensible à la casse et il est souvent nécessaire de faire de nombreux essais avant d'obtenir un code valide, d'où l'émergence de nombreuses librairies pour nous simplifier la vie en proposant des fonctions utiles ou une écriture raccourcie du code.

Par exemple, si on souhaite accéder à une balise qui a l'id 'mabalise'

En javascript traditionnel on écrira:

document.getElementById("mabalise")

Alors qu'en utilisant la librairie Mootools (déjà incluse dans les blogs Eklablog) on écrira:

$('mabalise')

Et il existe pléthore de librairies. Que l'on souhaite manipuler le DOM, les dates, des objets graphiques 3d, du son ou de la vidéo, il y a toujours une bibliothèque adaptée à votre besoin.

Je vais donc vous présenter sur ce blog des librairies qui sont compatibles avec Eklablog et surtout, la manière de les intégrer et de les utiliser en donnant quelques exemples. 

Vous pouvez avoir un aperçu des meilleures librairies javascript sur JavaScripting.com (en anglais).

Vous retrouverez dans le menu de droite l'ensemble des bibliothèques déjà expliquées au sein du blog alors bonne lecture !

1. Cibler un élément du DOM

Mootools étant intégré dans nos blogs, il est très facile de cibler un élément.

Pour un élément unique ayant une id, il suffit de le cibler comme ceci:

$("idelement")

Pour cibler les éléments d'une classe on procedera comme ceci:

$$("classeelement")

$$("classeelement")[0] ciblera le premier
$$("classeelement")[1] ciblera le second etc.

 On peut aussi cibler tout autre élément comme ci dessous les balises de lien a

$$("a")

 On peut aussi cibler de manière très précise. Par exemple les liens "a" qui ont la classe "maclasse" et qui se trouve dans l'élément d'id "monid"

$$("#monid a.maclasse")

2. Placer une balise non reconnue par l'éditeur

Nos blogs sont éditables à l'aide de TinyMCE. Seulement, ses limitations ou celles mises en place par le staff d'Eklablog ne permettent pas toujours de placer les balises que l'on souhaite.

Par exemple, si vous voulez mettre en place une balise SVG comme ci-dessous, vous n'y arriverez pas.

<svg><rect id="rect" width="25" height="25"" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" /></svg>

Il va donc falloir le faire dynamiquement à l'aide du javascript. Pour cela, on va créer une balise (par exemple une div) qui va servir à recevoir la balise svg.

On va lui donner une id afin de pouvoir la cibler facilement et on va modifier son contenu à l'aide d'un petit script.

<div id="conteneur"> </div>
<script>
onJSFilesLoaded.push(function(){
$("conteneur").innerHTML='<svg><rect id="rect" width="25" height="25"" x="10%" y="10%" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" /></svg>';
});
</script>

3. Ajouter un évènement sur un élément du DOM

Il est souvent intéressant de faire réagir un élément à un événement du visiteur comme par exemple un clic de souris. Le code ci-dessous va afficher un message à chaque fois que vous cliquerez sur un des titres de cette page.

<div id="conteneur"> </div>
<script>
onJSFilesLoaded.push(function(){
$$('h3').addEvent('click', function(){
    alert('Vous avez cliqué sur un élément h3');
});
});
</script>

4. window.onload ou onJSFilesLoaded

Peut-être ne le savez vous pas mais le javascript est exécuté dès que le navigateur le lit. Aussi il est tout à fait possible que le javascript agisse sur un élément du DOM qui n'a pas encore été chargé par le navigateur. Dans ce cas, une erreur apparaît et le script ne fonctionnera pas.

Il devient dans ce cas nécessaire d'obliger l'exécution du javascript une fois que toute la page est chargée.

La première possibilité est de placer le script avec window.onload. Cela fonctionne mais à condition qu'il n'y ait qu'un seul window.onload sur la page. Si ce n'est pas le cas, seul le code du dernier sera exécuté (me semble-t-il).

Exemple:

<script>
window.onload=function(){
  alert ('Bonjour');
};
</script>

Une autre solution consiste à utiliser une fonction d'Eklablog: onJSFilesLoaded. Dans ce cas, le script sera exécuté à la fin du chargement de la page mais présente l'intérêt d'être utilisé plusieurs fois

<script>
onJSFilesLoaded.push(function(){
 alert ('Bonjour');
});
</script>

1.Introduction

Qui n'a jamais eu à réaliser un graphique à partir d'une série de nombres ? Pour ma part j'en ai fait plus que de raison. Maintenant imaginez en réaliser un en le programmant en javascript. Bonjour la galère !

Mais ce n'est pas grave car des gens bien pensants ont réalisé Chartist.js, une bibliothèque javascript pour réaliser des graphiques sous forme de courbes, nuages de points, graphiques à barre ou camenberts. Et tout cela à l'aide de quelques lignes de code seulement.

Jugez en par vous même:

Ces graphiques ont été réalisés avec le code suivant:

var data = {
   labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'],
   series: [
    [18, 12, 2, -12, 0],
    [0, 5, 15, 16, 8],
    [-15, 12, 18, 11, -4]
  ]
};
Chartist.Line('.ct1', data);
var data = {
  series: [5, 3, 4]
};

var sum = function(a, b) { return a + b };

Chartist.Pie('.ct2', data, {
  labelInterpolationFnc: function(value) {
    return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
});
var data3 = {
  labels: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

var options = {
  seriesBarDistance: 10
};

var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

Chartist.Bar('.ct3', data3, options, responsiveOptions);

Et c'est tout ! Reconnaissez que c'est assez bluffant.

2. Mise en place

Tout d'abord, il vous faut récupérer les fichiers suivants:

• chartist.min.css
• chartist.min.js
• chartist.min.map

Placez chartist.min.js et chartist.min.map parmi les fichiers de votre blog.

Copiez le contenu de chartist.min.css et collez le dans Apparence/Modifier le thème/Ajouter du css

3. Utilisation

Lorsque vous souhaitez utiliser un graphique dans votre article ou dans votre page, chargez le script avec le code suivant en veillant à mettre l'url correspondant à votre fichier et en le mettant dans le code source de votre page/article ( bouton <> de l'éditeur):

<script src="http://ekladata.com/n9TxtVW6hpNT5chqHXrUpHtK0B0/chartist-min.js"></script>

A l'endroit ou vous souhaitez faire apparaître le graphique, créez une div en lui donnant les classes ct-chart et une classe pour le ratio (pas obligatoire - voir chapitre suivant). 

<div class="ct-chart ct-octave"> </div>

Enfin placez votre code javascript (de préférence à la fin de l'article ou de la page) comme ceci:

<script>
onJSFilesLoaded.push(function(){
var data = {
   labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'],
   series: [
    [18, 12, 2, -12, 0],
    [0, 5, 15, 16, 8],
    [-15, 12, 18, 11, -4]
  ]
};
Chartist.Line('.ct-chart', data);
});
</script>

4. Réglages

De nombreux ratios sont prédéfinis pour l'apparence de vos graphiques. Il suffit d'indiquer la classe correspondante à votre <div>

Moment.js est la librairie qu'il faut avoir pour manipuler des dates et/ou des heures. Voyez tout de suite un exemple:

Aujourd'hui nous sommes le: 

C'est le   ème jour de l'année

Nous sommes un  

 

Il reste   jours jusque Noel soit   heures

Ce sera le  

Cette bibliothèque permet toutes les manipulations possibles sur les dates.

1. Installation

Téléchargez le code javascript ici: http://momentjs.com/downloads/moment-with-locales.js

Enregistrez le sous le nom moment-with-locales.js puis placez le parmi les fichiers de votre blog.

Créez un module simple html puis placez y le code suivant en veillant à remplacer l'url par celle de votre fichier:

<script src="http://ekladata.com/pcsyQ3tk8KLClKiT8Hit03-VGFg/moment-with-locales.js"></script>

2. Exemples d'utilisation

Vous pouvez retrouver toutes les fonctions sur le site officiel (en anglais): http://momentjs.com/docs/

Ci-dessous quelques exemples des possibilités:

Afficher la date en français

moment.locale('fr');
moment().format( '  Do MMMM  YYYY');

Connaître le jour de l'année,  la semaine ou le mois

moment().dayOfYear();
moment().week();
moment.month();

Le jour de la semaine

 moment().format( 'dddd');

moment().add(7, 'days');

moment().subtract(27, 'days')

Je ne vais pas énumérer tout ce qu'il est possible de faire mais sachez que cette bibliothèque est extrêmement complète et permet aussi de gérer les Timestamp

Formatage: