Forums Développement Multimédia

Aller au contenu

Javascript DOM et objets

Javascript CODE Ajax JQuery EaseJs

3 réponses à ce sujet

#1 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 04 December 2012 - 14:29 PM

Bonjour,

Je souhaiterai vous soliciter pour des exercices en Javascript DOM et objets.
Dans ma démarche ne penser pas que je vous demande de réaliser ceux-ci dans le cadre d'une évaluation sommative mais parcontre j'aimerais si vous en accepter le principe vous soumettre un exercice constituer de quatre questions.

Je précise bien que le but n'est pas de me donner des réponses toutes faites mais si vous en avez le temps et l'envie de me mettre en accompagnement de solutions suggerées par vous une légendes détaillants le pourquoi du comment afin que je puisse apprehender la méthodologie précise et exacte qu'il me faudra utiliser le moment venu sur des devoirs en situations réelles.

Je suis en formation cnam, cette formation est dispensée dans un laps de temp compresser ce qui ne permet pas aux différents intervenants de s'attarder sur des explications plus approfondies c'est sans doutes une des raisons pour laquelle qui justifie le fait que les exercices ne sont pas faits en séance mais chez soi.

Je met à disposition les différents éléments de l'exercice.
http://deptinfo.cnam...lle4/sujet.html

Je reprécise bien que je ne veux pas une solution toute faite, je veux des suggétions acconpagné d'une légendes justifiant le pourquoi du comment.



Je vous remercie de votre écoute.
Amicalement

#2 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 04 December 2012 - 23:51 PM

Bonjour

voilà ce que j'ai fait pour le moment mais je bloque, j'ai vraiment besoin d'aide svp.


<!DOCTYPE html>

<html>
<head>
<title>Catalogue</title>

<script type="text/javascript">
function calculerLaSomme() {
var n1= parseInt(document.getElementById('produit1').value);
var n2= parseInt(document.getElementById('produit2').value);
var n3= parseInt(document.getElementById('produit3').value);
document.getElementById('total').value= n1+n2+n3;
}
</script>


</head>

<body>
<div class="titre">
<h1>Catalogue de produits</h1>
<select>
<option id="produit1">Ordinateur 500€</option>
<option id="produit2">Téléviseur 650€</option>
<option id="produit3">Tablette tactile 199€ </option>
</select>
<p>Total <input type="text" name="total" id="total"></p>
<button type="button" onclick="calculerLaSomme()">calculer la somme</button>
</div>



</body>
</html>


Le problème est que les produits ne s'ajoutent pas en face de total .
Le but est que à chaque fois que je sélectionne un produit, le cacul du prix total doit appraitre en face de total.
J'aimerais aussi pouvoir faire une liste ou les produits s'ajoute un à un chaque fois que je les sélectionnes et donc que le total se face automatiquement

Si vous pouvez m'aider svp ce serait vraiment sympa car je bloque....
merci

#3 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 05 December 2012 - 15:13 PM

Salut et bienvenue sur Mediabox,

A mon avis, soit tu n'es pas sur une formation adaptée à ton niveau, soit le formateur n'a pas vu tes difficultés, parce qu'il semble que tu sois plutôt largué.

Je ne voudrais pas me substituer aux formateurs du CNAM, c'est pourquoi je n'envisage personnellement pas un cours complet qui te permette d'arriver à tes fins.

Cependant, la finalité d'un forum est bien d'aider ses membres et tu en fais à présent parti, alors voici un peu de code qui devrait te mettre le pied à l'étrier.

Je n'ai intentionnellement pas commenté le code, celui est relativement simple et ça va t'obliger à piger la logique seul, ce qui est sans doute une des meilleure option.

remarque : puisque ton cours semble s'inscrire dans un cours global sur le HTML5, autant utiliser les sélecteurs HTML5 : querySelector

note : lorsque tu postes du code sur le forum, utilise le bouton <>, ton code sera ainsi mis en forme


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Catalogue</title>
<script type="text/javascript">
var $total ;

var total = 0;

var prix = {
        'ordi' : 500,
        'tele' : 650,
        'tablette' : 199
          };

function onLoadHandler(){
  $total = document.querySelector('#total');
  $total.value = 0;
}

function ajouter_article(){
  var valeurArticle = document.querySelector('#articles').value ;

  total += parseInt( prix[valeurArticle] ) ;
  $total.value = total;
}
</script>

</head>
<body onload="onLoadHandler()">
<div class="titre">
<h1>Catalogue de produits</h1>
<select id="articles">
  <option value="ordi">Ordinateur 500</option>
  <option value="tele">Téléviseur 650</option>
  <option value="tablette">Tablette tactile 199</option>
</select>
<button onclick="ajouter_article()">ajouter</button>
<p>Total <input type="text" name="total" id="total"></p>
<button type="button" onclick="calculerLaSomme()">calculer la somme</button>
</div>
</body>
</html>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#4 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 06 December 2012 - 18:17 PM

Bonjour,
Merci pour la réponse qui va au delà de mes espérances puisque mon idée était d'avoir des bribes de code pour justement m'obliger à comprendre la logique utilisée.
Entre temps j'ai poursuivis mon travail et je vous envoi une copie de ce dernier et si vous le souhaitez j'appréciserais la critique de celui-ci, "sans gans".

merci beaucoup :smile:



<!DOCTYPE html>
<html>
<head>
<title>panier en javascript</title>
<link rel="stylesheet" media="screen" href="css/style.css" type="text/css" />
<script type="text/javascript">
var prix=0;
var txt="";
var tva=0.196;
function nom(choix) {
  if (choix.name=="produit1") return "Informatique";
  else if (choix.name=="produit2") return "Tv-Hifi";
}
function ajoute(choix) {
  var pos=choix.selectedIndex;
  var pr=choix[pos].value;
  prix+=eval(pr);
  var s=nom(choix);
  while (s.length < 4) s+=" ";
  s=s+": "+pr;
  txt=txt+s+"\n";
}
function calcul() {
  txt="Prix à payer : \n";
  prix=0;
  ajoute(document.formu.produit1);
  ajoute(document.formu.produit2);
 
  var s="Total-HT";
  while (s.length < 4) s+=" ";
  txt=txt+s+": "+prix;
  document.formu.commande.value=txt;
}

function ajoutTVA() {
txt="montanttva : \n";
tva=0.196;
ajoute(document.formu.value);
var s="Total-TTC";
pr+tva;

document.formu.commande.value=txt;
}

</script>
</head>
<body>
<div id="complet">
  <div id="titre">
   <h1>panier en javascript</h1>
  </div>
 
<div id="questions">
<div class="questionst2">
    <h2>Question1</h2>
         <p>écrire le code html qui servira de base à cette page</p>

          <h2>Question2</h2>
           <p>Comment va-t-on représenter nos produits en javascript, sachant qu'un produit a un prix (ht) et une désignation

           Proposez un système pour ajouter le calcul du prix TTC (avec une tva fixe de 20%).</p>

           <h2>Question3</h2>
            <p>On propose qu'
on initialise et remplit un tableau (au sens javascript/Array) de produits, appelé "catalogue", dans l'en-tête de la page.

            écrivez le code de la fonction remplir catalogue() qui remplira la liste déroulante des produits à partir du contenu du tableau catalogue.

            Sur chaque ligne de la liste devra apparaître la désignation du produit.</p>

            <h2>Question4</h2>
                 <p>écrivez la fonction ajouter(), qui sera appelée quand on pressera le bouton "ajouter". Cette fonction aura les effets suivants :</p>

            <p>
                 <ul>le produit sera ajouté au panier.</ul>
                 <ul>le tableau (html) représentant le panier sera mis à jour</ul>
                 <ul>le total de la commande sera mis à jour</ul>
            </p>
           

            <p>On utilisera le DOM (sauf éventuellement pour le total)</p>
</div>
</div>
<br></br>
 
<div id="catalogue">
  <div class="catalogue1">
  <h1>Exercice</h1>
 
 
<FORM NAME="formu">
  <TABLE ALIGN="center">
   <TR>
    <TD>
         <B>Informatique</B><BR>
          <SELECT NAME="produit1">
            <OPTION VALUE="399.8" SELECTED>PC portable 15.4 399.8€</OPTION>
            <OPTION VALUE="650">Moniteur Samsung SA850 650€</OPTION>
          </SELECT>
    </TD>
    <TD>
         <B>tvhifi</B><BR>
          <SELECT NAME="produit2">
            <OPTION VALUE="999" SELECTED>Téléviseur 152cm 999€</OPTION>
            <OPTION VALUE="158.4">Home cinéma 5.1 158.4€</OPTION>
          </SELECT>
    </TD>
   </TR>
   <TR>
    <TD COLSPAN="3" ALIGN="center">
         <TEXTAREA ROWS="8" COLS="30" NAME="commande">
         </TEXTAREA>
    </TD>
   </TR>
   <TR>
    <TD  rowspan="3" ALIGN="left">
         <INPUT TYPE="button" VALUE="Total de la commande HT" ONCLICK="calcul();">
    </TD>
   </TR>
   <TR>
    <TD ALIGN="right">
         <INPUT TYPE="button" VALUE="Total TTC" ONCLICK="ajoutTVA();">
    </TD>
   </TR>
  </TABLE>
</FORM>
  </div>
</div>
 
<div id="pied">
<h1>exo javascript</h1>
</div>
 
</div>
</body>
</html>




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP