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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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.