Sıfırdan İleriye JavaScript (HTML, CSS) Eğitimi

Yapay zekamız Billy bu eğitim için konu anlatımları, çalışma programları oluşturabilir, pratik yapabileceğiniz sorular hazırlayabilir.

Herkese merhabalar, ben Özgür. 0'dan Java Script Uygulama geliştirme Eğitim Seti’ne hoş geldiniz! Bu videoda kim olduğumu, bu eğitimin içeriğini ve hangi sırayla ilerleyeceğimizi sizlerle paylaşacağım.

Ben Kimim: Manisa Celal Bayar Üniversitesi Yazılım Mühendisliği mezunuyum. Mezuniyet sonrasında çeşitli yazılım projelerinde yer aldım. Daha sonra kendi ekibimle uygulama ve oyun geliştirme üzerine çalışmaya başladım. Uzun süredir yazılımla iç içeyim. Bu eğitim boyunca birlikte öğrenme ve uygulama odaklı bir yaklaşım izleyeceğiz.

Bu Eğitim Kimler İçin Uygundur: Yazılıma yeni başlayanlar, özellikle web geliştirmeye meraklı olanlar, kendi web sitelerini ya da basit uygulamalarını yapmak isteyen herkes için uygundur. Teknik geçmişinizin olması gerekmez; tamamen sıfırdan başlayacağız.

Eğitimin Amacı: HTML ve CSS gibi temel web teknolojilerini öğrenerek başlayacağız. Bunlar web geliştirmenin yapı taşlarıdır ve JavaScript'e geçmeden önce iyi anlaşılması gerekir. Amacım; temel yapıları kavramanızı sağlamak, ardından JavaScript ile sayfalara nasıl hareket ve işlevsellik kazandırabileceğimizi göstermek.

Eğitimde Neler Var: Öncelikle HTML ile web sayfalarının iskelet yapısını kuracağız. Sonrasında CSS ile bu yapıyı nasıl görsel olarak düzenleyebileceğimizi öğreneceğiz. Bu iki temelin ardından JavaScript'e giriş yapacağız. Ancak tüm bu süreçlerde teoriden çok, örnekler ve küçük projelerle ilerlemeye çalışacağım. Hedefim sizi ezberden uzaklaştırıp, uygulayarak öğrenmeye yönlendirmek.

Sorbile ait yapay zeka Billy'i de bu eğitim setinde kullanacağız. Konu anlatım kısmında, soru veya hata çözümü kısmında yardım alacağız.

Umarım bu eğitim süreci sizin için verimli, öğretici ve motive edici olur. Beraber sıfırdan başlayıp adım adım ilerleyeceğiz. Derslerde görüşmek üzere.

Aktiviteler

Sorbil üzerinden JavaScript öğrenmenizi kolaylaştıracak ve eğitim deneyiminizi iyileştirecek, yapabileceğiniz aktiviteler:

1. Tahmin Et Oyunu

• Kullanıcı 1 ile 10 arasında sayı tahmin eder.
• prompt, if-else, Math.random kullanılır.
• Hedef: Koşul ifadelerini ve kullanıcı girdisini öğrenmek.

2. Zamanlayıcı / Sayaç

• Bir "Başla" butonuyla çalışan geri sayım sayacı.
• setInterval, clearInterval gibi zamanlayıcı fonksiyonlar kullanılır.

3. To-Do List (Yapılacaklar Listesi)

• Kullanıcı görev ekler, siler, tamamlandı işaretler.
• DOM, eventListener, array gibi kavramlara giriş yapılır.

4. Hesap Makinesi

• Temel 4 işlem yapan bir web aracı.
• onclick, input, eval() ya da kendi işlemlerini tanımlama.

5. Fiyat Hesaplama Uygulaması

• Ürün adedi girince toplam tutarı hesaplar.
• DOM ve input değerleriyle işlem yapılır.

6. API ile Hava Durumu Uygulaması

• OpenWeather API'den veri çekilir.
• fetch, JSON, async/await yapıları öğrenilir.

7. Basit Quiz Uygulaması

• Sorular ve şıklar gösterilir, doğru cevap puan kazandırır.
• Array, object, conditionals, DOM manipülasyonu öğretilir.

8. Keyboard Event Oyunları

• Tuşlara basınca ekrandaki karakter hareket eder.
• keydown, keyup, event nesnesi kullanımı pekişir.

9. Stopwatch (Kronometre)

• Başlat, durdur, sıfırla fonksiyonları.
• setTimeout, Date.now(), clearInterval.

10. Local Storage ile Not Defteri

• Girilen notlar tarayıcıya kaydedilir, sayfa yenilense bile kalır.
• localStorage.getItem, setItem, JSON.stringify kullanılır.

Egzersizler (Zorunlu değildir)

Eğitimden alacağınız verimi arttırmak için, size opsiyonel egzersizler hazırladık. Uluslararası sertifikanızı almanız için bu egzersizleri tamamlamanız şart değildir, bu egzersizler sizin eğitim deneyiminizi iyileştirmek için oluşturulmuştur, belirttiğimiz gibi egzersizleri tamamlamanız zorunlu değildir. Bu eğitim için farklı egzersizler isterseniz, [email protected] adresine e-mail atmanız yeterlidir. Ekibimiz size farklı egzersizler iletecektir.

1. JavaScript'te değişken tanımlamak için hangi anahtar kelime kullanılmaz?

A) var
B) let
C) const
D) define

Doğru Cevap: D

2. Aşağıdakilerden hangisi == ile === operatörleri arasındaki farkı doğru açıklar?

A) İkisi de aynı şekilde çalışır.
B) == değer karşılaştırması yapar, === hem değer hem tür karşılaştırması yapar.
C) === sadece sayılarla çalışır.
D) == sadece metinlerle çalışır.

Doğru Cevap: B

3. Aşağıdaki ifadelerden hangisi undefined döndürür?

A) console.log(2 + 2)
B) let x; console.log(x)
C) let x = 0; console.log(x)
D) console.log("hello")

Doğru Cevap: B

4. JavaScript'te bir fonksiyon nasıl tanımlanır?

A) function = myFunc()
B) let function myFunc()
C) function myFunc() {}
D) func myFunc = {}

Doğru Cevap: C

5. Aşağıdakilerden hangisi bir for döngüsünün doğru tanımıdır?

A) for (let i = 0; i <= 10; i++)
B) for (i <= 10; i++; let i = 0)
C) for (let i = 0, i < 10; i++)
D) for let i = 0 to 10

Doğru Cevap: A

6. typeof null sonucu nedir?

A) "null"
B) "undefined"
C) "object"
D) "boolean"

Doğru Cevap: C

7. Hangi metot bir dizideki son elemanı kaldırır?

A) .shift()
B) .pop()
C) .unshift()
D) .push()

Doğru Cevap: B

8. Aşağıdakilerden hangisi NaN döndürür?

A) Number("123")
B) parseInt("abc")
C) parseFloat("12.3")
D) Number("10")

Doğru Cevap: B

9. let x = "5" + 2; ifadesinden sonra x’in değeri nedir?

A) 7
B) 52
C) "52"
D) "7"

Doğru Cevap: C

10. Hangi JavaScript veri tipi yoktur?

A) boolean
B) symbol
C) float
D) undefined

Doğru Cevap: C