İNTERNET TABANLI PROGRAMLAMA

AngularJS Google tarafından desteklenen açık kaynak kodlu bir uygulama geliştirme kütüphanesidir.

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.

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.

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.

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.

Bootstrap, internet siteleri ve internet tabanlı uygulamaların kullanıcı arayüzlerini oluşturmak için kullanılabilecek bir kütüphanedir.

JQuery’nin temel işlevleri aşağıdaki şekilde listelenebilir: 1. HTML/DOM düzenleme: Sayfadaki HTML DOM üzerinde ekleme, silme ve düzenleme işlemleri gerçekleştirilebilir. 2. CSS düzenleme: Sayfadaki elementlerin CSS stilleri üzerinde düzenleme yapılabilir. 3. HTML olaylarına tepki verme: HTML’nin sağladığı tüm olaylara tepki verecek fonksiyonlar hazırlanabilir. 4. 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. 5. 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.

Bu yazımda $ simgesi JQuery kütüphanesine erişmek için kullanılır.

Fare Olayları click Fare ile tıklama $(“dugme”).click( … ); dblclick Fare ile çift tıklama $(“p”).dblclick( … ); mouseenter Farenin elementin üzerine gelmesi $(“h1”).mouseenter( … ); mouseleave Farenin elementin üzerinden ayrılması $(“h3”).mouseleave( … );

toggle Nesnenin görünürlüğünü tersine çevirir. Görünmeyen nesneleri gösterir, görünen nesneleri saklar.

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

JQuery kodları, script etiketleri içinde olmak kaydıyla, sayfanın herhangi bir yerinde yazılabilir. Bununla birlikte henüz yüklenmemiş ya da HTML DOM’a eklenmemiş elementler için yazılan kodlar hata verecektir. Bu tür hataları engellemek için sayfayı ifade eden document seçicisinin ready olayı kullanılabilir.

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. After, append, before, prepend metotları DOM’a veri ekleme metotlarıdır. Val metodu ise içerik düzenleme ve erişim metotlarından biridir. Formlarda kullanılan giriş elementlerinin içeriklerini düzenlemek ya da içeriklerine erişmek için kullanılır.

toggleClass metodu, element üzerindeki sınıfın durumunu değiştirmek için kullanılır. toggleClass elementi kontrol ederek, verilen sınıf elementte bulunuyorsa çıkarır, bulunmuyorsa ekler. Bu sayede, toggleClass kullanılarak bir elementin iki durum arasında geçiş yapması sağlanabilir.

JQM arayüzlerinin temel bileşeni sayfalardır. JQM tek sayfalık uygulamalar ürettiğinden, tüm bu sanal sayfalar tek bir HTML dosyası içinde oluşturulur. JQM sayfası üretmek için bir div elementlerinin data-role özelliği page olarak düzenlenir. Sayfaların içinde üç ana alan tanımlanabilir. Header (başlık) alanı sayfaların üst kısmında görünen barı ve içeriğini tanımlar. Sayfanın alt kısmında görülecek bar ise footer (alt bilgi) alanı olarak tanımlanır. Sayfa içeriğinin gösterileceği alan ise data-role özelliği main olarak belirlenmiş bir div elementi ile tanımlanır. Ek olarak kenar boşluklarının ayarlanması ve içeriklerin düzgün yerleşimi için main div elementine ui-content sınıfı eklenmelidir.

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 data-transition özelliğinde belirlenir. Pop efekti ile sayfa kaybolur ikinci sayfa belirir, flip ile hedef sayfa arkadan öne döndürülür. slideup ile hedef sayfa aşağıdan yukarı doğru kayarak gelir, none etiketi ile efekt kullanılmadan geçiş sağlanır. Flow etiketiyle ise sayfa uzaklaşıp kayar, yeni sayfa gelir.

Arayüzlerin en çok kullanılan elementleri düğmelerdir. JQM sisteminde input, buttonve a(bağlantı) elementleri düğme üretmek için kullanılabilir. Bu elementleri düğmeye çevirmek için ui-btn sınıfı eklenir. ui-content sınıfı kenar boşluklarının ayarlanması ve içeriklerin düzgün yerleşimi için main div elementine eklenerek kullanılır.

Varsayılan olarak daire içerisinde gösterilen simgeleri daire olmadan gösterimi için ui-nodisc-iconsınıfı kullanılabilir. ui-alt-icon sınıfı kullanılarak koyu renkli simge kullanımı sağlanabilir. Düğmeler ui-btn-inline sınıfı kullanılarak satır içi küçük düğmeye çevrilebilmektedir. ui-btn-corner-all sınıfı eklenerek düğmenin kenarları yumuşatılabilmektedir. Sadece simgelerden oluşan düğmeler üretilebilmek için düğmeye ui-btn-icon-notext sınıfı uygulanır. Bunun yanında düğmedeki pozisyon sınıfı kaldırılmalıdır. Bu sayede yazı alanı görülmeyen sadece simgeden oluşan bir düğme oluşturulabilir.

JQM temel bir menü çubuğu oluşturma aracı sağ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ı ( kodları eklenir.

Listeler, data-role özellikleri listview olarak belirlendiğinde JQM listelerine çevrilir. JQM listelerindeki önemli bir etkileşim aracı da filtrelerdir. JQM listelerine filtre eklemek için liste elementinin data-filter özelliğinin true olarak belirlenmesi yeterlidir. Varsayılan olarak filtre kutularında “Filter items …” placeholder metni yer almaktadır.