Bilmek istediğin her şeye ulaş

Javascript

Yazılım

JavaScript Netscape Navigator 2.0 ile birlikte Brendan Eich tarafından geliştirilen ve önceleri Mocha daha sonra LiveScript olarak adlandırılan ve en sonunda şu anki adını alan JavaScript dili başlangıçta sadece istemci taraflı (client-side) yorumlanan bir betik dilidir.

Şubat 2012

Ahmet Faik @AhmetFaik

Actual JavaScript Engine Performance

JSMeter: Measuring JavaScript Behavior in the Wild showed that benchmarks are not representative of the behavior of real web applications. But lacking credible benchmarks, engine developers are tuning to what they have. The danger is that the performance of the engines will be tuned to non-representative benchmarks, and then programming styles will be skewed to get the best performance from the mistuned engines.

So I have come up with a benchmark that should be more representative of large, well-written JavaScript applications. It is in fact a popular, large, well-written JavaScript application: JSLint.

The table shows the results on running JSLint on its main source file, jslint.js, using the Good Parts options. I think these results are more indicative of actual JavaScript engine performance than those provided by the performance-oriented benchmarks.


javascript.crockford.com/performance.html
Haziran 2012

Burhan Çetinkaya @Burhan

String JSON datasını object JSON datasına dönüştürmek

Kod şu şekilde:

var jsonStringData = '{x:123, y:1234}';
var serializer = new JavaScriptSerializer();
var jsonDeserialized = serializer.DeserializeObject(jsonData);
var jsonObjectData = (Dictionary)jsonDeserialized;
Haziran 2012

Burhan Çetinkaya @Burhan

Javascript ile bir web url sinin hostname ini nasıl alırız

Bu işlem için çok basit bir fonksiyon yazabiliriz. Yaptığımız tek şey javascript ile bir a elementi olurşturmak ve href attribute una url yi vermek. Şöyleki:

function getHostUrl(url) {
var l = document.CreateElement("a");
l.Href = url;
return l.Hostname;
}

Örnek:

var hostname = getHostUrl(<a href='<a href='<a href='"www.inploid.com/burhan/"' target='_blank' rel='nofollow' title='"inploid.com/burhan/"'>"inploid.com/burhan/"</a>' target='_blank' rel='nofollow' title='"inploid.com/burhan/"'>"inploid.com/burhan/"</a>' target='_blank' rel='nofollow' title='"inploid.com/burhan/"'>"inploid.com/burhan/"</a>);
alert(hostname);

Yukarıdaki satırın sonucu bize "www.inploid.com" olarak geri dönecektir.

Temmuz 2012

Mehmet @mehmetarslan

Arama Motoru Nasil Yapilir

10 kadar web sayfasi var. Gazete blog haber tarzi siteler, Makale yani. Ornegin 'Istanbul' diye yazinca arama formuna , bu 10 ayri web sayfasinda icinde 'Istanbul' gecen makalaler gelsin istiyorum.
Siteler benim degil , uzaktan erisip almam lazim. Nasil yapabilim? Karsidan her makale eklendiginde kendi db mi de mi kayit etmem lazim. Yardimci olabilirmisiniz?
Ağustos 2012

Hakan Köse @hakank

Javascript ve Console kullanımı hakkında kritik bir not

Yazılımcı arkadaşlar bilirler, Firebug (incelemek ve indirmek için: getfirebug.com) çok kullandığımız iyi bir araç. Development esnasında kullandığımız bu araç bize yazdığımız Javascript kodlarının ve sayfalarımızın nasıl çalıştığı ile ilgili ayrıntılı bir inceleme sunuyor.

Sanırım Javascript ve JQuery ile yeni yeni tanışan arkadaşlar, ilk etapta kodlarının doğru çalışıp çalışmadığını test etmek için (henüz Firebug ile tanışmadılarsa) ilk akla gelen yöntemi kullanıp kodun ilgili yerine bir "alert" koyuyorlardır. Tabi bu çabuk bir çözüm ve iş görebiliyor çoğu zaman. Development tamamlandıktan sonra ve site güncellendiğinde; unutulan alert'lar, siteye gelen kullanıcıların halini düşünemiyorum :)

İşin aslı şu; esasen kodumuzda herhangi bir yerde bize Javascript tarafında bir ileti sunulmasını istiyorsak kullanabileceğimiz daha etkili bir aracımız var, adı "console". Konsol, bize istediğimiz tüm bilgiyi sağlar. Örnek Firebug konsol görünümü:

Javascript

Konsola development aşamasında bazı noktalarda birşeyler yazdırmak isterseniz kullanabileceğiniz 2 metoddan bahsedeceğim, bunlar:

window.console.log("message");
window.console.warn("message");

Log ve Warn bize konsolda ne istiyorsak yazmamızı sağlayan metodlar. Sadece string değil, objeleri de konsola yazdırmak mümkün.

Şimdi, yukarıda yazdığımız kodu development esnasında rahatlıkla kullanırken; production'da javascript kodlarının bazı browser'larda çalışmadığı görülür. Özelliklede Internet Explorer'da.

Alınan hata ise şuna benziyor: "'console' is undefined.." Anlayacağınız üzere, konsol yok! Evet, cidden konsol yok, ve Firefox veya Chrome gibi browser'lar bu hata oluşsa bile sonraki satırları işletmeye devam etse de, Internet Explorer bunu yapmıyor ve doğal olarak yazdığınız kodlar çalışmıyor.

Çözüm ise gayet basit: "Bu durumu tespit edecek bir fonksiyon", şöyle ki:

function LOG(message) {
if (window.console)
window.console.log(message);
}
function WARN(message) {
if (window.console)
window.console.warn(message);
}

Development esnasonda console.log veya console.warn yerine şu şekilde kullanın:

LOG('message text');
WARN('message text');

Hepsi bu kadar, artık kodlarınız konsola entegre; Internet Explorer ve tarayıcılar sizin konsolunuzu umursamıyor :)

Ağustos 2012

Göktuğ Gümüş @goktuggumus

Güvenli Console.log Kullanımı

Javascript' kodlarımızı debug yaparken çok kullandığımız console.log fonksiyonu her tarayıcıda stabil çalışmamaktadır.

Özellikle Internet Explorer (IE) tarayıcısının eski sürümlerinde console is undefined hatası alınmaktadır. Bunun nedeni anlayacağınız üzere tarayıcıda konsol bulunmamasından kaynaklanmaktadır. Ve kodunuz hata verdiği için çalıştırılmasını durdurmaktadır.

Console.log fonksiyonunu güvenli bir şekilde kullanmak istiyorsanız projenize alttaki ufak kod betiğini dahil edin ve rahat rahat tarayıcıda çalışır mı hata alır mıyım kaygılarından uzak bir debug keyfi sürün...


(function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}})
(function(){try{console.log();return window.console;}catch(a){return (window.console={});}}());

Ocak 2013

Ahmet Faik @AhmetFaik

JavaScript Desing Pattern 1-Singleton

Öncelikle Başlangıç seviyesinde bir yazı dizisi olacağını belirtmek isterim. Bu arada Mvc ile uygulamalı olarak ufak bir kütüphane örneği yer alacak.Sadece örnekler yer alacak. İlk olarak Javascript Design Pattern ile başlayım daha sonra daha işlemleri ile devam edeceğim.

Singleton Pattern

 var singleton = {
    prop:'singleton',
    method: function(){                
        //...
    }
}
//Kullanımsingleton.propsingleton.method();

Burda singleton isimli nesne ile en basit halini gerçekleştirmiş olduk. Örnek şekilde istediğiniz gibi prop(özellik,değişken vs), method ekleyebilirsiniz.

Şimdi işi biraz daha karıştıralım


var singleton = (function () { var privateProperty = 0, privateMethod = function () { console.log('This is private'); }; return { prop: 'value', method: function () { privateMethod(); return privateProperty; } }; }()); //Kullanım singleton.prop singleton.method

Örnekte "privateProperty" dışarıdan erişim yapılamaz.

NameSpace


var Faik = { Surname: 'Akbekmez', Info: { Name: 'Ahmet', GetName: function () { alert(Name); } }, GetSurname: function () { alert(Surname); } }

Kullanımı:

Faik.Surname
Faik.Info.Name
Faik.Info.GetName();
Faik.GetSurname();

Composite

var Faik = function () { }; Faik.prototype = { method: function (parameters) { alert('method'); }, Data: { Get: function (parameters) { alert("Get Data"); }, Set: function (parameters) { alert("Set Data"); } } }; Faik.prototype.Yuppi = { GetYuppi: function (parameters) { alert("Yuppi"); } };

Kullanımı ise:

var f = new Faik();
f.method();
f.Data.Get();
f.Data.Set();
f.Yuppi.GetYuppi();

Prototype aslında en can alıcı nokta. Prototype ile bir çok js kütüphanesi kendi eklentilerinizi yapabilirsiniz.
Ocak 2013

Ahmet Faik @AhmetFaik

JavaScript Desing Pattern 2-Adapter, Decorator, and Factory

Adapter

var Faik = {
    GetName: function () {
        alert('ahmet');
    }
};
 
var FaikAdapter = {
    Info: function () {
        Faik.GetName();
    }
};
 
//Kullanım
FaikAdapter.Info();

Decorator


var Dog = function(){};
Dog.prototype = {
    Woof: function () {
        alert('woof woof (zaten bir başlarsa susmaz :D )');
    }
};
 
var DogDecorator = function (dog) {
    this.dog = dog;
};
 
DogDecorator.prototype = {
    Woof:function(){
        this.dog.woof();
    }
};

Biraz daha genişletirsek

var PowerDogDecorator = function(dog){
    DogDecorator.call(this,dog);
}
 
PowerDogDecorator.prototype = new DogDecorator();
PowerDogDecorator.prototype.Woof = function () {
    //ya bunu
    this.dog.drive();
    // yada parent içerisindekini cagırabilirsin
    DogDecorator.prototype.Woof.call(this);
};

Factory


var DogFactory() = { makeWoof:function(features){ var car = new Car(); if (features && features.length) { var i = 0, l = features.length; for (; i < l; i++) { var feature = features[i]; switch(feature) { case 'PowerDog': dog= new PowerDogDecorator(dog); break; } } } return dog; } } // Kullanım Var Kopuk = DogFactory.makeWoof(['PowerDog']);
Şubat 2013

Hakan Köse @hakank

Javascript ile cookie oluşturma ve okuma

Javascript ile kullanıcıya özel cookie (çerez) oluşturma ve okuma işlemi aslında gayet basit bir işlem. Ancak kritik olduğunu düşündüğüm bazı bilgiler var ve bunları paylaşmak istiyorum.

Şöyle ki; cookie oluşturma işlemi gayet basit:

var cookiename = "mycookie";
var cookievalue = "mycookievalue";
var expiredate = "Sat, 16 May 2013 18:40:22 GMT";

document.cookie = cookiename + "=" + cookievalue + ";" + expiredate;

Gördüğünüz üzere gayet basit bir işlem. Benzer şekilde cookie okuma işlemi de çok basit:

function readCookie(key) {
currentcookie = document.cookie;
if (currentcookie.length > 0) {
firstidx = currentcookie.indexOf(key + "=");
if (firstidx != -1) {
firstidx = firstidx + key.length + 1;
lastidx = currentcookie.indexOf(";", firstidx);
if (lastidx == -1) {
lastidx = currentcookie.length;
}
return unescape(currentcookie.substring(firstidx, lastidx));
}
}
return "";
}

Ancak dikkat edilmesi gereken bazı kritik noktalar var.

Bunlardan bir tanesi, cookie oluştururken bu cookie'nin nerelerde okunabilir olduğunun belirtilmesi. Bunu yapmak için "path" diye bir parametre bulunuyor ve bu parametre oluşturulan çerezin hangi konum ve alt konumlarından okunabileceği bilgisini belirtiyor.

var cookiename = "mycookie";
var cookievalue = "mycookievalue";
var expiredate = "Sat, 16 May 2013 18:40:22 GMT";

var cookiepath = "/announcements/";
document.cookie = cookiename + "=" + cookievalue + ";" + expiredate + ";path=" + cookiepath + ";";

Bu path parametresi "announcements" olarak ayarlandığında sadece announcements ve alt dizinlerinden çereze okuma sağlanabiliyor. Bu parametrenin belirtilmemesi durumunda oluşan kritik bir durum daha var. Eğer çerezi hangi sayfada oluşturdu iseniz, path parametresi default olarak o konumun değerini alıyor. Dolayısıyla, bir başka sayfada cookie varlığını kontrol etmek istediğinizde böyle bir çerez olmadığı bilgisi geliyor ki bu bıraktığınız çerezi o sayfa dışında anlamsız hale getiriyor.

Eğer tüm site genelinde bu çerezi erişilebilir hale getirmek isterseniz path parametresini "/" olarak ayarlamalısınız.

Ek bir bilgi olarak belirtmek isterim ki, bu "path" parametresi sadece dizin değil, domain ve sub domain'ler ile de çerezin çalışılabilir hale getirilmesinde faydalı bir parametredir. Öyle ki, path parametresini ".mysite.com" şeklinde belirttiğinizde çerez sadece mysite içinde değil, sub domain'lerinde de erişilebilir hale geliyor. Örneğin;

//sub1.mysite.com/announcements/
//sub2.mysite.com/announcements/
var cookiepath = ".mysite.com/announcements/";

Umarım bu bilgiler faydalı olur.
Nisan 2013

Faruk Aydoğan @farukaydogan

ASP.NET UpdatePanel Kontrolü İşlem Sonrası Javascript Fonksiyonu Tetikleme

UpdataPanel ile hem görsel açıdan projemize güzellik katarken veritabanını da boşuna yormaktan kurtulabildiğimizi biliyoruz. Peki, .NET' in sağladığı binlerce kolaylıktan biri olan UpdatePanel ile işlemlerimizi yaptıktan sonra bir Javascript fonksiyonunu tetiklememiz gerekseydi bunu nasıl yapardık? Şimdi elimden geldiğince bunu sizlere aktarmaya çalışacağım.

Standart olarak sayfamızda UpdatePanel'i kullandığımızı varsayalım.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
        //Web Kontrolleri
        <asp:Button ID="Button1" runat="server" Text="Formu Kaydet"/>
</ContentTemplate>
<div id="div1">Bu yazı butona tıklandıktan sonra gizlenmeli!</div>


Şimdi burada basit bir örnek oluşturduk. Butona tıklanıldığında bazı işlemler yapılacak ve sonrasında server-side olarak yapamaktan çekindiğiniz bir işlemi yapmak istediğinizde, yani işlemi tarayıcıya yaptırmak istediğinizde ne yapmalısınız ona bakalım.

// butona tıklanıldığında gerçekleşen olaylarla ilgili kodlar 
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "temp", "<script type='text/javascript'>$('#div1').hide()</script>", false);

Butona tıklatıldığında çalışan eventimizin içine yukarıdaki gibi bir kod satırı eklememiz gerekmektedir. RegisterStartupScript metodu aldığı parametreler ile bu işlemi gerçekleştirmektedir. this.Page ifadesi ile bu sayfaya, "temp" ifadesi ile geçici bir script çalışacağını, devamında aldığı parametre ile de tetiklenecek javascript fonksiyonunu belirtmiş oluyoruz.
Temmuz 2013

Resul Genç @mahoni

Mayıs 2014

Hasan Tayyar Beşik @hasantayyar

Leaflet - an open-source JavaScript library for interactive maps

Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps.


Read more on : leafletjs.com
Daha fazla

211 kişi

Konunun Takipçileri

Alt Konu Başlıkları

Henüz bu konu başlığı ile ilgili konular bulunmuyor.