<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal"> </p> <p class="MsoNormal">On dispose du fichier html suivant :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <html></p> <p class="MsoNormal" style='border:none;padding:0cm'> <head></p> <p class="MsoNormal" style='border:none;padding:0cm'><meta charset="ISO"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <title>Questionnaire interactif en jQuery</title></p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <body></p> <p class="MsoNormal" style='border:none;padding:0cm'><div id='app'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <form></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="question"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="texte"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Question 1</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> Le code jQuery s'execute :<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r1" name="q1">Dans le</p> <p class="MsoNormal" style='border:none;padding:0cm'> navigateur<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r2" name="q1">Sur le serveur ou</p> <p class="MsoNormal" style='border:none;padding:0cm'> est stocke le code<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r3" name="q1">Tantot dans le</p> <p class="MsoNormal" style='border:none;padding:0cm'> navigateur, tantot sur le serveur<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br><span class="reponse" id="reponse1">Le code jQuery n'est</p> <p class="MsoNormal" style='border:none;padding:0cm'> autre que du JavaScript. a ce titre, il s'execute toujours sur les</p> <p class="MsoNormal" style='border:none;padding:0cm'> clients (ordinateurs, tablettes et telephones) qui font reference a</p> <p class="MsoNormal" style='border:none;padding:0cm'> ce code via une page HTML. La bonne reponse est donc la</p> <p class="MsoNormal" style='border:none;padding:0cm'> premiere.</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <img id="img1" src="./images/question.png" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="question"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="texte"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Question 2</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> Lorsque l'on veut executer du code jQuery, attendre la</p> <p class="MsoNormal" style='border:none;padding:0cm'> disponibilite du DOM est :<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r4" name="q2">Vital<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r5" name="q2">Inutile<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r6" name="q2">Parfois important,</p> <p class="MsoNormal" style='border:none;padding:0cm'> parfois sans importance<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br><span class="reponse" id="reponse2">Il est imperatif</p> <p class="MsoNormal" style='border:none;padding:0cm'> d'attendre la disponibilite du DOM avant d'executer du code jQuery.</p> <p class="MsoNormal" style='border:none;padding:0cm'> Sans quoi, ce code pourrait s'appliquer a un element indisponible et</p> <p class="MsoNormal" style='border:none;padding:0cm'> provoquer un comportement inattendu, voire meme un plantage du</p> <p class="MsoNormal" style='border:none;padding:0cm'> navigateur.</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <img id="img2" src="./images/question.png" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="question"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="texte"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Question 3</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> Pour chainer deux methodes jQuery :<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r7" name="q3">Il faut les mettre</p> <p class="MsoNormal" style='border:none;padding:0cm'> l'une a la suite de l'autre en les separant par une virgule<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r8" name="q3">Il faut les mettre</p> <p class="MsoNormal" style='border:none;padding:0cm'> l'une a la suite de l'autre en les separant par un point decimal<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r9" name="q3">Il est impossible de</p> <p class="MsoNormal" style='border:none;padding:0cm'> chainer deux methodes jQuery<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br><span class="reponse" id="reponse3">L'execution d'un</p> <p class="MsoNormal" style='border:none;padding:0cm'> selecteur jQuery produit un objet jQuery sur lequel il est possible</p> <p class="MsoNormal" style='border:none;padding:0cm'> d'appliquer une methode jQuery. Cette methode produit elle-meme un</p> <p class="MsoNormal" style='border:none;padding:0cm'> objet jQuery. Il est donc possible de lui appliquer une autre</p> <p class="MsoNormal" style='border:none;padding:0cm'> methode en utilisant le caractere de liaison habituel : le point</p> <p class="MsoNormal" style='border:none;padding:0cm'> decimal.</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <img id="img3" src="./images/question.png" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </form></p> <p class="MsoNormal" style='border:none;padding:0cm'> <button type="text">Tester les reponses </button></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="./app.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </body></p> <p class="MsoNormal" style='border:none;padding:0cm'> </html></p> </div> <p class="MsoNormal">Produisant le résultat suivant :</p> <p class="MsoNormal" align="center" style='text-align:center'> <span style='border:solid windowtext 1.0pt;padding:0cm'><img width= "628" height="289" id="Image 1" src= "TD1_styles_enonce_fichiers/image001.png" alt="image" name= "Image 1" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal">On voudrait modifier ce fichier html et le script app.js (fourni) pour obtenir le résultat suivant (après un clic sur le bouton <<i>Tester les réponses</i>> :</p> <p class="MsoNormal" align="center" style='text-align:center'> <span style='border:solid windowtext 1.0pt;padding:0cm'><img width= "493" height="227" id="Image 2" src= "TD1_styles_enonce_fichiers/image002.png" alt="image" name= "Image 2" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">Le fichier html et le fichier js de départ sont fournis en ressources dans : \\prof\javascript\vue js3\td1_styles\ressources.</p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor