Tutoriel JavaScript

JS ACCUEIL Présentation de JS JS Où aller Sortie JS Déclarations JS Syntaxe JS Commentaires JS Variables JS JS Let Const JS Opérateurs JS Arithmétique JS Affectation JS Types de données JS Fonctions JavaScript Objets JS Événements JS Chaînes JS Méthodes de chaîne JS Recherche de chaîne JS Modèles de chaîne JS Numéros JS Méthodes de nombre JS Tableaux JS Méthodes de tableau JS Tri de tableau JS Itération de tableau JS Const tableau JS Dates JS Formats de date JS Méthodes d'obtention de date JS Méthodes de définition de date JS JS Mathématiques JS Aléatoire Booléens JS Comparaisons JS Conditions JS Commutateur JS Boucle JS pour Boucle JS pour dans Boucle JS pour de Boucle JS pendant Pause JS Itérables JS Ensembles JS Cartes JS Type de JS Conversion de type JS JS au niveau du bit JS RegExp Erreurs JS Portée JS JS Levage Mode JS strict JS ce mot clé Fonction flèche JS Cours JS JSJSON Débogage JS Guide de style JS Meilleures pratiques JS Erreurs JS Performances JS Mots réservés JS

Versions JavaScript

Versions JavaScript JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historique JS

Objets JS

Définitions d'objet Propriétés de l'objet Méthodes d'objet Affichage d'objet Accesseurs d'objet Constructeurs d'objets Prototypes d'objets Itérables d'objet Ensembles d'objets Cartes d'objets Référence d'objet

Fonctions JavaScript

Définitions des fonctions Paramètres de fonction Appel de fonction Appel de fonction Fonction Appliquer Fermetures de fonction

Cours JS

Introduction de classe Héritage de classe Classe Statique

JS asynchrone

Rappels JS JS asynchrone JS promet JS asynchrone/en attente

JS HTML DOM

Introduction DOM Méthodes DOM Documents DOM Éléments DOM HTML DOM Formulaires DOM DOM CSS Animations DOM Événements DOM Écouteur d'événements DOM Navigation DOM Nœuds DOM Collections DOM Listes de nœuds DOM

Nomenclature du navigateur JS

Fenêtre JS Écran JavaScript Emplacement JS Historique JS Navigateur JS Alerte contextuelle JS Calendrier JS Cookies JavaScript

API Web JS

Présentation de l'API Web API des formulaires Web API d'historique Web API de stockage Web API de travail Web API de récupération Web API de géolocalisation Web

JS AJAX

Introduction à AJAX AJAX XMLHttp Requête AJAX Réponse AJAX Fichier XML AJAX PHP AJAX ASP AJAX Base de données AJAX Applications AJAX Exemples AJAX

JSJSON

Présentation JSON Syntaxe JSON JSON contre XML Types de données JSON Analyse JSON Chaîne JSON Objets JSON Tableaux JSON Serveur JSON JSON PHP HTML JSON JSON JSONP

JS contre jQuery

Sélecteurs jQuery jQuery HTML jQuery CSS jQuery DOM

Graphiques JS

Graphiques JS Canevas JS JS Complot JS Chart.js Graphique Google JS JS D3.js

Exemples JS

Exemples JS JS HTML DOM Entrée HTML JS Objets HTML JS Événements HTML JS Navigateur JS Éditeur JavaScript Exercices JS Questionnaire JS Certificat JS

Références JavaScript

Objets JavaScript Objets DOM HTML


Propriétés de l'objet JavaScript


Les propriétés sont la partie la plus importante de tout objet JavaScript.


Propriétés JavaScript

Les propriétés sont les valeurs associées à un objet JavaScript.

Un objet JavaScript est une collection de propriétés non ordonnées.

Les propriétés peuvent généralement être modifiées, ajoutées et supprimées, mais certaines sont en lecture seule.


Accéder aux propriétés JavaScript

La syntaxe pour accéder à la propriété d'un objet est :

objectName.property      // person.age

ou

objectName["property"]   // person["age"]

ou

objectName[expression]   // x = "age"; person[x]

L'expression doit correspondre à un nom de propriété.

Exemple 1

person.firstname + " is " + person.age + " years old.";

Exemple 2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript pour... dans la boucle

L'instruction JavaScript for...inparcourt les propriétés d'un objet.

Syntaxe

for (let variable in object) {
  // code to be executed
}

Le bloc de code à l'intérieur de la for...inboucle sera exécuté une fois pour chaque propriété.

Parcourant les propriétés d'un objet :

Exemple

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

Ajout de nouvelles propriétés

Vous pouvez ajouter de nouvelles propriétés à un objet existant en lui donnant simplement une valeur.

Supposons que l'objet personne existe déjà - vous pouvez alors lui donner de nouvelles propriétés :

Exemple

person.nationality = "English";

Suppression de propriétés

Le mot- deleteclé supprime une propriété d'un objet :

Exemple

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

ou supprimer personne["âge"] ;

Exemple

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

Le mot- deleteclé supprime à la fois la valeur de la propriété et la propriété elle-même.

Après la suppression, la propriété ne peut pas être utilisée avant d'être à nouveau ajoutée.

L' deleteopérateur est conçu pour être utilisé sur les propriétés de l'objet. Il n'a aucun effet sur les variables ou les fonctions.

L' deleteopérateur ne doit pas être utilisé sur des propriétés d'objet JavaScript prédéfinies. Cela peut planter votre application.


Objets imbriqués

Les valeurs d'un objet peuvent être un autre objet :

Exemple

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

Vous pouvez accéder aux objets imbriqués en utilisant la notation par points ou la notation par crochet :

Exemple

myObj.cars.car2;

ou:

Exemple

myObj.cars["car2"];

ou:

Exemple

myObj["cars"]["car2"];

ou:

Exemple

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Tableaux et objets imbriqués

Les valeurs des objets peuvent être des tableaux et les valeurs des tableaux peuvent être des objets :

Exemple

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

Pour accéder aux tableaux à l'intérieur des tableaux, utilisez une boucle for-in pour chaque tableau :

Exemple

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

Attributs de propriété

Toutes les propriétés ont un nom. De plus, ils ont aussi une valeur.

La valeur est l'un des attributs de la propriété.

Les autres attributs sont : énumérables, configurables et inscriptibles.

Ces attributs définissent comment la propriété est accessible (est-elle lisible ?, est-elle accessible en écriture ?)

En JavaScript, tous les attributs peuvent être lus, mais seul l'attribut value peut être modifié (et uniquement si la propriété est accessible en écriture).

( ECMAScript 5 a des méthodes pour obtenir et définir tous les attributs de propriété)


Propriétés du prototype

Les objets JavaScript héritent des propriétés de leur prototype.

Le deletemot-clé ne supprime pas les propriétés héritées, mais si vous supprimez une propriété de prototype, cela affectera tous les objets hérités du prototype.