Layar JavaScript: Contoh dan Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 26, 2020

Objek window.screen berisi informasi tentang layar pengguna.

Section Artikel

1 Window Screen
2 Lebar Layar Jendela
3 Tinggi Layar Jendela
4 Lebar Layar Jendela Tersedia
5 Tinggi Layar Jendela Tersedia
6 Kedalaman Warna Layar Jendela
7 Kedalaman Pixel Layar Jendela

Window Screen

Objek window.screen dapat ditulis tanpa awalan window.

Properti:

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

Lebar Layar Jendela

Properti screen.width mengembalikan lebar layar pengunjung dalam pixel.

Contoh:
Tampilkan lebar layar dalam pixel.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Lebar layarnya adalah " + screen.width;
</script>

</body>
</html>

Tinggi Layar Jendela

Properti screen.height mengembalikan tinggi layar pengunjung dalam pixel.

Contoh:
Menampilkan tinggi layar dalam pixel.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Tinggi layarnya adalah " + screen.height;
</script>

</body>
</html>

Lebar Layar Jendela Tersedia

Properti screen.availWidth mengembalikan lebar layar pengunjung, dalam pixel, dikurangi fitur interface seperti Windows Taskbar.

Contoh:
Tampilkan lebar layar yang tersedia dalam piksel.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Lebar layar yang tersedia " + screen.availWidth;
</script>

</body>
</html>

Tinggi Layar Jendela Tersedia

Properti screen.availHeight mengembalikan tinggi layar pengunjung, dalam piksel, dikurangi fitur interface seperti Windows Taskbar.

Contoh:
Tampilkan tinggi layar yang tersedia dalam piksel.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Tinggi layar yang tersedia " + screen.availHeight;
</script>

</body>
</html>

Kedalaman Warna Layar Jendela

Properti screen.colorDepth mengembalikan jumlah bit yang digunakan untuk menampilkan satu warna.

Semua komputer modern menggunakan perangkat keras 24 bit atau 32 bit untuk resolusi warna, yaitu:

24 bits = 16.777.216 “True Colors” yang berbeda
32 bit = 4.294.967.296 “Deep Colors” yang berbeda.

Komputer lama menggunakan 16 bit: 65.536 resolusi “High Colors” yang berbeda.

Komputer yang sangat lama, dan ponsel lama menggunakan 8 bit: 256 “warna VGA” yang berbeda.

Contoh:
Menampilkan kedalaman warna layar dalam bit.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Kedalaman warna layar adalah " + screen.colorDepth;
</script>

</body>
</html>

Nilai #rrggbb (rgb) yang digunakan di HTML mewakili “True Colors” (16.777.216 warna berbeda).

Kedalaman Pixel Layar Jendela

Properti screen.pixelDepth mengembalikan kedalaman pixel layar.

Contoh
Menampilkan kedalaman pixel layar dalam bit.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Kedalaman piksel layar adalah " + screen.pixelDepth;
</script>

</body>
</html>

Pada jenis komputer modern, Kedalaman Warna dan Kedalaman Piksel bernilai sama.

javascript