[BİLGİ] Javascript Hakkında Önemli Bazı İpuçları

11/Ağu/15 23:32

Kısayol

Şikayet

Özel Mesaj

Retro
by_Tet

Kayıt Tarihi: 22/Mayıs/2012

Merhabalar uzun zamandır javascript (jquery node.js başta olmak üzere) ile içli dışlıyım.

Şeyhe göre "Biraz yanardönerli web siteleri yapmak istiyorum." diyenlerin tercihi gibi tanımlansa da şu durumda herşeyi javascript olarak görüyorum neden bilmiyorum çok sevdim bu dili :)

Karman çorman olacak bir bilgi birikimi olacak ama aklıma geldikçe yazmayı düşünüyorum güzel bir yazı olacak düzenledikçe ama şuan bunu yazınca bu şekilde olmayacak zamanla :)

Başlıyoruz:

----------------------------------------------------------------------

Null kavramı (bkz. php empty)

Javascript'te null kavramı en çok can yakan konulardan biridir bence. Üşendiğimden google'a null yazıp türkçesini yazmaya gerek bile duymuyorum olmayan değer demek işte.

Sıkıntı şurada. .length eki ile bir object'in veya dizinin sayısını bulabiliyoruz fakat eğer değişkenimiz null ise sıkıntı çıkıyor ve hooop tüm çalışma duruyor.

Veya şu açıdan bakalım bir diziyi tertemiz ettik yani "" şeklinde tanımladık bu sefer de null olarak görünmesini ayarladığımız fonksiyonumuz bunu tanımıyor.

Sahi o fonksiyon basit bir halle şu

function isNull(str){
   if(typeof str === "undefined"){
           return true;
  } else {
           return false;
  }
}

Tabi bunu typeof olarak değilde str == null şeklinde de yapabiliriz veya direk if(str) de yapabiliriz. fakat tam istediğimiz olmuyor. Çok uzatmadan işimize yarayacak fonksiyonu veriyorum: (kaynak: http://phpjs.org/functions/empty/ )

function empty(mixed_var) {
  //  discuss at: http://phpjs.org/functions/empty/
  // original by: Philippe Baumann
  //    input by: Onno Marsman
  //    input by: LH
  //    input by: Stoyan Kyosev (http://www.svest.org/)
  // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // improved by: Onno Marsman
  // improved by: Francesco
  // improved by: Marc Jansen
  // improved by: Rafal Kukawski
  //   example 1: empty(null);
  //   returns 1: true
  //   example 2: empty(undefined);
  //   returns 2: true
  //   example 3: empty([]);
  //   returns 3: true
  //   example 4: empty({});
  //   returns 4: true
  //   example 5: empty({'aFunc' : function () { alert('humpty'); } });
  //   returns 5: false

  var undef, key, i, len;
  var emptyValues = [undef, null, false, 0, '', '0'];

  for (i = 0, len = emptyValues.length; i < len; i++) {
    if (mixed_var === emptyValues[i]) {
      return true;
    }
  }

  if (typeof mixed_var === 'object') {
    for (key in mixed_var) {
      // TODO: should we check for own properties only?
      //if (mixed_var.hasOwnProperty(key)) {
      return false;
      //}
    }
    return true;
  }

  return false;
}

Kendi yazdığımı koymak isterdim ama uğraşmak istemedim ve çok hoşuma gitti bu fonksiyon :) Aslında kütüphaneyi epeydir kullanıyorum tavsiye ederim php.js..

----------------------------------------------------------------------

Javascript ile REGEXP çok kolay!

Aslında hemen her javascriptle uğraşmış kişi biliyordur ama yine de eklemek istedim.

Aklınızda bulunsun diye.. bir değişkende regular exp. ile bazı özel tanımlı sözcükleri harfleri karakterleri seçip eleyebilirsiniz. Javascript bunu yapıyor üstüne bir diziye ekliyor. Bulamazsa direk null a atıyor.

var kelime = "bulunması gereken kelimeler listesi olsun tarikat turan gibi kelimeler de";

var es = kelime.match(/TURAN|tarikat|kelime/ig);

console.log(es);

//çıktı şöyle olacaktır: turan,tarikat,kelimeler

Burada farketmemiz gereken i ve g flaglariyle (aslında g yani global flagi gereksiz sayılabilir sonuçta değişken tek satır) büyük küçük ve tam veya eksik karakterlere dikkat etmeden eşleştirme yapmış olmamız.

Ve regex ifademizi kesinlikle tırnak içerisinde yazmadık.

Tüm sonuçlarımız bir arraye atandı yani gönül rahatlığıyla bunu kullanabiliriz. Bulamasaydı da yukarıdaki null denetlemesiyle bunu çekebilirdik herşey bukadar basit. Kim korkar forumlardaki linkleri otomatik işaretlemeden veya eklenilecek bir başlığa sansür uygulamaktan :))

----------------------------------------------------------------------

Lanet olası INTERVAL'LER

Aynen yazıldığı gibi okumamdan mı bilmiyorum benim en çok başıma bela olan zımpırtı budur javascriptte. Neden baş belası oldu? Adam akıllısını öğrenmeden akıllıca kodlamadan yaptığım tüm interval'ler sitede zaman geçtikçe sapıtmaya başladı.

Bu zımpırtı ne işe yarar? Kısaca belli bir kod bloğunu belirtilen zamanlarda tekrar çalışmasına yarar.

E harikaymış neresi zor? Eğer siz bu intervalin içerisine kod bloğu yazmaktan ziyade büyük bir fonksiyon yazmak isterseniz tekrar tekrar tetiklemede intervali tekrar tetikliyor mu kontrol etmezseniz sonsuz bir döngüye giriyor. Atıyorum 2 saniyede bir yenilenmesi gereken bir kod bloğu 2 saniyede 1, 4 saniyede 2, 6 saniyede 4, 8 saniyede 8, 10 saniyede 16 kez tekrar ederek sizin planladığınızın dışına çıkıyor (dikkat edilirse ilk 8 saniye pek birşey anlaşılmayacaktır ama sonrasında sapıtıyor 2^n olarak arttığı için)

Ne yapmamız lazım? Aslında çok basit tetiklenmesini istediğimiz intervali bir değişkene atayıp ona göre kontrol etmemiz gerekiyor. Teorik kısmını çok uzattık (zaten en sevmediğim kısım pek anlatmayı beceremiyorum :( ) Pratik kısma geçelim;

Alın size tıpkı anlatmak istediğim gibi hazırlanmış insanı çıldırtan bir örnek: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_param

Koskoca w3schooldaki insanların bile aklına gelmediği veya görmezden geldiği bu olayı anlamak için 2-3 kez start tuşuna basın. Sonra durdurabiliyorsanız durdurun o hello yazıcıklarını tutabilene aşk olsun. Bunun sebebi çalışıp çalışmadığını denetlemeden tekrar tekrar intervali çalıştırmak ve en sonunda tek bir değişkenle tarayıcının birden fazla kod bloğunu çalıştırması sonucu o çalışan işlemleri durduramamak. Yani stopInterval ile durdurabiliyorsunuz fakat yalnızca 1 tane. Çünkü 1 değişken 1 kod bloğunu temsil eder. Ama tarayıcı o 1 değişkene onlarca kod bloğunu atayıp saptırabilir.

<!DOCTYPE html>
<html>
<body>

<p>Click the Start button to output "Hello" once every 2 seconds.</p>

<p>In this example, we also output the parameters that were passed to the alertFunc() function (does not work in IE9 and earlier).</p>

<button onclick="myStartFunction()">Start</button> <button onclick="myStopFunction()">Stop</button>

<p id="demo"></p>

<p id="demo2" style="color:red;"></p>

<script>
var myVar;
var isWork = false;

function myStartFunction() {
  if(!isWork){
    myVar = setInterval(alertFunc, 2000, "First parameter", "Second parameter");
    isWork = true;
  } else {
    return false;
  }
}

function alertFunc(param1, param2) {
    document.getElementById("demo").innerHTML += "Hello ";

    document.getElementById("demo2").innerHTML = "Parameters passed to alertFunc(): <br>" 
    + param1 + "<br>" + param2 + "<br>";
}

function myStopFunction() {
    clearInterval(myVar);
    isWork = false;
}
</script>

</body>
</html>

İşte benim çözüm önerim bukadar basit. bir isWork değişkeni tanımlayacaksınız. Sonra buna göre çalışıyor mu çalışmıyor mu deneyeceksiniz. Peki onlarca intervalli bir script yazacaksınız hepsine farklı bir değer mi atamalısınız? Hayır tabiki de

var isWorkArray = [];

function isWork(who){
    if(isWorkArray.indexOf(who) != -1)
    {  
       return true;

    } else {
       return false  

    }
}

function toWork(who,check){
    if(check){
      isWorkArray.push(who);
    } else {
      var index = isWorkArray.indexOf(who);
      if(index!=-1){
         isWorkArray.splice(index,1);
      }
    }
}

Az önce yazdığım bu kod bloğunu denemedim ama muhtemelen çalışır. Olay şu şekilde işliyor; isWork fonksiyonu ile isim verdiğiniz o interval çalışıyor mu onu kontrol edersiniz true veya false olarak sonuç dönderir. toWork ise o intervali true veya false şeklinde değer atayarak çalışıp çalışmadığını kontrol edersiniz. Yani bi önceki kod bloğunda yaptığımız gibi durdurduğumuzda toWork('ilkTekrar',false) dememiz; çalıştırdığımızda da toWork('ilkTekrar',true) dememiz yeterli olacaktır. Böylece isterse 100 tane interval kullanın hata veya bir sapıtma gözlemezsiniz..

----------------------------------------------------------------------

Bir sonraki problem/çözüm yazımı da ilerleyen zamanlarda ekleyeceğim hoşçakalın

(1 yazı eklendi js regexp)

(1 yazı daha eklendi lanet olası intervaller)

son güncelleme: 12.08-12:40

More about Hangi Programlama Dilini Öğrenmeliyim Sorusunun cevabı on:
Hangi Programlama Dilini Öğrenmeliyim Sorusunun cevabı"

by_Tet tarafından 12/Ağu/15 12:59 tarihinde düzenlenmiştir

iyibu! yeniden..

Alıntı yap

12/Ağu/15 00:39

Kısayol

Şikayet

Özel Mesaj

Retro
by_Tet

Kayıt Tarihi: 22/Mayıs/2012

Hem up olsun hem de ilk mesajı almış olayım konu editleme hakkım giderse diye..

iyibu! yeniden..

Alıntı yap

12/Ağu/15 02:31

Kısayol

Şikayet

Özel Mesaj

lepusmorris

Kayıt Tarihi: 31/Mart/2007

javascript, jquery, ajax çok hojdur ama benena =/
https://www.youtube.com/watch?v=d7iY-j50LY4

can sıkıntısından ölüyorum ya -,-

eline sağlık hocam.

..

Alıntı yap

12/Ağu/15 02:35

Kısayol

Şikayet

Özel Mesaj

nurulmac11

Kayıt Tarihi: 04/Ağustos/2012

sagolasin hocam. biraz da nodejs anlatsan ? ozellikle halka sunma olayini pek anlayamadim. yani port falan cozemedim bi turlu.

black implies white, self implies other, life implies death.

Alıntı yap

12/Ağu/15 07:36

Kısayol

Şikayet

Özel Mesaj

RockZs

Kayıt Tarihi: 30/Haziran/2002

teşekkürler. devamını merakla bekliyorum.

Alıntı yap

12/Ağu/15 10:32

Kısayol

Şikayet

Özel Mesaj

rappermcs

Kayıt Tarihi: 04/Ekim/2002

Emeğine sağlık hocam. Bu gibi deneyimlenen bilgiler çok degerli.

Takipteyim..

Paslanmış bir uygulama geliştirici.. ##

Alıntı yap

12/Ağu/15 12:06

Kısayol

Şikayet

Özel Mesaj

Retro
by_Tet

Kayıt Tarihi: 22/Mayıs/2012

nurulmac11 bunu yazdı

sagolasin hocam. biraz da nodejs anlatsan ? ozellikle halka sunma olayini pek anlayamadim. yani port falan cozemedim bi turlu.

O da aklımda hocam fakat onunla ilgili yazacağım bilgiler muhtemelen yalnızca bir site için açmak için ipuçları gibi olacak. Node.js bilgime çok da güvenmiyorum açıkcası..

iyibu! yeniden..

Alıntı yap

12/Ağu/15 12:43

Kısayol

Şikayet

Özel Mesaj

Retro
by_Tet

Kayıt Tarihi: 22/Mayıs/2012

Yeni yazı eklendi Lanet olası INTERVAL'ler :)

iyibu! yeniden..

Alıntı yap