Sayfalarınıza süpriz yumurta eklemek.

Beni takip edenler varsa bilirler bu aralar JavaScript üzerine kendimi geliştiriyorum.  Bu aralar fena taktım diyebilirim. Açıkcası çokda hoşuma gitti.  Bu arada başlık biraz saçma oldu değil mi? Düşündümde nasıl tanımlayacağımı bulamadım. Sanırım en yakın tanım bu.  Öncelikle sayfanıza süpriz yumurta eklemek nedir ? Biraz daha açayım.

Bazı internet sayfalarında görmüşsünüzdür. Sayfaya girip  klavyeden “Sol-Sağ-Aşağı-Yukarı” gibi tuşlara bastığınızda farklı efekler veya gizli sayfalar açılır.  Aynen Mozilla Firefox’daki yumurtalar gibi…   Ne yapıyorduk Firefox’da ? Hatırlarsanız  adres satırına “about:robots” yazdığımızda karşımıza

İnsanoğlu, Hoş Geldin!
Barış ve iyiniyet çerçevesinde sizi ziyarete geldik!

Gibi gizli sayfalar açılıyordu. Enteresan örnekler var bunun gibi.  Şimdi sizlere internet sayfanızda, blogunuzda yada bir HTML sayfa içerisinde klavyeden birkaç tuşa basarak gizli bir sayfa yada bir resim açtırmayı anlatacağım.

Öncelikle biraz HTML bilgisi yeterli.  Java Scriptle yapacağımız bu efek eminim ki hoşunuza gidecektir.  Süpriz yumurtamızı oluşturmamız için gerekli olan örnek java script kodu aşağıda;

<!– Java Script efek –>
<script type=”text/javascript”>
var keyholder = [];
window.onload = function(){document.onkeydown = keystr;}
function keystr(e){
if(!e){e = window.event;}
tehkey = e[‘which’];
switch(tehkey){
case 84:
keyholder.push(“t”);
break;
case 69:
keyholder.push(“e”);
break;
case 65:
keyholder.push(“a”);
break;
}
var a_key = new RegExp(/t,e,a/i);
if(a_key.test(keyholder)==

true){
window.location=”http://www.teakolik.com/”;
}
}
</script>
<!– Java Son –>
// Kod kopyala-yapıştır yaparsanız çalışmayacaktır. Örnek kodu indirmek için tıklayınız.

Eğer bu kodu sayfanıza eklerseniz sayfayan giren bir kişi klavyeden “t“, “e“, “a” tuşlarına bastığı zaman kodlar içerisinde gördüğünüz adres açılacaktır.

Şimdi size kodu açıklayayım.   ” case 84: keyholder.push(“t”); “ ve “case 69: keyholder.push(“e”); “ ile gördüğünüz kısımlar klavyemizden tuşlayacağımız karakterler için gerekli olan kod satırları. Yani bir nevi JavaScript klavyemizi dinliyor. Klavyemizden gelecek komutlar üzerine verilen görevi yerine getirecektir.

Kodu kendinize göre editleyebilirsiniz.  İsterseniz klavyeden sağ sol yukarı aşağı tuşlarını isterseniz bir rakam veya bir karakter hiç fark etmez.  İstediğimiz şeyi explorer’e yaptırabilmekteyiz.

Şimdi sizlere gerekli olan kodları tek tek açıklamak istiyorum.

” case 84: keyholder.push(“t”); ”

demiştik.  Bu kod sayesinde klavyemizdeki  “t” harfini script dinlemeye alıyor.  Tabiki alt alta kod içerisinde de gördüğünüz gibi bir sıralama yapmaktayız.  Explorer sizin tanımlayacağınız bu karakterleri dinleyecek ve sonra gerekli olan işlemi gerçekleştirecektir.

” var a_key = new RegExp(/t,e,a/i); “

Bu satırda ise karakterlerimizin sıralamasını belirlemekteyiz. Üstte gerekli olan karakterleri tanımladıktan sonra bu satırda da karakterlerimizi  /t,e,a,k,o,l,i,k  gibi gerekli olan sıralamayı yapıyoruz.

Bu sayede klavyemizden tanımladığımız karakterleri javascript dinlemeye başlıyor.  Bu karakterleri tuşladığımız anda ise hemen aşağıdaki

” window.location=”http://www.teakolik.com/”; “

İşlemi gerçekleştiriyor.  Burada JavaScript’e  penceremizde http://www.TEAkolik.com adresini açtırıyoruz. İsterseniz farklı bir atraksiyon yaparak

window.location=”https://www.teakolik.com/wp-content/uploads/teakolik_anitkabir.jpg”

gibi bir resim dosyasıda açtırabilmekteyiz.  Tamamiyle size kalmış. Kodlarımızı düzenledikten sonra sayfamızın <body></body> kodları arasına yerleştirdiğimizde çalışacaktır.  Eğer bir WordPress blogunda kullanmak isterseniz footer.php içerisinde  </body> etiketinden öncesine boş bir yere kodları yerleştirebilirsiniz.

Peki ben klavyeden başka birşeyler tuşlattırmak istiyorum ?  Bu karakterleri nasıl belirleyebileceğim ?

JavaScriptte her karakter için belirli bir kod üretilmektedir.  Şimdi kullanacağınız karakterleri şu yazımda  tablo olarak vermiştim yazımdaki tabloya bakarsanız karakterlerin karşılığını görebilirsiniz. Şimdi gelelim bu tabloyu nasıl kullanacağımıza.   Kodumuzu dikkatle incelersek

case 84:
keyholder.push(“t”);
break;

Satırında “t” karakteri için bir tanımlama yaptığımızı görebilirsiniz.  Tablodan “t” harfine baktığımızda  karşılık olarak 84 rakamını görmekteyiz .  Yani kod içerisindeki

case 84:

Klavyemizdeki “t” harfinin javascript diline çevrilmiş halidir.  Bu şekilde istediğiniz gibi karakter tanımlaması yapabilmektesiniz.  Aslında çok basit bir şekilde kullanabileceğiniz bir script.

Peki farklı atraksiyonlar ?

Tabiki hayal gücünüze kalmış.  İsterseniz explorer penceresini kapattırın, isterseniz adres satırını sildirin, isterseniz bir mail atın, isterseniz göbek attırın size kalmış.

Ben resim açtırmak için kullandım.  Hatta bunu sevgilinize gönderip adıınzı yazdığı zaman karşısına bir çiçek resmi dahil çıkartabilmektesiniz.

Daha sonra vakit bulursam sizlere bu farklı atraksiyonlardan bahsedeceğim.  Artık sizinde internet sayfanızda bir süpriz yumurta var..!

NOT: Türkçe klavye kullandığımız için JavaScript içerisinde “i”, “ü”, “ö”, “ç”, “ğ” gibi karakterlerin karşılığını bulamayabilirsiniz.  “i” çalışmayabilir. İngilizce klavye gibi düşünüp  “ı” harfine basmak gerekebilir.  Lütfen EN klavye tuşlarına göre kodlayınız.

“Sayfalarınıza süpriz yumurta eklemek.” üzerine 8 yorum

  1. Güzel olmuş hamza hocam;) Hiç unutmadığım bir süpriz yumurta var webte. Sanıyorum fransızca bir sitenin bir yerinde Press 9 for English (İngilizce için 9 a basın) ibaresi yer alıyordu, şu klasik telefon görüşmelerindeki banntaki bayanın söylemi gibi. Önce güldüm güzel espri diye ama sonra 9 a bastıgımda site ingilizce gelince bir dumur durumu olmuştu bende:) hey gidi heyy :)

    Cevapla
  2. Gerçekten güzel bir eklenti olmuş. Bunun daha değişik versyonlarını da bekliyoruz. Özellikle de her karakterin js’deki karşılıklarını vermeniz güzel.

    Teşekkürler

    Cevapla
  3. Şimdi fark ettim mesela benim sitede google yazınca google’a gidiyor daha sonra sitede g harfine basınca hemen google açılıyor.Bunun nasıl önlerim?

    Cevapla
  4. Merhaba muhteşem anlatmışsınız , Msn’inizi Ekledim Sormak istediğim birşey var. depresifmelodi[at]hotmail.com kabul ederseniz çok makbule geçer.

    Cevapla
  5. kuzen az değilsin; “Hatta bunu sevgilinize gönderip adıınzı yazdığı zaman karşısına bir çiçek resmi dahil çıkartabilmektesiniz.” demek öyle:) Bak bunu sevdim ve yapabilirim:) Ama sanırım bu kodlar botlar tarafından farklı algılanabilinir?? yaniz ararlı olarak görülebilinir. sonuçta klavye dinleniyor??

    Cevapla

Yorum yapın

teakolik hamza şamlıoğlu blog logo

Wordpress altyapısını kullandığımız bu sistem, Sunucu Çözümleri firmasında yüksek performans sağlayan özel sunucularda barındırılmaktadır. Görüntülemek için en iyi Chrome tarayıcı, 1920x1080 çözünürlük ve Full HD Android telefonlarda çalışır. Ayrıca Sitedeki içeriği istediğiniz gibi çarpabilirsiniz. :)