Merhaba Arkadaşlar;
JavaScript Framework Library'e devam ederken mootools'a biraz daha yakından bakalım. Bir kaç örnek ile nasıl kullanacağımızdan bahsedelim ve ondan sonra artık direksiyonu size bırakayım ;)
Konuları kategorize ederek biraz bahsedicem ve o başlık ile ilgli örnekleride onun altında yapıcam bilginiz olsun.
$random Metodu:
$random metodunu kullanmak gerçekten çok basit. C# de kullanımından bile daha kolay denilebilir ;)
$random(1, 99); şeklinde kullanabilirsiniz. İlk verdiğiniz değer " 1 ", rastgele üretilecek olan sayısal değerin başlangıç noktası, ikinci değer ise " 99 " alabileceği en son değer.
script src="mootools-1.2.3-core.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function Randomm(){
alert($random(1, 99));
}
</script>
_-_-_-_
<input id="htmlButton1" type="button" value="Göster" onclick="Randomm()" />
şeklinde kullanabilirsiniz.
getRandom Metodu:
Eğer bir dizi içerisinden, rastgele bir değer almak stiyorsanız, mootools bunu da düşünmüş, getRandom metodu ile istediğimiz işlemi tek satırda tamamlayabiliriz.
var dizi = [30, 10, 22, 109];
Array.getRandom(dizi);
Şeklinde kullanabilirsiniz.
Eğer bir önceki örnekdeki gibi, alert olarak göstermek isterseniz, allert()'in parantez içerisine kodu eklemeniz yeterli olacaktır.
$each Metodu:
Diziler'de kullanılır diye bir ipucu versem belki aklınıza bir şeyler gelir ya da belki bir yerden çağrışım yapar mı acaba ?
C#'te kullandığımız foreach döngümüzün mantığı ile çalışır. Standart JavaScript döngülerinin yerine rahatça kullanabilirsiniz.
$each([30,10,22,109], function(deger, index) {alert(inde + deger};);
Şeklinde kullanabilirsiniz. Parantezlere lütfen DİKKAT edin !
$defined Metodu:
Bir değişkene değer atanıp atanadığını bize True - False olarak döndürür dersek kısa ve öz bir tanım yapmış oluruz.
var deg ; --> False Değer Döndürür.
var deg = 1; --> True Değer Döndürür.
if($defined(deg)){alert("Değer Atanmış !")} else{alert("Atama işlemi Yapılmamış");}
<input id="buton1" type="button" value="Goster" onclick="def()" />
Extend ve Implement ile Object Oriented JavaScript :)
JavaScript ile OOP gerçekden kasıyor, C# ile program geliştirmekden çok daha sıkıcı bence. Mootools bize biraz yardımcı oluyor. Bunlarden birisi Implement, diğeri ise Extend yapıları metotları.
Extend ile yarattığınız bir sınıf yapısını alıp genişletip farklı bir sınıfmış gibi tanımlama yapma olanağına sahibiz. C# de yaptığımız kalıtım gibi düşünebilirsiniz.
<script language="javascript" type="text/javascript">
var clss1 = new Class({
initialize: function(dnm) {
this.dnm = dnm;
}
});
var clss2 = clss1.extend({
initialize: function(dn, dn2) {
this.parent(dnm);
this.dn = dn;
this.dn2 = dn2;
}
});
var clss1 = new clss2(1, 11);
alert(clss1.dn);
alert(clss1.dn2);
JSON Metotları:
JSON hakkında deyatlı bilgiyi yine sitede bulabilirsiniz. mootools içerisinde JSON.JS dosasından yararlanıp istemci taraflı talepleri karşılayabilirsiniz.
<script type="text/javascript">
function JSONN() {
$("goster").innerHTML = JSON.toString({
kisiListesi:{
Kisiler:[
{
adi: 'A. Sertay',
soyadi: 'HALKA',
},
{
adi: 'Boran',
soyadi: 'ŞENTÜRK'
}
]
}
}
);} Parantezlere lütfen DİKKAT edin !
Elimizdeki metin bilgisini eğer JSON verisi olarak kullanmak istersek o zaman JSON.EVALUATE metodunu kullanabilirsiniz.
Drag and Drop:
ASP.NET 2.0 ile hayatımızda yer eden Drag and Drop artık hemen heryerde karşıma çıkyor ve gerçekden güzel atraksiyonlarda yapıyorlar. mootools da Drag sınıfını kullanarak web sayfalarımızdan ziyaretçilerimize bazı özgürlükler tanımlama imkanına sahibiz. Tabi bunu .Net deki araçları kullanırken gerçek anlamda sürükleyip bırakarak yapacağımızı sanıyorsanız malesef yanılıyorsunuz, diek olarak JavaScript kodları ile bunu geliştirmemiz gerekiyor.
İlk önce taşınabilir nesnemizi yaratmamız gerekiyor.
new Drag.Move($("goster"), { droppabless: [$("alan1"), ("alan2")] });
Buradaki alan1 ve alan iki örnek olarak bir <div></div> taglarına ait olabilir. Nereye taşınacağını belirttik ama burada aynı zamanda kullanıcı oradannesneyi çıkarıp bizim tasarlmadığımız bir yerede sürüklee bnilir onun içinn emptydrop adında ki evet'i çalıştıtacak kodumuzla beraber kaldığımız yerden kodumuza devam ediyoruz;
$("goster").addEvent('emptydrop', function() { this.setStyle({ 'position': 'relative', 'left': '300px', 'bottom': '200px' }).inject(document.body) });
Son olarak 3 farlı evet'ımızı devreye sokarak kodumuzu tamamlıyoruz.
$("alan").addEvents({ 'over': function(el, obj) {
this.setStyle('background-color', '#FF6600');
$("alan").addEvents({ 'leave': function(el, obj) {
this.setStyle('background-color', '#006600');
$("alan").addEvents({ 'drop': function(el, obj) {
el.setStyles(this.getCoordinates()).setStyles({'position': 'top'}).inject(this);
}
}); Parantezlere lütfen DİKKAT edin !
Buradaki 2 evet over ve leave kullanıcısürükleyip bırakacağı esnada, bu işlemin yapılmaya başlandığını bir şekilde anlamak zorunda, onun için o anda nesnenin style'ını değiştirmek için kullandığımız evet'larımız. Drop'unda artık ne olduğunu söylememe gerek yok dimi ;)
Evet arkadaşlar, daha önce de söylediğim gibi, daha bunun gibi bir çok özellik mootools da mevcut.
Bazıları { Limit, Round, Clone, Cookie, setOpacity, toogleClass, Inject, Periodical, hex metotları , Stil Animasyonlar , Animasyon vs.... }
benden bu kadar siz daha fazlasını rahatlıkla öğrenebilirsiniz. Sıkışırsanız buralarda olucam ;)
İyi Çalışmalar, Kolaygelsin.
</script> Parantezlere lütfen DİKKAT edin !