Kısaca Javascript
2 Şubat 2009 | Kategori: Javascript
Çoktan JSon, Ajax, Prototype gibi teknolojilere geçmişken “Javascript” başlığı ne kadar eskimiş olsa da, bir programcının bunlardan çok daha önce öğrenmesi gereken birşey Javascript. Javascript’te “document.getElementById(’nesne’)” kodunun ne işe yaradığını bilmeden neden $(’nesne’) yi öğrenelim ki.. İşte bu yüzden kısaca Javascript anlatımına geçeceğim öncelikle. Umarım programlamayı bilen, ama Javascript konusunda yeni başlangıç yapacak olanlar için yararlı bir yazı olur.
Javascript, HTML’ in yapamadığı bazı özelliklerin web sayfalarında kullanılabilmesi için yazılan bir script dilidir. Etkileşimli bir sayfa için yararlanmamız gereken, çok yararlı bir yardımcıdır.
Sayfa içerisinde
< script >
…
< /script >
kodları arasına yazılır. Ya da ayrıca bir JS uzantılı sayfa içine yazılır ve
<script src=”script.js”></script>
şeklinde html sayfaızdan çağrılır.
DEĞİŞKENLER
Javascript’te değişkenler:
Var a = 5;
Var zaman = new Date();şeklinde tanımlanır.
Değişkenlerle işlem yapmak istersek :
var i=10;
var j=11;
var k=12;
var m,n;
m=i*j+k;
n=i*(j+k);
BİLGİ GİRİŞİ VE ÇIKTI KOMUTLARI
Burada alert yazmışken girdi ve çıktı yapmak için yazdığımız kodlardan bahsedelim biraz.
alert(‘Uyarı Penceresi’); alert kullanıcıya uyarı vermemizi sağlar.
Confirm(‘Çıkmak istediğinize emin misiniz?’); Kullanıcıdan onay almamızı sağlar.
prompt(‘Doğum tarihinizi Giriniz’); Bir pencere ile kullanıcıdan veri almamızı sağlar.
document.write(‘Javascript’e hoşgeldiniz…’); Sayfaya yazı yazmamızı sağlar.
Bir örnek yapalım. Sıkça kullanacağımız Javascript fonksiyonlarını da nasıl kullanacağımızı görmüş olalım.
<html>
<head>
<title>JS ile giriş çıkış fonksiyone</title>
<script type = “text/javascript”>
function Basla()
{
var isim = prompt (”İsminizi Giriniz “);
document.write (”Merhaba ” , isim , ” !” );
alert(’İsim Girdiniz, sayfada göründü..’);
}
</script>
</head>
<body onload=”Basla();”>
</body>
</html>
Fonksiyonu nasıl çağıracağımızı da görmüş olduk. Function Basla() { } arasına istediğimiz kodları yazıp, herhangi bir element içerisinde onclick, onload, onmouseover gibi olaylarla çağırdığımızda fonksiyon içerisindekilerin sayfayı nasıl etkilediğini gördük.
Element Atama
document.getElementById(‘nesne’) ? id’si nesne olan elemanı alıyoruz.
Kullanımı:
<script>
document.getElementById(’isim’).value = ‘Duygu’;
document.getElementById(’resim’).src = ‘duygu.jpg’;
</script>
<img src=”resim.jpg” id=”resim” />
<input type=”text” id=”isim” />
KOŞUL OLUŞTURMA
var a = 3;
var b =5;
If (a==b)
{
alert(‘a b ye eşit’);
}
else if (a>b)
{
alert(‘a b den büyük’);
}
else
{
alert(‘a b den küçük’);
}
FOR DÖNGÜSÜ
var a ;
for (a = 0; a<10; a++)
// a değişkeni 10 dan küçük olduğu sürece, a ‘yı birer birer atırarak
{
document.write(a);
}
Bu örneğin ekran çıktısı “0123456789” şeklinde olur.
WHILE DÖNGÜSÜ
Belirtilen bir şart sağlandığı sürece yapılmasını istediğimiz şeyler varsa bunları while dögüsü içinde yapabiliriz. Çıktısı For döngüsü ile aynı olan örneği while ile yapalım..
var sayac = 0;
while (sayac < 10)
{
document.write(sayac);
sayac ++;
}
Bunlardan farklı bir de Do..While döngüsü var, while’dan farkı şart doğru olsun ya da olmasın en az bir kez içerisindeki işlemleri yapması.
NESNELER
Window Nesnesi
window.open(”url.htm” , “Penceremin Adı” , “penceremin_ozellikleri “); ? Yeni pencere açar.
Kullanım Şekilleri :
* window.open(“deneme.htm”,”Deneme Sayfası”, “scrollbars=1,status=1,width=350, height=250”);
* window.open(“duygu.htm”);
Pencere özellikleri :
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.
window.close(); pencereyi kapatır.
history.back(); Tarayıcıda geri gider.
history.forward(); İleri gider.
window.status = “Burası status bar”; Tarayıcının altındaki status bar yazısı
Tarayıcı Nesnesi
navigator.appname : Tarayıcı adı
navigator.appVersion : Tarayıcının Versionu
navigator.appCodeName : Tarayıcının kod adı
navigator.userAgent : Tarayıcının anamakinaya(server) kendini tanıtırken verdiği isim
Form Nesnesi
En çok kullandığımız ve kullanıcı ile etkileşimin en yüksek olduğu nesnemiz form nesnesi.
Name : Formun ismi
Action : Formun işleneceği perl 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
Kullanımı :
<form name=”mail” action=”kaydet.php” ” method=”post”>
//Form unsurları
</form>
Form unsurlarını buradan açmayalım, ayrıca bir doküman yaparız.
OLAYLAR
onClick : Tıklandığında
onMouseOver : Fare nesnenin üzerine geldiğinde
onMouseOut : Fare nesne üzerinden ayrıldığında
<div id=”nesnem” onclick=”alert(’tıkladın..’);” onmouseover=”alert(’üzerine geldin’);” onmouseout=”alert(’fareyi nesne üzerinden çektin’); “>DUYGU</div>
onSubmit : Bir formu servera göndermeden önce doğrulamada kullanırız.
<form action=”mail.php ” method=”post” onSubmit=”dogrula()”>
onReset : Formu temizlerken belli seçenekler sunmamızı sağlar.
<script>
function sil()
{ return confirm(’Silmek istediginize emin misiniz?’); }
</script>
<form onReset=”return sil()”>
<input type=”text” name=”mail”>
<input type=”reset” value=”sil”>
</form>
onChange : text,textarea ve select alanları kullanıcının değiştirebileceği alanlardır. Bu alanlarda değişiklik yapıldığında kullanılır.
<select name=”degistir” size=”1¨ onChange=”degisti()”>
<option>Bay</option>
<option>Bayan</option>
</select>
onLoad, onUnLoad : Sayfanın yüklenmeye başlamasından (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler içindir.
<html>
<head>
<title>onLoad onUnLoad</title>
<script>
function hosgeldiniz()
{
alert(”Hosgeldiniz..”)
}
function gulegule()
{
alert(”Güle güle..”)
}
</script>
</head>
<body onLoad=”hosgeldiniz()” onUnload=”gulegule()”>
</body>
</html>
onError : Yüklenirken hata oluştuysa (resimlerde çok kullanırız)
onAbort : Kullanıcı yüklemeyi durdurursa
Şimdilik bu kadar yeter, devam edeceğiz. “Çok kısa olmuş şunu da açıkla” derseniz seve seve =)
Kısaca Javascript (1 Cevap)
taha gür.
Şubat 7th, 2009 - 16:46
ellerine sağlık duygucum giriş seviyesi icin mükemmel bir kaynak