BELAJAR CODING DARI 0
coding adalah menulis bahasa pemrogaman, banyak sekali bahasa
pemrogaman, seperti js, python, java, c++ dll.
di belajar ini akan memakai java script, java script adalah bahasa high level
yang object oriented dengan type sistem dinamis uang memanfaatkan
garbage colecction untuk memory management.
awalnya java script itu dibuat untuk membuat website, website pada
dasarnya ada 3 hal, yaitu HTML, CSS, JAVASCRIPT.
penjelasan fungsi 3 dasar html, css, dan javascript:
html: html adalah kontek website seperti judul, text, ikon tombol, apapun
yang mengisi atau konten website.
Contoh html:
Css: css adalah untuk styling jadi fungsinya untuk mengatur saya mau
judulnya ditengah, text nya mau merah, tombolnya sebesar apa.
Contoh:
Javascript: java sctript untuk mempengaruhi dan merespons satu sama lain ,
jadi nanti saya mau Ketika tombolnya ditekan akan muncul apa setelah
menekan ikon tombol.
Menjadi:
Front-end vs Back-end (Analogi Bengkel Mobil)
Di video dijelaskan perbedaan besar antara dua jenis pekerjaan programmer
ini menggunakan analogi Mobil:
Front-end (Tukang Cat & Body):
o Tugasnya: Mengurusi tampilan luar mobil agar terlihat keren,
warnanya mengkilap, dan kursinya nyaman saat diduduki.
o Senjatanya: Harus jago HTML, CSS, dan JavaScript.
Back-end (Montir Mesin):
o Tugasnya: Mengurusi mesin di dalam kap mobil. Penumpang
tidak melihat mesinnya, tapi kalau mesinnya rusak, mobil tidak
bisa jalan. Dia mengurusi data dan logika.
o Senjatanya: Harus menguasai bahasa seperti Python, PHP,
atau SQL.
Kenapa JavaScript Sangat Hebat? ([Link])
Dulu, JavaScript itu seperti Ikan yang cuma bisa hidup di dalam Akuarium
(Web Browser). Dia tidak bisa dipakai untuk mengurusi mesin mobil (Back-
end).
Tapi pada tahun 2009, muncullah [Link].
[Link] itu seperti memberi ikan tersebut kaki dan paru-paru.
Sekarang si ikan (JavaScript) bisa keluar dari akuarium dan ikut
mengurusi mesin di Back-end.
Hasilnya, seorang Front-end developer bisa jadi Full Stack Developer
(bisa depan dan belakang) hanya dengan belajar satu bahasa saja,
yaitu JavaScript.
Satu Bahasa untuk Semuanya
Dengan belajar JavaScript, kamu tidak hanya bisa bikin website, tapi juga
bisa bikin:
Aplikasi HP (Mobile Apps): Pakai teknologi bernama React Native.
Aplikasi Komputer (Desktop Apps): Pakai teknologi bernama
Electron.
Jadi, kesimpulannya: semua orang bisa belajar, dan JavaScript adalah pintu
masuk yang sangat sakti karena bisa dipakai untuk membuat apa saja!
SIAPKAN PC KAMU, GAS PRAKTEK LANGSUNG!
RULES! JANGAN COPY PASTE, JANGAN PAKAI AI ANJG!
1. download node js di browser [Link] — Download [Link]®
2. download visual studio code Download Visual Studio Code - Mac, Linux,
Windows
Okay, buka visual studio code nya, lalu tekan file, open folder, taruh di
document, namakan tutorial, buka folder baru itu, setelah itu select folder.
Setelah itu bikin file atau new file di folder tutorial, namakan [Link]
( apapun file js pasti akhirnya .js)
Okay kamu sudah berhasil menginstall node js, visual studio code, dan
membuat file javascript.
STRING
Di dalam bahasa pemrograman JavaScript, segala bentuk informasi
dikelompokkan ke dalam kategori yang disebut Data Types.
Analogi: Bayangkan dunia Avatar: The Last Airbender. Segala sesuatu di
dunia itu dikendalikan oleh elemen dasar (Air, Tanah, Api, Udara). Begitu juga
di JavaScript, semua data harus memiliki "elemen" atau tipe tertentu.
Ada 7 tipe data fundamental di JavaScript:
1. String (Teks) - Fokus utama materi ini
2. Number (Angka)
3. Boolean (Benar/Salah)
4. Object
5. Undefined
6. BigInt
7. Symbol
2. Mengenal String
Definisi: String adalah tipe data yang digunakan untuk merepresentasikan
teks atau karakter.
Ukuran: Bisa sekecil satu huruf, sepanjang satu paragraf, atau bahkan
kosong (empty string).
Cara Penulisan: Harus diapit oleh tanda kutip. Kamu bisa
menggunakan:
o Tanda kutip satu ('...')
o Tanda kutip dua ("...")
Aturan Semicolon (Titik Koma): Di JavaScript, tanda ; berfungsi
seperti tanda titik dalam kalimat. Ia digunakan untuk mengakhiri
sebuah pernyataan (statement).
3. Menampilkan Data ke Terminal
Untuk melihat hasil dari kode yang kita tulis di terminal, kita menggunakan
fungsi: [Link]()
Contoh Kode:
[Link]("Nama Saya Budi");
Keterangan: Kode di atas akan memunculkan tulisan Nama Saya Budi di
layar terminal.
4. Cara Menjalankan Aplikasi ([Link])
Untuk menjalankan file JavaScript (misal bernama [Link]) melalui terminal di
Visual Studio Code:
1. Buka Terminal (Menu View > Terminal).
2. Ketik perintah: node [Link]
3. Tekan Enter.
5. Ringkasan Praktik (Latihan)
Berikut adalah langkah-langkah yang dilakukan dalam video untuk membuat
aplikasi JavaScript pertama:
1. Menulis String: Tuliskan namamu di dalam tanda kutip.
o Contoh: "Agung Hapsah";
2. Mencetak ke Terminal: Bungkus string tersebut dengan perintah
[Link].
o Contoh: [Link]("Agung Hapsah");
3. Eksekusi: Simpan file dan jalankan dengan perintah node
[nama_file].js.
VARIABLE
1. Apa itu Variabel?
Definisi: Variabel adalah sebuah wadah atau nama yang digunakan untuk
menyimpan data. Dengan variabel, kita bisa memberi "nama" pada informasi
agar mudah dipanggil kembali.
Analogi: Bayangkan sebuah kotak penyimpanan.
Isi di dalam kotak adalah Datanya (misalnya teks "Agung Hapsah").
Nama yang tertulis di luar kotak adalah Variabelnya (misalnya
"NamaSiswa").
Jadi, daripada kita membawa-bawa isinya yang berat, kita cukup
memanggil nama kotaknya saja.
2. Cara Membuat Variabel (Deklarasi)
Di JavaScript, ada tiga kata kunci untuk membuat variabel: const, let, dan
var. Video ini berfokus pada const (singkatan dari constant).
Struktur Penulisan: const [nama_variabel] = [nilai_data];
Contoh:
const myName = "Agung Hapsah";
const: Kata kunci untuk membuat variabel.
myName: Nama variabelnya (bebas, tapi disarankan deskriptif).
=: Operator penugasan (memasukkan data ke variabel).
"Agung Hapsah": Nilai atau data yang disimpan.
3. Kenapa Harus Pakai Variabel? (Manfaat)
A. Menghindari Repetisi (Pengulangan)
Jika kamu perlu menampilkan nama yang sama 100 kali, kamu tidak perlu
mengetik nama tersebut 100 kali. Cukup panggil nama variabelnya.
Keuntungan: Jika ada perubahan nama (misal dari "Agung Hapsah" jadi
"Agung Basah"), kamu hanya perlu menggantinya satu kali di
variabelnya saja, bukan di semua baris kode. Ini mencegah kesalahan
ketik (typo).
B. Meningkatkan Keterbacaan (Readability)
Variabel memberi konteks pada data.
Tanpa variabel: [Link]("Ikan"); (Ikan ini maksudnya apa? Ikan
peliharaan? Makanan?)
Dengan variabel: const favoriteFood = "Ikan"; (Sekarang kita tahu
bahwa "Ikan" adalah makanan favorit).
4. Cara Menggunakan Variabel
Setelah variabel dibuat, kita bisa memasukkannya ke dalam [Link]()
tanpa tanda kutip.
Contoh Kode:
const myName = "Budi Hartono";
// Memanggil variabel
[Link](myName);
[Link](myName);
Hasil di terminal: Akan muncul "Budi Hartono" sebanyak dua kali.
5. Tantangan (Challenge)
Latihan yang diberikan di video:
1. Buat variabel dengan nama myName.
2. Isi nilainya dengan namamu sendiri.
3. Tampilkan (log) variabel tersebut ke terminal.
Solusi:
const myName = "Nama Kamu";
[Link](myName);
Pesan Kunci: "Variabel membantu kita mengelola data dengan lebih rapi dan
menjelaskan apa maksud dari data tersebut."