JavaScript oldukça  gelişmiş bir programlama  dilidir. Php ile  benzerlikleri oldukça fazldır. Bu dersimizde  inputlardan  gelen verileri bir değişkene  alarak if sorgusu ile  kontrol edeceğiz. Yapacağımız örnek bir nevi captcha benzeri olacak.

 

İlk olarak  html kodlarımızı yazıyoruz;

JavaScript ile inputların value değerlerini almak

 

Lütfen 1 ile 10 arasında bir rakam giriniz:

Submit

 

 

Daha sonra, numb  id’sini  tanımladığımız inputtan gelen verileri, “demo” id’si tanımlamış paragraf etiketi içerisine yazdıracağız.

 

Bunun için hemen  javaScript’te bir fonksiyon yazıyoruz.

function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Yanlış Girdiniz!";
    } else {
        text = "Tebrikler Doğru seçim :)";
    }
    document.getElementById("demo").innerHTML = text;
}

 

 

Üstteki kodların  kısaca  açıklamalarına  değinmek gerekirse;

var x, text; // x ve text verilerini  değişken olarak  kullanacağımızı belirttik .

x = document.getElementById(“numb”).value;   // numb id’si tanımlanmış inputtan gelen value verilerini, x  adlı değişkene  aldık.

if sorgusu içerisinde,

isNaN(x) – değer boşsa,

x < 1   – değer  1’den küçükse ,

x > 10 – değer 10’dan büyükse, ekrana  yanlış girdiniz yazısını yazdırdık.

Tam tersi ise, zaten istediğimiz buydu, text değişkenine   doğru girildiği sonucucu yazdırdık.

 

Son olarak  text değişkeninin  aldığı değeri “demo” isimli paragraf  etiketine  javaScript ile  yazdırdık.

 

Son hali Aşağıdadır.

See the Pen javascript dersleri örnek 5 by Bulut (@bulutaylak) on CodePen.

web bulutu

Bir önceki yazımız olan Scroll aşağıya indikçe efektli açılan divler / Resimler. başlıklı makalemizde animate css, div efekt ve scroll efekt hakkında bilgiler verilmektedir.