Belajar HTML langkah awal menjadi Web Programmer tahap III
By. Agung KB - 25 Jul 2023
Belajar HTML langkah awal menjadi Web Programmer tahap III
Javascript
Javascript adalah bahasa script yang berdasar pada objek yang memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa suatu window, frame, URL, dokumen, form, button atau item yang lain. Yang semuanya itu mempunyai properti yang saling berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan atribut lain.
Setelah kalian belajar HTML, selanjutnya kita perlu belajar Javascript untuk mempercantik website yang telah kalian buat.
Untuk dapat mempelajari pemrograman Javascript, ada dua piranti yang diperlukan yaitu browser dan teks editor. Teks editor kalian bisa menggunakan Notepad, Wordpad, untuk browse bisa menggunakan Edge, Firefox ataupun Chrome.
Untuk memulai menuliskan javascript, kalian harus membubuhkan tag <script></script>.
‘<script>
Tempatkan program kalian disini
</script>’.
Mari kita lanjutkan program HTML kemarin kita gabungkan dengan program Javascript.
Silahkan copy paste teks dibawah.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white; text-align: center;
}
h3 {
color: white; text-align: center;
}
.juduldaftar{
font-size:18px; font-weight:bold; text-align: center;
}
.judulkolom{
font-size:18px; font-weight:bold; background-color: lightblue;
}
.table{
background-color: white;
}
p {
font-family: verdana; font-size: 20px;
}
</style>
</head>
<body>
<h1><center>SMA Negeri 1</center></h1>
<h3><center>Jl. Raya Besar No. 135</center></h3>
<hr>
<h4 class="juduldaftar">Daftar Siswa Kelas 10A</h4>
<table width="100%" border="1" class="table">
<tr align="center" class="judulkolom" >
<td width="5%" >No</td>
<td width="25%">Nama Siswa</td>
<td width="5%">L/P</td>
<td width="15%">Tgl Lahir</td>
<td width="45%">Asal Sekolah</td>
<td width="5%">Nilai</td>
</tr>
<tr >
<td align="right">1</td>
<td>Agus Pambudi</td>
<td align="center">L</td>
<td align="center">24-09-2008</td>
<td>SMP Negeri 12</td>
<td align="center">99.34</td>
</tr>
<tr >
<td align="right">2</td>
<td>Amin Nugraha</td>
<td align="center">L</td>
<td align="center">22-10-2008</td>
<td>SMP Negeri 09</td>
<td align="center">99.32</td>
</tr>
<tr>
<td align="right">3</td>
<td>Arlita Astuti</td>
<td align="center">P</td>
<td align="center">12-01-2009</td>
<td>SMP Negeri 03</td>
<td align="center">99.26</td>
</tr>
<tr>
<td align="right">4</td>
<td>Beliana Putriyani</td>
<td align="center">P</td>
<td align="center">05-02-2009</td>
<td>SMP Negeri 07</td>
<td align="center">99.24</td>
</tr>
<tr>
<td align="right">5</td>
<td>Budiman Noor Putra</td>
<td align="center">L</td>
<td align="center">05-12-2008</td>
<td>SMP Negeri 10</td>
<td align="center">99.21</td>
</tr>
</table>
<br>
<table>
<tr align="center">
<td><button style="color:coral;height:45px;" onclick="change_bgcolor()">Change Background Color</button>
</td>
<td><button style="color:black;height:45px;" onclick="reset_bgcolor()">reset Background Color</button>
</td>
</tr>
</table>
<script>
function change_bgcolor() {
const bgcolor_jk = document.getElementsByClassName("judulkolom");
bgcolor_jk[0].style.backgroundColor = "coral";
const bgcolor_jd = document.getElementsByClassName("juduldaftar");
bgcolor_jd[0].style.color = "white";
document.body.style.backgroundColor = "coral";
}
function reset_bgcolor() {
const bgcolor_jk = document.getElementsByClassName("judulkolom");
bgcolor_jk[0].style.backgroundColor = "lightblue";
const bgcolor_jd = document.getElementsByClassName("juduldaftar");
bgcolor_jd[0].style.color = "black";
document.body.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>’
Setelah disalin dilanjutkan simpan dengan nama halaman4.html. kemudian klik file tersebut.
Perhatikan bagian bawah daftar nama siswa terdapat tombol atau button, silahkan klik.
Perubahan warna background tersebut dilakukan oleh program javascript. Setelah paham dengan program diatas, kalian bisa memodifikasi isi dari teks javascript ini sesuai dengan keinganan kalian.
Selanjutnya pada tahap III kita akan belajar pemrograman PHP.
.jpg)
.jpg)
.jpg)
.jpg)
