[Résolu] : hello world avec jquery ?

gringo75 · Le 19/01/2014, à 22:43

Bonjour à tous,

Je m'initie à jquery et je viens de télécharger le fichier sur jquery.com pour pouvoir utiliser jquery.
Je suis sur ubuntu 13.10 virtualisé sous vm player.

j'ai un dossier sur mon bureau qui s'appelle javascript avec 3 fichiers :
- un fichier test.html
- un fichier test.js
- un fichier jquery.js

=>J'ai regardé les différents tutos mais je n'arrive ps à faire fonctionner jquery.
Ci-dessous, les contenus des différents fichiers

test.html

<!DOCTYPE html>
<html>
  	<head>
      		<title>Tests en javascript</title>
		<meta charset="utf-8"/>
      		<script src="test.js"></script>
		<script src="jquery.js"></script>

	</head>
		  
		<body>
			
			<p>Test en cours</p>	

		</body>
</html>

test.js

<!--

$(document).ready(function() {
	alert("Hello world !");
});

-->

jquery.js =>Je ne le mets pas (à moins que certains d'entre vous estiment que cela soit nécessaire) car j'ai téléchargé la version sur le site. Pour info, la version non allégée.

Quelqu'un pourrait-il m'expliquer ce qui cloche dans mes fichiers ?
Quand je vais sur test.html via mon navigateur, je n'ai que le paragraphe : Test en cours.

Merci d'avance.

Dernière modification par gringo75 (Le 21/01/2014, à 19:09)

ljere · Le 20/01/2014, à 08:49

Bonjour,
je ne m'y connais pas en jquery mais je pense que tu as une erreur de syntaxe

jQuery(document).ready(function() {
    alert("Hello world !");
});

quand à cette ligne elle est en trop si tu ne l'utilises pas

        <script src="jquery.js"></script>

ps: j'ai trouvé ça pour débuter http://www.abrillant.com/test/jquery/jquery.html

Dernière modification par ljere (Le 20/01/2014, à 08:55)

gringo75 · Le 20/01/2014, à 20:38

Bonsoir Ljere,

Merci pour tes précisions mais d'après mes infos, mon code parait bon
1- le $ à la place du jQuery est un raccourci utilisable d'après plusieurs tutos dont celui que tu m'as envoyé
2- en ce qui concerne le <script src="jquery.js"></script>, il est nécessaire sinon, je ne pourrais pas utiliser la bibliothèque jquery je pense.

Si quelqu'un pouvait m'expliquer ce qui cloche, merci d'avance.
gringo75

Dernière modification par gringo75 (Le 20/01/2014, à 20:39)

ljere · Le 21/01/2014, à 08:11

Bonjour,
c'est good j'ai trouvé, tu as simplement mal placé ton code,
je viens de tester et ça fonctionne.

<!DOCTYPE html>
<html>
  	<head>
      		<title>Tests en javascript</title>
		<meta charset="utf-8"/>
	</head>
		  
		<body>
			
			<p>Test en cours</p>	

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      		<script src="test.js"></script>
		</body>
</html>

Les scripts ne doivent pas se trouver dans head mais dans body et on doit appeler en premier jquery.min.js ou dans ton cas si tu l'as bien dans le même dossier jquery.js.

gringo75 · Le 21/01/2014, à 19:08

Merci beaucoup,
2 choses :
1- effectivement, il faut charger <script src="jquery.js"></script> AVANT <script src="test.js"></script>
=>Cela permet de charger jquery avant le test.js

2- En ce qui concerne le fait de mettre ces balises dans <head>, j'ai testé et en fait cela ne pose pas problème.
En fait, je crois qu'il est plutôt conseillé de mettre selon que cela soit des évènements ou non soit entre les balises <head></head>, soit entre les balises <body></body>.
Pour info, pr rapport à cela, un copier/coller d'un tuto :
Le code Javascript peut être inséré où vous le désirez dans votre page Web, vous devez toutefois veiller à ce que le navigateur est entièrement chargé votre script avant d'exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela génèrera une erreur si cette fonction n'a pas été chargée.

Ainsi, on place généralement le maximum d'éléments du script dans la balise d'en-tête (ce sont les éléments située entre les balises <HEAD> et </HEAD>). Les évènements Javascript seront quant à eux placés dans le corps de la page (entre les balises <BODY> et </BODY>) comme attribut d'une commande HTML...

Sinon, merci à toi ljere de m'avoir aidé à résoudre mon problème.
Je passe mon poste en résolu

Dernière modification par gringo75 (Le 21/01/2014, à 19:08)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 19/01/2014, à 22:43

[Résolu] : hello world avec jquery ?

#2 Le 20/01/2014, à 08:49

Re : [Résolu] : hello world avec jquery ?

#3 Le 20/01/2014, à 20:38

Re : [Résolu] : hello world avec jquery ?

#4 Le 21/01/2014, à 08:11

Re : [Résolu] : hello world avec jquery ?

#5 Le 21/01/2014, à 19:08

Re : [Résolu] : hello world avec jquery ?

Pied de page des forums