İşte bir HTML sayfası içinde başka birkaç örnek JavaScript kodu:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Örnek 2</title>
<script>
// JavaScript kodları buraya yazılır
// Örnek 4: Temel bir döngü kullanarak sayıları gösterme
function showNumbers() {
var output = "";
for (var i = 1; i <= 5; i++) {
output += i + "<br>";
}
document.getElementById("numberList").innerHTML = output;
}
// Örnek 5: Kullanıcının girdiği sayıya kadar olan sayıları toplama
function sumNumbers() {
var limit = parseInt(prompt("Bir sayı girin:"));
var sum = 0;
for (var i = 1; i <= limit; i++) {
sum += i;
}
alert("Toplam: " + sum);
}
// Örnek 6: Mouse ile üzerine gelindiğinde rengi değiştirme
function changeColorOnHover(element) {
element.style.color = "red";
}
function restoreColor(element) {
element.style.color = "black";
}
</script>
</head>
<body>
<h1>JavaScript Örnek 2</h1>
<button onclick="showNumbers()">Sayıları Göster</button>
<button onclick="sumNumbers()">Sayıları Topla</button>
<p id="numberList"></p>
<p onmouseover="changeColorOnHover(this)" onmouseout="restoreColor(this)">
Mouse ile üzerime gelindiğinde rengim değişir.
</p>
</body>
</html>
Bu örnekte:
showNumbers
fonksiyonu, bir döngü kullanarak 1'den 5'e kadar olan sayıları bir paragraf içinde gösterir.sumNumbers
fonksiyonu, kullanıcıdan bir sayı alır ve 1'den o sayıya kadar olan sayıları toplar, sonucu bir uyarı penceresinde gösterir.changeColorOnHover
verestoreColor
fonksiyonları, bir HTML paragraf elementinin üzerine gelindiğinde rengini değiştirme ve üzerinden çıkıldığında eski rengine geri döndürme işlemlerini yapar.
Bu örnekleri tarayıcınızda açarak çalıştırabilir ve fonksiyonların nasıl çalıştığını gözlemleyebilirsiniz.