Useful shortcuts for vi editor

Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Monday, 18 April 2011

HTML kodları üzerinde Javascript kodları oluşturma

Daha önce dosyadan javascript dosyalarını HTML sayfamıza çağırmıştık. Şimdi de direk HTML kodları üzerinde nasıl yapıldığına bakalım.

Basitçe aşağıdaki şekilde HTML dosyamızda oluşturursak istediğimizi elde ederiz.

<!--html’de javascript-->
<html>
 <body>Tarih:
  <script type="text/javascript">
   document.write("<h3>" + Date() + "</h3>");
  </script>
 </body>
</html>

Karmaşık ve çok fazla kod içeren projelerimizde bu kullanım yerine daha önce bahsettiğimiz dosyada javascript dosyası yüklemeyi kullanmak daha verimli olacaktır.

Hepinize happy coding dilerim! J
Posted by Alper at 22:00
Labels:

Saturday, 16 April 2011

Javascript’de fonksiyon kullanımı ve buton örneği


Daha önceki yazılarımızda saat göstermek için oluşturduğumuz Javascript fonksiyonuna ek olarak bir button ile fonksiyonumuzu çağıracağız. Basitçe şu şekilde yaparız;

<!--javascript fonksiyon kullanımı-->
<html>
<head>
<script type="text/javascript">
function mesaj_goster()
{
alert("Hoşgeldiniz!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Mesaj Göster" onclick="mesaj_goster()" />
</form>
</body>
</html>


Yukarıda yazdığımız basit olarak; <head> bloğuna yazdığımız mesaj_goster fonksiyonu <body> bloğunda olan butona (düğme) dâhil ettik.

Tekrar buluşmak dileğiyle! J
Posted by Alper at 14:50
Labels:

Wednesday, 13 April 2011

Javascript’de fonksiyon kullanımı ve saat örneği

Bu yazımızda Javascript dilinde html kodların içine fonksiyon tanımlamayı ve nasıl kullanacağımıza bakacağız. Bunun için örnek olarak saat bilgisini her saniye yazdığımız fonksiyondan getirmesini isteyeceğiz. Basitçe şu şekilde yaparız;

<!--javascript fonksiyon kullanımı-->
<html>
 <head>
<script type="text/javascript">
function saatiBaslat()
{
var bugun=new Date();
var h=bugun.getHours();
var m=bugun.getMinutes();
var s=bugun.getSeconds();

// sayi 10'dan küçükse '0' ekle
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('saatiBaslat()',500); <!-- 500 ms de bir fonksiyonu çağır -->
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>

 </head>
 <body onLoad="saatiBaslat()"> <!-- sayfa yüklendiğinde saati başlat -->
Saat:
  <h3 id="txt"></h3> <!-- saati getir -->
 </body>
</html>

Yukarıda yazdığımız html yorum satırlarında gördüğümüz gibi; head bloğunda tanımladığımız javascript fonksiyonunu bir id’e atadıktan sonra, body onload attribute ile çağırıyoruz.

Umarım, bu yazı Javascript ile uğraşanlar için faydalı olmuştur. Tekrar buluşmak dileğiyle! J
Posted by Alper at 12:45
Labels:

Thursday, 31 March 2011

Javascript’de saat bilgisini gösterme

Javascript dilinde html kodların içine saat bilgisini gösterebiliriz. Basitçe şu şekilde yaparız;
Öncelikle bir notepad veya başka metin programı ile aşağıdaki kodları yazıp, yazdığımız dosyayı .js uzantılı olarak farklı kaydedelim.

//saat bilgisini periyodik olarak gösterme

var tarih = new Date();
var saat = tarih.getHours();
var dakika = tarih.getMinutes();

document.write("Saat -> ");

document.write(saat, ": ");

if (dakika < 10)
    document.write("0", dakika);
else
    document.write(dakika);

setTimeout("location.reload(true);", 500000); //500 snyede bir sayfa yenilensin

Son olarak yazdığımız js uzantılı javascript dosyasını html kodlarda nasıl uygulayacağımıza bakalım. (dosyanın isminin ornek.js olarak kaydedildiğini varsaydık.)

<!--html’de javascript dosyası çağırma-->
<html>
 <body>
  <p>Sayın ziyaretçi, <script type="text/javascript" src="ornek.js"></script></p> <!--javascript çağırma-->
 </body>
</html>

Bir diğer javascript hakkında olan bu yazımda, javascript ile saat bilgisinin nasıl web sitemizde göstereceğimizi inceledik. Hepinize sabırlı ve verimli kodlamalar dilerim! J
Posted by Alper at 10:00
Labels:

Thursday, 24 March 2011

Javascript ile tarih bilgisini gösterme

Javascript dilinde html kodların içine tarih bilgisini gösterebiliriz. Basitçe şu şekilde yaparız;
Öncelikle bir notepad veya başka metin programı ile aşağıdaki kodları yazıp, yazdığımız dosyayı .js uzantılı olarak farklı kaydedelim.
//açık tarih yazma

var tarih = new Date();
var gun = tarih.getDate();
var ay = tarih.getMonth();
var yil = tarih.getFullYear();

var ay_dizi = new Array(12);
ay_dizi[0] = "Ocak";
ay_dizi[1] = "Şubat";
ay_dizi[2] = "Mart";
ay_dizi[3] = "Nisan";
ay_dizi[4] = "Mayıs";
ay_dizi[5] = "Haziran";
ay_dizi[6] = "Temmuz";
ay_dizi[7] = "Ağustos";
ay_dizi[8] = "Eylül";
ay_dizi[9] = "Ekim";
ay_dizi[10] = "Kasım";
ay_dizi[11] = "Aralık";

document.write("Tarih -> ");

document.write(gun, " ", ay_dizi[ay]," ",yil);

Son olarak yazdığımız js uzantılı javascript dosyasını html kodlarda nasıl uygulayacağımıza bakalım. (dosyanın isminin ornek.js olarak kaydedildiğini varsaydık.)
<!--html’de javascript dosyası çağırma-->
<html>
 <body>
  <p>Sayın ziyaretçi, <script type="text/javascript" src="ornek.js"></script></p> <!--javascript çağırma-->
 </body>
</html>

Bir diğer javascript hakkında olan bu yazımda, javascript ile tarih bilgisinin nasıl web sitemizde göstereceğimizi inceledik. Hepinize sabırlı ve verimli kodlamalar dilerim! J
Posted by Alper at 23:40
Labels:

Javascript ile gün bilgisini gösterme


Javascript dilinde html kodların içine gün bilgisini gösterebiliriz. Basitçe şu şekilde yaparız;
Öncelikle bir notepad veya başka metin programı ile aşağıdaki kodları yazıp, yazdığımız dosyayı .js uzantılı olarak farklı kaydedelim.

//gün bilgisini gösterme
var tarih = new Date();
var gun = tarih.getDay();

document.write("Bugün -> ");
switch (gun) {
    case 1:
        document.write("Pazartesi");
        break;
    case 2:
        document.write("Salı");
        break;
    case 3:
        document.write("Çarşamba");
        break;
    case 4:
        document.write("Perşembe");
        break;
    case 5:
        document.write("Sonunda geldi Cuma günü :) ");
        break;
    case 6:
        document.write("Haftasonu ne güzel, Cumartesi ne güzel :) ");
        break;
    case 0:
        document.write("Pazar en sevdiğim! :) ");
        break;
   
    default: break;
}

Son olarak yazdığımız js uzantılı javascript dosyasını html kodlarda nasıl uygulayacağımıza bakalım. (dosyanın isminin ornek.js olarak kaydedildiğini varsaydık.)
<!--html’de javascript dosyası çağırma-->
<html>
 <body>
  <p>Sayın ziyaretçi, <script type="text/javascript" src="ornek.js"></script></p> <!--javascript çağırma-->
 </body>
</html>

Javascript ile devam ettiğim blog yazılarımdaki bu yazıda javascript ile gün bilgisinin nasıl web sitemizde göstereceğimizi inceledik. Hepinize sabırlı ve verimli kodlamalar dilerim! J
Posted by Alper at 11:40
Labels:
Subscribe to: Posts (Atom)