BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 


10. OLAYLAR

Bir olayın oluşması, mevcut durumda bir değişikik olması anlamına gelir.Javascript açısından kullanıcının bir yere tıklaması, mousunu oynatması, sayfanın yüklenmesi, sayfadan çıkılması hep birer olay olarak yorumlanır. Olayların genel kullanımları:
<form name=isim olayAdı="ilgiliFonksiyon()">
şeklindedir. Bu kullanımı her olay için verilen örnekleri inceleyerek daha iyi anlayabilirsiniz. JavaScript'de olaylar ve adlarını aşağıda görmektesiniz.

  1. onClickMouse'un tıklanması olayıdır. Tıklanabilecek, dolayısıyla onClick metodu'nun kullanılabileceği yerler submit, reset, buton, radio, checkbox ve link nesneleridir.
    Aşağıdaki örnekte onClick ile bir text nesnesine yazı yazdıracağız.

    <html>
    <head>
     <title>onClick</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <script language="Javascript1.2">
    <!--
    function yazdir(formNesnesi)
    {
    formNesnesi.value="Bu işi onClick ile yaptık!"
    }
    -->
    </script>
    </script>
    </head>
    <body >
    <form name="form1" >
    <input type="Button" value="Tıklayın" onClick="yazdir(document.form1.mesaj)">
    <input type="text" name="mesaj" value="1">
    </form>
    </body>
    </html>

  2. onMouseOver, onMouseOutMouse'un imleçinin bir nesne üzerinde olması onMouseOver, o nesne üzerinde olmaması onMouseOut olayı olarak adlandırılır.
    Aşağıdaki örnekteki linkin üzerine gelince yeni bir pencere açılacak, açılan bu pencere mouse'u linkin üzerinden çekince kapanacak.

    <html>
    <head>
     <title>onMouseOver,onMouseOut</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <script language="Javascript1.2">
    function ustunde()
    <!--
    {
    yenipencere=window.open("oneri","oneriPenceresi","toolbar=0,width=200,height=200")
    yenipencere.document.writeln("<h3>Yeni sayfa!</h3>")
    }
    function disinda()
    {
    yenipencere.close()
    }
    -->
    </script>
    </head>
    <body>
    <a href="#" onMouseover="ustunde()" onMouseout="disinda()"><b>Ustüme Gel!</b></a>
    </body>
    </html>

  3. onLoad, onUnLoadweb sayfasının yüklenmesi onLoad, sayfadan çıkılması ise onUnLoad olayına karşılık gelir.
    Aşağıdaki örnekte sayfa yüklenince bize browser'ımızın hangisi olduğunu söyleyecek, çıkarken ise bir uğurlama mesajı verecek

    <html>
    <head>
     <title>onLoad, onUnLoad</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <script language="Javascript1.2">
    <!--
    function hangiBrowser()
    {
    var tur =navigator.appName+" "+navigator.appVersion
    if(tur.substring(0,8)=="Netscape")
    alert("Netscape kullaniyorsunuz")
    else if(tur.substring(0,9)=="Microsoft")
    alert("Explorer kullaniyosunuz!")
    else
    alert("Ne tur browser kullandiginizi anlayamadik!")
    }
    function mesaj()
    {
    alert("Hoşçakalın!")
    }
    -->
    </script>
    </head>
    <body onload="hangiBrowser()" onunload="mesaj()">
    </body>
    </html>

  4. onSubmit, onResetForm'ların vazgeçilmez ögeleri olan submit butonuna basılması onSubmit, reset butonuna basılması onReset olayıyla tanımlanır.
    Aşağıdaki örnek formu gönderirken ve silerken bizim onayımızı isteyecek.

    <html>
    <head>
     <title>onSubmit,onReset</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <script language="JavaScript1.2">
    <!--
    function dogruMu()
    {
    return confirm("Bilgilerin doğru olduğuna emin misiniz?")
    }
    function sor()
    {
    return confirm("Silmek istediğinize emin misiniz?")
    }
    -->
    </script>
    </head>
    <body>
    <form name="form1" onsubmit="return dogruMu()" onReset="return sor()" method="post">
    <p><h3>Isim</h3></p>
    <input type="text" size="30" name="isim">
    <p><h3>adres</h3></p>
    <input type="text" size="30" name="adres">
    <p><h3>telefon#</h3></p>
    <input type="text" size="30" name="telefon">
    <p><input type="Submit"  value="Gonder">
    <input type="Reset" value="Sil"></p>
    </form>
    </body>
    </html>

  5. onChangeText veya textarea unsurlarına birşey yazılması ya da select unsurunda bir seçim yapılması onChange olayına karşılık gelir.
    Aşağıda onChange ile yapılmış bir örnek görüyoruz.

    <html>
    <head>
     <title>onChange</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <script language="JavaScript1.2">
    <!--
    function yaz(secnesnesi){
    return secnesnesi.options[secnesnesi.selectedIndex].value}
    -->
    </script>
    </head>
    <body>
    <form name="form1">
    <select name="mesaj" size="3"  onchange="alert(yaz(this.form.mesaj))">
    <option name="mesaj" value="Bu">mesaj1
    <option name="mesaj" value="program">mesaj2
    <option name="mesaj" value="onChange komutu ile yapılmıştır">mesaj3
    </select>
    </form>
    </body>
    </html>

  6. onFocus, onBlurSayfanızdaki Text , Textarea veya Select unsurlarının üzerine tıklandığında onFocus olayı gerçekleşir. Bu durumda mouse'un başka bir yeri tıklaması da onBlur olayına karşılık gelir. Yani kullanıcı dikkatini bu üç unsurdan birine verdiği zaman browser'a bir iş yaptırabilriz; aynı şekilde kullanıcının dikkatinin başka yöne kayması halinde yapılacak başka bir iş tanımlayabiliriz.

    <html>
    <head>
     <title>onFocus,onBlur</title>< BR><METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <script language="JavaScript1.2">
    <!--
    function dogru()
    {
    document.form1.mesaj.value="Lütfen hata yapmayın!"
    }
    function sor()
    {
    document.form1.mesaj.value="isminiz alındı"
    }
    -->
    </script>
    </head>
    <body>
    <form name="form1"  method="post">
    <p><h3>Lütfen isminizi yazınız!</h3></p>
    <input type="text" size="20" name="isim" onfocus="dogru()" onblur="sor()">
    <p><input type="text" name="mesaj"></p>
    </form>
    </body>
    </html>

  7. onAbort, onErrorZiyaretçinin browser'ı sayfanızın bir kısmını veya tamamını yükleyemez, ya da sayfanızın JavaScript veya HTML kodlarını yorumlayamazsa hata durumu oluşur, bu durumun adı JavaScript dilinde onError'dur. OnAbort olayı ise ziyaretçi sayfanız tamamen yüklenmeden stop tuşuna basarsa oluşur.

11. JAVASCRIPT VE DHTML

JavaScript ile katmanların(layer) neredeyse bütün özelliklerini değiştirebiliriz. Bu özelliği onMouseOver, onClick gibi olaylarla birleştirip çok iyi sonuçlar alabilirsiniz. İşe başlamadan önce katmanları tanıyalım:
Web sayfalarımızda <div> ve <layer> etiketlerini kullanarak katmanlar oluşturabiliriz. Fakat ne yazık ki Explorer <layer> etiketini tanımaz. Bu nedenle kullanımı biraz daha zahmetli olan <div> etiketini kullanacağız.Katmanlar sayfadan bağımsızdırlar, Javascript ile boyutlarını, renklerini hatta görünürlüklerini değiştirmemize olanak sağlarlar. Şimdi önce bir katman oluşturalım, sonra da Javascript ile katmanların değiştirebieceğimiz özelliklerini görelim.
<html>
<head>
 <title>Katman</title>
 <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
<div id="katman" style="position:absolute; left:50; top:200; width:100; height:200;
visibility:visible; background-color:teal">Burası bir katman</div>
</body>
</html>
Bu özelliklerin JavaScript'deki adları aşağıdaki gibidir:
  • id:Katmanın adı.
  • style:Katmanın aşağıda listelenen stil özellikleri
    • position: Katmanın yeri kesin olarak belirtilecekse absolute, göreli olarak belirtilecekse relative değerini alır.
    • top:Katmanın browser penceresinin üst kenarından uzaklığı
    • left:Katmanın browser'ın sol kenarından uzaklığı
    • width:Katmanın genişliği
    • height:Katmanın yüksekliği
Katman tekniğini kullanılırken Netscape ve Explorer farkını aklımızda bulundurmalıyız. Aşağıda Explorer için yazım kuralını görüyoruz.
katmanAdı.style.DeğişecekÖzellik=yeniDeğer
Netscape için yazım kuralı ise şöyledir:
document.katmanAdı.DeğişecekÖzellik=yeniDeğer
Şimdi bu tekniği örneklerle daha iyi anlayalım:
<html>
<head>
 <title>Katman</title>
 <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<script language="JavaScript1.2">
<!--
function tani()
{
if(navigator.appName=="Netscape")genislik=document.katman
if(navigator.appName=="Microsoft Internet Explorer")genislik=katman.style
}
function genisle()
{
genislik.width=400
}
-->
</script>
</head>
<body onLoad="tani()">
<div id="katman" style="position:absolute; left:200; top:30; width:100; height:200;
 visibility:visible; background-color:teal">Bu katman genisleyecek</div>
<form name="form1">
<input type="Button" onclick="genisle()" value="Genişlet">
</form>
</body>
</html>
JavaScript bölümü burada sona erdi. Bir sonraki bölümde CSS tekniğini göreceğiz. CSS bize stil şablonları oluşturup bütün sitenin yazıtipi, yazı rengi vs. ayarlarını tek bir dosyadan yönetme olanağı verir. Ayrıca CSS , HTML'e metin biçimlendirme konusunda bir çok ekleme yapar.


Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



Yorum Gönder Blogger

 
Top