Nevistân Yazılım Günlüğü
Merhabalar, Nevistân’da yayınlanan ilk yazılım paylaşımına hoş geldiniz. Yazılım yolculuğum aslında birkaç yıl önce başlamış olsa da son bir yıldır aktif olarak çalışmıyordum. Ancak günlük sorumluluklarımın düzene oturmasıyla yeniden cesaret buldum ve bu kez daha istikrarlı ilerleyeceğime inanıyorum.
Bu yazıda hem JavaScript öğrenme sürecimden hem de geliştirdiğim ilk küçük projeden bahsedeceğim. Yakında yazılım gelişimimle ilgili daha kapsamlı bir içerik de paylaşmayı planlıyorum.
Frontend’e Başlangıç: HTML, CSS ve JavaScript
Frontend geliştirme ile ilgilendiğim için HTML ve CSS’e zaten hâkimdim. Ancak JavaScript, bu ikilinin üzerinde duran ve algoritma mantığını öğrenmeyi gerektiren temel yazılım dili. Daha önce biraz bilgim olsa da kalıcı olması için bol proje yaparak öğrenmeye karar verdim.
Bu nedenle YouTube’da hoşuma giden projeleri tamamen spontane bir şekilde seçip uygulamaya başladım.
Yaptığım Proje: Yazıyı Yazıp Silen Otomatik Metin Animasyonu
Projede HTML ile metin alanlarını oluşturdum; CSS ile yazıların konumu, boyutu ve renk özelliklerini düzenledim. Asıl öğrenmem gereken kısım ise yazının önce yazılıp sonra silindiği döngü mekanizmasını JavaScript ile kurmaktı.
Projeyi Haktan Öker’in anlattığı videodan takip ettim. Kendisi de yeni başladığını belirttiği için süreç oldukça anlaşılır ve detaylıydı.
Bu Projede Öğrendiğim JavaScript Kavramları
Bu çalışma benim için uygulamalı bir öğrenme oldu. Projede özellikle şu kavramları öğrendim:
- querySelectorAll()
- forEach()
- setInterval()
- Ternary operator ( ? : ) ile kısa koşul yazımı
Kod Yapısında Yaptığım Tanımlamalar
İlk olarak dataCont isminde bir değişken tanımladım ve .auto_text sınıfına sahip tüm HTML elemanlarını bu değişkene atadım.querySelectorAll() sayesinde bu kelimeleri liste olarak saklayabildim.
Daha sonra:
- Hangi harfin yazıldığı,
- Hangi kelimenin sırada olduğu,
- Yazma hızı,
- Kelime değiştirirken bekleme süresi
gibi tüm süreçleri değişkenlerle yönetilebilir hâle getirdim.
Ardından, seçilen kelimeleri JavaScript’e aktarmak için diziye push ettim.setInterval() içinde if–else yapısıyla iki ayrı döngü kurdum:
- Kelime yazılırken yapılacak işlemler
- Kelime silinirken yapılacak işlemler
Süreci daha iyi kavramak için bol bol yorum satırı ekledim. Kodun ekran görüntüsünü içerikte paylaştım.
Öğrendiğim Yeni Bir Yapı: Ternary Operator
If-else kullanmak yerine daha kısa bir yazım sağlayan ternary operatörü projede işimi oldukça kolaylaştırdı:
txtNum == texts.length - 1 ? txtNum = 0 : txtNum++;
Bu yapı sayesinde kodlar daha temiz ve okunabilir oldu.
Projenin Sonucu ve Kaynaklar
Projenin çıktısını sayfanın sağ kısmına ekledim.
Yazdığım tüm kodları GitHub hesabıma da yükledim. Buradan inceleyebilirsiniz:
👉 Github Linkim
Ayrıca projeyi takip ettiğim video burada:
https://www.youtube.com/watch?v=c98j_sBlcJc
Son Söz: Sürecin Kendisine Odaklanıyorum
Bu çalışmalarımın bir seri hâlinde devam etmesini istiyorum. Takipte kalırsanız çok sevinirim.
“Ben yolun sonuna değil, sürecine odaklandım. Sen yolumu güzelleştir Allah’ım. Bana hayırlı ilimler nasip et. Müslüman mühendis olmak için Bismillah…”
