- Konu sahibi
- #1
JavaScript, düz metin düzenleyici, kod editörü veya IDE içinde yazılır. Başlangıç için Visual Studio Code gibi bir kod editörü yeterlidir; JavaScript’i kendi web sayfanıza eklerken bir HTML dosyasına, sunucu tarafında çalıştırmak içinse JavaScript çalışma zamanı sağlayan bir araca ihtiyaç vardır. Yani JavaScript yazmak için tek bir zorunlu program yoktur: yazma ortamını ve çalıştırma ortamını amacınıza göre seçersiniz.
Kod yazmak için Not Defteri gibi basit bir metin düzenleyici de kullanılabilir. Ancak sözdizimi renklendirme, otomatik tamamlama, hata göstergeleri ve proje klasörü yönetimi sunduğu için bir kod editörü daha pratiktir. Büyük projelerde hata ayıklama, eklentiler ve proje yönetimi özellikleri bulunan bir IDE tercih edilebilir.
JavaScript kodunun nerede çalışacağı ise projeye bağlıdır:
Tarayıcı konsolu hızlı denemeler için uygundur; dosyada kalıcı ve düzenli kod yazmak için ise editör ile proje dosyası kullanmak daha doğrudur. Bir JavaScript dosyasını yalnızca editörde açmak kodu çalıştırmaz.
Tarayıcıda JavaScript denemek için aşağıdaki tam örneği bir kod editöründe
Bu tam örnek, dış paket veya sunucu isteği kullanmadığı için doğrudan dosyadan da çalışabilir. İleride modül yükleme veya ağ istekleri eklenirse geliştirme sunucusu ve farklı yükleme kuralları gerekebilir.
Uygulama adımları:
Metin görünmüyorsa önce dosyanın gerçekten HTML olarak kaydedildiğini ve kodda
Küçük bir ifadeyi dosya oluşturmadan denemek için tarayıcının geliştirici araçlarındaki Console bölümüne şu kod yazılabilir:
Beklenen çıktı
Yalnızca tarayıcı kurmanın yeterli olduğunu düşünmek: Tarayıcı konsolu kod çalıştırabilir, fakat düzenli bir proje oluşturmak için dosyaları bir editörde saklamak gerekir.
JavaScript ile Java'yı aynı sanmak: İsimleri benzer olsa da farklı dillerdir ve aynı araç zincirini kullanmaları gerekmez.
Dosyayı çalıştırmadan yalnızca kaydetmek: Editörde yazılan kodu görmek için HTML dosyasını tarayıcıda açmalı veya hedef çalışma zamanında çalıştırmalısınız.
Yanlış dosya uzantısı kullanmak: JavaScript dosyası için
Hangi durumda hangi program kullanılır?
Kod yazmak için Not Defteri gibi basit bir metin düzenleyici de kullanılabilir. Ancak sözdizimi renklendirme, otomatik tamamlama, hata göstergeleri ve proje klasörü yönetimi sunduğu için bir kod editörü daha pratiktir. Büyük projelerde hata ayıklama, eklentiler ve proje yönetimi özellikleri bulunan bir IDE tercih edilebilir.
JavaScript kodunun nerede çalışacağı ise projeye bağlıdır:
Tarayıcı konsolu hızlı denemeler için uygundur; dosyada kalıcı ve düzenli kod yazmak için ise editör ile proje dosyası kullanmak daha doğrudur. Bir JavaScript dosyasını yalnızca editörde açmak kodu çalıştırmaz.
En küçük çalışan web örneği
Tarayıcıda JavaScript denemek için aşağıdaki tam örneği bir kod editöründe
index.html adıyla kaydedin. Dosyayı tarayıcıda açtığınızda sayfada mesaj görünür.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript denemesi</title>
</head>
<body>
<p id="sonuc"></p>
<script>
const mesaj = "JavaScript çalıştı.";
document.querySelector("#sonuc").textContent = mesaj;
</script>
</body>
</html>Bu tam örnek, dış paket veya sunucu isteği kullanmadığı için doğrudan dosyadan da çalışabilir. İleride modül yükleme veya ağ istekleri eklenirse geliştirme sunucusu ve farklı yükleme kuralları gerekebilir.
Uygulama adımları:
- Bir kod editörü açın ve yeni bir dosya oluşturun.
- Tam örneği
index.htmladıyla kaydedin. Dosya uzantısının yanlışlıkla.txtolmadığını kontrol edin. - Dosyayı bir web tarayıcısında açın.
- Sayfada
JavaScript çalıştı.metnini görmeyi bekleyin.
Metin görünmüyorsa önce dosyanın gerçekten HTML olarak kaydedildiğini ve kodda
id="sonuc" ile querySelector("#sonuc") seçicisinin aynı öğeyi gösterdiğini kontrol edin. Tarayıcının geliştirici konsolunda kırmızı hata varsa hata mesajındaki dosya ve satır bilgisini inceleyin. Bu örnek JavaScript'i tarayıcıda çalıştırır; sunucu tarafı kodu veya Node.js'e özgü özellikleri çalıştırmaz.| Amaç | Yazma ortamı | Çalıştırma ortamı |
|---|---|---|
| Web sayfasına etkileşim eklemek | Kod editörü | Web tarayıcısı |
| Kısa bir kodu denemek | Tarayıcı geliştirici konsolu | Aynı tarayıcı sekmesi |
| Sunucu veya komut satırı uygulaması | Kod editörü | JavaScript çalışma zamanı |
JavaScript'i doğrudan tarayıcıda yazmak
Küçük bir ifadeyi dosya oluşturmadan denemek için tarayıcının geliştirici araçlarındaki Console bölümüne şu kod yazılabilir:
Kod:
console.log(2 + 3);Beklenen çıktı
5 değeridir. Bu yöntem hızlı test içindir; sekme kapatıldığında kod genellikle kalıcı bir proje dosyası olarak saklanmaz. Kalıcı çalışma için kodu editörde dosyaya kaydedin.Program seçerken sık yapılan hatalar
Yalnızca tarayıcı kurmanın yeterli olduğunu düşünmek: Tarayıcı konsolu kod çalıştırabilir, fakat düzenli bir proje oluşturmak için dosyaları bir editörde saklamak gerekir.
JavaScript ile Java'yı aynı sanmak: İsimleri benzer olsa da farklı dillerdir ve aynı araç zincirini kullanmaları gerekmez.
Dosyayı çalıştırmadan yalnızca kaydetmek: Editörde yazılan kodu görmek için HTML dosyasını tarayıcıda açmalı veya hedef çalışma zamanında çalıştırmalısınız.
Yanlış dosya uzantısı kullanmak: JavaScript dosyası için
.js, HTML dosyası için .html uzantısını kullanın. Uzantı değişirse işletim sistemi dosyayı beklediğiniz türde açmayabilir.