Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Kamu tertarik untuk belajar JavaScript, ya? Kita berada di halaman yang tepat! Di artikel ini, kita akan ngobrol tentang apa sih JavaScript itu, kenapa kita harus belajar JavaScript, asal-usulnya, dan tentunya, bagaimana cara terbaik untuk mulai belajar JavaScript.
Javascript adalah salah satu bahasa pemrograman yang sering digunakan untuk membuat website jadi lebih ‘hidup’. Misalnya, kamu pernah lihat gambar yang bisa digeser-geser di website, atau form yang langsung beri tahu kalau kamu lupa isi bagian tertentu? Nah, itu semua berkat JavaScript, loh!
Hasil Survey StackOverflow 2024, menyatakan kalau Javascript masih menjadi bahasa program terpopuler
function sapaPengguna(nama) {
alert("Halo, " + nama);
}
sapaPengguna("Siapa Namamu?");Intinya, JavaScript bisa bikin website kamu jadi lebih interaktif. Dengan JavaScript, kamu bisa buat berbagai fitur keren, seperti validasi form, slideshow, fitur autocomplete, dan banyak lagi.
Website adalah media yang sangat penting di era digital ini. Dengan belajar JavaScript, kamu bisa membuat website yang lebih interaktif dan menarik. Selain itu, JavaScript juga bisa membantumu untuk membuat aplikasi web, mobile, dan desktop.
JavaScript pertama kali dibuat oleh Brendan Eich pada tahun 1995, saat dia bekerja di Netscape. Dari situ, JavaScript berkembang menjadi bahasa pemrograman yang sekarang kita kenal dan cintai.
Nah, ini dia nih yang ditunggu-tunggu. Gimana sih caranya belajar JavaScript?
Mudah-mudahan, artikel ini bisa membantu kamu untuk memulai perjalananmu belajar JavaScript. Selamat belajar dan semoga sukses, ya!
Sudah tidak asing lagi untuk frontend web developer, kalau javascript menjadi bagian yang wajib dipelajari untuk membuat website kamu menjadi lebih powerful dibanding hanya menggunakan HTML & CSS.
Dengan munculnya framework/library javascript yang semakin canggih, sebut saja angularjs, reactjs, dan vuejs, frontend bukan lagi sekedar membuat website statis. Kamu bisa membuat website SPA atau Single Page Application, dimana user tidak perlu terus berpindah halaman saat bermain dengan websitenya, membuat penggunaannya semakin nyaman. Mengakses dan berinteraksi dengan API pun menjadi semakin mudah.
Tidak berhenti disana, saat ini javascript juga menjadi pilihan sebagai bahasa backend di website (nodejs), membuat aplikasi mobile dengan berbagai pilihan teknologi seperti Apache Cordova, React Native, Nativesript dll, aplikasi desktop (electronjs), sampai Internet Of Things.
Dengan mempelajari Javascript, kamu bukan hanya punya modal dasar menjadi front-end web developer, tapi kamu punya kesempatan yang lebih luas seperti yang disebutkan di atas.
Ikuti kursus online bebas: Belajar Javascript dari Nol
Eksplor dunia Javascript, pelajari dasar dasar dari bahasa pemrograman super flexible ini!
Intro
Selamat datang di course Javascript ini!
Menggunakan Javascript
Ada berbagai cara untuk menggunakan Javascript
Bahasa program Javascript
Sebelum melihat berbagai fungsi canggih Javascript, kita akan belajar Javascript dari sisi dasar bahasa program
Variabel dan tipe data
Mengenal konsep Variabel dan tipe data pada Javascript
Variabel
Variabel adalah cara kita menyimpan nilai agar mudah diakses. Belajar cara membuat dan aturan memberi nama variabel pada Javascript
Tipe data string
Kita akan mulai membahas salah satu tipe data pada Javascript yaitu String
Menggabungkan string
Sama seperti angka yang bisa dijumlahkan, string juga bisa kita gabungkan loh
Metode metode String
Javascript punya beberapa metode bawaan untuk tipe data String
Laithan mengubah teks
Waktunya kita latihan
Tipe data Number
Kembali ke angka. Javascript juga punya tipe data number untuk menuliskan sebuah angka.
Operator Matematika
Selain penjumlahan, ada banyak operator matematika lain untuk bermain dengan angka, sama seperti di dunia nyata.
Mengubah nilai variabel
Nilai sebuah variable pada let bisa diubah dengan memberi nilai baru pada nama variabel tersebut.
Mengenal const
Apa itu const , apa perbedannya antara const dan let dalam membuat sebuah variabel di Javascript?
Komentar
Mengenal apa itu komentar pada Javascriptt
Function
Belajar apa itu Function alias fungsi pada Javascript
Parameter pada fungsi
Bikin fungsi kamu lebih canggih dengan bantuan parameter
Return pada function
Sebuah fungsi bisa mengembalikan nilai, agar hasilnya bisa diolah lebih lanjut
Scope variable
Pelajari seputar scope alias lingkup hidup dari sebuah variable javascript
Latihan fungsi
Sekarang giliran kamu untuk bermain fungsi di Javascript
Var pada javascript
Ada juga loh cara lain mendeklarasikan variable selain let dan const, yaitu var
Kita bisa menyimpan beberapa data sekaligus dalam sebuah array dan menampilkannya dengan loop
Perkenalan array dan loop
Keluar dari dasar bahasa program Javascript. Kita masuk ke dunia array dan loop
Array Javascript
Simpan beberapa data sekaligus pada array
Metode metode array
Pelajari metode metode bawaan dari array
Latihan array
Waktunya latihan seputar array
Mengenal loop
Loop adalah cara kita melakukan sesuatu yang sama berkali kali pada pemrograman
Menampilkan array dengan for loop
Cara mengeluarkan semua isi array dengan loop
While loop
Alternatif dari for loop adalah while loop
Loop dengan do While
Selain while ada juga loop dengan do while
Metode dan loop array
Latihan menggunakan loop untuk array yang sudah dimanipulasi
Mengatur alur jalannya program dengan struktur kontrol
Mengenal struktur kontrol
Waktunya mengintip struktur kontrol untuk membuat program kamu jadi JAUH lebih cerdas
Tipe data boolean
Tipe data unik ini penting untuk dipelajari agar program kamu makin pintar
If Conditional
Membuat logika untuk menentukan langkah apa yang dilakukan berdasarkan kondisinya, dengan if conditional
If dan else
Kita juga bisa mengeksekusi kode khusus jika nilai kondisinya salah
Operator sama dengan
Untuk menguji kondisi kita bukan hanya harus melihat true atau false nya langsung, terkadang perlu kondisi yang lebih kompleks dari itu
Else if
Membuat dua logikan atau lebih dengan bantuan else if
Switch case
Punya banyak kondisi yang harus dipikirkan? pakai switch case!
Break pada loop
Hentikan pengulangan pada kondisi tertentu dengan break
continue pada loop
Perlu skip bagian tertentu pada saat dalam sebuah pengulangan?
Latihan mencari array
Waktunya melatih logika kamu dengan kasus kondisional
Lewati dan Cetak Kelipatan Tertentu
Latihan lagi dengan break dan continue
Mengenal Gerbang logika
Pelajaran anak elektro, tapi dipakai di logika pemrograman :)
AND &&
Menguji apakah dua syarat sudah terpenuh atau tidak
OR ||
Gerbang logika untuk menguji apakah salah satu nilai sudah benar
Negasi (!)
Menguji lawan nilai dari variabel
Lebih besar dan lebih kecil
Menguji nilai apakah ia Lebih besar dan lebih kecil dari nilai lainnya
3 sama dengan ===
Menguji kesamaan nilai dan juga tipe datanya
Latihan sederhana
Buat fungsi sederhana
Simulasi sistem login
Yuk kita latih logika dengan membuat simulasi sistem login
Latihan latihan dan latihan
Waktunya kamu latihan yang banyak
Program bayar utang
Buat program untuk keterangan dari sisa utang
Fungsi untuk Array
Tugas untuk Menguji nilai array
Fungsi Pencarian dalam Array
Yuk cari nilai dalam sebuah array
Mengubah nilai angka menjadi skor huruf
Latih loogika kondisional kamu dengan soal ini
Waktunya kita berinteraksi dengan halaman website lewat DOM
Waktunya DOM!
Berkenalan dengan DOM alias Document Object Model pada Javascript
Mengakses DOM
Bagaimana cara mengakses DOM dengan Javascript
Mengubah DOM
Bagaimana merubah tampilan atau DOM pada HTML dengan Javascript
Mengubah style CSS via DOM
Bukan hanya text, style nya pun bisa kamu ubah lewat DOM
Menambahkan dan Menghapus Elemen HTML via DOM
Cara menambah ata menghapus Elemen HTML via DOM
insertAdjacentElement - posisi elemen baru
Pelajari cara menggunakan metode insertAdjacentElement pada JavaScript untuk menyisipkan elemen HTML di posisi tertentu. Tutorial ini dilengkapi dengan contoh kode yang mudah dipahami dan diikuti
insertAdjacentHTML - tambah HTML baru
Selain elemen biasa, kita juga bisa menambahkan sebuah elemen HTML penuh pada elemen lainnya
Event pada DOM
Mendeteksi kejadian pada DOM
Onclick Javascript
Mendeteksi saat sebuah elemen di klik
Mouse event Javascript
Setiap gerakan mouse pun bisa kita deteksi dengan event javascript
Keydown event
Mendeteksi saat user sedang mengetik sesuatu pada keyboardnya
On Load event
Deteksi ketika seluruh halaman kamu sudah terload pada website
Form event submit
Mendeteksi ketika form telah disubmit pada javascript
Membuat to do list
Waktunya kita praktek dengan membuat to do list sederhana pada javascript
Modifikasi to do list
Yuk coba utak atik aplikasi yang sudah kita buat
Hitung item pada to do list
Bagaimana kalau kita ingin menampilkan counter ada berapa jumlah itemnya
Tambah validasi
Tambahkan logika dalam menguji input dari user
Item tidak boleh kembar
Bagaimana kalau kita mau menambahkan fitur untuk mendeteksi item tidak boleh sudah ada di list
Navigasi pada DOM
Jelajahi elemen elemen pada HTML berdasarkan posisinya terhadap elemen lain
Parent element
Menangkap pembungkus dari elemen HTML dengan parent element
Child element
Jelajahi anak dari elemen tertentu dengan child element
Sibling element
Selain parent dan child, kita juga bisa menjelajahi saudara saudara elemen ini yang berada di satu level yang sama.
Berinteraksi langsung dengan browser lewat BOM!
Kenalan dengan BOM
mengontrol jendela browser, mengubah ukuran, memuat halaman baru, dan banyak lagi lewat BOM
Window Object
window adalah komponen utama untuk mengakses BOM
Window Screen Object
Dapatkan informasi screen dari user lewat window screen
Window Location
Akses informasi tentang URL saat ini dari jendela browser dengan window location
Window history
Berinteraksi dengan riwayat browser lewat history object
Alert dan Confirmation box
Munculkan alert atau dialog konfirmasi pada browser kamu dengan ini. Bisa kondisional loh tergantung pilihan user
Timing function
Delay sebuah fungsi atau set agar ia dijalankan berkali-kali dengan timing function pada javascript
Hampir semua hal pada Javascript adalah object. Karena itu penting memahami konsep ini
Perkenalan Object Javascript
Konsep yang sangat penting yang perlu kamu pelajari dalam dunia Javascript! object!
Bermain dengan property object
Kita bisa memberi banyak properti pada sebuah object
Metode property
Berikan fungsi canggih yang melekat pada object kamu
Menampilkan object dengan DOM
object tidak hanya hidup di kode Javascript, tapi nilainya bisa ditampilkan pada layar seperti biasa
Object constructor
Pada saat membuat object di awal, kita bisa meminta beberap property wajib yang perlu diisi
Loop pada Object
Cara mengeluarkan semua isi object dengan loop
Membuat Daftar Belanja dengan JavaScript Objects
Waktunya kamu latihan menggunakan object pada Javascript
Dengan API kita bisa berinteraksi ke kode backend atau database, baik milik sendiri atau orang lain
Masuk ke dunia API
Sejauh ini kita hanya belajar baigan frontend, sampai negara API menyerang :P
Hubungan API dan Javascript
Bagaimana sih sebenarnya hubungan antara API dan Javascript
Membaca data API dengan Fetch
Intip cara membaca data dari API dengan metode Fetch pada Javascript
Konsep asinkron
Pelajari apa itu konsep asinkron pada pemrograman khususnya Javascript.
Metode async/await Javascript
Alternatif penulisan untuk metode asinkron agar lebih mudah dibaca dan bisa menghindari kesalahan.
Amankan dengan try catch
Data API yang kita coba akses belum tentu berhasil, bisa jadi servernya error atau kejadian lain, karena itu perlu ada cara untuk menanganinya.
Membaca data dari API
Waktunnya kita bermain API! bukan api yang panas ya :)
Menampilkan data dari API
Kita tampilkan data yang didapat dari API pada browser kita langsung
Mengenal JSON
Belajar JSON, struktur data yang sangat popule di dunia pemrograman
Metode metode API
Ada beberapa metode HTTP API yang disupport
Mengirim data ke API
Belajar bagaima cara Mengirim data ke API dari Javascript
Latihan API
Waktunya kamu latihan menampilkan data dari sumber API yang lain
Program program atau API yang tersedia pada Javascript untuk digunakan pada sebuah website
Mengenal Web API
Belajar apa itu Web API dan ada apa saja yang tersedia
localStorage API
Menyimpan data pada browser dengan local storage
Beberapa data pada satu item
Bagaimana cara membaca dan memanipulasi beberapa data yang tersimpan pada satu item di localstorage?
Tugas daftar murid
Waktunya kamu latihan menyimpan data pada browser dengan localStorage
Waktunya kamu mengerjakan tugas tugas yang banyak!
Tugas tugas latihan
Waktunya kamu latihan yang banyak
Membuat kuis interaktif
Coba bikin kuis interaktif dengan Javascript
Aplikasi pencatatan keuangan
Sekarang kita buat mini aplikasi untuk membuat catatan keuangan pribadi kita
Cuaca hari ini
Dengan ilmu avatar API yang kamu punya :P, cari tahu cuaca hari ini dengan APi
Selamat! kita sudah selesai belajar javascript dasar, masih banyak rahasia dan kekuatan javascript, mulai belajar teknik DOM pada javascript atau penggunaan objek