Asselin Benoit Développement - Création et conception de sites internet - Amiens Somme Picardie Paris France

Quelques vidéos explicatives sur jQuery ( tuto, tutorial, Javascript )
02`06`2011

1 commentairePoster un commentaire !
Tags: Javascript jQuery

Aujourd'hui, je vous propose de découvrir deux vidéos réalisées par votre serviteur sur jQuery disponible sur le site tuto.com :


Combinaison de document.getElementById et RegExp ( javascript, dom )
14`12`2008

7 commentairesPoster un commentaire !
Tags: Javascript Regex DOM

On sent que la récession en France est très forte, j'ai moi-même du mal à joindre les 2 bouts... notamment à propos du temps qui m'est disponible pour rédiger ce poste (Travailler plus, pour gagner plus, qui disait !).
L'idée du code source du jour :

Rechercher dans une page (X)HTML, les IDentifiants correspondant à une expression régulière new RegExp.

function getElementsByRegExpId(p_regexp, p_element, p_tagName) {
	p_element = p_element === undefined ? document : p_element;
	p_tagName = p_tagName === undefined ? '*' : p_tagName;
	var v_return = [];
	var v_inc = 0;
	for(var v_i = 0, v_il = p_element.getElementsByTagName(p_tagName).length; v_i < v_il; v_i++) {
		if(p_element.getElementsByTagName(p_tagName).item(v_i).id && p_element.getElementsByTagName(p_tagName).item(v_i).id.match(p_regexp)) {
			v_return[v_inc] = p_element.getElementsByTagName(p_tagName).item(v_i);
			v_inc++;
		}
	}
	return v_return;
}

// Exemple d'utilisation
var v_array = getElementsByRegExpId(/^test.+/);


Obfuscateur de code Javascript ET geekettes en folie ( Hello geekette )
04`10`2008

1 commentairePoster un commentaire !
Tags: Javascript Obfuscateur Detente

On peut dire qu'en ce moment, je fais fort avec des titres très accrocheur ! ( ou qui ne semble avoir aucun sens... ). Plus sérieusement, je vais vous parler d'un thème qui vous semblera au combien aride et en ennuyeux : l'obfuscator de code... Afin de vous captiver jusqu'au bout de ma prose, vous trouverez en fin de ce message une Geekette tout droit venue de vos rêves les plus fous !

Obfuscateur ou Obfuscator : encore un terme barbare pour ne pas dire grand chose et accessoirement pour frime dans un dîner mondain. Exemple :

- Oui, en effet, la semaine dernière, j'ai découvert un obfuscateur d'une grande puissance qui transforme du bytecode en un algorithme du même langage plus difficile à décompiler pour le newbie qui peine à coder deux méthodes en POO sans générer un code erreur de compilation.
- Mmmffff mmmfff mmfff .....
- Vous reprendrez bien un peu de thé avec ceci ?

Avez-vous remarqué l'approche pédagogique qui a été faite, je vous ai donné une belle définition dans une blague totalement lamentable ?! L'obfuscateur a en effet pour mission de faire de la purée de votre code, et ainsi le rendre plus difficile à comprendre et donc à décompiler.
Toutefois, dans notre cas présent, obfusquer de code Javascript a un double intérêt, rendre le code illisible (mais ceci n'est vraiment que très partiel) et surtout rendre vos scripts plus légers car ils se retrouveront débarrasser de leurs espaces et de leurs commentaires.

Voici sûrement le plus connu et gratuit /packer/ de Dean Edwards disponible sur http://dean.edwards.name/packer/ qui opère en ligne. Différentes options sont disponible, notamment retirer les espaces et commentaires, obfusquer le code, et remplacer les noms des variables sans influencer le comportent de vos scripts.


Et voici le passage que vous attendez tous : la Geekette !

Au hasard de mes navigations sur le net, je suis tombé sur le site Hello Geekette .com. Un petite série de court-métrages sur le thème des relations entre les geeks et les humains :


Greg est ce que l'on peux appeler si ça existe: « un mec normal ».
Alors que Valérie est ce que l'on peux appeler: « une geekette » .

Mais cela ne serait pas grave… s’ils n’étaient pas aussi… colocataires!

L'épisode Hello Geekette 5 - Geeks Vs Bobos est particulièrement savoureux ;-)
Dernier épisode en date du 1er octobre Hello Geekette 8 - Faites la guerre, pas l'amour !.


Hello Geekette 5 - Geeks Vs Bobos

Sources :
http://www.hellogeekette.com/
http://www.dailymotion.com/hellogeekette


Jeux-vidéo en Javascript ( js, svg, game, video games )
11`08`2008

2 commentairesPoster un commentaire !
Tags: Javascript Detente

Hélas, je ne vais pas vous sortir un Quake en Javascript ( encore que... avec les nouvelles fonctions de transformation de Webkit, je suis sûr qu'on pourrait presque y arriver ). Pour le moment, on va rester dans le simple mais dont certains restent tout de même très impressionnant.

Escapa : vous devez sauver un carré rouge de méchants rectangles bleuuuuussss
Bezumie : un peu de tout...
Chess : Jeu d'échec
Othello : Qui ne connait pas Othello ?

Yast : ni plus ni moins qu'un Tetris
Lemmings : et pour finir en beauté, les Lemmings ! Oui Madame !


Firefox 3 et input type=file Nouvelle Formule ! ( upload, path, nsIDOMFile )
12`07`2008

20 commentairesPoster un commentaire !
Tags: Firefox Javascript XHTML DOM

De bon matin, je me lève, j'arrive sur une de mes applications en ligne, et là horreur ! cette dernière ne fonctionne plus sous Mozilla Firefox 3... Après analyse des petits messages d'erreurs, je me rends à l'évidence le formulaire <input type="file" /> ne se comporte plus de la même façon...

Les développeurs de Firefox 3 ont corrigé une petite faille de sécurité : Lorsque vous cliquez sur le bouton Parcourir le value de votre zone input type="file" contenait le nom du fichier ainsi que son chemin sur le disque dur, et bien aujourd'hui cela n'est plus, vous n'aurez plus que le nom du fichier.
D'ailleurs, Opera Browser se comporte aussi de la sorte, pour le moment Microsoft Internet Explorer et Apple Safari retournent toujours le chemin complet du fichier.

Une très bonne nouvelle s'accompagne de ce petit changement, vous pouvez à présent accéder aux données du fichier sélectionné par l'utilisateur en Javascript sans poster le formulaire grâce à l'objet FileList.

Un exemple vaut mieux qu'un long discours, voici une page qui vous permettra d'essayer cette nouvelle fonctionnalité (qui je le rappelle, ne fonctionne que sur Mozilla Firefox 3) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>input type=file & Firefox 3</title>
</head>

<body>
	
<h1>input type=file & Firefox 3</h1>
	
<script type="text/javascript">
// <![CDATA[

function inputFileOnChange() {
	var v_console = '';
	v_console += 'value: ' + document.getElementById('fichier').value;
	v_console += '<br \/>';
	
	if(document.getElementById('fichier').files) {
		// Support: nsIDOMFile, nsIDOMFileList
		v_console += 'files.length: ' + document.getElementById('fichier').files.length;
		v_console += '<br \/>';
		
		v_console += 'fileName: ' + document.getElementById('fichier').files.item(0).fileName;
		v_console += '<br \/>';
		
		v_console += 'fileSize: ' + document.getElementById('fichier').files.item(0).fileSize;
		v_console += '<br \/>';
		
		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsDataURL();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsBinary();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsText();
		v_console += '<br \/>';
	};
	
	document.getElementById('console').innerHTML = v_console;
};

// ]]>
</script>
	
<div>
	<input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
	<br /><br />
	<code id="console">...console...</code>
</div>
	
</body>
</html>

Documentation officielle :
http://developer.mozilla.org/en/docs/nsIDOMFile
http://developer.mozilla.org/en/docs/nsIDOMFileList
http://www.w3.org/TR/file-upload/


Désactiver la saisie semi-automatique dans un input text ( autocomplete )
14`06`2008

5 commentairesPoster un commentaire !
Tags: Javascript XHTML

Votre site comporte peut être des formulaires avec des zones <input type="text" />, mais le navigateur soucieux d'assister l'utilisateur, pollue vos formulaires avec de la saisie semi-automatique...

Comment remédier à ce problème et surtout comment désactiver cette saisie semi-automatique ? Il "suffit" d'utiliser l'attribut autocomplete.

<input type="text" name="zone_texte" value="" autocomplete="off" />

J'ai pu testé avec succès cet attribut sur les différents navigateurs du moment : Microsoft Internet Explorer, Mozilla Firefox, et Apple Safari (webkit). Toutefois, cet attribut autocomplete écrit de manière brute dans le code source de votre page n'est ni valide en HTML, ni valide en XHTML. Pour fixer ce petit soucis, vous pouvez initialiser l'attribut avec du Javascript au moyen de la méthode setAttribute.

Voici un exemple de code Javascript qui désactivera totalement la saisie semi-automatique dans vos formulaires HTML :

<script type="text/javascript">

window.onload = function() {
	for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
		if(document.getElementsByTagName('input').item(i).type == 'text') {
			document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
		};
	};
};

<script>


Gérer les PNG transparents avec Internet Explorer 6 ( javascript, filter, CSS )
01`06`2008

Aucun commentairePoster un commentaire !
Tags: Internet Explorer Javascript CSS

Voici un petit javascript qui vous permettra de fixer la transparence des images au format PNG transparent 24 bits sous Microsoft Internet Explorer 6.

function fixPNG() {
	if(navigator.appName == 'Microsoft Internet Explorer') {
		var png = /\.png$/i;
		var imgs = document.getElementsByTagName('img');
		for(var i = 0, l = imgs.length; i < l; i++) {
			if(png.test(imgs.item(i).src)) {
				imgs.item(i).style.width = imgs.item(i).offsetWidth;
				imgs.item(i).style.height = imgs.item(i).offsetHeight;
				imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';
				imgs.item(i).src = 'empty.gif';
			}
		}
	}
}

Fonctionnement de la function :
Le PNG transparent est remplacé par un fichier GIF totalement transparent de 1px², puis le filter contenant le PNG est appliqué sur l'image GIF.
Pour activer cette fonction, il suffit de l'appeler dans un événement window.onload = function(){}.

Rappel des différentes écritures du filter en CSS :

img.image1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png', sizingMethod='image'); }
img.image2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png', sizingMethod='scale'); }
img.image3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png', sizingMethod='crop'); }


Effectuer une rotation d'image en CSS ( rotate balise canvas HTML5 )
18`05`2008

2 commentairesPoster un commentaire !
Tags: CSS Javascript Canvas HTML5

A l'heure où j'écris ces quelques lignes, il n'existe pas réellement de vraie solution pour effectuer une rotation sur une image (ou sur un élément) en CSS.

Sous Microsoft Internet Explorer, on peut effectuer une telle opération avec filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);. Toutefois, ceci ne permet pas d'effectuer une rotation au degré prêt.

Sous Apple Safari (Webkit), l'équipe de développement a proposé l'écriture suivante -webkit-transform: rotate(90deg);. Cette solution présente un très grand avantage, elle peut être appliquée sur tout type de balises et non simplement sur une image, mais cette propriété reste propre à Safari version 3.x...

Dans cette histoire, il reste toujours un navigateur sans réelle solution, notre cher Mozilla Firefox... on aurait pu espérer une commande du type -moz-rotate: 90;, mais il n'en est rien.


Voici donc la solution, utiliser la balise <canvas></canvas>.

La balise <canvas> est une extension non standard à la norme HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.
Cette balise est supportée par les derniers navigateurs Mozilla Firefox, Apple Safari, et Opera Browser. A noter que Microsoft Internet Explorer ne supporte pas nativement la balise <canvas>, pour ce faire, vous devez utiliser une sous couche excanvas ( disponible sur http://excanvas.sourceforge.net )


Exemple de script de rotation d'image compatible avec la plupart des navigateurs récents :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>rotate()</title>
	
	<style type="text/css" media="screen">
	img, canvas { border: 1px solid black; }
	</style>


<script type="text/javascript">

function rotate(p_deg) {
	if(document.getElementById('canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		Non: Opera 9.27
		*/
		var image = document.getElementById('image');
		var canvas = document.getElementById('canvas');
		var canvasContext = canvas.getContext('2d');
		
		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};
		
	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('image');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};
		
	};
};


window.onload = function() {
	var image = document.getElementById('image');
	var canvas = document.getElementById('canvas');
	if(canvas.getContext) {
		image.style.visibility = 'hidden';
		image.style.position = 'absolute';
	} else {
		canvas.parentNode.removeChild(canvas);
	};
	
	rotate(0);
};

</script>

</head>

<body>


<p>
	rotate:
	<input type="button" value="0°" onclick="rotate(0);" />
	<input type="button" value="90°" onclick="rotate(90);" />
	<input type="button" value="180°" onclick="rotate(180);" />
	<input type="button" value="-90°" onclick="rotate(-90);" />
</p>


<p>
	<img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
	<canvas id="canvas"></canvas>
</p>


</body>
</html>


Astuce avec Math.max() et Math.min() en Javascript sous Internet Explorer
06`04`2008

Aucun commentairePoster un commentaire !
Tags: Javascript Internet Explorer

Math.max() et Math.min() attendent deux nombres comme paramètres. Math.max() retourne le plus grand des deux nombres, et Math.min() retourne le plus petits des deux nombres.

Depuis Microsoft Internet Explorer 5.5, vous pouvez ajouter plus de paramètres, et de manière générale les navigateurs dernières générations supportent cette écriture (Microsoft Internet Explorer, Mozilla Firefox, Safari, Opera Browser...)

<script type="text/javascript">

document.writeln(Math.max(5, 4, 3, -1, 9));	// retourne 9

document.writeln(Math.min(5, 4, 3, -1, 9));	// retourne -1

</script>

Gérer window.orientation avec un iPhone / iPod Touch dans Safari (Webkit)
08`03`2008

6 commentairesPoster un commentaire !
Tags: iPhone Javascript Webkit

Ce script vous permet de déterminer et de gérer l'orientation d'un iPhone ou d'un iPod Touch grâce à la variable window.orientation et à l'évènement window.onorientationchange.

Exemple page-iphone-orientation.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> window.onorientationchange & window.orientation </title>
	
	<script type="text/javascript">
	
	window.onorientationchange = function() {
		if(window.orientation !== undefined) {
			document.getElementById('value-1').innerHTML = window.orientation;
			switch(window.orientation) {
				case 0 :
					document.getElementById('value-2').innerHTML = 'Portrait - Normal';
					break;
				case 90 :
					document.getElementById('value-2').innerHTML = 'Paysage - Dans le sens <strong>contraire<\/strong> des aiguilles d\'une montre.';
					break;
				case -90 :
					document.getElementById('value-2').innerHTML = 'Paysage - Dans le sens des aiguilles d\'une montre.';
					break;
				case 180 :
					document.getElementById('value-2').innerHTML = 'Portrait - Renversé';
					break;
			}
		} else {
			/* Vous n'utilisez ni un iPhone, ni un iPod Touch... */
			alert('Votre navigateur web ne supporte pas window.orientation');
		}
	}
	window.onload = window.onorientationchange;
	
	</script>
</head>

<body>
	
	<h1>window.onorientationchange & window.orientation</h1>
	
	<p>window.orientation = <span id="value-1"></span> // <span id="value-2"></span></p>
	
	<p>Cette page ne fonction qu'avec les iPhone et les iPod Touch.</p>
	
</body>
</html>

Ce script pourrait aussi servir à détecter si le navigateur utilisé est bien un navigateur Safari iPhone / iPod Touch.


insertAfter() avec insertBefore() et node.nextSibling (DOM Core Level 1)
23`02`2008

Aucun commentairePoster un commentaire !
Tags: Javascript DOM

La méthode element.insertBefore() permet d'insérer un nœud (node) enfant juste avant le nœud enfant de référence parmi un nœud parent.

noeudParent.insertBefore(noeudAInserer, noeudDeReference);


Il n'existe pas de méthode element.insertAfter() pour insérer un nœud après le nœud de reference. Pour contourner cette limitation, vous pouvez utiliser element.nextSibling, qui renverra le nœud suivant au nœud spécifié.

noeudParent.insertBefore(noeudAInserer, noeudDeReference.nextSibling);


Grâce au code source ci-dessous, vous pouvez ajouter la méthode element.insertAfter() et ainsi l'utiliser aussi simplement que element.insertBefore().

Node.prototype.insertAfter = function(noeudAInserer, noeudDeReference) {
	if(noeudDeReference.nextSibling) {
		return this.insertBefore(noeudAInserer, noeudDeReference.nextSibling);
	} else {
		return this.appendChild(noeudAInserer);
	}
}

Attention: le code ci-dessus ne fonctionne pas sous Internet Explorer... pour ce faire, vous devez utiliser une simple fonction Javascript.


MAJ de Google Analytics et explications de _trackPageview() - ga.js
27`01`2008

Aucun commentairePoster un commentaire !
Tags: Javascript Actionscript Google

Peut être comme moi, votre mois de décembre 2007 était chargé en divers activités professionnelles et familiales... et bien vous êtes sûrement dans ma situation, vous êtes passé à côté de la mise à jour du code Javascript de Google Analytics.

L'ancien code urchin.js reste toujours valable mais ne sera plus mise à jour

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-XXXXXX-X";
urchinTracker();
</script>

 

Voici le nouveau code (pas franchement en avant première) ga.js qui s'accompagne de son lot de nouveautés

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Ce code Javascript se place toujours juste avant la balise fermante </body> et doit être présent sur toutes pages de votre site internet devant être analysées par Google Analytics.

 

 

Entrons maintenant un peu dans la technique avec la fonction _trackPageview de Google Analytics

 

La fonction _trackPageview de Google Analytics permet d'effectuer le suivi d'événements sur votre site internet qui ne sont pas comptabilisés dans le nombre de pages vues. Grâce à cette fonction, vous pouvez affecter le nom de fichier d'une page spécifique à des événements Adobe Flash, Javascript, à des téléchargements de fichiers, des liens sortants...

Exemple de lien internet sortant

<a href="http://www.ab-d.fr/" onclick="javascript:pageTracker._trackPageview('/liens_externes/ab_d');">

Exemple de code Flash (Actionscript)

on (release) {
	getURL("javascript:pageTracker._trackPageview('/dossier/flash01.html');");
}

Chaque occurrence de l'événement appelant sera enregistrée comme s'il s'agissait d'une page de consultation pour l'URL /mondossier/mapage. L'argument doit débuter par une barre oblique et être placé entre guillemets droits.

Important : Si vos pages contiennent un appel à la fonction _trackPageview, votre code de suivi Google Analytics doit être inséré dans votre code HTML au-dessus de cet appel. Dans ce cas, le code de suivi peut être inséré n'importe où entre la balise d'ouverture <body> et l'appel Javascript.


Fonction PHP trim() en JavaScript (prototype, function)
14`01`2008

Aucun commentairePoster un commentaire !
Tags: Javascript PHP

String.prototype.trim = function() {
	return this.replace(/^\s*|\s*$/g, '');
};
Exemple
var v_string = ' Hello World ! ';
document.writeln('"' + v_string.trim() + '"');	// "Hello World !"

Fonction PHP count() en JavaScript (prototype, function)
08`12`2007

Aucun commentairePoster un commentaire !
Tags: Javascript PHP

Array.prototype.count = function() {
	return this.length;
}

Exemples

var v_array = [ 5, 10, 15, 20, 25];
document.writeln(v_array.count());  // 5

Fonction PHP in_array() en JavaScript (prototype, function, inarray)
14`10`2007

2 commentairesPoster un commentaire !
Tags: Javascript PHP

Array.prototype.in_array = function(p_val) {
	for(var i = 0, l = this.length; i < l; i++) {
		if(this[i] == p_val) {
			return true;
		}
	}
	return false;
}

Exemples

var v_array = [ 5, 10, 15, 20, 25];
document.writeln(v_array.in_array(10));  // true
document.writeln(v_array.in_array(11));  // false