Commençons par le fait que le langage JavaScript supporte la notion de POO (objet programmation orientée). Ce concept est qu'il existe des éléments tels que des objets et que ces objets ont diverses propriétés et méthodes (fonctions) qui vous permettent de les manipuler.
Une fonction est un bloc de code distinct composé d’une ou plusieurs instructions. Il a son propre nom (unique) et peut accepter divers paramètres, en fonction desquels il peut effectuer une opération particulière.
Une méthode est aussi une fonction, mais elle appartient déjà à une classe ou à un objet.
Pour appeler une méthode, vous devez d’abord écrire le nom de l’objet, puis écrire le nom de la méthode séparé par un point. L'exception à cette règle concerne l'appel des méthodes alert(), confirm() et prompt() de l'objet window. Ils peuvent être appelés sans spécifier le nom de l'objet. Nous avons déjà pris connaissance de ces méthodes dans cet article.
De plus, dans les articles précédents, nous avons découvert la méthode de sortie document.write(), qui appartient à l'objet document.
Ainsi, en programmation, il existe une opportunité très importante, à savoir celle de pouvoir créer vos propres fonctions.
La syntaxe de la fonction ressemble à ceci :
Par exemple, créons fonction simple, qui ajoutera le texte transmis au paragraphe et le sortira. Et cela le rendra également en gras et en italique.
Fonction writeText(text)( //Ajouter du texte dans le paragraphe et l'afficher document.write("
"+texte+"
"); ) //Appelle la fonction créée writeText("Bonjour!");Enregistrez le document et ouvrez-le dans le navigateur.
Commentaire! Lors de la déclaration d'une fonction, croisillons doit être obligatoire, quel que soit le nombre d’opérateurs.
Quelles sont les fonctions nécessaires à la programmation ?Le principal avantage de l’utilisation de la fonction est la réduction de la taille code source scénario.
Disons que nous devons parcourir trois tableaux unidimensionnels. Comme nous le savons grâce à cet article : , le tableau est itéré à l’aide d’une boucle. Sans la fonction, le code de ce script ressemblera à ceci :
//déclare trois tableaux var arr1 = ; var arr2 = ["b", 5, 9.2, "h", 8, 2]; vararr2 = ; pour(var je = 0; je< arr1.length; i++){ document.write("
L'élément de tableau arr1, d'indice " + i + " est égal à : "+ arr1[i] +"
"); ) pour(var je = 0; je< arr2.length; i++){ document.write("L'élément de tableau arr2, d'indice " + i + " est égal à : "+ arr2[i] +"
"); ) pour(var je = 0; je< arr3.length; i++){ document.write("L'élément de tableau arr3, d'indice " + i + " est égal à : "+ arr3[i] +"
"); }Ainsi, afin de ne pas écrire votre propre boucle pour chaque tableau, il est préférable d'utiliser une fonction dans laquelle on passe le tableau, et elle affichera tous ses éléments à l'écran. Ainsi, d’une part, nous réduisons la taille du code et, d’autre part, nous nous débarrassons du code répétitif.
Fonction printArr(arr)( pour(var je = 0; je< arr.length; i++){ document.write("
L'élément du tableau d'indice " + i + " est égal à : "+ arr[i] +"
"); ) ) //déclare trois tableaux var arr1 = ; var arr2 = ["b", 5, 9.2, "h", 8, 2]; var arr2 = ; //Appelle la fonction créée pour parcourir chaque tableau printArr (arr1); printArr (arr2); printArr (arr3); Paramètres de fonctionUne fonction peut prendre n'importe quel nombre de paramètres, de un à l'infini. Ou bien, cela peut être complètement sans paramètres.
Créons une fonction sans paramètre qui imprime simplement la phrase classique "Hello world" à l'écran.
Function helloWorld())( document.write("Hello World"); ) //Appelle la fonction sans paramètres, helloWorld helloWorld();
Tout paramètre de fonction peut avoir sa propre valeur par défaut. Cela signifie que si nous ne transmettons aucune valeur lors de l'appel de la fonction ce paramètre, il utilise alors sa valeur par défaut.
Par exemple, créons une fonction qui ajoute deux nombres transmis. Si nous transmettons un seul chiffre, alors, par défaut, le deuxième chiffre sera 4.
Fonction summa(numéro1, numéro2 = 4)( document.write("
La somme des nombres « + numéro1 + » (Premier paramètre) et « + numéro2 + » (Deuxième paramètre) est égale à : « + (numéro1 + numéro2) + »
"); ) //Appelle une fonction qui, par défaut, affichera le résultat de l'addition du nombre passé, avec le nombre 4. summa(5); // Résultat : 9 //Si nous fournissons également le deuxième paramètre, le la fonction affichera le résultat de l'addition des nombres des deux paramètres .summa(5, 20); // Résultat : 25Il est également possible qu’à l’intérieur d’une fonction on puisse appeler une autre fonction existante.
Par exemple, appelons la première fonction que nous avons créée, writeText(), à l'intérieur de la fonction summa() précédente. Nous transmettrons le résultat de l’ajout de nombres à la fonction writeText(). Dans ce cas, le code de la fonction summa() ressemblera à ceci :
Fonction summa(number1, number2 = 4)( writeText(number1 + number2); ) //Appelle la fonction summa summa(5); // Résultat : 9 summa(5, 20); // Résultat : 25
Fonctions qui renvoient une valeurJusqu'à présent, nous avons écrit des fonctions qui affichent immédiatement le résultat à l'écran.
Apprenons maintenant à écrire une fonction qui renvoie un résultat. Nous pouvons ajouter ce résultat à une variable et travailler davantage avec elle.
Afin de mieux comprendre de quoi nous parlons, rappelons-nous des méthodes telles que prompt() et confirm(). Ces méthodes renvoient en fait la valeur reçue de l'utilisateur, plutôt que de l'afficher.
Par exemple, créons notre propre fonction qui renverra le dernier élément du tableau passé en paramètre.
Function lastElement(arr)( //Renvoie le dernier élément du tableau passé return arr; ) //Déclare le tableau var otherArr = ["iphone", "asus", 2000, 9.8, "twix"]; //Appelle la fonction lastElement créée et passe-lui le tableau créé en paramètre otherArr var lastEl = lastElement(otherArr); //Affiche le dernier élément résultant du tableau alert(lastEl);
En conséquence, nous obtiendrons le mot « twix », puisque ce mot est le dernier élément du tableau otherArr.
La méthode alert() ne renvoie rien. Autrement dit, si nous essayons d'afficher une variable dont le type contient le résultat de l'appel de la méthode alert(), nous verrons la valeur undefined . Cela revient à essayer d'afficher la valeur d'une variable vide.
Par exemple, prenons le résultat du dernier appel à alert() de l'exemple précédent, mettons-le dans la variable resAlert et utilisons la fonction writeText que nous avons créée pour essayer d'imprimer le résultat.
//Affiche le dernier élément reçu du tableau var resAlert = alert(lastEl); test var ; writeText(resAlert); //non défini writeText(test); //indéfini
Comme vous pouvez le constater, dans les deux cas, nous avons reçu la valeur indéfinie.
Variables globales et localesLes variables globales sont les variables déclarées en dehors de la fonction. Autrement dit, toutes les variables qui ne sont pas déclarées dans la fonction elle-même sont globales. Ils sont visibles (valables) dans tout le document.
Les variables locales sont les variables déclarées dans la fonction elle-même. Et ils ne sont valables que dans le cadre d’une fonction donnée. En dehors de cela, les variables locales ne fonctionneront plus.
Les variables locales et globales ne sont en aucun cas liées les unes aux autres.
Dans l'exemple de l'image, si nous essayions d'afficher le contenu de la variable x, nous obtiendrions un message non défini car nous avons oublié d'appeler la fonction other().
Par conséquent, pour que les modifications apportées à l’intérieur de la fonction fonctionnent, il est nécessaire d’appeler cette fonction.
Nous appelons la fonction other(), et si nous essayons maintenant d'afficher la valeur de la variable x, nous verrons en conséquence le chiffre 4.
Pour accéder à une variable globale depuis une fonction, vous n’avez rien à faire, il vous suffit de l’utiliser. Les modifications apportées aux variables globales seront visibles en dehors de la fonction.
Var x = 8 ; function incrément() ( x++; ) //Appelle la fonction incrément() incrément(); alerte(x); //Résultat : 9
Si nous ne voulons pas que la variable globale change, nous devons déclarer une variable locale (éventuellement avec le même nom que la variable globale) et toutes les actions seront effectuées sur elle.
Var g = 100 ; function func())( var g = 14; g *= 2; // C'est la même chose que g = g * 2 alert(g); // Résultat : 28 ) // Appelez la fonction. fonction(); alerte(g);//Résultat : 100
C'est tout, chers lecteurs, vous savez maintenant ce qu'est une fonction, comment créer votre propre fonction, comment appeler une fonction et quels types de fonctions existent. Vous avez également appris ce que sont les variables globales et locales.
Comme je l'ai écrit au début de l'article, les fonctions sont très éléments importants, vous devriez donc les connaître parfaitement.
TâchesTout programmeur sait bien ce que sont les fonctions et pourquoi elles sont nécessaires. Cependant, les fonctions en Javascript présentent quelques particularités. Si vous programmez dans ce langage depuis longtemps, vous savez probablement qu'il en existe différents. Si vous venez d'une autre langue, alors en lisant certains articles, vous avez probablement vu cette déclaration de fonction, étrange à première vue :
Var add = function(arg1, arg2) ( var sum = arg1 + arg2; return sum; ) var result = add(5, 2); //le résultat est maintenant 7
Autrement dit, la fonction n’a pas de nom. Deuxièmement, il est affecté à une variable, mais pas seulement, mais son corps y est placé. Personnellement, pour moi, qui avais déjà écrit dans des langages tels que VB, C++, une telle annonce a provoqué la perplexité et l'incompréhension de son fonctionnement et de la raison pour laquelle l'écrire ainsi.
Je suis habitué à la déclaration et à l'appel de fonction "classique", comme ceci :
Fonction add(arg1, arg2) ( var sum = arg1 + arg2; return sum; ) var result = add(5, 3); //le résultat est maintenant 8
Et c’est là que nous arrivons aux fonctionnalités des fonctions en Javascript. Pour faciliter la compréhension, imaginez qu'une fonction en JS soit une valeur régulière, comme un nombre ou une chaîne. Pouvez-vous écrire le chiffre 5 dans la variable résultat ? Ou quelque chose de plus complexe, comme un tableau, puis l'afficher à l'écran ? Tu peux. Donc, si vous imaginez qu'une fonction est une valeur ordinaire, bien que d'une structure très complexe, alors la première méthode de déclaration ne semble plus incroyable.
Suivant fait intéressant est la suite logique du premier. Après avoir placé les données dans une variable, nous pouvons utiliser le nom de cette variable pour transmettre les données dans une autre variable :
Var a = 5 ; var b = une; alerte(b); // produira 5
La chose habituelle. Jetez maintenant un œil à ce code :
Var add = fonction (arg1, arg2) ( var sum = arg1 + arg2; return sum; ) var calcSum = add; alerte(calcSum(5, 6)); //imprimera 11
Vous commencez à deviner ? Puisqu’une fonction est comme une variable, nous pouvons la « multiplier » par une affectation ordinaire à d’autres variables, les transformant également en fonctions. Désormais, calcSum peut également additionner deux nombres. Cependant, le code
Var calcSum = ajouter (1, 1); //calcSum est désormais égal à 2, ce n'est pas une fonction, mais une variable avec un nombre alert(calcSum(5, 6)); //erreur
Elle ne sera pas exécutée, car dans la première ligne nous avons attribué non pas la fonction elle-même, mais le résultat de son exécution (les parenthèses indiquent que la fonction doit être exécutée et non assignée).
Si vous devez appeler une fonction sur elle-même, cela se fait comme suit :
Var calcFact = function fact(val) ( if (val == 1) ? val: val * fact(val - 1); //calcul de la factorielle en utilisant la récursion ) alert(calcFact(4)); //imprimera 24
Ici, lors de l'attribution d'une fonction à une variable, nous l'avons nommée fait. Cependant, ce nom ne sera disponible que dans la fonction elle-même et nulle part ailleurs. Les raisons en sont liées au principe de fonctionnement de l’interprète et dépassent le cadre de la leçon.
Vous vous demandez peut-être : "Hmm, opportunité intéressante! Mais quel est l’avantage de cette méthode ? Y a-t-il des situations où cela ne peut se faire sans, ou est-ce au moins plus pratique qu'une déclaration ordinaire ? " Je n'entreprendrai pas de dire qu'il y a des situations où cette approche ne peut se faire sans, mais je peux donner un exemple où cela réduit la quantité de code. Disons que vous devez saluer la personne en fonction de l'heure de la journée :
Var date = nouvelle Date(); var bonjour = (date.getHours()< 12) ? function() {alert("Доброе утро!")} : (date.getHours() < 18) ? function() {alert("Добрый день!")} : function() {alert("Добрый вечер!")}; hello();
Comme vous pouvez le constater, les fonctions sont extrêmement simples, avec une seule commande d'alerte.
Si nous décidions d'emprunter la « voie classique », nous devrions écrire trois fonctions distinctes, puis les appeler dans la condition de contrôle temporel :
Function goodMorning() ( alert("Bonjour!"); ) function goodAfternoon() ( alert("Bon après-midi!"); ) function goodEvning() ( alert("Bonsoir!"); ) var date = new Date (); (date.getHours()< 12) ? goodMorning() : (date.getHours() < 18) ? goodAfternoon() : goodEvning();
Le code s'est considérablement développé visuellement, même en considérant que nous avons utilisé la forme de notation courte opérateur conditionnel. En supposant que le fichier contient réellement fonctions importantes, effectuant des calculs, puis jonchez la liste de telles mini-fonctions qui ne comportent pas de logique importante et qui ne sont utilisées, très probablement, qu'une seule fois, pas meilleure idée. De plus, on est obligé de donner à chaque fonction nom unique et précisez-le lors de votre appel. Par conséquent, si vous devez modifier le nom de l’un d’entre eux, vous devrez le modifier à deux endroits, ce qui augmente le risque d’erreur.
Deuxièmement, si l'on utilise la méthode « classique », on perd la possibilité d'attribuer une fonction à une variable. Autrement dit, écrivez
Fonction add(a, b) ( return a + b; ) var calcSum = add; calcSum(5, 5);
Ce n'est plus possible. Ainsi, dans notre exemple, si nous devons encore saluer l'invité plus d'une fois, nous devrons à chaque fois dupliquer ce fragment :
(date.getHours()< 12) ? goodMorning() : (date.getHours() < 18) ? goodAfternoon() : goodEvning();
Et dans le premier cas, il suffira d’écrire simplement hello(); et le résultat sera le même.
Je vous ai parlé d'une fonctionnalité intéressante des fonctions JS et donné des exemples. Ainsi, vous avez vu que les manières d’appeler des fonctions en Javascript ne se limitent pas à un seul type. Même si vous ne pouvez pas immédiatement utiliser ces capacités dans vos projets, vous saurez au moins que de telles opportunités existent. Et lorsqu’une très bonne opportunité se présente, vous pouvez réduire la quantité de code et éviter toute confusion et erreurs inutiles !
Comment créer une fonction en JavaScript ? Cette question est assez courante chez les programmeurs débutants. Et cet article est écrit uniquement pour ces débutants. Vous devez d’abord comprendre la question : qu’est-ce qu’une fonction ? Commençons par ceci.
Vous devriez vous rappeler depuis l'école ce qu'est une fonction. Sinon, je vous le rappelle. Une fonction possède certains paramètres qu'elle manipule et renvoie un résultat. Par exemple, la fonction y = 2 * x +5. Ici, nous pouvons définir x = 3, et la réponse sera y = 11. Ceci est un exemple de fonction mathématique. Il existe des fonctions absolument similaires en JavaScript, seulement ici, la fonction peut être non seulement une sorte de calcul d'une expression, mais n'importe quoi.
Créons d'abord une fonction qui affiche 3 fois le message "Bonjour".
fonction bonjour() (
alerte("Bonjour");
alerte("Bonjour");
alerte("Bonjour");
}
Bonjour();
La première ligne nous indique que ce qui suit est le script de Javascript. La ligne suivante déclare la fonction. Comme vous pouvez le constater, tout commence par mot-clé fonction. Les paramètres sont indiqués entre parenthèses, mais dans ce cas il n’y a pas de paramètres, donc tout ce qui est entre parenthèses est vide. Viennent ensuite les accolades, à l'intérieur desquelles se trouve le code de la fonction qui doit être exécuté lors de son appel. Ce code utilise la fonction alert(), qui appelle une fenêtre d'information dans laquelle est écrit le texte spécifié par le paramètre. En paramètre, nous passons la chaîne "Bonjour" à la fonction alert() (c'est un exemple de fonction intégrée). Nous appelons la fonction alert() trois fois.
Lorsque la fonction est écrite, vous devez mettre une accolade fermante. Sur la ligne suivante, nous appelons la fonction hello(). J'espère que vous comprenez ce qu'est une fonction. Il est possible que certains d'entre vous se demandent : "Quels sont les avantages ? Après tout, nous pourrions simplement écrire alert() trois fois et le résultat serait le même." Vous avez raison, et c'est ce que vous devez faire si vous n'avez besoin d'utiliser ce code qu'une seule fois. Imaginez que vous en ayez besoin 3, 4 ou plus grand nombre une fois. Bien entendu, il n’est pas pratique d’écrire tout le temps ce code répétitif. Il est beaucoup plus facile d'écrire un mot bonjour(). Êtes-vous d'accord? Je pense que oui. À la fin de l'article, sur cette base, je tirerai une conclusion très importante, alors lisez-la jusqu'au bout.
Parlons maintenant des fonctions avec paramètres. Créons un de ces exemples (j'écrirai la fonction et son appel tout de suite, sans la balise).
Somme de fonction (x, y) (
var somme = x + y ;
document.write(somme);
}
somme(5, 4);
Le code est assez transparent, cependant, permettez-moi de commenter. Encore une fois le mot-clé function , puis le nom de la fonction (dans ce cas, que ce soit sum ). Entre parenthèses, j'ai indiqué deux paramètres obligatoires ( X Et oui). Dans la fonction, je crée une autre variable somme(c'est tout à fait normal de nommer les variables et les fonctions de la même façon), à laquelle j'attribue la somme X Et oui(qui ont été transférés). Et puis j'affiche le résultat dans la fenêtre du navigateur. Après la fonction, je l'appelle en passant les paramètres 5 et 4. Vous pouvez vérifier et voir dans la fenêtre du navigateur - 9.
Et enfin, je dirai quelque chose sur les valeurs de retour. Dans l'exemple ci-dessus, nous avons immédiatement imprimé le résultat, cependant, pour cette fonction, il serait plus logique de ne rien imprimer, mais de renvoyer le résultat. Qu’en faire ensuite est une autre question. Réécrivons la fonction comme ceci :
Fonction somme(x, y) (
var somme = x + y ;
retourner la somme ;
}
var z = somme(4, 5) + somme(1,-3);
document.write(z);
Faites attention au mot-clé return. Il renvoie le résultat (dans notre cas, la somme de deux nombres). Donc sum(4,5) renvoie 9 . On ajoute ce nombre au résultat de la fonction sum(1, -3) , soit -2 . En conséquence, nous obtenons 7. Et alors seulement, nous imprimons le résultat dans le navigateur.
J'espère que vous avez apprécié les capacités des fonctions, il est donc indispensable de créer et d'utiliser des fonctions en JavaScript. Et maintenant, je vais tirer une conclusion importante, un principe qui doit toujours être suivi : tout code répété doit être séparé en une fonction distincte. Si vous affichez les mêmes 5 lignes 20 fois (par exemple), alors vous devez séparer ces 5 lignes dans une fonction distincte. Ainsi, au lieu de 100 lignes (20 fois * 5 lignes), écrivez seulement 20 lignes, et encore plus compréhensibles (le nom d'une fonction est bien plus simple que 5 lignes de code). Je voudrais dire que si cette règle n'est pas respectée, la taille du programme peut alors augmenter des dizaines, voire des centaines de fois.
Je vous conseille de vous entraîner et, par exemple, de créer des fonctions de toutes les opérations mathématiques de base (addition, soustraction, multiplication et division).
Une fonction est un code de programme défini une fois et qui peut ensuite être appelé pour exécution un nombre illimité de fois.
En JavaScript, une fonction est une valeur, elle peut donc être affectée à des variables, des éléments de tableau, des propriétés d'objet, transmise en argument aux fonctions et renvoyée en tant que valeur par les fonctions.
Déclarer et appeler une fonctionIl existe trois manières de déclarer une fonction : la déclaration de fonction, l'expression de fonction et l'expression de fonction nommée.
La déclaration de fonction (en abrégé FD) est une déclaration de fonction « classique ». En JavaScript, les fonctions sont déclarées à l'aide d'un littéral de fonction. Syntaxe de déclaration FD :
Un littéral de fonction se compose des quatre parties suivantes :
Exemple simple :
Fonction sayHi() ( alert("Bonjour"); )
Lorsqu'il rencontre le mot-clé function, l'interpréteur crée une fonction puis lui attribue une référence à une variable nommée sayHi (une variable portant ce nom est créée automatiquement par l'interpréteur).
En accédant à la variable sayHi, vous pouvez voir qu'il y a là une fonction comme valeur (en fait, un lien vers celle-ci) :
Alerte(direSalut); // fonction sayHi() ( alert("Bonjour"); )
Une expression de fonction (en abrégé FE) est une déclaration de fonction qui fait partie d'une expression (telle qu'une affectation). Syntaxe de déclaration FE :
Fonction (paramètres) (instructions)
Exemple simple :
Var sayHi = function () ( alert("Bonjour"); );
La fonction FE est également appelée « fonction anonyme ».
Une expression de fonction nommée (NFE en abrégé) est une déclaration de fonction qui fait partie d'une expression (telle qu'une affectation). Syntaxe de déclaration NFE :
Identificateur de fonction (paramètres) (instructions)
Exemple simple :
Var sayHi = function foo() ( alert("Bonjour"); );
Les déclarations FE et NFE sont traitées par l'interpréteur exactement de la même manière qu'une déclaration FD : l'interpréteur crée une fonction et stocke une référence à celle-ci dans la variable sayHi.
Code du programme, situé dans le corps de la fonction, est exécuté non pas au moment où la fonction est déclarée, mais au moment où elle est appelée. Pour appeler une fonction, utilisez l'opérateur () (appel de fonction) :
Fonction sayHi() ( alert("Bonjour"); ) var sayHi2 = function () ( alert("Bonjour2"); ); var sayHi3 = function foo() ( alert("Hello3"); ); dis salut(); // "Bonjour" sayHi2(); // "Bonjour2" sayHi3(); // "Bonjour3"
La différence entre les trois déclarations présentées est que les fonctions déclarées comme FD sont créées par l'interpréteur avant le début de l'exécution du code (au stade de l'analyse), elles peuvent donc être appelées (dans le domaine où elles sont déclarées) avant la déclaration :
// Appel d'une fonction avant qu'elle ne soit déclarée dans le code de niveau supérieur foo(); function foo() ( alert("Appel de la fonction foo() dans la portée globale."); // Appel de la fonction avant qu'elle ne soit déclarée dans la portée de la fonction bar(); function bar() ( alert("Appel la fonction bar() dans la portée de la fonction."); ) )
Les fonctions déclarées comme FE ou NFE sont créées au moment de l'exécution, elles ne peuvent donc être appelées qu'après avoir été déclarées :
// dis salut(); // Erreur. La fonction sayHi n'existe pas encore var sayHi = function() ( alert("Hello!"); ); dis salut();
Les fonctions déclarées à l'intérieur d'un bloc sont dans la portée du bloc :
// foo(); // Erreur. La fonction n'est pas déclarée. ( foo(); // 1 fonction foo() ( console.log(1); ) ) foo(); // Erreur. La fonction n'est pas déclarée.
Contrairement à FE, une fonction déclarée comme NFE a la capacité de se référer à elle-même par son nom lorsqu'elle est appelée de manière récursive. Le nom de la fonction n'est disponible que dans la fonction elle-même :
(function sayHi(str) ( if (str) ( return; ) sayHi("hi"); // Le nom est disponible à l'intérieur de la fonction ))(); dis salut(); // Erreur. Fonction non déclarée
Fonction de rappelUne fonction de rappel est une fonction qui est passée en argument à une autre fonction pour être appelée ultérieurement.
Les fonctions de rappel sont souvent utilisées comme gestionnaires d'événements.
Vous trouverez ci-dessous un exemple de fonction qui prend comme argument une référence à une autre fonction pour un appel ultérieur :
Fonction foo(callback) ( return callback(); ) foo (function() ( alert("Bonjour!"); ));
Cet exemple montre clairement comment fonctionne un rappel.
L'idée de générer dynamiquement du contenu sur une ressource Web est devenue la norme. Les pages statiques et la création de modèles de sites Web ont enfin rempli leur mission.
Cependant, une ressource web moderne ne doit pas nécessairement être représentée par un ensemble de pages générées par le serveur et mises à jour par le navigateur (JS+AJAX).
Lorsqu'un visiteur arrive, une ressource Web peut être constituée de quelques en-têtes pour le protocole, du texte dans la « tête », de quelques lignes de code dans le « corps » et c'est tout. Le reste " je trouverai une idée» lors de l'expérience du visiteur - c'est un site idéal ou aspirant à l'être.
Lieu de description et essence des fonctionsJavaScript est une expérience acquise sur plusieurs décennies. Il a histoire significative développement, une équipe moderne et qualifiée de créateurs et de développeurs. Le langage est bien pensé, fiable, beau et donne aux développeurs une réelle opportunité d'écrire du code décent et de s'améliorer.
La notion d’algorithme en dehors d’une fonction est ici en principe absente. Bien entendu, le développeur peut insérer un script n’importe où sur la page, y placer le code et il sera exécuté. Mais quel est l'intérêt d'un code qui n'est exécuté qu'une seule fois : lorsque la page est chargée (rechargée) ? A moins qu'il ne soit possible de fixer les valeurs initiales de certaines variables sans importance.
Un script est un endroit pour décrire les variables et fonctions nécessaires, plutôt qu'un bon morceau de code écrit pour lui-même. C'est l'ensemble des fonctions qui est essentiel et significatif, peut-être leur connexion directe mutuelle, mais le plus souvent tout est différent. Le lieu où une fonction est décrite et le lieu où elle est appliquée ne sont pas du tout la même chose.
Il n’est pas du tout nécessaire qu’une fonction appelle directement une autre fonction ; elle peut le faire indirectement via la génération de code dynamique. Le visiteur prend une décision dans le cadre de ce code et un système de fonctions complètement différent se déclenche.
Dynamique fonctionnelleLa dynamique fonctionnelle ne concerne pas seulement et pas tant les gestionnaires attribués aux éléments de page, ce sont les fonctions qui forment les éléments de page, et les gestionnaires directs peuvent également changer.
L'action sur la page se déroule en fonction de ses éléments et du comportement du visiteur sur celle-ci. Les mouvements de la souris, les boutons du clavier, les clics, les événements d'éléments et d'autres circonstances conduisent au lancement des fonctions nécessaires.
Au départ, il n’y a ni séquence ni parallélisme. Il existe une réponse adéquate de la ressource Web aux événements. La rapidité avec laquelle JavaScript exécutera une fonction particulière dépend de nombreux facteurs techniques (ordinateur, lignes de communication) et sémantiques (logique de l'algorithme, Domaine, sens de la tâche) facteurs.
En fait, on peut dire que quelque chose a fonctionné en parallèle et que quelque chose s'accomplira après quelque chose, mais cela n'a pas de sens particulier. Il est important que les fonctions JavaScript permettent de créer une réponse adéquate aux actions des visiteurs.
Il s’agit d’une nouvelle réflexion en matière de développement : le traitement distribué de l’information dans les entrailles d’un seul navigateur !
Syntaxe des variables et des fonctionsLes variables JavaScript sont placées à la fois dans la balise « script » et dans le corps de la fonction. Les fonctions sont définies de la même manière. Il n’y a pas d’intérêt particulier à écrire une autre fonction à l’intérieur d’une fonction, mais cela peut être nécessaire pour des raisons diverses et bien fondées.
Une description de fonction commence généralement par le mot-clé « fonction », suivi de son nom, d'une liste d'arguments entre parenthèses séparés par des virgules et du corps de la fonction entre accolades.
DANS dans cet exemple deux fonctions sont décrites qui assurent l'échange AJAX entre la page et le serveur. La variable scXHR est décrite ci-dessus, elle est donc disponible à la fois dans InitXML et dans WaitReplySC.
Nom de la fonction et paramètre "fonction"Une option asynchrone a été introduite ici, où la fonction JavaScript de la fonction est appelée après la réponse du serveur. Dans le même temps, après avoir reçu une réponse du serveur, WaitReplySC accède aux balises de page, les remplit avec les informations reçues et appelle d'autres fonctions qui pourraient bien initier la prochaine requête au serveur.
Il est également important de noter ici que WaitReplySC est une fonction. Mais dans la ligne scXHR.onreadystatechange = WaitReplySC il est passé en paramètre. Ce règle générale passer des fonctions à d’autres fonctions en tant que paramètres. Spécifiez des crochets et transmettez-y ses paramètres - la fonction sera exécutée immédiatement. Il m'a seulement donné son nom, mais tant pis. L'appel de la fonction sera effectué par celui qui a reçu son nom.
La fonctionnalité implémentée via AJAX vous permet d'appeler une fonction JavaScript via les données reçues du serveur. En fait, lors de l'envoi d'une requête au serveur, une fonction particulière peut ne pas « savoir » du tout à quelle fonction elle accède et avec quelles informations.
Sortie de fonction et son résultatDans le corps de la fonction, vous pouvez écrire n'importe quel opérateur du langage, qui est en fait destiné à cet effet. Les variables définies à l'intérieur et à l'extérieur d'une fonction sont disponibles dans une fonction, mais pas celles définies dans d'autres fonctions.
Si vous souhaitez qu'une fonction renvoie un résultat, vous pouvez utiliser l'instruction de retour JavaScript : return. Il peut y avoir un nombre suffisant d'instructions return dans le corps de la fonction. Il n’est pas du tout nécessaire qu’ils renvoient tous le même type de résultat.
En règle générale, les développeurs respectent grandement cette fonctionnalité et, selon la situation, décident de la quitter dès que possible.
Il n'est pas du tout nécessaire de parcourir l'intégralité de l'algorithme de fonction lorsque vous pouvez quitter plus tôt.
Arguments de fonctionLes arguments d'une fonction sont transmis sous forme de liste séparée par des virgules, entre parenthèses et située immédiatement après son nom. Les noms de variables sont utilisés comme arguments, mais les valeurs peuvent également être transmises directement. Pour passer une fonction à une fonction en JavaScript, il suffit de préciser son nom sans parenthèses.
À l'intérieur de la fonction, la variable arguments est disponible, qui a la propriété length. Vous pouvez accéder à n'importe quel argument de fonction via arguments , arguments , ... jusqu'aux derniers arguments .
La modification d'un argument de fonction est valide à l'intérieur de la fonction, mais pas à l'extérieur. Afin de modifier quelque chose en dehors de la fonction, vous devez utiliser l'opérateur de retour JavaScript, à travers lequel vous transmettez la valeur requise à l'extérieur.
Une fois la fonction terminée, tout ce qui est associé à son exécution sera détruit. Lors de l'exécution, une fonction peut modifier des variables externes, à l'exception de celles décrites dans d'autres fonctions, y compris internes.
arguments a une propriété d'appelé, qui est utilisée pour appeler une fonction, ce qui se fait dans ce moment temps. Si vous l'appelez, la version JavaScript d'une fonction au sein d'une fonction vous permet d'implémenter la récursion.
Utilisation des fonctionsLa principale préoccupation des fonctions est de servir les événements du navigateur. Pour ce faire, dans presque toutes les balises, il est possible de spécifier le nom de l'événement et la fonction qui le traite. Plusieurs événements peuvent être spécifiés, mais une seule fonction est spécifiée par événement.
Une fonction peut servir plusieurs éléments de page et plusieurs événements. En utilisant le paramètre « this », vous pouvez transmettre des informations à la fonction à partir de laquelle elles ont été appelées.
Une utilisation classique des fonctions JS concerne les gestionnaires d'événements sur les éléments. Dans cet exemple, la fonction scfWecomeGo() ou scfWelcomeCancel() sera appelée dans le formulaire de connexion/déconnexion du visiteur, et scfMenuItemClick(this) lors de la sélection du mode de fonctionnement.
Dans ce dernier cas, le paramètre « this » est passé, ce qui permet de savoir miraculeusement de quelle div provient l'appel. En général, JavaScript est si bien implanté dans le DOM et il vous permet de naviguer si facilement dans ses éléments, de collecter information nécessaire cette dynamique de page peut être tout simplement imprévisible.
Une fonction n'a pas besoin de renvoyer une chaîne de caractères, un nombre ou une autre fonction. Il peut renvoyer un élément HTML à part entière, et dans lequel il y aura quantité requiseéléments, avec leurs propres gestionnaires d’événements.
En plaçant un tel élément sur la page, le développeur crée une nouvelle fonctionnalité, bonne pour résoudre le problème et satisfaire les intérêts des visiteurs, mais assez difficile en termes de mise en œuvre.
Lorsqu'on démarre un développement aussi complet, il est facile de se perdre dans son propre code, dans les appels de fonctions, dans les moments où tel ou tel contenu de telle ou telle partie de la page se forme. Avant de prendre cette direction de développement, cela ne fait pas de mal de tout peser soigneusement.
À propos de la pensée distribuéeLe développeur doit penser au niveau de tous les éléments de la page, au niveau de tous les événements, et avoir une idée claire de la façon dont tout se passe réellement. C'est difficile, mais le travail en vaut la peine.
En JavaScript, l'exécution d'une fonction peut être différée jusqu'à ce qu'un événement se produise, et il peut y avoir de nombreuses fonctions de ce type, et les événements ont tendance à se propager et à tomber dans la « sphère de visibilité » de divers gestionnaires.
Dans cet exemple, une fonction a été appelée quelque part plus tôt et a initié la création d'un élément de menu de navigation dans les fichiers. On suppose une organisation de pages, c'est-à-dire qu'il n'y a que sept fichiers dans la fenêtre qui peuvent être supprimés et traités. Vous pouvez naviguer soit en cliquant sur une ligne du fichier, à l'aide des flèches du clavier, soit par blocs de sept lignes.
Chaque cas a ses propres fonctions. Autrement dit, dans un tel exemple simple vous devez écrire quelques dizaines de fonctions qui répondront à divers événements, et certaines de ces fonctions traiteront diverses options et des situations qui ne sont pas du tout des événements.
Par exemple, lorsque vous supprimez une ligne, les lignes inférieures doivent remonter. Pour ce faire, vous devrez soit faire une nouvelle sélection, triviale et gourmande en ressources, soit recalculer les lignes, utiliser les fonctions de tableau en javascript et atteindre l'objectif avec élégance.
Arguments et résultats de la fonctionJavaScript vous permet d'amener votre code à un état « entièrement fonctionnel ». Il est normal que l'argument d'une fonction soit une fonction. Une option est autorisée lorsque la fonction renvoie une fonction. JavaScript est complètement détendu à ce sujet.
Ce bon mécanisme, mais assez complexe en termes de mise en œuvre. Techniquement, tout est permis, seul un développeur qualifié peut fournir sémantiquement la logique de transfert de la « fonctionnalité ».
Quand en JavaScript il y a une fonction dans une fonction, tout se passe bien, mais quand une fonction génère une fonction, et que celle-là en génère une autre, alors il est assez difficile de suivre la logique. Au fond, il ne s'agit pas d'appliquer la qualification, il s'agit d'obtenir un résultat sûr et correct.
La préoccupation du développeur est claire et simple. Il y a un problème, vous avez besoin d'une solution, pas d'une erreur comme « Erreur JavaScript, l'opération n'est pas sécurisée », un écran vide ou l'arrêt de l'ensemble du moteur du navigateur.
Si l'argument est une fonction, alors le développeur transmet une variable avec des propriétés spéciales, c'est-à-dire qu'il ne s'agit ni d'un nombre, ni d'une chaîne, ni d'un objet. Mais l'utilisation d'un tel argument peut entraîner une modification des variables externes et du résultat de l'exécution de la fonction. En fonction de ce qui est transmis, des modifications adéquates seront apportées.
Exécution du code généréVous pouvez implémenter l'exécution du code généré lors du fonctionnement d'un autre code en utilisant « eval ». Ceci n'est pas considéré comme une excellente solution, mais souvent, vous ne pouvez pas compliquer le code avec des fonctions inutiles, mais vous limiter à une formation banale. Chaînes JavaScript code et exécutez-le simplement.
Dans cet exemple, une ligne est générée pour insérer des informations dans le div actuel. Le numéro div et le contenu des informations sont différents pour différentes positions, donc une telle solution dans cette situation n'est pas garantie pour garantir la situation " erreur javascript l'opération n'est pas sécurisée", mais donnera de manière fiable l'effet souhaité.
S'il y a une opportunité de se passer de fioritures, mieux vaut en profiter. Toutes les options répertoriées sont bonnes. Bien entendu, dans de nombreux cas, c’est la seule solution.
Un exemple classique de récursion : le calcul factoriel. Il est assez difficile d’écrire un algorithme qui entre en boucle, mais il est très facile de dépasser les limites de la valeur. La factorielle croît trop vite.
Cependant, la récursivité et une fonction appelant une autre fonction capable d'effectuer un rappel valide sont la norme.
Par exemple, une table ordinaire. Il peut y avoir d'autres tableaux dans le tableau. La nidification ne peut pas être limitée. Écrire votre propre ensemble de fonctions pour chaque table est trop un luxe.
Il existe de nombreux exemples de ce type qui peuvent être donnés, et tous constitueront des tâches réelles et urgentes, qui ne relèveront pas du tout du domaine de la programmation. C'est pourquoi le problème réside précisément dans le fait que le système de fonctions créé, ou plutôt son débogage et ultérieur fonctionnement fiable devient une préoccupation non pas pour JavaScript, mais pour le développeur.