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
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 Web Sayfasından JSON Veri Çekme
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
JQuery Script Dilinde bind ve unbind Fonksiyonları
JQuery Script Dilinde click Olayı
JQuery Script Dilinde focus ve blur Olayları
JQuery Script Dilinde change Olayı
Jquery Yardımıyla Harici JSON Dizi Elemanlarını Listeleme
Ekranın Ortasında Tanımlı Bir Div İçinde Sağ Ortadan Başlayıp Sol Ortadan Bitiren Animasyonu JQuery İle Yapınız
JQuery Script Dilinde preventDefault, stopPropagation ve return false Olayı
Web Sayfasını Word Programına Aktaran Programı JQuery İle Yapınız
Verilen Resmi Ekranın Ortasında Büyüyerek Görüntüleyen Programı JQuery İle Yapınız
Web Sayfasını Excel Programına Aktaran Programı JQuery İle Yapınız
JQuery Script dilinde dblclick Olayı
Jquery İle JSON Verisi Oluşturmak ve Okumak
AYT 123 Sayısına Sırasıyla Uygulanan Adımlar Sonucunda 75. Adımda Elde Edilen Sayıyı Bulan JQuery Uygulaması
Girilen Bir Üniversite Adını BootStrap İle Görüntüleyen Programı jQuery ile kodlayınız
Verilen Bir Resmin Ekranın Sağ Alt Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
JQuery Script Dilinde İsim Uzayı (namespace) Kullanmak
Verilen İki Sayıyı Çıkaran Programı JQuery Script Dilinde Yapınız

Yorum Ekle
   
Kötü İyi