JavaScript, web sayfalarını eğlenceli ve etkileşimli hale getirmeye yardımcı olan özel bir dildir. Birçok kişi tarafından heyecan verici web siteleri oluşturmak için kullanılır. Web geliştirmede JavaScript, web sitelerine hayat veren sihirli bir araç gibidir. Metni değiştirebilir, resimleri hareket ettirebilir ve hatta sizinle konuşabilir!
JavaScript bir bilgisayar dilidir. Bilgisayara bir web sayfasında basit ve eğlenceli şeyleri nasıl yapacağını söyler. Bir web sitesinde bir düğmeye tıkladığınızda veya bir animasyon gördüğünüzde, JavaScript perde arkasında çalışır. Web geliştirmenin temel araçlarından biridir.
Bir oyuncak robotunuz olduğunu düşünün. Robota talimatlar vererek ne yapması gerektiğini söylüyorsunuz. JavaScript de bilgisayara bu şekilde talimatlar veriyor.
Web siteleri metin, resim ve renklerden oluşur. Ancak size tepki verdiklerinde daha da eğlenceli hale gelebilirler. JavaScript, web sitelerinin sizi dinlemesine ve bir sonraki adımda ne yapacağına karar vermesine yardımcı olur. Örneğin, bir düğmeye bastığınızda renginin değişmesini sağlar veya bir bağlantıya tıkladığınızda bir mesaj gösterebilir.
Bu, web sitelerini sadece güzel resimler değil, aynı zamanda etkileşim kurabileceğiniz canlı mekanlar haline getirir. Bir web sitesinde oyun oynadığınızda veya etkileşimli bir hikayeyi keşfettiğinizde, JavaScript bunu gerçekleştirir.
JavaScript, anlaşılması kolay bazı basit fikirlere sahiptir. Bu fikirleri yapı taşları olarak düşünün. Bunları bir araya getirdiğinizde, web'de harika şeyler yaratabilirsiniz. İşte bazı temel fikirler:
Bu fikirlerin her biri daha karmaşık ve etkileşimli web sayfaları oluşturmanıza yardımcı olur.
Değişken, adı olan özel bir kutu gibidir. Bir kutunun içine farklı türden şeyler koyabilirsiniz. Bazen içine sayılar, bazen de kelimeler koyabilirsiniz. JavaScript'te let veya var gibi kelimeler kullanarak bir değişken oluşturabilirsiniz.
Örneğin isminizi saklamak istiyorsanız şu kodu yazabilirsiniz:
let myName = "Sam";
Bu kod "myName" adında bir kutu oluşturuyor ve içine "Sam" kelimesini koyuyor.
Depolayabileceğiniz farklı veri türleri vardır. Bazıları şunlardır:
Değişkenler, web sitesi çalışırken değişebilecek bilgilerin tutulmasına yardımcı olur.
JavaScript'te bir fonksiyon , tek bir işi yapan küçük bir makine gibidir. Makineye bir ad verirsiniz ve hangi görevi tamamlaması gerektiğini söylersiniz. Daha sonra, bu işi ne zaman yapmanız gerekirse, fonksiyonu çağırırsınız.
Örneğin merhaba demek istiyorsanız şöyle bir fonksiyon yazabilirsiniz:
sayHello() fonksiyonu {
alert("Merhaba, arkadaşım!");
}
sayHello() fonksiyonunu çağırdığınızda, "Merhaba arkadaşım!" diyen küçük bir mesaj belirir. Bu, bir düğmeye bastığınızda kısa bir şarkı çalan bir oyuncağa benzer.
Bazen bir bilgisayarın bir sonraki adımda ne yapacağını seçmesi gerekir. İşte tam bu noktada koşullu ifadeler devreye girer. Bunlar, bir şeyin doğru olup olmadığını kontrol ederek bilgisayarın karar vermesine yardımcı olur.
Şöyle düşünün: Yağmur yağıyorsa şemsiye almaya karar verebilirsiniz. Yağmur yağmıyorsa şemsiyeye ihtiyacınız yoktur. JavaScript'te şöyle basit bir koşul yazabilirsiniz:
eğer (sıcaklık > 30) {
alert("Dışarısı çok sıcak!");
} başka {
alert("Çok sıcak değil!");
}
Bu kod, sıcaklığın 30'dan büyük olup olmadığını kontrol eder. Eğer 30'dan büyükse, sıcak olduğunu belirtir. Eğer değilse, çok sıcak olmadığını belirtir.
Döngüler, bir dizi talimatı defalarca tekrarlamanıza olanak tanır. Atlıkarıncanın etrafında dönüp durmak gibidirler. Aynı kodu tekrar tekrar yazmak yerine, bir döngü bunu sizin için yapar.
Örneğin, "Kodlamayı seviyorum!" ifadesini beş kez söylemek istiyorsanız, bir döngü kullanabilirsiniz:
(let i = 0; i < 5; i++) için {
console.log("Kodlamayı seviyorum!");
}
Bu kod, bilgisayardan cümleyi beş kez yazdırmasını ister. Bu, oyuncaklarınızı tek tek saymak gibidir.
JavaScript'te olaylar , bilgisayara bir şey olduğunu bildiren sinyallerdir. Bu olaylar bir fare tıklaması, bir tuşa basma veya hatta pencere boyutunda bir değişiklik olabilir. Bilgisayar bu olayları dinler ve ardından yanıt verir.
Örneğin, bir web sayfasındaki bir düğmeye tıkladığınızda bir olay gerçekleşir. JavaScript bu tıklamayı algılayabilir ve ardından yanıt vermek için bir işlev çalıştırabilir. İşte basit bir örnek:
let button = document.getElementById("benimDüğmem");
button.addEventListener("tıkla", function() {
alert("Düğmeye tıkladınız!");
});
Bu kod, "myButton" kimliğine sahip bir düğme bulur ve tıklamayı dinler. Düğmeye tıklandığında, "Düğmeye tıkladınız!" mesajını görüntüler.
Belge Nesne Modeli veya DOM , bir web sayfasının tüm bölümlerine bakmanın ve bunlarla etkileşim kurmanın bir yoludur. DOM'u bir ağaç olarak düşünün. Ağacın birçok dalı vardır ve her dal, sayfadaki bir paragraf, bir resim veya bir düğme gibi bir öğeyi temsil eder.
JavaScript bu dalları değiştirebilir. Yeni öğeler ekleyebilir, eskilerini kaldırabilir veya değiştirebilir. Örneğin, bir düğmeye tıkladığınızda bir paragrafın içindeki metni değiştirebilir.
Bu önemlidir çünkü etkileşimli web siteleri oluşturmaya yardımcı olur. DOM kullanarak web sayfanız, yeniden yüklemeye gerek kalmadan dinamik olarak değişebilir.
JavaScript'in nasıl çalıştığını gösteren basit bir örneğe bakalım. Bir düğmesi olan bir web sayfanız olduğunu düşünün. Düğmeye tıkladığınızda "merhaba" demesini istiyorsunuz. Kodu şöyle yazabilirsiniz:
<!DOCTYPE html>
<html>
<kafa>
<title>Basit JavaScript Örneği</title>
</head>
<gövde>
<button id="greetButton">Bana tıkla!</button>
<komut dosyası>
greetUser() işlevi {
alert("Merhaba, arkadaşım!");
}
let button = document.getElementById("selamlamaDüğmesi");
button.addEventListener("tıkla", Kullanıcıyı selamla);
</script>
</body>
</html>
Bu kod, web sayfasında bir düğme oluşturur. Düğmeye tıklandığında, greetUser() fonksiyonu çalışır ve "Merhaba arkadaşım!" mesajını içeren bir açılır pencere görüntülenir.
JavaScript basit matematik işlemlerini de yapabilir. Sayıları toplayabilir, çıkarabilir, çarpabilir ve bölebilir. Bu özellik, küçük uygulamalar ve hatta oyunlar geliştirmek için oldukça kullanışlıdır.
Örneğin, iki sayıyı toplamak istiyorsanız şunu yazabilirsiniz:
sayı1 = 5 olsun;
sayı2 = 3 olsun;
toplam = sayı1 + sayı2 olsun;
alert("Toplam " + toplamdır);
Bu kod 5 ve 3 olmak üzere iki sayıyı alır, bunları toplar ve ardından "Toplam 8'dir" mesajını gösterir.
Düğmeler, animasyonlar veya oyunlar içeren bir web sitesini her ziyaret ettiğinizde, JavaScript muhtemelen devreye girer. Web sitelerini dinamik ve keyifli hale getirir. Örneğin, çevrimiçi alışveriş yaparken veya video izlerken, JavaScript perde arkasında önemli bir rol oynar.
Sayfanın bazı bölümlerini hızlı bir şekilde yüklemenize, hataları kontrol etmenize ve hatta sayfayı yeniden yüklemenize gerek kalmadan yeni bilgiler göstermenize yardımcı olur. YouTube, Facebook ve diğer birçok web sitesi, sizin için sorunsuz bir deneyim oluşturmak amacıyla JavaScript kullanır.
JavaScript öğrenmek, renkli LEGO bloklarıyla oynamaya benzer. Her blok küçük bir kod parçasıdır. Birçok bloğu birleştirdiğinizde harika bir şey inşa edebilirsiniz. İlk başta basit bir ev inşa etmek için sadece birkaç blok kullanabilirsiniz. Daha sonra daha fazla blok kullanmayı ve büyük bir kale, hatta bir uzay gemisi inşa etmeyi öğrenirsiniz!
JavaScript'i anlamanın en iyi yolu, küçük parçalar oluşturup bunları bir araya getirerek eksiksiz bir web sayfası oluşturmaktır. Öğrendiğiniz her yeni fikir, web sitesi projeleriniz için bir LEGO bloğu daha demektir.
JavaScript'i daha da güçlü kılan birçok yardımcı program vardır. Bu yardımcı programlara kütüphaneler ve çerçeveler denir. Bunlar, özel şekillerde gelen ekstra LEGO blok setleri gibidir. Bazı popüler JavaScript yardımcı programları şunlardır:
Bu araçlar, birçok geliştiricinin tüm kodu kendi başına yazmak zorunda kalmadan harika web siteleri oluşturmasına yardımcı oluyor. Eğlence amaçlı bir dilin bile gerçek dünyada güçlü bir araç olabileceğini gösteriyorlar.
Web tarayıcısı, web sitelerini ziyaret etmek için kullandığınız programdır. Popüler tarayıcılar Chrome, Firefox, Safari ve Edge'dir. JavaScript bu tarayıcıların içinde çalışır. Web sayfanıza JavaScript kodu yazdığınızda, tarayıcı bunu okur ve sayfanızı etkileşimli hale getirir.
Tarayıcıyı bir sahne, JavaScript'i ise bir aktör olarak düşünün. Aktör, senaryoyu (kodunuzu) takip eder ve bir gösteri sunar. JavaScript olmadan sahne boş kalır ve gösteri neredeyse hiç ilgi çekici olmazdı.
Bir web sayfasını açtığınızda tarayıcı aşağıdakileri yapar:
Bu süreç JavaScript'in bir web sayfasının görünümünü ve hissini nasıl tamamladığını gösterir.
JavaScript, günlük hayatımızda birçok eğlenceli ve faydalı şekilde kullanılmaktadır. İşte bazı örnekler:
Bu örnekler, JavaScript'in yalnızca ekrandaki kodlardan ibaret olmadığını gösteriyor. Teknolojiyi günlük faaliyetlerimize bağlayan bir köprü görevi görüyor.
Genç olsanız bile, basit projeler düşünerek JavaScript öğrenmeye başlayabilirsiniz. Bir düğmeye bastığınızda arka plan rengi değişen bir web sayfasıyla başlayabilirsiniz. Ya da farklı bölümlerine tıkladığınızda değişen küçük bir hikaye oluşturabilirsiniz.
Ne kadar küçük olursa olsun her proje, bir web sitesinin nasıl çalıştığı hakkında size daha fazla şey öğretir. Her adım, tıpkı tam kelimeleri yazmadan önce alfabeyi öğrenmek gibi, özgüveninizi artırır.
JavaScript, yaratıcı olmanızı sağlayan bir araçtır. Sadece öğrenmek veya ciddi web siteleri oluşturmak için değil, aynı zamanda yaratıcılığınızı ifade etmenin bir yoludur. JavaScript ile oyunlar, etkileşimli hikayeler ve hatta animasyonlar tasarlayabilirsiniz.
JavaScript ile çalıştığınızda, kendinizi kodla resim yapan bir sanatçı olarak düşünebilirsiniz. Her fonksiyon ve her değişken, web üzerinde güzel bir resim oluşturmanıza yardımcı olur.
Unutmayın, JavaScript'te yaratıcılık, büyük beyaz bir kağıda parlak boya kalemleriyle çizim yapmak gibidir. Sınır yoktur ve hayal gücünüz size rehberlik eder.
JavaScript, web geliştirmede kullanılan bir bilgisayar dilidir. Web sitelerinin etkileşimli ve canlı olmasına yardımcı olur. JavaScript ile web sayfalarına metin değiştirme, tıklamalara tepki verme ve hatta basit hesaplamalar yapma gibi eğlenceli eylemler ekleyebilirsiniz.
JavaScript'in temel yapı taşları şunlardır:
JavaScript ayrıca tıklama ve tuş vuruşu gibi olayları da dinler. Belge Nesne Modeli (DOM) ile birlikte çalışarak, bir web sayfasında gördüklerinizi sayfayı yeniden yüklemenize gerek kalmadan değiştirir. Bu da web sitelerini dinamik ve eğlenceli hale getirir.
Birçok popüler web sitesi ve çevrimiçi oyun JavaScript kullanır. JavaScript her yerdedir! Karşılama butonlu basit web sitelerinden karmaşık çevrimiçi uygulamalara kadar her şeyin merkezinde JavaScript vardır.
JavaScript öğrenmek, LEGO bloklarıyla bir şeyler inşa etmeye benzer. Küçükten başlayın, her seferinde bir parçayı öğrenin ve kısa sürede harika projeler yaratabileceksiniz. Her yeni fikir, yaratıcılık alet çantanızdaki yeni bir araçtır.
Bu derste, JavaScript'in HTML ve CSS ile birlikte web sitelerini nasıl canlandırdığını gördük. Değişkenler, fonksiyonlar, koşullar, döngüler, olaylar ve DOM hakkında bilgi edindik. Ayrıca, bu parçaların nasıl bir araya geldiğini anlamak için basit örneklere de baktık.
Hatırlanması Gereken Önemli Noktalar:
JavaScript'i keşfetmeye ve öğrenmeye devam edin. Yazdığınız her yeni kodla, web geliştirmede yaratıcı olasılıklarla dolu bir dünyanın kapılarını aralayın. Yolculuğunuzun tadını çıkarın ve web sitelerinizi hayata geçirirken eğlenin!