JavaScript Hazır Fonksiyonlar
Merhaba Arkadaşlar,
Bu makalede sayısı 13 ü bulan hazır javascript fonksiyonları ile ilgili örnekler çözerek bu fonksiyonların hangi işlevleri gösterebildiğini ve hangi projemizde kullanabileceğimiz hakkında bilgi sahibi olacağız. İlk fonksiyonumuz ile işlemlerimize başlayalım..
escape() :
Web sayfası URL ‘leri gibi karakter kümelerini universal code sistemini kullanarak şifreleme işlemini gerçekleştirir. Adres satırlarımızı girdiğimiz bölümde oluşan ve yorumlamada sıkıntı çekilen karakterlerin tek tek yorumlanması içinde kullanılabilir. Bu fonksiyonun uygulaması için ” escape.html ” isminde bir sayfa oluşturuyoruz ve html kodlar içerisine javascript kodlarımızı yerleştirerek şu şekilde bir görüntü elde ediyoruz :
<html>
<head>
<title>BilgiSayaci.Org - Escape() Fonksiyonu</title>
<script type="text/javascript">
document.write(escape("An İtibariyle BilgiSayaci.Org Sitesindesiniz # "));
</script>
</head>
<body>
</body>
</html>
escape.html isimli dosyamızı çalıştırdığımızda karşımıza ” An%20%u0130tibariyle%20BilgiSayaci.Org%20Sitesindesiniz%20%23%20 ”
şeklinde bir yazı gelecektir. Doğru yoldayız devam edelim 🙂
unescape()
Bir önceki örnekte görmüş olduğumuz escape fonksiyonu ile verilerin şifrelenerek karşımıza çıktığını görmüştük. Bu işlem ile de adından da anlaşılacağı üzere şifrelenmiş verilerin geri dönüşünü sağlayacağız. ” unescape.html ” isimli bir sayfa yaratarak html kodlarımızı yazıyoruz ve daha sonra datag ‘leri arasına javascript kodlarımızı yazıyoruz. Tam bir örnek olması amacı ile bir önceki örnek sonucu almış olduğumuz ekran görüntüsünü geri çevirttirerek tam ne işe yaradığını görebilme şansı elde ediyoruz.
<html>
<head>
<title>BilgiSayaci.Org - UnEscape() Fonksiyonu</title>
<script type="text/javascript">
document.write(unescape("An%20%u0130tibariyle%20BilgiSayaci.Org%20Sitesindesiniz%20%23%20"));
</script>
</head>
<body>
</body>
</html>
unescape.html isimli dosyamızı çalıştırdığımızda karşımıza ” An İtibariyle BilgiSayaci.Org Sitesindesiniz # ” şeklinde bir yazı gelecektir ( Escape() komutunda kullandığımız yazı ) .
ParseFloat()
Bildiğiniz üzere projelerimizde hemen her zaman isteyerek veya istemeyerek bazı kurallara bağlı kalarak veri tiplerini kullanıyoruz. Bu veri tiplerinden en ünlü olarak sayabileceklerimiz ; String , Integer , Char , VarChar , Float diyebiliriz. ParseFloat işlemini uygularken ise kullandığımız iki değişken String & Float olacaktır. Girilen string değerler bu fonksiyon sayesinde float veri tipine dönüşerek ekrana çıktı verecektir. ” parsefloat.html ” isimli sayfamızı oluşturuyoruz ve içerisini şu şekilde kodluyoruz :
<html>
<head>
<title>BilgiSayaci.Org - ParseFloat() Fonksiyonu</title>
<script type="text/javascript">
document.write(parseFloat("BilgiSayaci.Org - JavaScript Uygulamaları")+"<br>");
document.write(parseFloat("Bu yazı 34 plaka numaralı şehirden yazılıyor")+"<br>");
document.write(parseFloat("234513568Ex46"));
</script>
</head>
<body>
</body>
</html>
Gördüğünüz üzere dosyayı çalıştırdığınız zaman alt alta iki adet ” NaN ” yazısı ve üçüncü satırda da ” 234513568 ” rakamları belirecektir. Yorumlamak gerekirse ilk iki satır için yazdıklarımıza bakarsak ” BilgiSayaci.Org – JavaScript Uygulamaları ” cümlesinde float türüne çevrilecek bir veriye rastlanmamıştır. Bu nedenle NaN yazılmıştır. İkinci satıra baktığımızda ise ” Bu yazı 34 plaka numaralı şehirden yazılıyor ” yazısında göze çarpan bir 34 olmasına rağmen bu rakamdan önce oluşturulan kelimeler çeviri işlemine yine müsaade etmemişlerdir. Son satırımıza baktığımızda ise dikkat ettiyseniz ” 234513568Ex46 ” yazmamıza karşın ekrana ” 234513568 ” çıktı. Bunun nedeni ilk harf olan ” E ” ye kadar olan kısım rakamlardan oluştuğu için çeviri işlemi gerçekleşirken harf görüldüğü anda uygulamanın durdurulması olmuştur.
ParseInt()
Temel elektronik dersleri gibi derslerde çokça gördüğümüz konulardır ikilik(2) , oktal(8) , ondalık(10) , onaltılık(16) sayı sistemleri. İşte bu fonksiyonda String türünde yazılmış bir veriyi ilk cümlede belirttiğim sayı türlerinden hangisi belirtilmiş ise ona dönüştürmektedir. Örneğimizi yapmak için ” parseint.html ” isimli bir sayfa yaratıyoruz ve önce klasik html kodlarımızı daha sonra da javascript komutlarımızı yazıyoruz :
<html>
<head>
<title>BilgiSayaci.Org - ParseInt() Fonksiyonu</title>
<script type="text/javascript">
document.write(parseInt("100",2)+ "<br>");
document.write(parseInt("100",10));
</script>
</head>
<body>
</body>
</html>
İlk satırda belirttiğimiz değer ” 100 rakamını ikilik sayı sistemin de çöz ” şeklinde idi ve sonucu 4 çıktı. İkinci satırda ise ” 100 rakamını onluk sayı sisteminde çöz ” diyerek bir sorgu daha gönderdik ve sonucu 100 çıktı.
Strıng()
Evet şu anda basit uygulamaların yer aldığı bir makale oluşturuyoruz ancak daha gelişmiş uygulamaları düşündüğümüzde bir çok değişken oluşturulacak ve her değişken içinde string , integer gibi veri tipleri atanması gerekecek. String uygulamasının işlevinin daha iyi anlaşılması için oluşturacağımız değere integer bir veri gireceğiz ve string türüne dönüştürüldüğünde sonucun ekrana nasıl yansıtıldığını göreceğiz. ” string.html ” isimli bir sayfa oluşturuyoruz ve basit bir uygulamayı html kodlarının içerisinde uygun yerlere yazarak oluşturuyoruz.
<html>
<head>
<title>BilgiSayaci.Org - String() Fonksiyonu</title>
<script type="text/javascript">
var bilgisayaci=58;
document.write(typeof String(bilgisayaci));
</script>
</head>
<body>
</body>
</html>
Kodlarımızı yazdıktan sonra kaydediyoruz ve daha sonra sayfamızı çalıştırıyoruz. Sonuç olarak ekranda yalnızca ” String ” yazdığını göreceğiz. Integer olan veri tipi string bir ifadeye bu şekilde dönüştürülebiliyor.
Number()
String ifadeye dönüştürürken ekrana string yazdığını görmüştük. Şimdi ise aynı kodları bu örnek için yazıp çalıştırdığımızda ekranda number yazdığını göreceğiz. Girilen String değer number yani sayısal bir veri türü olarak tanımlanarak ekrana bu şekilde bir çıktı alınıyor. ( Not : String ‘e çevirirken tırnakları kullanmadan bir rakam girdik bu da o rakamı integer olarak görmemizi sağladı ancak şimdi tırnak kullanarak giriyoruz ve String bir değer olarak görünmesini sağlıyoruz. )
<html>
<head>
<title>BilgiSayaci.Org - Number() Fonksiyonu</title>
<script type="text/javascript">
var bilgisayaci="58";
document.write(typeof Number(bilgisayaci));
</script>
</head>
<body>
</body>
</html>
IsNaN()
Daha önceki örneklerimizde ” NaN ” değerlerinin dönerek ekrana çıktı olarak verildiğini görmüştük. Olumsuz değer olarak gördüğümüz ” NaN ” , bu fonksiyonumuzda da olumsuzluk özelliklerine devam etmektedir. Girilen değerlerin birer rakam ifade edip etmediği sorgulanacak ve eğer bu sorgudan çıkacak sonuç ” true ” ise IsNaN tarafından false , eğer bu değerler rakam değil ise true değeri döndürülecektir. ” isnan.html ” sayfamızı oluşturalım ve bir kaç değişik değer döndürerek sonuçlarını hep birlikte görelim :
<html>
<head>
<title>BilgiSayaci.Org - IsNaN() Fonksiyonu</title>
<script type="text/javascript">
document.write(isNaN("34")+"<br>");
document.write(isNaN("bilgisayaci.org")+"<br>");
document.write(isNaN("11.09.2012"));
</script>
</head>
<body>
</body>
</html>
Kodları yazıp çalıştırdığımızda göreceğiz ki ilk satırımızda girdiğimiz tamamı rakam olan değer nedeniyle false değeri dönecek ve tamamında veya bir kısmında rakam harici değişkenler bulunan diğer iki satırımızda true değeri dönecektir.
IsFinite()
Finite kelimesine ilk baktığımızda aynı finish gibi bitiş , son , en uzak nokta kelimelerinin karşılığına gelen olarak düşünürüz. Tamda bu şekilde işlem gören bu fonksiyon değişken vasıtasıyla veya direkt olarak girilen sayısal bir değerin pozitif veya negatif anlamda sınırı aşıp aşmadığını kontrol eder. Pozitif değer aşılmışsa false & aşılmamışsa true değeri dönmektedir. ” isfinite.html ” sayfasının içerisinde bu fonksiyonu kodlayarak ta görelim.
<html>
<head>
<title>BilgiSayaci.Org - IsFinite() Fonksiyonu</title>
<script type="text/javascript">
document.write(isFinite(70)+"<br>");
document.write(isFinite(20000)+"<br>");
document.write(isFinite("bilgisayaci"));
</script>
</head>
<body>
</body>
</html>
İlk iki sayısal değerimiz true olarak dönerken üçüncü değerimiz false olarak dönmektedir. Burada dikkat etmemiz gereken küçük bir nokta daha vardır. Bu da sayısal değerler girerken tırnak koyma zorunluluğumuz yokken bir kelime yazdığımızda tırnak koyma zorunluluğumuz bulunmaktadır. Eğer koymazsak bu kelimeyi bir değişken olarak algılayarak döndürmez.
Eval()
İstenilen değerleri tüm sayfa kodları içerisinde arayarak ortaya çıkartır ve ortaya çıkan bu kodlarıtag ‘leri arasında işleme sokarak sonuçları döndürür ve ekrana çıktı olarak verir. Bu işlem için direkt olarak veriyi ekrana yazdırma ve toplama işlemlerini yaptıracağız. ” eval.html ” isimli sayfamızı yaratalım ve ilk önce x & y değişkenlerimize birer rakam atayalım. Daha sonrada ekrana yazdırma işlemlerini yapacağız. Kod bloğumuz şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - Eval() Fonksiyonu</title>
<script type="text/javascript">
var a=10;
var b=20;
document.write(eval(a)+"<br>");
document.write(eval(b)+"<br>");
document.write(eval("a+b"));
</script>
</head>
<body>
</body>
</html>
İlk iki satırda yalnızca girdiğimiz iki değer listeletirken üçüncü satırda a ve b değerlerinin toplamını gösterdik. Bu fonksiyonu kullanırken dikkat etmemiz gereken hususlardan bir tanesi ” eval ” ile çekeceğimiz değerleri oluştururken tırnak içerisinde yazmamalıyız. Eğer yazarsak örneğin ” a+b ” komutunu kullandığımızda sonuç ” 30 ” yerine ” 1020 ” şeklinde çıkacaktır.
EncodeUri()
URI( Uniform Resource Identifier ) adı verilen karakter dizilerini web sayfalarımızın kod bölümünde sıkça belirttiğimiz ” UTF – 8 ” formatında şifreler. Daha çok adres satırları için kullandığımız bu fonksiyon ” Ş ” gibi ” Ç ” gibi karakterlerin şifreli bir biçimde link olarak çalışmasını sağlar. Ayrıca ” / , ? , : , @ , & , = , + , $ ” şeklinde adres satırımıza ekleyeceğimiz özel karakter grubuna girebilecek olan karakterler dışındakilerde şifrelenerek işleme sokulurlar. ” encodeuri.html ” isimli web sayfamızı yaratıyoruz ve kodları yazarak sonucu hep birlikte görüyoruz..
BilgiSayaci.Org - EncodeUri() Fonksiyonu
<html>
<head>
<title>BilgiSayaci.Org - EncodeUri() Fonksiyonu</title>
<script type="text/javascript">
var link="http://www.bilgisayaci.org/iletişim sayfası";
document.write(encodeURI(link));
</script>
</head>
<body>
</body>
</html>
Ekrana ” http://www.bilgisayaci.org/ileti%C5%9Fim%20sayfas%C4%B1 ” şeklinde bir yazı gelecektir.
EncodeUriComponent()
Bir önceki fonksiyonda ki gibi bu fonksiyonda URI şeklindeki ifadelenmiş karakter dizilerini ” UTF – 8 ” formatında şifreler. Ancak bu fonksiyonu bir öncekinden ayıran özellik ise ” / , ? , : , @ , & , = , + , $ ” özel karakterlerinide şifreleyerek ekrana verir. ” encodeuricomponent.html ” web sayfasını yaratıyoruz ve kodlarını yazıyoruz.
<html>
<head>
<title>BilgiSayaci.Org - EncodeUriComponent() Fonksiyonu</title>
<script type="text/javascript">
var link="http://www.bilgisayaci.org/iletişim sayfası";
document.write(encodeURIComponent(link));
</script>
</head>
<body>
</body>
</html>
Ekrana bir önceki fonksiyondan farklı olarak ” http ” ile ” www ” arasındaki karakterler de şifrelenerek ” http%3A%2F%2Fwww.bilgisayaci.org%2Fileti%C5%9Fim%20sayfas%C4%B1 ” şeklinde bir değer verilecektir.
DecodeUri()
Makalemizin son iki fonksiyonundan birisidir ve bir sonraki fonksiyonla birlikte hemen bu fonksiyondan önce anlatılan iki fonksiyonla ilişkili çalışıyorlar. DecodeUri fonksiyonunun görevi EncodeUri fonksiyonu ile şifreleme işlemine girmiş olan veriyi tekrar eski haline getirmektir. Örneğin daha iyi anlaşılabilmesi için EncodeUri fonksiyonu sonucunda ekrana verilen çıktıyı ele alacağız. ” decodeuri.html ” web sayfamızı yaratıyoruz ve şu şekilde kodluyoruz :
<html>
<head>
<title>BilgiSayaci.Org - DecodeUri() Fonksiyonu</title>
<script type="text/javascript">
var link="http://www.bilgisayaci.org/ileti%C5%9Fim%20sayfas%C4%B1";
document.write(decodeURI(link));
</script>
</head>
<body>
</body>
</html>
DecodeUriComponent()
EncodeUriComponent ile şifrelenmiş veriyi eski haline dönüştürür.
<html>
<head>
<title>BilgiSayaci.Org - DecodeUriComponent() Fonksiyonu</title>
<script type="text/javascript">
var link="http%3A%2F%2Fwww.bilgisayaci.org%2Fileti%C5%9Fim%20sayfas%C4%B1";
document.write(decodeURIComponent(link));
</script>
</head>
<body>
</body>
</html>
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 17 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar