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 | ||
| fevrier | ||
| mars | ||
| avril | ||
| mai | ||
| juin | ||
| juillet | ||
| aout | ||
| septembre | ||
| octobre | ||
| novembre | ||
| decembre |
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"
<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")
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...
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,...
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...
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> :
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.
<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.
Aucun commentaire:
Enregistrer un commentaire