Exercice de débutant à résoudre

Version imprimable

13/03/2014, 20h20
Dominiqueguy1

Exercice de débutant à résoudre

Bonjour,

comme indiqué dans l'intitulé, je suis une super débutante mais bien décidée à comprendre.

mon problème est le suivant: j'ai un exercice à faire (qui devra me servir de base pour 10 autres!) et je n'arrive pas à faire le premier que voici:

//Créer un tableau avec les noms de vos colocataires (ou les noms de famille ou camarades de classe). Assurez-vous qu'il y en ai au moins 5. Entrez les fonctions suivantes :• Écrire à l'écran le nombre d'éléments que contient le tableau • Écrire le premier, troisième et cinquième élément du tableau à l'écran• Trier le tableau par ordre alphabétique et les écrire sur l'écran• Question avec prompte () un nom supplémentaire. Ajouter ceci avec un Arrayfunction au tableau et écrire le résultat à l'écran (ou la fenêtre de console ou alerte)• Ajouter le tableau à une chaîne et la chaîne d'affichage sur l'écran.

J'arrive presque à tout faire mais pas dans le bon ordre je crois, bref ça ne va pas.

Quelqu'un peut-il m'aider?

Merci d'avance :)
13/03/2014, 22h02
f-leb

bonjour,

c'est en quel langage ton exercice ?
13/03/2014, 22h09
Dominiqueguy1

Merci de me répondre :) Mon exercice doit être en Javascript.
13/03/2014, 22h44
Spartacusply

Qu'arrives tu à faire déjà ? Montre ce que tu as essayé et le code qui te pose problème.

Mon problème n'est pas un code, mais dans quelle ordre tout mettre dans la fonction: ne riez pas voilà ce que j'ai essayé :oops:

Code:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<p> Table contains 5 elements.</p>
<p> Eric, Michel, Frederik.</p>
<p id="demo">Click the button to see a list of my friends and family.</p>
<button onclick="myFunction()">Try it</button>
<script>

Code:

1
2
3
4
5
6
7
function myFunction(){
var friends = new Array(5);
var friends = ["Eric", "Nico", "Michel","Patrick","Frederik"];
 
var x=document.getElementById("demo");
x.innerHTML=friends.sort();//  si je mets .lenght , j'ai la longeur mais plus l'ordre alphabétique, où et comment ajouter l'alerte et regrouper le tout?Bref: je nage!
}

Code:

1
2
3
4
5
6
</script>
</head>
<body>
 
</body>
</html>

13/03/2014, 23h06
Spartacusply

SI je lis bien ton énoncé, il te faut une fonction par fonctionnalité souhaitée. Commence par créer autant de fonction qu'il y a de point dans ton énoncé.

Bon voilà j'ai fait ce que j'ai pu, mais c'est pas terrible, il me manque sûrement un.slice ou autre chose pour trier les trois prénoms (le 1,3,5), .lenght c'est pas ça non plus, je ne vois plus clair:? Bref, voilà et merci de ton aide.

Code:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<p> Table contains 5 elements.</p>
<p> Eric, Michel, Frederik.</p>
<body>
<p id="demo">Click the button to see a list of my friends and family.</p>
<button onclick="myFunction()">Try it</button>
<script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var friends = new Array(5);
var friends = ["Eric", "Nico", "Michel","Patrick","Frederik"];
function myFunction(){
var x=document.getElementById("demo");
x.innerHTML=friends.sort();friends.lentht;
var x;
var person=prompt("enter the name Luc","");
{x="Luc";
document.getElementById("demo").innerHTML=x;}
}{
var x=document.getElementById("demo");
x.innerHTML=friends.join();
}

Code:

1
2
3
4
5
</script>
</head>
 
</body>
</html>

Je pense comme Spartacusply : il faudrait que tu commences par faire 5 fonctions, car il y a 5 questions dans l'énoncé (si je l'ai bien lu – il y a des passages qui ressemblent à une traduction automatique façon Google :?).

Pour commencer, prépare une page HTML propre. L'exercice ne porte peut-être pas sur HTML, mais il y a un minimum à savoir. Là il y a des <p> dans le <head>, pas de déclaration de langue ni de charset, pas de <title>. Voilà ce que je propose : faire une page qui reprend les différents points de l'énoncé dans une liste, avec un bouton pour chaque point. Chaque bouton appellera sa propre fonction.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 <!DOCTYPE html> <html lang=fr> <head> <meta charset=utf-8> <title>Exercice sur les tableaux JavaScript</title> </head> <body> <h1>Exercice</h1> <p>Créer un tableau avec 5 noms.</p> <p>Entrer les fonctions suivantes :</p> <ul> <li> Écrire à l’écran le nombre d’éléments que contient le tableau. <button id=test-nombre>Test</button> </li> <li> Écrire le premier, troisième et cinquième élément du tableau à l’écran. <button id=test-135>Test</button> </li> <li> Trier le tableau par ordre alphabétique et l’afficher à l’écran. <button id=test-trier>Test</button> </li> <li> Demander avec <code>prompt()</code> un nom supplémentaire. Ajouter ceci avec une méthode de <code>Array</code> au tableau et écrire le résultat à l’écran (ou la fenêtre de console ou <code>alert</code>). <button id=test-prompt>Test</button> </li> <li> Ajouter le tableau à une chaîne et afficher cette chaîne à l’écran. <button id=test-chaine>Test</button> </li> </ul> <pre id=demo>Cliquez sur un des boutons « Test ».</pre> <script> var friends = ["Eric", "Nico", "Michel", "Patrick", "Frederik"]; var x = document.getElementById("demo"); document.getElementById("test-nombre").onclick = function() { // Écrire à l’écran le nombre d’éléments… x.innerHTML = friends.length; }; document.getElementById("test-135").onclick = function() { // Écrire le premier, troisième et cinquième élément… }; document.getElementById("test-trier").onclick = function() { // Trier le tableau par ordre alphabétique… }; document.getElementById("test-prompt").onclick = function() { // Demander avec prompt() un nom supplémentaire… }; document.getElementById("test-chaine").onclick = function() { // Ajouter le tableau à une chaîne… }; </script> </body> </html>
Avec ça, tu peux commencer à travailler sur chacune des fonctions séparément. Et si tu rencontres des problèmes, tu auras des questions plus précises auxquelles nous pourrons répondre avec un peu de chance. En l'état, on voit que tu as tenté quelques trucs mais ces blocs d'accolades qui se suivent, ça n'a pas de sens. Vu les notions que tu utilises dans le reste du code, tu sembles être capable de mieux. Utilise le squelette de code que je t'ai donné et montre-nous où tu en es après ça ;)

Note que tu peux déboguer le JavaScript comme tout autre langage de programmation. Les navigateurs actuels disposent tous d'une console que tu trouveras dans les menus en cherchant un peu, et dans laquelle s'afficheront les éventuels messages d'erreur de ton script. C'est aussi dans cette console que s'affichent les messages quand tu utilises console.info ou console.log – la fameuse « fenêtre de console » dont parle l'énoncé de ton exercice.

Et au fait, ce n'est pas lenght ni lentht, c'est length ;)

14/03/2014, 07h23
Dominiqueguy1

Je suis Belge, oui c'est ça :lol:

Tu as raison, une partie de l'énoncé est traduit par Google!

Je suis francophone et la "formation" à mon boulot (qui m'est offerte, non vous ne rêvez pas) est en Néerlandais,
parce que je travaille à côté de Bruxelles, mais du côté flamand.

C'est déjà un problème pour comprendre l'exercice...alors pour le faire...vous voyez le résultat: oops:

A part vous, j'ai aussi reçu un livre in Nederlands, natuurlijk :(

Mais, je ne désespère pas...je vais essayer avec le "squelette" proposé (ce qui me parais une super technique logique) et je reviens vers vous...encore merci et à +.

Petite correction du code proposé par Watilin.

A plusieurs reprises on peut voir des boutons avec pour chacun d'eux un attribut id. Watilin a oublié de placer les valeurs entre guillemets :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   <ul>
      <li>
         Écrire à l’écran le nombre d’éléments que contient le tableau.
         <button id="test-nombre">Test</button>
      </li>
      <li>
         Écrire le premier, troisième et cinquième élément du tableau à l’écran.
         <button id="test-135">Test</button>
      </li>
      <li>
         Trier le tableau par ordre alphabétique et l’afficher à l’écran.
         <button id="test-trier">Test</button>
      </li>
      <li>
         Demander avec <code>prompt()</code> un nom supplémentaire.
         Ajouter ceci avec une méthode de <code>Array</code> au tableau et écrire le résultat à l’écran
         (ou la fenêtre de console ou <code>alert</code>).
         <button id="test-prompt">Test</button>
      </li>
      <li>
         Ajouter le tableau à une chaîne et afficher cette chaîne à l’écran.
         <button id="test-chaine">Test</button>
      </li>
   </ul>

14/03/2014, 14h42
Dominiqueguy1

Un tout grand merci, mais que veut dire:

Code:

<p>Entrer les fonctions suivantes :</p>

<li> et </li> ainsi que <ul> et </ul> ?

J'essaye encore dès que je rentre du boulot ;)
14/03/2014, 14h49
Spartacusply

  est un espace insécapble (toujours visible à l'écran quoi qu'il se passe).

<ul> sert à définir une liste à puce non ordonnée, <li> sert à définir un élément de cette liste.

(Google est ton ami)
15/03/2014, 14h00
Dominiqueguy1

Je pense avoir tout trouvé sauf:

Écrire le premier, troisième et cinquième élément du tableau à l’écran.
<button id="test-135">Test</button>

@+
15/03/2014, 14h08
Auteur

A priori tu sais afficher le résultat renvoyé par une fonction.

Tu as un tableau javascript : comment fais-tu pour accéder au énième élément (syntaxe) ?
15/03/2014, 14h37
Dominiqueguy1
ben ... j'ai essayé avec .index mais cela donne la position de mes prénoms et je dois faire l'inverse!

J'espérais une fonction du style:
Code:

1 2 3 4 document.getElementById("test-135").onclick = function() { x.innerHTML=friends.index([1],[3],[5]); };
Ca avait l'air sympa...mais bon :oops:
15/03/2014, 19h09
Auteur
oooh cette syntaxe :mrgreen:

Tu te compliques la vie. Pour accéder à un élément d'un tableau c'est tout simplement :
Code:

1 2 3 4 var friends = ["Eric", "Nico", "Michel","Patrick","Frederik"]; alert(friends[2]); // affiche quel nom ?
Je reviens sur le code que tu as posté au tout début
Code:

1 2 var friends = new Array(5); var friends = ["Eric", "Nico", "Michel","Patrick","Frederik"];
tu as écrit var friends = new Array(5); puis juste en dessous à nouveau var friends = ..... Tu as donc défini avec la première ligne de code friends comme un tableau. Mais à la seconde ligne, tu as redéfini (par la présence du mot-clef var) ton tableau friends mais cette fois-ci en indiquant les valeurs de ce tableau. La 1ère ligne de ton code est donc inutile.
Je t'invite à lire Comment déclarer et initialiser un tableau ?
15/03/2014, 20h10
Dominiqueguy1
Bonsoir,

j'ai finalement fait comme ça et ça marche :D
Code:

1 2 3 4 document.getElementById("test-135").onclick = function() { // Écrire le premier, troisième et cinquième élément? x.innerHTML = friends[0] + friends[2] + friends[4]; };
Merci pour tout, je reviens sûrement bientôt sur ce forum, j'ai encore un exercice (horrible) avec if/else, je lis tout ce que je peux sur le sujet mais ça ne suffit pas :oops:

Donc @ bientôt ;)
16/03/2014, 10h38
Auteur

Une remarque sur ta syntaxe :

Code:

x.innerHTML = friends[0] + friends[2] + friends[4];

Ton tableau contient des chaines de caractères, donc ici le symbole "+" réalise une concaténation. Si ton tableau avait contenu des nombres, tu aurais réalisé une somme.
Pourquoi mes deux valeurs se concatènent au lieu de s'additionner ?

Ensuite, moi j'aurais présenté les noms d'une autre manière :

Code:

x.innerHTML = friends[0] + " ; " + friends[2] + " ; " + friends[4];

ou encore :

Code:

x.innerHTML = friends[0] + "<br/>" + friends[2] + "<br/>" + friends[4];
16/03/2014, 11h49
Dominiqueguy1

Bonjour, super idée, est -ce que je ne dois pas aussi mettre des "break" après les fonctions? Ou bien, dans ce cas ce n'est pas nécessaire?
16/03/2014, 12h58
Auteur

Voici la documentation sur break :
https://developer.mozilla.org/fr/doc...truction_break
https://developer.mozilla.org/fr/doc...ructions/break
https://developer.mozilla.org/fr/doc...uctions/switch

Tu as donc la réponse à ta question....

si toutefois tu mets un break après tes fonctions, tu copieras 200 fois la doc ci-dessus (et le copier-coller sera interdit). :mrgreen:
16/03/2014, 14h42
Dominiqueguy1

Merci, je ne manquerai pas de lire attentivement les conseils, mais au moment où j'ai cliqué pour envoyé le message, j'avais la réponse à ma bête question, en effet comment pourrais-je obtenir le résultat à chaque fois recherché en interrompant après chaque fonction? :oops:

je suis trop fatiguée, je crois et j'ai encore un exercice en javascript et deux en PHP, au secours :ptdr:

Merci, @ +
16/03/2014, 15h57
Auteur

:D

Termine d'abord tes exercices javascript (langage client). Quand tu seras au point, attaque le PHP (langage serveur). Tu as indiqué que ton dernier exercice javascript est sur les if / else (regarde par la même occasion les switch où tu verras des...break :aie:).
Ce n'est pas très compliqué. ;)
16/03/2014, 19h15
Dominiqueguy1

oui, mais le If else c'est celui en PHP mais j'y suis presque, juste un problème d'adresse mail à valider (si champs vide) je cherche :roll:
@+
16/03/2014, 21h26
Auteur

bon courage :)
16/03/2014, 21h53
Dominiqueguy1

Merci :lol: