Dama Tahtası Uygulaması
Bu örneğimizde Javascript’te appendChild, createTextNode, createElement fonksiyonlarını kullanıyoruz.
Kaynak Kodları
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ font-family: Arial, Helvetica, sans-serif; } #buyuk_div_style { width: 480px; height: 480px; border-style:double; background-color: bisque; margin: auto; } .kucuk_div_style { width: 52px; height: 52px; border-style: double; border-color:darkgoldenrod; background-color:cornsilk; color: brown; float: left; margin: 1px; line-height: 52px; text-align: center; } .kirmizi_zemin { background-color: brown; color: cornsilk; } </style> <script> function olustur() { var buyuk_div = document.createElement("DIV"); buyuk_div.id = "buyuk_div_style"; renk_sayaci=0; for (let satir = 1; satir < 9; satir++) { for (let sutun = 1; sutun < 9; sutun++) { var kareler = document.createElement("DIV"); kareler.className = "kucuk_div_style"; kareler.id = "kare" + satir+""+sutun; var yazi = document.createTextNode(satir + "/" + sutun); renk_sayaci++; if (renk_sayaci % 2 == 0) { kareler.className += " kirmizi_zemin"; } kareler.appendChild(yazi); buyuk_div.appendChild(kareler); } renk_sayaci++; } document.body.appendChild(buyuk_div); } </script> </head> <body> <input type="button" value="Dama Tahtası" onclick="olustur()"> </body> </html>