Javascript Kullanarak Kullanıcının Mobil Cihazdan Giriş Yapıp Yapmadığını Kontrol Etme

Günümüzde websitelerine mobil cihazlardan giriş yapma oranı çok yükselmiş durumda. Bunun için de websitesi gelişiricileri mobil cihazlarda daha okunabilir ve kullanışlı olması açısından, mobil cihazlara özel tasarım geliştirmekteler. Bazı durumlarda kullanıcının mobil cihazdan girip girmediğini kontrol etmemiz gerekebilir. Bunun için aşağıdaki kodu kullanabiliriz:

var isMobile = false; //false olarak tanımlıyoruz
// aygıt tanımlama işlemi
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) 
{
//buraya girdiyse mobil cihazıdır
isMobile = true;
}

Yazıyı Oku

Jquery ile Bir Elementin Spesifik Bir Class'a Sahip Olup Olmadığını Kontrol Etme

Jquery kullanarak bir elementin bir class'a sahip olup olmadığını kontrol etmek için hasClass metodunu kullanabiliriz. Örneğin;

$( "#elementID" ).hasClass( "classIsmi" );

Yazıyı Oku

Jquery ile Dinamik Olarak Oluşturulan Inputlara Event Bind Edilmesi

Web sayfalarımızda bazı kontrolleri dinamik olarak oluşturmak zorunda kalabiliriz. Örneğin ajax sonucunda gelen bir veriyi div tagleri içerisinde body içerisine append etme gibi bir ihtiyaç olduğunu düşünelim. Bu append ettiğimiz içerisinde de input type'ı button olan bazı button'larımız olsun. Bunların click eventlerini yazma ihtiyacımız olabilir. Bunu normal olarak ;

$("#buttonID").click(function(){})
 şeklinde tanımlarsak, bu click eventi çalışmayabilir. Bunu için, dinamik olarak oluşturulan bu buttonların click eventini aşağıdaki gibi bind edebiliriz:

$("#buttonID").on("click", ".myDiv", function(){
   //buttona tıklandığında ne olacağını burda yazabiliriz
});

Yukarıdaki işlem myDiv classı içerisindeki element id'si buttonID olan  inputun click eventidir. Bu event içerisine buttona tıklandığında yapılması istenen işlemleri yazıyoruz.

Yazıyı Oku

Javascript Math Objesi Kullanımı

Javascript Math objesi sayılarla matematiksel işlemleri yapmamızı sağlar. Bu yazıda Math objesinin bazı metodlarını ve sabit değerlerini göreceğiz.

Math.PI;            // 3.141592653589793 pi sayısını döndürür

Math.round(4.7);    // sayıyı yukarı yuvarlar ve 5 döndürür

Math.round(4.4);    // sayıyı aşağı yuvarlar ve  4 döndürür

Math.pow(8,2);      // 8 in karesini alır ve 64 döndürür

Math.sqrt(64);      // 64 ün karekökünü alır ve 8 döndürür

Math.abs(-4.7);     // -4.7 sayısının mutlak değeri olan 4.7 yi döndürür

Math.ceil(4.4);     // yukarı doğru yuvarlanmış en yakın tam sayı olan 5                          döndürür

Math.floor(4.7);    // aşağı doğru yuvarlanmış en yakın tam sayı olan 4                          döndürür

Math.min(0, 150, 30, 20, -8, -200);  // en küçük olan -200 ü döndürür

Math.max(0, 150, 30, 20, -8, -200);  // en büyük olan 150 yi döndürür

Math.random();     // 0 la 1 arası random sayı döndürür (0 dahil 1 değil)

Yazıyı Oku

Javascript ile Console'a Log Basma

Javascript ile zaman zaman kod içersinde bazı değerler gözlemek veya orda neler olup bittiğini anlamak için browser console'una log basmak isteyebiliriz. Bunu aşağıdaki kod parçacığını kullanarak gerçekleştirebiliriz:

//chrome browserda f12 tuşu ile consolu açtığımızda buraya "ilk log yazım" yazan bir log bastırır
console.log("ilk log yazım");

Yazıyı Oku

Javascript Alert Kullanımı

Javascript ile bir uyarı (alert) popup açmak istiyorsak aşağıdaki kod parçasını kullanabiliriz:

//ekrana 11 yazan bir uyarı popupu çıkartır
window.alert(5 + 6);

Yazıyı Oku

Javascript ile Html İçeriğini Değiştirmek

Javascript ile html sayfamızın içerisindeki bir elementin içerisindeki html kodunu değiştirebiliriz. Bunun için o içerisini değiştirmek istediğimiz elementin id bilgisini kullanabiliriz. Aşağıdaki kod parçacığını kullanarak bu işlemi gerçekleştirebiliriz:

//idsi demo olan html elementin içerisine "Merhaba Javascript" yazdırır
document.getElementById("demo").innerHTML = "Merhaba JavaScript";

//idsi demo olan html elementin içerisine www.codefixes.xyz sitesine link verir
document.getElementById("demo").innerHTML = "Codefixes.xyz";

Yazıyı Oku

Javascript ile Bulunan Sayfanın Url'sini Getirme

Javascript ile bulunduğumuz sayfanın tam url bilgisini veya sadece path bilgisini getirmek için aşağıdaki kod parçalarını kullanabiliriz:

var pathname = window.location.pathname; // Sadece pathi döndürür
var url      = window.location.href;     // Full url bilgisini döndürür (kök domainden sonraki kısımı )

Yazıyı Oku

Jquery ile Birden Çok Class'ı Olan Elementi Seçme

Jquery ile birden fazla class'ı olan bir elementi seçmek için aşağıdaki kodu kullanabiliriz:

$('.a.b')

Hem id hem de birden fazla class'ı kullanarak elementi getirmek için aşağıdaki kodu kullanabiliriz:

$('#a.b.c')

Yazıyı Oku

Jquery ile Inputu Disable-Enable Etme

Jquery ile sayfamızda kullandığımız inputları enable veya disable (tıklanabilir veya değil) yapmak istiyorsak aşağıdaki kod parçasını kullanabiliriz:

//jquery 1.6+ versiyonkları için 
$("input").prop('disabled', true);
$("input").prop('disabled', false);

//jquery 1.5 ve alt versiyonları için
$("input").attr('disabled','disabled');
$("input").removeAttr('disabled');

Yazıyı Oku

Jquery ile Dropdown'dan Seçilen Seçeneğin Text ve Değerini Döndürme

Bir dropdownlist içindeki seçeneklerden seçili olanın yazısını aşağıdaki gibi getirebiliriz:

$("#dropdownid option:selected").text();

Seçilen seçeneğin değerini döndürmek istiyorsak da aşağıdaki kod parçasını kullanabiliriz:

$("#dropdownid option:selected").val();

Yazıyı Oku

Javascript ile Sayfayı Yenileme

Javascript kullanarak sayfayı aşağıdaki gibi yenileyebiliriz:

  location.reload();

Yazıyı Oku

Form İçerisindeki İşaretlenen Radio Button'un Değerini Getirme

Form içerisindeki radio buttonlardan işaretli olanın değerini getirmek için aşağıdaki kodu kullanabiliriz:

var isaretliRadioButtonDegeri=$('input[name=radioName]:checked', '#myForm').val(); 

Yazıyı Oku

Jquery ile Checkbox'un Check Olma Durumunu Kontrol Etme

Sayfamız koyduğumuz checkbox'ın işaretli olup olmadığını aşağıdaki gibi kontrol edebiliriz:

//jquery 1.6+ versiyonları için aşağıdakini
$('#elementID').prop('checked')

//jquery 1.5 ve alt versiyonları için aşağıdakini
$('#elementID').attr('checked')

Sonuç olarak bize true veya false değeri dönecektir.

Yazıyı Oku

Jquery Kullanarak Bir Elementin Gizli Olup Olmadığının Bulunması

Zaman zaman web sayfalarımızda bazı ögeleri gizleme ve koşullu olarak gösterme ihtiyacı olabilir. Bunların da gizli olup olmadığını yeri geldiğinde kontrol etmemiz gerekebilir. (show - hide metodları) Bir elementin gizli olup olmadağını aşağıdaki şekilde kontrol edebiliriz:

//element dediğimiz yere istersek id 
//istersek elementin classını verebiliriz
$(element).is(":visible"); 

Yazıyı Oku

Javascript ile Bir String İfadenin Diğerini İçerip İçermediğinin Kontrolü

String.prototype.indexOf metodu bir string içinde diğer stringin pozisyonunu döndürür. Eğer bu string diğerinin içersinde geçmiyorsa -1 döndürür. Dolayısı ile bunu kullanarak aşağıdaki gibi bulabiliriz:

var string = "foo",
    substring = "oo";
if(string.indexOf(substring) !== -1)
{
   //kod buraya girerse string ifadeyi içeriyor demektir
}
else
{
   //kod buraya girerse string ifadeyi içermiyor demektir
}

Yazıyı Oku

Jquery Kullanarak Sayfa Yönlendirmesi Yapmak

Bir kullanıcıyı bir sayfadan bir başka sayfaya jquery kullanarak yönlendirmek istiyorsak aşağıdaki kodlardan birini kullanabiliriz:

// Comment
// HTTP redirect ile aynı davranış için aşağıdakini
window.location.replace("http://stackoverflow.com");

// bir linke tıklandığındaki aynı davranış için aşağıdakini
window.location.href = "http://stackoverflow.com";

Yazıyı Oku