HTML - JavaScript: Panduan untuk Pemula

Hai teman-teman yang sedang belajar pemrograman web! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia HTML dan JavaScript. Sebagai seseorang yang telah mengajar pemrograman lebih dari satu dekade, saya bisa menjamin bahwa Anda akan mendapat kesenangan. Ayo masuk dan buka rahasia pemrograman web bersama!

HTML - Javascript

Apa itu JavaScript?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu JavaScript. JavaScript adalah bahasa pemrograman yang kuat yang memberikan kehidupan kepada 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 dekorasi. JavaScript? Well, itu adalah listrik, pipa, dan semua perangkat menarik yang membuat rumah itu berfungsi dan interaktif!

Sintaks

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

Variabel

Variabel adalah seperti wadah yang menyimpan informasi. Berikut adalah cara Anda mendeklarasikannya:

let myName = "Alice";
const myAge = 25;
var myHobby = "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 program Anda:

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Bob"); // Output: Hello, Bob!

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

Statement Kondisional

Ini membantu kode Anda membuat keputusan:

let temperature = 22;

if (temperature > 30) {
console.log("It's hot outside!");
} else if (temperature > 20) {
console.log("It's a nice day!");
} else {
console.log("It's a bit chilly.");
}

Kode ini memeriksa suhu dan memberikan pesan yang berbeda tergantung seberapa panasnya. Itu seperti mengajarkan komputer Anda 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 sebuah instruksi cepat:

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

Ketika Anda mengklik tombol ini, ia akan menampilkan pop-up yang mengatakan "Hello!". Itu cepat dan mudah, tapi tidak baik untuk skrip yang besar.

2. JavaScript Internal

Ini seperti memberikan halaman HTML Anda otak sendiri:

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

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

3. JavaScript Eksternal

Ini seperti memberikan halaman web Anda otak terpisah yang dapat ia rujuk:

<!DOCTYPE html>
<html>
<head>
<title>Halaman Saya</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="greet()">Ucapkan Halo</button>
</body>
</html>

Dan dalam myscript.js:

function greet() {
alert("Hello from an external file!");
}

Ini menjaga HTML Anda bersih dan JavaScript Anda terorganisir. Itu seperti menyimpan alat Anda di dalam kastet instead of scattered around the house.

Element

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

<script>
document.write("Hello, JavaScript is working!");
</script>
<noscript>
<p>Oh no! Browser Anda tidak mendukung JavaScript atau ia 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 Anda akan sering gunakan:

Metode	Deskripsi	Contoh
`alert()`	Menampilkan pesan pop-up	`alert("Hello, World!");`
`console.log()`	Mencetak ke konsol browser	`console.log("This is a log");`
`document.getElementById()`	Menemukan elemen HTML berdasarkan ID-nya	`let elem = document.getElementById("myDiv");`
`addEventListener()`	Menambahkan pengurus acara ke elemen	`button.addEventListener("click", function() { alert("Clicked!"); });`
`setTimeout()`	Menjalankan fungsi setelah jeda	`setTimeout(function() { console.log("Delayed message"); }, 2000);`

Metode ini adalah seperti pisau Swiss Army knife JavaScript - multifungsi dan sangat berguna!

Kesimpulan

Selamat! Anda 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, Anda akan segera bisa mengendarai dengan lancar.

Jangan takut untuk mencoba, membuat kesalahan, dan belajar dari kesalahan Anda. Itu adalah bagaimana semua pemrogramer besar dimulai! Terus coding, terus belajar, dan terutama, bersenang-senang dengan itu. Sebelum Anda tahu, Anda akan membuat website dan aplikasi web yang menakjubkan.

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

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Menambahkan Favicon

Tutorial Selanjutnya:

HTML - Tata Letak