Şimdi yükleniyor
JAVASCRİPT Kod Portalı

JavaScript Nesneleri Ekranda Gösterme

JavaScript nesneleri, veriyi yapılandırmak için kullanılan anahtar-değer çiftlerinden oluşur. Web uygulamalarında bu nesnelerin içeriğini ekranda göstermek için farklı yöntemler kullanılır.

JavaScript Nesneleri Nedir?

JavaScript nesneleri {} süslü parantezler içinde anahtar-değer çiftleriyle tanımlanır. Örneğin:

const kisi = {
    isim: "Ahmet",
    yas: 25,
    meslek: "Yazılımcı"
};

Bu nesne isim, yas ve meslek adında üç özellik içerir.

Nesnelerin Ekranda Gösterimi Yöntemleri

1. console.log() ile Konsolda Gösterme

Nesne içeriğini geliştirici konsolunda görüntülemek için console.log() kullanabilirsiniz:

console.log(kisi);

Bu yöntem, özellikle hata ayıklama ve geliştirici arayüzünde nesne içeriğini görselleştirmek için kullanışlıdır.

2. innerHTML ile HTML’de Gösterme

Web sayfasında nesne bilgilerini göstermek için HTML etiketlerinin innerHTML özelliğini kullanabilirsiniz:

<div id="kisiBilgi"></div>

<script>
const kisi = {
    isim: "Ahmet",
    yas: 25,
    meslek: "Yazılımcı"
};

document.getElementById("kisiBilgi").innerHTML = 
    "İsim: " + kisi.isim + "<br>" +
    "Yaş: " + kisi.yas + "<br>" +
    "Meslek: " + kisi.meslek;
</script>

Bu kodda innerHTML kullanılarak kisi nesnesindeki bilgiler HTML sayfasında kisiBilgi öğesine yazdırılır.

3. JSON.stringify() ile Formatlı Gösterim

Nesneyi JSON.stringify() fonksiyonu ile JSON formatına çevirerek metin olarak gösterebiliriz:

<div id="kisiJson"></div>

<script>
const kisi = {
    isim: "Ahmet",
    yas: 25,
    meslek: "Yazılımcı"
};

document.getElementById("kisiJson").innerHTML = JSON.stringify(kisi, null, 2);
</script>

JSON.stringify() ikinci parametre olarak null ve üçüncü parametre olarak 2 verildiğinde JSON verisi okunabilir bir biçimde görüntülenir.

4. Döngü ile Tüm Özellikleri Listeleme

Bir nesnenin tüm özelliklerini döngü kullanarak gösterebilirsiniz:

<ul id="kisiListesi"></ul>

<script>
const kisi = {
    isim: "Ahmet",
    yas: 25,
    meslek: "Yazılımcı"
};

let liste = "";
for (let ozellik in kisi) {
    liste += `<li>${ozellik}: ${kisi[ozellik]}</li>`;
}

document.getElementById("kisiListesi").innerHTML = liste;
</script>

Bu örnekte for...in döngüsü, nesnedeki her bir özellik ve değerini li elemanı olarak liste halinde gösterir.

5. Object.entries() ile Anahtar-Değer Çiftlerini Gösterme

Object.entries() fonksiyonu, nesneyi bir diziye çevirir ve anahtar-değer çiftlerini kolayca görüntülememizi sağlar:

const kisi = {
    isim: "Ahmet",
    yas: 25,
    meslek: "Yazılımcı"
};

Object.entries(kisi).forEach(([anahtar, deger]) => {
    console.log(`${anahtar}: ${deger}`);
});

Bu yöntem, nesneyi her bir özellik ve değeriyle birlikte sırayla gösterir.

Özet Kod Örneği

Aşağıda yukarıdaki yöntemlerle nesne gösterim örneği bir araya getirilmiştir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Nesne Gösterim</title>
</head>
<body>

    <div id="kisiBilgi"></div>
    <pre id="kisiJson"></pre>
    <ul id="kisiListesi"></ul>

    <script>
        const kisi = {
            isim: "Ahmet",
            yas: 25,
            meslek: "Yazılımcı"
        };

        document.getElementById("kisiBilgi").innerHTML = 
            "İsim: " + kisi.isim + "<br>" +
            "Yaş: " + kisi.yas + "<br>" +
            "Meslek: " + kisi.meslek;

        document.getElementById("kisiJson").innerHTML = JSON.stringify(kisi, null, 2);

        let liste = "";
        for (let ozellik in kisi) {
            liste += `<li>${ozellik}: ${kisi[ozellik]}</li>`;
        }
        document.getElementById("kisiListesi").innerHTML = liste;
    </script>

</body>
</html>

Share this content:

Göz At

Yorum gönder