Partie 1: Premiers pas

Qu'est - ce que JavaScript

JavaScript - nouvellement voix pour compiler des scripts, développé par Netscape. en utilisant JavaScript, vous pouvez facilement créer interactive Web-page. Dans ce guide, vous pourrez voir ce qui peut être fait avec l'aide du JavaScript, et plus encore - voir comment il est fait.

JavaScript - n'est pas Java!

Beaucoup de gens croient que JavaScript - c'est la même chose, ainsi que le Java, mais seulement parce que ces langues ont des noms similaires. En fait, l'occupation est pas. Je pense que maintenant serait superflu de vous illustrer toutes les différences entre les deux langues - donc rappelez-vous que tout ce que le JavaScript - ce n'est pas Java.
Pour plus d'informations sur le sujet concerné, s'il vous plaît se référer à l'introduction d'une publication sur le site Netscape Sourire heureux

Exécuter JavaScript

Ce que vous devez faire pour exécuter des scripts écrits en JavaScript? Vous aurez besoin d'un navigateur pour travailler avec le talentueux JavaScript - comme Netscape Navigator (depuis la version 2.0) ou Microsoft Internet Explorer (MSIE - depuis la version 3.0). Comme ces deux navigateurs sont largement répandues, beaucoup de gens ont été en mesure de travailler avec des scripts écrits en JavaScript. Sans aucun doute, ceci est un argument important au profit de l'élection JavaScript, comme un moyen d'améliorer votre web-pages.
Bien sûr, avant de lire ce guide, vous devriez apprendre les rudiments d'une langue - HTML. Dans ce cas, vous pouvez constater que beaucoup de bons moyens de dialogue peuvent être créés en utilisant uniquement les commandes HTML seulement. Pour plus d'informations sur le langage HTML, il est préférable de lancer une recherche par mot clé pour 'html' dans le Yahoo moteur de recherche.

Mise sur JavaScript page HTML

JavaScript code de script razmeschetsya directement sur la page HTML. Pour voir comment cela se fait, nous allons suivre l'exemple simple d'esprit:
<html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> > document.write ( " <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <br> <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> De la vue principale de l'échantillon suggère un fichier HTML normal. La seule nouveauté ici - le système:
<script language="JavaScript"> document.write("А это JavaScript!") </script> document.write ( " <script language="JavaScript"> document.write("А это JavaScript!") </script> Ce code JavaScript est vrai. Pour observer comment ce script fonctionne, écrivez ce modèle comme un fichier HTML normal et le télécharger sur le navigateur, qui a le soutien du langage JavaScript.
Et ceci est le résultat de ce fichier (si vous utilisez un navigateur qui supporte JavaScript, vous serez alors 3 lignes):

Ceci est un document HTML normal.

Encore une fois, l'acte de HTML.

Je dois admettre que ce script est pas si utile - le même que plus que l'on peut laisser un "pur" langage HTML. Je voulais simplement montrer que vous venez de marquer balise <script>. Tout ce qui se trouve entre les balises <script> et </ script>, est interprété comme un code en JavaScript. Ici , vous voyez un échantillon d'instructions semblables en utilisant document.write () - l' une des commandes les plus importantes utilisées dans le langage de programmation JavaScript. commande document.write () est utilisée à quel moment vous avez besoin d'écrire quelque chose dans la loi actuelle (dans ce cas, ceci est notre document HTML). Donc , notre petit JavaScript-programme en document HTML, griffonnant les mots «Ce JavaScript!" .

Browsers sans support JavaScript

Et comment notre page ressemblera si le navigateur n'accepte pas JavaScript? Browsers, ne supporte pas JavaScript, «ne sait pas», comme la balise <script>. Ils l'ignorent et imprimer tous les codes en texte brut debout derrière lui. En d'autres termes, le lecteur verra comment le code JavaScript dans notre programme sera inscrit dans le texte brut directement dans le milieu du document HTML. Bien sûr, il ne vient pas dans notre plan. Cette aventure a un outil spécialisé pour cacher le code source du script de navigateurs plus anciens - nous allons utiliser pour cette balise de commentaire de 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> > <! - cacher les vieux navigateurs document.write ( " <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> / script> <br> <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 imprimer: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. une Это обычный HTML документ. Опять акт HTML. Sans le commentaire HTML navigateur tag sans support JavaScript publiée: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. une Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. S'il vous plaît noter que vous ne pouvez pas cacher complètement le code source JavaScript. Ce que nous faisons ici, il doit empêcher l'inscription du code de script dans les vieux navigateurs - mais elle au moins le lecteur peut voir ce code au moyen du menu «source de document de View 'article. Il n'y a pas de façon similaire à cacher quoi que ce soit d'afficher votre code source (et voir comment il a fait une autre astuce).

événements

Événements et gestionnaires d'événements sont une partie très importante de la programmation en JavaScript. Événements, la première manière, initiée par l'utilisateur ou d'autres actions. S'il clique sur un bouton, les tiges événement "Click". Si le pointeur de la souris traverse tout lien hypertexte - tiges événement MouseOver. Il existe plusieurs types d'événements.
Nous pouvons faire notre JavaScript-programme, la réponse à certains d'entre eux. En outre, ceci peut être réalisé par des finitions particulières d'événement de programme. Par exemple, une fenêtre peut être créée à la suite de cliquer sur le bouton. Cela signifie que la création de la fenêtre doit être une réaction à une lessive de l' événement - Click. Programme - un gestionnaire d'événements, que nous devrions utiliser dans ce cas, est appelé onClick. En outre, il indique à l'ordinateur ce qu'il faut faire si cet événement se produit. L'exemple de code suivant est des événements du programme de finition ingénus onclick: <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Ce modèle a plusieurs nouvelles fonctionnalités - regardez leur routine. Vous pouvez alors constater que nous créons un formulaire avec un bouton (comme acte - le problème de HTML, donc examiner cela en aucune façon nous ne sera pas). La première nouvelle fonctionnalité - onclick = "alert ( 'Yo ')" dans la balise <input>. Comme nous l'avons dit, cette propriété détermine ce qui se passe à ce moment où le bouton est pressé. Ainsi, si la pièce a l' événement Click, l'ordinateur est forcé de faire une alerte d'appel ( 'Yo'). Il a également des exemples de code en JavaScript (Notez que dans ce cas, on n'a même pas utilisé la balise <script>).
fonction Alert () vous permet de créer une zone de liste déroulante. Lorsque vous appelez, vous devez définir une certaine ligne de crochets. Dans ce cas , 'Yo'. En outre, ce sera comme une fois que le texte qui apparaîtra dans la liste déroulante. Alors, à quelle heure à quelle heure le lecteur clique sur le bouton, le script crée une fenêtre contenant le texte 'Yo'.
Une certaine confusion peut provoquer une autre caractéristique de l'échantillon: l'équipe du document.write (), nous utilisons des guillemets ( "), pour alerter le système () - seulement unique Pourquoi Dans la plupart des cas, vous pouvez utiliser les deux types de citations Pourtant, dans.?. finition échantillon , nous avons écrit onclick = "alert ( 'Yo' )" - qui est, nous avons utilisé comme un double, et des guillemets simples Si nous avons écrit onclick = "alert (" Yo " )", l'ordinateur ne parvient pas à comprendre cela. le script, comme il ressort clairement à quel élément du système a un rapport de la fonction se termine événement onClick, juste que - il n'y a aucune raison, vous êtes aussi obligé dans ce cas d'alterner les deux types de guillemets ne lui appartenant pas quelle que soit la routine que vous avez utilisé des citations - .. première double, alors seulement simple ou vice versa. Autrement dit, vous pouvez simplement écrire que onclick = "alert (" Yo " ).

Vous pouvez utiliser le script dans de nombreux différents types d'événements fonctions de finition. Pour plus d'informations à propos de certains d'entre eux nous obtenons dans cette description, mais pas sur tous. Par conséquent, s'il vous plaît se référer au répertoire approprié, si vous voulez savoir ce que les gestionnaires d'événements sont toujours là.

Donc, si vous utilisez le navigateur Netscape Navigator, la fenêtre contextuelle contient du texte qui a été transmis à la fonction d' alerte JavaScript. Une telle restriction est imposée pour des raisons de sécurité. La même chose peut également créer en utilisant la boîte déroulante de méthode rapide (). Pourtant, dans ce cas, la boîte va reproduire le texte saisi par le lecteur. Et parce que le script écrit par un attaquant peut prendre la forme d'un message du système et demander au lecteur d'entrer un mot de passe. Et si le texte inscrit dans la fenêtre déroulante, ainsi que le lecteur est donné à comprendre que la fenêtre a été créé par un navigateur Web, mais pas par votre système d'exploitation. En outre, étant donné que cette restriction est imposée pour des raisons de sécurité, vous ne pouvez pas prendre comme il suffit de supprimer le message qui apparaît.

fonctions

La plupart de nos programmes dans la langue que nous utilisons les fonctions JavaScript. Par conséquent, même maintenant je dois parler de cet élément important de la langue.
Dans la plupart des cas, les fonctions ne sont qu'un moyen de relier entre eux plusieurs commandes. Laissez-nous, à goûter, écrire un script qui émet un certain texte trois fois de suite. Pour examiner la source approche simpliste: <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> / html> Et ce script va écrire le texte suivant Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! trois fois. Si vous regardez le code source du script, on peut voir que, pour obtenir le résultat souhaité un certain pourcentage de son code a été répété trois fois. Est-il efficace? Non, nous pouvons résoudre le même problème encore mieux. 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> / html> Dans ce script, nous définissons une fonction, comprenant les chaînes 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 qui sont dans les accolades - {} - appartiennent à la fonction () myFunction. Cela signifie que les deux équipes document.write () maintenant aussi reliés entre eux peuvent être exécutées lors de l'appel de cette fonction. De plus, en effet, notre échantillon ont trois appels cette fonction - Vous pouvez voir que nous écrivons myFunction () la ligne à trois reprises à nouveau après avoir été donné une définition de la fonction elle - même. Ce estkak fois a également fait trois appels. À son tour, cela signifie que le contenu des fonctions (commandes entre accolades) ont été réalisées en triple.
Comme il est fonction tout à fait rudimentaire utilisation de l'échantillon, alors vous pourriez être un problème, mais pourquoi exactement ces fonctions sont si importantes en JavaScript. Après avoir lu cette description, vous comprendrez sûrement aussi leur faveur. La possibilité de transmission des variables dans un appel de fonction donne à nos scripts réelle flexibilité - ce qu'elle est, nous verrons plus tard.

des fonctions similaires peuvent être utilisés en conjonction avec des finitions procédures d'événement. Prenons l'exemple suivante: <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> </ head> <body> <form> type <input = valeur "bouton" = "Calculer" onclick = "calcul ()"> </ form> </ body> </ <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 l'exemple suivant:

Ici, en cliquant sur le bouton appelle la fonction de calcul (). Comme vous pouvez le voir, cette fonction effectue quelques calculs, en utilisant les variables x, y et le résultat. La variable qui nous permet de déterminer en utilisant le mot - clé var. Les variables peuvent être utilisées pour stocker différentes valeurs - nombres, des chaînes de texte et etc. Ainsi , le résultat de script ligne var = x + y; Il indique au navigateur que vous devez créer une variable de résultat également mis au résultat de l'opération x + y arithmétique (soit 5 + 12). Après cela, le numéro 17 est placé dans la variable résultat. Dans ce cas, la commande d' alerte (résultat) fait la même chose, ainsi que d' alerte (17). En d'autres termes, nous obtenons une fenêtre, dans laquelle le numéro 17 est écrit.