11548 sujets

JavaScript, DOM et API Web HTML5

Problème de syntaxe..

Bonjour, j'ai suivi un tuto et ça marche po !!! dream me dit ligne 4 erreur de syntaxe dans le jquery mais je vois pas, pouvez vous m'éclairez ? ci-joint:

html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" src="jsjquery.js"></script>
<title>Prochainement chez Ostraca</title>
</head>
<body>
‹div id="fei2" class="shadow">
‹img class="bottom" src="JPG/images/Site Jour.jpg'" />
‹img class="top" src="JPG/images/Site Nuit.jpg" />
‹/div>
‹p id="fei_onclick">Cliques-moi‹/p>
</body>
</html>


mon css:
@charset "UTF-8";
/* CSS Document */

#fei2 { position:relative; height:479px; width:850px; margin:0 auto; }
#fei2 img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
#fei2 img.transparent { opacity:0; }
#fei_onclick { cursor:pointer; }

mon jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" language="javascript" type="text/javascript" >
‹/script>
‹script language="javascript" type="text/javascript" >
$(document).ready(function() { $("#fei_onclick").click(function() { $("#fei2 img.top").toggleClass("transparent")});
});
‹/script>



Voila je suis débutant alors n'hésitez pas a me dire si j'ai choisi quelque chose de trop complexe....
merci
Deux problèmes :
1- Tu as un espace dans le nom de tes fichiers. Ça peut fonctionner comme ça mais c'est franchement pas recommandé, enlève donc les espaces.
2- Je comprends pas bien comment ce que tu as dans ton fichier jsjquery.js... Tu mets les balises <script> et tout dedans ? Si c'est le cas ce n'est pas du tout comme ça que tu es censé faire Smiley langue
En fait tu n'as même pas besoin de fichier externe (pour un petit script comme ça en tout cas). Mets directement tes balises scripts juste avant la fermeture du body comme ceci :
<p id="fei_onclick">Cliques-moi</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" language="javascript" type="text/javascript" ></script>
<script language="javascript" type="text/javascript" >
    $(document).ready(function() {
        $("#fei_onclick").click(function() { $("#fei2 img.top").toggleClass("transparent")});
    });
</script>
</body>


Une fois ces modifications faites ça fonctionne impeccablement chez moi =)
Modifié par BlueScreenJunky (13 Feb 2012 - 22:06)
Merci beaucoup !

je regarde ca et je test chez moi....grâce a toi je vaais gagner un temps precieux...

just question: pour les csript, a quel occasion on créer un fichier externe ? est-ce juste un rapport de taille ?

Merci encore Smiley cligne
Oui ça va essentiellement dépendre de la taille de ton javascript. Quand il est trop volumineux et commun à plusieurs pages (ou sur une page dynamique) il vaut mieux le mettre à part pour qu'il reste dans le cache du navigateur et qu'il ne soit pas rechargé à chaque page.
Quand il est petit comme ça, c'est peut-être aussi simple de l'intégrer directement à ta page html, mais tu pourrais aussi le mettre dans un fichier séparé.
Dans ce cas tu aurais fait

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" language="javascript" type="text/javascript" ></script>
<script src="jsjquery.js" language="javascript" type="text/javascript" ></script>
</body>

Et dans le fichier .js tu balance directement ton code javascript sans balises ni rien.

Sinon tu as remarqué que dans mon exemple je mets ton script et l'appel à jquery en bas de page : C'est une bonne habitude à prendre, ça permet de commencer à afficher la page avant de charger jquery (SI tu mets jquery en haut comme tu l'as fait, le navigateur va commencer par charger 90Ko de jquery avant d'afficher quoique ce soit, c'est un peu dommage).

Bonne continuation !
Accessoirement, si tu charges jQuery juste pour ce petit bout de code, ça serait pas plus mal de le coder en JS sans jQuery.
Aussi, c'est sur Smiley lol
Mais bon il faut aussi réfléchir à l'avance à ce dont on aura besoin pour le site complet : Il m'est déjà arrivé de commencer sans jQuery, et puis quand le projet a grossi et que j'ai commencé à ajouter des animations et des requêtes ajax je suis passé sur jQuery, et là je me suis dit que j'aurais mieux fait de commencer direct en jQuery.

Bref, il faut évaluer ses besoin pour déterminer si on a besoin d'un framework ou pas, mais c'est sûr que quand on a pris goût à jQuery il est malheureusement difficile de s'en passer XD
Sujet clos
Aller à