Admin CliCours
Sommaire: Cours et tutoriels pour apprendre le JavaScript avec les astuces
Introduction
Notions Générales
Avant-propos
HTML-JAVASCRIPT
Insertion entre des balises spécifiques
Insertion dans la balise d’un élément
Balise spécifique : <NOSCRIPT>
Variables
Les Chaînes de caractères
Les nombres
Les booléens
Les fonctions
Les Objets
Classe
Méthode
Objets prédéfinis et classes prédéfinies
Objets du navigateur
Classe window
Classe navigator
Classe screen
Les Classes prédéfinies
String
Math
Date
Les Tableaux
Événements et nouveaux attributs des balises HTML
Quelques opérateurs
Opérateurs arithmétiques
Opérateurs d’affectation
Opérateurs de relation
Opérateurs binaires
Opérateurs logiques
Expression conditionnelle
Instructions conditionnelles
Instruction « for »
Instruction « while »
Définition d’un script
1. Script inséré par l’assistant
2. Script complet
3. Caractéristiques des procédures/fonctions
Syntaxe d’une procédure
Syntaxe d’une fonction
4. Exemple d’une fonction
5. Commentaires
Commandes javascript en bref
1. Insertion des propriétés de l’objet navigator
2. Code inséré par l’assistant
Code du script
3. Description
Méthode substring
Explication de la méthode
Détection de Netscape
4. Aide sur les références Javascript
Pour les utilisateurs d’Internet Exporer 5
Bannière
1. Bannière réalisée avec l’assistant
2. Étapes de réalisation avec l’assistant
3. Scripts et éléments insérés
a) Dans la section <HEAD>
b) Dans l’élément <BODY>
c) Endroit du curseur
4. Explication des éléments du script
5. Modifications des paramètres
6. Variantes
Barre de status
Type machine à écrire
Type glissement
Heure/Date
1. Insertion de la date du jour et de l’heure
2. Scripts et éléments insérés
a) Dans la section <HEAD>
b) Endroit du curseur (corps du document)
3. Explication des scripts
4. Modifications des paramètres
5. Variantes
Liste déroulante des URL
1. Listes déroulantes créées avec l’assistant
2. Étapes de réalisation avec l’assistant
3. Éléments insérés par l’assistant
a) Boîte liste à menu
b) Boîte liste
4. Explication
5. Modification des paramètres
6. Variante
7. Remarque
Texte en dégradé
1. Scripts insérés par l’assistant
a) Dans la section <HEAD>
b) Endroit du curseur
2. Explication des scripts
a) Créer un constructeur
b) Créer la fonction de conversion
c) La fonction degrade()
d) Affichage de la chaîne de caractères
3. Modifications des paramètres
Sélection d’images
1. Sélection d’images réalisée par l’assistant
2. Étapes de réalisation avec l’assistant
3. Scripts et éléments insérés avec l’assistant
a) Dans la section <HEAD>
b) À l’endroit du curseur
4. Explication des scripts
5. Modification des paramètres
6. Variante pour Internet Explorer
Images alternatives sur lien
1. Étapes de réalisation avec l’assistant
2. Exemple d’images alternatives sur lien
3. Script et élément insérés par l’assistant
a) Section <HEAD>
b) Endroit du curseur
4. Explication des éléments du script
(Particularité du script)
5. Modification des paramètres
6. Variante
Publicités rotatives
1. Publicités rotatives réalisées par l’assistant
2. Scripts et éléments insérés par l’assistant
a) Dans la section <HEAD>
b) Dans l’élément <BODY>
c) À l’endroit du curseur
3. Explication
Constructeur de tableau
Procédure AfficherPub()
4. Modification des paramètres
Bulle explicative
1. Bulle explicative réalisée avec l’assistant
2. Script et éléments insérés par l’assistant
a) Section <HEAD>
b) Endroit du curseur
3. Explication des éléments du script
4. Modification des paramètres
Valeurs hexadécimales des couleurs
5. Variante
Boîte de nouvelles
1. Boîte de nouvelles, réalisée avec l’assistant
2. Script et éléments insérés par l’assistant
a) Section <HEAD>
b) Élément <BODY>
c) Endroit du curseur
3. Explication
Attributs de la balise <TEXTAREA>
Étapes particulières
4. Modifications des paramètres
5. Variante
Flash de l’écran
1. Scripts insérés par l’assistant
a) Section <HEAD>
b) Corps du document
2. Explication des scripts
Constructeur de tableau
Tableau de conversion
Création des différentes couleurs intermédiaires
Traduction du nombre des couleurs
Attribution de la couleur du fond d’écran
3. Modification des paramètres
4. Astuces
Attribution d’un mot de passe
1. Attribution d’un mot de passe avec l’assistant
2. Script et éléments insérés par l’assistant
a) Section <HEAD>
b) Endroit du curseur
3. Explication du script
4. Modification des paramètres
5. Variante
Fenêtres
1. Étapes de réalisation avec l’assistant
2. Script inséré par l’assistant
3. Explication des éléments du script
Paramètres employés pour la méthode window.open()
4. Modification des paramètres
5. Variante
Javascripts supplémentaires
Annexe
Extrait du cours et tutoriels pour apprendre le JavaScript avec les astuces
Définition d’un script
Lorsque vous déciderez de créer le script d’une fonction dans une de vos pages HTML,WebExpert 2000 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…
1. Script inséré par l’assistant
<SCRIPT LANGUAGE= »JavaScript »>
<!– debut du script
function deplace(from,to) {
…code…
}
// Fin du script –>
</SCRIPT>
2. Script complet
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 :
<SCRIPT LANGUAGE= »JavaScript »>
<!– debut du script
/* Procédure qui effectue le déplacement */
function deplace(from,to) {
if (from < to) {
texte.top = (from += 10);
setTimeout(‘deplace(‘ + from + ‘,’ + to + ‘)’, 75);
}
}
// Fin du script –>
</SCRIPT>
Pour l’insertion de certaines propriétés ou méthodes Javascript, il vous est possible d’employer également un autre assistant de WebExpert 2000, à savoir celui des « Commandes de javascript en bref » que nous expliquerons dans la section qui lui est consacrée.
3. Caractéristiques des procédures/fonctions
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.
Syntaxe d’une procédure :
function nomdelaprocédure (paramètres1,…,paramètresN) {
code de la procédure
}
Syntaxe d’une fonction :
function nomdelafonction (paramètres1,…,paramètresN) {
code de la procédure
return (resultat)
}
4. Exemple d’une fonction :
<SCRIPT LANGUAGE= »JavaScript »>
<!– debut du script
function VeriEncodage (contenu)
{
if(contenu.length==0)
return (false)
else
return (true)
}
// Fin du script –>
</SCRIPT>
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.
5. Commentaires
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 2000, par exemple : <!–Fonction qui effectue le déplacement –>
………
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Cours et tutoriels pour apprendre le JavaScript avec les astuces (388 Ko) (Cours PDF)
