Blog Dreaminvasion - développement et administration réseaux - Javascript

Programmation Orientée Objet en Javascript

Gerald Lonlas — Sun, 28 Oct 2007 18:27:00 +0100

Suite à la demande d’un ami sur la programmation orientée objet en Javascript, je vous partage le résultat de mes recherches sur le net.

Et plus particulièrement mes recherches sur ce qui est pour moi la bible des sites sur la programmation : Developpez.com

Thierry Templier nous propose un dossier en 3 parties sur la programmation Orientée objet en Javascript.

Programmation orientée objet avec JavaScript (1ère partie)

L'objectif de cet article, premier article de la série Programmation orientée objet avec JavaScript, est de décrire les mécanismes de base mis à disposition par JavaScript afin de mettre en oeuvre la programmation orientée objet par prototype.
La connaissance de ces mécanismes permet de "mieux" développer avec le langage JavaScript afin de réaliser des traitements plus modulaires, maintenables et évolutifs. Elle permet également de pouvoir appréhender plus facilement les diverses bibliothèques JavaScript disponibles sur Internet telles que Prototype, jQuery, script.aculo.us et Dojo.

Programmation orientée objet avec JavaScript (2ème partie)

Ce second volet de la série Programmation orientée objet avec JavaScript a pour objectif de décrire les mécanismes avancés de JavaScript relatif à la mise en oeuvre de la programmation orientée objet par prototype, à savoir l'héritage et la détermination du type.
Il détaille également la résolution d'un problème classique dû au référencement puis à l'exécution de méthodes d'objet et quelques patrons de conception.

Programmation orientée objet avec JavaScript (3ème partie)

Ce troisième et dernier volet de la série Programmation orientée objet avec JavaScript a pour objectif de décrire la résolution de problèmes classiques liés à la mise en oeuvre de ce paradigme avec le langage JavaScript. Ces problèmes sont inhérents à la variante de ce paradigme à savoir la programmation orientée objet par prototype.
Il détaille également dans un second temps quelques patrons de conception fondés sur les mécanismes abordés dans les précédents articles de la série afin de rendre vos traitements JavaScript plus modulaires, maintenables et évolutifs.

Autant dire que dans ces 3 articles vous aurez tout ce qu’il vous faut pour faire de la POO avec Javascript.

Javascript : Fixer le problème de transparence des images PNG sur Internet Explorer.

Gerald Lonlas — Fri, 07 Sep 2007 13:01:00 +0200

Je suis tombé par hasard sur un script permettant de corriger le problème de la gestion de la transparence des fichiers PNG sous Internet Explorer 5.5 et 6.

Bien sur nous trouverons de moins en moins d’Internet Explorer en version 5.5 et 6, mais pour le moment ils sont encore présents sur le net. Il faut donc trouver une solution.

Jusqu'à présent j’utilisais le format GIF pour la transparence, mais ce format n’est vraiment pas génial, limité à 256 couleurs, ne permetant pas de transparence sur des couleurs ou des textures (exemple des dégradé), le GIF est un format trop restrictif à mon gout.

Au contraire le format PNG répond à toutes nos demandes, mais seul les navigateurs récents (Firefox, Opera, IE7, … ) gèrent correctement le PNG.

La solution ? Un javascript et trois lignes d’HTML dans vos pages.

Téléchargement du javascript.

Intégration du script dans vos pages :

L’itération HTML « <!--[if lt IE 7.]>” est un hack destiné à IE (exclusivement sous Windows) qui lui indique d’utiliser le script pngfix.js.

Pour plus d’information sur l’utilisation et le fonctionnement de ce script je vous invite à aller sur : http://homepage.ntlworld.com/bobosola/

Javascript : Script de rotation d’image

Gerald Lonlas — Tue, 04 Sep 2007 22:56:00 +0200

Des scripts de rotation d’image en javascript il en existe, il suffit de faire la recherche des mots clés « slideshow javascript » sur google pour le nombre de script prêt à l’emploi.

Et me voila en train d’ajouter ma contribution.

Je me permets de mettre à disposition un script que j’avais fais il y a quelques années pour le site E-tudiant.com, et que j’ai dépoussiéré très récemment pour DreamCommerce (le e-commerce que je développe actuellement).

Le javascript

Voici l’ensemble du javascript, le mieux est de l’intégrer dans un fichier .js et l’inclure dans votre page HTML.

// variables
var imgList = new Array();
var zInterval = null;
var indice=0;

// Change Opacité de l'image
function setOpacity(objet)
{
if(objet.xOpacity>.99)
{
objet.xOpacity = .99;
return;
}

objet.style.opacity = objet.xOpacity;
objet.style.MozOpacity = objet.xOpacity;
objet.style.filter = 'alpha(opacity=' + (objet.xOpacity*100) + ')';
}

// Fonction de changement des images (rotation)
function rotation()
{
cOpacity = imgList[indice].xOpacity;
nIndex = imgList[indice + 1]? indice + 1 : 0;
nOpacity = imgList[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgList[nIndex].style.display = 'block';
imgList[indice].xOpacity = cOpacity;
imgList[nIndex].xOpacity = nOpacity;

setOpacity(imgList[indice]);
setOpacity(imgList[nIndex]);

if(cOpacity<=0)
{
imgList[indice].style.display = 'none';
indice = nIndex;
setTimeout(rotation, 3000);
}
else
{
setTimeout(rotation, 50);
}
}

// Initialisation du rotation
function rotationInit(elementId)
{
if(document.getElementById || document.createElement)
{
imgList = document.getElementById( elementId ).getElementsByTagName('img');

for(i=1;i<imgList.length;i++)
{ imgList[i].xOpacity = 0; }

imgList[0].style.display = 'block';
imgList[0].xOpacity = .99;

setTimeout(rotation, 3000);
};
}

Le xHTML

Pour ce qui est du xHTML il suffit de mettre vos images les unes derrières les autres dans un conteneur auquel vous donnerez un id.

<div id="galerie" class="rotation">

<a href="http://www.dreaminvasion.com/realisations/23-mbolabs.html"><img src="http://www.dreaminvasion.com/images/mini-mbolabs.jpg" alt="Mbolabs" title="Mbolabs" /></a>

<a href="http://www.dreaminvasion.com/realisations/21-4l-trophy-toulouse.html"><img src="http://www.dreaminvasion.com/images/mini-4l-trophy-toulouse.jpg" alt="4L Trophy Toulouse" title="4L Trophy Toulouse" /></a>

<a href="http://www.dreaminvasion.com/realisations/11-dreaminvasion-v2-0.html"><img src="http://www.dreaminvasion.com/images/mini-dreaminvasion.com-v2.jpg" alt="Dreaminvasion v2.0" title="Dreaminvasion v2.0" /></a>

</div>

Enfin lancer la rotation via la fonction rotationInit('galerie');

<script type="text/javascript">
rotationInit('galerie');
</script>

La feuille de style

La mise en page se fera via votre feuille de style (CSS), vous appliquerez un classe CSS au conteneur des photos.

La classe CSS devra comporter les attributs : width, height qui fixera la taille du conteneur à la dimension d’une image.
Les autres images seront simplement cachées.

.rotation {
    border: 1px solid #000;
    cursor: pointer;
    overflow: hidden;
    margin: 50px auto 10px;
    position: relative;
    width: 155px;
    height: 140px;
}

.rotation img {
    border: 0;
    cursor: pointer;
    width: 155px;
    height: 140px;

}

Cliquez ici pour télécharger le fichier rotation.js (1,6 Ko).

Ultimate Web developer bookmark : 109 Links

Gerald Lonlas — Mon, 16 Jul 2007 09:00:00 +0200

Toujours à la recherche de la perle rare sur le Web, surtout en ce qui concerne les technologies du développement web, je vous mets à disposition ma liste de tous les sites que j'utilise :

DHTML AJAX Javascript

CSS

PHP / MySQL

PHP.net

Flash

Inspiration

Banque d'image

Icones

Police / Brush / Patterns

Tuto Graphisme

Good-Tutorials.com (Moteur de recherche de tutoriaux)

Framework

Web Tools

Logiciels

Si vous avez des sites à faire découvrir, je vous invite à faire de meme sur votre blog et me poster un commentaire avec le lien de votre article, je mettrais cette liste à jour.