Le Javascript est un langage de script incorporé dans un document HTML. Histori
Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web. Ainsi le langage Javascript est fortement dépendant du navigateur appelant la page web dans laquelle le script est incorporée, mais en contrepartie il ne nécessite pas de compilateur, contrairement au langage Java, avec lequel il a longtemps été confondu. Il importe de savoir que Javascript est totalement différent de Java. Bien que les deux soient utilisés pour créer des pages Web évoluées, bien que les deux reprennent le terme Java (café en américain), nous avons là deux outils informatiques bien différents. Javascript Javascript va diviser cette page en objets et surtout va vous permettre d'accéder à ces objets, d'en retirer des informations et de les manipuler. Voyons d'abord une illustration des différents objets qu'une page peut contenir. Vous avez chargé la page suivante : Cette page s'affiche dans une fenêtre. C'est l'objet fenêtre. Dans cette fenêtre, il y a un document Html. C'est l'objet document. Autrement dit (et c'est là que l'on voit apparaître la notion de la hiérarchie des objets Javacript), l'objet fenêtre contient l'objet document. Dans ce document, on trouve un formulaire au sens Html. C'est l'objet formulaire. Autrement dit, l'objet fenêtre contient un objet document qui lui contient un objet formulaire. Dans ce document, on trouve trois objets. Des boutons radio, un bouton classique et une zone de texte. Ce sont respectivement l'objet radio, l'objet bouton, l'objet texte. Autrement dit l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour l'objet radio, l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour l'objet bouton et l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour l'objet texte. La hiérarchie des objets de cet exemple est donc radio Fenêtre document formulaire bouton texte Pour accéder à un objet (vous l'avez peut-être déjà deviné), il faudra donner le chemin complet de l'objet en allant du contenant le plus extérieur à l'objet à l'objet référencé. Soit par exemple pour le bouton radio "semaine" : (window).document.form.radio[0]. Nous avons mis l'objet window entre parenthèses car comme il occupe la première place dans la hiérarchie, il est repris par défaut par Javascript et devient donc facultatif. Et enfin pour les puristes, Javascript n'est pas à proprement parler un langage orienté objet tel que C++ ou Java. On dira plutôt que Javascript est un langage basé sur les objets. Parfois, un programmeur souhaite annoter le code qu'il vient d'écrire, mais sans que ces annotations n'interfèrent avec les instructions proprement dites. On appelle ces annotations des commentaires du programmes. Pour que l'interprète ne confonde pas ces caractères avec les instructions, (pour qu'il les ignore), on fait précéder un commentaire disposé en n de ligne par les deux barres obliques ( //) et on utilise /* et */ pour délimiter un commentaire sur plusieurs lignes. Voici un exemple de code commenté. Exemple /* test pour poser la bonne question */ if (reduc && vieux) { // a une reduction et est vieille document.write("Voulez que quelqu'un vous accompagne ?"); } typé. Ceci ne veut pas dire qu'il est capable d'eectuer l'instruction 1+"bonjour", mais qu'il n'impose pas au programmeur d'indiquer explicitement le type d'une variable lors de la déclaration de celle-ci. Exemples de déclaration var texte; var cle; var compteur = 3; var Erreur = "Connexion perdue."; var Erreur2 = 'Pas assez de mémoire'; Opérations Expressions total += 4; total = total + 4; i++; i = i + 1; et Java existent en JavaScript. Nous ne donnerons que quelques exemples ici, et nous découvrirons ces expressions au l de ce document. Voici quelques exemples, les instructions sur la même ligne ayant la même signication. La boucle for La boucle est introduite par le mot-clé for. Pour acher nos cinquante premiers entiers, nous pouvons écrire une boucle qui nous permet de réduire le texte de programme à trois lignes (au lieu de cent). Cette boucle utilise la variable i qui vaut 1 initialement. Ensuite le corps de la boucle, c'est-à-dire les instructions à l'intérieur des crochets ( { et }) est exécuté tant que la condition i<=50 est vraie. A chaque tour de boucle, on incrémente la variable i. for (i=1; i<=50; i++) { document.writeln(i); } La boucle while Une autre structure itérative plus simple est la boucle while. Celle-ci dit simplement qu'on doit répéter un ensemble d'instructions tant qu'une condition est vraie. while (condition){ instructions } Exemple : var recommence = true; while (recommence) { m = calc_moyenne(); recommence=prompt("La moyenne est " + m + ".Recommencer ?"); } Notons qu'il est important d'initialiser la variable recommence à la valeur vraie an d'entrer dans la boucle la première fois. L'alternative condition est vraie. Le type de la condition est booléen (la condition est soit vraie soit fausse). La structure est la suivante : if (condition1){ instructions1 }[ else { instructions2 }] Exemple : on peut simplement tester la valeur d'une variable, comme dans l'exemple suivant. if (i==50) { document.writeln("i est égal à 50") } else { document.writeln("i n'est pas égal à 50") } De même que la boucle permet de répéter plusieurs instructions, la fonction est très utile pour accomplir une tâche répétitive. Le principe consiste à regrouper dans un bloc un ensemble d'instructions nécessaire pour accomplir une tâche, à nommer ce bloc, et à l'appeler à chaque fois qu'on a besoin d'eectuer la tâche. La définition d'une fonction est introduite par le mot clé function suivi de ses arguments, puis du code de la fonction entre accolades ( {}). Le résultat de la fonction est indiqué par le mot-clé return. Par exemple, ci-dessous est dénie la fonction carre qui rend le carré de son argument. <script language="javascript"> function carre(i) { return (i*i) } </script> Notons que rien ne se passe si on charge seulement la page contenant ce script. Il faut en eet appeler la fonction avec un argument eectif pour que l'évaluation se fasse. Pour cela, on pourra par exemple ajouter après le code de la fonction, un appel à cette fonction : <script language="javascript"> document.write("La fonction a retourné ",carre(4),".") </script> Pour appeler la fonction, il faut bien sûr qu'elle ait été dénie auparavant. Par conséquent, il est conseillé de placer la dénition de fonction dans l'entête de la page HTML, et les appels dans le corps de cette page. Pour notre exemple, la page HTML a donc la structure suivante : Exemple 1 : <HEAD> <script language="javascript"> function carre(i) { document.write("on a appelé carre avec l'argument ",i ,"<br>") return i * i } </script> </HEAD> <BODY> <script language="javascript"> document.write("La fonction a retourné ",carre(4),".") </script> </BODY> Exemple 2 : <SCRIPT language="Javascript"> <!--var a = 12;var b = 4;function MultipliePar2(b) { var a = b * 2; return a;} document.write("Le double de ",b," est ",MultipliePar2(b)); document.write("La valeur de a est ",a);// --> </SCRIPT> Dans l'exemple ci-dessus, la variable a est déclarée explicitement en début de script, ainsi que dans la fonction. Voici ce qu'affiche ce script : Le double de 4 est 8 La valeur de a est 12 Exemple 3 : Voici un autre exemple dans lequel a est déclarée implicitement dans la fonction : <SCRIPT language="Javascript"> <!--var a = 12;var b = 4;function MultipliePar2(b) { a = b * 2; return a;} document.write("Le double de ",b," est ",MultipliePar2(b)); document.write("La valeur de a est ",a);// --> </SCRIPT> L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une même variable. Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une variable, car cette opération aurait été compliquée (mais possible) avec des if imbriqués. Sa syntaxe est la suivante : switch (Variable) { case Valeur1: Liste d'instructions; break; case Valeur2: Liste d'instructions; break; case ValeurX: Liste d'instructions; break; default: Liste d'instructions; break;} La méthode write() de l'objet document permet de modifier de façon dynamique le contenu d'une page HTML. Voici la syntaxe de la méthode write() : window.document.write(expression1, expression2, ...) Cette méthode permet d'écrire le résultat des expressions passées en paramètre dans le document dans lequel elle est utilisée Il est notamment possible d'utiliser des balises HTML à l'intérieur même de la méthode write : document.write('<font color="#FF0000">Bonjour</font>'); La méthode writeln() fonctionne exactement comme la méthode write() à la seule différence qu'elle ajoute un retour chariot à la fin de la chaîne. Or un retour chariot (en HTML) est ignoré par le navigateur (Rappel: un retour à la ligne se fait avec la balise <BR>). Cette méthode n'a donc un avantage que lorsqu'elle est utilisée dans des éléments HTML sensibles aux retours à la ligne, par exemple entre les balises <PRE> et </PRE> qui formattent le texte comme dans un fichier texte (et qui uploads/s1/ coursjavascript-id1818 1 .pdf
Documents similaires
-
37
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Sep 13, 2021
- Catégorie Administration
- Langue French
- Taille du fichier 1.3380MB