jQuery arşivleri - Fatihsoysal.com

Excel Dosya Upload & JSON Formatına Dönüştürmek – Javascript

Merhaba arkadaşlar, geçtiğimiz günlerde bir ihtiyacım olan yapıyı istediğim duruma getirdim ve sizlerle paylaşmak istedim.

Yapıda temel olarak elimizde bir excel dosyamızın olduğunu düşünelim. Bu dosya içerisindeki verileri belli bir formatta site üzerine upload etmek ve işlemek istiyoruz. Böyle bir ihtiyacınız varsa doğru yerdesiniz. Belki 10’larca çeşitli kütüphane denedim ancak hiçbiri benim istediğimiz tam olarak sağlayamadı. Ancak geliştirdiğim bu kütüphane sizin işinizi çoğunlukla çözecektir diye düşünüyorum.

Çalışmanın github adresine buradan ulaşabilirsiniz: https://github.com/maxmanus16/excel-file-to-json

*Performans
Bu kütüphane büyük * .xlsx dosyalarını işleyememe konusunda biraz yavaş kalıyordu. Bu kütüphanenin ana noktasının, performans veya büyük veri kümelerini işleme yeteneği değil, kullanılabilirlik ve rahatlık olduğu açık. Ancak bir geliştirme sonrası şuan 2000 satır / 20 sütun dosyasını ayrıştırma süresi yaklaşık 3 saniye. Büyük veri kümelerini işlemek için lütfen .xlsx uzantısını kullanın.

<script>
  var input = document.getElementById('input')
  input.addEventListener('change', function() {
    readXlsxFile(input.files[0]).then(function() {
      // `satırlar` bir satır dizisidir
      // her satır bir hücre dizisidir.
    })
  })
</script>

var input = document.getElementById('input')

input.addEventListener('change', function() {

readXlsxFile(input.files[0]).then(function() {

// `satırlar` bir satır dizisidir

// her satır bir hücre dizisidir.

})

</script>

Cookie Altyapısı ile Çalışan Pop-Up Yapımı – agreeToContent.js – Kullanıcı Sözleşmesi – Javascript

Merhaba, çok uzun zamandır blog gönderisi paylaşmadığımı farkettim. Malum karantina süreci devam ediyor 🙂 Bu süre zarfında sizler için yazmayı düşündüğüm makalelerin de bir listesini çıkardım. Bunları yavaş yavaş paylaşmayı düşünüyorum. Bu makalemizde sizlerle Cookie Altyapısı ile Çalışan Pop-Up nasıl oluşturabiliriz? Bu sorunun cevabını öğreneceğiz.

Geçtiğimiz günlerde bununla alakalı bir ihtiyacım oldu. Ve araştırma yaparken çok güzel bir JS kütüphanesinin bunu bizim yerimize yaptığını gördüm. Test ettim ve kullandım. Sonuç: Başarılı.

AgreeToContent.js kütüphanesi, kullanıcının sözleşmesini kabul ettikten sonra kullanıcının web içeriğinize erişmesini sağlayan, çerez altyapısını kullanan Pop-up’ı oluşturmanıza olanak tanır.

Nasıl kullanılır?
Sayfaya “agreeToContent.js” JavaScript dosyasını ekleyin.

<script src="agreeToContent.js"></script>

1	<script src="agreeToContent.js"></script>

Script dosyalarını buradan indirebilirsiniz.

Varsayılan Ayarlar

agreementMessage = [
    '<img src="http://static1.squarespace.com/static/566913cb0e4c11de025472ae/t/57be9d0515d5db8e88288c2b/1515813659457/?format=1500w" ',
    ' style="width:90%;max-width:160px"/><br /> <br />',
    '<span style="font-family: proxima-novai, \'Arial\', sans-serif;font-weight: 700; letter-spacing: 4.02px;line-height: 2.47em;"> ',
    'EPISTLE &amp; EPIPHANY </span><br />',
    '<p style="font-family: \'raleway\', \'Arial\', sans-serif; font-size: 18px;font-weight: 400;font-style: normal;letter-spacing: 0px;line-height: .9em;">',
    'An intimate collection <br /> ',
    'of birth poems,<br />',
    'love letters &amp; photographs',
    '</p><br />',
    '<img src="https://static1.squarespace.com/static/566913cb0e4c11de025472ae/t/5808fa4e1b631b83fe97fc20/1476983790330/Shell+Luttrell+Midwife+Cover?format=1000w"',
    'style="width:90%; max-width:400px"/>',
    '<br /><br />',
    '<strong style="color:red;font-size:1.2em;">WARNING!</strong>',
    '<br /><br />',
    'This site contains uncensored photos of human child birth.',
    '<br /><br />',
    'Would you like to continue?<br /><br />',
    '<span style="color:grey;font-size:0.8em;">By clicking yes, you also agree to this site\'s use of cookies.</span>'
  ]

agreementMessage = [

'<img src="http://static1.squarespace.com/static/566913cb0e4c11de025472ae/t/57be9d0515d5db8e88288c2b/1515813659457/?format=1500w" ',

' style="width:90%;max-width:160px"/><br /> <br />',

'<span style="font-family: proxima-novai, \'Arial\', sans-serif;font-weight: 700; letter-spacing: 4.02px;line-height: 2.47em;"> ',

'EPISTLE & EPIPHANY </span><br />',

'<p style="font-family: \'raleway\', \'Arial\', sans-serif; font-size: 18px;font-weight: 400;font-style: normal;letter-spacing: 0px;line-height: .9em;">',

'An intimate collection <br /> ',

'of birth poems,<br />',

'love letters & photographs',

'</p><br />',

'<img src="https://static1.squarespace.com/static/566913cb0e4c11de025472ae/t/5808fa4e1b631b83fe97fc20/1476983790330/Shell+Luttrell+Midwife+Cover?format=1000w"',

'style="width:90%; max-width:400px"/>',

'<br /><br />',

'<strong style="color:red;font-size:1.2em;">WARNING!</strong>',

'<br /><br />',

'This site contains uncensored photos of human child birth.',

'<br /><br />',

'Would you like to continue?<br /><br />',

'<span style="color:grey;font-size:0.8em;">By clicking yes, you also agree to this site\'s use of cookies.</span>'

]

Hayır butonu ayarları

function continueNo() {
  document.cookie = 'agreed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'
  window.location = 'https://promujer.org/'
}

function continueNo() {

document.cookie = 'agreed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'

window.location = 'https://promujer.org/'

}

Pop-up içeriğini değiştirmek isterseniz agreeToContent.js dosyasını isteğinize göre düzenleyebilirsiniz.

Örnek kullanım

<head>
<script src="./agreeToContent.js"></script>
<script> 
 function clearCookie() {
   document.cookie = 'agreed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;' 
 }
</script>
<style> 
body { font-family:'Arial', sans-serif; text-align:center; }
button { padding: 10px;border-radius: 4px;margin: 10px;box-shadow: 2px 2px; }
</style>
</head>
<body>
<h1>The graphic content of Shell Luttrell</h1>
<p>
<img src="https://static1.squarespace.com/static/57a259f329687fa31c3a5717/5850d02ad2b857bc8c31b24c/59b44520a9db0927a1fff948/1505197441120/open.jpeg"
style="width:65%;max-width:450px;"/>
</p>
<button onclick="clearCookie()"> Clear Cookie </button>
</body>

<head>

function clearCookie() {

document.cookie = 'agreed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'

}

</script>

<style>

body { font-family:'Arial', sans-serif; text-align:center; }

button { padding: 10px;border-radius: 4px;margin: 10px;box-shadow: 2px 2px; }

</style>

</head>

<body>

<h1>The graphic content of Shell Luttrell</h1>

<p>

<img src="https://static1.squarespace.com/static/57a259f329687fa31c3a5717/5850d02ad2b857bc8c31b24c/59b44520a9db0927a1fff948/1505197441120/open.jpeg"

style="width:65%;max-width:450px;"/>

</p>

<button onclick="clearCookie()"> Clear Cookie </button>

</body>

Javascript ile JSON Çıktısı Oluşturmak ve JSON Data Okumak

Merhaba, daha önce C# ile JSON Veri Okumak ve Parse Etmek ve JSON Çıktısı Oluşturmak ve JSON Data Okumak {PHP – MySQL} makalelerini sizlerle paylaşmıştım. Bir arkadaşımızın JSON okuma ve oluşturma işlemlerinin javascript ile nasıl yapıldığını öğrenmek istemesi nedeniyle bu makaleyi yazmaya karar verdim.

Bu makalede Javascript ile JSON Çıktısı Oluşturmak ve JSON Data Okumak konularını ele alacağız.

Öncelikle javascript ile örnek bir JSON çıktısı nasıl oluşturulur? Buna bakalım. Okumaya devam et “Javascript ile JSON Çıktısı Oluşturmak ve JSON Data Okumak”

LinkedIn ile Giriş Yapma – Kayıt Olma İşlemleri – JavaScript SDK

LinkedIn bildiğiniz üzere iş dünyası için dünyanın en popüler sosyal ağı. Bununla birlikte LinkedIn, web-mobil uygulamalarındaki oturum açma deneyimini zenginleştirmek için çeşitli API’ler sunar. LinkedIn hesabı ile oturum açma özelliği, kullanıcıların web sitenizde yeni bir hesap oluşturmadan LinkedIn hesabıyla oturum açmalarını sağlar. Giriş sistemini uygulamak daha fazla kayıt almak için zaman kazanılmasına yardımcı olur.

Daha önce blog sayfam üzerinden sizinle Facebook ile Giriş Yapma – Kayıt Olma İşlemleri ve Google Hesabı ile Kayıt Olma makalelerini paylaşmıştım. Bu makale ile birlikte Facebook ve Google‘dan sonra LinkedIn sosya ağ hesabı API user kontrol işlemlerini öğrenmiş olacaksınız.

LinkedIn JavaScript SDK, sayfanın yenilenmesi olmaksızın tek bir sayfada LinkedIn hesabıyla kullanıcı girişini gerçekleştirmenin kolay bir yoludur. Bu yazıda, JavaScript SDK kullanarak LinkedIn API’yi nasıl entegre edebileceğinizi göstereceğim. Kullanıcının LinkedIn hesabıyla kimliğini doğrulayacağız ve JavaScript SDK kullanarak LinkedIn’den kullanıcı profili verilerini alacağız. Aşağıda sizler için açıklayıcı bir infografik hazırladım.

LinkedIn Uygulamasını Oluşturmak

JavaScript SDK kullanabilmek için LinkedIn üzerinde bir uygulama oluşturmanız gerekiyor. Henüz kayıtlı bir uygulamanız yoksa, öncelikle buradan bir LinkedIn uygulaması oluşturun.

Mevcut bir uygulamanız varsa, JavaScript SDK’yi kullanmak için aşağıdaki ayarları yapmanız gereklidir.

Uygulamalarım Üzerinde Uygulamalar sayfanızı seçin.
Sol menü panelinden JavaScript bağlantısını tıklayın.
JavaScript Ayarları altında Geçerli SDK Alan Adlarını belirtin. Ardından güncelle butonunu tıklayın.

Dikkat: localhost üzerinde test etmek için bu etki alanını ekleyin: http://localhost

Ardından, Kimlik Doğrulama sayfasına gidin, daha sonra komut dosyasında kullanmak üzere İstemci Kimliğini kopyalayın, bunu kullanacağız. Burası önemli.

Javascript

SDK işlevselliğini kullanmak için, web sayfanıza LinkedIn JavaScript kütüphanesini ekleyin ve LinkedIn App API key bilginizi belirtin.

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key: App_Client_ID
    authorize: true
    onLoad: onLinkedInLoad
    scope: r_basicprofile r_emailaddress
</script>

api_key: App_Client_ID

authorize: true

onLoad: onLinkedInLoad

scope: r_basicprofile r_emailaddress

</script>

Aşağıdaki JavaScript fonksiyonları, LinkedIn oturum açma işlemini tek bir sayfaya entegre etmek için kullanıldı.

onLinkedInLoad() – Kimlik doğrulaması tamamlandıktan sonra bir API isteği yapmak için tanımlandı.
getProfileData() – Üyenin profil verilerini talep etmek için tanımlandı.
displayProfileData() – Web sayfasındaki üye profil bilgilerini görüntülemek için tanımlandı.
logout() – Kullanıcıyı LinkedIn üzerinden çıkış yaptırmak için kullanıldı.
removeProfileData() – Profil bilgilerini web sayfasından gizlemek için kullanıldı.

<script type="text/javascript">
    // Kimlik doğrulaması tamamlandıktan sonra bir API isteği yapmak için bir olay dinleyicisi ayarlayın
    function onLinkedInLoad() {
        IN.Event.on(IN, "auth", getProfileData);
    }
    
    // Üyenin profil verilerini talep etmek için kullanılır
    function getProfileData() {
        IN.API.Profile("me").fields("id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address").result(displayProfileData).error(onError);
    }

    // API isteğinden başarılı geri dönüş geldiğinde neler olmalı?
    function displayProfileData(data){
        var user = data.values[0];
        document.getElementById("picture").innerHTML = '<img src="'+user.pictureUrl+'" />';
        document.getElementById("name").innerHTML = user.firstName+' '+user.lastName;
        document.getElementById("intro").innerHTML = user.headline;
        document.getElementById("email").innerHTML = user.emailAddress;
        document.getElementById("location").innerHTML = user.location.name;
        document.getElementById("link").innerHTML = '<a href="'+user.publicProfileUrl+'" target="_blank">Visit profile</a>';
        document.getElementById('profileData').style.display = 'block';
    }

    // API isteğinden hata döndüğünde neler olacak?
    function onError(error) {
        console.log(error);
    }
    
    // LinkedIn üzerindeki kullanıcı session bilgilerini uçurur.
    function logout(){
        IN.User.logout(removeProfileData);
    }
    
    // Profil bilgilerini sayfadan siler.
    function removeProfileData(){
        document.getElementById('profileData').remove();
    }
</script>

// Kimlik doğrulaması tamamlandıktan sonra bir API isteği yapmak için bir olay dinleyicisi ayarlayın

function onLinkedInLoad() {

IN.Event.on(IN, "auth", getProfileData);

}

// Üyenin profil verilerini talep etmek için kullanılır

function getProfileData() {

IN.API.Profile("me").fields("id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address").result(displayProfileData).error(onError);

}

// API isteğinden başarılı geri dönüş geldiğinde neler olmalı?

function displayProfileData(data){

var user = data.values[0];

document.getElementById("picture").innerHTML = '<img src="'+user.pictureUrl+'" />';

document.getElementById("name").innerHTML = user.firstName+' '+user.lastName;

document.getElementById("intro").innerHTML = user.headline;

document.getElementById("email").innerHTML = user.emailAddress;

document.getElementById("location").innerHTML = user.location.name;

document.getElementById("link").innerHTML = '<a href="'+user.publicProfileUrl+'" target="_blank">Visit profile</a>';

document.getElementById('profileData').style.display = 'block';

}

// API isteğinden hata döndüğünde neler olacak?

function onError(error) {

console.log(error);

}

// LinkedIn üzerindeki kullanıcı session bilgilerini uçurur.

function logout(){

IN.User.logout(removeProfileData);

}

// Profil bilgilerini sayfadan siler.

function removeProfileData(){

document.getElementById('profileData').remove();

}

</script>

HTML

LinkedIn ile Oturum Aç butonunu oluşturalım.

<!-- sign in with linkedin button -->
<script type="in/Login"></script>

1 2	<!-- sign in with linkedin button --> <script type="in/Login"></script>

Üyenin kullanıcı verilerini (profil resmi, ad, soyad, e-posta adresi, başlık, yer ve genel profil URL) burada göstreceğiz. Ayrıca, burada kullanıcıyı LinkedIn hesabından çıkmak için bir oturum kapatma bağlantısı göstereceğim.

<div id="profileData" style="display: none;">
    <p><a href="javascript:void(0);" onclick="logout()">Çıkış Yap</a></p>
    <div id="picture"></div>
    <div class="info">
        <p id="name"></p>
        <p id="intro"></p>
        <p id="email"></p>
        <p id="location"></p>
        <p id="link"></p>
    </div>
</div>

<p><a href="javascript:void(0);" onclick="logout()">Çıkış Yap</a></p>

</div>

Gördüğünüz üzere LinkedIn üzerinden gelen verileri basit biçimde kendi tarafımıza aldık ve işlem yaptırdık. Siz dilerseniz entegrasyonu genişleterek, kullanıcı önce kendi sisteminize kayıt edebilir, sonra da giriş yaptırabilirsiniz. Bu size kalmış. Oldukça basit şekilde açıklamaya çalıştım. Sabrınız için teşekkür ederim.

Bir sonraki makalede görüşmek üzere, mutlu, huzurlu, sağlıklı günler dilerim.

jQuery ve Javascript’te Cache(Önbelleğe Alma) İşlemini Durdurmak

Bildiğiniz üzere browser cache’leri web mimarilerini hızlandırmak için kullanılır. Fakat bu durum yazılım geliştiriciler için bir süre sonra çileden çıkarıcı bir durum olabilir. Özellikle tarayıcıda en son sürümü görüntülenecek dinamik bir içerikle uğraşırken. Bununla birlikte, güvenlik sebebiyle, javascript içinde tüm tarayıcılar için önbelleğe almayı devre dışı bırakabilecek mükemmel yöntemler yoktur. Bu yazıda, javascript’in ve jQuery’nin tarayıcılar tarafından önbelleğe almasını (cache) durdurmak veya devre dışı bırakmak için kullandığım birkaç yöntemi göstereceğim.

jQuery

jQuery v1.2’nin sonraki sürümünde, jQuery ajax sınıfıyla tarayıcı ile önbelleğe almayı durdurmak için bir yöntem sunulmuştur. V1.2’deki güncelleme listesini görmek için jQuery web sitesini ziyaret edebilirsiniz. v1.2 dökümantasyonlarda önbelleğe almayı devre dışı bırakacak bir fonksiyon içerdiğini göreceksiniz. Her bir dinamik içeriğin önbellekte saklanma şeklini true / false olarak ayarlayarak tüm tarayıcı cache’ini devre dışı bırakmak üzere bir varsayılan ayar görebilirsiniz.

Her bir ajax istek önbellek özelliklerini belirlemek için,

$.ajax({
url: 'index.html',
cache: false,
success: function(html){
$('#results').append(html);
}
});

$.ajax({

url: 'index.html',

cache: false,

success: function(html){

$('#results').append(html);

}

});

jQuery örneğini yansıtmaktadır. Ve tarayıcıyı kullanarak cache’i devre dışı bırakmak için aşağıdaki fonksiyonu kullanabiliriz:

$.ajaxSetup({cache: false}});

1	$.ajaxSetup({cache: false}});

Javascript

Tarayıcıların belirli bir dosyayı önbelleğe alabilmelerinin nedeni, tarayıcıya geçirilen url’lerin aynı olması nedeniyledir. Her geçerlilik için onu benzersiz kılmak için, aşağıda gösterildiği gibi url’nin sonuna rasgele bir sayı ekleyebiliriz,

var img.src = 'www.fatihsoysal.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});

var img.src = 'www.fatihsoysal.com'+'?'+Math.random()*Math.random();

return $(img).load(function()

{

alert('completed!');

});

Bu yöntem, tüm dosyaların, tarayıcıya attığınız her dinamik geçiş için benzersiz olmasını sağlar; tarayıcının her seferinde güncel dosyayı çekmesine olanak sağlayacaktır. Bu yöntemi tarayıcının neredeyse tamamının dinamik içeriği alma şeklini destekleyeceği için daha güvenilir ve kullanışlı buluyorum.

Bonus: HTML

Aşağıdaki meta etiketi kullanarak önbelleklemeyi de devre dışı bırakabilir veya durdurabilirsiniz,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Bu yöntem, tüm sayfanın tarayıcı tarafından da önbelleğe alınmasını önleyecektir.

Bir sonraki makalede görüşmek üzere, sağlıkla, huzurla kalın.

jQuery ile Cookie (Çerez) Yönetimi – jquery.cookie

Bu makalede jquery ile kolayca nasıl cookie oluşturulur, cookie silme işlemi nasıl yapılır, belli gün aralıklarında kullanıcı tarayıcısında çerez nasıl saklanır, saklanan cookie’lerin yönetimi ve kontrolü nasıl yapılabilir sorularına yanıt bulacaksınız.

Öncelikle cookie(çerez) ne işe yarar, niçin kullanılır, bu sorulara cevap verelim.

Yazılımsal olarak oluşturulan çerezler kullanıcıların sistemlerinde geçici olarak saklanan, veri kaydetmeye ve korumaya yarayan geçici veri merkezleridir. En yalın haliyle böyle anlatılabilir diye düşünüyorum. Sonrasında bu çerezler okunur, böylece kullanıcı yönetimi, yada saklanan veri yönetimi kolayca yapılabilir.

Geçtiğimiz günlerde cookie işlemlerinin yönetimini kolayca yapabileceğim bir kütüphane arayışına giriştim. Birkaç denemeden sonra, oldukça yalın şekilde sınıflandırılmış bir kütüphane olduğunu keşfettim. Şimdi sizlerle bu kütüphaneyi paylaşacağım, cookie yönetiminin nasıl yapıldığını göstereceğim.

Kütüphanenin github sayfasına buradan ulaşabilirsiniz.

Kullanımı:

Öncelikle script’i edinerek sayfa içerisine import edelim. Tabi jQuery import’tan hemen sonra olmalı.

<script src="/path/to/jquery.cookie.js"></script>

1	<script src="/path/to/jquery.cookie.js"></script>

*Basit cookie oluşturmak:

$.cookie('name', 'value');

1	$.cookie('name', 'value');

*15 gün saklanan bir cookie oluşturmak

$.cookie('name', 'value', { expires: 15 });

1	$.cookie('name', 'value', { expires: 15 });

*Cookie okumak

$.cookie('name'); // => "value"

1	$.cookie('name'); // => "value"

*Cookie silmek

// Returns true when cookie was successfully deleted, otherwise false
$.removeCookie('name'); // => true

1 2	// Returns true when cookie was successfully deleted, otherwise false $.removeCookie('name'); // => true

jquery.cookie ile cookie yönetimi yapmak işte bu kadar kolay. Şimdi aşağıda örnek bir uygulama yazacağım. Buna göre kullanıcıya sadece 1 kere göstermek istediğimiz bir yazı var diye farz edelim. Yani tekrar tekrar gösterilmeyecek. Bunun kontrolünü nasıl yapabileceğimiz aşağıdaki bonus örneğimizde mevcut. Bir sonraki makalemizde görüşmek üzere. Kötülerden uzak geçsin gününüz. Kolaylıklar dilerim.

Bonus Uygulama

if (!$.cookie('popup-shown')) {
      //Burada pop-up içerisinde göstermek istediğimiz mesajımız olsun.
      $.magnificPopup.open({
        items: [
            {
                src: '#disclaimer', 
                type: 'inline'
            }
        ],
        removalDelay: 300,
        mainClass: 'mfp-fade',
        closeOnContentClick: false,
        modal: true
    });
    //Tarayıcıya cookie tanımlayalım ki tekrardan gösterilmesin.
    $.cookie('popup-shown', true);
}

if (!$.cookie('popup-shown')) {

//Burada pop-up içerisinde göstermek istediğimiz mesajımız olsun.

$.magnificPopup.open({

items: [

{

src: '#disclaimer',

type: 'inline'

}

removalDelay: 300,

mainClass: 'mfp-fade',

closeOnContentClick: false,

modal: true

});

//Tarayıcıya cookie tanımlayalım ki tekrardan gösterilmesin.

$.cookie('popup-shown', true);

}