Archives de catégorie : Javascript

Le Javascript est un langage de programmation de scripts très utilisé pour créer des pages Web interactives. Créé en 1995 par Brendan Eich pour le compte de Netscape Communications Corporation ce langage en est à sa version 1.7, la 1.8 étant en cours de développement et intégrera des éléments du langage Python.Il existe de nombreux framework Javascript comme Prototype ou jQuery, qui facilitent l’utilisation de ce langage, en simplifiant sa syntaxe et surtout en unifiant son utilisation sur les différents navigateurs du marché.Courant mars-avril 2010, j’ai passé toute une série de « 30 minutes par jour » sur jQuery afin d’apprendre à mieux connaître ce framework très utilisé de nos jours ! Plusieurs billets en sont sorties :menu accordéon
système de commentaires
différents points sur jQuery en général

Démarrer un projet Node.js

Publié dans Javascript | Laisser un commentaire
06 Mai 2013

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
26 Avr 2013

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
19 Nov 2012

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.

Créer un plugin jQuery

Publié dans Javascript | Laisser un commentaire
04 Nov 2011

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 →

Lire un fichier XML avec jQuery

Publié dans Javascript | Laisser un commentaire
19 Avr 2010

Ces derniers jours avec mon système de commentaires, je me suis pas mal amusé sur plusieurs points de jQuery, mais une notion me paraissait étrange : la lecture d’un fichier XML. JQuery permet une manipulation simple et poussée du DOM, mais lorsqu’on récupère un fichier XML d’une requête Ajax, on serait incapable de le traiter autrement qu’avec des « bidouilles » Javascript à l’ancienne ?

$.post('ajax.php', function(xml) {
 	var xmlData = xml.getElementsByTagName('com')[0];
 	var ret = xmlData.getElementsByTagName('ret')[0].firstChild.nodeValue;
 	var xmlPseudo = xmlData.getElementsByTagName('pseudo')[0].firstChild.nodeValue;
 	var xmlCommentaire = xmlData.getElementsByTagName('commentaire')[0].firstChild.nodeValue;
}, 'xml');

Franchement, j’y croyais pas. Aujourd’hui j’ai trouvé la solution !

Continuer la lecture →

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

Publié dans Javascript | 25 commentaires
14 Avr 2010

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 | 18 commentaires
13 Avr 2010

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 →

Menu accordéon facile en jQuery

Publié dans Javascript | Laisser un commentaire
08 Avr 2010

Et je continue avec ma série jQuery ! Aujourd’hui, l’idée est de réaliser un menu accordéon plutôt cool : Démo menu accordéon. En voici le code HTML :

<dl>
	<dt>Titre 1</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
	<dt>Titre 2</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
	<dt>Titre 3</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd>
	<dt>Titre 4</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
	<dt>Titre 5</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd> </dl>

Continuer la lecture →

Javascript

Action lors de la modification d’un champ : change(function)

Publié dans Javascript | Laisser un commentaire
07 Avr 2010

En ce moment, je fais quelques tests avec jQuery histoire d’améliorer un petit peu mon niveau dans ce framework avec lequel j’ai déjà bidouillé quelques fois. Aujourd’hui, j’ai simplement cherché à effectuer une action lorsqu’un utilisateur modifie la valeur d’un champ : Démo modification d’un champ. Pour cela, il suffit d’utiliser la méthode change(function) de jQuery sur le champ en question. Voyons un exemple. D’abord le code HTML :

<form action="" method="post">
<fieldset>
	<legend>Élévation au carré</legend>
	<label for="nbElement">Nombre à élever au carré :</label>
	<input type="text" name="nbElement" id="nbElement" size="4" value="12"  />
	<br />
	<span id="max"></span>
</fieldset>
</form>

Continuer la lecture →

Utiliser une fonction PHP avec jQuery à l’aide de get

Publié dans Javascript | 3 commentaires
01 Fév 2010

En ce moment, je m’amuse un petit peu avec jQuery et l’Ajax. C’est un domaine dans lequel, je ne me sens vraiment pas à l’aise, donc j’essaie de faire des progrès. Aujourd’hui, je suis tout content car j’ai réussi à utiliser une fonction PHP avec jQuery en utilisant les principes d’Ajax ! J’ai découvert la méthode get() dans jQuery, et c’est exactement ce que je cherchais.

Démarche générale

J’ai un formulaire contenant un champ titre et un champ url. Le champ url contient normalement le titre mais parsé par une fonction PHP maison parserUrl(). Pour faciliter la vie de l’utilisateur, je voulais ajouter un petit bouton « Actualiser » à côté du champ Url, afin de pouvoir actualiser l’url avec un nouveau titre à n’importe quel moment. Voici un démo pour voir le fonctionnement : démo Utiliser une fonction PHP avec jQuery.

Démo utilisation get() en jQuery

Démo utilisation get() en jQuery

Continuer la lecture →