Kategori arşivi: Java Script

Vue.js Nedir? Yazı Dizimiz Başlıyor.

Vue.js hakkında hayatınızı kolaylaştıracak yazılar paylaşmaktan vazgeçip, Vue.js hakkında öğrendiğim her şeyi blogumda yazmaya karar verdim. Bu Vue.js pekiştirip daha iyi öğrenmemi sağlayacağı gibi, bir çok kişiyede faydalı olacağını düşünüyorum.

Vue.js tarihine kısaca değinecek olursak, 2014 yılında bağımsız bir yazılımcı olan Evan You tarafından geliştirilmeye başlamıştır. Evan You takip etmenizi mutlaka öneririm. Takip etmek için Twitter ve Medium sitelerini kullanmanız gerekmektedir. Kendi bloğunda herhangi bir şey paylaşmamaktadır. Ayrıca bir çok projesini GitHub üzerinden ulaşabilirsiniz. Tabi ki Vue.js resmi sitesi ise https://vuejs.org/‘dur. Biraz araştırma ile Vue.js gönül vermiş bir çok blog, twitter ve medium hesabı bulabilirsiniz.

Okumaya devam et

$(document).ready() Nedir?

Ready fonksiyonu DOM yüklendikten sonra çalışacak events belirtmenizi sağlar.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ready Fonksiyonu</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('h1').css('color', 'blue');
</script>
</head>
<body>
<h1>Bu element mavi mi? Tabi ki değil!</h1>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

Ready fonksiyonu en kısa açıklamasıyla DOM yüklendikten sonra çalışacak eventlarınızı belirtmenize yarar.

Bu bize nasıl bir yarar sağlar?

Bunu bir örnekle bunu açıklayalım. Bir HTML sayfası oluşturun ve içine şu kodları yazın.

Kırmızı yapmamasının sebebi DOM yüklenmeden önce sizin scriptinizin çalışmış olduğundan dolayı. Web tarayıcılarının html belgenizi yukarıdan aşağıya doğru okuduğunu biliyoruz. Bu sebeple okuma sırası şu şekilde olacaktır;

html > head > meta > title > script > script > body > h1

Kalın yerlere dikkat ederseniz önce bizim scriptimiz çalışmış oldu. Sonrasında h1 elementi yüklendi. Yani jQuery aslında olmayan bir h1 etiketini kırmızı yapmaya çalıştığı için sonuç başarısız oldu.

Peki bu script kodunu sayfanın altına alırsak ?

Evet bu şekilde çalıştırabildik. Örnek sayfamıza buradan ulaşabilirsiniz.

Şimdi gelelim ready() fonksiyonun işlevine. Yukarıda ki hiyerarşimizi terkar yazalım.

html > head > meta > title > script > script > body > h1

Document ready tam bu aşamada bizim imdadımıza koşuyor ve işlevi tam olarak şu şekilde gerçekleştiriyor.

html > head > meta > title > script(jquery load) > script > body > h1 > script

Gördüğünüz gibi jquery yükledikten sonra ki script bölümümüzü yüklemeden direk olarak DOM elementlerine yöneldi ve en son scriptimizi çalıştırdı. Şimdi ilk örneğimizi document ready kullanarak tekrar yazalım.

Evet script kodumuz hem üstte hemde h1 elementimiz kırmızı oldu. Canlı örnek için buradaki örnek sayfama gidebilirsiniz. Evet ready() fonksiyonumuzu öğrendiğimize inanıyorum. Ancak şöyle bir soru sorabileceğiniz aklıma geliyor.

Bu ready fonksiyonunun daha kısa kullanımı yok mu?

Ready fonksiyonunun iki adet kullanımı var. Uzun kullanımını yukarda gördük ancak tekrar edelim.

Kısa kullanımı ise şu şekilde;

Evet işte bu kadar. Umarım yararlı bir döküman olmuştur.

Html.BeginForm’u Post Sonrasında Js ve JQuery İşlemleri

Üzerinde çalıştığım projemde dosya yükleme eklemem gerekiyordu. Bütün view’lerimde Ajax.BeginForm ile post ediyordum ve post sonrası js işlemleri için parametre olak OnSuccess kullanıyordum. Upload işlemini Html.BeginForm ile yapmak zorunda kalınca OnSuccess’den mahrum kaldım.

Html.BeginForm ile post sonrasında js kütüphanelerimi aşağıdaki gibi bir yöntemle çalıştırdım 🙂

JS Kütüphanesi:

function querystring(key) {
    var re = new RegExp('(?:\\?|&)' + key + '=(.*?)(?=&|$)', 'gi');
    var r = [], m;
    while ((m = re.exec(document.location.search)) != null) r.push(m[1]);
    return r;
}

$(document).ready(function () { 
    if (querystring('i') == "FRAME_CLOSE") {
        alert("Başarıyla eklenmiştir.");
        parent.jQuery.fn.colorbox.close();
    }
    else if (querystring('i') == "DOSYA_BOYUT") {
        alert("Dosya boyutu en fazla 10 MB olabilir.");
    }
    else if (querystring('i') == "DOSYA_TIP") {
        alert("İzin verilen dosya formatları: *.jpg, *.pdf, *.doc, *.docx, *.xls, *.xlsx, *.udf");
    }
    else if (querystring('i') == "DOSYA_YOK") {
        alert("Lütfen yüklemek istediğiniz dosyayı seçiniz.");
    }
    else if (querystring('i') == "HATA") {
        alert("Lütfen formu kontrol ediniz.");
    }
    else if (querystring('i') == "WEB_HATA") {
        alert("Beklenmedik bir hata oluştu. Lütfen tekrar deneyiniz.");
    }
});

Controller.cs:

[HttpPost]
public ActionResult FileUpload(int id)
{
     try
     {
         return Redirect("/Muvekkil/EvrakYeni?i=FRAME_CLOSE");
     }
     catch (Exception ex)
     {
         return Redirect("/Muvekkil/EvrakYeni?i=WEB_HATA");
     }
}