exemples html/js/css, venez voir.. sur le forum Création de sites web - 03-04-2013 19:47:43

]ultimacross[

Niveau 9

03 avril 2013 à 19:47:43

bonjour à toutes et à tous, j'ai quelques exemples de programmes à faire et j'aurai bien besoin d'aide pour finaliser et voir ce que vous en pensez
alors en voici un :

<CENTER><TABLE width=60% border=1>
<caption align="bottom">
cliquez sur une des cellules :
</caption>
<TR>
<TD width=33%>cellule 1</TD>
<TD width=33%>cellule 2</TD>
<TD width=34%>cellule 3</TD>
</TR>
<TR>
<TD colspan=2>cellule 4 & cellule 5</TD>
<TD width=33%>cellule 6</TD>
</TR>
<TR>
<TD width=33%>cellule 7</TD>
<TD width=33%>cellule 8</TD>
<TD width=34%>cellule 9</TD>
</TR>
</TABLE></CENTER>
<TD bordercolor="#CC0000"
</TD>

il faut faire : un tableau avec des bordures rouges comprenant 3*3 cellules.
les deux premières cases de la deuxième ligne seront fusionnées.
lors d'un clic sur une cellule, sa couleur de fond devient noire et le texte blanc.

problème: je n'arrive pas à faire les bordures rouges mais je sais que c'est bordercolor et bgcolor mais je sais pas comment les placer.

et je ne sais pas comment faire le fond noir et texte en blanc en cliquant sur une des cellules.

merci pour votre aide

vava740

Niveau 10

03 avril 2013 à 19:57:27

Regarde du côté du CSS

]ultimacross[

Niveau 9

03 avril 2013 à 20:05:01

oui j'ai regardé mais j'ai mis bordercolor par exemple avec la couleur mais ca ne l'affiche pas la couleur rouge

vava740

Niveau 10

03 avril 2013 à 20:23:06

C'est pas du CSS ça

Popovitch

Niveau 26

03 avril 2013 à 22:29:04

CSS pour les bordures et javascript pour le changement de couleur

La soluce http://jsfiddle.net/MHBr5/

]ultimacross[

Niveau 9

03 avril 2013 à 22:44:41

ah d'accord je vois; oui vava mais je voulais m'occuper de la bordure pour le css
et merci popovitch pour ca !

]ultimacross[

Niveau 9

03 avril 2013 à 22:51:29

une autre question: c'est :

créer un formulaire comprenant deux champs de type text et un button donc de type "button" . si on appui sur le bouton, ce que l'on aura écrit dans premier champ de texte sera recopié à l'envers dans le deuxième champ de texte.

si vous avez trouvé autre chose pour faire ca , voila ce que j'ai fais :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>12-06</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Support" content="MSIE 6.0.2800.1106">
</head>
<body>

function invMot(){
var mot=prompt("Taper le mot ici","");
var n=mot.length;
var tab=new Array;
for (var i=0;i<n;i++){
tab[i]=mot.substring(i,i+1);
}
tab.reverse();
var result=tab.join("");
document.getElementById('result').innerHTML="\""+m
ot+"\"
donne : \""+result+"\"";
}

//-->
</script>
<input type="button" value="Inverser un mot" onclick="invMot();"><br><br>
Résultat :
<br><br><div id="result"></div>

</body>
</html>

mais je trouve que ca ne ressemble pas à ce qui est demandé même si au final on obtient pareil

Popovitch

Niveau 26

03 avril 2013 à 23:03:22

prompt() t'affiche une boîte de dialogue qui te demande ton texte, sauf que ce qu'on te demande c'est de créer deux input de type text : <input type="text" /> et de faire la manip sur ces inputs

J'ai pas regardé le javascript en entier mais si tu dis que ça marche avec un prompt() ça devrait aussi fonctionner (après quelques modifs) avec deux inputs

En gros il te faut ça comme interface : http://gregwar.com/php/cache/images//1/9/5/8/2/3c9662ed82a5cd69fa46708e458245c27db.jpg (sans les labels noms et prénoms)

]ultimacross[

Niveau 9

03 avril 2013 à 23:16:43

ok je ferais ca alors
mais là ca fait un moment que je cherches la solution et j'en suis fatigué à vrai dire (jusqu'à faire des théorèmes et des propriétes etc...) on me demande pour finir de faire ca :

créer un formulaire qui permet de calculer la somme des nombres compris entre 1 et n (1 et n compris).
l'entrée se sera entrée par l'utilisateur manuellement dans un champ de type text et la réponse apparaitra à l'écran (fonction alert) quand on appuiera sur le bouton.

si ca te dis quelque chose,

Popovitch

Niveau 26

04 avril 2013 à 13:27:27

J'ai regardé plus en détail ton js et tu peux faire quelque chose de beaucoup plus simple
Si tu as une variable a = "abcdefgh" et que tu fais par exemple a[2] tu récupèrera la lettre "c", sers toi de ça pour simplifier ton js

Et pour le calcul une simple boucle "for" suffira

]ultimacross[

Niveau 9

04 avril 2013 à 20:52:54

for (i=0, i<n, i=i+1) ?

et sur ton jsfiddle, si tu commence à mettre le mot table et que si après tu dis TABLE ca marchera pas ?

car je veux mettre ton code sur le bloc note ou notepad mais ca ne s'affiche pas correctement bien à la verticale
si tu vois ce que je veux dire

]ultimacross[

Niveau 9

05 avril 2013 à 19:41:24

plus de précision peut etre ?

Popovitch

Niveau 26

05 avril 2013 à 21:34:14

Pour la boucle, oui ça devrait le faire mais tu peux commencer par i=1 (même si ça changera rien au final pour cet exercice)

Par contre j'ai pas très compris tes autres questions :
Pour le TABLE en majuscule ça posera pas de problème (c'est mieux de mettre des minuscules ) mais je vois pas où tu l'as vu écrit
Pour le coup du notepad je ne comprends pas ta question...

]ultimacross[

Niveau 9

06 avril 2013 à 19:03:33

pour dire, ton code marche sur ton jsfiddle mais une fois que je le mets sur le bloc note, et que je l'enregistre au format html, ca ne marche pas

]ultimacross[

Niveau 9

07 avril 2013 à 16:00:02

et pour le calcul avec la boucle for ca ne marche pas !
la fonction alert ne vient pas et j'ai regardé le programme devait normalement venir, et je pense pas avoir oublié une parenthèse etc

]ultimacross[

Niveau 9

07 avril 2013 à 21:50:22

si tu veux, je te montre ce que j'ai fais et si tu as fais le programme tu peux me le montrer aussi pour que je vois les différences

peut etre que j'ai mis quelque chose dans le script alors que c'est dans le body

Popovitch

Niveau 26

08 avril 2013 à 14:39:47

Normalement, si tu as tout mis au bon endroit ça devrait fonctionner sans problème

Regardes le code source de cette page http://fiddle.jshell.net/MHBr5/show/

]ultimacross[

Niveau 9

08 avril 2013 à 23:41:45

en effet, pour ça, ca marche !

mais pour le mot à inverser avec les deux inputs je ne vois pas comment faire parce que mettre la fonction dans le bouton pour que lorsqu'on appuie ca affiche je ne sais pas si c'est ce qu'il faut faire et sinon la mettre dans le deuxième input je me demandes si c'est possible car j'ai essayé et ca ne donnait pas le résultat (donnait le même mot)

voici ce que j'ai fais mais avec le prompt() :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>inversedemots</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Support" content="MSIE 6.0.2800.1106">
</head>
<body>

function invMot(){
var mot=prompt("Taper le mot ici","");
var n=mot.length;
var tab=new Array;
for (var i=0;i<n;i++){
tab[i]=mot.substring(i,i+1);
}
tab.reverse();
var result=tab.join("");
document.getElementById('result').innerHTML="\""+m
ot+"\"
donne : \""+result+"\"";
}

//-->
</script>
<input type="button" value="Inverser un mot" onclick="invMot();"><br><br>
Résultat :
<br><br><div id="result"></div>

</body>
</html>

Popovitch

Niveau 26

09 avril 2013 à 19:20:45

En fait ce qu'on te demande c'est de créer deux <input type="text" /> et un simple <button></button> (tu peux aussi mettre un input de type button si tu veux)

Ensuite tu as la possibilité en html d'ajouter des id que tu pourras réutiliser dans ton javascript grâce à la fonction document.getElementById('mon_id'), tu peux aussi le faire avec des tagName (regardes l'exemple du tableau pour voir comment il fonctionne) et tu peux aussi le faire pour une classe mais là c'est beaucoup plus galère en js basique (l'idéal pour ça est de passer par jQuery)

Bref, on te demande ensuite d'inverser ce que tu as dans ton premier input, pour le faire il y a deux façons : la méthode longue et chiante que t'as fais (passer par la fonction substring) ou alors créer une boucle for qui commence par la taille du tableau et qui se termine à 0. Pour continuer il faut que tu saches qu'une chaine de caractère peut aussi être considéré comme un tableau et donc si tu as un mot ="azerty", mot[0] = "a", mot[1] = "z", ... Et enfin grâce à ta boucle tu peux récupérer la lettre qui est à l'index en cours et ainsi récupérer ton mot inversé

Je sais très bien que mon explication est pas du tout claire mais si t'as des questions n'hésite pas

Voilà comment faire (j'ai essayé de mettre un max de commentaire pour que tu comprennes bien), mais essayes déjà de le faire toi même avec ce que j'ai écrit plus haut
http://jsfiddle.net/2W9PM/

]ultimacross[

Niveau 9

10 avril 2013 à 12:08:06

d'accord je vais bien voir ca, et merci pour les commentaires en plus !

je vais donc faire le calcul de la somme entre 1 et n pour voir si j'ai bien compris