Compare commits
No commits in common. "308fda97bb75163b6fa998159873734fe8b6cd45" and "9db0515785938e98edb514530692aecb8d6d4635" have entirely different histories.
308fda97bb
...
9db0515785
@ -34,10 +34,10 @@ export const Highlight: ParentComponent<Props> = (_props) => {
|
|||||||
|
|
||||||
const highlightedCode = createMemo<string | undefined>(() => {
|
const highlightedCode = createMemo<string | undefined>(() => {
|
||||||
const childrenString = props.children?.toString();
|
const childrenString = props.children?.toString();
|
||||||
if (!childrenString) return "";
|
if (!childrenString) return;
|
||||||
|
|
||||||
const grammar = Prismjs.languages[props.language];
|
const grammar = Prismjs.languages[props.language];
|
||||||
if (!grammar) return "";
|
if (!grammar) return;
|
||||||
|
|
||||||
const result = Prismjs.highlight(childrenString, grammar, props.language);
|
const result = Prismjs.highlight(childrenString, grammar, props.language);
|
||||||
|
|
||||||
@ -102,10 +102,7 @@ export const Highlight: ParentComponent<Props> = (_props) => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<pre
|
<pre
|
||||||
class={clsx(
|
class={clsx("not-prose h-full w-full prism-code flex", languageClass())}
|
||||||
"relative not-prose h-full w-full prism-code flex",
|
|
||||||
languageClass(),
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<code
|
<code
|
||||||
class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}
|
class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import { For, createSignal } from "solid-js";
|
|||||||
import { Highlight } from "./Highlight";
|
import { Highlight } from "./Highlight";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
export function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
|
function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||||
return (
|
return (
|
||||||
<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
|
<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
|
||||||
<circle cx="5" cy="5" r="4.5" class="fill-red-400" />
|
<circle cx="5" cy="5" r="4.5" class="fill-red-400" />
|
||||||
|
|||||||
@ -39,6 +39,8 @@ export default function Tabs(props: {
|
|||||||
const [tabs, setTabs] = createSignal<TabType[]>([]);
|
const [tabs, setTabs] = createSignal<TabType[]>([]);
|
||||||
|
|
||||||
const addTab = (tab: TabType) => {
|
const addTab = (tab: TabType) => {
|
||||||
|
console.log("Adding tab", tab);
|
||||||
|
|
||||||
setTabs((prevTabs) => {
|
setTabs((prevTabs) => {
|
||||||
// Append to the end of the array and make sure it's unique
|
// Append to the end of the array and make sure it's unique
|
||||||
if (prevTabs.some((t) => t.value === tab.value)) {
|
if (prevTabs.some((t) => t.value === tab.value)) {
|
||||||
@ -111,6 +113,7 @@ Tabs.Item = (props: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
console.log("Mounting tab", props.label);
|
||||||
tabsContext.addTab({ label: props.label, value: props.value });
|
tabsContext.addTab({ label: props.label, value: props.value });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -104,6 +104,11 @@ export const navigation: NavigationSection[] = [
|
|||||||
type: navigationsTypes.DOCUMENTATIONS,
|
type: navigationsTypes.DOCUMENTATIONS,
|
||||||
position: "auto",
|
position: "auto",
|
||||||
links: [
|
links: [
|
||||||
|
{
|
||||||
|
title: "Introduction",
|
||||||
|
href: "/docs/frontend",
|
||||||
|
subitems: [],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "HTML",
|
title: "HTML",
|
||||||
href: "/docs/html",
|
href: "/docs/html",
|
||||||
@ -115,24 +120,6 @@ export const navigation: NavigationSection[] = [
|
|||||||
{ title: "Formulaires", href: "/docs/html/formulaires" },
|
{ title: "Formulaires", href: "/docs/html/formulaires" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "JavaScript",
|
|
||||||
href: "/docs/javascript",
|
|
||||||
subitems: [
|
|
||||||
{ title: "Introduction", href: "/docs/javascript" },
|
|
||||||
{ title: "Syntaxe", href: "/docs/javascript/syntaxe" },
|
|
||||||
{ title: "Instructions", href: "/docs/javascript/instructions" },
|
|
||||||
{ title: "Types de données", href: "/docs/javascript/types" },
|
|
||||||
{
|
|
||||||
title: "Fonctions et portée",
|
|
||||||
href: "/docs/javascript/fonctions-et-portee",
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: "Le DOM",
|
|
||||||
// href: "/docs/javascript/dom",
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "React",
|
title: "React",
|
||||||
href: "/docs/react",
|
href: "/docs/react",
|
||||||
|
|||||||
@ -7,39 +7,40 @@ import buildTitle from "./buildTitle";
|
|||||||
export type Data = Awaited<ReturnType<typeof data>>;
|
export type Data = Awaited<ReturnType<typeof data>>;
|
||||||
|
|
||||||
export async function data(pageContext: PageContext) {
|
export async function data(pageContext: PageContext) {
|
||||||
const config = useConfig();
|
const config = useConfig();
|
||||||
await docCache.waitingForCache(20000);
|
await docCache.waitingForCache(20000);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
exports: { frontmatter },
|
exports: { frontmatter },
|
||||||
urlParsed,
|
urlParsed,
|
||||||
} = pageContext;
|
} = pageContext;
|
||||||
const isRoot = urlParsed.pathname === "/";
|
const isRoot = urlParsed.pathname === "/";
|
||||||
|
|
||||||
config({
|
config({
|
||||||
title: buildTitle(isRoot ? undefined : frontmatter?.title),
|
title: buildTitle(isRoot ? undefined : frontmatter?.title),
|
||||||
description: frontmatter?.description,
|
description: frontmatter?.description,
|
||||||
});
|
});
|
||||||
|
|
||||||
let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
|
let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
|
||||||
if (cachePathname === "") cachePathname = "index";
|
if (cachePathname === "") cachePathname = "index";
|
||||||
|
|
||||||
const doc = docCache.get(cachePathname);
|
const doc = docCache.get(cachePathname);
|
||||||
|
console.log(doc);
|
||||||
|
|
||||||
if (!doc) {
|
if (!doc) {
|
||||||
console.error(
|
console.error(
|
||||||
`DocCache: No doc found for ${cachePathname}. This is a bug!`,
|
`DocCache: No doc found for ${cachePathname}. This is a bug!`,
|
||||||
"Please report it to the maintainers.",
|
"Please report it to the maintainers.",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
sections: doc?.sections || [],
|
sections: doc?.sections || [],
|
||||||
frontmatter,
|
frontmatter,
|
||||||
docs: docCache.orderByLastEdit({
|
docs: docCache.orderByLastEdit({
|
||||||
limit: 2,
|
limit: 2,
|
||||||
includedBasePaths: ["docs", "certifications"],
|
includedBasePaths: ["docs", "certifications"],
|
||||||
excludedFileNames: [cachePathname, "docs", "certifications"],
|
excludedFileNames: [cachePathname, "docs", "certifications"],
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
8
app/pages/docs/frontend/+Page.mdx
Normal file
8
app/pages/docs/frontend/+Page.mdx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: "Introduction au Frontend : Langages et technologies"
|
||||||
|
description:
|
||||||
|
tags: []
|
||||||
|
---
|
||||||
|
|
||||||
|
import Callout from "@/components/Callout";
|
||||||
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
---
|
|
||||||
title: Introduction à JavaScript
|
|
||||||
description: Parlons un peu de JavaScript, le langage de programmation incontournable pour le développement web.
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
|
|
||||||
**JavaScript** est un langage de programmation populaire qui permet d'ajouter des fonctionnalités interactives aux pages web.
|
|
||||||
Contrairement au HTML qui définit la structure et le contenu d'une page, JavaScript peut manipuler ces éléments dynamiquement et créer une expérience utilisateur plus riche.
|
|
||||||
|
|
||||||
<Callout type="note" title="Environnement d'exécution">
|
|
||||||
Dans le cadre de cette série d'articles, nous allons principalement nous concentrer sur l'environnement d'exécution du navigateur.
|
|
||||||
|
|
||||||
Cependant, il est important de noter que JavaScript peut également être exécuté côté serveur grâce à des environnements comme **Node.js**.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## L'histoire de JavaScript
|
|
||||||
|
|
||||||
JavaScript a été créé en 1995 par **Brendan Eich** alors qu'il travaillait chez Netscape _(un ancien navigateur web)_.
|
|
||||||
Il a été conçu à l'origine pour ajouter des fonctionnalités interactives aux pages web, mais il a rapidement évolué pour devenir un langage de programmation complet.
|
|
||||||
|
|
||||||
Aujourd'hui, JavaScript est utilisé dans presque tous les sites web modernes et est devenu un standard pour le développement web.
|
|
||||||
|
|
||||||
## Pourquoi JavaScript est-il si populaire ?
|
|
||||||
|
|
||||||
JavaScript est devenu l'un des langages de programmation les plus populaires pour plusieurs raisons :
|
|
||||||
|
|
||||||
- **Interactivité** : JavaScript permet d'ajouter des fonctionnalités interactives aux pages web, comme des animations, des formulaires dynamiques, etc.
|
|
||||||
- **Compatibilité** : JavaScript est pris en charge par tous les navigateurs modernes, ce qui le rend accessible à un large public.
|
|
||||||
- **Écosystème riche** : Il existe de nombreuses bibliothèques et frameworks/bibliothèques JavaScript, comme **React**, **Vue.js** et **Angular**, qui facilitent le développement d'applications web complexes.
|
|
||||||
- **Communauté active** : JavaScript a une grande communauté de développeurs qui partagent des ressources, des tutoriels et des outils pour aider les autres à apprendre et à progresser.
|
|
||||||
|
|
||||||
Cependant, il est important de noter que JavaScript a également ses inconvénients :
|
|
||||||
|
|
||||||
- **Typage faible** : JavaScript est un langage à typage faible, ce qui signifie que le type d'une variable n'est pas défini explicitement et peut changer au cours de l'exécution du programme.
|
|
||||||
- **Gestion asynchrone** : La nature asynchrone de JavaScript, peut rendre le code plus ddificile à comprendre et à maintenir.
|
|
||||||
- **Support pour la POO** : Bien que JavaScript prenne en charge la programmation orientée objet, il ne le fait pas de la même manière que d'autres langages comme Java ou C#.
|
|
||||||
Il utilise plutôt un modèle basé sur les prototypes, ce qui peut être déroutant pour les développeurs habitués à d'autres langages.
|
|
||||||
- **Performances** : Bien que JavaScript soit généralement rapide, il peut être moins performant que d'autres langages compilés comme C++ ou Rust pour certaines tâches intensives en calcul.
|
|
||||||
|
|
||||||
Mais alors, est-ce que JavaScript est un bon choix pour le développement web ?
|
|
||||||
Voyons ça ensemble !
|
|
||||||
|
|
||||||
## Pourquoi utiliser JavaScript ?
|
|
||||||
|
|
||||||
Déjà, il faut prendre en compte que JavaScript est **l'unique** langage de programmation qui peut être exécuté dans le navigateur.
|
|
||||||
Cela signifie que si vous voulez créer des applications web interactives, JavaScript est le langage à utiliser.
|
|
||||||
|
|
||||||
<Callout type="note" title="Le cas des langages compilés">
|
|
||||||
Il existe des langages compilés qui peuvent être utilisés pour créer des applications web, comme **TypeScript** ou **WebAssembly**.
|
|
||||||
Cependant, ces langages sont généralement transpilés en JavaScript avant d'être exécutés dans le navigateur.
|
|
||||||
|
|
||||||
Ça signifie que même si vous utilisez un autre langage, il y a de fortes chances qu'il soit finalement converti en JavaScript pour être exécuté dans le navigateur.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
À partir de là, le fait d'apprendre JavaScript si l'on veut devenir développeur web est un choix évident.
|
|
||||||
|
|
||||||
## Ce qui t'attend dans cette série d'articles
|
|
||||||
|
|
||||||
Comme dit précédemment, cette série d'articles va se concentrer sur l'environnement d'exécution du navigateur.
|
|
||||||
On va donc aborder les sujets suivants :
|
|
||||||
|
|
||||||
- La syntaxe de base de JavaScript
|
|
||||||
- Les instructions
|
|
||||||
- Les types de données
|
|
||||||
- Les fonctions et la portée
|
|
||||||
- La compréhension et manipulation du DOM
|
|
||||||
- Les événements
|
|
||||||
- Le principe d'asynchrone
|
|
||||||
|
|
||||||
Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Facilement compréhensible !== Facile">
|
|
||||||
Facilement compréhensible ne veut pas dire que c'est facile à comprendre !
|
|
||||||
|
|
||||||
Il y a beaucoup de concepts à assimiler et certains peuvent faire mal au crâne.
|
|
||||||
Prends ton temps et n'hésite pas à revenir en arrière si tu ne comprends pas quelque chose.
|
|
||||||
|
|
||||||
L'idée est de ne surtout pas se précipiter sur les notions suivantes tant que tu n'as pas compris celles abordées dans l'article.
|
|
||||||
Expérimente et joue avec le code pour plus facilement assimiler !
|
|
||||||
</Callout>
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
---
|
|
||||||
title: La manipulation du DOM avec JavaScript
|
|
||||||
description: Découvrez comment maîtriser le DOM en JavaScript et donnez vie à vos pages web !
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import QuickLinks from "@/components/QuickLinks";
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
import tabs from "./tabs";
|
|
||||||
|
|
||||||
Maintenant que nous avons vu les grandes lignes du langage JavaScript, tu vas enfin pouvoir entrer dans le vif du sujet : la **manipulation du DOM** avec JavaScript.
|
|
||||||
|
|
||||||
## 🤔 Qu'est-ce que le DOM ?
|
|
||||||
|
|
||||||
Le **Document Object Model** _(ou **DOM** en anglais)_ est une interface de programmation pour les documents HTML et XML. Il permet de représenter la page web comme un arbre de **nœuds**.
|
|
||||||
|
|
||||||
Chaque élément HTML est un nœud dans l'arbre, et les nœuds peuvent contenir d'autres nœuds.
|
|
||||||
Mais un nœud peut aussi être un **texte** ou une **propriété** d'un élément !
|
|
||||||
|
|
||||||
Pour que ce soit plus facile à comprendre, voici quelques analogies pour t'aider à comprendre ce qu'est le DOM.
|
|
||||||
|
|
||||||
<tabs.jsDomExplanations />
|
|
||||||
|
|
||||||
## 🤖 Manipulation du DOM
|
|
||||||
|
|
||||||
La manipulation du DOM avec JavaScript permet de modifier la structure et le contenu de la page web.
|
|
||||||
Le grand avantage du DOM est qu'il est **très rapide** à manipuler, et que c'est **très simple** à comprendre.
|
|
||||||
|
|
||||||
Mais pour le manipuler, il faut d'abord **sélectionner** les éléments que l'on veut modifier.
|
|
||||||
|
|
||||||
### 🔍 Sélectionner un élément
|
|
||||||
|
|
||||||
Pour sélectionner un élément, on peut utiliser plusieurs méthodes :
|
|
||||||
|
|
||||||
- `document.getElementById(id)` : Sélectionne un élément par son `id` _(propriété HTML `id`)_.
|
|
||||||
- `document.getElementsByClassName(className)` : Sélectionne tous les éléments par leur `className` _(propriété HTML `class`)_.
|
|
||||||
- `document.getElementsByTagName(tagName)` : Sélectionne tous les éléments par leur `tagName` _(balise HTML)_.
|
|
||||||
- `document.querySelector(selector)` : Sélectionne le premier élément qui correspond au `selector` _(sélecteur CSS)_.
|
|
||||||
- `document.querySelectorAll(selector)` : Sélectionne tous les éléments qui correspondent au `selector` _(sélecteur CSS)_.
|
|
||||||
|
|
||||||
Voici quelques exemples commentés pour visualiser ces méthodes :
|
|
||||||
|
|
||||||
<tabs.jsDomSelectionExplanations />
|
|
||||||
|
|
||||||
Selon la méthode utilisée, on peut récupérer un élément ou une liste d'éléments.
|
|
||||||
Pour mémoriser ces méthodes, fais attention à la présence du pluriel dans le nom de la méthode :
|
|
||||||
|
|
||||||
- `getElementById` _(singulier)_ : Retourne un élément.
|
|
||||||
- `getElementsByClassName` _(pluriel)_ : Retourne une liste d'éléments.
|
|
||||||
- `getElementsByTagName` _(pluriel)_ : Retourne une liste d'éléments.
|
|
||||||
- `querySelector` _(singulier)_ : Retourne un élément.
|
|
||||||
- `querySelectorAll` _(pluriel)_ : Retourne une liste d'éléments.
|
|
||||||
|
|
||||||
<Callout type="note" title="Aucun élément trouvé">
|
|
||||||
Si aucun élément n'est trouvé, la méthode retourne `null`.
|
|
||||||
|
|
||||||
Cependant, si on utilise une méthode qui retourne une liste d'éléments, la liste ne sera pas `null`, mais **vide**.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### ✏️ Modifier le contenu d'un élément
|
|
||||||
|
|
||||||
Pour modifier le contenu d'un élément, on retrouve trois propriétés :
|
|
||||||
|
|
||||||
- `element.innerHTML` : Modifie le contenu HTML de l'élément.
|
|
||||||
- `element.innerText` : Modifie le contenu texte de l'élément.
|
|
||||||
- `element.textContent` : Modifie le contenu texte de l'élément.
|
|
||||||
|
|
||||||
Voici quelques exemples commentés pour visualiser ces propriétés :
|
|
||||||
|
|
||||||
<tabs.jsDomContentModificationExplanations />
|
|
||||||
|
|
||||||
<Callout type="question" title="Je ne comprends pas la différence entre innerText et textContent">
|
|
||||||
Si ça te rassure, c'est normal ! Ces deux propriétés sont très similaires, mais n'ont pas les mêmes comportements.
|
|
||||||
|
|
||||||
- `innerText` : Modifie le contenu texte de l'élément, et ignore les balises HTML.
|
|
||||||
- `textContent` : Modifie le contenu texte de l'élément, et prend en compte les balises HTML.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
<Callout type="warning" title="Attention à innerHTML">
|
|
||||||
La propriété `innerHTML` est très puissante, mais elle peut également être dangereuse.
|
|
||||||
|
|
||||||
En l'utilisant, on expose la page à des attaques de type **XSS** _(Cross-Site Scripting)_ !
|
|
||||||
Il est donc **fortement conseillé** d'utiliser `textContent` ou `innerText` plutôt que `innerHTML`.
|
|
||||||
|
|
||||||
Dans le cas où l'on doit utiliser `innerHTML`, il est **fortement conseillé** de **sanitiser** le contenu avant de l'afficher.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
Je ne vais pas rentrer dans les détails ici, mais tu peux en savoir plus sur ces deux propriétés dans la documentation de MDN :
|
|
||||||
|
|
||||||
<QuickLinks>
|
|
||||||
<QuickLinks.QuickLink
|
|
||||||
title="MDN - innerText"
|
|
||||||
href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/innerText"
|
|
||||||
description="Documentation de MDN sur la propriété innerText"
|
|
||||||
icon="presets"
|
|
||||||
/>
|
|
||||||
<QuickLinks.QuickLink
|
|
||||||
title="MDN - textContent"
|
|
||||||
href="https://developer.mozilla.org/fr/docs/Web/API/Node/textContent"
|
|
||||||
description="Documentation de MDN sur la propriété textContent"
|
|
||||||
icon="presets"
|
|
||||||
/>
|
|
||||||
<QuickLinks.QuickLink
|
|
||||||
title="MDN - innerHTML"
|
|
||||||
href="https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML"
|
|
||||||
description="Documentation de MDN sur la propriété innerHTML"
|
|
||||||
icon="presets"
|
|
||||||
/>
|
|
||||||
<QuickLinks.QuickLink
|
|
||||||
title="MDN - Cross-Site Scripting"
|
|
||||||
href="https://developer.mozilla.org/fr/docs/Glossary/Cross-site_scripting"
|
|
||||||
description="Documentation de MDN sur le Cross-Site Scripting"
|
|
||||||
icon="presets"
|
|
||||||
/>
|
|
||||||
</QuickLinks>
|
|
||||||
|
|
||||||
### 🔧 Modifier les attributs d'un élément
|
|
||||||
|
|
||||||
Pour modifier les attributs d'un élément, on peut utiliser la propriété `element.setAttribute(attribute, value)`.
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
import { Snippet } from "@/components/Snippet";
|
|
||||||
|
|
||||||
const jsDomExplanations = [
|
|
||||||
{
|
|
||||||
name: "Livre et ses chapitres",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>Document</strong> : Le livre entier, qui contient tous les
|
|
||||||
chapitres.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Élément</strong> : Les chapitres du livre, chacun avec son
|
|
||||||
titre et son contenu.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Attribut</strong> : Les notes ou les annotations dans les
|
|
||||||
marges qui décrivent ou mettent en valeur certains passages.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Texte</strong> : Le contenu réel des pages, les mots et les
|
|
||||||
paragraphes qui sont écrits.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Arbre généalogique",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>Document</strong> : L'arbre généalogique complet, représentant
|
|
||||||
toute la famille.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Élément</strong> : Les branches de l'arbre, représentant les
|
|
||||||
différentes générations ou familles.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Attribut</strong> : Les détails sur chaque personne, comme
|
|
||||||
leur date de naissance ou leur métier.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Texte</strong> : Les noms des personnes dans l'arbre, les
|
|
||||||
membres individuels de la famille.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Système solaire",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>Document</strong> : Le système solaire complet, avec toutes
|
|
||||||
ses planètes et étoiles.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Élément</strong> : Les planètes individuelles, chacune avec
|
|
||||||
ses propres caractéristiques et orbites.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Attribut</strong> : Les détails des planètes, comme leur
|
|
||||||
taille, leur composition ou leur distance par rapport au soleil.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Texte</strong> : Les noms des planètes et des étoiles, les
|
|
||||||
éléments individuels du système solaire.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Organisation d'une entreprise",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<strong>Document</strong> : L'entreprise entière, avec tous ses
|
|
||||||
départements et employés.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Élément</strong> : Les différents départements, comme les
|
|
||||||
ressources humaines, la finance ou le marketing.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Attribut</strong> : Les détails des employés, comme leur
|
|
||||||
poste, leur bureau ou leur salaire.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>Texte</strong> : Les noms des employés, les personnes qui
|
|
||||||
travaillent dans chaque département.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsDomSelectionExplanations = [
|
|
||||||
{
|
|
||||||
name: "document.getElementById(id)",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Sélectionner un élément par son ID
|
|
||||||
// Ici, on sélectionne l'élément qui a l'ID "id"
|
|
||||||
|
|
||||||
const element = document.getElementById("id");`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "document.getElementsByClassName(className)",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Sélectionner tous les éléments par leur classe
|
|
||||||
// Ici, on sélectionne tous les éléments qui ont la classe "css-class"
|
|
||||||
|
|
||||||
const elements = document.getElementsByClassName("css-class");`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "document.getElementsByTagName(tagName)",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Sélectionner tous les éléments par leur balise
|
|
||||||
// Ici, on sélectionne tous les éléments qui sont des paragraphes
|
|
||||||
|
|
||||||
const elements = document.getElementsByTagName("p");`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "document.querySelector(selector)",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Sélectionner le premier élément qui correspond au sélecteur
|
|
||||||
// Ici, on sélectionne le premier élément qui a la classe "css-class"
|
|
||||||
|
|
||||||
const element = document.querySelector(".css-class");`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "document.querySelectorAll(selector)",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Sélectionner tous les éléments qui correspondent au sélecteur
|
|
||||||
// Ici, on sélectionne tous les éléments qui ont la classe "css-class"
|
|
||||||
|
|
||||||
const elements = document.querySelectorAll(".css-class");`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsDomContentModificationExplanations = [
|
|
||||||
{
|
|
||||||
name: "element.innerHTML",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Modifier le contenu HTML de l'élément
|
|
||||||
|
|
||||||
const element = document.getElementById("id");
|
|
||||||
|
|
||||||
element.innerHTML = "<p>Nouveau contenu</p>";`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "element.innerText",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Modifier le contenu texte de l'élément
|
|
||||||
|
|
||||||
const element = document.getElementById("id");
|
|
||||||
|
|
||||||
element.innerText = "Nouveau contenu";`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "element.textContent",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `// Modifier le contenu texte de l'élément
|
|
||||||
|
|
||||||
const element = document.getElementById("id");
|
|
||||||
|
|
||||||
element.textContent = "Nouveau contenu";`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
jsDomExplanations: () => <Snippet snippets={jsDomExplanations} />,
|
|
||||||
jsDomSelectionExplanations: () => (
|
|
||||||
<Snippet snippets={jsDomSelectionExplanations} />
|
|
||||||
),
|
|
||||||
jsDomContentModificationExplanations: () => (
|
|
||||||
<Snippet snippets={jsDomContentModificationExplanations} />
|
|
||||||
),
|
|
||||||
};
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
---
|
|
||||||
title: Les fonctions et la portée
|
|
||||||
description: Découvrons ensemble les fonctions et la portée en JavaScript
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
import tabs from "./tabs";
|
|
||||||
|
|
||||||
Il est maintenant temps de s'attaquer à du sérieux, j'ai nommé : les **fonctions** et la **portée** en JavaScript.
|
|
||||||
|
|
||||||
## Les fonctions
|
|
||||||
|
|
||||||
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code, de le rendre plus lisible et de réduire la duplication.
|
|
||||||
Elles peuvent prendre des **paramètres en entrée** et **retourner une valeur en sortie**.
|
|
||||||
|
|
||||||
On l'avait déjà vu dans l'article sur la syntaxe, mais il est important de le rappeler :
|
|
||||||
|
|
||||||
- **Fonction déclarée** : Utilise le mot-clé `function` suivi du nom de la fonction.
|
|
||||||
- **Fonction anonyme** : N'a pas de nom et est généralement utilisée comme argument pour une autre fonction.
|
|
||||||
- **Fonction fléchée** : Une syntaxe plus concise pour déclarer des fonctions.
|
|
||||||
|
|
||||||
<tabs.jsFunctions />
|
|
||||||
|
|
||||||
Si tu relis les premiers mots de cette section _(sur les fonctions)_, tu remarqueras que j'ai dit que les fonctions sont des blocs de code **réutilisables** qui effectuent une **tâche spécifique**.
|
|
||||||
|
|
||||||
C'est un peu vague, non ?
|
|
||||||
Disons qu'on comprend l'idée générale, mais qu'est-ce que ça veut dire au juste ?
|
|
||||||
|
|
||||||
### Utilisation des fonctions
|
|
||||||
|
|
||||||
Prenons un exemple simple, avec une fonction qui vérifie si un nombre est pair ou impair.
|
|
||||||
|
|
||||||
<tabs.jsIsEven />
|
|
||||||
|
|
||||||
Dans cet exemple, nous avons une fonction `isEven` qui prend un nombre en **paramètre** et retourne `true` si le nombre est pair, sinon elle retourne `false`.
|
|
||||||
|
|
||||||
On peut ensuite appeler cette fonction avec différents nombres pour vérifier s'ils sont pairs ou impairs.
|
|
||||||
|
|
||||||
<tabs.jsCallIsEven />
|
|
||||||
|
|
||||||
Dans cet exemple, nous avons appelé la fonction `isEven` avec les nombres 4 et 5 en tant qu'**arguments**.
|
|
||||||
|
|
||||||
<Callout type="note" title="Paramètres et arguments">
|
|
||||||
Les **paramètres** sont les variables déclarées dans la définition de la fonction.
|
|
||||||
Les **arguments** sont les valeurs passées à la fonction lors de son appel.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## La portée
|
|
||||||
|
|
||||||
La portée _(ou **scope** en anglais)_ fait référence à la visibilité des variables et des fonctions dans le code.
|
|
||||||
|
|
||||||
Elle détermine où une variable ou une fonction peut être utilisée dans le code.
|
|
||||||
Il existe trois types de portée en JavaScript :
|
|
||||||
|
|
||||||
- **Portée globale** _(global scope)_ : La variable est accessible partout dans le code.
|
|
||||||
- **Portée de bloc** _(block scope)_ : La variable est accessible uniquement à l'intérieur du bloc où elle a été déclarée.
|
|
||||||
- **Portée de fonction** _(function scope)_ : La variable est accessible uniquement à l'intérieur de la fonction où elle a été déclarée.
|
|
||||||
|
|
||||||
<Callout type="note" title="Portée de bloc">
|
|
||||||
La portée de bloc est introduite avec les mots-clés `let` et `const`.
|
|
||||||
Les variables déclarées avec `var` ont une portée fonctionnelle ou globale.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Portée globale (global scope)
|
|
||||||
|
|
||||||
La portée globale est la portée la plus large.
|
|
||||||
Les variables déclarées en dehors de toute fonction ou bloc de code ont une portée globale.
|
|
||||||
|
|
||||||
Une portée globale signifie que la variable est accessible partout dans le code.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Déclaration de variable globale">
|
|
||||||
Attention à **ne pas déclarer** de variables globales, sauf si c'est intentionnel et nécessaire !
|
|
||||||
|
|
||||||
Les variables globales peuvent entraîner des conflits de variables/fonctions _(remplacement)_ des variables existantes, notamment des variables de l'objet `window` dans le navigateur.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Portée de bloc (block scope)
|
|
||||||
|
|
||||||
La portée de bloc est une portée qui est limitée au bloc de code dans lequel la variable a été déclarée.
|
|
||||||
|
|
||||||
Seules les variables déclarées avec `let` et `const` peuvent avoir une portée de bloc.
|
|
||||||
|
|
||||||
<Callout type="question" title="Limité au bloc de code ?">
|
|
||||||
Par "bloc de code", on parle de tout ce qui est entre accolades `{}` !
|
|
||||||
Ça peut être une fonction, une boucle, une condition, etc.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
<tabs.jsBlockScope />
|
|
||||||
|
|
||||||
Dans cet exemple, nous avons :
|
|
||||||
|
|
||||||
- Une déclaration d'une variable `x` en dehors d'un bloc de code
|
|
||||||
- Une déclaration d'une variable `x` à l'intérieur d'un bloc de code _(condition)_
|
|
||||||
|
|
||||||
Maintenant, regardons ce qui se passe selon le mot-clé utilisé pour déclarer la variable `x` :
|
|
||||||
|
|
||||||
<tabs.jsBlockScopeExplanations />
|
|
||||||
|
|
||||||
On remarque que si on utilise `let` ou `const`, la variable `x` déclarée à l'intérieur du bloc de code n'est pas "la même" que celle déclarée à l'extérieur.
|
|
||||||
Elle est **locale** au bloc de code, et donc inaccessible en dehors de celui-ci.
|
|
||||||
|
|
||||||
En revanche, si on utilise `var`, la variable `x` déclarée à l'intérieur du bloc de code est **globale** et écrase la variable `x` déclarée à l'extérieur.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Utilisation de var">
|
|
||||||
Rien que pour ça, il est préférable d'éviter d'utiliser `var` et de lui préférer `let` ou `const`.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Portée de fonction (function scope)
|
|
||||||
|
|
||||||
Pour la portée de fonction, on parle de la portée des variables déclarées à l'intérieur d'une fonction.
|
|
||||||
|
|
||||||
Les trois mots-clés `var`, `let` et `const` peuvent être utilisés pour déclarer des variables avec une portée de fonction.
|
|
||||||
|
|
||||||
<tabs.jsFunctionScope />
|
|
||||||
|
|
||||||
Le fonctionnement est le même que pour la portée de bloc, avec cette fois-ci une portée limitée à la fonction _(y compris pour les variables déclarées avec `var`)_.
|
|
||||||
|
|
||||||
## Particularités de var
|
|
||||||
|
|
||||||
On a vu que `var` n'a pas la possibilité de déclarer des variables avec une portée de bloc, contrairement à `let` et `const`.
|
|
||||||
|
|
||||||
Mais il y a une autre particularité à prendre en compte :
|
|
||||||
- Les variables déclarées avec `var` sont **hoistées**.
|
|
||||||
Ça signifie que la déclaration de la variable est déplacée en haut de la portée dans laquelle elle a été déclarée.
|
|
||||||
- Les variables déclarées avec `let` et `const` ne sont pas hoistées.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Hoisting">
|
|
||||||
Le hoisting peut entraîner des comportements inattendus si on essaie d'accéder à une variable avant sa déclaration.
|
|
||||||
|
|
||||||
Il est donc préférable de toujours déclarer les variables au début de leur portée.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
Petit exemple pour illustrer ça :
|
|
||||||
|
|
||||||
<tabs.jsHoisting />
|
|
||||||
|
|
||||||
Dans cet exemple, on voit que la variable `x` est déclarée après son utilisation.
|
|
||||||
Cependant, grâce _(ou à cause, je te laisse choisir !)_ au hoisting, la déclaration de la variable `x` est déplacée en haut de la portée, ce qui permet d'accéder à sa valeur avant sa déclaration.
|
|
||||||
|
|
||||||
On peut donc dire que la variable `x` est **undefined** avant sa déclaration, mais elle existe déjà.
|
|
||||||
On peut donc l'utiliser avant sa déclaration _(enfin, on aura `undefined` comme valeur)_.
|
|
||||||
|
|
||||||
C'est un peu déroutant, non ?
|
|
||||||
|
|
||||||
<Callout type="warning" title="Utilisation de var">
|
|
||||||
Promis, c'est la dernière fois que je te dis de ne pas utiliser `var` !
|
|
||||||
|
|
||||||
Mais tu l'auras compris, `var` est vraiment très spécial et peut très vite devenir une source de bugs.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
Voilà, c'est "tout" pour cet article sur les fonctions et la portée en JavaScript !
|
|
||||||
Comme les articles précédents, ça fait beaucoup d'informations.
|
|
||||||
|
|
||||||
Encore une fois, prends le temps d'expérimenter et de jouer avec les notions abordées dans cet article avant de passer à la suite !
|
|
||||||
@ -1,294 +0,0 @@
|
|||||||
import { Snippet } from "@/components/Snippet";
|
|
||||||
|
|
||||||
const jsFunctionsSnippets = [
|
|
||||||
{
|
|
||||||
name: "Fonction déclarée",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `function addition(a, b) {
|
|
||||||
return a + b;
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction anonyme",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const addition = function(a, b) {
|
|
||||||
return a + b;
|
|
||||||
};`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction fléchée avec retour explicite",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const addition = (a, b) => {
|
|
||||||
return a + b;
|
|
||||||
};`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction fléchée avec retour implicite",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: "const addition = (a, b) => a + b;",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsIsEvenSnippets = [
|
|
||||||
{
|
|
||||||
name: "Fonction déclarée",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `function isEven(number) {
|
|
||||||
return number % 2 === 0;
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction anonyme",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const isEven = function(number) {
|
|
||||||
return number % 2 === 0;
|
|
||||||
};`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction fléchée avec retour explicite",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const isEven = (number) => {
|
|
||||||
return number % 2 === 0;
|
|
||||||
};`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction fléchée avec retour implicite",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: "const isEven = (number) => number % 2 === 0;",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsCallIsEvenSnippets = [
|
|
||||||
{
|
|
||||||
name: "Appel de la fonction isEven",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `console.log(isEven(4)); // true
|
|
||||||
console.log(isEven(5)); // false`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsBlockScopeSnippets = [
|
|
||||||
{
|
|
||||||
name: "Exemple avec let",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `let x = 10;
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
let x = 20;
|
|
||||||
console.log(x); // 20
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(x); // 10`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple avec const",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const x = 10;
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
const x = 20;
|
|
||||||
console.log(x); // 20
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(x); // 10`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple avec var",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `var x = 10;
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
var x = 20;
|
|
||||||
console.log(x); // 20
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(x); // 20`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsBlockScopeExplanations = [
|
|
||||||
{
|
|
||||||
name: "Utilisation de let",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
La variable <code>x</code> est déclarée avec <code>let</code> dans le
|
|
||||||
scope global.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Dans le bloc <code>if</code>, une nouvelle variable <code>x</code> est
|
|
||||||
déclarée, masquant la variable globale.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Lorsque nous affichons <code>x</code> à l'intérieur du bloc, il
|
|
||||||
renvoie la valeur de la variable locale (20).
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Lorsque nous affichons <code>x</code> en dehors du bloc, il renvoie la
|
|
||||||
valeur de la variable globale (10).
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Utilisation de const",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
La variable <code>x</code> est déclarée avec <code>const</code> dans
|
|
||||||
le scope global.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Dans le bloc <code>if</code>, une nouvelle variable <code>x</code> est
|
|
||||||
déclarée, masquant la variable globale.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Lorsque nous affichons <code>x</code> à l'intérieur du bloc, il
|
|
||||||
renvoie la valeur de la variable locale (20).
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Lorsque nous affichons <code>x</code> en dehors du bloc, il renvoie la
|
|
||||||
valeur de la variable globale (10).
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Utilisation de var",
|
|
||||||
children: (
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
La variable <code>x</code> est déclarée avec <code>var</code> dans le
|
|
||||||
scope global.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Dans le bloc <code>if</code>, une nouvelle variable <code>x</code> est
|
|
||||||
déclarée, remplaçant la variable globale.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Lorsque nous affichons <code>x</code> à l'intérieur du bloc, il
|
|
||||||
renvoie la valeur de la variable globale (20).
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Lorsque nous affichons <code>x</code> en dehors du bloc, il renvoie la
|
|
||||||
valeur de la variable globale (20).
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsFunctionScopeSnippets = [
|
|
||||||
{
|
|
||||||
name: "Exemple avec let",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `let x = 10;
|
|
||||||
|
|
||||||
function example() {
|
|
||||||
let x = 20;
|
|
||||||
let y = "Bonjour !";
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
let x = 30;
|
|
||||||
console.log(x); // 30
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(x); // 20
|
|
||||||
}
|
|
||||||
|
|
||||||
example();
|
|
||||||
console.log(x); // 10
|
|
||||||
console.log(y); // ReferenceError: y is not defined`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple avec const",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const x = 10;
|
|
||||||
|
|
||||||
function example() {
|
|
||||||
const x = 20;
|
|
||||||
const y = "Bonjour !";
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
const x = 30;
|
|
||||||
console.log(x); // 30
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(x); // 20
|
|
||||||
console.log(y); // Bonjour !
|
|
||||||
}
|
|
||||||
|
|
||||||
example();
|
|
||||||
console.log(x); // 10
|
|
||||||
console.log(y); // ReferenceError: y is not defined`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple avec var",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `var x = 10;
|
|
||||||
|
|
||||||
function example() {
|
|
||||||
var x = 20;
|
|
||||||
var y = "Bonjour !";
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
var x = 30;
|
|
||||||
console.log(x); // 30
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(x); // 30
|
|
||||||
}
|
|
||||||
|
|
||||||
example();
|
|
||||||
console.log(x); // 10
|
|
||||||
console.log(y); // ReferenceError: y is not defined`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsHoistingSnippets = [
|
|
||||||
{
|
|
||||||
name: "Exemple avec let",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `console.log(x); // ReferenceError: Cannot access 'x' before initialization
|
|
||||||
|
|
||||||
let x = 10;
|
|
||||||
console.log(x); // 10`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple avec const",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `console.log(x); // ReferenceError: Cannot access 'x' before initialization
|
|
||||||
|
|
||||||
const x = 10;
|
|
||||||
console.log(x); // 10`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple avec var",
|
|
||||||
withLineNumbers: true,
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `console.log(x); // undefined
|
|
||||||
|
|
||||||
var x = 10;
|
|
||||||
console.log(x); // 10`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
jsFunctions: () => <Snippet snippets={jsFunctionsSnippets} />,
|
|
||||||
jsIsEven: () => <Snippet snippets={jsIsEvenSnippets} />,
|
|
||||||
jsCallIsEven: () => <Snippet snippets={jsCallIsEvenSnippets} />,
|
|
||||||
jsBlockScope: () => <Snippet snippets={jsBlockScopeSnippets} />,
|
|
||||||
jsBlockScopeExplanations: () => (
|
|
||||||
<Snippet snippets={jsBlockScopeExplanations} />
|
|
||||||
),
|
|
||||||
jsFunctionScope: () => <Snippet snippets={jsFunctionScopeSnippets} />,
|
|
||||||
jsHoisting: () => <Snippet snippets={jsHoistingSnippets} />,
|
|
||||||
};
|
|
||||||
@ -1,180 +0,0 @@
|
|||||||
---
|
|
||||||
title: Les instructions avec JavaScript
|
|
||||||
description: Voyons comment écrire et comprendre des instructions avec JavaScript.
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
import tabs from "./tabs";
|
|
||||||
|
|
||||||
Maintenant que nous avons vu la syntaxe de base de JavaScript, il est temps de plonger dans les instructions.
|
|
||||||
|
|
||||||
## Qu'est-ce qu'une instruction ?
|
|
||||||
|
|
||||||
Une instruction est une ligne de code qui effectue une **action spécifique**.
|
|
||||||
Il s'agit de la **brique de base** de tout programme et JavaScript ne fait pas exception à la règle !
|
|
||||||
|
|
||||||
Par exemple, voici quelques instructions simples en JavaScript :
|
|
||||||
|
|
||||||
<tabs.jsBasicInstructions />
|
|
||||||
|
|
||||||
Dans cet exemple, nous avons trois instructions :
|
|
||||||
- La première instruction affiche un message dans la console avec `console.log()`.
|
|
||||||
- La deuxième instruction déclare une variable `nom` et lui assigne la valeur `"John Doe"`.
|
|
||||||
- La troisième instruction est une condition sur une variable `age` qui affiche un message différent selon la valeur de `age`.
|
|
||||||
|
|
||||||
## Les différents types d'instructions
|
|
||||||
|
|
||||||
Comme vu plus tôt, il existe plusieurs types d'instructions en JavaScript.
|
|
||||||
|
|
||||||
### Instructions de déclaration
|
|
||||||
|
|
||||||
Les instructions de déclaration sont utilisées pour déclarer des **variables**, des **fonctions** ou des **classes**.
|
|
||||||
|
|
||||||
C'est ce qui était fait dans l'exemple précédent avec la déclaration de la variable `nom`.
|
|
||||||
|
|
||||||
### Instructions de contrôle de flux
|
|
||||||
|
|
||||||
Les instructions de contrôle de flux sont utilisées pour contrôler le flux d'exécution du programme.
|
|
||||||
Elles permettent de prendre des décisions selon certaines **conditions**.
|
|
||||||
|
|
||||||
### Instructions de boucle
|
|
||||||
|
|
||||||
Les instructions de boucle sont utilisées pour exécuter un bloc de code plusieurs fois.
|
|
||||||
Elles sont souvent utilisées pour parcourir des tableaux _(un regroupement de données)_.
|
|
||||||
|
|
||||||
### Instructions de gestion des erreurs
|
|
||||||
|
|
||||||
Pour gérer les erreurs, JavaScript nous met à disposition des instructions comme `try`, `catch` et `finally`.
|
|
||||||
|
|
||||||
Ces instructions permettent de gérer les erreurs qui peuvent survenir lors de l'exécution du code.
|
|
||||||
|
|
||||||
### Autres instructions
|
|
||||||
|
|
||||||
Il existe d'autres instructions comme `return`, `break`, `continue`, `throw` ou encore `debugger` qui sont utilisées pour des cas spécifiques.
|
|
||||||
|
|
||||||
On les utilisera au fur et à mesure de notre apprentissage.
|
|
||||||
|
|
||||||
## Faisons notre premier programme !
|
|
||||||
|
|
||||||
Maintenant que nous avons vu les instructions de base, il est temps de mettre tout cela en pratique.
|
|
||||||
|
|
||||||
> Quoi ?! Mais je ne sais pas à quoi ça ressemble !
|
|
||||||
|
|
||||||
Pas de panique ! On ne va pas faire du JavaScript pur tout de suite 😉.
|
|
||||||
On va commencer par du **pseudo-code**.
|
|
||||||
|
|
||||||
### Qu'est-ce que le pseudo-code ?
|
|
||||||
|
|
||||||
Le pseudo-code est une façon de décrire un algorithme ou un programme sans se soucier de la syntaxe d'un langage de programmation particulier.
|
|
||||||
|
|
||||||
Il utilise un langage simple et compréhensible par tous, ce qui permet de se concentrer sur la logique du programme plutôt que sur les détails de la syntaxe.
|
|
||||||
|
|
||||||
Voici quelques exemples de pseudo-code :
|
|
||||||
|
|
||||||
<tabs.pseudoCode />
|
|
||||||
|
|
||||||
Tu as évidemment le droit de changer les mots pour les adapter à ton propre style ou à ta propre compréhension. L'idée, c'est juste d'écrire un algorithme qui soit compréhensible par toi-même et par les autres.
|
|
||||||
|
|
||||||
### Challenge
|
|
||||||
|
|
||||||
Maintenant, c'est à ton tour de jouer !
|
|
||||||
|
|
||||||
Tu vas devoir écrire un pseudo-code qui :
|
|
||||||
|
|
||||||
- Demande à l'utilisateur son nom.
|
|
||||||
- Demande à l'utilisateur son âge.
|
|
||||||
- Si l'utilisateur est majeur _(18 ans ou plus)_, affiche un message de bienvenue.
|
|
||||||
- Sinon, affiche un message lui disant qu'il n'est pas majeur.
|
|
||||||
|
|
||||||
<Callout type="question" title="Comment dois-je m'y prendre ?">
|
|
||||||
Pour ce challenge, tu peux utiliser les instructions suivantes :
|
|
||||||
|
|
||||||
- `DEBUT` : Indique le début du programme.
|
|
||||||
- `FIN` : Indique la fin du programme.
|
|
||||||
- `VARIABLE x` : Indique la déclaration d'une variable nomée `x`.
|
|
||||||
- `LIRE x` : Indique la lecture d'une valeur pour la variable `x`.
|
|
||||||
- `AFFICHER "..."` : Indique l'affichage du message entre guillemets.
|
|
||||||
- `SI ... ALORS` : Indique une condition.
|
|
||||||
- `SINON` : Indique le cas où la condition n'est pas remplie.
|
|
||||||
- `FIN SI` : Indique la fin de la condition.
|
|
||||||
- `x >= y` : Indique une comparaison entre la variable `x` et la valeur `y`.
|
|
||||||
|
|
||||||
Pour le moment, tu n'as pas besoin de te soucier de la syntaxe JavaScript.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Traduire le pseudo-code en JavaScript
|
|
||||||
|
|
||||||
Une fois que tu as écrit ton pseudo-code, il est temps de le traduire en JavaScript.
|
|
||||||
|
|
||||||
Puisque je ne peux pas lire dans tes pensées, je vais te donner un exemple de pseudo-code final, pour que l'on voit ensuite comment le traduire en JavaScript !
|
|
||||||
|
|
||||||
<tabs.pseudoCodeFinal />
|
|
||||||
|
|
||||||
Dans cet exemple, on retrouve :
|
|
||||||
|
|
||||||
- **Lignes 1 et 15 :** Le début et la fin du programme.
|
|
||||||
- **Ligne 2 :** La déclaration de la variable `nom`.
|
|
||||||
- **Ligne 3 :** Affichage du message demandant le nom de l'utilisateur.
|
|
||||||
- **Ligne 4 :** Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable `nom`.
|
|
||||||
- **Ligne 6 :** La déclaration de la variable `age`.
|
|
||||||
- **Ligne 7 :** Affichage du message demandant l'âge de l'utilisateur.
|
|
||||||
- **Ligne 8 :** Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable `age`.
|
|
||||||
- **Ligne 10 :** La condition qui vérifie si l'utilisateur est majeur.
|
|
||||||
- **Ligne 11 :** Affichage du message de bienvenue si l'utilisateur est majeur.
|
|
||||||
- **Ligne 13 :** Affichage du message indiquant que l'utilisateur n'est pas majeur.
|
|
||||||
- **Ligne 14 :** Fin de la condition.
|
|
||||||
|
|
||||||
Et voilà !
|
|
||||||
Maintenant, il ne te reste plus qu'à traduire ce pseudo-code en JavaScript... 😏
|
|
||||||
|
|
||||||
### Challenge 2
|
|
||||||
|
|
||||||
Ce que je vais faire, c'est te donner l'équivalent de certaines instructions en JavaScript pour t'aider à traduire ton pseudo-code en JavaScript.
|
|
||||||
|
|
||||||
- `DEBUT` : Pas d'équivalent en JavaScript _(ouf !)_
|
|
||||||
- `FIN` : Pas d'équivalent en JavaScript _(ouf !)_
|
|
||||||
- `VARIABLE x` : `let x;` ou `const x;`
|
|
||||||
- `LIRE x` : `x = prompt("...");` _(`"..."` est le message affiché à l'utilisateur)_
|
|
||||||
- `AFFICHER "..." + x` : `console.log("... " + x);`
|
|
||||||
- `SI ... ALORS` : `if (...) {`
|
|
||||||
- `SINON` : `} else {`
|
|
||||||
- `FIN SI` : `}`
|
|
||||||
- `x >= y` : `x >= y` _(pas de changement, ouf !)_
|
|
||||||
|
|
||||||
Prêt à en découdre ? 💪
|
|
||||||
|
|
||||||
### Tester ton programme
|
|
||||||
|
|
||||||
Une fois que tu as traduit ton pseudo-code en JavaScript, il est temps de tester ton programme !
|
|
||||||
|
|
||||||
Pour pouvoir le tester, tu peux tout simplement copier-coller ton code dans la console de ton navigateur ou dans un éditeur de code en ligne comme [CodePen](https://codepen.io/) ou [JSFiddle](https://jsfiddle.net/).
|
|
||||||
|
|
||||||
### Correction
|
|
||||||
|
|
||||||
Pour l'équivalent de l'exemple de pseudo-code, voici ce que ça donne en JavaScript :
|
|
||||||
|
|
||||||
<tabs.jsFinal />
|
|
||||||
|
|
||||||
Et voilà ! 🎉
|
|
||||||
Mais faisons un petit tour d'horizon sur ce code pour bien comprendre ce qu'il fait.
|
|
||||||
|
|
||||||
- **Ligne 2 :** On déclare une variable `nom` avec le mot-clé `const`, puis on lui assigne la valeur saisie par l'utilisateur avec `prompt()`.
|
|
||||||
- **Ligne 5 :** On déclare une variable `age` avec le mot-clé `const`, puis on lui assigne la valeur saisie par l'utilisateur avec `prompt()`.
|
|
||||||
- **Ligne 8 :** On vérifie si l'utilisateur est majeur avec une condition `if (age >= 18)`.
|
|
||||||
- **Ligne 9 :** Si l'utilisateur est majeur, on affiche un message de bienvenue avec `console.log()`.
|
|
||||||
- **Ligne 10 :** Sinon...
|
|
||||||
- **Ligne 11 :** On affiche un message indiquant que l'utilisateur n'est pas majeur avec `console.log()`.
|
|
||||||
- **Ligne 12 :** Fin de la condition.
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
Pfiou, ça fait déjà pas mal de choses à digérer ! 😅
|
|
||||||
|
|
||||||
On a vu les instructions de base en JavaScript, comment écrire du pseudo-code et comment le traduire en JavaScript.
|
|
||||||
On a même fait un petit programme ensemble !
|
|
||||||
|
|
||||||
Il est temps de faire une pause et de digérer tout ça avant de passer à la suite.
|
|
||||||
C'est important de ne pas vouloir aller trop vite en enchaînant les articles, surtout quand on débute.
|
|
||||||
|
|
||||||
Prends le temps de bien comprendre chaque concept avant de passer au suivant, et n'hésite pas à revenir sur les bases si tu as des doutes !
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
import { Snippet } from "@/components/Snippet";
|
|
||||||
|
|
||||||
const jsBasicInstructionsSnippets = [
|
|
||||||
{
|
|
||||||
name: "Instruction d'affichage dans la console",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `console.log("Hello, World!");`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Instruction de déclaration",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const nom = "John Doe";`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Instruction de condition",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `if (age >= 18) {
|
|
||||||
console.log("Vous êtes majeur.");
|
|
||||||
} else {
|
|
||||||
console.log("Vous êtes mineur.");
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const pseudoCodeSnippets = [
|
|
||||||
{
|
|
||||||
name: "Pseudo-code d'affichage",
|
|
||||||
codeLanguage: "pseudocode",
|
|
||||||
code: `AFFICHER "Bonjour, le monde!"`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Pseudo-code d'une fonction simple",
|
|
||||||
codeLanguage: "pseudocode",
|
|
||||||
code: `FONCTION somme(a, b)
|
|
||||||
RETOURNER a + b
|
|
||||||
FIN FONCTION`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Pseudo-code d'une boucle",
|
|
||||||
codeLanguage: "pseudocode",
|
|
||||||
code: `POUR i DE 1 À 10
|
|
||||||
AFFICHER i
|
|
||||||
FIN POUR`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Pseudo-code d'une condition",
|
|
||||||
codeLanguage: "pseudocode",
|
|
||||||
code: `SI age >= 18 ALORS
|
|
||||||
AFFICHER "Vous êtes majeur."
|
|
||||||
SINON
|
|
||||||
AFFICHER "Vous êtes mineur."
|
|
||||||
FIN SI`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const pseudoCodeFinalSnippets = [
|
|
||||||
{
|
|
||||||
name: "Pseudo-code du challenge",
|
|
||||||
codeLanguage: "pseudocode",
|
|
||||||
withLineNumbers: true,
|
|
||||||
code: `DEBUT
|
|
||||||
VARIABLE nom
|
|
||||||
AFFICHER "Entrez votre nom :"
|
|
||||||
LIRE nom
|
|
||||||
|
|
||||||
VARIABLE age
|
|
||||||
AFFICHER "Entrez votre âge :"
|
|
||||||
LIRE age
|
|
||||||
|
|
||||||
SI age >= 18 ALORS
|
|
||||||
AFFICHER "Bienvenue " + nom + ", vous êtes majeur."
|
|
||||||
SINON
|
|
||||||
AFFICHER "Désolé " + nom + ", vous êtes mineur."
|
|
||||||
FIN SI
|
|
||||||
FIN`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsFinalSnippets = [
|
|
||||||
{
|
|
||||||
name: "Code du challenge",
|
|
||||||
codeLanguage: "js",
|
|
||||||
withLineNumbers: true,
|
|
||||||
code: `// Demander le nom de l'utilisateur
|
|
||||||
const nom = prompt("Entrez votre nom :");
|
|
||||||
|
|
||||||
// Demander l'âge de l'utilisateur
|
|
||||||
const age = prompt("Entrez votre âge :");
|
|
||||||
|
|
||||||
// Vérifier si l'utilisateur est majeur ou mineur
|
|
||||||
if (age >= 18) {
|
|
||||||
console.log("Bienvenue " + nom + ", vous êtes majeur.");
|
|
||||||
} else {
|
|
||||||
console.log("Désolé " + nom + ", vous êtes mineur.");
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
...pseudoCodeFinalSnippets,
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
jsBasicInstructions: () => <Snippet snippets={jsBasicInstructionsSnippets} />,
|
|
||||||
pseudoCode: () => <Snippet snippets={pseudoCodeSnippets} />,
|
|
||||||
pseudoCodeFinal: () => <Snippet snippets={pseudoCodeFinalSnippets} />,
|
|
||||||
jsFinal: () => <Snippet snippets={jsFinalSnippets} />,
|
|
||||||
};
|
|
||||||
@ -1,198 +0,0 @@
|
|||||||
---
|
|
||||||
title: La syntaxe de base de JavaScript
|
|
||||||
description: Découvrons ensemble la syntaxe de base de JavaScript et comment il fonctionne dans le navigateur.
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
import tabs from "./tabs";
|
|
||||||
|
|
||||||
Pour cet article, nous allons explorer les fondements de la syntaxe de base du langage JavaScript.
|
|
||||||
|
|
||||||
Mais déjà, faisons un rappel sur ce qu'est la syntaxe !
|
|
||||||
|
|
||||||
## Qu'est-ce que la syntaxe ?
|
|
||||||
|
|
||||||
La syntaxe d'un langage de programmation vient définir les règles et les conventions à suivre lors de l'écriture du code. Elle permet de structurer le code de manière cohérente et facilement compréhensible pour les développeurs et les machines.
|
|
||||||
|
|
||||||
La syntaxe de JavaScript est inspirée de plusieurs langages, notamment **Java**, **C** et **Python**.
|
|
||||||
Elle est conçue pour être simple et intuitive, ce qui en fait un excellent choix pour les débutants.
|
|
||||||
|
|
||||||
## Structure du code JavaScript
|
|
||||||
|
|
||||||
La structure de base d'un programme JavaScript est assez simple.
|
|
||||||
Un programme JavaScript est généralement constitué de plusieurs éléments, notamment :
|
|
||||||
|
|
||||||
- **Instructions** : Les lignes de code qui effectuent des actions.
|
|
||||||
- **Commentaires** : Utilisés pour ajouter des notes explicatives dans le code.
|
|
||||||
- **Variables** : Utilisées pour stocker des données.
|
|
||||||
- **Fonctions** : Utilisées pour encapsuler des blocs de code réutilisables.
|
|
||||||
|
|
||||||
## Instructions
|
|
||||||
|
|
||||||
Les instructions sont les lignes de code qui effectuent des actions.
|
|
||||||
Il peut s'agir d'opérations mathématiques, de manipulations de chaînes de caractères, d'appels de fonctions, etc.
|
|
||||||
|
|
||||||
Bien que ça ne soit pas obligatoire en JavaScript, une instruction se termine généralement par un **point-virgule** _(`;`)_.
|
|
||||||
|
|
||||||
<tabs.jsInstructions />
|
|
||||||
|
|
||||||
Parmis les instructions, on trouve :
|
|
||||||
|
|
||||||
- **Déclaration de variable** : Utilisée pour déclarer une variable.
|
|
||||||
- **Affectation** : Utilisée pour assigner une valeur à une variable.
|
|
||||||
- **Appel de fonction/méthode** : Utilisée pour appeler une fonction ou une méthode.
|
|
||||||
- **Opérations mathématiques** : Utilisées pour effectuer des calculs.
|
|
||||||
- **Manipulation de chaînes de caractères** : Utilisée pour manipuler des chaînes de caractères.
|
|
||||||
- **Conditions** : Utilisées pour exécuter du code en fonction de certaines conditions.
|
|
||||||
- **Boucles** : Utilisées pour exécuter du code plusieurs fois.
|
|
||||||
- **Retour de valeur** : Utilisée pour retourner une valeur d'une fonction.
|
|
||||||
|
|
||||||
Mais on se garde tout ça pour plus tard 😉.
|
|
||||||
|
|
||||||
## Commentaires
|
|
||||||
|
|
||||||
Les commentaires sont des sections de code qui ne sont pas exécutées. Elles sont utilisées pour ajouter des notes ou des explications sur le code.
|
|
||||||
|
|
||||||
Il existe trois types de commentaires en JavaScript :
|
|
||||||
|
|
||||||
- **Commentaire sur une seule ligne** : Utilise `//` pour commenter une seule ligne.
|
|
||||||
- **Commentaire sur plusieurs lignes** : Utilise `/* ... */` pour commenter plusieurs lignes.
|
|
||||||
- **Commentaire de documentation** : Utilise `/** ... */` pour documenter des fonctions ou des classes.
|
|
||||||
|
|
||||||
<tabs.jsComments />
|
|
||||||
|
|
||||||
<Callout type="note" title="Commentaire de documentation">
|
|
||||||
Le commentaire de documentation est souvent utilisé pour générer automatiquement la documentation du code.
|
|
||||||
Il est généralement utilisé avec des outils comme JSDoc.
|
|
||||||
|
|
||||||
Il permet de décrire les paramètres, le type de retour et d'autres informations utiles sur la fonction ou la classe.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## Variables
|
|
||||||
|
|
||||||
Les variables sont utilisées pour stocker des valeurs qui peuvent être modifiées au cours de l'exécution du programme.
|
|
||||||
En JavaScript, les variables doivent être déclarées avant d'être utilisées.
|
|
||||||
|
|
||||||
Il existe trois façons de déclarer une variable :
|
|
||||||
|
|
||||||
- `var` : Utilisé pour déclarer une variable globale ou locale.
|
|
||||||
- `let` : Utilisé pour déclarer une variable locale avec une portée de bloc.
|
|
||||||
- `const` : Utilisé pour déclarer une variable constante dont la valeur ne peut pas être modifiée.
|
|
||||||
|
|
||||||
On reparlera de cette histoire de portée dans un prochain article, mais pour l'instant, voici un exemple de déclaration de variable :
|
|
||||||
|
|
||||||
<tabs.jsVariables />
|
|
||||||
|
|
||||||
Dans cet exemple, nous avons déclaré trois variables : `nom`, `age` et `ville`.
|
|
||||||
|
|
||||||
### Variable avec var
|
|
||||||
|
|
||||||
La déclaration de variable avec `var` est la plus ancienne, mais elle est moins recommandée aujourd'hui en raison de son comportement particulier.
|
|
||||||
|
|
||||||
La valeur d'une variable déclarée avec `var` peut être modifiée à tout moment.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Utilisation de var">
|
|
||||||
`var` est une déclaration de variable qui a une portée fonctionnelle ou globale.
|
|
||||||
On verra dans un prochain article de quoi il s'agit.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Variable avec let
|
|
||||||
|
|
||||||
La déclaration de variable avec `let` est plus moderne et est recommandée pour la plupart des cas.
|
|
||||||
Elle permet de déclarer une variable avec une portée de bloc _(block scope)_.
|
|
||||||
|
|
||||||
La valeur d'une variable déclarée avec `let` peut être modifiée.
|
|
||||||
|
|
||||||
### Variable avec const
|
|
||||||
|
|
||||||
La déclaration de variable avec `const` est similaire à `let`, mais elle est utilisée pour déclarer une variable constante.
|
|
||||||
Elle profite du même concept de portée de bloc.
|
|
||||||
|
|
||||||
La valeur d'une variable déclarée avec `const` ne peut pas être modifiée après sa déclaration.
|
|
||||||
|
|
||||||
## Fonctions
|
|
||||||
|
|
||||||
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique.
|
|
||||||
Elles peuvent prendre des **paramètres en entrée** et **retourner une valeur en sortie**.
|
|
||||||
|
|
||||||
En JavaScript, une fonction peut être déclarée de plusieurs manières :
|
|
||||||
|
|
||||||
- **Fonction déclarée** : Utilise le mot-clé `function` suivi du nom de la fonction.
|
|
||||||
- **Fonction anonyme** : N'a pas de nom et est généralement utilisée comme argument pour une autre fonction.
|
|
||||||
- **Fonction fléchée** : Une syntaxe plus concise pour déclarer des fonctions.
|
|
||||||
|
|
||||||
<tabs.jsFunctions />
|
|
||||||
|
|
||||||
### Fonction déclarée
|
|
||||||
|
|
||||||
La déclaration de fonction est la méthode la plus simple à utiliser.
|
|
||||||
Elle est déclarée avec le mot-clé `function` suivi du nom de la fonction et des parenthèses.
|
|
||||||
|
|
||||||
### Fonction anonyme
|
|
||||||
|
|
||||||
Dans certains cas, il peut être utile de déclarer une fonction sans lui donner de nom.
|
|
||||||
C'est ce qu'on appelle une fonction anonyme.
|
|
||||||
|
|
||||||
Elle est souvent utilisée comme argument pour une autre fonction ou pour créer des fonctions de rappel _(callback functions)_.
|
|
||||||
|
|
||||||
### Fonction fléchée
|
|
||||||
|
|
||||||
La fonction fléchée est une syntaxe plus concise et moderne pour déclarer des fonctions.
|
|
||||||
Elle a un comportement particulier dans le contexte de retour de valeur, avec une syntaxe raccourcie pour les fonctions à une seule ligne.
|
|
||||||
|
|
||||||
<Callout type="question" title="Comment fonctionne le retour de valeur des fonctions fléchées ?">
|
|
||||||
Dans une fonction déclarée, on utilise le mot-clé `return` pour retourner une valeur.
|
|
||||||
Le fonctionnement est identique pour les fonctions fléchées, mais il est possible de profiter d'une syntaxe raccourcie !
|
|
||||||
|
|
||||||
Dans le cas d'une fonction fléchée à une seule ligne, il n'est pas nécessaire d'utiliser le mot-clé `return`.
|
|
||||||
|
|
||||||
C'est d'ailleurs ce qui est fait dans l'exemple donné plus tôt, avec un retour implicite de `a + b`.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## Bonnes pratiques
|
|
||||||
|
|
||||||
### Conventions de nommage
|
|
||||||
|
|
||||||
Il est important de suivre certaines conventions pour rendre le code plus lisible et maintenable.
|
|
||||||
Voici quelques-unes des conventions les plus courantes :
|
|
||||||
|
|
||||||
- Utiliser des noms de variables et de fonctions significatifs.
|
|
||||||
- Indenter le code pour améliorer la lisibilité.
|
|
||||||
- Utiliser des commentaires pour expliquer le code complexe.
|
|
||||||
- Placer un `;` _(point virgule)_ à la fin de chaque instruction.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Attention aux commentaires !">
|
|
||||||
Écrire des commentaires : c'est bien ✅.
|
|
||||||
Écrire trop de commentaires : **c'est pas bien** ❌.
|
|
||||||
|
|
||||||
L'intérêt des commentaires est d'expliquer le code, pas de le répéter.
|
|
||||||
Si le code est suffisamment clair, il n'est pas nécessaire d'ajouter des commentaires.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Outils de développement
|
|
||||||
|
|
||||||
Pour faciliter le développement, il existe plusieurs outils et environnements de développement intégrés _(IDE)_ qui peuvent aider à écrire du code JavaScript.
|
|
||||||
|
|
||||||
En gratuit, on peut citer :
|
|
||||||
|
|
||||||
- **Visual Studio Code** : Un éditeur de code puissant et extensible.
|
|
||||||
- **Atom** : Un éditeur de code open-source développé par GitHub.
|
|
||||||
- **Sublime Text** : Un éditeur de code léger et rapide.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Attention aux éditeurs avec de l'IA !">
|
|
||||||
Ne te méprends pas, l'IA c'est génial ! Mais il faut faire attention à ne pas trop se reposer sur elle.
|
|
||||||
|
|
||||||
Lorsqu'on utilise un éditeur de code avec de l'IA, il est important de garder à l'esprit que l'IA peut parfois faire des erreurs. Et ces erreurs peuvent très bien être des erreurs de sécurité, ce qui n'est pas détectable avant d'avoir été exploité.
|
|
||||||
|
|
||||||
Si demain tu demandes à l'IA de te générer un code pour une API sans être en mesure de le remettre en question, j'espère que tu ne tiens pas aux données de tes utilisateurs ou à la sécurité de ton application !
|
|
||||||
|
|
||||||
Tant que tu es en phase d'apprentissage, je te conseille de ne pas utiliser d'IA de manière générale.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
Tu l'auras remarqué, même si la syntaxe de JavaScript est relativement simple, il y a beaucoup de choses à apprendre !
|
|
||||||
|
|
||||||
Ne va pas trop vite dans ton apprentissage et n'hésite pas à revenir sur les bases si tu as des doutes.
|
|
||||||
Il est important de bien comprendre la syntaxe de base avant de passer à des concepts plus avancés.
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import { Snippet } from "@/components/Snippet";
|
|
||||||
|
|
||||||
const jsInstructionsSnippets = [
|
|
||||||
{
|
|
||||||
name: "Instruction d'affichage dans la console",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `console.log("Hello, World!");`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Instruction de déclaration",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const nom = "John Doe";`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Instruction de condition",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `if (age >= 18) {
|
|
||||||
console.log("Vous êtes majeur.");
|
|
||||||
} else {
|
|
||||||
console.log("Vous êtes mineur.");
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsVariablesSnippets = [
|
|
||||||
{
|
|
||||||
name: "Déclaration de variables",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `let nom = "John Doe";
|
|
||||||
const age = 30;
|
|
||||||
var ville = "Paris";`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsFunctionsSnippets = [
|
|
||||||
{
|
|
||||||
name: "Fonction déclarée",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `function addition(a, b) {
|
|
||||||
return a + b;
|
|
||||||
}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction anonyme",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const addition = function(a, b) {
|
|
||||||
return a + b;
|
|
||||||
};`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction fléchée avec retour explicite",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const addition = (a, b) => {
|
|
||||||
return a + b;
|
|
||||||
};`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Fonction fléchée avec retour implicite",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: "const addition = (a, b) => a + b;",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsCommentsSnippets = [
|
|
||||||
{
|
|
||||||
name: "Commentaire sur une ligne",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: "// Ceci est un commentaire sur une ligne",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Commentaire sur plusieurs lignes",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `/*
|
|
||||||
Ceci est un commentaire
|
|
||||||
sur plusieurs lignes
|
|
||||||
*/`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Commentaire de documentation",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `/**
|
|
||||||
* Ceci est un commentaire de documentation
|
|
||||||
* @param {number} a - Le premier paramètre
|
|
||||||
* @param {number} b - Le deuxième paramètre
|
|
||||||
* @returns {number} La somme de a et b
|
|
||||||
*/`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
jsInstructions: () => <Snippet snippets={jsInstructionsSnippets} />,
|
|
||||||
jsVariables: () => <Snippet snippets={jsVariablesSnippets} />,
|
|
||||||
jsFunctions: () => <Snippet snippets={jsFunctionsSnippets} />,
|
|
||||||
jsComments: () => <Snippet snippets={jsCommentsSnippets} />,
|
|
||||||
};
|
|
||||||
@ -1,214 +0,0 @@
|
|||||||
---
|
|
||||||
title: Les types de données de JavaScript
|
|
||||||
description: Découvrons ensemble les types de données de JavaScript
|
|
||||||
tags: []
|
|
||||||
---
|
|
||||||
|
|
||||||
import Callout from "@/components/Callout";
|
|
||||||
import tabs from "./tabs";
|
|
||||||
|
|
||||||
Revenons un peu en arrière et parlons des types de données en JavaScript.
|
|
||||||
|
|
||||||
On a déjà eu l'occasion de tester très rapidement un petit algorithme, mais on n'a pas parlé des types de données !
|
|
||||||
|
|
||||||
## Qu'est-ce qu'un type de données ?
|
|
||||||
|
|
||||||
Un type de données est une classification qui définit le type de valeur qu'une variable peut contenir.
|
|
||||||
|
|
||||||
Dans notre code précédent, nous avions utilisé :
|
|
||||||
|
|
||||||
- `const nom = prompt("Entrez votre nom :");` pour demander le nom de l'utilisateur.
|
|
||||||
- `const age = prompt("Entrez votre âge :");` pour demander l'âge de l'utilisateur.
|
|
||||||
|
|
||||||
Pour les variables `nom` et `age`, on a utilisé la fonction `prompt()` qui renvoie une chaîne de caractères.
|
|
||||||
On a donc deux variables de type `string` _(chaîne de caractères)_ !
|
|
||||||
|
|
||||||
## Les types de données en JavaScript
|
|
||||||
|
|
||||||
JavaScript prend en charge plusieurs types de données, notamment :
|
|
||||||
|
|
||||||
- **String** : Représente une chaîne de caractères.
|
|
||||||
- **Number** : Représente un nombre _(entier ou décimal)_.
|
|
||||||
- **Boolean** : Représente une valeur booléenne _(vrai ou faux)_.
|
|
||||||
- **Object** : Représente un objet, qui est une collection de paires clé-valeur.
|
|
||||||
- **Array** : Représente un tableau, qui est une collection ordonnée de valeurs.
|
|
||||||
- **Null** : Représente une valeur nulle ou absente.
|
|
||||||
- **Undefined** : Représente une variable qui n'a pas été initialisée.
|
|
||||||
|
|
||||||
On parle ici de **types primitifs** et de **types complexes**.
|
|
||||||
|
|
||||||
- Les types primitifs sont les types de données de base, comme `string`, `number`, `boolean`, `null` et `undefined`.
|
|
||||||
- Les types complexes sont des types de données plus avancés, comme `object` et `array`.
|
|
||||||
|
|
||||||
<Callout type="question" title="OK, et à quoi ça va m'avancer ?">
|
|
||||||
En gros, les types de données sont importants car ils nous permettent de savoir quel type de valeur on manipule dans notre code.
|
|
||||||
|
|
||||||
Ça nous aide à éviter les erreurs et à écrire du code plus propre et plus lisible.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
Avant de passer à des exemples plus concrets, voyons un peu chaque type de données en détail.
|
|
||||||
|
|
||||||
### String
|
|
||||||
|
|
||||||
Une chaîne de caractères _(alpha-numérique)_ est une séquence de caractères entourée de **guillemets** _("contenu")_, d'**apostrophes** _('contenu')_, ou de **backticks** _(\`contenu\`)_.
|
|
||||||
|
|
||||||
### Number
|
|
||||||
|
|
||||||
Un nombre peut être un entier ou un nombre à virgule flottante _(décimal)_.
|
|
||||||
Il n'y a pas de distinction entre les deux en JavaScript, tout est considéré comme un nombre.
|
|
||||||
|
|
||||||
### Boolean
|
|
||||||
|
|
||||||
Un booléen est une valeur qui peut être soit `true` _(vrai)_ soit `false` _(faux)_.
|
|
||||||
Il est souvent utilisé pour représenter des conditions ou des états.
|
|
||||||
|
|
||||||
### Null
|
|
||||||
|
|
||||||
Le type `null` représente une valeur nulle ou absente.
|
|
||||||
Il est souvent utilisé pour indiquer qu'une variable n'a pas de valeur ou qu'elle a été explicitement définie comme nulle.
|
|
||||||
|
|
||||||
### Undefined
|
|
||||||
|
|
||||||
Le type `undefined` représente une variable qui n'a pas été initialisée.
|
|
||||||
Il est souvent utilisé pour indiquer qu'une variable n'a pas encore de valeur ou qu'elle n'a pas été définie.
|
|
||||||
|
|
||||||
Il est important de noter que `undefined` est différent de `null`.
|
|
||||||
`undefined` signifie qu'une variable n'a pas été initialisée, tandis que `null` signifie qu'une variable a été explicitement définie comme nulle.
|
|
||||||
|
|
||||||
### Object
|
|
||||||
|
|
||||||
Un objet est une collection de paires clé-valeur.
|
|
||||||
Il est souvent utilisé pour représenter des entités complexes avec plusieurs propriétés.
|
|
||||||
|
|
||||||
Pour les personnes qui viennent de PHP, on peut dire que c'est un peu comme un tableau associatif.
|
|
||||||
Un objet est défini entre accolades `{}` et chaque paire clé-valeur est séparée par une virgule.
|
|
||||||
|
|
||||||
Par exemple :
|
|
||||||
|
|
||||||
<tabs.jsObjectExample />
|
|
||||||
|
|
||||||
### Array
|
|
||||||
|
|
||||||
Un tableau est une collection ordonnée de valeurs.
|
|
||||||
Il est souvent utilisé pour représenter des listes ou des ensembles de données.
|
|
||||||
|
|
||||||
Un tableau est défini entre crochets `[]` et chaque valeur est séparée par une virgule.
|
|
||||||
Son fonctionnement est identique à celui d'un tableau en PHP.
|
|
||||||
|
|
||||||
Par exemple :
|
|
||||||
|
|
||||||
<tabs.jsArrayExample />
|
|
||||||
|
|
||||||
### Autres types
|
|
||||||
|
|
||||||
Il existe d'autres types de données en JavaScript, comme `symbol` et `bigint`, mais ils sont moins couramment utilisés.
|
|
||||||
|
|
||||||
Le type `symbol` est utilisé pour créer des identifiants uniques et immuables, tandis que le type `bigint` est utilisé pour représenter des entiers de grande taille.
|
|
||||||
|
|
||||||
## Pourquoi se casser la tête avec les types de données ?
|
|
||||||
|
|
||||||
C'est effectivement une très bonne question, surtout quand on se dit que JavaScript est un langage à typage faible.
|
|
||||||
|
|
||||||
Mais ce n'est pas parce qu'il est à typage faible qu'il ne faut pas se soucier des types de données !
|
|
||||||
|
|
||||||
Par exemple... D'après toi, que va afficher le code suivant ?
|
|
||||||
|
|
||||||
<tabs.jsWrongTypesAddition />
|
|
||||||
|
|
||||||
Si tu as répondu `15`, laisse-moi te dire que ce n'est pas la bonne réponse !
|
|
||||||
En fait, le code va afficher `510`.
|
|
||||||
|
|
||||||
Maintenant, deuxième question :
|
|
||||||
Est-ce que la variable `estVrai` vaut `true` ou `false` ?
|
|
||||||
|
|
||||||
<tabs.jsWrongTypesBoolean />
|
|
||||||
|
|
||||||
Et là, tu as répondu `false` ? Raté !
|
|
||||||
La variable `estVrai` vaut `true`.
|
|
||||||
|
|
||||||
Mais alors, pourquoi ça ne fonctionne pas comme on l'attend ?
|
|
||||||
|
|
||||||
### La coercition de type
|
|
||||||
|
|
||||||
Dans le premier exemple, on a additionné une chaîne de caractères et un nombre.
|
|
||||||
Plus précisément, on a additionné le nombre `5` et la chaîne de caractères `"10"`.
|
|
||||||
|
|
||||||
Dans le cas d'une addition avec une chaîne de caractères, JavaScript va convertir le nombre en chaîne de caractères et faire une **concaténation** au lieu d'une addition.
|
|
||||||
C'est ce qu'on appelle la **coercition de type**.
|
|
||||||
|
|
||||||
Mais alors, pourquoi `5 == "5"` vaut `true` et pas `false` ?
|
|
||||||
|
|
||||||
La raison derrière ce résultat "étrange" est identique à celle de l'addition.
|
|
||||||
Le nombre `5` est converti en chaîne de caractères `"5"` et la comparaison est effectuée entre deux chaînes de caractères.
|
|
||||||
|
|
||||||
### La comparaison stricte
|
|
||||||
|
|
||||||
Maintenant, si on veut éviter ce genre de problème, on peut utiliser la comparaison stricte `===` au lieu de la comparaison faible `==`.
|
|
||||||
La comparaison stricte compare à la fois la valeur et le type de données.
|
|
||||||
|
|
||||||
Si on utilise la comparaison stricte, le code va afficher `false` pour la variable `estVrai`.
|
|
||||||
|
|
||||||
<Callout type="note" title="En résumé">
|
|
||||||
- Utilise `==` pour comparer des valeurs sans tenir compte du type de données.
|
|
||||||
- Utilise `===` pour comparer des valeurs en tenant compte du type de données.
|
|
||||||
- Utilise `!=` pour comparer des valeurs sans tenir compte du type de données.
|
|
||||||
- Utilise `!==` pour comparer des valeurs en tenant compte du type de données.
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### La conversion de type
|
|
||||||
|
|
||||||
La comparaison stricte est une excellente pratique pour éviter les erreurs de type, mais il est parfois nécessaire de convertir explicitement un type de données en un autre.
|
|
||||||
|
|
||||||
JavaScript propose plusieurs méthodes pour effectuer cette conversion :
|
|
||||||
|
|
||||||
- `String()` : Convertit une valeur en chaîne de caractères.
|
|
||||||
- `Number()` : Convertit une valeur en nombre.
|
|
||||||
- `Boolean()` : Convertit une valeur en booléen.
|
|
||||||
- `parseInt()` : Convertit une chaîne de caractères en entier.
|
|
||||||
- `parseFloat()` : Convertit une chaîne de caractères en nombre à virgule flottante.
|
|
||||||
|
|
||||||
<Callout type="warning" title="Attention aux fausses bonnes idées !">
|
|
||||||
J'ai déjà eu l'occasion de voir des développeurs préfixer le symbole `+` devant une variable ou l'appel d'une fonction pour convertir en nombre.
|
|
||||||
|
|
||||||
Par exemple : `const age = +prompt("Entrez votre âge :");`
|
|
||||||
|
|
||||||
Bien que ça fonctionne, c'est une pratique à éviter car elle peut prêter à confusion.
|
|
||||||
Il est préférable d'utiliser une méthode explicite, lisible et compréhensible par tous.
|
|
||||||
|
|
||||||
Par exemple : `const age = Number(prompt("Entrez votre âge :"));`
|
|
||||||
On encore : `const age = parseInt(prompt("Entrez votre âge :"), 10);`
|
|
||||||
|
|
||||||
C'est plus long, mais c'est beaucoup plus clair et compréhensible !
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
### Le cas de TypeScript
|
|
||||||
|
|
||||||
Puisqu'on parle de JavaScript et de typage, faisons une petite parenthèse sur **TypeScript** !
|
|
||||||
On ne va pas chercher à expliquer ce qu'est TypeScript ici, ce sera pour une autre suite d'articles.
|
|
||||||
|
|
||||||
Mais pour faire simple, TypeScript est une version de JavaScript qui ajoute un système de typage.
|
|
||||||
Il permet de définir explicitement le type de chaque variable, ce qui aide à éviter les erreurs de type et à rendre le code plus lisible.
|
|
||||||
|
|
||||||
Par exemple, voici comment on pourrait déclarer une variable de type `number` en TypeScript :
|
|
||||||
|
|
||||||
<tabs.jsTypescriptExample />
|
|
||||||
|
|
||||||
Il est impossible de faire la même chose avec JavaScript, c'est strictement réservé à TypeScript !
|
|
||||||
|
|
||||||
<Callout type="question" title="C'est quoi ce type `any` ?">
|
|
||||||
Le type `any` est un type spécial en TypeScript qui permet de désactiver le typage strict.
|
|
||||||
Il peut être utilisé pour indiquer qu'une variable peut contenir n'importe quel type de valeur _(string, number, null, undefined, etc.)_.
|
|
||||||
|
|
||||||
Cependant, il est recommandé d'éviter d'utiliser le type `any` autant que possible, car il annule les avantages du typage statique.
|
|
||||||
|
|
||||||
Et puis surtout... pourquoi utiliser TypeScript si c'est pour faire du JavaScript ?
|
|
||||||
</Callout>
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
Voilà, on a fait le tour des types de données en JavaScript !
|
|
||||||
On a vu les types primitifs et complexes, ainsi que la coercition de type et la conversion de type.
|
|
||||||
|
|
||||||
C'est un énorme point qu'on vient d'aborder, c'est normal de ne pas tout comprendre du premier coup.
|
|
||||||
|
|
||||||
Avec du temps et de la pratique, tu vas finir par maîtriser tout ça comme un pro ! 💪
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
import { Snippet } from "@/components/Snippet";
|
|
||||||
|
|
||||||
const jsObjectExampleSnippets = [
|
|
||||||
{
|
|
||||||
name: "Exemple d'objet JavaScript",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const personne = {
|
|
||||||
nom: "John",
|
|
||||||
age: 30,
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log(personne.nom); // Affiche "John"
|
|
||||||
console.log(personne.age); // Affiche 30`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple de tableau associatif PHP",
|
|
||||||
codeLanguage: "php",
|
|
||||||
code: `$personne = [
|
|
||||||
"nom" => "John",
|
|
||||||
"age" => 30,
|
|
||||||
];
|
|
||||||
|
|
||||||
echo $personne["nom"]; // Affiche "John"
|
|
||||||
echo $personne["age"]; // Affiche 30`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsArrayExampleSnippets = [
|
|
||||||
{
|
|
||||||
name: "Exemple de tableau JavaScript",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const fruits = ["pomme", "banane", "orange"];
|
|
||||||
|
|
||||||
console.log(fruits[0]); // Affiche "pomme"
|
|
||||||
console.log(fruits[1]); // Affiche "banane"
|
|
||||||
console.log(fruits[2]); // Affiche "orange"`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple de tableau PHP",
|
|
||||||
codeLanguage: "php",
|
|
||||||
code: `$fruits = ["pomme", "banane", "orange"];
|
|
||||||
|
|
||||||
echo $fruits[0]; // Affiche "pomme"
|
|
||||||
echo $fruits[1]; // Affiche "banane"
|
|
||||||
echo $fruits[2]; // Affiche "orange"`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsWrongTypesAdditionSnippets = [
|
|
||||||
{
|
|
||||||
name: "Addition de types différents",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const a = 5;
|
|
||||||
const b = "10";
|
|
||||||
|
|
||||||
const resultat = a + b;`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsWrongTypesBooleanSnippets = [
|
|
||||||
{
|
|
||||||
name: "Addition de types différents",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: `const a = 5;
|
|
||||||
const b = "5";
|
|
||||||
|
|
||||||
const estVrai = a == b;`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const jsTypescriptExample = [
|
|
||||||
{
|
|
||||||
name: "Exemple de constante JavaScript",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: "const a = 5; // Type implicite : number",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple de constante TypeScript",
|
|
||||||
codeLanguage: "ts",
|
|
||||||
code: "const a: number = 5; // Type explicite : number",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple de variable JavaScript",
|
|
||||||
codeLanguage: "js",
|
|
||||||
code: "let a; // Type implicite : any",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Exemple de variable TypeScript",
|
|
||||||
codeLanguage: "ts",
|
|
||||||
code: "let a: number; // Type explicite : number",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
jsObjectExample: () => <Snippet snippets={jsObjectExampleSnippets} />,
|
|
||||||
jsArrayExample: () => <Snippet snippets={jsArrayExampleSnippets} />,
|
|
||||||
jsWrongTypesAddition: () => (
|
|
||||||
<Snippet snippets={jsWrongTypesAdditionSnippets} />
|
|
||||||
),
|
|
||||||
jsWrongTypesBoolean: () => <Snippet snippets={jsWrongTypesBooleanSnippets} />,
|
|
||||||
jsTypescriptExample: () => <Snippet snippets={jsTypescriptExample} />,
|
|
||||||
};
|
|
||||||
@ -36,7 +36,6 @@ export default defineConfig({
|
|||||||
"nginx",
|
"nginx",
|
||||||
"sql",
|
"sql",
|
||||||
"json",
|
"json",
|
||||||
"php",
|
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
vike(),
|
vike(),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user