Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

16. Mise en ligne d'un site

Formations informatiques en ligne sur YBET.be
Office Internet Techniques
Access Formation Internet PC et périphériques
Cours Excel PHP - MySQL Equipements réseaux
Powerpoint Créer son propre site Dos et Windows
ACCUEIL Forum webmasters Nous contacter

16.7. Utiliser les variables et fonctions en Javascript

1. Les variables - 2. Prompt(), entrée de données - 3. Transformer en numérique - 4. Fonctions personnelles - 5. Locales ou globales - 6. Renvoyer une valeur - 7. Quelques fonctions particulières sur les chaînes de textes

La première partie nous a permit de débuter (et encore, juste débuter). Comme en PHP, ce langage permet de travailler sur des variables à l'aide de fonctions qui sont soit prédéfinies, soit créées par le ... programmeur du site Internet et c'est ici que nous allons nous intéresser à la programmation en commençant pas les variables pour compléter par quelques fonctions.

De nouveau, on va se baser sur le cours PHP pour cette formation en ligne. En PHP, on doit déclarer les variables au préalable (on oublie souvent mais c'est une source d'erreur possible) et leur donner ... non pas un type mais une valeur de départ. Ca tombe bien, en Javascript, on doit définir les variables, sans leur donner de types également mais aussi sans leur donner obligatoirement de valeurs de départ. Et de nouveau, on va retrouver quelques fonctions pour passer d'un type à l'autre.

1. Les variables

Les variables doivent être déclarées avant leur utilisation. La commande est VAR suivi du nom de la variable. Par exemple:

var langue;

Le nom des variables ne doit pas dépasser les 26 caractères, peut utiliser des lettres, des chiffres (sauf le premier caractère comme en PHP), l'undescore (pas le tiret), ... et pas de caractères accentués et autres caractères spéciaux, mots réservés (en anglais le plus souvent), pas non plus de $ devant le nom de variable comme en PHP. Comme en PHP, javacript fais la distinction entre minuscule et majuscules. Les variables sont par défaut locale. En script, une fois quitté la page, la variable est effacée, mais vous pouvez également créer des variables GLOBAL (le moins possible).

Les types de variables ne vont pas non plus être très différentes mais nettement plus limitées:

On peut également déclarer une variable ET lui donner une valeur. Par exemple:

var langue="Français";

On commence? "Français" est une variable de type texte, elle est équivalente à 'Français'. Et là aussi on va retrouver les problèmes de PHP. La valeur 'l'étendue de la programmation' va de nouveau nous poser quelques problèmes et ... de nouveau, le \ devant va corriger le problème (identique avec le "). La déclaration ci-dessus sera:

var tests='l\'étendue du problème';

On évite pour la suite de jouer entre les " et les ' dans les déclarations de variables. De nouveau, le slash dans le contenu de la variable va nécessiter un double slashe \\. (un supplémentaire).

Rassembler des variables textes entre elles est finalement facile. Déclarons deux variables textes et faisons la concaténation de ces deux variables avec un petit texte au milieu avant d'afficher la troisième variable.

var texte1 = 'ma première partie de texte';

var texte2 = 'ma deuxième partie de texte';

var texte=texte1+" suivi de "+texte2;

alert(texte);

Ce qui donne bien

Quelques caractères spéciaux vus dans la partie variables PHP sont également utilisés:

Pour les nombres, c'est presque identique pour la déclaration.

var mon_nombre=1.563;

Pour les calculs, c'est tout aussi facile, limitons nous aux quatre opérations (il en existe d'autres), avec toujours si nécessaire l'utilisation des parenthèses.

Faisons un petit calcul vite fait

var nombre_1=1.2;
var nombre_2=2;
var nombre_3=7;
alert (nombre_2*(nombre_3 - nombre_1));

Le résultat affiché est 11,6, soit 2 * 5,8. Je vous laisse essayer d'autres calculs.

Comme en PHP, des notations particulières sont utilisées, += et -=

var nombre=12;

nombre=nombre +10;

nombre +=10;

// les deux lignes ci dessous sont parfaitement équivalentes

alert(nombre);

Pour l'incrémentation et la décrémentation, vous pouvez utilisez les méthodes ci-dessus mais aussi

nombre ++ // incrémente la variable nombre (+1)

nombre -- // décrémente la variable nombre

Les variables qui ne sont pas définies sont reprises comme undefined. Lorsque nous verrons la commande si, nous testerons simplement pas variable == undefined pour voir si est non définie ou plus simplement par variable !=undefined pour vérifier si elle a bien une valeur.

2. Entrée de valeurs par l'utilisateur.

Jusqu'ici, nous avons déclaré les variables directement dans le programme. La fonction prompt va permettre de demander la valeur au visiteur de la page.

var nombre =prompt('Entrez un nombre');

Reprenons notre calcul de tout à l'heure

var nombre_1 =prompt('Entrez un nombre');
var nombre_2=2;
var nombre_3=7;
alert (nombre_2*(nombre_3 - nombre_1));

ou

var nombre_1;
nombre_1 =prompt('Entrez un nombre');
var nombre_2=2;
var nombre_3=7;
alert (nombre_2*(nombre_3 - nombre_1));

Cette fois, le nombre_1 doit être entré dans une fenêtre. Les deux écritures sont parfaitement équivalentes. Dans la deuxième, la variable est déclarée avant et le terme var n'est plus repris dans la ligne prompt. Notez qu'ici le type de variable n'est pas déclaré, si l'utilisateur entre un texte (ou laisse le undefined comme valeur dans le prompts), il reçoit comme résultat une erreur NaN qui signifie que ce n'est pas un nombre (pour l'abréviation anglaise de Not a Number).

Une valeur par défaut? On va tout de même essayer de recevoir le moins possible ce genre de message d'erreur en ajoutant une valeur par défaut à la commande prompt comme deuxième paramètre, par exemple:

nombre_1 =prompt('Entrez un nombre',0); //par défaut, la valeur est 0.

3. Passer d'un type de variable à un autre.

La question est "Est-ce qu'on peut éviter ce genre d'erreur?". Pour l'instant, pas vraiment, ça nécessite d'autres fonctions plus complexes. Pouvons nous transformer une variable d'un type à l'autre? En règle général, le langage javascript s'en charge tout seul mais deux fonctions peuvent être utilisée pour passer d'un texte à un nombre:

parseInt() transforme une suite de chiffre de type caractère ou un nombre réel en entier

parseFloat() transforme une suite de chiffre de type caractère en réel

! ATTENTION à la syntaxe.

Essayons

var nombre;
var nombre_texte="1234";
nombre=parseInt(nombre_texte);
alert(nombre);
nombre_texte="abcd";
nombre=parseInt(nombre_texte);
alert(nombre);

var nombre_texte="1234texte";
nombre=parseInt(nombre_texte);
alert(nombre);

La première partie va effectivement donner un résultat. Par contre, la deuxième va de nouveau donner un message d'erreur NaN, tout simplement parce que ces deux fonctions n'acceptent que les chiffres, + et - et E (e). La dernière va donner 1234 en oubliant les caractères qui suivent. Ces deux fonctions permettent par des options supplémentaires de passer en hexadécimal.

4. Nos propres fonctions

Comme dans tous les langages de programmation, script permet de créer ses propres fonctions. Elles doivent être au préalable déclarées (créée) par le commande function (anglais) en mettant les lignes de code correspondants pour être appelée ensuite. Le nom des fonctions créées reprennent les mêmes caractéristiques que les variables ci-dessus (26 caractères maximum, pas de chiffres pour débuter, pas de caractères spéciaux ni accentués, _ et pas -).

// déclaration

function calcul()
{
//contenu de la fonction
}

// appel 

calcul();

Créons une simple fonction qui va afficher un nombre (des espaces sont insérés dans les balise script).

< script>
function nombre()
{
var nombre=10;
alert(nombre);
}
< /script>
Texte en html
< script>
nombre();
< /script>

On déclare d'abord la fonction nombre qui affiche la valeur de la variable nombre (10). Cette fonction s'appelle de n'importe où par nombre(). Attention, la fonction doit être déclarée avant de l'appeler. Le plus souvent, elle est placée dans le code html entre <head> et </head>, tout simplement parce que cette partie n'est pas affichée dans le navigateur. Ce n'est pas obligatoire mais sinon, vous devez utilisez les commentaires comme vu dans la partie précédente.

La partie suivant va être de passer des paramètres à une fonction. Nous allons modifier cette fonction nombre pour que l'utilisateur entre un nombre (prompt) et que la fonction affiche la somme avec la variable nombre. Essayons

< script>
function nombre(valeur)
{
var nombre=10;
alert(nombre+valeur);
}
< /script>
Bonjour
< script>
var nombre1;
nombre1=prompt('Entrez un nombre',0);
nombre(nombre1);
< /script>

Ca pourrait marcher, pourtant, si nous entrons 10, le résultat est 1010 (en fait une concaténation) au lieu d'un réel calcul. La solution passe par une des fonction de conversion ci-dessus.

< script>
function nombre(valeur)
{
var nombre=10;
valeur=parseInt(valeur); // ou parseFloat()
alert(nombre+valeur);
}
< /script>
Bonjour
< script>
var nombre1;
nombre1=prompt('Entrez un nombre',0);
nombre(nombre1);
< /script>

Vous pouvez bien sûr passer plusieurs paramètres en les séparant par des virgules.

5. Variables locales et globales.

Plus haut, nous avons affiché le résultat directement dans la fonction (et ça fonctionne) mais que se passe t'il si nous demandons l'affichage du nombre directement dans le contenu et plus dans la fonction. Modifions notre programme comme suis. Nous déclarons la fonction, l'appelons et essayons d'afficher le total hors de la fonction.

<script>
function nombre(valeur)
{
var nombre=10;
valeur=parseInt(valeur);
var total=nombre+valeur;
// alert(total);
}
</script>
Bonjour
<script>
var nombre1;
nombre1=prompt('Entrez un nombre',0);
nombre(nombre1);
alert(total);
</script>

Rien, pas de petite fenêtre. Pourquoi? Tout simplement parce que la variable total est supprimée en quittant la fonction, donc plus accessible ensuite. Comme en PHP, ça demande de déclarer la variable comme GLOBALE mais attention, cette variable va aussi suivre la navigation et en plus être reprise n'importe où. Ce type ne doit être utilisé que dans des cas spécifiques (quand vous ne pouvez pas faire autrement).

Comment faire pour déclarer une valeur comme GLOBALE? Mettez là hors de la fonction comme ci-dessous. J'ai simplement déclaré la variable total avant la fonction. Si vous ne la déclarez pas par var, elle est aussi globale mais cette méthode pourrait poser de petits problèmes dans vos programmes.

<script>
var total;
function nombre(valeur)
{
var nombre=10;
valeur=parseInt(valeur);
total=nombre+valeur;
}
</script>
Bonjour
<script>
var nombre1;
nombre1=prompt('Entrez un nombre',0);
nombre(nombre1); // appel à la fonction
alert(total);
</script>

6. Renvoyer une valeur.

Une autre solution utilisée par ces fonctions est de renvoyer une pour plusieurs valeurs de résultats (la méthode de variable GLOBALE peut aussi le faire mais n'est pas du tout conseillée). Le retour d'une valeur à l'intérieur d'une fonction se fait par RETURN (qui arrête en même temps la fonction). Reprenons notre petit exemple ci-dessus avec des variables locales uniquement

< script>
function nombre(valeur)
{
var nombre=10;
valeur=parseInt(valeur);
var total= nombre+valeur;
return total;
}
</script>
Bonjour
< script>
var nombre1;
nombre1=prompt('Entrez un nombre',0);
var resultat=nombre(nombre1);
alert(resultat);
< /script>

En fin de fonction, return total va renvoyer la valeur de la variable total à la fonction qui l'appelle. Cette valeur est stockée dans la variable resultat (var resultat=nombre(nombre1)). Comme en PHP, le renvoi de plusieurs valeurs utilise une matrice.

7. Quelques "fonctions" sur les textes, en fait des propriétés.

Le but n'est pas de les voire toute (c'est une introduction au langage Javascript, pas un manuel complet), mais ... ces "fonctions" sont le plus souvent des propriétés de la chaîne: elles s'écrivent chaine.fonction

7.1. La longueur d'une chaîne: length

Ce n'est pas tout à fait une fonction que nous allons utiliser mais bien une propriété de la variable qui se définit par nom_variable.length. Remarquez que nous utilisons ici le résultat sur le document avec la fonction document.write. Nous en reparlerons avec les objet dans le chapitre 5.

var texte="longueur de texte";
document.write("Longueur de la chaine = " + texte.length);

7.2. Majuscule - minuscule.

Contrairement à d'autres langages, seules deux fonctions sont accessibles: toLowerCase() met toute la chaîne en minuscule, toUpperClass() met toute la chaîne en majuscule (les deux parenthèses sont obligatoires). Nous créerons une un peu plus bas une fonction qui mettra la première lettre en majuscule.

var texte="longueur dE texte";
document.write("Tout en minuscule = " + texte.toLowerCase());

// va effectivement donner longueur de texte

document.write("Tout en minuscule = " + texte.toUpperCase());

// va effectivement affiché LONGUEUR DE TEXTE

7.3. Récupérer un nombre de caractères dans une châine: substring(debut,nombre)

De nouveau utilisée comme propriété, cette commande reprend les caractères à partir du numéro de "début", (le premier caractère est le numéro 0) jusqu'au numéro de fin (non inclus)

var texte="Longueur dE texte";
document.write("Tout en minuscule = " + texte.substring(0,2));

Dans cet exemple, on récupère deux caractères à partir du 0.

Dans cette fonction, la dernière valeur peut-être omise et elle reprend jusqu'à la fin de la chaîne. Ca donne tout de suite des idées de conversions. Essayons ceci en ajoutant des propriétés entre-elles:.

var texte="longueur dE texte";
var texte1= texte.substring(0,1).toUpperCase();
var texte2= texte.substring(1).toLowerCase();
document.write(texte1 + texte2 );

Et oui, cette commande convertit bien la première lettre en majuscule et la suite en minuscule. La suivante (en plus courte) fait la même conversion sans conserver la valeur de départ de la chaîne.

texte=texte.substring(0,1).toUpperCase()+texte.substring(1).toLowerCase();
document.write(texte);

En débutant, c'est déjà pas si mal.

> 3. Fonctions conditionnelles et boucles

< 2. Bases de Javascript