Online HTML CSS JS derleyici

Online HTML, CSS ve JavaScript derleyici ne işe yarar?

Bu araçla HTML, CSS ve JavaScript kodunu hiçbir program kurmadan tarayıcında çalıştırırsın. Üç dosyaya ayrılmış düzenleyiciye yazdığın kod birleştirilir ve yanındaki önizlemede gerçek bir web sayfası gibi açılır. console.log çıktıları ve hatalar önizlemenin altındaki konsola düşer; hata satırına tıklayınca düzenleyici o satıra gider.

Küçük bir düzeltme: HTML, CSS ve JavaScript aslında derlenmez, tarayıcı bu dilleri doğrudan yorumlar. "Online derleyici" ya da "HTML compiler" diye aranan şey bu yüzden bir çalıştırma ortamıdır. Kodu alır, yalıtılmış bir sayfada çalıştırır ve sonucu gösterir. Bu sayfa da tam olarak bunu yapar.

Nasıl kullanılır?

1. HTML sekmesine sayfanın gövdesini yaz. <!doctype>, <head> ve <body> etiketlerini yazman gerekmez, araç onları kendisi ekler. İstersen baştan sona tam bir HTML belgesi de yapıştırabilirsin; o zaman CSS </head> öncesine, JavaScript </body> öncesine yerleşir.
2. CSS ve JS sekmelerini doldur. JavaScript sayfanın sonunda çalıştığı için document.querySelector ile öğelere doğrudan ulaşırsın, DOMContentLoaded beklemen gerekmez.
3. Sonucu izle. Otomatik çalıştırma açıkken önizleme, yazmayı bıraktıktan yaklaşık yarım saniye sonra yenilenir. Kapattıysan Ctrl + Enter ya da Çalıştır düğmesi yeterli.
4. Farklı ekranlarda dene. Önizleme çubuğundaki tablet ve telefon düğmeleri genişliği 768 ve 390 piksele indirir; medya sorguların bu genişliğe göre çalışır.
5. Bitince dışa aktar. Dışa aktar menüsünden her şeyi tek bir index.html dosyası olarak indir, panoya kopyala ya da Yazdır / PDF ile çıktısını al.

Kodun nerede çalışıyor?

Yazdığın kod 1001renk sunucusuna gönderilmez. Önizleme sitenin içinde ama ondan ayrılmış bir çerçevede açılır: çerçeve hem sandbox özniteliğiyle hem de sunucunun gönderdiği Content-Security-Policy: sandbox başlığıyla yalıtılır. Bu yüzden önizlemedeki kod "opak köken" denen kimliksiz bir adreste çalışır ve 1001renk.net'in çerezlerine, oturumuna ya da sayfanın geri kalanına dokunamaz. Bir forumdan kopyaladığın kodu denerken bile ana sayfa etkilenmez.

Kodunun son hali yalnızca bu tarayıcının yerel deposunda tutulur. Sayfayı kapatıp açtığında kaldığın yerden devam edersin; başka bir bilgisayarda açmak istersen .html olarak indir.

Önizlemede bilmen gereken sınırlar

• localStorage ve sessionStorage önizlemede bellekte taklit edilir. Kaydettiğin değerler çalıştırmalar arasında korunur ama gerçek tarayıcı deposuna yazılmaz. Ayarlar menüsündeki "Başlangıç örneğine dön" bu taklit depoyu da sıfırlar.
• Çerezler (document.cookie) yalıtım gereği çalışmaz; çerez kullanan kodu kendi sitende dene.
• Dış dosyalar yalnızca https adresinden yüklenir. jsDelivr, cdnjs ya da unpkg üzerindeki kütüphaneleri <script src> ve <link> etiketleriyle ekleyebilirsin.
• fetch ile herkese açık API'lere istek atabilirsin; isteğin kabul edilip edilmeyeceğine karşı sunucunun CORS ayarı karar verir.
• Formlar bir adrese gönderilemez. submit olayını yakalayıp event.preventDefault() kullanırsan form mantığın çalışır.
• Döngü koruması: JS sekmesindeki bir döngü tek seferde 2,5 saniyeden uzun dönerse durdurulur ve konsola uyarı düşer. Yanlışlıkla yazılan while (true) sekmeni kilitlemez. Gerçekten uzun bir hesaplama yapıyorsan korumayı Ayarlar menüsünden kapatabilirsin.

Ne için kullanabilirsin?

Öğrenirken denemek için. Bir CSS özelliğini ya da JavaScript yöntemini okuduğun anda burada dener, sonucu görürsün. Kurulum, dosya ya da sunucu gerekmez.

Bir hatayı yalıtmak için. Büyük bir projede çözemediğin sorunu en küçük haliyle buraya taşı. Sorunu yeniden üreten yirmi satırlık bir örnek çoğu zaman çözümü kendisi gösterir; göstermezse bir forumda soru sorarken paylaşabileceğin temiz bir örnek olur.

Tasarım fikrini hızlıca görmek için. Bir kart, buton ya da menü tasarımını gerçek projene dokunmadan dene, beğendiğin hali tek dosya olarak indir.

Hazır örnekleri değiştirmek için. Kod Arşivi'ndeki canlı örneklerin her birinde "Derleyicide düzenle" düğmesi var. Örneği buraya alır, renkleri ve davranışı istediğin gibi değiştirirsin. Sayfanı yayına alacaksan başlık ve açıklamalarını ücretsiz SEO araçlarıyla kontrol etmeyi de unutma.