Js küçük notlar

JavaScript numbers
Büyük ve küçük sayılar bilisimsel veya üstsel gösterimle yazılabilir.

  var x = 1453e5;   // 145300000
  var y = 1453e-5;  // 0.01453
  alert(y);

JavaScript sayı veri türünde 15 haneli ondalıksız sayı yazılabilir.

  var x = 999999999999999;   // 999999999999999
  var y = 9999999999999999;  // 10000000000000000
  alert(y);

JavaScript sayı veri türünde 17 haneli ondalıklı sayı yazılabilir.

Ancak kayan nokta aritmetiği 100% doğru değildir.

  var x = 0.2 + 0.1;   // 0.30000000000000004
  alert(x);

  //Bu sorunu çözmek için aşağıdaki yöntem kullanılabilir.
  var x = (0.2 * 10  + 0.1 * 10) / 10;   // 0.3
  alert(x);

Sayıları onaltılık, sekizlik ve ikilik sayı sistemine dönüştürmek için toString() fonksiyonu kullanılır.

  var x = 1453;
  alert(x.toString(16)); // 5ad
  alert(x.toString(8));  // 2655
  alert(x.toString(2));  // 10110101101

Javascript Infinity
JavaScript ile sonsuzluk-sınır değerini ifade etmek için Infinity veya -Infinity anahtar kelimesi kullanılır.

Aşağıdaki örnek JavaScript ile yazılabilen sayı sınır değerine kadar çarpma işlemi yapacaktır.

  var x = 2;
  while(x != Infinity) {
    x = x * x;
    alert(x);
  }

Bir sayının 0’a bölünmesi Infinity veya –Infinity değeri döndürür.

  var x = 10 / 0;   // Infinity
  var y = -10 / 0;  // -Infinity

JavaScript Infinity anahtar kelimesinin veri türü sayıdır.

alert(typeof Infinity);

JavaScript NaN – Not a Number
JavaScript ile bir değişkenin sayı olup olmadığını NaN anahtar kelimesiyle öğrenebiliriz.
Sayısal bir değer sayısal olmayan bir değerle işlem yapılırsa JavaScript NaN sonucunu verir.

alert(100 / "Yusuf");

Metin veri türü içindeki değer sayı olursa sonuç sayı değeri olacaktır.

alert(100 / "10");

Değişkenin sayı olup olmadığını bulmak için isNaN() fonksiyonu kullanılır.

  var x = 100 / "Yusuf";
  alert(isNaN(x));

JavaScript NaN anahtar kelimesini veri türü sayıdır.

alert(typeof NaN);

JavaScript tarih nesnesinden yıl, ay, gün, saat, dakika .vb tarih bilgisini almak için çeşitli fonksiyonlar vardır.

Fonksiyon Açıklaması
getDate() Ayın gününü verir (1-31)
getDay() Haftanın gününü verir (0-6)
getFullYear() Yılı dört basamak olarak verir (yyyy)
getHours() Saati bilgisini verir (0-23)
getMilliseconds() Milisayine bilgisini verir (0-999)
getMinutes() Dakika bilgisin verir (0-59)
getMonth() Ay bilgisini verir (0-11)
getSeconds() Saniye bilgisini verir (0-59)
getTime() Tarihi 1 Ocak , 1970’dan itibaren milisaniye olarak verir

JavaScript getDay() fonksiyonu haftanın kaçıncı gün (0-6) olduğu bilgisini verir.

  var tarih = new Date();
  alert(tarih.getDay());

JavaScript haftanın ilk gününü Pazar kabul eder.
Haftanın günlerini bir diziye atarak getDay() fonksiyonu ile haftanın gün ismini alabiliriz.

  var tarih = new Date();
  var gunler = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
  alert(gunler[tarih.getDay()]);

JavaScript tarih ayarlamak

Fonksiyon Açıklama
setDate() Ayın gününü ayarlar (1-31)
setFullYear() Yılı ayarlar (ay ve gün isteğe bağlı eklenebilir)
setHours() Saat bilgisini ayarlar (0-23)
setMilliseconds() Milisaniye bilgisini ayarlar (0-999)
setMinutes() Dakika bilgisin ayarlar (0-59)
setMonth() Ay bilgisini ayarlar (0-11)
setSeconds() Saniye bilgisin ayarlar (0-59)
setTime() Tarihi 1 Ocak , 1970’dan itibaren milisaniye olarak ayarlar

JavaScript setFullYear kullanımı
JavaScript setFullYear() fonksiyonu yılı ayarlar. Örnekte tarih 25 mart 2001 olarak ayarlanmıştır.

  var tarih = new Date();
  tarih.setFullYear(2001, 2, 25);
  alert(tarih);

JavaScript tarihe gün eklemek
JavaScript setDate() fonksiyonu ile tarihe gün ekleme işlemini yapabiliriz. Örnekte tarihe 15 gün eklenmiştir.

  var tarih = new Date();
  tarih.setDate(tarih.getDate() + 15);
  alert(tarih);

Veya instanceof operatörü ile değişken türünü karşılaştırabiliriz.

  var liste = ["Elma", "Armut", "Portakal"];
  alert(liste instanceof Array);

async/await ES7 – Javascript

ES6’da yield’ı asenkron işleri bekletmek için kullanabiliyorduk. ES7’de bu iş için await keywordu bulunmaktadır.
Hemen örneğimize geçelim, console slm yazdırıp daha sonra 3sn bekletip by yazdıran methodlarımızı aşağıdaki gibi yazabiliriz.

Not: ES7 tüm browserlar desteklememektedir özellikle Explorer.

function bekle3sn(){
	return new Promise(function(resolve){
		setTimeout(resolve, 3000);
	})
}

async function SelamveBy(){
	console.log("slm");
	await bekle10sn();
	console.log("by");
}

SelamveBy();

Promiseler basitçe 4 parçadan oluşmaktadır.

  1. Öncelikle bir new Promise diyerek yeni bir promise yaratılır.
  2. Bu Promise ya Resolve edilir ve işlem tamamlanır yada Reject edilir.
  3. Daha sonra bu Promise’i kullanırken .then fonksiyonu içinde Resolve ve Reject durumlarını handle eden 2 fonksiyon verilir.
  4. Eğer herhangi bir exception throw edilirse, .catch fonksiyonu ile yakalanıp handle edilebilir.
  5. En önemlisi bir Promise geriye bir Promise return edebilir, buna Promise Chaining denir.
//Genel Kullanım
var p1 = new Promise( (resolve, reject) => {  
  resolve('Success!');
  // or
  // reject ("Error!");
} );

p1.then( value => {  
  console.log(value); // Success!
}, reason => {
  console.log(reason); // Error!
} );

JavaScript Use Strict neden kullanılır

JavaScript “use strict” kullanım amacı, kodun katı kurallı olarak çalıştırılacağını belirtir.

Katı kurallı kullanımda bir değişken oluşturulmadan kullanmaya izin vermez.

JavaScript kodlarının katı kurallı olarak yorumlanması için kod veya fonksiyon başına “use strict”; yazmak yeterli olacaktır.

Katı kural tanımı kod başına yazılırsa tüm kodlar katı kurallı olarak çalışacaktır.

"use strict";
a = 2;
b = 3;
c = a + b;
alert(c); // Değişken oluşturulmadan kullanıldığından hata verir.
m = 45;
alert(m);
hesapla();

function hesapla() {
"use strict";
a = 2;
b = 3;
c = a + b;
alert(c); // Değişken oluşturulmadan kullanıldığından hata verir.
}

Neden use strict
JavaScript katı kural tanımı “güvenli” kod yazmak için kullanılır.

Katı kural tanımı daha önceki hatalı kullanımın önüne geçer.

Örnek olarak JavaScript’te değişken adını yazarak bir değişken kullanabilirsiniz. Ancak katı kural tanımı ile değişken oluşturmadan değişken kullanmak hata verecektir.

JavaScript’te nesne özelliği yazılamaz olan özelliklere değer ataması yapıldığında hata vermeyecektir.

Katı kural tanımında yazılamaz olan bir özelliğe, yalnızca okunabilen bir özelliğe, olmayan bir özelliğe, olmayan bir değişkene ve olmayan bir nesneye yapılan atamalar hata verecektir.

Bazı kuralları;

*Değişken oluşturulmadan kullanmak hata verir.

*Değişken ve nesnenin silinmesine izin verilmez.

*Fonksiyon silinmesine izin verilmez.

*Fonksiyona aynı parametrenin iki defa yazılmasına izin verilmez(a(a1, a1)).

*Kaçış karakterlerine izin verilmez.

*Sadece okunabilir bir özelliğe değer atamaya izin verilmez.

*Sadece değer döndüren özelliğe değer atamaya izin verilmez.

*Silinemez bir özelliğin silinmesine izin verilmez.

*Değişken ismi olarak “eval” kullanılmasına izin verilmez.

*Değişken ismi olarak “arguments” kullanılmasına izin verilmez.

*JavaScript with kullanımına izin verilmez.

*JavaScript eval fonksiyonu ile oluşturulmuş değişkenlerin kullanımına izin verilmez.

Anahtar kelimelerin kullanımına izin vermez;

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

Javascript Console ekranın küçük karalamalar ;)

Console ekranına geçmek için F12 tuşunun kullanabilirsiniz.

String Interpolation – Console ekranında stilli uyarılar gösterme
%s: string ifadeler
%i: integer ifadeler
%c: custom ifadeler

console.todo = function(msg) {
console.log('%c %s %s %s', 'color: yellow; background-color: black;', '–', msg, '–');
}

console.important = function(msg) {
console.log('%c %s %s %s', 'color: brown; font - weight: bold; text-decoration: underline;', '–', msg, '–');
}

console.todo('This is something that’ s need to be fixed');
console.important("This is an important message");

Liste/Array gibi değerlerin console ekranında tablo olarak gösterilmesi

var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

Timer kullanarak js performansını bulma

console.time('Timer1');

var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}

console.timeEnd('Timer1');

Console temizleme
Console.Clear();

JS .min dosyalarını Unminify olarak görme
ÖR: Chrome browser için F12 tuşu ile console açılır ve soruce sekmesinden her hangi bir min.js file açılır ve pretty print butonu ile kodu düzenli bir şekilde görüntüleyebilirsiniz.

JavaScript Module ve Patternler

Yazılım geliştirirken kullandığımız Design Patterns ya da Tasarım Kalıplarının Javascript gibi OOP (Object Oriented Programming) özellikleri güçlü bir dil ile kullanmak, hem yapmış olduğumuz HTML 5 tabanlı mobil uygulamalarda hem de web uygulamalarında çok daha profesyonel, yönetilebilir ve okunabilir bir kod yazmanızı sağlayacaktır.

        //Object Literal
        var myObject = {
             get: function myMethod() {
                 return this.val;
             },
             val: 42
         };

        //Module Pattern => sadece isim uzayı içerisinde fonksiyonlar çalışır.
        myNameSpace = function () {
            var current = null;
            function init() { alert("init"); }
            function change() { alert("change"); }
        }();
        //myNameSpace.init() şeklinde çağırmaya kaltığımızda hata ile karşılaşacağız. Zira bu kullanım ileinit, change ve verify fonksiyonları artık public değil birer private fonksiyon haline geldi. Dolayısı ile myNameSpace kapsamı dışında kullanılamaz.

        myNameSpace = function () {
            var current = null;
            function init() { alert("init"); }
            function change() { alert("change"); }
            function verify() { alert("verify"); }
            init();
        }();
        myNameSpace.init();
        //Peki bu fonksiyonlardan istediklerimizi dışarıdan erişebilir hale getirelim.

        myNameSpace = function () {
            var current = null;
            function init() { alert("init"); }
            function change() { alert("change"); }
            function verify() { alert("verify"); }
            return {
                init: init,
                change: change
            }
        }();
        myNameSpace.init();

        //Böylelikle fonksiyon tanımlarını return’ün dışına taşıyıp, return içerisini yalnızca tanımlardan oluşturarak çok daha kullanışlı ve okunabilir bir kod parçası elde ettik.
        //Kodumuzun return bölümünde tanımlama metni olarak kullandığımız init ve change alanlarına aşağıdaki gibi farklı isimlerde verebiliriz. Bu şekildeki kullanıma da Revealing Module Pattern adını veriyoruz.

        //Revealing Module Pattern
        return {
            basla: init,
            degistir: change
        }
        //Buna göre çağırma şeklimizde aşağıdaki gibi olacaktır.

Jquery Replace kullanımı

// değeri div'den aldık
var text = $('div.text').text();

// a değerlerini b olarak yaptık
text = text.replace(/a/g, 'b');

// ve değişmiş halini tekrar nesneye değer olarak atadık
$('div.text').text( text );

replace içerisinde /g ifadesi eşleşen tüm değerlerin değiştirileceğini ifade ediyor. Aksi halde sadece ilk eşleşen karakteri değiştirecektir.

Javascript Iframe Engelleme

Sitemizi başka bir domaindeki başka bir sayfanın iframe’inde çalışmasını engellemek isteyebiliriz,
Bunun için aşağıdaki JavaScript kodunu websitenizde etiketinin altına ekleyerek sayfanızın iframe yapılmasını önleyebilir ve XSS saldırılarını kısmen engelleyebilirsiniz.

if(self.location == top.location || top.location.toString().indexOf("siteadresi.com") != -1  || top.location.toString().indexOf("siteadresi2.com") != -1){
window.location.href='sayfaadresi';
}

Bu kodu .htaccess dosyasına ekledikten sonra herhangi birisi sitenizi iframe ile çağırmak isterse boş sayfa gözükecektir.

Header set X-Frame-Options DENY

jquery en çok kullanılan seçiciler-filtreler

Jquery ile aşağıdakiler gibi vs işlemler yapılabilir.
-ismi “iletisim” olan nesneler üzerinde işlem yap ,
-id’si “kaydet” adında butonlara işlem yap,
-index numarası “3” den küçük labelleri seç ya da üzerinde işlem yap,
-listeler içinde çift index numaralı nesneleri seç,
-checkbox kutularından “seçili” stiline sahip ilk nesneyi seç ya da üzerinde işlem yap

jquery seçiciler-filtreler

Metod Açıklama
$(a[name]); name özelliği olan linkleri seçer.
$(a[name=”anasayfa”]); name özelliği “anasayfa” olan linkeri seçer.
$(a[name^=”ana”]); name özelliği “ana” ile başlayan linkeri seçer.
$(a[name$=”sayfa”]); name özelliği “sayfa” ile biten linkeri seçer.
$(a[name!=”anasayfa”]); name özelliği “anasayfa” olmayan linkeri seçer.
$(a[name*=”say”]); name özelliği içinde “say” ifadesi geçen linkeri seçer.
Filtre Açıklama
:first index numarası 0 olan nesneyi seçer.İlk nesneyi seçer.
:last en son index numarasına sahip olan nesneyi seçer.Son nesneyi seçer.
:not belirtilen özelliğin değilini seçer.
:even Çift index numarasına sahip olan nesneleri seçer.0,2,4,6 gibi.
: odd tek index numarasına sahip olan nesneleri seçer.1,3,5,7 gibi.
:eq(4) 4 index numarasına sahip olan nesneyi seçer
:gt(4) 4 index numarasından büyük olan nesneleri seçer
:lt(4) 4 index numarasından küçük olan nesneleri seçer