Mobil Menü

Osman Bayrak ile JavaScript Dersleri

Konu Başlıkları

1. JavaScript Nedir?

Web sitelerini interaktif hale getiren bir programlama dilidir. HTML ve CSS ile birlikte çalışarak tarayıcı üzerinde dinamik içerikler oluşturulmasını sağlar. Modern web geliştirme dünyasında vazgeçilmezdir. Tarayıcı içinde çalışır ve kullanıcı etkileşimleri (tıklama, yazı girişi gibi) üzerinden sayfa ile iletişimi sağlar.

2. JavaScript Nasıl Çalışır?

JavaScript kodu HTML içine <script> etiketleri ile yerleştirilir veya ayrı bir .js dosyasında bulunabilir. Tarayıcılar JavaScript’i okur ve çalıştırır. Örneğin:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Başlangıç</title>
</head>
<body>
    <h1>JavaScript ile Merhaba Dünya</h1>
    <script>
        console.log("Merhaba Dünya!");
    </script>
</body>
</html>

Bu kod, tarayıcı konsolunda “Merhaba Dünya!” ifadesini gösterir.

3. Değişkenler

Üç tür değişken tanımlayıcı bulunur: var, let ve const. Bu değişkenler değer saklamak için kullanılır. Örneğin:

var isim = "Ali";
let yaş = 25;
const ülke = "Türkiye";
console.log(isim, yaş, ülke);
  • var: ES5 öncesi popüler olan genel tanımlayıcıdır.
  • let: Blok bazında geçerlidir ve ES6 ile gelen bir tanımlayıcıdır.
  • const: Sabit bir değeri tanımlamak için kullanılır ve sonradan değiştirilemez.

4. Değişkenler ve Veri Tipleri

Değişken Tanımlama

JavaScript’te üç ana değişken tanımlama yöntemi vardır: var, let, const.

  • var: Blok kapsamına sahip değildir ve hoisting ile yukarı taşınır.
  • let: Blok kapsamına sahiptir. Yalnızca tanımlandığı blokta erişilebilir.
  • const: Değeri değiştirilemez; tanımlandığı blokta sabit olarak kalır.
var isim = "Ali";   // var kullanarak değişken tanımlama
let yaş = 25;       // let kullanarak değişken tanımlama
const ülke = "Türkiye"; // const kullanarak sabit tanımlama

Veri Tipleri

primitive (temel) ve non-primitive (karmaşık) veri tiplerini içerir.

  • Primitive Tipler: string, number, boolean, null, undefined, symbol
  • Non-Primitive Tipler: object, array, function
let isim = "Ahmet"; // string
let yaş = 30;       // number
let aktif = true;   // boolean
let sehir = null;   // null
let tanimsiz;       // undefined

5. Operatörler

Operatörler, değişkenler üzerinde işlem yapmak için kullanılır:

  • Aritmetik Operatörler: +, -, *, /, %
  • Atama Operatörleri: =, +=, -=, vb.
  • Karşılaştırma Operatörleri: ==, !=, ===, !==, <, >, vb.
  • Mantıksal Operatörler: &&, ||, !

Örnek:

let x = 10;
let y = 5;
console.log(x + y); // 15
console.log(x === y); // false

6. Koşullu İfadeler

if, else if, else ve switch yapıları ile koşullu işlemleri destekler.

let havaDurumu = "güneşli";
if (havaDurumu === "yağmurlu") {
    console.log("Şemsiye almayı unutma!");
} else if (havaDurumu === "güneşli") {
    console.log("Güneş gözlüğü alabilirsin.");
} else {
    console.log("Hava durumu normal.");
}

7. Döngüler

Döngüler, tekrarlı işlemler yapmak için kullanılır:

  • for döngüsü
  • while döngüsü
  • do...while döngüsü
for (let i = 0; i < 5; i++) {
    console.log("Sayı: " + i);
}

8. Fonksiyonlar

Fonksiyonlar, bir işlemi tekrar kullanmak için tanımlanan kod bloklarıdır. JavaScript’te iki tür fonksiyon tanımlaması vardır:

  • Standart Fonksiyon:
function topla(a, b) {
    return a + b;
}
console.log(topla(3, 4)); // 7

Arrow Fonksiyonu (=>):

const carp = (a, b) => a * b;
console.log(carp(2, 3)); // 6

9. Diziler

JavaScript dizileri, birden fazla veriyi aynı anda saklamak için idealdir. push, pop, shift, unshift gibi dizi metodları ile diziye yeni eleman ekleyebilir veya çıkarabilirsiniz.

let meyveler = ["Elma", "Armut", "Muz"];
meyveler.push("Kivi"); // Diziye ekleme yapar
console.log(meyveler[2]); // "Muz"

10. Nesneler

JavaScript’te nesneler, özellikler ve yöntemler barındırır:

let araba = {
    marka: "Toyota",
    model: "Corolla",
    yıl: 2021,
    detay: function() {
        return this.marka + " " + this.model;
    }
};
console.log(araba.detay()); // "Toyota Corolla"

11. JavaScript ve HTML Entegrasyonu

HTML sayfalarına farklı yollarla entegre edilebilir. Aşağıda bu yöntemleri açıklıyoruz.

1.1 Dahili JavaScript (Inline JavaScript)

JHTML içinde <script> etiketleri arasında yazılabilir. Bu yöntem, küçük kod parçaları için uygun olabilir ancak genellikle tavsiye edilmez.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Entegrasyonu</title>
</head>
<body>
    <h1>Merhaba Dünya</h1>
    <script>
        console.log("JavaScript buraya yazıldı!");
    </script>
</body>
</html>

1.2 Harici JavaScript Dosyası Kullanımı

Harici bir .js dosyası oluşturmak, JavaScript kodlarını HTML’den ayırır ve kodu daha düzenli hale getirir. Bu yöntem büyük projeler için idealdir.

  1. HTML Dosyası:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Dosyası Ekleme</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Harici JavaScript Kullanımı</h1>
</body>
</html>

JavaScript Dosyası (script.js):

console.log("Harici dosyadan JavaScript çalıştı!");

Bu yapı, kodun daha iyi yönetilmesine olanak tanır.

2. JavaScript Değişkenleri ve Veri Tipleri

HTML entegrasyonunda sıkça değişkenler ve veri tipleri kullanırız. Değişkenler, veriyi geçici olarak saklar ve bu veriyi dinamik olarak güncelleyebiliriz.

2.1 Değişken Tanımlama

JavaScript’te var, let ve const ile değişkenler tanımlanır.

  • let: Blok kapsamına sahip olup güncellenebilir.
  • const: Sabit bir değeri saklar, tekrar atama yapılamaz.
let isim = "Ali";
const dogumYili = 1990;
console.log(isim, dogumYili);

2.2 Veri Tipleri

JavaScript’te yaygın veri tipleri:

  • string: "Merhaba"
  • number: 42, 3.14
  • boolean: true veya false
  • array: [1, 2, 3, 4]
  • object: { isim: "Ali", yaş: 25 }
let isim = "JavaScript";
let yaş = 26;
let diller = ["HTML", "CSS", "JavaScript"];
console.log(typeof isim, typeof yaş, typeof diller);

3. HTML Etiketlerine Erişim: DOM Manipülasyonu

Document Object Model (DOM), HTML belgesinin erişilebilir hale gelmesini sağlar. JavaScript ile HTML öğelerine erişebilir ve dinamik olarak güncelleyebiliriz.

3.1 getElementById Kullanımı

HTML sayfasındaki bir etikete id atayarak bu etikete JavaScript ile erişebiliriz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>DOM Manipülasyonu</title>
</head>
<body>
    <h1 id="başlık">Orijinal Başlık</h1>
    <button onclick="başlıkDeğiştir()">Başlığı Değiştir</button>

    <script>
        function başlıkDeğiştir() {
            document.getElementById("başlık").innerHTML = "Yeni Başlık";
        }
    </script>
</body>
</html>

3.2 Diğer DOM Seçiciler

JavaScript ile DOM’da daha fazla seçici vardır:

  • getElementsByClassName: Sınıf adına göre seçim yapar.
  • querySelector: CSS seçicilerine göre seçim yapar.
  • querySelectorAll: Tüm öğeleri seçer ve bir NodeList döner.

4. JavaScript ile Olay İşleme

Kullanıcı etkileşimleri, web sayfasında dinamik değişiklikler yapmak için önemlidir. Olay yönetimi için onclick, onmouseover, onchange gibi olayları kullanır.

4.1 onclick Olayı ile Buton İşlevi

Bir butona tıklandığında bir işlemi çalıştırmak için onclick olayını kullanabiliriz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Olay İşleme</title>
</head>
<body>
    <button onclick="merhaba()">Tıkla</button>

    <script>
        function merhaba() {
            alert("Merhaba, JavaScript!");
        }
    </script>
</body>
</html>

4.2 Fare ve Klavye Olayları

Fare ve klavye olaylarını da destekler. Bu olaylar kullanıcı deneyimini artırmak için kullanılır.

  • onmouseover: Fare üzerine geldiğinde tetiklenir.
  • onkeydown: Klavyede bir tuşa basıldığında çalışır.

5. Form İşlemleri ve Doğrulama

HTML formlarıyla veri toplamak yaygındır. Form verilerini işlemek ve doğrulamak için kullanılabilir.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Form Doğrulama</title>
</head>
<body>
    <form onsubmit="return formuKontrolEt()">
        <label for="isim">İsim:</label>
        <input type="text" id="isim" name="isim">
        <button type="submit">Gönder</button>
    </form>

    <script>
        function formuKontrolEt() {
            let isim = document.getElementById("isim").value;
            if (isim === "") {
                alert("İsim alanı boş bırakılamaz.");
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Bu örnekte, formuKontrolEt fonksiyonu, onsubmit olayını kullanarak formun geçerli olup olmadığını kontrol eder.

6. JavaScript ve HTML5 API’leri

HTML5, JavaScript ile daha fazla özellik sunan API’ler içerir. Örneğin:

  • Canvas API: Grafik ve şekil çizme işlemleri.
  • Geolocation API: Kullanıcı konum bilgisi.
  • Web Storage API: Tarayıcıda veri depolama (localStorage, sessionStorage).

Canvas API Örneği

<canvas id="çizim" width="400" height="200"></canvas>
<script>
    let canvas = document.getElementById("çizim");
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);
</script>

7. CSS ile JavaScript Etkileşimi

CSS ile doğrudan etkileşim kurarak bir sayfanın stilini dinamik olarak değiştirebilir. Bu, kullanıcı etkileşimine göre görünümü değiştirme veya animasyonlar ekleme gibi olanaklar sağlar.

7.1 style Özelliği Kullanımı

JavaScript ile bir HTML öğesinin style özelliğini değiştirerek CSS özelliklerini güncelleyebilirsiniz. Örneğin, bir düğmeye tıklandığında yazının rengini değiştirebiliriz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>CSS ve JavaScript Etkileşimi</title>
</head>
<body>
    <h1 id="başlık">CSS ve JavaScript Etkileşimi</h1>
    <button onclick="stilDegistir()">Rengi Değiştir</button>

    <script>
        function stilDegistir() {
            let başlık = document.getElementById("başlık");
            başlık.style.color = "blue";  // Rengi mavi yapar
            başlık.style.fontSize = "24px";  // Yazı boyutunu değiştirir
        }
    </script>
</body>
</html>

7.2 CSS Sınıfları Ekleme ve Kaldırma

CSS sınıfları ekleyip çıkararak bir öğenin görünümünü değiştirmek daha etkili ve yönetilebilir bir yöntemdir. JavaScript’in classList özelliği ile HTML öğelerine sınıf ekleyip kaldırabilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>CSS Sınıfı Eklemek</title>
    <style>
        .vurgula {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="metin">JavaScript ile CSS sınıfı ekleme örneği</p>
    <button onclick="sınıfEkle()">Vurgula</button>

    <script>
        function sınıfEkle() {
            let metin = document.getElementById("metin");
            metin.classList.toggle("vurgula");
        }
    </script>
</body>
</html>

Bu örnekte, butona tıklandığında vurgula sınıfı eklenir veya kaldırılır.

7.3 Dinamik Stiller

JavaScript ile CSS stillerini dinamik olarak değiştirebiliriz. Örneğin, bir öğenin görünümünü ve konumunu değiştirmek için stil özelliklerini kullanabiliriz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Dinamik CSS Değişikliği</title>
    <style>
        #kutu {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: relative;
            transition: all 0.5s; /* Geçiş efektleri */
        }
    </style>
</head>
<body>
    <div id="kutu"></div>
    <button onclick="hareketEttir()">Hareket Ettir</button>

    <script>
        function hareketEttir() {
            let kutu = document.getElementById("kutu");
            kutu.style.transform = "translateX(200px)";
            kutu.style.backgroundColor = "blue"; // Renk değişimi
        }
    </script>
</body>
</html>

Bu örnekte, kutunun pozisyonu ve arka plan rengi değişir. transition özelliği ile geçiş efekti eklenmiştir, bu da animasyonlu bir görünüm sağlar.

7.4 CSS Sınıfı Değiştirme

JavaScript kullanarak bir öğeye CSS sınıfları ekleyip çıkararak stilini değiştirebiliriz. Bu, özellikle öğenin görünümünü duruma göre değiştirmek için yararlıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>CSS Sınıfı Değiştirme</title>
    <style>
        .gizle {
            display: none; /* Gizli hale getirme */
        }
    </style>
</head>
<body>
    <div id="mesaj">Bu mesaj gizli olacak!</div>
    <button onclick="gizle()">Mesajı Gizle</button>
    <button onclick="goster()">Mesajı Göster</button>

    <script>
        function gizle() {
            document.getElementById("mesaj").classList.add("gizle");
        }
        function goster() {
            document.getElementById("mesaj").classList.remove("gizle");
        }
    </script>
</body>
</html>

Bu örnekte, kullanıcı butonlara tıkladığında mesajın görünürlüğü değişir.

8. Asenkron JavaScript ve AJAX

Asenkron JavaScript, kullanıcı etkileşimini kesmeden arka planda işlemler gerçekleştirme olanağı tanır. Bu sayede bir sayfa yenilenmeden sunucudan veri alınabilir veya veritabanına veri gönderilebilir. AJAX (Asynchronous JavaScript and XML) teknolojisi ile bu işlemler yapılabilir.

8.1 fetch API Kullanımı

fetch API, sunucuyla iletişim kurmak için modern ve basit bir yöntemdir. Örneğin, bir JSON dosyasından veri almak için aşağıdaki gibi kullanılabilir:

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Bir hata oluştu:', error));

Bu kod, JSON verisini almak için fetch API kullanır ve ardından bu veriyi konsola yazdırır.

8.2 AJAX ile Form Verisi Gönderme

Bir form verisini AJAX ile sunucuya gönderebiliriz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>AJAX Form Gönderme</title>
</head>
<body>
    <form id="form">
        <input type="text" id="isim" placeholder="Adınızı girin">
        <button type="button" onclick="veriGönder()">Gönder</button>
    </form>

    <script>
        function veriGönder() {
            let isim = document.getElementById("isim").value;
            fetch('https://jsonplaceholder.typicode.com/posts', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ isim: isim })
            })
            .then(response => response.json())
            .then(data => console.log('Başarılı:', data))
            .catch(error => console.error('Hata:', error));
        }
    </script>
</body>
</html>

9. Modüler Yapı ve ES6 Özellikleri

JavaScript projelerinde kodun yönetilebilirliği için modüler yapı önemlidir. ES6 ile gelen import ve export anahtar kelimeleri sayesinde, farklı JavaScript dosyalarını birbiriyle entegre edebiliriz.

9.1 export ve import Kullanımı

Bir JavaScript dosyasını başka bir dosyada kullanmak için export ve import özelliklerini kullanabiliriz.

  1. Module.js: Fonksiyon tanımlayıp export ediyoruz.
// Module.js
export function selamVer(isim) {
    return `Merhaba, ${isim}!`;
}

2. Main.js: Başka bir dosyada bu fonksiyonu import ederek kullanıyoruz.

import { selamVer } from './Module.js';
console.log(selamVer('Ahmet')); // "Merhaba, Ahmet!"

10. Web Projelerinde JavaScript Uygulamaları: Örnek Projeler

Son olarak, öğrendiğiniz bilgileri pekiştirmek için HTML ile JavaScript’i birlikte kullanarak birkaç basit uygulama örneği hazırlayacağız. Bu projeler sayesinde JavaScript’in web projelerinde nasıl kullanılabileceğini göreceksiniz.

10.1 Basit Hesap Makinesi Uygulaması

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Hesap Makinesi</title>
</head>
<body>
    <h1>JavaScript ile Hesap Makinesi</h1>
    <input type="number" id="sayi1" placeholder="Sayı 1">
    <input type="number" id="sayi2" placeholder="Sayı 2">
    <button onclick="topla()">Topla</button>
    <p id="sonuç">Sonuç: </p>

    <script>
        function topla() {
            let sayi1 = parseFloat(document.getElementById("sayi1").value);
            let sayi2 = parseFloat(document.getElementById("sayi2").value);
            let sonuç = sayi1 + sayi2;
            document.getElementById("sonuç").innerHTML = "Sonuç: " + sonuç;
        }
    </script>
</body>
</html>

10.2 Anlık Saat Gösterimi

Kullanıcının saatini sürekli güncel olarak gösteren basit bir uygulama:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Anlık Saat</title>
</head>
<body>
    <h1>Anlık Saat</h1>
    <p id="saat"></p>

    <script>
        function saatGüncelle() {
            let tarih = new Date();
            document.getElementById("saat").innerHTML = tarih.toLocaleTimeString();
        }
        setInterval(saatGüncelle, 1000); // Her saniye saat güncellenir
    </script>
</body>
</html>

11. İleri Düzey JavaScript Konuları

Şimdi, JavaScript’in daha ileri düzey konularına geçelim. Bu konular, gelişmiş uygulama geliştirme becerileri kazandıracak ve modern özelliklerini daha iyi anlamanıza yardımcı olacaktır.

11.1 JavaScript Tabanlı Framework ve Kütüphaneler

Modern web geliştirmede, JavaScript tabanlı framework ve kütüphaneler büyük bir rol oynamaktadır. Bunlar, uygulama geliştirme sürecini kolaylaştırır ve daha modüler bir yapı sağlar.

  • React: Kullanıcı arayüzleri oluşturmak için kullanılan bir kütüphanedir. Bileşen tabanlı yapısı ile dinamik ve yeniden kullanılabilir bileşenler oluşturulmasına olanak tanır.
  • Vue.js: Progressive JavaScript framework’üdür. Uygulama geliştirirken kullanımı kolay bir yapı sunar ve bileşenler aracılığıyla dinamik sayfalar oluşturmanıza yardımcı olur.
  • Angular: Google tarafından geliştirilen bir framework’dür. MVC (Model-View-Controller) mimarisini kullanarak büyük ölçekli uygulamalar geliştirmeyi kolaylaştırır.

11.2 JavaScript ile Olay Delegasyonu

Olay delegasyonu, daha iyi performans sağlamak ve daha az bellek kullanmak için kullanılan bir tekniktir. Bir olay dinleyicisi, ana bir öğeye eklenir ve alt öğelerdeki olaylar bu ana öğe üzerinden yönetilir.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Olay Delegasyonu</title>
</head>
<body>
    <ul id="liste">
        <li>Öğe 1</li>
        <li>Öğe 2</li>
        <li>Öğe 3</li>
    </ul>

    <script>
        document.getElementById("liste").addEventListener("click", function(event) {
            if(event.target.tagName === "LI") {
                alert(event.target.innerHTML + " tıklandı!");
            }
        });
    </script>
</body>
</html>

Bu örnekte, ul etiketine bir olay dinleyicisi eklenmiştir. Bu, dinamik olarak oluşturulan alt öğelerde bile tıklama olaylarını yönetmeye olanak tanır.

11.3 JavaScript Promiseleri ve Asenkron Programlama

Asenkron işlemleri yönetmek için Promise yapısını sunar. Bu, asenkron kod yazmayı ve hata yönetimini kolaylaştırır.

let veriAl = new Promise((resolve, reject) => {
    let durum = true; // Durumu simüle et
    if (durum) {
        resolve("Veri başarıyla alındı!");
    } else {
        reject("Veri alınamadı.");
    }
});

veriAl
    .then(sonuc => console.log(sonuc))
    .catch(hata => console.error(hata));

Bu örnekte, Promise nesnesi bir işlemi temsil eder ve then ve catch ile sonuç veya hata durumu yönetilir.

11.4 Async/Await ile Asenkron Programlama

Async/Await, asenkron kod yazımını daha okunabilir hale getirir. async anahtar kelimesi bir fonksiyonu asenkron hale getirirken, await anahtar kelimesi bir Promise‘in çözülmesini bekler.

async function veriAlma() {
    try {
        let yanit = await fetch('https://jsonplaceholder.typicode.com/posts');
        let veri = await yanit.json();
        console.log(veri);
    } catch (hata) {
        console.error('Hata:', hata);
    }
}

veriAlma();

Bu örnekte, fetch API’si kullanılarak veri asenkron bir şekilde alınmaktadır.

11.5 Web API’leri ve Tarayıcı Özellikleri

Tarayıcı ile etkileşimde bulunmak için birçok yerleşik API sunar. Bu API’ler sayesinde kullanıcı deneyimini artırabiliriz.

  • Geolocation API: Kullanıcının konumunu alır.
  • Web Storage API: Tarayıcıda veri saklamayı sağlar.
  • Service Workers: Offline uygulamalar geliştirmek için kullanılır.

11.6 Test ve Hata Ayıklama

JavaScript ile geliştirilen uygulamalarda test ve hata ayıklama süreçleri de önemlidir. JavaScript uygulamalarını test etmek için:

  • Unit Test: Bireysel fonksiyonların test edilmesi.
  • Integration Test: Farklı bileşenlerin bir arada çalışmasının test edilmesi.
  • End-to-End Test: Uygulamanın tamamının gerçek bir kullanıcı gibi test edilmesi.

Kullanılan Araçlar:

  • Jest: JavaScript kodlarının test edilmesi için popüler bir test çerçevesidir.
  • Mocha: Asenkron testler yazmak için esnek bir test çerçevesidir.

12. Örnek Projeler

Artık CSS ile JavaScript’in etkileşimini ve ileri düzey konuları anladığımıza göre, birkaç uygulama projesiyle öğrendiklerimizi pekiştirelim.

12.1 Yapay Zeka Destekli Basit Anket Uygulaması

Bu uygulama, kullanıcılardan yanıtlar toplar ve yanıtları analiz eder.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Anket Uygulaması</title>
    <style>
        #sonuc {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Hangi programlama dillerini biliyorsunuz?</h1>
    <input type="checkbox" id="js"> JavaScript
    <input type="checkbox" id="py"> Python
    <input type="checkbox" id="java"> Java
    <button onclick="anketSonucu()">Gönder</button>
    <div id="sonuc"></div>

    <script>
        function anketSonucu() {
            let diller = [];
            if (document.getElementById("js").checked) diller.push("JavaScript");
            if (document.getElementById("py").checked) diller.push("Python");
            if (document.getElementById("java").checked) diller.push("Java");

            let sonuc = diller.length > 0 ? "Seçtiğiniz diller: " + diller.join(", ") : "Hiçbir dil seçmediniz.";
            document.getElementById("sonuc").innerHTML = sonuc;
        }
    </script>
</body>
</html>

12.2 Hava Durumu Uygulaması

Kullanıcıdan bir şehir alarak hava durumu bilgisini gösteren basit bir uygulama:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Hava Durumu Uygulaması</title>
</head>
<body>
    <h1>Hava Durumu Uygulaması</h1>
    <input type="text" id="sehir" placeholder="Şehir girin">
    <button onclick="havaDurumu()">Hava Durumunu Göster</button>
    <p id="sonuc"></p>

    <script>
        async function havaDurumu() {
            let sehir = document.getElementById("sehir").value;
            const API_KEY = 'YOUR_API_KEY'; // API anahtarınızı buraya ekleyin
            let yanit = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${sehir}&appid=${API_KEY}&units=metric`);
            let veri = await yanit.json();
            if (veri.cod === 200) {
                document.getElementById("sonuc").innerHTML = `Şehir: ${veri.name}, Sıcaklık: ${veri.main.temp}°C`;
            } else {
                document.getElementById("sonuc").innerHTML = "Şehir bulunamadı.";
            }
        }
    </script>
</body>
</html>

Bu örneklerde JavaScript’in HTML ile etkileşimi, CSS ile nasıl stil değişikliği yapıldığı ve ileri düzey JavaScript konuları üzerinde durduk. Gelişmiş uygulama projeleri ile gerçek dünya senaryolarında JavaScript’i nasıl kullanabileceğinizi gösterdik.

Osman Bayrak
Osman Bayrak

Yazılım Mühendisiyim. Teknoloji ve yazılıma meraklıyım.

Articles: 205