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...