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”). Fungsi getElementById 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:
<!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 CungukBlogger</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 variabel hasil. Pada baris ke-10 inilah saya menampilkan nilai akhir penjumlahan ke dalam tag HTML yang memiliki id tempat_hasil.
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:
<!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 CungukBlogger</p>
</body>
</html>
Web browser saat ini telah menyediakan menu khusus untuk programming web, yakni melalui menu Web 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 bertipe String, maka akan dikonversi menjadi String.
Berikut adalah contoh penggunaan fungsi console.log dalam menampilkan hasil program JavaScript:
<!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 CungukBlogger</p>
</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.
![Cara Membuat Foto Sampul Facebook Keren dan Unik [Tools Online]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTdosiQ6a7NvxVromfDJ7CGnfuEM5gb0mPoe4nvoCQ2iRAOK9wEojx9RjR2woJCKSgi1cTQopksEUj7iXmuLToCpt-Dgu5R54oE8943lTtx1UlGfQmookWzjMuFhkHhI9Efb0aNq9FMXe/s72-c/Timeline_Cover_doNotRename23+(FILEminimizer).png "Cara Membuat Foto Sampul Facebook Keren dan Unik [Tools Online]")
0 comments
Post a Comment