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

Partie 1: Premières étapes

Qu'est-ce que javascript?

JavaScript est un nouveau langage de script développé par Netscape. Avec JavaScript, vous pouvez facilement créer des pages Web interactives. Dans ce guide, vous verrez ce qu’il est possible de faire avec JavaScript et plus encore: voyez comment cela se fait.

JavaScript n'est pas Java!

Beaucoup de gens pensent que JavaScript est la même chose que Java, simplement parce que ces langages ont des noms similaires. En pratique, ce n'est pas le cas. Je pense qu’à présent, il deviendra inutile de vous illustrer toutes les différences entre ces langages - souvenez-vous donc que JavaScript n’est pas Java.
Pour plus d'informations sur le sujet, reportez-vous à l'introduction publiée sur le site Web de Netscape. Sourire heureux

Lancer javascript

Que faut-il faire pour exécuter des scripts écrits en JavaScript? Vous aurez besoin d’un navigateur de talent pour utiliser JavaScript - par exemple, Netscape Navigator (à partir de la version 2.0) ou Microsoft Internet Explorer (MSIE - à partir de la version 3.0). Depuis que ces deux navigateurs se sont généralisés, beaucoup de personnes ont été capables de travailler avec des scripts écrits en JavaScript. Nul doute que c’est un argument important en faveur du choix du langage JavaScript comme moyen d’améliorer vos pages Web.
Bien entendu, avant de lire ce guide, vous devez vous familiariser avec les bases d'un autre langage - HTML. Dans ce cas, vous pouvez trouver que de nombreux bons moyens de dialogue peuvent être créés en utilisant uniquement les commandes HTML. Pour en savoir plus sur le HTML, il est préférable de lancer 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, examinons 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> En bref, l'exemple suggère un fichier HTML standard. La seule innovation ici est le système:
<script language="JavaScript"> document.write("А это JavaScript!") </script> Ceci est du code JavaScript vrai. Pour voir comment ce script fonctionne, écrivez cet exemple sous forme de fichier HTML normal et chargez-le également dans un navigateur prenant en charge le langage JavaScript.
Et ceci est le résultat de l'exécution de ce fichier (si vous utilisez un navigateur qui prend en charge JavaScript, vous obtiendrez 3 lignes):

Ceci est un document HTML classique.

Encore la loi HTML.

Je dois admettre que ce script n'est d'aucune utilité - la même chose pourrait aussi être plus simplement écrite en HTML pur. Je voulais juste vous montrer le tag tag <script>. Tout ce qui se trouve entre les balises <script> et </ script> est également interprété comme du code JavaScript. Vous voyez ici un schéma d'utilisation de l'instruction document.write () , l'une des commandes les plus importantes utilisées dans la programmation JavaScript. La commande document.write () est utilisée, à quel moment il est nécessaire d'écrire quelque chose dans l'acte actuel (dans ce cas, il s'agit de notre document HTML). Donc, notre petit programme JavaScript dans un document HTML écrit la phrase "Et c'est du JavaScript!" .

Navigateurs non javascript

Et à quoi ressemblera notre page si le navigateur n'accepte pas le JavaScript? Les navigateurs qui ne prennent pas en charge javascript ne connaissent pas non plus la balise <script>. Ils l'ignorent et impriment également tous les codes qui le suivent sous forme de texte brut. En d'autres termes, le lecteur verra comment le code JavaScript fourni dans notre programme sera écrit en texte brut au milieu du document HTML. Bien sûr, cela n’est pas entré dans nos intentions. Dans cette aventure, il existe un outil spécialisé pour masquer le code source du script aux anciennes versions des navigateurs - nous allons utiliser pour cette balise de commentaire HTML - <! - -> . En conséquence, la nouvelle variante 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 prise en charge de JavaScript imprimera: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. Sans la balise de commentaire HTML, un navigateur sans prise en charge de JavaScript imprimerait: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Veuillez noter que vous ne pouvez pas complètement masquer le code source JavaScript. Ce que nous faisons ici a pour objectif d'empêcher l'impression du code de script sur les anciens navigateurs - mais rien de moins qu'un lecteur peut voir ce code dans le menu "Afficher la source du document". Il n'y a pas de moyen similaire pour empêcher l'affichage de quelque chose dans votre code source (et voir comment telle ou telle astuce est faite).

Événements

Les événements, ainsi que les gestionnaires d'événements, jouent un rôle très important dans la programmation en langage JavaScript. Les événements, dans un premier temps, sont déclenchés par toutes les actions de l'utilisateur. S'il clique sur un bouton, l'événement "Clic" se produit . Si le pointeur de la souris croise un lien hypertexte, l'événement MouseOver en résulte . Il existe plusieurs types d'événements.
Nous pouvons faire en sorte que notre programme JavaScript réponde à certains d'entre eux. De plus, cela peut être fait en utilisant des programmes de décoration d'événements spéciaux. Ainsi, en cliquant sur un bouton, une fenêtre contextuelle peut être créée. Cela signifie que la création de la fenêtre doit être une réponse à l'événement click. Un programme de gestionnaire d'événements que nous devrions utiliser dans ce cas s'appelle onClick . En outre, il indique à l'ordinateur quoi faire si cet événement se produit. Le code ci-dessous représente un exemple simple du programme d' événements onClick : <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Cet exemple présente plusieurs nouvelles fonctionnalités. Prenez-les en compte dans les délais. Vous pouvez observer ici que nous créons un formulaire avec un bouton (comment agir est un problème HTML, nous ne le considérerons donc pas ici). La première nouvelle fonctionnalité est onClick = "alert ('Yo')" dans la balise <input>. Comme nous l'avons dit, cette propriété détermine ce qui se passe à quelle heure le bouton est enfoncé. Ainsi, si l'événement Click est propriétaire des locaux, l'ordinateur est obligé d'émettre un appel d' alerte ('Yo') . C’est aussi un exemple de code JavaScript (dans ce cas, nous n’utilisons même pas la balise <script>).
La fonction alert () vous permet de créer des fenêtres déroulantes. Lors de l'appel, vous devez spécifier une chaîne entre crochets. Dans notre cas, c'est "Yo" . De plus, comme une fois, ce sera le texte qui apparaît dans la liste déroulante. Ainsi, à quelle heure le lecteur à quelle heure clique sur le bouton, notre script crée une fenêtre contenant le texte 'Yo' .
Une autre caractéristique de cet exemple peut prêter à confusion: dans la commande document.write (), nous utilisions des guillemets doubles ("), mais uniquement dans les systèmes alert () - des guillemets simples. Pourquoi? Dans la plupart des cas, vous pouvez utiliser les deux types de guillemets. Néanmoins onClick = "alert ('Yo')" , c'est-à-dire que nous avons également utilisé des guillemets doubles et des guillemets simples. Si nous écrivions onClick = "alert (" Yo ")" , l'ordinateur ne pouvait pas comprendre notre script, car il est difficile de savoir à quel élément du système la relation entre Il n'y a pas d'événement onClick pour lequel seulement - vous devez donc également entrelacer les deux types de guillemets. également onClick = 'alert ("Yo")' .

Vous pouvez utiliser différents types de fonctions de décoration d'événements dans le script. Des informations sur certaines d’entre elles figurent dans cette description, mais pas sur toutes. Par conséquent, veuillez contacter le livre de référence approprié si vous souhaitez savoir quels gestionnaires d'événements existent encore.

Par conséquent, si vous utilisez le navigateur Netscape Navigator, le menu déroulant contient le texte transmis à la fonction d’ alerte JavaScript . Cette restriction est imposée pour des raisons de sécurité. Vous pouvez également créer la même fenêtre contextuelle à l'aide de la méthode prompt (). Néanmoins, dans ce cas, la fenêtre commencera à reproduire le texte saisi par le lecteur. Par conséquent, un script écrit par un attaquant peut prendre la forme d'un message système et également demander au lecteur de saisir un certain mot de passe. Et si le texte tient dans la fenêtre contextuelle, le lecteur doit alors se rendre compte que cette fenêtre a été créée par un navigateur Web, mais pas par votre système d'exploitation. De plus, étant donné que cette restriction est imposée pour des raisons de sécurité, vous ne pouvez pas vous contenter de supprimer le message qui apparaît.

Fonctions

Dans la plupart de nos programmes JavaScript, nous utiliserons des fonctions. Par conséquent, je dois maintenant parler de cet élément important de la langue.
Dans la plupart des cas, les fonctions ne sont qu'un moyen de relier plusieurs commandes. Pour l'exemple, écrivons un script qui imprime du texte trois fois de suite. Pour la source, considérez l'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 quantité de son code a été répétée trois fois. Est-ce vraiment efficace? Non, nous pouvons résoudre le même problème encore mieux. Que diriez-vous d’un tel 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 entre accolades - {} - appartiennent à la fonction myFunction () . Cela signifie que les deux commandes document.write () qui sont maintenant liées peuvent également être exécutées lorsque la fonction spécifiée est appelée. En outre, notre exemple contient trois appels à cette fonction. Vous pouvez constater que nous avons écrit la chaîne myFunction () trois fois après la définition de la fonction elle-même. C’est ainsi qu’une fois, j’ai aussi 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 il s'agit d'un exemple assez simple d'utilisation d'une fonction, vous pourriez avoir un problème, juste pourquoi les fonctions elles-mêmes sont si importantes en JavaScript. Après avoir lu cette description, vous comprendrez sans aucun doute leurs avantages. C’est la possibilité de transférer des variables lorsqu’on appelle une fonction, ce qui donne à nos scripts une réelle souplesse. Ce que nous sommes, nous le verrons plus tard.

Les fonctions peuvent être utilisées de la même manière avec les fins d'événement. Prenons 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, appuyer sur le bouton appelle la fonction de calcul () . Comme vous pouvez le constater, cette fonction effectue des calculs en utilisant les variables x , y et result . Nous pouvons définir une variable en utilisant le mot clé var . Les variables peuvent être utilisées pour stocker diverses valeurs - 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 pour y placer également le résultat de l'opération arithmétique x + y (c'est-à-dire 5 + 12). Après cela, le nombre 17 sera placé dans la variable de résultat . Dans ce cas, la commande alert (result) fait la même chose que alert (17) . En d'autres termes, nous acquérons une liste déroulante dans laquelle le numéro 17 est écrit.