JavaScript, modern web geliştirmede bir temel haline gelmiştir. Bu güçlü dil, herhangi bir web geliştiricisinin anlaması için önemli bir araç haline geldi.
JavaScript, onu geleneksel programlama dillerinden farklı kılan özel özelliklere sahiptir. Ne olduğunu, nasıl çalıştığını ve onunla neler yapabileceğinizi inceleyeceğiz. Hadi başlayalım.
JavaScript Nedir?
JavaScript, web için bir betik dilidir. Yorumlanmış bir dildir, yani kodunu C veya C++ gibi çevirmek için bir derleyiciye ihtiyaç duymaz. JavaScript kodu doğrudan bir web tarayıcısında çalışır.
Dilin en son sürümü, Haziran 2018’de yayınlanan ECMAScript 2018’dir.
JavaScript, web uygulamaları veya web sayfaları oluşturmak için HTML ve CSS ile çalışır. JavaScript, Google Chrome, Firefox, Safari, Microsoft Edge, Opera vb. Çoğu modern web tarayıcısı tarafından desteklenmektedir. Android ve iPhone için çoğu mobil tarayıcı artık JavaScript’i de desteklemektedir.
JavaScript, web sayfalarının dinamik öğelerini kontrol eder. Web tarayıcılarında ve daha yakın zamanda web sunucularında da çalışır. Uygulama Programlama Arabirimleri (API) de JavaScript tarafından desteklenir ve size daha fazla işlevsellik kazandırır.
Web programlamanın nasıl çalıştığını anladığınızda JavaScript’in tüm çalışma yöntemlerini anlamak biraz daha kolaydır, bu yüzden daha fazla bilgi edelim.
Web Uygulaması Yapı Taşları
Web siteleri ve uygulamalar oluşturan üç bileşen vardır: Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS) ve JavaScript. Her birinin bir web uygulaması oluşturma rolü vardır.
- HTML, web sayfasının iskeletini oluşturan bir biçimlendirme dilidir. Tüm paragraflar, bölümler, resimler, başlıklar ve metinler HTML ile yazılmıştır. İçerik, web sitesinde HTML’de yazıldığı sırada görünür.
- CSS, mizanpajın stilini ve ek özelliklerini kontrol eder. CSS, renkleri, yazı tiplerini, sütunları, kenarlıkları vb. Oluşturarak web sitesinin tasarımını oluşturmak için kullanılır. Web sitesini düz metin öğelerinden renkli tasarımlara götürür.
- Üçüncü öğe JavaScript’tir. HTML ve CSS yapıyı oluşturur, ancak oradan hiçbir şey yapmazlar. JavaScript, uygulamanızda dinamik etkinlik oluşturur. JavaScript’te komut dosyası oluşturmak, düğmeler tıklatıldığında işlevleri denetleyen, parola formlarının nasıl doğrulandığı, medyanın nasıl denetlendiğidir.
Her üç bölüm de tam ölçekli uygulamalar oluşturmak için birbirleriyle uyumlu çalışır.
JavaScript Nasıl Çalışır?
JavaScript yazmadan önce, başlık altında nasıl çalıştığını bilmek önemlidir. Öğrenilecek iki önemli parça vardır: Web tarayıcısı ve Belge Nesne Modeli (DOM) nasıl çalışır.
Web tarayıcısı bir web sayfası yükler, HTML’yi ayrıştırır ve içerikten Belge Nesne Modeli (DOM) olarak bilinen şeyi oluşturur. DOM, web sayfasının JavaScript kodunuza canlı bir görünümünü sunar.
Tarayıcı daha sonra resimler ve CSS dosyaları gibi HTML ile bağlantılı her şeyi alır. CSS bilgileri CSS ayrıştırıcısından gelir.
Önce web sayfasını oluşturmak için HTML ve CSS, DOM tarafından bir araya getirilir. Daha sonra, tarayıcıların JavaScript motoru JavaScript dosyalarını ve satır içi kodu yükler, ancak kodu hemen çalıştırmaz. HTML ve CSS’nin yüklemeyi bitirmesini bekler.
Bu yapıldıktan sonra JavaScript kodun yazıldığı sırada yürütülür. Bu, DOM’nin JavaScript koduyla güncellenmesine ve tarayıcı tarafından oluşturulmasına neden olur.
Buradaki düzen önemlidir. JavaScript HTML ve CSS’nin bitmesini beklemiyorsa, DOM öğelerini değiştiremez.
JavaScript ile Ne Yapabilirim?
JavaScript, Python gibi normal bir dilin yapabileceği birçok şeyi yapabilen tam teşekküllü bir programlama dilidir. Bunlar:
- Değişkenlerin bildirilmesi.
- Değerlerin saklanması ve alınması.
- Fonksiyonları tanımlama ve çağırma.
- JavaScript nesnelerini ve sınıflarını tanımlama.
- Harici modüllerin yüklenmesi ve kullanılması.
- Tıklama olaylarına yanıt veren olay işleyicileri yazma.
- Sunucu kodu yazma.
- Ve daha fazlası.
JavaScript kullanma
Kod örnekleriyle bazı JavaScript temellerine bakalım.
Değişkenleri bildirme
JavaScript dinamik olarak yazılmıştır, yani kodunuzdaki değişkenlerinizin türünü bildirmeniz gerekmez.
1 2 3 4 5 | let sayi= 5; let deger= "merhaba"; var oran= 0.25; |
Operatörler
Toplama
1 2 3 | 12 + 5 |
Çıkarma
1 2 3 | 20 - 8 |
Çarpma
1 2 3 | 5 * 3 |
Bölme
1 2 3 | 10 / 7 |
Mod Alma
1 2 3 | 10 % 3 |
Diziler
1 2 3 4 | let dizi1= [1,2,4,5]; let dizi2= ["merhaba","dünya"]; |
Fonksiyonlar
1 2 3 4 5 6 7 8 | function topla(s1,s2){ return s1+ s2; } >> topla(10,5); >> 15 |
Döngüler
JavaScript while ve for gibi döngüleri gerçekleştirebilir.
1 2 3 4 5 | for(let i = 0; i < 3; i++){ console.log("merhaba!"); } |
1 2 3 4 5 6 7 | let i = 0; while(i < 3) { console.log("merhaba!"); i++; } |
Yorumlar
1 2 3 | // bu tek satırlık bir yorum |
1 2 3 4 5 6 7 | /* Bu çok satırlı bir yorum yorum yazmaya devam ediyorum hala yorum yazıyorum burası da yorum içinde */ |
Web Sayfasında
Bir web sayfasına JavaScript yüklemenin en yaygın yolu komut dosyası HTML etiketini kullanmaktır. Gereksinimlerinize bağlı olarak, aşağıdaki yöntemlerden birini kullanabilirsiniz.
Harici bir JavaScript dosyasını bir web sayfasına aşağıdaki gibi yükleyin:
1 2 3 | <script type="text/javascript" src="/yol/jsdosyaadi.js"></script> |
Javascript web sayfasından farklı bir etki alanından geliyorsa tam URL’yi aşağıdaki gibi belirleyebilirsiniz:
1 2 3 | <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
JavaScript doğrudan HTML’ye gömülebilir. İşte bir
1 2 3 4 5 | script type="text/javascript"> alert("Sayfa Yüklendi!"); </script> |
Bu yöntemler dışında, istek üzerine JavaScript kodunu yüklemenin yolları vardır. Aslında, JavaScript modüllerinin yüklenmesi ve çalıştırılması için özel bağımlılıklar ve çalışma zamanında çözülmüş çerçeveler vardır.
Yorum Yap