Javascript Banyak Variabel Bernilai Numerik String
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.
Cara 1
Menggunakan perintah document.write(" ");
Langkah-langkahnya
1. Mulailah dengan menulis perintah let secara manual di halaman kosong di Google Docs.
2. Tulislah variabel misalnya a, b, c, x, y yang mengikuti perintah let
Ditulis begini
let a, b, c, x, y;
3. Nyatakanlah a memiliki nilai “76” sehingga kode ditulis
a = “76”;
Nyatakanlah b memiliki nilai “77” sehingga kode ditulis
b = “77”;
Nyatakanlah c memiliki nilai “79” sehingga kode ditulis
c = “79”;
Nyatakanlah x memiliki nilai “46” sehingga kode ditulis
x = “46”;
Nyatakanlah y memiliki nilai “47” sehingga kode ditulis
y = “47”;
Sekarang kode menjadi berikut
let a, b, c, x, y;
a = “76”;
b = “77”;
c = “79”;
x = “46”;
y = “47”;
3. Teruskan menulis perintah
document.write(" "); dengan membuang tanda kutip karena dalamnya tanda kutip diisi variabel sehingga tertulis document.write(a+b+c+x+y);
Sekarang kode menjadi
let a, b, c, x, y, z;
a = “76”;
b = “77”;
c = “79”;
x = “46”;
y = “47”;
document.write(a+b+c+x+y);
5. Dahuluilah seluruh kode tersebut dengan kode <script type="text/javascript"> dan tutuplah dengan kode </script>
Sekarang kode menjadi
<script type="text/javascript">
let a, b, c, x, y;
a = "76";
b = "77";
c = "79";
x = "46";
y = "47";
document.write(a+b+c+x+y);
</script>
6. Copy-lah seluruh kode tersebut kemudian Paste-lah ke dalam halaman kosong di Tampilan HTML di Blogger, bukan di Tampilan Menulis.
7. Pilihlah Publikasikan,
Kode selengkapnya berikut :
<script type="text/javascript">
let a, b, c, x, y;
a = "76";
b = "77";
c = "79";
x = "46";
y = "47";
document.write(a+b+c+x+y);
</script>
Hasil tampilannya berikut:
7677794647
Untuk memperbaiki hasil tampilannya agar menjadi tampak spasinya, maka pakailah tanda penghubung plus antar variabel dan dipisah oleh tanda kutip “ “, sehingga kode selengkapnya berikut:
<script type="text/javascript">
let a, b, c, x, y;
a = "76";
b = "77";
c = "79";
x = "46";
y = "47";
z = "49";
document.write(a + " " + b + " " + c + " " + x+ " " + y);
</script>
Hasil tampilannya berikut:
76 77 79 46 47
Kode lain dengan perintah document.
getElementById("mencoba").innerText = mencoba; juga bisa dilakukan
<div id="mencoba"></div>
<script type="text/javascript">
let a, b, c, x, y;
a = "76";
b = "77";
c = "79";
x = "46";
y = "47";
const mencoba = a + " " + b + " " + c + " " + x + " " + y ;
document.getElementById("mencoba").innerHTML = mencoba;
</script>
Juga bisa
<div id="mencoba"></div>
<script type="text/javascript">
let a, b, c, x, y;
a = "76";
b = "77";
c = "79";
x = "46";
y = "47";
const mencoba = a + " " + b + " " + c + " " + x + " " + y;
document.getElementById("mencoba").innerText = mencoba;
</script>
Perbedaan kode .innerHTML dan kode .innerText
Perhatikan dua contoh berikut:
Contoh 1
<div id="berlatih"></div>
<script type="text/javascript">
document.getElementById("berlatih").innerHTML = "<b>IKHSAN</b>";
</script>
Hasil tampilannya:
IKHSAN
Contoh 2
<div id="berlatih"></div>
<script type="text/javascript">
document.getElementById("berlatih").innerText = "<b>IKHSAN</b>";
</script>
Hasil tampilannya:
<b>IKHSAN</b>
.innerHTML itu diisi dengan string HTML bukan elemen HTML LANGSUNG, bukan tag HTML LANGSUNG. Kode .innerHTML menafsirkan tag HTML atau kode HTML.
.innerText itu diisi dengan hanya teks saja, dan tidak menafsirkan tag HTML atau kode HTML. Ketika diisi dengan kode HTML, maka kode HTML akan ditampilkan sebagai teks.
