HTTP: Protokol Transfer Hiperteks

HTTP adalah protokol lapisan aplikasi untuk mengirimkan dokumen

hipermedia, seperti HTML. Protokol ini dirancang untuk komunikasi
antara peramban web dan server web, tetapi juga dapat digunakan
untuk tujuan lain, seperti komunikasi antarmesin, akses terprogram ke
API, dan banyak lagi.
HTTP mengikuti model klien-server klasik , dengan klien membuka
koneksi untuk mengajukan permintaan, lalu menunggu hingga
menerima respons dari server. HTTP adalah protokol stateless , artinya
server tidak menyimpan data sesi apa pun di antara dua permintaan,
meskipun penambahan cookie kemudian menambahkan status ke
beberapa interaksi klien-server.
Referensi
Dokumentasi referensi HTTP berisi informasi terperinci tentang header,
metode permintaan, respons status, dan daftar spesifikasi serta
dokumen standar yang relevan.
Header HTTP
Header pesan digunakan untuk mengirim metadata tentang sumber
daya atau pesan HTTP, dan untuk menjelaskan perilaku klien atau
server.
Metode permintaan HTTP
Metode permintaan menunjukkan tujuan permintaan dan apa yang
diharapkan jika permintaan berhasil. Metode yang paling umum adalah
GET dan POST untuk mengambil dan mengirim data ke server, tetapi
ada metode lain yang memiliki tujuan berbeda.
Kode status respons HTTP
Kode status respons menunjukkan hasil dari permintaan HTTP tertentu.
Respons dikelompokkan dalam lima kelas: informasional, berhasil,
pengalihan, kesalahan klien, dan kesalahan server.
Sumber daya dan spesifikasi HTTP
Halaman ini mencantumkan sumber daya relevan tentang HTTP sejak
pertama kali ditetapkan pada awal tahun 1990-an.
Subbagian berikut juga penting:
Arahan CSP
Content -Security-Policy (CSP) memungkinkan administrator situs web
menentukan sumber daya mana yang boleh dimuat oleh agen pengguna
untuk halaman tertentu. Bagian ini mencantumkan direktif yang dapat
digunakan dalam header CSP, dengan halaman dokumentasi individual
yang menjelaskan cara kerja dan cara penggunaannya.
Arahan Kebijakan Izin
Permissions -Policy menyediakan mekanisme untuk mengizinkan atau
menolak penggunaan fitur browser dalam dokumen atau di dalam
elemen <iframe> mana pun dalam dokumen. Bagian ini mencantumkan
direktif yang dapat digunakan dalam header Permissions-Policy, dengan
halaman dokumentasi individual yang menjelaskan cara kerja dan cara
penggunaannya.
Panduan
HTTP adalah protokol yang dapat diperluas yang mengandalkan
konsep-konsep seperti sumber daya dan Uniform Resource Identifier
(URI), struktur pesan dasar, dan model komunikasi klien-server. Selain
konsep-konsep ini, berbagai ekstensi telah dikembangkan selama
bertahun-tahun yang menambahkan fungsionalitas dan memperbarui
semantik, termasuk metode dan header HTTP tambahan.
Panduan HTTP disusun secara berurutan, dari ikhtisar umum hingga
topik khusus yang berfokus pada kasus penggunaan. Pemula
disarankan untuk memulai dengan panduan dasar sebelum mempelajari
artikel yang lebih spesifik.
Ikhtisar HTTP
Fitur dasar HTTP, apa yang dapat dilakukannya, tujuan penggunaannya
dalam arsitektur web, dan posisinya dalam tumpukan protokol.
Evolusi HTTP
HTTP diciptakan pada awal 1990-an dan telah diperluas beberapa kali.
Artikel ini menelusuri sejarahnya dan menjelaskan HTTP/0.9, HTTP/1.0,
HTTP/1.1, HTTP/2, dan HTTP/3, serta hal-hal baru yang diperkenalkan
selama bertahun-tahun.
Sesi HTTP yang umum
Menjelaskan alur sesi HTTP, dari membuat koneksi, mengirim
permintaan, hingga menerima respons.
Pesan HTTP
Pesan HTTP yang dikirimkan sebagai permintaan dan respons memiliki
struktur yang telah ditentukan. Artikel ini menjelaskan struktur umum
ini, tujuannya, dan berbagai jenis pesan.
Tipe MIME
Sejak HTTP/1.0, berbagai jenis konten dapat ditransmisikan. Artikel ini
menjelaskan cara melakukannya menggunakan header Content-Type
dan standar MIME. Daftar singkat jenis konten umum yang digunakan
oleh pengembang web dapat ditemukan di Jenis MIME Umum .
Kompresi dalam HTTP
Peramban dan server memampatkan pesan mereka sebelum
mengirimnya melalui jaringan untuk mengurangi jumlah data yang
perlu dikirim, meningkatkan kecepatan transfer dan pemanfaatan
bandwidth.
Penembolokan HTTP
Caching merupakan mekanisme yang sangat penting untuk
menghadirkan pengalaman yang cepat di Web dan penggunaan sumber
daya yang efisien. Artikel ini menjelaskan berbagai metode caching dan
cara menggunakan header HTTP untuk mengendalikannya.
Otentikasi HTTP
Autentikasi adalah cara untuk memverifikasi identitas klien saat
mengajukan permintaan ke server. Autentikasi memastikan bahwa
hanya pengguna atau sistem yang berwenang yang dapat mengakses
sumber daya tertentu.
Menggunakan cookie HTTP
Meskipun HTTP adalah protokol stateless, server dapat mengirimkan
header Set-Cookie bersama responsnya. Klien kemudian
mengembalikan nilai cookie pada setiap permintaan berikutnya ke
server dalam bentuk header permintaan Cookie . Hal ini menambahkan
kemampuan untuk menyimpan dan bertukar sejumlah kecil data yang
secara efektif menambahkan status ke beberapa interaksi klien-server.
Pengalihan dalam HTTP
Pengalihan URL, juga dikenal sebagai penerusan URL, adalah teknik
untuk memberikan lebih dari satu alamat URL ke suatu halaman,
formulir, seluruh situs web, atau aplikasi web. HTTP memiliki jenis
respons khusus, yang disebut pengalihan HTTP, untuk operasi ini.
Permintaan bersyarat HTTP
Dalam permintaan bersyarat, hasil permintaan bergantung pada nilai
validator dalam permintaan tersebut. Metode ini banyak digunakan
dalam caching dan kasus-kasus seperti melanjutkan unduhan,
mencegah pembaruan hilang saat memodifikasi dokumen di server, dan
banyak lagi.
Permintaan rentang HTTP
Permintaan rentang meminta server untuk mengirimkan kembali
sebagian (atau sebagian) sumber daya tertentu ke klien, alih-alih
seluruh sumber daya. Permintaan rentang berguna ketika klien tahu
bahwa mereka hanya membutuhkan sebagian dari berkas besar, atau
ketika aplikasi memungkinkan pengguna untuk menjeda dan
melanjutkan unduhan.
Negosiasi konten
HTTP mendefinisikan serangkaian header pesan, dimulai dengan
Accept, sebagai cara bagi peramban untuk mengumumkan format,
bahasa, atau pengodean yang diinginkan. Artikel ini menjelaskan
bagaimana pengumuman ini terjadi, bagaimana server diharapkan
bereaksi, dan bagaimana server memilih respons yang paling tepat
untuk suatu permintaan.
Manajemen koneksi di HTTP/1.x
HTTP/1.1 adalah versi HTTP pertama yang mendukung koneksi
persisten dan pipelining. Artikel ini menjelaskan kedua konsep
tersebut, termasuk kelebihan dan kekurangannya.
Mekanisme peningkatan protokol
HTTP/1.1 menyediakan mekanisme untuk meningkatkan koneksi yang
sudah ada ke protokol lain menggunakan header Upgrade . Klien dapat
meningkatkan koneksi dari HTTP/1.1 ke HTTP/2, atau koneksi HTTP(S)
ke WebSocket ( ws / wss ).
Server proxy dan tunneling
Proksi dapat berada di komputer lokal pengguna, atau di mana pun
antara komputer pengguna dan server tujuan di internet. Halaman ini
menguraikan beberapa dasar tentang proksi dan memperkenalkan
beberapa opsi konfigurasi.
Petunjuk Klien HTTP
Petunjuk Klien adalah serangkaian header respons yang dapat
digunakan server untuk secara proaktif meminta informasi dari klien
tentang perangkat, jaringan, pengguna, dan preferensi khusus agen
pengguna. Server kemudian dapat menentukan sumber daya mana
yang akan dikirim, berdasarkan informasi yang dipilih klien untuk
diberikan.
Pencatatan Kesalahan Jaringan Eksperimental
Pencatatan Kesalahan Jaringan adalah mekanisme yang dapat
dikonfigurasi melalui header respons HTTP NEL. Header eksperimental
ini memungkinkan situs web dan aplikasi untuk memilih ikut serta
menerima laporan tentang pengambilan jaringan yang gagal (atau
bahkan berhasil) dari peramban pendukung.
Deteksi browser menggunakan agen pengguna
Penggunaan pengendus agen pengguna untuk mendeteksi peramban
jarang merupakan ide yang baik, tetapi ada beberapa kasus khusus
yang memerlukannya. Dokumen ini akan memandu Anda untuk
melakukannya dengan benar jika diperlukan, dengan penekanan pada
pertimbangan yang perlu dipertimbangkan sebelum memulai cara ini.
Keamanan dan privasi
Kebijakan Izin
Kebijakan Izin menyediakan mekanisme bagi pengembang web untuk
secara eksplisit menyatakan fungsionalitas apa yang dapat dan tidak
dapat digunakan di situs web. Anda menetapkan serangkaian
"kebijakan" yang membatasi API apa yang dapat diakses kode situs
atau mengubah perilaku default peramban untuk fitur-fitur tertentu.
Berbagi Sumber Daya Lintas Asal (CORS)
Permintaan HTTP lintas situs adalah permintaan sumber daya dari
domain yang berbeda dari domain sumber daya yang membuat
permintaan tersebut. Halaman web saat ini sangat umum memuat
sumber daya lintas situs, misalnya, halaman 'Domain A'
([Link] meminta gambar di 'Domain B'
([Link] melalui elemen img . CORS
memungkinkan pengembang web untuk mengontrol bagaimana situs
mereka bereaksi terhadap permintaan lintas situs.
Kebijakan Keamanan Konten (CSP)
CSP memungkinkan administrator situs web menggunakan header
respons Content-Security-Policy untuk mengontrol sumber daya mana
yang boleh dimuat klien untuk halaman tertentu. Panduan CSP
menjelaskan mekanisme Kebijakan Keamanan Konten secara
keseluruhan yang membantu mendeteksi dan memitigasi beberapa
jenis serangan, termasuk Cross-Site Scripting (XSS) dan serangan
injeksi data.
Kebijakan Sumber Daya Lintas Asal (CORP)
CORP memungkinkan situs web dan aplikasi memilih perlindungan
terhadap permintaan spesifik dari sumber lain (seperti yang
dikeluarkan dengan elemen seperti <script> dan <img> ) , untuk
mengurangi serangan saluran samping yang bersifat spekulatif.
Pedoman keamanan web Mozilla
Kumpulan kiat untuk membantu tim operasional dalam membuat
aplikasi web yang aman.
Sumber daya terkait
URI
Uniform Resource Identifier (URI) digunakan untuk mendeskripsikan
dan menemukan sumber daya di web dan merupakan komponen
penting dalam permintaan HTTP.
Mengonfigurasi server untuk media Ogg
Panduan ini membahas beberapa perubahan konfigurasi server yang
mungkin diperlukan agar server web Anda dapat menayangkan berkas
media Ogg dengan benar. Informasi ini juga dapat berguna jika Anda
menemukan jenis media lain yang belum dikonfigurasi untuk dikenali
oleh server Anda.
Alat & sumber daya
Alat dan sumber daya yang berguna untuk memahami dan men-debug
HTTP.
Alat Pengembang Firefox
Pemantau jaringan
Observatorium HTTP
Sebuah proyek yang dirancang untuk membantu pengembang,
administrator sistem, dan profesional keamanan mengonfigurasi situs
mereka dengan aman dan terlindungi.
RedBot
Alat untuk memeriksa header terkait cache Anda.
nghttp2
Implementasi klien, server, dan proxy HTTP/2 yang ditulis dalam bahasa
C dengan alat uji beban dan pembandingan serta enkoder dan dekoder
HPACK.
keriting
Alat baris perintah untuk mentransfer data yang ditentukan dengan
sintaks URL. Mendukung HTTP, HTTPS, WS, WSS, dan banyak protokol
lainnya.
Cara Kerja Peramban (2011)
Artikel yang sangat komprehensif tentang internal browser dan aliran
permintaan melalui protokol HTTP.
Bantu tingkatkan MDN
Apakah halaman ini membantu Anda?
YaTidak
Pelajari cara berkontribusi .
Halaman ini terakhir diubah pada 4 Juli 2025 oleh kontributor MDN .
Lihat halaman ini di GitHub • Laporkan masalah dengan konten ini

Iklan
Cetak biru Anda untuk internet yang lebih baik.
 MDN di Bluesky
 MDN di Mastodon
 MDN di X (sebelumnya Twitter)
 MDN di GitHub
 Umpan RSS Blog MDN
MDN
 Tentang
 Blog
 Karier
 Beriklan bersama kami
Mendukung
 Bantuan produk
 Laporkan masalah
Komunitas kami
 Komunitas MDN
 Forum MDN
 Obrolan MDN
Pengembang
 Teknologi Web
 Pelajari Pengembangan Web
 MDN Plus
 Blog Peretasan
 Pemberitahuan Privasi Situs Web
 Kue kering
 Legal Dasar-dasar gaya CSS

 Tinjauan Umum: Modul pembelajaran inti

 Berikutnya
 CSS (Cascading Style Sheets) digunakan untuk menata dan
menata halaman web — misalnya, mengubah font, warna ,
ukuran, dan spasi konten, membaginya menjadi beberapa kolom,
atau menambahkan animasi dan fitur dekoratif lainnya. Modul ini
menyediakan semua dasar CSS yang Anda perlukan saat ini,
termasuk sintaksis, fitur, dan teknik.
 Prasyarat
 Sebelum memulai modul ini, Anda harus memiliki lingkungan
kerja dasar (seperti yang dijelaskan dalam Menginstal perangkat
lunak dasar ), dan memahami cara membuat dan mengelola
berkas (seperti yang dijelaskan dalam Menangani berkas ). Anda
juga harus terbiasa dengan HTML (jika belum, silakan pelajari
modul Menyusun konten dengan HTML ).
 Catatan: Jika Anda bekerja di komputer, tablet, atau perangkat
lain tempat Anda tidak dapat membuat file, Anda dapat mencoba
menjalankan kode di editor daring seperti CodePen atau JSFiddle .
 Tutorial dan tantangan
 Apa itu CSS?
 CSS memungkinkan Anda membuat halaman web yang menarik,
tetapi bagaimana cara kerjanya? Artikel ini menjelaskan apa itu
CSS, seperti apa sintaksis dasarnya, dan bagaimana peramban
Anda menerapkan CSS ke HTML untuk menatanya.
 Memulai dengan CSS
 Dalam artikel ini, kita akan mengambil dokumen HTML sederhana
dan menerapkan CSS ke dalamnya, sambil mempelajari beberapa
detail praktis bahasa tersebut. Kita juga akan mengulas fitur
sintaksis CSS yang belum Anda pelajari.
Tantangan
 Menata halaman biografi
 Dalam tantangan ini Anda akan mendesain halaman bio
sederhana, menguji Anda pada beberapa keterampilan yang Anda
pelajari dalam beberapa pelajaran terakhir termasuk menulis
penyeleksi dan gaya teks.
 Pemilih CSS dasar
 Dalam artikel ini kami akan merangkum beberapa dasar pemilih,
termasuk pemilih tipe, kelas, dan ID dasar.
 Pemilih atribut
 Seperti yang Anda ketahui dari pembelajaran HTML Anda, elemen
dapat memiliki atribut yang memberikan detail lebih lanjut
tentang elemen yang ditandai. Dalam CSS, Anda dapat
menggunakan pemilih atribut untuk menargetkan elemen dengan
atribut tertentu. Pelajaran ini akan menunjukkan cara
menggunakan pemilih yang sangat berguna ini.
 Kelas semu dan elemen semu
 Rangkaian selektor berikutnya yang akan kita bahas disebut
pseudo-kelas dan pseudo-elemen. Ada banyak sekali jenisnya,
dan seringkali memiliki tujuan yang cukup spesifik. Setelah Anda
mengetahui cara menggunakannya, Anda dapat menelusuri
berbagai jenisnya untuk melihat apakah ada yang sesuai untuk
tugas yang ingin Anda capai.
 Kombinator
 Selektor terakhir yang akan kita bahas disebut kombinator.
Kombinator digunakan untuk menggabungkan selektor lain
sehingga kita dapat memilih elemen berdasarkan lokasinya di
 DOM relatif terhadap elemen lain (misalnya, anak atau saudara
kandung).
 Model kotak
 Segala sesuatu di CSS memiliki kotak di sekelilingnya, dan
memahami kotak-kotak ini adalah kunci untuk dapat membuat
tata letak yang lebih kompleks dengan CSS, atau untuk
menyelaraskan item dengan item lainnya. Dalam pelajaran ini,
kita akan membahas model Kotak CSS . Anda akan memahami
cara kerjanya dan terminologi yang terkait dengannya.
 Penanganan konflik
 Tujuan dari pelajaran ini adalah untuk mengembangkan
pemahaman Anda tentang beberapa konsep paling mendasar dari
CSS — cascade, spesifisitas, dan pewarisan — yang mengontrol
bagaimana CSS diterapkan ke HTML dan bagaimana konflik antara
deklarasi gaya diselesaikan.
 Nilai dan satuan
 Aturan CSS berisi deklarasi , yang terdiri dari properti dan nilai.
Setiap properti yang digunakan dalam CSS memiliki tipe nilai
yang menjelaskan jenis nilai yang diizinkan. Dalam pelajaran ini,
kita akan membahas beberapa tipe nilai yang paling sering
digunakan, apa itu, dan bagaimana cara kerjanya.
 Mengukur ukuran item dalam CSS
 Memahami seberapa besar fitur-fitur yang berbeda dalam desain
Anda sangatlah penting. Dalam pelajaran ini, kami akan
merangkum berbagai cara elemen mendapatkan ukuran melalui
CSS dan menjelaskan beberapa istilah terkait ukuran yang akan
membantu Anda di masa mendatang.
 Latar belakang dan batas
 Dalam pelajaran ini, kita akan membahas beberapa hal kreatif
yang bisa Anda lakukan dengan latar belakang dan border CSS.
Mulai dari menambahkan gradien, gambar latar belakang, hingga
sudut membulat, latar belakang dan border adalah solusi untuk
banyak pertanyaan seputar gaya di CSS.
 Konten yang melimpah
 Overflow terjadi ketika terdapat terlalu banyak konten yang tidak
muat di dalam kotak elemen. Dalam pelajaran ini, Anda akan
mempelajari cara mengelola overflow menggunakan CSS.
 Gambar, media, dan elemen bentuk
 Dalam pelajaran ini, kita akan membahas bagaimana elemen-
elemen khusus tertentu diperlakukan dalam CSS. Gambar, media
lain, dan elemen formulir berperilaku sedikit berbeda dari kotak
biasa dalam hal kemampuan Anda untuk menatanya dengan CSS.
 Memahami apa yang mungkin dan tidak mungkin dapat
mengurangi rasa frustrasi, dan pelajaran ini akan menyoroti
beberapa hal utama yang perlu Anda ketahui.
 Menata meja
 Menata tabel HTML bukanlah pekerjaan yang paling glamor di
dunia, tetapi terkadang kita semua harus melakukannya. Artikel
ini menjelaskan cara membuat tabel HTML terlihat bagus, dengan
beberapa teknik penataan tabel spesifik yang disorot.
 Men-debug CSS
 Artikel ini akan memberi Anda panduan tentang cara men-debug
masalah CSS, dan menunjukkan kepada Anda bagaimana DevTools
yang disertakan dalam semua peramban modern dapat membantu
Anda mengetahui apa yang terjadi.
Tantangan
 Tantangan: Pemahaman CSS Fundamental
 Tantangan ini menyediakan sejumlah latihan terkait yang harus
diselesaikan untuk membuat desain akhir — kartu nama/kartu
gamer/profil media sosial.
Tantangan
 Tantangan: Membuat kertas kop surat yang mewah
 Jika Anda ingin memberikan kesan yang baik, menulis surat di
atas kop surat yang bagus bisa menjadi awal yang sangat baik.
Dalam tantangan ini, Anda akan membuat templat daring untuk
mendapatkan kesan tersebut.
Tantangan
 Tantangan: Kotak yang terlihat keren
 Dalam tantangan ini, Anda akan mendapatkan lebih banyak
latihan dalam membuat kotak berpenampilan keren dengan
mencoba membuat kotak yang menarik perhatian.
 Tutorial tambahan
 Tutorial ini bukan bagian dari jalur pembelajaran, tetapi tetap
menarik — Anda harus menganggap ini sebagai sasaran
pengembangan, untuk dipelajari secara opsional ketika Anda
selesai dengan artikel Inti utama.
 Efek gaya lanjutan
 Artikel ini berfungsi sebagai kotak trik, memberikan pengenalan
terhadap beberapa fitur gaya lanjutan yang menarik seperti
bayangan kotak, mode campuran, dan filter.
 Lapisan kaskade
 Pelajaran ini bertujuan untuk memperkenalkan Anda pada lapisan
kaskade , fitur yang lebih canggih yang dibangun di atas konsep
dasar kaskade CSS dan spesifisitas CSS .
 Menangani arah teks yang berbeda
  Dalam beberapa tahun terakhir, CSS telah berevolusi untuk
mendukung berbagai arah konten dengan lebih baik, termasuk
konten dari kanan ke kiri tetapi juga dari atas ke bawah (seperti
bahasa Jepang) — berbagai arah ini disebut mode penulisan.
Seiring kemajuan Anda dalam belajar dan mulai bekerja dengan
tata letak, pemahaman tentang mode penulisan akan sangat
membantu Anda, oleh karena itu kami akan memperkenalkannya
dalam artikel ini.
 Mengorganisir CSS
 Saat Anda mulai mengerjakan stylesheet yang lebih besar dan
proyek-proyek besar, Anda akan menyadari bahwa mengelola
berkas CSS yang besar bisa jadi menantang. Dalam artikel ini, kita
akan membahas secara singkat beberapa praktik terbaik untuk
menulis CSS agar mudah dikelola, dan beberapa solusi yang akan
Anda temukan digunakan oleh orang lain untuk membantu
meningkatkan kemudahan pemeliharaan.
 Lihat juga


 Pedoman Partisipasi Masyarakat

Kunjungi Mozilla Corporation , induk nirlaba Mozilla Foundation .
Sebagian konten ini merupakan hak cipta ©1998–2025 dari masing-
masing kontributor [Link]. Konten tersedia di bawah lisensi
Creative Commons .

Skrip dinamis dengan JavaScript

 Tinjauan Umum: Modul pembelajaran inti

 Berikutnya

JavaScript adalah topik yang sangat luas, dengan begitu banyak fitur, gaya, dan teknik yang berbeda
untuk dipelajari, serta begitu banyak API dan alat yang dibangun di atasnya. Modul ini sebagian besar
berfokus pada hal-hal penting dari bahasa inti, ditambah beberapa topik utama terkait —
mempelajari topik-topik ini akan memberi Anda dasar yang kuat untuk belajar.

Prasyarat

Sebelum memulai modul ini, Anda tidak memerlukan pengetahuan JavaScript sebelumnya, tetapi
Anda harus telah menyelesaikan modul-modul sebelumnya dalam kursus ini. Anda setidaknya harus
mengetahui HTML dan dasar-dasar CSS .

Catatan: Jika Anda bekerja di komputer, tablet, atau perangkat lain tempat Anda tidak dapat
membuat file, Anda dapat mencoba menjalankan kode di editor daring seperti CodePen atau
JSFiddle .

Tutorial dan tantangan

Apa itu JavaScript?

Selamat datang di kursus JavaScript untuk pemula MDN! Di artikel pertama ini, kita akan membahas
JavaScript dari tingkat tinggi, menjawab pertanyaan seperti "apa itu?", dan "apa fungsinya?", serta
memastikan Anda memahami tujuan JavaScript.

Perkenalan pertama dengan JavaScript

Setelah Anda mempelajari teori JavaScript dan apa yang bisa Anda lakukan dengannya, kami akan
memberikan kursus singkat tentang fitur-fitur dasar JavaScript melalui tutorial yang sepenuhnya
praktis. Di sini, Anda akan membuat permainan "Tebak Angka" sederhana, langkah demi langkah.

Apa yang salah? Pemecahan Masalah JavaScript

Saat Anda membuat permainan "Tebak Angka" di artikel sebelumnya, Anda mungkin mendapati
bahwa permainan itu tidak berhasil. Jangan khawatir — artikel ini bertujuan untuk menyelamatkan
Anda dari masalah seperti itu dengan memberikan beberapa kiat sederhana tentang cara
menemukan dan memperbaiki kesalahan dalam program JavaScript.

Menyimpan informasi yang Anda butuhkan — Variabel

Setelah membaca beberapa artikel terakhir, Anda seharusnya sudah tahu apa itu JavaScript, apa
manfaatnya bagi Anda, bagaimana Anda menggunakannya bersama teknologi web lainnya, dan
seperti apa fitur-fitur utamanya secara umum. Dalam artikel ini, kita akan membahas dasar-dasarnya,
membahas cara bekerja dengan komponen dasar JavaScript — Variabel.

Matematika dasar dalam JavaScript — angka dan operator

Pada titik ini dalam kursus ini, kita membahas matematika dalam JavaScript — bagaimana kita dapat
menggabungkan operator dan fitur lainnya untuk berhasil memanipulasi angka demi melakukan
perintah kita.

Menangani teks — string dalam JavaScript

Selanjutnya, kita akan membahas string — inilah sebutan untuk potongan teks dalam pemrograman.
Dalam artikel ini, kita akan membahas semua hal umum yang perlu Anda ketahui tentang string saat
mempelajari JavaScript, seperti membuat string, melakukan escape tanda kutip pada string, dan
menggabungkannya.

Metode string yang berguna

Setelah kita membahas dasar-dasar string, mari kita naik ke tahap berikutnya dan mulai memikirkan
operasi bermanfaat apa yang dapat kita lakukan pada string dengan metode bawaan, seperti mencari
panjang string teks, menggabungkan dan memisahkan string, mengganti satu karakter pada string
dengan karakter lainnya, dan masih banyak lagi.

Susunan

Dalam pelajaran ini, kita akan membahas array — cara praktis untuk menyimpan daftar item data di
bawah satu nama variabel. Di sini, kita akan membahas manfaatnya, lalu mempelajari cara membuat
array, mengambil, menambah, dan menghapus item yang tersimpan di dalamnya, dan masih banyak
lagi.

Tantangan: Generator cerita konyol Tantangan

Dalam tantangan ini, Anda akan ditugaskan untuk menerapkan sebagian pengetahuan yang telah
Anda peroleh dari artikel-artikel modul ini untuk membuat aplikasi seru yang menghasilkan cerita-
cerita lucu secara acak. Selamat bersenang-senang!

Membuat keputusan dalam kode Anda — kondisional

Dalam bahasa pemrograman apa pun, kode perlu membuat keputusan dan menjalankan tindakan
yang sesuai, bergantung pada berbagai masukan. Misalnya, dalam sebuah permainan, jika jumlah
nyawa pemain adalah 0, maka permainan berakhir. Dalam aplikasi cuaca, jika dilihat di pagi hari,
tampilkan grafik matahari terbit; tampilkan bintang dan bulan jika malam hari. Dalam artikel ini, kita
akan membahas cara kerja pernyataan kondisional dalam JavaScript.

Kode perulangan

Bahasa pemrograman sangat berguna untuk menyelesaikan tugas-tugas berulang dengan cepat,
mulai dari beberapa perhitungan dasar hingga hampir semua situasi di mana Anda memiliki banyak
item pekerjaan serupa yang harus diselesaikan. Di sini, kita akan membahas struktur perulangan
yang tersedia dalam JavaScript untuk menangani kebutuhan tersebut.

Fungsi — blok kode yang dapat digunakan kembali

Konsep penting lainnya dalam pengkodean adalah fungsi , yang memungkinkan Anda menyimpan
sepotong kode yang melakukan satu tugas di dalam blok yang telah ditentukan, lalu memanggil kode
tersebut kapan pun Anda membutuhkannya dengan satu perintah singkat — alih-alih harus mengetik
kode yang sama berulang kali. Dalam artikel ini, kita akan membahas konsep-konsep dasar di balik
fungsi seperti sintaksis dasar, cara memanggil dan mendefinisikannya, cakupan, dan parameternya.

Bangun fungsi Anda sendiri

Setelah membahas sebagian besar teori penting di artikel sebelumnya, artikel ini memberikan
pengalaman praktis. Di sini, Anda akan mendapatkan beberapa latihan membangun fungsi kustom
Anda sendiri. Kami juga akan menjelaskan beberapa detail bermanfaat tentang penggunaan fungsi.

Fungsi mengembalikan nilai

Ada satu konsep penting terakhir tentang fungsi yang perlu kita bahas — mengembalikan nilai.
Beberapa fungsi tidak mengembalikan nilai yang signifikan, tetapi yang lainnya mengembalikannya.
Penting untuk memahami nilai-nilainya, cara menggunakannya dalam kode Anda, dan cara membuat
fungsi mengembalikan nilai yang berguna. Kita akan membahas semua ini di bawah.

Pengantar acara

Dalam artikel ini, kami membahas beberapa konsep penting seputar peristiwa, dan melihat dasar-
dasar cara kerjanya di browser.

Acara menggelegak

Artikel ini memperkenalkan konsep event bubbling, event capture, dan event delegate, yang
semuanya membahas tentang apa yang terjadi saat Anda menambahkan listener ke suatu elemen
yang memuat elemen lain, lalu suatu event terjadi pada elemen yang termuat di dalamnya.

Tantangan: Galeri gambar Tantangan

Setelah kita melihat blok-blok dasar pembangun JavaScript, kita akan menguji pengetahuan Anda
tentang perulangan, fungsi, kondisi, dan peristiwa dengan meminta Anda membangun item yang
cukup umum yang akan Anda lihat di banyak situs web — galeri gambar bertenaga JavaScript.

Dasar-dasar objek

Dalam artikel ini, kita akan membahas sintaksis objek JavaScript fundamental, dan meninjau kembali
beberapa fitur JavaScript yang telah kita lihat sebelumnya dalam kursus ini, menegaskan kembali
fakta bahwa banyak fitur yang telah Anda bahas merupakan objek.

Pengantar skrip DOM

Saat menulis halaman web dan aplikasi, salah satu hal paling umum yang ingin Anda lakukan adalah
mengubah struktur dokumen. Hal ini biasanya dilakukan dengan memanipulasi Model Objek
Dokumen (DOM) melalui serangkaian API bawaan browser untuk mengontrol HTML dan informasi
gaya. Dalam artikel ini, kami akan memperkenalkan Anda pada skrip DOM .

Membuat permintaan jaringan dengan JavaScript

Tugas lain yang sangat umum di situs web dan aplikasi modern adalah membuat permintaan jaringan
untuk mengambil item data individual dari server guna memperbarui bagian-bagian halaman web
tanpa harus memuat halaman baru secara keseluruhan. Detail yang tampaknya kecil ini ternyata
berdampak besar pada performa dan perilaku situs, jadi dalam artikel ini, kami akan menjelaskan
konsepnya dan membahas teknologi yang memungkinkannya.

Bekerja dengan JSON

Notasi Objek JavaScript (JSON) adalah format berbasis teks standar untuk merepresentasikan data
terstruktur berdasarkan sintaksis objek JavaScript. Format ini umumnya digunakan untuk
mentransmisikan data dalam aplikasi web (misalnya, mengirimkan beberapa data dari server ke klien
agar dapat ditampilkan di halaman web, atau sebaliknya). Anda akan sering menemukannya, jadi
dalam artikel ini, kami akan memberikan semua yang Anda butuhkan untuk bekerja dengan JSON
menggunakan JavaScript, termasuk mengurai JSON agar Anda dapat mengakses data di dalamnya,
dan membuat JSON.

Debugging dan penanganan kesalahan JavaScript

Dalam pelajaran ini, kita akan kembali ke topik debugging JavaScript (yang pertama kali kita bahas di
Apa yang salah? ). Di sini, kita akan mempelajari lebih dalam teknik pelacakan kesalahan, sekaligus
mempelajari cara membuat kode secara defensif dan menangani kesalahan dalam kode Anda, untuk
menghindari masalah sejak awal.

Uji keterampilan Anda: JavaScript

Halaman ini mencantumkan pengujian JavaScript yang dapat Anda coba sehingga Anda dapat
memverifikasi apakah Anda telah memahami konten dalam modul ini.

Lihat juga

Scrimba : Pelajari JavaScript Mitra pembelajaran MDN

Scrimba's Kursus Learn JavaScript mengajarkan Anda JavaScript dengan menyelesaikan lebih dari 140
tantangan coding interaktif, membangun proyek termasuk game, ekstensi browser, dan bahkan
aplikasi seluler. Scrimba menawarkan pelajaran interaktif yang menyenangkan yang diajarkan oleh
pengajar berpengalaman.

Pelajari JavaScript

Sumber daya yang luar biasa bagi calon pengembang web — Pelajari JavaScript dalam lingkungan
interaktif, dengan pelajaran singkat dan tes interaktif, yang dipandu oleh penilaian otomatis. 40
pelajaran pertama gratis, dan kursus lengkap tersedia dengan pembayaran kecil satu kali.

 Tinjauan Umum: Modul pembelajaran inti

Langsung ke konten

Riwayat obrolan

Kamu bilang:

[Link]

Dokumen

[Link]

Dokumen

buatkan promptnya versi panjang dgn struktur dari file saya . buatkan dalam 500 kata per promptnya
dan berikan tujuan dan websitenya dan video / bacaannya kamil dan [Link] pemula
menuju ahli,dalam tema bealajar informatika step by step dari http,css ,dll

ChatGPT mengatakan:

Memori tersimpan yang diperbarui

Bagus sekali , kamu sudah menyusun bahan mentah dan struktur lengkap ! Sekarang , saya akan
bantu buatkan versi panjang prompt pertama dalam tema belajar informatika langkah demi langkah
, dimulai dari HTTP dan struktur web dasar , sepanjang ±500 kata, dengan :

 🎯 Tujuan

 🌐 Sumber website resmi

 🎥 Video/ e-book referensi

 📘 Penjelasan ala mentor elite

 ✍️Struktur rapi & aplikatif ( untuk pemula → ahli )

📍 Hari 1 – Apa Itu HTTP & Kenapa Penting untuk Pengembang Web?

🎯 Tujuan Hari Ini:

Memahami konsep dasar HTTP ( HyperText Transfer Protocol) sebagai tulang punggung komunikasi
antar browser & server. Cocok untuk pemula yang baru mulai menyusun beban membuat website.
📖 Petunjuk:

Apa itu HTTP? Bagaimana cara kerjanya ? Kenapa wajib dikuasai sebelum belajar HTML, CSS, dan
JavaScript?

💬 Pembahasan Lengkap (Gaya Mentor):

Bayangkan kamu buka browser, lalu ketik : [Link] Lalu, tiba-tiba halaman ChatGPT
muncul . Bagaimana itu bisa terjadi ? Inilah peran HTTP — protokol yang memungkinkan browser
kamu bicara ke server OpenAI.

HTTP = bahasa komunikasi antara klien ( misal Chrome, Firefox) dan server ( tempat data disimpan ).
Saat kamu akses website:

1. Browser kirim permintaan (request) ke server,

2. Server jawab dengan balasan (response) berisi data: HTML, gambar , video, dsb .

Contoh :

DAPATKAN /[Link] HTTP/1.1

Host: [Link]

Server membalas :

HTTP/1.1 200 Oke

Tipe Konten: teks/html

<!DOCTYPE html>

...

📌 HTTP bukan kode program , tapi seperti surat resmi antara dua komputer . Kalau salah struktur ,
server bisa bilang : “404 Not Found” atau “500 Server Error.”

🧠 Kenapa HTTP penting banget ?

 🚪 Gerbang utama sebelum kamu bisa pakai HTML, CSS, JS.

 🧭 Dasar pemahaman API dan komunikasi frontend-backend.

 🛡 HTTP vs HTTPS = belajar keamanan (SSL/TLS).

 🔍 Debugging web butuh paham request-respon ( misal pakai Inspeksi → tab Jaringan di
browser).

🧪 Langkah Praktis Hari Ini:

1. Buka browser > klik kanan > Periksa > Jaringan.

 2. Kunjungi situs: [Link]

3. Lihat tab Jaringan: ada request “GET”, ada respon “200 OK”?

4. Klik salah satu : lihat header, isi HTML -nya , dsb .

🌐 Website Belajar :

 🔗 [Link] (MDN, dokumentasi paling komplit )

 🔗 [Link] (buat uji coba request-response)

🎥 Video & Bacaan :

 📘 HTTP & Komunikasi Web - GeeksForGeeks

 🎥 YouTube: “Cara Kerja Web dalam 5 Menit” – tautan

 📘 PDF Offline: Bab HTTP di ebook Pemrograman Web Dasar (Unimed)

🛠 Tools Tambahan (Offline-Friendly):

 Aplikasi “Postman” ( bisa coba permintaan GET/POST tanpa coding)

 Notepad++ atau Kode VSC untuk lihat source HTML lokal

 [Link] + server lokal (XAMPP, Python SimpleHTTPServer )

🙌 Catatan Mental & Emosional :

 Gak usah terburu-buru . Lihat alurnya dulu , baru paham struktur datanya .

 Anggap aja HTTP itu seperti " surat cinta dari browser ke server". Harus sopan , jelas , dan
tepat alamat .

 Semangat ! Pengembang web top dunia pun belajar dari request sederhana .

✅ Checklist Hari Ini:

 Saya bisa menjelaskan HTTP dengan kalimat saya sendiri .

 Saya berhasil lihat request di browser.

 Saya tahu apa itu “kode status 200”, “404”, dan “500”.

 Saya install dan coba pakai Postman.

Jika kamu setuju format seperti ini , saya siap lanjutkan membuat Hari 2 – HTML Dasar , Hari 3 – CSS
Sederhana , dan seterusnya .
Perlu saya lanjutkan ke prompt Hari 2? Atau ingin disiapkan langsung template 30 hari dulu ?

Kamu bilang:

buat dlm bentuk rinci serincinya di hari seterusnya

ChatGPT mengatakan:

Memori tersimpan yang diperbarui

Baik! Berikut adalah lanjutan rinci dari peta jalan belajar Informatika harian , dimulai dari Hari
2 hingga Hari 5 . Setiap hari terdiri dari :

 🎯 Tujuan

 📘 Prompt utama

 💬 Pembahasan ala mentor elite

 🔗 Website belajar

 🎥 Video / PDF

 🛠 Latihan & eksperimen

 🧠 Wawasan mental dan emosional

 ✅ Daftar periksa harian

📍 Hari 2 – Belajar Struktur Dasar HTML ( Website Pondasi )

🎯 Tujuan Hari Ini:

Mengenal dan memahami struktur dasar HTML sebagai bahasa utama untuk membangun tampilan
halaman web.

📘 Petunjuk:

Apa itu HTML? Apa saja elemen dasarnya ? Bagaimana cara membuat halaman pertama ?

💬 Pembahasan :

HTML = Bahasa Markup HyperTeks . Bukan bahasa pemrograman , tapi bahasa markah untuk
memberi Struktur pada dokumen web. Ibarat fondasi rumah , HTML membentuk kerangka semua
konten di internet.

Struktur paling dasar :

<!DOCTYPE html> <html> <head> <title>Halo Dunia</title> </head> <body> <h1>Selamat datang
</h1> <p>Ini halaman pertama saya !< /p> </body> </html>

Penjelasan :
  <!DOCTYPE html>: deklarasi jenis dokumen HTML5

 <html>: root dokumen

 <head>: metadata (judul, tautan CSS, dsb )

 <body>: isi utama yang tampil di layar

🔗 Website Belajar :

 [Link] – dokumentasi HTML resmi

 [Link] – tutorial HTML interaktif

🎥 Video & PDF:

 📘 Mudah Membuat Web untuk Pemula – STEKOM ( ebook )

 🎥 YouTube: “HTML dalam 10 Menit” – freeCodeCamp link

🛠 Langkah Praktis :

1. Buka Notepad atau Kode VSC

2. Ketik struktur HTML di atas

3. Simpan dengan nama [Link]

4. Buka lewat browser (klik dua kali)

5. Ubah tag <h1>, <p> sesukamu → segarkan browser

🧠 Sisi Mental:

 Jangan khawatir dengan tampilan yang masih polos.

 Fokus dulu ke struktur .

 Rasakan sensasi “ bikin sesuatu yang ditampilkan di web” pertama kalinya .

✅ Checklist Hari 2:

 Saya bisa menulis [Link] dari nol

 Saya paham fungsi <head>, <body>

 Saya bisa menjelaskan HTML ke orang lain

 Sudah coba buka file HTML di browser

📍 Hari 3 – Dasar CSS: Mempercantik Webmu

🎯 Tujuan Hari Ini:

Memahami cara kerja CSS untuk mengatur warna , bentuk , dan estetika halaman HTML.

📘 Petunjuk:

Apa itu CSS? Bagaimana mengubah tampilan teks , warna , dan layout?

💬 Pembahasan :

CSS = Lembar Gaya Bertingkat. Fungsinya : memberi gaya ke HTML. HTML = struktur , CSS =
penampilan .

Contoh :

<style> body { latar belakang - warna : #f2f2f2; warna : #333; font-family: Arial ; } h1 { warna : biru ; }
</style>

CSS bisa disisipkan :

 Internal : pakai tag <style> di <head>

 Inline : langsung ke elemen (<p style=" color:red ">)

 Eksternal : file .css terpisah , di-link dari HTML

🔗 Website Belajar :

 [Link]

 [Link] – tips lanjutan

🎥 Video & PDF:

 🎥 YouTube: “Kursus Singkat CSS” – Tautan Traversy Media

 📘 Ebook STEKOM: HTML, CSS, JavaScript

🛠 Langkah Praktis :

1. Tambahkan tag <style> pada file [Link]

2. Ganti warna latar belakang <body>

3. Coba ubah warna <h1>, jarak antar paragraf

4. Buat file [Link] → sambungkan ke HTML lewat <link>

🧠 Sisi Emosional :

 CSS itu seperti seni . Bereksperimenlah .

 Tidak harus indah , yang penting paham dulu logikanya .

✅ Checklist Hari 3:

 Saya tahu 3 cara menyisipkan CSS

 Saya bisa mengubah warna latar & teks

 Saya sudah membuat file [Link] eksternal

 Saya bereksperimen minimal 3 properti CSS

📍 Hari 4 – Pengenalan Tag Gambar, Link, dan Daftar HTML

🎯 Tujuan Hari Ini:

Mengenal elemen HTML yang membuat web jadi interaktif dan informatif : gambar , tautan , daftar.

📘 Petunjuk:

Bagaimana menambahkan gambar , hyperlink, dan daftar di HTML?

💬 Pembahasan :

Gambar:

< gambar src ="[Link]" alt=" Deskripsi gambar " width="200">

Link:

<a href ="[Link] Klik di sini </a>

Daftar:

 Daftar berurutan:

< ol > <li>Satu</li> <li>Doa</li> </ ol >

 Daftar tidak berurutan:

<ul> <li>Item A</li> <li>Item B</li> </ul>

🔗 Website Belajar :
  [Link]

🎥 Video:

 🎥 “Kursus Lengkap HTML untuk Pemula” FreeCodeCamp

🛠 Latihan:

1. Tambahkan 1 gambar di halaman kamu

2. Buat tautan ke Google

3. Tambahkan list to-do kamu hari ini

🧠 Catatan Mental:

 Kamu baru mulai , jadi nikmati eksplorasi .

 Jangan takut file rusak : bisa selalu buat ulang .

✅ Checklist Hari ke 4:

 Saya bisa memasukkan < img > & <a>

 Saya coba membuat <ul> dan < ol >

 Saya tahu cara menambahkan deskripsi gambar (alt)

 Saya tambahkan gambar ke proyek saya

📍 Hari 5 – Struktur Website Lengkap & Folder Proyek

🎯 Tujuan:

Membangun Struktur folder proyek web agar rapi : HTML, CSS, gambar , dan file lain tersusun .

📘 Petunjuk:

Bagaimana menyusun file HTML, CSS, gambar dalam folder proyek ?

💬 Pembahasan :

Struktur direkomendasikan :

/ proyek - webku
 ├ ── [Link]

├ ── / css

│ └── [Link]

├ ── / gambar

│ └── [Link]

└── / js

└── [Link] ( nanti )

[Link] :

<link rel ="stylesheet" href =" css /[Link]"> < img src =" img /[Link]">

🔗 Website Belajar :

 [Link]

🎥 Video:

 🎥 “Bangun Situs Web Pertama Anda” – Dev Ed YouTube

🛠 Langkah Praktis :

1. Buat folder: /project- webku

2. Pisahkan file HTML, CSS, gambar

3. Pastikan semua saling terhubung & bisa dibuka melalui browser

Mental :

 Kerapihan folder = kerapihan pikiran .

 Profesional web selalu pakai struktur folder.

✅ Checklist Hari ke 5:

 Saya buat folder css /, img /

 Saya berhasil hubungkan file eksternal CSS

 Saya bisa buka [Link] dan gambar tampil

 Saya mulai terbiasa dengan VSCode / Penjelajah Berkas

Jika cocok , saya bisa lanjutkan ke :

 📍 Hari 6 – Belajar JavaScript Dasar

 📍 Hari 7 – DOM dan interaktivitas

 📍 Hari 8 – Proyek mini pertama : Daftar Tugas

 📍 Hari 9 – Responsive Web & Media Query

 📍 Hari 10 – Pengantar Web Hosting

Mau saya lanjutkan ke Hari 6 – 10 dengan format yang sama ? Atau kamu mau PDF/Notion template
juga disiapkan ?

Kamu bilang:

teruskan

ChatGPT mengatakan:

Berikut adalah lanjutan Hari 6–10 dari roadmap “ Belajar Informatika Step-by-Step (HTML–JS–CSS)”
dengan gaya pelatihan elite, struktur rapi , dan pembahasan praktis . Masing-masing hari tetap terdiri
dari :

 🎯 Tujuan

 📘 Cepat

 💬 Pembahasan ala mentor

 🔗 Situs Web & 🎥 Video

 🛠 Latihan teknis

 🧠 Catatan mental

 ✅ Daftar Periksa

📍 Hari 6 – Pengantar JavaScript: Bahasa Logika Web

🎯 Tujuan:

Memahami apa itu JavaScript dan kenapa penting untuk membuat halaman web menjadi hidup dan
interaktif .

📘 Petunjuk:

Apa itu JavaScript? Bagaimana fungsinya berbeda dari HTML & CSS?

💬 Pembahasan :
HTML = CSS Struktur
= penampilan
JavaScript = otak & perilaku

Contoh :
Tanpa JS → tombol hanya gambar
Dengan JS → tombol bisa diklik , berpindah halaman , munculkan alert

Contoh kode :

<script> alert( "Halo Dunia!"); </script>

Atau versi lebih baik :

<button onclick=" sapa ( )"> Klik Aku</button> <script> function sapa ( ) { alert ("Selamat datang di
website saya !") ; } </skrip>

🔗 Website Belajar :

 [Link]

 [Link]

🎥 Video:

 🎥 YouTube: “JS Crash Course” oleh Traversy Media → tautan

🛠 Praktik Hari Ini:

1. Tambahkan <script> pada file HTML-mu

2. Buat fungsi alert( ), [Link]( ), dan prompt( )

3. Coba interaksi tombol dengan onclick

🧠 Catatan Emosional :

 JavaScript tampak “ serius ”, tapi nikmati dulu yang sederhana

 Jangan hafalkan → pahami konsep pelan-pelan

✅ Daftar Periksa:

 Bisa tampilkan peringatan dari HTML

 Tahu fungsi [Link]( )

 Sudah buat tombol interaktif

 Paham perbedaan HTML–CSS–JS

📍 Hari 7 – Variabel & Tipe Data di JavaScript

🎯 Tujuan:

Mengenal variabel , cara menyimpan data, dan tipe data dasar dalam JS.

📘 Petunjuk:

Apa itu variabel dalam JS? Apa saja tipe data yang umum ?

💬 Pembahasan :

Variabel = wadah penyimpanan data .

Digunakan untuk menyimpan teks , angka , logika , dsb .

misalkan nama = "Jaka"; misalkan umur = 17; biarkan status = benar;

Tipe Data Umum :

 Tali → "Halo"

 Nomor → 123, 3.14

 Boolean → benar, salah

 Null / Undefined → kosong

 Array, Object ( nanti )

🔗 Situs web:

 [Link]

🎥 Video:

 🎥 “Tipe Data JS” – Ninja Internet → tautan

🛠 Latihan:

1. Buat 3 variabel : nama, umur , status

2. Cetak ke konsol

3. Ganti nilai variabel lalu cetak lagi

Mental :

 Cukup tahu dasar : kamu tidak harus jadi matematikawan

 Ulangi berkali -kali agar terbiasa menulis dan membaca kode

✅ Daftar Periksa:

 Saya bisa mendeklarasikan let, const

 Saya paham string vs number

 Saya bisa pakai [Link]( ) untuk cek nilai

 Sudah buat minimal 3 variabel sendiri

📍 Hari 8 – If/Else dan Logika Interaktif

🎯 Tujuan:

Mampu menambahkan logika percabangan ke program agar responsif terhadap kondisi tertentu .

📘 Petunjuk:

Bagaimana membuat program dengan kondisi seperti : “ kalau umur ≥ 17, boleh SIM; kalau tidak ,
belum boleh ”?

💬 Pembahasan :

Struktur dasar :

let umur = prompt( "Masukkan umur kamu :"); if ( umur >= 17) { alert (" Boleh buat SIM") ; } else
{ alert ("Belum boleh ") ; }

Logika ini sangat umum dalam pemrograman :

"Kalau A → lakukan ini , selain itu → lakukan itu "

🔗 Situs web:

 [Link]

🎥 Video:

 🎥 “Kondisi JavaScript & Alur Kontrol” – Tautan Sederhana Pengembangan Web

🛠 Latihan:

1. Buat program umur & izin SIM

2. Coba tambahkan kondisi jika tidak

3. Ubah menjadi pertanyaan kuis ( nilai A/B/C)

Mental :

 Ini adalah “ otak logika ” program. Seperti kamu memilih keputusan sehari-hari .

✅ Daftar Periksa:

 Saya bisa tulis if/else sendiri

 Saya coba dengan prompt( ) input dari pengguna

 Saya ubah logika untuk keperluan pribadi

 Saya paham bagaimana kode cabang bekerja

📍 Hari 9 – Loop: Mengulang Hal yang Sama

🎯 Tujuan:

Mengenal perulangan (loop) untuk efisiensi program.

📘 Petunjuk:

Bagaimana cara mencetak angka 1–10 tanpa menulis 10 baris kode ?

💬 Pembahasan :

Loop = perintah yang diulang

for (let i = 1; i <= 10; i ++) { [Link] ("Angka ke -" + i ) ; }

Tipe loop:

 untuk

 ketika

 lakukan...sementara

Loop sangat berguna saat ingin memproses daftar, tabel , data yang banyak .
🔗 Situs web:

 [Link]

🎥 Video:

 🎥 “Penjelasan Loop JavaScript” – Tautan Net Ninja

🛠 Praktik :

1. Cetak angka 1–10

2. Tambahkan if di dalam loop: tampilkan hanya genap

3. Ubah jadi hitung mundur dari 10 menjadi 1

🧠 Catatan Mental:

 Loop seperti “robot pengulang ”

 Fokus pada logika awal → kondisi akhir → langkah perubahan

✅ Daftar Periksa:

 Saya bisa membuat loop untuk

 Saya bisa menggabungkan if + loop

 Saya tahu kapan loop berhenti

 Saya sudah eksperimen dengan angka & teks

📍 Hari 10 – Proyek Mini: Kalkulator Sederhana

🎯 Tujuan:

Menggabungkan HTML, CSS, dan JS dalam proyek mini pertama : kalkulator 2 angka .

📘 Petunjuk:

Bagaimana cara membuat kalkulator penjumlahan dengan tampilan menarik dan interaktif ?

💬 Pembahasan :

Struktur file:
<input type="number" id="angka1"> <input type="number" id="angka2"> <button onclick=" jumlah
()"> Hitung </button> <p id=" hasil "></p> <script> function jumlah ( ) { let a = parseFloat
( [Link] ("angka1").value); let b = parseFloat ( [Link]
("angka2").value); [Link] (" hasil " ). innerText = "Hasil: " + (a + b) ; } </script>

🔗 Website Referensi :

 [Link]

🎥 Video:

 🎥 “Buat Kalkulator dengan HTML + JS” – CodingNepal link

🛠 Latihan:

1. Buat [Link], ketik kode kalkulator

2. Tambahkan style CSS agar rapi

3. Coba tambahkan fitur pengurangan & pembagian

Mental :

 Ini momen penting : kamu baru menggabungkan 3 teknologi !

 Bangga boleh , tapi terus eksplorasi & perbaikan

✅ Daftar Periksa:

 Saya buat kalkulator penjumlahan

 Saya paham dapatkanElementById dan innerText

 Saya menggabungkan HTML–CSS–JS dalam 1 halaman

 Saya mendokumentasikan proses belajar saya

Jika kamu setuju , saya akan lanjutkan Hari 11–15:

 🟢 Hari 11 – Struktur Data (Array, Daftar)

 🟢 Hari 12 – Kamus dan Objek

 🟢 Hari ke-13 – Fungsi & Kegunaan Ulang

 🟢 Hari 14 – DOM & Manipulasi Elemen

 🟢 Hari 15 – Formulir Validasi & Input Pengguna

Mau saya teruskan langsung atau kamu ingin saya bantu buatkan versi PDF -nya juga sekalian ?

ChatGPT dapat membuat kesalahan. Periksa informasi penting. Lihat Preferensi Kuki.