| Kodu | Dersin Adı | Yarıyıl | Süresi(T+U) | Kredisi | AKTS Kredisi |
|---|---|---|---|---|---|
| OYG106 | JAVASCRIPT ÇERÇEVELERİ | 2 | 4 | 2 | 5 |
DERS BİLGİLERİ |
|
|---|---|
| Dersin Öğretim Dili : | Türkçe |
| Dersin Düzeyi | ÖNLİSANS, TYY: + 5.Düzey, EQF-LLL: 5.Düzey, QF-EHEA: Kısa Düzey |
| Dersin Türü | Zorunlu |
| Dersin Veriliş Şekli | - |
| Dersin Koordinatörü | Öğr.Gör. ÇİSEM YAŞAR |
| Dersi Veren Öğretim Üyesi/Öğretim Görevlisi | Öğr.Gör. ÇİSEM YAŞAR |
| Ders Ön Koşulu | Yok |
AMAÇ VE İÇERİK |
|
|---|---|
| Amaç: | Bu dersin amacı, öğrencilere modern web geliştirmede yaygın olarak kullanılan JavaScript çerçevelerinin temel çalışma prensiplerini öğretmek ve React kütüphanesi üzerinden bileşen tabanlı kullanıcı arayüzleri geliştirme becerisi kazandırmaktır. Ders kapsamında öğrencilerin, React bileşenleri, JSX sözdizimi, veri aktarımı (props), olay yönetimi, koşullu render, listeler, formlar ve Hooks gibi temel kavramları öğrenmeleri ve bu kavramları kullanarak etkileşimli web uygulamaları geliştirebilmeleri hedeflenmektedir. |
| İçerik: | Bu derste öncelikle çerçeve (framework) kavramı ve JavaScript çerçevelerinin genel yapısı ele alınacaktır. Ardından React kütüphanesine giriş yapılarak JSX sözdizimi ve bileşen (component) yapısı incelenecektir. Fonksiyonel bileşenler ve props kavramı üzerinden bileşenler arası veri aktarımı anlatılacaktır. Dersin devamında olaylar (events), koşullu render, listeler ve formlar kullanılarak dinamik kullanıcı arayüzleri geliştirme konuları işlenecektir. Hooks kavramı kapsamında useState ve useEffect başta olmak üzere temel Hooks’lar ele alınacak, ayrıca sınıf bileşenlerine (class components) genel bir bakış sunulacaktır. Ders süresince teorik bilgiler uygulama örnekleriyle desteklenecek ve öğrencilerin React tabanlı web uygulamaları geliştirmesi sağlanacaktır. |
DERSİN ÖĞRENME ÇIKTILARI (Öğrenciler, bu dersi başarı ile tamamladıklarında aşağıda belirtilen bilgi, beceri ve/veya yetkinlikleri gösterirler.) |
|---|
| JavaScript çerçevelerinin temel kavramlarını ve React’ın çalışma prensiplerini açıklar. |
| JSX ve fonksiyonel bileşenler kullanarak bileşen tabanlı kullanıcı arayüzleri geliştirir. |
| Props, olaylar, koşullu render, listeler ve formlar aracılığıyla etkileşimli web uygulamaları oluşturur. |
| React Hooks (useState, useEffect) kullanarak bileşen durumunu ve uygulama davranışını yönetir. |
HAFTALIK DERS KONULARI VE ÖNGÖRÜLEN HAZIRLIK ÇALIŞMALARI |
|||
|---|---|---|---|
| Hafta | Ön Hazırlık | Konular | Yöntem |
| 1 | Konu ile ilgili internetten araştırma yapma | Çerçeve nedir, nasıl çalışır | Anlatım, Gösterip Yaptırma |
| 2 | Konu ile ilgili internetten araştırma yapma | JavaScript çerçeveleri ve temel kavramlar | Anlatım, Gösterip Yaptırma |
| 3 | Konu ile ilgili internetten araştırma yapma | React’a giriş | Anlatım, Gösterip Yaptırma |
| 4 | Konu ile ilgili internetten araştırma yapma | JSX | Anlatım, Gösterip Yaptırma |
| 5 | Konu ile ilgili internetten araştırma yapma | Bileşenler (Components) | Anlatım, Gösterip Yaptırma |
| 6 | Konu ile ilgili internetten araştırma yapma | Sınıf Bileşenleri (Class Components) | Anlatım, Gösterip Yaptırma |
| 7 | Konu ile ilgili internetten araştırma yapma | Props | Anlatım, Gösterip Yaptırma |
| 8 | Konu ile ilgili internetten araştırma yapma | Fonksiyonel Bileşenler (Functional Components) | Anlatım, Gösterip Yaptırma |
| 9 | Konu ile ilgili internetten araştırma yapma | Olaylar (Events) ve Koşullu Render (Conditional Rendering) | Anlatım, Gösterip Yaptırma |
| 10 | - | ARA SINAV | - |
| 11 | Konu ile ilgili internetten araştırma yapma | Listeler (Lists) | Anlatım, Gösterip Yaptırma |
| 12 | Konu ile ilgili internetten araştırma yapma | Formlar (Forms) | Anlatım, Gösterip Yaptırma |
| 13 | Konu ile ilgili internetten araştırma yapma | Hooks | Anlatım, Gösterip Yaptırma |
| 14 | Konu ile ilgili internetten araştırma yapma | Proje Sunumu | Anlatım, Gösterip Yaptırma |
| 15 | - | Proje Sunumu | Anlatım, Gösterip Yaptırma |
| 16 | - | FİNAL | - |
| 17 | - | FİNAL | - |
KAYNAKLAR |
|---|
| https://react.dev |
| Banks, A. & Porcello, E. Learning React: Modern Patterns for Developing React Apps. O’Reilly Media. |
ÖLÇME VE DEĞERLENDİRME |
||||
|---|---|---|---|---|
| Yarıyıl İçi Yapılan Çalışmaların Ölçme ve Değerlendirmesi | Etkinlik Sayısı | Katkı Yüzdesi | Açıklama | Sınav Yapılma Şekli |
| (0) Etkisiz | (1) En Düşük | (2) Düşük | (3) Orta | (4) İyi | (5) Çok İyi |
|---|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 | 5 |
DERSİN İŞ YÜKÜ VE AKTS KREDİSİ |
|||
|---|---|---|---|
| Öğrenme-Öğretme Etkinlikleri İş Yükü | |||
| Öğrenme-Öğretme Etkinlikleri | Etkinlik(hafta sayısı) | Süresi(saat sayısı) | Toplam İş Yükü |
| Ders | 0 | 0 | 0 |
| Derse Ön Hazırlık ve Ders Sonrası Pekiştirme | 0 | 0 | 0 |
| Arazi Çalışması | 0 | 0 | 0 |
| Grup Çalışması / Ödevi | 0 | 0 | 0 |
| Laboratuvar | 0 | 0 | 0 |
| Okuma | 0 | 0 | 0 |
| Ödev | 0 | 0 | 0 |
| Proje Hazırlama | 0 | 0 | 0 |
| Seminer | 0 | 0 | 0 |
| Staj | 0 | 0 | 0 |
| Teknik Gezi | 0 | 0 | 0 |
| Web Tab. Öğrenme | 0 | 0 | 0 |
| Uygulama | 0 | 0 | 0 |
| Yerinde Uygulama | 0 | 0 | 0 |
| Mesleki Faaliyet | 0 | 0 | 0 |
| Sosyal Faaliyet | 0 | 0 | 0 |
| Tez Hazırlama | 0 | 0 | 0 |
| Alan Çalışması | 0 | 0 | 0 |
| Rapor Yazma | 0 | 0 | 0 |
| Final Sınavı | 0 | 0 | 0 |
| Final Sınavı Hazırlığı | 0 | 0 | 0 |
| Ara Sınav | 0 | 0 | 0 |
| Ara Sınav Hazırlığı | 0 | 0 | 0 |
| Kısa Sınav | 0 | 0 | 0 |
| Kısa Sınav Hazırlığı | 0 | 0 | 0 |
| TOPLAM | 0 | 0 | 0 |
| Genel Toplam | 0 | ||
| Toplam İş Yükü / 25.5 | 0 | ||
| Dersin AKTS(ECTS) Kredisi | 0,0 |