Bu aşamaya geçmeden önce Javascript’in temel programlama kavramlarını ve yazım kurallarını öğrendiniz. Artık karşılaştığınız Javascript kodlarına daha aşinasınız ve onları kopyalayıp projelerinize ekleyebiliyor ve kodlar üzerinde ihtiyaçlarınıza uygun düzenlemeler yapabiliyorsunuz. Ancak halen bir projeyi sıfırdan başlayarak kendi başınıza kodlayamıyorsunuz. Eğer bir önceki safhada karşılaştığınız sorular ile ilgili kendinizi rahat hissetmiyorsanız muhtemelen bu safhada işler karışabilir. Sindirerek ilerlemek en güzeli. O yüzden tedirginseniz ilerlemek için acele etmek yerine içinde bulunduğunuz safhada biraz daha zaman geçirin, kavramların üzerinden geçin, tekrar edin ve yeni kodlar yazmaya gayret edin.

Yeni safhanızda düzenleme yapma aşamasını geçecek ve artık bir şeyler inşa etmeye adım atacaksınız. Javascript’te bir şeyler inşa etmeye başlamak için Doküman Nesne Modeli- DOM(Document Object Model) kavramını öğrenmelisiniz. 

Bu aşamada;

  • DOM üzerindeki elemanlara ulaşabiliyor olmanız
  • Eylem dinleyiciler(Event Listeners) ekleyip kaldırabiliyor olmanız
  • CSS sınıfları ekleyip kaldırabiliyor olmanız
  • DOM üzerine yeni eleman ekleyebiliyor ya da kaldırabiliyor olmanız gerekir.

Bu konuları açıklayan bazı kaynaklara göz atmanız için buraya eklemekte fayda var;

Bu konulara göz attıktan sonra şunları uygulamaya çalışın;

  • Off-canvas Menü oluşturun
  • Bir Modal
  • Akordiyon
  • Tablar
  • Kayan Resimler(Carousel)

Ancak bunları kodlarken en iyi kodlamayı yapmaya özen göstermenize gerek yok. Çalışıyor olmaları yeterlidir. İyi kodlama yapmak(Best Practicing) bir sonraki safhanın alanına giriyor.

Bu uygulamaları geliştirirken işinize yarayacak olan bazı kaynaklara da burada yer verelim;

Siz bu kaynaklara göz atmadan önce şunu belirtmeliyim ki; her ne kadar Javascript’in temelleri ile başlıyor olsalar da, gelişmiş kısımlara hızlıca ilerledikleri için başlangıç aşamasındaki kişiler takip etmekte zorlanıp motivasyonlarını kaybedebilirler. Bu nedenle, bir sonraki gençlik safhasını tamamladıktan sonra okumanızı tavsiye ederim.

Peki, öyleyse kaynakları neden bir sonraki seviyede değil de burada paylaştım? Çünkü, bir çok geliştirici ya da eğitimci size tavsiyede bulunurken bu kaynakları sıfırdan Javascript’e başlayacak olan kişilere başlangıç seviyesi olarak tavsiye ederler. Ama aslında değildir. En azından ben öyle olmadığını düşünüyorum.

Evet, tavsiye ettiğime göre bu kaynaklar oldukça faydalıdır ve başlangıçtan başlayarak adım adım ilerleyecek şekilde yapılandırılmışlardır. Ancak eksik olan nokta şudur ki, sizin neyi ne kadar öğrendiğinizi bilmeden bir sonraki bölüme geçmenize herhangi bir engel yoktur. Dolayısıyla; bir bölümü tam olarak sindiremeden daha kompleks konulara geçmeniz ya da bildiğinizi düşündüğünüz için yeterince pratik yapmadan daha ileri seviye konulara ilerlemeye devam etmeniz, karşılaşacağınız yeni konuları tam olarak anlayamamanıza neden olmakta ve bu noktada sıkılma, erteleme, terk etme gibi durumlarla sonuçlandığı için belirli bir seviyenin ötesine geçememenize neden olmaktadırlar.

İleri seviyedeki bir geliştiricinin eğitim hazırlarken bilmeniz gereken en ince detaylara kadar inerek, size her şeyi etraflıca öğretmeye zaman ayırması ve adım adım anlatması mümkün değildir. Ayrıca aynı eğitimi alan kişiler arasında seviye farklılıkları da olabileceğinden bazıları detaylardan sıkılırken diğerleri detaysız ilerlendiğinde pürüzlerle karşılaşıp ilerleyemeyecek ve konuları anlayamayacaktır. Bu nedenle bir orta yol bularak ilerlemekte fayda vardır. Özet olarak; ister bir kitap olsun, ister online ya da yüzyüze eğitim, her şeyi karşı taraftan beklemek doğru bir yaklaşım değildir. Okuduğunuz konu üzerinde kitapta yer almasa da farklı örnekler yapmanız, bir öğretmen ile çalışırken bir kavramı detaylı anlatmadan geçmiş olsa da dersten sonra o kavramı iyice anlamak için farklı kaynaklardan araştırıp üzerinde pratik yapmanız en doğru yoldur.

Henüz ikinci seviyede olduğunuz için basit adımlardan geçtiğinizi düşünmeyin sakın. Yanılırsınız. Bu seviye kendi başınıza bir şeyler oluşturmaya başlayacağınız için oldukça zordur ve iyi öğrenilmesi, anlaşılması gerekir.

Bu seviyede zorlandıkça vazgeçme isteği doğabilir ve hatta çoğu kişi, bu aşamada bir geliştirici gibi düşünemediğini fark ederek istemli ya da istemsiz olarak bırakabilir. Ama, asla pes etmemenizi tavsiye ederim.

Diğer geliştiricilerin bir şeyleri nasıl oluşturduğuna daha fazla dikkat vermenizi tavsiye ederim. Nasıl kod yazdıklarının yanı sıra bir problemi çözmeye nasıl yaklaştıklarına, nasıl başladıklarına ve ilerlediklerine de dikkat edin. Bir geliştirici gibi düşünmeye başlamak için geliştiricilerin nasıl düşündüklerini gözlemleyin.

Bu aşamayı da ne kadar süre içinde tamamlayıp bir sonraki aşamaya geçeceğiniz yine size bağlı bir durumdur. Eğer günde 2 saat Javascript öğrenmek için ayırıyorsanız muhtemelen 2 aya kadar bu seviyeyi de iyice öğrenmiş olacaksınız. Tabii daha önce de belirttiğim şekilde birden çok kaynaktan araştırıp, çok sayıda pratik yaparak bu sonucu alabilirsiniz. Aksi takdirde yıllar geçse de bu aşamaya sıkışıp kalabilirsiniz.

Yukarıda verilen uygulamaları kopyala yapıştır olmadan sıfırdan kendiniz yazdığınızda ve konunun sonunda yer alan soruları rahatça cevaplayacak duruma geldiğinizde bir sonraki seviyeye geçebilirsiniz demektir.

DOM ile ilgili pek çok method mevcuttur. Peki hepsini nasıl öğrenip aklınızda tutacaksınız? Bunun en iyi yolu onları aktif olarak kullanmaktır. Yani bu methodlar ile ilgili bolca kod yazarsanız farkında olmadan öğrenmiş olduğunuzu göreceksiniz. Ayrıca, önemli olanları aşağıdaki sorular arasında mevcut. Diğerlerini ise ihtiyaç duyduğunuzda araştırıp kullanmanız yeterli olacaktır.

Bu seviye ile ilgili kendinizi sınamanızı sağlayacak olan sorular şunlardır;

  1. Callback nedir? Açıklayınız.
    1. Callback’i nasıl kullanırsınız?
    2. Callback kullanan bir fonksiyonu nasıl yazarsınız?
  2. DOM ve methodları ile ilgili sorular
    1. Element nedir?
    2. Node nedir??
    3. Bir element’i nasıl seçersiniz?
    4. Birden çok element’i nasıl seçersiniz?
    5. Birden çok element’in hepsi üzerinde işlem gerçekleştirmek için nasıl döngü kurarsınız? 
    6. Üst element’i nasıl seçersiniz?
    7. Aynı seviyedeki element’i nasıl seçersiniz?
    8. Alt seviyedeki element’i nasıl seçersiniz?
    9. Bir element’e nasıl sınıf eklersiniz?
    10. Bir element’in sınıflarını nasıl silersiniz?
    11. Bir element’in belirli bir sınıfa sahip olup olmadığını nasıl kontrol edersiniz?
    12. Bir element’e ne zaman sınıf eklemelisiniz?
    13. Bir element’e nasıl parametre eklersiniz?
    14. Bir element’ten nasıl parametre silersiniz?
    15. Bir element’in belirli bir parametreye sahip olup olmadığını nasıl kontrol edersiniz?
    16. Bir parametreyi ne zaman eklemeli ya da kaldırmalısınız?
    17. Bir HTML element’ini nasıl oluşturursunuz?
    18. Bir element’i bir başka element’ten önce nasıl eklersiniz?
    19. Bir element’i bir başka element’ten sonra nasıl eklersiniz?
    20. Element’in biçimini nasıl değiştirirsiniz?
    21. Biçimlendirmeyi JS ile mi değiştirmelisiniz? Neden ya da neden olmasın?
    22. Bir element’in içeriğini nasıl alırsınız?
  3. Eylemler
    1. Bir eylem dinleyiciyi nasıl eklersiniz?
    2. Eylem dinleyicileri neden eklersiniz?
    3. Bir eylem dinleyiciyi nasıl kaldırırsınız?
    4. Eylem dinleyicileri ne zaman kaldırmalısınız?
    5. Eylem dinleyicileri neden kaldırmalısınız?
    6. Eylemlerin hedefini nasıl alırsınız?
    7. Tıklama eylemini ne tetikler?
    8. Veri girişi eylemini ne tetikler?
    9. Değiştirme eylemini ne tetikler?
    10. Klavye tuşuna basma eylemini ne tetikler?