BİL-223 Betik Diller – JavaScript Girişi Özeti
JavaScript Nedir?
• Web için programlama dilidir.
• HTML ve CSS öğelerini değiştirebilir.
• Veri hesaplama, işleme, doğrulama yapabilir.
Neden JavaScript?
1. HTML → içeriği belirler
2. CSS → düzeni sağlar
3. JavaScript → etkileşimi sağlar
JavaScript ile Yapılabilecekler
• HTML içeriğini değiştirme:
[Link]("demo").innerHTML = "Merhaba";
• HTML özniteliklerini değiştirme:
[Link]("img").src = "[Link]";
• CSS stillerini değiştirme:
[Link]("demo").[Link] = "35px";
• Öğeleri gizleme/gösterme:
[Link]("demo").[Link] = "none";
Java ve JavaScript Arasındaki Fark
• Java: Genel amaçlı, büyük projelerde kullanılır.
• JavaScript: Web sayfalarını etkileşimli yapar, tarayıcıda çalışır.
• 1995’te geliştirildi, 1997’de ECMAScript standardına geçti.
• ECMAScript = standart, JavaScript = uygulaması.
Kod Yazma Yerleri
• <script> etiketi içinde (head veya body).
• Harici dosya da olabilir:
Çıktı Yöntemleri
Yöntem Açıklama Örnek
[Link]("demo").innerHTML
HTML içeriği ="Merhaba"
innerHTML
değiştirir
[Link]("demo").innerText
innerText Metin değiştirir
="Merhaba";
Test amaçlı
[Link]() [Link](5+6)
yazdırma
[Link]() Uyarı kutusu alert(5+6)
Konsola
[Link](5+6)
[Link]() yazdırır
Chrome>F12>Console ile görülebilir
(debug)
Girdi Alma
let isim = prompt("Adınız:", "Ali");
BİL-223 Betik Diller – JavaScript Sözdizimi, Değişkenler, Operatörler ve Koşullar
Özeti
1. JavaScript Sözdizimi (Syntax)
JavaScript yazarken uyulması gereken kurallar.
Temel öğeler:
• Sayılar: 10, 10.43
• Dizeler (String): "Ali", 'JavaScript'
• Değişkenler: let sayi = 1;
• Anahtar sözcükler: let, const, for, if
• Operatörler: = + - * / % **
2. İfadeler ve Noktalı Virgül
• Her komut (talimat) bir ifade (statement)’dır.
• İfadeler sırasıyla çalışır.
• Boşluklar önemsenmez.
• Uzun satırlar, genelde operatörden sonra bölünür:
[Link]("demo").innerHTML =
"Merhaba";
4. Değişkenler
Değer saklamak için kullanılır.
Tanımlama şekilleri:
let x = 5; // değişken
const PI = 3.14; // sabit sonradan değiştirilemez constla tanımlandığı için
var y = 10; // eski yöntem, önerilmez
x2 = 5; // tanımsız (önerilmez)
Tür öğrenmek için:
typeof "Ali"; // "string"
typeof 3.14; // "number"
8. Dizeler (String)
let ad1 = "Ali";
let ad2 = 'Ahmet';
let cevap = "Ali \"AA\" aldı."; (kaçış karakteri // aynı tırnak içinde gene aynı tırnağı
kullanmak için kullanılır.)
let uzunluk = [Link]; // 3
let sonuc = "Merhaba " + "JavaScript"; // birleştirme
9. Mantıksal Değerler (Boolean)
let durum = true;
let x = 5;
let y = (x < 0); // false
Boş birleşme (??):
let il = null ?? "Ankara"; // "Ankara"
Koşullu (üçlü) operatör:
let sonuc = (sayi < 0) ? "Negatif" : "Pozitif"; // pozitif
JavaScript Döngüler Özeti
for Döngüsü
Bir kod bloğunu belirli sayıda tekrar çalıştırır.
let sonuç = "";
for (let i = 0; i < 5; i++) {
sonuç += "Sayı " + i + ", ";
while Döngüsü
Koşul doğru olduğu sürece kodu tekrar çalıştırır.
let i = 0;
while (i < 10) {
sonuç += "Sayı " + i;
i++; }
do…while Döngüsü
Koşul kontrol edilmeden önce en az bir kez çalışır, sonra koşul doğruysa devam eder.
let i = 0;
do {
sonuç += "Sayı " + i;
i++;
} while (i < 10);
Etiketli Döngüler (Label)
Döngülere isim vererek break veya continue ile hangi döngüden
çıkılacağını/atlanacağını kontrol edebilirsin.
let text = "";
döngü1: for (let j = 1; j < 4; j++) {
döngü2: for (let i = 1; i < 5; i++) {
if (i === 3) continue döngü2; // iç döngüde 3'ü atla
text += j + "-" + i + "<br>";
i 3 olduğunda ki bunu da if kontrol ediyor bir sonrakine geç yani 4 e geçer.
JavaScript Diziler ve Metotları
Diziler (Arrays)
Oluşturma ve Erişim
const arabalar = ["TOGG", "Volvo", "BMW"];
let ilkAraba = arabalar[0]; // "TOGG"
arabalar[1] = "Opel"; // 1. elemanı değiştirir
Çok boyutlu dizi:
const notlar = [[34,67],[76,98],[21,44]];
let ogr2final = notlar[1][1]; // 98
Dolaşma:
let toplam = 0;
const notlar = [65,44,12,84];
[Link](eleman => toplam += eleman);
Setler
Tanım:
• Sadece benzersiz elemanları saklar.
• Aynı eleman birden fazla eklenemez.
• Elemanlar her tür veri olabilir (sayı, metin, nesne).
Oluşturma ve Kullanım:
const isimler = new Set(["Ali","Ahmet","Mehmet"]);
[Link]("Mustafa"); // ekleme
[Link]("Ahmet"); // true (has = var mı yok mu diye kontrol eder)
[Link]; // eleman sayısı 4 size = (eleman sayısını verir.)
Set İşlemleri:
İşlem Açıklama
union İki kümenin birleşimi
intersection Ortak elemanlar
difference Sadece ilk kümede olanlar
symetricDifference Ortak olmayan elemanlar
const isimler = new Set(["Ali", "Ahmet", "Mehmet"]);
const isimler2 = new Set(["Arda", "Ahmet", "Sinan"]);
// Kümelerin birleşimi
const union = new Set([...isimler, ...isimler2]);
[Link]("Birleşim:", [...union]); // ["Ali","Ahmet","Mehmet","Arda","Sinan"]
// Kümelerin kesişimi
const intersection = new Set([...isimler].filter(x => [Link](x)));
[Link]("Kesişim:", [...intersection]); // ["Ahmet"]
// Fark (isimler - isimler2)
const difference = new Set([...isimler].filter(x => ));
[Link]("Fark:", [...difference]); // ["Ali","Mehmet"]
// Simetrik fark (her iki kümede ortak olmayanlar)
const symDifference = new Set([...union].filter(x => !([Link](x) &&
[Link](x))));
[Link]("Simetrik Fark:", [...symDifference]); // ["Ali","Mehmet","Arda","Sinan"]
Mapler
Tanım:
• Anahtar-değer çiftleri koleksiyonudur.
• Anahtar herhangi bir türde olabilir.
Oluşturma ve Kullanım:
const ogrenciler = new Map();
[Link]("1001","Ahmet");
[Link]("1002","Ayşe");
[Link]("1003","Mehmet");
// Değer okuma
[Link]("1002"); // "Ayşe"
// Eleman kontrolü
[Link]("1004"); // false
// Eleman sayısı
[Link]; // 3
// Silme
[Link]("1002");
// Tümünü temizleme
[Link]();
Fonksiyonlar
Tanım:
Fonksiyonlar, belirli bir görevi yerine getiren ve tekrar tekrar kullanılabilen kod
bloklarıdır.
Temel Yapı:
function fonksiyonAdi(param1 = deger, param2 = deger) {
// kodlar
Return sonuc; // isteğe bağlı
• Fonksiyon adı değişken kurallarına uygun olmalı.
• Parametreler isteğe bağlı olarak varsayılan değer alabilir.
• Fonksiyon içindeki değişkenler yereldir, sadece fonksiyon içinde geçerlidir.
• return ile değer döndürülebilir.
Parametre Kuralları :
• JS fonksiyon parametreler için veri türlerini belirtmez.
• JS fonksiyonları geçirilen argümanlarda tip denetimi yapmaz.
• JS fonksiyonları alınan argüman sayısını kontrol etmez.
• Eksik argümanlarla bir fonksiyon çağrılırsa, eksik değerler undefined(bir değişkenin
henüz bir değeri olmadığını gösteren özel bir değerdir.) olarak ayarlanır.
❖ Belirsiz sayıda argüman kullanımı : ... (Üç nokta) ön ekiyle tanımlanan parametreler
belirsiz sayıda olarak kabul edilir ve bir dizi olarak ele alınır
❖ arguments nesnesi: Parametre tanımlamadan fonksiyon içindeki tüm argümanları
kullanabiliriz.
(arguments in normal fonksiyondan farkı:
Düz fonksiyon → parametre sayısı sabit ve önceden biliniyor olmalı.
arguments → parametre sayısı belirsiz veya değişken olduğunda kullanışlı.)
Arrow Fonksiyonu (Kısa Fonksiyon yazmamızı sağlar):
(let fonksiyon_adı = (parametre1, parametre2, …) => // kod)
let carp = (a, b) => a * b;
let sonuc = carp(4, 5); // 20
JavaScript Nesne Kullanımı
Nesne Nedir?
• Birden fazla veri ve fonksiyonu tek bir yapı içinde tutar.
• Özellikler (property) ve işlemler (method) içerir.
• Örnek: insanlar, arabalar, kitaplar, hayvanlar vs.
Örnek: Kitap Nesnesi
Özellikler (Property): adı, yazar, sayfa, dil
İşlemler (Method): durumu, ödünç durumu
Nesne Özelliklerini Kullanmak
Nesne Özelliklerini Döngüyle Kullanmak
[Link]() → nesnedeki tüm [anahtar, değer] çiftlerini verir