ANASAYFA | BLOG | SORU CEVAP | REFERANSLARIM | DOWNLOAD | HAKKIMDA | İLETİŞİM | ARAMA
JAVASCRİPT KULLANIMI ve UYGULAMALI ÖRNEK KODLAR

Javascript web sayfalarımızı geliştirmek, güçlendirmek için kullandığımız bir dildir. HTML ile iç içe kullanılmaktadır. Ayrı bir compiler gerektirmez. HTML yazabildiğiniz her yerde notepad ile dahi yazabilirsiniz. Çalıştırıp uygulama yapmak için ise web browser ınızı kullanmanız gerekiyor. Geçmişte desteklemeyen bazı web browser lar vardıysa da günümüzde hemen hemen bütün web browser lar ile kodlarınızı deneyebilirsiniz. Javascript ayrı bir programlama dili değildir. Adından da anlaşıldığı üzere script dilidir. Adındaki benzerlikten kaynaklı insanın aklına Java ile aralarındaki bağ nedir sorusu gelebilir. Java ayrı bir programlama dilidir ve javascript den bağımsızdır. Şimdi isterseniz yavaş yavaş ilk script lerimizi yazmaya başlayalım

İlk olarak html sayfanıza yeni bir yazı eklemek veye paragraf, başlık vs. gibi birşey eklemek için nasıl bir yol izleyeceğimize bakalım. Javascript kodları <script> tagları içerisinde yer alır. Daha sonra tekrar değineceğim ama aklınızın bi köşesinde bulunması açısından belirteyim genellikle <head> tagları arasında hatta ayrı bir dosyada barındırırız. Şimdi html sayfamıza javascript ile metin ekleme işlemine bir göz atalım

ÖRNEK KOD
<script>
document.write("Burasi javacsript ile yazildi");
document.write("<p>Burasi ise javascript ile yapilan bir paragraf</p>");
</script>

FK-gizle

Kendin Dene butonuna basarak kendinizde hem kodu deneyebilir hemde değişiklikler yaparak sonuçlarını gözlemleyebilirsiniz.

Kullanıcıyı uyarı verdirme (ALERT) işleminde ise alert() fonksiyonunu kullanırız. 

ÖRNEK KOD
<button type="button" onclick="alert('HOSGELDINIZZZ')">Alarm butonu</button>

 

Şimdi aynı işlemi birde fonksiyon kullanarak yapalım. Hem böylece yavaş yavaş fonksiyon kullanımına da değinmiş oluruz. 

ÖRNEK KOD
<html>
<head>
  <script>
     function FarukFonksiyon()
     {
       alert("HOSGELDINIZZZ");
     }
   </script>
</head>
<body>
 
  <input type="button" name="Button1" value="Fonksiyon ile Alarm verdirme butonu" onclick="FarukFonksiyon()">
 
</body>
</html>

 

Gördüğünüz gibi her iki işlemin sonucunda da sonuç aynı. Şimdi ise ID ile HMTL taglarının içeriğinde değişiklikler yapma işlemine bir göz atalım. Bunun için öncelikle içeriği değiştirilecek olan tag a belirli bir ID verilir yada fonksiyona (this...) şeklinde yollanır. Yine iki şekli de inceleyeceğiz. Öncelikle ID atamsı yaptığımız bir şeyin içeriğini değiştirelim.

ÖRNEK KOD
<!DOCTYPE html>
<html>
<body>
 
<p id="FK">
Burasi yazisi degisecek olan kisim
</p>
 
<script>
function FaukFonksiyon()
{
x=document.getElementById("FK");  // id si FK olani x e atama yapildi
x.innerHTML="Suan www.farukunal.net desiniz";    // x in html kodu degistirildi
}
</script>
 
<button type="button" onclick="FaukFonksiyon()">Yazi Degistirme Islemi</button>
 
</body>
</html>

 

Yukarıdaki örnekte ID ile değiştirme işlemini gördük. Bir de this ile fonksiyona eleman yollama ve bunun üzerinde değişiklik yapmayı inceleyelim. Bu örneğimizde fonksiyona yollanacak değeride kullanıcıdan isteyelim. ilerde bu mantık ile mail kontrolleri vs. yapacağız. bunun için bir input oluşturalım ve kullanıcı metni yazdıktan sonra Şunu yazdınız şeklinde yazdığını gösterelim.

ÖRNEK KOD
<html>
<head>
<script>
  function FonksiyonFK(metin) 
  {
    alert("Metin kutusuna : " + metin + " , yazdiniz");
  }
 
</script>
</head>
<body>
Yorumunuz:
  <input type="text" name="name" onBlur="FonksiyonFK(this.value)" value="">
 
</body>
</html>

 




Diğer Yazılarımdan Seçmeler...