JavaScript Çıktı Nasıl Alınır?
JavaScript Görüntüleme Olanakları
JavaScript, web sayfalarında içerik görüntülemek ve kullanıcı etkileşimlerine yanıt vermek için birçok farklı yöntem sunar. Bu yöntemler, basit metin göstermekten karmaşık veri görselleştirmelerine kadar geniş bir yelpazede kullanılabilir. Bu makalede, JavaScript’in görüntüleme olanaklarını örneklerle inceleyeceğiz.
1. Temel Görüntüleme Yöntemleri
a) innerHTML ile İçerik Görüntüleme
JavaScript, bir HTML elementinin içeriğini değiştirmek için innerHTML özelliğini kullanır. Bu yöntem, hem metin hem de HTML etiketleri eklemek için kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>innerHTML Örneği</title>
</head>
<body>
<div id="content"></div>
<button id="showContent">İçeriği Göster</button>
<script>
document.getElementById("showContent").addEventListener("click", function() {
document.getElementById("content").innerHTML = "<h1>Merhaba Dünya!</h1><p>Bu bir örnek metindir.</p>";
});
</script>
</body>
</html>b) textContent ile Metin Görüntüleme
textContent, bir HTML elementinin içine sadece metin eklemek için kullanılır. HTML etiketleri metin olarak görüntülenir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>textContent Örneği</title>
</head>
<body>
<div id="content"></div>
<button id="showText">Metni Göster</button>
<script>
document.getElementById("showText").addEventListener("click", function() {
document.getElementById("content").textContent = "<h1>Bu bir başlık değil, metin olarak görüntülenecek.</h1>";
});
</script>
</body>
</html>c) alert() ile Pop-up Mesaj Görüntüleme
alert() fonksiyonu, kullanıcıya bir pop-up mesaj kutusu gösterir. Bu yöntem, basit uyarılar için kullanılır.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>alert() Örneği</title>
</head>
<body>
<button id="showAlert">Uyarı Göster</button>
<script>
document.getElementById("showAlert").addEventListener("click", function() {
alert("Bu bir uyarı mesajıdır!");
});
</script>
</body>
</html>2. Dinamik İçerik Görüntüleme
JavaScript, kullanıcı etkileşimlerine veya sunucudan gelen verilere bağlı olarak dinamik içerik görüntülemek için kullanılabilir.
a) Form Verilerini Görüntüleme
Kullanıcının bir forma girdiği verileri alıp görüntülemek için JavaScript kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Form Verilerini Görüntüleme</title>
</head>
<body>
<form id="myForm">
<label for="name">Adınız:</label>
<input type="text" id="name" name="name">
<button type="submit">Gönder</button>
</form>
<p id="output"></p>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Formun gönderilmesini engelle
let name = document.getElementById("name").value;
document.getElementById("output").innerText = "Merhaba, " + name + "!";
});
</script>
</body>
</html>b) API Verilerini Görüntüleme
JavaScript, API’lerden gelen verileri alıp sayfada görüntülemek için kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>API Verilerini Görüntüleme</title>
</head>
<body>
<button id="fetchData">Verileri Getir</button>
<ul id="dataList"></ul>
<script>
document.getElementById("fetchData").addEventListener("click", function() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
let list = document.getElementById("dataList");
data.forEach(item => {
let li = document.createElement("li");
li.innerText = item.title;
list.appendChild(li);
});
})
.catch(error => console.error('Hata:', error));
});
</script>
</body>
</html>3. Gelişmiş Görüntüleme Teknikleri
a) Veri Görselleştirme (D3.js)
D3.js gibi kütüphanelerle birlikte JavaScript kullanarak, karmaşık veri setlerini etkileyici ve interaktif grafiklere dönüştürebilirsiniz.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>D3.js ile Veri Görselleştirme</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div class="chart"></div>
<script>
const data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", d => d + "px")
.text(d => d);
</script>
</body>
</html>b) Canvas ile Çizim Yapma
HTML5 <canvas> elementi ve JavaScript kullanarak, grafikler, animasyonlar ve hatta oyunlar oluşturabilirsiniz.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Canvas ile Çizim</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
// Daire çizme
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.stroke();
// Metin yazma
ctx.font = "30px Arial";
ctx.fillText("Merhaba Canvas!", 100, 220);
</script>
</body>
</html>c) SVG ile Vektörel Çizimler
JavaScript, SVG (Scalable Vector Graphics) ile vektörel çizimler yapmak için de kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>SVG ile Çizim</title>
</head>
<body>
<svg width="400" height="400">
<circle cx="200" cy="200" r="100" stroke="black" stroke-width="3" fill="red" />
<text x="150" y="220" font-family="Arial" font-size="30" fill="white">Merhaba SVG!</text>
</svg>
</body>
</html>Sonuç
JavaScript, web sayfalarında içerik görüntülemek için birçok farklı yöntem sunar. Temel metin görüntülemeden, karmaşık veri görselleştirmelerine kadar geniş bir yelpazede kullanılabilir. Bu makalede verilen örnekler, JavaScript’in görüntüleme olanaklarını anlamanıza yardımcı olacaktır. Daha fazla pratik yaparak, bu yöntemleri projelerinizde etkili bir şekilde kullanabilirsiniz.
