JavaScript Nedir ve Neden Önemlidir?
Giray Aslan
·
·
11 dk okuma
JavaScript, 1995 yılında Netscape Communications tarafından geliştirilmeye başlanmış olan bir programlama dilidir. Orijinal olarak, tarayıcılarla etkileşimli web sayfaları oluşturmak için tasarlanmıştır. JavaScript, HTML ve CSS ile birlikte web geliştirme üçlüsünün bir parçası olarak kullanılır ve tarayıcıların kullanıcılarla etkileşimde bulunmasını, dinamik içerik oluşturmasını ve web uygulamalarını geliştirmesini sağlar. JavaScript, web geliştirme için kullanılan bir programlama dilidir. JavaScript, tarayıcı tarafında (client-side) çalışan bir dildir ve web sayfalarına dinamiklik, etkileşim ve kullanıcı deneyimi eklemek için kullanılır. JavaScript, tarayıcıların çoğunda doğal olarak desteklenir, bu nedenle web sayfalarında kullanmak için ek bir eklenti veya yazılım yüklemeye gerek yoktur.
JavaScript Temelleri: Değişkenler, Veri Tipleri ve Operatörler
JavaScript, web geliştirmenin temel taşlarından biridir ve modern web sayfalarını dinamik ve etkileşimli hale getirmek için kullanılır. Değişkenler JavaScript'te değişkenler, veri saklamak için kullanılan isimlendirmelere denir. Değişkenleri tanımlarken dikkat etmeniz gereken bazı önemli kurallar vardır. Örneğin: var isim = "John"; Bu kod parçasında, "isim" adında bir değişken tanımladık ve bu değişkene "John" metnini atadık. JavaScript'te değişkenler "var", "let" ve "const" anahtar kelimeleriyle tanımlanabilir. Değişken Tanımlama ve Atama Değişkenleri tanımladıktan sonra, bu değişkenlere değer atayabilirsiniz. Aynı zamanda değişkenlerinizi farklı değerlerle güncelleyebilirsiniz. Örnekler: var sayi = 42; // Sayı değişkeni tanımlama ve atama let isim = "Alice"; // Metin değişkeni tanımlama ve atama const PI = 3.14159265359; // Sabit bir değer tanımlama Veri Tipleri JavaScript'te kullanılan temel veri tipleri şunlardır:- Sayılar (Numbers)
- Metinler (Strings)
- Mantıksal Değerler (Booleans)
- Diziler (Arrays)
- Nesneler (Objects)
- Aritmetik Operatörler (+, -, *, /, %)
- Karşılaştırma Operatörleri (==, ===, !=, !==, >, <, >=, <=)
- Mantıksal Operatörler (&&, ||, !)
JavaScript'in 4 Temel Görevi
1-İçerik Manipülasyonu JavaScript, web sayfalarındaki içeriği dinamik olarak değiştirmek için kullanılır. Bu, kullanıcının bir olayı tetiklemesi (örneğin bir düğmeye tıklama) veya belirli bir zaman aralığında otomatik olarak gerçekleşmesini istediğiniz işlemleri içerebilir. Bazı örnekler: Metin Değiştirme: JavaScript, belirli bir HTML öğesindeki metni değiştirebilir. Örneğin, bir başlık veya paragrafın metnini güncelleyebilirsiniz.Örnek kod: document.getElementById("baslik").innerHTML = "Yeni Başlık"; Görsel Değiştirme: JavaScript, sayfadaki resimleri veya görselleri değiştirebilir. Bu, bir resmi yükleyen veya bir görüntünün URL'sini güncelleyen işlevleri içerebilir. Örnek kod: document.getElementById("resim").src = "yeni_resim.jpg"; Stil Değiştirme: Web sayfalarının stilini dinamik olarak değiştirebilirsiniz. Örneğin, bir düğmeye tıklama sonrası arka plan rengini değiştirmek gibi. Örnek kod: document.getElementById("dugme").style.backgroundColor = "blue"; Eleman Ekleme veya Kaldırma: JavaScript, sayfada yeni HTML öğeleri eklemek veya mevcut öğeleri kaldırmak için kullanılabilir. Örnek kod: var yeniParagraf = document.createElement("p"); yeniParagraf.innerHTML = "Yeni bir paragraf metni"; document.getElementById("icerik").appendChild(yeniParagraf); Bu örnekler, JavaScript'in içerik manipülasyonu yeteneklerini göstermektedir. Web sayfalarının kullanıcılarla etkileşimde bulunmasını, içeriği güncellemesini ve daha zengin ve interaktif deneyimler sunmasını sağlar. 2-Kullanıcı Etkileşimi JavaScript, web sayfalarında kullanıcıların etkileşimde bulunmasını sağlamak için kullanılır. Bu, kullanıcıların belirli olayları tetiklemesi veya web sayfasındaki öğelerle etkileşimde bulunması anlamına gelir. JavaScript'in sunduğu bazı yetenekler: Form Doğrulama: Web formlarının (örneğin, kayıt veya giriş formları) verilerini kontrol etmek ve doğrulamak için JavaScript kullanılabilir. Kullanıcıların girdiği verileri kontrol ederek hataları önleyebilir ve kullanıcıları geri bildirimlerle yönlendirebilirsiniz. Örnek kod: function formuKontrolEt() { var ad = document.getElementById("ad").value; if (ad === "") {alert("Ad alanı boş bırakılamaz!"); return false;} // Diğer doğrulama kontrolleri burada yapılabilir return true;} Düğme Tıklama İzleme: JavaScript, kullanıcıların belirli bir düğmeye tıklamalarını takip edebilir ve bu tıklamaları işlemek için işlevler tetikleyebilir. Bu, örneğin bir "Gönder" düğmesine tıklanması durumunda form verilerini sunucuya göndermek için kullanılabilir. Örnek kod: document.getElementById("gonderDugmesi").addEventListener("click", function() {// Gönderme işlemi burada gerçekleştirilebilir }); Mouse Hareketleri: JavaScript, kullanıcıların fare işaretçileriyle etkileşimini takip edebilir. Fare üzerine geldiğinde veya tıkladığında belirli öğeler üzerinde değişiklikler yapabilir veya ek bilgi gösterebilirsiniz. document.getElementById("hoverEtkilesim").addEventListener("mouseenter", function() { // Fare öğenin üzerine geldiğinde bu işlev çalışır}) ; Klavye Etkileşimi: Kullanıcıların klavye girişlerini izlemek ve belirli tuşlara veya tuş kombinasyonlarına tepki vermek için JavaScript kullanılabilir. Örneğin, bir oyunun klavye kontrollerini işlemek için kullanılabilir. Örnek kod: document.addEventListener("keydown", function(event) {if (event.key === "ArrowLeft") {// Sol ok tuşuna basıldığında yapılacak işlemler}}); Kullanıcı etkileşimi, web sayfalarının daha dinamik ve kullanıcı dostu olmasını sağlar ve kullanıcıların çevrimiçi deneyimlerini daha etkileşimli hale getirir. 3-Veri İletişimi JavaScript, web sayfalarının sunucularla iletişim kurmasını ve veri alışverişi yapmasını sağlayan bir dildir. Bu, kullanıcıların web sayfalarında dinamik içerikleri görmesine ve güncel verilere erişmesine olanak tanır. Bu bağlamda JavaScript'in veri iletişimi yeteneklerine ilişkin bazı örnekler: Sunucuyla Veri Gönderme ve Alma: JavaScript, sunuculara HTTP istekleri gönderme yeteneğine sahiptir. Bu, kullanıcıların bir web formunu doldurduğunda veya bir düğmeye tıkladığında sunucuya veri göndermesine olanak tanır. Sunucudan veri almak için ise JavaScript, sunucudan gelen verileri işleyebilir ve sayfada gösterebilir. Örnek kod: // Sunucuya POST isteği gönderme örneği (fetch kullanarak) fetch("/sunucu_adresi", {method: "POST", body: JSON.stringify({ veri: "Değer" }), headers: {"Content-Type": "application/json"}}).then(response => response.json()).then(data => {// Sunucudan gelen verileri işleme}); API İle Etkileşim: JavaScript, dış API'larla iletişim kurabilir ve bu API'lar üzerinden veri alabilir veya veri gönderebilir. Bu, hava durumu bilgileri almak, harita hizmetlerini kullanmak veya sosyal medya platformlarının verilerini görüntülemek gibi çeşitli uygulamalarda kullanılır. Örnek kod: // Harita verilerini almak için Google Maps API ile etkileşim örneği fetch("https://maps.googleapis.com/maps/api/geocode/json address=New+York") .then(response => response.json()) .then(data => { // Harita verilerini işleme }); Web Soketleri: JavaScript, web soketleri aracılığıyla sunucu ile gerçek zamanlı iletişim kurabilir. Bu, anlık sohbet uygulamaları, canlı oyunlar ve diğer gerçek zamanlı uygulamalarda kullanılır. Örnek kod: // Web soketi ile sunucu ile bağlantı kurma var socket = new WebSocket("wss://sunucu_adresi"); // Sunucudan gelen verileri dinleme socket.addEventListener("message", function(event) { var veri = event.data; // Veriyi işleme }); // Veri gönderme socket.send("Merhaba sunucu!"); Veri iletişimi, web uygulamalarının güncel ve dinamik olmasını sağlar ve kullanıcıların anlık olarak verilere erişmelerini sağlar. JavaScript'in bu yetenekleri, modern web geliştirmenin önemli bir parçasıdır. 4-Animasyon ve Görsel Efektler JavaScript, web sayfalarına animasyonlar, görsel efektler ve geçişler eklemek için kullanılır. Bu, kullanıcı deneyimini zenginleştirmek ve web sayfalarının daha çekici hale getirmek için önemlidir. JavaScript animasyon ve görsel efektlerle ilgili bazı örnekler: Animasyonlar: JavaScript, belirli HTML öğelerini veya stilleri zaman içinde değiştirerek animasyonlar oluşturabilir. Örneğin, bir elementin yavaşça kaydırılması veya boyutunun değiştirilmesi gibi animasyonlar yapılabilir. Örnek kod: // Bir elementin animasyonlu olarak kaydırılması var element = document.getElementById("animasyonluEleman"); element.style.transition = "transform 1s ease-in-out"; element.style.transform = "translateX(100px)"; Görsel Efektler: JavaScript, sayfadaki öğelerin görünürlüğünü veya görünümünü değiştirmek için kullanılabilir. Örneğin, bir öğeyi gizlemek veya görünür hale getirmek, arka plan rengini değiştirmek veya gölge efektleri eklemek gibi. Örnek kod: // Bir elementi gizleme var element = document.getElementById("gizlenecekEleman"); element.style.display = "none"; Geçişler: JavaScript, sayfadaki öğeler arasında geçişler (transitions) oluşturabilir. Bu, bir öğenin belirli bir olaya tepki vererek yumuşak bir şekilde görünürlüğünü veya pozisyonunu değiştirmesini sağlar. Örnek kod: // Bir elementin fare üzerine gelindiğinde geçiş yapması var element = document.getElementById("gecisElemani"); element.addEventListener("mouseenter", function() { element.style.opacity = "0.8"; }); element.addEventListener("mouseleave", function() { element.style.opacity = "1"; }); İnteraktif Grafikler: JavaScript, interaktif grafikler ve veri görselleştirmeleri oluşturmak için kullanılabilir. Bu, veri tablolarını, grafikleri veya haritaları kullanıcıların etkileşimine açık hale getirmek için önemlidir. Örnek kod: // Veri görselleştirmesi için D3.js kütüphanesi kullanımı var veri = ; var svg = d3.select("svg"); var yScale = d3.scaleLinear().domain().range() svg.selectAll("rect") .data(veri) .enter() .append("rect") .attr("x", function(d, i) { return i * 50; }) .attr("y", function(d) { return 300 - yScale(d); }) .attr("width", 40) .attr("height", function(d) { return yScale(d); }); Animasyonlar ve görsel efektler, kullanıcıların web sayfalarını daha ilgi çekici hale getirmesine ve önemli bilgileri daha etkili bir şekilde iletmelerine yardımcı olur.