Archives par mot-clé : Javascript

Trier un array en Javascript

Publié dans Snippet | Laisser un commentaire

Simple sort

var myArray = ["var2", "var1", "var3"];
console.log("Before:", myArray); // Output: "Before: ["var2", "var1", "var3"]"
myArray.sort();
console.log("After:", myArray); // Output: "After: ["var1", "var2", "var3"]"

More complex sort

var myComplexArray = [{"id":"3", "data":"var2"}, {"id":"2", "data":"var1"}, {"id":"1", "data":"var3"}];
console.log("Before:", myComplexArray ); // Output: "Before: [{"id":"3", "data":"var2"}, {"id":"2", "data":"var1"}, {"id":"1", "data":"var3"}]"
myComplexArray .sort(function(a, b){ return a.id < b.id; });
console.log("After:", myComplexArray ); // Output: "After: [{"id":"1", "data":"var3"}, {"id":"2", "data":"var1"}, {"id":"3", "data":"var2"}]"

DateTimePicker : différentes solutions

Publié dans HTML et CSS | Laisser un commentaire

Plusieurs solutions existent pour sélectionner facilement une date avec un DatePicker (et l’heure pour un DateTimePicker !) pour le Web. Voici une petite sélection.

HTML5 DateTimePicker

Eh oui, sélectionner facilement la date, c’est possible nativement dans votre navigateur avec une simple balise HTML. L’inconvénient c’est que ce n’est pas encore très supporté. Dans Opera, mais ailleurs… ? Et il faut reconnaître que ce n’est pas magnifique.

Choisir une date : <input type="datetime" name="yourDate" />

html5-datetimepicker

Voir les exemples du W3Schools.
Continuer la lecture

Démarrer un projet Node.js

Publié dans Javascript | Laisser un commentaire

Je n’arrive pas à trouver un fichu « Hello World! » expliquant correctement comment créer une bonne base pour un projet Node.js ! Fichtre !
Ce que je déduis pour l’instant provient principalement de cet article Tutorial: RabbitMQ + Node.js et de ce que je commence à comprendre de cet environnement.

nodejs-logo
Continuer la lecture

Comment bien débuter avec Node.js

Publié dans Javascript | 2 commentaires

On entend parler de Node.js depuis maintenant quelques temps et même si je reste assez dubitatif à l’idée de mettre du Javascript côté serveur, j’ai plusieurs fois souhaité testé la bête. Aujourd’hui c’est chose faite puisque je suis censé produire quelque chose pour dans deux jours (enfin ça c’était il y deux jours) sur… Node.js !
En quelques bribes j’aimerai expliquer ma démarche de prise en main de Node.js. On verra plus tard si j’ai le temps d’approfondir ça dans d’autres billets.

Installation

Rendez-vous sur le site officiel de Node.js pour télécharger l’installateur. Au passage, on en profite pour mettre au chaud la documentation de l’API (un petit PDFCreator / Poche / Respawn du mode View on a single page fait bien l’affaire).
Vous pouvez désormais utiliser la ligne de commande node.
Continuer la lecture

RedactorJs – L’éditeur WYSIWIG qui tue tout !

Publié dans Javascript | 2 commentaires

Cet éditeur en ligne WYSIWYG est tout simplement génial : dybskiy/redactor-js · GitHub.
Simple, léger, rapide, pratique à utiliser ! Et un régal à configurer 🙂

Sous licence libre pour un usage non-commercial.

PhoneGap Plugin System

Publié dans HTML et CSS | Laisser un commentaire

Overall Architecture

I have already presented PhoneGap, my goal here is to present its plugin system. Indeed, to enlarge web application possibilities, it may be useful to use native calls through Javascript. For example, to use a piece of complex Android code (Java code) easily in Javascript. This is possible using the PhoneGap plugin system.
The overall architecture of these plugins is the following:

  • a native component making the job, for example a Java Android file
  • a HTML / CSS / Javascript GUI using this native component through Javascript calls
  • a bridge between Javascript and the native code to create the link.

This bridge is composed of:

  • one native file (i.e. one Java file),
  • one Javascript file exposing this native component,
  • and generally one quick configuration file specific to the platform.

Continuer la lecture

Créer un plugin jQuery

Publié dans Javascript | Laisser un commentaire

Une des grandes forces du framework javascript jQuery est de pouvoir y ajouter des plugins afin d’abstraire ses fonctionnalités favorites (qui ont parfois coûtés pas mal d’heures de réflexions) pour les utiliser simplement dans d’autres projets, ou pour pouvoir les partager avec d’autres.  En général, lorsque l’on prend le temps de transformer des bouts de codes en plugins, on en profite aussi pour étendre leurs fonctionnalités afin de pouvoir les utiliser dans un plus grand nombre de cas.

De manière générale, pour créer un plugin, on utilise le code suivant :

(function($) {
  $.fn.nomDuPlugin = function() {
    // Ici, l'incroyable code du plugin !
  };
})( jQuery );

Continuer la lecture

Quelques techniques de concaténation dans différents langages

Publié dans Geekeries | Laisser un commentaire

D’après Wikipédia : > Le terme concaténation […] désigne l’action de mettre bout à bout au moins deux chaînes (de caractères).
Simplement un petit mémo rapide sur la concaténation dans différents langages.

Javascript, jQuery, Java

variable1+variable2 "texte texte texte"+variable1

PHP

variable1.variable2 'texte texte texte'.variable1

C++

variable1<<variable2 "texte texte texte"<<variable1

SQL

CONCAT(variable1, variable2) CONCAT("texte texte texte", variable1)

CONCAT_WS pour ne pas être embêté avec les champs vides.

Un système de commentaire avec jQuery en Ajax (2)

Publié dans Javascript | 24 commentaires

Hier, j’expliquais comment faire un système de commentaire avec jQuery, c’est-à-dire un système de commentaires sans rechargement de la page. Mais il manquait encore l’appel Ajax, j’entends par là, l’appel asynchrone à un script PHP qui enregistre le commentaire ajouté dans une base de données. C’est aujourd’hui chose faites ! J’en profite pour expliquer les différents tests que j’ai effectué avec getJSON et post en mode JSON et XML.

Première étape : getJSON

Je rappelle l’idée de ce script : un utilisateur peut remplir un formulaire pseudo+commentaire et lorsqu’il l’envoie, hop son message apparait sans rechargement de la page en tête des autres commentaires. Son commentaire a été enregistré dans une base de données entre temps. Du coup :

  • on a besoin d’envoyer 2 données au script PHP : le pseudo et le contenu du commentaire
  • on a besoin que le script PHP nous renvoie 3 données : le pseudo et le contenu du commentaire (qu’on a sécurisé et affiné si besoin) et une valeur de retour (1 si ok, 0 si problème)

Et la, si vous êtes que moi et que vous ne connaissez pas JSON, vous avez le droit de vous demander quoi faire.
Continuer la lecture

Un système de commentaires avec jQuery (1)

Publié dans Javascript | 13 commentaires

Dans la série jQuery voici un petit système de commentaire ! L’idée est simple : un utilisateur peut remplir un formulaire pseudo+commentaire et lorsqu’il l’envoie, hop son message apparait sans rechargement de la page en tête des autres commentaires. Pour l’instant pas d’Ajax, donc pas d’enregistrement dans une base de données, mais c’est pour le prochain article : un système de commentaire avec jQuery en Ajax (2) ! D’abord le code HTML :

<form action="?id=commentaire" method="post" id="form">
 <fieldset>
 	<legend>Ajouter un commentaire</legend> 
	<label for="pseudo">Pseudo</label>
 	  <input type="text" name="pseudo" id="pseudo" />
 	<br />
 	<label for="contenu">Commentaire</label>
 	  <textarea name="contenu" id="contenu" rows="4" cols="4"></textarea> 
	<br />
 	<input type="submit" value="Ok" />
 </fieldset>
 </form>
 <div id="commentaire">
 	<p class="last pair first" id="com_1"><strong>BN</strong> a dit :<br />Coucou !  Je m'appelle BN et je suis un BN, et toi, tu fais quoi dans la vie ?</p>
 </div>

Continuer la lecture