Temel Javascript Kodları

var, let, const:

• var: Değişken tanımlamak için kullanılır.
• let: Modern değişken tanımlama, kapsamlı ve güvenli.
• const: Değişmez bir değeri temsil eder.

// "var" örneği
var x = 10;
console.log(x); // Çıktı: 10

// "let" örneği
let y = 5;
console.log(y); // Çıktı: 5

// "const" örneği
const z = 3.14;
console.log(z); // Çıktı: 3.14

console.log()

console.log() bir JavaScript yöntemidir ve tarayıcı veya Node.js

ortamında kullanılan bir yazdırma fonksiyonudur. Bu yöntem, geliştiricilere uygulama akışını

ve değerleri izlemeleri, hata ayıklama yapmaları ve bilgiyi görüntülemeleri için bir araç sağlar.

Tarayıcı konsolu veya komut satırı gibi çeşitli çıktı kanallarında kullanılabilir.

alert()

alert() fonksiyonu, tarayıcı içinde çalışan JavaScript kodunda kullanılan bir yöntemdir.

Bu fonksiyon, tarayıcı penceresinde kullanıcıya anında bir bildirim kutusu (alert kutusu) göstermeye yarar.

confirm()

confirm() fonksiyonu da tarayıcı içinde çalışan JavaScript kodunda kullanılan bir yöntemdir.

Bu fonksiyon, tarayıcı penceresinde kullanıcıya bir onay kutusu (confirm kutusu) göstermeye yarar.

Kullanıcıya “Evet” veya “Hayır” gibi iki seçenek sunar ve kullanıcının seçimine göre bir değer döndürür.

prompt()

prompt() fonksiyonu, tarayıcı içinde çalışan JavaScript kodunda kullanılan bir yöntemdir.

Bu fonksiyon, tarayıcı penceresinde kullanıcıya bir girdi kutusu (input kutusu) göstermeye yarar.

Kullanıcıdan metin veya veri girmesini istemek için kullanılır.

var ad = prompt("Adınızı giriniz:");
if (ad !== null) {
console.log("Merhaba, " + ad + "!");
} else {
console.log("Giriş yapılmadı.");
}

Veri Türleri

JavaScript, çeşitli veri türlerini destekleyen bir programlama dilidir. İşte JavaScript’te bulunan temel veri türleri:

1. **Sayılar (Numbers):** Tamsayılar ve ondalık sayılar gibi sayısal değerleri temsil eder. Örnek: `42`, `3.14`.

2. **Metin (Strings):** Metin veya karakter dizilerini temsil eder. Örnek: `”Merhaba, dünya!”`, `’JavaScript’`.

3. **Boolean:** Sadece iki değeri olan `true` (doğru) veya `false` (yanlış) değerlerini temsil eder.

4. **Dizi (Array):** Birden fazla değeri içeren bir liste yapısını temsil eder. Örnek: `[1, 2, 3]`, `[‘elma’, ‘armut’, ‘çilek’]`.

5. **Nesne (Object):** Anahtar-değer çiftleriyle ilişkilendirilmiş veri yapılarını temsil eder. Örnek:

var kullanici = {
 ad: "John",
 soyad: "Doe",
 yas: 30
};

6. **Fonksiyon (Function):** Bir dizi talimatı içeren ve bir işlemi gerçekleştirmek için çağrılan kod bloklarını temsil eder.

7. **Null:** Bir değerin yokluğunu veya boş olduğunu temsil eder.

8. **Undefined:** Bir değişkenin değeri atanmadığında veya bir fonksiyon bir değer döndürmediğinde kullanılan değerdir.

9. **Semboller (Symbols):** Benzersiz ve değiştirilemez bir değeri temsil eden nesnelerdir.

Bu temel veri türlerinin yanı sıra, JavaScript’te daha spesifik veri türleri ve nesneleri de kullanabilirsiniz, örneğin: `Date` (tarih ve saat), `RegExp` (düzenli ifadeler), `Map` (haritalar), `Set` (kümeler) gibi.

JavaScript dinamik bir tip sistemi kullanır, bu nedenle bir değişken farklı veri türlerini farklı zamanlarda alabilir. Veri türleri otomatik olarak çevrilebilir ve dönüştürülebilir, ancak bu özellik bazen beklenmedik sonuçlara yol açabilir, bu nedenle dönüşüm işlemleri dikkatli bir şekilde yapılmalıdır.

if,else if,else

`if`, `else if` ve `else` ifadeleri, koşullu (şartlı) durumları yönetmek için JavaScript’te kullanılan yapıları ifade eder. Bu yapılar, belirli koşullara bağlı olarak farklı kod bloklarının çalışmasını sağlar. İşte bu yapıları kısaca açıklamak için kullanılabilecek temel bilgiler:

1. **if:** Belirli bir koşulun doğru olduğunda belirtilen kod bloğunu çalıştırır. Yani, eğer koşul doğru ise, ifadeler içeren kod bloğu çalışır.

if (koşul) {
 // Koşul doğruysa burası çalışır.
}

2. **else if:** İlk `if` ifadesinin koşulu yanlışsa, bir sonraki `else if` ifadesinin koşulunu kontrol eder. Birden fazla alternatif koşulu değerlendirmenizi sağlar.

if (koşul1) {
 // Koşul1 doğruysa burası çalışır.
} else if (koşul2) {
 // Koşul1 yanlış, ama koşul2 doğruysa burası çalışır.
}

3. **else:** Önceki `if` veya `else if` ifadelerinin koşulları yanlışsa, `else` ifadesinin içeriği çalışır. Yani, başka hiçbir koşul sağlanmadığında bu blok çalışır.

if (koşul1) {
 // Koşul1 doğruysa burası çalışır.
} else if (koşul2) {
 // Koşul1 yanlış, ama koşul2 doğruysa burası çalışır.
} else {
 // Hiçbir koşul sağlanmıyorsa burası çalışır.
}

Bu yapıları kullanarak programınızda belirli koşullara göre farklı işlemler gerçekleştirebilirsiniz. Örneğin, belirli bir sayının pozitif, negatif veya sıfır olduğunu kontrol etmek veya farklı kullanıcı türlerine göre özelleştirilmiş mesajlar göstermek gibi durumları yönetebilirsiniz.

document.getElementById(),document.querySelector(),

document.querySelectorAll()

Bu üç kod, HTML belgesindeki belirli elemanları seçmek ve işlemek için kullanılan JavaScript yöntemleridir:

1. `document.getElementById()`: Belirli bir HTML elemanını ID’sine göre seçer.

var eleman = document.getElementById("idAdi");

2. `document.querySelector()`: CSS seçicileri kullanarak belirli bir HTML elemanını seçer.

var eleman = document.querySelector(".sinifAdi");

3. `document.querySelectorAll()`: CSS seçicileri kullanarak belirli tüm HTML elemanlarını seçer.

var elemanlar = document.querySelectorAll("etiketAdi");

Bu yöntemler, JavaScript ile HTML belgesindeki elemanları bulmak ve üzerinde işlem yapmak için yaygın olarak kullanılır.

onclick,onkeypress,onchange

Bu üç kod, JavaScript’te belirli olayları (event) yakalamak ve bu olaylara tepki olarak çalışacak işlevleri (fonksiyonları) tanımlamak için kullanılan yöntemlerdir:

1. `.onclick`:
Bu, bir HTML elemanına tıklama olayını yakalar. Belirli bir elemana tıklandığında çalıştırılacak işlevi tanımlar.

eleman.onclick = function() {
 // Tıklama olayına tepki olarak çalışan kod
};

2. `.onkeypress`:
Bu, bir klavye tuşuna basma olayını yakalar. Bir tuşa basıldığında çalıştırılacak işlevi tanımlar.

document.onkeypress = function(event) {
 // Bir tuşa basma olayına tepki olarak çalışan kod
};

3. `.onchange`:
Bu, bir HTML elemanının değeri değiştiğinde yakalanan bir olaydır. Değer değiştikçe çalıştırılacak işlevi tanımlar.

inputElemani.onchange = function() {
 // Değer değiştiğinde çalışan kod
};

Bu yöntemler, kullanıcı etkileşimi ve değişikliklerle ilgili işlemler yapmak için oldukça yaygın olarak kullanılır. Örneğin, bir düğmeye tıklandığında bir formu göndermek, bir klavye tuşuna basıldığında belirli bir tepki vermek veya bir giriş alanının değeri değiştiğinde işlem yapmak gibi senaryolarda kullanılabilirler.

for ve forEach

Tabii, işte kısa açıklamalar:

1. **for Döngüsü:** Belirli bir aralıkta veya koşul sağlandığında tekrarlanan bir döngüdür.

for (başlangıç; koşul; artış) {
 // Döngü içeriği
}

2. **forEach Döngüsü:** Bir dizideki her bir öğe için bir işlemi tekrarlamak için kullanılır.

dizi.forEach(function(öğe) {
 // Her bir öğe için işlem yap
});

`for` döngüsü daha esnek ve belirli durumlar için uygundurken, `forEach` dizilerde her öğe için kullanımı daha kolay ve açıklayıcı hale getirir.

function

JavaScript’te `function`, belirli bir işlemi veya hesaplamayı gerçekleştiren ve adlandırılmış bir kod bloğunu temsil eden bir yapıdır.

function fonksiyonAdi(parametre1, parametre2) {
 // İşlem veya hesaplama
 return sonuc;
}

– `fonksiyonAdi`: Fonksiyonun adı.

– `parametre1`, `parametre2`: İşlemin veya hesaplamanın kullanacağı girdiler (isteğe bağlı).

– `return`: İşlem sonucunu döndürmek için kullanılır.

Örnek:

function topla(a, b) {
return a + b;
}

try,catch

`try` ve `catch`, JavaScript’te hata yakalama mekanizmasını sağlayan yapıları ifade eder.

– `try`: Hata olasılığı bulunan bir kod bloğunu tanımlar.
– `catch`: `try` bloğunda bir hata meydana geldiğinde çalışacak kod bloğunu tanımlar.

Bu yapı, hataların programın çalışmasını kesintiye uğratmasını önler ve daha iyi hata yönetimi sağlar.

Örnek:

try {
 // Hata olasılığı bulunan kod bloğu
 throw new Error("Bir hata oluştu!");
} catch (hata) {
 // Hata yakalama ve işleme
 console.error(hata.message);
}

Bu örnekte, `try` bloğunda hata oluşturan bir kod bloğu bulunuyor. `catch` bloğu, hataları yakalar ve hata mesajını konsola yazdırır.

.innerHTML .textContent

Bu iki özellik, JavaScript’te HTML elemanlarının içeriği ile çalışırken kullanılan yöntemlerdir:

1. `.innerHTML`:
Bu, bir HTML elemanının içeriğini değiştirmek veya içeriğine HTML kodu eklemek için kullanılır. Bu özellik, metin ve HTML içeriği eklemek için kullanılabilir. Ancak, güvenlik riskleri taşıdığından, güvenilir kaynaklardan gelen içerik dışında `.innerHTML` kullanırken dikkatli olunmalıdır.

eleman.innerHTML = "<p>Yeni içerik</p>"; // HTML içeriğini değiştirir veya ekler.

2. `.textContent`:
Bu, bir HTML elemanının metin içeriğini değiştirmek veya almak için kullanılır. HTML kodunu yorumlamadan sadece metni alır veya atar.

eleman.textContent = "Yeni metin"; // Metin içeriğini değiştirir.
var metin = eleman.textContent; // Metin içeriğini alır.

`.textContent` özelliği, genellikle metin içeriği değiştirilirken veya metin içeriğinin HTML olarak değil, düz metin olarak kullanılması gereken durumlarda tercih edilir.

Her iki özellik de HTML elemanlarının içeriğiyle etkileşimde kullanılırken amaçları ve kullanım durumları açısından farklılık gösterir.

element.classList.add(“className”), element.classList.remove(“className”), element.classList.contains(className)

Bu üç kod, HTML elemanlarının sınıf (class) listesini düzenlemek için kullanılan yöntemlerdir:

1. `element.classList.add(“className”)`:
Bu, bir HTML elemanının sınıf listesine belirli bir sınıf adını ekler. Bu, elemanın görünümünü ve davranışını değiştirmek için CSS sınıflarını dinamik olarak yönetmek için kullanılır.

eleman.classList.add("aktif"); // Elemana "aktif" sınıfını ekler.

2. `element.classList.remove(“className”)`:
Bu, bir HTML elemanının sınıf listesinden belirli bir sınıf adını kaldırır.

eleman.classList.remove("pasif"); // Elemandan "pasif" sınıfını kaldırır.

3. `element.classList.contains(“className”)`:
Bu, bir HTML elemanının sınıf listesinin belirli bir sınıfı içerip içermediğini kontrol eder. Bir sınıfın elemanın sınıf listesinde olup olmadığını kontrol etmek için kullanılır.

var durum = eleman.classList.contains("aktif"); // "aktif" sınıfını içerip içermediğini kontrol eder.

Bu yöntemler, dinamik olarak HTML elemanlarının sınıflarını değiştirirken kullanılır. Özellikle CSS ile görünümü kontrol etmek ve JavaScript ile etkileşimi yönetmek amacıyla sınıfları eklemek veya kaldırmak için kullanışlıdır.

window.onload

`window.onload` bir HTML belgesi tamamen yüklendikten sonra çalıştırılacak bir işlevi tanımlar.

window.onload = function() {
 // Yükleme tamamlandığında çalışacak kod
};

Bu yapı, sayfanın tamamının yüklenmesini bekleyerek içindeki kodun çalışmasını sağlar. Sayfanın tüm öğeleri ve kaynakları yüklendikten sonra, belirtilen işlevi çalıştırır. Bu, sayfa içeriğine veya etkileşimli öğelere erişmeden önce bekleme gerektiği durumlarda kullanılır.

.replace() ,.replaceAll(), .length ,.slice(1,13)

– `.replace()`: Bir metin içinde belirli bir alt dizesini arayarak bulur ve istenen yeni bir alt dize ile değiştirir.

– `.replaceAll()`: Metin içinde belirli bir alt dizesini tüm örneklerini bulur ve yeni bir alt dize ile değiştirir (modern tarayıcılar için).

– `.length`: Bir metin dizisinin karakter sayısını döndürür.

– `.slice(1, 13)`: Metin dizisinin belirli bir aralığını keserek alır.

– `metin[0]`: Metin dizisinin ilk karakterini alır.

– `metin[metin.length — 1]`: Metin dizisinin son karakterini alır.

Özetle, bu kod parçaları metin işlemleri için kullanılan çeşitli yöntemleri ve özellikleri temsil eder. Metin içeriğini değiştirmek, uzunluğunu hesaplamak, kesmek veya belirli karakterlere erişmek gibi işlemlerde kullanılırlar.

split() ve join()

1. `split()`: Bu metod, bir metni belirli bir ayraç karakterine göre böler ve bu bölmeleri bir dizi olarak döndürür.

Örnek:

var metin = "Merhaba! Nasılsınız? İyi misiniz?";
var kelimeler = metin.split(" "); // Metni boşluklara göre böler.
console.log(kelimeler); // ["Merhaba!", "Nasılsınız?", "İyi", "misiniz?"]

2. `join()`: Bu metod, bir diziyi belirli bir ayraç karakteri ile birleştirerek tek bir metin haline getirir.

Örnek:

var kelimeler = ["Merhaba!", "Nasılsınız?", "İyi", "misiniz?"];
var metin = kelimeler.join(" "); // Diziyi boşlukla birleştirir.
console.log(metin); // "Merhaba! Nasılsınız? İyi misiniz?"

`split()` ve `join()` metodları, metinleri diziye çevirme ve dizileri metin haline getirme işlemlerinde sıklıkla kullanılır.

Number,toString(),Math.random(),Math.floor(),Math.ceil()

• Number: Değeri sayıya dönüştürür.
• toString(): Değeri metin olarak temsil eder.
• Math.random(): 0 ile 1 arasında rasgele bir sayı üretir.
• Math.floor(): Sayıyı aşağı yuvarlar.
• Math.ceil(): Sayıyı yukarı yuvarlar.

// Number
var metin = "42";
var sayi = Number(metin);

// toString()
var sayi = 42;
var metin = sayi.toString();

// Math.random()
var rasgeleSayi = Math.random();

// Math.floor()
var sayi = 3.9;
var yuvarlanmisSayi = Math.floor(sayi);

// Math.ceil()
var sayi = 3.1;
var yuvarlanmisSayi = Math.ceil(sayi);

setTimeout(), setInterval()

Bu iki kod parçası, belirli bir zaman aralığında veya gecikme süresiyle tekrarlanan işlevleri (fonksiyonları) planlamak için kullanılan yöntemlerdir:

1. `setTimeout(function() {}, 1000)`:
Bu, belirli bir işlemin belirtilen bir gecikme süresi sonunda bir kez çalışmasını sağlar.

setTimeout(function() {
 // Belirli bir gecikme sonrasında bir kere çalışacak kod
}, 1000); // 1000 milisaniye (1 saniye) sonra çalışır.

2. `setInterval(function() {}, 1000)`:
Bu, belirli bir işlemin belirtilen zaman aralıklarıyla tekrarlı olarak çalışmasını sağlar.

setInterval(function() {
 // Belirli bir zaman aralığında tekrarlı olarak çalışacak kod
}, 1000); // Her 1000 milisaniyede (1 saniye) tekrar eder.

Bu yöntemler, zaman tabanlı işlemleri planlamak veya düzenli aralıklarla tekrarlanan işlevleri gerçekleştirmek için kullanılır. Örneğin, bir animasyon oluşturmak veya belirli periyotlarla veri güncellemesi yapmak gibi senaryolarda kullanılabilirler.

addEventListener

`addEventListener`, belirli bir HTML elemanına belirli bir olay (event) dinleyici eklemek için kullanılan yöntemdir.

eleman.addEventListener("olayAdi", fonksiyon);

– `eleman`: Olay dinleyicisi eklemek istediğiniz HTML elemanı.
– `”olayAdi”`: Beklenen olayın adı (örneğin, “click” veya “mouseover”).
– `fonksiyon`: Olay gerçekleştiğinde çağrılacak işlev.

Örnek:

document.getElementById("dugme").addEventListener("click", function() {
 // Düğmeye tıklanıldığında çalışacak kod
});

Bu yapı, belirli bir olayın gerçekleştiğinde çalışacak işlevi tanımlamanızı sağlar. Örneğin, bir düğmeye tıklama, bir metin kutusuna yazma veya fareyi bir öğenin üzerine getirme gibi olayları dinlemek ve tepki göstermek için kullanılır.