Ana Sayfa · Akademi · Robotik ve Kodlama · Web Temelleri · JavaScript’e Giriş

JavaScript’e Giriş

JavaScript'i sayfaya ekleyip değişkenler ve temel işlemlerle ilk kodunu yazmayı öğren.

DERS PUSULASI

Bu sayfayı ne için kullanacaksın?

Ana fikir

JavaScript, web sayfalarına davranış ve hesaplama yeteneği katan bir programlama dilidir; HTML sayfanın iskeleti, CSS görünümü ise JavaScript de sayfanın aklıdır.

Üretilecek kanıt

Bir spor antrenmanının toplam süresini hesaplayan küçük bir program yazacağız. Ölçek olarak dört tur koşu var; her tur kaç dakika sürüyorsa toplamı buluyoruz. uygulama.js dosyasına şunu yaz: const turSayisi = 4; let turSuresi = 3; // dakika let toplam = turSayisi * turSuresi; console.log("Tur sayısı: " + turSayisi); console.log("Toplam süre: " + toplam + "…

Kontrol tuzağı

Noktalı virgülü ve parantezi unutmak JavaScript satır sonlarında ; kullanmayı sever ve console.log(...) gibi çağrılarda parantez şarttır. console.log "merhaba" çalışmaz; doğru yazım console.log("merhaba"); . const değerini değiştirmeye çalışmak const ile tanımlanan bir kutunun değeri değiştirilemez. Değişecekse en…

Sonraki bağlantı

DOM ve Etkileşim: JavaScript ile sayfadaki gerçek öğeleri seçip değiştirmeyi ve bir butona tıklandığında olay çalıştırmayı öğreneceğiz.

Modül kaynakları: Python Tutorial · Arduino Learn

SeviyeBaşlangıç
Yaş10–16
Süre30–45 dk
Ön koşulResponsive Tasarım
İçerikStandart ders · 1.396 kelime
Son güncelleme

Bir cümlelik özet

JavaScript, web sayfalarına davranış ve hesaplama yeteneği katan bir programlama dilidir; HTML sayfanın iskeleti, CSS görünümü ise JavaScript de sayfanın aklıdır.

Neden önemli?

Şimdiye kadar HTML ile sayfanın yapısını, CSS ile görünümünü kurdun. Ama bir buton düşün: HTML onu ekrana koyar, CSS güzelleştirir, fakat tıklandığında bir şey olmasını istersek başka bir araca ihtiyacımız olur.

İşte o araç JavaScript. Tıklamaya tepki veren, sayı hesaplayan, bir metni değiştiren ve karar veren kısımdır. Python ve Scratch'te öğrendiğin değişken, koşul ve döngü fikirlerinin aynısını burada tekrar göreceksin; sadece söyleyiş biçimi değişecek.

Bu ders JavaScript'in ilk adımı. Henüz sayfayı değiştirmeyeceğiz; önce dili tanıyacak, değişken tanımlayacak ve sonuçları konsola yazdıracağız. Bir sonraki derste bu bilgiyi sayfanın kendisiyle birleştireceğiz.

Kısa tanım: JavaScript, web sayfalarının davranışını yazdığımız, tarayıcının doğrudan çalıştırabildiği bir programlama dilidir.

JavaScript sayfaya nasıl eklenir?

Tarayıcı, HTML ve CSS'i okuduğu gibi JavaScript'i de çalıştırabilir. Kodumuzu sayfaya bağlamak için <script> etiketini kullanırız.

En temiz yöntem, kodu ayrı bir dosyaya yazıp HTML'e bağlamaktır. Böylece yapı, görünüm ve davranış ayrı dosyalarda düzenli kalır.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>İlk JavaScript</title>
  </head>
  <body>
    <h1>Merhaba</h1>
    <script src="uygulama.js"></script>
  </body>
</html>

<script src="uygulama.js"> satırı, uygulama.js dosyasındaki kodu sayfaya bağlar. Bu etiketi </body> kapanışından hemen önce koyarız; böylece sayfanın içeriği yüklendikten sonra kod çalışır.

Konsolu açmak

Yazdığımız kodun sonuçlarını görmek için tarayıcının konsolunu kullanırız. Konsol, mesajları ve hataları gösteren küçük bir penceredir. Çoğu tarayıcıda F12 tuşuyla ya da sağ tık > "İncele" ile açılır ve "Console" sekmesinde durur.

uygulama.js dosyasına şunu yazalım:

console.log("Merhaba, JavaScript!");

console.log(...) komutu, parantez içindeki değeri konsola yazar. Bu, Python'daki print() komutunun karşılığıdır. Sayfa açıldığında konsolda mesajı görürüz.

Değişkenler: let ve const

Değişken, bir değeri saklayan isimli bir kutudur. Scratch'te "değişken oluştur" bloğunu, Python'da sayi = 5 yazmayı hatırla; JavaScript'te de aynı fikir vardır, sadece başına bir anahtar kelime koyarız.

JavaScript'te değişken tanımlarken iki kelime kullanırız:

let puan = 0;
const takimAdi = "Kartallar";

puan = puan + 10;
console.log(puan);
console.log(takimAdi);

Burada puan bir let olduğu için değeri değişebilir; ilk 0 iken sonra 10 olur. takimAdi ise const olduğundan sabittir. Bir const değerini değiştirmeye çalışırsak JavaScript hata verir.

İpucu: Emin değilsen const ile başla. Değeri gerçekten değiştirmen gerekiyorsa let'e çevirirsin. Bu, yanlışlıkla değişiklikleri engeller.

Temel veri türleri ve işlemler

Değişkenlerin içine farklı türlerde değerler koyabiliriz. En sık kullanılan üç tür şudur:

let yas = 12;            // sayı
let isim = "Derin";      // metin
let uyeMi = true;        // mantıksal

Sayılarla işlem yapmak

Sayılarla matematik işlemleri yapabiliriz. İşaretler tanıdık: + topla, - çıkar, * çarp, / böl.

let en = 4;
let boy = 6;
let alan = en * boy;

console.log(alan); // 24

Metinleri birleştirmek

Metinleri + işaretiyle uç uca ekleyebiliriz. Buna birleştirme denir.

let ad = "Derin";
let selam = "Merhaba " + ad + "!";

console.log(selam); // Merhaba Derin!

Dikkat: "5" + 3 yazarsak sonuç 8 değil, "53" metnidir. Çünkü tırnak içindeki "5" bir sayı değil metindir. Sayılarla işlem yaparken değerlerin tırnaksız olmasına dikkat et.

Koşul ve döngü: tanıdık fikirler

Python ve Scratch'ten bildiğin koşul (eğer...) ve döngü (tekrar...) yapıları JavaScript'te de var. Sadece yazımı biraz farklı: koşullar if ile başlar, bloklar süslü parantez { } içine alınır.

Koşul

let sicaklik = 32;

if (sicaklik > 30) {
  console.log("Su iç, hava sıcak.");
} else {
  console.log("Hava serin.");
}

if (koşul) doğruysa ilk blok, değilse else bloğu çalışır. Karşılaştırmalar için >, <, >=, <= ve eşitlik için === kullanırız.

Döngü

for (let i = 1; i <= 3; i++) {
  console.log("Tur " + i);
}

Bu döngü konsola üç satır yazar: "Tur 1", "Tur 2", "Tur 3". i++ her turda i değerini bir artırır; i <= 3 koşulu sağlanmadığında döngü durur.

Mini uygulama

Bir spor antrenmanının toplam süresini hesaplayan küçük bir program yazacağız. Ölçek olarak dört tur koşu var; her tur kaç dakika sürüyorsa toplamı buluyoruz.

uygulama.js dosyasına şunu yaz:

const turSayisi = 4;
let turSuresi = 3; // dakika
let toplam = turSayisi * turSuresi;

console.log("Tur sayısı: " + turSayisi);
console.log("Toplam süre: " + toplam + " dakika");

if (toplam > 10) {
  console.log("Uzun antrenman, ara ver.");
}

Sayfayı aç, konsolu aç ve mesajları gör. Sonra turSuresi değerini 5 yap, kaydet ve sayfayı yenile. Toplamın nasıl değiştiğini ve koşul mesajının ne zaman göründüğünü izle.

Küçük bir meydan okuma: bir de for döngüsü ekleyip her turu tek tek konsola yazdırmayı dene.

Uygulama laboratuvarı: JavaScript’e Giriş

JavaScript’e Giriş konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada JavaScript sayfaya nasıl eklenir? ile Değişkenler: let ve const arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.

Görev senaryosu

Şu senaryoyu ele al: klavyeyle kullanılabilen basit soru-cevap bileşeni. Dersin ana hedefi “JavaScript'i sayfaya ekleyip değişkenler ve temel işlemlerle ilk kodunu yazmayı öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.

  1. Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
  2. En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
  3. Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
  4. Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
  5. Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.

Başarı ölçütleri

“JavaScript’e Giriş” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın klavyeyle kullanılabilen basit soru-cevap bileşeni senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, JavaScript sayfaya nasıl eklenir? ve Değişkenler: let ve const ilişkisini daha küçük adımlara bölerek düzelt.

Sık yapılan hatalar

Noktalı virgülü ve parantezi unutmak

JavaScript satır sonlarında ; kullanmayı sever ve console.log(...) gibi çağrılarda parantez şarttır. console.log "merhaba" çalışmaz; doğru yazım console.log("merhaba");.

const değerini değiştirmeye çalışmak

const ile tanımlanan bir kutunun değeri değiştirilemez. Değişecekse en baştan let kullan.

Sayı ile metni karıştırmak

"5" + "2" sonucu "52" olur, 7 değil. Hesap yapacaksan tırnak kullanma: 5 + 2.

Konsola bakmayı unutmak

console.log mesajları sayfada görünmez, sadece konsolda çıkar. Sonucu göremiyorsan önce konsolu açtığından emin ol.

Tek eşittir ile üç eşittiri karıştırmak

= bir değeri atar (puan = 10). Karşılaştırma yaparken === kullanılır (puan === 10). İkisini karıştırmak sık görülen bir hatadır.

Güvenlik notu

Ders özeti

Kontrol soruları

  1. JavaScript kodunu bir HTML sayfasına bağlamak için hangi etiketi kullanırız?
  2. console.log() komutu ne işe yarar ve Python'daki karşılığı nedir?
  3. let ile const arasındaki fark nedir?
  4. "3" + "4" işleminin sonucu nedir, neden?
  5. Aşağıdaki döngü konsola kaç satır yazar? for (let i = 1; i <= 5; i++) { console.log(i); }

Cevaplar

  1. <script> etiketini kullanırız; genellikle src ile ayrı bir .js dosyasına bağlarız ve </body> kapanışından hemen önce koyarız.
  2. console.log(), parantez içindeki değeri tarayıcı konsoluna yazdırır. Python'daki print() komutunun karşılığıdır.
  3. let değeri sonradan değişebilen değişkenler için, const ise değeri hiç değişmeyecek sabitler için kullanılır.
  4. Sonuç "34" metnidir. Çünkü tırnak içindeki değerler sayı değil metindir ve + işareti metinleri uç uca ekler.
  5. Beş satır yazar: 1, 2, 3, 4 ve 5. Döngü i 1'den başlar ve i <= 5 koşulu sağlandığı sürece çalışır.

Kaynak ve doğrulama notu

“JavaScript’e Giriş” dersi için doğrulama odağı JavaScript sayfaya nasıl eklenir? ile Değişkenler: let ve const arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.

Sonraki ders

DOM ve Etkileşim: JavaScript ile sayfadaki gerçek öğeleri seçip değiştirmeyi ve bir butona tıklandığında olay çalıştırmayı öğreneceğiz.

Quiz’i BaşlatWeb Temelleri bölümüne dön
SORU HAVUZU

Bu dersi 10 soruyla pekiştir

Bu ders için 16 soruluk bir havuz hazırlandı. Her başlangıçta 10 soru ve seçenekler yeniden karıştırılır.