31/08/2015 11

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ıştı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. , . Bu alanlarda bunun script olduğu belli edilmesi gerekmektedir

Ayrıca: HTML de JavaScript kodları Şeklinde yazılmalıdır

Bazı Yerlerde

Değişecek Olan Yazı

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

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


Tags

Share this Post



Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment.

Comments

    There is no comment. Be the owner of first comment...