WTK210U İnternet Tabanli Programlama Ünite -5

Giriş

JavaScript kütüphaneleri, geliştiricilerin tekrar tekrar çözülmesi gereken sorunları hızlıca aşmalarına ve daha güvenilir kodlar yazmalarına olanak tanır. Bu kütüphaneler sayesinde web projelerinde etkileşim, DOM manipülasyonu, animasyonlar, veri görselleştirme veya mobil uyumluluk gibi konuları çok daha pratik şekilde yönetmek mümkün olur. Ayrıca, büyük topluluk desteği ve kapsamlı dokümantasyon, öğrenme sürecini kolaylaştırır.

Neden JavaScript Kütüphaneleri?

Her proje sıfırdan yazmak, hem zaman hem de emek açısından verimsizdir. Test edilmiş kodları yeniden kullanmak, hem hata olasılığını azaltır hem de proje geliştirme sürecini kısaltır. Örneğin jQuery, DOM işlemleri ve olay yönetiminde büyük kolaylık sunarken, React ve Angular gibi çerçeveler (framework) uygulamanın bütün yapısını yönetmeyi amaçlar. Underscore.js veya Lodash gibi kütüphaneler ise dizi ve nesneler üzerinde yardımcı fonksiyonlar sağlar.

jQuery Kütüphanesi

jQuery, uzun yıllardır DOM yönetimi, CSS manipülasyonu ve olay kontrolü gibi temel JS işlemlerini basitleştiren en popüler kütüphanelerden biridir. $(document).ready() ile sayfa yüklendiğinde kodların çalışmasını sağlamak, $(“.sınıf”).hide() gibi kısa yollarla animasyon ve efektleri yönetmek jQuery ile son derece kolaydır. Ayrıca pek çok eklenti (plugin) yardımıyla işlevselliğini genişletmek mümkündür.

jQuery Mobile

Mobil web uygulamaları geliştirmek, responsive ve dokunmatik arayüzlerin yönetimini gerektirir. jQuery Mobile, “data-role” attribute’larıyla sayfaları, butonları, formları ve diğer bileşenleri mobil ortamlara uygun olarak dönüştürür. Transitions (geçiş efektleri) ve popup oluşturma gibi mobil kullanıcı deneyimini artıran özellikleri de mevcuttur.

Diğer Popüler Kütüphaneler

D3.js, veri görselleştirme alanında öne çıkan bir kütüphanedir ve özellikle grafikler, haritalar ve etkileşimli istatistiksel görselleştirmeler için kullanılır. Vue.js, Angular, React gibi çerçeveler ise uygulama mantığının geniş bir kısmını yöneterek SPA (tek sayfa uygulama) geliştirirken önemli kolaylıklar sunar. Underscore.js ve Lodash, dizi ve nesne manipülasyon fonksiyonları ile hız ve kolaylık sağlar.

Sonuç

JS kütüphaneleri ile çalışmak, projelerin hızla ilerlemesini sağlayarak tekrar eden işleri minimuma indirir. Ancak, her kütüphane her proje için ideal olmayabilir. Geliştiricilerin kütüphaneleri ve çerçeveleri, projenin kapsamına ve ihtiyaçlarına göre seçmesi önemlidir. Böylece, kod temeli hem performanslı hem de sürdürülebilir bir yapıya kavuşur.

1) Aşağıdakilerden hangisi projelerde Javascript kütüphanesi kullanmanın faydalarından biri değildir?

A. Kendini kanıtlamış kodların tekrar kullanımı
B. Geliştiriciler ve kullanıcıların paylaştığı ücretsiz yardım dokümanları
C. Yeni versiyonlarla birlikte gelen genişletmelerden yararlanabilme olanağı
D. Güncel yazılım geliştirme yaklaşımlarına uyum sağlayabilme
E. Kütüphanelerin küçük çaplı projelerin ihtiyaçlarının ötesinde çok fazla özellik sunması

Cevap : E) Kütüphanelerin küçük çaplı projelerin ihtiyaçlarının ötesinde çok fazla özellik sunması

Açıklama : Bir JS kütüphanesi kullanırken genel olarak birçok avantaj elde edilir: test edilmiş kodu yeniden kullanma, geniş dokümantasyona erişme, sürekli güncellemeler vs. Ancak küçük projeler için “çok fazla özellik sunması” bir dezavantaj gibi görülebilir. Soru “faydalardan biri değildir?” dediği için bu şık doğru cevaptır.

Yanıtınız yanlış ise “Neden Javascript Kütüphaneleri” konusunu yeniden gözden geçiriniz.

2) Projelerde sıklıkla kullanılan genel amaçlı Javascript fonksiyonlarını sağlayan kütüphane aşağıdakilerden hangisidir?

A. UnderscoreJS
B. AngularJS
C. D3.js
D. React
E. Bootstrap

Cevap : A) UnderscoreJS

Açıklama : Underscore.js, JavaScript’e yönelik “genel yardımcı (utility) fonksiyonlar” sunan popüler bir kütüphanedir. AngularJS ve React, birer framework veya kitaplık olarak daha çok uygulama mimarisi için kullanılır, D3.js veri görselleştirmeye odaklı, Bootstrap ise CSS framework’üdür.

Yanıtınız yanlış ise “JQuery DOM Metotları” konusunu yeniden gözden geçiriniz.

3) Aşağıdakilerden hangisi JQuery’nin yetenekleri arasında yer almaz?

A. Görsel efekt ve animasyonlar
B. HTML olaylarına tepki vermek
C. CSS düzenlemek
D. Hazır arayüz elementleri sunmak
E. HTML DOM düzenlemek

Cevap : D) Hazır arayüz elementleri sunmak

Açıklama : jQuery, görsel efektler, animasyonlar, DOM ve CSS manipülasyonu, olay yönetimi gibi yeteneklere sahiptir. Fakat kendisinde “hazır arayüz elementleri” gelmez. Bu özellik, jQuery UI veya başka UI kütüphanelerinde bulunur. Dolayısıyla jQuery’nin temel kütüphanesinde “Hazır arayüz elementleri” sunma özelliği yoktur.

Yanıtınız yanlış ise “JQM Sayfaları” konusunu yeniden gözden geçiriniz.

4) Bir sayfadaki paragraf elementlerine saklama metodunu 200 milisaniye içinde uygulamak için yazılması gereken JQuery kodu aşağıdakilerden hangisidir?

A. $(seçici).metot();
B. $(“p”).hide(200);
C. $(p).hide(2000);
D. $(200).p.hide();
E. $(p).hide();

Cevap : B) $(“p”).hide(200);

Açıklama : jQuery’de saklama (hide) metoduna bir sayı parametresi verildiğinde, bu süre (milisaniye cinsinden) animasyonla öğeleri gizler. “$(“p”).hide(200)” demek, sayfadaki tüm p etiketlerini 200 ms içinde saklar.

Yanıtınız yanlış ise “JQuery Olayları” konusunu yeniden gözden geçiriniz.

5) Bir sayfada alt sınıfı eklenmiş tüm elementlerin tıklanma olaylarına tepki vermek için yazılması gereken kod aşağıdakilerden hangisidir?

A. $(p.alt).on(“click”, function(){…});
B. $(alt).on(“press”, function(){…});
C. $(“p.alt”).on(“click”, function(){…});
D. $(“.alt”).on(“press”, function(){…});
E. $(“.alt”).on(“click”, function(){…});

Cevap : E) $(“.alt”).on(“click”, function(){…});

Açıklama : jQuery’de sınıf seçici “.alt” olarak tanımlanır. Tüm elementlerin tıklanma (click) olayına tepki vermek için $(“.alt”).on(“click”, … ) ifadesi kullanılır. “p.alt” sadece p etiketlerinde alt sınıfına bakar, “on(“press”)” gibi bir olay türü standart tıklamayı temsil etmez.

Yanıtınız yanlış ise “Açılır Kutular” konusunu yeniden gözden geçiriniz.

6) JQuery ile HTML DOM düzenleme metotlarının doğru çalışması için kodların nereye yazılması gerekir?

A. $(document).click() olayına
B. HTML dokümanının HEAD bölümüne
C. $(document).ready() olayına
D. $(form).submit() olayına
E. $(window).unload() olayına

Cevap : C) $(document).ready() olayına

Açıklama : jQuery kodlarının doğru ve hatasız çalışması için tipik olarak $(document).ready() (yeni sürümlerde $(function(){ … }) ) içine yazılır. Bu sayede HTML DOM yapısı tamamen yüklendiğinde kodlar devreye girer.

Yanıtınız yanlış ise “JQuery” konusunu yeniden gözden geçiriniz.

7) Bir HTML elementinin özelliklerine JQuery ile erişmek için hangi metot kullanılır?

A. attr
B. val
C. text
D. html
E. hide

Cevap : A) attr

Açıklama : jQuery’de bir elementin “HTML niteliklerine” (ör. src, href, alt) erişmek veya değiştirmek için .attr() metodu kullanılır. val() form alanı değerlerini, text() düz metin içeriğini, html() HTML içeriğini, hide() ise görünürlüğü yönetir.

Yanıtınız yanlış ise “JQuery Yazım Kuralları” konusunu yeniden gözden geçiriniz.

8) JQuery Mobile sisteminde elementlerin uygulamadaki işlevleri hangi özellikleri ile belirlenir?

A. data-position
B. data-icon
C. rel
D. data-role
E. listview

Cevap : D) data-role

Açıklama : jQuery Mobile’da “data-role” özelliği, bir öğenin sayfa içindeki işlevini belirtir (örneğin data-role=”page”, data-role=”header”, data-role=”content” vb.). “data-icon”, “data-position” ve “rel” gibi diğer özellikler de kullanılır ancak ana işlev ataması “data-role” ile yapılır.

Yanıtınız yanlış ise “Önemli JS Kütüphaneleri” konusunu yeniden gözden geçiriniz.

9) JQuery mobile sisteminde id özelliği “kutu1” olan bir açılır kutuyu hedef alan bir bağlantının kodu aşağıdakilerden hangisidir?

A. <a href=”kutu1″ data-rel=”popup”>Örnek</a>
B. <a href=”#kutu1″ data-rel=”popup”>Örnek</a>
C. <a href=”#kutu1″ data-role=”popup”>Örnek</a>
D. <a href=”kutu1″ data-role=”popup”>Örnek</a>
E. <a href=”#kutu1″ data-rel=”dialogue”>Örnek</a>

Cevap : B) <a href=”#kutu1″ data-rel=”popup”>Örnek</a>

Açıklama : jQuery Mobile’da açılır kutu (popup) oluşturmak için genellikle bağlantı href=”#kutu1″ olarak yazılır ve data-rel=”popup” kullanılır. “data-role=”popup”” pop-up oluşturmak yerine pop-up öğesinde kullanılır; “dialogue” da farklı bir işlev içindir.

Yanıtınız yanlış ise “JQM Geçiş Efektleri” konusunu yeniden gözden geçiriniz.

10) Aşağıdakilerden hangisi JQuery mobile sisteminde kullanılabilecek bir geçiş efekti değildir?

A. Flip
B. Slide
C. Click
D. Pop
E. Turn

Cevap : C) Click

Açıklama : jQuery Mobile geçiş efektleri arasında “slide”, “flip”, “pop”, “fade”, “turn” gibi seçenekler vardır. “click” bir olay türüdür, geçiş efekti değildir.

Yanıtınız yanlış ise “JQM Geçiş Efektleri” konusunu yeniden gözden geçiriniz.