JavaScript Nedir - Temel Örneklerle Geniş Anlatım

Java Script bir HTML ve Web programlama dilidir. Bu dil sayesinde client tarafında server a istek göndermeden kodlamalar çalıstırabiliriz. Normalde sayfa üzerinde herhangi bir tıklama tarzı işlem yapıldığında bu sunucuya bir istek olarak gider ve sunucudan gelen cevaba göre sayfa yeniden yüklenir. Sayfa yeniden yüklendiğinde ise bazı işlemlerimiz kaybolmuş olabilir. Bunu engellemek için java script dili kullanılır.

Bu programcıklar sayesinde bilgisayarda istediğinizi yapabilirsiniz aslında ve ayrıca Java script dilide öğrenmesi kolay dillerden bir tanesidir.

Şimdi önemli olan soru şu : Niçin Java Script ?

Web sayfalarının içeriklerini tanımlamada HTML kullanılır, CSS bu içeriklerin sayfa üzerinde nasıl yerleştirileceğini ayarlar ve Java Script ise bu ikisinin sunucu ile bağımsız ve hızlı bir şekilde değiştirilmesini sağlar. Yani Java Script sayfa üzerinde anlık olarak HTML ve CSS yapısını değiştirir Buda bize hem sayfayı yeniden yüklemeyi gerektirmez hem işlem hızlı bir şekilde olur hemde görsel olarak güzel bir görüntü elde edilebilir. İşte bu sebeplerden dolayı java script web sayfaları için çok önemlidir.

Bu sebeplerden dolayı Java Script Dünyanın En çok kullanılan dillerinden birisidir. Bildiğimiz JQuery, Ajax gibi dillerin Hepsi Java Scriptten türeme dillerdir. Bu yazıda küçük küçük örneklerle Java Scriptin neler yapabileceğini göreceğiz.

Java Script HTML içeriğini değiştirebilecek bir dildir. Bunu anlık olarak yapar. Java Scriptin en bilinen metodu ise : getElementById() metodudur ki ismindende anlaşılacağı üzere bir nesneyi id değerinden bul demektir. Yani sayfa içerisinden id değeri icerik olan nesnenin içeriğini nasıl değiştireceğimizi bulalım.


document.getElementById("icerik").innerHTML = "TheCodeProgram";

Bu kod ile sayfanın içindeki icerik id değerli nesnein içeriğini TheKodProgram olarak değiştirdik.

Java Script ile HTML içerikelrinin özelliklerini değiştirebiliriz. örnek olarak


document.getElementById("icerik").style.fontSize = "25px";
//bu komutla icerik adındaki nesnenin yazı boyutunu 25px yaptık

Önemli Bir Not :
JavaScript ve Java dilleri tamamen birbirinden farklı dillerdir. Yapı olarak hiçbir alakaları yoktur. Peki JavaScript Kodları nereye yazılır?

Java Script HTML sayfa içinde body he head taglarının arasına yazılır. <body> </body> , <head> </head>. Bu alanlarda bunun script olduğu belli edilmesi gerekmektedir

Ayrıca: HTML de JavaScript kodları <script> taglarının arasına yazılmalıdır. Bu şekilde ifadenin script olduğu belli edilmiş olur


<script>
document.getElementById("icerik").innerHTML = "TheCodeProgram";
</script>

Şeklinde yazılmalıdır

Bazı Yerlerde <script type="text/javascript"> şeklindede görebilirsiniz. Burada type kısmı gerekli değildir. Burda script dilinin hangi dilde olduğu belirtilmektedir. Zaten HTML dilinin geçerli script dili javascripttir.
JavaScript Fonksiyonları:
JavaScript fonksiyonları aslında java script kod bloklarıdır. Bu kod blokları sayfada ihtiyaç olduğunda çağrılır.

Örnek verecek olursak sayfada bir butona tıkladık. Bu butona tıklandığında javascript koduna ihtiyaç varsa o zaman çalıştırılır. Java Script kodlarının <head> veya <body> taglarının arasında olması çokta önemli değildir. Nerde olursa olsun sayfa çalıştırıldığında yüklenecekleri için heryerden çağrılabilirler. Buda demek oluyor ki head veya body taglarının herhangi birinde olması fark etmez.

Fakat kodları tek bir yerde tutmak aslında iyi bir sistemdir. Çünkü sayfada düzenleme yapacaksanız sayfanın belli biyerinde olduğunu bilirseniz düzenlemesi sizin için daha kolay olur. Yoksasayfa içinde kod ararsınız ki buda vakit kaybıdır.

Şimdi aşağıda bir deneme yapalım ve butona tıklayınca java script kodu çalıştılarım.


<!DOCTYPE html>
<html>
<head>
<script>
function fonksiyon() {
document.getElementById("icerik").innerHTML = "TheKodProgram";
}
</script>
</head>

<body>

<p id="icerik">Değişecek Olan Yazı</p>

<button type="button" onclick="fonksiyon()">Butona Tıklayın</button>

</body>
</html>

Yukarıdaki fonksiyonu head taglarının arasına yazmıştık şimdide body taglarının arasına yazalım.


<!DOCTYPE html>
<html>
<body>
<p id="icerik">Değişecek Yazı</p>

<button type="button" onclick="fonksiyon()">Butona Tıklayın</button>

<script>
function fonksiyon() {
document.getElementById("icerik").innerHTML = "TheKodProgram";
}
</script>

</body>
</html>

Bana kalırsa javascript kodlarını sayfanın en altına yerleştirin. Çünkü sayfa yüklenirken yukarıdan aşağıya doğru yüklendiği için ilk önce html yapısının yüklenmesi görüntü açısından daha iyi olacaktır. Bu sebeple genel olarak JavaScript kodları sayfanın en alt kısmına yazılır. Dİğer türlü html yüklenmek için javascripti bekleyecektir.

Tabiki en iyisi javaScript kodlarını harici dosyalardan yüklemek en iyisidir. Çünkü aynı kodları birden fazla sayfada kullanma ihtiyacı duyabilrisiniz. Bu yüzden aynı kodu hersayfaya yazmak yerine harici bir dosyadan her sayfada kullanabilirsiniz.

JavsScript harici kodları .js dosyalarında tutulur Harici JavaScripti kullanabilmek için yine <script> tagının arasına src belirterek yazabiliriz.

Aşağıdaki şekilde harici javascript kodlarını tanımlayabiliriz.


<!DOCTYPE html>
<html>
<body>
<script src="JavaScript.js"></script>
</body>
</html>

Eğer doğru yerde işaretlenmişse bu kodlar doğru şekiilde çalışacaktır. Harici JavaScript kodları script tagları içermez direk olarak yazılırlar.

HTML yapısını ve Script kodlarını birbirinden ayırır
HTML ve JavaScript kodlarını doğru ve kolay şekilde onarılmasını ve değiştirilmesini sağlar
Ve önbelleğe alınan javascript kodları sayfaların daha hızlı yüklenmesini sağlar. Yani harici js dosyaları önbelleklenir ve sayfa daha hızlı yüklenir.

Java scriptin direk olarak yazdırma veya gösterme fonksiyonları yoktur. Fakat JavaScript ile birkaç farklı yoldan gösterim yapılabilir.

Bir uyarı mesajı göstermek : window.alert(). Bir HTML çıktısı yazdırmak document.write(). Bir HTML içeriğini değiştirmek için innerHTML. Browser loglarına yazdırmak için console.log()

Komutları örnek olarak kullanılır Şimdi ekrana bir uyarı göstermek için bir örnek yapalım.


<!DOCTYPE html>
<html>
<body>

<script>
window.alert("TheCodeProgram");
</script>

</body>
</html>

Yukarıda sayfa yüklendiğinde ekrana direk olarak TheCodeProgram uyarı yazısı çıkacaktır Şimdi ise sayfa üzerine yazdırma yapalım


<!DOCTYPE html>
<html>
<body>

<script>
document.write("TheCodeProgram");
</script>

</body>
</html>

Bu şekildede program çalıştığında sayfaya TheCodeProgram yazısı yazılacaktır. document.write komutu ile sayfayı yeniden yazdırabileceğimiz için sayfa içi değişikliklerimizi yaptırabiliriz aslında...

Peki var olan html içeriğini nasıl değiştiririz. JavaScript dili bir HTML nesnesinin içeriğini değiştirmek için getElementById("iddegeri") metodunu kullanır.

id değişkeni nesnenin sayfa iğçerisindeki id değeridir. Bununla ilgili örnek verecek olursak


<!DOCTYPE html>
<html>
<body>

<p id="icerik"></p>

<script>
document.getElementById("icerik").innerHTML = "TheKodProgram";
</script>

</body>
</html>

Yukarıdaki sayfanın çıktısı Ekrana TheKodProgram Olacaktır Bu fonksiyonu bir buton ilede çalıştırarak uygulayabiliriz.

İyi Çalışmalar Dilerim...

Burak Hamdi Tufan

Share this Post

Send with Whatsapp

Author

Burak Hamdi TUFAN

I am a software developer experienced 15 years and here to share all my programming experiences. I have worked on so many platforms and programming languages especially C, C#, C++ and Java. I am studing PhD at Kocaeli University on Aviation Technologies. I am building softwares and technologies on aviation.

Facebook Twitter Instagram LinkedIn Youtube