Javascript Focus ve Blur Yapılandırması - Ders 2

V

vBasic

Misafir
Herkese merhabalar, ikinci dersimizde Javascript alt yapısında bulunan Jquery ile Focus ve Blur olaylarını inleceyeceğiz. Bir önceki dersimizde Javascript ile web sitemizi dinamik bir hale getirebileceğimizden bahsetmiştik. Bu dersimizde ise bu konu üzerinde bir kaç örnek yaparak bilgilerimizi pekiştirelim. Derse başlamadan önce Focus ve Blur nedir hangi açamlarla kullanılır onlara bir göz atalım.

FOCUS
Seçilen veya üzerine gelinen form elemanı belirgin hale getirmek için kullanılan yapıdır.

BLUR
Focus'un tam tersi olarak form elemanının üzerinden geçince yaptığı işlemdir.

Az öncede belirttiğim gibi bu örneğe başlamadan önce bizim Jquery kütüphanesine ihtiyacımız olacak, bu kütüphane Javascript için ücretsiz sunulmuştur. Güncel sürümünü kendi web sitesi olan jquery.com üzerinden indirebilirsiniz.
- Sağ üstte bulunan Download butonuna tıklayın.
- Gelen sayfadan development sürümünü indirin.​
İndirdiğimiz bu dosyayı şimdi projemize okutmamız gerekiyor. İlk dersimizde de görmüştük işlem oldukça basit, <head> tagları arasına:
PHP:
<scripty type="text/javascript" src="jquery-3.3.1.js"></script>
kodunu yazarak ekliyoruz. Mümkün oldukça kodu inceleyin, daha sonra kendiniz yazmaya çalışın. Kopyala / yapıştır kombinasyonundan ne kadar uzak durursanız o kadar hızlı öğreneceksiniz. Yukarıda indirilen dosyamızı ben orjinal adıyla ekledim ancak size jquery-3.3.1.js adını istediğiniz gibi değiştirebilirsiniz eğer dosya adını değiştirirseniz src arasına yazılan ismide değiştirmeniz gerekecektir.

Jquery kurulumunu da tamamladığımıza göre artık kendimize bir form oluşturabiliriz. Bir üye kayıt sayfası oluşturalım burada ad, soyad, telefon ve mail adresi gibi temel bilgiler olsun.
PHP:
<html>
<head>
<title>Javascript Ders 2 - WMArşiv</title>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
Adınız:<br> <input type="text"> <br>
Soyadı:<br> <input type="text"> <br>
Telefon:<br> <input type="text"> <br>
Mail Adres:<br> <input type="text">
</body>
</html>
HTML çıktımın görüntüsü şu şekilde olmuş oldu:
admin-albums-javascript-picture26-javascript-form-1.png


Yukarıdaki örnek klasik bir HTML uygulaması, ben ise bu yapıyı biraz geliştirmek istiyorum. Örneğin kullanıcı ismini yazmak istediği zaman textbox'a tıklarsa kutucuğun arka plan rengi kırmızıya dönsün. Bunun için script tagları arasında Jquery kodumu oluşturuyorum.

Bilinmesi gerekenler: Bir javascript kodu $ (dolar işareti) ile başlıyorsa bilin ki bu Jquery ile hazırlanmıştır. Jquery kodlarının çalışması için web sitesinde bulunan tüm elemanların hazır hale gelmesi yani sitenin tamamen yüklenmesi gerekir, temel olarak kullanacağımız ilk yapısımız ise Document Ready özelliğidir. Bu kod yapısı sayesinde hazırlayacağımız Jquery kodları site tamamen yüklendikten sonra çalışacaktır.
PHP:
$(document).ready (funtion() {
// KODLAR BURAYA
});
Yukarıda görmüş olduğunuz yapı Jquery kod yapısının başlangıcıdır. Açıklama satırında bulunan yere kodlar yazılmaya başlar, ilk dersimizde de değindiğimiz gibi kod yapısı Java'yı oldukça andırıyor. Bu kısmı anladığımıza göre devam edelim.
PHP:
$('input').focus (function() {
//KOD BURAYA
});
Yukarıdaki yapıyı da inceleyelim. Gördüğünüz gibi kodlar fonksiyonların içerisine yazılarak devam etmekte. Burada sitede bulunan tüm inputlara fokuslanması gerekiğini belirttik ve devam ediyoruz.
PHP:
$(this).css ("background", "red");
En son işlem olarak tıklanılan yani fokuslanması gereken inputun arka plan rengini değiştirecektik. Bu değer atamaları css ile yapılmakta, seçili nesne ise this olarak geçmekte.

admin-albums-javascript-picture27-javascript-form-2.png


Görmüş olduğunuz gibi üzerine tıklanılıp geçilen inputlar kırmızı olarak kaldı. Biz sadece üzerindeyken kırmızıya dönsün geçilince geri eski haline gelsin istiyor olabiliriz ki genel kullanım amacıda budur o zaman focus olayının tam tersi olan bluru devreye sokmamız gerekiyor. O zaman focus kodumuzun hemen altına blur kodunu oluşturalım:

PHP:
$('input').blur (function() {
$(this).css ("background", "transparent");
});

Bu sayede sadece üzerinde bulunduğumuz input nesnesi renklendirilmiş oldu, blurlanan nesneler ise transparant renge geri döndü.

admin-albums-javascript-picture28-javascript-form-3.png


Görünüşü de yukarıdaki gibi olacaktır. Bu örnekleri dilerseniz kendinize göre düzenlemeyi ve input verilerini arttırmayı deneyin. Genel olarak oluşturduğumuz kod yapısı şu şekilde oldu:
PHP:
<html>
<head>
<title>Javascript Ders 2 - WMArşiv</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$( document ).ready(function() {

$('input').focus (function() {
$(this).css ("background", "red");
});
$('input').blur (function() {
$(this).css ("background", "transparent");
});

});
</script>
</head>

<body>
Adınız:<br> <input type="text"> <br>
Soyadı:<br> <input type="text"> <br>
Telefon:<br> <input type="text"> <br>
Mail Adres:<br> <input type="text">
</body>
</html>

KENDİNİZ YAPMAYA ÇALIŞIN: Formunuza 6 farklı input elemanı ekleyin, bu elemanlar üzerine gelindiğinde (focus) mavi, geçildiği zaman (blur) turuncu renge dönsün.

Biz yukarıdaki örneklerimizi input üzerinden gösterdik peki tek bir elemanı düzenlemek istersek ne yapacağız? Çözümü basit, idlerine göre yada sınıflarına göre işlem yapacağız. Bu işlemi yapabilmek için oluşturulan inputlar da ID veya Class olması gerekiyor. Örnek olarak ben bir tane oluşturuyorum. Bu demek değil ki ID ile Class aynı işlemi görüyor tabi ki hayır.

ID: Her HTML elemanının kendine özel IDsi bulunur ve aynı IDler farklı elemanlarda kullanılamaz. Bu, IDleri parmak izi gibi düşünebiliriz. Javascript ile tek bir nesneyi ayırt etmek istiyorsak nesnenin IDsini kullanırız.

Class: CSS derslerimizde görmüştünüz, belirlenen bir grup eleman üzerinde aynı değişiklikleri yapmak için class (sınıf) kullanılır. Javascripte ise class üzerinden düzenleme yapmak isterseniz belirtilen classa ait tüm elemanlara aynı işlem uygulanır.

IDsine Göre Düzenleme
Öncelikle idsi olan bir input text (textbox) oluşturuyorum.
PHP:
Adınızı girin: <input type="text" id="adi">
Şimdi, ben bu elemana tıklandığı zaman yazının kalınlaşmasını ve yazı renginin kırmızıya dönmesini istiyorum ve Jquery kodumu yazıyorum.
PHP:
$("#adi").focus (function() {
	$(this).css ("color", "red");
	$(this).css ("font-weight", "bold");
});
Jquery'de id ismini yazmadan önce başına # (diez) işareti koymak zorundasınız. Bu sadeye belirlediğimiz "adi" idsine sahip nesnenin üsüne gelindiğinde yazı kalınlaşacak ve kırmızı renge dönecektir. Tüm kod yapımızı ise şu şekilde oldu:
PHP:
<html>
<head>
<title>Javascript Ders 2 - WMArşiv</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$( document ).ready(function() {

$("#adi").focus (function() {
	$(this).css ("color", "red");
	$(this).css ("font-weight", "bold");
});

});
</script>
</head>

<body>
Adınız:<br> <input type="text" id="adi"> <br>
Soyadı:<br> <input type="text"> <br>
Telefon:<br> <input type="text"> <br>
Mail Adres:<br> <input type="text">
</body>
</html>

Sınıfına Göre Düzenleme
Yukarıdaki yapının aynısını birde class üzerinde gösterelim. Yukarıda 4 input değeri oluşturmuştuk rastgele iki tanesine class eklemesi yapalım örneğin:
PHP:
Adınız: <input type="text" class="sinif1">
Ben adı ve telefon kısmını aynı classa atadım. Sınıf seçimleri içinde class adını yazmadan önce . (nokta) işareti eklemeniz gerekmektedir.
PHP:
$(".sinif1").focus (function() {
	$(this).css ("color", "red");
	$(this).css ("font-weight", "bold");
});
Şeklinde oluşturduğum kod sadece adı ve telefon bölümünün değerlerini değiştirecektir. Örnek görüntü:
admin-albums-javascript-picture29-javascript-form-4.png


Umarım anlaşılır bir ders olmuştur, katıldığınız veya anlamadığınız yerleri mutlaka sorun yeni derslerde görüşmek üzere.
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Elektronik Sigara Cicisex Porno
Üst