Citiți fișierul JSON folosind JavaScript
JSON înseamnă Notarea obiectelor JavaScript . Este o modalitate de organizare a datelor într-un fișier script folosind text, facilitând stocarea și partajarea datelor.
Citind JSON fișierele, indiferent dacă sunt stocate local sau pe un server, sunt esențiale pentru aplicațiile web. În acest tutorial, vom acoperi trei metode de citire a fișierelor JSON în JavaScript, care pot fi cu adevărat utile pentru dezvoltatorii web.
Cuprins
- Cum să citești fișierul JSON în JavaScript?
- Folosind API-ul fetch() pentru a citi fișierul JSON
- Folosind modulul Require pentru a citi fișierul JSON
- Importând modulul pentru a citi fișierul JSON
- Concluzie
NOTĂ: JavaScript acceptă JSON intern, așa că nu necesită module suplimentare pentru a importa și afișa JSON. Trebuie doar să importam fișierul JSON și îl putem folosi cu ușurință direct pentru a efectua manipulări asupra acestuia.
Cum să citești fișierul JSON în JavaScript?
Trei metode de a citi fișiere JSON în JavaScript sunt:
Notă: Fișierul JSON de mai jos va fi folosit pentru a prelua datele.
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] } 1. Folosind API-ul fetch() pentru a citi fișierul JSON
Metoda fetch() este folosită pentru a citi fișiere JSON (fișiere locale sau încărcate). Folosește aceeași sintaxă pentru ambele tipuri de fișiere.
Sintaxă
fetch('JSONFilePath').then().then().catch(); Urmați acești pași pentru a citi fișierul JSON folosind metoda fetch API:
- Creați un fișier JSON și adăugați-i date
- Deschideți fișierul JavaScript
- În metoda fetch, treceți calea fișierului JSON
- Utilizați metoda .json() pentru a analiza datele în format JSON.
- Afișează conținutul în consolă.
Exemplu de citire a fișierului JSON în JavaScript:
Codul de mai jos vă va ajuta să înțelegeți utilizarea metodei fetch() pentru a citi fișierele JSON.
HTML Citiți Titlul fișierului JSON> head> <body> <h1>techcodeview.comh1> <h3>Du-te la consola pentru a vedea datele preluate!! h3> <script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`eroare HTTP! Stare: ${res.status} `); } return res.json(); eroare)); } fetchJSONData(); script> body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vizualizarea în consolă a datelor JSON după preluarea API-ului'> </p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Folosind modulul Require pentru a citi fișierul JSON </strong> </b> </h2> <p dir='ltr'> <span>Necesită modul </span> <span>este folosit pentru a include module în aplicația dvs. Poate fi folosit pentru a include un fișier într-o aplicație web. </span> </p> <h3> <span>Sintaxă: </span> </h3> <pre>require(JSONFilePath); </pre> <p dir='ltr'> <span>Urmați acești pași pentru a citi fișierele JSON folosind modulul necesar în JavaScript. </span> </p> <ul> <li value='1'> <span>Creați fișierul JSON așa cum este specificat în abordarea anterioară </span> </li> <li value='2'> <span>Creați un script.js și utilizați metoda necesară a nodului pentru a importa fișierul JSON </span> </li> <li value='3'> <span>Imprimați datele pe consolă </span> </li> </ul> <p dir='ltr'> <b> <strong>NOTĂ: </strong> </b> <span>În loc să rulăm programul în browser, îl vom rula pe consolă folosind Node. Asigurați-vă că aveți cel puțin versiunea Node 17.0. </span> </p> <h3> <b> <strong>Exemplu </strong> </b> </h3> <p dir='ltr'> <span>Codul de mai jos poate fi lipit direct într-un fișier script (nodul trebuie instalat) pentru a executa și a prelua datele JSON. </span> </p>Javascript <code> <pre>const sample = require('./sample.json'); console.log(sample); </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> </p> <pre>{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] } </pre> <h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. Importând modulul pentru a citi fișierul JSON </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>declarație de import </span> <span>poate fi folosit pentru a importa și stoca elemente de fișier JSON într-o variabilă în JavaScript. </span> </p> <h3> <span>Sintaxă: </span> </h3> <pre>import nameOfVariable from 'JSONFilePath' assert {type: 'json'}; </pre> <ul> <li value='1'> <span>Creați fișierul JSON așa cum este descris în exemplele anterioare. </span> </li> <li value='2'> <span>Creați un fișier script.js și importați fișierul JSON </span> </li> </ul> <h3> <b> <strong>Exemplu de citire a fișierului JSON în JavaScript: </strong> </b> </h3> <p dir='ltr'> <span>Codul de mai jos citește fișierul JSON importându-l folosind instrucțiunea de 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>Citiți Titlul fișierului JSON> head> <body> <h1>techcodeview.comh1> <h3>Du-te la consola pentru a vedea datele preluate!! h3> <script type='module' src='./script.js'>script> body> 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>Ieșire: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vizualizarea consolei a datelor JSON folosind modulul de import'> </p> <h2 id='conclusion'> <span>Concluzie </span> </h2> <p dir='ltr'> <span>Citirea fișierelor JSON în JavaScript este o sarcină foarte importantă pentru un dezvoltator web, deoarece fișierele JSON sunt folosite pentru a stoca datele utilizatorului, datele de configurare, date statice și alte informații vitale. </span> </p> <p dir='ltr'> <span>Acest ghid a explicat trei metode de citire a fișierelor JSON în JavaScript cu exemple. Înțelegând aceste tehnici, dezvoltatorii pot aborda cu încredere sarcinile legate de fișierele JSON, asigurând procese de dezvoltare mai fluide și experiențe îmbunătățite pentru utilizator. </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>
Distribuie </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Citiți fișierul JSON folosind JavaScript&url=https://www.techcodeview.com/ro/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/ro/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/ro/read-json-file-using-javascript&title=Citiți fișierul JSON folosind 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">
S-Ar Putea Să Vă Placă </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ro/how-plot-graph-python" 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/python-tutorial/47/how-plot-graph-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum să trasezi un grafic în Python" 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="/ro/how-plot-graph-python">Cum să trasezi un grafic în Python </a>
</h4>
</div> <div class="group">
<a href="/ro/how-print-java" 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-tutorial/55/how-print-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum se imprimă în Java" 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="/ro/how-print-java">Cum se imprimă în Java </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 Articole </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="/ro/difference-between-growth">
<img src="https://techcodeview.com/img/differences/33/difference-between-growth.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferența dintre creștere și dezvoltare" 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="/ro/difference-between-growth" class="hover:text-tech-500 transition-colors line-clamp-3">Diferența dintre creștere și dezvoltare </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="/ro/best-college-acceptance-calculator-131760">
<img src="https://techcodeview.com/img/blog/06/best-college-acceptance-calculator.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cel mai bun calculator de acceptare la facultate: Aflați-vă șansele de admitere" 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="/ro/best-college-acceptance-calculator-131760" class="hover:text-tech-500 transition-colors line-clamp-3">Cel mai bun calculator de acceptare la facultate: Aflați-vă șansele de admitere </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="/ro/i-e-vs-e-g-vs-ex-which-is-which-131124">
<img src="https://techcodeview.com/img/blog/98/i-e-vs-e-g-vs-ex-which-is-which.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="i.e. vs de ex. vs Ex.: Care este care?" 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="/ro/i-e-vs-e-g-vs-ex-which-is-which-131124" class="hover:text-tech-500 transition-colors line-clamp-3">i.e. vs de ex. vs Ex.: Care este care? </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="/ro/what-is-transmission-control-protocol">
<img src="https://techcodeview.com/img/picked/38/what-is-transmission-control-protocol.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este Transmission Control Protocol (TCP)?" 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="/ro/what-is-transmission-control-protocol" class="hover:text-tech-500 transition-colors line-clamp-3">Ce este Transmission Control Protocol (TCP)? </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="/ro/ribbon-tabs">
<img src="https://techcodeview.com/img/ms-word-tutorial/04/ribbon-tabs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Panglică și file" 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="/ro/ribbon-tabs" class="hover:text-tech-500 transition-colors line-clamp-3">Panglică și file </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="/ro/list-body-parts-names-english">
<img src="https://techcodeview.com/img/english-word-play/41/list-body-parts-names-english.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lista numelor părților corpului în engleză și hindi (imagini)" 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="/ro/list-body-parts-names-english" class="hover:text-tech-500 transition-colors line-clamp-3">Lista numelor părților corpului în engleză și hindi (imagini) </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="/ro/python-math-cos-function">
<img src="https://techcodeview.com/img/python-math-library-functions/60/python-math-cos-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python | funcția math.cos()." 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="/ro/python-math-cos-function" class="hover:text-tech-500 transition-colors line-clamp-3">Python | funcția math.cos(). </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="/ro/what-is-an-ide-integrated-development-environment">
<img src="https://techcodeview.com/img/it-problems-solutions/03/what-is-an-ide-integrated-development-environment.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este un IDE? - Mediu de dezvoltare integrat" 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="/ro/what-is-an-ide-integrated-development-environment" class="hover:text-tech-500 transition-colors line-clamp-3">Ce este un IDE? - Mediu de dezvoltare integrat </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="/ro/heap-sort-algorithm">
<img src="https://techcodeview.com/img/ds-tutorial/50/heap-sort-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algoritmul Heap Sort" 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="/ro/heap-sort-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Algoritmul Heap Sort </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="/ro/jackson-tutorial">
<img src="https://techcodeview.com/img/jackson-tutorial/18/jackson-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutorial Jackson" 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="/ro/jackson-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Tutorial Jackson </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">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ro/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="/ro/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">
Conversie Java
</a> <a href="/ro/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">
Matematica
</a> <a href="/ro/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">
Colecții Java
</a> <a href="/ro/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">
Diferențele
</a> <a href="/ro/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">
Șir 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">Articole Interesante </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/bash-tutorial/69/bash-check-if-variable-is-set.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash Verificați dacă este setată variabila" 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="/ro/bash-tutorial/">Tutorial Bash </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/bash-check-if-variable-is-set">Bash Verificați dacă este setată variabila </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/99/what-is-praying-mantis.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este o mantisă rugătoare? 9 fapte amuzante" 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="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/what-is-praying-mantis-131208">Ce este o mantisă rugătoare? 9 fapte amuzante </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/05/4-amazing-recommendation-letter-samples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="4 exemple uimitoare de scrisori de recomandare pentru studenți" 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="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/4-amazing-recommendation-letter-samples-131394">4 exemple uimitoare de scrisori de recomandare pentru studenți </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/ds-tutorial/44/array-vs-linked-list.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Array vs Linked List" 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="/ro/ds-tutorial/">Tutorial Ds </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/array-vs-linked-list">Array vs Linked List </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/mysql-tutorial/55/how-install-mysql.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum se instalează MySQL" 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="/ro/mysql-tutorial/">Tutorial Mysql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/how-install-mysql">Cum se instalează MySQL </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/11/7-fundamental-cancer-traits.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cele 7 trăsături fundamentale ale cancerului și ce înseamnă ele pentru tine" 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="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/7-fundamental-cancer-traits-131150">Cele 7 trăsături fundamentale ale cancerului și ce înseamnă ele pentru tine </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 Toate Drepturile Rezervate |
<a href="//www.techcodeview.com/bg/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate </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>