Qu’est-ce que JavaScript ? Un aperçu du langage de script le plus populaire du web

Qui n’a pas été confronté à une demande de mise à jour de Java lorsqu’il a tenté d’accéder à certains sites web ?

Alors que de nombreuses personnes connaissent Java grâce aux fonctions interactives des sites web, les utilisateurs peuvent être moins familiers avec JavaScript – ou, en fait, ils peuvent considérer à tort que les deux sont identiques.

Dans cet article, nous abordons ce qu’est JavaScript et les différences entre Java et JavaScript. Ensuite, nous donnerons un aperçu de certaines des fonctionnalités les plus importantes de JavaScript.

C’est parti !

Consultez notre guide vidéo sur le JavaScript

Qu’est-ce que JavaScript ?

Plus simplement, JavaScript est un langage de script populaire permettant d’ajouter des fonctionnalités interactives et d’autres contenus web dynamiques aux pages web. Les exemples les plus connus de contenu JavaScript sont les formulaires à remplir, les diaporamas de galeries de photos et les graphiques animés.

JavaScript est également relativement intuitif et simple à apprendre. C’est un excellent point de départ pour ceux qui cherchent à en savoir plus sur le développement de sites web.

JavaScript est la dernière couche de fonctionnalité des sites web hautement interactifs. HTML fournit la structure de base de la page. CSS est l’élément de mode de votre site web – il définit le style de votre site. JavaScript ajoute ensuite du piquant.

Lorsque vous apprenez JavaScript, il est essentiel de comprendre la relation entre HTML, CSS et JavaScript, et la manière dont ils s’assemblent pour afficher un site web.

À quoi sert JavaScript

JavaScript a diverses applications que toute personne ayant visité des pages web interactives ou des applications mobiles aura probablement expérimentées. Si le développement de sites web – y compris l’ajout d’éléments tels que des formulaires interactifs et des animations – est l’utilisation la plus traditionnelle de JavaScript, il est également utilisé dans :

• Les jeux basés sur un navigateur web – y compris les jeux 2D et 3D
• Le développement d’applications mobiles – avantageux parce qu’il n’est pas lié à la plateforme du téléphone.
• Les présentations – création de jeux de diapositives animées sur le web.

Bien que la plupart des applications JavaScript soient côté client, JavaScript est également utile dans les applications côté serveur, comme la création de serveurs web.

Différences entre Java et JavaScript

Tout d’abord, il est important de noter que Java et JavaScript ne sont pas liés, même s’ils partagent le terme « Java ». Java et JavaScript sont tous deux des langages permettant de développer des pages et des applications web. Cependant, ils présentent des différences distinctes, notamment

• Programmation orientée objet : Java est un langage de programmation orienté objet. JavaScript est un langage de script orienté objet.
• Syntaxe : La syntaxe de JavaScript n’est pas aussi formelle ou structurée que celle de Java. Elle est donc plus simple pour la plupart des utilisateurs.
• Compilation : Java est un langage compilé, tandis que JavaScript est un langage interprété qui est interprété ligne par ligne au moment de l’exécution. Les langages compilés ont tendance à être plus rapides, mais les langages interprétés ont tendance à être plus flexibles.
• Environnement : Vous pouvez utiliser les applications Java dans pratiquement n’importe quel environnement en les exécutant dans des machines virtuelles ou des navigateurs ; JavaScript est réservé aux navigateurs.
• Utilisation de la mémoire : Java est plus gourmand en mémoire que JavaScript, ce qui fait que JavaScript est préférable pour les pages et les applications web.

JavaScript est-il sécurisé ?

Bien que JavaScript soit largement accepté et utilisé pour le développement web, il présente des vulnérabilités bien connues. L’une des cyber-attaques les plus courantes introduites par les vulnérabilités de JavaScript est l’attaque XSS (cross-site scripting). Les cyber-criminels utilisent les attaques XSS pour accéder à des informations d’identité et les voler.

Pour minimiser les exploits, il est essentiel de tester et de réviser votre code pendant le développement. Les méthodes de test telles que les tests statiques et dynamiques de sécurité des applications (SAST et DAST) permettent d’identifier les vulnérabilités à tous les stades du cycle de développement du logiciel.

Selon les analystes de sécurité de Cloud Defense, SAST vérifie que votre code ne viole pas les règles de sécurité et compare les vulnérabilités trouvées entre les branches source et cible. Vous serez informé si les dépendances de votre projet sont affectées par des vulnérabilités nouvellement divulguées.

Vanilla JavaScript

Vanilla JavaScript est une implémentation légère du langage JavaScript pur sans bibliothèques ajoutées. Ici, le terme « vanilla » fait référence à un JavaScript non personnalisé.

De nombreuses grandes entreprises utilisent Vanilla JS, dont Google, Microsoft, Apple, Amazon et d’autres. Vanilla JavaScript est un excellent moyen d’apprendre les bases de la programmation JavaScript avant d’ajouter des liens vers des fonctionnalités plus avancées proposées dans les bibliothèques.

Bibliothèques JavaScript

Une bibliothèque JavaScript est une collection de code pré-écrit qui exécute certaines fonctions. Les bibliothèques permettent même aux utilisateurs novices de créer rapidement des sites web. Et elles permettent aux utilisateurs novices et expérimentés de gagner un temps considérable dans la création de sites et d’applications.

Il existe de nombreuses bibliothèques JavaScript, mais parmi les plus populaires figurent jQuery, Anime.js, Animate on Scroll et Leaflet.js.

Le lien entre JavaScript et les frameworks de sites web

Les frameworks de sites web sont des constructeurs de sites web avancés, généralement dotés de vastes bibliothèques de fonctionnalités préétablies et de suites de tests. Vous connaissez peut-être les frameworks côté serveur tels que Laravel, Ruby on Rails ou Django. Mais il existe également plusieurs frameworks populaires côté client basés sur JavaScript, notamment React.js, Vue.js et Node.js.

Le DOM JavaScript

Le DOM, ou Document Object Model, agit comme une interface entre un langage de programmation tel que JavaScript et un document sous-jacent – plus précisément, les documents HTML et XML.

DOM est une norme du W3C (World Wide Web Consortium), définie comme « une interface neutre du point de vue de la plateforme et du langage qui permet aux programmes et aux scripts d’accéder dynamiquement au contenu, à la structure et au style d’un document et de les mettre à jour. » Les documents sont constitués d’une collection d’éléments individuels et de propriétés (texte, boutons, liens, etc.).

Composants de base de JavaScript

Comme d’autres langages de programmation, JavaScript utilise des variables pour identifier les emplacements de stockage des données. Les variables peuvent être globales (accessibles par n’importe quelle fonction du code) ou locales, également appelées block-scoped (accessibles uniquement dans le bloc où elles sont déclarées).

Les variables peuvent contenir des valeurs fixes (constantes appelées littérales) ou des valeurs modifiables. JavaScript possède une syntaxe particulière pour déclarer (créer) les constantes et les variables, et leur attribuer des valeurs.

Déclarer une constante

Les constantes vraies sont créées à l’aide d’une déclaration const. Const  crée des constantes en lecture seule, non modifiables et adaptées au bloc (« adaptées au bloc » signifie que la constante n’est pas accessible en dehors du bloc déclaré).

Voici un exemple d’utilisation de const pour créer une constante :

const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618

Notez l’utilisation de lettres majuscules pour nommer la constante ; il s’agit d’une convention de dénomination communément acceptée, bien qu’elle ne soit pas obligatoire. Les noms de variables, y compris les noms de const, doivent commencer par une lettre (minuscule ou majuscule), un underscore (_) ou le signe dollar ($). Ils sont sensibles à la casse, alors n’oubliez pas comment vous nommez vos variables.

Les constantes, contrairement aux variables, doivent se voir attribuer une valeur à la création. L’instruction suivante renverra une erreur :

const GOLDEN_RATIO;

Déclaration d’une variable

Les variables sont déclarées à l’aide du mot-clé var. Il n’est pas nécessaire de leur attribuer une valeur lors de la déclaration, bien que cela soit permis et fréquemment fait. Le mot-clé var a une portée globale plutôt qu’une portée de bloc (sauf s’il se trouve dans une fonction, auquel cas il a une portée de fonction).

var variable1; // declare a variable called variable1

var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021

variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1

console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"

Notez que les déclarations en JavaScript doivent se terminer par un point-virgule. Vous pouvez créer des commentaires en utilisant // – JavaScript ignore tout ce qui se trouve entre // et la fin de la ligne.

Les variables peuvent contenir divers types de données, notamment des nombres, des chaînes de caractères et des objets. L’affectation des variables en JavaScript est dynamique. Ainsi, vous pouvez affecter une variable à un type de données différent dans le même code.

Hoisting

Maintenant que vous comprenez la déclaration de variable en JavaScript, nous pouvons discuter de la façon dont JavaScript traite l’emplacement de la déclaration de variable. La pratique de codage communément acceptée consiste à déclarer les variables avant, ou en même temps, que vous les définissez. Certains langages de programmation l’exigent même.

JavaScript permet toutefois de déclarer des variables après leur définition ou leur utilisation. Grâce à une fonction appelée « hoisting », JavaScript déplace les déclarations en haut du script ou de la fonction en cours. Si le hoisting peut simplifier la programmation en permettant à un programmeur de corriger un défaut de déclaration sans avoir à parcourir le code, déclarer des variables après leur utilisation n’est pas conforme aux meilleures pratiques de programmation.

Le hoisting peut également causer des problèmes inattendus, principalement parce que le hoisting ne s’applique qu’à la déclaration. Si une variable est déclarée et initialisée dans la même déclaration, le hoisting créera une déclaration en haut du bloc et attribuera à la variable une valeur indéfinie. Ainsi, toute utilisation de la variable dans le bloc avant l’instruction de déclaration réelle supposera que la variable est indéfinie plutôt que d’avoir la valeur d’initialisation.

Utilisons l’exemple ci-dessus pour examiner le comportement du hoisting :

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

console.log(variable_1 + " " + variable_2); //

var variable_2 = "2021" // declare and initialize a string variable called variable2

Si le hissage déplace la déclaration variable_2 vers le haut du bloc, il ne déplace pas la valeur assignée. Cette logique fonctionne de manière à peu près équivalente à la syntaxe suivante :

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

var variable_2;

console.log(variable1 + " " + variable2); //

variable_2 = "2021" // assign string value to variable2

Dans les deux cas, la valeur finale « Thank goodness it’s 2021 » ne fait pas partie de la sortie.

Nous vous recommandons d’utiliser la meilleure pratique consistant à déclarer les variables pour éviter les problèmes potentiels et créer un code plus propre.

Objets

JavaScript est basé sur le concept d’objets. Les objets sont des conteneurs qui peuvent contenir des propriétés, des méthodes ou les deux.

Prenons un exemple simple. Vous avez un objet nommé « country ». Ses propriétés comprennent son nom, son continent, sa capitale et sa population. Vous pouvez créer cet objet de plusieurs façons avec JavaScript.

Tout d’abord, vous pouvez utiliser l’approche de l’objet littéral ou de l’initialisateur d’objet :

var country = {

    name:"France",

    continent:"Europe",

    capital:"Paris",

    population:62250000;

}

Vous pouvez également instancier un objet, puis lui attribuer des propriétés :

var country = new Object();

country.name = "France";

country.continent = "Europe";

country.capital = "Paris";

country.population = 62250000;

Notez que vous faites référence aux propriétés d’un objet en utilisant la syntaxe object.property.

Enfin, vous pouvez créer des objets à l’aide de fonctions du constructeur :

function country(name, continent, capital, population) {

    country.name = name;

    country.continent = continent;

    country.capital = capital;

    country.population = population;

}

La création d’une instance de l’objet se fait alors par :

france = new country("France","Europe","Paris",62250000)

Les propriétés d’un objet peuvent être des variables ou des fonctions. Comme nous le verrons plus loin, lorsqu’une propriété d’objet est une fonction, on l’appelle une méthode.

Objets et classes

En un mot, une classe est un modèle de structure générique pour un objet. Les classes utilisent la forme constructeur pour décrire les objets.

class country {

    Constructor (name,continent,capital,population) {

        country.name = name;

        country.continent = continent;

        country.capital = capital;

        country.population = population;

    }

}

Tout comme les objets, les classes peuvent avoir des méthodes.

Travailler avec des constantes et des variables

Comme pour les autres langages, Java dispose de plusieurs types d’opérateurs à utiliser avec les variables et les fonctions, dont la plupart sont immédiatement reconnaissables :

• Opérateurs d’affectation (=, +=, -=, *=, /=, %=)
• Opérateurs de comparaison (==, ===, !=, !==, >, >=, <, <=)
• Opérateurs binaires et logiques (voir ci-dessous)
• Opérateurs arithmétiques (+, -, *, /, %, ++, --)
• Opérateurs spéciaux

Quelques opérateurs sont moins familiers aux programmeurs novices, comme les opérateurs de comparaison identiques et non identiques.

=== compare si deux opérandes ont à la fois la même valeur et le même type (c’est-à-dire qu’ils sont identiques). !== permet de déterminer si deux opérandes ne sont pas identiques.

Prenons l’exemple suivant :

var variable_1 = 5; // declare variable_1 and assign numeric value 5

var variable_2 = "5"; // declare variable_2 and assign string value "5"

console.log(variable_1 === variable_2);

console.log(variable_1 !== variable_2);

La sortie pour ce bout de code serait :

FALSE
TRUE

Il est également essentiel de comprendre la différence entre = (un opérateur d’affectation) et == (un opérateur de comparaison).

Alors que = définit la valeur d’une variable, == vérifie si deux opérandes ont la même valeur, y compris si une variable a une valeur donnée. Vous ne devez pas utiliser l’opérateur = dans les instructions conditionnelles (comme les instructions IF) pour vérifier l’équivalence.

Opérateurs binaires et logiques

JavaScript prend en charge les opérations AND (& ), OR (|), NOT (~) et XOR (^). En JavaScript, ces opérations sont connues sous le nom d’opérateurs binaires. Les opérations par bit convertissent les opérandes en représentations binaires 32 bits avant d’opérer (par exemple, 20 devient 10100). Ces opérations sont appelées binaires car elles comparent les opérandes convertis bit par bit, puis renvoient un résultat binaire 32 bits converti en un nombre entier.

Exemple :

var variable_1 = 20;

var variable_2 = 50;

console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2

Convertir les opérandes en binaire :

20 = 010100

50 = 110010

Une opération OR renvoie la valeur true (1) lorsque l’un des deux bits est 1. La valeur de comparaison affichée est donc 110110 ou 53. En JavaScript, le terme opérateur logique fait référence aux opérations dont les opérandes ont uniquement les valeurs booléennes 0 ou 1. Les opérateurs logiques JavaScript sont && (AND logique), || (OR logique) et ! (NOT logique).

var variable_1;

var variable_2;

variable _1 = (6 > 5); // sets variable_1 to true or 1

variable_2 = (7 <= 6); // sets variable_2 to false or 0

Console.log(variable_1 && variable_2); // displays 0

Fonctions et méthodes

Les fonctions sont les bêtes de somme de JavaScript. Il s’agit de blocs de code qui exécutent des tâches spécifiques. Si vous êtes familier avec les procédures et les sous-routines d’autres langages de programmation, vous reconnaîtrez immédiatement les fonctions.

Les fonctions sont définies à l’aide de la syntaxe suivante :

function function_name(parameter list) {

    // tasks to be performed

}

La définition des fonctions n’est que la première étape ; vous devez ensuite invoquer les fonctions en utilisant () dans le code :

$()

La fonction $() est un raccourci pour la méthode getElementByID, qui, comme indiqué ci-dessus, renvoie l’ID d’un élément spécifique du DOM HTML. Elle est fréquemment utilisée pour manipuler des éléments dans un document. $() permet un codage JavaScript plus court et plus efficace.

Méthode traditionnelle :

document.getElementByID("element_id")

$() method:

$("element_id")

Fonction vs méthode

Les fonctions exécutent des tâches ; les méthodes sont des propriétés des objets qui contiennent une définition fonctionnelle. La syntaxe pour appeler les méthodes est object.function(). Les fonctions sont autonomes ; les méthodes sont associées à des objets.

Dans l’exemple ci-dessus, la méthode document.getElementByID("element_id") fait référence à un objet (document) et à la propriété associée à cet objet (getElementbyID()).

Il existe deux types de méthodes en JavaScript :

• Méthodes d’instance
• Méthodes statiques

Les méthodes d’instance peuvent accéder aux propriétés d’une instance d’objet et les manipuler. Les méthodes d’instance peuvent également appeler une autre méthode d’instance ou une méthode statique.

Les méthodes statiques contiennent la logique liée à une classe au lieu d’une instance de la classe. Pour créer une méthode statique, vous devez utiliser le mot static avant la définition de la fonction. Les méthodes statiques ne peuvent accéder qu’aux champs statiques ; elles ne peuvent pas accéder aux champs d’instance.

Promesses dans JavaScript

Une promesse est un objet qui produit un résultat à un moment futur. Dans la terminologie JavaScript, les promesses sont connues comme produisant et consommant du code.

Les fonctions peuvent prendre un temps non spécifié et significatif pour se terminer. Le code consommateur attend les résultats du code producteur asynchrone avant d’exécuter ses fonctions. Les promesses définissent la relation entre le code producteur et le code consommateur.

Les promesses ont trois états possibles : pending, fulfilled ou rejected. Dans la définition d’une promesse, deux arguments sont spécifiés : resolve ou reject. Pending est l’état initial d’une promesse et signifie que la promesse n’a été ni remplie ni rejetée. Fulfilled implique que la promesse est retournée résolue. Rejetée signifie que la promesse est retournée. Une promesse qui n’est plus à l’état d’attente est considérée comme réglée.

Voici un exemple de syntaxe pour créer une promesse :

var newPromise = new Promise(

    function(resolve, reject) {

        // condition to be tested

    }

)

Fermetures dans JavaScript

Les fermetures (closures) sont une fonctionnalité JavaScript qui déroute souvent les programmeurs, bien qu’elles ne soient pas aussi compliquées. Les fermetures JavaScript sont des méthodes permettant d’aborder le fonctionnement des fonctions imbriquées. Plus précisément, les fermetures permettent à une fonction interne d’accéder au contenu parent d’une fonction, en plus des variables globales ordinairement accessibles. Notez que si la fonction interne a accès aux variables de la fonction externe, l’inverse n’est pas vrai.

Pour comprendre les fermetures, vous devez vous rappeler les principes fondamentaux de la portée (scope). Les variables d’une fonction ne sont généralement accessibles qu’à partir de cette fonction, et la portée est créée par appel, et non de manière générique pour la fonction. Les fermetures répondent au fait que les variables disparaissent généralement après la fin d’une fonction. Elles permettent également aux variables de rester accessibles après l’exécution d’une fonction.

Considérons l’exemple de code suivant :

function outer_closure_function() {

    var outer_variable = "we want to keep the outer variable";

    var inner_closure_function = function() {

        inner_variable = "use closures because"

        console.log(inner_variable + " " + outer_variable);

    }

    return inner_closure_function;

}

var closure = outer_closure_function(); // returns a reference to inner_closure_function

closure(); // displays "use closures because we want to keep the outer variable"

Pour comprendre le fonctionnement de cette fermeture, parcourez le code ligne par ligne. Tout d’abord, vous définissez la fonction externe, puis une variable qui lui est associée. Ensuite, vous définissez la fonction interne. Il est important de noter que vous n’avez pas appelé la fonction interne, vous l’avez seulement définie. L’instruction suivante renvoie la fonction interne. Mais ce qu’elle renvoie n’est pas le résultat de la fonction interne ; c’est la fonction elle-même.

Ainsi, lorsque vous définissez la fermeture comme outer_closure_function, elle ne renvoie pas la valeur réelle de la fonction interne. Au lieu de cela, elle renvoie une référence à inner_closure_function. Même si la fonction externe a été complétée après cette déclaration et que outer_variable n’existe officiellement plus. Mais elle est toujours conservée dans la référence à inner_closure_function. Maintenant, lorsque vous appelez la fermeture dans la dernière instruction, le résultat souhaité s’affiche.

Pour mieux comprendre les fermetures, vous devez coder et tester quelques exemples. Il faut du temps pour les maîtriser. De plus, des mises à jour et des tests répétés vous aideront à créer un état d’esprit de développement agile.

Toutefois, gardez toujours à l’esprit les questions de sécurité. JavaScript peut être exposé à de graves problèmes de sécurité, tels que les injections SQL et LDAP, les attaques XSS, etc.

Résumé

Si vous souhaitez faire plus avec vos pages web qu’avec les services prêts à l’emploi comme Wix et Square, vous devriez envisager d’apprendre JavaScript. Il s’agit d’une introduction simple et facile à apprendre à la programmation de sites et d’applications qui peut vous aider à ajouter des fonctionnalités hautement interactives à votre site sans investir trop de temps dans le processus d’apprentissage.

JavaScript est également un excellent moyen de commencer à développer vos compétences en code, si vous décidez un jour de passer au niveau supérieur.