BMB305. Web Tasarımı ve Programlama

Transkript

1 BMB305. Web Tasarımı ve Programlama Ders 4: JavaScript Kütüphaneleri Erdinç Uzun NKÜ Çorlu Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü

2 Konular AJAX JSON jquery jquery UI jquerymobile AppML AngularJS

3 AJAX Ajax (Asynchronous JavaScript and XML) geliştiricilerin hayali idi çünkü: Web sayfası tekrar yüklemeye gerek kalmaması Web sayfası yüklendikten sonra aynı sayfanın sunucudan veri istemesi Web sayfası yüklendikten sonra aynı sayfanın sunucudan veri gönderebilmesi Arka planda sunucuya veri gönderebilme

4 AJAX HTTPRequest Çalıştır Geriye bir cevap veya veri gönder XMLHTTPRequest Nesnesi yaratma XMLHTTPRequest gönderme (send) Veriyi alma (responsetext) Elementi güncelleme (innerhtml)

5 XMLHTTP Request XMLHttpRequest istemci tarafında çalışır. Birden fazla asenkron web sayfasına postback (Form Submit) ve yenileme (F5) yapmadan istekte bulunabilir ve gelen cevapları istekte bulunanlara iletir. XMLHttpRequest bir HTTP isteği göndermek için istemci koduna (örneğin bir Web sayfasındaki JavaScript) yol sağlar. Web uygulamalarında AJAX birimi bir JavaScript nesnesi olan XMLHttpRequest nesnesi aracılığı ile oluşturulur. Daha sonra oluşturulan bu nesne aracılığıyla çeşitli yordamlar kullanılarak bilgiler gönderilir ve gelen sonuçlar da bu nesnenin değişimi takip edilerek işlenir.

6 XMLHTTP Nesnesi open( yöntem, adres, eşzamanlılık, kullanıcı adı, şifre ) Sorgu gönderilmeden önce, sorgunun gönderileceği adresi, gönderi metodunu ve diğer seçime bağlı nitelikleri belirler. setrequestheader( etiket, değer ) Gönderilen sorguya bir etiket/değer başlığını iliştirir. send( içerik ) Sorguyu gönderir. Seçime bağlı olarak gönderilebilen verileri ve DOM(Document Object Model) ile yaratılmış verileri de gönderebilir. getresponseheader( başlıketiketi ) Verilen başlık etiketinin taşıdığı değeri string olarak elde eder. getallresponseheaders() Tüm karşılık başlık etiketlerini ve değerlerini string olarak elde eder. abort() Geçerli isteği iptal eder.

7 XMLHTTP Nesnesi Geri Dönüş Değerleri onreadystatechange Durum değişikliğini kontrol eder. readstate Tam sayı değerleri durum bilgisini belirtir: 0 = uninitialized (başlatılmadı) 1 = loading (yükleniyor) 2 = loaded (yüklendi) 3 = interactive (etkileşimli) 4 = complete (tamamlandı) responsetext Veriyi string biçiminde yollar. responsexml Veriyi XML olarak yollar. status Sunucunun durumunun sayısal değerini belirtir: 404: Not found (Bulunamadı) 200: OK (Tamam) statustext Durumla gelen yazı değerini belirtir.

8 JSON JSON (JavaScript Object Notation) veriyi depolama ve değiştirme için bir söz dizimidir. JSON, XML göre daha sade ve kolay kullanımlı bir alternatiftir. XML deki gereksiz etiket tekrarını azaltır. JSON XML

9 JSON JSON verisini ayrıştırma işlemi Obj üzerinden tüm verilere ulaşabiliriz.

10 JSON vs. XML Farklılıkları JSON bitiş etiketi yoktur JSON daha kısadır JSON daha hızlı okunabilir ve yazılabilir JSON dizileri kullanabilir Ortak noktaları Her ikisi rahatlıkla okunabilir Hiyerarşik bir yapıdadır. (Düzenli) Birçok programlama dili tarafından kullanılabilir ve ayrıştırılabilir (parse). XMLHttpRequest ile sunucudan istemciye getirilebilir

11 JSON vs. XML AJAX uygulamalarında, JSON XML e göre daha hızlıdır. XML kullanırken XML dokümanını getir XML DOM u kullan Değişkenler üzerinden veriler çıkar JSON kullanırken JSON metnini getir JSON metnini Parse et. (Ayrıştırma işlemi: Değikenler ve veriler ayrılır. Hiyerarşik bir şekle getirilir.)

12 jquery jquery, John Resig tarafından 2006 yılında geliştirilmiş bir açık kaynak JavaScript kütüphanesidir. jquery, JavaScript programlamayı önemli ölçüde kolaylaştırır. jquery nin amacı web sitenizde kullandığınız JavaScript kodlarını çok daha kolay bir şekilde yazmanıza olanak sağlamaktır. Felsefesi: «write less, do more» (daha az yaz, daha çok yap) JavaScript ile uzun kodlarla yazılan bir görev, Jquery ile daha az kod ile hatta bazen bir satır kod ile yazılabilir. jquery Ajax ve DOM işlemlerini destekler Yılından beri kullanılan jquery 2012 yılına kadar inanılmaz bir kullanım artışı göstermiştir. Alternatifleri olmasına rağmen en fazla tercih edilen JavaScript kütüphanelerindendir. Google Microsoft IBM Netflix

13 jquery Özellikleri HTML/DOM işleme CSS işleme HTML event (olay) metotları Effektler ve animasyonlar AJAX Yardımcılar Buna ek olarak, jquery nin hemen hemen her görev için eklentileri vardır. JQuery kütüphanesi kullanılarak geliştirilen jqueryui ve jquery mobile gibi daha gelişmiş arayüzleri ve araçları daha kolay kullanabilmemize olanak veren ek kütüphaneler de mevcuttur.

14 jquery jquery nin iki farklı versiyonu yayınlanır: Production version - sitenizde kullanmanısı önerilen sıkıştırılmış ve boşlukların minimize edilmiş halde bulunan versiyondur. Dosya uzantısında min eki vardır. Development version Test amaçlı, hata ayaklı için okunabilirliğin rahat olduğu versiyondur. Sıkıştırma ve minimize işlemleri uygulanmadığı için dosya boyutu daha büyüktür.

15 jquery Kurulumu jquery internet adresinden kütüphane indirilir ve bir JavaScript dosyası gibi HTML içine eklenir. Eğer web sitenizde dosyanın yer kaplamasını istemezseniz aşağıdaki web adresindeki kütüphaneleri de direkt sisteminizi bağlayabilirsiniz.

16 jquery Sözdizimi (Syntax) jquery sözdizimi HTML elementleri seçmek ve bu elementler üzerinde işlem yapmak için çok uygundur. Çok basit bir seçim işlemi: $(selector).action() $, jquery tarafına erişim / tanımlama. (selector) HTML elementini bulma veya sorgulama (action) elementler üzerinde işlem yapmayı temsil eder. Örnekler: $(this).hide() geçerli elementi gizler. $("p").hide() tüm paragraf elementlerini gizler. $(".test").hide() class ismi test olan elementleri gizler. $("#test").hide() id ismi test olan elementi gizler.

17 Document Ready Event Tüm HTML dokümanı yüklenmeden jquery çalışma işlemine başlamaz. Bunun için dokümanın ready (hazır) duruma gelmesi beklenir. C açısından main gibi düşünebilirsiniz. jquery çalışanları daha az kod içeren bir metotta tasarlamışlardır.

18 Selectors (Seçiciler) jquery kütüphanesinin en önemli kısımlarından biridir. HTML elementlerini seçmemizi ve üzerine işlem yapmamızı sağlar. HTML elementinin id, class, type, attribute, attribute değerleri vs. üzerinden HTML element/lerini bulmak için kullanılır. Tanımlama olarak CSS Selector ları andırır. Bütün seçme işlemleri $ işareti ile başlar.

19 Selectors : Element ismi Paragraf p elementlerini seçme $("p") Aşağıdaki kod tüm p elementlerini gizler. JavaScript bu işlem için tüm p elementleri dolaşılıp hepsinin görünürlükleri teker teker ayarlanmalıydı.

20 Selectors: id id selector: $("#test") Bir önceki örnek tüm paragraf elementlerini gizlemişti. Sadece belirli bir paragraf elementini gizlemek için elemente id özelliği verilebilir.

21 Selectors: class $(".test") Element ismine bakmaksın sadece aynı sınıfları seçmek için kullanılır.

22 Selectors $("*") Tüm elementleri seçer $(this) Geçerli olan elementi seçer $("p.intro") p elementi olup intro class ına sahip elementleri seçer. $("p:first") İlk p elementini seçer $("ul li:first") ul elementi içindeki ilk li elementini seçer $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") Tüm ul elementleri içinde ilk li elementlerini seçer href özelliği olan elementleri seçer target özelliği _blank olan tüm a elementlerini seçer target özelliği _blank olmayan tüm a elementlerini seçer Type özelliği button olan elementleri seçer (input elementi içinde) çift olan tr elementleri tek olan tr elementleri (table elementini hatırla)

23 jquery ayrı bir dosyada JavaScriptte olduğu gibi ayrı bir js dosyasına jquery kodlarınızı yazıp JavaScript dosyası bağlar gibi bağlayabilirsiniz.

24 jquery Events (Olaylar) Bir olay bir şeyler olduğu zaman yapılacak harekettir. Fareyi bir element üzerine getirme Bir radiobutton seçme Bir element üzerine tıklama (sadece button elementi değil, herhangi bir element) Bu gibi işlemler olunca bir fire (ateşleme) işlemi olur. Örneğin klavyeden bir tuşa basma olayı ateşlendiğinde kullanıcının bir tuşa basma hareketi olduğunu anlarız.

25 jquery Events Fare Olayları Klavye Olayları Form Olayları Document/Window Olayları click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload

26 jquery Adım Adım Bir Olay Tüm p elementlerine ulaşma ve click olayını açma Click olayı bir function açma Tıklanan p etiketini gizleme this kelimesi tıklanan etiketi temsil eder.

27 jquery Adım Adım Bir Olay Olay document ready fonksiyonu içine yazılır. Function parantez açma ve kapamalara dikkat. Eğer kodunuz çalışmazsa internetten kopyala yapıştır yapıp tekrar düzenleme yoluna gidin. jquery, iç içe fonksiyonlar her ne kadar zorlaştırıyor gibi görünse de ortama alıştığınızda çok rahat kod yazdığınızı göreceksiniz.

28 jquery Mouse Events Tek tıklama Çift tıklama Alana giriş Alandan çıkış Mouse basılı tuttuğumuzda Mouse tıklamayı bıraktığımızda

29 jquery Mouse Events Hover işlemi mouseenter ve mouseleave fonksiyonlarının her ikisini içerir. Alert, bir JavaScript fonksiyonudur. jquery yazarken JavaScript te yazabilececeğinizi unutmayın.

30 Focus Olayı Bir seçim yapıldığında o seçimden sonraki işlem belirlenir. Seçim yapılan text in arkaplan rengini değiştirir. Css kullanımına dikkat edelim.

31 on() Metotu Aynı anda bir veya birden fazla işlemi aynı elemente yaptırmak için kullanılır. P etiketi için üç işlem yaptırılıyor. Sadece bir işlemde yaptırılabilir. Ve tıklama işlemi aşağıdaki gibi yazılabilir. Klasik tıklamadan hiçbir farkı yoktur. Seçim sizin!!!

32 jquery Effects: Hide and Show Gizleme ve gösterme özelliği

33 jquery Effects: Hide and Show Hide ve Show Özellikleri de milisaniye parametresi alabilir. Bu sayede gizleme ve gösterme işlemlerine daha görsel olur. jquery toggle(): Hide ve Show işlemini tek kod ile yapmamızı sağlar. toogle olayının da zaman parametresi vardır.

34 jquery Effects: Fade ve Slide Farklı fade işlemleri vardır. jquery fadein() jquery fadeout() jquery fadetoggle() jquery fadeto() Slow ve fast parametresi kullanılabilir. Milisaniye parametresi de kullanılabilir. Farklı slide işlemleri vardır. jquery slidedown() jquery slideup() jquery slidetoggle()

35 Jquery Effects: Animate Animasyon yapmak için kullanılır. Örneğin bir button a bir div etiketinin pozisyonunu değiştirme.

36 Jquery Effects: Stop Animation Süreli bir animasyonu durdurup kaldığı yerden devam ettirebilirsiniz.

37 jquery - Callback Animasyon tamamen bittikten sonra devre girer. $(selector).hide(speed,callback); Altı çizili kısım callback için yazılan fonksiyondur. Callback parametresi kullanılmasaydı, işlem bitmeden alert işlemi çalışırdı. Callback kullanılmayan kod aşağıdadır.

38 jquery - Chaining Birden fazla işlemi ardı ardı sıralayabilirsiniz. Türkçeye zincirleme olarak çevirebiliriz. Görsellik sizi rahatsız ettiyse jquery aşağıdaki kullanıma da izin verir.

39 jquery DOM işlemleri W3C tanımı ile DOM "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.«jquery DOM için üç işlem ön plana çıkar. text() element içeriği metin olarak alabilir (get) ve değiştirebilirsiniz (set) html() elementin içeriğini html olarak alabilir (get) ve değiştirebilirsiniz (set) val() Form element değerlerini alabilir (get) ve değiştirebilirsiniz (set) Get: $("#test").text() Set: $("#test").text("değiştir")

40 jquery DOM İşlemleri attr() elementin özellik değerini alabilir (get) ve değiştirebilirsiniz (set). get set Attr set işlemi ek parametre olarak eklenir.

41 jquery Yeni bir elemet append() Seçilen elementin sonuna ekler prepend() Seçilen elementin başına ekler after() Seçilen element içeriğinden sonra ekler. before() Seçilen element içeriğinden önce ekler. İçerik elementin iç kısmı oluyor.

42 Element Yaratma (Create) Elementi illaki jquery ile yaratma zorunda değilsiniz. Aşağıdaki örnekte bir element Üç farklı şekilde yaratılıyor. Javascript Üç farklı durumu body etiketine ekleme, jquery

43 Element içeriği silme remove() seçili elementi siler. empty() seçili elementin çocuklarını siler. Belli bir seçim kuralına göre silme işlemi yapılabilir. Class değeri test olan p elementleri: Class değeri test ve demo olan p elementleri:

44 jquery - CSS Classes jquery ile CSS üzerine yapılan işlemler addclass() Seçili elementlere bir veya birden fazla class özelliği ekleme. removeclass() Seçili elementlerden bir veya birden fazla class ı çıkarma toggleclass() Seçili elementlerin class özellikleri arasında geçiş css() style özelliğini set ve get etme

45 jquery - CSS Classes Blue class ı ekleme Birden fazla element seçimi

46 jquery - CSS Classes css direkt style üzerine işlem yapmamızı sağlar. Yukarıdaki gibi iki parametre alır, özellik ve değeri

47 jquery Dimension (Boyut) width() height() innerwidth() innerheight() outerwidth() outerheight() Bir div elementinin genişlik ve uzunluğunu alma (get) Boyutunu değiştirme (set)

48 jquery Elementler arası dolaşım Parent ile ilgili işlemler parent() parents() parentsuntil() Alt çocuklar ile ilgili işlemler children() find()

49 jquery Elementler arası dolaşım Dolaşma siblings() next() nextall() nextuntil() prev() prevall() prevuntil() Filtering (Filtreleme) first() last() eq() : eq(3), üçüncü element filter(): sonuçlar arasında belli bir şarta göre seçim not(): eşleşmeye sonuçları döndürür.

50 jquery - AJAX Sayfa yüklenirken veya yüklendikten sonra sunucudan bilgi alma, (Ekranı refresh etmeye gerek kalmıyor. XMLHTTPRequest i hatırla) Sunucudaki txt uzantılı dosya yükleniyor.

51 jquery - AJAX Sunucu sonucu Eğer sunucu ile bağlantıda hata oluşursa 2. else çalışır ve hatanın sebebini yazar.

52 jquery AJAX (Get, Post) HTML Form larda get ve post işlemlerini öğrenmiştik. Bu özellikleri AJAX üzerinde de kolayca kullanabilirsiniz. Get işlemi Direkt data bilgisi gönderiliyor.

53 jquery AJAX (Get, Post) Post işlemi Kendimize ait veriler etiketli bir biçimde gönderiliyor.

54 jquery diğer projeleri jquery User Interface (jquery UI) jquery Mobile Qunit: Web uygulamanız için unit testing imkanı sunar. (Yazılım Mühendisliği Test Teknikleri) Sizzle: Daha az scriptle yazılmış, küçültülmüş bir jquery kütüphanesidir. Bazı Jquery özellikleri kullanılamaması rağmen selector özellikleri kullanılabilir.

55 jquery UI jquery UI(User Interface-Kullanıcı Arayüzü) jquery üzerine kurulmuş bir javascript kütüphanesidir. Tasarım ağırlıklı bir kütüphanedir. Html elementlerine efekt ve işlevsellik katmak için kullanılır. Örneğin: sürükle-bırak, yeniden ölçülendirme, takvim, progressbar, slider, menü, açılan pencereler ve daha fazlasını çok kolay şekilde yapmaya olanak sağlar.

56 jquery UI Tanımlamalar jquery-ui.css: ui için olan css ayarları bulunur. Farklı css ayarlarını jqueryui.com adresinden indirebilirsiniz. Hatta kendinizi özel bir css oluşturma şansınız var. jquery-versiyon.js öncelikle sisteme eklenir. jquery tabanlı bir kütüphane olduğu için öncelikle jquery eklenmesini ister. Jquery-ui.js: UI özelliklerini kullanmak için eklenir.

57 jquery UI - Draggable özelliği Elementlere taşınabilirlik sağlar.

58 jquery UI - Diğer özellikler Draggable: Sürükle Droppable: Bırak Resizable: Boyutu değiştir Selectable: Seçim yapabilme Sortable: Sıralayabilme

59 jquery UI - Widgets Accordion AutoComplete Button DatePicker Dialog Menu Progressbar Selectmenu Slider Spinner Tabs Tooltip

60 jquery UI - Effects Add Class Color Animation Easing Effect Hide Remove Class Show Switch Class Toggle Toggle Class jqueryui.com üzerinden tüm efektleri inceleyebilirsiniz.

61 jquery Mobile Jquery Kütüphane yapısı üzerine inşa edilmiş olan Jquery Mobile ile mobil web uygulamaları geliştirmemiz oldukça kolay ve hızlıdır. Jquery Mobile ile uygulama geliştirmek için temel düzeyde HTML, CSS ve jquery bilmemiz yeterlidir. Kullanımda olan akıllı telefonlar ve tablet bilgisayarların birçoğu tarafından desteklenmektedir.

62 jquery Mobile Mobile programlama her ortam için uygun dilleri öğrenmek gerekmektedir. Android and Blackberry için Java ios için Objective C Windows Phone için C# and.net, etc. Günümüzde mobile programlama için HTML5, CSS3, JavaScript ve AJAX kullanılarak minimal bir script tüm ortamlara uygun bir yazılım başarılabilir. jquery Mobile temel mobile programlama için işlevler barındırır. Dosyasının boyutu oldukça küçüktür, ayrıca bilinen HTML5 özelliklerinin büyük bölümünü desteklemektedir. JQuery Mobile özel bir yazım biçimi gerektirmez fakat bazı durumlarda sayfamızda kullandığımız html etiketlerinin (html tag) nasıl olacağı, nasıl gösterilmesi gerektiği hakkında bilgi vermemiz gerekebilir.

63 jquery Mobile - Bağlantı jquery css ve js dosyalarını head bölümünde tanımlanmalı

64 jquery Mobile İlk Uygulama

65 jquery Mobile - Dialog Kolay şekilde dialog üretebilirsiniz. Body etiketinin içi İlk görülen web sayfası Linke tıklayınca gelen sayfa Elementlerin özelliklerini iyi bir şekilde bildiğiniz de mobile uygulamalar için çok hızlı kod üretebilirsiniz.

66 jquery Mobile Diğer Özellikler Sayfa Geçişleri Mobile Button lar Mobile İkonlar Popups (Açılır kutular) Toolbar (Menu tarzı) NavBars (Menu tarzı) Panels Collapsibles (Açılır pencere gibi) Tables (Gelişmiş Table Özelliği) Grids (Gelişmiş Grid Özelliği)

67 jquery Mobile Diğer Özellikler Mobile Lists List List View List için Filter Özelliği Mobile Forms Mobile Themes: (Birden fazla theme) Mobile Events: jquery kodları ile tüm olayları yönetebilirsiniz. Daha fazla bilgi için jquerymobile.com veya

68 AppML (Application Modeling Language) AppML bir uygulama modelleme dilidir. AppML herhangi bir web sayfasında çalışabilir ve ek bir yükleme gerektirmez. AppML HTML uygulamasına veri almak için kullanılır. Bu veri: Bir nesne Bir dosya Bir veritabanı olabilir.

69 AppML Örneği 1 appml.js BootStrap Çift süslü parantez AppML satırıdır. Burada veri istenir. {{alan_ismi}} Object veri JSON Veri Hiç döngü kurmadan kolay bir şekilde veriyi tablo içine yazmamızı sağladı.

70 AppML Örneği 2 Otomatik çekme yerine AppML sınıfı üzerinden veri çekme Nesne oluştur Nesneye veri kaynağını belirle Sunucu tarafı!!! Önümüzdeki haftalarda Verileri sunucudan getir Kayıtları diziye at Verideki kayıt uzunluğu Bu klasik süreçtir. AppML {{alan_adi}} kullanımı bizi bu zahmetli kodtan kurtarır.

71 AppML Örneği 3 Sunucudan gelen veri içinde ek bilgilere göre sayfalama işlemi yapmak çok kolaydır. JSON Veri

72 AngularJS AngularJS, HTML yeni özellikler ile genişletir. AngularJS, tek sayfalı uygulamalar (Single Page Applications) için çok iyi bir çözümdür. AngularJS kütüphanesi Metin kutusundaki name değiştikçe H1 etiketi içindeki name de değişir. AppML gibi veri çekme çift süslü parantez ile yapılır.

73 AngularJS data-ng-init başlangıç veri etiketidir. Bir firstname değişkeni içinde veri vardır. data-ng-bind ile başlangıçta verilen veri çekilebilir. Ayrıca verinin bulunduğu değişken özelliği kullanılabilir. Süslü parantezler arasında direkt işlem dahi yaptırılabilir. ng-app, bir AngularJS uygulamasının başlatır. ng-init, uygulama verisini başlatır. ng-model, uygulama verisine HTML control (input, select, textarea) değerlerini bağlar.

74 AngularJS Metin kutularındaki değişimden direkt etkilenir. İki değişkenin birleştirilmesine dikkat. ng-controller bir JavaScript Nesnesidir ve JavaScript bölümü ile iletişimde kullanılır.

75 AngularJS ng-repeat foreach e benzer bir döngü ile dizi veya veri kümesi çekilebilir.

76 Angular JS AngularJS Filters: Verileri formatlı biçimde gösterme AngularJS HTML: Sunucudan veri çekme AngularJS Tables: Table özelliğini verilerle kullanma AngularJS Events: Angular olay yönetimi AngularJS Forms: Form içindeki elementleri ayarlama Angular Validation: Doğrulama işlemi

77 Kaynaklar Wikipedia Yazisi/171.aspx