Bu noktadan sonra kursun pedagojik yapısı değişiyor. Artık kursiyer:

• HTML gördü.
• CSS gördü.
• Arayüz oluşturdu.
• AI ile konuşmaya alıştı.

Şimdi ilk kez davranış (behavior) kavramını öğrenecek.

Ancak yine aynı kural geçerli:

Bir derste yalnızca tek yeni kavram.

Bugünkü tek kavram:

"Butona tıklanınca bir olay (event) oluşur."

Henüz:

• Local Storage yok
• IndexedDB yok
• PWA yok
• API yok

Sadece olay (event).

DERS 9 — İLK JAVASCRIPT DAVRANIŞI: BUTONA HAYAT VERME

Ders amacı

Bugün ilk kez JavaScript kullanacağız.

Ama amaç:

"Kod ezberlemek"

değil.

Amaç:

HTML ile oluşturduğumuz nesneleri JavaScript'in nasıl bulduğunu anlamak.

AI'ye SORU 9

Kursiyer aşağıdaki metni aynen AI'ye soracak.

Sen benim JavaScript öğretmenimsin.

Şu anda "Bugünün Listesi" uygulamasında:

- index.html hazır.
- style.css hazır.
- script.js dosyası boş.

Bugün ilk kez JavaScript öğreneceğim.

Henüz Local Storage kullanma.
Henüz IndexedDB kullanma.
Henüz gelişmiş JavaScript anlatma.

Sadece şunları öğret:

1. JavaScript dosyasını index.html dosyasına nasıl bağlarız?
2. JavaScript HTML'deki bir butonu nasıl bulur?
3. JavaScript bir butona tıklanıldığını nasıl anlar?
4. Input kutusundaki yazıyı nasıl okur?
5. Yazılan görevi listeye nasıl ekler?

Kodları adım adım oluştur.

Her satırın ne yaptığını tek tek açıkla.

Her adımdan sonra küçük bir test yaptır.

Başlangıç seviyesinde anlat.

Kursiyerin görevi

AI cevabını aldıktan sonra:

script.js

dosyasını ilk kez dolduracak.

Sonra:

• görev yazacak
• Ekle butonuna basacak

İlk kez gerçekten:

Görev eklendi.

anını yaşayacak.

Bu derste öğreneceği yeni kavramlar

Sadece bunlar:

JavaScript

↓

document

↓

id ile eleman bulma

↓

click olayı

↓

input.value

↓

listeye yeni eleman ekleme

Başka hiçbir konu yok.

Kontrol Soruları

AI cevabını uyguladıktan sonra kursiyer kendi cümleleriyle cevaplayacak.

1.

JavaScript neden HTML dosyasındaki nesneleri id ile buluyor?

2.

Butona tıklamak ile JavaScript'in bunu fark etmesi arasında nasıl bir süreç var?

3.

Input kutusuna yazdığım metin JavaScript'e nasıl ulaşıyor?

4.

Yeni görev eklenince HTML dosyası mı değişiyor, yoksa tarayıcıdaki sayfa mı değişiyor?

Bu dersin en önemli kazanımı

Kursiyer ilk kez şu düşünceye sahip olacak:

HTML
↓

Nesneleri oluşturur

↓

JavaScript

↓

O nesneler üzerinde işlem yapar

Artık kursiyer için yazılım, sadece "kod yazmak" değil; yapı (HTML), görünüm (CSS) ve davranışın (JavaScript) birlikte çalıştığı bir sistem haline gelmiş olacak.