Il a la particularité d’être à la fois client et serveur (+ base de données). Aspect important également, c’est un langage compilé par OCaml et donc, non interprété.

Autres aspects :

• Support de HTML5 (Canvas 2D, WebGL 3D, SVG, File) et CSS3
• Support de MongoDB en base de données
• Typage fort
• Syntaxe proche de Javascript
• Le code client est compilé en jQuery !
• Il intègre le Bootstrap Twitter pour faire facilement vos UI

Dans quel cas utiliser Opa ?

Opa est conçu pour les applications Web en temps réel (chats, jeux, tout ce qu’on peut trouver en multi-utilisateurs).

A quoi ressemble le code d’Opa ?

Un Hello world vaut toujours mieux qu’un long discours…

Server.start(
	Server.http, {
		page: function() {
			<h1>Hello, world</h1>
		},
		title: "Hello, world"
	}
)

Ce code démarre un serveur HTTP, avec une page HTML dont le titre est « Hello, world » et en contenu, ce qu’on trouve dans la fonction anonyme de page.

Comment l’installer et l’essayer ?

Opa est depuis le 11 avril 2012 en version 0.9.2 et est utilisable dorénavant sur Windows.

Les OS compatibles pour installation :

• Mac OS X – x64
• Windows – x64
• Ubuntu – x64
• Linux – x64

Pour les plateformes x86 ce n’est pas encore disponible mais il est possible de compiler sa propre build.
Idem pour FreeBSD.

J’ai personnellement essayé uniquement sur Windows, donc il suffit de lancer l’installeur et d’attendre la fin de l’installation.

Pour faire fonctionner notre « Hello world », créer un fichier hello.opa de préférence dans le répertoire d’installation et y coller le contenu du code vu précédemment.

Il faut compiler ce fichier pour en faire un exécutable (*.exe). Pour ce faire, ouvrir une Invite de commandes et pointer vers le répertoire où se trouve le fichier hello.opa et lancer cette commande :

opa hello.opa --

La compilation va prendre plusieurs secondes, une fois terminée, le serveur HTTP va démarrer automatiquement et le restera à moins que vous fermiez la fenêtre ou que vous fassiez CTRL + C.
Vous pouvez voir le résultat sur http://localhost:8080.

Peut-on voir un exemple d’application écrite en Opa ?

Oui, l’équipe d’Opa a mis au point un chat (le plus simple qu’il soit) en… 20 lignes de code, mise en forme non comprise.

Voici leur code commenté :

/**
 * {1 Import standard classes of bootstrap css}
 *
 * see http://twitter.github.com/bootstrap/
 */
import stdlib.themes.bootstrap
/**
 * {1 Network infrastructure}
 */
/**
 * The type of messages sent by a client to the chatroom
 */
type message = { string author /**The name of the author (arbitrary string)*/
               , string text  /**Content entered by the user*/
               }
/**
 * The chatroom.
 */
exposed Network.network(message) room = Network.cloud("room")
/**
 * {1 User interface}
 */
/**
 * Update the user interface in reaction to reception of a message.
 *
 * This function is meant to be registered with [room] as a callback.
 * Its sole role is to display the new message in [#conversation].
 *
 * @param x The message received from the chatroom
 */
function user_update(message x) {
    line = <div class="row line">
              <div class="span1 columns userpic" />
              <div class="span2 columns user">{x.author}:</div>
              <div class="span13 columns message">{x.text}</div>
            </div>;
    #conversation =+ line;
    Dom.scroll_to_bottom(#conversation);
}
/**
 * Broadcast text to the [room].
 *
 * Read the contents of [#entry], clear these contents and send the message to [room].
 *
 * @param author The name of the author. Will be included in the message broadcasted.
 */
function broadcast(author) {
    text = Dom.get_value(#entry);
    message = ~{author, text};
    Network.broadcast(message, room);
    Dom.clear_value(#entry);
}
/**
 * Build the user interface for a client.
 *
 * Pick a random author name which will be used throughout the chat.
 *
 * @return The user interface, ready to be sent by the server to the client on connection.
 */
function start() {
    author = Random.string(8);
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <div id=#logo />
        </>
      </>
    </>
    <div id=#conversation class="container"
      onready={function(_) { Network.add_callback(user_update, room) }}></>
    <div id=#footer>
      <div class="container">
        <input id=#entry class="xlarge" onnewline={function(_) { broadcast(author) }} />
        <div class="btn primary" onclick={function(_) { broadcast(author) }}>Post</>
      </>
    </>
}
/**
 * {1 Application}
 */
/**
 * Main entry point.
 *
 * Construct an application called "Chat" (users will see the name in the title bar),
 * embedding statically the contents of directory "resources", using the global stylesheet
 * "resources/chat.css" and the user interface defined in [start].
 */
Server.start(
    Server.http,
    [ {resources: @static_resource_directory("resources")}
      , {register: ["resources/css.css"]}
      , {title: "Chat", page:start }
    ]
);

• Voir le résultat
• Autres exemples sur le site officiel

Conclusion

Personnellement je suis très content de cette découverte, ça fait du bien un peu de nouveauté dans ce monde qu’est le Web. Forcément, la communauté autour d’Opa est très faible car le projet est jeune mais très sérieux.

Je vous propose quelques liens si vous êtes intéressés :

• Commencer avec Opa
• Tour d’horizon d’Opa + Guides (manual)
• Opa FAQ
• Documentation API Opa
• Mettre en place « Opa in the cloud » sur votre site
• About Opa

Tous les liens pointent vers le site officiel, et en anglais.

Si vous souhaitez vous y mettre et que vous avez besoin d’aide, vous pouvez toujours poster sur StackOverflow avec le tag Opa.

10/05/2012 – version 1.4.0

• Ajout d’un module de réponses pré-enregitrées [...]

Cette fonctionnalité vous permet de créer des réponses depuis l’extension et les charger dans la zone de texte du Site du Zéro automatiquement. On y accède par la page Options et le bouton « Gérer les réponses pré-enregistrées ». Vous verrez une zForm et un tableau qui récapitule vos réponses.

Gestion des réponses pré-enregistrées

Ensuite lorsque l’on souhaite ajouter une réponse sur un sujet du forum (ou bien même en réponse rapide), un tableau apparaît vous permettant d’ajouter vos réponses dans la zone de texte !

Affichage des réponses pré-enregistrées directement sur le site

Comment peut-on valider les entrées d’un formulaire avant son envoi ?

En s’y essayant, on est amené à créer « involontairement » un bout de code qui pourrait bien servir de plugin et c’est ce qui m’est arrivé, histoire de remplir une fois de plus ma liste de plugins. Et pour justifier le titre, il fait 1.7 KB !

Voici un exemple de formulaire pouvant profiter de desoForm :

<form action="page.html" method="post" id="monForm">
		<label>Date : </label>
		<input type="text" name="date" data-regexp="date" data-error="Format date (jj/mm/aaaa)" />
	<hr />
		<label>Date SQL : </label>
		<input type="text" name="datesql" data-regexp="date-en" data-required="false" data-error="Format date SQL (aaaa-mm-jj)" />
	<hr />
		<label>Courriel : </label>
		<input type="text" name="mail" data-regexp="email" data-error="Format email" />
	<hr />
		<label>Code postal : </label>
		<input type="text" name="cp" data-regexp="cp" data-required="false" data-error="Format code postal" />
	<hr />
		<label>Prénom : </label>
		<input type="text" name="prenom" data-regexp="^[a-zA-Z]{2,10}$" data-error="Test de la regexp ^[a-zA-Z]{2,10}$" />
	<hr />
		<input type="submit" value="Valider" />
</form>

Vous l’aurez compris, il s’agit d’utiliser l’attribut data pour indiquer les spécificités de chaque champ, à noter que c’est disponible uniquement pour les input[type="text"].

• data-regexp : prend en valeur une expression régulière valide ou le mot clé d’une expression pré-écrite, il en existe pour l’instant 4 :
  • date : /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/[0-9]{4}$/
  • date-en : /^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/
  • email : /^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$/
  • cp : /^((0[1-9])|([1-8][0-9])|(9[0-8])|(2A)|(2B))[0-9]{3}$/
• data-error : le message d’erreur à afficher si l’expression n’est pas bonne
• data-required : facultatif, si la valeur est false, le champ pourra être vide pour valider le formulaire

Le gros avantage de ce système, est que vous pouvez mettre vos propres expressions ! Par défaut les champs sont tous obligatoires.

L’appel du plugin :

$(document).ready(function() {
	$('#monForm').desoForm({
		'emptyField': 'Le champ est obligatoire',
		'submit': function($el, ok) {
			if(ok) {
				alert($el.selector + ' prêt à être envoyé avec $el[0].submit(); !');
				//$el[0].submit();
			}
		}
	});
});

Vous avez seulement 2 propriétés à votre disposition :

• emptyField : le texte à afficher pour informer que le champ est obligatoire, par défaut « Le champ ne doit pas être vide »
• submit : le callback vous permettant d’envoyer par la suite le formulaire en AJAX, par défaut false

Voir le plugin en action
Voir la page du plugin pour les consignes d’installation

Pour ces deux derniers, les commentaires des articles sont chargés uniquement si on scroll « à leur niveau ».
Quand on y réfléchit c’est plutôt normal, pourquoi charger dès le départ des éléments qui ne seront même pas lus par l’internaute ? Ceci permet d’économiser des ressources serveur, notamment des appels SQL.

Je vous propose de voir comment ceci peut fonctionner, c’est plutôt simple et après on ne s’en passe plus !

Je vais reprendre le système de commentaires, lorsque notre scroll va arriver au niveau de #comments, on va uniquement changer son texte, on peut imaginer faire n’importe quoi.
Le plus important est de récupérer ce fameux callback.

<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices dictum ante, nec interdum felis mollis vitae. Mauris porta urna nec lorem semper cursus. Etiam nec dignissim turpis. Integer a lobortis orci. Suspendisse rhoncus massa dapibus ligula tempor molestie. Etiam consectetur quam et felis interdum sit amet posuere quam fermentum. Suspendisse nibh nulla, auctor et auctor at, placerat sit amet erat.

Sed tempor mi id erat viverra vestibulum. Donec euismod justo metus. Integer eleifend lacus sit amet dui ullamcorper quis elementum tellus placerat. Quisque ac justo ligula. Ut molestie gravida risus ac vestibulum. Vivamus semper eros vitae dui fringilla eget bibendum odio interdum. Suspendisse non blandit augue. Fusce vitae velit metus, ac vestibulum dui. Fusce eget velit arcu. Aenean quis varius enim.

In viverra neque libero. Ut non pretium tortor. Duis nunc ipsum, aliquet varius dignissim nec, ullamcorper id arcu. Morbi nec cursus sem. Ut ac justo nulla, eu elementum diam. Suspendisse est elit, tincidunt eu mattis accumsan, placerat quis ipsum. Nunc tincidunt, arcu eu vulputate dapibus, lectus leo ullamcorper quam, id fermentum leo mi iaculis augue. Proin vitae odio pharetra nulla imperdiet aliquam. Aenean sed neque erat, non faucibus leo. Sed metus augue, imperdiet ut lobortis ac, pulvinar vel dolor. Curabitur dui quam, aliquam ac mattis quis, bibendum a mi. Sed viverra libero non risus dictum ac venenatis metus rutrum. Nulla consectetur mauris vitae nisl viverra adipiscing. Proin pellentesque erat a libero cursus sed laoreet velit aliquam. Mauris convallis semper quam, sit amet tempor nisl fermentum sit amet.

Donec fringilla pellentesque orci, ac pellentesque nunc dictum id. Fusce quis lectus mauris. Nunc mollis vulputate purus, vitae malesuada massa varius ac. Vivamus varius, massa sed dignissim laoreet, lorem magna luctus odio, eget sodales odio velit at felis. Nulla fringilla lacinia diam ac sagittis. Ut pharetra turpis id lectus porttitor at ultrices lorem accumsan. Etiam vitae congue nisl. Aenean non lectus nec lorem luctus pharetra. Proin malesuada, sem eget volutpat mollis, odio arcu fermentum ipsum, in vulputate sapien risus ut felis. Donec vulputate auctor mauris, in consequat eros accumsan sed. Fusce quis pharetra tortor. Aliquam ut dolor massa. Pellentesque id metus eu metus hendrerit elementum eu vel neque. Nullam tincidunt, libero sit amet interdum lobortis, risus ipsum ultricies urna, placerat iaculis eros lacus vitae mauris. Pellentesque nec lacus vel felis interdum egestas at a lacus.

Donec fringilla pellentesque orci, ac pellentesque nunc dictum id. Fusce quis lectus mauris. Nunc mollis vulputate purus, vitae malesuada massa varius ac. Vivamus varius, massa sed dignissim laoreet, lorem magna luctus odio, eget sodales odio velit at felis. Nulla fringilla lacinia diam ac sagittis. Ut pharetra turpis id lectus porttitor at ultrices lorem accumsan. Etiam vitae congue nisl. Aenean non lectus nec lorem luctus pharetra. Proin malesuada, sem eget volutpat mollis, odio arcu fermentum ipsum, in vulputate sapien risus ut felis. Donec vulputate auctor mauris, in consequat eros accumsan sed. Fusce quis pharetra tortor. Aliquam ut dolor massa. Pellentesque id metus eu metus hendrerit elementum eu vel neque. Nullam tincidunt, libero sit amet interdum lobortis, risus ipsum ultricies urna, placerat iaculis eros lacus vitae mauris. Pellentesque nec lacus vel felis interdum egestas at a lacus.

Etiam non arcu nec enim volutpat imperdiet. Mauris nec sem lacus. Etiam laoreet laoreet lacus non lacinia. Sed quis odio velit, id lobortis dolor. Nunc quam leo, tempor ac dapibus eget, commodo vel nulla. Sed aliquet, enim sit amet luctus egestas, nisi leo sollicitudin neque, non imperdiet urna ante in arcu. In ultrices sagittis orci egestas ultricies. Cras nisl mi, sodales vitae fringilla quis, vulputate convallis elit. Integer augue orci, vestibulum ut fermentum et, hendrerit ac diam. Nunc lectus sapien, molestie id posuere eget, sodales sit amet arcu. Mauris fringilla mi tincidunt urna porttitor porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>

<div id="comments">Commentaires</div>

.content {
    width: 300px;
}

Maintenant que la structure est en place, de quoi a-t-on besoin comme données pour créer notre callback ?

• $(‘#comments’).offset().top : la position « top » de l’élément par rapport au document
• $(window).scrollTop() : la position verticale du scroll
• $(window).height() : la hauteur de la fenêtre

• au chargement du DOM
• au scroll
• au redimensionnement de la fenêtre

Pour pas s’embêter, on sait déjà qu’on va créer une fonction.

Ce que vous attendez tous… la formule magique. Il faut un peu se creuser la tête.

Si la taille de la fenêtre + la position verticale du scroll est supérieure à la position de l’élément (top), alors…

var top = $('#comments').offset().top;
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();

if (windowHeight + scrollTop > top) {
	// ...
}

On peut en faire une fonction check() par exemple puis l’appeler 3 fois :

$(document).ready(function() {
	check();

	// quand on scroll
	$(window).scroll(function() {
		check();
	});

	// quand on redimensionne
	$(window).resize(function() {
		check();
	});
});

Petite précision, en laissant tel quel, le callback sera déclenché à chaque fois que notre scroll se retrouvera « sous » l’élément puisque la condition sera exécutée. On peut rajouter une variable qui nous permettra de savoir si le callback a déjà été appelé ou non.
Exemple : on initialise une variable loaded à false, on la met à true quand on passe dans la condition et on n’oublie pas de rajouter dans cette condition un !loaded.

Je n’ai pas pu résister à en créer un plugin, que j’ai appelé originalement « desoScroll ».
Voici l’appel du plugin :

$(document).ready(function() {
	$('#comments').desoScroll({
		'callback': function(el) {
			el.hide().html('Chargement en cours...').fadeIn(1000);
		}
	});
});

Regardez l’exemple de l’article en démonstration puis si vous êtes intéressés par le code du plugin, rendez-vous sur sa page !

Ceux qui veulent faire la même chose mais avec les images, je vous conseille le plugin Lazy Load.

J’ai l’ai récemment mise à jour en 1.3.1, voici le changelog depuis la 1.2.1 :

23/03/2012 – version 1.3.1

• Ajout de 8 sons supplémentaires dans les Options pour porter le total à 12 sons disponibles.
• Ajout d’un paramètre supplémentaire pour les notifications, on peut être notifié pour : les MP, les interventions, ou les deux. Dans tous les cas le cumul des deux sera affiché au niveau de l’icône, comme avant.
• Ajout d’un module de « liste noire ». Depuis la popup vous apercevrez une croix rouge en face du sujet survolé (uniquement pour les interventions), vous pourrez le mettre dans votre liste noire, c’est-à-dire que ce sujet ne sera plus comptabilisé, comme s’il avait été supprimé. Vous pouvez le rétablir depuis la page des Options.

13/03/2012 – version 1.3.0

• Ajout d’un fond sonore à chaque notification (désactivé par défaut)
• Correction d’un bug qui interprétait le HTML dans la popup si le titre du sujet en contenait

La page « Options »

Retrouvez tous les détails sur :

• la page du projet
• le sujet dédié sur le SdZ

• Utilisation du $
• Les sélecteurs
• Le chaînage
• Mise à jour du DOM
• Séparez votre code
• Compressez votre code

Tous les codes que je vais montrer sont fonctionnels, l’indication « pas bon » indique une perte une performance ou une mauvaise pratique.

Utilisation du $

Vous savez que le symbole dollar est aussi utilisé par d’autres librairies, par exemple Mootools ou Prototype. Pour éviter les éventuels conflits, on spécifie la variable $ uniquement pour jQuery à l’intérieur du bloc.
De plus, il est nécessaire que le DOM soit prêt afin de le manipuler et d’utiliser les gestionnaires d’événements. Pour cela on utilise la méthode .ready() de document.

(function($) {
    // on peut utiliser le $ de jQuery

    $(document).ready(function() {
        // le DOM est chargé
    });
})(jQuery);​

Les sélecteurs

Lorsque vous êtes amené à utiliser un objet jQuery plus d’une fois dans votre fonction ou votre script entier, mettez cet objet dans une variable, et de préférence avec un dollar devant de sorte à tout de suite reconnaître un objet jQuery d’une variable classique qui contient une simple valeur.

​var $el = $('#element'); // bon
var el = $('#element'); // pas bon​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

C’est la même chose pour le $(this) :

​$('#element').on('click', function() {
    var $this = $(this); // bon
    var href = $this.attr('href'); // bon
    var text = $this.text(); // bon

    var href = $(this).attr('href'); // pas bon
    var text = $(this).text(); // pas bon

    return false;
});​

Si vous pouvez mettre un id à votre élément alors ne vous en privez pas ! En effet il reste le sélecteur le plus rapide. D’ailleurs, si l’on souhaite accéder à un id, il ne faut pas renseigner le nom de l’élément avant sinon le DOM utilisera d’abord getElementsByTagName() puis getElementById().

​var $el = $('#element'); // bon
var $el = $('div#element'); // pas bon​​​​​​​​

Quand vous voulez sélectionnez plusieurs éléments, indiquez – si possible – l’id du parent le plus proche.

​var $div = $('#main div'); // bon
var $div = $('div'); // pas bon​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Pour la sélection de class, il faut – contrairement à l’id – indiquer le nom de l’élément concerné. Encore mieux, indiquer également l’id du parent le plus proche.

​var $image = $('#main div.image'); // bon
var $image = $('div.image'); // pas bon
var $image = $('#main .image'); // pas bon
var $image = $('.image'); // pas bon​​​​​​​​​​​​​​​​​​​​​​​​​​​

Le chaînage

Vous êtes censé savoir qu’une grande force de jQuery réside dans le chaînage des méthodes sur un sélecteur.

​// pas bon :
$('#element').hide();
$('#element').css('background-color', 'yellow');
$('#element').fadeIn('slow');

// pas bon :
var $el = $('#element');
$el.hide();
$el.css('background-color', 'yellow');
$el.fadeIn('slow');

// bon :
$('#element').hide().css('background-color', 'yellow').fadeIn('slow');

Mise à jour du DOM

Injecter du HTML dans le DOM s’avère coûteux en ressources, surtout dans une boucle. Il est préférable de mettre le contenu à ajouter dans une variable et de l’ajouter une fois la boucle terminée.

var tableau = [...]; // des données

for (var i in tableau) {
    $('#liste').append('<li>' + tableau[i] + '</li>'); // pas bon
}

/******************************************************/
var tableau = [...]; // des données
var puces = '';

for (var i in tableau) {
    puces += '<li>' + tableau[i] + '</li>'; // bon
}
$('#liste').append(puces);​

Séparez votre code

Etant donné que je prône la séparation des langages, il n’est pas propre de trouver du code JS dans des éléments HTML.

<!-- pas bon -->
<a href="#" id="lien" onclick="maFonction();return false;">lien<a>​​​​​​​​​​​​​​​​​​​​

On fera à la place :

<!-- bon -->
<a href="#" id="lien">lien<a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

​$('#lien').on('click', function() {
    // code
    return false;
});​

Cela me permet d’enchaîner sur un conseil d’ordre général dans le développement Web, je trouve qu’il est important d’avoir du code bien organisé et ainsi maintenir une séparation des langages.
Il n’est pas rare de voir dans une page HTML du code CSS, JS ou encore PHP.
Je vous recommande cette structure :

• html/ répertoire qui contient les fichiers HTML qui ne contiennent que du HTML
• css/ répertoire qui contient les fichiers CSS, appelés par les pages HTML
• images/ répertoire des images
• js/ répertoire des fichiers JS/jQuery
• ajax/ si vous utilisez beaucoup AJAX il peut être intéressant d’avoir ce dossier qui contiendra vos fichiers PHP (par exemple) qui sont appelés uniquement dans un contexte AJAX
• php/ répertoire des fichiers PHP

Compressez votre code

Si vous êtes soucieux des performances, vous devriez toujours garder deux versions de vos fichiers .js.
Un fichier pour le développement et un pour la production. En général on les nomme comme ceci :

• un_script.js : version de développement
• un_script.min.js : version de production

Le « min » signifie « minified » ou « minimized ».

Je vous conseille le site YUI Compressor, à noter qu’il supporte aussi le CSS.

Cette version apporte un lot de correctifs. Comme d’habitude, les nouveautés arriveront lors de la version 1.8.

Téléchargement

• http://code.jquery.com/jquery-1.7.2.min.js (minified, production)
• http://code.jquery.com/jquery-1.7.2.js (unminified, debug)

Je vous laisse découvrir le changelog :

Ajax

• #4624: Charset in default ajaxSettings.contentType
• #10978: jQuery.param() should allow non-native constructed objects as property values
• #11264: evalScript() uses defaults set by ajaxSetup()
• #11426: jQuery.ajax() always fails when requesting JPG images in IE

Attributes

• #5571: Allow chaining when passing undefined to any setter in jQuery
• #10828: attr(“coords”) returns undefined in IE7
• #10870: Incorrect behaviour of $.removeAttr(“selected”)
• #11316: Consider looking through valHooks by element type first, then by nodeName instead of the other way around

Build

• #10692: Configure the jshint options to more accurately match the style guide
• #10693: generalize the “test something in an iframe” code in unit tests
• #10901: have unit tests fail if the tester is running from file:// or doesn’t have PHP
• #10902: ability to test a built version of jQuery in unit tests
• #10931: Unit tests shouldn’t require internet access

Core

• #10466: jQuery.param() mistakes wrapped primitives for deep objects

Css

• #10639: outerWidth(true) and css(‘margin’) returning % instead of px in Webkit
• #10754: have jQuery.swap return the return of the callback instead of just executing it
• #10782: Incorrect calculating width
• #10796: Bug in IE7 with $(‘#el’).css.(‘background-position’)
• #10858: css.js regular expressions are incomplete
• #11119: The curCSS function only need 2 arguments

Data

• #11309: hexadecimal-formatted data-* attributes parsed incorrectly

Deferred

• #11306: calling .disable() or .lock() on a $.Callbacks object breaks its fired() status

Dimensions

• #3838: $(document).height() incorrect in IE6

Effects

• #8498: Animate Hooks
• #10006: method show is not working as expected in all browsers when called for document fragment
• #10848: Animation toggling loses state tracking in certain atomic edge cases
• #11415: Silently ignore negative CSS values where they are illegal
• #11469: Negative margin in animations (.animate)

Event

• #8165: .live(‘click’, handler) fires on disabled buttons with child elements in Chrome
• #10819: Eliminate “this.on.call(this, “
• #10878: $(“select”).live(“change”, function(){ …broken in IE8 in jQuery 1.7
• #10961: Error in XRegExp using jQuery 1.7.1 in IE6-9
• #10970: The .on() selector parameter doesn’t work with :not(:first) selector
• #10984: Cannot off() custom events ($.event.special)
• #11021: Hover hack mangles a namespace named “hover”
• #11076: .clone(true) loses delegation filters
• #11130: jQuery.fn.on: binding map with null selector ignores data
• #11145: $(document).on() not working with name=”disabled”

Manipulation

• #9427: Passing undefined to .text() does not trigger setter
• #10753: inline the evalScript function in manipulation.js as it’s only used once
• #10864: text() method on a document fragment always returns the empty string
• #11055: Update HTML5 Shim elements list to support latest html5shiv
• #11217: Append problem with webkit
• #11291: Cloning XMLDoc’s with HTML5 nodeName’s breaks on IE
• #11323: script tags with type=”text/ecmascript” leak into the DOM
• #11356: safeFragment memory leak

Misc

• #10952: .fired() doesn’t work on Callbacks object when it is flagged with “once”
• #11257: Wrong path to source files in test suite if PHP missing

Queue

• #10967: .promise() does not attach methods onto target

Support

• #7986: Bug in $.support.boxModel if page has DIV-element CSS
• #11048: Support Tests affect layout for positioned elements in IE6-9
• #11337: Bug in $.support.reliableMarginRight

Traversing

• #11370: $(‘<div>’).siblings() throws exception

Voici mon code HTML très simple pour faire un menu avec une partie qui est consacrée au contenu à afficher :

<div id="menu">
	<ul id="nav">
		<li><a href="pages/?p=index">Index</a></li>
		<li><a href="pages/?p=cours">Cours</a></li>
		<li><a href="pages/?p=membres">Membres</a></li>
		<li><a href="pages/?p=contact">Contact</a></li>
	</ul>
</div>

<div id="contenu">
	<div>Contenu de la page "Index"</div>
</div>

Par défaut on arrive sur la page Index (accueil). Ici rien de bien compliqué, je mets volontairement des liens PHP pour montrer que cela fonctionne aussi avec un site dynamique.

Avant de vous balancer la réponse, voyons le schéma à suivre :

1. Intercepter le clic sur un lien du menu
2. Récupérer la valeur du href
3. Faire une requête AJAX sur cette page
4. Afficher la valeur renvoyée par le fichier PHP dans la div

Ceci est la logique « classique », cependant à l’utilisation, on remarquera qu’on ne souhaite pas forcément refaire une requête AJAX si c’est pour afficher le même contenu. Exemple : je suis sur la page des membres, si je reclique sur « Membres » il va me refaire une requête. Après c’est un choix personnel à faire, je vais moi, le prendre en considération dans mon code.
Pour faire ça, on peut utiliser une variable classique.

Mon schéma précédent devient donc :

1. Intercepter le clic sur un lien du menu
2. Récupérer la valeur du href
3. Récupérer le nom de la page
4. Comparer le nom de la page demandée et celle actuellement affichée
5. Faire une requête AJAX sur la nouvelle page
6. Afficher la valeur renvoyée par le fichier PHP dans la div

Maintenant place au code ! D’abord le PHP, pour changer.

<?php
if(isset($_GET['p']) && !empty($_GET['p'])) {
	$p = htmlentities($_GET['p']);

	switch($p) {
		case 'index': $contenu = 'Contenu de la page "Index"';
		break;
		case 'cours': $contenu = 'Contenu de la page "Cours"';
		break;
		case 'membres': $contenu = 'Contenu de la page "Membres"';
		break;
		case 'contact': $contenu = 'Contenu de la page "Contact"';
		break;
		default: $contenu = 'Page inconnue';
		break;
	}

	echo $contenu;
}
?>

Et le code jQuery commenté :

$(document).ready(function() {
	var $contenu_div = $('#contenu div');
	var page = $('#nav li a:first').text(); // par défaut c'est Index

	// au clic sur un lien du menu
	$('#nav li a').on('click', function() {
		var url = $(this).attr('href'); // on récupère le href

		// on récupère le nom de la page demandée
		var pageDemandee = $(this).text();

		// si on appelle une page qui n est pas celle affichée
		if(pageDemandee != page) { 

			// on met en mémoire la page
			page = pageDemandee;

			// chargement dans la div
			$.ajax({
				url: url,
				cache: false,
				success: function(html) {
					$contenu_div.hide().html(html).fadeIn();
				}
			});
		}
		return false;
	});
});

… Et c’est tout ! Avec un peu de mise en page, regardez la démo !

Voilà 4 mois maintenant que j’ai commencé ce blog et je me demande donc ce que vous attendez le plus,
pour quoi êtes-vous là ?

• Vous êtes plutôt avide des scripts jQuery ou de bonnes méthodes ?
• Vous attendez des actus bien fraîches autour des prochains standards du Web ou de jQuery ?
• Vous voulez que je raconte ma vie (ne votez pas ça, please) ?
• Autre chose ? Faites-le moi savoir dans les commentaires ou depuis le formulaire de contact !

Cela me permettra d’accentuer mes efforts sur un point si je vois qu’il ressort plus qu’un autre !

Merci à ceux qui voteront.

Afin de bien te connaître, une petite présentation de toi s’impose

Eh bien je me pseudonomme Golmote, j’ai 21 ans, actuellement développeur PHP et intégrateur web à Bordeaux. Mes passions sont la musique, les voyages et… l’informatique.

De ton point de vue, est-ce que le Javascript est devenu incontournable dans le Web d’aujourd’hui ?

Evidemment. Il est difficile d’imaginer aujourd’hui un site Web dépourvu de Javascript. L’amélioration de l’expérience utilisateur apportée par le Javascript est un atout : interfaces plus ergonomiques, applications plus rapides, compatibilité mobile, etc.

Néanmoins, il est important de garder à l’esprit que certains dispositifs ne sont pas en mesure d’interpréter le Javascript. Aussi, l’accès aux contenus clés d’un site devrait toujours pouvoir se faire sans Javascript.

Quelle est ta position par rapport à l’émergence des framewoks Javascript tels que jQuery ? Est-ce un véritable moteur dans la conception ou au contraire un frein sur la connaissance du Javascript même ?

Les frameworks sont d’excellents outils qui permettent un gain de temps considérable lors du développement d’un site Web. Il convient cependant de les utiliser avec parcimonie. Certaines réalisations ne nécessitent pas forcément l’utilisation d’un framework complet ! Il est parfois judicieux de regarder du côté des micro-librairies pour trouver l’outil réellement adapté au projet (Microjs entre autre).

Par exemple, utiliser jQuery uniquement pour son sélecteur compatible CSS3 (à savoir Sizzle), c’est tuer une mouche avec un tank… Il est bien plus approprié d’utiliser directement Sizzle sans s’encombrer du reste.

A mes yeux, l’utilisation d’un framework nécessite la connaissance du langage, même si les débutants ont parfois tendance à l’oublier. Se lancer tête baissée dans l’utilisation d’un framework comme jQuery sans la moindre notion de Javascript conduit rapidement à des catastrophes ; la plus flagrante étant souvent la perte de performance, due à une mauvaise compréhension et utilisation de l’outil.

Par rapport au Web de demain et des prochains standards HTML5 et CSS3, penses-tu que le Javascript sera de plus en plus dénigré pour laisser place aux nouvelles possibilités ?

Non, bien loin de là ! Le Javascript a encore de longues années devant lui. Le changement auquel on assiste actuellement se situe plus au niveau de l’utilisation qu’on fait du Javascript.

Le CSS3 offre son lot de nouvelles possibilités : transitions, animations, transformations (dont 3D), prochainement peut-être l’application de filtres (Filter Effects 1.0), voire même l’utilisation des shaders.

L’HTML5 nous apporte les vidéos et l’audio utilisables sans plugin, les canvas et de nombreuses balises de sémantique. Par ailleurs, le Javascript reste essentiel pour tirer pleinement partie des trois premiers.

Côté Javascript, il faut noter l’arrivée de nombreuses APIs : la géolocalisation, la 3D avec WebGL, les notifications web, la manipulation audio, le drag’n'drop natif, les bases de données locales, la manipulation des fichiers, etc. Sans oublier le projet WebAPI de Mozilla qui offre des possibilités inestimables pour les applications : fonctionnalités téléphoniques, SMS, vibration, carnet d’adresses, appareil photo, batterie…

Le Javascript n’a pas été laissé en marge ! Même si, à l’heure actuelle, ces nouveautés sont encore pour beaucoup à l’état expérimental, on peut imaginer que l’utilisation du Javascript s’orientera rapidement sur toutes ces nouvelles possibilités de contrôle et d’interactions, laissant au CSS le soin d’animer les slideshows.

Le mot de la fin

Le Javascript connaît un regain de popularité qui le pousse vers de nouveaux horizons. Ces derniers temps ont été riches en nouveautés et le langage lui-même évolue (EcmaScript 5, EcmaScript 6 (Harmony)). On ne peut que souhaiter au Javascript de poursuivre sur sa lancée et espérer que les navigateurs s’accordent sur les spécifications. Il ne restera plus qu’à se débarasser des vieilles versions d’Internet Explorer.

Un grand merci à Golmote de s’être pris au jeu !