Program Yapmak | Programcılık Hakkında Her Şey | VİSUAL BASİC 6.0 | C, C++ ve C# Yazılım Dilleri | VB.NET Yazılım Dili

global javascript teknigi

Java SUN firması tarafından, her platformda çalışabilecek programlar yapmak için geliştirilen bir dildir. Netscape ve Microsoft tarafından ise değiştirilip-kısaltılıp JavaScript ve JScript adında browserların anlayabileceği hale getirilmiştir. Bu gün Netscape ve Microsoft, ortak bir JavaScript`e doğru gittikleri için çoğunlukla birbirlerinin geliştirdiği Script`lerden anlıyorlar ama yine de bazı durumlarda iki browser için ayrı kodlar yazmak gerekiyor. Öte yandan JavaScript`in beğenilmesiyle, firmalar JavaScript`i browserların birer parçası haline getirmişlerdir. En basitinden Alert olayı script etiketi içine alınmadan heryerde çalışır hale gelmiştir.

    JavaScript kodları tüm sayfayı etkilemesi bakımından genellikle Head bölümünde yani <HEAD> </HEAD> tag`leri arasında kullanıılr ve <SCRIPT> </SCRIPT> tag`leri arasına alınarak HTML kodlarından ayrılırlar. Yazdığınız kodlarda, bu gün 1.3 sürümünde olan JavaScript dilinin hangi versiyonunu kullandığınızı belirtmelisiniz. Netscape 2.0 ve 2.2 , IE 3.0 sürümleri ancak JavaScript 1.0 ve 1.1 sürümlerine uyumludur. O yüzden ancak en yukarı 1.2 sürümünü kullanabiliriz, zaten çoğu yerdeki kodlar 1.2 içindir. JavaScript dilinin sürümü sayfada şu şekilde kodlanır :
<SCRIPT Language="javaScript1.2"> Sayfanızın eski browserlarda bozuk çıkmaması için JavaScript kodlarını eski browserlardan gizleriz.

    JavaScript `te CSS gibi üç şekilde yani Global, yerel ve bağlantılı teknikleriyle kullanılabilir. Biz daha önceki sayfalarda yerel kullanımına değinmiştik, bu sayfalarda ise sadece Global ve bağlantılı tekniklerine değineceğiz.

    JavaScript`in bilinmesi gereken 9 önemli bölümü vardır. Bunlar :

1 ) Değişkenler : Yorumlayıcı program (browser) tarafından bilgisayarın hafızasında tutulan ve içerdiği değer, programın akışına göre değişen unsurlardır. Değişkenlerin program boyunca adı değişir ama içeriği değişmez. Değişkenler var komutu ile oluşturulur ve isim atanır. Bu isim harfle veya _ işareti ile başlamalı, türkçe karakter içermemeli ve arada boşluk olmamalıdır. Ayrıca büyük ve küçük harf ayrımı vardır. Ancak rakam kullanıldığında işlem yapabilirler.

2 ) Fonksiyonlar : Bir isim altında toplanmış işlem paketlerine denir. Bu işlem paketlerinin isimlerini ve komutlarını istediğimiz şekilde atayıp yine istediğimiz yerde atıfta bulunarak kullanabiliriz. function komutu ile oluşturulur sonra isim ve istenirse () parantez içinde değer verilir. Fonksiyonun bağlanacağı tüm işem paketi { } süslü parantez içine alınır. Yine fonksiyonlarda harfle veya _ işareti ile başlamalı, türkçe karakter içermemeli ve arada boşluk olmamalıdır. Ayrıca büyük ve küçük harf ayrımı vardır.

3 ) Nesneler : JavaScript açısından herşey bir nesnedir. Sayfanızın açıldığı pencere, hazırladığınız form birer nesnedir. Kalıp NesneAdı.Özellik(Değer) şekilndedir. Mesela window.open("Url") gibi.

4 ) Olaylar : Ziyaretçinin web sayfası üzerinde yaptığı; fareyi bir unsurun üzerine getirme (onMouseOver), üzerinden çekme (onMouseOut) , tıklama (onClick), klavye tuşlarına basma (KeyDown), sayfanın yüklenmesi (onLoad) ve sayfadan çıkma (onUnLoad) gibi herşey birer JavaScript olayıdır.

5 ) if (Eğer, ise) : JavaScript programımıza, eğer değişkenin değeri bu ise bunu, değil ise şunu yap diyebileceğimiz bir komuttur.

6 ) Else (Diğer) : JavaScript programımıza, eğer değişkenin değeri bu ise bunu yap, değil ise diğer bütün durumlarda şunu yap diyebileceğimiz bir komuttur.

7 ) For Döngüsü : JavaScript programımıza, eğer değişkenin değeri bu ise bunu yap, değil ise bu olana kadar işlemi tekrarla diyebileceğimiz bir komuttur.

8 ) While (iken) Şartlı Döngüsü : JavaScript programımıza, şu şart varsa veya yoksa bu işi yap şeklinde şart koşabileceğimiz bir komuttur.

9 ) do (yap) While (iken) Şartlı Döngüsü : Bu durumda do komutu bir kere icra edilir ve sonra while (iken) şartı aranır.

    Verilen örneklerin açıklamalarına kısa değineceğim. Örnekler sayfada çok fazla yer kaplamasın diye ayrı text dosyalarına kaydedilmiştir, bu dosyaları linkleri tıklayarak görüntüleyebilirsiniz. İki browser için ayrı kodlar yazacağımız için öncelikle browser tanıyan bir Script yazalım.

Kodu Görüntülemek için Tıklayın (Browser Tanıyıcı kod)

    Örnekteki butonu yıklayınca kullandığınız browser hakkındaki bilgileri göreceksiniz. Kodların arasında kullandığımız <!-- işareti sayesinde yazdığımız kodu JavaScript tanımayan eski browserlardan gizliyoruz. Şimdi gelelim sayfamızı browser`a göre farklı sayfalara yönlendirmeye.

Kodu Görüntülemek için Tıklayın (Yönlendirme)

    Örnekteki kodu denediğinizde eğer browser`ınız Netscape ise sayfadaki Script sizi http://www.netscape.com adresine, eğer browser`ınız ie ise http://www.microsoft.com/turkiye adresine, eğer browser`ınız Netscape ve ie değilse http://www.yahoo.com adresine yönlendirecektir. Tabiki siz bu adresleri istediğiniz gibi değiştirebilirsiniz.

    Örnekte ilk olarak var komutu ile bir değişken oluşturduk. Sonra (hangiBrowser) adlı bir fonksiyon oluşturarak bu fonksiyona if(eğer) komutu ile, browser eğer Netscape ise bunu yap, ie ise bunu yap, ikiside değilse şunu yap şeklinde değerler atadık. Kodu sayfanın yüklenmesiyle beraber çalıştırmak istediğimiz için, bu işi yapacak olan onLoad olayını Body tagimizin içinde, hazırladığımız hangiBrowser() adlı fonksiyonu çağırarak kullandık. İsterseniz fonksiyonu istediğiniz olaya atayabilirsiniz.

    Ayrıca istediğiniz browserın versiyonuna göre farklı sayfalara yönlenmesini de sağlayabilirsiniz. Bu kod Body bölümüne yazılıyor.

Kodu Görüntülemek için Tıklayın (Versiyona göre yönlendirme)

    Kodda ilk olarak browserın isim ve versiyonunu belirleyen bir kod yazıyoruz. Daha sonra browser`ın ismi eğer (if) Netscape ise ve versiyonu beşe eşit ise ver bilinmeyeninin ismi ns5 olsun. Değilse (else) Netscape 4 ise ismi ns4 olsun, vs. şekilinde istediğimiz tüm browser marka ve versiyonlarına isim atıyoruz. Daha sonra bir script tag`i daha açarak burada ver değişkeni ismi ns2 ise şu adrese, ie3 ise şu adrese, vs. şeklinde tüm versiyonları istediğimiz adreslere yönlendiriyoruz. Tabii isterseniz aynı adreslerede yönlendirebilirsiniz.

 

    Browser farklılıklarının en fazla olduğu alanlardan biri de JavaScript`in CSS nesnelerini ele alış şeklidir. Bunun için iki browser için ayrı kodlar yazmamız gerekiyor. Daha önce yerel kullanım şeklini öğrendiğimiz bazı JavaScript kodlarının, kuralına uygun, iki browserda da çalışan Global kullanım tekniğini öğrenelim. İlk olarak CSS tekniğinde kullandığımız kalıbı hatırlayalım, Explorer için
katman_adı.style.değiştirilmesi_istenen_özellik=yeni_değer ,
Navigator içinse
document.katman_adı.değiştirilmesi_istenen_özellik=yeni_değer
Bu yönteme göre katmanı, fare hareketleri sonucu çalışan JavaScript olayı ile görünür ve görünmez yapalım.

Kodu Görüntülemek için Tıklayın (Görünür-Görünmez Katman)

    Bu kodda yine browser tanıyıcı komutlar en başta yer alıyor. Sonra Gizle ve Goster ismiyle iki fonksiyon oluşturuyoruz. Fonksiyonlarda if(eğer) komutu yardımıyla Microsoft ise şu kalıbı, Netscape ise şu kalıbı uygula diyoruz. Son olarak fonksiyonlarımızı linklerimizde Gizle('ornek') şeklinde, katmanın ismini parantez içine alarak çağırıyoruz. Katmana bir isim vermeniz gerektiğini unutmayın.

    Sadece tıklama sonucu çalışmasını istediğiniz JavaScript kodlarını çağırırken onClick ifadesi yerine bir başka yöntem daha kullanabilirsiniz. Hatta bu yöntemi kullanmak daha iyi olabilir, çünkü href="... attribute`una verdiğimiz diyez # değeri yüzünden link tıklandığında sayfa en üste gitmektedir. Yukarıdaki katmanı yok eden linki ikinci yöntem ile yazacak olursak.

<a href="javascript: Gizle('ornek')"> Bunu tıklarsanız alttaki katman yok olacaktır. </a>

    Bu kodda JavaScript kodunu href="... etiketinin içinde çağırdığımız için birinci yöntemdeki istenmeyen olaydan kurtulmuş oluyoruz.

    Şimdi ise JavaScript`e pencere açtıran bir kod yazalım.

Kodu Görüntülemek için Tıklayın (Pencere Açma)

    kodpencere adında bir fonksiyon oluşturuyoruz. Bunun içinde linkin gideceği adresi daha sonra belirtmemiz için url adında bir bilinmeyen oluşturuyoruz. JavaScript`in pencere açması için kullandığımız nesne yine window.open`dır. Hatırlarsanız window.open `a verilen değer üç kısımdan oluşuyordu. ( 'Sayfa_adresi' , 'pencere_adı_veya_hedef' , 'pencere_özellikleri' ) Biz burada 'Sayfa_adresi' kısmını yine url adında bir bilinmeyene atıyoruz, diğerlerini ise istediğimiz değerleri veriyoruz. Siz bu kısımla istediğiniz gibi oynayabilirsiniz. Son alarak linkte fonksiyonumuzu çağırıyoruz. Fonksiyonu çağırırken kullanmak zorunda olduğumuz parantez işareti içinde, yukarıda belirlemediğimiz url bilinmeyenini tek tırnak içinde belirliyoruz, yani sayfanın adresini. İsterseniz açılacak sayfanın tüm özelliklerini oluşturduğumuz fonksiyonun yanındaki parantez içinde bilinmeyen yapıp, window.open kısmında da belirlemeyip, aşağıda verdiğiniz linkte bunları belirleyebilirsiniz. Örnekte kullandığımız pencere özelliklerini tanıyalım.

    menubar : Pencerenin en üst kısmında bulunan File, Edit vb. menülerin bulunduğu satır.

    toolbar: Pencerede üst kısımda Geri, İleri vb. tuşların bulunduğu kısımdır.

    location : Pencerede ziyaret etmek istediğiniz web adresini yazdığınız kısım.

    status : Pencerenin en alt kısmında üzerine geldiğimiz linklerin adreslerinin yazdığı bölüm.

    scrollbars : Kaydırma çubuğu.

    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 kenarından kaç piksel aşağıda olacağını belirler.

    Fullscreen : Sadece Explorer`da işe yarayan bu özellik F11 `e bastığınızdaki gibi pencereyi tam ekran yapar.

    Buradaki özelliklerden istediklerinize yes veya no değerleri vererek sayfayı istediğinz şekle sokabilirsiniz. Tabi; width, height, top, left özelliklerine verilen değerler piksel cinsinden rakamlar olacak.

    Bazen ziyaretçiden aldığımız bilgieri birleştirmemiz veya üzerinde işlemler(operator) yapmamız gerekebilir.

Kodu Görüntülemek için Tıklayın (işlemler)

    Bu örnekte var komutuyla 5 adet değişken oluşturduk, sonra bunların herbirine değerler atadık. Body kısmında ise bu değişkenler ile matematiksel işlemler yaptık. Yapılan işemleri browserda görebilmemiz için bu sonuçları JavaScript programımıza document.writeln komutuyla yazdırdık. Bu komuttaki parantez içindeki çift tırnak işareti arasına alınan unsurlar Script tarafından doğrudan görüntülenir. Çift tırnak işareti dışında ise değişkenlerin ve fonksiyonların isimleri yer alır.

    Her satırda x, y ve z değişkenlerimize matematik işlemleri yaptırdık. Fakat a ve b değişkenlerimizi işlem yapmadan sadece birleştirdik. Bunu da, bu değişkenlerin değerlerini belirlerken çift tırnak işareti içine alarak yaptık. Bu yöntem ziyaretçinin ad ve soyadının birleştirilmesi gibi işlemlerde kullanılabilir.

Kodu Görüntülemek için Tıklayın (Saat)

    Bu örnekte tarihsaat adlı bir fonksiyon oluşturup, içine işletim sisteminden zamanı öğrenen komutlar koyuyoruz. Daha sonra bu fonksiyonu sayfanın yüklenmesi ile beraber çalıştırıp (onLoad="tarihsaat()") hazırladığımız formun input bölümüne yazdırıyoruz.

    Ziyaretçiden bilgi almaya yarayan form dışındaki bir başka yöntemde Prompt diyalog kutularıdır.

Kodu Görüntülemek için Tıklayın (Prompt)

    Bu örnekte prompt kutusunu açmak için prompt komutu kullanılıyor. Yanında açılan paranteze ilk olarak diyalog kutusunda gözükmesini istediğimiz yazı, virgülden sonra ise yazı yazılacak alanda gözükmesini istediğiniz yazıyı yazıyoruz. Prompt kutusuna girilen yazıyı ekranda yazdırmak istediğimiz için bir isim verdik (AdSoyad). Daha sonra document.writeln komutu sayesinde yazmasını istediğimiz yazıyı çift tırnak işareti içinde, fonksiyonu ise hiç birşeyin içine almadan belirtip bunların sayfada çıkmasını sağladık.

    Bağlantılı JavaScript tekniğinde, <SCRIPT> </SCRIPT> tagleri arasında olan tüm kodları ayrı bir dosyaya kaydediyor ve bu dosyayı istediğimiz sayfalarda çağırabiliyoruz. Bu kaydettiğimiz dosyada hiçbir tag olmamalı sadece JavaScript kodları olmalı ve dosyanın soyadı .js olmalı (mesela kodlar.js) . Daha sonra bu dosyayı, istediğimiz sayfanın Head bölümünde aşağıdaki kodu yazarak çağırıyoruz. Böylece kodumuzu değiştirmek istediğimizde bunu her sayfada yapmaktan kurtuluyoruz, sadece bu dosyada yapmamız yeterli oluyor.

<HEAD>
<script src="kodlar.js" language="javascript1.2">
</script>

</HEAD>

Sincan Laptop tamiratı ile alakalı içeriklerin bulunduğu web siteden bilgilere ulaşabilirsiniz. Sincan'da laptop tamiratını en iyi yapan yerleri sorgulayabilirsiniz. Cihan KOÇ
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=