[programmation] Javascript

De l'aide, des conseils, un tutorial par rapport à un logiciel, je vous en prie, prenez place.

[programmation] Javascript

Messagepar Rico the Hobbit » Dim 31 Aoû 2008 21:10

J'aurais souhaité avoir un peu d'aide pour bien comprendre le javascript. Jusqu'à maintenant, j'ai utilisé le PHP pour la programmation de mes sites Internet. J'arrive à grosso modo à réaliser quelques trucs intéressants grâce au PHP.

Cependant, je voudrais pouvoir réaliser des applications qui nécessitent plus que le PHP.
Mon premier projet est de faire un formulaire permettant de créer un personnage de Shadowrun. Or pour le faire, il faut effectuer un certain nombre de calculs, calculs qui dépendent des choix du joueur. J'ai réussi à mettre en place la création de personnages pour Nephilim mais il faut passer par un certain nombre de formulaires afin d'inscrire les renseignements dans la base de donnée.

Je voudrais pouvoir réaliser une création de personnage englobant l'ensemble des paramètres sur une seule feuille. Pour cela, il faut que je passe par le javascript mais j'avoue ne pas bien maîtriser les bases. Avec le PHP, à priori, les données affichées ne peuvent pas être modifiées sans actualiser la page. Avec du Javascript, on peut modifier d'une façon plus dynamique les données d'une page Internet sans avoir à actualiser la page. Mais, pour l'instant, j'ai du mal à m'en sortir avec le Javascript. :-x Pourriez-vous m'aider à élaborer ce premier script ? :hello2:

Dans Shadowrun, le joueur a 400 points de génération à dépenser pour créer son personnage. Il doit d'abord choisir une race (elfe, humain, nain, ork ou troll), ensuite, il doit dépenser au maximum 200 points dans les attributs puis le reste entre les compétences et l'équipement.

Il s'agit donc dans mon exemple de modifier le nombre de points de génération suivant le choix de la race du personnage. J'ai définit le nombre de points de génération dans le fichier javascript ("var gen = 400;"), les données concernant les races (nom, points de génération et modificateurs d'attributs) sont dans une base MySQL. Il faut donc récupérer les données dans un formulaire (pas de problèmes) et ensuite modifier les points de génération si le joueur clique sur une des cases race. Exemple, si le joueur clique sur "Elfe", le nombre de points de génération baisse de 30.

Voici la page PHP
Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Shadowrun</title>
<meta name="Author" content="Rico the Hobbit">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-language" content="fr"/>
<link rel="stylesheet" href="/rico.css" type="text/css" />
</head>
<body>
<?php
include ("../haut.php");
include ("../../../../commun/connexion.php");
?>
<script type="text/javascript" src="javas.js">
</script>
<h1>
Cr&eacute;ation de personnage
</h1>
<p>
<form name="form1" method="POST" action="creation.php">
</p>
<p>
<label>
Nom du personnage
</label>
<input type="text" name="nom" />
</p>
<p>
<label>
Race
</label><br/>
<?PHP
$req = mysql_query ("SELECT * FROM shadow_race");
$compteur = 0;
while ($compteur < mysql_numrows ($req))
   {
      $race = mysql_result ($req, $compteur, "nom_race");
      $gen = mysql_result ($req, $compteur, "gen_race");
      echo "<input type=\"radio\" name=\"race\" value=\"$gen\" id=\"$race\" />$race";
      $compteur++;
   }
?>
</p>
<p>
<input type="submit" name="valider" />
</form>
</p>
<p>
<?php
$nom = $_POST['nom'];
echo "le nom du personnage est : $nom";
?>
</p>
</body>
</html>


Ce qui donne en HTML :
Code: Tout sélectionner
<body>
<script type="text/javascript" src="javas.js">
</script>
<h1>
Cr&eacute;ation de personnage
</h1>
<p>
<form name="form1" method="POST" action="creation.php">
</p>
<p>
<label>
Nom du personnage
</label>
<input type="text" name="nom" />
</p>
<p>
<label>
Race
</label><br/>
<input type="radio" name="race" value="30" id="Elfe"/>Elfe
<input type="radio" name="race" value="0" id="Humain"/>Humain
<input type="radio" name="race" value="20" id="Nain"/>Nain
<input type="radio" name="race" value="25" id="Ork" />Ork
<input type="radio" name="race" value="40" id="Troll/>Troll
</p>
<p>
<input type="submit" name="valider" />
</form>
</p>
<p>
</p>
</body>
</html>


J'ai tenté de mettre en place un script mais ça ne marche pas :
Code: Tout sélectionner
/*Définition de la variable points de génération */
var gen = 400;
/* requête PHP pour obtenir le nom des races
document.form.radio.race chemin vers le formulaire race*/
fonction testrace(forms1)
   {
      var elfes = document.getElementById('Elfe').checked;
      if (elfes == true)
         {
            var gen = gen-30;
         }
   }
/* pour écrire du texte avec javascript */
document.write ('<p>Vous avez '+gen+' points de g&eacute;n&eacute;ration</p>');
Image
Avatar de l’utilisateur
Rico the Hobbit
Gérant du forum
 
Messages: 2137
Inscription: Mar 18 Nov 2003 00:33
Localisation: Cul-de-sac

Messagepar alkinor » Lun 1 Sep 2008 09:11

Hum, ton problème vient du fait que le javascript que tu écris n'est exécuté qu'au chargement de la page, or tu voudrais plutôt une interaction une fois la page chargée...

Pour faire ça, il faut utiliser les évènements disponibles sur tes éléments de formulaires. Exemple :

Code: Tout sélectionner

<body>
<script type="text/javascript">
var gen;

function selection(radio)
{
    gen=400-radio.value;
    alert(gen);
}
</script>
<h1>
Cr&eacute;ation de personnage
</h1>
<p>
<form name="form1" method="POST" action="creation.php">
</p>
<p><label>Nom du personnage</label>
<input type="text" name="nom" />
</p>
<p>
<label>
Race
</label><br/>
<input type="radio" name="race" value="30" id="Elfe" onclick="selection(this)" >Elfe</input>
<input type="radio" name="race" value="0" id="Humain" onclick="selection(this);">Humain</input>
<input type="radio" name="race" value="20" id="Nain" onclick="selection(this);">Nain</input>
<input type="radio" name="race" value="25" id="Ork" onclick="selection(this);">Ork</input>
<input type="radio" name="race" value="40" id="Troll" onclick="selection(this);">Troll</input>
</p>
<p>
<input type="submit" name="valider" />
</form>
</p>
<p>
</p>
</body>
</html>


De cette manière, les "onclick" des boutons radio entraînent un appel à la fonction javascript définie plus haut (ou dans un fichier .js) et tu peux faire le traitement que tu veux...
Avatar de l’utilisateur
alkinor
Le testeur fou
 
Messages: 555
Inscription: Mar 25 Nov 2003 10:55
Localisation: Ithilien

Messagepar Rico the Hobbit » Lun 1 Sep 2008 16:29

:merci:

C'est exactement ce que je voulais faire. J'ai modifié le code PHP pour insérer le Javascript et ça marche nickel :
Code: Tout sélectionner
<?PHP
$req = mysql_query ("SELECT * FROM shad_race ORDER by nom_race");
$compteur = 0;
while ($compteur < mysql_numrows ($req))
   {
      $race = mysql_result ($req, $compteur, "nom_race");
      $gen = mysql_result ($req, $compteur, "gen_race");
      echo "<input type=\"radio\" name=\"race\" value=\"$gen\" id=\"$race\" onclick=\"selection(this)\"/>$race";
      $compteur++;
   }
?>

Ce n'est que le début mais ça me permet d'avoir un fil conducteur 8-) :-D
Image
Avatar de l’utilisateur
Rico the Hobbit
Gérant du forum
 
Messages: 2137
Inscription: Mar 18 Nov 2003 00:33
Localisation: Cul-de-sac

Messagepar Vazkor » Lun 1 Sep 2008 16:58

alkinor a écrit:Hum, ton problème vient du fait que le javascript que tu écris n'est exécuté qu'au chargement de la page, or tu voudrais plutôt une interaction une fois la page chargée...


Erreur plus que commune chez les débutants
Avatar de l’utilisateur
Vazkor
Noldo
 
Messages: 262
Inscription: Mar 23 Déc 2003 10:55
Localisation: Dans les nuages

Messagepar Rico the Hobbit » Lun 8 Sep 2008 21:31

OK, je commence à comprendre le truc. D'ailleurs, j'ai réussi à mettre un script supplémentaire :
Code: Tout sélectionner
function selection(text)
{
   if (text.value==6)
      {
         attrib=text.value*25;
      }
   else
      {
         attrib=text.value*10;
      }
   gen=400-attrib;
   alert(gen);
}

Pour ce formulaire
Code: Tout sélectionner
<INPUT type="text" name="con" value="1" onChange=selection(this)>

Plusieurs problèmes se posent. Tout d'abord, il faut que je vous explique le système de création des caractéristiques.
Chaque joueur peut répartir au maximum 200 points de génération entre les 8 caractéristiques. Elles sont toutes à 1 au départ. Augmenter de 1 vaut 10 points. Aller au maximum (6), c'est 25. La race influence la valeur de départ ainsi que le maximum (Par exemple, un Troll : 5 de base en Constitution et max à 10). Ces valeurs par race sont dans la base de donnée.
  • Comment faire pour cumuler les points dépensés entre le choix de la race et les différentes caractéristiques ?
  • Comment changer la valeur des caractérisitques en fonction du choix de la race ?

D'autres questions me viennent à l'esprit mais je pense pouvoir m'en sortir si j'arrive à trouver des solutions à mes deux questions principales :-?
Image
Avatar de l’utilisateur
Rico the Hobbit
Gérant du forum
 
Messages: 2137
Inscription: Mar 18 Nov 2003 00:33
Localisation: Cul-de-sac

Messagepar Vazkor » Mar 9 Sep 2008 12:09

Essaye un truc comme ça : remplace les ... à la fin par le reste de ton code.
Par contre, j'ai écrit vite fait et pas testé, il doit y avoir qq petites erreurs. J'espère que tu comprendras tout mon code.
NB : fait attention j'ai changer le code de ton bouton radio:
On utilise une valeur nombre à la place d'une valeur texte pour la race

Si tu as besoin d'un autre coup de main, on peut se faire une réunion téléphone dimanche aprem si tu es dispo.

Code: Tout sélectionner
<head>
<script type="text/javascript">

// nom des caractéristiques
var nom_carac = ["Force","Intelligence","Sagesse","Dextérité","Constitution","Charisme"];

// indice de la race sélectionnée dans ton tableau de races
var indice_race

// variables permettant de simplifier l'appel aux tableaux de valeurs de carac (ces variables ne sont pas indispensables, et pas utilisée dans ce script)
var indice_for = 0;
var indice_int = 1;
var indice_sag = 2;
var indice_dex = 3;
var indice_con = 4;
var indice_cha = 5;

// bonus de race de la race sélectionnée
var base_carac = [];
                                 
// valeurs de carac de base (1-6)
var valeurs_carac = [1,1,1,1,1,1];

<?PHP
$req = mysql_query ("SELECT * FROM shad_race ORDER by nom_race");
$compteur = 0;
while ($compteur < mysql_numrows ($req))
   {
      $race = mysql_result ($req, $compteur, "nom_race");
      echo "var indice_$race=$compteur;";
      $compteur++;
   }
$compteur = 0;


// tableau des malus de points par race
echo "var gens=["
while ($compteur < mysql_numrows ($req))
   {
      $gen = mysql_result ($req, $compteur, "gen_race");
      echo "$gen,";
      $compteur++;
   }
echo "0]"
// NB:le "0" à la fin n'est pas utilisé, c'est juste pour éviter une (potentielle) erreur javascript



// tableau des bonus de caractéristiques par race
// il faut avoir dans ton champ nivs_race, ta liste de niveau de base (0 à 5) dans l'ordre séparés par des virgules
// ex :  "4,1,0,2,5,0"
echo "var bonus_race=["
while ($compteur < mysql_numrows ($req))
   {
      $bonus_race = mysql_result ($req, $compteur, "bonus_race");
      echo "[$bonus_race],";
      $compteur++;
   }
echo "0]"
?>


// modifier la race
function selection_race(indice)
{
   indice_race = indice
   base_carac = bonus_race[indice_race]
   calcul_gen()
}

// calcul du nombre de point restant (recalcul complet à chaque fois)
function calcul_gen() {
   gen = 400 - gens[indice_race]
   for (var i=0; i<6; i++) {
       alert(nom_carac[i]+" : "+base_carac[i]+valeurs_carac[i])
       gen = gen-calcul_gen_comp(valeurs_carac[i])
   }
   if (gen<-1000) {
      alert("impossible de calculer les points restants")
   } else if (gen<0) {
      alert("Vous avez consommé "+(-gen)+" points de trop")
   } else {
      alert("Il reste "+gen+" points")
   }
}

// calcul de la consommation de points
function calcul_gen_comp(valeur) {
   if (valeur>5) {
      alert("erreur : valeur trop élevée")
      return 2000
   }
   if (valeur<1) {
      alert("erreur : valeur trop basse")
      return 2000
   }
   return ((valeur==6)?65:((valeur-1)*10))
}

function selection_carac(indice_carac, valeur) {
   valeurs_carac[indice_carac] = valeur
// si valeur représente la valeur 1-6 de la caractéristique
//
// ou alors
// valeurs_carac[indice_carac] = valeur-base_carac[indice_carac]
// si valeur représente la valeur total de la caractéristique
   alert ("cette caractéristique consomme "+calcul_gen_comp(valeurs_carac[indice_carac])+" points.")
   calcul_gen()
}

</script>
</head>
<body>
<?PHP
$req = mysql_query ("SELECT * FROM shad_race ORDER by nom_race");
$compteur = 0;
while ($compteur < mysql_numrows ($req))
   {
      $race = mysql_result ($req, $compteur, "nom_race");
      echo "<input type=\"radio\" name=\"race\" value=\"$compteur\" id=\"$race\" onclick=\"selection_race($compteur)\"/>$race";
      $compteur++;
   }
?>

...

</body>
Avatar de l’utilisateur
Vazkor
Noldo
 
Messages: 262
Inscription: Mar 23 Déc 2003 10:55
Localisation: Dans les nuages


Retourner vers Logiciels

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 4 invités

cron