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

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.+/);


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/


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.


Include CSS Stylesheet en DOM (Document Object Model)
18`09`2007

Aucun commentairePoster un commentaire !
Tags: CSS Javascript DOM

function includeCSS(p_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = p_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}