diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts index 671fae1..063804a 100644 --- a/app/libs/navigation.ts +++ b/app/libs/navigation.ts @@ -122,6 +122,7 @@ export const navigation: NavigationSection[] = [ { 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" }, ], }, { diff --git a/app/pages/docs/javascript/+Page.mdx b/app/pages/docs/javascript/+Page.mdx index 1672159..3067a70 100644 --- a/app/pages/docs/javascript/+Page.mdx +++ b/app/pages/docs/javascript/+Page.mdx @@ -62,10 +62,11 @@ Comme dit précédemment, cette série d'articles va se concentrer sur l'environ 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 -- Les fonctions et la portée - 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. \ No newline at end of file diff --git a/app/pages/docs/javascript/types/+Page.mdx b/app/pages/docs/javascript/types/+Page.mdx new file mode 100644 index 0000000..34bf1dd --- /dev/null +++ b/app/pages/docs/javascript/types/+Page.mdx @@ -0,0 +1,205 @@ +--- +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`. + + + 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. + + +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 : + + + +### 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 : + + + +### 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 ? + + + +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` ? + + + +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`. + + + - 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. + + +### 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. + + + 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 ! + + +### 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 `string` en TypeScript : + + + +Il est impossible de faire la même chose avec JavaScript, c'est strictement réservé à TypeScript ! + +## 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 ! 💪 \ No newline at end of file diff --git a/app/pages/docs/javascript/types/tabs.tsx b/app/pages/docs/javascript/types/tabs.tsx new file mode 100644 index 0000000..617d83a --- /dev/null +++ b/app/pages/docs/javascript/types/tabs.tsx @@ -0,0 +1,92 @@ +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 variable JavaScript", + codeLanguage: "js", + code: "const a = 5; // Type implicite : number", + }, + { + name: "Exemple de variable TypeScript", + codeLanguage: "ts", + code: "const a: number = 5; // Type explicite : number", + }, +]; + +export default { + jsObjectExample: () => , + jsArrayExample: () => , + jsWrongTypesAddition: () => ( + + ), + jsWrongTypesBoolean: () => , + jsTypescriptExample: () => , +}; diff --git a/app/vite.config.ts b/app/vite.config.ts index e52e171..fcccf74 100755 --- a/app/vite.config.ts +++ b/app/vite.config.ts @@ -36,6 +36,7 @@ export default defineConfig({ "nginx", "sql", "json", + "php", ], }), vike(),