Un <script src=""> qui ne fonctionne pas ?

Sujet résolu

3 juillet 2010 à 23:28:59

Bonjour,

Je me suis mis au JS il y a peu, parfois bien pratique pour assurer une navigation agréable.

Seulement, je me heurte à un problème que je n'arrive pas à comprendre. Lorsque je place un script "en dur" dans la page HTML, il fonctionne sans aucun souci. Par contre, s'il est placé dans un fichier .js séparé... Rien. :euh:

Pour l'exemple, une petite fonction qui modifie la taille d'un formulaire :

<!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>    
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="test.css" />
	<script type="text/javascript" src="tests.js"></script>
    </head>
    <body>

<textarea rows="10" id="textarea" onclick="plusRows()"></textarea>
    </body>
</html>

Et dans "test.js" :

function plusRows()
{
	var textarea = document.getElementById('textarea');
	if (textarea.rows < 30)
	{
		textarea.rows += 2;
	}
}

Ne fonctionne pas. Tandis que ceci fonctionnera :

<!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>    
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="test.css" />
	<script type="text/javascript">
function plusRows()
{
	var textarea = document.getElementById('textarea');
	if (textarea.rows < 30)
	{
		textarea.rows += 2;
	}
}
</script>
    </head>
    <body>

<textarea rows="10" id="textarea" onclick="plusRows()"></textarea>
    </body>
</html>

Est-ce que j'ai loupé quelque chose ? J'ai effectué des recherches, relu le tuto sur le JS, mais je n'ai rien trouvé.

Merci d'avance.

Tillertan

3 juillet 2010 à 23:43:05

Bah là comme ça, le fait que tu te sois trompé dans le nom du fichier est la seul explication car :

http://stooit.com/explorerUpload/aa.htm

Ta page est stockée online qu'on voit ça ?

Anonyme

3 juillet 2010 à 23:46:09

Vu que tu commences, prends de bonnes habitudes :

enlève ton onclick=""
met ton <script src=""></script> avant ton </body>
enlève toute la ligne "var textarea = gebi();"
remplace tous les "textarea" de la fonction par this;

ajoute ça dans ton test.js

var txt = document.getElementById("textarea"); 
txt.onclick = plusRows;

voila, c'est propre.

Fotd

3 juillet 2010 à 23:56:15

J'ai trouvé la solution : je suis un abruti. C'est le .htaccess qui a causé ça. :-°

nod_ : Merci.

Par contre, d'après ce que j'ai lu :

Citation

On peut les placer soit dans l'en-tête (<head> ... </head>), soit dans le corps (<body> ... </body>) de la page (x)HTML :
- dans le corps de la page, sont à placer les scripts à exécuter au chargement de cette dernière (lorsque le navigateur "lira" le code, il l'exécutera en même temps).
C'est ce que nous allons utiliser pour cet exemple, il suffit d'écrire le code à exécuter entre les balises ;
- en revanche, sont à placer dans l'en-tête les éléments qui doivent être exécutés plus tard (lors d'un événement particulier, par exemple).
Dans ce cas, le code n'est pas écrit "en vrac", nous apprendrons plus loin comment l'organiser

Le placer juste avant le </body> n'est qu'une question de performance, ou de convention ?

Mes excuses pour ce sujet inutile.

Tillertan

4 juillet 2010 à 0:01:05

Si tu mets dans le head, ton javascript sera parsé avant ton code HTML, donc la page risque de s'afficher plus lentement (Enfin bon maintenant c'est pas flagrant hein)

Il y a p-e d'autres raisons mais j'avoue ne pas les connaître.

Mais dans tous les cas il n'y a pas d'avantage à le mettre dans le head.

Anonyme

4 juillet 2010 à 0:06:01

l'était pas inutile ce sujet, si t'as fait les corrections que j'ai recommandé t'as un code propre et évolutif.

performance, oui et c'est pas rien. Ça te permet de te passer d'utiliser window.onload ou un équivalent avec l'api du DOM, ce qui fait que ton code est exécuté plus vite au chargement.

Ça facilite alors la séparation du html et JS. si t'as plus besoin de onload, t'as plus besoin de faire attention a pas l'écraser, donc tu peux faire des trucs comme les deux lignes que je t'ai montré directement dans ton fichier js sans passer par une fonction d'initialisation.
Hop t'ajoute les évènements et les élements interactifs directement depuis javacript.

j'suis pas d'accord avec tiller, avec 100k de JS et/ou 2-3 fichiers js externes c'est flagrant. ( edit ) surtout si c'est pas gzipé et minifier, ce qui est majoritairement le cas…

Tillertan

4 juillet 2010 à 0:08:25

Citation : nod_

j'suis pas d'accord avec tiller

Ça fait mal quand notre Dieu JavaScript dit ça

Anonyme

4 juillet 2010 à 0:13:06

je sais j'ai fait exprès

Faites chier a savoir trop de trucs maintenant, j'ai pu l'occasion de le dire.

Fotd

4 juillet 2010 à 10:08:04

Merci beaucoup.