İş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:
showNumbersfonksiyonu, bir döngü kullanarak 1'den 5'e kadar olan sayıları bir paragraf içinde gösterir.sumNumbersfonksiyonu, kullanıcıdan bir sayı alır ve 1'den o sayıya kadar olan sayıları toplar, sonucu bir uyarı penceresinde gösterir.changeColorOnHoververestoreColorfonksiyonları, 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.