Font size
S
M
L
XL
WorksheetsTES SAKTI
Total questions: 60
Worksheet time: 30mins
Name
Class
Date
1.
Mendefinisikan heading yang terlihat untuk <details> element adalah fungsi dari element?
a)
<aside>
b)
<summary>
c)
<mark>
d)
<details>
e)
<nav>
2.
Autocomplete yang perlu kita gunakan untuk field password pada sign-up form?
a)
autocomplete="sign-up"
b)
autocomplete="current-password"
c)
autocomplete="password"
d)
autocomplete="off"
e)
autocomplete="new-password"
3.
Apa perbedaan fungsi dari elemen <h1>, <h2>, <h3>, dan h lainnya?
a)
Untuk menampilkan tulisan yang lebih besar dan lebih kecil
b)
Untuk menunjukkan relasi hirarki isi teks
c)
Semua sama saja, untuk menampilkan teks
d)
Elemen untuk judul dalam teks
e)
Semua salah
4.
Contoh penulisan perintah untuk menjadikan beberapa baris dalam tabel menjadi satu adalah …
a)
<table colspan=”3”>
b)
<tr colspan=”3”>
c)
<tr rowspan=”3”>
d)
<td rowspan-“3”>
e)
<td colspan=”3”>
5.
Validasi form HTML diterapkan melalui dua pseudo-class CSS yaitu?
a)
:link dan :lang
b)
:checked dan :active
c)
:disabled dan :enabled
d)
:valid dan :invalid
e)
required dan :optional
6.
Deklarasi CSS mana yang dapat memposisikan elemen <div> agara elemen lainnya menempati tempat yang terdapat di kanannya?
a)
float : left;
b)
float : right;
c)
float : none;
d)
position : right;
e)
position : left;
7.
Deklarasi terpendek untuk menghasilkan padding di atas sebesar 35px, di kanan sebesar 5px, di bawah sebesar 10px, di kiri sebesar 5px, yaitu..
a)
padding-top: 35px; padding-left, padding-right: 5px; padding-bottom: 10px;
b)
padding-top: 35px; padding-left, padding-right: 10px; padding-bottom: 10px;
c)
padding: 35px 10px 5px;
d)
padding: 35px 10px 5px 10px;
e)
padding: 35px 5px 10px;
8.
Framework dapat mempermudah pengerjaan developer dalam membuat aplikasi. CSS pun memiliki framework. Berikut adalah framework CSS yang termasuk free/open source dengan semua aksesnya yaitu :
a)
Bootstrap
b)
Tailwind CSS
c)
Tailwind UI
d)
Material
e)
Foundation
9.
Pada responsive web hal yang harus diperhatikan adalah, kecuali …
a)
Tampak bagus di setiap perangkat
b)
Tidak menghilangkan informasi
c)
Mudah digunakan pengguna
d)
Tampak informasi di setiap perangkat
e)
Mudah dicari oleh search engine
10.
Kondisi media queries yang dapat digunakan untuk mencegah browser lama yang tidak mendukung media queries dengan fitur media yang menerapkan gaya spesifik adalah …
a)
Screen
b)
Viewport
c)
Only screen
d)
Only viewport
e)
Max-width atau min-width
11.
Bagaimana kode program untuk menghasilkan output bintang pola kotak
a)
let rows = 5;
for (let i = 0; i < rows; i++) {
console.log('*');
}
b)
let rows = 5;
let bintang = '';
for (let i = 0; i < rows; i++) {
for (let j = 0; j < rows; j++) {
bintang += '*';
}
bintang += '\n';
}
console.log(bintang);
c)
let rows = 5;
let bintang = '';
for (let i = 0; j < rows3; j++) {
for (let j = 0; i <= j; i++) {
bintang += '*';
}
bintang += '\n';
}
console.log(bintang);
d)
let rows = 5;
let bintang = '';
for (let i = 0; i < rows; i++) {
for (let j = 0; j < rows; j++) {
bintang += '*';
}
bintang += '\n';
}
console.log(bintang);
e)
let rows = 5;
let bintang = '';
for (let i = 0; i < rows4; i++) {
for (let j = rows4; j > i; j--) {
bintang += '*';
}
bintang += '\n';
}
console.log(bintang);
12.
Apa perbedaan querySelector() dengan querySelectorAll() ?
a)
querySelector memilih teks pada dokumen dengan parameter tertentu, sedangkan querySelectorAll memilih seluruh teks pada dokumen
b)
querySelector hanya bisa memilih class sedangkan querySelectorAll dapat memilih atribut lain selain class
c)
querySelector lebih digunakan untuk membutuhkan proses query yang cepat sedangkan querySelectorAll digunakan untuk memilih seluruh dokumen
d)
querySelector digunakan untuk menampilkan model objek data dari database pada range tertentu sedangkan querySelectorAll digunakan untuk menampilkan seluruh tabel
e)
querySelector akan mengembalikan nilai elemen pertama yang ditemui dalam dokumen sedangkan querySelectorAll akan mengembalikan seluruh nilai yang sesuai dengan parameter dalam suatu dokumen
13.
Suatu function mempunyai dua required parameter. Namun, paramater input yang diberikan hanya satu maka paramater kedua akan mempunyai nilai ...
a)
Null
b)
Kosong
c)
Undefinied
d)
None
e)
Error
14.
Jika nilai x adalah 40, maka apa output dari program berikut? (x % 10 == 0)? (x % 10 == 0)? console.log(“Divisible by 10”) : console.log(“Not divisible by 10”);
a)
ReferenceError
b)
Divisible by 10
c)
None of the above
d)
Not divisible by 10
e)
None of the divisible
15.
function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("Ily");
});
document.getElementById("demo").innerHTML = await myPromise;
}
jika kode tersebut dipanggil maka ...
a)
Error
b)
Ily
c)
None
d)
Undefined
e)
Nothing
16.
Kegunaan dari <meta charset="UTF-8"> pada HTML adalah ?
a)
Type karakter huruf
b)
Type karakter isim
c)
type karakter isim mufrod
d)
type karakter huruf besar
17.
Cara menambahkan warna belakang ke elemen dengan id="London";
a)
<button onclick="w3.addStyle('#London' 'background-color','red')">Add Style</button>
b)
<button onclick="w3.addStyle('#London','background-color','red')">Add Style</button>
c)
<button onclick="w3.addStyle('#London','background-color','red';)">Add Style</button>
d)
<button onclick="w3.addStyle('#London','background-color'-'red')">Add Style</button>
18.
Method apa yang digunakan untuk menghapus data terakhir yang dimasukkan pada array/object?
a)
pop()
b)
splice()
c)
push()
d)
split()
19.
Properti CSS manakah yang digunakan untuk mengontrol stack/tumpukan elemen HTML? (misalnya <div> a ingin berada diatas <div> b)?
a)
x-index
b)
y-index
c)
z-index
d)
Semua jawaban benar
20.
Perintah di javascript yang berfungsi untuk memberikan suatu informasi ke pengguna melalui jendela dengan tombol OK dan Cancel adalah...
a)
prompt()
b)
confirm
c)
dialog
d)
write
21.
Manakah perintah yang digunakan untuk memanjangkan kolom menjadi 3?
a)
<table border="3">
b)
<column="3">
c)
<colspan="3">
d)
<rowspan="3">
22.
Fungsi yang digunakan untuk merubah salah satu nilai dari suatu variable menjadi bilangan decimal adalah...
a)
ParseInt()
b)
Eval=(nama variable)
c)
Window.close
d)
parseFloat()
23.
Tag <input> yang atribut TYPE-nya dapat digunakan untuk menerima masukan berupa pilihan yaitu...
a)
Radio
b)
Circle
c)
Password
d)
Square
24.
Apa yang dihasilkan dari console.log() dibawah?
a)
True
b)
False
25.
Bagaimana cara mendeteksi browser user di JavaScript?
a)
navigator.appCodeName
b)
navigator.geolocation
c)
navigator.appName
d)
navigator.app
26.
Perinth untuk membuat text berjalan dalam HTML adalah
a)
<br>
b)
<marq>
c)
<marquee>
d)
< >
27.
Perintah untuk menampilkan tanda ©©© adalah...
a)
&
b)
ˆ
c)
d)
©
28.
Manakah output yang tepat dari kode berikut ?
a)
Fetching username... You are logged in as JSUser Welcome
b)
Fetching username... Welcome You are logged in as JSUser
c)
Fetching Username...
You are Logged in as [object Promise]
Welcome
d)
Error
29.
div + p {} \n Style CSS diatas hanya berlaku terhadap elemen?
a)
semua element p yang berada di dalam element div (al child)
b)
child element p pertama yang berada dalam element div (first child)
c)
element p setelah div (adjacent sibling)
d)
element p dan element div yang berada pada parent element yang sama (all sibling)
30.
Manakah output yang tepat dari kode berikut ?
a)
4.0
b)
3.0
c)
2.0
d)
1.0
31.
Method-method DOM berikut dapat digunakan untuk mendapatkan sebuah elemen HTML, kecuali
a)
getElementById()
b)
getElementByClass()
c)
getElementByName()
d)
getElementByTagName()
32.
Property DOM apa yang dapat digunakan untuk mendapatkan list semua elemen child dari suatu elemen?
a)
childNodes
b)
getAllChildNode
c)
childNode
d)
childNodeList
33.
Method mana yang digunakan untuk me-replace node
a)
replaceChild
b)
replaceNodes
c)
replace
d)
replaceElement
34.
Kode Javascript berikut yang digunakan untuk menambahkan warna font menjadi kuning pada elemen dengan atribut class = "note" diantaranya
a)
const note = document.querySelector('.note');
note.style.color = 'yellow';
b)
const note = document.querySelector('.note');
note.style.cssText = 'color:yellow';
c)
const note = document.querySelector('.note');
css(note, {
color: 'yellow'
});
d)
const note = document.querySelector('.note');
note.innerHTML = `
.note {
color:yellow;
}
`;
35.
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 1; i < cars.length; i++) {
text += cars[i] + "<br>";
}
a)
BMW
Volvo
Saab
Ford
Fiat
b)
Volvo
Saab
Ford
Fiat
Audi
c)
Volvo
Saab
Ford
Fiat
d)
Ford
Fiat
Audi
BMW
Volvo
36.
let text = """";
let i = 0;
while (i < 10) {
text += ""<br>Nomor "" + i;
i++;
}
document.getElementById(""demo"").innerHTML = text;
</script>"
a)
Nomor 0
Nomor 1
Nomor 2
Nomor 3
Nomor 4
Nomor 5
Nomor 6
Nomor 7
Nomor 8
Nomor 9
b)
Nomor 1
Nomor 2
Nomor 3
Nomor 4
Nomor 5
Nomor 6
Nomor 7
Nomor 8
Nomor 9
Nomor 10
c)
Nomor 1
Nomor 2
Nomor 3
Nomor 4
Nomor 5
Nomor 6
Nomor 7
Nomor 8
Nomor 9
d)
Nomor 0
Nomor 1
Nomor 2
Nomor 3
Nomor 4
Nomor 5
Nomor 6
Nomor 7
Nomor 8
37.
let data = [1,2,3,4,5,6,7,8]
let dataBaru = data.slice(2,5)
apa keluaran dari dataBaru
a)
[3,4,5]
b)
[2,3,4,5]
c)
[2,3,4]
d)
Tidak ada yang benar
38.
@media screen ___ ( ___ 480px) and ( ___ 800px) { }
Buatlah media query yang memiliki ukuran layar lebar 480px sampai 800 px
a)
or min-width min-height
b)
and min-height min-height
c)
and min-width min-width
d)
or min-height min-width
39.
Diaktifkan saat browser memuat bingkai audio/video saat ini disebut
a)
loadeddata
b)
loadstart
c)
loadedmetadata
d)
load
40.
Dalam html canvas kita bisa memanipulasi pixel maka pilihlah metode mana yang sering digunakan, kecuali
a)
putImageData()
b)
createImageData()
c)
manipulationImageData()
d)
getImageData()
41.
pada html canvas terdapat Transformations, dimana transformations ini memiliki beberapa method. Salah satu methodnya ini bisa memetakan ulang posisi (0,0) di kanvas, method apakah itu
a)
scale()
b)
translate()
c)
setTransform()
d)
transform()
42.
Atribut CSS pada flexbox yang digunakan untuk mengatur elemen pada container agar tidak overflow jika tidak terdapat ruang yang cukup
a)
Display: block
b)
Flex: no-overflow
c)
Flex-wrap: wrap
d)
Flex-display: fit-content
43.
Atribut CSS yang dapat digunakan pada elemen parent untuk menengahkan posisi elemen child-nya secara horizontal pada CSS Grid adalah?
a)
Justify_items: center
b)
Justify_self: center
c)
Align_items: center
d)
Align_self: center
44.
Bagaimana menulis media query yang dengan aspect rasio 16/9
a)
aspect-ratio: 16/9
b)
tidak bisa
c)
device-aspect-ratio: 16/9
d)
ratio : 16/9
45.
Fill the blanks to produce horizontal and vertical scrollbars:
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
...: ...;
}
a)
position: sticky;
b)
scroll: scroll;
c)
overflow: scroll;
d)
flex: scroll;
46.
Salah satu window event attributes yaitu onpopstate. Apa fungsinya pada script apabila event attributes tersebut digunakan pada <body> tag?
a)
Script akan di-run ketika ada message yang tertrigger.
b)
Script akan di-run ketika history window berubah.
c)
Script akan di-run ketika suatu Web Storage Area di-update.
d)
Script akan di-run setelah document di-print.
47.
Method pada pixel manipulation yang berfungsi untuk mengembalikan objek ImageData yang menyalin data piksel untuk persegi panjang yang ditentukan pada kanvas adalah…
a)
createImageData()
b)
getImageData()
c)
imageData()
d)
putImageData()
48.
Manakah dari atribut berikut yang memicu peristiwa ketika media dapat diputar sampai akhir, tanpa berhenti untuk buffering?
a)
onbeforeplay
b)
onplay
c)
oncanplay
d)
oncanplaythrough
49.
Cara menyeleksi semua class yang bernama “btn” di js maka dapat menggunakan perintah…
a)
document.getElementsByClassName('btn');
b)
document.getElementById('btn');
c)
document.getElementsByClass('btn');
d)
document.querySelector('.btn');
50.
Ketika content pada elemen berlebih maka bisa diatasi menggunakan properti…
a)
Position
b)
Float
c)
Display
d)
Overflow
51.
Manakah yang elemen yang akan ditampilkan lebih depan…
a)
Z-index: 5;
b)
Z-index: 1;
c)
Z-index: 0;
d)
Z-index; -1;
52.
Manakah dari atribut berikut yang men-trigger event ketika formulir berubah?
a)
onchange
b)
onedit
c)
onformchange
d)
onforminput
53.
Tipe input manakah yang mendefinisikan slider control?
a)
range
b)
controls
c)
search
d)
slider
54.
Unit/value rem akan relatif terhadap…
a)
Parent element
b)
Child element
c)
Root element
d)
Font size element
55.
Manakah dari berikut ini yang bukan merupakan jenis kombinator?
a)
>
b)
~
c)
=+
d)
*
56.
Bagaimana cara membuat daftar yang mencantumkan item dengan kotak?
a)
list-type: square;
b)
list: square;
c)
list-style-type: square;
d)
square-list
57.
Manakah dari pemilih berikut di CSS yang digunakan untuk memilih elemen yang tidak cocok dengan pemilih?
a)
:! selector
b)
:not selector
c)
:empty selector
d)
Bukan dari salah satu di atas
58.
Untuk mendeklarasikan objek di js menggunakan?
a)
{} curly bracket
b)
[] square bracket
c)
$ dollar
d)
. dot
59.
sintaks JavaScript yang benar untuk mengubah konten elemen HTML di bawah ini?
<p id="demo">This is a demonstration.</p>
a)
#demo.innerHTML = "Hello World!";
b)
document.getElementById("demo").innerHTML = "Hello World!";
c)
document.getElementByName("p").innerHTML = "Hello World!";
d)
document.getElement("p").innerHTML = "Hello World!";
60.
script "Hello World" pada alert box adalah
a)
alert("Hello World");
b)
msg("Hello World");
c)
msgBox("Hello World");
d)
alertBox("Hello World");
Reset
