Javascript String İşlemleri

Uzun bir aradan sonra tekrar merhaba. Bugün sizlerle Java Script dilinde kullandığımız alfasayısal (string) değerler ile ilgili fonksiyonlar ve işlemler hakkında bilgi vereceğim. Öncelikle script dilinde nasıl bir string (harfler ve sayılar) değişken oluştururuz buna bakalım:

var a = 'Merhaba Dünya';
var b = 'İstanbul un en güzel mekanları burada.';

Burada “var degiskenadi = tırnak veya çift tırnak arasına değişken değeri” şeklinde bir ayarlama yaparak değişkenlerimizi belirledik. Eğer üst ayraç kullanacaksak kaçış işareti olan (\) unutulmamalıdır. Aksi takdirde java script hata verecektir.

var b = 'İstanbul'un en güzel mekanları burada.'; // yanlış
var c = 'İstanbul\'un en güzel mekanları burada.'; // doğru
var d = "İstanbul'un en güzel mekanları burada."; // ayıraç yerine çift tırnak, diğer bir yol

Bir string değişkenin karakter sayısını .length komutu vermektedir.

var a = 'Merhaba Dünya!';
var b = a.length; // değişken 14 sayısını içerir

Alfasayısal değişkenleri birleştirirken + (artı) işareti kullanılır.

var a = 'Murat';
var b = 'Eliçalışkan';
var c = a + ' ' + b; // değişken Murat Eliçalışkan olmuştur

Eğer bir string değer ile integer (sayısal) değer toplanırsa değer otomatik olarak alfasayısala dönüşecektir. Alfasayısallarda 4 işlem yapılamaz. Fakat string bir değer integere dönüştürülmek istenirse toString() fonksiyonundan yararlanabiliriz:

var a = 1 + 2;
var b = a.toString(); // b string bir değişken olup değeri '3' dür.

Bir alfasayısal değişken sadece sayısal değerler içeriyorsa sayısal değere dönüştürülebilir. Bunun için toplama haricindeki matematiksel bir işlem yapmak yeterlidir (Toplama yani + işareti javascriptin kuralı gereği değişkenin sonuna ekler ve alfasayısal değer verir). Örneğin:

var a = '100';
var b = a * 10; // değişken 1000 olur

Çeşitli Alfasayısal Fonksiyonlar

indexOf() Fonksiyonu

İlk olarak indexOf() fonksiyonundan bahsedelim. Bu fonksiyon bize alfasayısal bir değer içerisinde yer alan karakter ya da karakter grubunun konumu hakkında bilgi verir. Eğer sonuç -1 ise öyle bir karakter yoktur, 0 ve daha büyükse ise karakterin bulunduğu yeri bize bildirir.

var a = 'Merhaba Dünya!';
var b = a.indexOf('a'); // 4 verir

Sonuç 4 olarak çıkacaktır. Çünkü aranılan ilk değer 5. sıradadır, ilk değer 0 ile başlayacağı için bu bir eksiği olacaktır. Eğer a.indexOf(‘w’) deseydik, sonuç bulamayacağı için -1 olarak görünecekti.

charAt() Fonksiyonu

Verilen numarada geçen karakteri bize veren fonksiyondur.

var a = 'Merhaba Dünya!';
document.write(a.charAt(5)); // b harfini gösterir.

split() Fonksiyonu

Bu fonksiyon değişkendeki bir karaktere göre kelimeleri dize değeri haline getirmemize yarar. Örneğin bir cümledeki tüm kelimeleri tek tek ele almamız gerekirse:

var a = 'Bugün hava güzel!';
var dize = new Array();
dize = a.split(' '); // boşluk karakterini ayıraç olarak alır

Bu durumda dize[0] Bugün, dize[1] hava, dize[2] ise güzel! kelimelerini barındıracaktı.

substring() Fonksiyonu

Değişken içerisinde belirtilen karakterleri almamızı sağlar. Örneğin bir kelimenin içerisindeki 4. karakter ile 8. karakter arasındaki kelimeleri alacaksak. substring( baslangic, bitis ) şeklinde kullanılır:

var a = 'Venus Programlama';
document.write( a.substring(0, 5) ); // Venus verir

substr() Fonksiyonu

Diğerinden farklı olarak ikinci yazılan değer, ne kadar karakter ilerleneceğidir. Örneğin substr( 4, 8 ) dersek 4. karakterden 8 ileri gidip bu kısmı alacağı anlamına gelir.

toUpperCase() ve toLowerCase() Fonksiyonu

Bir alfasayısal değerdeki tüm harfleri küçültür ya da büyütür. Örneğin:

var a = 'Merhaba Dünya!';
var b = a.toUpperCase(); // MERHABA DÜNYA!
var c = a.toLowerCase(); // merhaba dünya!

Bir sonraki yazıda görüşmek dileklerimizle…

AJAX Kullanarak Veri Almak

Bu makalemizde HTML, PHP, AJAX ve MySQL ortak çalışması sonucu anlık yanıt veren bir sayfa tasarlamayı öğrenelim. Bunun için verdiğimiz harf ya da kelime ile başlayan veritabanında kayıtlı isimleri bize listeleyen bir öneri kutusu yapmaya ne dersiniz? Böylelikle Ajax’ı yakından inceleme fırsatı bulacağız.

Öncelikle verilerimizi alacağımız bir veritabanı ve çeşitli kayıtlar oluşturuyoruz:

CREATE TABLE `ajax_veri` (
`id` int(5) unsigned NOT NULL auto_increment,
`isim` varchar(45) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `ajax_veri` VALUES("1", "Ali");
INSERT INTO `ajax_veri` VALUES("2", "Veli");
INSERT INTO `ajax_veri` VALUES("3", "Cavit");
INSERT INTO `ajax_veri` VALUES("4", "Cavidan");
INSERT INTO `ajax_veri` VALUES("5", "Alara");

ajax_veri adını taşıyan bu tabloya ilk etapta 5 isim yükledik. Şimdi verilerimizi almamıza yarayacak bir PHP dosyası yazmalıyız. Bunu yaparken verilerin GET metoduyla alınmasını sağlamalıyız. Bu dosyamızın ismini ornek.php yapalım. İçerisinde ise ornek.php?kelime=A şeklinde eklendiğinde o harfle ilgili verileri bize listelemesini sağlayalım:

 0 ) {
   $kelime = strtolower( str_replace( "'", "\'", $_GET['kelime'] ) );
   mysql_connect('localhost', 'user', 'pass');
   mysql_select_db('ajax_veri');
   $sorgu = mysql_query( "SELECT * FROM ajax_veri WHERE isim LIKE '" . $kelime . "%';" );
   if ( !$sorgu || mysql_num_rows( $sorgu ) == 0 )
      echo '---';
   else
   {
      while( $kayit = mysql_fetch_array( $sorgu ) )
      echo $kayit['isim'] . ',';
   }
   mysql_close();
}
else
   echo '---';
?>

Buradaki veritabanı bağlantı için gerekli host, kullanıcı ve şifreyi değiştirmeyi unutmayın. Kullandığımız strlen() en az 1 karakter için sorgu yapılmasını sağlamak için. strtolower() ise gelen veriyi tamamen küçük harfe çevirip sorgulamamızı sağlar. str_replace ile üst ayraçlara güvenlik önlemi olarak taksim ekledik. Diğer kısımlar daha önceki yazımda MySQL bağlantısı kısmında anlatılanlardan farklı değil.

PHP dosyamızı yarattıktan sonra sıra HTML dosyamızı ve JavaScript’imizi oluşturmaya geliyor.


Ajax Ornek




Oneriler:

Bu şekil hazırladığımız HTML belgemizde txt1 ismini taşıyan kutucuğumuzda herhangi bir karakter yazıldığında ipucuGoster() fonksiyonunun çalışmasını sağlarız. Üst tarafta ornek.js ye link verdik. Böylelikle son işlem olarak javascript dosyamızı hazırlamaya geldik. “ornek.js” olarak adlandıracağımız bu dosyaya şunlar yazılmalı: 1. Bölüm XMLHTTP objemizi seçmek.

function GetXmlHttpObject()
{
   var xmlHttp=null;
   try { xmlHttp=new XMLHttpRequest(); }
   catch (e) {
      try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
   }
   return xmlHttp;
}

Bu fonksiyon bize tarayıcının uyumluluğunu denetleme şansı verir. Dönen değer null ise Ajax desteği yok demektir. 2. Kısım ise İşlevselliği sağlayacaktır:

var xmlHttp
function ipucuGoster( str )
{
   if ( str.length == 0 )
   {
      document.getElementById("ipucu").innerHTML="";
      return;
   }
   xmlHttp = GetXmlHttpObject();
   if ( xmlHttp == null )
   {
      alert ("Tarayiciniz AJAX destekli degil!");
      return;
   }

   var url="ornek.php";
   url = url + "?kelime=" + str;
   url = url + "&sid=" + Math.random();

   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET", url, true);
   xmlHttp.send( null );
}
function stateChanged()
{
   if ( xmlHttp.readyState == 4 )
      document.getElementById("ipucu").innerHTML=xmlHttp.responseText;
}

Burada “xmlHttp” bir değişken olup 1. kısımdaki fonksiyonun bize verdiği cevaptır. Cevap olumluysa belirtilen url açılarak (belirtilen kriterlerle) veri alınır ve “id” özelliği “ipucu” olan yere yazılır. Bu işlem her kelime eklendiğinde yazılır. “readyState == 4” bize işlem tamamlandıktan sonra yapılacakları bildirir. Dikkatinizi çektiyse ornek.php’nin sonuna bir SID= eklemesi yaptık. Bunun nedeni bize hep aynı bilgiyi göndermemesini sağlamak yani sürekli güncel olarak veriyi almak. Bunu header() de dosyanın sürekli eski tarihli olmasını sağlayarak da yapabiliriz.

Farklı örnekleri yine yorumlamak dileklerimizle…