Javascript, etkileşimli web sayfaları oluşturmak için kullanılan bir programlama dilidir. Böylece dinamik sayfalar oluşturulur.
Bir HTML web sayfasına JavaScript kodu eklemenin iki yolu vardır: dahili ve harici. Dahili JavaScript, HTML komut dosyasının gövdesindeki <script> etiketini kullanır.
Aşağıda, <script> etiketiyle bir dahili JavaScript kullanımına bakalım.
<html>
<head>
<title>dahili javascript</title>
<script type="text/javascript">
alert("selam");
</script>
</head>
<body>
</body>
</html>
Harici javascript eklemek istersek yani ayrı bir dosyada js kodlarını yazacaksak,
<html>
<head>
<title>harici javascript</title>
</head>
<body>
alert("selam");
</body>
<script src="js/script.js"></script>
</html> şeklinde html dosyasına eklenir.
Şimdi js’te tanımlayıcılara bakalım.
var (variables kelimesinin kısaltılmış hali) tanımlayıcısı : Kodun herhangi bir yerinde ve herhangi veri türünde değişken tanımlamak için kullanılır.
let tanımlayıcısı : Kodun herhangi bir yerinde ve herhangi bir ver türünde değişken tanımlamak için kullanılır. var‘dan farklı olarak let tanımlayıcısı ile kodun kapsamında kullanılabilen değişkenler tanımlanabilir.
const (constant kelimesinin kısaltılmış hali) tanımlayıcısı : Atama yapıldıktan sonra değiştirilemeyen fakat sadece okunabilen sabitler tanımlamak için kullanılır.
- getElementById() Metodu
Bu metot ile Body içerisinde bulunan nesnemizin “id” bilgisi sayesinde ulaşabiliriz. Örneğin;
Kod çalıştırıldığında ekranda “js ornekleri” yazmaktadır.
- window.alert() ve console.log()
window.alert kullanıcıya uyarı vermek için kullanılan metottur. console.log ise sayfa içindeki console ekranına mesaj vermemiz için kullanılmaktadır.
window.alert() örneği,
şeklindedir. console.log kullanımı da window.alert in yerine yazıp çalıştırıldığında console ekranında görünecektir.
- Fonksiyonlar, Fonksiyonların Tanımlanması ve Çağrılması
Parametsiz Fonksiyon Örneği;
Bu örnekte, html kısmında buton tanımladık ve tıklandığında kullanıcıya mesaj vermesi için fonksiyon yazdık. Şimdi parametreli bir fonksiyon yazalım.
Fonksiyonlarda Return kullanımı:
- Objelerin kullanımı
- Math Kütüphanesi
Matematik fonksiyonları kullanmak için “Math” kütüphanesinden faydalanılır.
- Diziler-Array’ler
Dizi tanımlası aşağıdaki gibi yapılmaktadır.
Arraylerin Metotları
- Formlara ve Inputlara Erişim
- Javascript Form Apisi
Girilen Değer 50–100 arasında değilse validation message olarak bilgi veren script örneğine bakalım.
- HTML DOM
Elementlere JavaScript ile erişiyoruz ve onlara değişik özellikleri ekliyoruz. Burada butona tıklandığında yazının rengini değiştiriyoruz.
- getElementById() ile CSS özelliklerini değiştirme
burada da getElementById(id si olan html ögesine erişir.) ile paragraf idli elemente ulaşıp onu bir değere atadık ve csslerini değiştirdik.
- getElementsByTagName() ve getElementsByClassName()
Buradaki kodda 3 tane p elementimiz bulunuyor. tikla butonuna tıkladığımızda bu 3 tane p elementi görünürlüğünü kaybedecek.
getElementByClassName ile yapılırsa;
var elementler=document.getElementByClassName(“class1”);
<p class=”class1″>Deneme</p>
- Elementlere Event Atama