Thursday, January 1, 2015

Tutorial Javascript Part 2: Menampilkan Output Javascript

Javascript tidak memiliki built-in print dan function display (echo/print) seperti PHP. Untuk menampilkan output javascript kita menggunakan beberapa cara tergantung dari lokasi display yang akan kita tampilkan. Ada empat cara yang bisa digunakan yaitu window.alert(), document.write(), innerHTML dan console.log().

Berikut ini penjelasan dari empat cara tersebut :

1. window.alert()

Adalah cara menampilkan output javascript pada alert box (kotak peringatan).

Contoh menampilkan javascript dengan window.alert :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <script type="text/javascript">  
 function Pesan()  
 {  
    window.alert("Terima kasih telah mengklik saya");  
 }  
 </script>  
 </head>  
 <body>  
 <h1>Display Alert Box</h1>  
 Silahkan klik pada tombol  
 <button onclick="Pesan()">Enter</button>  
 </body>  
 </html>  

Penjelasan script : 

Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan alext box dengan isi "Terima kasih telah mengklik saya".

Kita bisa belajar menggunakan alert box pada javascript disini >>

2. document.write()

Adalah cara menampilkan output kedalam halaman html baru. Cara ini akan menghapus tampilan html sekarang dan menggantinya dengan tampilan yang ditulis pada document.alert. Metode ini biasanya dipakai saat testing program saja.

Contoh menampilkan javascript dengan document.write :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <script type="text/javascript">  
 function Pesan()  
 {  
    document.write("Terima kasih telah mengklik saya <button onclick='history.go(0)'>Refresh</button>");   
 }  
 </script>  
 </head>  
 <body>  
 <h1>Display Alert Box</h1>  
 Silahkan klik pada tombol  
 <button onclick="Pesan()">Enter</button>  
 </body>  
 </html>  

Penjelasan script : 

Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan halaman html baru dengan isi "Terima kasih telah mengklik saya" dan dilengkapi dengan sebuah elemen button untuk merefresh halaman untuk kembali ke tampilan awal.

Kita bisa belajar menggunakan document.write pada javascript disini >>

3. innerHTML

Adalah cara menampilkan output didalam halaman html sekarang. Cara ini hanya menyisipkan output didalam halaman html dan tidak mengganti dengan halaman html baru. Untuk menggunakan cara ini kita harus menempatkan output kedalam sebuah elemen dengan menggunakan identifikasi "id". Metode innerHTML sering disebut dengan DOM (Document Object Model).

Cara penulisan innerHTML lengkap adalah :

document.getElementById("elemen_id").innerHTML = value;

Contoh menampilkan javascript dengan innerHTML :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <script type="text/javascript">  
 function Pesan()  
 {  
    document.getElementById("pesan").innerHTML ="<span style='color:red;'>Terima kasih telah mengklik saya</span>";  
 }  
 </script>  
 </head>  
 <body>  
 <h1>Display Alert Box</h1>  
 Silahkan klik pada tombol  
 <button onclick="Pesan()">Enter</button>  
 <p id="pesan"></p>  
 </body>  
 </html>  

Penjelasan script : 

Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan tulisan "Terima kasih telah mengklik saya" dibawah tampilan sekarang. Untuk menempatkan output kita menggunakan elemen <p> dengan id="pesan.

Kita bisa belajar menggunakan innerHTML pada javascript disini >>

4. console.log

Adalah cara menampilkan output pada console browser. Untuk melihat console browser kita tekan tombol F12 lalu klik menu untuk membuka console log.

Contoh menampilkan javascript dengan innerHTML :

 <!DOCTYPE html>  
 <html>  
 <head>  
 <script type="text/javascript">  
 function Pesan()  
 {  
    console.log("Terima kasih telah mengklik saya");
 }  
 </script>  
 </head>  
 <body>  
 <h1>Display Alert Box</h1>  
 Silahkan klik pada tombol  
 <button onclick="Pesan()">Enter</button>  
 <p id="pesan"></p>  
 </body>  
 </html>  

Penjelasan script : 

Pada contoh diatas, kita menempatkan sebuah elemen button yang saat di klik akan menampilkan tulisan "Terima kasih telah mengklik saya" pada console log. tampilan console log bisa dilihat seperti gambar diatas.

Lihat indeks artikel Tutorial Javascript Dasar >>

Referensi:

2 komentar:

  1. kebetulan saya bru beljr yg menggunakan document.write saja, sya bru tau trnyta ada cara" lain untk menampilkan otuput, slain document.write , mksih nih mas.

    ReplyDelete
    Replies
    1. Sama2 kak, saya juga baru belajar. semangat terus pokoknya

      Delete