BackboneJs dedikleri nedir

Selam ,

Önceki yazıyı bitirir bitirmez yeni yazım için sabırsızlıkla başlıyorum. Backbon.js web uygulama iskeleti.

Bu yazımı daha iyi anlayabilmeniz için biraz JavaScript ve biraz da jQuery bilmek yeterli olacaktır. Bu konuda daha önce yazdığım JavaScript'e Giriş ve JavaScript Orta Seviye yazılarım yeterli olacaktır.

Backbone.js ve Vue.js benim en favori JavaScript iskeletlerim. Çünkü anlaması ve kullanması kolay. Backbone.js hakkında da bir yabancı sitede çok yararlı olduğunu düşündüğüm bir döküman buldum ve bunun üzerinden gideceğim.

Backbone.js'de en sevdiğim özellik Node gerekmeden standart bir web sayfası olarak çalıştırabilmek. Node kullanmayacak mıyız? Biraz kullanacağız, ama sadece bize bir server ile test etmek gerektiğinde. O da daha bu yazının çok ilerilerinde olacak.

Backbone.js MVC yapılardan bir tanesi (Model View Controller). Bu yapıdan kısaca bahsedersek, model verilerin saklanması ve işlenmesini sağlar, controller program lojiğini içerir ve view kullanıcıya gösterilen görselleri içerir.


Backbone'da view ve controller parçaları bir arada gibidir. Ayrıca Router denilen bir yapı da var ki bununla tek sayfalık uygulamalar yapılabilir. Bunlar tek bir web sayfasından oluşan uygulamalardır. Bu halleriyle masaüstü uygulamasına benzerler. Bir örnek GMail internet sayfasına bakabilirsiniz.

Backbone temelde şu parçalardan oluşuyor,

• Olaylar - Nesnelere belirlenen olaylar sonucunda işlemler yapabilme kabiliyeti kazandırır.
• Modeller - Uygulama verilerini saklar ve bağlantılı lojiği içerir.
• Kolleksiyonlar - Modellerden oluşan bir topluluk. Model ile belirlenen verileri saklamak için kullanılır.
• Görseller - Modelleri kullanıcıya göstermek için gereken görsel kodlarını ve kullanıcı etkileşimi için olaylara dayalı lojiği kapsar.
• Router'lar - Tek sayfalık uygulamalar için kullanılan program yönlendiricileri. Adres olarak değişik değerler vererek aynı sayfa içinde kullanıcıya başka şeylerin gösterilmesini ve işlevlerin değişmesini sağlarlar.

JavaScript Orta Seviye

Merhaba,

JavaScript'e Giriş yazımızın ardından şimdi de orta seviyede bir yazıyla öğrenmeye devam ediyoruz. Bu bölümde temel bilgilerden hariç iş yapan kodlar göreceğiz. DOM , JSON , AJAX , jQuery gibi yeni kelimeler göreceğiz.

Başlayalım.

DOM

Document Object Model kelimelerinin baş harflerinden oluşan DOM ile HTML elemanlarına ulaşarak onlar üzerinde JavaScript ile işlemler yaparız. 

DOM neye benziyor derseniz geliştirici araçlarını açtığımızda elements sekmesinde görünen liste DOM'un ta kendisidir. 

Tree ve Branch

Ağaç ve Dal. HTML yapısı XML yapılara benzer. Elemanlar ve onların içlerinde elemanlar vardır. Bu yapı bir ağaca ve dallarına benzer. Bir tane ana eleman vardır html. Onun head ve body dalları vardır. Bunların her biri içinde de kendi dalları vardır. Bu sebepten DOM için bazen DOM Tree denir. 

DOM'u değiştirmek demek, onun bir elemanını seçip birşeylerini değiştirmek demektir ve bu çoğunlukla JavaScript ile yapılır. . 

CSS Orta Seviye

Merhaba,

HTML orta seviye yazımız gibi bu yazımızda da pek zorlayıcı bir şey yok, ama başlangıç seviyesine göre daha kapsamlı.

class ve id seçicileri

Başlangıç yazımızda tag seçicilerini görmüştük. Ama bunlar sayfadaki aynı tipteki elemanların hepsini seçiyor ve değiştiriyordu. class ve id özelliklerini kullanarak istediğimiz elemana nokta atış yapabiliriz. CSS'de class seçiciler nokta karakteri ve ardından bitişik gelen class değeri ile ifade edilirken id değeri # işareti ile başlayan şekilde ifade edilir. 

Buna göre CSS kodumuzu şöyle düşünelim

style2.css

#top {
    background-color: #ccc;
    padding: 20px;
}

.intro {
    color: red;
    font-weight: bold;
}