İnternet Tabanlı Programlama Dersi 5. Ünite Özet

Giriş

JS kütüphaneleri programcıların ihtiyacı olan temel işlevleri, elementleri ve özellikleri sağlayan, JS temelli uygulama geliştirme sürecini kolaylaştıran ve kısaltan hazır kodlarıdır. JS kütüphanelerinin temel amacı tasarımcıların ve programcıların yazmak zorunda kalacağı rutin kodları en aza indirgeyerek iş akışlarını ve proje geliştirme süreçlerini hızlandırmaktır.

Neden Js Kütüphaneleri

Projelerde JS kütüphanelerini kullanmanın pek çok yararı bulunmaktadır. Bunları;

• Tekrar kullanılabilirlik,
• Ücretsiz yardım kanalları,
• Yapısallık
• Genişletilebilirlik olmak üzere dört başlık altında ele almak mümkündür.

Önemli Js Kütüphaneleri

JS dilinin işlevselliği ve esnekliği sayesinde programcılar herhangi bir amaca yönelik kütüphaneler üretebilmektedir. Bu kütüphanelerin amaçları tarayıcı özelliklerini keşfetmekten, araç fonksiyonları sağlamaya; HTML DOM yönetiminden, bütünüyle bir web uygulaması üretmeye kadar uzanabilmektedir.

AngularJS: Google tarafından desteklenen açık kaynak kodlu bir uygulama geliştirme kütüphanesidir. AngularJS veriye dayalı tek sayfalık karmaşık uygulamaların üretilmesi için gerekli tüm araçları sağlamaktadır. AngularJS günümüzde pek çok büyük firmanın internet araçlarında kullanılmaktadır.

React: Büyük çoğunluğu Facebook tarafından geliştirilen React, açık kaynak kodlu bir ön yüz geliştirme aracıdır. React daha çok MVC modelindeki V parçasına yani kullanıcı arayüzü elementlerine odaklanan bir kütüphanedir. Büyük çaplı tek sayfalık uygulamalar üretmek için ideal bir kütüphanedir. En önemli avantajı HTML DOM mimarisine oranla çok daha hızlı çalışan bir sanal DOM üretmesidir.

Underscore: UnderscoreJS programcıların çoğu projede tekrar tekrar yazmak zorunda kaldıkları genel amaçlı araç fonksiyonlarını sağlayan bir kütüphanedir. Bu kütüphanede nesneler, diziler, fonksiyonlar ve yığınlar üzerinde işlem yapabilen pek çok metot sağlanmaktadır.

D3.js: Data-Driven-Documents (veri yönetimli belgeler), belgeleri bir veri setine göre düzenlemek için kullanılan bir kütüphanedir. D3.js veriden elde edilen bilgileri kullanarak HTML, SVG ve CSS teknolojileri üzerinde işlem gerçekleştirebilmektedir. Bu kütüphane kullanılarak veriyi temsil eden etkileşimli grafikler ve görseller hazırlanabilmektedir.

BabylonJS: BabylonJS modern web standartlarını kullanarak, güncel tarayıcılarda çalıştırılabilen üç boyutlu oyunlar üretmek için araçlar sağlayan bir kütüphanedir. Kütüphane WebGL teknolojisini kullanabilmektedir. Fizik motoru, çarpışma denetimi, animasyon motoru, ses ve parçacık sistemleri gibi oyun oluşturmak için gerekli tüm teknolojiler bu kütüphane tarafından sağlanabilmektedir.

Bootstrap: Bootstrap, internet siteleri ve internet tabanlı uygulamaların kullanıcı arayüzlerini oluşturmak için kullanılabilecek bir kütüphanedir. Bootstrap öncelikle akıllı telefon, tablet bilgisayar gibi mobil cihazları hedef alan bir felsefe ile geliştirilmiştir. Bootstrap ile üretilen sayfalar ve uygulamalar, mobil cihazların internet tarayıcılarında sorunsuz bir şekilde çalışmakta ve görüntülenebilmektedir.

JQuery

JQuery, internet programcılığını kolaylaştıran bir JS kütüphanesidir. JQuery’nin temel amacı, JS ile gerçekleştirilen genel programlama görevlerinin, daha az kod ile gerçekleştirilmesidir. Platformun sloganı “daha az kod ile daha fazla üretimdir” [write less, do more]. JQuery’nin temel amacı internet programcılığını kolaylaştırmak ve hızlandırmak olduğundan, öğrenilebilmesi için temel düzeyde HTML, CSS ve JS bilgisi gerektirir. JQuery’nin en temel işlevleri HTML DOM üzerinde gerçekleştirilmektedir. Bunun yanında JQuery, elementlerin CSS özelliklerini düzenleyebilir. JQuery’nin temel işlevleri aşağıdaki şekilde listelenebilir:

• HTML/DOM düzenleme: Sayfadaki HTML DOM üzerinde ekleme, silme ve düzenleme işlemleri gerçekleştirilebilir.
• CSS düzenleme: Sayfadaki elementlerin CSS stilleri üzerinde düzenleme yapılabilir.
• HTML olaylarına tepki verme: HTML’nin sağladığı tüm olaylara tepki verecek fonksiyonlar hazırlanabilir.
• Görsel efekt ve animasyonlar: Bir elementi soluklaştırarak silme, bulunduğu ortamda sağa sola hareket ettirme gibi pek çok hazır görsel efekt ve animasyon sağlanmaktadır.
• AJAX: Sayfayı yenilemeden arka planda bir sunucudan veri çekme, sunucuya veri gönderme ve alınan sonuçlara göre sayfa içeriğini düzenleme işlemleri yapılabilir.

Sayfalara JQuery Eklemek

Bir JS Kütüphanesi olan JQuery, sayfaya herhangi bir JS dosyası gibi eklenir. JS belgeleri projelere yerel ya da uzak yöntemlerle eklenebilir.

JQuery Yazım Kuralları

JQuery yazım kuralları HTML elementlerini seçmek ve düzenlemek için özelleşmiştir. Temel yazım biçimi aşağıda gösterildiği şekildedir.

JQuery Olayları

Kullanıcıların sayfa üzerindeki hareketlerine tepki vermek için HTML DOM tarafından yayınlanan olaylar için fonksiyonlar yazılır. HTML DOM kullanıcının bir düğmeye tıklaması, fareyi hareket ettirmesi, bir bağlantının üzerine gelmesi gibi eylemleri için olaylar yayınlar.

JQuery Efektleri

JQuery kullanarak HTML elementlerine özel efektler uygulanabilir. Bu amaçla seçicinin arkasına efekt metodu bağlanır. Bu efektler JQuery tarafından sağlandığından tüm tarayıcılarda desteklenir ve aynı görsel etkileri yaratır.

JQuery DOM Metotları

JQuery DOM elementlerinin içerikleri ve değerleri ile ilgili pek çok metot sağlamaktadır. Bu özellikler, DOM düzenleme, elementlerdeki verileri ve özellikleri çekme, elementlerdeki verileri ve özellikleri düzenleme olmak üzere üç başlık altında ele alınabilir.

JQuery CSS Metotları

JQuery’nin önemli işlevlerinden biri de elementlerin CSS özelliklerini düzenleyebilmesidir. CSS metotları elementlerin görünüşlerini değiştirmek için kullanılır. Elementin CSS özellikleri üzerinde doğrudan düzenleme yapmak ya da özellikleri çekmek için css metodu kullanılır.

JQuery Mobile

JQuery Mobile (JQM) HTML5 temelli, öncelikle mobil cihazları hedef alan bir kullanıcı arayüzü geliştirme sistemidir. JQM ile geliştirilen arayüzler farklı ekran boyutlarına tepki verebilir (responsive). Bu sayede oluşturulan arayüzler cep telefonu, tablet bilgisayar ve masaüstü bilgisayar ekranlarında farklı şekillerde sunulabilir. Bunun amacı kullanıcıya en iyi izleme ve okuma deneyimini yaşatmaktır. Bunun yanında JQM, dokunmatik ekranlardaki dokunma, taşıma, kaydırma gibi olaylara tepki verebilir. Bu sayede yalnızca HTML5 teknolojileri kullanılarak mobil cihazlar üzerinde çalışan arayüzler üretilebilir.

Sayfalara JQM Eklemek

Bir projeye JQM eklemek için gerekli tüm kaynaklara http://jquerymobile.com/download/ adresinden ulaşılabilir. Bu adresteki “Latest stable version” başlığının altındaki Zip File bağlantısı kullanılarak JQM dosyaları yerel projelerde kullanılmak üzere indirilebilir. Aynı sayfadaki İDA linkleri üzerinden belgelerin uzak sistemlerdeki adreslerine ulaşılabilir. Yerel kullanım için indirilen .zip dosyası içinde pek çok dosya olduğu görülecektir. Bu paket içindeki demos klasörü JQM’in yeteneklerini inceleyebilmeniz için sağlanan sunum sayfalarını içermektedir. Projenizde bu klasörü tutmanıza gerek yoktur. Bununla birlikte, images klasörü altında projeniz için gerekli olacak simgeler bulunduğundan bu klasörü silmeniz ya da adını değiştirmeniz önerilmez.

JQM Sayfaları

JQM tek sayfalık uygulamalar (Single page application) üretmek için kullanılır. Tek sayfalık uygulamalar tek bir HTML sayfasında oluşturulur. Tüm içerikler bir sayfa içine yazıldığından, bu uygulamalar sayfaların yeniden yüklenmesine gerek bırakmaz. Kullanıcı uygulamanın içinde önceden oluşturulmuş sanal sayfalar arasında gezinebilir ya da bir internet servisinden çekilen sanal sayfa içeriklerini inceleyebilir. Sayfa tamamen tekrar yüklenmediğinden ya da başka bir sayfaya yönlendirilmediğinden kullanıcılar masaüstü uygulamalardakine benzer deneyimler yaşar.

JQM Kutuları

JQM sisteminde

• Diyalog kutuları,
• Açılır kutular
• Paneller olmak üzere üç farklı kutu elementi kullanılabilir.

Diyalog Kutuları: Diyalog kutularının amacı kullanıcıya mesaj göstermek ya da kullanıcıdan bildirim almaktır.

Açılır Kutular: Kullanıcılara mesaj vermek için açılır kutular kullanılabilir.

Paneller: Oldukça esnek bir tasarıma sahip olan paneller, menüler, formlar ve yardımcı araçlar oluşturmak gibi pek çok amaçla kullanılabilir.

JQM Geçiş Efektleri

JQM, sayfa geçişleri ve kutuların gösterilmesi için bir dizi hazır geçiş efekti sağlar. Bu efektler sayfa, açılır kutu ya da diyalog kutusunu açacak olan bağlantının datatransition özelliğinde belirlenir. data-transition özelliği için kullanılabilecek değerler ve etkileri verilmiştir.

JQM Arayüz Araçları

Düğmeler: Arayüzlerin en çok kullanılan elementleri düğmelerdir. JQM sisteminde input , button ve a (bağlantı) elementleri düğme üretmek için kullanılabilir. Bu elementleri düğmeye çevirmek için ui-btn sınıfı eklenir.

Simgeler: JQM arayüz elementlerini daha anlaşılır kılan bir simge kümesi sunmaktadır. Bu simgeler elementlere data-icon özellikleri kullanılarak ya da ui-iconSİMGEADI şeklindeki sınıfları uygulayarak eklenir. JQM simgelerinin SVG ve PNG versiyonları bulunmaktadır. SVG vektörel bir format olduğundan ölçeklenme işlemlerinden etkilenmez. Bu nedenle JQM öncelikle simgelerin SVG versiyonlarını kullanmayı dener. SVG dosya formatını desteklemeyen sistemlerde otomatik olarak simgelerin piksel tabanlı (PNG) versiyonları kullanılır. Yerel bir proje geliştirmek için JQM sistemini indirdiğinizde bu simgeleri css klasörü içinde görebilirsiniz. css klasöründeki images klasörü içinde yer alan icons-png ve icons-svg klasörleri ilgili dosya uzantısı ile oluşturulmuş simgeleri tutar.

Düğme Grupları: Belirli bir amaca yönelik düğmeler bir grup halinde sunularak daha kompakt arayüz elementleri oluşturulabilir. Bu amaçla düğmeler data-role özelliği controlgroup olarak belirlenmiş bir gruplayıcı element içine alınır. Düğme grupları yatay ya da dikey şekillerde oluşturulabilir. Bu amaçla gruplayıcı elementin data-type özelliği horizontal (yatay) ya da vertical (dikey) olarak belirlenir.

Menü Çubuğu: JQM temel bir menü çubuğu oluşturma aracı sağlar. Bu araç üzerinde yan yana beş adede kadar düğme gösterilebilir. Düğme sayısının beşi geçmesi durumunda araç otomatik olarak düğmeleri birden fazla satıra yaymaya başlar. Menü çubukları data-role özelliği navbar olarak belirlenen div elementleri içinde oluşturulur. Bu elementlerin içine sırasız bir liste (ul) eklenerek her elementinin (li) içine düğmeleri oluşturacak bağlantı (a) kodları eklenir.

Listeler: Sayfa içeriklerinin gösteriminde en önemli araçlardan biri listelerdir. JQM listeler ile ilgili pek çok özellik sunmaktadır. HTML dilinin sunduğu sırasız ve sıralı listeler müdahale edilmediği sürece sayfalarda düzenlenmeden gösterilir. Listeler, data-role özellikleri listview olarak belirlendiğinde JQM listelerine çevrilir.