Entere Basınca Submit Etmek

Entere Basınca Form submit etmek

Formlarımızda ya da arama kutularımızda metni yazdıktan sonra fare ile butona basmak kullanıcılar için gerçekten çok zahmetli bir iş. Bu yüzden formlarımıza mutlaka Enter‘e basarak submit işlemini tetiklemeyi eklemeliyiz. Bu sayede hem kullanıcıları mutlu etmiş olacağız hem de zaman kazandırmış olacağız. Kullanıcı memnuniyetinin böyle küçük ayrıntılarda olduğunu unutmamamız gerekli.

Yapacağımız işlem oldukça basit.  Textbox‘un onkeydown eventini javascript kullanarak sorgulayacağız. Eğer basılan tuş Enter ise submit işlemini gerçekleştireceğiz. Enter‘in key code karşılığı 13’tür. Redirect() fonksiyonu ile gidilmesi istenen adrese yönlendirmemizi yapıyoruz.

<html>

<script type="text/javascript" >
function Redirect() {
window.location = "http://www.gidilecekadres.com/arama.aspx?q=" + document.getElementById("search").value;
};
</script>

<body>
<div id="searchbox" >
<input id="search" type="text" placeholder="Oyun Ara" onkeydown="if (event.keyCode == 13) { Redirect(); }" />
<input id="submit" type="submit" value="Ara" onclick="Redirect()" />
</div>
<body>

</html>

Javascript ile Alert Kullanarak Textbox’a Girilen Değeri Ekrana Basmak

Java script ile textboxdaki değeri alert ile ekrana basmaBu örneğimiz oldukça basit ama temel olarak Javascipt ile tanışanlar için güzel bir örnek.

Öncelikle bir adet Textbox ve Buttonumuz var. Amacımız butona basıldığında Textbox‘daki değere erişip Alert ile ekrana bastırmak.

Bunu yapabilmek için öncelikle onclick eventinden yararlanıyoruz. Bu event ile butonumuza basıldığında hangi Javascript kodunun çalışacağını belirttik. (Örneğimizde EkranaBas() fonksiyonu çalıştı.)

EkranaBas fonksiyonu ise id’si “kutu” olan nesnenin value değerini getirmektedir. Son olarak bu gelen değeri ekrana Alert kullanarak ekrana basıyoruz.


<html>

<!-- Java script kısmı Fonksiyon tanımladım id'si "kutu" olan tagin value'sunu alert ile ekrana basıyor. -->
<script type="text/javascript" >
function EkranaBas()
{
alert(document.getElementById("kutu").value);
}
</script>

<body>
<!-- HTML input kısmı butona basınca EkranaBas fonksiyonunu çağırıyor-->
<input type="text" id="kutu"><br>
<input type="submit" value="Bana Tıkla" onclick="EkranaBas()">
</body>

</html>

Bu küçük örnekte eş zamanlı Alert kullanımı, Fonksiyon kullanımı, ve document nesnesini kullanarak id’sinden elemanlara erişmeyi öğrendik.

Twitter – Facebook Butonu Yavaş Yüklenme Sorunu [Page Load Time]

facebook-like facebook-tavsiye twitter-takip twitter-tweet

Sayfalarımızın olmazsa olmazı sosyal medya butonları beraberinde büyük bir sorun getiriyorlar. Bazen o kadar geç geliyorlar ki sayfalarımızın yükleme süresini inanılmaz artırıyorlar. Bu da hem maliyet hem seo açısından olumsuz etki hem de ziyaretçiler için olumsuz izlenim oluşturuyor.

Facebook ve Twitter kendi scriptlerini çağırdıkları için takıldıkları zaman 30 saniye boyunca beklemeye devam ediyorlar. Bu da kabul edilebilecek bir süre değil.

Bu istenmeyen süreden kurtulmanın en mantıklı yolu başta scriptleri yüklememek. Butonlarımızın yerine de buton resimlerini koymamız gerekli. Buton resimlerimizin üzerine gelindiği zaman scriptleri çağırıyoruz. Resimleri gizleyip gerçek butonların oluşmasını sağlıyoruz.

Bu sayede sayfamız scriptleri beklemeden yüklenmiş oluyor. Eğer ziyaretçi paylaşmak isterse yükleniyor. Tüm olumsuz etkilerinden korunmuş oluyoruz.

Örnek çalışma:


<table border=0 width=140 cellspacing=0 cellpadding=0>
<tr><td height=30><div id="fb-like" class="fb-like" data-href="http://www.facebook.com/xxx" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" style="background:url('/images/facebook-like.png') no-repeat;"><img style="cursor:pointer;" onmouseover="javascript:runfb();" src="/images/facebook-like.png" /></div></td></tr>
<tr><td height=30><div id="fb-recommend"></div><fb:like send="false" layout="button_count" width="90" show_faces="false" font="lucida grande" action="recommend"><img style="cursor:pointer;" onmouseover="javascript:runfb();" src="/images/facebook-tavsiye.png" /></div></fb:like></td></tr>
<tr><td height=30><a id="tw-follow" href="https://twitter.com/xxx" style="font-size:12px;" class="twitter-follow-button" data-show-count="false" data-lang="tr" data-show-screen-name="false"><img style="cursor:pointer;" onmouseover="javascript:runtw();" border="0" src="/images/twitter-takip.png" ></a></td></tr>
<tr><td height=30><a id="tw-share" href="https://twitter.com/share" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-size="small" data-count="true"><img style="cursor:pointer;" onmouseover="javascript:runtw();" border="0" src="/images/twitter-tweet.png" ></a></td></tr>
</table>

<script type="text/javascript">

function runtw() {
document.getElementById("tw-follow").innerHTML = "";
document.getElementById("tw-share").innerHTML = "Tweet";
var pw = document.createElement('script'); pw.type = 'text/javascript'; pw.async = true;
pw.src = '//platform.twitter.com/widgets.js';
var sw = document.getElementsByTagName('script')[0]; sw.parentNode.insertBefore(pw, sw);
}
function runfb() {
document.getElementById("fb-like").innerHTML = "";
document.getElementById("fb-recommend").innerHTML = "";
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1&appIdId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
}
</script>

JavaScript ile Cookie (Çerez) Kullanımı

javascript cookie çerez kullanımı Cookieleri sık kullanıdığımız sayfalarda cookie oluşturmak ve okumak için Javascript fonksiyonu tanımlamak yararlı olur.
Aşağıda setCookie ve getCookie tanımlanmıştır. setCookie sırasıyla cookie ismi, cookie’nin değeri ve ne kadar süre saklanacağı parametrelerini almaktadır.

 
 
 


<script type="text/javascript" charset="utf-8">
function setCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
</script>

 
Sonrasında bu fonksiyonları kullanarak cookie’mizi okuyalım ve alert ile ekrana yazdıralım, eğer bulamazsak cookie oluşturalım.


<script type="text/javascript" charset="utf-8">
    var cerez1Deger = getCookie("cerez1");

    if (cerez1Deger == null) {       
        setCookie("cerez1", "deger", 1);
    }
    else{
    alert("Çerez bulundu:"+cerez1Deger);
    }
</script>

Javascript ile Tarayıcı Belirleme

tarayıcılarJavascript kullanarak kullanıcının hangi tarayıcıyı kullandığını belirleyebilirsiniz.

Aşağıdaki kod ile Internet  Explorer, Firefox, Chrome ve Yandex tarayıcıları ayırt edebilirsiniz.

Dilerseniz kendiniz diğer tarayıcıları da ekleyebilirsiniz


<script type="text/javascript">

var browser= "Belirsiz";

if(navigator.appName=="Microsoft Internet Explorer")
{
browser="ie";
}
else if(navigator.userAgent.toLowerCase().indexOf('yabrowser') > -1){
browser="yandex";
}
else if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
browser="chrome";
}
else if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
browser="firefox";
}
alert("Tarayıcınız: "+browser);

</script>

JavaScript Mail Formatı Kontrolü

Javascript ile formlardaki mail boxlarımızın, gönderilmeden önce uygun formatta olup olmadığı kontrolünü yapabiliriz. Bu sayede sunucuya göndermeden kullanıcıya hata bilgisini verebiliriz.

Dikkat: Güvenlik için her zaman sunucu tarafında da kontrol yapmamız gereklidir. Kullanıcı Javascript’leri kapatabilir dolayısı ile kontrollerimiz deaktif yapılabilir..


</head>
<script type="text/javascript">

function mailKontrol()
{
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var mail = document.getElementById("mail").value;
if(reg.test(mail) == false) 
    {
      alert('Hatalı Mail Formatı!');
      return false;
    }
else{
      alert('Dogru Mail Formatı.');
      return true;	  
    }
}

</script>
</head>

<body>
<form id="frm">

<input type="text" id="mail" /> Mail: </br>
<input type="button" value="gönder" onclick="mailKontrol()" />

</form>
</body>