ReferenceError: document is not defined Hatası ve Çözümü

    Javascript öğrenmeye yeni başladım ve ilk karşılaştığım hatalardan biri bu oldu. Bu konuda açılan bir StackOverFlow konusu var ancak bu StackOverFlow sorusuna gelen cevaplar benim sorunumu çözmedi. Merak edenler için sorunun linki: https://stackoverflow.com/questions/24647839/referenceerror-document-is-not-defined-in-plain-javascript 

    Sorunun Kaynağı

    Sorunun kaynağına gelirsek... Aslında benim sorunumun kod kaynaklı bir sorun olmadığını fark ettim. Benim sorunum, javascript ve html arasındaki bağlantıyı tam kavrayamamış olmamdan kaynaklanıyordu. Bir web sayfasını çalıştırırken bu sayfayı html dosyası üzerinden açıp html dosyasından javascript dosyasına yönlendirmeliyiz. eğer bu sıralamayı tersten yaparsak yani önce javascript dosyasını çalıştırmaya kalkarsak html sayfası daha yüklenmediği için javascript kodumuzda html dosyasına yaptığımız her atıf o sırada henüz yüklenmemiş olan bir html dosyasına gidecek. Mesela, javascript dosyasında kullandığımız document ifadesi aslında bir nevi html sayfasını referans eder ama bu html sayfası henüz yüklenmemiştir yani referansı yoktur.

    Sorunun Çözümü

   Çözümü aslında oldukça basit: Uygulamamızı html dosyası üzerinden başlatmak. Şimdi bunu açıklayalım. 

    Bu sorunu kullandığımız IDE üzerinden çözebiliriz. Ben WebStorm kullanıyorum ve bu IDE'nin kullanımında uygulamayı çalıştırmayı nereden başlatacağımızı yukarıda bulunan debug configurations kısmından ayarlayabiliyoruz.

    İsterseniz html kodunuzu açıp çalıştırma tuşuna basabilirsiniz ancak bu pek sağlıklı bir yöntem değil çünkü her uygulamayı çalıştıracağınızda bu dosya üzerine gelip çalıştırmanız gerekecek. Burada bize IDE'nin sunduğu konfigürasyon imkanı var. Konfigürasyon oluşturarak her seferinde bizim hangi dosyayla ilgilendiğimizden bağımsız olarak çalışacak dosyayı belirtebiliyoruz.

    Yeni bir konfigürasyon oluşturmak için öncelikle Current File yazısının yannındaki kulakçığa tıklıyoruz. Ardından açılan sekmeden Edit Configurations seçeneğine tıklıyoruz.
Karşımıza gelen ekranda add new configurastions linkine tıklıyoruz ve seçenekler arasından javascript debug seçeneğini seçiyoruz. Karşımıza böyle bir ekran gelmiş olmalı:

    Burada URL kısmına uygulama her açılacağında çalışmasını istediğimiz html dosyasının (bu dosya genelde index.html olur) konumunu girmeliyiz. Bu benim gibi yerelde çalıştırıyorsanız dosyanın bilgisayardaki konumudur. URL metin alanının kenarındaki dosya simgesine tıklayarak kendi dosyanızı seçebilirsiniz. Ardından bu konfigürasyona bir isim verip OK tuşuna tıklayarak kaydedebilirsiniz. Bundan sonra sorununuz çözülmüş olmalı, artık yukarıda Current File değil sizin oluşturduğunuz konfigürasyonun adı yazmalı ve bu konfigürasyon her seferinde uygulamayı sizin seçtiğiniz dosyadan başlatacak.

   Yazının başında bahsettiğim gibi ben de javascript'i yeni öğreniyorum. Eğer burada yazdığım bilgilerde bir sorun görürseniz beni uyarmayı ihmal etmeyin.

 İYİ KODLAMALAR... 😊