This page has been robot translated, sorry for typos if any. Original content here.

Partie 1: Premiers pas

Qu'est-ce que JavaScript?

JavaScript est un nouvel outil de script développé par Netscape. avec JavaScript, vous pouvez facilement créer des pages Web interactives. Dans ce tutoriel, vous verrez ce que vous pouvez faire avec JavaScript, et plus encore - voyez comment c'est fait.

JavaScript n'est pas Java du tout!

Beaucoup de gens croient que JavaScript est le même que Java, juste parce que ces langages ont des noms similaires. Dans la classe elle-même, ce n'est pas le cas. Je crois que maintenant il sera inutile de vous illustrer toutes les différences entre ces langues - alors rappelez-vous seulement que JavaScript n'est pas Java.
Pour plus d'informations sur le sujet, veuillez vous reporter à l'introduction publiée sur le site web de Netscape Souris heureux

Démarrer JavaScript

Que dois-je faire pour exécuter des scripts écrits en JavaScript? Vous aurez besoin d'un navigateur qui a du talent pour travailler avec JavaScript - par exemple Netscape Navigator (depuis la version 2.0) ou Microsoft Internet Explorer (MSIE - depuis la version 3.0). Depuis que ces deux navigateurs sont devenus répandus, beaucoup de gens ont été capables de travailler avec des scripts écrits en JavaScript. Sans aucun doute, c'est un argument important en faveur du choix du langage JavaScript comme moyen d'améliorer vos pages Web.
Bien sûr, avant de lire ce guide, vous devriez vous familiariser avec les bases d'une autre langue - HTML. Dans ce cas, vous trouverez peut-être que de nombreux bons outils de dialogue peuvent être créés en utilisant uniquement des commandes HTML. Pour obtenir plus d'informations sur le langage HTML, il est préférable d'effectuer une recherche sur le mot-clé "html" sur le serveur de recherche Yahoo.

Placer du JavaScript sur une page HTML

Le code de script JavaScript est placé directement sur la page HTML. Pour voir comment cela est fait, regardons l'exemple non sophistiqué suivant:
<html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> Dans l'affichage principal, l'exemple invite un fichier HTML normal. La seule innovation ici est le système:
<script language="JavaScript"> document.write("А это JavaScript!") </script> C'est du vrai code JavaScript. Pour voir comment fonctionne ce script, écrivez cet exemple en tant que fichier HTML normal et chargez-le dans un navigateur prenant en charge JavaScript.
Et c'est le résultat de l'exécution de ce fichier (si vous utilisez un navigateur avec le support JavaScript, alors vous aurez 3 lignes):

C'est un document HTML normal.

Encore une fois l'acte de HTML.

Je dois admettre que ce script n'est pas très utile - la même chose pourrait aussi être écrite plus simplement dans un langage HTML "pur". Je voulais juste vous montrer une balise <script>. Tout ce qui se trouve entre les balises <script> </ script> est également interprété comme du code JavaScript. Ici, vous regardez de la même manière le modèle d'utilisation de l'instruction document.write () - l'une des commandes les plus importantes utilisées dans la programmation en JavaScript. La commande document.write () est utilisée, à quel moment il est nécessaire d'écrire quelque chose dans l'acte en cours (dans ce cas, c'est notre document HTML). Donc, notre petit programme JavaScript dans un document HTML dit "Ceci est JavaScript!" .

Navigateurs sans support JavaScript

Et à quoi ressemblera notre page si le navigateur ne perçoit pas JavaScript de quelque façon que ce soit? Les navigateurs qui ne supportent pas JavaScript ne connaissent pas non plus la balise <script>. Ils l'ignorent et impriment aussi tous les codes qui le suivent en texte clair. En d'autres termes, le lecteur verra comment le code JavaScript donné dans notre programme sera écrit en texte clair directement au milieu du document HTML. Bien sûr, cela n'a pas été inclus dans nos plans. Dans cette aventure, il existe un outil spécialisé pour cacher le code source du script à partir d'anciennes versions de navigateurs - nous utiliserons un tag de commentaire HTML - <! - -> pour cela . Par conséquent, la nouvelle variation de notre code source ressemblera à <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> : <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> Dans ce cas, le navigateur sans support JavaScript commencera à imprimer: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. Et sans balise de commentaire HTML, un navigateur sans support JavaScript afficherait: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Notez que vous ne pouvez pas masquer complètement le code source JavaScript. Ce que nous faisons ici a pour but d'empêcher l'impression du code du script sur les anciens navigateurs - mais dans tous les cas, le lecteur pourra voir ce code via l'option de menu 'Afficher la source du document'. Il n'y a pas de manière similaire de cacher quelque chose à voir dans votre code source (et de voir comment ceci ou cela est fait).

Événements

Les événements et les gestionnaires d'événements sont une partie très importante de la programmation JavaScript. Les événements, d'une part, sont initiés par l'une ou l'autre des actions de l'utilisateur. S'il clique sur un bouton, l'événement "Click" se produit . Si le pointeur de la souris croise un lien hypertexte, l'événement MouseOver se produit . Il existe plusieurs types d'événements.
Nous pouvons forcer notre programme JavaScript à répondre à certains d'entre eux. En outre, cela peut être fait avec l'aide de programmes spéciaux pour la finition des événements. Ainsi, en cliquant sur le bouton, une fenêtre contextuelle peut être créée. Cela signifie que la création de la fenêtre doit être une réaction à l'événement Click . Le gestionnaire d'événements, que nous devons utiliser dans ce cas, s'appelle onClick . En outre, il indique à l'ordinateur ce qu'il faut faire si l'événement se produit. Le code suivant représente un exemple simple du programme d'achèvement d' événement onClick : <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Cet exemple a plusieurs nouvelles fonctionnalités - considérez-les dans l'ordre. Vous pouvez observer ici que nous créons un formulaire avec un bouton (comment cela fonctionne - le problème du langage HTML, donc nous ne le considérerons pas ici). La première nouvelle fonctionnalité est onClick = "alert ('Yo')" dans la balise <input>. Comme nous l'avons déjà dit, cette propriété détermine ce qui se passe lorsque le bouton est enfoncé. Ainsi, si l'événement Click est la propriété, l'ordinateur est forcé d'effectuer un appel d' alerte ('Yo') . C'est aussi un exemple de code en JavaScript (Notez que dans ce cas nous n'utilisons même pas la balise <script>).
La fonction alert () vous permet de créer des listes déroulantes. Lorsque vous l'appelez, vous devez spécifier une chaîne entre parenthèses. Dans notre cas, c'est 'Yo' . De plus, c'est ainsi que le texte apparaîtra un jour, qui apparaîtra dans la liste déroulante. Ainsi, à quel moment le lecteur à quelle heure le bouton est cliqué, notre script crée une fenêtre contenant le texte 'Yo' .
Une certaine confusion peut être causée par une autre particularité de cet exemple: dans la commande document.write () nous avons utilisé des guillemets doubles ("), seuls les systèmes alert () sont uniques.) Dans la plupart des cas, vous pouvez utiliser les deux guillemets. nous avons écrit onClick = "alert ('Yo')" - c'est-à-dire, nous avons également utilisé des guillemets, aussi des guillemets simples. Nous écririons onClick = "alert (" Yo ")" , l'ordinateur ne pouvait pas comprendre notre script, car il devient difficile de savoir lequel des éléments du système la relation de la fonction OnClick événements que vous n'avez pas, donc vous devez également entrelacer les deux types de citations dans ce cas.Il ne sait pas le sens de l'ordre dans lequel vous avez utilisé les guillemets - d'abord double, seulement alors unique, ou vice versa.C'est, vous pouvez simplement écrire aussi onClick = 'alert ("Yo")' .

Vous pouvez utiliser plusieurs types de fin d'événement dans le script. Des informations sur certains d'entre eux que nous obtenons dans cette description, mais pas tous. Par conséquent, veuillez vous reporter au répertoire approprié si vous voulez savoir quels gestionnaires d'événements existent encore.

Ainsi, si vous utilisez le navigateur Netscape Navigator, la zone de liste déroulante contient le texte qui a été transmis à la fonction d' alerte JavaScript . Une telle restriction est superposée pour des raisons de sécurité. Vous pouvez également créer la même zone de liste déroulante à l'aide de la méthode prompt (). Pourtant, dans ce cas, la fenêtre commencera à reproduire le texte entré par le lecteur. Par conséquent, un script écrit par un attaquant peut prendre la forme d'un message système et demander au lecteur d'entrer un mot de passe. Et si le texte s'inscrit dans la liste déroulante, le lecteur se rend compte que cette fenêtre a été créée par un navigateur Web, mais pas par votre système d'exploitation. De plus, comme cette restriction est imposée pour des raisons de sécurité, vous ne pouvez pas simplement prendre le message qui est apparu.

Fonctions

Dans la plupart de nos programmes JavaScript, nous utiliserons des fonctions. Par conséquent, maintenant je dois parler de cet élément important de la langue.
Dans la plupart des cas, les fonctions sont simplement un moyen de lier plusieurs commandes ensemble. Donnons à l'exemple un script qui imprime un certain texte trois fois de suite. Pour la source, adoptons une approche simple: <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> Et un tel script écrira le texte suivant Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! trois fois. Si vous regardez le code source du script, vous pouvez voir que pour obtenir le résultat souhaité, une certaine proportion de son code a été répétée trois fois. Est-ce efficace? Non, nous pouvons encore mieux résoudre le même problème. Que diriez-vous de ce script pour résoudre le même problème?: <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> Dans ce script, nous avons défini une fonction composée des lignes suivantes: function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } Toutes les commandes de script à l'intérieur des accolades - {} - appartiennent à la fonction myFunction () . Cela signifie que les deux commandes document.write () sont maintenant liées entre elles et peuvent également être exécutées lorsque la fonction spécifiée est appelée. En outre, en effet, notre exemple a trois appels à cette fonction - Vous pouvez voir que nous avons écrit la chaîne myFunction () trois fois à la fois après la définition de la fonction elle-même. C'est, une fois qu'ils ont également fait trois appels. À son tour, cela signifie que le contenu de cette fonction (les commandes indiquées entre accolades) a été exécuté trois fois.
Comme c'est un exemple assez simple d'utilisation de la fonction, vous pourriez avoir un problème, mais pourquoi exactement ces fonctions sont si importantes en JavaScript. Après avoir lu cette description, vous comprendrez sans doute leur utilité. C'est la capacité de passer des variables lors de l'appel d'une fonction qui donne à nos scripts une réelle flexibilité - ce que c'est, nous verrons plus tard.

Les fonctions peuvent également être utilisées conjointement avec les procédures de finition d'événement. Considérons l'exemple suivant: <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> Ici vous pouvez tester cet exemple:

Ici, lorsque le bouton est enfoncé, la fonction calculation () est appelée. Comme vous pouvez le voir, cette fonction effectue quelques calculs, en utilisant les variables x , y, résultat également. Nous pouvons définir une variable en utilisant le mot clé var . Les variables peuvent être utilisées pour stocker différentes quantités - nombres, lignes de texte, etc. Donc la ligne de script var result = x + y; indique au navigateur qu'il est nécessaire de créer la variable de résultat et de mettre le résultat de l'opération arithmétique x + y (c'est-à-dire 5 + 12) là. Après cela, la quantité 17 sera placée dans le résultat variable. Dans ce cas, la commande alert (result) fait la même chose que alert (17) . En d'autres termes, nous obtenons une liste déroulante dans laquelle la quantité 17 est écrite.