JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site Web (par exemple : jeux, réponse au clic sur des boutons ou à la saisie de données dans des formulaires, styles dynamiques, animation). Cet article vous aidera à démarrer avec ce langage passionnant et vous donnera une idée de ce qu'il peut faire.
Qu’est-ce que JavaScript réellement ?Remarque : la raison pour laquelle nous mettons l'élément en bas Fichier HTML, c'est que les éléments HTML sont chargés par le navigateur dans l'ordre dans lequel ils apparaissent dans le fichier. Ainsi, si JavaScript est chargé en premier et doit interagir avec le HTML situé en dessous, il échouera car le JavaScript sera chargé avant le HTML avec lequel il doit interagir. Par conséquent, placer JavaScript au bas de la page HTML est considéré comme la meilleure stratégie.
Ce qui s'est passé?Le titre de votre texte a donc été remplacé par "Bonjour tout le monde !" en utilisant JavaScript. Nous l'avons fait en appelant querySelector(), en récupérant une référence à notre en-tête et en la stockant dans une variable appelée myHeading. C'est très similaire à ce que nous avons fait en CSS avec les sélecteurs. Si vous souhaitez faire quelque chose avec un élément, vous devez d'abord le sélectionner.
Après cela, vous définissez la valeur de la variable myHeading sur la propriété textContent (qui représente le contenu de l'en-tête) sur "Bonjour tout le monde !".
Cours intensif sur les bases de la langueJetons un coup d'œil à quelques fonctionnalités de base du langage JavaScript pour vous permettre de mieux comprendre comment tout cela fonctionne. De plus, ces fonctionnalités sont communes à tous les langages de programmation. Si vous comprenez ces bases, vous pourrez commencer à programmer comme si de rien n'était !
VariablesRemarque : JavaScript est sensible à la casse – myVariable est différent de myvariable. Si vous rencontrez des problèmes dans votre code, vérifiez la casse !
Après avoir déclaré une variable, vous pouvez lui attribuer une valeur :
MaVariable = "Bob" ;
Vous pouvez effectuer ces deux opérations sur la même ligne si vous le souhaitez :
Var maVariable = "Bob";
Vous pouvez obtenir la valeur en appelant simplement la variable par son nom :
MaVariable ;
Après avoir défini la valeur d'une variable, vous pouvez la modifier ultérieurement :
Var maVariable = "Bob"; maVariable = "Steve";
Notez que les variables ont différents types de données :
| Une séquence de texte appelée une ligne. Pour indiquer que cette valeur est une chaîne, vous devez la mettre entre guillemets. | var maVariable = "Bob"; |
| Nombres. Les nombres ne sont pas entourés de guillemets. | var maVariable = 10 ; |
| La valeur est Vrai/Faux. Les mots vrai et faux sont des mots-clés spéciaux en JS et n'ont pas besoin de guillemets. | var maVariable = true ; |
| Un tableau qui vous permet de stocker plusieurs valeurs dans une seule référence. | var maVariable = ; Vous pouvez accéder à chaque élément du tableau comme ceci : maVariable, maVariable, etc. |
| En gros, n'importe quoi. Tout en JavaScript est un objet et peut être stocké dans une variable. Gardez cela à l’esprit pendant que vous apprenez. | var maVariable = document.querySelector("h1"); Tout cela provient des exemples ci-dessus. |
Alors pourquoi avons-nous besoin de variables ? Eh bien, les variables étaient censées faire quelque chose d’intéressant en programmation. Si les valeurs ne pouvaient pas changer, alors vous ne pouviez rien faire de dynamique, comme personnaliser le message de bienvenue ou modifier l'image affichée dans la galerie d'images.
commentairesVous pouvez mettre des commentaires dans du code JavaScript, comme vous l'avez fait en CSS :
/* Tout ce qui est ici est un commentaire. */
Si votre commentaire ne contient pas de sauts de ligne, il est souvent plus simple d'utiliser deux barres obliques, comme ceci :
// Ceci est un commentaire
Les opérateursRemarque : Le mélange de types de données peut entraîner des résultats inattendus lors de l'exécution de calculs. Veillez donc à référencer correctement vos variables pour obtenir les résultats attendus. Par exemple, saisissez « 35 » + « 25 » dans votre console. Pourquoi n’avez-vous pas obtenu le résultat escompté ? Parce que les guillemets transformaient les nombres en chaînes, vous vous retrouviez donc avec une concaténation de chaînes plutôt qu'avec une addition de nombres. Si vous entrez 35 + 25, vous obtiendrez le résultat correct.
ConditionsLes conditions sont des structures de code qui vous permettent de tester si une expression est vraie ou fausse, puis d'exécuter un autre code en fonction du résultat. La forme de condition la plus courante est appelée if... else. Par exemple:
Var glace = "chocolat"; if (iceCream === "chocolat") ( alert("Ouais, j'adore la glace au chocolat !"); ) else ( alert("Awwww, mais le chocolat est mon préféré..."); )
L'expression à l'intérieur de if (...) est un test qui utilise l'opérateur d'identité (comme décrit ci-dessus) pour comparer la variable iceCream avec la chaîne chocolate et voir si elles sont égales. Si cette comparaison renvoie vrai, le premier bloc de code sera exécuté. Sinon, ce code sera ignoré et le deuxième bloc de code après l'instruction else sera exécuté.
Fonctions ÉvénementsPour créer une véritable interactivité sur un site Web, vous avez besoin d’événements. Les événements sont un cadre qui écoute ce qui se passe dans le navigateur et vous permet ensuite d'exécuter du code en réponse. Le plus évident est l'événement click, qui est déclenché par le navigateur lorsque nous cliquons sur quelque chose avec la souris. Pour démontrer cet événement, entrez la commande suivante dans votre console, puis cliquez sur la page Web actuelle :
Document.querySelector("html").onclick = function() ( alert("Aïe ! Arrête de me piquer !"); )
Il existe de nombreuses façons d'attacher un événement à un élément. Ici, nous sélectionnons l'élément et définissons son gestionnaire de propriété onclick sur une fonction anonyme (c'est-à-dire sans nom) qui contient le code que nous voulons exécuter sur l'événement click.
noter que
Document.querySelector("html").onclick = function() ();
équivalent
Var monHTML = document.querySelector("html"); monHTML.onclick = function()();
C'est juste plus court.
Améliorons notre exemple de site WebMaintenant que nous avons couvert quelques bases de JavaScript, ajoutons des fonctionnalités intéressantes et légères à notre exemple de site pour vous donner une idée de son fonctionnement.
Ajouter un changement d'imageDans cette section, nous ajouterons une autre image à notre site et ajouterons du JavaScript simple pour basculer entre les deux images lorsque vous cliquez dessus.
Nous sauvegardons donc une référence à notre élément dans la variable monImage. Ensuite, nous créons un gestionnaire d'événements onclick avec une fonction anonyme pour cette variable. Désormais, chaque fois que l'on clique sur cet élément d'image :
Ensuite, nous ajouterons un autre code pour changer le titre de la page en un message de bienvenue personnalisé lorsque l'utilisateur arrive pour la première fois sur le site. Ce message de bienvenue sera enregistré lorsque l'utilisateur quittera le site et reviendra plus tard - nous l'enregistrerons en utilisant . Nous inclurons également la possibilité de changer d'utilisateur, et donc de message de bienvenue, à chaque fois que cela est nécessaire.
Désormais, lors de votre première visite sur le site, il vous demandera un nom d'utilisateur puis vous fournira un message personnalisé. Vous pouvez modifier le nom à tout moment en cliquant sur le bouton. En prime, puisque le nom est stocké dans localStorage, il persiste après la fermeture du site, tout en conservant un message personnalisé la prochaine fois que vous ouvrirez le site !
Conclusion
Aujourd’hui, il n’existe probablement aucun site Web qui ne soit pas écrit en javascript.
L'utilisation de ce script est devenue si populaire qu'il est désormais tout simplement impossible de s'en passer. Les seules personnes plus populaires et plus célèbres que Javascript aujourd’hui sont probablement Paris Hilton et McDonalds.
Qu'est-ce qu'il est exactement ?Javascript est un langage de script conçu pour créer des pages Web interactives. Il fonctionne tel quel, sans nécessiter de compilation, mais simplement en se connectant à la page HTML. Il ne faut pas le confondre avec Java - même si les noms de ces deux langages sont similaires, cela ne signifie pas qu'ils sont fonctionnellement liés. En fait, il est beaucoup plus proche, par exemple, de Ruby ou de Python, mais possède son propre standard ECMAScript, et en est donc toujours distinct.
Ce que Javascript peut faireJavascript peut faire beaucoup de choses - par exemple, il peut être utilisé pour modifier facilement les styles d'éléments, supprimer des balises ou en ajouter de nouvelles. Dans ce cas, vous pouvez définir la fonction de manière à ce que le script réagisse à certains événements - clics de souris ou de touches, ou commence à agir de lui-même après un certain temps après le chargement. Et avec AJAX, vous pouvez obtenir des données mises à jour sans rouvrir la page.
Javascript est capable de définir et de lire des cookies, d'afficher des messages, des fenêtres, de valider des données et bien plus encore. Bricoleur.
Javascript présente trois avantages principaux, parmi lesquels, par exemple, l'accessibilité (en apprenant les bases de JavaScript, vous pourrez facilement comprendre la plupart d'entre elles et toujours améliorer vos compétences) ; prise en charge universelle (ils sont pris en charge dans presque tous les environnements informatiques - n'importe quel ordinateur moderne en est capable), ainsi qu'une intégration complète du navigateur, rendant javascript encore plus pratique et facile à utiliser.
A titre d'exemple, nous pouvons citer des technologies telles que VBScript, XUL et ActiveX - elles ne sont pas prises en charge dans tous les navigateurs et ne fonctionnent que dans un certain environnement.
Et bien sûr, il ne faut pas oublier la rapidité et l’efficacité de JavaScript, qui font pâlir de nombreux langages de programmation en comparaison.
Il ne serait pas inutile de noter que même aujourd'hui, cette technologie continue de se développer, et à un rythme rapide - il suffit de prendre le temps de suivre le rythme ! Et bientôt un nouvel interpréteur sera créé avec la technologie javascript 2.
AvantagesJavaScript présente de nombreux avantages, sinon il ne serait pas utilisé aussi activement. Cela a gagné l’amour des utilisateurs pour une raison. L’un de ses principaux avantages est considéré comme l’interactivité, c’est pourquoi la plupart des sites sont rédigés dans ce langage. Ceci est réalisé grâce à l'outil AJAX, et avec son aide, les données se mettront à jour d'elles-mêmes, sans interaction de l'utilisateur. C'est très pratique, par exemple, sur les sites Web de systèmes de paiement. Ce sera très utile pour les utilisateurs les plus expérimentés - une vraie aideà partir du script que vous utilisez. Qu'est-ce qui pourrait être mieux?
Maintenant, je vais vous parler un peu de la structure de ce langage.- JavaScript possède plusieurs fonctionnalités, dont les suivantes :
- Les identifiants sont sensibles à la casse ;
- Les noms de variables peuvent inclure le symbole « $ », des traits de soulignement, des chiffres (mais ne peuvent pas commencer par eux) et des lettres ;
Langue Programmation JavaScript est un langage de script orienté objet développé à l'origine par Netscape Communications sous le nom de LiveScript, mais ensuite renommé « JavaScript » et, compte tenu de sa syntaxe, est plus proche du Java de Sun Microsystems. JavaScript a ensuite été standardisé par l'ECMA sous le nom d'ECMAScript. Microsoft appelle ses versions JScript.
Le changement de nom de LiveScript en JavaScript s'est produit à peu près au même moment où Netscape incluait la prise en charge de Technologies Java dans le navigateur Netscape Navigator. Ce changement a créé beaucoup de confusion dans l’esprit de ceux qui apprennent à programmer pour les débutants. Il n'y a pas vraie connexion entre Java et JavaScript, leurs similitudes commencent et se terminent par une syntaxe similaire et le fait que les deux langages sont largement utilisés sur Internet.
JavaScript est un langage de script orienté objet qui interagit via une interface appelée Document Object Model (DOM) avec du contenu qui peut être exécuté côté serveur (serveurs Web) et côté client dans le navigateur Web de l'utilisateur lors de la visualisation de pages Web. De nombreux sites Web utilisent des technologies JavaScript côté client pour créer de puissantes applications Web dynamiques en programmation pour les nuls. Il peut utiliser Unicode et utiliser la puissance et la force expressions régulières(cela a été introduit dans la version 1.2 de Netscape Navigator 4 et Internet Explorer 4). Les expressions JavaScript contenues sous forme de chaîne peuvent être exécutées à l'aide de la fonction EVAL.
L'un des principaux défis de JavaScript réside dans les petites fonctions intégrées dans Pages HTML et permettent d'interagir avec le DOM depuis le navigateur pour effectuer certaines tâches qui ne sont pas possibles en HTML statique : comme ouvrir une nouvelle fenêtre, valider des valeurs saisies dans un formulaire, changer l'image au survol, etc. Malheureusement, écrire de telles fonctions est assez fastidieux car les navigateurs ne sont pas standardisés, différents navigateurs peuvent créer différents objets ou méthodes de script, et vous devez donc souvent écrire des versions différentes. Fonctions JavaScript Pour différents navigateurs, mais ce n'est pas très pratique pour enseigner les bases de la programmation.
JavaScript/ECMAScript est pris en charge par des moteurs tels que :
- Rhinocéros
- Singe-araignée
Environnement
Le commentaire de balisage est requis pour garantir que le code ne s'affiche pas sous forme de texte dans les navigateurs qui ne reconnaissent pas le . Cependant, les balises dans les documents XHTM/XML ne fonctionneront pas si elles sont commentées. Navigateurs modernes, qui prennent en charge XHTML et XML, sont suffisamment bien conçus pour être reconnus, donc dans ces documents le code reste non commenté.
Un élément HTML peut générer des événements internes auxquels un gestionnaire de script peut être connecté. Pour créer le droit Document HTML 4.01, vous devez insérer une instruction de lien de script par défaut appropriée dans la section d'en-tête du document.
Éléments de langage
Variables
Les variables sont généralement typées dynamiquement. Les variables sont définies soit en leur attribuant simplement une valeur, soit en utilisant l'opérateur "var". Les variables déclarées en dehors d'une fonction ont une portée "globale", visible sur toute la page Web ; les variables déclarées à l'intérieur d'une fonction sont locales à cette fonction. Pour transmettre des variables d'une page à une autre, le développeur peut installer un "cookie" ou utiliser un cadre ou une fenêtre caché dans arrière-plan pour leur stockage.
Structures de données
Le type principal est une structure de données de tableau associatif similaire aux hachages du langage de programmation Perl ou aux dictionnaires Python, Postscript et Smalltalk.
Les éléments sont accessibles par des numéros ou des noms associés (si ceux-ci ont été définis). Ainsi, les expressions suivantes peuvent toutes être équivalentes :
MonTableau,
monArray.north,
monArray["nord"].
Déclaration de tableaux
MonTableau = nouveau Tableau(365);
Les tableaux sont implémentés de telle sorte que seuls certains éléments (non vides) utilisent de la mémoire, ils "déchargent les tableaux". Si nous définissons l'ensemble myArray = "quelque chose là-bas" et myArray = "quelque chose d'autre là-bas", alors nous n'avons utilisé l'espace que pour ces deux éléments.
Objets
JavaScript possède plusieurs types d'objets intégrés, à savoir Objet, Tableau, Chaîne, Nombre, Booléen, Fonction, Date et Math. D'autres objets appartiennent aux objets DOM (fenêtres, formulaires, liens, etc.).
En définissant des fonctions constructeur, vous pouvez définir des objets. JavaScript est un langage orienté objet basé sur un prototype. Peut ajouter propriétés supplémentaires et les méthodes pour objets individuels après leur création. Pour ce faire, vous pouvez utiliser une instruction prototype pour toutes les instances d'un type d'objet particulier.
Exemple : création d'un objet
// Fonction constructeur
Fonction MonObjet(attributA, attributB) ( this.attributeA = attributA this.attributeB = attributB )
// Crée un objet
obj = nouveau MonObjet("rouge", 1000)
// Accès à un attribut d'objet
alerte (obj.attributeA)
// Attribut d'accès avec désignation de tableau associatif
alerte(obj["attributA"])
La hiérarchie des objets peut être reproduite en JavaScript. Par exemple:
Fonction Base() ( this.Override = _Override; this.BaseFunction = _BaseFunction; function _Override() ( alert("Base::Override()"); ) function _BaseFunction() ( alert("Base::BaseFunction()" ); ) ) function Derive() ( this.Override = _Override; function _Override() ( alert("Derive::Override()"); ) ) Derive.prototype = new Base(); d = nouveau Dérive(); d.Override(); d.BaseFunction();
En conséquence, nous obtenons à l'écran : Derive::Override() Base::BaseFunction()
Instructions de contrôle
Si ... sinon si (condition) ( déclarations )
Cycles
while (condition) ( instructions ) Do ... while do ( instructions ) while (condition); Boucle For for (; ; ) (instructions) Boucle For ... dans
Cette boucle parcourt toutes les propriétés d'un objet (ou d'un élément d'un tableau)
pour (variable dans l'objet) (instruction)
Opérateur de sélection
switch (expression) ( case label1: instructions; break; case label2: instructions; break; default: instructions; )
Les fonctions
Le corps de la fonction est contenu dans (le corps peut être vide), et la liste des arguments est indiquée entre () après le nom de la fonction. Les fonctions peuvent renvoyer une valeur après exécution.
Fonction (arg1, arg2, arg3) ( instructions ; expression de retour ; )
À titre d'exemple, regardons une fonction basée sur l'algorithme du plus grand commun diviseur euclidien :
Fonction pgcd(a, b) ( while (a != b) ( if (a > b) ( a = a - b; ) else ( b = b - a; ) ) return a; )
Le nombre d'arguments lors de l'appel d'une fonction donnée ne doit pas nécessairement fournir autant d'arguments que ceux spécifiés lors de la déclaration de la fonction. Dans une fonction, les arguments sont également accessibles via un tableau d'arguments.
Chaque fonction est une instance d'une fonction, un type d'objet de base. Les fonctions peuvent être créées et affectées comme n'importe quel autre objet :
Var myFunc1 = new Function("alert("Bonjour")"); var maFunc2 = maFunc1; maFunc2();
Résultat à l'écran :
Interaction de l'utilisateur
La plupart des interactions des utilisateurs se font à l'aide de formulaires HTML, accessibles via le DOM HTML. Cependant, il en existe aussi de très remèdes simples communication avec l'utilisateur :
Boîte de dialogue d'alerte
Boîte de dialogue Confirmer
Lignes de dialogue
Barre d'état
Consoles
Les éléments de texte peuvent être la source de divers événements, qui peuvent déclencher des actions si un gestionnaire d'événements EMCAScript est enregistré. En HTML, ces fonctions de gestionnaire d'événements sont souvent définies comme des fonctions anonymes directement dans les balises HTML.
JavaScript est l'un des langages de programmation couramment utilisés pour accès au logiciel aux objets d’application. Il est souvent intégré au navigateur et est nécessaire pour rendre les pages Web plus fonctionnelles. Par conséquent, si JavaScript est désactivé pour une raison ou une autre, la page peut ne pas s'ouvrir du tout ou s'ouvrira, mais avec des limitations ou des erreurs importantes. Par exemple, certains textes peuvent ne pas être affichés. Par conséquent, si vous ne savez pas comment activer cette langue dans votre navigateur Internet, alors vous êtes au bon endroit.
Mozilla Firefox- DANS menu principal sélectionnez la section « Outils » - « Paramètres ».
- Une fenêtre s'est ouverte devant vous sur l'onglet « Basique ». Vous devez sélectionner l'onglet "Contenu".
- En haut de la fenêtre, vous verrez plusieurs éléments, dont l'un s'appellera « Utiliser JavaScript » - cochez la case à côté et cliquez sur OK.
- Actualisez la page à l'aide de la touche F5 de votre clavier.
ATTENTION! Cette description ne convient qu'aux versions inférieures à la version 22. À partir de la version 23, JavaScript n'est plus requis - l'option est activée par défaut.
Opéra- À gauche coin supérieur Cliquez sur le bouton « Outils » - « Paramètres » - « Paramètres généraux ».
- Une fois dans le menu, allez dans l’onglet « Avancé » (c’est le cinquième).
- Dans le menu de gauche, cliquez sur le lien « Contenu » et à côté de « Utiliser JavaScript », cochez la case.
- Cliquez sur OK et actualisez la page.
- Dans le coin supérieur droit se trouve un bouton sur lequel vous verrez trois barres - cliquez dessus et sélectionnez la section « Paramètres ».
- Faites défiler la page jusqu’en bas et cliquez sur « Afficher les paramètres avancés ».
- Dans la section « Informations personnelles », vous verrez un bouton « Paramètres de contenu » sur lequel vous devrez cliquer.
- Une fenêtre supplémentaire s'est ouverte. Recherchez l'option « Autoriser tous les sites à utiliser JavaScript (recommandé) » et cliquez sur OK.
- Rechargez la page dans votre navigateur Internet.
- Ouvrez les propriétés du navigateur (cela peut être fait soit dans le navigateur lui-même via le menu, soit en utilisant le panneau de configuration de votre ordinateur).
- Une fenêtre s'est ouverte, vous devez vous rendre dans l'onglet « Sécurité ».
- Au bas de celui-ci, vous devez cliquer sur le bouton intitulé «Autre…».
- Une grande liste s'est ouverte. Vous devez aller dans la section « Scripts » et dans la sous-section « Scripts actifs », cocher la case à côté de l'élément « Activer ».
- Cliquez sur OK et actualisez la page.
- Dans le menu, nous trouvons la section « Paramètres ».
- Une fenêtre séparée s'est ouverte avec plusieurs onglets, parmi lesquels vous devez ouvrir celui appelé « Sécurité ».
- À côté de l'élément « Activer JavaScript », cochez la case et fermez la fenêtre.
- Nous actualisons la page en appuyant sur la touche F5.
Il convient de noter que toutes les versions des navigateurs les plus connus et les plus populaires proposent aujourd'hui Prise en charge de JavaScript. Ils prennent en charge la troisième édition de la spécification, et Mozilla Firefox a même tenté de prendre en charge la quatrième édition. Par défaut, JavaScript est utilisé par défaut sur presque tous les navigateurs Internet et il est généralement désactivé par l'utilisateur lui-même.
Quant à l'utilisation du langage, il est nécessaire, par exemple, dans certaines applications web, des scripts dans les navigateurs (on parle de programmes spéciaux qui permettent de formater des pages, de remplir automatiquement des formulaires, de masquer une partie du contenu, etc. sur), ainsi qu'en AJAX ( une approche de création d'interfaces d'application dans laquelle l'échange de données avec le serveur s'effectue en arrière-plan, ce qui fait que la page n'est pas complètement rechargée et que le fonctionnement de l'application elle-même ne fait qu'accélérer).
Java Script simplifié. Partie 1
Le langage de script JavaScript, un langage de script développé par Netscape, possède d'énormes capacités pour développer des applications Internet qui s'exécutent à la fois côté client et côté serveur. Le langage est très simple et pour travailler avec, il suffit de comprendre les bases du HTML. JavaScript possède de nombreuses fonctionnalités intéressantes, et l'une d'entre elles est la capacité de traiter non seulement des données, mais également des événements. Un événement est défini comme une action effectuée dans le contexte du navigateur, par exemple un clic de souris ou le chargement d'une page. De plus, JavaScript s'intègre parfaitement à PHP et le complète avec l'implémentation de fonctions impossibles ou laborieuses à implémenter en PHP.
Premiers pas dans la programmation en JavaScript
Code Script JavaScript(ci-après dénommé JS) est placé directement dans le code HTML. JS a une balise tag. Tout entre les balises et est interprété comme du code dans ce langage. L'une des commandes les plus importantes utilisées dans la programmation JS est document.write(), qui est nécessaire pour écrire quelque chose dans le document actuel. Afin de ne pas être infondé, je donnerai exemple le plus simple:
document.write("JavaScript est simple !!!")
Tapez ce texte dans le Bloc-notes et enregistrez-le avec l'extension HTML. Le résultat de l'exécution de ce code sera le texte « JavaScript est facile !!! » affiché dans la fenêtre du navigateur. Vous direz : « Peut-être que ce sera le cas, mais peut-être que ce ne sera pas le cas », et vous aurez raison. Si votre navigateur ne prend pas en charge la sortie JS, vous verrez le code complet au lieu du texte. Vous pouvez éviter d'afficher le code dans de tels navigateurs en utilisant la balise de commentaire HTML -
Une autre partie très importante de la programmation JS concerne les événements et les gestionnaires d'événements. Les événements sont principalement déclenchés par certaines actions de l'utilisateur. Chaque action décrit un type d'événement différent. Supposons que lorsque vous appuyez sur le bouton de la souris, un événement appelé « Clic » se produit ; lorsque le pointeur de la souris traverse un lien hypertexte, l'événement MouseOver se produit. Pour que le programme réagisse à ces événements, nous utilisons programmes spéciaux traitement des événements. Par exemple, un programme qui gère l'événement du bouton de la souris s'appelle onClick et indique à l'ordinateur quoi faire si cela va arriverévénement. Pour plus de clarté, créons à nouveau un exemple simple. Créons un formulaire qui contiendra un bouton, lorsque vous cliquerez dessus, une fenêtre déroulante apparaîtra.
page de test
Cliquer sur le bouton Test fait apparaître une fenêtre avec le texte « Test terminé ! » (Fig. 1). Examinons chaque commande de ce code en détail.
A l'aide de la commande, nous créons un formulaire avec un bouton. L'attribut onClick="alert("Test réussi!")" définit ce qui se passe lorsque le bouton de la souris est cliqué. Ainsi, si un événement Click se produit, l'ordinateur émettra un appel d'alerte ("Test terminé!"). La fonction alert() crée des fenêtres pop-up. Lors de son appel, vous devez spécifier une certaine chaîne entre parenthèses, qui apparaîtra dans la fenêtre déroulante. Comme vous pouvez le voir dans le code, la construction alert() utilise Guillemets simples. Cela s'explique par le fait que dans la plupart des cas, il est possible d'utiliser les deux types de guillemets. De plus, peu importe dans quel ordre ils sont utilisés : d'abord doubles, puis simples, ou vice versa. Dans notre exemple, les guillemets doubles sont utilisés en premier, puis les guillemets simples, et si nous avons utilisé la construction de deux double citation-onClick="alert("Test réussi!")", alors l'ordinateur ne serait pas en mesure de comprendre le script, car il n'est pas clair à quelle partie de la construction la fonction de gestion des événements onClick se rapporte et laquelle elle ne le fait pas.
Ainsi, la fenêtre contient le texte qui a été transmis à la fonction d'alerte JS. Cette limitation est appliquée pour des raisons de sécurité. Une fenêtre déroulante peut également être créée à l'aide de la méthode prompt() (voir Fig. 2), mais dans ce cas, la fenêtre reproduira le texte saisi par l'utilisateur, et donc le script écrit par un « hacker maléfique » peut prendre la forme Message système et vous demande de saisir un certain mot de passe. Dans notre cas, il est clair que la fenêtre a été créée par le navigateur et non par le système d'exploitation, et elle ne peut pas simplement être supprimée et supprimée.
Une fonctionnalité très pratique de JS sont les fonctions, qui dans la plupart des cas sont utilisées pour enchaîner plusieurs commandes. Comme exemple clair Disons que vous devez répéter une séquence plusieurs fois chaînes de texte. En utilisant les connaissances JS que nous possédons déjà, nous pourrions utiliser la commande document.write et obtenir un code comme celui-ci :
");
");
document.write("Page la plus interactive
");
document.write("Java Script simplifié
");
document.write("Page la plus interactive
");
document.write("Java Script simplifié
");
// -->
L’œil nu peut constater que la structure a été construite de manière irrationnelle. Reconstruisons ce code à l'aide de la fonction :
Toutes les commandes de script qui se trouvent à l'intérieur accolades, appartiennent à la fonction FreeFunc() que nous avons créée. Désormais, les deux commandes document.write() sont liées et peuvent être exécutées lors de l'appel fonction spécifiée. Ensuite, nous appelons FreeFunc() trois fois immédiatement après avoir défini la fonction elle-même. Cela entraînera l'exécution de la fonction trois fois, c'est-à-dire Les deux lignes seront imprimées trois fois. Le plus intéressant est que la possibilité de transmettre des variables lors de l'appel d'une fonction donne aux scripts une réelle flexibilité. Les fonctions peuvent également être utilisées conjointement avec des procédures de gestion d'événements. Par exemple, vous pouvez créer une fonction calc() qui aura deux variables x et y, et le résultat de l'opération mathématique sera stocké dans la variable résultat. La dernière commande de la fonction sera alert(result). Ensuite, la fonction calc() peut être appelée lorsque le bouton est cliqué avec la commande onClick="calc()", ce qui entraîne l'apparition d'une fenêtre contextuelle avec le résultat du calcul.
Travailler avec Windows
Une autre fonctionnalité du langage JavaScript est l'ouverture de nouvelles fenêtres dans le navigateur. De plus, vous avez la possibilité de contrôler le processus de création de fenêtre lui-même. Par exemple, vous pouvez spécifier la taille de la fenêtre, si la nouvelle fenêtre doit avoir une barre d'état, une barre d'outils ou un menu. La liste des principaux paramètres est donnée dans le tableau 1.
Tableau 1. Paramètres de base pour créer une fenêtre dans JS
Prenons un exemple pratique de création d'une nouvelle fenêtre dans un navigateur :
À la suite de l'exécution de ce programme, nous recevrons un bouton dans le navigateur, lorsque vous cliquez dessus, une nouvelle fenêtre avec du texte est créée (voir Fig. 3).
La fonction OpenWindow() que nous avons créée ouvre une nouvelle fenêtre de navigateur. Le premier argument de la fonction open() - une chaîne vide ("") - signifie que dans ce cas nous ne voulons pas spécifier d'URL spécifique, et JS doit créer une URL supplémentaire nouveau document. Dans le script, on définit la variable myWindow, avec laquelle on accède à la nouvelle fenêtre (il est impossible d'utiliser le nom de la fenêtre (TestWindow) à cet effet dans ce cas). La fenêtre créée a des dimensions de 300 x 100 pixels et n'a pas de barre d'état, de barre d'outils ou de menu. Après avoir ouvert la fenêtre, à l'intérieur de celle-ci, nous ouvrons l'objet document pour afficher le texte. Cela se fait à l'aide de la commande myWindow.document.open(). Nous accédons ici à la méthode open() de l'objet document. Cette commande n'ouvre pas une nouvelle fenêtre - elle prépare uniquement le document pour l'impression à venir. Il est nécessaire de préfixer document.open() avec le préfixe myWindow pour pouvoir imprimer dans une nouvelle fenêtre. Plus loin dans le texte du script, à l'aide de l'appel document.write(), le texte du nouveau document et ses paramètres sont formés. Pour ce faire, écrivez des balises régulières dans le document Langage HTML. Dans ce cas, vous pouvez utiliser absolument n'importe quelle balise de langue balisage hypertexte HTML. Après avoir fini de travailler avec la commande document(), vous devez la fermer, pour laquelle nous utilisons la commande myWindow.document.close().
Lors de l'ouverture d'une fenêtre, nous devons utiliser trois arguments :
maFenêtre= open("page.htm", "TestWindow",
"largeur = 300, hauteur = 100, statut = non, barre d'outils = non, barre de menu = non");
Dans cet exemple, nous spécifions une URL spécifique (page.html), et le deuxième paramètre est le nom de la fenêtre. Connaissant le nom de la fenêtre, vous pouvez y charger une nouvelle page en utilisant l'entrée
Dans ce cas, vous devez spécifier le nom de la fenêtre correspondante, et si une telle fenêtre n'existe pas, alors une nouvelle sera créée avec ce nom. Ne vous y trompez pas : la variable myWin n'est pas le nom de la fenêtre, mais ce n'est qu'à l'aide de cette variable que vous pouvez y accéder. La portée de cette variable n'est limitée que par le script dans lequel elle est définie. Mais le nom de la fenêtre (TestWindow) est un identifiant unique qui peut être utilisé depuis n'importe quelle fenêtre de navigateur. Pour fermer la fenêtre, utilisez la fonction close(), et tout le reste est identique à l'utilisation de la fonction open().
Barre d'état
Dans JS, vous pouvez écrire dans la barre d'état du navigateur - tout ce que vous avez à faire est d'écrire le texte souhaité dans windows.status. Voyons comment utiliser à nouveau cette fonction avec un exemple. Créons un script qui, lorsque vous cliquez sur un bouton, affichera le texte spécifié dans la barre d'état, et lorsque vous cliquez sur le deuxième bouton, l'effacera :
En exécutant le programme dans le navigateur, nous obtenons un formulaire avec deux boutons. Lorsque vous appuyez sur le bouton On Statbar Text, le message « Le bouton On est enfoncé » apparaît dans la barre d'état, et lorsque vous appuyez sur le bouton Off Statbar (Texte clair), la barre d'état est effacée (voir Fig. 4).
Nous avons donc un formulaire avec deux boutons, qui appellent tous deux la fonction statbar(). Lorsque la touche On Statbar Text est enfoncée, la fonction est appelée
comme suit : statbar("Sur le bouton enfoncé"). Le texte entre guillemets est le texte que nous verrons dans la barre d'état. À son tour, la fonction statbar() a été déclarée comme suit :
fonction barre statistique (txt) (
window.status = txt ;)
On met (txt) dans la fonction entre parenthèses. Cela signifie que la chaîne que nous avons transmise à cette fonction est placée dans la variable txt et que la chaîne txt est écrite dans la barre d'état à l'aide de la commande window.status = txt. Par conséquent, la suppression du texte de la barre d'état se fait en écrivant une chaîne vide dans window.status : (""). Les utilisations de l'écriture de texte dans la barre d'état sont illimitées. Vous pouvez y mettre une explication du lien lorsque vous le survolez, créer un ticker ou simplement l'utiliser pour afficher la date et l'heure.
Minuteur
À l'aide de la fonction timeout, vous pouvez exécuter certaines commandes après un délai spécifié. Je vais le démontrer dans le script suivant :
setTimeout("alert("Bienvenue dans \"Ma Maison\" ")", 3000);
// -->
Attendez 3 secondes. Une fenêtre apparaîtra
Après 3 secondes d'ouverture de la page, une fenêtre contextuelle apparaîtra indiquant « Bienvenue sur la page MyHome » (voir Figure 5).
SetTimeout() est une méthode de l'objet window. Il est conçu pour définir un intervalle de temps. Le premier argument de l'appel est le code JS qui doit être exécuté une fois le temps spécifié écoulé (dans notre cas, alert()). Le deuxième argument est utilisé pour indiquer quand ce code doit être exécuté. Dans ce cas, le temps est indiqué en millisecondes.
Cadres
La fenêtre du navigateur peut être divisée en plusieurs cadres distincts. En termes généraux, un cadre est un champ en forme de rectangle. Chaque cadre affiche le contenu de son propre document. La création de cadres est toujours une tâche HTML, mais nous aborderons brièvement les bases du processus en JS. Les balises et sont utilisées pour créer des cadres. Dans l'exemple suivant, nous allons créer un script qui divise la page du navigateur en 5 cadres et charger une page distincte dans chacun d'eux :
Le résultat de l'exécution de ce script est présenté dans la Fig. 6.
Dans le cadre, nous utilisons les propriétés rows et cols et définissons le pourcentage d'espace occupé par les frames dans la fenêtre du navigateur. La propriété rows signifie que les cadres seront situés les uns au-dessus des autres et les colonnes les unes en face des autres. Vous pouvez également définir la taille du cadre en pixels, pour laquelle il suffit de ne pas mettre le symbole % après le nombre. Dans la balise, nous indiquons un lien vers la page à charger, et avec l'attribut name, nous spécifions un nom unique pour le cadre. Il est possible de définir l'épaisseur de la bordure entre les cadres. Pour ce faire, vous devez utiliser le paramètre border dans la balise et le définir sur une certaine valeur (par défaut border=0). Regardons comment JavaScript « voit » les frames présents dans la fenêtre du navigateur. Pour ce faire, tournons-nous vers la fenêtre avec les cadres que nous avons créés ci-dessus. JS organise les frames présentés sur une page web sous la forme d'une sorte de structure hiérarchique, en haut de laquelle se trouve la fenêtre du navigateur. Dans notre cas, il est divisé en cinq trames. Ainsi, la fenêtre en tant qu'objet est l'ancêtre de cette hiérarchie, et les cadres en sont donc les descendants. Nous avons attribué des noms uniques à ces frames : frame1, frame2... frame5. En utilisant ces noms, nous pouvons échanger des informations avec les trames spécifiées. Disons que vous devez activer un certain lien dans le premier cadre, mais que la page correspondante ne doit pas se charger dans le même cadre, mais dans un autre. Un exemple d'une telle tâche serait la création de menus ou de barres de navigation, dans lesquelles un cadre reste toujours le même, mais comporte plusieurs liens différents pour la navigation. Sans nous plonger dans l'étude des hiérarchies, créons un exemple de navigation sur un site à l'aide de frames. Nous allons créer plusieurs liens dans un seul cadre. Lorsque l'un d'entre eux est activé, la page correspondante ne sera pas placée dans le même cadre, mais dans celui adjacent. Tout d'abord, créons les cadres eux-mêmes :
Créons ensuite une simple page HTML "start.htm" :
page de démarrage
Ceci est la page d'accueil de notre site
Et le menu de la barre de navigation :
Page 1
Page 2
Plan du site
Ici, nous voyons plusieurs méthodes de téléchargement nouvelle page dans le cadre principal. Le premier lien utilise la fonction load() à cet effet :
Page 1
Dans cette ligne, au lieu de charger explicitement une nouvelle page, on invite le navigateur à exécuter une commande en JavaScript - pour cela on utilise le paramètre javascript au lieu de l'habituel href. Ensuite, nous passons « 1.htm » comme argument à la fonction Load() et définissons la fonction Load() elle-même comme suit :
fonction charger(url) (
parent.main.location.href=url ;)
L'URL est écrite entre parenthèses. Dans notre exemple, cela signifie que la chaîne "1.htm" est saisie dans la variable url lors de l'appel de la fonction. Et cette nouvelle variable peut désormais être utilisée lorsque vous travaillez dans les fonctions load().
Le deuxième lien utilise le paramètre target. Il ne s'agit plus de code JavaScript, mais d'une des constructions du langage HTML. Nous indiquons simplement le nom du cadre requis et ne sommes pas obligés de préfixer le nom du cadre spécifié avec le mot parent. Si vous devez vous débarrasser des frames à l'aide de la fonction load(), il vous suffit d'y écrire parent.location.href= url. Le résultat de l'exécution de notre script est présenté dans la Fig. 7.
Laquelle des options de chargement proposées à utiliser dépend de votre script et des tâches qu'il doit implémenter.
Ceci conclut notre première connaissance du langage JavaScript. Dans les documents suivants, nous examinerons des objets et des formes prédéfinis, créerons une horloge sur la page, examinerons le travail avec l'objet Image et aborderons également un peu les calques et le modèle d'événement.
Pavel Kouchinski, [email protégé]