Jquery

Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız

Yeni bir Uzaktan Eğitim makalesinde sizlerle beraberiz.

Günümüzde en fazla ziyaret edilen web sayfalarından biridir Facebook. Sosyal medya grubu altında listeleyebileceğimiz Facebook web sayfası, kullanıcıların zamanlarını en fazla geçirdikleri bir platformdur. Siteyi tasarlayanlar dünyanın en zenginleri arasında yer alır.

Bu siteye ait üye kayıt formunu görmeyeniniz yoktur. En azından üye olmak için bu formda yer alan bilgileri doldurmanız gerekir. Bu uygulamada bu formu tasarlayıp kullanmaya çalışacağız. Ayrıca Facebook sayfasında yer alan Doğum Tarihi kısmında doğru tarihin seçimini Select nesnesinin onchange olayıyla yapacağız. Facebook ise bu kontrolü butonun click olayıyla gerçekleştirmiştir.

Uygulamaya ait kodların hepsi aşağıdadır.

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

doldur();

});

 

var aylar = new Array("Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık");

 

function doldur() {

var tarih = new Date();

var sinir = tarih.getFullYear();

 

var obj = document.getElementById("yil");

for (var i = sinir; i > 1904; i--) {

opt = document.createElement("option");

opt.value = i;

opt.text = i;

obj.appendChild(opt);

}

document.getElementById("yil").value = 0;

 

var obj = document.getElementById("ay");

for (var i = 0; i < 12; i++) {

opt = document.createElement("option");

opt.value = i;

opt.text = aylar[i];

obj.appendChild(opt);

}

document.getElementById("ay").value = 0;

 

var obj = document.getElementById("gun");

for (var i = 1; i < 32; i++) {

opt = document.createElement("option");

opt.value = i;

opt.text = i;

obj.appendChild(opt);

}

document.getElementById("gun").value = 0;

 

}

 

function aykontrol() {

var gun = document.getElementById("gun");

var ay = document.getElementById("ay");

var yil = document.getElementById("yil");

var indis = ay.selectedIndex;

 

switch (indis) {

case 1:

case 3:

case 5:

case 7:

case 8:

case 10:

case 12:

if (gun.length == 31) {

opt = document.createElement("option");

opt.value = 31;

opt.text = 31;

gun.appendChild(opt);

} else if (gun.length == 29) {

opt = document.createElement("option");

opt.value = 29;

opt.text = 29;

gun.appendChild(opt);

 

opt = document.createElement("option");

opt.value = 30;

opt.text = 30;

gun.appendChild(opt);

 

opt = document.createElement("option");

opt.value = 31;

opt.text = 31;

gun.appendChild(opt);

} else if (gun.length == 30) {

opt = document.createElement("option");

opt.value = 30;

opt.text = 30;

gun.appendChild(opt);

 

opt = document.createElement("option");

opt.value = 31;

opt.text = 31;

gun.appendChild(opt);

}

break;

case 4:

case 6:

case 9:

case 11:

if (gun.length == 32) {

gun.remove(gun.length-1);

}else if (gun.length == 29) {

opt = document.createElement("option");

opt.value = 29;

opt.text = 29;

gun.appendChild(opt);

 

opt = document.createElement("option");

opt.value = 30;

opt.text = 30;

gun.appendChild(opt);

} else if (gun.length == 30) {

opt = document.createElement("option");

opt.value = 30;

opt.text = 30;

gun.appendChild(opt);

}

break;

case 2:

if (gun.length == 32) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 31) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 30) {

gun.remove(gun.length - 1);

}

 

if (yil.value != "") {

if (yil.value % 4 == 0) {

if (gun.length == 32) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 31) {

gun.remove(gun.length - 1);

} else if (gun.length == 29) {

opt = document.createElement("option");

opt.value = 29;

opt.text = 29;

gun.appendChild(opt);

}

}

else {

if (gun.length == 32) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 31) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 30) {

gun.remove(gun.length - 1);

}

}

}

 

break;

 

}

}

 

function yilkontrol() {

var gun = document.getElementById("gun");

var ay = document.getElementById("ay");

var yil = document.getElementById("yil");

var indis = ay.selectedIndex;

 

if (yil.value != "" && indis == 2) {

if (yil.value % 4 == 0) {

if (gun.length == 32) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 31) {

gun.remove(gun.length - 1);

} else if (gun.length == 29) {

opt = document.createElement("option");

opt.value = 29;

opt.text = 29;

gun.appendChild(opt);

}

}

else {

if (gun.length == 32) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 31) {

gun.remove(gun.length - 1);

gun.remove(gun.length - 1);

} else if (gun.length == 30) {

gun.remove(gun.length - 1);

}

}

}

 

}

function odaklan(x,y) {

var tarayici = navigator.userAgent;

 

if (tarayici.indexOf("Chrome") != -1 || tarayici.indexOf("Safari") != -1) {

if (x.value == y) {

window.setTimeout(function () {

x.focus();

x.setSelectionRange(0, 0);

}, 0);

}

}

else {

if (x.value == y) {

x.focus();

x.setSelectionRange(0, 0);

}

}

 

}

 

function giris(x, y) {

if (y.indexOf("Şifre") != -1)

x.type = "password";

 

 

if (x.value == y)

x.value = "";

}

 

function terket(x,y) {

if (y.indexOf("Şifre") != -1)

if (x.value == y || x.value=="")

x.type = "text";

 

if (x.value == "")

x.value = y;

}

 

 

function emailkontrol() {

 

var email = document.getElementById('txtEmail');

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

 

if (!filter.test(email.value)) {

alert('Lütfen doğru e-mail adresi giriniz');

email.focus;

return false;

}

}

 

function goster() {

var ad = document.getElementById("Text1");

var soyad = document.getElementById("Text2");

var email1 = document.getElementById("Text3");

var email2 = document.getElementById("Text4");

var sifre = document.getElementById("Text5");

 

var gun = document.getElementById("gun");

var ay = parseInt(document.getElementById("ay").value)+1;

var yil = document.getElementById("yil");

 

var cin = document.getElementsByName("cinsiyet");

for (i = 0; i < cin.length; i++) {

if (cin[i].checked) {

cinsiyet = cin[i].nextSibling.data;

break;

}

}

 

mesaj.innerHTML = "Adı : " + ad.value + "<br>";

mesaj.innerHTML += "Soyadı : " + soyad.value + "<br>";

mesaj.innerHTML += "Email Adresi : " + email1.value + "<br>";

mesaj.innerHTML += "Şifresi : " + sifre.value + "<br>";

mesaj.innerHTML += "Doğum Tarihi : " + gun.value + "/" + ay + "/" + yil.value + "<br>";

mesaj.innerHTML += "Cinsiyeti : " + cinsiyet;

}

</script>

<style type="text/css">

.giris {

width: 270px;

padding: 15px 25px;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 400;

font-size: 16px;

color: #9D9E9E;

text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);

background: #FFF;

border: 1px solid #FFF;

border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

}

 

.giris:focus {

background: #DFE9EC;

color: #414848;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

outline: 0;

}

 

.giris:hover {

background: #DFE9EC;

color: #414848;

}

 

.dt {

width: 80px;

padding: 5px 5px;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 100;

font-size: 16px;

color: #9D9E9E;

text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);

background: #FFF;

border: 1px solid #FFF;

border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

}

 

.dt:focus {

background: #DFE9EC;

color: #414848;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

outline: 0;

}

 

.dt:hover {

background: #DFE9EC;

color: #414848;

}

 

.dtay {

width: 100px;

padding: 5px 5px;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 100;

font-size: 16px;

color: #9D9E9E;

text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);

background: #FFF;

border: 1px solid #FFF;

border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

}

 

.dtay:focus {

background: #DFE9EC;

color: #414848;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

outline: 0;

}

 

.dtay:hover {

background: #DFE9EC;

color: #414848;

}

 

.buton

{

width:160px;

height:40px;

font-size:large;

font-weight:bold;

background-color:Green;

border: 1px solid;

-webkit-border-radius: 5px;

color:#fff;

display:inline-block;

cursor:pointer;

position: relative;

text-shadow: 0 1px 2px rgba(0,0,0,.5);

border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);

}

</style>

</head>

<body>

<table>

<tr>

<td>

<input class="giris" id="Text1" type="text" value="Adın" onfocus="odaklan(this,'Adın')" onblur="terket(this,'Adın')" onkeypress="giris(this,'Adın')" />

</td>

</tr>

<tr>

<td>

<input class="giris" id="Text2" type="text" value="Soyadın" onfocus="odaklan(this,'Soyadın')" onblur="terket(this,'Soyadın')" onkeypress="giris(this,'Soyadın')" />

</td>

</tr>

<tr>

<td>

<input class="giris" id="Text3" type="text" value="E-mail Adresin" onfocus="odaklan(this,'E-mail Adresin')" onblur="terket(this,'E-mail Adresin')" onkeypress="giris(this,'E-mail Adresin')" />

</td>

</tr>

<tr>

<td>

<input class="giris" id="Text4" type="text" value="E-mail Adresini Tekrar Gir" onfocus="odaklan(this,'E-mail Adresini Tekrar Gir')" onblur="terket(this,'E-mail Adresini Tekrar Gir')" onkeypress="giris(this,'E-mail Adresini Tekrar Gir')" />

</td>

</tr>

<tr>

<td>

<input class="giris" id="Text5" type="text" value ="Yeni Şifre" onfocus="odaklan(this,'Yeni Şifre')" onblur="terket(this,'Yeni Şifre')" onkeypress="giris(this,'Yeni Şifre')" />

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td colspan="3"><h2>Doğum Tarihi</h2></td>

</tr>

<tr>

<td>

<select class="dt" id="gun">

<option value="0">Gün</option>

</select>

</td>

<td>

<select class="dtay" id="ay" onchange="aykontrol()">

<option value="0">Ay</option>

</select>

</td>

<td>

<select class="dt" id="yil" onchange="yilkontrol()">

<option value="0">Yıl</option>

</select>

</td>

</tr>

<tr>

<td>

<h4><input id="Radio1" type="radio" name="cinsiyet" value="1" />Erkek</h4>

</td>

<td>

<h4><input id="Radio2" type="radio" name="cinsiyet" value="2" />Kadın</h4>

</td>

<td>

</td>

</tr>

</table>

<input class="buton" id="Button1" type="button" value="Hesap Aç" onclick="goster()" />

<div id="sonuc">

 

<span id="mesaj"></span>

 

</div>

 

</td>

</tr>

</table>

</body>

</html>

Projeyi çalıştırdığınızda aşağıdaki ekran görüntüsü oluşur.

Yeni bir makalede görüşmek üzere...


İlgili Makaleler
JQuery Script Dilinde preventDefault, stopPropagation ve return false Olayı
JQuery Script Dilinde bind ve unbind Fonksiyonları
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
JQuery Script dilinde dblclick Olayı
Web Sayfasını Word Programına Aktaran Programı JQuery İle Yapınız
Html Dom Yapısını Anlamak
Verilen Bir Resmin Ekranın Sağ Orta Noktasından Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
Jquery İle JSON Verisi Oluşturmak ve Okumak
Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
Paralel Kenarın Alanını Bulan Programı JQuery Script Dilinde Yapınız
Ekranın Ortasında Tanımlı Bir Div İçinde Sağ Ortadan Başlayıp Sol Ortadan Bitiren Animasyonu JQuery İle Yapınız
Dikdörtgenin Alanını Bulan Programı JQuery Script Dilinde Yapınız
Ekranın Ortasında Tanımlı Bir Div İçinde Sol Alt Köşeden Başlayıp Sağ Üst Köşede Biten Animasyonu JQuery İle Yapınız
Jquery Yardımıyla Harici JSON Dizi Elemanlarını Listeleme
Verilen Bir Resmin Ekranın Sağ Alt Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
Verilen Bir Resmin Ekranın Sol Üst Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
Ekranın Ortasında Tanımlı Bir Div İçinde Sol Üst Köşeden Başlayıp Sağ Alt Köşede Biten Animasyonu JQuery İle Yapınız
JQuery Kodlarıyla Metne Değişik Animasyonlar Uygulama
AYT 123 Sayısına Sırasıyla Uygulanan Adımlar Sonucunda 75. Adımda Elde Edilen Sayıyı Bulan JQuery Uygulaması
jQuery Uygulamasında Balon Patlatma Oyunu

Yorum Ekle
   
Kötü İyi