Bonjour, dans le dernier article nous avons regardé la syntaxe Langage JavaScript. Nous avons appris ce que sont les boucles, les variables, les tableaux, opérateurs logiques, fonctions et ainsi de suite.

Toutes ces opérations s'effectuent à l'intérieur de la page et ne sont en aucun cas affichées. Aujourd'hui, nous allons apprendre à afficher les données nécessaires à l'écran. Nous afficherons une variable numérique normale en utilisant ActionScript de différentes manières.

Afin d'utiliser toutes les méthodes qui seront indiquées ci-dessous, nous devons accéder à l'objet document. Il s'agit d'un élément distinct du langage JavaScript conçu pour fonctionner avec des sites Web.

Première méthode : fonction writeln

Pour afficher une variable de cette manière, nous devons la créer. Écrivons la ligne suivante : var message = « Hello World ! »

Parlons maintenant de la fonction writeln. Il est préférable de l'utiliser uniquement lors du chargement de la version originale de la page, afin que le contenu interne soit modifié.

En utilisant des fonctions comme writeln, vous pouvez créer une page entièrement écrite en JavaScript. De plus, cette fonction peut être utile lorsqu'il est nécessaire de réduire le nombre de requêtes du serveur.

Pour utiliser cette fonction, nous écrivons la commande document.writeln, entre parenthèses nous écrivons le nom de notre variable, qui sera ensuite affichée à l'écran.

Faites attention! La plupart des instructions pour travailler avec une page Web sont des composants de l'espace de noms du document, elles doivent donc être saisies avant la fonction elle-même, séparées par un point.

Deuxième méthode : fonction d'alerte

Il n'est pas inclus dans l'espace de noms du document comme writeln, il n'a donc pas besoin d'être inclus. L'alerte peut être utile pour déboguer le code d'une page Web. Il peut également être utilisé pour l’interaction de l’utilisateur, mais cela n’est pas recommandé.

Alert a la syntaxe standard de n'importe quelle fonction JavaScript. Nous écrivons d’abord la commande alert, entre parenthèses nous écrivons la valeur ou la variable.

Après cela, une fenêtre apparaîtra en haut de la page avec un message destiné à l'utilisateur, qui contient un bouton « OK ».

Cette fonctionnalité peut avoir de nombreuses utilisations, mais vous ne devez pas en abuser lorsque vous travaillez sur un site Web, car les fenêtres contextuelles peuvent irriter l'utilisateur. De plus, certains plugins bloquent des fonctions comme les alertes.

JAVA

var message = "Bonjour tout le monde !"; document.writeln("message"); alerte("message"); document.getElementById("hl").innerHTML = "message"

Copie

Troisième méthode : fonction getElementById

Il s’agit de la manière la plus complexe et la plus répandue d’afficher des informations à l’écran. Avec lui, vous pouvez modifier le contenu du texte de votre page HTML.

Comme nous le savons - tout Balises HTML peut avoir des identifiants. C'est à eux que s'adresse notre fonction. GetElementById trouve un élément par son ID, modifie le contenu de la balise comme souhaité, tout en laissant le reste du contenu inchangé.

Cette fonction fait partie de l'espace de noms du document, ce qui nécessite qu'elle soit spécifiée avant la fonction elle-même.

Comme vous l'avez peut-être remarqué, en plus de getElementById, il existe une commande innerHTML incompréhensible, suivie d'un signe égal et chaîne de texte. Ainsi, cette commande, avec le signe égal, trouve une balise spécifique et « assimile » son contenu à la chaîne citée.

Cette méthode est la mieux adaptée pour insérer du texte via JavaScript car elle présente de nombreux avantages :

Aucune fenêtre pop-up lorsque la fonction est en cours d'exécution.

La fonction ne fonctionne qu'avec des éléments HTML.

Le texte cité peut être enveloppé dans des balises. De cette façon, vous pouvez écrire une page JavaScript à partir de zéro.

Conclusion

Dans cet article, nous vous avons expliqué comment afficher les informations à l'écran. Cela peut être fait via des messages, ainsi qu'en modifiant le contenu interne de la page Web. Nous n'avons fait qu'effleurer la surface de l'espace de noms du document, qui possède un certain nombre de fonctions permettant de travailler avec une page Web. Dans les leçons suivantes, nous les connaîtrons en détail.

Vous pouvez expérimenter vous-même les fonctions décrites ci-dessus ou télécharger nos sources. Amusez-vous à apprendre !

Dans certains cas, vous devrez peut-être transmettre des variables globales PHP à un script JavaScript. Dans cet article, je vais expliquer comment utiliser les variables PHP en JavaScript et donner quelques exemples.

Variables PHP en JavaScript

Il existe un certain nombre de scénarios qui peuvent nécessiter que vous incluiez des variables PHP dans votre code JavaScript. Par exemple, lorsqu'une page du site est demandée par un utilisateur, Module PHP sur le serveur génère la page en effectuant des calculs et en affichant toutes les variables de la page dans la fenêtre du navigateur.

Une fois le chargement de la page terminé, vous n’en avez plus le contrôle (sauf si vous disposez d’un serveur temporel). Mais si vous transmettez des variables PHP au code JavaScript lors du chargement de la page, vous pouvez continuer à les utiliser dans des scripts JS et contrôler le rendu et le comportement dynamique de la page.

Voyons maintenant comment transmettre des variables de JavaScript à PHP ou vice versa.

Comment transmettre des variables PHP au JavaScript en ligne

Il existe deux méthodes principales pour inclure du code JavaScript dans une page HTML. La première est que l'on place le code sur la même page, dans une section ou dans . Disons que nous avons du code JS en ligne dans une section et que nous souhaitons transmettre une variable de nom d'utilisateur PHP à JavaScript. Dans ce cas, nous devons utiliser le code suivant :

var nom d'utilisateur = "";

alerte (nom d'utilisateur);

...

Nous avons défini une nouvelle variable dans JS et l'avons appelée nom d'utilisateur. Ensuite, attribuez cette variable JS PHP à la variable $username, en la répétant. Naturellement, la variable $username doit avoir été définie plus tôt sur la page au-dessus de cette ligne.

Notez qu'autour du code PHP qui imprime $username , nous avons utilisé des guillemets doubles (" ) comme lors de la déclaration d'une variable en JS. Si la variable PHP est un nombre, vous n'avez pas besoin d'utiliser des guillemets. Mais assurez-vous d'utiliser correctement les guillemets, car la chaîne de sortie peut également contenir des guillemets et cela cassera le code JS. Comment transmettre des variables PHP à du JavaScript externe Le code JS peut également être stocké dans un fichier externe (par exemple, script.js) associé à

Page HTML

. Par exemple, si vous souhaitez transmettre la valeur d'une variable temporelle (en secondes) à un timer JS, vous pouvez utiliser le code suivant :

var secondes = ;

... Code dans le fichier JS externe (script.js) : setTimeout(function() ( window.location.href = "/"; ), secondes * 1000); Dans le code ci-dessus, nous initialisons d'abord Valeur PHP

variable $secondes variable JS secondes. La variable est alors disponible dans le DOM et le script du plugin (script.js) peut l'utiliser. Dans l'exemple ci-dessus, l'utilisateur est redirigé vers

Et puis nous avons examiné comment gérer les événements utilisateur. Cette fois, nous allons voir comment prendre certaines entrées de l'utilisateur et les combiner avec d'autres pour créer pages simples, vous saluant.

exemples/js/pure_js_greating.html

Hello World Prénom : Nom : Dites bonjour !

function say_hi() ( var fname = document.getElementById("first_name").value; var lname = document.getElementById("last_name").value; var html = "Bonjour " + fname + " " + lname; document.getElementById ("résultat").innerHTML = html; ) document.getElementById("say").addEventListener("click", say_hi);

Essayer!

Dans cet exemple, nous avons un peu plus de HTML qu'avant. En plus du bouton et du div où nous afficherons nos résultats, nous avons également deux éléments d'entrée. Chacun avec sa propre pièce d'identité.

Dans le code JavaScript, nous avons la fonction say_hi. Il utilise la méthode getElementById que nous avons examinée précédemment pour obtenir l'élément DOM représentant l'entrée avec l'identifiant first_name. L'objet renvoyé a une méthode de valeur qui renverra le texte saisi par l'utilisateur dans ce champ.

Nous utilisons cette méthode pour obtenir le contenu des deux éléments d'entrée et attribuer les valeurs résultantes à deux variables : fname et lname .

Ensuite, en utilisant ces variables, nous créons un extrait HTML et l'attribuons à une nouvelle variable HTML.

Ensuite, nous définissons l'attribut innerHTML (comme nous l'avons fait auparavant) pour afficher le HTML généré. Le résultat pourrait ressembler à ceci : Création HTML fastidieuse Même dans ce

HTML simple il faut utiliser + plusieurs fois, et le code s'avère assez illisible. Imaginez ce qui se passerait si nous voulions créer une application plus complexe dans laquelle nous voulions générer des listes d'éléments ou même des tableaux. Générer du HTML à la volée et l'insérer dans le DOM serait assez pénible. Dans les backends écrits en Perl, Python ou Ruby, les gens ont rencontré les mêmes problèmes. La solution consistait à créer différents moteurs de modèles. Fondamentalement, un modèle est un extrait HTML avec des espaces réservés (mots-clés), une certaine fonction reçoit cet extrait HTML (modèle) en tant que paramètre, ainsi que plusieurs paires clé-valeur. La fonction renvoie alors

nouveau code HTML

un extrait dans lequel les espaces réservés sont remplacés par les valeurs obtenues des clés appropriées.

Les variables en JavaScript sont des conteneurs permettant de stocker diverses informations.

Chaque Variable JavaScript doit avoir son propre nom unique, qui peut commencer par une lettre latine ou le symbole « _ ».

Attention : les noms de variables en JavaScript ne peuvent pas commencer par des chiffres.

Remarque : étant donné que JavaScript est sensible à la casse, les variables portant les mêmes noms écrits dans une casse différente (par exemple, var et VAR) seront des variables différentes.

Création de variables

La création de variables en JavaScript est souvent appelée "annonce" variables.

Les variables en JavaScript sont déclarées à l'aide de la commande var.

//Créez une variable nommée ex1 var ex1; //Créez une variable nommée ex2 var ex2;

Les variables créées ci-dessus seront vides, c'est-à-dire que nous avons créé des conteneurs, mais n'y avons chargé aucune valeur.

Les valeurs peuvent également être chargées dans des conteneurs dès la création, comme dans l'exemple ci-dessous :

//Créez une variable nommée ex1 contenant la valeur 4 var ex1=4; //Créez une variable nommée ex2 contenant la valeur 5 var ex2=5;

Afin d'extraire une valeur d'une variable créée précédemment, vous devez vous référer à son nom.

Dans l'exemple suivant, nous allons extraire le contenu des variables et les afficher immédiatement sur la page à l'aide de la commande document.write.

//Écrivez le chiffre 4 dans la variable ex1 var ex1=4; //Écrivez le chiffre 5 dans la variable ex2 var ex2=5; //Affiche le contenu de la variable ex1 sur la page document.write(ex1+"
"); //Afficher le contenu de la variable ex2 document.write(ex2+"
"); //Modifier le contenu de la variable ex2 ex2=200; //Afficher le nouveau contenu de la variable ex2 document.write(ex2);

Aperçu rapide

Variables de chaîne

En plus des nombres, vous pouvez stocker du texte arbitraire dans des variables. Les variables qui stockent du texte sont appelées variables de chaîne.

Lorsque vous écrivez du texte dans une variable, assurez-vous de le mettre entre double ("") ou guillemets simples (").

//Écrivez la chaîne « Bonjour à tous ! » dans la variable ex var ex="Bonjour à tous !"; //Affiche la valeur de la variable ex sur la page document.write(ex);

Aperçu rapide

Définir des variables avec et sans var

En JavaScript, vous pouvez définir des variables avec ou sans var.

//Créez une nouvelle variable avec var var ex=123; //Créez une nouvelle variable sans var ex2=20;

Vous pourriez penser que déclarer des variables avec et sans var produira toujours le même résultat, mais cela n'est vrai que lorsque la déclaration a lieu dans un contexte global (c'est-à-dire en dehors de toutes les fonctions).

Si la déclaration se produit dans un contexte local (c'est-à-dire dans le corps d'une fonction), une déclaration avec var crée une variable locale (c'est-à-dire une variable qui ne sera disponible que dans le corps de cette fonction et sera détruite après l'exécution de la fonction. est exécuté), une déclaration sans var crée une variable globale (c'est-à-dire une variable qui sera disponible pour d'autres fonctions au sein d'un script donné).

Notez que nous parlerons davantage des variables locales et globales plus loin dans ce didacticiel.

À propos de la suppression et de la redéfinition de variables

En redéfinissant les variables, vous n’effacez pas la valeur qui y est stockée.

Varex=123 ; varex; document.write(ex); // Imprime 123

Si vous souhaitez supprimer une variable en JavaScript et qu'elle n'a pas été déclarée avec var, vous pouvez utiliser l'opérateur delete.

Ex=123 ; supprimer ex ;

L'opérateur delete ne peut pas supprimer les variables déclarées avec var, donc si une variable a été déclarée avec var, alors la seule façon de la supprimer est de l'affecter valeur nulle ou indéfini.

Varex=123 ; ex = nul ; // ou ex=indéfini

Faites-le vous-même

Tâche 1. Corrigez les erreurs dans le code ci-dessous :

Tâche 1

var 33var=33; document.write(33var); document.write("
"); var str1=Bonjour à tous !; document.write(str1); document.write("
"); var vaR = 288; document.write(var); document.write("
");

Tâche 2. Le fichier externe secred1.js contient les variables sec1, sec2, sec3 et sec4, qui contiennent les lettres du mot de code (dans le désordre). Connectez un fichier externe et découvrez le mot de passe en affichant les valeurs des variables sur la page.

Dans le processus de développement d'un site Web, il est souvent nécessaire de transmettre une valeur (variable, tableau) au javascript. Dans de tels cas, ils conseillent généralement quelque chose comme

var variable = alerte (variable);

Javascript écrit en ligne provoque des sentiments mitigés.

Premièrement, ce n’est presque toujours pas conforme au style de code.

Deuxièmement, il est difficile de déboguer.

Troisièmement, ce code n'est pas mis en cache par le navigateur.

Attention, cher lecteur, l'exemple ci-dessus est plus que complètement incorrect, ce que je vous préviens tout de suite, et c'est exactement ainsi que vous ne devriez pas le faire, mais vous pouvez lire ci-dessous comment le faire correctement, de manière réfléchie et prudente.

Mais si, par exemple, vous n'êtes pas une personne ayant des principes moraux élevés, vous pouvez copier en toute sécurité et en faire ce que vous voulez, je ne vous ai pas conseillé de le faire et, d'ailleurs, je vous en ai même dissuadé.

Je suis convaincu que le javascript doit être stocké exclusivement dans des fichiers,
html afin d'assurer une mise en cache normale par les navigateurs et de faciliter la recherche de ce même script dans votre projet.

Mais comment pouvons-nous transmettre la valeur de PHP tout en préservant un beau code ?

La réponse est d'utiliser eval() en Javascript.

Regardons un exemple avec connexion cartes Google.

Tout d'abord, connectons Google Maps (bibliothèque)

on initialise le début du dessin des cartes immédiatement après le chargement du DOM

Var $ = jQuery.noConflict(); $(document).ready(function () ( if ($("#map-canvas").length) ( function initialize() ( var place = eval($("#map-canvas").attr("data -place")); var pos = new google.maps.LatLng(place, place); var mapOptions = ( center : pos, zoom : 17, mapTypeId : google.maps.MapTypeId.ROADMAP, mapTypeControlOptions : ( style : google. maps.MapTypeControlStyle.DROPDOWN_MENU ), molette de défilement : false, rotateControl : true ); var map = new google.maps.Map(document.getElementById("map-canvas"), map.setTilt(45); new google.maps.Marker (( position : pos, map : map )); google.maps.event.addDomListener(window, "load", initialize));

Créons les éléments html nécessaires

Une explication de cette magie de rue

en js on s'intéresse à la ligne :

Var place = eval($("#map-canvas").attr("data-place"));

$("#map-canvas").attr("données-lieu")

Obtient l'attribut data-place de l'élément avec l'identifiant map-canvas après quoi eval() convertit la chaîne en code js, plus précisément en tableau car il y a des crochets.

Selon la spécification HTML5, les navigateurs ignorent les attributs des balises commençant par data - cet attribut n'affectera pas le rendu, mais sa valeur peut être utilisée en javascript.

Le code html peut être modifié :