Lue JSON-tiedosto JavaScriptillä
JSON tarkoittaa JavaScript-objektin merkintä . Se on tapa järjestää tietoja komentosarjatiedostoon tekstin avulla, mikä tekee tietojen tallentamisesta ja jakamisesta helppoa.
Lukeminen JSON tiedostot, olivatpa ne tallennettuna paikallisesti tai palvelimelle, ovat tärkeitä verkkosovelluksille. Tässä opetusohjelmassa käsittelemme kolmea tapaa lukea JSON-tiedostoja JavaScriptissä, jotka voivat olla todella hyödyllisiä verkkokehittäjille.
Sisällysluettelo
- Kuinka lukea JSON-tiedosto JavaScriptissä?
- Fetch() API:n käyttäminen JSON-tiedoston lukemiseen
- Require Module -sovelluksen käyttäminen JSON-tiedoston lukemiseen
- Tuomalla moduulin JSON-tiedoston lukemiseen
- Johtopäätös
HUOMAUTUS: JavaScript tukee JSONia sisäisesti, joten se ei vaadi lisämoduuleja JSONin tuomiseen ja näyttämiseen. Meidän on vain tuotava JSON-tiedosto ja voimme käyttää sitä helposti suoraan sen käsittelyyn.
Kuinka lukea JSON-tiedosto JavaScriptissä?
Kolme tapaa lukea JSON-tiedostoja JavaScriptissä ovat:
Huomautus: Alla olevaa JSON-tiedostoa käytetään tietojen hakemiseen.
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] } 1. JSON-tiedoston lukeminen fetch()-sovellusliittymän avulla
Fetch()-menetelmää käytetään JSON-tiedostojen (paikallisten tai ladattujen tiedostojen) lukemiseen. Se käyttää samaa syntaksia molemmille tiedostotyypeille.
Syntaksi
fetch('JSONFilePath').then().then().catch(); Noudata näitä ohjeita lukeaksesi JSON-tiedoston fetch API -menetelmällä:
- Luo JSON-tiedosto ja lisää siihen tietoja
- Avaa JavaScript-tiedosto
- Siirrä hakumenetelmässä JSON-tiedoston polku
- Käytä .json()-menetelmää tietojen jäsentämiseen JSON-muodossa.
- Näytä sisältö konsolissa.
Esimerkki JSON-tiedoston lukemisesta JavaScriptissä:
Alla oleva koodi auttaa sinua ymmärtämään fetch()-menetelmän käytön JSON-tiedostojen lukemiseen.
HTML Lue JSON-tiedostootsikko> head> <body> <h1>techcodeview.comh1> <h3>Siirry konsoliin nähdäksesi haetut tiedot!! h3> <script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { heittää uusi virhe (`HTTP-virhe! Tila: ${res.status} `); } return res.json(); virhe)); } fetchJSONData(); script> body> html>>> </tag> <p dir='ltr'> <b> <strong>Lähtö: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='JSON-tietojen konsolinäkymä haun API:n jälkeen'> </p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Require Module -toiminnon käyttäminen JSON-tiedoston lukemiseen </strong> </b> </h2> <p dir='ltr'> <span>Vaadi moduuli </span> <span>käytetään moduulien sisällyttämiseen sovellukseesi. Sitä voidaan käyttää tiedoston sisällyttämiseen verkkosovellukseen. </span> </p> <h3> <span>Syntaksi: </span> </h3> <pre>require(JSONFilePath); </pre> </code> <p dir='ltr'> <span>Noudata näitä ohjeita lukeaksesi JSON-tiedostoja käyttämällä vaadittua JavaScript-moduulia. </span> </p> <ul> <li value='1'> <span>Luo JSON-tiedosto edellisen lähestymistavan mukaisesti </span> </li> <li value='2'> <span>Luo script.js ja tuo JSON-tiedosto vaaditulla solmun menetelmällä </span> </li> <li value='3'> <span>Tulosta tiedot konsoliin </span> </li> </ul> <p dir='ltr'> <b> <strong>HUOMAUTUS: </strong> </b> <span>Sen sijaan, että suorittaisit ohjelman selaimessa, suoritamme sen konsolissa Noden avulla. Varmista, että sinulla on vähintään Node-versio 17.0. </span> </p> <h3> <b> <strong>Esimerkki </strong> </b> </h3> <p dir='ltr'> <span>Alla oleva koodi voidaan liittää suoraan komentosarjatiedostoon (solmu on asennettava) JSON-tietojen suorittamiseksi ja hakemiseksi. </span> </p>Javascript <code> <pre>const sample = require('./sample.json'); console.log(sample); </pre> </code> <p dir='ltr'> <b> <strong>Lähtö: </strong> </b> </p> <tag data-text-3='{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] } </pre> <h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. Tuomalla moduulin JSON-tiedoston lukemiseen </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>tuontilausunto </span> <span>voidaan käyttää JSON-tiedostoelementtien tuomiseen ja tallentamiseen JavaScriptin muuttujaan. </span> </p> <h3> <span>Syntaksi: </span> </h3> <pre>import nameOfVariable from 'JSONFilePath' assert {type: 'json'}; </pre> <ul> <li value='1'> <span>Luo JSON-tiedosto aiemmissa esimerkeissä kuvatulla tavalla. </span> </li> <li value='2'> <span>Luo script.js-tiedosto ja tuo JSON-tiedosto </span> </li> </ul> <h3> <b> <strong>Esimerkki JSON-tiedoston lukemisesta JavaScriptissä: </strong> </b> </h3> <p dir='ltr'> <span>Alla oleva koodi Lukee JSON-tiedoston tuomalla sen tuontikäskyn avulla. </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>Lue JSON-tiedostootsikko> head> <body> <h1>techcodeview.comh1> <h3>Siirry konsoliin nähdäksesi haetut tiedot!! h3> <script type='module' src='./script.js'>script> body> html>>> </tag>Javascript <tag data-text-1='// script.js import user from './sample.json' assert { type: 'json' }; console.log(user) </pre> </code> <p dir='ltr'> <b> <strong>Lähtö: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='JSON-tietojen konsolinäkymä tuontimoduulin avulla'> </p> <h2 id='conclusion'> <span>Johtopäätös </span> </h2> <p dir='ltr'> <span>JSON-tiedostojen lukeminen JavaScriptissä on erittäin tärkeä tehtävä verkkokehittäjälle, koska JSON-tiedostoja käytetään käyttäjätietojen, määritystietojen, staattisten tietojen ja muiden tärkeiden tietojen tallentamiseen. </span> </p> <p dir='ltr'> <span>Tässä oppaassa selitettiin esimerkkien avulla kolme tapaa lukea JSON-tiedostoja JavaScriptissä. Ymmärtämällä nämä tekniikat kehittäjät voivat selviytyä luottavaisesti JSON-tiedostoihin liittyvistä tehtävistä, mikä varmistaa sujuvammat kehitysprosessit ja paremman käyttökokemuksen. </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>
Jakaa </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Lue JSON-tiedosto JavaScriptillä&url=https://www.techcodeview.com/fi/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/fi/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/fi/read-json-file-using-javascript&title=Lue JSON-tiedosto JavaScriptillä"
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">
Saatat Pitää </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/fi/search-algorithm-artificial-intelligence" 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/artificial-intelligence/33/search-algorithm-artificial-intelligence.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="A* Hakualgoritmi tekoälyssä" 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="/fi/search-algorithm-artificial-intelligence">A* Hakualgoritmi tekoälyssä </a>
</h4>
</div> <div class="group">
<a href="/fi/what-is-modular-programming" 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/blog/70/what-is-modular-programming.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mitä on modulaarinen ohjelmointi?" 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="/fi/what-is-modular-programming">Mitä on modulaarinen ohjelmointi? </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 Artikkelit </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="/fi/what-is-bash">
<img src="https://techcodeview.com/img/bash-tutorial/40/what-is-bash.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mikä on Bash?" 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="/fi/what-is-bash" class="hover:text-tech-500 transition-colors line-clamp-3">Mikä on Bash? </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="/fi/trie-data-structure-insert">
<img src="https://techcodeview.com/img/amazon/68/trie-data-structure-insert.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Trien tietorakenne | Lisää ja etsi" 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="/fi/trie-data-structure-insert" class="hover:text-tech-500 transition-colors line-clamp-3">Trien tietorakenne | Lisää ja etsi </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="/fi/how-track-iphone-from-an-android-phone">
<img src="https://techcodeview.com/img/android-tutorial/24/how-track-iphone-from-an-android-phone.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka seurata iPhonea Android-puhelimesta" 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="/fi/how-track-iphone-from-an-android-phone" class="hover:text-tech-500 transition-colors line-clamp-3">Kuinka seurata iPhonea Android-puhelimesta </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="/fi/uml-class-diagram">
<img src="https://techcodeview.com/img/uml-tutorial/95/uml-class-diagram.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="UML-luokkakaavio" 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="/fi/uml-class-diagram" class="hover:text-tech-500 transition-colors line-clamp-3">UML-luokkakaavio </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="/fi/4-top-tips-make-ap-biology-frqs-breeze-131702">
<img src="https://techcodeview.com/img/blog/75/4-top-tips-make-ap-biology-frqs-breeze.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="4 parasta vinkkiä AP-biologian FRQ:n tekemiseen helpoksi" 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="/fi/4-top-tips-make-ap-biology-frqs-breeze-131702" class="hover:text-tech-500 transition-colors line-clamp-3">4 parasta vinkkiä AP-biologian FRQ:n tekemiseen helpoksi </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="/fi/java-lang-number-class-in-java">
<img src="https://techcodeview.com/img/java/23/java-lang-number-class-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java.lang.Number Class Javassa" 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="/fi/java-lang-number-class-in-java" class="hover:text-tech-500 transition-colors line-clamp-3">Java.lang.Number Class Javassa </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="/fi/predicted-national-merit-scholarship-cutoffs-131962">
<img src="https://techcodeview.com/img/blog/91/predicted-national-merit-scholarship-cutoffs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ennustetut kansallisten ansioiden stipendin rajat vuosille 2023-2024 (päivitetty)" 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="/fi/predicted-national-merit-scholarship-cutoffs-131962" class="hover:text-tech-500 transition-colors line-clamp-3">Ennustetut kansallisten ansioiden stipendin rajat vuosille 2023-2024 (päivitetty) </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="/fi/setting-path-python">
<img src="https://techcodeview.com/img/python-tutorial/16/setting-path-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Polun asettaminen Pythonissa" 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="/fi/setting-path-python" class="hover:text-tech-500 transition-colors line-clamp-3">Polun asettaminen Pythonissa </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="/fi/columnar-transposition-cipher">
<img src="https://techcodeview.com/img/dsa/62/columnar-transposition-cipher.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Sarake Transposition salaus" 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="/fi/columnar-transposition-cipher" class="hover:text-tech-500 transition-colors line-clamp-3">Sarake Transposition salaus </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="/fi/binary-decimal-number-c">
<img src="https://techcodeview.com/img/c-tutorial/82/binary-decimal-number-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Binääriluku desimaalilukuihin C:ssä" 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="/fi/binary-decimal-number-c" class="hover:text-tech-500 transition-colors line-clamp-3">Binääriluku desimaalilukuihin C:ssä </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">Luokka </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/fi/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">
Blogi
</a> <a href="/fi/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">
Java-Muunnos
</a> <a href="/fi/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">
Matematiikka
</a> <a href="/fi/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">
Java-Kokoelmat
</a> <a href="/fi/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">
Erot
</a> <a href="/fi/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">
Java-Merkkijono
</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">Mielenkiintoisia Artikkeleita </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/it-problems-solutions/59/software-requirement-specification-format.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Software Requirement Specification (SRS) -muoto" 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="/fi/it-problems-solutions/">It-Ongelmat Ja Ratkaisut </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/software-requirement-specification-format">Software Requirement Specification (SRS) -muoto </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/dbms-join/64/sql-joins-inner-left.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL-liitokset (sisä, vasen, oikea ja täysi liitos)" 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="/fi/dbms-join/">Dbms-Liity </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/sql-joins-inner-left">SQL-liitokset (sisä, vasen, oikea ja täysi liitos) </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/advice-teachers/21/why-do-teens-sext.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Miksi teinit harrastavat seksiä?" 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="/fi/advice-teachers/">Neuvoja Opettajille </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/why-do-teens-sext-24292">Miksi teinit harrastavat seksiä? </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/geeks-premier-league-2023/18/10-best-search-engines.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="10 parasta hakukonetta" 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="/fi/geeks-premier-league-2023-cat/">Geeks Valioliiga 2023 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/10-best-search-engines">10 parasta hakukonetta </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/geeks-premier-league-2022/26/how-fix-r-operator-is-invalid.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka korjata R: $-operaattori ei kelpaa atomivektoreille" 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="/fi/geeks-premier-league-2022-cat/">Geeks-Premier-Liiga-2022 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/how-fix-r-operator-is-invalid">Kuinka korjata R: $-operaattori ei kelpaa atomivektoreille </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/get-informed/96/explained-what-is-fortnite-battle-royale.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Selitetty: Mikä on Fortnite Battle Royale?" 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="/fi/get-informed/">Hanki Tietoa </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/explained-what-is-fortnite-battle-royale-2426">Selitetty: Mikä on Fortnite Battle Royale? </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 Kaikki Oikeudet Pidätetään |
<a href="//www.techcodeview.com/uk/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö </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>