Etiket: JavaScript

Kategoriler
Teknik

JavaScript’te Reaktiviteye Pratik Alternatif: Alpine.js

AlpineJS, HTML içinde kullanabilen, reaktif olarak DOM işlemleri yapabileceğiniz ufak bir framework.

Şunu sayfaya dahil edip başlayabilirsiniz:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
  1. Örnek:
<div x-data="{message: 'Hello world!'}">
  <h1 x-text="message"></h1>
  <input type="text" x-model="message">
</div>

  1. Örnek:

    <div x-data="{items: ['first', 'second']}">
<template x-for="item in items" :key="item">
    <div>
        <span x-text="item"></span>
    </div>
</template>
</div>

  2. Örnek:

    <div x-data="{open: false, toggle() { this.open = !this.open }}">
<button @click="toggle()">
    <span x-text="open ? 'Kapat' : 'Aç'"></span>
</button>
<div x-show="open">
    Görüntülenecek olan içerik
</div>
</div>

Daha detaylı kullanımına dökümantasyonundan göz atabilirsiniz. Bazı eksiklikleri var yeni olmasından dolayı ama bu haliyle bile birçok şeye çözüm olabiliyor.

Kategoriler
Teknik

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

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)
}
Kategoriler
Teknik

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

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 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.

Kategoriler
Teknik

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.