Démarrer avec JavaScript

Téléchargez javascript eBook

Remarques

JavaScript (à ne pas confondre avec Java ) est un langage dynamique faiblement typé utilisé pour les scripts côté client et côté serveur.

JavaScript est un langage sensible à la casse. Cela signifie que la langue considère les lettres majuscules comme étant différentes de leurs homologues minuscules. Les mots-clés en JavaScript sont tous en minuscules.

JavaScript est une implémentation fréquemment référencée de la norme ECMAScript.

Les rubriques de cette balise font souvent référence à l'utilisation de JavaScript dans le navigateur, sauf indication contraire. Les fichiers JavaScript ne peuvent pas être exécutés directement par le navigateur. il est nécessaire de les intégrer dans un document HTML. Si vous souhaitez essayer un code JavaScript, vous pouvez l'intégrer dans un contenu d'espace réservé comme celui-ci et enregistrer le résultat sous example.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

Versions

Version Date de sortie
1 1997-06-01
2 1998-06-01
3 1998-12-01
E4X 2004-06-01
5 2009-12-01
5.1 2011-06-01
6 2015-06-01
7 2016-06-14
8 2017-06-27

Utiliser console.log ()

introduction

Tous les navigateurs Web modernes, NodeJ ainsi que presque tous les autres environnements JavaScript prennent en charge l'écriture de messages sur une console à l'aide d'une suite de méthodes de journalisation. La plus courante de ces méthodes est console.log() .

Dans un environnement de navigateur, la fonction console.log() est principalement utilisée à des fins de débogage.


Commencer

Ouvrez la console JavaScript dans votre navigateur, tapez ce qui suit et appuyez sur Entrée :

console.log("Hello, World!"); 

Cela enregistrera les informations suivantes sur la console:

Sortie du journal de la console dans Google Chrome

Dans l'exemple ci-dessus, la fonction console.log() Hello, World! à la console et retourne undefined (indiqué ci-dessus dans la fenêtre de sortie de la console). C'est parce que console.log() n'a pas de valeur de retour explicite.


Variables de journalisation

console.log() peut être utilisé pour enregistrer des variables de toute nature; pas seulement des ficelles. Il suffit de passer la variable à afficher dans la console, par exemple:

var foo = "bar";
console.log(foo);
 

Cela enregistrera les informations suivantes sur la console:

console.log () peut être utilisé avec des variables

Si vous souhaitez enregistrer deux valeurs ou plus, séparez-les simplement par des virgules. Des espaces seront automatiquement ajoutés entre chaque argument lors de la concaténation:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
Cela enregistrera les informations suivantes sur la console:

Console Concat


Placeholders

Vous pouvez utiliser console.log() en combinaison avec des espaces réservés:

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
 

Cela enregistrera les informations suivantes sur la console:

entrer la description de l'image ici


Journalisation d'objets

Nous voyons ci-dessous le résultat de la connexion d'un objet. Cela est souvent utile pour consigner les réponses JSON provenant d'appels API.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
}); 

Cela enregistrera les informations suivantes sur la console:

Objet enregistré dans la console


Enregistrement d'éléments HTML

Vous avez la possibilité de consigner tout élément existant dans le DOM . Dans ce cas, nous enregistrons l'élément corps:

console.log(document.body);
 

Cela enregistrera les informations suivantes sur la console:

entrer la description de l'image ici


Note de fin

Pour plus d'informations sur les fonctionnalités de la console, consultez la rubrique Console .

Utiliser l'API DOM

DOM signifie Document de référence O bjet M odèle. C'est une représentation orientée objet de documents structurés tels que XML et HTML .

La définition de la propriété textContent d'un Element est une façon de générer du texte sur une page Web.

Par exemple, considérez la balise HTML suivante:

<p id="paragraph"></p>
 

Pour changer sa propriété textContent , nous pouvons exécuter le code JavaScript suivant:

document.getElementById("paragraph").textContent = "Hello, World";
 

Cela sélectionnera l'élément avec le paragraph id et définira son contenu textuel sur "Hello, World":

<p id="paragraph">Hello, World</p>
 

(Voir aussi cette démo)


Vous pouvez également utiliser JavaScript pour créer un nouvel élément HTML par programmation. Par exemple, considérez un document HTML avec le corps suivant:

<body>
   <h1>Adding an element</h1>
</body> 
 

Dans notre JavaScript, nous créons une nouvelle <p> avec une propriété textContent de et l’ajoutons à la fin du corps html:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
 

Cela va changer votre corps HTML à ce qui suit:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>
 

Notez que pour manipuler des éléments dans le DOM en utilisant JavaScript, le code JavaScript doit être exécuté après la création de l'élément correspondant dans le document. Pour ce faire, placez les balises JavaScript <script> après tous vos autres contenus <body> . Vous pouvez également utiliser un écouteur d'événement pour écouter, par exemple. window événement onload window , l'ajout de votre code à cet écouteur d'événements retardera l'exécution de votre code jusqu'à ce que tout le contenu de votre page ait été chargé.

Une troisième façon de vous assurer que tout votre DOM a été chargé consiste à envelopper le code de manipulation DOM avec une fonction de délai d'attente de 0 ms . De cette façon, ce code JavaScript est remis en file d'attente à la fin de la file d'attente d'exécution, ce qui permet au navigateur de terminer certaines tâches non-JavaScript qui attendaient d'être terminées avant de se lancer dans cette nouvelle partie de JavaScript.

Utiliser l'API DOM (avec texte graphique: Canvas, SVG ou fichier image)

Utiliser des éléments de toile

HTML fournit l'élément canvas pour créer des images basées sur des rasters.

Créez d'abord un canevas pour contenir les informations sur les pixels de l'image.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

Ensuite, sélectionnez un contexte pour la toile, dans ce cas en deux dimensions:

var ctx = canvas.getContext('2d');
 

Ensuite, définissez les propriétés liées au texte:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
 

Ensuite, insérez l'élément canvas dans la page pour prendre effet:

document.body.appendChild(canvas);
 

Utiliser SVG

SVG est destiné à la création de graphiques vectoriels évolutifs et peut être utilisé dans HTML.

Créez d'abord un conteneur d'éléments SVG avec les dimensions suivantes:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
 

Créez ensuite un élément de text avec les caractéristiques de positionnement et de police souhaitées:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
 

Ajoutez ensuite le texte à afficher dans l'élément de text :

text.textContent = 'Hello world!';
 

Ajoutez enfin l'élément text à notre conteneur svg et ajoutez l'élément de conteneur svg au document HTML:

svg.appendChild(text);
document.body.appendChild(svg);
 

Fichier d'image

Si vous avez déjà un fichier image contenant le texte souhaité et que vous l'avez placé sur un serveur, vous pouvez ajouter l'URL de l'image, puis ajouter l'image au document comme suit:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
 

Utiliser window.alert ()

La méthode d' alert affiche un message d'alerte à l'écran. Le paramètre de la méthode d'alerte est affiché à l'utilisateur en texte brut :

window.alert(message);
 

Parce que window est l’objet global, vous pouvez aussi appeler l’abréviation suivante:

alert(message);
 

Alors, qu'est-ce que window.alert() fait? Eh bien, prenons l'exemple suivant:

alert('hello, world');
 

Dans Chrome, cela produirait une fenêtre contextuelle comme celle-ci: alerte

Remarques

La méthode alert est techniquement une propriété de l'objet window , mais comme toutes window propriétés de window sont des variables globales automatiquement, nous pouvons utiliser alert comme une variable globale plutôt que comme une propriété de window - ce qui signifie que vous pouvez directement utiliser alert() au lieu de window.alert() .

Contrairement à l'utilisation de console.log , les alert agissent comme une invite modale, ce qui signifie que l' alert appel du code console.log jusqu'à la réponse à l'invite. Traditionnellement, cela signifie qu'aucun autre code JavaScript ne sera exécuté tant que l'alerte n'est pas supprimée:

alert('Pause!');
console.log('Alert was dismissed');
 

Cependant, la spécification permet effectivement à d'autres codes déclenchés par des événements de continuer à s'exécuter même si une boîte de dialogue modale est toujours affichée. Dans de telles implémentations, il est possible qu'un autre code s'exécute pendant que la boîte de dialogue modale est affichée.

Vous trouverez plus d'informations sur l' utilisation de la méthode d' alert dans la rubrique d'invites des modaux .

L'utilisation d'alertes est généralement déconseillée au profit d'autres méthodes qui n'empêchent pas les utilisateurs d'interagir avec la page - afin de créer une meilleure expérience utilisateur. Néanmoins, il peut être utile pour le débogage.

À partir de Chrome 46.0, window.alert() est bloqué dans un <iframe> sauf si son attribut sandbox a la valeur allow-modal .

Utiliser window.confirm ()

La window.confirm() affiche une boîte de dialogue modale avec un message facultatif et deux boutons, OK et Annuler.

Prenons maintenant l'exemple suivant:

result = window.confirm(message);
 

Ici, message est la chaîne facultative à afficher dans la boîte de dialogue et le résultat est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (true signifie OK).

window.confirm() est généralement utilisé pour demander une confirmation de l'utilisateur avant d'effectuer une opération dangereuse comme la suppression d'un élément dans un panneau de configuration:

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}
 

La sortie de ce code ressemblerait à ceci dans le navigateur:

Le dialogue de confirmation est très simple: Message, OK, Annuler

Si vous en avez besoin pour une utilisation ultérieure, vous pouvez simplement stocker le résultat de l'interaction de l'utilisateur dans une variable:

var deleteConfirm = window.confirm("Are you sure you want to delete this?");
 

Remarques

  • L'argument est facultatif et n'est pas requis par la spécification.
  • Les boîtes de dialogue sont des fenêtres modales - elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la boîte de dialogue n'est pas fermée. Pour cette raison, vous ne devez utiliser aucune fonction qui crée une boîte de dialogue (ou une fenêtre modale). Et peu importe, il y a de très bonnes raisons d'éviter d'utiliser des boîtes de dialogue pour confirmation.
  • À partir de Chrome 46.0, cette méthode est bloquée dans un <iframe> sauf si son attribut sandbox a la valeur allow-modal.
  • Il est communément admis d'appeler la méthode de confirmation avec la notation de fenêtre supprimée car l'objet window est toujours implicite. Cependant, il est recommandé de définir explicitement l'objet window car le comportement attendu peut changer en raison de l'implémentation à un niveau de portée inférieur avec des méthodes portant un nom similaire.

Utiliser window.prompt ()

Un moyen simple d'obtenir une entrée d'un utilisateur est d'utiliser la méthode prompt() .

Syntaxe

prompt(text, [default]);
  • text : le texte affiché dans la boîte d'invite.
  • default : une valeur par défaut pour le champ de saisie (facultatif).

Exemples

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

Boîte de invite

Si l'utilisateur clique sur le bouton OK , la valeur d'entrée est renvoyée. Sinon, la méthode renvoie null .

La valeur de retour de prompt est toujours une chaîne, à moins que l'utilisateur ne clique sur Cancel , auquel cas cette valeur renvoie null . Safari est une exception dans la mesure où lorsque l'utilisateur clique sur Annuler, la fonction renvoie une chaîne vide. À partir de là, vous pouvez convertir la valeur de retour en un autre type, tel qu'un entier .

Remarques

  • Pendant que la boîte de dialogue est affichée, l'utilisateur ne peut accéder à d'autres parties de la page, car les boîtes de dialogue sont des fenêtres modales.
  • À partir de Chrome 46.0, cette méthode est bloquée dans un <iframe> sauf si son attribut sandbox a la valeur allow-modal.

Stats

15071 Contributors: 179
Monday, August 7, 2017
Sous licence: CC-BY-SA

Non affilié à Stack Overflow
Rip Tutorial: info@zzzprojects.com

Télécharger le eBook