Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les notions Javascript de base

Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Par qwix, le 21 août 2005

Tout d'abord qu'est ce que JavaScript ? ;)
C'est un langage de programmation intégré aux pages Web, et généralement couplé au HTML.
Il s'exécute du côté client, c'est à dire qu'il effectue des traitements sur le navigateur du visiteur de votre site. ;)

Il est indispensable pour traiter:

  • des formulaires
  • des animations (boutons dynamiques comme les rollovers par exmple)
  • des dates ou des heures
  • des cookies (c'est à dire une sauvegarde d'informations comme votre login de messagerie, permet de créer des compteurs de visite, des caddies…)
  • la navigation (menus dynamiques, popup…)

… et bien d'autres :) :) , il vous suffira d'un peu d'imagination (certains créent des jeux en JavaSCript) ;) ;)

Un petit peu de sécurité maintenant:

C'est très simple ;) , JavaScript a été conçu pour limiter les risques pour les visiteurs, il ne permet PAS de déposer des informations sur un disque physique (disque dur, disquette), excepté les données déposées par les cookies, mais nous verrons cela un peu plus tard ;). Pourtant il existe une possibilité de sauver des informations sur un disque physique :( . En effet, JavaScript permet d'éxécuter des applets JAVA ou des contrôles ACTIVE X (qui EUX peuvent stocker des données sur un disque dur !!), la solution consiste donc à désactiver les applets JAVA et les contrôles ACTIVE X dans votre navigateur ;) .

Les limites de JavaScript:

JavaScript ne permet pas de récupérer des données sur un serveur ni d'interagir avec des bases de données.Donc il ne permet pas de créer des pages dynamiques :( , pour cela vous devrez utiliser un langage de programmation tel que PHP, ASP ou autre ;) .

Maintenant, on peut y aller :), hop c'est parti ;) .

Les variables :

Pour déclarer une variable il vous suffit de taper l'instruction var, suivie d'un mot, qui deviendra le nom de votre variable.

Par exemple:

var message = "bonjour et bienvenue sur dreamweaver forum" ;
var variablePlusLongue = "bonjour à vous" ;

Notez le ';' en fin de ligne, cela signifie que l'instruction se termine :), ce n'est pas obligatoire en JavaScript mais fortement conseillé. En effet des autres langages de programmation Web ont besoin de ce '; à la fin de chaque instruction pour pouvoir être utilisé, et si un jour vous décidez d'apprendre le PHP par exemple, il vous sera plus difficile de terminer vos instructions par un ';', donc prennez des bonnes habitudes, terminez chaque ligne de code par un ';' ;) .

Sachez aussi que pour des questions de lisibilité il est préférable de noter vos variables longues comme ceci:

var uneVariableLongueDePlusieursMots = '' ;

ou alors

var une_variable_longue_de_plusieurs_mots = '' ;

Essayez de donner des noms explicites à vos variables sinon vous vous trouverez vite perdu. En effet, il est plus facile de comprendre ceci:

var nombre1 = 2 ;
var nombre2 = 3 ;
var somme = nombre1 + nombre2 ;

plutôt que:

var a = 1 ;
var b = 2 ;
var c = a + b ;

;)

Il existe plusieurs type de variables qu'il sera important de distinguer:

  • les types numériques: c'est à dire des chiffres ou des nombres.
  • les types chaînés: c'est à dire des mots ou des phrases.
  • les types booléen : c'est à dire vrai ou faux.

Pour déclarer une variable numérique ou chainée, il vous suffira de taper:

var unChiffre = 135151 ;
var uneChaine = "coucou" ;

ATTENTION !!! Essayez de faire la distinction suivante :

var uneVariable = 123 ;
var uneSecondeVariable = "123" ;

Laquelle est une chaine?
Laquelle est un numérique?

Réponse:
uneVariable est un numérique ;)
uneSecondVariable est une chaine ;)

Pourquoi?
Car uneSecondeVariable à ses valeurs entre guillemets ””, ils vous suffit donc, pour déclarer des chaines de caractères, de mettre ses valeurs entre ””, et pour déclarer des numériques, de ne pas mettre de guillemets. Difficile de faire plus simple non? ;)

Les variables particulières:

JavaScript comprend plusieurs types particuliers de variables, mais nous allons pour l'instant nous concentrer sur un seul de ces types :

Les tableaux:

Ce type de variable est assez pratique car il permet de regrouper sous une seule entité plusieurs variables du même type :) . Par exemple, vous voulez utiliser comme variables, les jours de la semaine. Chaque jour est une chaine de caractères, donc plutôt que de faire ceci:

var lundi = "Lundi" ;
var mardi = "Mardi" ;
var mercredi = "Mercredi" ;
var jeudi = "Jeudi" ;
var vendredi = "Vendredi" ;
var samedi = "Samedi";
var dimanche = "Dimanche" ;

il vous est possible de tous les déclarer dans un tableau de variables, comme ceci:

var jourSemaine = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"] ;

ou alors (les deux notations sont strictement équivalentes, à vous de choisir ce que vous préférez ;) )

var jourSemaine = new Array(7) ;

cela signifie que votre tableau va contenir 7 cases vides. Il suffit maintenant de les remplir de la façon suivante:

jourSemaine[0] = "Lundi" ;
jourSemaine[1] = "Mardi" ;
jourSemaine[2] = "Mercredi" ;
jourSemaine[3] = "Jeudi" ;
jourSemaine[4] = "Vendredi" ;
jourSemaine[5] = "Samedi" ;
jourSemaine[6] = "Dimanche" ;

Vous devez sûrement vous dire “Pourquoi est-ce que les indices des cases vont de 0 à 6 ?”, tout simplement parce que les tableaux commencent à l'indice 0, c'est donc pour ça que la septième case à l'indice 6 ;) , donc si vous voulez remplir un tableau avec n éléments, votre tableau ira des indices 0 à n-1 ;) .

Petite astuce: si vous voulez afficher la longueur du tableau jourSemaine, tapez :

var longueur = jourSemaine.length ;
document.write ("La longueur du tableau jourSemaine est :"+longueur+" .") ;

ou document.write est la commande qui indique à JavaScript d'afficher des informations à l'écran ;) , le ”+” est l'opérateur de concaténation c'est à dire qu'il permet d'ajouter des chaines de caractères à d'autres chaines ou à des résultats (comme ci-dessus) pour obtenir le résultat escompté .
Vous allez sûrement constater que la longueur qui est affichée est 7 , c'est normal car la méthode length commence à 1 (mais compte toutes les cases du tableaux, elle n'oublie pas la première case bien que son indice soit 0 ;) ).

Si vous tapez le script entier dans une page HTML, c'est à dire comme ceci:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var jourSemaine = new Array(7) ;
jourSemaine[0] = "Lundi" ;
jourSemaine[1] = "Mardi" ;
jourSemaine[2] = "Mercredi" ;
jourSemaine[3] = "Jeudi" ;
jourSemaine[4] = "Vendredi" ;
jourSemaine[5] = "Samedi" ;
jourSemaine[6] = "Dimanche" ;
 
var longueur = jourSemaine.length ;
document.write("La longueur du tableau jourSemaine est :"+longueur+" .") ;
//-->
</script>
</head>
 
<body>
</body>
 
</html>

vous obtiendrez le résultat suivant :

La longueur du tableau jourSemaine est :7 .

Vous remarquerez que le script à été placé entre les balises <head><script…> et </head></script>, c'est à cet endroit qu'il vous faudra le plus souvent placer vos scripts JavaScript ;) , vous pouvez les placer ou bon vous semble, du moment que votre script se trouve entre les balises <script> et </script>, mais c'est moins pratique quand vous créez de longues pages web ;) .
Sinon, vous avez pu constater la présence de commentaires HTML ( <!– et //–> ) au début et à la fin du script, en effet les (très) vieux navigateurs n'interprètent pas JavaScript ils pourraient donc vous afficher n'importe quoi :( , c'est pourquoi il fait toujours prendre la précaution de les placer entre deux commentaires HTML ;) .

Petit exercice:
Essayez d'afficher toutes les valeurs du tableau jourSemaine ;) , envoyez moi un message privé avec votre solution et je vous dirai si c'est correct ou pas ;), la réponse sera en ligne bientôt ;)




Tutorial de qwix