Dari tutorial sebelumnya, kita telah mempelajari cara memasukkan kode JavaScript kedalam HTML, dan memahami mekanisme web browser dalam mengeksekusi JavaScript. Pada tutorial kali ini saya akan membahas Cara Menampilkan Hasil Program JavaScript menggunakan fungsi getElementById, fungsi alert, dan fungsi console.log.
Cara Menampilkan Hasil Program JavaScript
Tidak seperti bahasa pemograman PHP yang memiliki perintah echo atau print untuk menampilkan hasil program ke dalam web browser, JavaScript tidak menyediakan perintah sederhana untuk menampilkan hasil program ke dalam web browser. Dalam JavaScript, kita membutuhkan beberapa langkah yang agak panjang jika ingin menampilkan hasil ke dalam web browser.
Pertama, kita harus membuat sebuah tag ‘container’, atau tag penampung untuk hasil program JavaScript. Tag container ini bisa berupa tag HTML apapun, seperti tag paragraf <p> atau tag <div>.
Kedua, kita harus mencari elemen ‘container’ ini dari JavaScript. JavaScript menyediakan beberapa cara untuk mengakses elemen dalam HTML. Salah satu caranya adalah dengan menggunakan fungsi(atau lebih tepatnya: method): document.getElementById(“id_continer”). FungsigetElementById akan mencari elemen HTML yang memiliki atribut id yang diinputkan di dalam tanda kurung.
Langkah ketiga, adalah menginputkan hasil program kedalam tag ‘container’ dengan menggunakan properti innerHTML.
Untuk mempermudah pemahaman cara menampilkan hasil program JavaScript ke dalam web browser, berikut adalah contoh program untuk menampilkan hasil penjumlahan:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Belajar JavaScript</title><script>window.onload = function(){ var hasil; hasil = 1+3+5+7+9; document.getElementById("tempat_hasil").innerHTML=hasil;}</script></head> <body><h1>Belajar JavaScript</h1><p> Saya sedang belajar JavaScript di duniailkom.com </p><div id="tempat_hasil"></div></body></html> |
Pada baris ke-7, saya masuk kedalam JavaScript menggunakan tag <script>. Pada baris pertama, saya menggunakan metoda event onload untuk memastikan bahwa kode JavaScript dijalankan setelah seluruh HTML telah selesai di proses (seperti yang telah kita pelajari pada tutorial Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML)
Pada baris berikutnya, saya membuat variabel hasil yang akan menampung hasil penjumlahan. Pada baris ke-9 saya melakukan beberapa penjumlahan sederhana, dan menyimpannya ke dalam variabelhasil. Pada baris ke-10 inilah saya menampilkan nilai akhir penjumlahan ke dalam tag HTML yang memiliki id tempat_hasil.
Penjelasan tentang fungsi document.getElementById akan kita bahas pada tutorial khusus tentang DOM JavaScript.
Proses untuk menampilkan hasil program yang agak panjang ini akan kurang praktis dalam pembuatan program JavaScript dimana kita akan sering untuk menguji hasil program sebelum masuk ke bagian program berikutnya.
Untuk keperluan ini, kita akan melihat alternatif cara untuk menampilkan hasil program dari JavaScript, yakni dengan fungsi alert dan fungsi console.log.
Fungsi Alert untuk Menampilkan Hasil Program JavaScript
Fungsi alert yang telah beberapa kali saya gunakan dalam beberapa tutorial sebelum ini, dan merupakan cara paling sederhana untuk menampilkan hasil program JavaScript.
Fungsi alert akan menampilkan ‘apapun’ yang diberikan sebagai argumen ke dalam fungsi ini. Setiap output yang ditampilkan akan dikonversi menjadi bentuk text (tipe data String). Fungsi alert akan menampilkan hasil JavaScript dengan cepat.
Berikut adalah contoh kode JavaScript sebelumnya jika menggunakan fungsi alert:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Belajar JavaScript</title><script>window.onload = function(){ var hasil; hasil = 1+3+5+7+9; alert(hasil);}</script></head> <body><h1>Belajar JavaScript</h1><p> Saya sedang belajar JavaScript di duniailkom.com </p></div> </body> </html> |
Fungsi Console.Log untuk Menampilkan Hasil Program JavaScript
Web browser saat ini telah menyediakan menu khusus untuk programming web, yakni melalui menuWeb Developer (seperti yang di bahas pada Cara Menampilkan Pesan Kesalahan (Error) JavaScript). Menu web developer ini menyediakan cara lain (yang lebih ‘modern‘) untuk menampilkan hasil program JavaScript dibandingkan menggunakan fungsi alert, yakni dengan fungsi console.log.
Fungsi console.log akan menampilkan hasil program ke dalam tab console pada menu Web Developer. Cara penggunaan fungsi ini sama seperti fungsi alert, dimana kita hanya butuh menginput hasil yang ingin ditampilkan kedalam argumen fungsi ini. Jika fungsi itu bukan bertipeString, maka akan dikonversi menjadi String.
Berikut adalah contoh penggunaan fungsi console.log dalam menampilkan hasil program JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Belajar JavaScript</title><script>window.onload = function(){ var hasil; hasil = 1+3+5+7+9; console.log(hasil);}</script></head><body><h1>Belajar JavaScript</h1><p> Saya sedang belajar JavaScript di duniailkom.com </p></div></body></html> |
Pilihan apakah menggunakan fungsi alert dan fungsi console.log tergantung kepada kenyamanan kita sebagai programmer. Dalam tutorial JavaScript di dunia ilkom ini, saya akan lebih banyak menggunakan fungsi console.log, karena dibandingkan fungsi alert, fungsi console.log bisa digunakan untuk menampilkan banyak hasil program sekaligus dan tampilan hasil program akan lebih rapi.
Kedua fungsi ini digunakan hanya dalam proses pembuatan program, atau proses pencarian kesalahan (debugging). Akan sangat jarang kita menggunakan fungsi ini dalam situs live. Untuk menampilkan output kepada user di dalam halaman HTML, biasanya menggunakan fungsi lain seperti document.getElementById dan InnerHTML seperti cara pertama pada awal artikel ini
Cara lain untuk menampilkan hasil dari JavaScript adalah menggunakan fungsidocument.write(). Berikut adalah cara penggunaannya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html><html><head><title>Belajar JavaScript</title><script>window.onload = function(){ document.write("Hello duniailkom");}</script></head><body><h1>Belajar JavaScript</h1><p> Saya sedang belajar JavaScript di duniailkom.com </p></div></body></html> |
Fungsi document.write akan menampilkan hasil JavaScript ke dalam web browser, tetapi dengan satu ketentuan: fungsi ini akan menghapus seluruh tag HTML yang telah ditulis, dan menggantinya dengan isi dari fungsi ini. Fungsi document.write hanya akan berguna jika anda ingin menuliskan seluruh kode HTML hanya melalui JavaScript, termasuk tag pembuka HTML seperti document.write(“<!DOCTYPE html>”), dan seterusnya.
Dalam Tutorial Belajar JavaScript berikutnya, kita akan membahas tentang inti dari JavaScript, yakni:Pengertian Core JavaScript dan DOM (Document Object Model).
source : www.duniailkom.com
source : www.duniailkom.com
0 komentar:
Posting Komentar