Nama : Muhammad Naufal Rizqullah

NIM : F1D017062
Kelas : Pemrograman Web B

TUGAS 4 Javascript

1. Prompt Welcome Page

a. Kode Javascript
<script>
var nameInput = prompt('Masukan Nama anda ');
alert(`Selamat Datang di Web Gameshark ` +
nameInput)
</script>
b. Penjelasan Kode
Pada code javascript ini menggunakan variable yang bernama
“nameInput” yang menampung sebuat output “prompt” yang akan
mengeluarkan text dan juga sebuah box input yang dimana hasil inputan
tersebut akan ditampung didalam variable “nameInput”. Setelah
mendapat input kemudian akan menampillan output “alert” yang berisi
sebuah text yang ditambahkan data dari variable “nameInput” yang
menjadi Welcome Page website Gameshark.
c. Screenshoot

Gambar 1.1
 Gambar 1.2
2. Menambahkan HMTL text pada div
a. Kode Javascript
<div id="box1">

</div>

<script>
var elmt = document.createElement('p');
var txt = document.createTextNode(
'Apa itu Gameshark ? gameshark merupakan
sistem informasi berbasis web yang menyediakan informasi
seputar dunia games dan teknologi terupdate. Dengan
slogan "All abaout tech and games" dan juga mengguakan
logo hiu yang menandakan akan keganasan dan juga
menggunakan warna tema biru hitam dan juga putih. '
);

var box = document.getElementById('box1');

elmt.appendChild(txt);
box.appendChild(elmt);
</script>
b. Penjelasan Kode
Pada “var=elmt” untuk menampung “document.createElement(‘p’) ” yang
digunakan untuk membuat element baru pada javasccript yang bertag “p”.
kemudian “document.createTextNode(…) ” yang didalamnya akan
menampung text yang akan dimasukan kedalam satu HMTL. Lalu
 “document.getElementById(‘box1’) ” digunakan untuk mencari dimanakan
tempat yang akan dituju melalui tag Id. Kemudian “elmt.appendChild(txt)”
digunakan untuk mengabil data (berupa text) pada variable “txt”. Lalu
“box.appendChild(elmt)” digunakan untuk menghubungkan varibel box
dengan element apa yang akan ditag kan pada html kita.
c. Screenshot

Gambar 2.1
3. Uppercase otomatis pada kolom input
a. Kode Javascript
function upperCase() {
var x = document.getElementById('ax')
x.value = x.value.toUpperCase();
}
b. Penjelasan Kode
Dimulai dengan membuat function di external javascript dengan nama
“uppercase”, lalu membuat variable x yang menampung
“document.getElementById(‘ax’) ” digunakan untuk mencari dimanakan
tempat yang akan dituju melalui tag Id. Kemudian nilai variable x akan di
ambil nilainya melalui “x.value” yang kemudian nilainya akan diubah
menggunakan method dari java script yaitu”toUpperCase()” yang
berfungis untuk merubah value x menjadi uppercase (huruf besar semua).
 c. Screenshot

Gambar 3.1

Gambar 3.2
4. Event Mouse
a. Kode Javascript
<center>
<div onmouseover="masuk(this)"
onmouseout="keluar(this)"
style="width:100%;padding:10px;
color: white;">
</div>
</center>
function masuk(obj) {
obj.innerHTML = "WELCOME TO GAMESHARK"
 }
function keluar(obj) {
obj.innerHTML = "HERE!"
}
b. Penjelasan Kode
Ini adalah Mouse event yang dimana jika mouse mulai memasuki area div
yang dibuat maka otomatis text akan berubah. Dimulai dengan membuat
div yang diisi oleh method “onmouseover=“masuk(this)”” yang berfungsi
ketika mouse mulai masuk kedalam area div maka akan mengaktifkan
function masuk. Dan juga terdapat method “onmouseout=“keluar(this)””
yang berfungsi ketika mouse mulai keluar area div maka akan
mengaktifkan function keluar.
c. Screenshot

Gambar 4.1
 Gambar 4.2
5. Menapilkan Waktu
a. Kode Javascript
<center>
<div id="time" style="color:white;"></div>
</center>

<script>
document.getElementById('time').innerHTML = Date();
</script>
b. Penjelasan
Ini digunakan untuk menampilkan waktu. Menggunkan
“getElementById(‘time’)” untuk mencari tag id yang bernama “time”. Lalu
memanggil method “Date()”yang akan ditampilkan pada tad “time”.
 c. Screenshot

Gambar 5.1
6. Konfirmasi Submit
a. Kode Javascript
function submit() {
if (confirm("Apa anda yakin ingin submit ?")) {
alert("ANDA TELAH SUBMIT");

} else {
alert("ANDA GAGAL SUBMIT");
}
}
b. Penjelasan
Ini dimulai dengan membuat function yang bernama “submit()”, kemudian
didalam fugsi itu terdapat kondisi if else yang dimana jika if terpenuhi maka akan
menjalankan “alert(‘ANDA TELAH SUBMIT’)” yang dimana akan menapilkan
popup. Lalu jika tidak terpenuhi maka akan menjalankan “alert(‘ANDA GAGAL
SUBMIT’)” yang akan menampilkan popup.
c. Screenshot

Gambar 6.1

Gambar 6.2