Cara Menampilkan Hasil Program JavaScript
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.
<!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>
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.
<!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
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.
<!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>