javascript alert fancy

Javascript alert’in tarayıcılara göre farklı pencere şekillerinde çizdirildiğini biliyorsunuz. Sadece farklı pencere şekilleri değil aynı zamanda içinde sistem fontu kullanılması, pencere başlığına veya onay tuşunda yazan yazıya müdahale edilememesi veya sayfanın çalışmasını durdurması gibi engelleri olduğunu zaten biliyorsunuz.

Şimdi gelelim çok basit bir kullanımıyla

şeklinde ürettiğiniz onay/hata/mesaj kutusunu

çok benzer kullanımla

şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya çevirmeye.

Okumaya devam et “javascript alert fancy”

PHP’de diziler yerine nesnelerle çalışmaya alışmak

Javascript, jquery ile çok uğraşmaktan dizi kavramı php’de kullandığım birşey olarak kalmaya başladı. Yani jquery’de o her şeyi nesnel yazıyor, uğraştığınız şeylerin neredeyse tamamı DOM üzerinde bir nesne oluyor. PHP’de de genellikle yazdığınız bir sınıftan ürettiğiniz nesneler var. Onun dışında anlık yaptığınız bütün işleri dizilerle yapmaya alıştık.

Belki JSON ile back-end’de uğraşıyor olmak biraz daha nesnelerle çalışmayı zorluyor çünkü encode ettiğiniz veya decode ettiğiniz her şey nesnelere dönüşüyor.

Neyse, 2 satır kod ile diziler yerine anlık yaptığınız basit işleri nesneler üzerinde yapabileceğinizi gösterebilirim.

Nesne, dizi ve nesne şeklinde karışık kullanabilirsiniz.
Mesela son arabanın markasına;

şeklinde ulaşabilirsiniz.

Temel JavaScript (1) – JavaScript Hakkında

Web Programcıları İçin Temel JavaScript Bilgisi


JavaScript Nedir?

JavaScript günümüzde neredeyse bütün tarayıcılar tarafından desteklenen kullanıcı taraflı betik (script) dilidir. Web geliştirme ile ilgilenen tüm programcı arkadaşların en azından basitçe bilmesi gereken çok kullanışlı bir dildir. Kodları, ismindende anlaşılacağı gibi java tabanı üzerine kuruludur.

Neden Temel JavaScript Bilgisine İhtiyaç Duyayım?

Çünkü çogu web sayflarında aktif kısımlar vardir, üzerine gelince efekt uygulanan resimler, özellikle bol sayıda formlar vb. Bu öğelerde javascript fonksiyonlarını kullanırız ve bu bahsettiğim öğeler bir web sayfasının interaktif bir ortama dönüşmesini sağlayan şeylerdir. Kullanıcının etkileşimini sağlar.

Çoğu kişiden interaktif kısımlar hakkında çok soru alıyorum, “kendine özgü pop-up’ları”, “bu kadar dinamik sayfaları nasıl yapıyorsun?” diye. Bunların hepsi javascript sayesinde oluyor.

Burada temel javascript bilgisi vermemin asıl amacı php, asp, jps gibi sunucu tabanlı uygulama geliştiren arkadaşlara web formlarındaki kontrolleri javascript ile yaptırarak sunucuyu yormamak. Aynı zamanda kullanıcı için de zaman tasarrufu anlamına geliyor bu.

Böyle birşeyi anlatmak için küçük bir örnek vereyim;
Diyelim ki uzun bir başvuru formunuz var, bir de dosya yüklenmesi gereken bir alan (mesela fotograf). Her tarayıcı, bir form gönderilirken dosyaları da birlikte sunucuya gönderir. Bundan sonrası sunucu tarafında işler. Siz birkaç mehabytelık dosya göndericek olursanız ve adınızı girmediğinizde, form gönderilirken, dosyalar yüklenir ve o kadar beklemeden sonra bir hata ile karşılaşırsınız “Adınız boş olamaz!” diye. Bütün sinirinizle bilgisayara bakar ve geri tuşuna basarsınız. İşte bunun gibi durumlarda karakter sayısını kontrol etmek gibi basit işlemlerden oluşan kontrolleri javascript ile hallederek zamandan ve kullanıcının negatif bakış açısı kazanmasından tasarruf etmiş olursunuz.

Bir web programcısının neden javascript kullanması gerektiğini anlattığıma göre artık yavaştan yavaştan javascript’e girmeye başlayabilirim.

Bu döküman serisinde anlatılan neredeyse her şeyi kendiniz de deneyip html’ler şeklinde ayrı ayrı kaydedip yapabilirliğinizi artırın ve pratik yaparak öğrenmiş olun.

Değişken tanımları Java ve c tabanlı dillerdeki gibi;

şeklinde tanımlanıyor.

Görüğünüz gibi açıklama satırları da // ve /* */ ile yapılıyor.

Yazacağınız kodlara bol bol açıklama koymayı unutmayın, çünkü açıklamalar hata yakalamanızı kolaylaştırır, yapılan işlemleri daha rahat görmenizi sağlar. Zira aynı koda 2 ay sonra baktığınızda herşeyi unutmuş olabilirsiniz. Ya da aynı koda başka birisi müdahale etmek zorunda kalabilir.

Nesne Adresleri

JavaScriptde objeler’in adresleri aynı bir ev adresi tanımlamak gibi oluyor. Büyük yer tanımından küçüğe doğru anlattığınızı düşünün:

gibi, benzer şekilde her nesne kendinden bir üstteki nesnenin içinde olduğundan adresleme de bir ağaç yapısına benzetilebilir.

window aynı penceredeki çerçeveler (frame) arasında iletişirken, document, aynı dökümandaki nesneler arasında geçerli oluyor. Mesela faklı bir çerçevedeki bir resim window.frame_adi.resim_adi şeklinde oluyor.

JavaScript’de bu bölümde en önemli nokta formlarda. Formlar kendi kategorisi içerisinde değerlendiriliyor.
Mesela bir formdaki ad şeklindeki bi textfield’ın adresi document.form_adi.text_input_adi oluyor.

Sayfanızda kullandığınız nesneleri adreslemek için gereksiz formlar eklemenize gerek yoktur. Mesela, bir input’u sadece bir efektin taşıyıcısı olarak kullanacaksak bunun için bir form daha eklememiz gerekmez. Normalde form nesneleri bir formun içerisinde değilse doğrudan document’dan sonra belirterek erişilemez. Bir form bulunmadığında ise bu nesnemizin etikentinde id şeklinde belirttiğimiz prametreyi kullanarak adresini alabiliriz. Bu işi de document nesnesinin bir özelliği yardımı ile yapıyoruz.

dediğimiz zaman document nesnesi üzerindeki bütün alt nesneler taranır ve “eleman” kimliğine uyan elemanın adresi nesne şeklinde döner. Bir değişkene atayıp “eleman” kimlikli nesneyi kullanabiliriz.

Örnek:

Fonksiyonlar

Fonksiyonlar basitçe;

şeklinde tanımlanıyor. Aynı php, flash ve çogu c, java dillerindeki gibi.

JavaScript Büyük-Küçük harf ayrımı yapar. Onun için kullanımlarınızda tanımlı fonksiyon, değişken isimlerini yazarken dikkat edin!

Hata Yaparsak?

Çoğu browser bu konuda debugger’a sahiptir. Yani eğer hata yaparsanız uyarı alır, veya sayfanın status’unde hatalı olduğunu görürsünüz.
Internet Explorer’da statusbar’da ünlem, Netscape’de uyari penceresi çıkar.

Mozilla Firefox’da JavaScript konsolu ile takip edebilir, hatta firebug eklentisi ile çok daha iyi hata yakalama teknikleri uygulayabilirsiniz. Firebug ile aynı zamanda css ve html hatalarınızı da ölçebilir, sayfanızın yüklenme hızı optimizasyonunu yapabilirsiniz. http://www.getfirebug.com/

Temel JavaScript (2) – JavaScript’e Girelim dökümanından devam edin.

Temel JavaScript (2) – JavaScript’e Girelim

 Web Programcıları İçin Temel JavaScript Bilgisi


Gereksiz açıklamalar

Okuduğunuz bu dökümanın başlığından da anlayabileceğiniz gibi bunu okuyan arkadaşlarımın neredeyse hepsi programcı, illaki bir c veya java tabanlı dil ile uğraşmışsınızdır. Javascriptdeki neredeyse çoğu şey c, java ailesi dillerde olduğu gibidir. O açıdan döngüler, kontrol yapıları, operatörler ile ilgili verilmesi gereken bilgileri geçiyorum.

Olaylar, kullanıcı hareketinin kontrolü

Javascript dinamiktir, olaylara tepki vermesi için geliştirilmiştir. Zaten kullanım alanı kullanıcının etkisine tepki veren sayfa geliştirmektir. Mesela farenin hareketine, biryere tıklamaya veya bi nesne üzerindeki olaylara.

HTML nesneleri üzerinde bazı olaylar tanımlayarak o olaylarda javascript fonksiyonlarımızın/görevlerimizin çalıştırılmasını sağlayacağız. Bütün görevler olaylar ile tanımlanmak zorunda değildir. Bir görevi olay vermeden yazarsak, html sunucudan yüklenmeye başladıktan sonra, yazdığınız kod okunup anlamlı halde yorumlandığı anda işlenmiş olacaktır. Bu olaylar nesneler arasındaki farklara göre değişir. Bir buton tıklanabilir, üstüne fare imleci getirilebilir, odaklanabilir vs bir resim tıklanabilir, yüklenebilir, fare imleci üstüne getirilip üstünden kaçırılabilir ancak odaklanamaz!

Olayları html etiketlerine doğrudan argüman olarak yazabiliriz ya da betiğimiz içinde nesne olarak ulaştıktan sonra tarayıcı türüne göre o nesneye bir olay (event) ekleyerek tepki oluşturabiliriz.

Örneğin bir input butona tıklandığında tepki olarak ekrana birşeyler yazdıralım.

Çıktı :

Her nesneye ait belirli olan bu olayları araştırarak bulabilirsiniz. Sabit birşey yok çünkü, bu olayları web tarayıcı programı yakaladığı için bazı olaylar her tarayıcı tarafından yakalanmıyor ya da farklı algılanıyor.

Burada bütün olası olayları ve anlamlarını açıklayarak yazacağım;

http://www.w3schools.com/jsref/jsref_events.asp adresinden hangi olayların hangi html nesneleri tarafından desteklenip desteklenmediğini öğrenebilirsiniz.

Temel Javascript (3) – Çıktılar ve Nesneler dökümanından devam edin.

Temel Javascript (3) – Çıktılar ve Nesneler

Web Programcıları İçin Temel JavaScript Bilgisi


Birşey Yazdırmak?

Javascript’de ekrana (sayfaya) birşey yazdırmak için document.write(); kullanılır. document.write(degisken_adi); veya document.write(“Yazilacaklar”); seklinde kullanilir.

Hata Çıktısı, PopUp Açmak?

Eğer bir hata çıktısı vermek istiyorsak genelde alert(); fonksiyonu ile popup mesaj gösterebiliriz.

şeklinde kulanılır.

Nesneler

Javascript’de nesneler üzerinde çalıştığımız elemanlar veya değerlerdir. Mesela bir form elemanını kodlarımızda adresleyerek nesne şeklinde kullanırız, ya da yaptığımız matematiksel işlemlerde değişkenlerimizi bazı nesne kullanırız.
Javascriptte fonksiyonlar kadar nesne özellikleri ile de çalışılır. Zaten çoğu nesne, fonksiyon şeklindedir. Sadece kulalnımı farklıdır.
Bunlara ayrıntılı olarak bakalım :

String nesnesi

Örnek Kullanım :

Date nesnesi

Örnek Kullanım :

Math nesnesi

Örnek Kullanım :

 

Temel JavaScript (4) – Zamanlayıcılarla çalışmak dökümanından devam edin.

Temel JavaScript (4) – Zamanlayıcılarla çalışmak

Zamanlayıcı da nesi?

Javascripte otomatik işler yaptırırken sürekli bişeyleri gözetlemek isteyebilir, belirli periyodlarla bişeyler yaptırmak isteyebilir ya da gecikmeli işler verebiliriz. Bunun için zamanlayıcıları kullanırız. Çoğu kullanıcıyla eşzamanlı çalışan programlama dillerinde olduğu gibi javascriptde de zamanlayıcılar kodlarda oldukça fazla biçimde kullanılır.
Zamanlayıcıların kullanımı çok basittir. Bir değişkeni zamanlayıcı objesi olarak atayıp onu kontrol edebilir veya nasıl çalıştığı önemli olmayan zamanlanmış işlerde yani kontorl etmenize gerek olmayan zamanlayıcılarda objeleştirmeye gerek yoktur. Bunları kısa örneklerle açıklayalım.

Basit bir yüklenme efekti yapalım.

Aslında oldukça basit. setTimeout fonksiyonu çift parametreli, birincisi tırnaklar içerisinde yapılacak işi diğeri ise milisaniye cinsinden gecikmeyi belirtiyor. Yukarıda bu fonksiyon sürekli içerisinde bulunduğu fonksiyonu çağırttığı için durdurulmadığı sürece teorik olarak sonsuza kadar dönecektir. Ancak biz işlem olarak sürekli bir text inputa “+” işareti yazdırıyoruz, ve kontrol olarak da o text inputtaki karakter uzunlugunu kontrol ediyoruz. bir progress bar şekli için input’un dolması yeterli, input’un görünür karakter uzunluğunu 50 olarak ayarlamıştık. Bu sahayı 40 karakter tamamiyle doldurmaya yetiyor. Onun için inputun karakter uzunluğu 50 olduğu zaman ayarladığımız zamanlayıcı objesini clearTimeout fonksiyonu ile sıfırlıyoruz. Böylece bitmiş oluyor.

Temel JavaScript (5) – Küçük uygulamalar dökümanından devam edin.

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.