Javascript Fonksiyon Örnekleri ve Kullanımı

Programcılıkta en sık kullanılan, en çok ihtiyaç duyacağınız ve işinizi çok kolaylaştıracak en etkili özellik fonksiyonlardır. Birçok programlama dilinde olduğu üzere Javascript’te de fonksiyonlar bulunmaktadır.

Fonksiyonlarda öncelikli olarak yapacağınız işinizi karşılayacak fonksiyon tanımlaması yaparsınız, daha sonra o tanımlama içerisine kodlarınızı yazarsınız. Son olarak ise bu fonksiyonu çağırarak çalıştırma aşamasına gelirsiniz. Fonksiyon kullanımı sizi birçok zahmetten kurtarıp daha hızlı sonuçlar elde etmenize olanak sağlayacaktır.

Bugün sizlere Javascript’te fonksiyon örnekleri ve nasıl kullanım yapacağınızı anlatacağız. Şöyle bir örnek üzerinde çalışma yapalım.

Misal; bir formumuz var ve bu form’da gönder butonuna tıkladığımızda formu kontrol ettirelim, bu form’da boş alan varmı? yada istediğimiz özelliklerde veri girişi sağlanmışmı? yani fonksiyonlar sayesinde JavaScript Form Validation işlemi yapacağız.

Html’de örnek bir form oluşturarak işe başlayalım.

<form action="#" method="post" name="FormIletisim">
Adınız: <input type="text" name="adi">
<br>
Soyadınız: <input type="text" name="soyadi">
<br>
<input type="submit" value="Gönder">
</form>

Formumuzu bu şekilde oluşturduktan sonra sayfamızın <head> bölümüne gelerek javascript kod bloğumuzu açıyoruz ve fonksiyonumuzu “kontrol” isminde oluşturuyoruz. Altta kodların yanlarına açıklamaları ile neler yaptığımızı belirttik.

<head>
    <script type="text/javascript">
        function kontrol(){

            if(FormIletisim.adi.value){}
            else{
                alert("Lütfen Adınızı Yazınız.");
                return false;
            }

            if(FormIletisim.soyadi.value){}
            else{
                alert("Lütfen Soyadınızı Yazınız.");
                return false;
            }
            
        }
    </script>
</head>

Bu örnekte çok basit düzeyde Javascript’te form kontrol yapmayı göstermiş olduk. Eğer adı, soyadı text alanları boş olduğu zaman ekrana uyarı veriyor ve işlemi durduruyor. Böylelikle kullanıcının önüne bir uyarı getirmiş olduk.

Bu kodlarımızda ufak bir eksik var ve bu eksiği tamamlayınca sorunsuz bir şekilde çalışacaktır. Bu fonksiyonun çalışması için bir tetikleme işlemi yapmamız gerekir. Yani hangi durumda bu fonksiyonumuz çalışmalı? Tabi ki Gönder butonuna tıklandığı zaman değilmi? Bunun için oluşturduğumuz html kodlarına tekrar gelip buton bölümüne şöyle bir parametre gireceğiz.

onclick="return kontrol()"

Bu parametreyi ise kodumuza parametre olarak şu şekilde ekleyebiliriz.

<input type="submit" value="Gönder" onclick="return kontrol()">

Böylelikle gönder butonuna tıklandığı zaman form post etmeden önce text alanları kontrol edilip boş değil ise post işlemi gerçekleşecektir.

Admin
Admin

Bilgiye ve eğitime önem veren, paylaşmayı seven bir insan.

2 Yorumlar
Tümünü göster En Yararlı En Yüksek Puan En Düşük Puan Yorumunuzu ekleyin
  1. Js ile form kontrollerini yaptırarak fonksiyonların temel kavramını iyi benimsemişsiniz. Yalın ve güzel bir anlatım biçimi var makalede. Javascript Fonksiyon örneklerinizi çoğaltabilirseniz daha farklı çeşitlendirmeler yapabilirsiniz buda benim nacizane fikrimdir.

  2. Fonksiyonlar yazılımcıların can simidi gibi bir şey. Aynı kodları tekrar tekrar yazmanın önüne geçiriyor ve basit kullanım şekli nedeniyle bize zamandan tasarruf sağlatıyor.

Derya Şengül için bir yanıt yazın Cevabı İptal Et

Translate »
Kılavuz Yazılım
Logo