JavaScript Nedir - Temel Örneklerle Geniş Anlatım

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

Ö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 veya 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> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3969365324373720" data-ad-slot="1053241655" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <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

Send with Whatsapp

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...