Javascript Dizi Uygulama Örneği
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
</script>
<style>
div {
display: inline-block;
height: 100%;
}
select {
width: 200px;
}
* {
transition: all 2s;
}
</style>
</head>
<body>
<form>
<div>
<div>
<select name="kutuphaneci" multiple="multiple" size="10" id="Kitaplar" onclick="ResmiGoster()"></select>
<br>
<input type="button" value="Kitap Ekle" id="Ekle" onclick="KitapEkle()"/>
<input type="button" value="Kitap Ara" id="Aranacak" onclick="Ara()"/>
<input type="button" value="Kitapları Temizle" id="Temizleyici" onclick="Temizle()"/>
</div>
<div>
<img src="https://fakeimg.pl/350x200/?text=Kitap Seçin" id="KitapKapagi" />
</div>
</div>
</form>
<br />
<div>Tüm kitaplar listesi: <span id="TumKitapListesi"></span></div>
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
//var Kutuphane=[]; //var Kutuphane = new Array();
var Kutuphane = new Array();
var Kapak = new Array();
KitapEkle = () => {
Eklenecek = prompt("Yeni kitap giriniz");
Kutuphane.push(Eklenecek); //Kutuphane[Kutuphane.lenght]=Eklenecek;
var option = document.createElement("option");
option.text = Eklenecek;
document.getElementById("Kitaplar").add(option);
EklenecekResim = prompt("Kitap kapağının resmini giriniz");
if (EklenecekResim) {//kapak resmi girilmişse
Kapak.push(EklenecekResim); //Kutuphane[Kutuphane.lenght]=Eklenecek;
} else {//kapak resmi girilmemişse
Kapak.push('https://fakeimg.pl/350x200/?text=' + Eklenecek);
}
document.getElementById('TumKitapListesi').innerHTML = Kutuphane.toString(); //Tüm Kitap Listesini (Kutuphane dizisini) span içine yazar
console.log(Kutuphane, EklenecekResim);
};
Temizle = () => {
//function Temizlen() {
document.getElementById('Kitaplar').innerHTML = ''; //Tüm optionları siler
Kutuphane = null;
Kutuphane = new Array();
Kapak = null;
Kapak = new Array();
};
ResmiGoster = () => {
ResimNo = document.getElementById('Kitaplar').selectedIndex;
document.getElementById('KitapKapagi').src = Kapak[ResimNo];
};
Ara = () => {
Aranacak = prompt("Aramak istediğiniz kitap adı");
let KitapDiziSiraNo = Kutuphane.lastIndexOf(Aranacak);
if (KitapDiziSiraNo > -1) { //index varsa
alert("Kitap bulundu...");
document.getElementById('Kitaplar').selectedIndex=KitapDiziSiraNo;
ResmiGoster();
} else {
alert("Kitap bulunamadı...");
}
};
var Kutuphane = new Array();
var Kapak = new Array();
KitapEkle = () => {
Eklenecek = prompt("Yeni kitap giriniz");
Kutuphane.push(Eklenecek); //Kutuphane[Kutuphane.lenght]=Eklenecek;
var option = document.createElement("option");
option.text = Eklenecek;
document.getElementById("Kitaplar").add(option);
EklenecekResim = prompt("Kitap kapağının resmini giriniz");
if (EklenecekResim) {//kapak resmi girilmişse
Kapak.push(EklenecekResim); //Kutuphane[Kutuphane.lenght]=Eklenecek;
} else {//kapak resmi girilmemişse
Kapak.push('https://fakeimg.pl/350x200/?text=' + Eklenecek);
}
document.getElementById('TumKitapListesi').innerHTML = Kutuphane.toString(); //Tüm Kitap Listesini (Kutuphane dizisini) span içine yazar
console.log(Kutuphane, EklenecekResim);
};
Temizle = () => {
//function Temizlen() {
document.getElementById('Kitaplar').innerHTML = ''; //Tüm optionları siler
Kutuphane = null;
Kutuphane = new Array();
Kapak = null;
Kapak = new Array();
};
ResmiGoster = () => {
ResimNo = document.getElementById('Kitaplar').selectedIndex;
document.getElementById('KitapKapagi').src = Kapak[ResimNo];
};
Ara = () => {
Aranacak = prompt("Aramak istediğiniz kitap adı");
let KitapDiziSiraNo = Kutuphane.lastIndexOf(Aranacak);
if (KitapDiziSiraNo > -1) { //index varsa
alert("Kitap bulundu...");
document.getElementById('Kitaplar').selectedIndex=KitapDiziSiraNo;
ResmiGoster();
} else {
alert("Kitap bulunamadı...");
}
};
</script>
<style>
div {
display: inline-block;
height: 100%;
}
select {
width: 200px;
}
* {
transition: all 2s;
}
</style>
</head>
<body>
<form>
<div>
<div>
<select name="kutuphaneci" multiple="multiple" size="10" id="Kitaplar" onclick="ResmiGoster()"></select>
<br>
<input type="button" value="Kitap Ekle" id="Ekle" onclick="KitapEkle()"/>
<input type="button" value="Kitap Ara" id="Aranacak" onclick="Ara()"/>
<input type="button" value="Kitapları Temizle" id="Temizleyici" onclick="Temizle()"/>
</div>
<div>
<img src="https://fakeimg.pl/350x200/?text=Kitap Seçin" id="KitapKapagi" />
</div>
</div>
</form>
<br />
<div>Tüm kitaplar listesi: <span id="TumKitapListesi"></span></div>
</body>
</html>
Örnek
<body>
<h2>Öğrenci Bilgileri Formu</h2>
< Form >
<form id="ogrForm" >
<label for="adsoyad">Ad Soyad:</label><br>
<input type="text" id="adsoyad" name="adsoyad" required><br><br>
<label for="y1">Yazılı 1:</label>
<input type="number" id="y1" name="y1" required><br><br>
<label for="y2">Yazılı 2:</label>
<input type="number" id="y2" name="y2" required><br><br>
<label for="y3">Yazılı 3:</label>
<input type="number" id="y3" name="y3" required><br><br>
<label for="s1">Sözlü 1:</label>
<input type="number" id="s1" name="s1" required><br><br>
<label for="s2">Sözlü 2:</label>
<input type="number" id="s2" name="s2" required><br><br>
<label for="s3">Sözlü 3:</label>
<input type="number" id="s3" name="s3" required><br><br>
<button type="button" id="ekle">Verileri Ekle</button>
</form>
< Öğrenci Bilgileri Tablosu >
<table >
<thead>
<tr>
<th>Ad Soyad</th>
<th>Yazılı 1</th>
<th>Yazılı 2</th>
<th>Yazılı 3</th>
<th>Sözlü 1</th>
<th>Sözlü 2</th>
<th>Sözlü 3</th>
<th>Ortalama</th>
</tr>
</thead>
<tbody id="ogrenciTablosu">
< Tablo verileri buraya eklenecek >
</tbody>
</table>
<script>
// Mevcut öğrenci verisi
const ogr = [
{ adsoyad: "Ahmet KARA", y1: 50, y2: 50, y3: 50, s1: 80, s2: 90, s3: 60 },
{ adsoyad: "Samet TAŞ", y1: 40, y2: 20, y3: 60, s1: 50, s2: 20, s3: 100 },
{ adsoyad: "Kasım BİR", y1: 40, y2: 40, y3: 50, s1: 50, s2: 80, s3: 70 },
{ adsoyad: "Selim HAN", y1: 50, y2: 50, y3: 90, s1: 70, s2: 70, s3: 50 },
{ adsoyad: "Yavuz BİÇEN", y1: 10, y2: 10, y3: 20, s1: 20, s2: 50, s3: 70 },
{ adsoyad: "Ahmet HAKAN", y1: 70, y2: 80, y3: 60, s1: 40, s2: 80, s3: 50 }
];
// Formu ve tabloyu seçiyoruz
const ekleButton = document.getElementById('ekle');
const ogrenciTablosu = document.getElementById('ogrenciTablosu');
const ogrForm = document.getElementById('ogrForm');
// Tabloyu güncellemek için bir fonksiyon
function tabloyuGuncelle() {
// Tabloyu temizle
html = "";
// Dizideki her bir öğrenci için tablo satırı ekleyelim
ogr.forEach(ogrenci => {
// Ortalama hesapla
const ortalama = (ogrenci.y1 + ogrenci.y2 + ogrenci.y3 + ogrenci.s1 + ogrenci.s2 + ogrenci.s3) / 6;
html += `<tr>`;
html+= `
<td>${ogrenci.adsoyad}</td>
<td>${ogrenci.y1}</td>
<td>${ogrenci.y2}</td>
<td>${ogrenci.y3}</td>
<td>${ogrenci.s1}</td>
<td>${ogrenci.s2}</td>
<td>${ogrenci.s3}</td>
<td>${ortalama.toFixed(2)}</td> < Ortalamanın iki ondalıklı şekilde gösterilmesi >
`;
html+=`</tr>`;
ogrenciTablosu.innerHTML=html;
});
}
// Form verilerini alıp diziyi güncelleyen fonksiyon
ekleButton.addEventListener('click', function(e) {
// Form verilerini al
const yeniOgrenci = {
adsoyad: document.getElementById('adsoyad').value,
y1: parseInt(document.getElementById('y1').value),
y2: parseInt(document.getElementById('y2').value),
y3: parseInt(document.getElementById('y3').value),
s1: parseInt(document.getElementById('s1').value),
s2: parseInt(document.getElementById('s2').value),
s3: parseInt(document.getElementById('s3').value)
};
// Yeni öğrenciyi dizimize ekle
ogr.push(yeniOgrenci);
// Tabloyu güncelle
tabloyuGuncelle();
// Formu sıfırla
ogrForm.reset();
});
// Sayfa yüklendiğinde mevcut diziyi tabloya aktar
tabloyuGuncelle();
</script>
</body>
<h2>Öğrenci Bilgileri Formu</h2>
< Form >
<form id="ogrForm" >
<label for="adsoyad">Ad Soyad:</label><br>
<input type="text" id="adsoyad" name="adsoyad" required><br><br>
<label for="y1">Yazılı 1:</label>
<input type="number" id="y1" name="y1" required><br><br>
<label for="y2">Yazılı 2:</label>
<input type="number" id="y2" name="y2" required><br><br>
<label for="y3">Yazılı 3:</label>
<input type="number" id="y3" name="y3" required><br><br>
<label for="s1">Sözlü 1:</label>
<input type="number" id="s1" name="s1" required><br><br>
<label for="s2">Sözlü 2:</label>
<input type="number" id="s2" name="s2" required><br><br>
<label for="s3">Sözlü 3:</label>
<input type="number" id="s3" name="s3" required><br><br>
<button type="button" id="ekle">Verileri Ekle</button>
</form>
< Öğrenci Bilgileri Tablosu >
<table >
<thead>
<tr>
<th>Ad Soyad</th>
<th>Yazılı 1</th>
<th>Yazılı 2</th>
<th>Yazılı 3</th>
<th>Sözlü 1</th>
<th>Sözlü 2</th>
<th>Sözlü 3</th>
<th>Ortalama</th>
</tr>
</thead>
<tbody id="ogrenciTablosu">
< Tablo verileri buraya eklenecek >
</tbody>
</table>
<script>
// Mevcut öğrenci verisi
const ogr = [
{ adsoyad: "Ahmet KARA", y1: 50, y2: 50, y3: 50, s1: 80, s2: 90, s3: 60 },
{ adsoyad: "Samet TAŞ", y1: 40, y2: 20, y3: 60, s1: 50, s2: 20, s3: 100 },
{ adsoyad: "Kasım BİR", y1: 40, y2: 40, y3: 50, s1: 50, s2: 80, s3: 70 },
{ adsoyad: "Selim HAN", y1: 50, y2: 50, y3: 90, s1: 70, s2: 70, s3: 50 },
{ adsoyad: "Yavuz BİÇEN", y1: 10, y2: 10, y3: 20, s1: 20, s2: 50, s3: 70 },
{ adsoyad: "Ahmet HAKAN", y1: 70, y2: 80, y3: 60, s1: 40, s2: 80, s3: 50 }
];
// Formu ve tabloyu seçiyoruz
const ekleButton = document.getElementById('ekle');
const ogrenciTablosu = document.getElementById('ogrenciTablosu');
const ogrForm = document.getElementById('ogrForm');
// Tabloyu güncellemek için bir fonksiyon
function tabloyuGuncelle() {
// Tabloyu temizle
html = "";
// Dizideki her bir öğrenci için tablo satırı ekleyelim
ogr.forEach(ogrenci => {
// Ortalama hesapla
const ortalama = (ogrenci.y1 + ogrenci.y2 + ogrenci.y3 + ogrenci.s1 + ogrenci.s2 + ogrenci.s3) / 6;
html += `<tr>`;
html+= `
<td>${ogrenci.adsoyad}</td>
<td>${ogrenci.y1}</td>
<td>${ogrenci.y2}</td>
<td>${ogrenci.y3}</td>
<td>${ogrenci.s1}</td>
<td>${ogrenci.s2}</td>
<td>${ogrenci.s3}</td>
<td>${ortalama.toFixed(2)}</td> < Ortalamanın iki ondalıklı şekilde gösterilmesi >
`;
html+=`</tr>`;
ogrenciTablosu.innerHTML=html;
});
}
// Form verilerini alıp diziyi güncelleyen fonksiyon
ekleButton.addEventListener('click', function(e) {
// Form verilerini al
const yeniOgrenci = {
adsoyad: document.getElementById('adsoyad').value,
y1: parseInt(document.getElementById('y1').value),
y2: parseInt(document.getElementById('y2').value),
y3: parseInt(document.getElementById('y3').value),
s1: parseInt(document.getElementById('s1').value),
s2: parseInt(document.getElementById('s2').value),
s3: parseInt(document.getElementById('s3').value)
};
// Yeni öğrenciyi dizimize ekle
ogr.push(yeniOgrenci);
// Tabloyu güncelle
tabloyuGuncelle();
// Formu sıfırla
ogrForm.reset();
});
// Sayfa yüklendiğinde mevcut diziyi tabloya aktar
tabloyuGuncelle();
</script>
</body>
