Lire le fichier JSON à l'aide de JavaScript
JSON signifie Notation d'objet JavaScript . Il s'agit d'un moyen d'organiser les données dans un fichier de script à l'aide de texte, ce qui facilite le stockage et le partage des données.
En lisant JSON les fichiers, qu’ils soient stockés localement ou sur un serveur, sont cruciaux pour les applications Web. Dans ce didacticiel, nous aborderons trois méthodes de lecture de fichiers JSON en JavaScript, qui peuvent être très utiles pour les développeurs Web.
Table des matières
- Comment lire un fichier JSON en JavaScript ?
- Utiliser l'API fetch() pour lire le fichier JSON
- Utilisation du module Require pour lire le fichier JSON
- En important le module pour lire le fichier JSON
- Conclusion
NOTE: JavaScript prend en charge JSON en interne et ne nécessite donc pas de modules supplémentaires pour importer et afficher le JSON. Il suffit d'importer le fichier JSON et de pouvoir facilement l'utiliser directement pour effectuer des manipulations dessus.
Comment lire un fichier JSON en JavaScript ?
Trois méthodes pour lire les fichiers JSON en JavaScript sont :
Note: Le fichier JSON ci-dessous sera utilisé pour récupérer les données.
exemple.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] } 1. Utilisation de l'API fetch() pour lire le fichier JSON
La méthode fetch() est utilisée pour lire les fichiers JSON (fichiers locaux ou téléchargés). Il utilise la même syntaxe pour les deux types de fichiers.
Syntaxe
fetch('JSONFilePath').then().then().catch(); Suivez ces étapes pour lire le fichier JSON à l'aide de la méthode API fetch :
- Créez un fichier JSON et ajoutez-y des données
- Ouvrez le fichier JavaScript
- Dans la méthode fetch passez le chemin du fichier JSON
- Utilisez la méthode .json() pour analyser les données au format JSON.
- Affichez le contenu dans la console.
Exemple de lecture d'un fichier JSON en JavaScript :
Le code ci-dessous vous aidera à comprendre l'utilisation de la méthode fetch() pour lire les fichiers JSON.
HTML Lire le titre du fichier JSON> tête> <body> <h1>techcodeview.comh1> <h3>Allez sur la console pour voir les données récupérées !! h3> <script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { lancer une nouvelle erreur (`Erreur HTTP ! Statut : ${res.status} `); } return res.json(); }) .then((data) => console.log(data)) .catch((error) => console.error('Impossible de récupérer les données :', erreur)); } fetchJSONData(); script> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vue console des données JSON après récupération de l'API'> </p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Utilisation du module Require pour lire le fichier JSON </strong> </b> </h2> <p dir='ltr'> <span>Exiger un module </span> <span>est utilisé pour inclure des modules dans votre application. Il peut être utilisé pour inclure un fichier dans une application Web. </span> </p> <h3> <span>Syntaxe: </span> </h3> <pre>require(JSONFilePath); </pre> <p dir='ltr'> <span>Suivez ces étapes pour lire les fichiers JSON à l'aide du module requis en JavaScript. </span> </p> <ul> <li value='1'> <span>Créez le fichier JSON comme spécifié dans l'approche précédente </span> </li> <li value='2'> <span>Créez un script.js et utilisez la méthode requise du nœud pour importer le fichier JSON </span> </li> <li value='3'> <span>Imprimer les données sur la console </span> </li> </ul> <p dir='ltr'> <b> <strong>NOTE: </strong> </b> <span>Au lieu d'exécuter le programme sur le navigateur, nous l'exécuterons sur la console en utilisant Node. Assurez-vous d'avoir au moins la version 17.0 de Node. </span> </p> <h3> <b> <strong>Exemple </strong> </b> </h3> <p dir='ltr'> <span>Le code ci-dessous peut être directement collé dans un fichier de script (le nœud doit être installé) pour exécuter et récupérer les données JSON. </span> </p>Javascript <code> <pre>const sample = require('./sample.json'); console.log(sample); </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <pre>{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] } </pre> <h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. En important le module pour lire le fichier JSON </strong> </b> </h2> <p dir='ltr'> <span>Le </span> <span>déclaration d'importation </span> <span>peut être utilisé pour importer et stocker des éléments de fichier JSON dans une variable en JavaScript. </span> </p> <h3> <span>Syntaxe: </span> </h3> <pre>import nameOfVariable from 'JSONFilePath' assert {type: 'json'}; </pre> <ul> <li value='1'> <span>Créez le fichier JSON comme décrit dans les exemples précédents. </span> </li> <li value='2'> <span>Créez un fichier script.js et importez le fichier JSON </span> </li> </ul> <h3> <b> <strong>Exemple de lecture d'un fichier JSON en JavaScript : </strong> </b> </h3> <p dir='ltr'> <span>Le code ci-dessous lit le fichier JSON en l'important à l'aide de l'instruction import. </span> </p>HTML <code> <pre> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content= 'width=device-width, initial-scale=1.0'> <title>Lire le titre du fichier JSON> tête> <body> <h1>techcodeview.comh1> <h3>Allez sur la console pour voir les données récupérées !! h3> <script type='module' src='./script.js'>script> corps> html> </pre> </code>Javascript <code> <pre>// script.js import user from './sample.json' assert { type: 'json' }; console.log(user) </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vue console des données JSON à l'aide du module d'importation'> </p> <h2 id='conclusion'> <span>Conclusion </span> </h2> <p dir='ltr'> <span>La lecture des fichiers JSON en JavaScript est une tâche très importante pour un développeur Web, car les fichiers JSON sont utilisés pour stocker les données utilisateur, les données de configuration, les données statiques et d'autres informations vitales. </span> </p> <p dir='ltr'> <span>Ce guide explique trois méthodes pour lire les fichiers JSON en JavaScript avec des exemples. En comprenant ces techniques, les développeurs peuvent s'attaquer en toute confiance aux tâches liées aux fichiers JSON, garantissant ainsi des processus de développement plus fluides et une expérience utilisateur améliorée. </span> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Partager </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Lire le fichier JSON à l'aide de JavaScript&url=https://www.techcodeview.com/read-json-file-using-javascript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/read-json-file-using-javascript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/read-json-file-using-javascript&title=Lire le fichier JSON à l'aide de JavaScript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Vous Pourriez Aimer </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/java-pipedwriter-class" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/java/86/java-pipedwriter-class.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Classe Java PipedWriter" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/java-pipedwriter-class">Classe Java PipedWriter </a>
</h4>
</div> <div class="group">
<a href="/jesse-watters" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/biography/45/jesse-watters.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Jesse Watters" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/jesse-watters">Jesse Watters </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articles </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/extension-method-c">
<img src="https://techcodeview.com/img/csharp-method/17/extension-method-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Méthode d'extension en C#" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/extension-method-c" class="hover:text-tech-500 transition-colors line-clamp-3">Méthode d'extension en C# </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/10-key-virgo-traits-1316">
<img src="https://techcodeview.com/img/blog/44/10-key-virgo-traits.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 10 traits clés de la Vierge et les meilleurs conseils pour les Vierges" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/10-key-virgo-traits-1316" class="hover:text-tech-500 transition-colors line-clamp-3">Les 10 traits clés de la Vierge et les meilleurs conseils pour les Vierges </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/how-run-java-program-cmd-using-notepad">
<img src="https://techcodeview.com/img/java-tutorial/13/how-run-java-program-cmd-using-notepad.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment exécuter un programme Java dans CMD à l'aide du Bloc-notes" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/how-run-java-program-cmd-using-notepad" class="hover:text-tech-500 transition-colors line-clamp-3">Comment exécuter un programme Java dans CMD à l'aide du Bloc-notes </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/java-interview-questions">
<img src="https://techcodeview.com/img/interview-preparation/90/java-interview-questions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Questions et réponses d'entretien Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/java-interview-questions" class="hover:text-tech-500 transition-colors line-clamp-3">Questions et réponses d'entretien Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/java-string-max-size">
<img src="https://techcodeview.com/img/java-tutorial/05/java-string-max-size.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Taille maximale de la chaîne Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/java-string-max-size" class="hover:text-tech-500 transition-colors line-clamp-3">Taille maximale de la chaîne Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/convert-integer-roman-numerals-java">
<img src="https://techcodeview.com/img/coding-problems/50/convert-integer-roman-numerals-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Convertir un entier en chiffres romains en Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/convert-integer-roman-numerals-java" class="hover:text-tech-500 transition-colors line-clamp-3">Convertir un entier en chiffres romains en Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/wednesday-review">
<img src="https://techcodeview.com/img/movie-reviews/92/wednesday-review.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Une revue du mercredi" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/wednesday-review" class="hover:text-tech-500 transition-colors line-clamp-3">Une revue du mercredi </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/python-pil-image-save-method">
<img src="https://techcodeview.com/img/python-pil/52/python-pil-image-save-method.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python PIL | Méthode Image.save()" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/python-pil-image-save-method" class="hover:text-tech-500 transition-colors line-clamp-3">Python PIL | Méthode Image.save() </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/file-handling-in-c">
<img src="https://techcodeview.com/img/misc/86/file-handling-in-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gestion des fichiers en C++" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/file-handling-in-c" class="hover:text-tech-500 transition-colors line-clamp-3">Gestion des fichiers en C++ </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/max-heap-java">
<img src="https://techcodeview.com/img/java-priority-queue/15/max-heap-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tas maximum en Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/max-heap-java" class="hover:text-tech-500 transition-colors line-clamp-3">Tas maximum en Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Catégorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversion Java
</a> <a href="/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Mathématiques
</a> <a href="/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Collections Java
</a> <a href="/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Différences
</a> <a href="/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Chaîne Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Des Articles Intéressants </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-tutorial/87/flatmap-method-java-8.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Méthode flatMap() en Java 8" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/java-tutorial/">Tutoriel Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/flatmap-method-java-8">Méthode flatMap() en Java 8 </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/software-testing/73/test-plan.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Plan de test" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/software-testing/">Tests De Logiciels </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/test-plan">Plan de test </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/gblog/69/cartooning-an-image-using-opencv-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cartooning une image à l'aide d'OpenCV - Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/gblog/">Gblog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/cartooning-an-image-using-opencv-python">Cartooning une image à l'aide d'OpenCV - Python </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-tutorial/63/java-queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java Queue" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/java-tutorial/">Tutoriel Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/java-queue">Java Queue </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/66/celebrity-sat-scores-kesha.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Scores des célébrités SAT (Kesha, Bill Gates et plus)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/celebrity-sat-scores-kesha-1311456">Scores des célébrités SAT (Kesha, Bill Gates et plus) </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/operating-system/89/context-switching-os.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Changement de contexte dans le système d'exploitation (système d'exploitation)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/operating-system/">Système Opérateur </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/context-switching-os">Changement de contexte dans le système d'exploitation (système d'exploitation) </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Tous Les Droits Sont Réservés |
<a href="//www.techcodeview.com/ko/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>