Consultez notre guide vid\u00e9o<\/a> sur le JavaScript<\/h3>\n<\/kinsta-video>\nQu’est-ce que JavaScript ?<\/h2>\n
Plus simplement, JavaScript est un langage de script populaire<\/a> permettant d’ajouter des fonctionnalit\u00e9s interactives et d’autres contenus web dynamiques aux pages web. Les exemples les plus connus de contenu JavaScript sont les formulaires \u00e0 remplir, les diaporamas de galeries de photos et les graphiques anim\u00e9s.<\/p>\nJavaScript est \u00e9galement relativement intuitif et simple \u00e0 apprendre. C’est un excellent point de d\u00e9part pour ceux qui cherchent \u00e0 en savoir plus sur le d\u00e9veloppement de sites web.<\/p>\n
JavaScript est la derni\u00e8re couche de fonctionnalit\u00e9 des sites web hautement interactifs. HTML<\/a> fournit la structure de base de la page. CSS<\/a> est l’\u00e9l\u00e9ment de mode de votre site web – il d\u00e9finit le style de votre site. JavaScript ajoute ensuite du piquant.<\/p>\nLorsque vous apprenez JavaScript, il est essentiel de comprendre la relation entre HTML, CSS et JavaScript, et la mani\u00e8re dont ils s’assemblent pour afficher un site web.<\/p>\n
\u00c0 quoi sert JavaScript<\/h2>\n
JavaScript a diverses applications<\/a> que toute personne ayant visit\u00e9 des pages web interactives ou des applications mobiles aura probablement exp\u00e9riment\u00e9es. Si le d\u00e9veloppement de sites web – y compris l’ajout d’\u00e9l\u00e9ments tels que des formulaires interactifs et des animations – est l’utilisation la plus traditionnelle de JavaScript, il est \u00e9galement utilis\u00e9 dans :<\/p>\n\n- Les jeux bas\u00e9s sur un navigateur web<\/strong> – y compris les jeux 2D et 3D<\/li>\n
- Le d\u00e9veloppement d’applications mobiles<\/strong> – avantageux parce qu’il n’est pas li\u00e9 \u00e0 la plateforme du t\u00e9l\u00e9phone.<\/li>\n
- Les pr\u00e9sentations<\/strong> – cr\u00e9ation de jeux de diapositives anim\u00e9es sur le web.<\/li>\n<\/ul>\n
Bien que la plupart des applications JavaScript soient c\u00f4t\u00e9 client, JavaScript est \u00e9galement utile dans les applications c\u00f4t\u00e9 serveur, comme la cr\u00e9ation de serveurs web.<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/dinosaur-gameover-1024x358.png\")
Le jeu du dinosaure, un exemple de jeu int\u00e9gr\u00e9 au navigateur web cr\u00e9\u00e9 \u00e0 l’aide de JavaScript.<\/figcaption><\/figure>\nDiff\u00e9rences entre Java et JavaScript<\/h2>\n
Tout d’abord, il est important de noter que Java et JavaScript ne sont pas li\u00e9s, m\u00eame s’ils partagent le terme \u00ab\u00a0Java\u00a0\u00bb. Java et JavaScript sont tous deux des langages permettant de d\u00e9velopper des pages et des applications web. Cependant, ils pr\u00e9sentent des diff\u00e9rences distinctes, notamment<\/p>\n
\n- Programmation orient\u00e9e objet<\/strong> : Java est un langage de programmation orient\u00e9 objet<\/a>. JavaScript est un langage de script orient\u00e9 objet.<\/li>\n
- Syntaxe<\/strong> : La syntaxe de JavaScript n’est pas aussi formelle ou structur\u00e9e que celle de Java. Elle est donc plus simple pour la plupart des utilisateurs.<\/li>\n
- Compilation<\/strong> : Java est un langage compil\u00e9, tandis que JavaScript est un langage interpr\u00e9t\u00e9 qui est interpr\u00e9t\u00e9 ligne par ligne au moment de l’ex\u00e9cution. Les langages compil\u00e9s ont tendance \u00e0 \u00eatre plus rapides, mais les langages interpr\u00e9t\u00e9s ont tendance \u00e0 \u00eatre plus flexibles.<\/li>\n
- Environnement<\/strong> : Vous pouvez utiliser les applications Java dans pratiquement n’importe quel environnement en les ex\u00e9cutant dans des machines virtuelles ou des navigateurs<\/a> ; JavaScript est r\u00e9serv\u00e9 aux navigateurs.<\/li>\n
- Utilisation de la m\u00e9moire<\/strong> : Java est plus gourmand en m\u00e9moire<\/a> que JavaScript, ce qui fait que JavaScript est pr\u00e9f\u00e9rable pour les pages et les applications web.<\/li>\n<\/ul>\n
JavaScript est-il s\u00e9curis\u00e9 ?<\/h2>\n
Bien que JavaScript soit largement accept\u00e9 et utilis\u00e9 pour le d\u00e9veloppement web, il pr\u00e9sente des vuln\u00e9rabilit\u00e9s bien connues. L’une des cyber-attaques les plus courantes introduites par les vuln\u00e9rabilit\u00e9s de JavaScript est l’attaque XSS (cross-site scripting). Les cyber-criminels utilisent les attaques XSS pour acc\u00e9der \u00e0 des informations d’identit\u00e9 et les voler.<\/p>\n
Pour minimiser les exploits, il est essentiel de tester et de r\u00e9viser votre code<\/a> pendant le d\u00e9veloppement. Les m\u00e9thodes de test telles que les tests statiques et dynamiques de s\u00e9curit\u00e9 des applications (SAST et DAST) permettent d’identifier les vuln\u00e9rabilit\u00e9s \u00e0 tous les stades du cycle de d\u00e9veloppement du logiciel.<\/p>\nSelon les analystes de s\u00e9curit\u00e9 de Cloud Defense<\/a>, SAST v\u00e9rifie que votre code ne viole pas les r\u00e8gles de s\u00e9curit\u00e9 et compare les vuln\u00e9rabilit\u00e9s trouv\u00e9es entre les branches source et cible. Vous serez inform\u00e9 si les d\u00e9pendances de votre projet sont affect\u00e9es par des vuln\u00e9rabilit\u00e9s nouvellement divulgu\u00e9es.<\/p>\nVanilla JavaScript<\/h2>\n
Vanilla JavaScript est une impl\u00e9mentation l\u00e9g\u00e8re du langage JavaScript pur sans biblioth\u00e8ques ajout\u00e9es. Ici, le terme \u00ab\u00a0vanilla\u00a0\u00bb fait r\u00e9f\u00e9rence \u00e0 un JavaScript non personnalis\u00e9.<\/p>\n
De nombreuses grandes entreprises utilisent Vanilla JS<\/a>, dont Google, Microsoft, Apple, Amazon et d’autres. Vanilla JavaScript est un excellent moyen d’apprendre les bases de la programmation JavaScript<\/a>\u00a0avant d’ajouter des liens vers des fonctionnalit\u00e9s plus avanc\u00e9es propos\u00e9es dans les biblioth\u00e8ques.<\/p>\nBiblioth\u00e8ques JavaScript<\/h2>\n
Une biblioth\u00e8que JavaScript est une collection de code pr\u00e9-\u00e9crit qui ex\u00e9cute certaines fonctions. Les biblioth\u00e8ques permettent m\u00eame aux utilisateurs novices de cr\u00e9er rapidement des sites web. Et elles permettent aux utilisateurs novices et exp\u00e9riment\u00e9s de gagner un temps consid\u00e9rable dans la cr\u00e9ation de sites et d’applications.<\/p>\n
Il existe de nombreuses biblioth\u00e8ques JavaScript<\/a>, mais parmi les plus populaires figurent jQuery, Anime.js, Animate on Scroll et Leaflet.js.<\/p>\nLe lien entre JavaScript et les frameworks de sites web<\/h2>\n
Les frameworks de sites web sont des constructeurs de sites web avanc\u00e9s, g\u00e9n\u00e9ralement dot\u00e9s de vastes biblioth\u00e8ques de fonctionnalit\u00e9s pr\u00e9\u00e9tablies et de suites de tests. Vous connaissez peut-\u00eatre les frameworks c\u00f4t\u00e9 serveur tels que Laravel<\/a>, Ruby on Rails ou Django. Mais il existe \u00e9galement plusieurs frameworks populaires c\u00f4t\u00e9 client bas\u00e9s sur JavaScript, notamment React.js, Vue.js et Node.js<\/a>.<\/p>\n![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reactjs2.jpg\")
Biblioth\u00e8que React (Image Source : Betica)<\/figcaption><\/figure>\nLe DOM JavaScript<\/h2>\n
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\u00e9cis\u00e9ment, les documents HTML et XML.<\/p>\n
DOM est une norme du W3C (World Wide Web Consortium)<\/a>, d\u00e9finie comme \u00ab\u00a0une interface neutre du point de vue de la plateforme et du langage qui permet aux programmes et aux scripts d’acc\u00e9der dynamiquement au contenu, \u00e0 la structure et au style d’un document et de les mettre \u00e0 jour.\u00a0\u00bb Les documents sont constitu\u00e9s d’une collection d’\u00e9l\u00e9ments individuels et de propri\u00e9t\u00e9s (texte<\/a>, boutons, liens, etc.).<\/p>\nComposants de base de JavaScript<\/h2>\n
Comme d’autres langages de programmation<\/a>, JavaScript utilise des variables pour identifier les emplacements de stockage des donn\u00e9es. Les variables peuvent \u00eatre globales (accessibles par n’importe quelle fonction du code) ou locales, \u00e9galement appel\u00e9es block-scoped (accessibles uniquement dans le bloc o\u00f9 elles sont d\u00e9clar\u00e9es).<\/p>\nLes variables peuvent contenir des valeurs fixes (constantes appel\u00e9es litt\u00e9rales) ou des valeurs modifiables. JavaScript poss\u00e8de une syntaxe particuli\u00e8re pour d\u00e9clarer (cr\u00e9er) les constantes et les variables, et leur attribuer des valeurs.<\/p>\n
D\u00e9clarer une constante<\/h3>\n
Les constantes vraies sont cr\u00e9\u00e9es \u00e0 l’aide d’une d\u00e9claration const<\/code><\/a>. Const<\/code> \u00a0cr\u00e9e des constantes en lecture seule, non modifiables et adapt\u00e9es au bloc (\u00ab\u00a0adapt\u00e9es au bloc\u00a0\u00bb signifie que la constante n’est pas accessible en dehors du bloc d\u00e9clar\u00e9).<\/p>\nVoici un exemple d’utilisation de const pour cr\u00e9er une constante :<\/p>\n
const GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\nNotez l’utilisation de lettres majuscules pour nommer la constante ; il s’agit d’une convention de d\u00e9nomination commun\u00e9ment accept\u00e9e, 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 (_<\/code>) ou le signe dollar ($<\/code>). Ils sont sensibles \u00e0 la casse, alors n’oubliez pas comment vous nommez vos variables.<\/p>\nLes constantes, contrairement aux variables, doivent se voir attribuer une valeur \u00e0 la cr\u00e9ation. L’instruction suivante renverra une erreur :<\/p>\n
const GOLDEN_RATIO;<\/code><\/pre>\nD\u00e9claration d’une variable<\/h3>\n
Les variables sont d\u00e9clar\u00e9es \u00e0 l’aide du mot-cl\u00e9 var<\/code><\/a>. Il n’est pas n\u00e9cessaire de leur attribuer une valeur lors de la d\u00e9claration, bien que cela soit permis et fr\u00e9quemment fait. Le mot-cl\u00e9 var<\/code> a une port\u00e9e globale plut\u00f4t qu’une port\u00e9e de bloc (sauf s’il se trouve dans une fonction, auquel cas il a une port\u00e9e de fonction).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\nNotez que les d\u00e9clarations en JavaScript doivent se terminer par un point-virgule. Vous pouvez cr\u00e9er des commentaires en utilisant \/\/<\/code> – JavaScript ignore tout ce qui se trouve entre \/\/<\/code> et la fin de la ligne.<\/p>\nLes variables peuvent contenir divers types de donn\u00e9es, notamment des nombres, des cha\u00eenes de caract\u00e8res et des objets. L’affectation des variables en JavaScript est dynamique. Ainsi, vous pouvez affecter une variable \u00e0 un type de donn\u00e9es diff\u00e9rent dans le m\u00eame code.<\/p>\n
Hoisting<\/h2>\n
Maintenant que vous comprenez la d\u00e9claration de variable en JavaScript<\/a>, nous pouvons discuter de la fa\u00e7on dont JavaScript traite l’emplacement de la d\u00e9claration de variable. La pratique de codage commun\u00e9ment accept\u00e9e consiste \u00e0 d\u00e9clarer les variables avant, ou en m\u00eame temps, que vous les d\u00e9finissez. Certains langages de programmation l’exigent m\u00eame.<\/p>\nJavaScript permet toutefois de d\u00e9clarer des variables apr\u00e8s leur d\u00e9finition ou leur utilisation. Gr\u00e2ce \u00e0 une fonction appel\u00e9e \u00ab\u00a0hoisting\u00a0\u00bb, JavaScript d\u00e9place les d\u00e9clarations en haut du script ou de la fonction en cours. Si le hoisting peut simplifier la programmation en permettant \u00e0 un programmeur de corriger un d\u00e9faut de d\u00e9claration sans avoir \u00e0 parcourir le code, d\u00e9clarer des variables apr\u00e8s leur utilisation n’est pas conforme aux meilleures pratiques de programmation<\/a>.<\/p>\nLe hoisting peut \u00e9galement causer des probl\u00e8mes inattendus, principalement parce que le hoisting ne s’applique qu’\u00e0 la d\u00e9claration. Si une variable est d\u00e9clar\u00e9e et initialis\u00e9e dans la m\u00eame d\u00e9claration, le hoisting cr\u00e9era une d\u00e9claration en haut du bloc et attribuera \u00e0 la variable une valeur ind\u00e9finie. Ainsi, toute utilisation de la variable dans le bloc avant l’instruction de d\u00e9claration r\u00e9elle supposera que la variable est ind\u00e9finie plut\u00f4t que d’avoir la valeur d’initialisation.<\/p>\n
Utilisons l’exemple ci-dessus pour examiner le comportement du hoisting :<\/p>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nSi le hissage d\u00e9place la d\u00e9claration variable_2<\/code> vers le haut du bloc, il ne d\u00e9place pas la valeur assign\u00e9e. Cette logique fonctionne de mani\u00e8re \u00e0 peu pr\u00e8s \u00e9quivalente \u00e0 la syntaxe suivante :<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nDans les deux cas, la valeur finale \u00ab\u00a0Thank goodness it’s 2021\u00a0\u00bb ne fait pas partie de la sortie.<\/p>\n
Nous vous recommandons d’utiliser la meilleure pratique consistant \u00e0 d\u00e9clarer les variables pour \u00e9viter les probl\u00e8mes potentiels et cr\u00e9er un code plus propre.<\/p>\n
Objets<\/h2>\n
JavaScript est bas\u00e9 sur le concept d’objets<\/a>. Les objets sont des conteneurs qui peuvent contenir des propri\u00e9t\u00e9s, des m\u00e9thodes ou les deux.<\/p>\nPrenons un exemple simple. Vous avez un objet nomm\u00e9 \u00ab\u00a0country\u00a0\u00bb. Ses propri\u00e9t\u00e9s comprennent son nom, son continent, sa capitale et sa population. Vous pouvez cr\u00e9er cet objet de plusieurs fa\u00e7ons avec JavaScript.<\/p>\n
Tout d’abord, vous pouvez utiliser l’approche de l’objet litt\u00e9ral ou de l’initialisateur d’objet :<\/p>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nVous pouvez \u00e9galement instancier un objet, puis lui attribuer des propri\u00e9t\u00e9s :<\/p>\n
var country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nNotez que vous faites r\u00e9f\u00e9rence aux propri\u00e9t\u00e9s d’un objet en utilisant la syntaxe object.property<\/code>.<\/p>\nEnfin, vous pouvez cr\u00e9er des objets \u00e0 l’aide de fonctions du constructeur :<\/p>\n
function country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nLa cr\u00e9ation d’une instance de l’objet se fait alors par :<\/p>\n
france = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nLes propri\u00e9t\u00e9s d’un objet peuvent \u00eatre des variables ou des fonctions. Comme nous le verrons plus loin, lorsqu’une propri\u00e9t\u00e9 d’objet est une fonction, on l’appelle une m\u00e9thode.<\/p>\n
Objets et classes<\/h3>\n
En un mot, une classe est un mod\u00e8le de structure g\u00e9n\u00e9rique pour un objet. Les classes utilisent la forme constructeur pour d\u00e9crire les objets.<\/p>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nTout comme les objets, les classes peuvent avoir des m\u00e9thodes.<\/p>\n
Travailler avec des constantes et des variables<\/h2>\n
Comme pour les autres langages, Java dispose de plusieurs types d’op\u00e9rateurs<\/a> \u00e0 utiliser avec les variables et les fonctions, dont la plupart sont imm\u00e9diatement reconnaissables :<\/p>\n\n- Op\u00e9rateurs d’affectation (
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n- Op\u00e9rateurs de comparaison (
==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n- Op\u00e9rateurs binaires et logiques (voir ci-dessous)<\/li>\n
- Op\u00e9rateurs arithm\u00e9tiques (
+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n- Op\u00e9rateurs sp\u00e9ciaux<\/li>\n<\/ul>\n
Quelques op\u00e9rateurs sont moins familiers aux programmeurs<\/a> novices, comme les op\u00e9rateurs de comparaison identiques et non identiques.<\/p>\n===<\/code> compare si deux op\u00e9randes ont \u00e0 la fois la m\u00eame valeur et le m\u00eame type (c’est-\u00e0-dire qu’ils sont identiques). !==<\/code> permet de d\u00e9terminer si deux op\u00e9randes ne sont pas identiques.<\/p>\nPrenons l’exemple suivant :<\/p>\n
var variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nLa sortie pour ce bout de code serait :<\/p>\n
FALSE\nTRUE<\/code><\/pre>\nIl est \u00e9galement essentiel de comprendre la diff\u00e9rence entre =<\/code> (un op\u00e9rateur d’affectation) et ==<\/code> (un op\u00e9rateur de comparaison).<\/p>\nAlors que =<\/code> d\u00e9finit la valeur d’une variable, ==<\/code> v\u00e9rifie si deux op\u00e9randes ont la m\u00eame valeur, y compris si une variable a une valeur donn\u00e9e. Vous ne devez pas utiliser l’op\u00e9rateur =<\/code> dans les instructions conditionnelles (comme les instructions IF) pour v\u00e9rifier l’\u00e9quivalence.<\/p>\nOp\u00e9rateurs binaires et logiques<\/h3>\n
JavaScript prend en charge les op\u00e9rations AND (&<\/code> ), OR (|<\/code>), NOT (~<\/code>) et XOR (^<\/code>). En JavaScript, ces op\u00e9rations sont connues sous le nom d’op\u00e9rateurs binaires. Les op\u00e9rations par bit convertissent les op\u00e9randes en repr\u00e9sentations binaires 32 bits avant d’op\u00e9rer (par exemple, 20 devient 10100). Ces op\u00e9rations sont appel\u00e9es binaires car elles comparent les op\u00e9randes convertis<\/a> bit par bit, puis renvoient un r\u00e9sultat binaire 32 bits converti en un nombre entier.<\/p>\nExemple :<\/p>\n
var variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\nConvertir les op\u00e9randes en binaire :<\/p>\n
20 = 010100\n\n50 = 110010<\/code><\/pre>\nUne op\u00e9ration OR renvoie la valeur true (1) lorsque l’un des deux bits est 1. La valeur de comparaison affich\u00e9e est donc 110110 ou 53. En JavaScript, le terme op\u00e9rateur logique fait r\u00e9f\u00e9rence aux op\u00e9rations dont les op\u00e9randes ont uniquement les valeurs bool\u00e9ennes 0 ou 1. Les op\u00e9rateurs logiques JavaScript sont &&<\/code> (AND logique), ||<\/code> (OR logique) et !<\/code> (NOT logique).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFonctions et m\u00e9thodes<\/h2>\n
Les fonctions sont les b\u00eates de somme de JavaScript<\/a>. Il s’agit de blocs de code qui ex\u00e9cutent des t\u00e2ches sp\u00e9cifiques. Si vous \u00eates familier avec les proc\u00e9dures et les sous-routines d’autres langages de programmation, vous reconna\u00eetrez imm\u00e9diatement les fonctions.<\/p>\nLes fonctions sont d\u00e9finies \u00e0 l’aide de la syntaxe suivante :<\/p>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\nLa d\u00e9finition des fonctions n’est que la premi\u00e8re \u00e9tape ; vous devez ensuite invoquer les fonctions en utilisant ()<\/code> dans le code :<\/p>\n$()<\/h3>\n
La fonction $()<\/code> est un raccourci pour la m\u00e9thode getElementByID, qui, comme indiqu\u00e9 ci-dessus, renvoie l’ID d’un \u00e9l\u00e9ment sp\u00e9cifique du DOM HTML. Elle est fr\u00e9quemment utilis\u00e9e pour manipuler des \u00e9l\u00e9ments dans un document. $()<\/code> permet un codage JavaScript plus court et plus efficace.<\/p>\nM\u00e9thode traditionnelle :<\/p>\n
document.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFonction vs m\u00e9thode<\/h3>\n
Les fonctions ex\u00e9cutent des t\u00e2ches ; les m\u00e9thodes sont des propri\u00e9t\u00e9s des objets qui contiennent une d\u00e9finition fonctionnelle. La syntaxe pour appeler les m\u00e9thodes est object.function()<\/code>. Les fonctions sont autonomes ; les m\u00e9thodes sont associ\u00e9es \u00e0 des objets.<\/p>\nDans l’exemple ci-dessus, la m\u00e9thode document.getElementByID(\"element_id\")<\/code> fait r\u00e9f\u00e9rence \u00e0 un objet (document<\/code>) et \u00e0 la propri\u00e9t\u00e9 associ\u00e9e \u00e0 cet objet (getElementbyID()<\/code>).<\/p>\nIl existe deux types de m\u00e9thodes en JavaScript :<\/p>\n
\n- M\u00e9thodes d’instance<\/li>\n
- M\u00e9thodes statiques<\/li>\n<\/ul>\n
Les m\u00e9thodes d’instance peuvent acc\u00e9der aux propri\u00e9t\u00e9s d’une instance d’objet et les manipuler. Les m\u00e9thodes d’instance peuvent \u00e9galement appeler une autre m\u00e9thode d’instance ou une m\u00e9thode statique.<\/p>\n
Les m\u00e9thodes statiques contiennent la logique li\u00e9e \u00e0 une classe au lieu d’une instance de la classe. Pour cr\u00e9er une m\u00e9thode statique, vous devez utiliser le mot static avant la d\u00e9finition de la fonction. Les m\u00e9thodes statiques ne peuvent acc\u00e9der qu’aux champs statiques ; elles ne peuvent pas acc\u00e9der aux champs d’instance.<\/p>\n
Promesses dans JavaScript<\/h2>\n
Une promesse est un objet qui produit un r\u00e9sultat \u00e0 un moment futur<\/a>. Dans la terminologie JavaScript, les promesses sont connues comme produisant et consommant du code.<\/p>\nLes fonctions peuvent prendre un temps non sp\u00e9cifi\u00e9 et significatif<\/a> pour se terminer. Le code consommateur attend les r\u00e9sultats du code producteur asynchrone avant d’ex\u00e9cuter ses fonctions. Les promesses d\u00e9finissent la relation entre le code producteur et le code consommateur.<\/p>\nLes promesses ont trois \u00e9tats possibles : pending, fulfilled ou rejected. Dans la d\u00e9finition d’une promesse, deux arguments sont sp\u00e9cifi\u00e9s : resolve ou reject. Pending est l’\u00e9tat initial d’une promesse et signifie que la promesse n’a \u00e9t\u00e9 ni remplie ni rejet\u00e9e. Fulfilled implique que la promesse est retourn\u00e9e r\u00e9solue. Rejet\u00e9e signifie que la promesse est retourn\u00e9e. Une promesse qui n’est plus \u00e0 l’\u00e9tat d’attente est consid\u00e9r\u00e9e comme r\u00e9gl\u00e9e.<\/p>\n
Voici un exemple de syntaxe pour cr\u00e9er une promesse :<\/p>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nFermetures dans JavaScript<\/h2>\n
Les fermetures (closures) sont une fonctionnalit\u00e9 JavaScript qui d\u00e9route souvent les programmeurs<\/a>, bien qu’elles ne soient pas aussi compliqu\u00e9es. Les fermetures JavaScript sont des m\u00e9thodes permettant d’aborder le fonctionnement des fonctions imbriqu\u00e9es. Plus pr\u00e9cis\u00e9ment, les fermetures permettent \u00e0 une fonction interne d’acc\u00e9der au contenu parent d’une fonction, en plus des variables globales ordinairement accessibles. Notez que si la fonction interne a acc\u00e8s aux variables de la fonction externe, l’inverse n’est pas vrai.<\/p>\nPour comprendre les fermetures, vous devez vous rappeler les principes fondamentaux de la port\u00e9e (scope). Les variables d’une fonction ne sont g\u00e9n\u00e9ralement accessibles qu’\u00e0 partir de cette fonction, et la port\u00e9e est cr\u00e9\u00e9e par appel, et non de mani\u00e8re g\u00e9n\u00e9rique pour la fonction. Les fermetures r\u00e9pondent au fait que les variables disparaissent g\u00e9n\u00e9ralement apr\u00e8s la fin d’une fonction. Elles permettent \u00e9galement aux variables de rester accessibles apr\u00e8s l’ex\u00e9cution d’une fonction.<\/p>\n
Consid\u00e9rons l’exemple de code suivant :<\/p>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nPour comprendre le fonctionnement de cette fermeture, parcourez le code ligne par ligne. Tout d’abord, vous d\u00e9finissez la fonction externe, puis une variable qui lui est associ\u00e9e. Ensuite, vous d\u00e9finissez la fonction interne. Il est important de noter que vous n’avez pas appel\u00e9 la fonction interne, vous l’avez seulement d\u00e9finie. L’instruction suivante renvoie la fonction interne. Mais ce qu’elle renvoie n’est pas le r\u00e9sultat de la fonction interne ; c’est la fonction elle-m\u00eame.<\/p>\n
Ainsi, lorsque vous d\u00e9finissez la fermeture comme outer_closure_function<\/code>, elle ne renvoie pas la valeur r\u00e9elle de la fonction interne. Au lieu de cela, elle renvoie une r\u00e9f\u00e9rence \u00e0 inner_closure_function<\/code>. M\u00eame si la fonction externe a \u00e9t\u00e9 compl\u00e9t\u00e9e apr\u00e8s cette d\u00e9claration et que outer_variable<\/code> n’existe officiellement plus. Mais elle est toujours conserv\u00e9e dans la r\u00e9f\u00e9rence \u00e0 inner_closure_function<\/code>. Maintenant, lorsque vous appelez la fermeture dans la derni\u00e8re instruction, le r\u00e9sultat souhait\u00e9 s’affiche.<\/p>\nPour mieux comprendre les fermetures, vous devez coder et tester quelques exemples<\/a>. Il faut du temps pour les ma\u00eetriser. De plus, des mises \u00e0 jour et des tests r\u00e9p\u00e9t\u00e9s vous aideront \u00e0 cr\u00e9er un \u00e9tat d’esprit de d\u00e9veloppement agile.<\/p>\nToutefois, gardez toujours \u00e0 l’esprit les questions de s\u00e9curit\u00e9<\/a>. JavaScript peut \u00eatre expos\u00e9 \u00e0 de graves probl\u00e8mes de s\u00e9curit\u00e9, tels que les injections SQL et LDAP<\/a>, les attaques XSS, etc.<\/p>\nR\u00e9sum\u00e9<\/h2>\n
Si vous souhaitez faire plus avec vos pages web qu’avec les services pr\u00eats \u00e0 l’emploi comme Wix et Square, vous devriez envisager d’apprendre JavaScript. Il s’agit d’une introduction simple et facile \u00e0 apprendre \u00e0 la programmation de sites et d\u2019applications<\/a> qui peut vous aider \u00e0 ajouter des fonctionnalit\u00e9s hautement interactives \u00e0 votre site sans investir trop de temps dans le processus d’apprentissage.<\/p>\n
Qu’est-ce que JavaScript ?<\/h2>\n
Plus simplement, JavaScript est un langage de script populaire<\/a> permettant d’ajouter des fonctionnalit\u00e9s interactives et d’autres contenus web dynamiques aux pages web. Les exemples les plus connus de contenu JavaScript sont les formulaires \u00e0 remplir, les diaporamas de galeries de photos et les graphiques anim\u00e9s.<\/p>\n JavaScript est \u00e9galement relativement intuitif et simple \u00e0 apprendre. C’est un excellent point de d\u00e9part pour ceux qui cherchent \u00e0 en savoir plus sur le d\u00e9veloppement de sites web.<\/p>\n JavaScript est la derni\u00e8re couche de fonctionnalit\u00e9 des sites web hautement interactifs. HTML<\/a> fournit la structure de base de la page. CSS<\/a> est l’\u00e9l\u00e9ment de mode de votre site web – il d\u00e9finit le style de votre site. JavaScript ajoute ensuite du piquant.<\/p>\n Lorsque vous apprenez JavaScript, il est essentiel de comprendre la relation entre HTML, CSS et JavaScript, et la mani\u00e8re dont ils s’assemblent pour afficher un site web.<\/p>\n JavaScript a diverses applications<\/a> que toute personne ayant visit\u00e9 des pages web interactives ou des applications mobiles aura probablement exp\u00e9riment\u00e9es. Si le d\u00e9veloppement de sites web – y compris l’ajout d’\u00e9l\u00e9ments tels que des formulaires interactifs et des animations – est l’utilisation la plus traditionnelle de JavaScript, il est \u00e9galement utilis\u00e9 dans :<\/p>\n Bien que la plupart des applications JavaScript soient c\u00f4t\u00e9 client, JavaScript est \u00e9galement utile dans les applications c\u00f4t\u00e9 serveur, comme la cr\u00e9ation de serveurs web.<\/p>\n Tout d’abord, il est important de noter que Java et JavaScript ne sont pas li\u00e9s, m\u00eame s’ils partagent le terme \u00ab\u00a0Java\u00a0\u00bb. Java et JavaScript sont tous deux des langages permettant de d\u00e9velopper des pages et des applications web. Cependant, ils pr\u00e9sentent des diff\u00e9rences distinctes, notamment<\/p>\n Bien que JavaScript soit largement accept\u00e9 et utilis\u00e9 pour le d\u00e9veloppement web, il pr\u00e9sente des vuln\u00e9rabilit\u00e9s bien connues. L’une des cyber-attaques les plus courantes introduites par les vuln\u00e9rabilit\u00e9s de JavaScript est l’attaque XSS (cross-site scripting). Les cyber-criminels utilisent les attaques XSS pour acc\u00e9der \u00e0 des informations d’identit\u00e9 et les voler.<\/p>\n Pour minimiser les exploits, il est essentiel de tester et de r\u00e9viser votre code<\/a> pendant le d\u00e9veloppement. Les m\u00e9thodes de test telles que les tests statiques et dynamiques de s\u00e9curit\u00e9 des applications (SAST et DAST) permettent d’identifier les vuln\u00e9rabilit\u00e9s \u00e0 tous les stades du cycle de d\u00e9veloppement du logiciel.<\/p>\n Selon les analystes de s\u00e9curit\u00e9 de Cloud Defense<\/a>, SAST v\u00e9rifie que votre code ne viole pas les r\u00e8gles de s\u00e9curit\u00e9 et compare les vuln\u00e9rabilit\u00e9s trouv\u00e9es entre les branches source et cible. Vous serez inform\u00e9 si les d\u00e9pendances de votre projet sont affect\u00e9es par des vuln\u00e9rabilit\u00e9s nouvellement divulgu\u00e9es.<\/p>\n Vanilla JavaScript est une impl\u00e9mentation l\u00e9g\u00e8re du langage JavaScript pur sans biblioth\u00e8ques ajout\u00e9es. Ici, le terme \u00ab\u00a0vanilla\u00a0\u00bb fait r\u00e9f\u00e9rence \u00e0 un JavaScript non personnalis\u00e9.<\/p>\n De nombreuses grandes entreprises utilisent Vanilla JS<\/a>, dont Google, Microsoft, Apple, Amazon et d’autres. Vanilla JavaScript est un excellent moyen d’apprendre les bases de la programmation JavaScript<\/a>\u00a0avant d’ajouter des liens vers des fonctionnalit\u00e9s plus avanc\u00e9es propos\u00e9es dans les biblioth\u00e8ques.<\/p>\n Une biblioth\u00e8que JavaScript est une collection de code pr\u00e9-\u00e9crit qui ex\u00e9cute certaines fonctions. Les biblioth\u00e8ques permettent m\u00eame aux utilisateurs novices de cr\u00e9er rapidement des sites web. Et elles permettent aux utilisateurs novices et exp\u00e9riment\u00e9s de gagner un temps consid\u00e9rable dans la cr\u00e9ation de sites et d’applications.<\/p>\n Il existe de nombreuses biblioth\u00e8ques JavaScript<\/a>, mais parmi les plus populaires figurent jQuery, Anime.js, Animate on Scroll et Leaflet.js.<\/p>\n Les frameworks de sites web sont des constructeurs de sites web avanc\u00e9s, g\u00e9n\u00e9ralement dot\u00e9s de vastes biblioth\u00e8ques de fonctionnalit\u00e9s pr\u00e9\u00e9tablies et de suites de tests. Vous connaissez peut-\u00eatre les frameworks c\u00f4t\u00e9 serveur tels que Laravel<\/a>, Ruby on Rails ou Django. Mais il existe \u00e9galement plusieurs frameworks populaires c\u00f4t\u00e9 client bas\u00e9s sur JavaScript, notamment React.js, Vue.js et Node.js<\/a>.<\/p>\n 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\u00e9cis\u00e9ment, les documents HTML et XML.<\/p>\n DOM est une norme du W3C (World Wide Web Consortium)<\/a>, d\u00e9finie comme \u00ab\u00a0une interface neutre du point de vue de la plateforme et du langage qui permet aux programmes et aux scripts d’acc\u00e9der dynamiquement au contenu, \u00e0 la structure et au style d’un document et de les mettre \u00e0 jour.\u00a0\u00bb Les documents sont constitu\u00e9s d’une collection d’\u00e9l\u00e9ments individuels et de propri\u00e9t\u00e9s (texte<\/a>, boutons, liens, etc.).<\/p>\n Comme d’autres langages de programmation<\/a>, JavaScript utilise des variables pour identifier les emplacements de stockage des donn\u00e9es. Les variables peuvent \u00eatre globales (accessibles par n’importe quelle fonction du code) ou locales, \u00e9galement appel\u00e9es block-scoped (accessibles uniquement dans le bloc o\u00f9 elles sont d\u00e9clar\u00e9es).<\/p>\n Les variables peuvent contenir des valeurs fixes (constantes appel\u00e9es litt\u00e9rales) ou des valeurs modifiables. JavaScript poss\u00e8de une syntaxe particuli\u00e8re pour d\u00e9clarer (cr\u00e9er) les constantes et les variables, et leur attribuer des valeurs.<\/p>\n Les constantes vraies sont cr\u00e9\u00e9es \u00e0 l’aide d’une d\u00e9claration Voici un exemple d’utilisation de const pour cr\u00e9er une constante :<\/p>\n Notez l’utilisation de lettres majuscules pour nommer la constante ; il s’agit d’une convention de d\u00e9nomination commun\u00e9ment accept\u00e9e, 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 ( Les constantes, contrairement aux variables, doivent se voir attribuer une valeur \u00e0 la cr\u00e9ation. L’instruction suivante renverra une erreur :<\/p>\n Les variables sont d\u00e9clar\u00e9es \u00e0 l’aide du mot-cl\u00e9 Notez que les d\u00e9clarations en JavaScript doivent se terminer par un point-virgule. Vous pouvez cr\u00e9er des commentaires en utilisant Les variables peuvent contenir divers types de donn\u00e9es, notamment des nombres, des cha\u00eenes de caract\u00e8res et des objets. L’affectation des variables en JavaScript est dynamique. Ainsi, vous pouvez affecter une variable \u00e0 un type de donn\u00e9es diff\u00e9rent dans le m\u00eame code.<\/p>\n Maintenant que vous comprenez la d\u00e9claration de variable en JavaScript<\/a>, nous pouvons discuter de la fa\u00e7on dont JavaScript traite l’emplacement de la d\u00e9claration de variable. La pratique de codage commun\u00e9ment accept\u00e9e consiste \u00e0 d\u00e9clarer les variables avant, ou en m\u00eame temps, que vous les d\u00e9finissez. Certains langages de programmation l’exigent m\u00eame.<\/p>\n JavaScript permet toutefois de d\u00e9clarer des variables apr\u00e8s leur d\u00e9finition ou leur utilisation. Gr\u00e2ce \u00e0 une fonction appel\u00e9e \u00ab\u00a0hoisting\u00a0\u00bb, JavaScript d\u00e9place les d\u00e9clarations en haut du script ou de la fonction en cours. Si le hoisting peut simplifier la programmation en permettant \u00e0 un programmeur de corriger un d\u00e9faut de d\u00e9claration sans avoir \u00e0 parcourir le code, d\u00e9clarer des variables apr\u00e8s leur utilisation n’est pas conforme aux meilleures pratiques de programmation<\/a>.<\/p>\n Le hoisting peut \u00e9galement causer des probl\u00e8mes inattendus, principalement parce que le hoisting ne s’applique qu’\u00e0 la d\u00e9claration. Si une variable est d\u00e9clar\u00e9e et initialis\u00e9e dans la m\u00eame d\u00e9claration, le hoisting cr\u00e9era une d\u00e9claration en haut du bloc et attribuera \u00e0 la variable une valeur ind\u00e9finie. Ainsi, toute utilisation de la variable dans le bloc avant l’instruction de d\u00e9claration r\u00e9elle supposera que la variable est ind\u00e9finie plut\u00f4t que d’avoir la valeur d’initialisation.<\/p>\n Utilisons l’exemple ci-dessus pour examiner le comportement du hoisting :<\/p>\n Si le hissage d\u00e9place la d\u00e9claration Dans les deux cas, la valeur finale \u00ab\u00a0Thank goodness it’s 2021\u00a0\u00bb ne fait pas partie de la sortie.<\/p>\n Nous vous recommandons d’utiliser la meilleure pratique consistant \u00e0 d\u00e9clarer les variables pour \u00e9viter les probl\u00e8mes potentiels et cr\u00e9er un code plus propre.<\/p>\n JavaScript est bas\u00e9 sur le concept d’objets<\/a>. Les objets sont des conteneurs qui peuvent contenir des propri\u00e9t\u00e9s, des m\u00e9thodes ou les deux.<\/p>\n Prenons un exemple simple. Vous avez un objet nomm\u00e9 \u00ab\u00a0country\u00a0\u00bb. Ses propri\u00e9t\u00e9s comprennent son nom, son continent, sa capitale et sa population. Vous pouvez cr\u00e9er cet objet de plusieurs fa\u00e7ons avec JavaScript.<\/p>\n Tout d’abord, vous pouvez utiliser l’approche de l’objet litt\u00e9ral ou de l’initialisateur d’objet :<\/p>\n Vous pouvez \u00e9galement instancier un objet, puis lui attribuer des propri\u00e9t\u00e9s :<\/p>\n Notez que vous faites r\u00e9f\u00e9rence aux propri\u00e9t\u00e9s d’un objet en utilisant la syntaxe Enfin, vous pouvez cr\u00e9er des objets \u00e0 l’aide de fonctions du constructeur :<\/p>\n La cr\u00e9ation d’une instance de l’objet se fait alors par :<\/p>\n Les propri\u00e9t\u00e9s d’un objet peuvent \u00eatre des variables ou des fonctions. Comme nous le verrons plus loin, lorsqu’une propri\u00e9t\u00e9 d’objet est une fonction, on l’appelle une m\u00e9thode.<\/p>\n En un mot, une classe est un mod\u00e8le de structure g\u00e9n\u00e9rique pour un objet. Les classes utilisent la forme constructeur pour d\u00e9crire les objets.<\/p>\n Tout comme les objets, les classes peuvent avoir des m\u00e9thodes.<\/p>\n Comme pour les autres langages, Java dispose de plusieurs types d’op\u00e9rateurs<\/a> \u00e0 utiliser avec les variables et les fonctions, dont la plupart sont imm\u00e9diatement reconnaissables :<\/p>\n Quelques op\u00e9rateurs sont moins familiers aux programmeurs<\/a> novices, comme les op\u00e9rateurs de comparaison identiques et non identiques.<\/p>\n Prenons l’exemple suivant :<\/p>\n La sortie pour ce bout de code serait :<\/p>\n Il est \u00e9galement essentiel de comprendre la diff\u00e9rence entre Alors que JavaScript prend en charge les op\u00e9rations AND ( Exemple :<\/p>\n Convertir les op\u00e9randes en binaire :<\/p>\n Une op\u00e9ration OR renvoie la valeur true (1) lorsque l’un des deux bits est 1. La valeur de comparaison affich\u00e9e est donc 110110 ou 53. En JavaScript, le terme op\u00e9rateur logique fait r\u00e9f\u00e9rence aux op\u00e9rations dont les op\u00e9randes ont uniquement les valeurs bool\u00e9ennes 0 ou 1. Les op\u00e9rateurs logiques JavaScript sont Les fonctions sont les b\u00eates de somme de JavaScript<\/a>. Il s’agit de blocs de code qui ex\u00e9cutent des t\u00e2ches sp\u00e9cifiques. Si vous \u00eates familier avec les proc\u00e9dures et les sous-routines d’autres langages de programmation, vous reconna\u00eetrez imm\u00e9diatement les fonctions.<\/p>\n Les fonctions sont d\u00e9finies \u00e0 l’aide de la syntaxe suivante :<\/p>\n La d\u00e9finition des fonctions n’est que la premi\u00e8re \u00e9tape ; vous devez ensuite invoquer les fonctions en utilisant La fonction M\u00e9thode traditionnelle :<\/p>\n Les fonctions ex\u00e9cutent des t\u00e2ches ; les m\u00e9thodes sont des propri\u00e9t\u00e9s des objets qui contiennent une d\u00e9finition fonctionnelle. La syntaxe pour appeler les m\u00e9thodes est Dans l’exemple ci-dessus, la m\u00e9thode Il existe deux types de m\u00e9thodes en JavaScript :<\/p>\n Les m\u00e9thodes d’instance peuvent acc\u00e9der aux propri\u00e9t\u00e9s d’une instance d’objet et les manipuler. Les m\u00e9thodes d’instance peuvent \u00e9galement appeler une autre m\u00e9thode d’instance ou une m\u00e9thode statique.<\/p>\n Les m\u00e9thodes statiques contiennent la logique li\u00e9e \u00e0 une classe au lieu d’une instance de la classe. Pour cr\u00e9er une m\u00e9thode statique, vous devez utiliser le mot static avant la d\u00e9finition de la fonction. Les m\u00e9thodes statiques ne peuvent acc\u00e9der qu’aux champs statiques ; elles ne peuvent pas acc\u00e9der aux champs d’instance.<\/p>\n Une promesse est un objet qui produit un r\u00e9sultat \u00e0 un moment futur<\/a>. Dans la terminologie JavaScript, les promesses sont connues comme produisant et consommant du code.<\/p>\n Les fonctions peuvent prendre un temps non sp\u00e9cifi\u00e9 et significatif<\/a> pour se terminer. Le code consommateur attend les r\u00e9sultats du code producteur asynchrone avant d’ex\u00e9cuter ses fonctions. Les promesses d\u00e9finissent la relation entre le code producteur et le code consommateur.<\/p>\n Les promesses ont trois \u00e9tats possibles : pending, fulfilled ou rejected. Dans la d\u00e9finition d’une promesse, deux arguments sont sp\u00e9cifi\u00e9s : resolve ou reject. Pending est l’\u00e9tat initial d’une promesse et signifie que la promesse n’a \u00e9t\u00e9 ni remplie ni rejet\u00e9e. Fulfilled implique que la promesse est retourn\u00e9e r\u00e9solue. Rejet\u00e9e signifie que la promesse est retourn\u00e9e. Une promesse qui n’est plus \u00e0 l’\u00e9tat d’attente est consid\u00e9r\u00e9e comme r\u00e9gl\u00e9e.<\/p>\n Voici un exemple de syntaxe pour cr\u00e9er une promesse :<\/p>\n Les fermetures (closures) sont une fonctionnalit\u00e9 JavaScript qui d\u00e9route souvent les programmeurs<\/a>, bien qu’elles ne soient pas aussi compliqu\u00e9es. Les fermetures JavaScript sont des m\u00e9thodes permettant d’aborder le fonctionnement des fonctions imbriqu\u00e9es. Plus pr\u00e9cis\u00e9ment, les fermetures permettent \u00e0 une fonction interne d’acc\u00e9der au contenu parent d’une fonction, en plus des variables globales ordinairement accessibles. Notez que si la fonction interne a acc\u00e8s aux variables de la fonction externe, l’inverse n’est pas vrai.<\/p>\n Pour comprendre les fermetures, vous devez vous rappeler les principes fondamentaux de la port\u00e9e (scope). Les variables d’une fonction ne sont g\u00e9n\u00e9ralement accessibles qu’\u00e0 partir de cette fonction, et la port\u00e9e est cr\u00e9\u00e9e par appel, et non de mani\u00e8re g\u00e9n\u00e9rique pour la fonction. Les fermetures r\u00e9pondent au fait que les variables disparaissent g\u00e9n\u00e9ralement apr\u00e8s la fin d’une fonction. Elles permettent \u00e9galement aux variables de rester accessibles apr\u00e8s l’ex\u00e9cution d’une fonction.<\/p>\n Consid\u00e9rons l’exemple de code suivant :<\/p>\n Pour comprendre le fonctionnement de cette fermeture, parcourez le code ligne par ligne. Tout d’abord, vous d\u00e9finissez la fonction externe, puis une variable qui lui est associ\u00e9e. Ensuite, vous d\u00e9finissez la fonction interne. Il est important de noter que vous n’avez pas appel\u00e9 la fonction interne, vous l’avez seulement d\u00e9finie. L’instruction suivante renvoie la fonction interne. Mais ce qu’elle renvoie n’est pas le r\u00e9sultat de la fonction interne ; c’est la fonction elle-m\u00eame.<\/p>\n Ainsi, lorsque vous d\u00e9finissez la fermeture comme Pour mieux comprendre les fermetures, vous devez coder et tester quelques exemples<\/a>. Il faut du temps pour les ma\u00eetriser. De plus, des mises \u00e0 jour et des tests r\u00e9p\u00e9t\u00e9s vous aideront \u00e0 cr\u00e9er un \u00e9tat d’esprit de d\u00e9veloppement agile.<\/p>\n Toutefois, gardez toujours \u00e0 l’esprit les questions de s\u00e9curit\u00e9<\/a>. JavaScript peut \u00eatre expos\u00e9 \u00e0 de graves probl\u00e8mes de s\u00e9curit\u00e9, tels que les injections SQL et LDAP<\/a>, les attaques XSS, etc.<\/p>\n Si vous souhaitez faire plus avec vos pages web qu’avec les services pr\u00eats \u00e0 l’emploi comme Wix et Square, vous devriez envisager d’apprendre JavaScript. Il s’agit d’une introduction simple et facile \u00e0 apprendre \u00e0 la programmation de sites et d\u2019applications<\/a> qui peut vous aider \u00e0 ajouter des fonctionnalit\u00e9s hautement interactives \u00e0 votre site sans investir trop de temps dans le processus d’apprentissage.<\/p>\n\u00c0 quoi sert JavaScript<\/h2>\n
\n
Diff\u00e9rences entre Java et JavaScript<\/h2>\n
\n
JavaScript est-il s\u00e9curis\u00e9 ?<\/h2>\n
Vanilla JavaScript<\/h2>\n
Biblioth\u00e8ques JavaScript<\/h2>\n
Le lien entre JavaScript et les frameworks de sites web<\/h2>\n
Le DOM JavaScript<\/h2>\n
Composants de base de JavaScript<\/h2>\n
D\u00e9clarer une constante<\/h3>\n
const<\/code><\/a>. Const<\/code> \u00a0cr\u00e9e des constantes en lecture seule, non modifiables et adapt\u00e9es au bloc (\u00ab\u00a0adapt\u00e9es au bloc\u00a0\u00bb signifie que la constante n’est pas accessible en dehors du bloc d\u00e9clar\u00e9).<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\n_<\/code>) ou le signe dollar ($<\/code>). Ils sont sensibles \u00e0 la casse, alors n’oubliez pas comment vous nommez vos variables.<\/p>\nconst GOLDEN_RATIO;<\/code><\/pre>\nD\u00e9claration d’une variable<\/h3>\n
var<\/code><\/a>. Il n’est pas n\u00e9cessaire de leur attribuer une valeur lors de la d\u00e9claration, bien que cela soit permis et fr\u00e9quemment fait. Le mot-cl\u00e9 var<\/code> a une port\u00e9e globale plut\u00f4t qu’une port\u00e9e de bloc (sauf s’il se trouve dans une fonction, auquel cas il a une port\u00e9e de fonction).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\n\/\/<\/code> – JavaScript ignore tout ce qui se trouve entre \/\/<\/code> et la fin de la ligne.<\/p>\nHoisting<\/h2>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nvariable_2<\/code> vers le haut du bloc, il ne d\u00e9place pas la valeur assign\u00e9e. Cette logique fonctionne de mani\u00e8re \u00e0 peu pr\u00e8s \u00e9quivalente \u00e0 la syntaxe suivante :<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nObjets<\/h2>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nvar country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nobject.property<\/code>.<\/p>\nfunction country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nfrance = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nObjets et classes<\/h3>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nTravailler avec des constantes et des variables<\/h2>\n
\n
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n===<\/code> compare si deux op\u00e9randes ont \u00e0 la fois la m\u00eame valeur et le m\u00eame type (c’est-\u00e0-dire qu’ils sont identiques). !==<\/code> permet de d\u00e9terminer si deux op\u00e9randes ne sont pas identiques.<\/p>\nvar variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nFALSE\nTRUE<\/code><\/pre>\n=<\/code> (un op\u00e9rateur d’affectation) et ==<\/code> (un op\u00e9rateur de comparaison).<\/p>\n=<\/code> d\u00e9finit la valeur d’une variable, ==<\/code> v\u00e9rifie si deux op\u00e9randes ont la m\u00eame valeur, y compris si une variable a une valeur donn\u00e9e. Vous ne devez pas utiliser l’op\u00e9rateur =<\/code> dans les instructions conditionnelles (comme les instructions IF) pour v\u00e9rifier l’\u00e9quivalence.<\/p>\nOp\u00e9rateurs binaires et logiques<\/h3>\n
&<\/code> ), OR (|<\/code>), NOT (~<\/code>) et XOR (^<\/code>). En JavaScript, ces op\u00e9rations sont connues sous le nom d’op\u00e9rateurs binaires. Les op\u00e9rations par bit convertissent les op\u00e9randes en repr\u00e9sentations binaires 32 bits avant d’op\u00e9rer (par exemple, 20 devient 10100). Ces op\u00e9rations sont appel\u00e9es binaires car elles comparent les op\u00e9randes convertis<\/a> bit par bit, puis renvoient un r\u00e9sultat binaire 32 bits converti en un nombre entier.<\/p>\nvar variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\n20 = 010100\n\n50 = 110010<\/code><\/pre>\n&&<\/code> (AND logique), ||<\/code> (OR logique) et !<\/code> (NOT logique).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFonctions et m\u00e9thodes<\/h2>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\n()<\/code> dans le code :<\/p>\n$()<\/h3>\n
$()<\/code> est un raccourci pour la m\u00e9thode getElementByID, qui, comme indiqu\u00e9 ci-dessus, renvoie l’ID d’un \u00e9l\u00e9ment sp\u00e9cifique du DOM HTML. Elle est fr\u00e9quemment utilis\u00e9e pour manipuler des \u00e9l\u00e9ments dans un document. $()<\/code> permet un codage JavaScript plus court et plus efficace.<\/p>\ndocument.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFonction vs m\u00e9thode<\/h3>\n
object.function()<\/code>. Les fonctions sont autonomes ; les m\u00e9thodes sont associ\u00e9es \u00e0 des objets.<\/p>\ndocument.getElementByID(\"element_id\")<\/code> fait r\u00e9f\u00e9rence \u00e0 un objet (document<\/code>) et \u00e0 la propri\u00e9t\u00e9 associ\u00e9e \u00e0 cet objet (getElementbyID()<\/code>).<\/p>\n\n
Promesses dans JavaScript<\/h2>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nFermetures dans JavaScript<\/h2>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nouter_closure_function<\/code>, elle ne renvoie pas la valeur r\u00e9elle de la fonction interne. Au lieu de cela, elle renvoie une r\u00e9f\u00e9rence \u00e0 inner_closure_function<\/code>. M\u00eame si la fonction externe a \u00e9t\u00e9 compl\u00e9t\u00e9e apr\u00e8s cette d\u00e9claration et que outer_variable<\/code> n’existe officiellement plus. Mais elle est toujours conserv\u00e9e dans la r\u00e9f\u00e9rence \u00e0 inner_closure_function<\/code>. Maintenant, lorsque vous appelez la fermeture dans la derni\u00e8re instruction, le r\u00e9sultat souhait\u00e9 s’affiche.<\/p>\nR\u00e9sum\u00e9<\/h2>\n