Herkese merhabalar, ikinci dersimizde Javascript alt yapısında bulunan Jquery ile Focus ve Blur olaylarını inleceyeceğiz. Bir onceki dersimizde Javascript ile web sitemizi dinamik bir hale getirebileceğimizden bahsetmiştik. Bu dersimizde ise bu konu uzerinde bir kac ornek yaparak bilgilerimizi pekiştirelim. Derse başlamadan once Focus ve Blur nedir hangi acamlarla kullanılır onlara bir goz atalım.
FOCUS
Secilen veya uzerine gelinen form elemanı belirgin hale getirmek icin kullanılan yapıdır.
BLUR
Focus'un tam tersi olarak form elemanının uzerinden gecince yaptığı işlemdir.
Az oncede belirttiğim gibi bu orneğe başlamadan once bizim Jquery kutuphanesine ihtiyacımız olacak, bu kutuphane Javascript icin ucretsiz sunulmuştur. Guncel surumunu kendi web sitesi olan jquery.com uzerinden indirebilirsiniz.
- Sağ ustte bulunan Download butonuna tıklayın.
- Gelen sayfadan development surumunu indirin.
İndirdiğimiz bu dosyayı şimdi projemize okutmamız gerekiyor. İlk dersimizde de gormuştuk işlem oldukca basit, tagları arasına:
PHP:
kodunu yazarak ekliyoruz. Mumkun oldukca kodu inceleyin, daha sonra kendiniz yazmaya calışın. Kopyala / yapıştır kombinasyonundan ne kadar uzak durursanız o kadar hızlı oğ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 gore artık kendimize bir form oluşturabiliriz. Bir uye kayıt sayfası oluşturalım burada ad, soyad, telefon ve mail adresi gibi temel bilgiler olsun.
PHP:
Javascript Ders 2 - WMArşiv Adınız:
Soyadı:
Telefon:
Mail Adres:
HTML cıktımın goruntusu şu şekilde olmuş oldu:
Yukarıdaki ornek klasik bir HTML uygulaması, ben ise bu yapıyı biraz geliştirmek istiyorum. Orneğin kullanıcı ismini yazmak istediği zaman textbox'a tıklarsa kutucuğun arka plan rengi kırmızıya donsun. Bunun icin 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 calışması icin web sitesinde bulunan tum elemanların hazır hale gelmesi yani sitenin tamamen yuklenmesi gerekir, temel olarak kullanacağımız ilk yapısımız ise Document Ready ozelliğidir. Bu kod yapısı sayesinde hazırlayacağımız Jquery kodları site tamamen yuklendikten sonra calışacaktır.
PHP:
$(document).ready (funtion() );
Yukarıda gormuş olduğunuz yapı Jquery kod yapısının başlangıcıdır. Acıklama satırında bulunan yere kodlar yazılmaya başlar, ilk dersimizde de değindiğimiz gibi kod yapısı Java'yı oldukca andırıyor. Bu kısmı anladığımıza gore devam edelim.
PHP:
$('input').focus (function() );
Yukarıdaki yapıyı da inceleyelim. Gorduğunuz gibi kodlar fonksiyonların icerisine yazılarak devam etmekte. Burada sitede bulunan tum 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, secili nesne ise this olarak gecmekte.
Gormuş olduğunuz gibi uzerine tıklanılıp gecilen inputlar kırmızı olarak kaldı. Biz sadece uzerindeyken kırmızıya donsun gecilince 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() );
Bu sayede sadece uzerinde bulunduğumuz input nesnesi renklendirilmiş oldu, blurlanan nesneler ise transparant renge geri dondu.
Gorunuşu de yukarıdaki gibi olacaktır. Bu ornekleri dilerseniz kendinize gore duzenlemeyi ve input verilerini arttırmayı deneyin. Genel olarak oluşturduğumuz kod yapısı şu şekilde oldu:
PHP:
Javascript Ders 2 - WMArşiv Adınız:
Soyadı:
Telefon:
Mail Adres:
KENDİNİZ YAPMAYA CALIŞIN: Formunuza 6 farklı input elemanı ekleyin, bu elemanlar uzerine gelindiğinde (focus) mavi, gecildiği zaman (blur) turuncu renge donsun.
Biz yukarıdaki orneklerimizi input uzerinden gosterdik peki tek bir elemanı duzenlemek istersek ne yapacağız? Cozumu basit, idlerine gore yada sınıflarına gore işlem yapacağız. Bu işlemi yapabilmek icin oluşturulan inputlar da ID veya Class olması gerekiyor. Ornek olarak ben bir tane oluşturuyorum. Bu demek değil ki ID ile Class aynı işlemi goruyor tabi ki hayır.
ID: Her HTML elemanının kendine ozel IDsi bulunur ve aynı IDler farklı elemanlarda kullanılamaz. Bu, IDleri parmak izi gibi duşunebiliriz. Javascript ile tek bir nesneyi ayırt etmek istiyorsak nesnenin IDsini kullanırız.
Class: CSS derslerimizde gormuştunuz, belirlenen bir grup eleman uzerinde aynı değişiklikleri yapmak icin class (sınıf) kullanılır. Javascripte ise class uzerinden duzenleme yapmak isterseniz belirtilen classa ait tum elemanlara aynı işlem uygulanır.
IDsine Gore Duzenleme
Oncelikle idsi olan bir input text (textbox) oluşturuyorum.
PHP:
Adınızı girin:
Şimdi, ben bu elemana tıklandığı zaman yazının kalınlaşmasını ve yazı renginin kırmızıya donmesini istiyorum ve Jquery kodumu yazıyorum.
PHP:
$("#adi").focus (function() );
Jquery'de id ismini yazmadan once başına # (diez) işareti koymak zorundasınız. Bu sadeye belirlediğimiz "adi" idsine sahip nesnenin usune gelindiğinde yazı kalınlaşacak ve kırmızı renge donecektir. Tum kod yapımızı ise şu şekilde oldu:
PHP:
Javascript Ders 2 - WMArşiv Adınız:
Soyadı:
Telefon:
Mail Adres:
Sınıfına Gore Duzenleme
Yukarıdaki yapının aynısını birde class uzerinde gosterelim. Yukarıda 4 input değeri oluşturmuştuk rastgele iki tanesine class eklemesi yapalım orneğin:
PHP:
Adınız:
Ben adı ve telefon kısmını aynı classa atadım. Sınıf secimleri icinde class adını yazmadan once . (nokta) işareti eklemeniz gerekmektedir.
PHP:
$(".sinif1").focus (function() );
Şeklinde oluşturduğum kod sadece adı ve telefon bolumunun değerlerini değiştirecektir. Ornek goruntu:
Umarım anlaşılır bir ders olmuştur, katıldığınız veya anlamadığınız yerleri mutlaka sorun yeni derslerde goruşmek uzere.