Javascript merupakan bahasa skrip atau pemrograman yang memungkinkan seorang pengembang menerapkan fitur kompleks pada halaman webnya. seperti menampilkan pembaharuan konten sesuai waktu yang ditentukan, peta lokasi yang interaktif, animasi dua dimensi atau grafik tiga dimensi, anda bisa mengganggap bahwa di dalam komponen tersebut terdapat javascript. Ini merupakan lapisan ketiga dari teknologi web standar, dua diantara javascript adalah html dan css.
 |
| https://developer-mozilla-org |
- HTML merupakan bahasa markup yang digunakan untuk menyusun dan memberi makna pada konten web, misalnya mendefinisikan paragraf, judul, dan tabel data, atau menyematkan gambar dan video di halaman.
- CSS yaitu bahasa aturan gaya yang digunakan untuk menerapkan gaya pada konten HTML pengembang, misalnya mengatur warna pada latar belakang dan font, dan menata konten kita dalam beberapa kolom.
- JavaScript merupakan bahasa script yang memungkinkan pengembang membuat konten yang dapat diperbaharui secara otomatis dan dinamis, mengontrol multimedia, menganimasikan gambar, dan hampir semua hal yang berkaitan.
Baca juga: 12 Keunggulan serta Fitur PHP 7 dari versi sebelumnya
Berikut merupakan contoh HTML, CSS, dan JavaScript
Untuk contoh akan dibuat tombol dengan menggunakan HTML sebagai berikut ini:
<button type="button">Button</button>
Dibawah ini adalah hasilnya:
Lalu untuk CSS sebagai campuran untuk mempercantik tombol tersebut bisa ditambahkan sebagai berikut:
button {
font-family: "Monospace", Monospace, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgb(200 200 0 / 60%);
background-color: rgb(0 217 217 / 60%);
color: rgb(100 0 0 / 100%);
box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
border-radius: 10px;
padding: 3px 10px;
cursor: pointer;
}
Untuk membuat dinamis pengembang perlu menambahkan beberapa JavaScript, untuk uji coba javascript berikut ini akan melakukan memperbaharui (update) pada nama button, untuk contoh sebagai berikut:
const button = document.querySelector("button");
button.addEventListener("click", updateName);
function updateName() {
const name = prompt("Enter a new name");
button.textContent = `Ikuti ${name}`;
}
0 Comments