Merci

Bonne révision !
Bon menu !

Avenir

En L3 nous apprendrons à construire des Jeux !
JS Bin on jsbin.com

JS : Menu multi niveau avec arrêt propagation

Rappel :

Content model for element ul:

Zero or more li and script-supporting elements.


↠ fichier demo

Moins de 70 lignes !

Code pour aminer et gérer une bibliothèque de photos, notez l’absence de pattern (MVC)

voir code en Action :

(function($){

  $.fn.photomatic = function(options) {
    var settings = $.extend({
      photoElement: 'img.photomaticPhoto',
      transformer: function(name) {
                     return name.replace(/thumbnail/,'photo');
                   },
      nextControl: null,
      previousControl: null,
      firstControl: null,
      lastControl: null,
      playControl: null,
      delay: 3000
    },options||{});

    function showPhoto(index) {
      $(settings.photoElement)
        .attr('src',
              settings.transformer(settings.thumbnails$[index].src));
      $(settings.photoElement).fadeIn('slow');
      settings.current = index;
    }

    settings.current = 0;
    settings.thumbnails$ = this.filter('img');
    settings.thumbnails$
      .each(
        function(n){ $(this).data('photomatic-index',n); }
      )
      .click(function(){
        showPhoto($(this).data('photomatic-index'));
      });

    $(settings.photoElement)
      .attr('title','Click for next photo')
      .css('cursor','pointer')
      .click(function(){
        showPhoto((settings.current+1) % settings.thumbnails$.length);
      });


    $(settings.nextControl).click(function(){
      showPhoto((settings.current+1) % settings.thumbnails$.length);
    });

    $(settings.previousControl).click(function(){
      showPhoto((settings.thumbnails$.length+settings.current-1) %
                settings.thumbnails$.length);
    });

    $(settings.firstControl).click(function(){
      showPhoto(0);
    });

    $(settings.lastControl).click(function(){
      showPhoto(settings.thumbnails$.length-1);
    });

    $(settings.playControl).toggle(
      function(event){
        settings.tick = window.setInterval(
          function(){ $(settings.nextControl).triggerHandler('click'); },
          settings.delay);
        $(event.target).addClass('photomatic-playing');
        $(settings.nextControl).click();
      },
      function(event){
        window.clearInterval(settings.tick);
        $(event.target).removeClass('photomatic-playing');
      });

    showPhoto(0);
    return this;
  };

})(jQuery);

Jquery UI

Jquery UI est ue mine pour développer rapidement.

Ouvrir la console du fichier http://dupontcours.free.fr/Jquery/Tabs/test1.html et insérer le code suivant :

$(function(){
        //option
        var tabOpts = {
            fx: [{
                opacity:"toggle",
                duration:"slow"
            },
            null]
        };
    // Tabs
$('#tabs').tabs(tabOpts).tabs("rotate",3000,true);
});

et encore

$(function(){
        //option
        var tabOpts = {
            fx: [
                {
                height:"toggle",
                duration:"slow"
            },
                {
                opacity:"toggle",
                height:"toggle",
                duration:5000
            }]
        };
    // Tabs
$('#tabs').tabs(tabOpts);
});

Animation : CSS3

read : http://css3.bradshawenterprises.com/

Exemple de Jquery

          $( 'h1' ).text( function(i){ 
                                   return ( $( this ).text() + ' -N- ' + i);
                             })
                      .click(function() { 
                                 $( this ).next().slideToggle( "slow");})
                      .next().hide(); // changement de nœud 

JS Bin on jsbin.com

objet et canvas !

test en ligne

liste de DS !

CSS cas des noms avec des caractères spéciaux (./

Pour référencer un identifiant avec un caratère spécial, il faut utiliser le caractère \.

Exemple :
HTML :    <div id="denis.dupont">
CSS     :   #denis\.dupont

Sans l'utilisation de \, #denis.dupont selectionne l'identifiant denis de classe dupont


Voici une utilisation avancée de cette notation ; notez le double \\ dans le content :

#denis\.dupont:before{
  color : red;
  content :  " id=" attr(id) ;
}

#denis\.dupont:after{
  content :  " selectionner avec #denis\\.dupont" ;
}

canvas :

fonction pour retourner la position de la souris

La fonction renvoie un objet, donnant la position relativement à un élément.

function relativePos(evt, element) {
   
     let rect = element.getBoundingClientRect();  // donne la hauteur, largeur, top, left ... d'un element !
   
     return {
                 x: Math.floor(evt.clientX - rect.left),
                 y: Math.floor(evt.clientY - rect.top)
     }; // objet avec deux propriétés
}

pur DOM !

Jquery : fonction selecteur

div : class top

h1

ul
• li : class =A et B id=item.A
• li : class =A id=b
• li : class =B id=c

footer

Encadrez la selection $('h1').next()
Encadrez la selection $('#item\\.A').siblings().not('#b')
Encadrez la selection $('.top').children( )
Encadrez la selection $('.top ul').children().eq(-3)
Encadrez la selection $('footer').add('ul')
Encadrez la selection $('h1').siblings("footer").prevAll("h1")
Encadrez la selection $('li').closest("div")

Récursif : Exemple !

🥷Voici une fonction de décomposition d'un nombre

function findDecompositionSomme(target) {
    function find(start, history) {
       if (start == target)
           return history;
       else if (start > target)
           return null;
       else
          return  find(start + 5, `(${history} + 5 )`) ||
                  find(start + 3, `(${history} + 3 )`) ||
                  find(start + 2, `(${history} + 2 )`);
    }
  return `${target} = ${find(1  , "1")}`
}
console.log(findDecompositionSomme(10));

Vous pourrez modifier le code pour faire des décompositions somme produit !

Selecteur

Ceci est une révision des sélecteurs de base CSS. 

Pour chaque question, dessinez sur une feuille les éléments sélectionner. 

Puis vérifier votre réponse en cliquant sur le lien.

Voici le code HTML, vous devez bien étudier la hiérarchie des éléments ! 

<div class='top'>
   <h1>h1</h1>
   <ul>
       <li class='A B' id='item.A'></li>
       <li class='A' id='b'></li>
       <li class='B' id='c'></li>
    </ul>
    <footer></footer>
 </div>

Voici le code à recopier sur une feuille pour encadrer les éléments

div : class top

h1

ul
• li : class =A et B id=item.A
• li : class =A id=b
• li : class =B id=c

footer

Encadrez la sélection $('ul, li')
Encadrez la sélection $('ul', 'li')
Encadrez la sélection $('ul li', 'li')
Encadrez la sélection $('li:not(#b)')
Encadrez la sélection $( "#item.A" )
Encadrez la sélection $( ".A.B" )
Encadrez la sélection $( ".top :first-child" )
Encadrez la sélection $( "ul:first-child" )
Encadrez la sélection $( "li:not(:hover)" )
Encadrez la sélection $( "li.B + *" )
Encadrez la sélection $(".top :nth-child(2)")
Encadrez la sélection $(".top :nth-of-type(1)")
Encadrez la sélection $(".top :not(:not(:last-child))")