11548 sujets

JavaScript, DOM et API Web HTML5

Optimisation

Bonjour à tous.

Quelle est la solution la plus propre et quelle est la solution la plus rapide entre ?

Proposition 1 :
<div onclick="document.location.href='cible.php'">blablabla</div>


Proposition 2 :

<head>
	<!-- Juste avant la fin du head -->
	<script type="text/javascript">
		$('#bloc1').click(function () {
		document.location.href='cible.php';
		});
	</script>
</head>
<html>
	<div id="bloc1">blablabla</div>


Proposition 3 :
Pareil que la 2, sauf qu'on appelle un fichier javascript.js juste avant la fin du head.

En pratique, j'ai : 0, 1 ou 5 balises div sujettes à ces scripts par page.

Merci pour votre aide.
Modifié par Pyanepsion (01 Jun 2012 - 09:28)
Suite a des expériences personnelles, je dirais qu'appeler un fichier js est la meilleurs solution, mais pas forcément à la fin du head.

Personnellement j'appelle mes fichier juste avant la fin de mon body pour que l'ensemble des éléments du DOM soient intialisés et reconnus par javascript.
Salut...

la plsu propre ?? les deux sont propres...

la plus rapide ??

la proposition 4 de florian Smiley smile sinon la solution 1 que tu proposes car elle utilise le DOM JS natif, la 2 utilise la surcouche jQuery...
La solution 4 est peu envisageable, car pour le HTML tout le contenu du <div> serait alors considéré comme un lien, et obligerait à une gestion particulière de la balise <a> : souligné, survol, etc.

Si j'ai bien compris, dans ce cas particulier il vaut mieux utiliser la solution 1 puisque c'est la plus rapide, et lorsqu'il y a véritablement du code, il vaudrait mieux appeler un fichier externe (plus facile à gérer) et le mettre juste avant la balise </html> ?

Question subsidiaire : quelle est la meilleure position du code du dernier Google Analytics ?
En HTML5, applicable dès aujourd'hui : Block level links.

Au passage, vu que tu poses la question de la propreté du code, un onClick sur un div, c'est vraiment dégueu ; et ergonomiquement discutable.
Bonjour à toutes et à tous,

si l'utilisateur n'a pas activé le Javascript dans son navigateur alors l'accès est impossible.
Il vaut donc mieux éviter la solution Javascript si l'on peut faire autrement.

Inversement, si tu fais une usine à gaz sans Javascript, ce n'est pas bien du tout.
Il faut trouver un juste milieu entre la lourdeur d'un développement en Javascript et la lisibilité de ton document HTML.

De cela, je préconise la solution de Florian_R, car elle est lisible et fonctionne partout.
Et puis, selon les normes d'écritures des documents HTML, un lien doit être visible à l'écran.

Une autre solution consisterait à faire l'usage de la balise <button>.

@+
Modifié par Artemus24 (01 Jun 2012 - 10:16)
L'article est intéressant et donne fortement envie de faire pareil. J'ai par contre un peu la trouille d'utiliser complètement le HTML 5 avec des balises telles que <article>. Ne risquerais-je pas de perdre des visiteurs ?

Sinon, comment modifier proprement le CSS pour éviter de l'alourdir par des combinaisons qui s'annulent (je veux faire comme s'il n'y avait pas de lien) et qui, j'imagine, prennent donc du temps machine pour rien ?

/* liens */
a img{
	border:none;
}
a{
	text-decoration:none;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	transition-duration:0.2s;
	text-decoration: none;
	color: #96d2e1;
}
a:hover{
	background-color: #993366;
	color: #ffffff;
	font-weight: bold;
}
/* l'un des div actuellement utilisés */
.corps-site-index{
	background-color: #efefef;
	text-align: justify;
	display:inline-block;
	height:14.0em;
	width:220px;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	margin-left: 18px;
	margin-top: 8px;
	margin-bottom: 20px;
	border-bottom:4px solid #666666;
	border-right:4px solid #7b7b7b;
	border-top:4px solid #f0f0f0;
	border-left:4px solid #d2d2d2;
	overflow: hidden;
}
.corps-site-index:hover{
	background-color: #38a2af;
	background-image:url('../images/bandeaux/bandeau-med.png');
	-moz-box-shadow:1px 1px 10px #999;
	-webkit-box-shadow:1px 1px 10px #999;
	box-shadow:1px 1px 10px #999;
	border-bottom:4px solid #f0f0f0;
	border-right:4px solid #d2d2d2;
	border-top:4px solid #666666;
	border-left:4px solid #7b7b7b;
	color: #a7e3f2;
}
Administrateur
Florian_R a écrit :
En HTML5, applicable dès aujourd'hui : Block level links.
Discutable pour le référencement et hélas beaucoup trop tôt pour les assistances techniques (lecteurs d'écran et accessibilité)

Florian_R a écrit :
Au passage, vu que tu poses la question de la propreté du code, un onClick sur un div, c'est vraiment dégueu ; et ergonomiquement discutable.
Et je dirais même plus : un div ne prendra jamais le focus lors d'une navigation au clavier. Cette solution est crade sur tellement de niveaux ... Smiley smile
Felipe a écrit :
Discutable pour le référencement et hélas beaucoup trop tôt pour les assistances techniques (lecteurs d'écran et accessibilité)
Je ne sais pas ce qu'il en est du SEO, mais je suis surpris pour l'accessibilité. Je suis preneur de ressources si tu as ça sous le coude.
Sujet clos
Aller à