Thursday, July 7, 2016

Basic Javascript untuk menampilkan data javascript atau output javascript

 sebagai bahan untuk mempelajari javascript basic, berikut ini referensi dari http://nano-tutorial.blogspot.de/2015/05/4-cara-menampilkan-data-di-javascript.html yang saya kopi paste kan disini.

Ada 4 Cara menampilkan data di JavaScript, yaitu:
1. Menggunakan perintah document.write()
2. Menggunakan alert()
3. Menggunakan console.log()
4. Menggunakan innerHTML()


document.write()

Anda dapat menampilkan data di JavaScript dengan menggunakan perintah document.write(). Untuk lebih jelasnya, perhatikan contoh di bawah ini.

Nama File: dokumen_write.html



Hasil dari Perkalian 10 * 15 adalah

Apabila Anda jalankan di web browser, maka akan menampilkan output seperti di bawah ini:
JavaScript Document Write

alert()

Anda juga dapat menampilkan data di JavaScript dengan menggunakan alert, yaitu jendela popup pada JavaScript. Untuk lebih jelas perhatikan contoh di bawah ini:

Nama File: alert.html



Hasil dari perkalian 10 * 15 adalah


Apabila Anda jalankan di browser, maka akan menampilkan output berikut ini:
JavaScript Alert

console.log()

Anda juga dapat menampilkan data di JavaScript dengan menggunakan metode console.log(). Untuk lebih jelasnya, dapat Anda lihat pada contoh di bawah ini:

Nama File: console_log.html



Ini adalah Heading

Ini adalah paragraf
Untuk menampilkan console di browser Chrome & Firefox dapat menggunakan shortcut CTL+SHIFT+J

Coba Anda jalankan script diatas, dan lihat hasilnya dengan menekan tombol CTRL+SHIFT+J untuk menampilkan Browser console. Hasilnya terlihat seperti gambar di bawah ini:
JavaScript Console Log


innerHTML

Langkah terakhir untuk menampilkan data di JavaScript adalah menggunakan innerHTML. innerHTML digunakan untuk menampilkan data pada elemen HTML. Tapi sebelumnya elemen harus diakses terlebih dahulu dengan menggunakan fungsi document.getElementById().

Untuk lebih jelasnya, Anda dapat langsung lihat pada contoh di bawah ini:

Nama File: inner_html.html




Ini adalah contoh Heading

Hasil dari perkalian dari 10 * 15 adalah...

Jika Anda jalankan di browser kesayangan Anda, maka akan terlihat output seperti di bawah ini:

contoh lain untuk dijadikan referensi coba lihat di http://www.dumetschool.com/blog/Cara-Menampilkan-Hasil-Output-JavaScript