JavaScript

TP ARRAY

Exercice 16

Réaliser un tableau à 2 dimensions de 4 lignes et de 5 colonnes.
Remplir (via le clavier) les 3 premières lignes et les 4 premières colonnes.
Additionner les colonnes en dernière ligne et les lignes en dernière colonne.
Calculer le total dans la dernière case

nombres = [ -5 , 8 , 3 , 105 ] ;
nombres1 = [ -5 , 8 , 3 , 105 ] ;
nombres2 = [ -5 , 8 , 3 , 105 ] ;
nombresTab = [ nombres , nombres1 , nombres2  ] ;
	
function creerTab()
{
tab = '<table>' ;
var sumv = [ 0 , 0 , 0 , 0 ] ;
sumT = 0 ;
for( prop in nombresTab ) 
{
    var sumh = 0 ;
    tab += "<tr>" ;
        for( cellule in nombresTab[prop] )
            {
            tab += "<td>" + nombresTab[prop][cellule] +"</td>";
            sumh += nombresTab[prop][cellule] ;
            sumT += nombresTab[prop][cellule] ; 
            sumv[cellule] += nombresTab[prop][cellule] ;
            }
    tab += "<td style=\"background-color: pink\">" + sumh + "</td></tr>" ;
}

tab += "<tr>" ;

for(p in sumv)//affiche les colones 
{
    tab += "<td style='background-color: pink'>" + sumv[p] + "</td>" ;
}
tab += "<td style=\"background-color: purple;color:white;\">" + sumT + "</td></tr></table>" ;
return(tab) ;
}

result.innerHTML += creerTab() ;

fermer l'exercice 16

TP STRING

Exercice 5

Effectuer un test sur une extension de fichier saisi avec la méthode window.prompt(). Si l’extension n’est pas gif ou jpg, alors un message d’avertissement s’affiche, sinon un message positif s'affiche.

exo5.onclick = function()
{
    var m = prompt("saisir un nom de fichier avec son extension") ;
    r2.innerHTML = ( m.substr(-4) == ".gif" || m.substr(-4) == ".jpg" ) ? "ok" : "le fichier doit être un gif ou un jpg" ;
}

fermer l'exercice 5

Exercice 6

Tester la valeur d’une chaîne de caractères saisie avec la méthode window.prompt() pour savoir s’il contient une arobase et un point. En cas d’échec, afficher « Adresse invalide », en cas de succès, afficher « Adresse valide ».

exo6.onclick=function()
{
    var m = prompt("une adresse email") ;
    r6.innerHTML = ( m.indexOf("@") > -1 ) ? "ok" : "Cet adresse email ne contient pas d'arobase" ;
}

fermer l'exercice 6

TP DATE

Exercice 3

À partir de sa date de naissance, calculez et affichez l’âge d’un individu ainsi qu’un message de félicitations si l’anniversaire correspond à la date du jour. Refaites le même programme à partir d’une date de naissance saisie par l’utilisateur grâce à window.prompt().

bout.onclick = function()
{
var jN = prompt( "entrez votre jour de naissance : " ) ;	
var mN = prompt( "entrez votre mois de naissance : " ) ;
var aN = prompt( "entrez votre année de naissance : " ) ;

var anni = new Date( aN , (mN-1) , jN) ;

var aujourdhui = new Date() ;

if ( anni.getMonth() == aujourdhui.getMonth() && anni.getDate() == aujourdhui.getDate() )
    alert( "BON ANNIVERSAIRE\nvous avez " + ( aujourdhui.getYear() - anni.getYear() ) + " ans" ) ;
else if ( anni.getMonth() <= aujourdhui.getMonth() )
{
    if( anni.getDate() < aujourdhui.getDate() )
        alert( "vous avez : " + ( aujourdhui.getFullYear() - anni.getFullYear() ) + " ans" ) ;
        else
            alert( "vous avez : " + ( aujourdhui.getFullYear() - anni.getFullYear() -1 ) + " ans" ) ;
}
else
      alert( "vous avez : " + ( aujourdhui.getFullYear() - anni.getFullYear() -1 ) + " ans" ) ;

}

fermer l'exercice 3

Exercie 4

Créer une horloge simple affichant les heures, les minutes et les secondes dans un champ de formulaire
Pour réussir à manipuler l’objet Date, il faut créer une nouvelle instance de cet objet dans une fonction que vous nommerez Horloge(). Puis, il est possible d’en extraire les heures, les minutes et les secondes. Ensuite, il faut traiter l’affichage pour les valeurs inférieures à 10 et leur ajouter un zéro devant si nécessaire, pour obtenir 01 à la place de 1, par exemple. Ensuite, il est possible d’afficher le contenu du champ de formulaire et de demander le rechargement de la fonction Horloge() au bout de 1000 millisecondes (soit une seconde). Ainsi, l’horloge se modifiera toutes les secondes.

function horloge()
{
	var horlo = new Date() ;
	var h = horlo.getHours() ;
	var m = horlo.getMinutes() ;
	var s = horlo.getSeconds() ; 
	
	var i = document.getElementById("i") ;
	
	i.value = ( (h>9) ? h : "0" + h ) + " : " 
                + ( (m>9) ? m : "0" + m ) + " : " 
                + ( (s>9) ? s : "0" + s )  ; 

}

var i = setInterval( "horloge()" , 100 ) ;

fermer l'exercice 4

TP EXPRESSIONS RÉGULIÈRES

Exercie 1

Vous devez créer un tableau des villes de la région (Carcassonne, Mende, Montpellier, Nîmes et Perpignan). Ensuite vous devrez parcourir le tableau et afficher les villes commençant par « M ». Pour cela, utilisez une expression régulière.

var p = document.getElementById( 'result' ) ;

var villes = [ 'Carcassonne' , 'Mende' , 'Montpellier' , 'Nîmes' , 'Perpignan' ]  ;

for( prop in villes)
	if ( /^M\w*/.exec(villes[prop]) ) 
		p.innerHTML += /^M\w*/.exec(villes[prop]) + "<br />" ;

fermer l'exercice 1

Exercices 2 - 3 - 6

Exercice 2 : Vous devez créer un formulaire avec une zone de saisie pour le login et une fonction pour effectuer sa validation. Le login doit commencer par une lettre et ne contenir ensuite que des caractères alphanumériques. Sa longueur minimale sera de 7 caractères.
Exercice 3 : Vous devez créer un formulaire avec une zone de saisie pour le mot de passe et une fonction pour effectuer sa validation. Le mot de passe doit être robuste et donc contenir obligatoirement des majuscules, des minuscules, des chiffres et des caractères non alphanumériques. Sa longueur devra être comprise entre 7 caractères et 15 caractères.
Exercice 6 : En s’appuyant sur les exercices 2 et 3, créez un formulaire qui permet la saisie du login et du mot de passe, avec validation unique. Il faudra créer une fonction qui valide tout le formulaire.

sub1.onclick = function()
{
var sLog = document.getElementById("log").value ;
var pLog = [ /^[a-zA-Z]/ , /\w|\d{7, }/ ] ;
rLog = true ;
for(prop in pLog)
    rLog = rLog && pLog[prop].test(sLog) ;
    
rLog = rLog && ! /\W|[\?,;:\.]/.test(sLog) ;

var sMdp = document.getElementById("mdp").value ;

var pMdp = [ /[a-z]/ , /[A-Z]/ , /\d/ , /[\?,;:\.]/ , /.|\d|[\?,;:\.]{7,15 }/ ] ;
rMdp = true ;

for(prop in pMdp)
    rMdp = rMdp && pMdp[prop].test(sMdp) ;

alert(  ( (rLog) ? "login au bon format" :  "login au mauvais format" ) + "\n\n" +
        ( (rMdp) ? "mot de passe au bon format" :  "mot de passe au mauvais format" )) ;
}

fermer l'exercice 2 - 3 - 6

Exercice 4 - 5

Vous devez créer un formulaire avec une seule zone de saisie, dans laquelle vous saisirez « Dupont Jean ». Vous y ajouterez un bouton (<input> de type « button »). Lors de l’événement « onclick » du bouton, vous appellerez une fonction qui découpera le contenu de la zone de saisie et l’affichera dans une alerte sous la forme de « Jean Dupont ». (Voir méthode split). L’expression régulière sera du type : /(^.+)\s(.+)/

sub2.onclick = function()
{
	var sLog = document.getElementById("nomPrenom").value ;
	
	var p = /(.+) (.+)/ ;
	p.exec(sLog) ;
	alert ( "nom = " + RegExp.$1 + "\nprénom = " + RegExp.$2) ;

}

fermer l'exercice 4 - 5

TP DOM

Exercice 1.

Méthodes getElementById, getElementsByName et getElementsByTagName

Télécharger la pagedomExo1.html dans laquelle vous aurez à insérer votre code JavaScript. Notez en passant l'utilisation des attributs title pour informer sur les éléments de titre et paragraphe (pour les tester, laisser la souris au-dessus de l'élément).
Créer une fonction modif_paragraphe, appelée en cliquant sur le titre. Cette fonction sélectionne le paragraphe en utilisant son identifiant, puis le modifie avec la propriété innerHTML, en remplaçant le mot original en caractères droit par le mot corrigé, en italique.
Créer une fonction centrage_h1, appelée en cliquant sur le paragraphe. Cette fonction détecte d'abord les éléments portant le nom de balise h1. Elle sélectionne ensuite le premier d'entre eux (ça tombe bien, il n'y en a qu'un seul sur la page !), et modifie son attribut align, en lui affectant la valeur "center", à l'aide de la méthode setAttribute... dont vous testerez le fonctionnement.

var t = document.querySelector( "h1" ) ;
var p = document.querySelector( "#premier" ) ;

function modif_paragraph()
{
    s = p.innerHTML ;
    p.innerHTML = "Premier paragraphe corrigé." ;
    
}

function centrage_h1()
{
    t.style.textAlign = "center" ;
}

t.onclick = function() { modif_paragraph(); } ;
p.onclick = function() { centrage_h1() ; } ;

fermer l'exercice 1

Exercice 2.

Télécharger le fichier domExo2.html
Ajouter un bouton à la fin du paragraphe. Ce bouton lance l'horloge en appelant la fonction tourne()
Créer deux variables globales, compteur_minutes et compteur_heures, initialisées à 0.
Identifier les éléments correspondant à chaque image.
Selon la valeur de compteur_minutes, changer ses propriétés de position :
- quand le compteur vaut 0, attribuer à l'image aiguilleminute la position de l'élément chiffre1 ;
- quand le compteur vaut 1, attribuer à l'image aiguilleminute la position de l'élément chiffre2 ;
- quand le compteur vaut 2, attribuer à l'image aiguilleminute la position de l'élément chiffre3...
  ... ainsi de suite jusqu'à la valeur de compteur 11, auquel cas on attribue à l'image aiguilleminute la position de l'élément chiffre12.
Incrémenter le compteur_minutes, et lui affecter le reste de sa division euclidienne par 12.
Temporiser un appel à la fonction toutes les secondes (par un appel à la méthode window.setTimeout(nom_fonction, temps_en_millisecondes). Il reste maintenant à faire tourner l'aiguille "des heures".
Juste après avoir changé la valeur du compteur, tester si l'aiguille des minutes est en 12 (cela se fait par un test sur la valeur du compteur). Si cela est le cas, alors reprendre la même procédure que précédemment pour le déplacement de l'aiguille des minutes, mais cette fois-ci appliquée à celle des heures, en n'oublient pas d'incrémenter le compteur des heures. Ajouter un bouton permettant d'arrêter l'horloge (on fera appel à un booléen).

var compteur_minutes = compteur_heures = 0 ;

b = document.querySelector("#tourne") ;
b2 = document.querySelector("#stop") ;
m = document.querySelector( "#aiguilleminute" ) ;
h = document.querySelector( "#aiguilleheure" ) ;
var i ;

b.onclick = function() { i = ( window.setInterval( "tourne()" , 1000 ) )  } ;
b2.onclick = function() { clearInterval( i ) } ;
    
    function tourne()
        {
            compteur_minutes ++ ;
            if (compteur_minutes == 12)
                tourneM() ;
            compteur_minutes %= 12 ;
            c = document.querySelector( "#chiffre" + compteur_minutes ) ;
            m.style.top = c.offsetTop + "px" ;
            m.style.left = c.offsetLeft + "px" ;
        }	

    function tourneM()
        {
            compteur_heures ++ ;
            compteur_heures %= 12 ;
            c = document.querySelector( "#chiffre" + compteur_heures ) ;
            h.style.top = c.offsetTop + "px" ;
            h.style.left = c.offsetLeft + "px" ;
        }

fermer l'exercice 2

Exercice 2 bis.

Réaliser un cadran de manière mathématique.

function cadran( cT /* position Top du centre */ , 
                            cL /*position left du centre*/  ,
                            r /* rayon du cadran */ ,
                             div /* nombre de divisions du cadran */ ,
                             cou /* couleur des sections */ , 
                             siz /* taille des sections */
               				)
{
    for(i = 1 ; i <= div ; i ++)
    {
        var delta = ( ( (2 * Math.PI) / div) * (i) );
        var d = document.createElement( "div" ) ;
        d.style.transform = "rotate(" + delta + "rad)" ;
        d.style.borderTop = "1px solid " + cou ;
        d.style.height = "0px" ;
        d.style.width = "5px" ;
        document.body.appendChild( d ) ;
        d.style.position = "absolute" ;
        d.style.top = ( cT + r * Math.sin(delta) )+ "px" ;
        d.style.left = ( cL + r * Math.cos(delta) ) + "px" ;		
    }
}

cadran( 200 , 200 , 100 , 60 , "grey" , 9 ) ;

cadran( 200 , 200 , 105 , 12 , "darkgrey" , 15  ) ;

cadran( 200 , 200 , 110 , 4 , "lightgrey" , 20  ) ;

fermer l'exercice 2bis

Exercice 3

Accès aux enfants

Télécharger le fichier domExo3.html
La fonction change_enfants() sélectionne le paragraphe à l'aide de son identifiant.

Changer la valeur du premier enfant de l'élément paragraphe en "On change le texte plein d'enfants ".
Diviser par deux les hauteur et largeur de l'image (le dernier enfant).
Changer le code HTML du deuxième enfant en "<font color='blue'>en bleu</font>"
Changer la propriété display de style du quatrième enfant en "block".

function change_enfants()
    {		
        var e = document.getElementById( "paragraphe" ) ;
        alert("le noeud a " + e.childNodes.length +" enfants") ;
        e.firstChild.nodeValue = "On change le texte plein d'enfants " ;
        e.lastChild.setAttribute("height", (e.lastChild.getAttribute("height")/2) ); 
        e.lastChild.setAttribute("width", (e.lastChild.getAttribute("width")/2) ); 
        e.childNodes[1].innerHTML = " en Bleu " ;
        e.childNodes[3].style.display = "block" ;
    }

fermer l'exercice 3

Exercice 4

Télécharger le fichier domExo4.html
Créer une variable globale couleur initialisée à 0.
Dans la fonction anime() :
- Identifier l'élément d'identifiant citation.
- Faire une boucle sur l'ensemble de la collection des éléments-enfants.
- Pour chaque élément-enfant, tester s'il s'agit d'un noeud de paragraphe. Si oui, appeler la fonction anime_paragraphe avec comme argument l'objet-élément.
Dans la fonction anime_paragraphe(element) :
- Faire en sorte que la couleur de l'élément vaille "rgb("+String(couleur)+"%,"+String(couleur)+"%,"+String(couleur)+"%)" (cela permet d'exprimer une couleur rbg en pourcentages de rouge, vert et bleu).
- Si couleur est inférieure à 90 :
  - appeler la fonction setTimeout(), avec comme premier argument function(){anime_paragraphe(element)}, et un délai de 100 ms.
  - Incrémenter couleur.
- Si couleur est supérieure ou égale à 90, faire apparaître "Plop !" dans le paragraphe d'identifiant info.

var couleur = 0 ;

  function anime_paragraphe(element)
  {
      if( couleur < 255 )
      {
          setTimeout( function(){  anime_paragraphe(element) } , 100 ) ;
          element.style.color = "rgb(" + couleur + ",0," + couleur + ")" ;
          couleur += 10 ;		
      }					
      else 
      {
          couleur = 0 ;
          element.style.color = "rgb(" + couleur + ",0," + couleur + ")" ;
          element.innerHTML	 = "plop" ;
      }
  }
      
  function anime()
  {
      c = document.getElementById( "citation" ) ;
      for( i = 0 ; i < c.childNodes.length ; i ++  )
      {
          t = c.childNodes[i] ;
          //alert( t.nodeName )
          if( t.nodeName == "P" )
          {
              anime_paragraphe(t) ; 
          }
      }
  }

fermer l'exercice 4

TP EVENT

Exercie 1

Créer une page web comportant une phrase, dont un groupe de mots, de couleur noire au chargement, doit prendre la couleur :

rouge au passage de la souris ;
citron vert (lime) en réponse à un click ;
jaune en réponse à un double click.

para = document.getElementById("para") ;
para.onmouseover=function(){para.style.color ="red"} ;
para.onmouseout=function(){para.style.color="black"} ;
para.onclick= function(){ para.style.color="lime"} ;
para.ondblclick= function(){ para.style.color="yellow"} ;

fermer l'exercice 1

Exercie 2

Créer une page web constituée d'un court paragraphe (quelques lignes), d'une largeur de 500 pixels. En cliquant sur ce paragraphe, il doit s'afficher grosso-modo au centre de la page, avec un mot par ligne. Le double click doit permettre de revenir au format initial (aligné à gauche, occupant une largeur de 500 pixels).

p2 = document.getElementById("para2") ;
p2.onclick = function()
    {
    p2.style.margin="auto" ; 
    p2.style.width ="0px" ;
    } ;
    
p2.ondblclick = function()
    {
    p2.style.margin="" ; 
    p2.style.width ="500px" ;
    } ;

fermer l'exercice 2

Exercice 3

Créer une page web constituée d’un texte simple auquel le passage de la souris produira l’effet suivant :

police Verdana ;
un trait en travers des lettres (line-through) ;
une multiplication par 2 de la hauteur des lignes ;
une multiplication par 1,5 de la taille des caractères par rapport à la taille par défaut ;
une capitalisation des premières lettres des mots.

p3 = document.getElementById("para3") ;
p3.onmouseover = function()
{
    p3.style.fontFamily="verdana" ;
    p3.style.textDecoration="line-through" ;
    p3CS = window.getComputedStyle( p3 );
    p3lh =  p3CS['lineHeight'].replace( "px" , "" )  ;
    p3fs = p3CS['fontSize'].replace( "px" , "" )  ;
    p3.style.lineHeight=(p3lh*2)+"px" ;
    p3.style.fontSize=(p3fs*1.5)+"px" ;
    var t = p3.innerHTML ;
    t = t.split(" " );
    for ( prop in t )
    {
        t[prop] = t[prop][0].toUpperCase() + t[prop].substring(1 , t[prop].length ) ;
    }
    t = t.join ( " " ) ;
    p3.innerHTML = t ;
} ;

fermer l'exercice 3

Exercice 4

Trouver deux images, si possible de tailles différentes sur votre machine ; les insérer dans une page web élémentaire en rollover. Tenir compte des effets de hauteur et de largeur de telle manière qu'aucune image ne soit déformée.
À l'aide de la propriété this.innerHTML que vous expérimenterez si vous ne la connaissez pas, reproduire l'exemple suivant : Un petit texte avec un texte en italique au milieu devient : Un petit texte avec un texte en gras au milieu Au clic sur le mot texte puis revient à l’initial au double clic.

v = document.getElementById("visuel") ;

v.onmouseover = function()
{
this.src='img/cerveauLent1.jpg' ;
}

v.onmouseout = function()
{
this.src='img/cerveauLent2.jpg' ;
}

t = document.getElementById('txt') ;

t.onclick = function()
{
this.innerHTML = "texte en gras" ;
this.style.fontStyle = 'normal' ;
this.style.fontWeight = 800 ;

}

t.ondblclick = function()
{
this.innerHTML = "texte en italique" ;
this.style.fontStyle = 'italic' ;
this.style.fontWeight = "normal" ;
}

fermer l'exercice 4

TP OBJET

clipAnim

Alterer l'objet natif HTMLImageElement en ajoutant à son prototype, une méthode qui permette d'animer les 4 paramètres d'un mask de type clip (impossible avec jQuery)
Et ajouter un effet de zoom.

HTMLImageElement.prototype.plus = function()
{
    var h = this.style.height ;
    h = Number( h.replace( "px" , "") ) ;
    if ( h < this.maxH ) 
    {
        var t = this.style.top ;
        t = t.replace( "px" , "" ) ;
        var l = this.style.left ;
        l = l.replace( "px" , "" ) ;
        var c = this.style.clip ;
        var cT = /\d+/.exec( c );
        var cR = /\d+(?=px,?\s?\d+px,?\s?\d+px\))/.exec( c ); 
        var cB = /\d+(?=px,?\s?\d+px\))/.exec( c ) ;
        var cL = /\d+(?=px\))/.exec( c ) ;
        this.style.height = (h + 2) + "px" ;
        this.style.top = (--t)+"px" ;
        this.style.left = (--l)+"px" ;
        this.style.clip = "rect(" + ++cT +"px, " + ++cR +"px, " + ++cB +"px, " +  ++cL + "px)" ;
    }
    else 
        clearInterval(this.i) ;
};

HTMLImageElement.prototype.moins = function()
{
    var h = this.style.height ;
    h = Number( h.replace( "px" , "") ) ;
    if ( h > this.minH ) 
    {
        var t = this.style.top ;
        t = t.replace( "px" , "" ) ;
        var l = this.style.left ;
        l = l.replace( "px" , "" ) ;
        var c = this.style.clip ;
        var cT = /\d+/.exec( c );
        var cR = /\d+(?=px,?\s?\d+px,?\s?\d+px\))/.exec( c ); 
        var cB = /\d+(?=px,?\s?\d+px\))/.exec( c ) ;
        var cL = /\d+(?=px\))/.exec( c ) ;
        this.style.height = (h - 2) + "px" ;
        this.style.top = (++t)+"px" ;
        this.style.left = (++l)+"px" ;
        this.style.clip = "rect(" + (--cT) +"px," + (--cR) +"px," + (--cB) +"px," +  (--cL) + "px)" ;
    }	
    else 
        clearInterval(this.i) ;
};

HTMLImageElement.prototype.animClip = function( maxH , minH )
{
this.maxH =  maxH ; 
this.minH =  minH ; 
this.onmouseover = function()
{
    var t= this ;
    clearInterval(this.i) ;
    this.i = setInterval( function(){ t.plus();} ,17 );
}
this.onmouseout = function()
{
    var t= this ;
    clearInterval(this.i) ;
    this.i = setInterval( function(){ t.moins();} ,17 );
}	
}

img1.animClip( 180 , 150 ) ;

img2.animClip( 280 , 150 ) ;

fermer l'exercice clipAnim

JAVASCRIPT

TP ARRAY

Exercice 16

TP STRING

Exercice 5

Exercice 6

TP DATE

Exercice 3

Exercie 4

TP EXPRESSIONS RÉGULIÈRES

Exercie 1

Exercices 2 - 3 - 6

Exercice 4 - 5

TP DOM

Exercice 1.

Exercice 2.

Exercice 2 bis.

Exercice 3

Exercice 4

TP EVENT

Exercie 1

Exercie 2

Exercice 3

Exercice 4

TP OBJET

clipAnim