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
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
Ekranın Ortasında Tanımlı Bir Sahnede Yön Tuşlarıyla Hareket Eden Nesne Animasyonunu JQuery İle Yapınız
JQuery Script Dilinde Timer Kullanımı
Koordinat düzleminde verilen iki nokta arasındaki uzunluğu bulan uygulamayı yapınız
Girilen Bir Üniversite Adını BootStrap İle Görüntüleyen Programı jQuery ile kodlayınız
İki Sayıyı Toplayan Programı JQuery Script Dilinde Kodlayınız
jQuery ile Sayıları Sayaç Yöntemiyle Girip İki Basamaklı Olanları Bulma
JQuery Yazım Kuralları
JQuery Fonksiyon Yazım Kuralları
Girilen 10 Sayıdan Üçe ve Beşe Bölünenleri ve Adedini Bulan Uygulamayı BootStrap İle Tasarlayıp jQuery İle Kodlayınız
3 Farklı Önermenin Doğruluk Tablosunu Bulan Uygulamayı jQuery Kodlarıyla Yapınız
JQuery Nasıl Kullanılır?
JQuery Nedir?
jQuery ile Sayıları Sayaç Yöntemiyle Girip Tek Sayıları Toplama
jQuery Uygulamasında Fonksiyonlara Parametre Ekleme
BootStrap Tema ve JQuery Kodlarıyla Puzzle Oyunu Yapma
jQuery Uygulamasında MouseOver, MouseOut Olayları
JQuery Uygulamasında Ekranın Etrafında Dolaşan Kutu Animasyonu
jQuery Programında Random Sayı Üretme
jQuery Uygulamasında Sayaç Uygulaması

Yorum Ekle
   
Kötü İyi