Lorsque vous déciderez de créer le script d'une fonction dans une de vos pages HTML, WebExpert 5 vous permettra, par cet assistant, d'incorporer les premiers codes nécessaires à la programmation de votre fonction.
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
Quand l'assistant à inséré les codes de la procédure désirée, vous devez incorporer le contenu réel du code de la fonction ou de la procédure. Par exemple :
Il sera très fréquent d'utiliser plusieurs fonctions et/ou procédures dans vos pages, et c'est pourquoi l'assistant vous propose d'insérer celle-ci soit dans l'en-tête du document (conseillé) soit à la position de votre curseur, dans le cas où c'est nécessaire. Ce choix s'effectue par la case à cocher "Insertion de la nouvelle fonction dans la tête du document".
La procédure prise pour exemple est expliquée en détail dans TutorDHTML, section "DHTML" et a pour effet d'effectuer un déplacement de texte, du haut vers le bas : elle ne sera donc pas expliquée en détail ici.
Pour l'insertion de certaines propriétés ou méthodes Javascript, il vous est possible d'employer également un autre assistant de WebExpert
5, à savoir celui des "Commandes de javascript en bref"
que nous expliquerons dans la section qui lui est consacrée.
Vous allez créer dans votre code des fonctions proprement dite ou des procédures. Leur différence se situe dans le fait qu'une fonction est un sous-programme (procédure) particulier qui a pour caractéristique de renvoyer une valeur, tandis qu'une procédure normale ne le fait pas toujours. Ce renvoi se fait par le mot-clé : return.
function nomdelaprocédure (paramètres1,...,paramètresN) {
code de la procédure
}
function nomdelafonction (paramètres1,...,paramètresN) {
code de la procédure
return (resultat)
}
Cette fonction retourne la valeur "false" lorsque le contenu (d'une zone de saisie) est vide (longueur nulle) et la valeur "true" dans les autres cas : la propriété "length" donne la longueur de la chaîne de caractères, "return ()" donne la valeur "false" ou "true"à la fonction VeriEncodage. Vous pouvez ensuite employer cette valeur pour la suite d'une autre fonction. Un petit exemple (veri.html) de ce type vous est proposé en Annexe : l'utilisateur doit encoder son âge pour remplir un formulaire, s'il n'encode rien, ou un caractère autre qu'un chiffre, la fonction VeriEncodage() renverra false. Ensuite, il sera fait une vérification de l'âge minimum (18 ans) pour faire apparaître le formulaire.
Pour attribuer la valeur d'une zone de saisie (INPUT) à une fonction, vous employez le mot-clé "this", par exemple :
Ensuite, une accolade d'ouverture ( { ) et de fermeture ( } ) doivent englober l'ensemble des instructions. Si vous imbriquer d'autres expressions qui emploient également des accolades (if...), faites attention de ne pas omettre celle qui termine la fonction ou procédure (sinon, il y aura une erreur de script) : cela arrive souvent... Si vous employez l'assistant "définition d'un script", ces deux accolades sont automatiquement insérées.
Il est très intéressant de placer des commentaires dans le code, car après un certain temps, on peut avoir oublié le rôle de telle ou telle fonction ou partie de code.
Pour rappel, vous avez plusieurs possiblités de syntaxe :
Les caractères " // " insèrent un commentaire jusqu'à la fin de la ligne courante.
En début de commentaire ( /*) et en fin de commentaire (*/) : plusieurs lignes de commentaires peuvent être insérées.( /*Fonction qui effectue le déplacement */)
En sélectionnant tout votre commentaire et en cliquant sur le bouton "Commentaire" de l'onglet "Communs" de WebExpert 5, par exemple : <!--Fonction qui effectue le déplacement -->
Exemples équivalents :
function deplace(from,to) // Fonction qui effectue le déplacement
function deplace(from,to) /* Fonction qui effectue le déplacement
*/
function deplace(from,to) /* Fonction qui effectue
le déplacement */
function deplace(from,to) <!--Fonction qui effectue le déplacement
-->
function deplace(from,to) <!--Fonction qui effectue
// le déplacement -->