Yükleniyor...

JavaScript ile Başlarken

JavaScript ile Başlarken, web sitenize hayat vermek için attığınız ilk adımdır. JavaScript, kullanıcı ile etkileşim kurabilen, dinamik ve canlı web sayfaları oluşturmanızı sağlayan programlama dilidir. Kişisel web siteniz, blogunuz, e-ticaret siteniz veya haber portalınızda kullanıcı deneyimini artırmak için JavaScript kullanabilirsiniz. Örneğin, bir alışveriş sepetine ürün eklemek, haber başlıklarını dinamik olarak güncellemek veya blog sayfanızda etkileşimli butonlar oluşturmak mümkün olur.
JavaScript öğrenmek, bir evi inşa etmeye benzer; HTML ile temelinizi attınız, CSS ile odalarınızı dekore ettiniz, şimdi ise JavaScript ile ışıklandırma ve elektrik sistemlerini kuruyorsunuz. Bu eğitimde temel JavaScript kavramlarını, basit ve pratik örneklerle öğrenecek, nasıl çalıştığını kavrayacak ve kendi projelerinize uygulayabileceksiniz. Böylece web projelerinizi daha etkileyici ve fonksiyonel hale getirebilirsiniz.

Temel Örnek

javascript
JAVASCRIPT Code 
// Show a welcome alert to the user
alert("Web sitenize hoş geldiniz!");

Bu basit örnekte, alert() fonksiyonu kullanılarak kullanıcıya bir karşılama mesajı gösterilir.

  • alert JavaScript'in temel fonksiyonlarından biridir ve küçük bir pencere açarak mesaj gösterir.
  • Parantez içindeki tırnaklar arasına yazılan metin, kullanıcıya iletilir.
  • Her JavaScript komutu noktalı virgül (;) ile biter.
    Bu örnek, JavaScript'in en temel kullanımını gösterir ve genellikle başlangıç seviyesindeki uygulamalarda kullanılır. Web sitenize küçük uyarılar veya bilgiler vermek için idealdir.

Pratik Örnek

javascript
JAVASCRIPT Code 
// Show a message when button is clicked
function mesajGoster() {
alert("Butona tıkladınız!");
}

document.write('<button onclick="mesajGoster()">Bana Tıkla</button>');

Bu örnekte, kullanıcı butona tıkladığında mesajGoster fonksiyonu çalışır ve bir uyarı penceresi açılır.

  • function ile fonksiyon tanımlanır, fonksiyonun adı mesajGoster.
  • Fonksiyon içinde alert() ile mesaj gösterilir.
  • document.write() ile HTML sayfasına bir buton eklenir.
  • Butonun onclick özelliği, tıklama olayını dinler ve fonksiyonu tetikler.
    Bu yöntem, bloglar veya e-ticaret sitelerinde kullanıcı etkileşimi için yaygın kullanılır. Örneğin, satın alma onayı veya bilgi kutuları oluşturabilirsiniz.

En İyi Uygulamalar:

  1. let veya const kullanarak değişkenlerinizi tanımlayın; bu modern ve hataları azaltır.
  2. JavaScript kodlarınızı ayrı dosyalarda tutarak düzenli ve sürdürülebilir kod yazın.
  3. Olayları addEventListener ile yönetin, böylece daha esnek ve yönetilebilir olursunuz.

  4. Kodlarınıza açıklayıcı yorumlar ekleyerek hem kendiniz hem ekip için okunabilirliği artırın.
    Yaygın Hatalar:

  5. Noktalı virgül eksikliği, bazen kodun beklenmedik şekilde çalışmasına yol açar.

  6. Sayfa tamamen yüklenmeden DOM (Document Object Model) ile işlem yapmak hatalara sebep olur.
  7. Hataları yakalamamak ve yönetmemek, sorunların bulunmasını zorlaştırır.
  8. Değişkenleri yanlış veya eksik tanımlamak global değişken sorunlarına neden olabilir.
    Hata Ayıklama İpuçları:
  • console.log() ile değişken ve işlemlerin değerlerini kontrol edin.
  • Tarayıcı geliştirici araçlarını kullanarak hataları görün ve kodu test edin.
  • Kodu küçük parçalara bölerek test edin.

📊 Hızlı Referans

Property/Method Açıklama Örnek
alert() Kullanıcıya uyarı mesajı gösterir alert("Merhaba")
function Fonksiyon tanımlamak için kullanılır function selamla() {}
onclick HTML öğesine tıklama olayı ekler <button onclick="selamla()">Tıkla</button>
document.write() HTML sayfasına içerik ekler document.write("<p>Merhaba</p>")
console.log() Konsola bilgi yazdırır console.log("Kontrol")
addEventListener Olay dinleyicisi ekler element.addEventListener("click", selamla)

Bu eğitimle JavaScript’in temellerini öğrenerek web sitelerinizi interaktif hale getirme yolunda ilk adımı attınız. JavaScript kodlarını kullanarak HTML DOM öğelerini değiştirebilir, kullanıcı etkileşimlerini yönetebilir ve web sitenizi dinamik yapabilirsiniz.
Bir sonraki adım olarak, DOM manipülasyonu, koşullar, döngüler ve event handling gibi konuları öğrenmeniz faydalı olacaktır. Böylece haber sitenizde dinamik içerik göstermek, e-ticaret sitenizde ürün filtreleri oluşturmak gibi gelişmiş fonksiyonlar geliştirebilirsiniz. Öğrendiklerinizi küçük projelerle pekiştirmek en etkili yoldur.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 2 / 2
Javascript Ders