JavaScript çerçevelerine aşinalık
En iyi JavaScript çerçeveleri
JavaScript dünyadaki en popüler programlama dilidir. Bu programlama dili web yazımı için kullanılır. Avantajlarından biri de kolayca öğrenilebilmesidir. Programcıların JavaScript kullanmasının birçok nedeni vardır. Tüm web geliştiricilerinin en az 3 programlama diline aşina ve yetkin olması gerekir. Daha sonra JavaScript çerçevelerinden bahsedeceğiz .
JavaScript hakkında ortaya çıkan temel sorular, JavaScript’in nasıl elde edileceği ve programlama alanının içeriği ve son olarak bu programlama dilinin işlevleri ve faydaları ile ilgilidir. JavaScript kolayca erişilebilir ve ücretsizdir ve en önemli programlama dillerinden biri olarak kabul edilir. Bu metinde JavaScript çerçevelerini birlikte incelemeyi amaçlıyoruz . Bizimle kal.
angular.js çerçevesi
En basit tanımla angular.js’nin HTML’yi yeni özelliklerle genişlettiği söylenebilir. Bu çerçeve, bir HTML sayfasına <script> etiketiyle bağlanan JavaScript çerçevelerinden biridir. angular.js çerçevesi tek sayfalı uygulamalar (SPA’lar) için uygundur.
Bu çerçeve aynı zamanda JavaScript programlama dili ile yazılmıştır. Bu çerçeveyi öğrenmek çok kolaydır. Açısal çerçeve; direktifleri, ifadeleri, filtreleri, modülleri ve denetleyicileri içerir. Bunları öğrenerek Angular framework’e dair her şeyi öğrenmiş olduk. Çünkü bunlar bu çerçeveyi öğrenmenin temelini oluşturur. O zaman diğer şeyler kolaylıkla öğrenilir.
<!DOCTYPEhtml>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<gövde>
<div ng-app = "">
<p>Giriş kutusuna bir şeyler girin:</p>
<p>Ad : <input type="text" ng-model="name" placeholder="Adını buraya girin"></p>
<h1>Merhaba {{name}</h1>
</div>
</body>
</html>
Bu programın çıktısı, formun adını aldığı ve ardından adını selamladığı alandan gelir. Bu çerçeveyi okumadan önce HTML, CSS ve JavaScript programlama dilleri hakkında gerçek bir anlayışa sahip olmalısınız. Dolayısıyla JavaScript bilmenin önemi buradan anlaşılıyor.
HTML, web sayfalarının içeriğini tanımlamak için kullanılır. CSS, web sayfalarının düzenini belirlemek için kullanılır. Son olarak, web sayfalarının davranışını programlamak için JavaScript kullanılır. Bu üç dilin birbirini
angular.js’nin ilk sürümü
angular.js’nin ilk sürümü 2012’de yayınlandı. Elbette Google’ın bir çalışanının 2009 yılından bu yana bu konuda önlemler aldığını ve güzel fikirler ortaya koyduğunu, artık Google’ın bu projeye destek verdiğini de belirtelim.
HTML, ng direktifi kullanılarak genişletilir. angular.js’deki uygulamalar ng-app ile tanımlanır. en-model Uygulama verilerine bağlı HTML kontrollerinin (giriş, seçim ve metin) değerini döndürür. Son olarak, uygulama verileri ng-bind kullanılarak HTML görünümüne bağlanır.
<!DOCTYPEhtml> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <gövde> <div ng-app = ""> <p>Giriş kutusuna bir şeyler girin:</p> <p>Ad: <input type = "text" ng-model = "name"></p> <p ng-bind = "isim"></p> </div> </body> </html>
angular.js’deki açıklayıcı ifadeler çift parantez içine yazılır: {{ifadeler}}.
<!DOCTYPEhtml>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<gövde>
<div ng-app = "">
<p>İlk ifadem: {{ 5 + 5 }</p>
</div>
</body>
</html>
Aşağıdaki programı kullanarak bir kişinin adını ve soyadını alın, sonunda bağlı olduğunuz kişinin adı ve soyadı görüntülenecektir.
Bu arada benzer bir çerçeve daha görülebilir. Angular 2 çerçevesi.Bu çerçeve, güncellemelerde yeniden adlandırılan ve son uzantısı unutulan angular.js’dir. Sonuç olarak bu iki isimde öğrenmemiz gerekenlerin hepsi ortak ve birdir.
Ancak yeni versiyonda yapılan güncellemeler, pek çok içeriğin iyileştirilmesini ve tamamlanmasını sağladı. Elbette kodlama konusunda daha kapsamlı bir içerik sunulmalı ve bundan sonraki eğitici yazılarda buna yer verilecektir.
react.js çerçevesi
React, kullanıcı arayüzleri oluşturmak ve tek sayfalı uygulamalar oluşturmak için kullanılan bir JavaScript kütüphanesidir. Yeniden kullanılabilir kullanıcı arayüzü bileşenleri tasarlamak için de kullanılabilir. Aşağıda JavaScript ve HTML çerçevelerindeki kodlamayı gösteren bir örnek bulunmaktadır. HTML kodlamada React çerçevesine denir.
React JavaScript çerçeve kodlaması
React'ı 'react'tan içe aktarın;
ReactDOM'u 'react-dom'dan içe aktarın;
sınıf Test, React.Component'i genişletir {
oluşturma() {
return <h1>Merhaba Dünya!</h1>;
}
}
ReactDOM.render(<Test />, document.getElementById('root'));
HTML kodlaması:
<!DOCTYPEhtml>
<html lang=tr">
<kafa>
<meta karakter kümesi = "utf-8" />
<meta adı = "görüntü alanı"
içerik = "genişlik = cihaz genişliği, başlangıç ölçeği = 1" />
<title>React Uygulaması</title>
</head>
<gövde>
<div id = "kök"></div>
</body>
</html>
React çerçevesiyle çalışmak için kodlama ortamının bilgisayarınızda aktif olması gerekir. Bu, reaksiyon uygulaması desteğinin yöntemi olan create-react-app aracılığıyla yapılabilir. React makalesinde açıklanan NPM ve Node.js’nin de yüklenmesi gerekir. İlgili adımları atıp kodlama alanına girdiğinizde her şey hazır olacaktır.
Temel olarak react’ın Facebook tarafından oluşturulmuş bir JavaScript kütüphanesi olduğunu ve UI oluşturmaya yönelik bir araç olduğunu söyleyebiliriz. Bu çerçeve bellekte sanal bir alan oluşturur. Bu sayede tarayıcı domainini manipüle etmeden sanal domaindeki işlemlerinizi kolaylıkla gerçekleştirebilirsiniz. Bu yazılım yalnızca değişiklikleri akıllıca yükler.
Reaksiyon’un birçok güncellenmiş sürümü var, ancak ilk sürüm 2013’te halka açıklandı. React.js çerçevesinin ilk olarak 2011 yılında Facebook’taki haber akışı özelliği için kullanılması çok ilginç. Bunu Facebook yazılım mühendisi Jordan Valk yaptı. React uygulama oluşturucusu da 2018 yılında güncellemelerle piyasaya sürüldü. Aşağıda reaksiyon alanındaki kodlamanın bir örneğini görebiliriz:
Tepki uzayında kodlama
<!DOCTYPEhtml>
<html>
<script src="https://unpkg.com/react@16/umd/react.prodüksiyon.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.prodüksiyon.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<gövde>
<div id="mydiv"></div>
<script type = "metin/babel">
class Hello, React.Component'i genişletir {
oluşturma() {
<h1>Merhaba Dünya!</h1>'ya dön
}
}
ReactDOM.render(<Merhaba />, document.getElementById('mydiv'))
</script>
</body>
</html>
Bu programın çıktısını aşağıda görebilirsiniz:
Selam Dünya!
ember.js çerçevesi ve backbone.js çerçevesi
Bu çerçeveyi tanımak için JavaScript alanında meşhur bir deyimin olduğunu, bunun da “full stack JavaScript” olduğunu belirtmek gerekir. JavaScript programlama dili 20 yılı aşkın süredir mevcuttur ve genellikle web geliştirme alanında kullanılmaktadır. Web sunucusunda kullanma yeteneği de Node.js kullanılarak sağlanmaktadır.
Tam yığın JavaScript’in fikri, bir web uygulamasının hem istemci hem de sunucu tarafındaki tüm yazılımının yalnızca JavaScript kullanılarak yazılması gerektiğidir. İstemci tarafı yazılımı web’e ön uç kullanılarak yüklenir ve üretimi için gerekli çerçevelerden biri embsr.js çerçevesi ve backbone.js çerçevesidir. Bu çerçeve aynı zamanda JavaScript çerçevelerinden biridir .
vue.js çerçevesi
Bu çerçeve, yönerge özelliğini kullanarak HTML geliştirmenize olanak tanır. Yani HTML programlarına işlevsellik verilmektedir. Bu çerçeve yerleşik ve kullanıcı tanımlı talimatlar sağlar. Vue.js çerçevesinde veriler için iki {{}} kullanılır. Bu çerçevede kodlama yapabilmek için HTML nitelikleri V- öneki ile yazılır. Bu konuda bir örneğe dikkat edin:
<!DOCTYPEhtml>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<gövde>
<div id = "uygulama">
<h1>{{ mesaj }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#uygulama',
data: {message: 'Merhaba Vue!'}
})
</script>
</body>
</html>
Çıktı aşağıdaki gibi görüntülenir:
Merhaba Vue!
Vue çerçeve uygulaması
Vue çerçevesinin işlevlerinden biri, bir Vue nesnesi bir HTML öğesine eklendiğinde HTML öğesini değiştirmektir. Aşağıdaki örneğe dikkat edin.
<!DOCTYPEhtml>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<gövde>
<h2>Vue.js</h2>
<div id = "uygulama">
{{ İleti }}
</div>
<p>
<button onclick="myFunction()">Beni Tıkla!</button>
</p>
<script>
var myObject = new Vue({
el: '#uygulama',
data: {message: 'Merhaba Vue!'}
})
işlev işlevim() {
myObject.message = "John Doe";
}
</script>
</body>
</html>
Bu programın çıktısı, simgeye tıklandığında John Doe olarak değişir.
Bu bölümün son örneğinde döngü kodlamadan bahsedilecektir. Bu, bir dizi vue nesnesini bir dizi HTML öğesine bağlamak için v-for komutunu kullanarak başarılabilir.
<!DOCTYPEhtml>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<gövde>
<h2>Vue.js</h2>
<div id = "uygulama">
<ul><li>
<li v-for="yapılacaklarda x">
{{ x.metin }}
</li>
</ul>
</div>
<script>
myObject = yeni Vue({
el: '#uygulama',
veri: {
Tümü: [
{ text: 'JavaScript Öğrenin' },
{ text: 'Vue.js'yi Öğrenin' },
{ text: 'Harika Bir Şey Oluşturun' }
]
}
})
</script>
</body>
</html>
polimer.js çerçevesi
Bu çerçeve, veri bağlantısı gibi ek yeteneklere sahip web üzerinde yazılım geliştirmek için kullanılır. Bu çerçeve web geliştirme için gereklidir. Bu çerçeveyle kendi özel öğelerinizi yaratırsınız. Bu çerçeveyi kullanmanın avantajlarından bazıları şunlardır:
- Geliştirme için açık kaynak
- Verimli, etkileyici ve genişletilebilir
- Modüler bileşenlere sahip uygulamalar oluşturmak için HTML öğelerini yeniden kullanma
- JS, CSS ve HTML’yi özel öğeler olarak birleştirin
- Veri bağlantısı ve veri modelleme
meteor.js çerçevesi
Bu çerçeve ile JavaScript uygulamalarını daha hızlı oluşturabilirsiniz. Bu çerçeve açık kaynaktır ve web, mobil ve masaüstü için kullanılır. Belki de abartmadan söylemek gerekirse, yarım milyondan fazla web geliştiricisi kodlama için bu basit çerçeveyi kullanıyor.
Meteor.js çerçevesini kullanarak platformlar arası kod oluşturabilirsiniz. Meteor.js çerçevesi, yeni efektler oluşturmak için diğer herhangi bir JavaScript çerçevesiyle entegre edilebilir. meteor meteor yazılımı tarafından geliştirilmiştir. Bu JavaScript çerçevelerinin yetenekleri o kadar yüksektir ki, belki onlar olmadan web üzerinde çalışma yapılamaz.
JavaScript hakkında son notlar
JavaScript’te kullanılan bazı ipuçları kesinlikle JavaScript çerçeveleri için de geçerli olacaktır . Bu nedenle JavaScript ile ilgili son noktaları birlikte inceliyoruz.
<script> etiketi
HTML’de JavaScript kodu <script> ve <script/> etiketleri arasına yerleştirilir.
<script>
document.getElementById("demo").innerHTML = "İlk JavaScript'im";
</script>
JavaScript’teki bir işlev, çağrıldığında çalıştırılabilen bir JavaScript kodu bloğudur. Örneğin bir olay meydana geldiğinde bir fonksiyon çağrılabilir. Tek bir HTML belgesine herhangi bir sayıda komut dosyası eklemek de mümkündür.
JavaScript gövdesi <body> içindedir. Aşağıdaki örnek:
<!DOCTYPEhtml>
<html>
<gövde>
<h2>Gövdedeki JavaScript</h2>
<p id="demo">Bir Paragraf.</p>
<button type="button" onclick="myFunction()">Deneyin</button>
<script>
işlev işlevim() {
document.getElementById("demo").innerHTML = "Paragraf değiştirildi.";
}
</script>
</body>
</html>
Harici JavaScript
Harici komut dosyalarında kod yazmanın avantajları vardır. Bunlardan biri HTML ile kodu ayırmasıdır. Kodların okunmasını kolaylaştırır. Sayfa yüklemeyi hızlandırır ve bir sayfaya birden çok komut dosyası eklemek için birden çok komut dosyası etiketi kullanır.
Son olarak sizleri bu konuyla ilgili sonraki yazılarımıza davet ediyor, bizi Maktabkhone web sitesinden takip edeceğinizi umuyoruz. JavaScript çerçeveleriyle ilgili materyaller beceri kursları gerektirir.Bu konuda daha fazla bilgiyi aşağıdaki makalelerden alabilirsiniz.
