Bilişim Günlüğü: Eylül 2012

30 Eylül 2012 Pazar

Web master olarak bir mutfakta çalışan ve veya kendi için çalışan arkadaşlarımızın yayına aldıkları sitelerde sade HTML tasarım olsada az biraz içerisinde css serpiştirilmiş olsada hep eksik bir yanlarının olduğu bilinmekte.

Bu eksiklik genellik ile tasarım için kullanılan görsellerden, yayındaki sitede kullanılan FONT lara kadar uzanmakta, burada bir kez daha hatırlamak için Google web font kullanılarak sitemizde ziyaretçimizin font klasöründe olmayan FONTLAR ile şık tasarıma bir adım daha yaklaşalım örneğini inceleyelim:

1. ADIM sitemizde aşağıdaki link üzerinden kullanmak istediğimiz FONT seçimi
http://www.google.com/webfonts bu link üzerinden yaklaşık 506 adet GOOGLE WEB FONT arşivine ulaşacaksınız.

2. ADIM sitemizde kullanmak istediğimiz font ilgisindeki css kodlarını ilgili font listesindeki Quick-use linki üzerinden ulaşmak.

3. ADIM inline ve veya dışarıdan @import çağırarak sitemizde bu GOOGLE web fontun kullanımı sağlamak.

Örnek Kullanım inline olarak seçilmiş Capriola fontu kullanımı içindir,
Sitelerinizin sayfalarında kullanmanız dileği ile
HTML-Kodu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 <title>Google WEB FONT Kullanımı ve Typography </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
 <link href='http://fonts.googleapis.com/css?family=Capriola' rel='stylesheet' type='text/css'>

</head>
<body>
  <span> http://www.bahadirakkoy.com.tr </span>
  <span  style="font-family: 'Capriola', sans-serif;"> http://www.bahadirakkoy.com.tr</span>
</body>
</html>

Ps: "Bu inline kullanımda yazı karakter boyutu ve rengi ile oynayabilirsiniz"

<== Örnek Çalışma ==>

http://www.bahadirakkoy.com.tr http://www.bahadirakkoy.com.tr

29 Eylül 2012 Cumartesi

Google Drive Nedir ve Nasıl Kullanılır?

Google’dan yepyeni uygulama! Google Drive!
Google’ın en yeni bulut depolama hizmeti Google Drive hizmete girdi.

Google Drive, kullanıcılarına ücret karşılığı 1TB’a kadar bulutta veri depolama imkanı sunacak.

Kullanıcılarına iş arkadaşlarıyla ortak çalışma, paylaşma ve her türlü verilerini depolama imkanı sunan Google Drive hizmete girdi. İster arkadaşınızla ortak bir araştırma projesi üzerinde çalışıyor olun, isterseniz de iş arkadaşlarınızla birlikte bütçe takip edin; tüm bun işlemler Drive üzerinde yapılabilecek. Videolarınızı, fotoğraflarınızı, belgelerinizi, PDF dosyalarınızı ve çok daha fazlasını Drive’a yükleyip istediğiniz yerden bilgilerinize ulaşabilirsiniz.

Google Drive kullanıcılarına şu imkankarı sunacak:
Yaratın ve ortaklaşa çalışın: Belgeleriniz, sunumlarınız ve tablolarınız üzerinde ekip arkadaşlarınızla eş zamanlı olarak çalışabilmeniz için Google Documents, Google Drive’a entegre edildi. İçeriğinizi paylaşmayı kabul ettiğiniz herkesle PDF, resim, video ve benzeri tüm dosyalar üzerinde birlikte çalışabilir, çalıştığınız içerikler üzerinde yorum yapabilir ve başkalarının paylaştığınız içerik üzerindeki yorumlarının size bildirim olarak gelmesini sağlayabilirsiniz.

Her şeyi güvenle saklayın ve istediğiniz yerden ulaşın (özellikle bilgisayarınızdan uzaktayken):
Her şeyiniz artık ‘orada’. Tüm dosyalarınıza artık her yerden ulaşabilirsiniz – İnternetten, evinizden, ofisinizden ya da isterseniz koşarken mobil cihazınızdan- Drive’ı Mac’inize, PC’nize yükleyebilir, Drive Uygulamasını Android telefonunuza veya tabletinize indirebilirsiniz. Drive Uygulaması’nın iOS cihazlarda da kullanılabilmesi için çalışmalarımıza devam ediyoruz. Ayrıca platform ayrımı olmadan; tüm görme engelli kullanıcılar Drive’a “ekran okuyucu” ile ulaşabilecekler.

Her şeyi arayın: Anahtar kelimenizle aramanızı gerçekleştirin, dosya tipine, dosya sahibine ve çok daha farklı alternatife göre sıralayın. Drive, “Optik Karakter Algılama” (OCR) teknolojisi ile görsel dosyaların içindeki yazılara ulaşarak, arama yapmanıza olanak sağlıyor. Aynı zamanda görsel algılama sistemi ile Büyük Kanyon gezinizin fotoğraflarını [büyük kanyon] yazarak arayabilir ve çektiğiniz vadi resimlerine aradığınız an ulaşabilirsiniz.

5GB BEDAVA
Google Drive’da size sunulmuş 5GB’lık alanı hemen ücretsiz kullanmaya başlayabilirsiniz. Bu alan, size yaz tatilinizde çektiğiniz yüksek çözünürlüklü fotoğrafları veya kariyerinizin en büyük teklif sunumunu saklamaya yeteceği gibi, üzerinde çalıştığınız yeni kitabınızı taslağını da saklamanıza olanak sağlıyor. Aylık 2,49 dolar ödeyerek 25GB, 4,99 dolar ödeyerek 100 GB ve 49,99 dolar ödeyerek 1TB veri alanına sahip olabilirsiniz. Ücretli hesabı tercih ettiğinizde, Gmail hesabınız da 25GB’a yükselmiş olacak.

Drive, kullanıcılara daha iyi bir Google tecrübesi yaşatmak ve diğer ürünlerimiz ile bir bütünlük içerisinde çalışmak üzere tasarlandı. Doğrudan Drive’dan Google+ hesabınıza içerik aktarabilirsiniz.

Kullanıcılar, yakın zamanda Gmail’den gönderecekleri e-postalara Drive’dan istedikleri dosyayı ekleme imkanına sahip olacak. Google Drive aynı zamanda açık bir platform. Google buradan yola çıkarak, faks yollayabilmek, video düzenleyebilmek ve web sitesi şablonları tasarlayabilmek için Drive kullanımı konusunda birçok üçüncü parti ile birlikte çalışıyor. Bu uygulamaları kullanabilmek için Chrome Web Mağazası’nı ziyaret etmek yeterli.

Drive’ı kullanmaya hemen bugün drive.google.com/start adresinden başlayabilirsiniz.

28 Eylül 2012 Cuma

Dropbox Nedir ve Nasıl Kullanılır?

Son birkaç yılın en önemli teknolojilerinden biri şüphesiz ki "Cloud Computing". Bu teknolojininde en güzel kullanımlarından biri ise Dropbox. Dropbox'u en kısa tanımıyla dosya paylaşım platformu olarak tanımlayabiliriz.

Artık bilgisayar kullanıcıları dosyalarına her türlü platformdan online olarak ulaşmak istiyorlar. Eğer birden çok bilgisayar kullanıyorsanız, bu dosyaların senkronizasyonu günümüzde önemli bir hal aldı.
Örneğin, bilgisayarınızdaki bir dosyaya, anında telfonunuzdan ulaşabilmek çok sık ihtiyaç duyulan bir özellik haline geldi.

Bu senkronizasyonu ise Dropbox aracılığıyla yapmak hem çok kolay hemde ücretsiz (2 GB'a kadar). Öncelikle yapmanız gereken Dropbox'un sitesine girip bir account yaratıyorsunuz. Daha sonra ise siteden bir uygulama indiriyorsunuz. (14 MB kadar) Uygulama yüklenirken size belirli bir dosya yeri soruyor. Kurulum bittikten sonra o dizindeki (folder) bütün dosyalar otomatik olarak internetle senkronize olacak. Daha sonra bu dosyalarınızı internetten Dropbox sitesine girerek de görebilirsiniz.

Siteden iPhone, Blackberry, Android için olan uygulamaları telefonunza yükleyerek dosyalarınıza mobıl olarak erişim sağlayabilmenizde mümkün.

Ücretsiz olarak 2GB yer sunan dropbox kapasitenizi isterseniz ücretli olarak artırabilmeniz mümkün. Kapasitenizi artırmanın bir başka yolu ise arkadaşlarınıza Dropbox'u önermek. Her getirdiğiniz kullanıcı için 250 MB yer kazanıyorsunuz (8 GB'a kadar).

Dropbox.com

27 Eylül 2012 Perşembe

Jquery .FadeIn()

Merhaba arkadaşlar bu dersimizde jquery .FadeIn() özelliğini anlatacağım. .FadeIn() özelliği veridiğimiz nesneyi belirlediğimiz sürede flashlı bir şekilde görünür hale getirir. Örn. "lk" Id'li linke tıkladığımızda oluşturduğumuz "lkdv" Id'li divi görünür hale getirelim.

Body tagları arasında link ve div tagımızı oluşturuyoruz.

<a href="javascript:void(0);" id="lk">tıklayın..</a>
<div id="lkdv" style="width:200px; height:100px; background-color:red; display:none;">&nbsp;</div>

Linkimizi oluşturduk ve "href " parametresini tanımsız olarak girdik yani tıklandıgında bir işlem yapılmayacak. Divi oluşturduk "id" tanımladık ve "style" görünmez tanımladık.

Şimdi scriptimizi yazıyoruz.

<script type="text/javascript">
 $(document).ready(function(){
  $('#lk').click(function(){
   $('#lkdv').fadeIn("slow");
  });
 });
</script>

Şuanda ekranda olan görünmez bir divi linke tıkladğımızda "slow" olarak görünür yaptık. aşağıda html görünümü ve örneği görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Jquery .FadeIn()</title>
  <script src='http://code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'></script>
 
  <script type="text/javascript">
  $(document).ready(function(){
    $('#lk').click(function(){
     $('#lkdv').fadeIn("slow");
    });
  });
  </script>
  </head>

  <body>
 <a href="javascript:void(0);" id="lk">tıklayın..</a>
 <div id="lkdv" style="width:200px; height:100px; background-color:red; display:none;">&nbsp;

</div>

</body>
</html>

<== Örnek Çalışma ==>

tıklayın..

20 Eylül 2012 Perşembe

Jquery .attr()

Merhaba arkadaşlar bugun sizlere Jquery .attr() özelliğini anlatacağım. .attr() özelliği elementlere özellik eklememize izin verir. Örn. <img /> tagına "src" özelliği eklemek. Şimdi isterseniz bir div ve buton oluşturalım ve butona basıldığında dive class ekleyelim.
evet öncelikle body tagının içine bir div ve buton ekleyelim.

<div id="dv">Örnek Div</div>
<input type="button" value="ekle" id="attrbtn" />

butona basılınca dive eklenecek classı oluşturalım.

<style type="text/css">
 .css {
    width:200px;
    height:100px;
    background-color:red;
    padding:10px;
    color:yellow;
    font-size:14px;
 }
</style>

Evet classımızı, div ve butonumuzu oluşturmuş olduk. Şimdi scriptimizi oluşturup kodlarımızı yazıyoruz.

<script type="text/javascript">
  $(document).ready(function () {
    $("#attrbtn").click(function () {
      $("#dv").attr("class","css");
    });  
  });
</script>

Jquery kodlarımızıda ekledik. şimdi HTML görünümü veriyorum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Jquery .attr()</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  
<script type="text/javascript">
  $(document).ready(function () {
    $("#attrbtn").click(function () {
      $("#dv").attr("class","css");
    }); 
  });
  </script>
  <style type="text/css">
  .css {
      width:200px;
      height:100px;
      background-color:red;
      padding:10px;
      color:yellow;
      font-size:14px;
  }
  </style>
  </head>

<body>
  <div id="dv">Örnek Div</div>
  <input type="button" value="ekle" id="attrbtn" />
  </body>
  </html>

Kodlar bitti örnek çalışmayı aşağıda görebilirsiniz.

Örnek Div

15 Eylül 2012 Cumartesi

ATATÜRK İLKELERİ HATIRLATMA

ATATÜRK İLKELERİ
Atatürk ilkeleri, altı ana başlık altında toplanabilir:

Cumhuriyetçilik:

Atatürk devrimleri siyasi nitelik taşır. Çok uluslu bir İmparatorluktan ulus devlete geçiş gerçekleştirilmiş ve böylece modern Türkiye'nin ulusal kimliği oluşturulmuştur. Bu kimliğin oluşmasında, kul nitelikli insanların yurttaş-birey niteliği kazanması önemli bir noktadır. Atatürk bunun yolunu, kısaca halkın kendi kendisini idaresi, yani demokrasi demek olan Cumhuriyet’te görmüştür.

Halkçılık:

Gerek içeriği gerekse hedefleri açısından bakıldığında, Cumhuriyet Devrimi ayrıca bir sosyal devrim niteliği de taşır. Başta İsviçre Medeni Kanunu olmak üzere, Batı kanunlarının Türkiye'de uygulamaya konulmasıyla birlikte kadınların statüsünde köklü değişiklikler olmuş, 1934 yılında kabul edilen bir kanun ile kadınlar seçme ve seçilme hakkını almışlardır. Atatürk çeşitli ortamlarda, Türkiye'nin gerçek yöneticilerinin köylüler olduğunu söylemiştir. Aslında bu durum Türkiye için bir gerçek olmaktan çok bir hedef niteliğindedir. Halkçılık ilkesi sınıf ayrıcalıklarına ve sınıf farklılıklarına karşı olmak ve hiçbir bireyin, ailenin, sınıfın veya organizasyonun diğerlerinin daha üzerinde olmasını kabul etmemek demektir. Halkçılık, Türk vatandaşlığı olarak ifade edilen bir fikre dayanır. Gurur ile birleşen vatandaşlık fikri, halkın daha fazla çalışması için gerekli psikolojik teşviki sağlar, birlik fikrinin ve ulusal bir kimliğin kazanılmasına yardımcı olur.

Laiklik:

Laiklik yalnızca devlet ve dinin birbirinden ayrılması anlamına gelmez ayrıca eğitim, kültür ve yasama alanlarının da dinden bağımsız olması anlamını taşır. Laiklik, devletin dini düşünce ve dini kuruluşların etkisinden bağımsız olması, ve genel olarak düşünce özgürlüğü anlamına gelmektedir. Devrimlerin birçoğu laikliği gerçekleştirmek amacıyla yapılmış ve diğerleri ise laikliğe ulaşılmış olması sayesinde gerçekleştirilebilmiştir. Laiklik ilkesi akılcı ve dini siyasetin dışında tutan bir ilkedir. Osmanlı döneminde matbaanın geciktirilmesinde olduğu gibi dinin yenilikler karşısında nasıl tutucu bir silah haline geldiğini yaşamış olan Türkiye Cumhuriyeti kurucuları açısından dinin din dışı sivil yapı üzerinde yaratabileceği baskıları önlemenin bir aracıdır.

Devrimcilik:

Atatürk'ün ortaya koyduğu en önemli ilkelerden birisi de devrimciliktir. Bu ilkenin anlamı
Türkiye'nin devrimler yaparak geleneksel kuruluşlarını modern kuruluşlarla değiştirmiş olmasıdır.
Geleneksel kavramların bir kenara itilip modern kavramların benimsenmesi demektir.
Devrimcilik ilkesi, yapılmış olan devrimlerin tanınıp kabul edilmelerinin çok ötesine geçmiştir.

Milliyetçilik:

Cumhuriyet devrimi ayrıca milliyetçi bir devrimdir. Bu milliyetçilik ırkçı bir yapıda değildir; yurtseverlikle sınırlıdır. Bu devrimin amacı, Türkiye Cumhuriyetinin bağımsızlığının korunması ve ayrıca Cumhuriyetin siyasal yönden gelişmesidir. Bu milliyetçilik, tüm diğer ulusların bağımsızlık haklarına saygılıdır; sosyal içeriklidir;
yalnızca anti - emperyalist olmayıp, aynı zamanda gerek hanedan yönetimine, gerekse herhangi bir sınıfın Türk toplumunu yönetmesine de karşıdır ve nihayet bu milliyetçilik Türk devletinin vatanı ve halkı ile bölünmez bir bütün olduğu ilkesine inanmaktadır.

Devletçilik:

Mustafa Kemal Atatürk yapmış olduğu açıklamalarda ve politikalarında Türkiye'nin bir bütün olarak modernizasyonunun ekonomik ve teknolojik gelişmeye önemli ölçüde bağlı olduğunu ifade etmiştir. Bu bağlamda, devletçilik ilkesini de devletin, ülkenin genel ekonomik faaliyetlerinin düzenlenmesi ve özel sektörün girmek istemediği veya yetersiz kaldığı ya da ulusal çıkarların gerekli kıldığı alanlara girmesi anlamında yorumlamaktadır. Ancak, devletçilik ilkesinin uygulanmasında, devlet yalnızca ekonomik faaliyetlerin temel kaynağını teşkil etmemiş, aynı zamanda ülkenin büyük sanayi kuruluşlarının da sahibi olmuştur.

10 Eylül 2012 Pazartesi

Jquery .show()

jQuery show gizlenmiş nesneleri görünür hale getirmemizi sağlar.Hide mantığıyla çalışır. Kullanım şekli aşağıdaki gibidir. id değeri hddv olan bir dive nasıl uygulayacağımıza bir bakalım.

<input id="gsbtn" value="Göster" type="button" />
<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>
$("#gsbtn").click(); 
$("#hddv").show();

gsbtn button una click fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz gizleme özelliğini click içinde oluşturuyoruz

$("#gsbtn").click(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
  $("#hddv").show(); veya $("#hddv").show('slow'); veya $("#hddv").show('fast');
    //show özelliğimizin iki tane parametresi var slow ve fast bunlarıda örneklerde göreceğiz.
});

HTML görünüm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - show()</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#hdbtn").click(function () {
                // eğer butona tıklanmış ise gizleme işlemini gerçekleştiriyoruz.
              $("#hddv").hide();
            });    
   
            $("#hdbtnsl").click(function () {
              $("#hddvsl").hide('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gizliyoruz.
            }); 
   
            $("#hdbtnfs").click(function () {
              $("#hddvfs").hide('fast'); //fast parametresini kullanıyoruz. hızlı gizliyoruz.
            }); 

   $("#gsbtn").click(function () {
                // eğer butona tıklanmış ise gösterme işlemini gerçekleştiriyoruz.
              $("#hddv").show();
            });    
   
            $("#gsbtnsl").click(function () {
              $("#hddvsl").show('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gösteriliyor.
            }); 
   
            $("#gsbtnfs").click(function () {
              $("#hddvfs").show('fast'); //fast parametresini kullanıyoruz. hızlı gösteriliyor.
            }); 
        });
    </script>
</head>
<body>

<div style="float:left;">

  <input id="hdbtn" value="Gizle" type="button" />



  <div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>



  <input id="hdbtnsl" value="Slow gizle" type="button" />



  <div id="hddvsl" style="width:65px; height:65px; background-color:#666;"></div>



  <input id="hdbtnfs" value="Fast gizle" type="button" />



  <div id="hddvfs" style="width:65px; height:65px; background-color:#666;"></div>

  </div>

  <div style="float:right;">

  <input id="gsbtn" value="Göster" type="button" />


<input id="gsbtnsl" value="Slow göster" type="button" />


<input id="gsbtnfs" value="Fast göster" type="button" />


</div>

  <div style="clear:both; float:none;"></div>
</body>
</html>

İsterseniz testlerinizi HTML editörden yapabilirsiniz.

Örnek :

7 Eylül 2012 Cuma

Jquery .hide()

jQuery hide nesneleri gizlememizi sağlar. Kullanım şekli aşağıdaki gibidir. id değeri hddv olan bir dive nasıl uygulayacağımıza bir bakalım.

<input id="hdbtn" value="Gizle" type="button" />
<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>
$("#hdbtn").click(); 
$("#hddv").hide();

hdbtn button una click fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz gizleme özelliğini click içinde oluşturuyoruz

$("#hdbtn").click(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
  $("#hddv").hide(); veya $("#hddv").hide('slow'); veya $("#hddv").hide('fast');
    //hide özelliğimizin iki tane parametresi var slow ve fast bunlarıda örneklerde göreceğiz.
});

HTML görünüm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - hide()</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#hdbtn").click(function () {
                // eğer butona tıklanmış ise gizleme işlemini gerçekleştiriyoruz.
              $("#hddv").hide();
            });    
   
            $("#hdbtnsl").click(function () {
              $("#hddvsl").hide('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gizleniyor.
            }); 
   
            $("#hdbtnfs").click(function () {
              $("#hddvfs").hide('fast'); //fast parametresini kullanıyoruz. hızlı gizleniyor.
            }); 
        });
    </script>
</head>
<body>
<input id="hdbtn" value="Gizle" type="button" />
<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>


<input id="hdbtnsl" value="Slow" type="button" />
<div id="hddvsl" style="width:65px; height:65px; background-color:#666;"></div>


<input id="hdbtnfs" value="Fast" type="button" />
<div id="hddvfs" style="width:65px; height:65px; background-color:#666;"></div>
</body>
</html>

İsterseniz testlerinizi HTML editörden yapabilirsiniz.

Örnek :

5 Eylül 2012 Çarşamba

Jquery .blur() özelliği

jQuery focus odaklanılan nesneleri, kontrol etmemize yarayan bir fonksiyondur. blur ise odaklanılan nesneyi bıraktığımızda aktif olur. Örneğin input içine tıkladığınız anda focus, bıraktığınız anda ise blur aktif olur.Kullanım şekli aşağıdaki gibidir. id değeri tstint olan bir inputa nasıl uygulayacağımıza bir bakalım.

<input id="tstint" type="text" />
<label id="tstintblg"></label>
$("#tstbtn").focus();
$("#tstbtn").blur();

tstint input una focus ve blur fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri focus ve blur içinde bir function oluşturarak düzenliyoruz.

$("#tstint").focus(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});

$("#tstint").blur(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});

Dilerseniz küçük bir örnek yapalım. Sayfamızda inputa odaklanıldığında ve bıraktığında label ile bilgi verelim.

$("#tstint").focus(function(){
 // eğer inputa odaklanılmış ise label ile bilgi veriyoruz.
 $("#tstintblg").html('odaklanıldı.');
});

$("#tstint").blur(function(){
 // eğer inputa odaklanılma bırakılmış ise label ile bilgi veriyoruz.
 $("#tstintblg").html('odaklanmayı bıraktınız.');
});

HTML görünüm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - blur()</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tstint").focus(function(){
             // eğer inputa odaklanılmış ise label ile bilgi veriyoruz.
             $("#tstintblg").html('odaklanıldı.');
            });
            
            $("#tstint").blur(function(){
             // eğer inputa odaklanılma bırakılmış ise label ile bilgi veriyoruz.
             $("#tstintblg").html('odaklanmayı bıraktınız.');
            });
  });
    </script>
</head>
<body>
<input id="tstint" type="text" /> <label id="tstintblg"></label>
</body>
</html>

Örnek :

4 Eylül 2012 Salı

Jquery .keydown() özelliği

jQuery keydown, klavyeden bir tuşa basıldığı anda aktif olan bir fonksiyondur. Örneğin klavyeden “m” tuşuna basıyorsunuz. keydown, “m” tuşuna bastığınız anda işlem yapmaya başlar. keyup fonksiyonundan farkı, keyup parmağınızı tuştan kaldırdığınız anda, keydown tuşa bastığınız anda aktif olur.

Ayrıca, keydown ile keypress arasındaki fark charCode değerleridir. Her iki fonksiyonda tuşa basıldığı anda aktif olur ama keydown ile charCode değerini alamayız. keypress fonksiyonu ile charCode değerlerine ulaşabiliriz.
ID değeri test olan input elemanımızla keydown fonksiyonumuzu incelemeye çalışalım.

<input type="text" id="test" />
$("#test").keydown();

test input una keydown fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri keydown içinde bir function oluşturarak düzenliyoruz.

$("#test").keydown(function(){
 // işlemlerimizi bu kısımda düzenliyoruz.
});

keydown olayını daha iyi algılayabilmek için küçük bir örnek hazırlayalım. Bu örneğimizde klavyeden basılan tuşun enter olup olmadığını kontrol edelim. Bu kontrolümüzü tuşların keyCode değerlerini alarak yapacağız. Enter tuşunun keyCode değeri 13 tür.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - keydown()</title>
    <style type="text/css">
        body{font-size: 1.0em; font-family: Arial, Verdana;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        // document ready fonksiyonu ile sayfamız yüklenirken yapılacak işlemlerin atamasını yapıyoruz.
        $(document).ready(function () {
            // "keydown" fonksiyonumuzun "keydownTest" id sine sahip inputumuza atamasını gerçekleştiriyoruz.
            $("#keydownTest").keydown(function (event) {
                // klavyeden basılan tuşun keyCode değerini alarak "Code" değişkenine atıyoruz.
                Code = event.keyCode ? event.keyCode : 0;
                // elde ettiğimiz değerimizin, enter tuşumuzun keyCode değeri olan 13 olup olmadığını kontrol ediyoruz.
                if (Code == 13) {
                    // eğer basılan tuş enter ise bu bölüm işleme alınacaktır.
                    alert("Enter tuşuna bastınız.");
                }
            });
        });
    </script>
</head>
<body>
<p>Lütfen, imleciniz input içinde iken enter tuşuna basınız.</p>
<input type="text" id="keydownTest" />
</body>
</html>

Örnek :

Lütfen, imleciniz input içinde iken enter tuşuna basınız.

Jquery .keyup() özelliği

jQuery keyup, klavyeden basılan tuşun bırakılmasıyla aktif olan bir fonksiyondur. Örneğin klavyeden “m” tuşuna basıyorsunuz. keyup, “m” tuşunu bıraktığınız anda işlem yapmaya başlar. keydown fonksiyonundan farkı, keydown tuşa bastığınız anda, keyup parmağınızı tuştan kaldırdığınız anda aktif olur.

Ayrıca, keyup fonksiyonunda charCode değerlerine ulaşamayız. Bu sebeple işlemlerimizde keyCode değerlerini kullanmamız gerekmektedir.
ID değeri test olan input elemanımızla keyup fonksiyonumuzu incelemeye çalışalım.

<input type="text" id="test" />
$("#test").keyup();

test input una keyup fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri keyup içinde bir function oluşturarak düzenliyoruz.

$("#test").keyup(function(){
 // işlemlerimizi bu kısımda düzenliyoruz.
});

keyup olayını daha iyi algılayabilmek için küçük bir örnek hazırlayalım. Bu örneğimizde klavyeden basılan tuşun enter olup olmadığını kontrol edelim. Bu kontrolümüzü tuşların keyCode değerlerini alarak yapacağız. Enter tuşunun keyCode değeri 13 tür.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - keyup()</title>
    <style type="text/css">
        body{font-size: 1.0em; font-family: Arial, Verdana;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        // document ready fonksiyonu ile sayfamız yüklenirken yapılacak işlemlerin atamasını yapıyoruz.
        $(document).ready(function () {
            // "keyup" fonksiyonumuzun "keyupTest" id sine sahip inputumuza atamasını gerçekleştiriyoruz.
            $("#keyupTest").keyup(function (event) {
                // klavyeden basılan tuşun keyCode değerini alarak "Code" değişkenine atıyoruz.
                Code = event.keyCode ? event.keyCode : 0;
                // elde ettiğimiz değerimizin, enter tuşumuzun keyCode değeri olan 13 olup olmadığını kontrol ediyoruz.
                if (Code == 13) {
                    // eğer basılan tuş enter ise bu bölüm işleme alınacaktır.
                    alert("Enter tuşuna bastınız.");
                }
            });
        });
    </script>
</head>
<body>
<p>Lütfen, imleciniz input içinde iken enter tuşuna basınız.</p>
<input type="text" id="keyupTest" />
</body>
</html>

Örnek :

Lütfen, imleciniz input içinde iken enter tuşuna basınız.

Jquery .keypres() özelliği

jQuery keypress klavyeden basılan tuşları kontrol etmemize yarayan bir fonksiyondur. keypress klavyeden bir tuşa basıldığı anda aktif olur. Örneğin klavyeden “m” tuşuna basıyorsunuz. keypress “m” tuşuna bastığınız anda, “m” tuşu işlem görmeden aktif olur. Kullanım şekli aşağıdaki gibidir. id değeri test olan bir input a nasıl uygulayacağımıza bir bakalım.

<input type="text" id="test" />
$("#test").keypress();

test input una keypress fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri keypress içinde bir function oluşturarak düzenliyoruz.

$("#test").keypress(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});

Dilerseniz küçük bir örnek yapalım. Sayfamızda “m” tuşuna basıldığında mesaj kutusu çıkartalım.

$(document).keypress(function (event) {
 var Karakter = String.fromCharCode(event.which);

 // klavyeden basılan karakteri "Karakter" isminde bir değişkene aktarıyoruz.
 // yakaladığımız değerin "m" olup olmadığını kontrol ediyoruz.
 // eğer "m" ise mesej kutusu çıkartıyoruz.

        if (Karakter == "m") {

         alert();
        }
});

Eğer bu ne işimize yarar derseniz, mesela örnekteki mantığı kullanarak sayfamızda kısa yollar yapabiliriz.
Bu durumu daha iyi algılayabilmemiz için, bir input a yapılan girişleri kontrol edelim. Örnek olarak input a sadece rakamların girişine izin verelim.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - keypress()</title>
// Jquery kütüphanemizi çağırıyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#KeypressTest").keypress(function (event) {
                Code = event.keyCode ? event.keyCode : event.charCode ? event.charCode : 0;
                // klavyeden basılan tuşun keyCode değerini alarak "Code" değişkenine aktarıyoruz.
                // rakamların (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) keyCode değerleri 48 ile 57 arasındadır.
                // bir sonraki adımda klavyeden gelen değerin 48 ile 57 arasında olup olmadığını kontrol ediyoruz.
                if (Code >= 48 && Code <= 57) {
                    return true;
                    // eğer girilen değer 48 ile 57 arasındaysa basılan tuşa izin veriyoruz.
                }
                else {
                    return false;
                    // eğer girilen değer bu aralıkta değilse basılan tuşa izin vermiyoruz.
                }
            });
        });
    </script>
</head>
<body>
<input type="text" id="KeypressTest" />
</body>
</html>

Örnek :

1. Örnek - Rakam Kontrolü
Lütfen bir değer girin

Bu bölüme sadece rakam girişine izin verilmektedir.
2. Örnek - Kısa yol tuşu oluşturma.

Ayrıca aynı konu ile ilgili diğer örneğimizide test edebilirsiniz. Bunun için lütfen "m" tuşuna basınız.

2 Eylül 2012 Pazar

Jquery .focus() özelliği

jQuery focus odaklanılan nesneleri, kontrol etmemize yarayan bir fonksiyondur. focus bir nesneye odaklanıldığında aktif olur. Örneğin input içine tıkladığınız anda, focus aktif olur. Kullanım şekli aşağıdaki gibidir. id değeri tstint olan bir inputa nasıl uygulayacağımıza bir bakalım.

<input id="tstint" type="text" />
<label id="tstintblg"></label>
$("#tstbtn").focus();

tstint input una focus fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri focus içinde bir function oluşturarak düzenliyoruz.

$("#tstint").focus(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});

Dilerseniz küçük bir örnek yapalım. Sayfamızda inputa odaklanıldığında label ile bilgi verelim.

$("#tstint").focus(function(){
 // eğer inputa odaklanılmış ise label ile bilgi veriyoruz.
 $("#tstintblg").html('odaklanıldı.');
});

HTML görünüm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - focus()</title>
// Jquery kütüphanemizi çağırıyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
         $("#tstint").focus(function(){
            // eğer inputa odaklanılmış ise label ile bilgi veriyoruz.
            $("#tstintblg").html('odaklanıldı.');
            });
  });
    </script>
</head>
<body>
<input id="tstint" type="text" /> <label id="tstintblg"></label>
</body>
</html>

Örnek :

Jquery .click() özelliği

jQuery click mousenin sol tuşunu kontrol etmemize yarayan bir fonksiyondur. click mousenin sol tuşuna tıklandığında aktif olur. Örneğin butona tıkladığınız anda, click aktif olur. Kullanım şekli aşağıdaki gibidir. id değeri tstbtn olan bir buttona nasıl uygulayacağımıza bir bakalım.

<input id="tstbtn" value="tıkla" type="button" />
$("#tstbtn").click();

tstbtn button una click fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri click içinde bir function oluşturarak düzenliyoruz.

$("#tstbtn").click(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
});

Dilerseniz küçük bir örnek yapalım. Sayfamızda butona basıldığında mesaj kutusu çıkartalım.

$("#tstbtn").click(function(){
 // eğer butona tıklanmış ise mesaj kutusu çıkartıyoruz.
 alert('butona tıklandı.');
});

HTML görünüm

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - click()</title>
// Jquery kütüphanemizi çağırıyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tstbtn").click(function () {
                // eğer butona tıklanmış ise mesaj kutusu çıkartıyoruz.
              alert('butona tıklandı.');
            });
        });
    </script>
</head>
<body>
<input id="tstbtn" type="button" value="tıkla" />
</body>
</html>

Örnek :

İnternet Sitesi Yazma Çabam :)

Merhaba

4 hafta önce kişisel sitemi yazmaya karar verdim. Adıma ait domain ve hosting alanı aldım. Ve 4 haftadır bir türlü siteyi yazmaya başlayamadım bende vazgeçerek bloğun üzerine yoğunlaşmaya karar verdim :) Eee ne demişer "Terzi kendi söküğünü dikemezmiş."

İnşallah paylaşımlarım hepimize hayırlı olur.

Bilişim Günlüğü

Sayfalar

Öne Çıkan Yayın

Uzak Masaüstü Bağlantısı ve Modem Port Ayarı

30 Eylül 2012 Pazar

Css ile yazı tipi kullanmak (use custom fonts with Css)

Google Web Font

29 Eylül 2012 Cumartesi

Google Drive Nedir ve Nasıl Kullanılır?

28 Eylül 2012 Cuma

Dropbox Nedir ve Nasıl Kullanılır?

27 Eylül 2012 Perşembe

Jquery .FadeIn()

20 Eylül 2012 Perşembe

Jquery .attr()

15 Eylül 2012 Cumartesi

ATATÜRK İLKELERİ HATIRLATMA

10 Eylül 2012 Pazartesi

Jquery .show()

7 Eylül 2012 Cuma

Jquery .hide()

5 Eylül 2012 Çarşamba

Jquery .blur() özelliği

4 Eylül 2012 Salı

Jquery .keydown() özelliği

Jquery .keyup() özelliği

Jquery .keypres() özelliği

2 Eylül 2012 Pazar

Jquery .focus() özelliği

Jquery .click() özelliği

İnternet Sitesi Yazma Çabam :)