Temel JavaScript (5) – Küçük uygulamalar

Bu kadar teorik bilgi yeterli olacaktır. Tabiki sadece buradaki bilgilerle yetinmeyecek araştıracaksınız. Özellikle de javascript referans sitelerini iyi kullanmanızı öneririm. Bir onje özelliğinin hangi browser’ların hangi versiyonlarından itibaren desteklenmeye başladıklarını da bu referanslardan öğrenebilirsiniz. Çok obje, çok özellik bulunduğu için burada bununla ilgili açıklama yapmıyorum. Her nesneyi ve bunların oluşturdukları objelerin özelliklerini kullananrak oldukça dinamik sayfalar yazabilirsiniz.
Şimdi biraz uygulama yapalım..

1. Eposta kontrolü

Sayfamızda kullandığımız iletişim formu gibi yapılar için için e-posta kontrolü yapalım. Bir eposta’yı kontrol etmenin en basit tekniği içerisinde @ ve . işaretleri aramaktır. Daha gelişmiş aramaları düzenli ifadeler ile yapabiliriz. Javascript’de de düzenli ifade kullnımı vardır. Burada basit olan tekniğe göre bişeyler yapacağım.

2. Basit Rollover efekti

Bütün rollover efektlerinde üstüne geldiğiniz nesne kendini yöneterek değişimi sağlar. Mesela bir butonun üstüne gelince kabarması aslında tamamiyle gözümüzün bir geçiş olayında efektmiş gibi algılamasından kaynaklanır. Bu tarz bütün sayfalarda aslında sadece 2 grafik kullanılır. İlki üstünde olmadığınız zamanki kabarmamış buton diğeri ise kabarmış halidir. Üstine geldiğimizde kendi etiketini yöneterek src parametresinin değerini kabarmış olanın url’i ile değiştirmesi ile o grafiğin sayfadaki görünümü değişir. Boyutları aynı olduğu için sayfada gördüğümüz tek fark grafikler arasındaki görünüm farkıdır. Fark ne kadar az ise o kadar küçük değişimler vardır. Bu küçük değişimler iyi ayarlandığında efektler oluşur. Şimdi 2 basit grafik ile bir rollover efektir yapalım :

Grafikler şöyle olsun :

Yazı
1.gif

Yazı
2.gif

Bu grafiklerin imaj boyutları aynı. Sayfa yüklendiğinde 1.gif yüklenecek biz imaj’ın onMouseOver ve Out olaylarında kendisinin src’lerini kontrol etmesini sağlayacağız.

3. Basit bir oyun yazalım

Bu oyun casino’larda bol bulunan şu 3 şeyi aynı tutturduğumuzda kazandığımız şey (adını ben de bilmiyorum 🙂 ). Bunun için öncelikle 3 tane imaj basıp altına bir buton koymalıyız. Buton bir fonksiyonu çağırmalı ve oyunu ilerletmeli. Sonra farklı olan şeyleri (sayı veya herhangi birşey olabilir) sayısını belirlemeliyiz. Ben bu oyunda 4 tane yapacağım. İşte seçtiğim 4 farklı grafik.

Temel Javascript Bilgisi şimdilik bu kadar. İleride gelişmiş javascript örneklerine dair dökümanlar bulacaksınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir