Retour à Tutoriels Javascript

Zone Confirmez JavaScript

  • Zealous
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 15, 2011
  • Messages: 1195
  • Loc: Sydney
  • Status: Offline

Message Septembre 15th, 2012, 8:29 pm

Ce tutoriel est basé autour de fabrication d'une boîte de confirmation simple.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<script language="javascript" type="text/javascript">
</script>
</header>
<body>
<p>Use the button to display a confirm box.</p>

<button onclick="confirmBox()">Click</button>

<p id="confirm"></p>

<script>
function confirmBox()
{
var x;
var r=confirm("Press a button!");
if (r==true)
 {
 x="You pressed OK!";
 }
else
 {
 x="You pressed Cancel!";
 }
document.getElementById("confirm").innerHTML=x;
}
</script>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <header>
  4. <script language="javascript" type="text/javascript">
  5. </script>
  6. </header>
  7. <body>
  8. <p>Use the button to display a confirm box.</p>
  10. <button onclick="confirmBox()">Click</button>
  12. <p id="confirm"></p>
  14. <script>
  15. function confirmBox()
  16. {
  17. var x;
  18. var r=confirm("Press a button!");
  19. if (r==true)
  20.  {
  21.  x="You pressed OK!";
  22.  }
  23. else
  24.  {
  25.  x="You pressed Cancel!";
  26.  }
  27. document.getElementById("confirm").innerHTML=x;
  28. }
  29. </script>
  31. </body>
  32. </html>


Comme vous pouvez le voir ici que vous avez utilisé un pop-up fonction et appliquée à un bouton avec un texte de retour pour une réponse. Mais que se passe-t-il si nous voulons changer les boutons o.k/cancel de redirection vers la page d'accueil ou à stocker.
Code: [ Select ]
if (r==true)
 {
 x="You pressed OK!";
 }
else
 {
 x="You pressed Cancel!";
 }
  1. if (r==true)
  2.  {
  3.  x="You pressed OK!";
  4.  }
  5. else
  6.  {
  7.  x="You pressed Cancel!";
  8.  }

entre les crochets, que nous avons des conditions pour ce qui est de se produire et maintenant qu'ils sont définis au texte de phase comme un retour.

en utilisant une fonction de « window.location », nous pouvons demander la fenêtre active d'aller à un endroit.
Code: [ Select ]
x=window.location = "page1.html";


Votre résultat final devrait ressembler à ceci
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<script language="javascript" type="text/javascript">
</script>
</header>
<body>
<p>Click the button to display a confirm box.</p>

<button onclick="confirmBox()">Click</button>

<p id="confirm"></p>

<script>
function confirmBox()
{
var x;
var r=confirm("Do you agree to enter!");
if (r==true)
 {
 x=window.location = "page1.html";
 }
else
 {
 x=window.location = "page2.html";
 }
document.getElementById("confirm").innerHTML=x;
}
</script>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <header>
  4. <script language="javascript" type="text/javascript">
  5. </script>
  6. </header>
  7. <body>
  8. <p>Click the button to display a confirm box.</p>
  10. <button onclick="confirmBox()">Click</button>
  12. <p id="confirm"></p>
  14. <script>
  15. function confirmBox()
  16. {
  17. var x;
  18. var r=confirm("Do you agree to enter!");
  19. if (r==true)
  20.  {
  21.  x=window.location = "page1.html";
  22.  }
  23. else
  24.  {
  25.  x=window.location = "page2.html";
  26.  }
  27. document.getElementById("confirm").innerHTML=x;
  28. }
  29. </script>
  31. </body>
  32. </html>


Maintenant que vous avez les blocs de construction, vous pouvez modifier le code et les lier à vos besoins.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 15th, 2012, 8:29 pm

  • Austin80ss
  • Beginner
  • Beginner
  • No Avatar
  • Inscription: Oct 17, 2012
  • Messages: 41
  • Status: Offline

Message Octobre 19th, 2012, 1:57 am

Je vous remercie, c'était utile pour moi.
  • Zealous
  • Guru
  • Guru
  • Avatar de l’utilisateur
  • Inscription: Avr 15, 2011
  • Messages: 1195
  • Loc: Sydney
  • Status: Offline

Message Octobre 20th, 2012, 5:07 am

Austin80ss a écrit:
Je vous remercie, c'était utile pour moi.


NP, devrait suffire à vous montrer comment appliquer la fonction.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 3 messages
  • Modérateur: Tutorial Writers
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC