JavaScritpt İle Yazı Boyutunda Değişiklik

Merhaba arkadaşlar bu makalemde sizlere Javascript ile  yazı büyütme ve küçültme işlemi yapan javascript yazacağım. Haber sitesi ile ilgili projemde gerek duydum ve javascript yazmaya karar verdim basit bir şeyde olsa sizlerle paylaşmak istedim.Umarım işinize yarayacaktır.

Javascript fonksiyonmuzu oluşturuyoruz.

  <script type="text/javascript">

        function changeFontSize(divid, step)

        {

            step = parseInt(step, 10);

            var sizediv = document.getElementById(divid);

            var curFont = parseInt(sizediv.style.fontSize, 10);

            sizediv.style.fontSize = (curFont + step) + 'px';

        }

    </script> 

Javascript metodu yazdık şimdi content id ile div oluşturuyoruz. Dİv içerisindeki yazıların fontunda değişiklik yapmak için .

<div id="content" style="font-size: 12px;">    Yasin Kızılbakır

</div> 

Şimdi Butonlar ile büyültüp küçültüyoruz.

<a href="javascript:void(0);" onclick="changeFontSize('content',-2);"> 

<img alt="" src="images/fontneg.jpg" height="32" width="32"/> 

</a><a href="javascript:void(0);" onclick="changeFontSize('content','2');"> 

<img alt="" src="images/fonplus.jpg" width="32"/>

</a>
Resimleri buradan alabilirsiniz.

Evet arkadaşlar bu makalemizinde sonuna geldik , bir sonraki makalemde görüşmek üzere. 

JavaScript OnMouse Olayları

Bu makalemizde ise OnMouse olaylarını  nceleyeceğiz.

Bir nesne üzerinde farenin basılı olan tuşu bırakılınca gerçekleşir.

Burada nesne; sayfa ya da bir HTML elmanı olabilir.(Örneğin link, div, tablo ..html kontroller vb..)

Şimdi bu olaylarla ilgili örneğimizi yapalım.

Örneğimizde bir resim içinde Mouse olaylarını inceleyeceğiz. Sayfaya yerleştirdiğimiz bir resim için bir olayın kaç defa gerçekleşmiş olduğunu göreceğiz.

Aynı zamanda örneğimizde  MouseDown , MouseMove, MouseOut, MouseOver, MouseUp işlemlerini yapacağız.

Örnek kon yapısı aşağıda gösterilmiştir. 

Uygulamada kullanılması gereke kontroller  aşağıdaki resimde gösterilmiştir.

Uygulamada kod yapısını yazıp kontrollerle javascript metotları çağırıyoruz. Aşağıdaki resimde Test işlemini yapıyoruz. 

Olaylar gerçekleştiği zaman 5 adet div oluşturduk olayların adlarını ve sayısını yazdırma işlemlerini yaptık. Resimle tüm Mouse olayları için fonksiyonlar tanımladık.

Bir fonksiyon ne kadar çalışmışsa fonksiyonu çalıştıran olay o kadar oluşmuş demektir. İşte fonksiyonların kaçar defa çalıştıklarını bulmak için her fonksiyonda kullanılmak üzere 5 tane oluşturduk. Fonksiyonlar çalıştıkça bu değişkenlerin değeri 1 artmakta ve fonksiyonun kaçıncı defa çalıştığını (olayın kaçıncı defa olduğunu ) değişkene tanımlamaktadır.

 Her olay oluştuğunda kendisi için tanımlanan fonksiyon çalışacak ve ekranda bu olayın olduğunu yazmak için oluşturduğumuz div içerisine innerHtml ile özelliği ile olayın kaç defa ve olayın adı yazılacaktır.

Uygulamayı indirmek için burayı tıklayınız.

JavaScript OnKeyUp Olayı

Bu makalemde Javascript ile OnKeypress  klavyemizden bastığımız tuşu yakalıyoruz. Kullanıcı bir tuşa bastığında yada basılı tuttuğunda gerçekleşir .Bu olay OnKeyDown olayından sonra gerçekleşir.

OnKeyPress olayında event.keyCode özelliği hem büyük harflerin hem de küçük harflerin Unicode değerlerini döndürür.

Aşağıdaki örneği onKeyPress olayı için deneyelim. 

Uygulamamızı yazdıktan sonra test ediyoruz örnek resim aşağıdaki resimde gösterilmiştir. Uygulamamızda klavyeden girilen harfi yakalayıp Keyup event'inde yakalıyoruz. Girdiğimiz harf javascript ile büyük harfe çevriliyor. 

Örnek uygulamayı indirmek için burayı tıklayınız.

JavaScript OnKeyPress Olayı 

Bu makalemde Javascript ile OnKeypress  klavyemizden bastığımız tuşu yakalıyoruz. Kullanıcı bir tuşa bastığında yada basılı tuttuğunda gerçekleşir .Bu olay OnKeyDown olayından sonra gerçekleşir. 

OnKeyPress olayında event.keyCode özelliği hem büyük harflerin hem de küçük harflerin Unicode değerlerini döndürür. 

Aşağıdaki örneği onKeyPress olayı için deneyelim.

Uygulamamızı yazdıktan sonra test ediyoruz örnek resim aşağıdaki resimde gösterilmiştir.Klavyeden girilen her değer alert ile gösterilmektedir.

Uygulamayı indirmek için burayı tıklayınız.

JavaScript ile Hata Denetimi Try Catch  Hata Yakalama,Finally Yapısı ,Throw kullanımı

Bu makalemde sizlere javascriptle ile  Hata denetimini anlatacağım . Hata denetiminin başlıca konuları Try Catch  hata yakalama İşlemleri, Finally Yapısı ve Throw işlemlerini inceleyeceğiz. Örnek kod aşağıdaki şekilde gösterilmiştir.

Muhtemel hata oluşabilecek kodlar try blokları arasına yazılır. Eğer try blokları arasındaki kodlarda bir hata ile karşılaşırsa , catch anahtar sözcüğünün altındaki komut bloğu çalışır. 

Finally Yapısı try-catch yapısına benzemekle beraber try komut bloğunda ister hata oluşsun ister oluşmasın finally bloğundaki kodlar çalışacaktır. 

Throw anahtar sözcüğünü kullanarak try bloğu içinde kendimiz özel  istisnai durumlar  yani hata durumları oluşturabiliriz. Bu anahtar sözcüğü try blokları içerisinde kullanılmaktadır. 

 Kod yapısı yukarıda gösterilmiştir.

Yukarıdaki resimde ise uygulamamızda bulunması gerek kontroller.
 

İleri Programlama dillerinde olduğu gibi Javascript’te de çalışma zamanında ortaya çıkabilecek hataları tespit edebilirsiniz. Bu hatanın nedeni yada çeşidine göre program akışını değiştirmeniz mümkün olacaktır. Kullanıcı web sayfasını görüntülerken herhangi bir hata ile karşılaşır ise bu durumda web sayfanızı terk etmesi olasıdır.

Örnek uygulamayı indirmek için burayı  tıklayınız.