Javascript - Jquery arşivleri - Yunus Emre Araç

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaretleyicisine (Marker) Bilgi Penceresi (Info Window) Ekleme İşlemi

yunusemrearac — Fri, 07 Feb 2020 12:48:41 +0000

Merhaba arkadaşlar bugün sizlere daha önceki yazımda bahsettiğim JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi sonrasında bu işaretleyiciye bilgi penceresi yani info window nasıl ekleyeceğinizden bahsedeceğim.

Mesela haritada iş yerlerinizi adreslerinizi vs işaretlediniz ve tıkladığınızda burası ile ilgili adres iletişim bilgisi website adresi gibi bilgilerin çıkmasını istiyorsunuz. Bu durumda google maps apinin InfoWindow özelliğini kullanabiliriz.

Daha önceki bahsettiğimiz yazı da Ankara iline bir marker eklemiştik ve bu marker için farklı bir icon tanımlamıştık şimdi işe ona bir info window yani bilgi penceresi ekleyelim.

İlk olarak bu pencerede nasıl bir veri gözükecek onu ayarlamamız lazım burada html olarak bilgiyi gösterebilmekteyiz.

var AnkaraInfo = "Ankara" +
"Ankara, Türkiye'nin başkenti ve en kalabalık ikinci ili.[6] Nüfusu 2019 itibarıyla 5.639.076 kişidir. Bu nüfus; 25 ilçe ve bu ilçelere bağlı 1425 mahallede yaşamaktadır. İl genelinde nüfus yoğunluğu 215'tir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve Batı Karadeniz Bölgesi'nde kalan kuzey kesimleri hariç, büyük bölümü İç Anadolu Bölgesi'nde yer alır. Yüzölçümü olarak ülkenin üçüncü büyük ilidir. Etrafı Bolu, Çankırı, Kırıkkale, Kırşehir, Aksaray, Konya ve Eskişehir illeri ile çevrilidir. " +
"Referans: Vikipedi
";

Ankara ile ilgili yukarıdaki gibi bir bilgi hazırladım. Başlık olarak kalın ve ortada olacak şekilde “Ankara” yazacak ve wikipedia üzerinde yazan bir bilgi ekleyip sonundada referans olarakta bilgiyi aldığım web sitesi adresini linkleme işlemini yaptım. Bunların hepsini html olarak hazırlayıp değişkenime ekledim.

Daha sonra info window için bir değişken tanımlıyorum ve google maps apiden oluşturduğum methodunun “content” parametresine göstereceğim içeriği tanımlıyorum.

var AnkaraInfoWindow = new google.maps.InfoWindow({
  content: AnkaraInfo
});

Bundan sonra yapacağımız işlem ankara için oluşturduğumuz marker tıklanması durumunda bu info window tanımlamamızı açmasını sağlamamız gerekmektedir.

marker.addListener('click', function() {
    AnkaraInfoWindow.open(map, marker);
});

Önceki kod tarafında Ankara için oluşturduğumuz marker değikenine “click” için bir listener ekliyoruz ve bunun fonksiyonunda oluşturuduğumuz ankara detay değişkeninin open methodu ile içine haritayı ve markerı ekleyerek açıyoruz.

Son durumda tamamlanan güncel kodumuz aşağıdaki gibi olacaktır.

Bu işlemi sorunsuz bir şekilde tamamladıktan sonra haritamızı açıp marker üzerine tıkladığımız zaman bilgi penceremiz açılacaktır.

Yukarıda da gördüğünüz gibi işlemleri sorunsuz bir şekilde tamamladıktan sonra marker bilgi ekranımız tıklandığı zaman gelmektedir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaretleyicisine (Marker) Bilgi Penceresi (Info Window) Ekleme İşlemi appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi

yunusemrearac — Sun, 19 Jan 2020 20:31:10 +0000

Merhaba arkadaşlar bugün sizlere Javascript ile google maps api kullanarak haritaya nasıl işaretleyici yani marker ekleme işleminden bahsedeceğim. Daha önce JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği konusunu anlatmıştım şimdi o kodlar üzerinden devam edeceğim.

Şimdi haritamıza herhangi bir konum için işaretleyiciyi yani marker nasıl ekleyeceğimizden bahsedeceğim. Bunun için google.maps.Marker servisini kullanmamız gerekmektedir. Burada bu servise işaretlenecek konum için “Laitude” ve “Longitude” konum bilgilerini işaretleme yapılacak harita bilgisini ve fare ile üstüne gelindiğinde çıkacak title bilgisini girmeniz gerekmektedir. Ben örnek olarak Ankara ilimize bir işaretleyici ekleyerek devam edeceğim.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  title: 'Ankara'
});

Yukarıda da gördüğünüz gibi “marker” diye bir değişken oluşturarak bu değişkene “position” parametresine lokasyon bilgimizi, “map” parametresine de harita değişkenimizin bilgisini ve en son olarakta “title” bilgisine de yazmak istediğimiz detayı ekledik.

Bunun altermatifi olarak harita setleme işlemini daha sonra da yapabiliriz.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  title: 'Ankara'
});

marker.setMap(map);

Yukarıda da gördüğünüz gibi harita bilgisini parametre olarak vermedim ama daha sonra haritamda görünebilmesi için marker bilgimizde haritamızı tanımlamamaız gerekmektedir. Ben ilk adımdaki kod ile ilerliyorum ve haritam yüklendiğinde işaretleyicimin de gelmesini istediğim için bunu haritamın yüklenmesini sağlayan “initMap” methodunun içine ekliyoruz.

Son durumda güncel kodumuz aşağıdaki gibi olacaktır.

Bu kodu çalıştırdığımız zaman haritamız ilk yüklendiğinde aşağıdaki gibi görünecektir.

Gördüğünüz gibi marker yani işaretleyicimiz tam Ankara ilinin üstünde ve fare ile üstüne geldiğimizde yazdığımız bilgi görünmektedir.

Siz bu işaretleyiciye ekstra olarak anmimasyonda ekleyebilirsiniz. Bunun için marker servisine “animation” parametresine nasıl bir animasyonla yükleneceği bilgisini girmeniz gerekmektedir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  animation: google.maps.Animation.DROP,
  title: 'Ankara'
});

yukarıda gördüğünüz gibi parametreye yine google maps api tarafından bir değer vermek gerekmektedir. Bu animasyon özelliği için iki tane seçenek vardır. Bunlar:

google.maps.Animation.DROP
google.maps.Animation.BOUNCE

Bunun dışında birde eklediğiniz marker yani işaretleyicinin fare yardımı ile yerinin değiştirilip değiştirilmeyeceği özelliğini ekleyebilirsiniz. Bu özellik genellikle harita üzerinde konum seçme gibi durumlarda ihtiyaç duyulmaktadır. Bu özellik parametresi belirtilmediği zaman kapalı olarak gelmektedir. Bu özelliği açmak için “draggable” parametresini “true” olarak tanımlamamız gerekmektedir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  draggable: true,
  title: 'Ankara'
});

Bu özellik kullanım örneğini de yukarıda görebilirsiniz.

Bunların yanı sıra en güzel özelliklerden biride bu marker yani işaretleyici görseli olan iconu değiştiebiliyor olmanız. Bunun için ise marker servisine “icon” parametresini icon url adresini vererek yapılabilmektedir. Eğer bu parametere hiç kullanılmazsa direk olarak yukarıda gördüğünüz gibi default google maps marker iconu gelecektir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
  title: 'Ankara'
});

Yukarıdaki icon özelliğini sadece kullandığımız zaman haritamızdaki icon aşağıda görüldüğü gibi değişecektir.

Bu durumda sadece icon değiştirme özelliğini kullanarak yaptığımız google maps api haritamızın son güncel kodu aşağıdaki gibi olacaktır.

Burada marker parametresine isteğe bağlı diğer iki özellikte eklenebilir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği Ekleme

yunusemrearac — Thu, 16 Jan 2020 11:08:14 +0000

Merhaba arkadaşlar bugün sizlere sayfamıza eklediğimiz google maps haritasında zoom özelliğinin kontrollünü nasıl özelleştirebileceğinizden bahsedeceğim. Daha önceki yazılarımda JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi ve JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme işlemlerinden bahsetmiştim.

Daha önce son güncel kodumuzda harita da gelen özellikleri kapatarak bu özelliklerden harita görünümünü değiştirme işlemini kendimiz eklemiştik. Şimdi de bu özelliğimize ek olarak zoom yapma özelliğini ekleyeceğiz.

İlk olarak ben sayfama range html kodunu ekliyorum ve bunu kullanarak haritamın yakınlaştırma uzaklaştırma özelliğini kontrol etmek istiyorum.

Burada input “type” olarak “range” veriyoruz ve “min” değerini “1”, “max” değerinin “12” ve tabiki ilk haritam yüklendiğinde default zoom değerini 6 olarak belirlediğim için “value” değerini de “6” olarak belirliyorum. Bu değerler tamamen sizin isteiğinize göre değişiklik gösterebilir.

Daha sonra javascript tarafında bu range değerinin değişimini kontrol ederek değişen değerimizi algılayıp google maps api fonksiyonlarından biri olan ve zoom parametresini güncellememizi sağlayan “setZoom” fonksiyonuna bu parametreyi göndermemiz gerekmektedir.

var zoomRange = document.getElementById("zoomRange");
	
zoomRange.oninput = function() {
   map.setZoom(parseInt(this.value));
}

Yukarıda da gördüğünüz gibi “zoomRange” id li elementimizi alıyorum ve bu elementin “oninput” parametresine bir fonsiyon tanımlayarak burada haritamızın zoom parametresini güncelliyoruz.

“this.value” diyerek belirlenen güncel değeri alıyoruz ama bu değer bize string tipinde geldiği için ve fonksiyonumuz int değer kabul ettiği için aldığımız değeri “parseInt” kullanarak int çeviriyoruz.

Son durumda güncel kodumuzun tamamı aşağıdaki gibi olacaktır.

Bu kodu sorunsuz bir şekilde çalıştırdığımızda ve range değerimizi değiştirdiğimiz zaman aşağıdaki gibi haritamızın zoom özelliği de değişecektir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği Ekleme appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme

yunusemrearac — Tue, 14 Jan 2020 15:56:50 +0000

Merhaba arkadaşlar bugün sizlere daha önceki yazımda bahsettiğim “JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi” sonrası yüklenen haritadaki özellikleri nasıl custom şekilde yönetilebilir bir yapıya getirebileceğinizden bahsedeceğim.

Bu yazıda yapacağımız işlem ilk olarak ilk yüklenişteki haritada gelen tüm kontrollerin haritada görünmesini kapatarak harita görünümünü kendi kontrolümüzü ekleyip onun üzerinden değiştirme işlemini yapacağız.

Google bize toplamda 4 tane görünüm sunmaktadır. Bunlar “ROAD MAP”, “SATELLITE”, “HYBRID” ve “TERRAIN” isimleri ile geçmektedir. Bu görünümleri önceki yazımızdaki haritada da ya da görünümden kaldırılmamış herhangi bir google haritasında sol üst tarafında da görebilirsiniz.

Daha önceki yazıdaki süreçten devam edersek ilk yükleme işlemini aşağıdaki “initMap” functionu ile yapmıştık.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }});
}

İlk olarak bu harita yüklendiği sırada verdiğimiz özelliklere default görünüm için “mapTypeId” parametresini ve değerini de ilk görünümüm “ROAD MAP” olması için “roadmap” olarak tanımlıyorum. Haritadaki tüm kontrolleri gizlemek için ise “disableDefaultUI” parametresini “true” olarak işaretliyoruz.

Bu değişikliklerin yanı sıra tekrar özellik güncelleme işlemi yapabilmem için “map” tanımlamamı fonksiyonumun dışına çıkarmam gerekmektedir. Tüm bu değişiklikler yapıldığı zaman tüm kodum aşağıdaki gibi olacaktır.

Daha sonra html tarafımızda bir tane select ekliyoruz. Bu select için tanımlanacak optionlara viewler için aşağıdaki şekilde value tanımlaması yapılması gerekmektedir. Bu tanımlama ile seçilenin value değerini kullanarak tanımlama yapabiliriz.

ROAD MAP –> roadmap
SATELLITE –> satellite
HYBRID –> hybrid
TERRAIN –> terrain

Bunun yanı sıra select tagımızda dropdown değiştiğinde değişikliği algılayıp işlem yapabilmemiz için selecte “onchange” ekleyip “changeMapType” fonksiyonunu tanımlıyorum. Bu sayede dropdown her değiştiğinde bu fonksiyon tetiklenmesi ile yakalayabileceğim.

İlk yüklenmede default görünümü road map yaptığım için select optionlarında ilk sıraya onu ekliyorum. Tüm bu değişiklikler sonucu kodlarımızın son hali aşağıdaki gibi olacaktır.

Burada “changeMapType” fonksiyonu içerinde seçilen harita görünümüne göre harita görünümünü güncellememiz gerekecek.

Google maps api üzerinde oluşturulan harita üzerinde “setMapTypeId” adında bir fonksiyon ile var olan haritanın görünümü bu fonksiyona verilen görünüm ismi ile güncellenebilir. Bu parametre değerleri ise ropdown içerisindeki seçeneklerimize verdiğimiz value değerleri ile aynıdır. Bu sayede sadece seçilen seçeneğin value değerini bu fonksiyona göndermemiz yeterli olacaktır.

Dışarıdanda da erişebilmemiş için map değerimizi fonsiyon dışına almıştık. Şimdi bunun içerisinde yer alan parametreye aşağıdaki gibi seçilen değeri setleyebiliriz.

map.setMapTypeId(document.getElementById("mapViewType").value);

Yukarıdaki harita görünüm değiştirme kodumuzu “changeMapType” fonksiyonumuzun içerisine yazıyoruz ve kodumuz tamamlanıyor.

Son durumda tüm proje kodumuz aşağıdaki gibi olacaktır.

Bu kodumuzu çalıştırıp dropdownda değişiklik yaptığımız zaman aşağıdaki görseldeki gibi haritamızın da görünümünün değişeceğini göreceksiniz.

Bu sayede haritamızın görünüm kontrolünü kendi isteğimize göre yönetebilir hale getirmiş olduk.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Değiştirme appeared first on Yunus Emre Araç.

JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi

yunusemrearac — Mon, 13 Jan 2020 10:20:07 +0000

Merhaba arkadaşlar bugün sizlere javascript ile google maps api servisini kullanarak html sayfamıza nasıl google harıtaları ekleyeceğimizden bahsedeceğim.

İlk olarak Google Cloud Platform Console sitesine giderek buradan google maps api key almanız gerekmektedir. Api keyimizi aldıktan sonra bir tane “.html” uzantılı bir sayfa oluşturuyoruz ve bu html sayfasının içine default html taglarımızı ekliyoruz.

Bu kısımda sırası ile kodlarımızı eklememiz gerekmektedir. İlk olarak body tagı içerisine bir “map” id li bir div ekliyoruz. Bu div tagına harıtamızı yükleyeceğiz.

Daha sonraki aşamamızda bu map divi için head tagı içerisine yükseklik ve genişliği belirleyeceğimiz css kodlarının yer alacağı style tagını ve kodlarını ekliyoruz.

Bu css kodlarını eklemediğimiz zaman haritamız yüklenecektir ama herhangi bir yükseklik ve genişlik olmayacağından dolayı sayfa da görünmeyecektir. Bundan sonra js ile sayfamıza google maps apimizi eklememiz gerekmektedir.

Burada scriptimizi body tagının kapanışının hemen üstüne eklememiz gerekiyor. Google maps api url sinde yer alan “key” parametresinin değeri olan “GoogleMapsApiKey” yazan yere aldığımız google maps api keyini yazıyoruz. “callback” parametresinin karşısında yer alan değer “initMap” ise bu api çaprıldığında tetiklenecek olan javascript functionın ismi gelmesi gerekmektedir. Ben function ismini değiştirmiyorum ve hemen üstüne bu isimde bir function oluşturuyorum.

Kalan son işlemimiz ise bu oluştrduğumuz function içerisinde map apimizi kullanarak oluşturduğumuz div içierisine eklemek olacaktır.

var map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }});

Yukarıdaki kodumuzu functionımızın içerisine ekliyoruz. Burada google.maps.Map fonksiyonuna hangi elemente import edeceğini ve özelliklerini belirttik. İlk özellik haritanın zoom oranı diğer özellik ise ilk yüklenmede hangi konumu merkez olacak şekilde haritayı açmasını belirttiğimiz özelliklerdir.

Tüm bu işlemlerden sonra kodumuzun son çalışır hali aşağıdaki gibi olacaktır.

Bu kodu tarayıcı üzerinde açtığımız zaman haritamız aşağıdaki gibi gelecektir.

Gördüğünüz gibi sorunsuz bir şekilde belirlediğimiz özellikler ile haritamız yüklenmiş oldu.

The post JavaScript ile Google Maps Api Kullanarak Sayfaya Google Haritaları Ekleme İşlemi appeared first on Yunus Emre Araç.

Bir JavaScript Dosyasından Başka Bir JavaScript Dosyasını Referans Verip Ordaki Metodu Kullanmak

yunusemrearac — Wed, 08 Mar 2017 14:42:31 +0000

Merhaba arkadaşlar bugün sizlere bir javascript dosyasında başka bir javascript dosyasını nasıl referans vereceğimizden ve diğer javascript dosyasında ki metodu nasıl kullanabileceğinizden bahsedeceğim.

Bunun için bir function yazdım ve bunu rahatlıkla kullanabilirsiniz.

function addJavascript(jsSrc) {
 var th = document.getElementsByTagName('head')[0];
 var s = document.createElement('script');
 s.setAttribute('type','text/javascript');
 s.setAttribute('src',jsSrc);
 th.appendChild(s);
}

Yukarıdaki fonksiyonu javascript dosyamıza ekliyoruz ve page load kısmında bu fonksiyonu çağırarak js src adresimizi parametre olarak ekliyoruz.

Daha sonra bu javascript dosyamızı sayfamıza refereans olarak eklemiş oluyoruz ve bu dosyadaki herhangi bir methodu kullanmak istediğimizde aşağıdaki kod kısmını kullanabilirsiniz.

$.getScript(jsSrc, function() {
getFonc();
});

Her iki formül içinde üst kısımda javascript src adresi için bir değişken tanımlayıp ona src adresini atarak bu değişken adını jsSrc yerine yazarak daha rahat yönetilebilir bir şekilde kullanabilirsiniz.

The post Bir JavaScript Dosyasından Başka Bir JavaScript Dosyasını Referans Verip Ordaki Metodu Kullanmak appeared first on Yunus Emre Araç.

JavaScript Kullanarak Sayıların Formatını Para Formatına Çevirmek

yunusemrearac — Fri, 30 Sep 2016 08:21:48 +0000

Merhaba arkadaşlar bugün sizlere JavaScript kullanarak verilen bir değeri para brimi formatına çevirmeden bahsedeceğim.

Bunu bir fonksiyon yapısında hazırladım ve yapmanız gereken bu fonksiyonları projenize dahil ederek kullanmamız gerektiğinde değeri fonksiyona göndererek sonucu almak olacaktır.

Number.prototype.formatMoney = function (fractionDigits, decimal, separator) {
fractionDigits = isNaN(fractionDigits = Math.abs(fractionDigits)) ? 2 : fractionDigits;

decimal = typeof (decimal) === "undefined" ? "." : decimal;

separator = typeof (separator) === "undefined" ? "," : separator;

var number = this;

var neg = number < 0 ? "-" : "";

var wholePart = parseInt(number = Math.abs(+number || 0).toFixed(fractionDigits)) + "";

var separtorIndex = (separtorIndex = wholePart.length) > 3 ? separtorIndex % 3 : 0;

return neg +

(separtorIndex ? wholePart.substr(0, separtorIndex) + separator : "") +

wholePart.substr(separtorIndex).replace(/(\d{3})(?=\d)/g, "$1" + separator) +

(fractionDigits ? decimal + Math.abs(number - wholePart).toFixed(fractionDigits).slice(2) : "");

};

Yukarıdaki fonksiyon gönderilen değerin küsüratının kaç basamak olacağını onun neyle ayrılacağını ve birde ondalık kısımlarda neyle ayrılacağını gönderdiğimiz zaman bize sonucu verecektir.

Bu fonksiyonu rahat bir şekilde kullanmak için aşağıdaki fonksiyonu da projemize ekliyoruz.

function formatMoney (raw) {

return Number(raw).formatMoney(2, ',', '.');

}

Yukarıdaki fonksiyonda da gönderilecek değerin küsüratını virgül ile iki basamak olacak şekilde ayıracaktır ve ondalık kısımlarını da ayırmak için nokta kullanacaktır. Bu kısımları istediğiniz gibi düzenleyebilirsiniz.

Örnek olarak :

formatMoney (15250) – > result : “15.250,00”

formatMoney (15000000) – > result : “15.000.000,00”

formatMoney (55257.36) – > result : “55.257,36”

The post JavaScript Kullanarak Sayıların Formatını Para Formatına Çevirmek appeared first on Yunus Emre Araç.

JavaScript ile HTML İmage Tagından Regex ile Resim Url Adresini Alma

yunusemrearac — Sun, 24 Jul 2016 18:02:45 +0000

Merhaba arkadaşlar bugün sizlere her zaman karşımıza çıkan bir ihtiyaçtan bahsedip ufak bir ipucu vereceğim.

Elimizde html bir image kodu string olarak yer almaktadır ve biz buradaki resim url sini yani src deki url adresini almak istiyoruz.

Bunun için çok bilinen ve bize kolaylık sağlayan regex yöntemi ile bu adresi almayı anlatacağım.

var image = "
Some plain text
http://www.google.com"

İlk olarak elimizde böyle bir örnek image html kodumuzun olduğunu düşünelim ve burada ki src kodunu almaya çalıştığımızı farz edelim.

var image = "
Some plain text
http://www.google.com";

var regex = /Bu şekilde bir regex formülü kullanarak src değişkenimize otomatik olarak img tagımızdaki src adresini almış bulunmaktayız.
Burada dikkat etmeniz gereken bir noktada img tagınızda src de kullanılan belirteç ayraçlarıdır. Yani src den sonra kod tek tırnak mı (‘) yoksa çift tırnak (“) arasında mı verilmiş ona dikkat etmeniz gerekmektedir.
Yukarıda ki örneğimizde gördüğünüz gibi tek tırmak olarak verilmiştir. Eğer bu çift tırnak olsaydı regex kodumuz aşağıdaki gibi olacaktır.
var regex = /Aslında gördüğünü gibi regex kodumda sadece istediğim resim url sinin src= den sonraki tek tırnaklar arasındaki değil çift tırnaklar arasındaki kodun olduğunu belirmek oldu.
The post JavaScript ile HTML İmage Tagından Regex ile Resim Url Adresini Alma appeared first on Yunus Emre Araç.

JQuery Cookie ile Array Kaydetme ve Kullanma

yunusemrearac — Mon, 27 Jun 2016 07:28:25 +0000

Merhaba arkadaşlar bugün sizlere cookie ye değişken olarak bir array dizisi nasıl tanımlayacağınızı ve bunu tekrardan nasıl kullanabileceğinizden bahsedeceğim.

Şimdi elimizde aşağıdaki gibi bir array olduğunu varsayalım.

var name = ['Yunus', 'Emre', 'Araç'];

Bu name dizisini cookie kaydetmeden önce JSON olarak dönüştürmemiz gerekiyor.

var jsonName = JSON.stringify(name);

Bu işlemi yaptıktan sonra jsonName değişkenimizi cookie olarak kaydedebiliriz.

$.cookie('arrayName', jsonName);

Bu yapığımız işlemleri bir araya toparlarsak aşağıdaki gibi bir kod satırımız olacaktır.

var name = ['Yunus', 'Emre', 'Araç'];

var jsonName = JSON.stringify(name);

$.cookie('arrayName', jsonName);

Şimdi bu arrayimizi cookie olarak kaydettik ve bu değişkenimizden değeri okumak istiyorsak aşağıdaki gibi cookie deki değişkenimizi okuyoruz ve json parse ederek tekrar dizi haline getirerek kullanabiliriz.

var jsonName = $.cookie('arrayName');

var name = JSON.parse(jsonName);

Gördüğünüz gibi cookie ye dizi olarak rahatlıkla veri ekleyebiliyoruz ve bunu istediğimiz zaman da rahatlıkla okuyabiliriz.

The post JQuery Cookie ile Array Kaydetme ve Kullanma appeared first on Yunus Emre Araç.

JQuery ile Cookie Kullanımı

yunusemrearac — Fri, 24 Jun 2016 13:55:57 +0000

Merhaba arkadaşlar bugün sizlere jquery ile cookie kullanımından bahsedeceğim.

Cookie yi kullanabilmeniz için öncelikle kullanacağınız ortama jquery.cookie.js dosyasını indirerek eklemeniz gerekmektedir.

Daha sonrasında da aşağıdaki jquery kodlarını kullanarak işlemlerinizi yapabilirsiniz.

Cookie ekleme :

$.cookie("cookieName", "cookieValue");

Belirli bir gün süreyle tutulması ve bu süre sonunda cookienin silinecek şekilde ekleme :

$.cookie("cookieName", "cookieValue", {expires: 7});

Var olan bir cookie değerini okumak :

$.cookie("cookieName");

Var olan bir cookie yi silmek :

$.cookie("cookieName", null, {expires: -1});

ya da

$.removeCookie("cookieName");

The post JQuery ile Cookie Kullanımı appeared first on Yunus Emre Araç.