Panduan Pemula HTML - JavaScript

Hai sana, para pengembang web yang sedang mencari ilmu! Saya sangat gembira menjadi panduanmu dalam perjalanan yang menarik ke dunia HTML dan JavaScript. Sebagai seseorang yang telah mengajar pemrograman selama lebih dari satu dekade, saya bisa menjamin bahwa kamu akan mendapatkan kesenangan yang besar. Ayo masuk dan membongkar misteri pemrograman web bersama!

HTML - Javascript

Apa Itu JavaScript?

Sebelum kita masuk ke hal-hal yang teknis, mari kita memahami apa itu JavaScript. JavaScript adalah bahasa pemrograman yang kuat yang memberikan kehidupan pada halaman web. Itu seperti tongkat sihir dari internet, membuat halaman HTML statis bergerak, berinteraksi, dan merespon tindakan pengguna.

Bayangkan sebuah website seperti sebuah rumah. HTML adalah struktur - tembok, atap, dan fondasi. CSS adalah cat dan hiasan. JavaScript? Well, itu adalah listrik, pipa, dan semua perangkat menarik yang membuat rumah tersebut berfungsi dan interaktif!

Sintaks

JavaScript memiliki aturan sendiri, sama seperti bahasa lainnya. Mari kitauraikan dasarnya:

Variabel

Variabel adalah seperti wadah yang menampung informasi. Berikut adalah cara mendeklarasikannya:

let namaSaya = "Alice";
const umurSaya = 25;
var hobiSaya = "coding";

Dalam contoh ini:

let digunakan untuk variabel yang dapat berubah.
const untuk variabel yang tidak akan berubah.
var adalah cara yang lebih tua untuk mendeklarasikan variabel, tapi let dan const lebih disukai sekarang.

Fungsi

Fungsi adalah blok kode yang dapat digunakan kembali. Itu seperti resep untuk programmu:

function salam(name) {
console.log("Hai, " + name + "!");
}

salam("Bob"); // Keluaran: Hai, Bob!

Fungsi ini mengambil name sebagai masukan dan mencetak pesan salam. Itu seperti robot yang ramah yang menyapa siapa pun yang kamu perkenalkan kepadanya!

Statement Kondisional

Ini membantu kodemu membuat keputusan:

let suhu = 22;

if (suhu > 30) {
console.log(" Udara panas di luar!");
} else if (suhu > 20) {
console.log("Hari ini bagus!");
} else {
console.log("Sedikit dingin.");
}

Kode ini memeriksa suhu dan memberikan pesan yang berbeda tergantung seberapa panasnya. Itu seperti mengajarkan komputermu menjadi komentator cuaca!

Contoh JavaScript dalam HTML

Sekarang, mari kita lihat bagaimana kita dapat menggunakan JavaScript dalam halaman HTML kita. Ada tiga cara utama untuk melakukan ini:

1. JavaScript Inline

Ini seperti berbisik perintah cepat:

<button onclick="alert('Hai!')">Klik saya</button>

Ketika kamu mengklik tombol ini, dia akan menampilkan pop-up yang mengatakan "Hai!". Itu cepat dan mudah, tapi tidak cocok untuk skrip yang besar.

2. JavaScript Internal

Ini seperti memberikan halaman HTMLmu otak sendiri:

<!DOCTYPE html>
<html>
<head>
<title>Halaman Saya</title>
<script>
function ubahWarna() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<button onclick="ubahWarna()">Ubah Warna</button>
</body>
</html>

Skrip ini mengubah latar belakang halaman menjadi biru muda saat kamu mengklik tombol. Itu seperti memberikan halamanmu kemampuan kameleon!

3. JavaScript Eksternal

Ini seperti memberikan halamanmu otak terpisah yang dia bisa merujuk:

<!DOCTYPE html>
<html>
<head>
<title>Halaman Saya</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="salam()">Ucap Hai</button>
</body>
</html>

Dan dalam myscript.js:

function salam() {
alert("Hai dari file eksternal!");
}

Ini menjaga HTMLmu bersih dan JavaScriptmu terorganisir. Itu seperti menyimpan alatmu di dalam kotak alat instead of scattered around the house.

Element HTML

kadang-kadang, JavaScript mungkin tidak tersedia atau dinonaktifkan di browser pengguna. Itu saat elemen <noscript> berguna:

<script>
document.write("Hai, JavaScript sedang bekerja!");
</script>
<noscript>
<p>Oh no! Browsermu tidak mendukung JavaScript atau dinonaktifkan.</p>
</noscript>

Ini seperti memiliki rencana cadangan. Jika JavaScript bekerja, pengguna melihat pesan pertama. Jika tidak, mereka melihat yang kedua. Selalu baik untuk siap!

Tabel Metode JavaScript

Mari kita lihat beberapa metode JavaScript umum yang kamu akan sering gunakan:

Metode	Deskripsi	Contoh
`alert()`	Menampilkan pesan pop-up	`alert("Hai, Dunia!");`
`console.log()`	Mencetak ke konsol browser	`console.log("Ini adalah log");`
`document.getElementById()`	Mencari elemen HTML berdasarkan ID	`let elem = document.getElementById("myDiv");`
`addEventListener()`	Menambahkan pengобрабтan acara ke elemen	`button.addEventListener("click", function() { alert("Ditekan!"); });`
`setTimeout()`	Menjalankan fungsi setelah penundaan	`setTimeout(function() { console.log("Pesan tertunda"); }, 2000);`

Metode ini adalah seperti pisau Switzerland JavaScript - multifungsi dan sangat berguna!

Kesimpulan

Selamat! Kamu telah mengambil langkah pertama ke dunia HTML dan JavaScript. Ingat, belajar pemrograman adalah seperti belajar menunggang sepeda - mungkin tampak wobbly pada awalnya, tapi dengan latihan, kamu akan segera menembak melaju.

Jangan takut untuk mencoba, membuat kesalahan, dan belajar dari mereka. Itu adalah bagaimana semua pemrogramer hebat memulai! Terus coding, terus belajar, dan terutama, bersenang-senang dengannya. Sebelum kamu tahu, kamu akan membuat website dan aplikasi web yang menakjubkan.

Happy coding, para ahli web masa depan! ??‍??‍?

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Menambah Favicon

Tutorial Seterusnya:

HTML - Susun Atur