Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan mengenai Javascript dan DHTML. Javascript adalah bahasa pemrograman untuk html dan halaman web. Untuk menggunakan Javascript (selanjutnya disingkat menjadi JS) pada html gunakan tag "<script></script>".

Untuk memanggil nilai/tulisan pada html melalui JS, bisa dihubungkan dengan nama id yang digunakan pada element penampung hasil di html inilah yang disebut DHTML.

Ini adalah kriteria yang harus dipenuhi :

1. Menampilkan alert "Selamat Datang" ketika halaman pertama kali dibuka.
2. Terdapat dua buah input text dimana user bisa memasukkan 2 buah angka, dan sebuah tombol. Jika tombol ini ditekan, hasil perkalian 2 buah angka ini akan ditampilkan di sebelah tombol.
3. Terdapat dua buah input text dimana user bisa memasukkan nama depan dan nama belakangnya, dan sebuah tombol. Jika tombol ini ditekan, hasil penggabungan 2 buah nama ini akan ditampilkan di sebelah tombol.
4. Terdapat dua buah input text dimana user bisa memasukkan  2 buah angka yang nilai awal keduanya 0. Jika nilai input text ini berubah, akan ditampilkan sesuatu sesuai dengan nilai kedua input text tersebut. Jika input pertama lebih besar dari input kedua, akan ditampilkan "A menang". Jika input pertama lebih kecil dari input kedua, akan ditampilkan "B menang". Jika input pertama sama dengan input kedua, akan ditampilkan "Seri".
5. Menampilkan sebuah gambar dan sebuah tombol. Jika tombol ini ditekan, maka gambar tersebut akan berubah menjadi gambar yang lain.
6. Menampilkan sebuah tulisan berukuran font besar dan berwarna tertentu. Jika tulisan ini ditekan, maka warna tulisan tersebut akan berubah menjadi warna yang lain.
7. Terdapat sebuah input text dimana user bisa memasukkan tulisan, sebuah tombol, dan sebuah list. Jika tombol ditekan, maka tulisan pada input text akan masuk menjadi anggota list yang paling bawah.

---



1. Pertama, gunakan pop up boxes dengan tipe alert, sintaksnya adalah "window.alert("TEKS");" .
<script> window.alert("SELAMAT DATANG ☀"); </script>
 Outputnya : 


2. Kedua, untuk menghasilkan sebuah perkalian antara dua nilai, gunakan sintaks fungsi yang terdapat dua 3 variabel di dalamnya dan operator yang akan digunakan (/*-+).
<input type="text" id="bil1" placeholder="insert"><b> X </b> <input type="text" id="bil2" placeholder="number"> <button onclick="soal1()">=</button> <span id="hasil1"></span> <script> function soal1() { var a = document.getElementById("bil1").value; var b = document.getElementById("bil2").value; var h1 = a*b; document.getElementById("hasil1").innerHTML = h1; } </script>
 Outputnya : 


3. Ketiga, untuk menggabungkan dua buah kata/kalimat yang terpisah, guanakan operator penjumlahan antara variabel yang ada, dan jangan lupa tambahkan string spasi (" ").
First Name : <input type="text" id="nama1" placeholder="insert your first name"> Last Name : <input type="text" id="nama2" placeholder="insert your last name"> <button onclick="soal2()"> Merge Your Name :</button> <span id="hasil2"></span> <script> function soal2() { var a = document.getElementById("nama1").value; var b = document.getElementById("nama2").value; var h2 = a+" "+b; document.getElementById("hasil2").innerHTML = h2; } </script>
 Outputnya : 


4. Keempat, untuk membandingkan dua nilai gunakan comparison dengan sintaks if/else if/else layaknya pada bahasa pemrograman biasa (seperti bahasa c/c++/pascal).
<input type="text" id="bil3" onchange="soal3()" value="0" > <b> versus </b> <input type="text" id="bil4" onchange="soal3()" value="0"> <button onclick="soal3()"> Who's the winner?</button> <span id="hasil3"></span> <script> function soal3() { var h3; var a = document.getElementById("bil3").value; var b = document.getElementById("bil4").value; if (a>b) { h3 = "A won.";} else if (a<b) { h3 = "B won.";} else { h3 = "Seri."} document.getElementById("hasil3").innerHTML = h3; } </script>
 Outputnya : 


5. Kelima,  untuk mengganti sebuah gambar dengan gambar lain, sintaks yang digunakan untuk output masih sama yaitu "document.getElementById("ID-GAMBAR-YANG-AKAN-DIGANTI").src="nama-gambar-pengganti".
<img id="hasil4" src="stuff/pict2.png"> <button onclick="soal4()">Other version ?</button> <script> function soal4() { document.getElementById("hasil4").src="stuff/pict1.png"; } </script>
 Outputnya : 


6. Keenam, untuk mengganti warna sebuah kata/kalimat, gunakan "style.color="nama-warna";" setelah sintaks "document.getElementById("id-kalimat")".
<span >Try to click it!</span> <span id="hasil5" onmousedown="grey()" onmouseup="blue()"><h2> " Grey is the first, blue after it. "</h2> </span>. . . . . . <script> function grey() { document.getElementById("hasil5").style.color="#414141"; } function blue() { document.getElementById("hasil5").style.color="#4c63d9"; } </script>
 Outputnya : 


7. Ketujuh, untuk menambahkan kata/kalimat baru gunakan JS Array push (selebihnya: w3-arrayPush) .
<span>List your top favorite stuffs here : </span> <input id="l-stuffs" type="text" placeholder="list here"> <button onclick="list()">Create</button> <span id="hasil6"></span> <script> var stuffs =[""]; document.getElementById("hasil6").innerHTML = stuffs; function list() { var a = document.getElementById("l-stuffs").value;stuffs.push(a); document.getElementById("l-stuffs").innerHTML = a; document.getElementById("hasil6").innerHTML = stuffs.join(" <li type=list>"); } </script>
 Outputnya : 

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.