Affichage des articles dont le libellé est Javascript. Afficher tous les articles
Affichage des articles dont le libellé est Javascript. Afficher tous les articles

samedi 27 octobre 2012

Apprendre le Javascript : les bases du langage


Cette partie du site consacrée à Javascript ne ressemble en rien aux pages web que vous avez déjà visitées sur le même sujet !
En effet, je n'ai pas l'intention de faire un cours magistral avec des chapîtres, des tomes I et II (d'ailleurs, j'en serai bien incapable :o) et je ne pense pas que cela vous plairait !)
Non, je vais vous faire aborder Javascript comme je l'ai moi-même abordé, ce qui veut dire avec plus ou moins de bonheur...
Allez, c'est parti !
En HTML, pour écrire ou afficher des données, vous insérez ces données directement dans le <body> pour le texte, par la balise <img src=""> pour les images, et <embed> pour le reste.
Ce qui fait surtout l'interêt de Javascript, c'est sa capacité à s'intégrer au code html environnant. En Javascript, la fonction qui combine toutes ces... combinaisons(!) est la fonction write(), embarquée (c'est-à-dire intégrée dans le code-même de Javascript).
** Exemple :

<html>
<body>
<script language="Javascript">
document.write("Bonjour")
</script>
</body>
</html>


va afficher Bonjour sur le "document" que constitue la page web. Vous noterez au passage que les guillemets ont pour fonction de délimiter la variable à afficher.

** Vous pouvez dans le code de Javascript insérer des codes HTML :

<script>
document.write("<b>Bonjour</b>")
</script>


va afficher Bonjour

** On peut aussi insérer des images :

<script>
document.write("<img src='mon_image.jpg'>")
</script>
On notera simplement que habituellement en HTML, dans <img src=""> on met des guillemets et qu'ici on a mis des guillemets "simples" qu'on nomme "quotes". Pourquoi ? Parce qu'en Javascript, lorsqu'une variable est déjà délimitée par des guillemets "doubles", tout ce qui se trouve à l'intérieur ne peut recevoir que des "quotes", des apostrophes. C'est ainsi !
Vous savez maintenant afficher avec document.write() du texte, des images. La belle affaire !
Le HTML vous le permettait déjà ! Alors c'est quoi l'interêt de Javascript ?
En HTML, vous pouviez afficher du texte, des images mais pas l'utilisateur... Pour que l'utilisateur, il le mérite bien :o), puisse lui-aussi sortir de sa passivité, il doit faire appel à des fonctions, qui elles-mêmes vont faire appel à Javascript. Une chaîne donc, dont vous serez l'initiateur.
**Pour faire appel à des fonctions Javascript, l'utilisateur doit agir. Agir sur les éléments de votre page web, par des "Event Handlers", en français des gestionnaires d'évenements (survol ou clic d'un lien, d'un bouton, d'un texte, d'une image...)
Exemple :



** Nouvelle fonction :
L'exemple que vous venez de voir a fait appel à une autre fonction embarquée alert().Cette fonction, vous l'aurez remarqué :o) fait apparaître une boîte de dialogue. La syntaxe est la même que pour la fonction document.write().

<script>
alert("Vous êtes bien curieux !")
</script>
Mais cette fonction est incapable par elle-même d'être, d'exister, d'agir ! Elle a besoin pour "vivre" d'un "event handler", ici, un bouton par lequel vous avez activé la fonction alert().
<input type="button" value="exemple" onClick="javascript:alert('Vous êtes bien curieux !')">

Traduction :
Au moment du clic, le bouton va faire appel à Javascript pour activer la fonction nommée alert(). Ici la fonction alert() est définie au sein même de l'event handler, mais ce n'est pas toujours le cas.

vendredi 26 octobre 2012

Les fonctions en Javascript


En effet, il arrive très souvent que les fonctions soient bien plus complexes et bien plus "encombrantes" que cette fonction alert(). De plus, une même fonction peut être appelée plusieurs fois dans une même page web.
D'où l'interêt de définir à l'avance la fonction et de la stocker dans un endroit "sûr" : la partie <head> de la page HTML.
Posons que nous ayons besoin de la fonction alert() pour faire apparaître les messages "Bienvenue chez vous !" ou "Votre code est erroné !" dans une boîte de dialogue selon qu'un champ contient ou non une certaine valeur. Dans notre exemple, nous savons aussi que cette fonction sera sollicitée 10 fois dans la même page.
Nous avons le choix entre écrire la fonction alert() et sa "longue" variable autant de fois que nécessaire dans la page OU créer cette fonction et simplement faire appel à elle au moment voulu.
Voici la fonction qui recourt à la fonction Javascript alert() :

<script>
function quoi () 
{
var d="mon_code"
if (document.forme.champ.value==d)
{
alert("Bienvenue chez vous !")
}
else
{
alert ("Votre code est erroné !")
}
}
</script>

Traduction :
Si le champ contient la valeur "d" donc le bon code "mon_code", "Bienvenue chez vous" s'affiche, sinon l'écran indiquera "Votre code est erroné".
** Note :
>  une fonction porte un nom (ici elle s'appelle quoi)
>  tout comme document.write() ou alert(), votre fonction s'écrit quoi() avec les parenthèses qui pourront par la suite inclure des variables
>  entre les accolades { } se trouvent les instructions de la fonction, ce qu'elle va faire, (ici elle active la fonction embarquée alert())
>  le tout est encapsulé dans les balises <script> et </script>

Mais n'oubliez pas qu'une fonction n'existe pas par elle-même ! C'est le bouton qui va l'activer :

<input type="button" value="essai" onclick="javascript:quoi()">



Admettez qu'il est bien plus simple d'écrire <onclick="javascript:quoi()"> 10 fois que d'écrire 10 fois la totalité du code de la fonction quoi() !!!
Vous connaissez maintenant les fonctions document.write() et alert() et savez comment les appeler par un event handler !
Les évenements en Javascript représentent les étapes de la vie d'une page HTML, par exemple son chargement, sa fermeture, ou plus simplement les actions de la souris...
Pour une fonction nommée faire() les principaux évenements placés dans leur contexte sont les suivants :
** <body bgcolor="red" onload="faire()">
La fonction faire() est appelée lors du chargement de la page

** <body bgcolor="red" onunload="faire()">
La fonction faire() est appelée lors de la fermeture de la page...

** <img src="votre_image.jpg" onmouseover="faire()">
La fonction faire() est appelée lors du survol de l'image...

** <img src="votre_image.jpg" onmouseout="faire()">
La fonction faire() est appelée lorsque la souris quitte la zone de l'image...

** <input type="button" onclick="faire()">
La fonction faire() est appelée lorsque le bouton est cliqué...






mercredi 24 octobre 2012

Les objets de Javascript


A ce stade de notre apprentissage, un peu de théorie ne nous fera pas de mal !
Nous avons vu la fonction document.write() et savons que cette fonction écrit ("write") dans la page web ("document").
Tout ceci pour dire que Javascript est un "langage orienté objet". Késako ?
Cela signifie que avec Javascript vous pouvez influer, modifier ou appeler (on dit adresser) les objets.
Les objets sont des éléments de votre page web que "connaît" Javascript, objets qui respectent une hiérarchie :
--> l'objet WINDOW qui est la fenêtre "générale" de votre page web, parent de
--> l'objet DOCUMENT qui est la page en cours, parent de
--> l'objet FORM (c'est le <form> que vous connaissez), parent de
     --> l'objet TEXTAREA
     --> l'objet BUTTON
     --> l'objet TEXT
Je m'arrête là pour l'instant car les objets sont nombreux ; nous n'avons pas parlé de l'objet navigator, ni de l'objet screen...etc.
Revenons à notre fonction quoi()

<script>
function quoi ()
{
var d="mon_code"
if (document.forme.champ.value==d)
{
alert("Bienvenue chez vous !")
}
else
{
alert ("Votre code est erroné !")
}
}
</script>
 
Il n'y a pas de secret ! Regardez plutôt le code :

<form name="forme">
<input type="text" name="champ">
<input type="button" value="essai" onclick="javascript:quoi()">
</form>
Que déclare la fonction quoi() ? Elle dit que si la valeur de
<input type="text name="champ"> situé dans
<form name="forme"> situé dans
l'objet document c'est-à-dire la page web
est égale à "d" alors on affiche cela, sinon on affiche ceci.
** Il est donc bien important d'adresser les bons objets et de leur affecter un nom (name="") pour que Javascript puisse les identifier (et vous aussi d'ailleurs !).

** dans document.forme.champ, vous avez en fait 1 objet (l'objet text qui s'appelle ici "champ" contenu dans l'objet form qui s'appelle ici "forme" lui-même contenu dans l'objet document).

** dans document.forme.champ.value, nous avons ici ajouté une propriété à cet objet. Un objet peut posséder plusieurs propriétés, c'est-à-dire plusieurs attributs :
value sert par exemple à évaluer le contenu de l'objet "text"
length mesure la "longueur" de la chaîne de caractères de l'objet "text"
Exemple :

<script>
function longb()
{
var c=document.formeb.champb.value
if (c.length>=3)
{
alert("Bienvenue chez vous !")
}
else
{
alert ("Votre code est erroné !")
}
}
</script>
Vous voyez ici que nous avons utilisé la propriété "length" pour évaluer la "longueur" de la chaîne de caractère de champb. Tant que la saisie de l'utilisateur ne sera pas égale ou supérieure à 3 caractères, c'est la deuxième fenêtre qui s'affichera ("code erroné").
** Vous aurez noté que le script de la fonction longb() parle de "formeb" et de "champb". En effet, il est préférable pour ne pas dire IMPERATIF lorsque dans la même page vous avez d'une part, plusieurs fonctions ET plusieurs <form> <textarea> ou <text> de les nommer distinctement les uns des autres pour ne pas provoquer des "interférences" entre les fonctions.
** Remarque : nous avons déjà parlé des variables et leur avions jusqu'à maintenant affecté des entiers d=123456, des chaînes de caractères d="comment allez vous ?".
Ici dans la fonction longb() nous avons attribué à c la valeur de document.formeb.champb.value.

mardi 23 octobre 2012

Les tableaux en Javascript


Le tableau qui suit a été entièrement conçu avec Javascript et n'a pas nécessité plus de 6 lignes de code ! Il s'agit d'un petit "agenda" très simple destiné à servir de pense-bête pour les grandes occasions à venir (j'ai simplifié au maximum en utilisant une entrée pour les mois, une pour la personne concernée et une autre pour le motif de la réunion familiale.
Avec HTML, il aurait fallu plus du double de lignes voire le triple pour écrire les <tr> et les <td>, les bgcolor des <td>, le bgcolor de la <table>...


janvier
andré
anniversaire
fevrier
monique
fête
mars
natacha
baptême
avril
meryl
dentiste
mai
julie
baptême
juin
arthur
rendez-vous
juillet
grand-père
noce d'or
aout
oncle tom
bac
septembre
julien
concours
octobre
cosette
barbecue
novembre
marcel
visite
decembre
rené
séjour ski

Outre la compacité du code, l'avantage indéniable de ce tableau en Javascript, c'est sa modularité exemplaire : modifier, compléter ou supprimer une ligne ou une cellule est un jeu d'enfant...
Pour aboutir à ce tableau, quelques notions "avancées" sont nécessaires : vous allez voir ce qu'est un "array" et par la suite ce qu'est une boucle...
** Un Array est en fait une collection d'informations dans laquelle chaque information est indicée. Admettons que vous soyez très riche et que dans votre garage, vous avez entreposé 5 voitures. Le garage en Javascript s'appelle "Array" et chaque voiture est un élément de l'Array.
Pourquoi élément indicé ? Parce que pour plus de praticité et de "portabilité", vos voitures ne sont pas nommées par Renault, Citroen ou Mercedes mais par leur position, leur indice dans l'Array.
Exemple :

<script>
var garage=new Array(5)
garage[0]="renault"
garage[1]="citroen"
garage[2]="mercedes"
garage[3]="seat"
garage[4]="peugeot"
Ici l'array ne comporte que 5 éléments référencés de "0" pour le premier à "4" pour le cinquième. Pensez à notre ère "judéo-chrétienne" qui commence elle-aussi à l'an 0 ! Cette manière de procéder est bien mais si vous êtes très très riche, vous allez avoir, disons 60 voitures...
Il serait très fastidieux d'écrire de garage[0] à garage [59] donc je vous conseille la syntaxe suivante beaucoup plus simple et tout aussi efficace :

var garage=new Array("renault","citroen","mercedes","seat","peugeot")
Le résultat sera le même et vous aurez gagné du temps !

Oui mais ça sert à quoi les Arrays ? Vous allez en avoir un aperçu...


    



Voici le code de la fonction montre(), fonction que j'ai placée dans le <head> de la page HTML :
<script>
function montre(i)
{
var garage=new Array("renault","citroen","mercedes","seat","peugeot")
document.forme.champ.value="cette voiture est une "+garage[i]+" !"
}
</script>


et le code pour les boutons :

<input type="button" value="mon auto" onclick="javascript:montre(0)">
<input type="button" value="ma voiture" onclick="javascript:montre(1)">

etc, etc,...
Je conviens que pour l'instant cet exemple n'est pas très folichon mais comprenez que par la suite, dans vos arrays vous pourrez mettre des images, des pop-ups, pratiquement tout ce qui vous passera par la tête...
Un autre exemple "parlant" vous donnera peut-être plus d'idées :

Dire
Adieu !


Cet effet est obtenu par l'utilisation d'un array, d'un div et de la fonction feu() :
<script>
var mot=new Array("Salut !","bonjour !","au revoir !","à bientôt...","Adieu !")
function feu(i){
document.getElementById('mon_div').innerText=mot[i];}
</script>



et le code du <div> :
<a href="#" onmouseover="feu(0)" onmouseout="feu(4)">Dire</a>
<div id=mon_div style="width:60;height:20;border-color: #d9d9f3;background:#d9d9f3;font-family:verdana;font-size:20px;color:#8f8fbd"></div>

L'array comporte ici 5 éléments indicés (0, 1, 2, 3, 4) qui sont directement nommés par la fonction "feu(0)" et "feu(4)" par l'intermédiaire des event handlers.
Nous avions déjà vu "onclick", qui comme son nom l'indique, déclenche l'action par le clic. "onmouseover" active la fonction au survol de la souris dans la zone du div, et onmouseout lors de la sortie de la souris de cette même zone...
** Pour résumer, un Array permet de stocker des variables et de les utiliser dans un script en les appelant par leur indice.

les bases de la syntaxe


Revenons sur la syntaxe de la fonction longb() écrite dans sa version "académique" et examinons chaque ligne :
<script language="Javascript">
<!--
function longb()
{
var c=document.formeb.champb.value
if (c.length>=3)
{
alert("Bienvenue chez vous !")
}
else
{
alert ("Votre code est erroné !")
}
}
//-->
</script>
La présence de tant d'accolades et de parenthèses peut rebuter mais c'est vraiment très simple :
function longb()
{
Je mets entre les accolades les instructions de ma fonction.
Cela peut être des actions simples ou parfois plus complexes

}


Une condition s'exprime avec "if" :

if (condition)
{
je mets entre les accolades l'instruction à exécuter
si la condition est remplie

}
else sinon
{
je mets entre les accolades l'instruction à exécuter si la condition n'est pas remplie
}
Ce n'est pas une obligation que d'aller à la ligne aprés chaque accolade, mais conseillé pour une meilleure lisibilité et aussi pour éviter les erreurs. Si vous avez 3 accolades ouvrantes, vous devez en avoir 3 autres fermantes !