Modern JavaScrıpt Fatih Kadir Akın
İçindekiler Bölüm 1: Temel Seviye: JavaScrıpt i Çalıştırmak 1 JavaScript Neye Benzer? 2 Temel Dil Yapısı ve Genel Hatalar 3 Küçük Harf Duyarlılığı (Case Sensitive) 3 Yorum Satırlarının Önemi 3 Noktalı Virgül ve ASI (Automatic Semicolon Insertion) 4 Parantezler ve Tırnak İşareti Sıralamaları 5 Rezerve Edilmiş Kelimeler 5 Anlamlı (Semantic) Kaynak Kodu 6 Yazım Standardı ve Kültürü 6 CamelCase İsimlendirme 7 Değişken ve Fonksiyon Yazımı 8 Kapsam (Scope) ve Nesne Parantezi Yerleşimi 8 Tablar, Girintiler (Indentatıon) 9 Geçici ve Özel Değişkenler 10 Chrome Developer Tools: Console 11 console.log() Kullanımı 12 JSbin.com 12 Genel JavaScript Sözdizimi (Syntax) 13 Değişkenler 13 Fonksiyonlar 16 Operatörler 20 Koşullar 22 Döngüler 33 Düzenli İfadeler 39 Nesnel Yönelime Göre Değişkenler 45 Veri Türleri 45
xi Modern JavaScrıpt İçindekiler Nesnel Yönelime Göre Fonksiyonlar 54 Fonksiyon Türleri 54 Kapsam (Scope ve Context) 56 JavaScript Exception Yönetimi 61 Bölüm 2: JavaScrıpt i Anlamak ve Nesnel Düşünmek 67 Nesnel Düşünmek Nedir? 68 Algısal Örgütlenme 68 Prototipleri Anlamak 71 prototype Nesnesi 72 proto Nesnesi 75 ınstanceof Deyimi 81 Object-Orıented JavaScript 82 Namespaces (İsim Alanları) 82 Kapsülleme (Encapsulation) 84 Bölüm 3: HTML/DOM Üzerinde JavaScrıpt 89 HTML Nedir? 90 HTML Yazmak 92 HTML ve JavaScript 94 DOM Nedir? 96 Node 97 Node İlişkileri 98 Nesnel JavaScript i Web Üzerinde Uygulamak 104 Hızlı DOM Yönetimi: jquery ve XPath 104 Olaylar (Events) 109 Olay Tabanlı (Event-Based) Programlama 117 Uygulamayı Modüllendirme 122
xii Modern JavaScrıpt İçindekiler Bölüm 4: CSS ve JavaScrıpt 131 CSS Nedir? 132 CSS Dosyaları 132 jquery CSS Metodu ve Document.styleSheets 137 Bölüm 5: JavaScrıpt Promıses ve Asenkron Programlama 143 Promıse Algoritması Nedir? 144 Kendimizden örnek 144 Sanki çok if/else gibi? 144 Promise 145 Birden Fazla Promise i Yönetmek 147 jquery Promıse 150 Bölüm 6: Test Güdümlü JavaScrıpt Geliştirme 157 Niçin test yazmamız gerekiyor? 158 Örnek 158 İlk olarak test yazılmalı 159 Test Sınıfı 159 QUnıt 161 Bölüm 7: JavaScrıpt Front-End Frameworkler 167 MVC, MVP, MVCP, MVVM Nedir? 168 MVC 168 MVP 169 Framework Seçimi 170 MVVM 170 Knockout.js ile MVVM Tasarım Şablonu 172 Backbone.js ile MVC Tasarım Şablonu 178
xiii Modern JavaScrıpt İçindekiler Bölüm 8: Etkin JavaScrıpt Kullanımı 195 Back-end ve Front-end in Ayrılması 198 AJAX 198 Bölüm 9: CoffeeScrıpt 215 Hızlı Bakış 216 CoffeeScrıpt i Yüklemek 219 Fonksiyonlar 219 Dizi ve Nesneler 220 Koşullar 221 Splat 222 Döngüler 223 CoffeeScript ve Sınıflar 226 Bölüm 10: JavaScrıpt ile Uygulama Örnekleri 243 jquery ile Slıder Plugin Yapmak 244 Backbone ile Twıtter Search Uygulaması Yapımı 248
1 Temel Seviye: JavaScrıpt i Çalıştırmak Bu Bölümde JavaScript Neye Benzer? 2 Temel Dil Yapısı ve Genel Hatalar 3 Yazım Standardı ve Kültürü 6 Chrome Developer Tools: Console 11 JSbin.com 12 Genel JavaScript Sözdizimi (Syntax) 13 Nesnel Yönelime Göre Değişkenler 45 Nesnel Yönelime Göre Fonksiyonlar 54 JavaScript Exception Yönetimi 61 JavaScript ilk önce bir scripting dili olarak ortaya çıktı. Yalnızca browser (tarayıcı) üzerinde çalışacak, temel sisteme yardımcı bir dil olarak hizmet edecekti. Web in gelişimi önüne geçilmez bir hal alınca, JavaScript dünyanın en önemli programlama dillerinden biri haline geldi. HTML5 in yükselişi, mobil uygulamaların HTML5 e olan tam desteği, Google ChromeOS ve JavaScript in Node.js ile sunucu tarafına taşınması, gerçek zamanlı uygulamaların JavaScript ile kolayca geliştirilebilmesi, HTML5 ve Canvas ın Adobe Flash ı çok gerilerde bırakması, Cloud un vazgeçilemez avantajları ve JavaScript in de Cloud da etkin rol alması gibi olağanüstü gelişmeler, JavaScript i çok değerli bir yere koydu.
2 Bölüm 1 Temel Seviye: JavaScrıpt i Çalıştırmak Arayüz geliştirme yalnızca tasarımdan çıkıp mühendislik yapmaya elverişli bir hale geldi. Öyle ki bu mühendislik artık sadece arayüz geliştirmede değil, JavaScript ile robot programlamaya kadar ilerledi. Biz de tüm bunları sağlayan, internet kullanan her kullanıcının belki de bilmeden tüm gününü çalıştırmakla geçirdiği JavaScript i yazmayı öğrenmeye koyulacağız. NOT Cloud, veya Cloud Computing (Bulut Bilişim); Web in gelişimi, internet hızlarının artması, sunucuların karşılayabildiği yük miktarının artması ile birlikte doğmuş bir kavramdır. Kavramı konusunda tamamen kesinleşmiş bir ifade olmamasına karşın verilerin bulut diye tabir edilen online bilgi ağı üzerinde saklanması, dağıtılması ve biriktirilmesi işlemlerinin tümüdür. Tüm bu işler internet üzerinden yürütülür. Ve bu göz önünde bulundurulursa, browserların en yardımcı dili olan JavaScript in popüleritesini sağlayan unsurlardan birinin de Cloud olduğu düşünülebilir. Cloud geliştikçe masaüstü uygulama sayısı azalacak ve yerine browser tabanlı çok yetenekli uygulamalar gelecektir. Bu çok yetenekli uygulamalardan biri ve en klişe örneği olarak da Google Docs gösterilebilir. Hatta Google, ChromeOS ile sadece Cloud üzerinde çalışabilen bir işletim sistemi geliştirmiş ve Cloud un gelmesini istediği yeri de hedeflemiştir. JavaScrıpt Neye Benzer Zihninizde bazı şeylerin canlanması, onu daha iyi öğrenmenizi sağlar. Bu açıdan bir JavaScript kodunun neye benzediğini görelim. Aşağıda yazdığımız kod kısa ve karmaşık bir JavaScript kodudur. Eğer yeni iseniz, bu kodu anlamamanız gayet normal. Fakat ileride kodların size tanıdık gelmesi sizin için bir avantaj. // Degisken tanimlamalari var _nesne = {}, // virgul ile degisken belirleme _sinif = function (parametre, baskaparametre) { // fonksiyon veri turu if (parametre) { // kosullar this.ozellik = deger ; // deger atama } else { this.degerler = []; // dizi tanimlama (function(self) { // kendiliginden calisan fonksiyonlar baskaparametre.foreach(function (deger) { // mapping / dongu isleri self.degerler.push(deger); // dizi yonetimi });
3 HTML/DOM Üzerinde JavaScrıpt Bu Bölümde HTML Nedir? 90 DOM Nedir? 96 Nesnel JavaScript i Web Üzerinde Uygulamak 104 Şimdiye kadar gördüklerimiz, biraz işe yaramaz şeylerdi. İşe yaramazlık derken kastettiğim şey, bunlarım önemsiz olduğu değil, neyi nerede kullanacağınızı bilememenizdir. Bu çok normal. Gördüğümüz şeylerin tümü, şimdi yapacaklarımızın temellerini oluşturuyordu. JavaScript bilindiği gibi, tarayıcıların en güçlü silahı, en büyük destekçisi. Eskiden yaptığı bir çok angarya işi artık CSS e bıraktığını düşünürsek, eskiden daha çok şeye malzeme olurken, şimdilerde CSS ile birlikte müthiş uygulamalar yapmak için harika bir yardımcı. HTML ve DOM un ne olduğunu bilmiyor olabilirsiniz. Bu durumda bu kısmı atlayarak sonraki kısımlara geçebilirsiniz.
90 Bölüm 3 HTML/DOM Üzerinde JavaScrıpt HTML Nedir? HyperText Markup Language, diyerek uzatabileceğimiz bu kısaltma, internetin en büyük ve en eski teknolojilerinden de biri. Markup Language, yani işaretleme dili olarak çevirebiliyoruz. İşaretleme dilleri, basitçe kümelerdir. Ben HTML i anlamanız için kısaca küme örneğini kullanacağım. İşaretlemek aslında kümelemektir. NOT Ben HTML e çok hızlı değinip geçeceğim. HTML i öğrenebileceğiniz HTML5 kitapları vardır. Dikeyeksen Yayınlarından HTML5 ve CSS3 kitabını tavsiye ederim. Satın alıp okuyabilir veya internet üzerinde milyonlarca kaynağa gözatabilirsiniz. Kümeleme günlük hayatta sürekli yaptığımız bir işlemdir; hemen bakalım:» Araba Ön Kapılar Sağ Kapı * Kapı kolu * Cam * Ayna Sol Kapı * Kapı kolu * Cam * Ayna Arka Kapılar Sağ Kapı * Kapı kolu * Cam Sol Kapı * Kapı kolu * Cam Bagaj Kaput
4 CSS ve JavaScrıpt Bu Bölümde CSS Nedir? 132 CSS Dosyaları 132 jquery CSS Metodu ve Document.styleSheets 137 Bir arayüz geliştiricinin temel olarak bilmesi gereken dillerden biri olan CSS (Cascading Style Sheets, Katmanlı Stil Dosyaları şeklinde Türkçeleştirilebilir) de en az HTML kadar JavaScript ile bağlantılıdır. Öyle ki, işin CSS kısmı işin tasarım ve yaratıcılık kısmını tetiklediğinden kullanıcının en çok gördüğü kısımdır. Yani bir arayüz geliştiricisinin geliştirdiği arayüz kullanıcılar tarafından yazdığı CSS üzerinden not verilir. İstediğiniz kadar iyi JavaScript veya HTML bilin, CSS iniz iyi değilse pek iyi görünmeyen arayüzler çıkarabilirsiniz. Bu açıdan CSS in önemini ve JavaScript ile bağlarını önemsemek ve uygulamak gerekir.
132 Bölüm 4 CSS ve JavaScrıpt CSS Nedir? CSS, bir sayfanın stillenmesine yardım eden bir tanımlama listesidir. CSS3 getirdiği yeni özelliklerle yalnızca stillendirme değil, animasyon ve bir çok interaksiyonu da geliştiricilere sunmuştur. NOT HTML, CSS ve JavaScript arasındaki ilişkiyi bir anatomiye benzetebiliriz. HTML; İskelet yapı, temel interaksiyonların gerçekleşmesini sağlayan yapı. HTML, CSS ve JavaScript düşünerek yazılmalıdır. Zira eklem olmayan bir yere istediğiniz kadar kas koyun bir anlam ifade etmeyecektir. CSS; Yüzey yapısı ve estetik. Bu iskelet yapısına biraz estetik kazandırmak çok yerinde olacaktır. Zira bu her ne kadar mühendislik ve matematik de olsa, kullanıcı her zaman estetiğe dikkat eder. JavaScript ise, bu yapının hareket ve interaksiyon mekanizması, mekaniğidir. JavaScript için sayfaların mekaniği diyebiliriz. Veya canlı bir anatomi için kas sistemi. Bu açıdan bakıldığında bu hiyerarşinin yeterince anlaşıldığını düşünüyorum. CSS Dosyaları CSS dosyaları,.css ile biten dosyalardır ve bir CSS dosyası şuna benzer: html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection {
CSS Dosyaları 133 } background: #b3d4fc; text-shadow: none; img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; }.button { border: 0; } CSS içerisindeki tanımlamlar şu şekilde özetlenebilir. <seçici> { } <özellik>: <değeri> CSS dosyaları sayfaya link tagı ile bağlanabilir veya sayfa içerisinde style tag i olarak kullanılabilir. Ayrıca elementlere style ve class attribute larıyla da eklenilebilir. <!doctype html> <html> <head> <title>javascript!</title> <link rel= stylesheet href= main.css > <script src= main.js ></script> </head> <body> <h1>merhaba!</h1> <p> Bu benim ilk HTML Sayfam ve CSS var! </p> </body>
6 Test Güdümlü JavaScrıpt Geliştirme Bu Bölümde Niçin test yazmamız gerekiyor? 158 QUnit 161 Test Driven Development, kısaca TDD, Türkçe ye Test Güdümlü Geliştirme olarak çevrilmiş bir programlama anlayışıdır.
158 Bölüm 6 Test Güdümlü JavaScrıpt Geliştirme Niçin test yazmamız gerekiyor Geleneksel kodlamada işler şu şekildedir;» Sınıfı (sınıf bile olmayabilir) yaz,» Kodu deploy et,» Hata bildirilirse hatayı bul ve kodu kendin düzelt. Biraz daha geliştirilmiş geleneksel kodlamada ise işler şu şekildedir;» Sınıfı yaz,» Olası case ler içine loglar koy,» Kodu deploy et» Hata bildirilirse loglara bak ve kodu düzelt. Fakat bu geleneksel yöntemler nesne yönelimli programlama sırasında biraz canınızı sıkabilir, çünkü bu kez loglamaları koymanız gereken yer sizin sınıflarınız olacak ve her ne kadar kod tekrarını engellemiş olsanız da, tekrar kullanılabilirlik o derece aşağılara düşecektir. Yani aslında yaptığınız şey OOP değil OOP görünümlü bir yapı olacaktır. Hem stabilizasyonu artırmak hem de daha hızlı ve düzgün kod yazmak için kullanılması gereken yöntem ise TDD dir. İnternette TDD ile ilgili bulduğunuz dökümanları aradıktan sonra kendinize şu soruyu soruyorsunuz genellikle; Niçin test yazayım ki, ne gereği var? ve ardından; Test yazacağıma kod yazarım, test yazmakla vakit harcamaktansa.. düşünceleri kafanızda dönüyor. Fakat işler tam düşündüğünüz gibi değil. Örnek Şimdi biraz örnekle inceleyelim; diyelim ki bir matematik sınıfımız var. Klasik dört işlemi yapabilsin, yani toplama, çıkarma, çarpma, bölme işlemleri için birer metod olsun. Normalde nasıl bir sınıf yazardık? Maths = { add: function (a, b) { return a+b; }, subst: function (a, b) { return a-b; },
Niçin test yazmamız gerekiyor 159 div: function (a, b) { return a/b; }, multiple: function (a, b) { return a*b; } }; Veya daha zekice işlemler, daha farklı implementasyonlar olabilir. TDD size kod yazmayı sevdirirken yazdığınız kod kadar da iyi kod yazmaya yönlendiriyor. İlk olarak test yazılmalı Nasıl yani? Olmayan bir sınıfı mı test edeceksiniz? Evet, aynen öyle. Çünkü TDD testten geçmeniz için var olan eksiklerinizi söyleyecek, sınıf yazılması da dahil. Hani okulda sınavdan geçemediğimiz zaman öğretmenlerden hangi soruda hata yaptığımızı öğrenmek isterdik ya, diğer sınavı geçebilmek adına, mantık tamamen aynı işliyor. Test Sınıfı Önce bomboş bir Maths.js oluşturun, daha sonra ise aşağıdaki örnekteki gibi bir MathsTest.js <html> <head> <script src= Maths.js ></script> <script src= MathsTest.js ></script> </head> </html> MathsTest.js: console.group( Ekleme fonksiyonu ); console.assert ath.add == = olmal ; console.assert ath.add == 0 = 0 olmal ; console.assert ath.add == 0 = olmal ; console.groupend(); console.group karma fonksi onu ; console.assert ath.subst == 0 = 0 olmal ; console.assert ath.subst == = olmal ; console.assert ath.subst == 0 = 0 olmal ;
7 JavaScrıpt Front- End Frameworkler Bu Bölümde MVC, MVP, MVCP, MVVM Nedir? 168 Framework Seçimi 170 Knockout.js ile MVVM Tasarım Şablonu 172 Backbone.js ile MVC Tasarım Şablonu 178 JavaScript, geliştiği dönem süresince insanlar tarafından anlaşılması ve kullanılması zor bir dil olarak değerlendirildi ve bir çok geliştirici hala aynı şekilde düşünüyor. Bu zorluk algısı insanları bazı kolaylaştırıcı etkenlere yöneltti ve bunun sonucunda da günümüzde yükselişe geçen frameworkler oluştu.
168 Bölüm 7 JavaScrıpt Front-End Frameworkler MVC, MVP, MVCP, MVVM Nedir? Öncelikle bu işin temelini oluşturan MVC (Model View Controller), MVP (Model View Presenter), MVVM (Model View View Model) tasarım şablonlarının tanımlarından bahsedelim. Sonrasında ise hangi framework ü neye göre seçeceğimizi konuşacağız. MVC MVC tasarım şablonu, en yaygın kullanılan, özellikle back-end yapılarda en uygun tasarım şablonudur. Aşağıda görülen bürokrasi ile işler yürür. Görüldüğü gibi, kullanıcılar interaktiviteyi Controller a View üzerinden erişerek sağlarlar. Model ise bir nevi veri birimlerini yöneten bir işlev görür ve kimi zaman, Controller ile View arasına girerek belli yapılardaki veriyi taşıma işlevi görürler. Zend Framework, Symfony, Django, CodeIgniter vb. framework ler bu işlevi yerine getiren yapılardandır. NOT Ayrıca daha önceden PHP ile geliştirmiş olduğum MVC framework ü bu işlevi yerine getiren unsurlardan birisidir. Oldukça basit yazılmış olan bu sistem, MVC yi doğru anlamlarıyla kullanır ve Object Oriented ın önemli kurallarına uyar. Nasıl çalıştığını merak ediyorsanız, kodları incelemek için GitHub hesabımdaki http://github.com/fkadeveloper/mvc projesine gözatabilirsiniz. Backbone.js, bu işi client-side yapan framework lerden birisidir. Fakat bilindiği gibi, client-side da işler biraz farklı yürüyor. Veri barındırma, veri saklama gibi
MVC, MVP, MVCP, MVVM Nedir? 169 işlemler daha çok server tarafında yapıldığından bu, yeni başlayanlarda soru işaretleri yaratabiliyor. Özellikle öncesinde bir MVC geçmişi olanlar bu işin client-side da nasıl yürüdüğüne dair bir takım sıkıntılar yaşıyorlar. Ben de bir Zend Framework kullanıcısı olarak Backbone u öğrenirken bu tarz sıkıntılara aşina oldum, fakat Jack i geliştirdiğim zaman her şey daha berraklaşmıştı. O halde kafamızda soru işaretleri kalmaması adına, biraz daha derinlere inelim ve MVP tasarım şablonu nedir, onu öğrenelim. MVP Model-View-Presenter olarak açılan bu tasarım şablonunda görülen Presenter öğesi, Controller yapısının biraz daha view e yaklaşması olarak nitelendirilebilir. Presenter ismi ise, bence, tam oturmuş bir isimdir. Çünkü aslında hem bir şeyler göstermekte, hem de yönetmektedir. Yani tam olarak sunmaktadır. Yani ne görünüm (view) kadar sabit ve işlevsiz, ne de kontrolcü (controller) kadar sadece işleve yarayandır. View e biraz daha fazla karışır, fakat Model ile de ilişkilidir. MVVM e çok benzer (onu da anlatacağım), fakat daha az karmaşıktır. İş yükünün büyük kısmı Presenter a düşer. Kısaca bir şablon ile özetlemek gerekirse; Backbone, yapısı itibariyle MVP ye benzer. Backbone un view ları Presenter gibi hareket ederler. Ayrıca Router yapısını içermesi, klasik MVC gibi de kullanılabilmesi sebeplerinden ötürü, MVC ye de benzer. Bu yüzden Backbone için MV* gibi bir tabir koyanlar da olmuştur.