JavaScript ile web üzerinde kendi HTML editörünüzü kodlayabilir ve HTML kodları yazarak testler yapabilirsiniz.
JavaScript, web üzerinde HTML’nin yanında daha fazla özellik eklemenizi sağlayan bir sistem. Bu sistemle mesaj kutusu, konsola mesaj gönderme, değişkenlerle işlemler yapma gibi çeşitli olayları yapabilirsiniz. Bu konuda ise HTML editör yapımından bahsedeceğiz.
HTML Kodları
Öncelikle HTML kodlarını <body> etiketleri arasına giriyoruz. WordPress editörü ile ilgili bir sorundan dolayı ekran görüntüsü olarak atıyoruz.
Yukarıdaki kodda kod için geniş yazı kutusu, çalıştırmak ve kodu kopyalamak için butonlar ve üyenin kodunun çalıştırılıp gözükeceği kısmı ekledik. Yani JS kodlarında kullanıcının yazdığı kodları o araya ekleyeceğiz.
JS Kodları
function KodGuncelle()
{
var x = document.getElementById("code_area").value;
document.getElementById("code_screen").innerHTML = x;
}
function Kopyala()
{
var y = document.getElementById("code_area");
y.select();
document.execCommand("copy");
alert("Kod kopyalandı.");
}
Yukarıdaki kodda öncelikle bir fonksiyonlar oluşturduk. Kod güncelleme fonksiyonumuzda bir değişken oluşturup kullanıcının geniş yazı kutusuna girdiği yazıları değişkene ekledik. Burada dikkat etmeniz gereken kısım “code_area” yazan kısmın HTML kodlarında ID olarak ekli olması. Eğer doğru bir şekilde yaptıysanız sorunsuz çalışacaktır. Alt kısımda ise “code_screen” adlı ID’ye sahip <div> etiketini değiştirme kodunu girdik. “x” değişkenindeki kodlar HTML olarak buraya eklenecek ve yazdığınız kod gözükecektir. HTML dışında CSS ve JS’de kullanabilirsiniz.
Kopyalama fonksiyonunda ise “y” değişkeni ile kullanıcının girdiği geniş yazı kutusundaki kodları değişkene aktardık. Sonrasında bu değişkendeki yazıları seçtik. Kopyalama komutunu kullandık. Sonrasında kullanıcıya kopyalandığına dair bir mesaj gönderdik. Bu sayede işlemimiz tamamlanmış oldu.
Konunun sonuna geldik. Daha fazla sorunuz var ise yorumlardan sorabilirsiniz. Kodlarken kendinize özgü içerikler de katıp kodu geliştirmeyi unutmayın.
Merhaba Kodu Çalıştır Dediğimizde Kodu Çalıştımıyor?