Outils pour utilisateurs

Outils du site


cours2007:poo1:td:preparation_interrogation

Préparation interrogation

Syntaxe

Correction d'erreurs

Entourer les 6 erreurs de syntaxes

window.addEvent("domready', function    {
  var menuElements = $$('#menu li a');
  menuElements.setStyles({font-size: 20, color: '#0000FF',});
  menuElements.each(function (element) {
    // ...
  };
})

Structures

  • Encadrer les blocs d'instructions
  • Numéroter dans l'ordre d'exécution leurs instructions
  • Souligner les paramètres de fonctions
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);
  • Encadrer les appels de fonction
  • Souligner les fonctions passées en paramètres
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);
  • Encadrer les opérateurs d'affectation
  • Souligner les autres opérateurs
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);
  • Encadrer les constantes littérales
  • Souligner identifiants
  • Double souligner leurs déclarations initiales
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);

Compréhension du code

Structure

  • Encadrer les expressions retournant un élément HTML
  • Souligner les méthodes appelées sur un élément HTML
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);
  • Souligner les méthodes mettant en place des gestionnaires d'événements
  • Encadrer le code exécuté , le relier par une flèche s’il n'est pas dans une fonction anonyme
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);
  • Souligner les identifiants fournis par la librairie Mootools
  • Encadrer les identifiants présents en standard dans les navigateurs
function main() {
  var element = $('menu');
  element.addEvent('click', function () {
    element.setStyle('color', '#FF0000');
  });
}
window.addEvent('domready', main);

Compréhension générale

Soit la structure de fichier suivante :

TD2/
  javascript/
    mootools.js
  test_fx_style/
    test_fx_style.css
    test_fx_style.html
    test_fx_style.js

Compléter les blancs dans le code JavaScript suivant.

// ____________________________________________
window.addEvent('domready', function () {
  // __________________________________________
  // __________________________________________
  var menuElements = $$('#menu li a');
  // __________________________________________
  menuElements.forEach(function (element) {
    // ________________________________________
    var parent = element.parentNode;
    // effet pilotant la hauteur du parent
    var fx = new Fx.Style(___________, 'height',
                  {duration: 500, wait: false});
    // ________________________________________
    element.addEvent('mouseenter', function () {
      // ______________________________________
      fx.start(60);
    });
    // quand la souris quitte l'élément
    ____________________________________________
      // anime la hauteur jusqu'a la valeur 20px
      __________________________________________
    ____________________________________________
  });
});

Dans le code HTML suivant, en fonction du code JavaScript précédent :

  • Compléter le code
  • Souligner les éléments réagissant à un survol de la souris
  • Encadrer les éléments qui sont animés suite à un survol de la souris
  • Relier par une flèche l'élément recevant le un survole de la souris et l'élément animé.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>minimal</title>
    <link rel="stylesheet" href="________________________" type="text/css" media="screen" title="no title" charset="utf-8" />
    <script src="________________________" type="text/javascript" charset="utf-8"></script>
    <script src="________________________" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>avant</p>
<ul id="__________">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
    <li><a href="#">test 4</a></li>
    <li><a href="#">test 5</a></li>
</ul>
<p>aprés</p>
</body>
</html>

Analyse

Logique : documentation

Référence de JavaScript 1.5 Core:Objets globaux:Array:splice

résumé

Modifie le contenu d'un tableau, en ajoutant de nouveaux éléments tout en en enlevant d'autres.

Syntaxe
array.splice(indice, nombre, [element1][, ..., elementN]);
Paramétres

indice
Indice à partir duquel commencer à modifier le tableau.
nombre
Un entier indiquant le nombre d'anciens éléments à retirer. Si nombre vaut 0, aucun élément n'est retiré. Dans ce cas, il faut spécifier au moins un nouvel élément.
element1, ..., elementN
Les éléments à ajouter au tableau. Si aucun élément n'est spécifié, splice retire simplement les éléments du tableau.

Logique : travail

Compléter le code JavaScript :

// suppose qu'une fonction print a été définie
var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
print("mesPoissons : " + mesPoissons);
// mesPoissons : ange,clown,mandarin,chirurgien
 
var retiré = mesPoissons.splice(2, 0, "rouget");
print("Après ajout d'1 : " + mesPoissons);
// Après ajout d'1 : __________________________________
print("Les éléments retirés sont : " + retiré);
// Les éléments retirés sont :
 
retiré = mesPoissons.splice(3, 1);
print("Après retrait d'1: " + mesPoissons);
// Après retrait d'1: _________________________________
print("Les éléments retirés sont : " + retiré);
// Les éléments retirés sont : __________
 
retiré = mesPoissons.splice(____________________________________);
print("Après remplacement d'_ : " + mesPoissons);
// Après remplacement d'_ : ange,clown,trompette,chirurgien
print("Les éléments retirés sont : " + retiré);
// Les éléments retirés sont : rouget
 
retiré = mesPoissons.splice(____,____,"perroquet","anémone","bleu");
print("Après remplacement de _ : " + mesPoissons);
// Après remplacement de _ : ____________________________________
print("Les éléments retirés sont : " + retiré);
// Les éléments retirés sont : ange,clown

Structure

Soit le code HTML suivant :

<ul id="menu">
    <li><a href="#">test 1</a></li>
    <li><a href="#" class="actif">test 2</a></li>
    <li id="un_li"><a href="#">test 3</a></li>
    <li><a href="#">test 4</a>
      <ul><li></li><li></li></ul>
    </li>
    <li><a href="#">test 5</a></li>
</ul>

En respectant l'objectif fixé, compléter les blancs dans les codes JavaScript suivants.

QUI

Rappel :

  • $('un_id') retourne l'élément qui à un attribut id qui à pour valeur un_id : <balise id='un_id' />
  • $$('#un_id .une_class balise') retourne les éléments (tableau) qui correspondent au sélecteur CSS : <b id='un_id'><b class='une_class'><balise /> <balise /></b></b>
    • elm.getElements('selecteur_css') identique a $$ mais retourne les éléments (tableau) enfants de elm qui correspondent au sélecteur CSS.
  • $E('#un_id .une_class balise') identique à $$ mais ne retourne qu'un élément (le premier du tableau) : <b id='un_id'><b class='une_class'><balise /> <balise /></b></b>
    • elm.getElement('selecteur_css') idem, ne retourne que le 1er enfant correspondant.

Expressions retournant un ou des éléments HTML :

// l'élément qui a pour id ''menu''
var menu = ________
// ______________________________
var premier_li = menu.getFirst();
// le dernier enfant de menu
var dernier_li = _________________
// le lien qui à pour class actif
var lien_actif = _________________
// le parent du lien actif
var li_actif = ___________________
// l'entrée du menu (li) avant actif
var li_avant = 
// _______________________________
var li_apres = li_actif.getNext()
// l'expression suivante retourne :
// _____
var egale = li_apres == $('un_li');
// tous les li du menu
var tous_li = ____________________
// tous les enfants du menu
var niv1 = _______________________
// _______________________________
var second_li = niv1[1]:

QUOI

Méthode et/ou propriétés modifiant un élément :

// mettre en rouge le lien actif
lien_actif._______________________
// changer la couleur de fond (#0FF)
// à l'entrée avant le lien actif
__________________________________
// _______________________________
// _______________________________
li_apres.setStyle('background-color','#0FF')
// Supprimer le dernier li
__________________________________

QUAND

Gestionnaire d'événements :

__________________________function () {
  // quand on click sur le lien actif
}__
 
_________________________________________
  ______________________________function () {
    // quand on survole un li
  }__
___

Application

Écrire le code JavaScript réalisant la tâche suivante :

  • Quand on survole l'élément d'id survole changer la couleur (#FF0) de fond des éléments de classe couleur_fond .
  • Quand le curseur quitte l'élément d'id survole enlever la couleur de fond (none)

Bonus hors barème (points supplémentaires) :

  • Écrire le code précédant sous forme de composant
    • Classe dont le constructeur prend en paramètre :
      • l'id de l'élément qui déclenche l'effet au survol
      • le sélecteur des éléments à modifier
      • la couleur de fond (si possible optionnelle (#FF0 par défaut))

Voir sujet de TP.

cours2007/poo1/td/preparation_interrogation.txt · Dernière modification: 2009/06/06 22:00 (modification externe)