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
2022 TYT Matematik Ondördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Üçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Birinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Yirmiüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Core Mvc Projesinde Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
2022 TYT Matematik Onsekizinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Resmin Ekranın Sol Üst Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
2022 TYT Matematik Yirmidördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onyedinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
2022 TYT Matematik Onbeşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onbirinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2023 TYT Matematik Beşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
JQuery Script Dilinde bind ve unbind Fonksiyonları
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
2022 TYT Matematik Altıncı Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onaltıncı Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Html Dom Yapısını Anlamak
Girilen 10 Sayıdan Üçe Bölünen En Küçük Sayıyı Bulan Programı Core Mvc BootStraple Tasarlayıp Jquery Dilinde Kodlayınız

Yorum Ekle
   
Kötü İyi