Tweet

Makaleler » JavaScript - Html

JavaScript | Dinamik İçerik

Aşağıda verdiğim kod Javascript ile yazılmış ve bir çok amaç için kullanılabilir. örneğin scripte girilen haberler bir layer içerisinde sürekli değişe bilir. Daha yaratıcı fikirlerde kullanılmaya açıktır.
Örneğin Haber yerine resim eklediğimizde ufak bir galeri show yapmış oluruz.

CODE:
<SCRIPT type=text/javascript>

var scrollerdelay='3000' //delay between msg scrolls. 3000=3 seconds.
var scrollerwidth='183px'
var scrollerheight='110px'
var scrollerbgcolor='' //set below to '' if you don't wish to use a background image
var scrollerbackground='scrollerback.gif'
var test
//configure the below variable to change the contents of the scroller
var messages=new Array()
messages[0]= "<span class=topic><strong>Haber 1</strong></span><br><div align=justify class=topictexts>Haber 1 ile ilgili açıklamalar</div><br>";
test="";
if (test != " ")
messages[1]="<span class=topic><strong>Haber 2</strong></span><br><div align=justify class=topictexts>Haber 2 İle ilgili açıklamalar.</div><br><br>";

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (messages.length>2)
i=2
else
i=0

function move(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move(tdiv)",scrollerdelay)
setTimeout("move2(second2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move(tdiv)",50)
}
else{
tdiv.style.top=parseInt(scrollerheight)+"px"
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move2(tdiv2)",scrollerdelay)
setTimeout("move(first2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move2(second2_obj)",50)
}
else{
tdiv2.style.top=parseInt(scrollerheight)+"px"
tdiv2.innerHTML=messages[i]

if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}

if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}

if (window.addEventListener)
window.addEventListener("load", startscroll, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroll)
else if (ie||dom)
window.onload=startscroll

</SCRIPT>
Dia | 25 Ocak 2007 10:26 | Yorum(0) | devamı »

JavaScript | Sağ Click Engelleme

Ziyaretçilerinizin sayfanızda sağ click yapmasını engellemek istiyorsanız işte kodlar...

CODE:
<script language="JavaScript">
<!--
document.oncontextmenu = function(){return false}
if(document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = function(e){
if(e.target==document)return false;
}
}
else {
document.onmousedown = function(){return false}
}
// -->
</script>


Sayfadaki yazıların seçilmesini istiyorsan BODY etiketi içerisine aşağıdaki kodları yazman yeterlidir.

CODE:
onselectstart="return false"
Dia | 28 Aralik 2006 16:46 | Yorum(0) | devamı »

Htaccess Düzenlemek

Apache Server'da tek bir text dosyası ile tüm Web sitenizde değişiklikler yapabilirsiniz&#8230;
Evet bu marifetli text dosyasının adı (.htaccess). .htaccess Apache Web sunucularında (Yani Apache yazılımının kurulu olduğu Web sunucuları diyelim) bulunan çok önemli bir özelliktir. Basitçe anlatmak gerekirse, .htaccess dosyası Apache Web sunucusundaki, servis sağlayıcısının default olarak belirlemiş olduğu server konfigürasyonlarından bazılarını değiştirmenizi sağlar (Tabi servis sağlayıcınızın buna izin vermiş olması kaydıyla&#8230; Aşağıdaki örneklerden herhangi birini test ederek bunu anlamak mümkün).

.htaccess dosyası nedir?: .htaccess dosyası, aynen bu isimle kaydedilmiş bir text dosyasıdır. .htaccess dosyasını herhangi bir text editörünü kullanarak hazırlayıp Web sunucunuza yükleyebilirsiniz.

Ancak dikkat ediniz, yaptığınız en ufak bir kod hatası, Web sitenizin devre dışı kalmasına neden olur! Ama hemen korkmayın, eğer böyle bir şey olursa, yarattığınız .htaccess dosyasını sildiğinizde sorun giderilecektir.
Önemli: Başlamadan önce sürprizle karşılaşmamanız için bir uyarı. Bazı durumlarda .htaccess dosyasını silmek istediğinizde, ftp programında bir uyarı mesajı çıkabilir (Directory Not Empty!) ve dosyayı silemeyebilirsiniz. Bunun çözümü de basit&#8230; Hemen içinde hiçbir kod yazmayan bir .htaccess dosyası yaratıp Web sitenize geri yükleyin ve sonra bu dosyayı silin, olsun bitsin.

.htacces dosyasını nereye yükleyeceğiz?: Eğer .htaccess dosyası ile yaptığınız değişikliğin tüm Web siteniz için geçerli olmasını istiyorsanız, bu dosyayı Web sitenizin ana dizinine yüklemelisiniz. Yok hayır, sadece bir klasör içindeki dokümanları etkilesin diyorsanız o zaman yüklemeyi ilgili klasöre yapacaksınız.
Hokus pokus başlıyor! Hata sayfalarımızı özelleştirelim
Bilirsiniz, ziyaretçiler Web sitenizde bir sayfayı bulamayınca ya da bir server hatası olunca karşımıza (çoğu zaman İngilizce) bir hata sayfası çıkar. Bu sayfaları kendi web sayfanızın tasarımına uygun olarak özelleştirmek istemez misiniz?En sık karşılaşılan hata mesajları 404 Sayfa Bulunamadı ve 500 Server Hatası'dır.
Şimdi, bir .htaccess dosyası yaratıp içine aşağıdaki kodları yazın:
ErrorDocument 404 /404.html
ErrorDocument 500 /500.html
Sonra 404.html ve 500.html olarak iki tane sayfa hazırlayın (içine istediğiniz gibi yazılarınızı ve tasarımınızı yerleştirin) ve hazırladığınız tüm dosyaları sunucunuza yükleyin. Şimdi web sitenizde bir sayfa bulunamadığında ya da bir hata olduğunda karşınıza sizin özel hazırladığınız sayfalar çıkacak! (html dosyalarına başka isimler de verebilirsiniz, 404.html ve 500.html yazmanız şart değil. Ama dosya adlarını .htaccess kodunda da değiştirmelisiniz.)
Bir sayfayı başka bir sayfaya yönlendirelim
Diyelim ki Web sitenizdeki bir sayfayı daha önceden birçok insan bookmark etmiş ve sürekli ziyaret ediyor. Ama siz bu sayfanın dizinini değiştirmek istiyorsunuz ve bunu yaptığınızda ziyaretçilerin eski sayfa adresine gittiğinde "Sayfa görüntülenemiyor!" mesajını almasını istemiyorsunuz. Kolayı var, işte .htaccess kodumuz:
Redirect /eski klasör/eski.html http://www.sitenizin adresi.com/yeni klasör/yeni.html
Yukarıdaki kodu kendi bilgilerinize göre özelleştirip web sitenize yükleyin.
Html dosyaları php kodlarını yorumlasın!
Bildiğiniz gibi php kodları ancak .php uzantılı web sayfalarında çalışır. Pekiyi diyelim ki .html uzantılarıyla 100 sayfalık bir site yaptınız, ve bir gün sitenizde php kullanmaya karar verdiniz&#8230; Şimdi bütün sayfaların uzantılarını ve sayfalar arasındaki linkleri tümden değiştirmeniz mi lazım?? Şüphesiz hayır.
AddType application/x-httpd-php .html
.htaccess dosyasına yazacağınız bu kod sayesinde .html uzantılı dosyalarınız php kodlarını sorunsuz olarak çalıştıracaktır. Eğer isterseniz .html yerine başka uzantı da yazabilir ya da birden fazla uzantıya php kullanımı için izin verebilirsiniz.
AddType application/x-httpd-php .html .htm .txt

Html sayfalarımda SSI çalışsın!
SSI (Server Side Include) Apache serverin sunduğu bir başka muhteşem özelliktir. Bu özellik sayesinde bir sayfayı bir başka sayfa içinde tek satır kod yazarak görüntülemek mümkündür (<!--#include virtual="sayfa.shtml" -->).
Eğer aksini belirtmezseniz bu özellik sadece .shtml ve .shtm uzantılı sayfalarda çalışır. Bu özelliği normal .html uzantılı dosyalarınızda kullanmak isterseniz&#8230;
AddType text/html .shtml
AddHandler server-parsed .html
Options Indexes FollowSymLinks Includes
Kodunu .htaccess dosyanıza yazmanız yeterlidir! İkinci satır sonundaki .html sunucuya (.html uzantılı dosyalarda SSI özelliğini kullan) der. İkinci satırdaki kodu başka uzantılar içinde ekleyerek bu özelliği diğer sayfalarınıza da verebilirsiniz:
AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .htm
Options Indexes FollowSymLinks Includes
Ana sayfamızı değiştirelim!
Web tarayıcınıza Web adresinizi yazdığınızda karşınıza ilk çıkan sayfa index.htm, index.html, default.htm gibi, sunucu tarafından önceden tanımlanmış default sayfadır.
Pek iyi diyelim ki sitenizin ana sayfasında güncelleme yapıyorsunuz ve bu süre içinde sitenizi kapatmak istemiyorsunuz. Ne yapacaksınız? Efendim? İndex sayfanızın adını mı değiştireceksiniz? Yok hiç gerek yok!
DirectoryIndex dosyaadı.html
Bu kodu ziyaretçilerin sitenize girdiği zaman ilk görmesini istediğiniz sayfaya göre değiştirin ve siz arka planda rahat rahat çalışın&#8230; İşiniz bitince .htaccess dosyasını siliverin.
Dizinin görüntülenmesini engelleyin
Bazı sunucularda eğer bir dizinde bir index sayfası bulunmuyorsa o dizin içindeki tüm dosyalar alt alta Web tarayıcısında görünür! Bu özellikle herkesin erişmesini istemediğimiz sayfaların bulunduğu (örneğin şifrelerimizin yazılı olduğu bir dosya olabilir) dizinlerde büyük bir güvenlik açığı yaratır. Hatayla index sayfasını silerseniz, başınıza iş açabilirsiniz. Bu sorunu engellemek için, aşağıdaki kodu özelleştirin ve korumak istediğiniz dizine yükleyin:
IndexIgnore *
Eğer bu dizinde sadece jpeg ve gif uzantılı resim dosyalarının görüntülenmesini istiyorsanız o zaman;
IndexIgnore *.gif *.jpg
yazın (Aynı formatta istediğiniz gibi bu satıra uzantı ekleyebilirsiniz).
İstemediğiniz kişiler sayfanıza girmesin!
Bazı dizinlerinize herkesin ulaşmasını istemeyebilirsiniz.
order allow,deny
deny from 123.45.6.7
deny from 012.34.5.
allow from all
Bu satırlar şu anlama geliyor&#8230; Bu dizindeki sayfalara Internete 123.45.6.7 ve 012.34.5. IP numarası ile bağlanan kişiler giremesin, diğer herkes girsin! IP numaraları superonline, ttn.net gibi bir servis sağlayıcı ile Internet'e bağlananlar için sürekli değişir, ancak kendi serverlarından bağlanan şirketler, kişiler için sabittir. İsterseniz kodu şöyle de yazabilirsiniz:
order allow,deny
deny from .superonline.com
allow from all
Bu şekilde sitenize superonline üzerinden erişimi engellemiş olursunuz (bunu neden yapmak gereği duyacağınızı sormayın, benim işim kodları anlatmak.)
Ya da;
order allow,deny
deny from all
allow from .superonline.com
yazarak sitenize sadece superonline üzerinden erişim sağlayabilir, diğerlerini bloke edebilirsiniz. Bu, özellikle sabit IP ile kendi serveri ile İnternete bağlanan bir şirkette, sadece çalışanların görmesi için bir dizin yaratmak için iyi bir alternatiftir (örnek: allow from .sirketiniz.com.)
.htaccess ile şifre ile girilen sayfalar yaratmak, site abone sistemleri yaratmak da mümkün. Ancak işin bu tarafını da anlatmak için en az bir bu kadar sayfaya daha ihtiyacım var ve bu sayıda maalesef bu kadar yerimiz yok. İsterseniz şimdilik bu örneklerle .htaccess dosyası ile tanışıp biraz antrenman yapalım.
Bazen keşke hayatımızın içinde de bir .htaccess dosyası olsaydı da iki satır kod yazıp her şeyi gönlümce değiştirseydim diyorum.
Sağlıkla kalın. ML

Kaynak: Aycan Gönenc
Dia | 12 Mart 2006 17:27 | Yorum(2) | devamı »

Javascript Nesne ve Özellikleri

Günümüzde bilişim Teknolojileri ile ilgilene hemen herkesin duyduğu bir terim var. Nesneye Yönelik programlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamada kullanılan her öğe bir nesne olarak kabul edilir. Bu nesnelerin özelliklerini kullanarak onları değiştirerek program yazılır. Javascript'te bu tür bir programlama dilidir. Örneğin webde sörf yaparken herkesin karşısına çıkan formlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de onun yani nesnenin özellikleridir.
Örneğin şimdiye kadar çoğu kez kullandığımız document.write komutu aslında bir nesnenin özelliğine atıfta bulunmaktan başka bir şey değildir. Yani document nesnesinin write özelliğini kullanarak html sayfamıza yazı yazdırıyoruz.

Window Nesnesi

Genel olarak pencere özellikleri ile ilgili bir nesnedir.

Pencere açmak ve kapamak

Birçok yerde gördüğünüz pencere açma pencerelerin çeşitli özelliklerini değiştirme işte bu nesne yardımıyla yapılmaktadır.
Şimdi bu nesneyi nasıl kontrol edeceğiz onu görelim.

Pencere açmak için :

CODE:
window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri");


Pencere kapatmak için :

CODE:
window.close();


Pencere kapatmak için window.close() komutu vermek yeterlidir. Burada kapatılan pencere ona kullanılmakta olan penceredir.
Gelelim pencere açma işine. Burada window.open ile pencerenin açılmak istendiği belirtilir. Parantez içerisinde verilenler ise açılması istenen pencerenin özelliklerini belirtir.

Url_adı : Buraya yazılacak dosya ismi açılacak pencerenin içerisinde olacaktır.

Örnek :

CODE:
window.open("http://www.thecoders.net/index.php")

veya ;

CODE:
window.open("index.html")


Pencere_adı : Bu açılacak pencerenin adını belirtir. Birden çok pencere ile işlemler yapıyorsanız hangi pencereye bir komut gönderdiğinizin belli olması için gereklidir.

Örnek :

CODE:
Window.open("index.html" , "ana");


Pencere_özellikleri : Bu özellikte adından belli olduğu ölçüde pencerenin özellikleri ile ilgilidir. Bir pencerenin değiştirilebilir özellikleri şunlardır :
menubar :
Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen) vb. menülerin bulunduğu satırdır.
toolbar :
Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların bulunduğu kısımdır.
location :
Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım.
status :
Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi veren kısımdır.
scrollbars :
Sağ tarafta bulunan sürgü çubuklarıdır.
resizable :
Pencerenin boyutlarının kullanıcıya bırakılması veya kesin değerler almasıyla ilgilidir.
width :
Açılacak olan pencerenin piksel cinsinden genişliğidir.
height :
Açılacak olan pencerenin piksel cinsinden boyudur.
left :
Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını belirler.
Top :
Açılacak olan pencerenin ekranın üstünden kaç piksel aşağıda olacağını belirler. Eğer pencere özellikleri kısmında değişmesini istemediğiniz bir özellik varsa onu yazmanıza gerek yoktur. Bu değerler tarayıcının banko(default) değerlerinden alınır.
Şimdi bir pencere açalım. Açtığımız pencerede dosya,düzen ve ileri,geri tuş takımı olmasın. Pencerenin boyutları 200x300 piksel olsun. Bizi www.thecoders.net adresine göndersin.

Şimdi buna göre kodumuz :

CODE:
window.open
("http://www.thecoders.net", "The coders" ," menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300";)


window.location.protocol

Window nesnesinin location.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.
http: ile dosyanın internetten yüklendiğini belirtir.
file: ile dosyanın sabit diskten yüklendiğin belirtir.
Mesela şöyle bir örnekle dosyanın nerden yüklendiğini kontrol edelim.

CODE:
if (window.location.protocol == "http:" )
{ document.write ("Bu belge Internet'ten geliyor.") }
else
{ document.write ("Bu belge sabit diskten geliyor") }


window.history.go

Window'un histrory özelliği ile bir önceki sayfaya erişim sağlanabilir. Örneğin kullanıcı herhangi bir formu doldurmadı ve işlem yapılamadı bu durumda bir hata mesajı ile kullanıcıyı uyardıktan sonra history nesnenisin kullanarak bir önceki sayfaya kullanıcıyı gönderebilirsiniz. Bunun için gerekli kod yazımı şu şekildedir.

CODE:
Window.history.go(-1)


Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşabilirsiniz.

Status Bar kullanımı

Status bar window nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dosyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır.
Status barı değiştirmek için şu kodları yazmalıyız.

CODE:
window.status="The Coders'dan Merhaba !";


Bu şekilde kullandığımız bir status kodu ile sayfa açık kaldığı sürece Webteknikleri'nden Merhaba ! yazısı karşımızda olacaktır.

Tarayıcı Nesnesi

Tarayıcılar Javascript tarafından bir nesne olarak algılanır. Bu nesnenin özelliklerini şöyle sıralayabilir.

appname Tarayıcı adı
appVersion Tarayıcının Versionu
appCodeName Tarayıcının kod adı
userAgent Tarayıcının anamakinaya(server) kendini tanıtırken verdiği isim

CODE:
<html>
<head><title>Tarayıcı Özellikleri</title></head>
<body>
<script language="javascript1.2">
<!--
document.write("Şu anda kullandığınız tarayıcının özellikleri :" , "<br>");
document.write(navigator.appname + navigator.appVersion + navigator.appCodeName + navigator.useAgent ) ;
-->
</script>
</body>
</html>


Çerçeve (Frame) Nesnesi
Çerçeve tekniği bir web sayfası üzerinde birden fazla web sayfası görüntülenmek istendiğinde kullanılır. Daha ayrıntılı bilgi için HTML adlı bölümümüze bakınız.
Javascript açısından her bir çerçeve bir pencere sayılır. Bunların içeriğini kontrol etmek için belli komut stilleri vardır.
Şimdi onları görelim :

Top : En üst pencere (Yani tarayıcının kendisi)
Parent : Herhangi bir çerçeveyi oluşturan düzenleyici bölüm
Self : Çerçevenin kendisi

Javascript çerçeve düzenleyici(FrameSet)leri içerisindeki diğer alt çerçeveleri 0 'dan başlayarak numaralar. Bu numaralar yardımıyla çerçeve özelliklerini değiştirebiliriz. Örneğin iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] diğeri ise parent.frames[1] olarak adlandırılır. Örneğini verdiğimiz gibi iki çerçeveli bir web sayfamız olduğunu varsayalım.
Ana sayfamız ki bu sayfa tarayıcıya sayfanın iki html sayfasında oluştuğunu söyleyen , çerçeve düzenleyicisinin olduğu sayfanın kodları şu şekilde olsun. ! Uyarı : Bu sayfayı frame.html olarak kaydedin.

CODE:
<html>
<head><title>Frame (Cerceve)</title></head>
<!-- frames -->
<frameset cols="50%,*">
<frame name="sol" src="sol.html">
<frame name="sag" src="sag.html">
</frameset>
</html>


Bu sayfayı sol.html olarak kaydedin.

CODE:
<html>
<head><title>Sol Frame</title></head>
<body>
<script language="javascript1.2">
<!--
parent.frames[0].document.write("Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu", "<br>" , "SOL taraf icin");
-->
</script>
</body>
</html>


Bu sayfayı sag.html olarak kaydedin.

CODE:
<html>
<head><title>Sag Frame</title></head>
<body>
<script language="javascript1.2">
<!--
parent.frames[1].document.write("Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu", "<br>" , "SAG taraf icin" );
-->
</script>
</body>
</html>


Form Nesnesi
Javascript açısından Html'in en önemli nesneleri Formlardır. Çünkü ziyaretçi ile etkileşmede en büyük unsurlardan birisi Formlardır. Html kendi form nesnesini kendisi oluşturabilir. Bu bakımdan Javascript'e düşen bir göre yoktur. Javascript form verilerinin yorumlanması ve işlenmesinde devreye girer. Şimdi form unsurlarını tanıyalım :

Name : Formun ismi
Action : Formun işleneceği per l veya cgi programının tanımlanacağı etiket
Enctype : Formun kodlanma türü
Method : Formun gönderme(post) mi yoksa alma(get) işlemi göreceğini belirler.
Target : Pencere ismi
OnSubmit : Gönderme metodunun ismi
Bunlardan yararlanarak bir form nesnesinin kodunu yazalım.

CODE:
<form name="mail" action="http://www.webteknikleri.com/cgi-bin/mail.pl" " method=POST>
Form unsurları
</form>


Şimdi biz bu kodda "Form Unsurları" diye bir şeyden söz ettik. Bu form unsurları ziyaretçiden nasıl bilgi alınacağını belirleyen unsurlardır. Bunlar bir metin alanı veya aşağı düşmeli bir menü olabilir. Form etiketi içerisindeki tüm unsurlar element adlı dizi-değişken içerisine yazılırlar ve form unsurları kullanılırken bu tip bir atıfta bulunmanız gerekir.

Text Alanı
Text alanı form unsurlarının en önemlilerindendir. Ziyaretçilerden bilgi almak amacıyla kullanılır. Kullanımı şu şekildedir.

CODE:
<input type="text">


Şeklinde kullanılır. Bu nesnenin kullanılan etiketleri :

Name : text alanının ismi
Size : text alanının web sayfasında görülecek kısmının büyüklüğü
Maxlenght : text alanına en fazla kaç karakter girilebileceğini belirler.
İşte bir tam teşekkülü text alanı :

CODE:
<form name="mail" action="http://www.thecoders.net/cgi-bin/mail.cgi" method = POST>
<input type="text" name="email" size=15 maxlenght=40>
</form>


Buraya kadar işimiz Html ile hallettik. Şimdi bu form nesnesinin özelliklerini Javascript aracılığıyla nasıl değiştirilebileceğini görelim. document.form_ismi.elements[numara]. değiştirilmek_istenen özellik.
numara : değiştirilmek istenen elemanın numarasıdır. Değiştirilmek istenen özellikler şunlar olabilir.
value : içerisindeki değer
lenght nesnenin uzunluğu
name : ismi

Şimdi bir örnek verelim.(bu örnek bir önceki form içindir)

CODE:
document.mail.elements[0].lenght=20


Şifre Alanı[b]

Bu alanlar şifreli bilgi almak için kullanılır. Bu alana bir bilgi girildiğinde karakterler gözükmez onun yerine asteriks * işareti görülür.

[b] Bir örnek :


CODE:
<form action="http://" name="mail">
<input type="Password" name="sifre" >
</form>


Bu tür form unsurlarına erişimde text alanı gibi aynı şekildedir.

Butonlar

Form unsuru olarak iki tür buton vardır. Bunlar form unsurlarını form görevine göre göndermeye veya almaya yönelik Gönder (Submit) düğmesi bir diğeri ise Form unsurlarının tümünün ilk halini almasını sağlayan Sil (Reset) düğmesidir. Şimdi bunların nasıl kullanıldıklarını görelim.

CODE:
<form action="http://" name="mail">
<input type="Submit" name="gonder" value="GONDER"><br>
<input type="Reset" name="sil" value="SIL">
</form>


Radyo (Radio) Düğmeleri
Bu tür düğmelerin en büyük özelliği radyo düğmeleri gibi olmasıdır. Yani herhangi bir menü üzerinde sadece bir seçim yaptırmak istiyorsanız bu tür form öğelerini kullanırsınız. Şimdi bunun ile ilgili bir örnek yapalım.

CODE:
<HTML>
<HEAD>
<TITLE>Radio</TITLE>
<SCRIPT LANGUAGE = "JavaScript1.2">
function sorgu (secim)
{var deger = null
for (var i=0; i<secim.length; i++)
{if (secim[i].checked)
{ deger = secim[i].value
break } }
return deger }
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1"> <p>
<input type=radio name="firma" value="Bilemediniz Yazilim">Microsoft</p>
<p><input type=radio name="firma" value="Bilemediniz Yazilim">Borland</p>
<p><input type=radio name="firma" value="BilemedinizYazilim">Adobe</p>
<p><input type=radio name="firma" value="Tebrikler Bildiniz">Copmaq</p>
<input type=button value="Bunlardan hangisi bilgisayar ureticisidir" onClick="alert(sorgu(this.form.firma))">
</FORM>
</BODY>
</HTML>
Dia | 29 Aralik 2005 16:45 | Yorum(1) | devamı »

Explorer ve Netscape'in Farkları

Giriş kısmında belirttiğimiz gibi Javascript kodlarında MSIE (Microsoft Internet Explorer) ve NN (Netscape Navigator) yönünden farklılık vardır. Bu tarayıcının html dökümanı nasıl modellediğine bağlıdır. Tarayıcının nesne döküman modeli, bir Html sayfasındaki çeşitli elemanların tarayıcı tarafından nasıl algılanıp yorumlandığı ile ilgilidir. Javascript gerçekte W3C (Web tekniklerinin standartlarını belirleyen kurum www.w3c.org) konsorsiyumu tarafından belirlenen kodlardan oluşmamıştır. Tarayıcı üreten firmalar bu konuları kendilerince yorumlayıp tarayıcılarına yerleştirmişlerdir. Yani kendi nesne döküman modellerini oluşturmuşlardır.
Biz bu kısımda her iki tarayıcınında nesne döküman modelini incelemeyeceğiz. Bize gerekli olan kısmını öğreneceğiz. Şimdi tarayıcı farkının nasıl ayırt edilebileceğini görelim.

CODE:
ie4 = (document.all) ? true : false ;
nn4 = (document.style) ? true : false ;


Biz bu iki satırla bir önceki ders olan değişkenler ve mantıksal operatörler yardımıyla iki tarayıcıyı da kontrol altına aldık. Bir diğer örnekle yapıyı pekiştirelim.

CODE:
<script language="Javascript">
<!-- // Kodları eski sürüm tarayıcılardan saklayalım.
ie4 = (document.all) ? true : false ;
nn4 = (document.style) ? true : false ;
if (ie4)
{
// MSIE 4.0 için uygun kodları buraya yazacağız
}
else
{
// NN 4.0 için uygun kodları buraya yazacağız.
}
//Saklamayı bitir -->
</script>


Şimdi bu kodları inceleyelim. Değişken tanımlama kısmının anlaşıldığını varsayarak geçiyorum. Anlamadığınız bir kısım varsa 1. Değişkenler kısmına tekrar geri dönün.

If (ie4) ve if (nn4)

Burada ileriki derslerde öğreneceğimiz koşul ifadesini kullanıyoruz. Bu kodları Javascript'in anlayış tarzı şu şekilde olacaktır. Eğer nn4 , ie4 değişkenlerinden doğru olanı ie4 ise -ki bunu true ve false değerlerinden algılar- alt satıra geçip ona uygun kodu uygulayacaktır. Şayet ie4=false yani nn4=true ise diğer if koşulu yorumlanarak işleme konulacaktır. Bu da nn4 için gerekli kodun çalıştırılması demektir.
Şimdi bu kodun tamamını vererek dersi bitirelim.

CODE:
<html>
<head>
<title>Tarayıcı kontrolü</title>
<head>
<script language="Javascript">
<!-- // Kodları eski sürüm tarayıcılardan saklayalım.
function tarayici() {
ie4 = (document.all) ? true : false ;
nn4 = (document.style) ? true : false ;
if (ie4)
{
// MSIE 4.0 için uygun kodları buraya yazacağız.
window.location="ie.htm";
}
else
{
// NN 4.0 için uygun kodları buraya yazacağız.
window.location="nn.htm";
}
}
//Saklamayı bitir -->
</script>
</head>
<body onLoad=tarayici()>
</body>
</html>


Bu kodları herhangi bir editör (NotePad gibi) yardımıyla yazıp tara.htm uzantılı olarak kaydedin.

CODE:
<html>
<head>
<title>MSIE tarayıcı kullanıyorsunuz</title>
</head>
<body>
<h3>Tarayıcınız Internet Explorer</h3>
</body>
</html>


Bu kodu ie.htm olarak kaydedin.
CODE:
<html>
<head>
<title>Netscpae tarayıcı kullanıyorsunuz</title>
</head>
<body>
<h3>Tarayıcınız Netscape Navigator</h3>
</body>
</html>


Bu kodu nn.htm olarak kaydedin.
Önemli!:Bu üç Html dosyasınında aynı klasör de olması gereklidir.
Tara.htm adlı dosyada anlamadığınız kodlar olduğunu görüyorsunuz. Şimdilik bu kodları anlamanız gerekli değil. Yeri geldikçe bu kodların nerede ve nasıl kullanılacağını göreceğiz
Dia | 29 Aralik 2005 12:35 | Yorum(0) | devamı »


Online Coders
  Online (0)
  Ziyaretçi (0)

Desteklediklerimiz

Teknoloji


MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg