Bu zamana kadar öğrendiğimiz JavaScript çıktılarında ise sürekli olarak HTML içine yani daha doğrusu innerHTML olarak yazmayı öğrenmiştik. JavaScript sayesinde eğer ekrana bir çıktı oluşturmak istiyor isek bundan farklı olarak başka yöntemlerde bulunmaktadır.

 

Farklı olan bu yöntemleri de öğrenmek JavaScript ‘in ilk öğreneceğimiz dersleri arasındadır. Ekrana yazdıracak olduğumuz kelimeyi, ifade ve daha farklı bir çok şeyi JavaScript ‘in çıktıları sayesinde yazdırabiliriz.

 

 

JavaScript Output

Bir JavaScript çıktısı oluşturmak istiyor isek bu zamana kadar ki olan 2 dersimizde sürekli olarak innerHTML şeklinde oluşturmayı öğrenmiştik. Bu şekilde ise bir HTML içeriğini değiştirerek yazdırmak istediğimiz şeyi HTML sayfasının içinde ekrana getirebiliyorduk. Bu dersimizde ise innerHML ‘in üzerinden bir tekrar ederek ekrana yazdırmamız gereken çıktıları nasıl yazdıracağımızdan bahsedelim.

 

  • JavaScript innerHTML Kullanımı

    JavaScript ile biz bir HTML içeriğini değiştirmek istiyor isek yapmamız gereken tek şey JavaScript ‘in innerHTML özelliği kullanmak olacaktır. Önce ki derslerimizden de hatırlayacağınız üzere innerHTML kullanmak için Script taglaraını nereye tanımladığınızın bir önemi yoktur.

    <body>
    
    <p id="demo"></p>
    
    <script>
    
    document.getElementById("demo").innerHTML = 5 + 6;
    
    <script>
    
    </body>

    Yukarıda yazmış olduğumuz script tagları içine ise ne yapmasını istedik HTML içinde id bulunan kısma 5 ve 6 sayılarının toplanıp yazılmasını, bu sayede de HTML içeriğini değiştirmesini sağladık.

  • JavaScript document.write Kullanımı

    JavaScript kullanacağımız bir internet sitesinde eğer HTML ‘in içine JavaScript ile bir çıktı oluşturmak istiyor isek kullanmamız gereken şey document.write kulanmamız gerekecektir.

    <body>
    
    <script>
    
    document.write(5+6);
    
    <script>
    
    <button type="button" onclick="document.write('gökmen')">Dene</button>
    
    </body>

    Yukarıda otomatik olarak HTML yazılarının içinde 5 ve 6 sayılarını toplayıp bir 11 sayısı ekrana gelecektir. Fakat biz butona tıkladığımızda ise tüm HTML içeriği değişerek artık tamamen “gökmen” kelimesi yazıyor olacaktır. Bu sayede de artık innerHTML özelliğini kullanmadan JavaScript olarak bir çıktı oluşturabiliriz.

  • JavaScript windows.alert Kullanımı

    Şimdi bir bakıma baktığınızda ise bu sefer göstereceğimiz çıktıyı biz HTML içeriği içinde değil tarayıcıdan bir pencere sayesinde göndereceğiz. Örnek olarak ise bir ip adresinin internet sitenize girişini sayabilir ve bu kutuya ise merhaba bugün 5 inci gelişiniz gibi bir değer yazdırabilmek mümkündür. Ama daha öncesinde ise öğrenmemiz gereken şey bu kodun içine başka bir şeyler yazdırmadan öncesinde normal olarak bir çıktı değerine dönüştürmek. Bunun için ise :

    <body>
    
    <script>
    
    windows.alert('gökmen efsun');
    
    </script>
    
    </body>

    Yukarıda yer alan örnekte ise artık sizin bu kodu oluşturmuş olduğunuz HTML sayfasına giriş yapıldığında otomatik olarak tarayıcıda bir küçük kutu açılacak ve içinde ise “gökmen efsun” yazıyor olacaktır. İlerleyen zamanlarda ise bu window.alert komutunun içine ise fazla komutlar yazabilmeyi hep beraber öğreneceğiz.

 

Yukarıda yer alan örneklerde en son olarak bir uyarı kutusu olarak ‘ta diğerlerinden farklı olarak bir JavaScript çıktısı oluşturma işlemini öğrenmiş bulunduk. Bundan sonrasında ise artık bunların üzerine yeni bilgiler katarak yola devam etmeye hazırız demektir. Tek yapmanız gereken her ders içeriğinde ve videosunda olduğu gibi sadece bakmamanız. Artık baktığınız bu kısımları yazıya geçirebilirsiniz. Kolay gelsin 😊.

Gökmen Efsun {efsungokmen}

Teknoloji dünyası sınırsız bir alandır. Bu alanda bilgi paylaştıkça çoğalır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir