ENONCES DES TDS INFORMATIQUE WEB
pour la licence DSCS
(Diffusion du savoir et Culture scientifique)
gilles.hunault@univ-angers.fr
Table des matières
TD numéro 1 Langage XHTML et CSS
TD numéro 2 CSS, formulaires, Javascript
TD numéro 3 Javascript
TD numéro 4 Php
TD numéro 5 Php et Mysql
TD numéro 6 Tout à la fois
TD DSCS numéro 1 (corrigé) Langage XHTML et CSS
Que signifie HTML ? Où sont les marqueurs dans une page web ? Comment peut-on écrire les marqueurs < et > ? Y a-t-il d'autres systèmes de marqueurs ?
Trouver 5 façons d'afficher en XHTML le texte Bonjour. sur une ligne puis le texte Bonsoir. sur la ligne d'après. On pourra par exemple utiliser des paragraphes différents, un seul paragraphe et des retours à la ligne, des divisions, un tableau...
Quelle est la différence entre marqueur, élément, balise, entité et attribut ? Quelle est la structure hiérarchique d'une page web ? Est-il important de bien structurer une page ? Est-il obligatoire de bien structurer une page ? Est-il important d'écrire des pages valides ? Est-il obligatoire d'écrire des pages valides ? Est-ce la même chose de fermer une balise et un élément ?
De quelles grammaires dispose-t-on pour bien écrire les pages Web ? Quelles en sont les règles ?
Donner le code-source d'une adresse comme
Jean DUPONT 3 route de Rome 49100 ANGERSOn utilisera comme structure un seul paragraphe et des retours à la ligne après avoir justifié cette structure. Détailler les différences transitionnel/strict sachant qu'on veut mettre le nom de la ville en gras, le nom et le prénom en bleu, tout le texte en grands caractères. Peut-on vraiment imprimer à l'italienne (en paysage) ? On donnera des solutions valides XHTML et CSS pour les grammaires strictes et transitionnelles.
Ecrire le texte XHTML valide au sens transitionnel qui correspond aux indications suivantes. L'élement X1 a pour attribut X2 (de valeur X3) et X4 (de valeur X5). Il contient dans cet ordre le texte X6 puis l'élément autofermant X7 et en fin le texte X8 écrit en gras. Remplacer X1 par p, X2 par id, X3 par mfp, X4 par class, X5 par texte, X6 par Bonjour, X7 par hr, X8 par tout le monde. Qu'obtient-ton ?
Comment afficher un "beau" calendrier des saisons pour des petites classes ? On donnera une solution en tableau et une solution en liste de définitions. Comment avoir tout le calendrier en bleu ? Comment mettre un quadrillage ?
Rappel : une saison a un nom, une date de début et une date de fin.
Je veux écrire un paragraphe justifié à droite et à gauche. Quelles sont les possibilités en XHTML / CSS ? Quels sont toutes les propriétés d'un paragraphe ? Comment les modifier ?
Quelle est la syntaxe exacte à utiliser pour définir un style, à la volée, en local, en externe ? Si on utilise toujours une propriété et une valeur, pourquoi doit-on mettre un point-virgule entre les propriétés ?
Peut-on mettre plusieurs attributs pour un même élément ? Et plusieurs propriétés ? Avec les mêmes noms ?
Dans CSS, le C signifie cascade. Qu'est-ce que cela veut dire ?
Détailler ce que fait le navigateur au vu de la balise suivante. On distinguera les grammaires strictes et transitionnelles.
<p id="dates" name="dates" style="font-size : 5 ; color : blue" class="mamf1 mamf2"...- Si on n'a pas le droit de mettre des accents dans les liens, comment fait-on, par exemple pour l'adresse http://www.google.fr/search?q=légumes ?
TD DSCS numéro 2 (corrigé) CSS, formulaires, Javascript
On me demande d'écrire l'élément x1 qui contient les éléments x2, x3... avec comme noms de style respectifs s1, s2, s3... Quel fragment XHTML valide dois-je écrire ? Y a-t-il une indentation particulière à respecter au niveau du code-source ? Pourquoi ? Application : x1 est ul et les autres xi sont des li. Au passage, comment écrit-on des indices et des puissances (et des puissances de puissances) comme dans :
xi(n2) se prononce x indice i puissance n deux (comme xn2i ?)
Je veux réaliser un joli quadrillage avec une bordure épaisse bleu foncée tout autour du tableau et des lignes fines en bleu clair (en pointillé ?) à l'intérieur du tableau, comme dans l'exemple suivant où tout le texte est centré et où le texte ne 'colle' pas aux bords :
Angers Nantes Tours Lyon Oui Non Oui Oui Standard Standard Spécial Spécial Janvier Février Mars Avril
Angers Nantes Tours Lyon Oui Non Oui Oui Standard Standard Spécial Spécial Janvier Février Mars Avril Combien de styles différents me faut-il ? Et où les mettre ?
Lorsque je lis le texte d'un formulaire, je trouve ceci écrit : <form><input type='text' value='5' /></form>. Y a-t-il une valeur par défaut pour le texte à saisir ? Est-ce correct : au sens de xhtml transitionnel (tout le reste étant valide) ? et intellectuellement ? Que manque-t-il (si on omet la mise en forme) pour avoir un "vrai" formulaire ?
Je voudrais écrire un formulaire en mode GET qui demande un prénom et qui rajoute automatiquement comme paramètre à l'URL de l'action le mot section et la valeur 'grande'. Comment faire ?
Un formulaire (en mode GET) contient une entrée texte nommée JOUR, une liste de sélection nommée DR contenant : <option value='1'>Mancini</option><option value='2'>Poudlard</option>.... Le formulaire a aussi des boutons radios tous nommés HR donc voici le début du code-source : <input type='radio' name='HR' value='A' />9 h <input type='radio' name='HR' value='B' />14 h... Sachant que l'URL de l'action (fictive) du formulaire est http://pdrv.fr/parm, si l'utilisateur entre lun pour le jour, qu'il valide l'option Poudlard et qu'il rend actif le bouton radio correspondant à 9 h, quelle serait l'URL renvoyée par le navigateur ? Et si l'utilisateur écrit x=2 comme jour ? Et si le bouton d'envoi (submit) est nommé go et qu'il affiche 'envoi' ?
Pour les experts : dans quel ordre les noms de champs d'entrée sont-ils transmis ? Le champ de nom pomme (tout en minuscules) est-il différent du champ de nom POMME (tout en majuscules) ? Peut-on avoir un attribut value dans un élément input sans avoir d'attribut name ?
Lorsqu'un formulaire transmet un input type='text' dont la valeur est 5, peut-on savoir s'il s'agit d'un nombre ou d'une chaine de caractères ? Comment forcer Javascript à l'utiliser comme nombre ?
Je veux écrire un formulaire qui affiche comme liste de sélection (et dans cet ordre) les mots 'pipounet' et 'pipounette' mais que le formulaire transmette respectivement les valeurs G et F pour le champ SEXE. Comment faire ? Honneur aux dames, comment mettre F comme choix par défaut ? et en rose ? Pourquoi ne faut-il pas nommer le champ SEXE ? Peut-on mettre les deux options validées par défaut ? Quelle est la valeur renvoyée dans ce cas ?
J'ai deux boutons radio dans un formulaire qui affichent Non et Oui. Comment faire pour que le formulaire envoie comme valeurs associées 1 et 2 pour le champ 'pipouyou' ? Honneur aux pipouyous, comment mettre Oui choix par défaut ? et en bleu clair ?
Lorsque je teste mon programme Javascript qui utilise les valeurs issues d'un formulaire, il fonctionne bien avec 13 et 19 mais pas avec 3 et 21. Pourquoi ? On pourra imaginer que le programme se base sur l'ordre des valeurs.
Avant de transmettre la valeur du champ REPONSE du formulaire, je voudrais tester avec Javascript si c'est bien un nombre entier positif. Quels évènements (clavier, souris...) puis-je utiliser ? Et sur quels éléments du formulaire ? Lesquels sont les plus simples ? Pourquoi est-ce 'mauvais' de mettre la validation sur le bouton d'envoi comme dans input type='submit' value='Ok' onclick='valider()' ? Et sur une image de soumission comme dans img src='...' alt='...' onclick='valider()' ?
Que faudrait-il faire en Javascript pour tester qu'une ligne d'entrée contient une suite de nombres entiers séparés par un ou plusieurs espaces ? Et si la réponse à une question était le ballon rouge ? Que peut-on en déduire sur la validation de questionnaires par page Web et sur l'évaluation des 'jeunes apprenants' ?
TD DSCS numéro 3 (corrigé) Javascript
Que calcule et qu'affiche le texte Javascript suivant (les numéros de ligne ne font pas partie du texte Javascript) ?
001 | function f(x) { return x+1 } ; 002 | function g(x) { return 2*x } ; 003 | a = 2 ; 004 | b = 8 ; 005 | c = f(a-2) ; 006 | if (c>0) { 007 | window.document.write(" on Trouve "+g(c)) 008 | } else { 009 | window.document.write(" pas Vu, pas Pris. ") 010 | } ; # fin de siSi j'oublie de mettre les guillemets en XHTML comme par exemple dans Google, c'est <a href=http://www.google.fr>ici</a>, est-ce grave ? Que fait le navigateur ? Et si j'oublie un seul des deux guillemets, comme dans Google, c'est <a href="http://www.google.fr>ici</a> ? ou dans Google, c'est <a href=http://www.google.fr">ici</a> ?
Si j'oublie un guillemet en Javascript comme par exemple dans window.document.write(" on trouve +g(c)) ou encore dans window.document.write( on trouve "+g(c)) , est-ce grave ? Que fait le navigateur ? Que faut-il en conclure ?
Dans ma page Web, je n'ai, après l'élément head, que
<body> <h1 onclick="...">Bonjour</h1> </body> </html>Que faut-il mettre dans le onclick pour obtenir
<body> <h1 onclick="ajout() ; ">Bonjour</h1> <h1 class="cadre">Bonsoir</h1> </body> </html>
Donner le texte des instructions Javascript qui permettent d'afficher le texte
8 est le double de 4 et donc 4 est la moitié de 8.
100 est le double de 50 et donc 50 est la moitié de 100.
22 est le double de 11 et donc 11 est la moitié de 22.
...Devant l'ampleur de la répétition de la tache, écrire une fonction d_et_m(x) (pourquoi d_et_m ?) qui affiche le bon texte pour x (x est 8 pour la première ligne, 100 pour la deuxième, 22 pour la troisième...)
Afin d'être encore plus concis(e), on regroupe toutes les valeurs à utiliser dans la variable vau définie par : var var = new Array(8,100,22,52,38...) ;. Modifier votre code Javascript en conséquence.
Finalement, on décide d'utiliser le style grouge pour le nombre de départ, le style gbleu pour son double et le style gvert pour sa moitié. Modifier la fonction dm(x) en conséquence.
Où doit-on mettre dans la page Web l'appel à ces instructions javacript ? A-t-on besoin d'une fonction ?
Utiliser la liste de nombres 1 5 8 2 8 3 6 8 2 1 7 comme tableau de travail. Ecrire une fonction Javascript nommée valMax() qui trouve la valeur maximale dans le tableau (c'est 8). Compléter la fonction pour qu'elle trouve aussi le nombre de fois où ce maximum apparait. Affiner en trouvant la première occurence, la dernière, et le nombre de fois où le maximum apparait, qu'on fournira en absolu et en relatif c'est à dire en pourcentage du nombre d'éléments du tableau. Vérifier ensuite avec la liste de valeurs 1 2 et la liste 1 2 3 4 5.
Pour les experts : écrire une fonction qui trie le tableau, faire le calcul du max et du nombres d'occurences avec une seule boucle.
Reprendre l'exercice précédent en supposant que le tableau fourni à la fonction valMax() est déjà trié par ordre croissant. Est-ce que cela change quelque chose à la vitesse d'exécution du programme ?
Pour les experts : écrire une fonction qui affiche le tableau avec table, tr, td et à l'aide d'une couleur différente pour le max.
Reprendre l'exercice liste des courses en Javascript avec oeuf, viande et légumes en simplifiant : le tableau n'aura que deux colonnes, l'une avec le mot et un lien vers Google, l'autre avec une image en taille fixe et un lien vers l'image en grand. On mettra le tout dans une fonction nommée echo ldc (pourquoi ldc ?) et on supposera que la fonction ldc est appelée à l'intérieur de l'élément body. Cette fonction produira le tableau XHTML avec des images pour le fond (la nappe) et les éléments (les serviettes). On utilisera la variable définie par var ingr = new Array('oeuf', 'viande','légumes') ;.
Pour les experts : mettre des paramètres pour les images, les styles du tableau et des cellules.
Ecrire en Javascript une fonction h1(x) puis la fonction h(i,x) qui refait la même chose (c'est à dire afficher <h1> x </h1>) pour i=1. Quel est l'intérêt d'une telle fonction ?
TD DSCS numéro 4 (corrigé) Php
Le texte de ce TD est plus court que les autres car il y a une partie examen en controle continu qui "occupe" le TD et qui n'est pas reproduite ici.
Ecrire en Php une fonction h1(x), puis une fonction h2(x) puis la fonction h(i,x) qui refait la même chose (c'est à dire afficher <hi> x </hi>). Quel est l'intérêt d'une telle fonction ?
Sur le même principe, écrire une fonction b() et une fonction href().
Comment prendre en compte les valeurs par défaut obligatoires de XHTML ? et les styles CSS ?
On veut faire du texte "Angers Nantes Rennes" un tableau à trois éléments en PHP. Est-ce facile ?
Reprendre l'exercice liste des courses en Php avec oeuf, viande et légumes en simplifiant : le tableau n'aura que deux colonnes, l'une avec le mot et un lien vers Google, l'autre avec une image en taille fixe et un lien vers l'image en grand. On mettra le tout dans une fonction nommée echo ldc (pourquoi ldc ?) et on supposera que la fonction ldc est appelée à l'intérieur de l'élément body. Cette fonction produira le tableau XHTML avec des images pour le fond (la nappe) et les éléments (les serviettes). On pourra utiliser au choix la variable définie par var ingr = new Array('oeuf', 'viande','légumes') ; ou on construira un tableau à partir d'une phrase contenant la liste des ingrédients.
On s'arrangera pour n'avoir aucune balise, que des fonctions PHP "conceptuelles"...
Pour les experts : mettre des paramètres pour les images, les styles du tableau et des cellules. Comment se gère l'encodage URL des adresses ?
TD DSCS numéro 5 (corrigé) Php et Mysql
On dispose d'une table de données au sens MYSQL qui contient deux champs, l'un nommé evenement qui correspond à un évènement et l'autre nommé date qui correspond à une date. Voici un exemple possible de remplissage de la table
+---------------------------------------------------+------+ | evenement | date | +---------------------------------------------------+------+ | Le couronnement de Charlemagne | 800 | | La découverte de l'Amérique par Christophe Colomb | 1492 | | La bataille de Marignan | 1515 | | La chute du mur de Berlin | 1989 | | La mort de Jeanne d'Arc | 1431 | | La naissance de Louis XVI | 1754 | | ... | ... | +---------------------------------------------------+------+Répondez aux questions suivantes à l'aide d'instructions MySqL :
- Combien y a-t-il d'évènements dans la table ?
- Combien y a-t-il d'évènements dans la table ayant eu lieu avant 1789 ?
- Quels évènements dans la table ont eu lieu avant 1789 ?
- Quelles sont les deux premières dates dans la table ?
- Quelles sont les deux premières dates dans la table par ordre historique ?
On dispose d'une table sen_elev et d'une table sen_exer qui correspondent respectivement à des élèves et à des séries d'exercices.
La table sen_elev contient un prénom puis un numéro d'exercice, puis une note sur 20. En voici un extrait
+----------+------+------+ | pren | nume | note | +----------+------+------+ | Louise | 1 | 18 | | Pierre | 1 | 12 | | Isabelle | 1 | 12 | | Damien | 1 | 14 | | Louise | 2 | 16 | | Louise | 3 | 16 | | ... | ... | | +----------+------+------+La table sen_exer contient un identifiant d'exercice (numéro), puis la matière et la difficulté de l'exercice qui est un entier entre 1 (facile) et 3 (difficile) ; en voici un extrait :
+-------+----------+-------+ | idexo | mat | diffi | +-------+----------+-------+ | 1 | Calcul | 1 | | 2 | Calcul | 3 | | 3 | Histoire | 1 | | ... | ... | ... | +-------+----------+-------+Essayer de répondre en MySql aux questions suivantes :
- Combien d'exercices Louise a-t-elle fait ?
- Combien d'élèves ont fait l'exercice 1 ?
- Quelle est la moyenne de Louise sur l'ensemble des exercices ?
- Et sur l'ensemble des exercices de calcul seulement ?
- Comment peut-on afficher les noms et les notes pour l'exercice 1 par ordre de mérite ?
- Idem pour la moyenne des notes de calcul (toujours par ordre de mérite) ?
- Qui a fait des exercices difficiles ?
- Comment peut-on assurer un suivi pédagogique pour les faibles en maths ?
Donner le code PHP qui répond aux deux premières questions pour la table d'histoire puis donner le code PHP qui répond aux deux premières questions pour les tables sen_elv et sen_exer ; écrire ensuite une fonction "conceptuelle" en PHP que l'on nommera combien et donner le code PHP qui réalise les mêmes 4 requêtes à l'aide de cette fonction.
Ecrire ensuite les instructions PHP qui affichent les noms et les notes pour l'exercice de numéro 1 par ordre de mérite.
TD DSCS numéro 6 (corrigé) Tout à la fois
On suppose qu'on dispose de la table de données suivante nommée sen_exer :
+-------+----------+-------+ | idexo | mat | diffi | +-------+----------+-------+ | 1 | Calcul | 1 | | 2 | Calcul | 3 | | 3 | Histoire | 1 | | 4 | Calcul | 1 | | 5 | Calcul | 2 | | 6 | Histoire | 1 | | 7 | Histoire | 3 | +-------+----------+-------+Que fait, calcule et affiche le programme PHP suivant après debutSection() et avant finSection() ?
<?php
0001 include("../std.php") ;
0002 debutPage("sen_exer","strict") ;
0003 h1(" SEN : TD 6 EXO 1 ") ;
0004 blockquote() ;
0005 debutSection() ;
0006 ################################
0007
0008 mysql_connect("localhost","anonymous","anonymous") ;
0009 mysql_select_db("statad") ;
0010
0011 $cha = "lamat" ;
0012 $que = " SELECT DISTINCT( mat ) AS $cha " ;
0013 $que .= " FROM sen_exer " ;
0014 $que .= " GROUP BY $cha " ;
0015 $que .= " ORDER BY $cha " ;
0016
0017 $nummat = 0 ;
0018 $tabmat = array() ;
0019
0020 # POUR VERIFICATION echo "$que\n" ;
0021 $res = mysql_query($que) ;
0022 while ($tdr=mysql_fetch_array($res)) {
0023 $matc = $tdr[$cha] ;
0024 $nummat++ ;
0025 $tabmat[$nummat] = $matc ;
0026 # POUR VERIFICATION echo "$nummat ==> $matc\n" ;
0027 } ; # fin tant que
0028
0029 for ($idm = 1 ; $idm<=$nummat ; $idm++ ) {
0030 $lamat = $tabmat[$idm] ;
0031 h2("Matière numéro $idm : ".$lamat) ;
0032 for ($diff = 1 ; $diff<=3 ; $diff++ ) {
0033 $lamat = $tabmat[$idm] ;
0034 $nbe = combien("sen_exer","mat","mat='$lamat' AND diffi = $diff") ;
0035 blockquote() ; p() ;
0036 echo " $nbe exercices en difficulté $diff " ;
0037 finp() ; finblockquote() ;
0038 } ; # fin pour pour diff
0039 } ; # fin pour pour idm
0040
0041 ################################
0042 finSection() ;
0043 finblockquote() ;
0044 finPage() ;
?>
On admettra que la fonction combien() est définie par les instructions suivantes :
<?php
########################################################
function combien($laTable,$leChamp="*",$laCondition="") {
########################################################
# on met COUNT() autour du champ
$leChamp = "COUNT($leChamp)" ;
# si la condition n'est pas vide, on ajoute WHERE devant la condition
if (!$laCondition=="") {
$laCondition = " WHERE $laCondition " ;
} ; # fin de si
# et comme d'habitude :
# 1. on prépare la requête
$que = "SELECT $leChamp FROM $laTable $laCondition " ;
#pour test : echo $que ;
# 2. on exécute la requête
$res = mysql_query($que) ;
# 3. on convertit le résultat de la requête en tableau
$tdr = mysql_fetch_array($res) ;
# 4. on renvoie la valeur dans le tableau
return($tdr[$leChamp]) ;
} ; # fin de fonction combien
?>
On voudrait produire via du PHP "conceptuel" une table des matières et des titres de section comme ceux des pages d'exercices, à savoir :
<h1><font color="blue">Table des matières</font></h1> <ul> <li>série 1 : <a href="#s1">le langage XHTML</a></li> <li>série 2 : <a href="#s2">les styles CSS</a></li> </ul> <h1><font color="green"><a name="s1">Série 1 : le langage XHTML</a></font></h1> ... <h1><font color="green"><a name="s2">Série 2 : les styles CSS</a></font></h1> ..Sachant qu'on veut fournir un document XHTML qui utilise une grammaire stricte, écrivez une structure PHP contenant le titre des deux séries puis donnez les instructions PHP qui fournissent le texte demandé. On inventera des fonctions dont on détaillera la syntaxe d'appel et les paramètres, mais dont on ne donnera pas le code.
Dans la table sen_exer on a un champ mat correspondant à la matière et un champ diffi correspondant à la difficulté, comme dans le TD précédent. Ecrire en PHP un menu qui affiche le nombre d'exercices disponibles par matière et par difficulté à l'aide d'une seule requête MySql.
Voici un exemple d'un tel menu :
Choisissez la matière et le niveau de difficulté de l'exercice : Matière 1 : Calcul Difficulté 1 (5 exercices) Difficulté 2 (5 exercices) Difficulté 3 (3 exercices) Matière 2 : Histoire Difficulté 1 (7 exercices) Difficulté 3 (6 exercices) Matière 3 : Géographie ...Quelle est, à part le nombre de requêtes, la différence avec l'exercice 1 de ce TD ?
Que fait, calcule et affiche le programme PHP suivant après debutSection() et avant finSection() ?
<?php
include("../std.php") ;
include("calc_inc.php") ;
debutPage("sen_stat","strict") ;
h1(" SEN : TD 6 EXO 4 ") ;
blockquote() ;
debutSection() ;
################################
$elva = explode(" ","10 10") ;
$elvb = explode(" ","2 18") ;
calc($elva,1) ;
calc($elvb,2) ;
################################
finSection() ;
finblockquote() ;
finPage() ;
?>
sachant que le contenu du fichier inclus est :
<?php
0001 # ceci est le fichier calc_inc.php
0002
0003 ########################################################
0004
0005 function calc($leTableau,$ns) {
0006
0007 ########################################################
0008
0009 echo "Série numéro $ns" ;
0010
0011 $nb = count($leTableau) ;
0012
0013 p() ;
0014 $so = 0 ;
0015 for ($idn=0;$idn<$nb;$idn++) {
0016 $va = $leTableau[$idn] ;
0017 $so += $va ;
0018 echo " la valeur $idn est $va ; so vaut $so" ;
0019 br() ;
0020 } ; # fin pour idn
0021 $mo = $so / $nb ;
0022 finp() ;
0023
0024 $ec = 0 ;
0025 for ($idn=0;$idn<$nb;$idn++) {
0026 $va = $leTableau[$idn] ;
0027 $di = ($va - $mo) ;
0028 $ec += $di*$di ;
0029 ## echo " la valeur $idn est $va ; ec vaut $ec" ;
0030 } ; # fin pour idn
0031 $ec = sqrt($ec / $nb) ;
0032
0033
0034 p() ;
0035 echo " s = $so, m = ".sprintf("%5.2f",$mo). " ec = ".sprintf("%5.2f",$ec) ;
0036 finp() ;
0037
0038 } ; # fin de fonction calc
?>
Retour à la page principale de (gH)