Merhaba,
JavaScript'e Giriş yazımızın ardından şimdi de orta seviyede bir yazıyla öğrenmeye devam ediyoruz. Bu bölümde temel bilgilerden hariç iş yapan kodlar göreceğiz. DOM , JSON , AJAX , jQuery gibi yeni kelimeler göreceğiz.
Başlayalım.
ve geliştirici araçlarında konsola gelen
Gelen listenin ilk elemanının stilinde yazı büyüklüğünü değiştiriyoruz.
Anlayacağınız gibi ilk satır id değeri header olan eleman seçiyor, ikinci satır class değeri btn olan eleman seçiyor. Burada fonksiyonlar arasındaki fark şu, querySelector sadece bir kayıt geri döner, yani birden fazla eleman sorguya uysa da ilki seçilir. querySelectorAll ise sorguya uyan tüm elemanları liste halinde getirir.
Bir tane buton elemanı ekledik sayfamıza. JavaScript içinde önce tıklama adıyla bir fonksiyon oluşturduk. Basit bir iş yapıyor kendisine olay parametresinde verilen şeyi alarm penceresinde gösteriyor. Sonra butonumuzu querySelector ile id değerinden buluyoruz ve button değişkenine yerleştiriyoruz. En son addEventListener fonksiyonu ile butona bir olay dinlemesi ekliyoruz. Burada click olayı dinlemesi yapılmış, yani butonun üzerine tıklanması takip ediliyor. Fonksiyona verilen 2. parametre ise olay gerçekleştiğinde ne yapılacağı. Burada da yukarıda tanımladığımız fonksiyon adını yazıyoruz. Böylece butona tıklandığında tıklama isimli fonksiyon çağırılıyor.
Buradaki tıklama isimli fonksiyonun cinsi JavaScript dünyasında Callback (Görev Fonksiyonu). Diğer bir çok programlama dillerinde de aynı yapı vardır. Olay dinlemesi yapan sistem görev fonksiyonunu çağırırken ona gerçekleşen olayın bilgisini parametre olarak gönderir. Bu olay bilgisinin neler içerdiğini görmek isterseniz, alert komutunu console.log ile değiştirin ve geliştirici araçları penceresinde konsola verilen çıktıda ayrıntılarını inceleyin. Olayın nerede gerçekleştiği, koordintları, yanında Ctrl de basıldı mı vs bir sürü bilgi var. Mesela console.log(olay.path[0]) desek bize olayın gerçekleştiği butonun HTML kodunu aynen verecek.
Ne yazıkk ki Internet Explorer versiyon 9 öncesinde bu kodu desteklemiyor. Başka kod yazmak gerekiyor. Bunun gibi sıkıntılar yüzünden jQuery gibi JavaScript kütüphaneleri icat olmuştur. Bu kütüphaneyi de ilerleyen kısımlarda göreceğiz.
İlk önce req adında bir değişkene yeni bir XMLHttpRequest nesnesi tanımlıyoruz. Bir nesnenin kopyasını oluşturmak için (buna instance yani oluşum denir) new kelimesi ve arkasından nesne sınıfı adını sanki fonksiyonmuş gibi yazarız.
Sonra yükleme işlemi tamamlandığında çalışacak bir görev fonksiyonu tanımlıyoruz. İşlem sonucu elde edilen bilgiler olay isimli değişkenle fonksiyona gönderiliyor.
Sonra req.open() fonksiyonu ile işlemin nasıl yapılacağını tarif ediyoruz. İlk parametre Http isteğinin metodu (GET, PUT, POST vb.). Sonraki bu isteğin hangi URL'e yapılacağı (aynı href değeri verir gibi). Sonraki ise isteğin asenkron yapılacağını belirtir. Burada değer true yani istek verilen adrese yapılır sonra kod çalışmaya devam eder, isteğe cevap gelince onload görev fonksiyonu çalıştırılır.
3. parametre değeri default olarak false değerdir. Bu şekil bırakılırsa kod o satırda durur ve cevap gelene kadar bekler. Buna senkron çalışma deniyor. Ama adresini verdiğimiz server cevap vermezse program orada bekler kalır.
En son satırda da işlemin yapılmasını yani isteğin gönderilmesini emrediyoruz.
XMLHttpRequest kullanarak http ve https server'lardan HTML, JSON, XML ve düz text dosya okumaları yapabiliriz. Ayrıca FTP ve File gibi diğer erişim yollarını da destekler.
JavaScript kodumuz şöyle olursa,
Sayfamızda şöyle görünür.
Kodda ilave olan şeylere bakarsak, JSON.parse metodu text olarak verilen veriyi nesnelerden oluşan bir array haline getiriyor. Sonra array içindeki her nesnenin numarası ve name elemanı <p> tag içinde satır satır sayfamızda seçtiğimiz elemana innerHTML özelliği kullanılarak ekleniyor.
Bu bir JSON data ve aynı zamanda da JavaScript verisi olsa aynı böyle olurdu. JSON veriler tarayıcımız ile server arasında veri transferi amacıyla kullanılır. Normal yazı ile ifade edilen verilerdir. Fonksiyonlar gibi karmaşık yapıları JSON olarak saklayamayız ama string , sayı , array basit özellikleri olan nesneler vb. JSON olarak saklanabilir.
JSON artık web teknolojilerinde XML'in yerini alıyor. Yeni bir çok web API özellikle JSON verileri sunmak üzere tasarlanıyor. web API ne derseniz ağır konu derim. Kısaca koca koca web siteleri kullanıcılarına sundukları verilere kolayca veri dosyaları olarak ulaşılabilsin diye arabirimler tasarlarlar. Bu arabirimlerin kurallarıyla programınız içinden bu sitelerin sunduğu verilere erişebilirsiniz.
JSON.stringify bir nesneyi JSON string'e dönüştürür. Bu örnekte jsonString değişken değeri '{"marka":"McLaren","model":"MP4-12C","kilometre":5023}' olur.
JSON.parse ile verilen string JavaScript nesnesine dönüştürülür. araba değişkeni şimdi bir nesne olarak kullanılabilir.
Burada fonksiyon içinde tanımlanmış olan c değişkeni fonksiyon bloğu çalıştırılsa bile blok işlemi bitirdiğinde yok olacaktır. Acık deşelim bu konuyu, peki fonksiyon dışında aynı isimde değişken varsa ne olur?
Sanki tamamen farklı bir c değişkeni fonksiyon içinde tanımlanmış. Peki içeride yeni değişken tanımlamayıp dışarıda tanımlanan kullanılabilir mi?
Sanırsam anladık. Üzerinde tekrar tekrar uğraşılası bir konu. Program büyüdükçe bu scope meselesi dikkat edilmesi gereken bir konu olmaya başlar. Aman yukarıdaki örnekleri iyi anlayalım - içeridekiler ve dışarıdakiler, değişkenleri canlı varlıklar gibi düşünelim, fonksiyonu bir oda gibi düşünelim, içeridekiler ve dışarıdakiler..
Bu kod class özelliği değeri btn olan tüm elemanlara tıklandığı anda yapılacak işlerin fonksiyonunu tanımlar. Bu eleman seçici deyim yapısı jQuery'nin temelini oluşturur.
jQuery kütüphanesini ya sitesinden indirip sayfamıza <script src="jQuery.js"></script> ile ekleriz, ya da CDN depolarından (Content Delivery Network) direk kullanırız. CDNJS bunlardan biri. Bu durumda kütüphane sayfamız açıldığında internetten bu depolardan yüklenecektir. CDN deposundan örnek olarak
Neden internetten kullanılan kütüphane tercih edilir? İlk sebep ben deneme yaparken bir kütüphaneyi indirip bilgisayarıma saklayıp deneme yapmak yerine yukarıdaki satırı kopyalar HTML dosyamın <head> kısmına yapıştırır denerim. İkinci sebep web sitemizi internette yayınlarken kendi sitemize kütüphaneyi de ekleyip trafiği artırmak yerine belki de bizim servis sağlayıcımızdan çok daha hızlı server'ı olan CDN lerden yüklenmesini seçerek sayfalarımızın yüklenme hızını arttırabiliriz.
Hadi bakalım iki yöntemden biriyle sayfamıza jQuery kütüphanesini ekleyip öğrenmeye başlayalım.
diyelim şöyle bir HTML var,
Tarayıcıda geliştirici araçlarında incelersek paragraflara satır içi stil ilavesi olarak kodda istediğimiz ilavelerin yapıldığını görürüz.
jQuery ile yukarıda örneği verilen gibi birbirine zincirleme bağlı bir sürü işlemi bir arada yapabiliriz. Aslında sebebi basit, jQuery'de her fonksiyon seçilen elemanı yaptığı işlemden sonraki haliyle geri döndürüyor ve böylece o da seçilmiş olup sonsuza kadar üzerine yeni işlem yapıla yapıla gidebiliyor.
Burada okuma işlemi yapılırken ilk rastlanan not class değerine sahip elemanın özellikleri alınacaktır.
ve biz sadece div elemanı içinde bulunan 2. not elemanına ulaşacak şekilde seçicimizi daraltmak istersek, şunu yaparız,
bu şekilde div içinde yer alan 2. not paragrafını seçmiş oluruz. Çünkü aramanın sadece div elemanları içinde sınırlanmasını istemişiz. Bir de kodda dikkat çeken şey, jQuery nesnelerine değişken ismi verirken başına $ eklayerek verirsek hem kendimize hem kodumuzu okuyan başkalarına bunun bir jQuery nesnesi olduğunu belirtmiş oluruz. Bu da naçizane tavsiyeleri olur bu işin üstadlarından.
Kısaca açıklarsak, ilk önce server'dan istenen dosyanın url adresi veriliyor. Burada bu web sayfasının yayınlandığı sitede olan "db.json" dosyası adres verilmiş. Bunun yerine dünyanın herhangi bir yerindeki web adresindeki bir dosya da olabilir, ille bizim server'da olması gerekmez. Metod olarak GET seçilmiş , yani sadece okuma yapılacak. En son okuma başarılı olduğu zaman çalışacak olan success fonksiyonu tanımlanmış , burada da alınan veri konsola yazdırılıyor.
Peki bunu denemek istersek bu db.json dosyası server falan nasıl olacak. Sisteminizde Node yüklüyse çok kolay bir yolu var. json-server paketini yükleyip kullanabilirsiniz. Konsolda ,
ve yüklendikten sonra web sayfamızın olduğu klasörde bir konsol açıp şu komutu girelim,
Çıktıdan anlaşılacağı üzere server başlatıldı Sonra baktı default JSON dosyası olan db.json dosyası yok, bir örnek dosya üretti ve o dosyaya göre olan veri linklerini de gösterdi. --static opsiyonu kullanıldığı için aynı zamanda bulunulan klasörde test amaçlı bir lokal server da başlattı. Artık tarayıcımızı açıp adrese http://localhost:3000 ve yanına bitişik olarak / işareti ve HTML dosyamızın adını yazarsak web sayfamızı tarayıcıda görürüz. Geliştirici araçlarında konsolu açınca da db.json dosyasından okunan veriyi görürüz.
Ayrıca eğer işlem başarılı olmazsa da bir fonksiyon çalıştırılabilir.
Bakarsak yukarıda server ilk çalıştığında bize kaynakların adreslerini verdi. Bunlardan biri http://localhost:3000/posts adresi. Yukarıdaki kodu kullanarak yaptığımız kayıt ile db.json dosyası posts kısmında title değeri test olan bir veri eklenecektir.
Dosyayı bir text editör ile açtığımızda bunu görürüz. Tabi bunu $.ajax ile yaparsak hakimiyetimiz çok daha fazla olur.
Bunu jQuery ile çok daha kolay yaparız ve tarayıcıya göre de çalışmaz.
ya da daha kısa
Niye bu kadar kasmışlar derseniz, bu yapı hemen tüm jQuery kullanan web sayfalarında mevcuttur.
bunu jQuery ile yaparsak
Görüldüğü gibi jQuery ile hem tarayıcıya uygunluk düşünmeye gerek kalmıyor hem de daha kolay hatırlanabilecek komutlar var.
Bu bölüm de bu kadar. Ama bu jQuery üzerine daha ayrıntılı bir çalışma yapmak lazım. JSON verileri işlemek üzerine nasipse daha ileri seviye bir şeyler yazacağım. İlerideki yazılarımda sizlerle beraber öğrenmeye devam etmek dileğiyle kalın sağlıcakla..
JavaScript'e Giriş yazımızın ardından şimdi de orta seviyede bir yazıyla öğrenmeye devam ediyoruz. Bu bölümde temel bilgilerden hariç iş yapan kodlar göreceğiz. DOM , JSON , AJAX , jQuery gibi yeni kelimeler göreceğiz.
Başlayalım.
DOM
Document Object Model kelimelerinin baş harflerinden oluşan DOM ile HTML elemanlarına ulaşarak onlar üzerinde JavaScript ile işlemler yaparız.
DOM neye benziyor derseniz geliştirici araçlarını açtığımızda elements sekmesinde görünen liste DOM'un ta kendisidir.
Tree ve Branch
Ağaç ve Dal. HTML yapısı XML yapılara benzer. Elemanlar ve onların içlerinde elemanlar vardır. Bu yapı bir ağaca ve dallarına benzer. Bir tane ana eleman vardır html. Onun head ve body dalları vardır. Bunların her biri içinde de kendi dalları vardır. Bu sebepten DOM için bazen DOM Tree denir.
DOM'u değiştirmek demek, onun bir elemanını seçip birşeylerini değiştirmek demektir ve bu çoğunlukla JavaScript ile yapılır. .
JavaScript programı içinde DOM'a erişmek için document nesnesi kullanılır. Bu nesne tarayıcı tarafından sağlanır ve scriptlerin üzerinde işlem yapabilmesi sağlanır.
Bir elemanı seçmek
Bilmemiz gereken ilk şey döküman içinde elemanı nasıl seçeceğimiz. Bunu yapmanın tarayıcılar tarafından desteklenen değişik yolları var. En çok desteklenen yolla başlayalım.
ID ile seçmek
document.getElementById fonksiyonu verdiğimiz id değerine göre sayfadaki elemanları getirir.
var pageHeader = document.getElementById('page-header');
pageHeader değişkenine id değeri page-header olan eleman bir nesne olarak getirilir. Bundan sonra pageHeader değişkenine yapacağımız işlemlerle gösterdiği elemanın içeriğini, rengini, boyutunu, tıklanınca ne olacağını vs değiştirebiliriz. Bu fonksiyon hemen tüm tarayıcılarda desteklendiği için her zaman kullanabiliriz. Hangi tarayıcılar destekliyor derseniz burada Mozilla sayfanın en altında Browser Compatibility başlığında tabloyu vermiş.
Bu arada unutmayalım getElementById fonksiyonu document nesnesinin bir fonksiyonu olduğu için document.getElementById şeklinde aralarında nokta ile birleştirilerek yazmalıyız. Yoksa sistem fonksiyonu bulamaz.
Deneyelim,
Deneyelim,
index2.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript2</title>
</head>
<body>
<h1 id="page-header">Page Header</h1>
<script src="script2.js"></script>
</body>
</html>
script2.js
var pageHeader = document.getElementById("page-header");
pageHeader.innerText = "Sayfa Başlığı";
Gördüğümüz gibi sayfayı Türkçeleştirdik. Süper!..
Tag adı ile seçmek
document.getElementsByTagName fonksiyonu getElementById'ye benzer. Ama bu sefer seçme işlemi tag belirterek yapılır. Bir de dikkat edersek Elements diyor Element değil. Yani diyor ki verilen tag olan tüm elemanları topla getir. Önceki birden fazla aynı id değere sahip eleman olsa bile (ki bunu asla yapmamalısınız, sayfada aynı id değere sahip tek eleman olsun) sadece ilk önce gelen elemanı getirir. getElementsByTagName ise elemanlardan oluşan bir liste geriye döner. <ul>
<li>Eleman 1</li>
<li>Eleman 2</li>
<li>Eleman 3</li>
</ul>
console.log(document.getElementsByTagName("li"));
ve geliştirici araçlarında konsola gelen
Class değeri ile seçmek
document.getElementsByClassName fonksiyonu elemanlara verdiğimiz class değerleri üzerinden arama yapar. Bu da çoğul isimde, tüm elemanları dönüyor. Bu dönen listeye verilen isim NodeList'dir, onu da belirtelim.
<p>Normal paragraf</p>
<p class="anormal">Anormal paragraf</p>
document.getElementsByClassName("anormal")[0].style.fontSize = "xx-large";
Gelen listenin ilk elemanının stilinde yazı büyüklüğünü değiştiriyoruz.
CSS stili seçmek
Modern tarayıcılarda CSS seçicileri kullanarak seçim yapma imkanı da vardır. document.querySelector ve document.querySelectorAll fonksiyonları bu işe yarar.
var pageHeader = document.querySelector('#header');
var buttons = document.querySelectorAll(.btn);
Anlayacağınız gibi ilk satır id değeri header olan eleman seçiyor, ikinci satır class değeri btn olan eleman seçiyor. Burada fonksiyonlar arasındaki fark şu, querySelector sadece bir kayıt geri döner, yani birden fazla eleman sorguya uysa da ilki seçilir. querySelectorAll ise sorguya uyan tüm elemanları liste halinde getirir.
Olaylar ve Görev Fonksiyonları
Tarayıcıda bir çok kod olay-yönlendirmeli'dir. JavaScript ile yazılmış etkileşimli uygulamalar genellikle bir olayı bekler, sonra tarayıcının davranışında bir şeyleri değiştirir. Sayfa yeni yüklendiğinde , kullanıcı etkileşimde bulunduğunda (bir şeye tıkladığında, mouse'u gezdirirken, değer değiştirirken) ve daha bir çok sebebler olay oluşturur. Ayrıca olaylar manual da tetiklenebilir.
Bir olaya tepki gösterebilmek için olay dinlemesi yapılır, olay gerçekleşince bir fonksiyon çağrılır. Bu fonksiyona görev fonksiyonu (callback) denir.
Bir örnekle olay dinlemesi , görev fonksiyonu , eleman ve olayı gösterelim.
HTML
JavaScriptBir olaya tepki gösterebilmek için olay dinlemesi yapılır, olay gerçekleşince bir fonksiyon çağrılır. Bu fonksiyona görev fonksiyonu (callback) denir.
Bir örnekle olay dinlemesi , görev fonksiyonu , eleman ve olayı gösterelim.
HTML
<button id="big-button">Büyük buton</button>
var tıklama = function (olay) {
alert(olay);
};
var button = document.querySelector('#big-button');
button.addEventListener('click', tıklama);
Bir tane buton elemanı ekledik sayfamıza. JavaScript içinde önce tıklama adıyla bir fonksiyon oluşturduk. Basit bir iş yapıyor kendisine olay parametresinde verilen şeyi alarm penceresinde gösteriyor. Sonra butonumuzu querySelector ile id değerinden buluyoruz ve button değişkenine yerleştiriyoruz. En son addEventListener fonksiyonu ile butona bir olay dinlemesi ekliyoruz. Burada click olayı dinlemesi yapılmış, yani butonun üzerine tıklanması takip ediliyor. Fonksiyona verilen 2. parametre ise olay gerçekleştiğinde ne yapılacağı. Burada da yukarıda tanımladığımız fonksiyon adını yazıyoruz. Böylece butona tıklandığında tıklama isimli fonksiyon çağırılıyor.
Buradaki tıklama isimli fonksiyonun cinsi JavaScript dünyasında Callback (Görev Fonksiyonu). Diğer bir çok programlama dillerinde de aynı yapı vardır. Olay dinlemesi yapan sistem görev fonksiyonunu çağırırken ona gerçekleşen olayın bilgisini parametre olarak gönderir. Bu olay bilgisinin neler içerdiğini görmek isterseniz, alert komutunu console.log ile değiştirin ve geliştirici araçları penceresinde konsola verilen çıktıda ayrıntılarını inceleyin. Olayın nerede gerçekleştiği, koordintları, yanında Ctrl de basıldı mı vs bir sürü bilgi var. Mesela console.log(olay.path[0]) desek bize olayın gerçekleştiği butonun HTML kodunu aynen verecek.
Ne yazıkk ki Internet Explorer versiyon 9 öncesinde bu kodu desteklemiyor. Başka kod yazmak gerekiyor. Bunun gibi sıkıntılar yüzünden jQuery gibi JavaScript kütüphaneleri icat olmuştur. Bu kütüphaneyi de ilerleyen kısımlarda göreceğiz.
AJAX
Eski güzel günlerde web sayfaları basitti. HTML kodu vardı, biraz da CSS, bir de başka sayfalara linkler o kadar. Yeni bir içeriği göstermek için bir sayfadan başka bir sayfaya geçilirdi. Fakat bu web yazılımcılarının geliştirme hırsları yüzünden artık sayfa değiştirmeden içeriği değiştirmek mümkün.
Sayfamıza yeni içerik yüklemek, sosyal medyadaki gibi aşağı gittikçe yeni içeriklerin sayfaya eklenmesi, ya da yeni email adresinizi istemek vb içerik değişmeleri için XML Http Request (XHR) adı verilen bir teknik geliştirildi. Bu tekniği kullanan web uygulamalarına da AJAX Uygulaması denir (Asynchronous JavaScript and XML).
Bildiğimiz bütün sayfa değiştirmeden içerik değiştiren web uygulamaları mesela Facebook, Tweeter, Gmail hepsi AJAX tekniği uygulamalarıdır. Zaten önceden web sayfası , web sitesi denen şeye şimdilerde web uygulaması denmesinin arkasında da bu tekniği çok kullanmaları yatar.
XMLHttpRequest
Peki XMLHttpRequest neye benzer?
var req = new XMLHttpRequest();
req.onload = function (olay) { . . . };
req.open('get', 'bir-dosya.txt', true);
req.send();
Sonra yükleme işlemi tamamlandığında çalışacak bir görev fonksiyonu tanımlıyoruz. İşlem sonucu elde edilen bilgiler olay isimli değişkenle fonksiyona gönderiliyor.
Sonra req.open() fonksiyonu ile işlemin nasıl yapılacağını tarif ediyoruz. İlk parametre Http isteğinin metodu (GET, PUT, POST vb.). Sonraki bu isteğin hangi URL'e yapılacağı (aynı href değeri verir gibi). Sonraki ise isteğin asenkron yapılacağını belirtir. Burada değer true yani istek verilen adrese yapılır sonra kod çalışmaya devam eder, isteğe cevap gelince onload görev fonksiyonu çalıştırılır.
3. parametre değeri default olarak false değerdir. Bu şekil bırakılırsa kod o satırda durur ve cevap gelene kadar bekler. Buna senkron çalışma deniyor. Ama adresini verdiğimiz server cevap vermezse program orada bekler kalır.
En son satırda da işlemin yapılmasını yani isteğin gönderilmesini emrediyoruz.
XMLHttpRequest kullanarak http ve https server'lardan HTML, JSON, XML ve düz text dosya okumaları yapabiliriz. Ayrıca FTP ve File gibi diğer erişim yollarını da destekler.
AJAX v ekütüphaneler
AJAX tekniği geliştirilmesi ile beraber JavaScript kütüphaneleri hızla artmaya başladı. Bu kütüphaneler ile AJAX işlemleri çok daha kolay yapılabiliyor. Bu konuyu ileride göreceğiz.
Şimdi bir deneme yapalım. Diyelim bir JSON dosyada kullanıcıların listesi var.
users.json
[
{
"id": 1,
"name": "Ümit Kayacık"
},
{
"id": 2,
"name": "Abbas Kılınç"
}
]
Bu listeyi alıp sayfa içeriğinde bir yerde yazmak istiyoruz. HTML kodumuz şöyle olsun,
<div id="ajax-items">
</div>
JavaScript kodumuz şöyle olursa,
var req = new XMLHttpRequest();
req.onload = function (olay) {
var myArr = JSON.parse(this.responseText);
var liste = document.getElementById("ajax-items");
for (item in myArr) {
liste.innerHTML += "<p>" + item + ": " + myArr[item].name + "</p>";
};
};
req.open('get', 'users.json', true);
req.send();
Sayfamızda şöyle görünür.
Kodda ilave olan şeylere bakarsak, JSON.parse metodu text olarak verilen veriyi nesnelerden oluşan bir array haline getiriyor. Sonra array içindeki her nesnenin numarası ve name elemanı <p> tag içinde satır satır sayfamızda seçtiğimiz elemana innerHTML özelliği kullanılarak ekleniyor.
JSON
JavaScript Object Notation cümlesinin kısaltılmışı olan JSON, verileri insanların ve makinaların anlayabileceği bir formatta saklamayı sağlayan kurallar topluluğudur. JavaScrip nesnelerinden oluşmuş bir array görünümü vardır. Bu yüzden JSON isimlendirmesi verilmiştir.
Fakat JSON, JavaScript değildir. Kendi özellikleri olan farklı bir dildir. JavaScript programlarında çok kullanılan bir yapı olduğu için incelemeye değer.
{ "adı": "Yoda", "yaşı": 894, "ışınkılıcı" : { "renk": "yeşil" } }
JSON artık web teknolojilerinde XML'in yerini alıyor. Yeni bir çok web API özellikle JSON verileri sunmak üzere tasarlanıyor. web API ne derseniz ağır konu derim. Kısaca koca koca web siteleri kullanıcılarına sundukları verilere kolayca veri dosyaları olarak ulaşılabilsin diye arabirimler tasarlarlar. Bu arabirimlerin kurallarıyla programınız içinden bu sitelerin sunduğu verilere erişebilirsiniz.
JSON kullanmak
Veri JSON'a dönüştürülebilir ya da JSON veriye dönüştürülebilir. stringify ve parse metdoları sırasıyla bu işlere yarar.
var jsonString = JSON.stringify({
marka: "McLaren",
model: "MP4-12C",
kilometre: 5023
});
JSON.stringify bir nesneyi JSON string'e dönüştürür. Bu örnekte jsonString değişken değeri '{"marka":"McLaren","model":"MP4-12C","kilometre":5023}' olur.
var araba = JSON.parse(jsonString);
JSON.parse ile verilen string JavaScript nesnesine dönüştürülür. araba değişkeni şimdi bir nesne olarak kullanılabilir.
araba.model = "P1"
Scope
Scope bir değişkene nerelerden erişilebileceğini belirtir. Bir değişken scop'u demek o değişkene programımızın nerelerinde ulaşabileceğimiz ve değerine müdahale edebileceğimiz demektir. JavaScript function scope olarak bilinir. Peki bunun anlamı ve diğer dillerden farkı ne?
Genel olarak programlama dillerinde bir değişken için scope o değişkenin tanımlanmış olduğu bloğun içidir. C benzeri dillerde blok demek süslü parantez içinde kalan program kısmı demektir. Python gibi dillerde ise parantezler yok ama bloklar kod yazarken bir tab içeri girerek ifade edilir. Örneğin aşağıdaki kodda fonksiyon içinde tanımlanan c değişkenine parantez dışında ulaşılamaz.
var topla = function(a, b){
var c = a + b;
}
topla(7, 8);
console.log(c); // Hata verecektir!
var c = 9;
var topla = function(a, b){
var c = a + b;
}
topla(7, 8);
console.log(c); // 9 yazacaktır!
Sanki tamamen farklı bir c değişkeni fonksiyon içinde tanımlanmış. Peki içeride yeni değişken tanımlamayıp dışarıda tanımlanan kullanılabilir mi?
var c = 9;
var topla = function(a, b){
c = a + b;
}
topla(7, 8);
console.log(c); // 15 yazacaktır!
Sanırsam anladık. Üzerinde tekrar tekrar uğraşılası bir konu. Program büyüdükçe bu scope meselesi dikkat edilmesi gereken bir konu olmaya başlar. Aman yukarıdaki örnekleri iyi anlayalım - içeridekiler ve dışarıdakiler, değişkenleri canlı varlıklar gibi düşünelim, fonksiyonu bir oda gibi düşünelim, içeridekiler ve dışarıdakiler..
jQuery kütüphanesi
Geldi JavaScript programcılarının efsane kütüphanesine. Bana göre JavaScript programlama dilini jQuery öncesi ve sonrası diye iki bölüme ayırabiliriz. Aslında herşey ihtiyaçlardan dolayı ortaya çıktı. Daha önce sözünü ettik, bazı fonksiyonlar bazı tarayıcılarda çalışmıyor. Bu durumlarda o tarayıcılara ait başka komutlar kullanmak gerekiyor. Bu ihtiyacı cevaplasın diye kütüphane kodları yazılırken yanına bir de DOM elemanlarını seçme, içeriğini alma, değiştirme vs işlemlerindeki kod kalabalıklığını da giderelim demişler. Bir de AJAX işlerinin karışık kodlamasını da basitleştirmişler.
jQuery kütüphanesi web tasarımcılarının en çok kullandığı kütüphane olmuş ve bir çok web sitesinde kullanılmış ve hala kullanılıyor.
jQuery fonksiyonlarında çok nevi şahsına münhasır bir deyim yapısı kullanılmış ve bu yapı daha sonra bir çok başka kütüphaneye de örnek olmuş. Herşey $ işareti etrafında döner. Örnek,
$('.btn').click(function () {
// tıklama rutini
});
jQuery kütüphanesini ya sitesinden indirip sayfamıza <script src="jQuery.js"></script> ile ekleriz, ya da CDN depolarından (Content Delivery Network) direk kullanırız. CDNJS bunlardan biri. Bu durumda kütüphane sayfamız açıldığında internetten bu depolardan yüklenecektir. CDN deposundan örnek olarak
<script
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Neden internetten kullanılan kütüphane tercih edilir? İlk sebep ben deneme yaparken bir kütüphaneyi indirip bilgisayarıma saklayıp deneme yapmak yerine yukarıdaki satırı kopyalar HTML dosyamın <head> kısmına yapıştırır denerim. İkinci sebep web sitemizi internette yayınlarken kendi sitemize kütüphaneyi de ekleyip trafiği artırmak yerine belki de bizim servis sağlayıcımızdan çok daha hızlı server'ı olan CDN lerden yüklenmesini seçerek sayfalarımızın yüklenme hızını arttırabiliriz.
Hadi bakalım iki yöntemden biriyle sayfamıza jQuery kütüphanesini ekleyip öğrenmeye başlayalım.
jQuery : DOM API
Büyük ihtimal jQuery kütüphanesini en çok kullanacağımız yer sayfadaki elemanları seçmek ve DOM ile etkileşimlerde bulunmak olacaktır. Şanslıyız jQuery'de bir elemanı ya da bir grup elemanı seçmek CSS seçicilerindeki kadar kolay ve benziyor.
jQuery ayrıca elemanlar üzerinde birçok işlem yapmayı da inanılamayacak kadar basitleştiriyor. Örneğin aşağıdaki kod ile class değeri not olan elemanlar seçiliyor, arkaplanları kırmızı yapılıyor ve yükseklikleri 50 piksel yapılıyor.
$('.not').css('background', 'red').height(50);
diyelim şöyle bir HTML var,
<p class="not">Not: 1. Not</p>
<p>Normal paragraf</p>
<p class="not">Not: 2. Not</p>
<p>Normal paragraf</p>
Tarayıcıda geliştirici araçlarında incelersek paragraflara satır içi stil ilavesi olarak kodda istediğimiz ilavelerin yapıldığını görürüz.
jQuery ile yukarıda örneği verilen gibi birbirine zincirleme bağlı bir sürü işlemi bir arada yapabiliriz. Aslında sebebi basit, jQuery'de her fonksiyon seçilen elemanı yaptığı işlemden sonraki haliyle geri döndürüyor ve böylece o da seçilmiş olup sonsuza kadar üzerine yeni işlem yapıla yapıla gidebiliyor.
Get ve Set
Yukarıdaki örnekte .css ve .height fonksiyonlarını değerleri değiştirmek için kullandık (set). Fakat bu fonksiyonlar aynı zamanda ilgili değerleri okumak için de kullanılabilir (get). .height fonksiyonunu parantez içinde değer vermeden çağırmak bize ilgili elemanın yüksekliğini verir. .css fonksiyonunu sadece CSS özelliği adını parametre vererek çağırmak da o özelliğe ait değeri döner.
Geliştirici araçları konsolda şu satırları girelim.
$(".not").height();
// 50
$(".not").css("color");
// "rgb(0, 0, 0)"
$(".not").css("background");
// "rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box"
$(".not").css("background-color");
// "rgb(255, 0, 0)"
Burada okuma işlemi yapılırken ilk rastlanan not class değerine sahip elemanın özellikleri alınacaktır.
Bağlam
Eleman aramalarını hangi bağlamda yapacağımızı yani aramaları belirttiğimiz bölgeler içinde olacak şekilde yapmayı ikinci bir seçici parametresi vererek belirleyebiliriz. Örneğin yukarıdaki HTML şöyle olsun,
<p class="not">Not: 1. Not</p>
<p>Normal paragraf</p>
<div>
<p class="not">Not: 2. Not</p>
<p>Normal paragraf</p>
</div>
var $div = $("div");
var $div_not = $(".not", $div);
bu şekilde div içinde yer alan 2. not paragrafını seçmiş oluruz. Çünkü aramanın sadece div elemanları içinde sınırlanmasını istemişiz. Bir de kodda dikkat çeken şey, jQuery nesnelerine değişken ismi verirken başına $ eklayerek verirsek hem kendimize hem kodumuzu okuyan başkalarına bunun bir jQuery nesnesi olduğunu belirtmiş oluruz. Bu da naçizane tavsiyeleri olur bu işin üstadlarından.
jQuery : AJAX
jQuery hem kullanımı kolaylaştıracak hem de kodun okunabilirliğini artıracak yardımcı AJAX fonksiyonlarına sahiptir. $.get , $.post ve $.ajax fonksiyonları.
$.ajax metodu AJAX çağrılarımızı manual olarak yapabileceğimiz temel metod. Diğerleri özel yapılandırmalara göre işine özel fonksiyonlar. Aşağıdaki örnek server'dan veri almak üzerine yazılmış.
$.ajax({
url: '/db.json',
method: 'GET',
success: function (data) {
console.log(data);
}
});
Peki bunu denemek istersek bu db.json dosyası server falan nasıl olacak. Sisteminizde Node yüklüyse çok kolay bir yolu var. json-server paketini yükleyip kullanabilirsiniz. Konsolda ,
npm install -g json-server
ve yüklendikten sonra web sayfamızın olduğu klasörde bir konsol açıp şu komutu girelim,
json-server --watch db.json --static ./
\{^_^}/ hi!
Loading db.json
Oops, db.json doesn't seem to exist
Creating db.json with some default data
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
Çıktıdan anlaşılacağı üzere server başlatıldı Sonra baktı default JSON dosyası olan db.json dosyası yok, bir örnek dosya üretti ve o dosyaya göre olan veri linklerini de gösterdi. --static opsiyonu kullanıldığı için aynı zamanda bulunulan klasörde test amaçlı bir lokal server da başlattı. Artık tarayıcımızı açıp adrese http://localhost:3000 ve yanına bitişik olarak / işareti ve HTML dosyamızın adını yazarsak web sayfamızı tarayıcıda görürüz. Geliştirici araçlarında konsolu açınca da db.json dosyasından okunan veriyi görürüz.
$.get
$.get metodu yukarıdaki işlemi kestirme yoldan yapar.
$.get('/db.json', function (data) {
console.log(data);
});
$.get('/db2.json', function (data) {
console.log(data);
}).fail(function(){
console.log("Dosya bulunamadı");
});
$.post
Tahmin edilebileceği gibi bu da metod olarak POST kullanan , yani server'a yeni bir veri gönderen metod.
$.post('/posts', { title: 'test' }, function (data) {
console.log(data);
}).fail(function () {
console.log("Kaydedilemedi");
});
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"title": "test",
"id": 2
}
],
Dosyayı bir text editör ile açtığımızda bunu görürüz. Tabi bunu $.ajax ile yaparsak hakimiyetimiz çok daha fazla olur.
$.ajax({
url: '/posts',
method: "POST",
data: { title: 'test' },
success: function (data) {
console.log(data);
},
error: function () {
console.log("Kaydedilemedi");
}
});
jQuery : Diğer ipuçları
jQuery ayrıca tarayıcılar arasında farklılık gösteren işlemlerde de yardımcıdır.
DOMContentLoaded
Bazen sayfa yüklendiği anda bir işler yapmak isteriz (fakat stiller tamamen uygulanmadan önce). Bunu aşağıdaki saf JavaScript kod ile yapabiliriz ama tabi bu tüm tarayıcılarda çalışmaz.
var birŞeyYap = function (olay) {
console.log(olay.type);
};
window.addEventListener('DOMContentLoaded', birŞeyYap);
$(window).ready(function () {
console.log("DOM yüklendi");
});
ya da daha kısa
$(function () {
console.log("DOM yüklendi");
});
Niye bu kadar kasmışlar derseniz, bu yapı hemen tüm jQuery kullanan web sayfalarında mevcuttur.
Load
Bir alternatif de tüm sayfa yüklendiği zaman yani stiller, resimler falan hepsi tamamlandığında.
window.addEventListener('load', birŞeyYap);
bunu jQuery ile yaparsak
$(window).load(birŞeyYap);
Görüldüğü gibi jQuery ile hem tarayıcıya uygunluk düşünmeye gerek kalmıyor hem de daha kolay hatırlanabilecek komutlar var.
Tip kontrolü
JavaScript'de bir değişkenin içindeki verinin tipini bulmak çok zahmetli ama bunu jQuery ile yapmak çok daha kolay.
$.isArray([1, 2, 3]);
// true
$.isFunction(function () { });
// true
$.isNumeric(10);
// true
$.isPlainObject({ isim: 'Ümit' });
// true
Bu bölüm de bu kadar. Ama bu jQuery üzerine daha ayrıntılı bir çalışma yapmak lazım. JSON verileri işlemek üzerine nasipse daha ileri seviye bir şeyler yazacağım. İlerideki yazılarımda sizlerle beraber öğrenmeye devam etmek dileğiyle kalın sağlıcakla..
Hiç yorum yok:
Yorum Gönder