Java Script : mémo/exemples  


Changement d'image Changement de couleur Les dates Les Formulaires
fonction Trim objet REGEXP Les curseurs souris Les opérateurs
Les caractères spéciaux      

Où mettre le code JavaScript ? Ben avant qu'il ne soit utilisé. Mais il est de coutume de mettre le maximum entre <head> et </head>, surtout les fonctions.

Tout d'abord, il faut avoir la notion   d'objet  . Sinon, vous ne comprendrez pas tout ce qui va suivre.

Récapitulatif des objets, évènements, propriétés ... les plus utilisés

document.xsignificationEquiv HTML
.write()écrit du code html avec un retour à la ligne
.big()police + 1<BIG>
.small() police - 1<SMALL>
.blink()Nescape >= 3<BLINK>
.bold()gras<B>
.fixed()non proportionnelle<TT>
.italics()Italique<I>
.fontcolor("red")Couleur police<Font Color="red">
.fontsize(3)Taille police<Font Size=3>
.strike()Caractère barré<STRIKE>
.sub()en indice<SUB>
.sup()en exposant<SUP>
document.xsignificationequiv HTML
.bgcolor="white"couleur de fond<BODY bgcolor="white">
.fgcolor="white"couleur avant plan?
.alink="red"couleur lien actif<A Alink="red">
.link="red"couleur lienaucun
.vlink"red"couleur lienaucun
onclickclick sur l'objet
onload/onUnloadcharge/décharge feuille
onmouseOver/
onmouseOut
souris dessus oui/non
onFocus/onBlurgain/perte du focus
onChangedevinez
onSelectidem
X += y (-=;*=;/=)x = x + y
==test
&&et
||ou
x++ (x--)x = x +1

Changement d'image

    Passez la souris sur l'image ci-contre, même plusieurs fois. Vous remarquerez le changement de l'image et que l'on n'a plus la première. On peut aussi le faire avec du texte, en utilisant les calques (<Div>). Ex :

Passez la souris ICI   sur la zone en jaune et vous avez le code précédent.

Mais, si vous voulez le récupérer, c'est pas trop pratique pour les copier-coller. Donc, cliquez ici pour que le code s'affiche en-dessous.


Comment çà marche : Pour ce faire dans le 1er exemple les évènements onmouseOver (souris dessus) et onmouseOut (souris pas dessus) de la balise <A> ont été utilisées associées à 2 fonctions, créées pour cet usage. Dans le 2ème exemple plus compliqué, c'est la balise <span> et l'évènement onclick qui ont été utilisés.

Changement de couleur

Mon texte ici Cliquez ici pour passer le texte en bleu cliquez ici pour le code
Cliquez ici pour passer le texte en vert
Cliquez ici pour passer le fond en blanc



Explications :

Les dates

heure = new Date().getHours();
jourmois = escape(new Date().getDate());
function message(mes){
  if (heure < 14) {mes1 = "bonjour";} else {mes1 = "bonsoir";};	
  document.write("un petit " + mes1);
  window.status=("un petit " + mes1);} // pour afficher dans la barre d'état
  document.write("nous sommes le "+jour+" de ce mois");
  };

Les fenêtres

window.window.open(messageURL,windowNameMessage,[toolbar[=yes|no]|[=1|0],location[=yes|no]|[=1|0],directories[=yes|no]|[=1|0],status[=yes|no]|[=1|0],menubar[=yes|no]|[=1|0],scrollbars[=yes|no]|[=1|0],resizable[=yes|no]|[=1|0],width=pixels,height=pixels])

monimage=open("vb.img/sql01.png","","scrollbars=no,left=30,top=30"); // pour ouvrir la fenêtre
window.monimage.close(); // pour fermer la fenêtre

Les Formulaires

Note : Les propriétés (button, checkbox, fileupload, hidden, password, radio, reset, select, submit, text, textarea)sont également des objets.

Les opérateurs

Voici les opérateurs les plus utilisés

typeopérateurexemplecommentaire/équivalence
affectation = a = 12 ; affecte la valeur 12 à la variable "a"
mathématique + addition a = b + 12 ;
- soustraction a = b - 12 ;
* multiplication a = b * c ;
/ division a = b / c ;
concaténation + a = "Java" + "Script" ; a = "JavaScript"
unaire ++ i++ ; i = i + 1 ; (incrémentation)
-- i-- ; i = i - 1 ; (décrémentation)
raccourci += a += 12 ; a = a + 12 ;
-= a -= 12 ; a = a - 12 ;
*= a *= 12 ; a = a * 12 ;
/= a /= 12 ; a = a / 12 ;
+= a += "texte" ; a = a + "texte" ;
comparaison == a == b vrai si a égal à b
 != a != b vrai si a différent de b
> a > b vrai si a supérieur à b
< a < b vrai si a inférieur à b
>= a >= b vrai si a supérieur ou égal à b
<= a <= b vrai si a inférieur ou égal à b
&& (a < b) && (a > c) vrai si a < b ET a > c
|| (a == b) || (a == c) vrai si a égal à b OU a égal à c



Les caractères spéciaux

Voici Les caractères spéciaux les plus utilisés

caractèresignification
\bretour arrière (backspace)
\fnouvelle page (form feed)
\nnouvelle ligne
\rretour à la ligne (sous Windows \r\n, sous Linux/Unix \n)
\tcaractère de tabulation
\\\ --> \
\' --> '
\" --> "


REGEXP : contrôle de chaîne de caractères


function verif(email) { // vérif validité email par REGEXP
   var reg = /^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/
   return (reg.exec(email)!=null)
}


var reg = /masque_de_recherche/ définit un masque de recherche
reg.exec(votre_chaîne) cherche les occurrences du masque dans votre chaîne et retourne ce qui a été trouvé ou null masque de recherche Note : + signifie "au moins 1 fois le caractère précédent" équivalent à {1,}

autre exemples :
CaractèreExemplesCommentaire
^  $  Début et fin de la saisie
[ ][asp]   [0-9]   [a-zA-Z] Liste de caractères
[^ ][^asp]   [^0-9]   [^a-zA-Z] Liste de caractères exclus
(modele)  Modèle
x|y(f|z)oo : marche pour foot ou zoo x ou y
*  Le caractère précédent apparaît 0 ou plusieurs fois
+  Le caractère précédent apparaît 1 ou plusieurs fois
?  Le caractère précédent apparaît 0 ou 1 fois
{n}  Le caractère précédent apparaît exactement n fois
{n,}  Le caractère précédent apparaît au moins n fois
{n,m}  Le caractère précédent apparaît de n à m fois
\\\ --> \     \( --> (     \) --> )
\n --> nouvelle ligne
\f --> saut de page
\t --> tabulation
Le caractère suivant est spécial
\b  Fin d'un mot
\B  Pas à la fin d'un mot
\xHH\x41 <--> A Code hexadécimal d'un caractère
\s\s <--> [ \f\n\r\t\v] Tout caractère séparateur
\S\S <--> [^ \f\n\r\t\v] Tout caractère non séparateur
\ autres\d <--> [0-9]
\D <--> [^0-9]
\w <--> [A-Za-z0-9_]
\W <--> [^A-Za-z0-9_]
Raccourcis

REMARQUES
Petits exemples
Supprimer les accents
function noaccent(chaine) {
  temp = chaine.replace(/[àâä]/gi,"a")
  temp = temp.replace(/[éèêë]/gi,"e")
  temp = temp.replace(/[îï]/gi,"i")
  temp = temp.replace(/[ôö]/gi,"o")
  temp = temp.replace(/[ùûü]/gi,"u")
  return temp
}
Décomposer une chaîne en ses mots
function decomp(chaine) {
  var tab = chaine.split(/ /)
  document.write("La chaîne a "+tab.length+" mots<br>")
  document.write("Le 3ème mot est <b>"+tab[2]+"</b> !")
}
Chercher un nombre
function info(chaine) {
  var tab = chaine.match(/\d+/)
	if(tab==null) {
	  document.write("pas de nombre")}
	else {
	document.write("nombre "+tab[0]) }
	document.write("<br>")
}
Chercher un quantifiant
function info2(chaine) {
  var tab = chaine.match(/(\d+) ([a-z]+)/)
  if(tab==null) {document.write("pas de quantifiant")}
  else document.write("quantifiant <b>"+tab[1]}
}
Surligner ou cacher des mots-clés
function surlign(chaine) {
  var cle = new Array("bananes","pommes","fraises"), reg
  for(i=0;i<cle.length;i++) {
    reg = new RegExp(cle[i],"ig")
    chaine = chaine.replace(reg,"<font style='background:lime'>"
    +cle[i]+"</font>")
  }
  return chaine
}
function censure(chaine) {
  var cle = Array("con","merde"), reg
  for(i=0;i<cle.length;i++) {
    reg = new RegExp(cle[i],"ig")
    chaine = chaine.replace(reg,"***")
  }
  return chaine
}
Décomposer une URL
// lit l'URL complète
var chaine=""+location
// fractionne aux caractères ? = ou &
var tab = chaine.split(/\?|=|&/)
// affiche tous les morceaux
for(i=0;i<tab.length;i++) 
  document.write(tab[i]+"<br>")
Ajouter la méthode trim()   d'après la doc Microsoft
<script language="JavaScript"><!--
// Ajoute la fonction trim 
// comme méthode de l'objet String.
String.prototype.trim = function() 
  { return this.replace(/(^\s*)|(\s*$)/g, ""); }

// Exemple d'utilisation :
function testTrim() {
  var s = "    espaces à gauche et à droite    ";
  alert("> " + s + " (" + s.length + ")");
// Supprime les espaces à gauche et à droite
  s = s.trim ();
  alert("> " + s + " (" + s.length + ")");
 //--></script>


Les curseurs souris

Il est possible (uniquement avec IE 4 et +) de paramétrer l'apparence du curseur de la souris.


note : çà n'a pas l'air de fonctionner sous W98 et IE5.5.

Exemplescode
passer la souris ici <A style="cursor: default" href="#curseur">passer la souris ici</A>
passer la souris ici <span style="cursor: pointer" href="#curseur">passer la souris ici</span>


Le tableau suivant montre tous les curseurs existants. Fonctionne avec IE5+, Mozilla et NS7.


Curseur Code Commentaire
passez la souris ici pour tester  cursor:defaut  Curseur par défaut
 "  cursor:pointer Main
 "  cursor:text  Curseur texte
 "  cursor:wait  Sablier
"  cursor:crosshair Croix précise
 "  cursor:move  Déplacement
 "  cursor:help  Flèche + ?
 "  cursor:e-resize Flèche vers la droite
 "  cursor:w-resize Flèche vers la gauche
 "  cursor:n-resize Flèche vers le haut
 "  cursor:s-resize Flèche vers le bas
 " cursor:ne-resize Flèche vers le nord-est
 " cursor:nw-resize Flèche vers le nord-ouest
 " cursor:se-resize Flèche vers le sud-est
 " cursor:sw-resize Flèche vers le sud-ouest


Les caractères spéciauxcaractère signification
\bretour arrière (backspace)
\fnouvelle page (form feed)
\nnouvelle ligne
\rretour à la ligne [4]
\tcaractère de tabulation
\'apostrophe
\"guillemet
\\anti-slash (\)
\XXXcaractère ISO-latin-1 (base octale) ex: \251 pour ©
\xXXcaractère ISO-latin-1 (base hexa.), ex: \xA9 pour ©
\uXXXXcaractère ISO-latin-1 (4 chiffres hexa) ex: \xu20AC pour €