Web Grafik TasarımYazılım
En Çok Kullanılan JavaScript Kodları
Günümüzde en popüler ve işlevsel programlama dillerinden biri de JavaScript’tir. Etkin olarak web tarayıcılarında kullanılan bu script dil, web sayfasını kendi içinde daha dinamik bir hale getirdiği gibi tarayıcının kullanıcı ile etkileşime geçmesini de sağlar. İsim benzerlikleri dolayısıyla Java ve JavaScript sürekli birbirine karıştırılmaktadır. Ortak bazı özellikleri dışında bu iki dilin semantik yapıları birbirinden tamamen farklıdır. Böylece ikisinin birbirinden farklı olduğunun altını bir kez daha çizmiş olalım. Bu yazımızda JavaScript’ten bahsedeceğiz. Peki öyleyse JavaScript nedir? Öğrenimi kolay mıdır? En sık kullanılan JavaScript kodları nelerdir?
JavaScript, yaygın olarak web tasarımlarında, tarayıcıların kod yapılarında, mobil uygulamalarda ve çoğu oyunun yapımında kullanılır. Bu script dil ile yapılabilecek şeylerin sınırı yoktur, sizin yaratıcılığınıza ve yazdığınız kodlara bağlıdır. Web sitelerinin mükemmelleştirilmesini daha dinamik hale getirilmesini sağlar. Kullanıcı taraflı veya sunucu taraflı çalışır. Yazılan JavaScript kodları sayesinde tarayıcı kullanıcıyla iletişime geçebilir. Ayrıca tarayıcının kontrolü sağlanabilir, sunucu ile iletişime geçilmesiyle web sayfasının içeriği değiştirilebilir. Gördüğünüz gibi JavaScript işlevselliği çok yüksek bir script dildir. Kullanıcı ve sunucu tarafı da yaygın olarak kullanılmaktadır.
JavaScript Nedir?
JavaScript 1995 yılında Brendan Eich tarafından geliştirildi ve piyasaya sunuldu. Başlarda ismi Mocha olan bu yazılım dili, sonra LiveScript ile en son ise güncel ismi JavaScript ile değiştirildi. Bir Netscape çalışanı olan Eich’in geliştirdiği dil başta sınırlı işlevlere sahipti ancak zaman içinde geliştirici topluluğun yardımıyla da gelişimine devam edip büyümeyi sürdürdü.
Brendan Eich aynı zamanda Mozilla projesinin ve Mozilla vakfı ve şirketinin kurucu ortağıdır. Günümüzde JavaScript, Mozilla vakfı tarafından geliştirilmekte ve bakımı yapılmaktadır. 2016 yılından itibaren JavaScript, web sitelerinin %92’sinde kullanılan bir yazılım dili olmuştur. Bu kadar kısa süre içerisinde hızlı ve büyük bir başarıya ulaşması, JavaScript’in en çok tercih edilen yazılım dillerinden birisi olmasını sağlamaktadır.
JavaScript’in websitelerini daha dinamik hale getirdiğini ve kullanıcı ile iletişime geçilmesini sağladığını söylemiştik. Buna bir örnek olarak JavaScript, web sayfasının ortasına diyalog penceresi açar. Size “satın almak istediğinize emin misiniz?” ya da “bu işlem gerçekleştirilemiyor” uyarılarını verir. Ya da örneğin bir form dolduruyorsunuz ve yıldızlı yani zorunlu alanları doldurmadınız. İşte burada sizi uyaran, doldurmadığınız satıra geri döndüren şeydir JavaScript. Bu örnekler ise onun yapabildikleri yanında ufak ve basit örnekler olarak kalıyor. Ayrıca daha detaylı bilgi için “Yazılım Kursu ile Sıfırdan Kodlama Öğrenmek” konu başlıklı blog yazımızı incelemenizde oldukça yarar var.
JavaScript Kodları Nasıl Kullanılır?
JavaScript, her web tasarımcının öğrenmesi gereken üç yazılım dilinden biridir. İlki; HTML, ikincisi; CSS ve üçüncüsü, JavaScript’tir. HTML: web sayfalarının içeriğini tanımlar. CSS: web sayfalarının yerleşimini ve düzenini belirler. JavaScript: web sayfalarının hareketlerini programlar. JavaScript dosyalarının uzantısı kendini dosyanın sonunda .js olarak gösterir.
Her yazılım dilinin tanımlanması için belli başlar kodlar vardır. JavaScript’in tanımlanması için yapmanız gereken tek şey <script></script> etiketlerini kullanmaktır. Ekleyeceğiniz kodlar bu etiket arasında yer almalıdır. JavaScript kodları <head> ve <body> kısımlarına eklenebilmektedir. JavaScript kodları HTML dosyanızın neresine eklediğinize bağlı olarak farklı yükleme hızına sahip olabilmektedir. Genel olarak önerilen uygulama, yazacağınız kodu <head> bölümüne eklemektir. Bu sayede kodlar, esas HTML dosyanızdan ayrı kalacaktır. Ancak kodları <body> kısmına eklemeniz sayfa yüklenme hızını arttıracaktır. JavaScript kodları kolayca çözümleneceğinden site yükleme hızı daha fazla olacaktır.
Bir örnek vermek gerekirse: <script> alert (“Sayfaya giriş yapmaktasınız”); </script> yazdığını düşünelim. Sayfanız açıldığında “Sayfaya giriş yapmaktasınız” uyarısı çıkacaktır. Başka bir örnekle: Javascript’i bir yere tıklandığında mesaj vermesi için de kullanabilirsiniz. <button onclick=”alert(‘Evet! Kazandınız!’)”>Tıkla ve Kazan</button> yazdığınızda, butona tıklanıldığında bu mesaj karşınıza çıkacaktır.
JavaScript HTML nesnelerini değiştirmek, kopyalamak, silmek ve yeni HTML nesneleri eklemektedir. Kısacası HTML’nin daha dinamik bir şekilde kullanılmasını sağlar. Bu yüzden JavaScript kullanabilmek için HTML bilmeniz gerekir. Tarayıcıların hepsi JavaScript’i desteklemektedir. Aktifleştirmeniz için bir şey yapmanıza gerek yoktur.
JavaScript Kodları Dosyadan Nasıl Kullanılır?
Bir JavaScript dosyası oluşturmak ve HTML belgenizden çağırarak da kullanmak mümkün. Bu sayede kodlarınız karmaşık gözükmeyecek, daha sade bir görünümde olacaktır. Bunu yapabilmek için <script> koduna src=”” özelliği eklemeniz ve dosya adını ana dizine göre yazmanız gerekli. Örneğin dosyanızın adı: script.js. Yazacağınız kod şu şekilde olacaktır: <script src=”script.js”></script>
JavaScript Avantajları
Minimalize Edilmiş Sunucu Etkileşimi. Bir web sayfasının performansını optimize etmek istiyorsanız, en iyi yollardan biri sunucu ile olan iletişimi azaltmaktır. JavaScript, kullanıcı tarafındaki kullanıcı girişini doğrulayarak bu konuda yardımcı olur. İstekleri sunucuya, yalnızca ilk doğrulama denetimlerini çalıştırdıktan sonra gönderir. Böylece, kaynak kullanımı ve sunucuya gönderilen istek miktarını önemli ölçüde azaltır.
Daha Zengin ve Kullanıcı Dostu Ara Yüzler. JavaScript kodları sayesinde web sitenize kaydırıcılar, slayt gösterileri, efektler, sürükle bırak vb. gibi şeyleri ekleyebilirsiniz. Sitenizin daha dinamik ve interaktif bir görünüme kavuşmasını sağlayabilirsiniz.
Kullanıcıya Anında Geri Bildirim. JavaScript, kullanıcılara sağladığı yanıtlarla zaman ve emek kaybını önler. Örneğin bir kullanıcının bir formu doldurduğunu düşünün ve doldurulması gereken bir alanı boş bıraksın. Normalde bu boş alanı fark etmek için sayfanın yeniden yüklenmesi gerekecekti ancak JavaScript sayesinde kullanıcı uyarıyı alacak ve bu boş alanı hemen dolduracak.
Kolay Hata Ayıklama Özelliği. JavaScript, yorumlanmış bir yazılım dilidir. JavaScript kodları satır satır deşifre edilir. Nesne yönelimli oluşu sayesinde, satırda bulunan hata tespit edilir ve yazılımcıya kolaylık sağlanır.
JavaScript Kodları Örnekleri
JavaScript üzerinde uzmanlaştıkça yeni dünyalar keşfedeceğiniz bir yazılım dilidir. Öncelikle temel bilgileri öğrenmeli, fazlaca alıştırma yapmalı ve küçük adımlarla ilerlemelisiniz. En bilinen JavaScript kodları örneklerinin en standartlarından biri olan “Merhaba Dünya” örneği üzerinden ilerleyelim.
Test sitenizin olduğu klasörde “scripts” isimli bir dosya açın ve “main.js” adlı bir dosya yaratın. Sonrasında index.html dosyasının içindeki </body> etiketinden önceki satıra şu kodu ekleyin: <scripts src=”scripts/main.js”></script>
Bu kod JavaScript’i anasayfaya dahil eder ve JavaScript kodları sayfa üzerinde etkili olur. Sonrasında bu kodu “main.js” dosyasına ekleyin.
var myHeading = document.querySelector(‘h1’);
myHeading.textContent = ‘Hello World!’;
Son olarak HTML ve JavaScript dosyalarının kayıt edildiğinden emin olup, index.html dosyasını tarayıcıya yükleyin. Şimdi web sayfanızda Hello World yazısını görmüş olmalısınız. JavaScript sayesinde başlık metni “Hello World” olarak değiştirilmiş oldu. Bu ise querySelector() fonksiyonu sayesinde gerçekleştirildi.
JavaScript Bazı Anahtar Kelimeler
Gerçekleştirilecek olan JavaScript eylemlerinin tanımlanması için anahtar kelimeler kullanılır. Sık kullanılan anahtar kelimelerden bazıları:
Break: bir seçime veya döngüye son verir.
Continue: döngüden çıkıp en baştan başlanılmasını sağlar.
Debugger: JavaScript’in çalışmasını sonlandırır ve hata ayıklama komutu verir.
Function: bir işlevi bildirir.
Return: bir işlevden çıkar.
Var: bir değişken tanımlar.