JavaScript Nedir?
JavaScript, web sayfalarına etkileşim katmak için kullanılan, istemci taraflı çalışan bir programlama dilidir. HTML ve CSS ile birlikte web teknolojilerinin temel taşlarından biridir. Dinamik web sayfaları oluşturmak, kullanıcı etkileşimlerini yönetmek ve web uygulamalarını geliştirmek için kullanılır. Bu yazıda, Javascript nedir, ne olduğunu, nasıl çalıştığını ve temel kullanımını adım adım ele alacağız.
JavaScript, 1995 yılında Brendan Eich tarafından geliştirilen bir programlama dilidir. İlk başta tarayıcılar üzerinde çalışan bir dil olarak tasarlansa da günümüzde Node.js sayesinde sunucu tarafında da çalıştırılabilir. JavaScript; HTML ve CSS ile birlikte modern web geliştirmede temel taşlardan biridir. JavaScript’in en büyük avantajı, tarayıcıda çalışabilmesi ve sayfa yenilemesine gerek kalmadan kullanıcı etkileşimlerini yönetebilmesidir.
JavaScript’in Özellikleri
- Dinamik ve Zayıf Tür Tanımlı: JavaScript değişkenleri belirli bir türde tanımlanmak zorunda değildir ve bu türler dinamik olarak değiştirilebilir.
- Çok Yönlü: Hem istemci tarafında (tarayıcı) hem de sunucu tarafında (Node.js) çalışabilir.
- Olay Tabanlı: Kullanıcı etkileşimlerine göre tetiklenebilen olaylarla çalışır.
JavaScript’in Kullanım Alanları
- Web Sayfalarında Etkileşim: Form doğrulama, dinamik içerik değiştirme, menü hareketleri.
- Web Uygulamaları: Single Page Applications (SPA) ile sayfa yenilemeden dinamik içerik sunumu.
- Sunucu Tarafı Geliştirme: Node.js ile sunucu tarafında çalışabilir ve API geliştirme yapılabilir.
- Mobil ve Masaüstü Uygulamalar: React Native, Electron gibi araçlarla mobil ve masaüstü uygulamalar geliştirilebilir.
JavaScript Nasıl Çalışır?
JavaScript, tarayıcının JavaScript motoru tarafından çalıştırılır. HTML dosyasına bir <script> etiketi eklenerek JavaScript kodu çalıştırılır.
JavaScript Koduna Yakından Bakalım
Aşağıdaki basit örnekte, bir web sayfasına JavaScript ekleme adımlarını göstereceğiz. Aşağıda bulunan kodda, temel olarak bir web sayfası üzerinde bir paragrafın içeriğini değiştiren basit bir örnektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>İlk JavaScript Kodu</title> </head> <body> <h1>JavaScript'e Giriş</h1> <!-- Bir paragraf etiketi içerisinde id belirlemesi yapıyoruz, bu belirlediğimiz id ile metin üzerinde işlem yapacağız. CSS kodları üzerinde tanımlanan id/class yapısıyla aynı mantık ile bir id sınıfı tanımlıyoruz ve içerisinde verisini yazıyoruz. Deneme amaçlı bu paragraf metninin içeriğini " TEST " olarak yazdık. --> <p id="mesaj">TEST</p> <script> // Yukarıda belirlediğimiz mesaj id sınıfında işlem yapmak için javascript kodu document.getElementById("mesaj").innerText = "Merhaba, JavaScript çalışıyor!"; </script> </body> </html> |
Kodun Açıklaması
<p id="mesaj">TEST</p>: Bu, bir paragraf (<p>) etiketi oluşturur ve bu etiketin içeriği başlangıçta “TEST” olarak belirlenmiştir. Aynı zamanda bu paragrafa birid="mesaj"değeri verilmiştir.idözelliği, JavaScript ile bu elementi kolayca seçip değiştirmemize olanak sağlar.document.getElementById("mesaj"): Bu, sayfadaki tüm HTML elemanlarını temsil edendocumentnesnesine erişir.getElementById("mesaj")ile,id="mesaj"olan HTML elementini seçer. Yani, bu ifade, yukarıda tanımlanan<p id="mesaj">etiketini hedef alır..innerText = "Merhaba, JavaScript çalışıyor!": Bu, seçilen paragrafın içeriğini değiştirir. Başlangıçta paragrafın içinde “TEST” yazıyordu, ancak JavaScript ile bu içerik"Merhaba, JavaScript çalışıyor!"olarak değiştirilir.
Ekran Çıktısı:
Web sayfası açıldığında “TEST” olan paragrafın içeriği “Merhaba, JavaScript çalışıyor!” olarak değişecektir.
Temel programlama dillerinde syntax yapılarına baktığınız zaman hepsi aynı yapıda ve mantıkta çalışmaktadır. Döngü yapıları, diziler, değişkenler, fonksiyonlar gibi tanımlamalar ortak bir yapı içerisinde olduğu için hemen hemen bütün dillerde sabit yapıdadır. Javascript’e olan bu giriş yazımızda temel syntax yapısına hakim olmanız açısından temel yapısına bir giriş yapacağız. Örneklerle js çalışma mantığını daha kolay kavrayabilirsiniz.
1. Konsola Yazı Yazdırma
Bu kod, tarayıcı konsoluna “Merhaba Dünya!” mesajını yazdırır.
1 | console.log("Merhaba Dünya!"); |
2. Değişken Tanımlama ve Kullanma
Bu kodda, iki değişken tanımlanır ve ardından bu değişkenler kullanılarak bir mesaj yazdırılır.
1 2 3 | let isim = "Oktay"; let yas = 24; console.log(isim + " " + yas + " yaşında."); |
3. Değişken Tanımlama ve İşlem Yaptırma
Bu kod, iki sayıyı toplayan bir fonksiyon tanımlar ve sonucu ekrana yazdırır.
1 2 3 4 5 6 | function toplama(a, b) { return a + b; } let sonuc = toplama(5, 10); console.log("Sonuç: " + sonuc); |
4. Koşul İfadesi (if-else)
Bu kod, sayi değişkeninin değerine bağlı olarak farklı mesajlar yazdırır.
1 2 3 4 5 6 7 | let sayi = 10; if (sayi > 5) { console.log("Sayı 5'ten büyüktür."); } else { console.log("Sayı 5'ten küçük veya eşittir."); } |
5. Döngü (for loop)
Bu kod, 1’den 5’e kadar olan sayıları döngüyle ekrana yazdırır.
1 2 3 | for (let i = 1; i <= 5; i++) { console.log("Döngü sayısı: " + i); } |
6. Array (Dizi) Kullanımı
Bu kod, bir dizi (array) tanımlar ve dizi elemanlarını kullanır.
1 2 3 4 | let meyveler = ["Elma", "Armut", "Muz"]; console.log(meyveler[0]); // "Elma" yazdırır console.log(meyveler.length); // Dizi uzunluğunu yazdırır |
Emeğiniz için saolun