JavaScript

kategorisine ait gönderiler

30 Ekim 2018 Salı günü JavaScript başlığında

Tarayıcının ES6'yı Destekleyip Desteklemediğini Kontrol Etmek

Basit bir şekilde, JavaScript ile kullanıcının tarayıcısının ECMAScript 6'yı destekleyip desteklemediğini kontrol edebilirsiniz.

Aşağıdaki kod try-catch bloğu ile kullanıcının tarayıcısının ES6 desteğini bize verebilir.

var supportsES6 = function() {
  try {
    new Function("(a = 0) => a")
    return true
  }
  catch (err) {
    return false
  }
}()

Bu kod, kullanıcı tarayıcısının ES6 desteğini tamamıyle ve her özelliğiyle doğrulamasa da genel hatlarıyla bize bilgi verebilir.

if (!supportsES6) {
  alert('Tarayıcınız ES6\'yı desteklemiyor')
  window.location.href('/browser-not-supperted')
}

Şu yöntemi kullanarak ES6 kodları içeren JavaScript dosyamızı sayfanın gövdesine dahil edebiliriz.

if (supportsES6) {
  var script = document.createElement("script")
  script.src = "es6-iceren-js-dosyasi.js"
  document.head.appendChild(script)
}
Vue.js Bileşenlerini Sayfa İçinde Doğrudan Kullanmak

30 Temmuz 2018 Pazartesi günü JavaScript başlığında

Vue.js Bileşenlerini Sayfa İçinde Doğrudan Kullanmak

Vue.js bileşenlerini webpack/nodejs aracını kullanmadan sayfa içinde oluşturmak için birkaç yöntem hali hazırda mevcut. Ben kullandığım esnek bir yöntemi paylaşacağım.

Evvela bir Vue bileşeni oluşturalım.

Vue.component('hello', {
  template: '#hello',
  props: ['message'],
})

let app = new Vue({
  el: '#app',
})

Vue bileşenini oluşturduktan sonra, Vue örneğimi oluşturup, #app ID'sine işaret ettik. Vue bileşeni oluştururken vereceğimiz ilk değer, bileşenin adıdır. İkinci değer ise bir obje alır. Burada obje içerisindeki template aşağıda göreceğimiz x-template türündeki script etiketini temsil eder. props (propertys) ise bileşenin alacağı özellikleri tanımlar.

<div id="app">
  <hello message="Merhaba dünya!" />
</div>

<script type="text/x-template" id="hello">
  <p>{{message}}</p>
</script>

Kolay gelsin, iyi çalışmalar.

1 Mayıs 2016 Pazar günü JavaScript başlığında

jQuery ile Dinamik Olarak Oluşturulan Elemente Erişmek

jQuery ile DOM'da bulunan elementlere $('.element') şeklinde kullanarak erişebiliyoruz. Fakat dinamik olarak oluşturulan elementlere erişmek için farklı bir durum söz konusu oluyor. Bunun için şu kullanım yeterli geliyor.

$('body').on('click', '.element', function(){
    console.log($(this).html())
})

Kolay gelsin.

12 Nisan 2015 Pazar günü JavaScript başlığında

Girdi Değerini Büyük Harfe Çevirmek

Merhaba, JavaScript ile girdi değerini büyük harfe çevirme ihtiyacı duydum. Daha önceden de karşılaşmıştım. Bu sefer Angular JS ile gerekti. Ama ben hepsini burada yazacağım.

<input type="text" onKeyup="this.value = this.value.replace('i','İ').toUpperCase()">

Yukarıda özellikle i harfini İ harfine değiştirdim (replace). Çünkü ingilizce karakter olan i, değiştirmediğimde I harfine çevriliyor.

jQuery ile

$(function() {
    $('input').keyup(function() {
        this.value = this.value.replace('i','İ').toUpperCase();
    });
});

Güncelleme: Yazıldıktan sonra değil de, yazıldığı anda büyük harf yazılması için şu da uygundur:

$('.buyukHarf').on('input', function(evt) {
  $(this).val(function (_, val) {
    return val.replace('i', 'İ').toUpperCase();
  });
});

AngularJS ile

$scope.girdi = $scope.girdi.replace("i", "İ").toUpperCase();

Kolay gelsin.