Dersler · Kodlama · başlangıç · Programming with Mosh

JavaScript Kursu Yeni Başlayanlar İçin – Web Geliştirmeye İlk Adımın

Programming with Mosh kanalının “JavaScript Course for Beginners – Your First Step to Web Development” videosu 9 ders halinde: konunun anlatımı, ekrandaki kod, alıştırma terminalinde denenecek adımlar, çözümlü alıştırmalar ve cevabı videodaki ana götüren bir quiz.

9ders
16kod parçası
1formül
21alıştırma
48dk video
Derslere git →1. ders ücretsiz · Beyond Pass hepsini açar

Diğer dillerde: English

Video İngilizce. YouTube oynatıcısında altyazıyı açıp Otomatik çevir → Türkçe seçebilirsin.

JavaScript Course for Beginners – Your First Step to Web Development, video by Programming with Mosh▶ 48:16 · Programming with Mosh
123456789
0:00videonun tamamına yayılmış 9 ders48:16

Neler yapabileceksin

  • Modern JavaScript'te değişkenleri, sabitleri ve veri türlerini yazarak değerleri saklayıp işleyebilirsin
  • Koşullar, döngüler ve fonksiyonlarla program akışını kontrol edebilir ve kodu yeniden kullanabilirsin
  • Birbiriyle ilişkili verileri düzenlemek için dizi (array) ve nesneleri (object) kullanabilirsin
  • JavaScript kodunu tarayıcı konsolunda ve basit bir HTML sayfasında çalıştırabilir ve hata ayıklayabilirsin

Önce bilmen iyi olur

  • Bilgisayarı ve bir metin editörünü rahatça kullanabiliyor olmak
  • Bir web sayfasının ne olduğuna dair genel bir fikir sahibi olmak

Müfredat

9 ders ve bir final projesi

  1. 1

    Kurulum ve ilk JavaScript kodunu çalıştırma Ücretsiz

    0:00–4:004 dk video

    JavaScript'in nerede çalıştığını (tarayıcıların içinde, bir JavaScript motoru aracılığıyla) ve JavaScript sürüm geçmişinin öğreneceklerini nasıl şekillendirdiğini öğreneceksin. Ardından tarayıcının geliştirici konsolunu açıp ilk JavaScript satırını çalıştıracaksın.

    3 adım3 alıştırma3 soru
  2. 2

    Sabitleri ve Değişkenleri Tanımlama Beyond Pass

    4:00–9:005 dk video

    Değişkenin ne olduğunu ve let ile nasıl tanımlanacağını, const ile tanımlanan sabitin ise nasıl farklı olduğunu öğreneceksin. Ayrıca bir değerin JavaScript kodunda nasıl saklanıp yeniden kullanıldığını göreceksin.

    1 kod4 adım3 alıştırma3 soru
  3. 3

    İlk JavaScript kodun: console.log ve script etiketi Beyond Pass

    9:00–14:005 dk video

    Bu bölümde JavaScript'i bir HTML sayfasının içinde çalıştırmayı, console.log ile tarayıcı konsoluna mesaj yazdırmayı ve kodu kendi index.js dosyasına taşıyıp bir script etiketiyle bağlamayı öğreneceksin. Bölüm, ilkel türleri ve operatörleri öğrenmeden önce ihtiyacın olan temel kurulumu tanıtır.

    3 kod5 adım2 alıştırma3 soru
  4. 4

    Metinler ve şablon değişmezleri (template literal) Beyond Pass

    14:00–18:004 dk video

    JavaScript'te metnin ne olduğunu ve tırnakla nasıl yazıldığını öğreneceksin. Ayrıca, ters tırnak (backtick) ve ${...} ile metnin içine değer koymanı sağlayan şablon değişmezlerini de öğreneceksin.

    2 kod2 adım3 alıştırma3 soru
  5. 5

    Değişkenleri adlandırma ve const/let farkı Beyond Pass

    18:00–23:205 dk video

    Bu ders, JavaScript'te değişkenleri adlandırmanın kurallarını gösterir; neyin izinli, neyin yasak olduğunu ve neden isimlerin büyük/küçük harfe duyarlı olduğunu kapsar. Ayrıca let (yeniden atanabilir) ile const (yeniden atanamaz) arasındaki farkı, deneyince göreceğin bir hatayla birlikte gösterir.

    2 kod3 adım1 alıştırma3 soru
  6. 6

    Döngülerle kodu tekrarlamak Beyond Pass

    23:20–29:006 dk video

    Bu ders, JavaScript'te ilkel (değer) türleri ile referans türleri arasındaki farkı ve değişkenlerin bu türlerdeki değerleri nasıl tuttuğunu anlatır. Ayrıca JavaScript'in dinamik tiplemesinin, bir değişkenin tuttuğu değerin türünü nasıl değiştirmesine izin verdiğini gösterir.

    2 kod3 adım2 alıştırma3 soru
  7. 7

    Writing and calling functions Beyond Pass

    29:00–35:006 dk video

    This lesson covers objects as a way to group related values, and how to read and change their properties with dot and bracket notation. The video's chapter is titled "Writing and calling functions", but the transcript and frames in this segment only show objects, so this lesson covers what is actually shown.

    2 kod3 adım2 alıştırma3 soru
  8. 8

    Storing data in arrays and objects Beyond Pass

    35:00–40:205 dk video

    This lesson shows how a JavaScript array stores a list of values in one variable, how to read and change items by their index, and how to check the type of a value with typeof. It also shows why an array is an object, and what happens when you put a value of the wrong kind into it.

    3 kod4 adım3 alıştırma3 soru
  9. 9

    [51] Parametreli Fonksiyonlar, Dönüş Değerleri ve Küçük Bir Proje Beyond Pass

    40:20–48:168 dk video

    [52] Bu derste, girdi alan (parametre) ve sonuç veren (dönüş değeri) fonksiyonların nasıl yazılacağını ve bunlarla küçük bir projenin nasıl yapılacağını göreceksin. Bir görevi yerine getiren fonksiyon ile bir değer hesaplayan fonksiyon arasındaki farkı göreceksin.

    1 kod1 formül4 adım2 alıştırma3 soru

Final projesi

[41] Console Shopping Cart: a small JavaScript project

[42] Build a small shopping cart program that runs from an HTML page and prints a receipt to the browser console. It uses variables, constants, template literals, arrays, objects, a loop and functions with return values. You write one bigger program instead of many separate snippets.

8 görev Beyond Pass ile açılır.

Ücretsiz önizleme · 1. dersin tamamı

Kurulum ve ilk JavaScript kodunu çalıştırma

JavaScript'in nerede çalıştığını (tarayıcıların içinde, bir JavaScript motoru aracılığıyla) ve JavaScript sürüm geçmişinin öğreneceklerini nasıl şekillendirdiğini öğreneceksin. Ardından tarayıcının geliştirici konsolunu açıp ilk JavaScript satırını çalıştıracaksın.

0:00 videoda 4:00 anına kadar

Alıştırma terminali

Dersin komutlarını yaz, boz ve nedenini gör.

Karalama defteri

Videonun yanında çiz ve yaz.

Fikir

JavaScript, web'in programlama dilidir. Chrome ya da Firefox gibi her modern tarayıcı JavaScript kodu çalıştırabilir. Her tarayıcının içinde, kodunu okuyup talimatlarını yerine getiren JavaScript motoru adlı bir yazılım parçası vardır. Firefox, SpiderMonkey adlı bir motor kullanır; Chrome ise V8 adlı bir motor kullanır.

JavaScript ilk olarak 1997'de sürüm 1 olarak yayımlandı ve o zamandan beri gelişmeye devam etti. 2015'te ES2015 ya da ES6 adı verilen büyük bir güncelleme geldi, ardından 2016 ve sonrasında her yıl yeni sürümler çıktı. Bu kursta öğreneceğin dil modern sürümdür; kullandığın özellikler güncel tarayıcılarda çalışacaktır.

Başlamak için hiçbir şey kurmana gerek yok. Tarayıcını aç, geliştirici araçlarını açmak için F12'ye bas (ya da sayfaya sağ tıklayıp Denetle'yi, ardından Konsol sekmesini seç). Konsol, JavaScript yazıp Enter'a bastığın bir kutudur ve tarayıcı kodu hemen çalıştırır. Kodunun ürettiği her şey, yazdığın satırın hemen altında görünür.

İlk programın tek satır olabilir. Satırı konsola yaz ve Enter'a bas. Tarayıcı sonucu satırın altında gösteriyorsa az önce JavaScript çalıştırmış oldun. Bir fikri test etmenin en hızlı yolu budur ve kurs boyunca kullanacağın ilk araç da budur.

Ana noktalar

  • JavaScript, tarayıcının içinde, tarayıcının JavaScript motorunu kullanarak çalışır (Firefox'ta SpiderMonkey, Chrome'da V8). 2:00
  • JavaScript 1997'de sürüm 1 olarak başladı; ES2015/ES6 güncellemesi ve sonrasındaki yıllık sürümler, öğreneceğin modern özellikleri ekledi. 3:00
  • Tarayıcının geliştirici konsolu, hiçbir kurulum yapmadan JavaScript çalıştırmanı sağlar: konsolu aç, bir satır yaz ve Enter'a bas. 3:50

Alıştırma terminalinde birlikte yap

  1. Yeni bir tarayıcı sekmesi aç (Chrome ya da Firefox). Geliştirici araçlarını F12 ile ya da sağ tıklayıp Denetle'yi seçerek aç. 3:50Göreceğin: Sayfanın altında Elements, Console ve Sources gibi sekmeleri olan bir panel açılır.
  2. Konsol (Console) sekmesine tıkla. Yazı yazabileceğin bir > işareti görmelisin. 3:50Göreceğin: Konsol sekmesi seçilidir ve > işaretinden sonra yanıp sönen bir imleç bekler.
  3. > işaretinin yanına tıkla ve basit bir satır yaz, örneğin: 2 + 3 , sonra Enter'a bas.
    $ 2 + 3
    5
    Göreceğin: Konsol, satırının altında 5 yazdırır; bu, tarayıcının JavaScript kodunu çalıştırdığını gösterir.

Alıştırma

Hesapla Çözümü kontrol edildi

Konsolda 7 * 6 yazıp Enter'a bastığında konsol hangi sayıyı yazdırır? Sadece sayıyı yaz.

İpucu

7'yi 6 ile çarp.

Çözüm
  1. Önce çarpma yapılır: 7 çarpı 6, 42 eder.
  2. Konsol, ifadenin sonucunu yazdırır.

42

Açıkla Çözümü kontrol edildi

Kendi cümlelerinle açıkla: JavaScript motoru ne yapar ve neden farklı tarayıcıların farklı motorları vardır?

Çözüm
  1. Motor, tarayıcının JavaScript kodunu okuyup çalıştıran kısmıdır.
  2. Her tarayıcı şirketi kendi motorunu geliştirir (Firefox SpiderMonkey, Chrome V8 kullanır). Bu yüzden kod, aynı dil kurallarını izleyen farklı yazılımlar tarafından çalıştırılır.

JavaScript motoru, tarayıcının JavaScript kodunu okuyup çalıştıran kısmıdır. Firefox SpiderMonkey, Chrome ise V8 kullanır; yani her tarayıcının aynı dili çalıştıran kendi motoru vardır.

Yap Çözümü kontrol edildi

Tarayıcında Konsolu aç, 10 - 4 yaz ve Enter'a bas. Ardından kendi seçtiğin bir satır yazıp konsolun ona cevap verdiğini kontrol et.

Çözüm
  1. F12'ye bas ve Konsol (Console) sekmesini aç.
  2. 10 - 4 yazıp Enter'a bas; konsol 6 yazdırır.
  3. Başka basit bir toplama yaz ve yazdırılan sonucu kontrol et.

Konsol, 10 - 4 için 6 yazdırır ve kendi yazdığın satır da bir sonuç verir.

Karalama defterinde

Tarayıcı için bir kutu çiz, içine JavaScript Engine yazılı küçük bir daire koy ve koddan motora bir ok çiz. Yanına Chrome: V8 ve Firefox: SpiderMonkey yaz.

Test

  1. JavaScript kodunu gerçekten okuyup çalıştıran tarayıcı parçası hangisidir?

    1. Adres çubuğu
    2. JavaScript motoru
    3. Yer imleri çubuğu
    4. Sekme başlığı
    Cevabı göster

    B. JavaScript motoru · Her tarayıcı, kodu çalıştıran bir JavaScript motoru içerir; örneğin Firefox'ta SpiderMonkey, Chrome'da V8.

    2:00 o anı izle
  2. JavaScript ilk kez sürüm 1 olarak hangi yılda yayımlandı?

    1. 1995
    2. 1997
    3. 2015
    4. 2016
    Cevabı göster

    B. 1997 · JavaScript v1 zaman çizelgesinde 1997 olarak gösterilir. 2015'teki ES2015/ES6 güncellemesi daha sonra geldi.

    3:00 o anı izle
  3. Hiçbir kurulum yapmadan bir satır JavaScript çalıştırmanın en hızlı yolu nedir?

    1. Bir derleyici (compiler) kur
    2. Tarayıcının geliştirici konsolunu aç ve satırı yaz
    3. Bilgisayarı yeniden başlat
    4. Yeni bir klasör oluştur
    Cevabı göster

    B. Tarayıcının geliştirici konsolunu aç ve satırı yaz · Tarayıcının Konsol sekmesi, Enter'a bastığın anda JavaScript'i çalıştırır.

    3:50 o anı izle

1. dersi videoyla aç →

2–9. dersler ve final projesi

Beyond Pass ile açılırlar: her kursun her dersi, eksiksiz. Tek ödeme: 90 gün için $14.99 ya da bir yıl için $29. Abonelik yok.

Beyond, Programming with Mosh kanalının “JavaScript Course for Beginners – Your First Step to Web Development” videosundan yaptı. Video YouTube’un kendi oynatıcısında oynar. YouTube’da izle · Bütün dersler