Cara menggunakan SET-CONTENT pada JavaScript

Jika Anda seorang pengembang web, lihat instruksi tentang cara memakai kode <noscript> pada halaman internet Anda.

Instruksi untuk pengembang web

Apabila anda ingin menyertakan tautan halaman ini, untuk menjelaskan setiap pengguna untuk mengaktifkan javascript dalam lima peramban web yang paling banyak digunakan. Anda bebas menggunakan kode dibawah ini dan memodifikasinya sesuai kebutuhan anda.

<noscript>
   Agar fungsi di situs ini lebih baik, anda perlu mengaktifkan JavaScript.
   Berikut ini adalah <a href="https://www.enable-javascript.com/id/">
   petunjuk cara mengaktifkan JavaScript</a> di peramban web Anda.
</noscript>

Pada enable-javascript.com kita mengoptimalkan pengguna yang belum mengaktifkan script sebanyak mungkin:

The instructions for your browser are put at the top of the page
All the images are inlined, full-size, for easy perusing
This developer-centric message is out of the way.

Kami ingin pengunjungmu untuk mengaktifkan JavaScript seperti kamu!

Dalam artikel tanya-jawab pemrograman duniailkom kali ini, saya akan membahas salah satu pertanyaan dari rekan kita: ALE-ALE di halaman Tutorial Belajar JavaScript: Pengertian Core JavaScript dan DOM (Document Object Model).

Berikut adalah pertanyaannya:

Saya sedang mengerjakan project delphi menggunakan javascript .. 
dimana di situ juga saya membuat browser sederhana dengan implementasi javascript di dalamnya.

Yang mau saya tanyakan bagaimana caranya mengambil nilai yg ada di HTML / halaman browser sehingga dgn menggunakan javascript tersebut akan saya tampilkan di GUI program.

Contoh nya misal di halaman web terdapat kata nilai anda adalah = 80, 
bagaimana mengambil string 80 tersebut dengan javascript ?!

makasih sebelumnya

Karena saya sudah lama tidak membuat program dengan delphi, kali ini saya hanya fokus kepada cara mengambil dan menampilkan nilai yang ada di HTML dengan menggunakan JavaScript.

Berikut adalah tampilan akhir kode program:

Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil diatas:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>

<body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
  <p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
  <br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
<button id="tombol_p">Tampilkan Nilai</button>

<br/>
<br/>

<h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
  <label>Rika Pratiwi: </label>
  <input type="text" id="input_form" value="90"/>
  <button id="tombol_form">Tampilkan Nilai</button>
</form>

<br/>
<br/>

<h2>Hasil: <span id="hasil"></span></h2>
</body>

<script>
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);

document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);

function tampilkan_nilai_p() {
    var nilai_andika=document.getElementById("nilai_andika").innerHTML;
    var nilai_joko=document.getElementById("nilai_joko").innerHTML;
    document.getElementById("hasil").innerHTML=
    nilai_andika+" dan "+nilai_joko;
}

function tampilkan_nilai_form(){
    var nilai_form=document.getElementById("input_form").value;
    document.getElementById("hasil").innerHTML=nilai_form;
}
</script>
</html>

Anda bisa mencobanya dari tampilan CODEPEN dibawah ini:

See the Pen pvjbJL by duniailkom (@duniailkom) on CodePen.10206

Mari kita bahas kode HTML dan JavaScript diatas dengan lebih detail.

Kode HTML

Dari contoh diatas, saya menggunakan kode HTML sebagai berikut:

<body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
<p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
<br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
<button id="tombol_p">Tampilkan Nilai</button>

<br/>
<br/>

<h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
  <label>Rika Pratiwi: </label>
  <input type="text" id="input_form" value="90"/>
<button id="tombol_form">Tampilkan Nilai</button>
</form>

<br/>
<br/>

<h2>Hasil: <span id="hasil"></span></h2>
</body>

Dalam kode HTML diatas, saya membuat 2 buah contoh. Yang pertama adalah sebuah paragraf yang berisi nama dan nilai dari 2 orang siswa: Andika Siswoyo dan Joko Susilo (bukan nama sebenarnya :) ), kedua nama ini berada di dalam tag paragraf. Namun yang paling penting, nilai dari masing-masing siswa berada di dalam tag <span> dengan atribut id=nilai_andika dan id=nilai_joko. Atribut id inilah yang akan kita gunakan untuk mengambilnya dengan JavaScript.

Di bawah nilai siswa ini saya menambahkan sebuah tombol dengan tag <button id=”tombol_p”>. Tombol ini akan digunakan sebagai ‘trigger’ untuk pengambilan nilai.

Untuk contoh kedua, saya membuat sebuah form yang berisi tag <input type=”text”>. Inputan ini bisa diganti-ganti nilainya pada saat halaman HTML telah tampil, dan kita akan mencoba mengambil nilai dari tag input ini.

Sama seperti contoh diatasnya, saya menggunakan tombol <button id=”tombol_form”> sebagai ‘trigger’ JavaScript, yakni ketika tombol ini di-klik, ambil nilai form dengan JavaScript.

Jika anda perhatikan, tag <form> memiliki atribut onsubmit=”return false”. Atribut ini adalah kode JavaScript yang berfungsi untuk menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu untuk di proses (biasanya diproses menggunakan PHP).

Dengan kata lain, menambahkan atribut onsubmit=”return false” pada tag form, akan mematikan fungsi submit. Hal ini saya lakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga saya tidak butuh fungsi bawaan tersebut.

Dibagian akhir kode HTML, saya menambahkan sebuah tag span: <span id=”hasil”>, disinilah nantinya nilai akhir akan ditampilkan.

Kode JavaScript

Untuk kode JavaScript, saya menempatkannya di bawah tag <body>, bukan di bagian <head>:

<script>
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);

document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);

function tampilkan_nilai_p() {
    var nilai_andika=document.getElementById("nilai_andika").innerHTML;
    var nilai_joko=document.getElementById("nilai_joko").innerHTML;
    document.getElementById("hasil").innerHTML=
    nilai_andika+" dan "+nilai_joko;
}

function tampilkan_nilai_form(){
    var nilai_form=document.getElementById("input_form").value;
    document.getElementById("hasil").innerHTML=nilai_form;
}
</script>

Kenapa harus meletakkannya kode diatas setelah tag <body>, dan bukan di <head>? Hal ini saya lakukan karena kita akan menggunakan method khusus di dalam javascript, yakni addEventListener.

addEventListener adalah method(penyebutan untuk function di dalam pemrograman objek) yang digunakan untuk ‘menempelkan’ event kepada tag HTML.

Jika biasanya kita menggunakan event JavaScript: onClick langsung pada HTML, seperti: <button onclick=”tampilkan()”>, maka kita bisa menggantinya dengan addEventListener(“click”, tampilkan). Dengan menggunakan addEventListener, kode HTML bisa bebas dari JavaScript.

Akan tetapi mentod addEventListener harus ditulis setelah kode HTML selesai dikirim ke web browser. Oleh karena itu, kita harus menempatkannya setelah kode HTML.

Dalam kode Javascript diatas, saya menggunakan 2 buah method addEventListener, untuk masing-masing tombol. Untuk mencari tombol ini di HTML, saya menggunakan method JavaScriptL getElementById(). Dengan demikian, kode:

document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);

Berarti: cari sebuah tag HTML yang ber-id=”tombol_p”, lalu apabila di klik, jalankan fungsi tampilkan_nilai_p.

Selanjutnya, saya membuat fungsi tampilkan_nilai_p dibawahnya.

Pada dasarnya, fungsi tampilkan_nilai_p berguna untuk mengambil nilai dari tag <span> dengan id=”nilai_andika” dan id=”nilai_joko”, kemudian menggabungkan keduanya, dan tampilkan hasilnya ke tag <span id=”hasil”>.

Kode program JavaScript:

var nilai_andika=document.getElementById("nilai_andika").innerHTML;

Berarti: Ambil isi tag HTML dengan id=”nilai_andika”, kemudian simpan kedalam variabel nilai_andika. innerHTML adalah property objek JavaScript yang menampung ‘isi’ HTML. Karena di kode HTML saya membuat <span id=”nilai_andika”>80</span>, maka document.getElementById(“nilai_andika”).innerHTML akan menghasilkan nilai:80.

Selanjutnya saya juga melakukan hal yang sama dengan nilai_joko, dan hasilnya ditampilkan kedalam tag <span id=”hasil”></span> dengan kode program:

document.getElementById("hasil").innerHTML=nilai_andika+" dan "+nilai_joko;

Untuk contoh kedua yang menggunakan form, saya juga menggunakan cara yang hampir sama, tetapi karena nilai dari tag <input> disimpan di dalam property value, maka cara mengaksesnya adalah dengan kode berikut:

var nilai_form=document.getElementById("input_form").value;

Kemudian hasilnya saya tampilkan di dalam tag <span id=”hasil”></span>.

* 22 February 2015: Update untuk pertanyaan dari rekan kingzen, yakni bagaimana jika hasil form ditampilkan dalam halaman lain?

Menggunakan form dengan JavaScript membuka ide untuk hal-hal yang tidak bisa dilakukan dengan HTML saja, salah satunya saya akan mencoba menampilkan hasil form dalam halaman lain.

Salah satu keterbatasan untuk hal ini adalah kita tidak bisa ‘mengutak-atik’ isi dari halaman lain dengan JavaScript. Sebagai contoh, saya menjalankan web browser dan membuka 2 tab. Pada tab pertama saya membuka situs duniailkom, sedangkan pada tag kedua saya membuka situs facebook. Dalam kasus ini, kode Javascript pada situs duniailkom tidak bisa ‘menyentuh’ isi situs facebook. Ini adalah salah satu fitur keamanan di dalam JavaScript yang dikenal dengan Same-origin policy.

Agar JavaScript bisa memanipulasi halaman lain, maka halaman tersebut harus berada dalam satu domain, atau dibuka dari halaman saat ini dengan menggunakan Window object. Pembahasan mengenai Window object javascript akan membutuhkan tutorial tersendiri, karena objek ini memiliki banyak method dan property yang bisa digunakan.

Dalam contoh kali ini saya hanya menggunakan method window.open untuk membuka halaman baru. Langsung saja masuk kedalam contoh program, berikut adalah kode yang digunakan:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>
 
<h3>Contoh 3: Mengambil nilai tag input, 
tampilkan nilai pada jendela baru</h3>

<button id="tombol_jendela">Buat Jendela Baru</button>

<br/>
<br/>

<form onsubmit="return false">
  <label>Rika Pratiwi: </label>
  <input type="text" id="input_form" value="90"/>
  <button id="tombol_form">
     Tampilkan Nilai pada jendela baru
   </button>
</form>
 
<script>

document.getElementById("tombol_jendela").
addEventListener("click", jendela_baru);
 
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
 
function tampilkan_nilai_form(){
    var nilai_form=document.getElementById("input_form").value;
    newWindow.document.getElementById("hasil").innerHTML=nilai_form;
}

function jendela_baru(){
newWindow = window.open("", "Jendela Baru", "width=400, height=200");
newWindow.document.write("<h2>Hasil: <span id='hasil'></span></h2>");

// newWindow akan menjadi global variabel, 
// sehingga bisa diakses dari fungsi tampilkan_nilai_form
}

</script>
</body>
</html>

Dalam kode diatas, tombol ‘Buat Jendela Baru’ digunakan untuk membuat jendela baru dengan method window.open(). Pada jendela baru tersebut saya juga menyisipkan sebuah tag <span> dengan id=’hasil’. Referensi ke jendela baru ini disimpan ke dalam variabel newWindow. Variabel inilah yang menjadi ‘jembatan’ antara halaman lama dengan halaman baru.

Ketika tombol ‘Tampilkan Nilai pada jendela baru’ ditekan, maka kita bisa mengakses tag <span> ini dan menulis hasilnya menggunakan perintah:

newWindow.document.getElementById("hasil").innerHTML=nilai_form;

Berikut contoh kode jika anda ingin mencoba script diatas:

See the Pen ZYoQYp by duniailkom (@duniailkom) on CodePen.10206

Demikian tutorial kita tentang Cara Mengambil Nilai HTML dengan JavaScript, jika anda baru pertama kali mengenal JavaScript, penjelasan diatas mungkin cukup ‘njelimet’. Duniailkom juga telah membuat Tutorial Belajar JavaScript Dasar untuk pemula bagi anda yang ingin mendalami JavaScript.

eBook JavaScript Uncover Duniailkom

JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.