Kelime Sayısı Hesapla
Kelime Sayacı
Yukarıdaki program HTML ve JavaScript kodları ile yapılmıtır.
HTML ve JavaScript kodunu detaylı bir şekilde açıklayayım:
1. HTML Yapısı: HTML, web sayfasının temel yapısını oluşturur. Bu yapı içerisinde metin alanı, düğmeler ve sonuç gösterilecek bir alan bulunmaktadır.
html kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kelime Sayacı</title>
</head>
<body>
<h2>Kelime Sayacı</h2>
<textarea id="metin" rows="4" cols="50"></textarea><br>
<button onclick="kelimeSay()">Kelime Sayısını Hesapla</button>
<button onclick="temizle()">Temizle</button><br><br>
<div id="sonuc"></div>
</body>
</html>
2. Metin Alanı (Textarea): Kullanıcı metni girebileceği bir metin alanı sağlar. Bu alanda `id` özelliği "metin" olarak tanımlanır. Bu id, JavaScript kodunda bu alana erişmek için kullanılacak.
html kodu
<textarea id="metin" rows="4" cols="50"></textarea><br>
3. Butonlar: İki buton vardır. Birincisi, kelime sayısını hesaplamak için "Kelime Sayısını Hesapla" düğmesi. İkincisi ise metin alanını temizlemek için "Temizle" düğmesi.
html kodu
<button onclick="kelimeSay()">Kelime Sayısını Hesapla</button>
<button onclick="temizle()">Temizle</button><br><br>
4. Sonuç Alanı: Kelime sayısının gösterileceği bir `<div>` öğesi bulunur. Bu alana JavaScript kodu tarafından hesaplanan sonuçlar yazılacaktır.
html kodu
<div id="sonuc"></div>
5. JavaScript Kodu: JavaScript, kullanıcının girdiği metni alacak, kelime sayısını hesaplayacak ve sonucu ekranda gösterecek işlevleri sağlar.
javascript kodu
<script>
function kelimeSay() {
var metin = document.getElementById("metin").value;
var kelimeSayisi = metin.split(/\s+/).filter(function(s) { return s.length > 0; }).length;
document.getElementById("sonuc").innerText = "Metinde " + kelimeSayisi + " kelime var.";
}
function temizle() {
document.getElementById("metin").value = "";
document.getElementById("sonuc").innerText = "";
}
</script>
- "kelimeSay()" işlevi, metin alanından metni alır, metni boşluklara göre ayırır, boş olmayan kısımları filtreler ve kalan eleman sayısını hesaplar. Sonra bu sayıyı "sonuc" alanına yazdırır.
- "temizle()" işlevi, metin alanını temizler ve sonuç alanını temizler.
Bu şekilde, HTML ve JavaScript kodları bir araya gelerek, kullanıcının metin girmesine, kelime sayısını hesaplamasına ve sonucu görmesine olanak tanır. Ayrıca, metni temizleme işlevi de kullanıcıya daha iyi bir deneyim sunar.
Yorumlar
Yorum Gönder