docExamen DCW LicPro MINT - UFR de Mathématiques et Informatique
download 
Plainte Transcription
Examen DCW LicPro MINT - UFR de Mathématiques et Informatique
UFR de Mathématiques et Informatique
Licence professionnelle "Les métiers de l’internet"
Module “Développement Client Web”
Examen de fin de module (1h30) - Décembre 2005
Tous documents autorisés. Ordinateurs, calculatrices et téléphones interdits
1 Echauffement (7 points)
1) Qu’est-ce qui différencie une “classe” d’objets javascript d’une classe telle qu’on la conçoit usuellement dans les langages objets (C++, java, ...) ? NB : on ne vous demande pas de recopier le cours
mais d’expliquer de manière concise, avec vos mots, ce que vous avez compris.
2 On souhaite afficher un texte sur 3 colonnes. Expliquer en quoi le code ci-dessous est erroné (en
particulier, quelle sera la présentation ?). Comment obtenir la présentation souhaitée avec le minimum
de modifications ?
<html>
<head> <style type="text/css">
.col1 {position:absolute;
left:12%;
width:23%;
padding:1%;
}
.col2 {position:relative;
left:37%;
width:23%;
padding:1%;
}
.col3 {position:relative;
left:62%;
width:23%;
padding:1%;
}
</style> </head>
<body>
<div class=col1> texte de la colonne 1.</div>
<div class=col2> texte de la colonne 2.</div>
<div class=col3> texte de la colonne 3.</div>
</body> </html>
Gaël Mahé, Université Paris 5 / UFR math-info, 2005.
La diffusion de ce document est régie par une Licence Creative Commons
1
3)
Qu’affiche le programme suivant ? (Justifiez votre réponse)
<html> <head> <script>
var a=10;
function f(x) {x=0;document.write(x);}
</script> </head>
<body> <script>
f(a);
document.write("<br>"+a);
</script> </body> </html>
4) Dans la page html suivante, comment afficher “dolor id laoreet auctor” (2e passage en gras du 4e
paragraphe) en utilisant childNodes, nodeValue, firstChild et getElementsByTagName ?
<html> <body>
<h1> Pellentesque vitae magna sit amet</h1>
<h2> Vestibulum ante ipsum </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris adipiscing
nibh nec tortor. <b> Fusce mattis </b> nunc molestie quam. Nulla viverra dolor
a urna. Aliquam erat volutpat.
<p>Morbi lobortis mollis sem. Cras lobortis nonummy lorem. Nam blandit enim
vitae enim. Donec neque dolor, imperdiet id,<b> molestie bibendum,</b>
fringilla a, odio. Nulla semper quam eu tellus. Nullam placerat imperdiet elit.
Nam pellentesque nisl vel erat.<b> Morbi a magna </b> ut elit nonummy semper.</p>
<h2> Etiam varius, metus non eleifend. </h2>
<p> Praesent aliquet lectus eu erat mattis suscipit. Suspendisse potenti.
Aenean at tortor. <b> Fusce tincidunt</b> turpis ac nunc. Suspendisse et justo
id nunc lobortis porta. Integer adipiscing imperdiet diam. </p>
<p> Fusce laoreet pharetra nunc.<b> Pellentesque placerat urna</b> et dolor
suscipit posuere. Donec tellus lectus, accumsan ut, facilisis tempus, feugiat
non, quam. Vivamus eu erat. Fusce aliquet, <b>dolor id laoreet auctor,</b>
pede velit laoreet risus, aliquam suscipit augue lorem et elit. In interdum
tincidunt nisl. Praesent pellentesque sodales sapien. . </p>
<p> Cras eu augue. Morbi aliquet elementum enim. Vestibulum magna mi, euismod
pellentesque, varius a, faucibus sit amet, turpis. Sed leo odio, pulvinar non,
posuere dignissim, lobortis ac, nunc. </p>
</body>
</html>
2 Exercice : le quizz (13 points)
La page principale du quizz est composé d’un bouton de départ et d’une zone d’affichage du score.
Son code est donné ci-dessous :
<html> <head> <script>
function go() {
popup = window.open("quizz.html","Quizz","width=300,height=400");
</script> </head>
2
<body onload="resizeTo(200,300)">
<form name=toto>
<input type=button onClick="go()" value="GO"/>
<br><br>
<input name=result type=text value=0 readonly />
<div id=gameover style="display:none"> Game over </div>
</form>
</body> </html>
Un clic sur le bouton “GO” lance une pop-up comme indiqué sur la figure ci-dessous. Dans un
premier temps, la pop-up ne contient que la moitié des questions du quizz. Les règles sont les suivantes :
– Toute réponse est définitive : ainsi, lorsque l’on coche une réponse, les deux boutons radio de la
question sont désactivés.
– Chaque bonne réponse incrémente le score (+1), chaque mauvaise réponse le décrémente (-1).
– Si le score atteint +5, la deuxième moitié des questions s’affiche à la suite de la première.
– Si le score atteint -5 ou si la pop-up est ouverte depuis plus de 30 s, “Game over” s’affiche dans
la fenêtre principale et la pop-up se referme.
Le contenu de la pop-up est défini par le programme quizz.html, dont voici un extrait :
<head> <script>
function question(texte,reponse) {
this.texte=texte;
this.reponse=reponse;
this.score=f_score;
}
var q = new Array();
q[0] = new question("Les petits pois sont rouges","vrai");
q[1] = new question("le javascript c’est mon tript","vrai");
// etc
</script> </head>
Chaque question est un objet ayant pour propriétés le texte de la question et la réponse (“vrai” ou
“faux”), ainsi qu’une méthode score(). L’affichage se fera par un tableau html à 3 colonnes (question,
vrai, faux). Chaque bouton radio aura comme propriété name le numéro de la question correspondante.
Le clic sur une réponse sera géré par la méthode score() dont vous déterminerez les paramètres adéquats.
Travail à faire : compléter le programme quizz.html (inutile de ré-écrire ce qui est donné). Toutes
les fonctions devront être des fonctions de quizz.html : la page principale n’est pas modifiable.
3
