PDA

Afficher la version complète : [Réglé] un .js lié à un .html et... pas de js !! ???



moniroje
03/04/2016, 16h20
Hello!!
J'ai mis à un fichier .html , à la fin, un lien sur un fichier .js situé dans le même dossier

}
</p>
<h3> b) Appel de la fonction de conversion</h3>
<script src="convertirNombreEnLettres.js"></script>

</section>

</div>
</body>
</html>
Ce fichier .js, il devrait marcher, j'ai juste pompé le corrigé de l'exo.
Eh bien: il ne marche pas!!! zut!!!
C'est quoi que j'ai fait de pas bien???
Avec la touche F12, j'ai ce message:

SyntaxError: missing ; before statement

barbe-sauvage
04/04/2016, 06h05
Alut
En principe, on met le script dans le head c-à-d :


<html>
<head>
<script type="text/javascript" src="convertirNombreEnLettres.js"></script>
</head>
<body>
ici commence ta page html
et pour appeler ta fonction :
<h3> b) Appel de la fonction de conversion</h3>
<a onclick="convertir();">cliquer pour lancer la convertion</a>


convertir() est le nom de ta fonction qui doit être appelée en 1° (c'est 1 nom à la moi, donc ça ne marchera sûrement pas)

pour que ça marche comme tu l'a mis, il faut qu'il y ai l'appel de la fonction à la fin du fichier script , genre :
convertir();

niuxe
06/04/2016, 22h19
Salut,


ah, ça va me faire plaisir d'aider sur Alionet. Le nombre de fois qu'on m'a donné un bon coup de main ici. :)


Alut
En principe, on met le script dans le head c-à-d :


<html>
<head>
<script type="text/javascript" src="convertirNombreEnLettres.js"></script>
</head>
<body>
ici commence ta page html
et pour appeler ta fonction :
<h3> b) Appel de la fonction de conversion</h3>
<a onclick="convertir();">cliquer pour lancer la convertion</a>


convertir() est le nom de ta fonction qui doit être appelée en 1° (c'est 1 nom à la moi, donc ça ne marchera sûrement pas)

pour que ça marche comme tu l'a mis, il faut qu'il y ai l'appel de la fonction à la fin du fichier script , genre :
convertir();


Non faux ! Le JS doit être mis en bas de page juste avant la fermeture de </body>. Bien sûr, on le met dans un ordre relativement précis : les librairies et ensuite le fonctionnel Pourquoi ? C'est pour des raisons de performances. On charge d'abord le contenu html et ensuite le JS. Ensuite tout dépend du comportement que tu veux obtenir. Mais en générale et dans les bonnes pratiques, c'est comme cela que l'on fait. ;). Attention, cette pratique est dans le cas 'une utilisation basique : Pas e react, Angular, Ember, Backbone, etc. (et quand bien même)

Au passage, le onclick dans l'élément html, c'est juste dégueu comme écriture. Pourquoi ? Pas de séparation des diverses couches (contenu / comportement). Donc pour la maintenance, c'est easy....

@Moniroje : Malheureusement tu en donnes pas beaucoup. Je n'ai pas la boule de cristale. Cependant et vraissemblablement il y a un script qui plante et de ce fait, fait planter les autres scripts. Ce que je t'invite à faire, tu commentes ou supprimes les scripts dans ta page html jusqu'à ne plus voir cette erreur en console. Peux tu nous en dire un peu plus sur le forum stp ? Peux tu mettre ton code source sur le forum stp ? Normalement, si tu utilises FF ou Chrome, tu dois voir l'endroit où il y a l'erreur (n° de ligne)

Tiens nous au courant. :)

moniroje
08/04/2016, 17h50
Hello!!! submarine!!!
Désolé; j'ai été occupé par la famille et les petits-enfants, nom de nom, yen a un, c'est un bandit, un voyou mais paraît-il: mon portrait tout craché!! zut.
J'ai bien réfléchi à tout ce que vous m'avez appris; j'ai essayé... heu, ça n'a pas marché. Vous verrez dans le code que je vous joins;
D'abord le fichier .html:


<!DOCTYPE html>

<!-- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > -->

<html>

<head>
<title> convertir un nombre en toutes lettres</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="Style.css" />
<!-- balisescript type="text/javascript" src="convertirNombreEnLettres.js"> </script> -->

</head>

<body>

<section>
<h2> TABLE DES MATIERES </h2>
<p>
<nav>
<ul>
<li>Marche à suivre</li>
<li><a href="#parse">Les fonctions parseInt()</a></li>
<li><a href="#NaN">Fonctions is NaN()</a></li>
<li><a href="#exo">L'exercice</a></li>
<li><a href="#alionet" >Au secours! Alionetiens!! help ! </a></li>
</ul>
</nav>

</section>

<div id="bloc_page">
<!-- sans oublier à la fin de ce fichier, juste au dessus de la /body de
mettre la balise /div> -->
<!-- cette balise div bloc_page permet de fixer dans le fichier .css les
dimensions de la page, de centrer notre site à l'écran -->

<header>

<section>
<h1>TP JavaScript:convertir un nombre en toutes lettres</h1>
<p> bizarre, ça ne marche pas, le fichier js appelé par ce html; F12 me dit
ceci: <br />
SyntaxError: missing ; before statement </p>
<p> Si l'utilisateur entre le nombre « 41 », le script devra retourner ce nombre <br />
en toutes lettres : « quarante-et-un ». </p>
<!-- ****** CREER UNE ANCRE POUR LIEN: sur une balise, ajouter id= "nom de
l'ancre" -->
<h2>Marche à suivre </h2>
<p> _ L'utilisateur est invité à entrer un nombre entre 0 et 999.<br />

_ Ce nombre doit être envoyé à une fonction qui se charge de le convertir en<br />
toutes lettres.<br />

_Cette même fonction doit contenir un système permettant de séparer les <br />
centaines, les dizaines et les unités. Ainsi, la fonction doit être capable<br />
de voir que dans le nombre 365 il y a trois centaines, six dizaines et cinq<br />
unités. Pour obtenir ce résultat, pensez bien à utiliser le modulo. Exemple :<br />
365 % 10 = 5.<br />

_Une fois le nombre découpé en trois chiffres, il ne reste plus qu'à convertir<br />
ces derniers en toutes lettres.<br />

_Lorsque la fonction a fini de s'exécuter, elle renvoie le nombre en toutes<br />
lettres.<br />

_Une fois le résultat de la fonction obtenu, il est affiché à l'utilisateur.<br />

Lorsque l'affichage du nombre en toutes lettres est terminé, on redemande un <br />
nouveau nombre à l'utilisateur. </p>

<h2 id= "parse">fonction parseInt() </h2>
<p> Cette fonction possède en réalité non pas un mais deux arguments. Le deuxième <br />
indique la base arithmétique à utiliser; il est très utile dans certains cas, <br />
comme celui-ci par exemple : <br />

alert(parseInt('010')); // Affiche « 8 » sur certains navigateurs<br />

Et là vous constatez que, sur certains navigateurs, le chiffre affiché n'est pas<br />
10 comme souhaité mais 8 ! Pourquoi ? Tout simplement parce que la fonction <br />
parseInt() supporte plusieurs bases arithmétiques; et là, sans le 2° argument qui<br />
définit la base désirée, la fonction a interprété notre nombre comme étant en <br />
base 8 (système octal) simplement parce que la chaîne de caractères commence par<br />
un 0.<br />

alert(parseInt('100', 2)); // Affiche « 4 »<br />

nous obtenons bien le nombre 4 à partir de la base 2, c'est bon !<br />
Bref, pour convertir correctement notre premier nombre, il nous faut indiquer à<br />
parseInt() que ce dernier est en base 10, comme ceci : <br />

alert(parseInt('010', 10)); // Affiche « 10 »<br />

Maintenant nous obtenons bien le nombre 10 ! </p>

<h2 id= "NaN">La fonction isNaN() </h2>
<p>qui signifie: is Not a Number <br />
Jusqu'à présent, pour tester si une variable était un nombre, on utilisait <br />
l'instruction typeof, sauf qu'elle pose problème : si à parseInt, au lieu de mettre<br />
un nombre, on a mis un mot: tsointsoin:<br />
var test = parseInt('tsointsoin'); /* Contient au final la valeur « NaN » qui<br />
signifie: Not a Number */ <br />
alert(typeof test); // Affiche « number » // ce qui est contradictoire <br />
alors que avec la fonction isNaN(): <br />
var test = parseInt('tsointsoin'); // Contient au final la valeur « NaN »
alert(isNaN(test)); // Affiche « true »
</p>
<h2 id= "exo"> L'exo: le corrigé carrément pompé </h2>
<h3>a) le squelette du code</h3>
<p>nous avons besoin d'une fonction qui fera la conversion des nombres, ainsi
<br /> que d'une boucle pour demander à l'utilisateur d'entrer un nouveau nombre
<br /> sans jamais s'arrêter (sauf si l'utilisateur le demande). Voici ce que ça
donne :</p>
<p>
function num2Letters(number) { // « num2Letters » se lit « number to letters
»,<br /> le « 2 » est une abréviation souvent utilisée en programmation<br />
// Notre fonction qui s'occupera de la conversion du nombre. Elle possède<br
/> un argument lui permettant de recevoir les nombres en question.<br />
}<br />
var userEntry; // Contient le texte entré par l'utilisateur<br />
while (userEntry = prompt('Indiquez le nombre à écrire en toutes lettres (entre
<br /> 0 et 999) :')) {<br />
/*<br />

Dans la condition de la boucle, on stocke le texte de l'utilisateur dans
la<br /> variable « userEntry ».<br />
Ce qui fait que si l'utilisateur n'a rien entré (valeur nulle, donc <br />
équivalente à false) la condition ne sera pas validée.<br />
Donc la boucle while ne s'exécutera pas et dans le cas contraire la boucle
<br /> s'exécutera.<br />
*/<br />
}
</p>
<!-- <h3> b) Appel de la fonction de conversion</h3>
<script src="convertirNombreEnLettres.js"></script> -->

<h2 id= "alionet"> Au secours! Alionetiens!! help !</h2>
<p>_barbe-sauvage:En principe, on met le script dans le head: <br />
<html> <br />
<head> <br />
balisescript type="text/javascript" src="convertirNombreEnLettres.js"></script> <br />
</head> <br />
<body> <br />
ici commence ta page html <br />
et pour appeler ta fonction : <br />
baliseh3> b) Appel de la fonction de conversion balise/h3> <br />
balisea onclick="convertir();">cliquer pour lancer la convertion balise/a> <br />
convertir() est le nom de ta fonction qui doit être appelée en 1° (c'est 1 nom à<br />
la moi, donc ça ne marchera sûrement pas) <br />
pour que ça marche comme tu l'a mis, il faut qu'il y ait l'appel de la fonction à <br />
la fin du fichier script , genre : convertir();
</p>
<p>_moi: muy bien, donc je commente les lignes 137 & 138 et la 138, avant src, je tape <br />
type="text/javascript" (ce que je n'ai pas encore appris) et hop! je mets dans le head <br />
soit en ligne 14. <br />
ah bon??? faut l'appeler ??? ah oui, je l'avais appelé, donc appelons:
</p>
<h3> b) Appel de la fonction de conversion</h3>
<!-- balisea onclick="convertir();">cliquer pour lancer la convertion</a> -->
<p>Oui mais faut-il... que je mette une ancre: id ="nom de l'ancre": convertir() sur <br />
l'appel du 18 Juin en ligne 14 ? comme ceci: <br />
balisescript id="convertir()" type="text/javascript" src="convertirNombreEnLettres.js"></script> <br />
J'essaye. <br />
OK, ça n'a pas marché; peut-être que mon initiative d'ancrer convertir() est la cause de <br />
ce disfonctionnement? je désancre la ligne 14; là elle est comme barbu-sauvage a dit. <br />
Zut! ça ne marche toujours pas. Bon, je regarde niuxe:
</p>
<p>
_niuxe: Non faux ! Le JS doit être mis en bas de page juste avant la fermeture de /body>. <br />
Bien sûr, on le met dans un ordre relativement précis : les librairies et ensuite le fonctionnel <br />
Pourquoi ? C'est pour des raisons de performances. On charge d'abord le contenu html et ensuite<br />
le JS. Ensuite tout dépend du comportement que tu veux obtenir. Mais en général et dans les <br />
bonnes pratiques, c'est comme cela que l'on fait. . Attention, cette pratique est dans le cas<br />
d'une utilisation basique : Pas de react, Angular, Ember, Backbone, etc. (et quand bien même)<br />
Au passage, le onclick dans l'élément html, c'est juste dégueu comme écriture. Pourquoi ? Pas de <br />
séparation des diverses couches (contenu / comportement). Donc pour la maintenance, c'est easy....<br />
@Moniroje : Malheureusement tu en donnes pas beaucoup. Je n'ai pas la boule de cristal. Cependant<br />
et vraisemblablement il y a un script qui plante et de ce fait, fait planter les autres scripts.<br />
Ce que je t'invite à faire, tu commentes ou supprimes les scripts dans ta page html jusqu'à ne
<br />plus voir cette erreur en console. Peux-tu nous en dire un peu plus sur le forum stp ?<br />
Peux-tu mettre ton code source sur le forum stp ? Normalement, si tu utilises FF ou Chrome,<br />
tu dois voir l'endroit où il y a l'erreur (n° de ligne).<br />
Tiens nous au courant.
</p>
<p>_moi: "Le JS doit être mis en bas de page juste avant la fermeture de /body>." donc je mets<br />
la ligne 14 juste devant le /body, soit en ligne 195 et je commente ligne 14 <br />
ah bon, c'est pas bien le onclick ??Je commente la ligne 162 alors; voyons... <br />
Ben non, ça ne marche toujours pas et la touche F12, en Firefox, me dit: <br />
SyntaxError: missing ; before statement convertirNombreEnLettres.js:2:3 <br />
C'est l'onglet JS donc l'erreur est dans le fichier js ??? OK, je regarde... heu... j'ai juste <br />
copié-collé ce fichier js du cours et dans le cours, le job il est impec!!!
</p>

</section>

</div>
<script type="text/javascript" src="convertirNombreEnLettres.js"> </script>
</body>
</html>

moniroje
08/04/2016, 17h53
et autant le html est tout de mon cru, whouaaa! j'en suis fier, hi hi,
pas de fichier .css pour le colorier et le rendre joli, on verra plus tard.
Et le fichier .js, je l'ai simplement pompé du cours: tout sélectionner, copier-coller:
message trop long; je vous envoie le fichier .js à part:

<!-- JAVASCRIPT
Du code javascript est inclus par la balise script dans du code html.-->
<!--En fait, il est possible et même conseillé,d écrire le code JavaScript
dans un fichier externe, portant l extension js Ce fichier est ensuite appelé
depuis la page Web au moyen de l élément <script> et de son attribut src qui
contient l URL du fichier js Ce que j ai fait ici FIN DE JAVASCRIPT -->
<!-- nota: sans les commentaires, éviter les apostrophes et les points qui
rendent la suite non-commentaires -->
function num2Letters(number)
{

if (isNaN(number) || number < 0 || 999 < number) {
return 'Veuillez entrer un nombre entier compris entre 0 et 999.';
}

var units2Letters = ['', 'un', 'deux', 'trois', 'quatre', 'cinq', 'six',
'sept', 'huit', 'neuf', 'dix', 'onze', 'douze', 'treize', 'quatorze', 'quinze',
'seize', 'dix-sept', 'dix-huit', 'dix-neuf'],
tens2Letters = ['', 'dix', 'vingt', 'trente', 'quarante', 'cinquante',
'soixante', 'soixante', 'quatre-vingt', 'quatre-vingt'];

var units = number % 10,
tens = (number % 100 - units) / 10,
hundreds = (number % 1000 - number % 100) / 100;

var unitsOut, tensOut, hundredsOut;


if (number === 0) {

return 'zéro';

} else {

// Traitement des unités

unitsOut = (units === 1 && tens > 0 && tens !== 8 ? 'et-' : '') +
units2Letters[units];

// Traitement des dizaines

if (tens === 1 && units > 0) {

tensOut = units2Letters[10 + units];
unitsOut = '';

} else if (tens === 7 || tens === 9) {

tensOut = tens2Letters[tens] + '-' + (tens === 7 && units === 1 ?
'et-' : '') + units2Letters[10 + units];
unitsOut = '';

} else {

tensOut = tens2Letters[tens];

}

tensOut += (units === 0 && tens === 8 ? 's' : '');

// Traitement des centaines

hundredsOut = (hundreds > 1 ? units2Letters[hundreds] + '-' : '') +
(hundreds > 0 ? 'cent' : '') + (hundreds > 1 && tens == 0 && units == 0 ? 's' :
'');

// Retour du total

return hundredsOut + (hundredsOut && tensOut ? '-' : '') + tensOut +
(hundredsOut && unitsOut || tensOut && unitsOut ? '-' : '') + unitsOut;
}

}



var userEntry;

while (userEntry = prompt('Indiquez le nombre à écrire en toutes lettres (entre
0 et 999) :')) {

alert(num2Letters(parseInt(userEntry, 10)));

}

niuxe
10/04/2016, 22h53
Ce soir, je suis mort de fatigue mais en lisant vite fait ton code, je vois ça :



<!-- JAVASCRIPT
Du code javascript est inclus par la balise script dans du code html.-->
<!--En fait, il est possible et même conseillé,d écrire le code JavaScript
dans un fichier externe, portant l extension js Ce fichier est ensuite appelé
depuis la page Web au moyen de l élément <script> et de son attribut src qui
contient l URL du fichier js Ce que j ai fait ici FIN DE JAVASCRIPT -->
<!-- nota: sans les commentaires, éviter les apostrophes et les points qui
rendent la suite non-commentaires -->


Les commentaires JS ne se font pas comme ça
Quand tu veux faire un commentaire sur une seule ligne, c'est comme ceci :



//pour créer un commentaire sur une seul ligne, il faut précéder le texte par deux slash


Quand tu veux faire un commentaire sur plusieurs lignes, ça se passe comme ceci :


/*
pour créer un
commentaire sur
plusieurs
lignes, le bloc de commentaire doit commencer par un slash et une étoile et doit se terminer par une étoile et un slash
*/


Essai ton script et dis nous. Au passage, la fonction parseInt DOIT comporter 2 arguments. Si elle a qu'un seul arguement la valeur de sortie peut être erronée. Le deuxième argument sert à définir le type de nombre (base de 10, octale, etc.)

niuxe
10/04/2016, 22h59
C'est bon, ton code, je viens de le corriger (multiples problèmes d'indentation) :



function num2Letters(number)
{

if (isNaN(number) || number < 0 || 999 < number) {
return 'Veuillez entrer un nombre entier compris entre 0 et 999.';
}

var units2Letters = ['', 'un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept', 'huit', 'neuf', 'dix', 'onze', 'douze', 'treize', 'quatorze', 'quinze', 'seize', 'dix-sept', 'dix-huit', 'dix-neuf'],
tens2Letters = ['', 'dix', 'vingt', 'trente', 'quarante', 'cinquante', 'soixante', 'soixante', 'quatre-vingt', 'quatre-vingt'];

var units = number % 10,
tens = (number % 100 - units) / 10,
hundreds = (number % 1000 - number % 100) / 100;

var unitsOut, tensOut, hundredsOut;


if (number === 0) {

return 'zéro';

} else {

// Traitement des unités

unitsOut = (units === 1 && tens > 0 && tens !== 8 ? 'et-' : '') + units2Letters[units];

// Traitement des dizaines

if (tens === 1 && units > 0) {

tensOut = units2Letters[10 + units];
unitsOut = '';

} else if (tens === 7 || tens === 9) {

tensOut = tens2Letters[tens] + '-' + (tens === 7 && units === 1 ? 'et-' : '') + units2Letters[10 + units];
unitsOut = '';

} else {

tensOut = tens2Letters[tens];

}

tensOut += (units === 0 && tens === 8 ? 's' : '');

// Traitement des centaines

hundredsOut = (hundreds > 1 ? units2Letters[hundreds] + '-' : '') + (hundreds > 0 ? 'cent' : '') + (hundreds > 1 && tens == 0 && units == 0 ? 's' : '');

// Retour du total

return hundredsOut + (hundredsOut && tensOut ? '-' : '') + tensOut + (hundredsOut && unitsOut || tensOut && unitsOut ? '-' : '') + unitsOut;
}

}



var userEntry;

while (userEntry = prompt('Indiquez le nombre à écrire en toutes lettres (entre 0 et 999) :')) {

alert(num2Letters(parseInt(userEntry, 10)));

}


à+

moniroje
13/04/2016, 17h06
:waoo: c'est trop bien!!! hou que c'est beau quand ça marche!!!! merci à toi, niuxe mais aussi à barbu sauvage!!!
du coup, vais continuer à apprendre le JavaScript.
Sinon, scrogneugneu, pas la première fois que je me fais avoir avec les commentaires! Il n'y a donc que en html qu'on use des <!-- et -->
Les fichiers .cs et .js, comme en C++: les // et /*; franchement, ça serait plus simple si les comments, en .html, soient comme partout ailleurs.
Et... surprise, l'indentation, c'est important..
chavais pas que l'indentation, c'était aussi une seule ligne pour la commande; certes, c'est logique...
Mais j"'avais appris que les blancs, ça ne comptait pas et de ce fait, j'avais imposé à Kate (et Bluefish utilisé ici) le retour à la ligne à la colonne 80. Vais corriger.
En tout cas, vous êtes trop forts!!! et clairs.. et patients... et super-sympas, hi hi.

niuxe
22/04/2016, 17h40
Yep,

Désolé si je te réponds aussi tardivement. Je suis heureux que j'ai pu t'aider dans ta démarche. Je t'avoue que le mois d'avril est très chargé pour moi (cette semaine, un truc de malade). Mais lorsque j'ai corrigé ton script, j'étais quasiment certain du résultat (7 ans de dev Javascript en tant que pro).
L'indentation en soit n'est pas importante en JS (pour le langage). C'est important pour le développeur. Après tu apprendras à minifier ton/tes fichiers. Ça permet d'avoir un gain de perf non négligeable.

Je te souhaite un bon apprentissage du langage. Aussi, je te conseille vivement de regarder les specs de l'ES6. C'est quasiment demain.... Enfin, la vrai poo arrive en JS. ^^


Au passage, je connais qu'un seul vrai langage où l'indentation est très importante : Le Python. Sache que c'est du pur bonheur. La syntaxe est encore mieux. Par contre, il faut toujours les besoins par rapport au langage.