Webmaster
Tasarım Dersleri
Kullanıcı girişi
Kimler çevrimiçi
Son yorumlar
- tamadır teşekkür ederim :)
1 hafta 6 days önce - CVP:arkadaşım sen iyi niyetimi
1 hafta 6 days önce - arkadaşım sen iyi niyetimi
2 weeks 9 hours önce - CVP:şu cevabınn
2 weeks 1 gün önce - şu cevabınn
2 weeks 1 gün önce - CVP:Makaleniz hakkında
2 weeks 2 days önce - Makaleniz hakkında
2 weeks 2 days önce - oldukça güzel görünüyor. Bİz
3 weeks 21 hours önce - sanal kontör
3 weeks 4 days önce - Cozum bulundu mu?
5 weeks 4 days önce
Etiket bulutu
Java Script Form Nesnesi
Form Komutları
Sayfadaki form nesnelerini, name parametresiyle tanımladığımız
isimler aracılığıyla çağırabiliriz: document.forms.yeniform gibi.
Form komutlarını da bu kök üzerine yerleştiririz. Form komutlarını
topluca listeledim.
action Formun işlem sayfasına girmesini sağlar.
method Formun metodunu girer (post/get).
reset() Form bilgilerini siler (resetler).
submit() Form bilgilerini girer.
acceptCharset İstemcinin (server`ın) desteklediği karakter listesini
girer.
elements Form elemanlarını bir dizi haline getirerek girer.
Bu komutlar üzerinde şimdilik fazla durmayalım, çünkü henüz bu tip
bir uygulama yapmaya bilgilerimiz yeterli değil. ASP ve CGI
derslerimizde bu komutları fazlasıyla kullanacağız. Yine de
bazılarının işlevini sizler anlamışsınızdır. Çoğu okuyucunun
Ziyaretçi Defteri, Bilgi Giriş Formu, Tartışma Forumu, Arama Motoru
yapmak için sabırsızlandığını hatta için için henüz göstermediğim
için bana kızdığını biliyorum. :) Ama şunu belirtmeliyim ki bu tip
araçları sadece HTML ve JavaScript ile yapamazsınız. JavaScript
bilgileri saklamaz, depolamaz, veri tabanı oluşturmaz; sadece sayfa
yüklüyken değişkenlerinde veri tutabilir. Herşeyi hemen yapmak
isteyen arkadaşlar birazcık sabretsin ve bu sayfanın altındaki
bilgileri öğrenmeye çalışsınlar. CGI ve ASP derslerinde acısını
çıkaracağız ama önce bir script dilini çok iyi öğrenmek gerekir.
Bilgi Giriş Elemanları
Bilgi giriş elemanlarının (düğme, metin kutusu, kontrol
kutusu,vb.) yapısını HTML derslerimizde görmüştük. O sayfada form
araçlarının parametreleri de tanıtılmıştı. İstersek o parametreleri
JavaScript koduyla tanımlayabiliriz. Örneğin metin kutusunun
uzunluğunu karakter cinsinden belirleyen size parametresini
JavaScript kodlarıyla tanımlayalım:
Javascript:
<html>
<head>
<title>Size Parametresi,</title>
<script language="JavaScript">
function uzunluk(x)
{
document.forms.Form1.mesaj.size=x
}
</script>
</head>
<body>
<form name="Form1">
Notunuz:<input name="mesaj"><br><br>
<table cellpadding="0" cellspacing="0" border="0" width="400"><tr>
<td><input type="button" onclick="uzunluk(10)" value="Kısa Not"></td>
<td><input type="button" onclick="uzunluk(40)" value="Orta Not"></td>
<td><input type="button" onclick="uzunluk(70)" value="Uzun Not"></td>
</tr></table>
</form>
</body>
</html>
size parametresi öğrendiklerimizden sadece bir tanesi. Diğer
parametreleri de bu şekilde kullanabiliriz. Örneğin maksimum
karakter girişini belirlemek için document.forms.Form1.mesaj.maxlength
kodundan yararlanabiliriz. Gerisini sizlerin yaratıcılığına
bırakayım.
Hatırlarsanız, bir de value parametresi vardı. Bu parametreyle metin
kutusuna yazı yazdırabiliyorduk. JavaScript kodlarıyla bu
parametreyi, metin kutusuna yazılı olan ifadeyi değişkenlere
aktarmak için kullanabiliriz:
Javascript:
<html>
<head>
<title>Form Sayfası,</title>
<script language="JavaScript">
function gir()
{
bilgi1.innerHTML=document.forms.kimlik.veri1.value
bilgi2.innerHTML=document.forms.kimlik.veri2.value
bilgi3.innerHTML=document.forms.kimlik.veri3.value
bilgi4.innerHTML=document.forms.kimlik.veri4.value
bilgi5.innerHTML=document.forms.kimlik.veri5.value
}
</script>
</head>
<body>
<form name="kimlik">
Adınız:<input name="veri1">
SoyAdınız:<input name="veri2"><br>
Yaşınız:<input name="veri3">
Cinsiyetiniz:<input name="veri4">
Telefonunuz:<input name="veri5"><br><br>
<input type="button" value="Bilgileri Tabloya Gir" onclick="gir()"><br><br>
<table cellpadding="5" cellspacing="0" border="1">
<tr><td width="100">Adı:</td><td id="bilgi1" width="300"> </td></tr>
<tr><td>SoyAdı:</td><td id="bilgi2"> </td></tr>
<tr><td>Yaşı:</td><td id="bilgi3"> </td></tr>
<tr><td>Cinsiyeti:</td><td id="bilgi4"> </td></tr>
<tr><td>Telefonu:</td><td id="bilgi5"> </td></tr>
</table>
</form>
</body>
</html>
Bu uygulamayla bir Bilgi Giriş Formu yaptık aslında. Ama bir farkla,
girdiğimiz bilgiler pencere kapatılınca yok oluyor. Buradan şu
sonucu çıkartabilirsiniz: JavaScript bilgileri aktarmaya ve
dönüştürmeye yarar ancak o bilgileri saklamaya yaramaz. Bunun için
veri tabanı gereklidir ve bu veri tabanını CGI ve ASP derslerimizde
oluşturacağız. Sanırım şimdi daha iyi anlaşıldı.
Veri tabansız da birçok güzel şey yapılabiliniyor. Son uygulamamızı
anlayan arkadaşlar rahatlıkla basit bir hesap makinesi
yapabileceklerdir. Normal metin kutusu ve düğmeler yerine resimler
de kullanılabilinir. İsterseniz deneyin, zor bir tarafı yok. Ders
sayfalarının sonunda yer alan Hesap Makineleri örneklerine de
bakabilirsiniz.
Kontrol kutularını seçmek için checked parametresini true değeri
verebiliriz veya bunu JavaScript ile document.forms.form1.kontrolkutusu1.checked=true
şeklinde ifade edebiliriz. Hatırlayacağınız üzere; radyo kutusunun
işlevi gereği sadece birinin seçilmesi için, her kutuya aynı ismi
veriyorduk. Bu durumda yukarıda yazıldığı gibi name özelliğini
kullanamayız ama id parametresini kullanarak bu sorunu
halledebiliriz. Aşağıdaki uygulamaya bakalım.
Javascript:
<html>
<head>
<title>Bundylogy Sorusu,</title>
<script language="JavaScript">
function cevap()
{
if (document.soru.rad3.checked==true) paragraf.innerHTML="En doğru
cevabı işaretlediniz. Bravooo!"
else paragraf.innerHTML="Doğru ama en doğru değil, Al Bundy
mantığıyla düşünün."
}
</script>
</head>
<body>
<form name="soru">
<b>Al Bundy soruyor:</b>Marcy Darcy kimdir? (Doğruluk derecesi en
yüksek olanı işaretleyin lütfen...)<br>
<label for="rad1">
<input type="radio" id="rad1" name="radyo"> Part time çalışan bir
paperboy`dur.
</label><br>
<label for="rad2">
<input type="radio" id="rad2" name="radyo"> Jefferson Darcy`nin
kocasıdır.
</label><br>
<label for="rad3">
<input type="radio" id="rad3" name="radyo"> Bir tavuktur.
</label><br>
<label for="rad4">
<input type="radio" id="rad4" name="radyo"> Materyalist ruhu
gelişkin bir banka çalışanıdır.
</label><br>
<label for="rad5">
<input type="radio" id="rad5" name="radyo"> Bundy`lerin komşusudur.
</label><br>
<input type="button" value="Değerlendir" onclick="cevap()">
<p id="paragraf">Doğru seçeneği işaretlediğinizden eminseniz,
yukarıdaki düğmeye basın.</p> </form>
</body>
</html>
Sözün özü, tüm parametreleri komut haline getirebiliyoruz. Bunun
yanısıra Form Elemanları için kullanılan başka komutlar da var:
focus() Tanımlanan bilgi giriş aracına odaklanmayı sağlar.
blur() Tanımlanan bilgi giriş aracının odak halinden çıkmasını
sağlar.
click() Tanımlanan bilgi giriş aracını tıklamaya yarar.
select() Tanımlanan bilgi giriş aracının seçili hale gelmesini
sağlar..
Tüm bu komutların yer aldığı öğretici bir uygulama yapalım:
Javascript:
<html>
<head>
<title>Bilgi giriş eleman komutları,</title>
<script language="JavaScript">
function komut(x)
{
switch(x)
{
case 1: document.form1.metinkutusu.select()
break
case 2: document.form1.metinkutusu.focus()
break
case 3: document.form1.metinkutusu.blur()
break
case 4: document.form1.dugme.click()
}
}
</script>
</head>
<body>
<form name="form1">
<input name="metinkutusu" value="metin kutusu">
<input type="button" name="dugme" value="uyarı düğmesi" onclick="alert(`Alarm!!!`)"><br><br>
<input type="button" value="Metin kutusuna odaklan" onclick="komut(2)"><br>
<input type="button" value="Metin kutusundaki yazıyı seç" onclick="komut(1)"><br>
<input type="button" value="Metin kutusunu seçili halden çıkar"
onclick="komut(3)"><br>
<input type="button" value="Uyarı düğmesine bas" onclick="komut(4)"><br>
</form>
</body>
</html>
Bu uygulamamızı irdeleyelim biraz: select() komutu form aracını
seçili hale getiriyor ve odaklıyor. Yani ayrıca odaklamamıza gerek
kalmıyor, üzerine blur() komutunu uygularsak, odaklanma kalkıyor ama
seçili hal devam ediyor tabi.
Seçenek Kutusu
HTML derslerinde seçenek kutusunun nasıl görüntülendiği
anlatılmıştı ama nasıl kullanıldığı üzerine birşey söylenilmemişti.
Şimdi söyleyelim. Seçenek kutusunda kullanıcının işaretlediği
seçeneği selectedIndex komutuyla indeks (sıra) numarası cinsinden
ifade ediyoruz:
Javascript:
<html>
<head>
<title>Seçenek Kutusu İndeksleri,</title>
<script language="JavaScript">
function sec()
{
var x=document.sira_no.yazar.selectedIndex
alert(x+1)
}
</script>
</head>
<body>
<form name="sira_no">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>
<input type="button" value="Kaçıncı Seçenek" onclick="sec()">
</form>
</body>
</html>
Bu uygulama, kullanıcının seçtiği seçeneğin sıra numarasını
gösteriyor. selectedIndex komutu ile seçeneğe 0 (sıfır) değeri
verdiğinden, uygulamada sıra numarasını x+1 şeklinde ifade ettik.
Seçenek kutusundaki seçenekler options isimli bir dizi oluşturur.
İlk seçenek options[0] şeklinde belirtilir. options[0].text ise, ilk
seçeneği metinsel değer olarak ifade eder. Önceki uygulamada
kullanıcının seçtiği seçeneğin sıra numarasını ifade ediyorduk. Sıra
numarası yerine, seçeneği doğrudan nasıl ifade edebiliriz?
Javascript:
<html>
<head>
<title>Seçenek Kutusu: Seçilen Seçeneği Gösterme,</title>
<script language="JavaScript">
function sec()
{
var x=document.secenek.yazar.selectedIndex
var y=document.secenek.yazar.options[x].text
alert(y)
}
</script>
</head>
<body>
<form name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>
<input type="button" value="Hangi Seçenek" onclick="sec()">
</form>
</body>
</html>
Ne yaptık? Kullanıcının seçtiği seçeneği sıra sayısı cinsinden ifade
ettik. (selectedIndex ile) Sonra seçilen sıra numarasını options
dizini ve text komutu sayesinde metinsel değere dönüştürdük. text
yerine index komutu kullansaydık, yine sıra numarası elde edecektik.
Dilersek text komutunu seçeneklerin metnini değiştirmek için
kullanabiliriz.
Javascript:
<html>
<head>
<title>Seçenek Kutusu Seçenek Değiştirme,</title>
<script language="JavaScript">
function secenekekle()
{
var x=document.forms.secenek.adsoyad.value
var y=document.secenek.yazar.selectedIndex
document.secenek.yazar.options[y].text=x
}
</script>
</head>
<body>
<form name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
Yazar ismi:
<input name="adsoyad" size="80">
<input type="button" value="Seçeneği Değiştir" onclick="secenekekle()">
</form>
</body>
</html>
Seçenek kutusunu düğmeyle beraber kullanmak zorunda değiliz. Seçenek
kutusunda başka bir seçeneği işaretlediğimiz zaman işlem yapılacaksa
onchange olayı kullanılmalıdır.
Javascript:
<html>
<head>
<title>Seçenek Kutusu: OnChange Olayı,</title>
<script language="JavaScript">
function degistir()
{
var x=document.secenek.yazar.selectedIndex
yazi.innerHTML=document.secenek.yazar.options[x].text
}
</script>
</head>
<body>
<form name="secenek" onchange="degistir()">
<select name="yazar">
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
<p id="yazi">Seçeneği değiştiriniz...</p>
</form>
</body>
</html>
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
CSS . html . css nedir . Linux . nasıl kurulur . internet . SCADA . MySQL nedir . domain piyasası . PHPRunner . PHPRunner kullanımı . PHPRunner hakkında bilgi . PHPRunner nedir . Top PHP Studio . Top PHP Studio indir . Top PHP Studio nedir . USB ADSL modem . kablosuz ağ . Ubuntu linux . Google Earth . Zone Alarm . CSS kodlama . HMI . HMI nedir . HMI nasıl kullanılır . Scada nedir . Scada nasıl kullanılır . Video . Cacti . Cacti nedir . Cacti kurulumu . Rsyslog . Rsyslog nedir . Rsyslog kurulumu . Nagios . Nagios nedir . Nagios kurulumu . Apache . Apache nedir . Apache kurulumu . MySQL kurulumu . Squid . Squid nedir . Squid kurulumu . Dansguardian . Dansguardian nedir . Dansguardian kurulumu . Postfix . Postfix nedir . Postfix kurulumu . Dovecot . Dovecot nedir . Dovecot kurulumu . Dbmail . Dbmail nedir . Dbmail kurulumu . OpenLDAP . OpenLDAP nedir . OpenLDAP kurulumu . ProFTP . ProFTP nedir . ProFTP kurulumu . Samba . Samba nedir . Samba kurulumu . BIND . BIND nedir . BIND kurulumu . dhcp3 server . DHCP . DHCP nedir . DHCP kurulumu . WIPO Kimdir . WIPO Nedir . WIPO . Aveamüzik Radyo . Sabit disk . Harddisk . Advanced Format nedir . kodlama .














Yeni yorum gönder