Scribd
Unggah
183 tayangan6 halaman

Soal Praktek Java Script

Dokumen berisi 10 soal tentang manipulasi DOM menggunakan JavaScript. Soal-soal tersebut meliputi perubahan warna latar belakang, penambahan elemen, perubahan teks, penyembunyian/penampilan elemen, manipulasi input pengguna, penghitung klik, tanggapan keyboard, penggunaan timeout, perubahan CSS, dan konfirmasi pengguna.

Diunggah oleh

ppurnama
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
183 tayangan6 halaman

Soal Praktek Java Script

Dokumen berisi 10 soal tentang manipulasi DOM menggunakan JavaScript. Soal-soal tersebut meliputi perubahan warna latar belakang, penambahan elemen, perubahan teks, penyembunyian/penampilan elemen, manipulasi input pengguna, penghitung klik, tanggapan keyboard, penggunaan timeout, perubahan CSS, dan konfirmasi pengguna.

Diunggah oleh

ppurnama
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

Soal 1: Mengubah Warna Background

Buatlah sebuah halaman HTML dengan sebuah tombol. Saat tombol tersebut diklik,
ubah warna latar belakang halaman menjadi warna acak.

Soal 2: Menambahkan Element Baru

Buatlah halaman HTML dengan sebuah daftar ( <ul>) dan sebuah tombol. Setiap kali
tombol diklik, tambahkan elemen baru ke dalam daftar dengan teks yang berisi nomor
urut elemen terakhir + 1.

Soal 3: Mengubah Teks

Buatlah halaman HTML dengan sebuah paragraf dan dua tombol. Saat tombol pertama
diklik, ubah teks paragraf menjadi "Halo, dunia!". Saat tombol kedua diklik, kembalikan
teks paragraf ke kondisi awal.

Soal 4: Menyembunyikan dan Menampilkan Elemen

Buatlah halaman HTML dengan sebuah gambar dan dua tombol. Saat tombol pertama
diklik, sembunyikan gambar. Saat tombol kedua diklik, tampilkan kembali gambar
tersebut.

Soal 5: Memanipulasi Input Pengguna

Buatlah halaman HTML dengan sebuah input teks dan sebuah tombol. Saat tombol
diklik, ambil nilai dari input teks dan tampilkan dalam sebuah elemen paragraf di
bawahnya.

Soal 6: Menghitung Jumlah Klik

Buatlah halaman HTML dengan sebuah tombol. Tampilkan jumlah kali tombol tersebut
diklik di halaman.

Soal 7: Menanggapi Event Keyboard

Buatlah halaman HTML dengan sebuah input teks dan sebuah elemen paragraf. Saat
pengguna mengetik di input teks, tampilkan teks yang diketik di elemen paragraf.

Soal 8: Menggunakan TimeOut


Buatlah halaman HTML dengan sebuah teks dan sebuah tombol. Saat tombol diklik,
ubah teks menjadi "Hello, dunia!" setelah 3 detik.

Soal 9: Mengubah CSS

Buatlah halaman HTML dengan sebuah elemen div dan sebuah tombol. Saat tombol
diklik, ubah gaya CSS elemen div (misalnya, ubah warna teks atau ukuran font).

Soal 10: Memanfaatkan Confirm Box

Buatlah halaman HTML dengan sebuah tombol. Saat tombol diklik, munculkan kotak
konfirmasi. Jika pengguna menekan "OK", ubah warna latar belakang halaman menjadi
hijau; jika pengguna menekan "Batal", ubah warna latar belakang menjadi merah.
Jawaban Soal 1: Mengubah Warna Background

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Soal 1</title>

<style>

body {

transition: background-color 0.5s;

</style>

</head>

<body>

<button onclick="ubahWarna()">Ubah Warna</button>

<script>

function ubahWarna() {

const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

document.body.style.backgroundColor = randomColor;

</script>

</body>

</html>
Jawaban Soal 2: Menambahkan Element Baru

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Soal 2</title>

</head>

<body>

<ul id="myList"></ul>

<button onclick="tambahElement()">Tambah Element</button>

<script>

let count = 0;

function tambahElement() {

count++;

const newItem = document.createElement("li");

newItem.textContent = "Elemen " + count;

document.getElementById("myList").appendChild(newItem);

</script>

</body>

</html>
Jawaban Soal 3: Mengubah Teks

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Soal 3</title>

</head>

<body>

<p id="myParagraph">Ini adalah teks awal.</p>

<button onclick="ubahTeks()">Ubah Teks</button>

<script>

const originalText = "Ini adalah teks awal.";

function ubahTeks() {

const paragraph = document.getElementById("myParagraph");

paragraph.textContent = "Halo, dunia!";

function kembalikanTeks() {

const paragraph = document.getElementById("myParagraph");

paragraph.textContent = originalText;

</script>
</body>

</html>

Anda mungkin juga menyukai