Skip to content

bellshade/Javascript

Repository files navigation

Bellshade - JavaScript

Part of Bellshade Project, managed by WPU Discord Community
WPU Community is the fastest growing software developer forum initiated by Mr. Sandhika Galih

codequality codefactor buildTesting Visitor Badge discord

Repositori ini berisi kumpulan code JavaScript yang dapat digunakan sebagai pembelajaran bagi siapa saja. Mulai dari materi Basic, DOM, ES6, hingga Web Api yang dapat kalian gunakan sebagai sumber belajar. Tidak hanya itu, repositori ini juga memiliki berbagai macam code mengenai struktur data dan algoritma yang diimplementasikan dengan menggunakan JavaScript.

image

πŸŽ‰πŸŽ‰ Selamat Datang di Javascript πŸŽ‰πŸŽ‰

JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif. Jika sebelumnya kalian mungkin belajar HTML dan CSS maka dengan JavaScript kalian bisa membuat tampilan dari website kalian menjadi lebih interaktif lagi.

Alasan untuk belajar JavaScript

Tentunya belajar JavaScript pada saat seperti ini merupakan pilihan yang tepat, dikarenakan JavaScript adalah bahasa yang ramah untuk pemula alias beginner-friendly yang pastinya akan membuat kalian dapat mempelajarinya dengan mudah. Oleh karena itu JavaScript menjadi bahasa paling populer berdasarkan survei yang dilakukan oleh Stackoverflow.

image

Contoh manfaat dari penggunaan JavaScript

Dengan JavaScript kita bisa membuat website yang jauh lebih baik pastinya. Seperti membuat navbar, slider, timer, hingga membuat sebuah game sekalipun yang dapat berjalan di browser, dan tentunya masih banyak lagi yang bisa dibuat dengan JavaScript.

Beberapa contoh sederhana penggunaan JavaScript:

  1. Countdown
  2. Slider
  3. Accordion
  4. Navbar
  5. Game Sederhana

Tertarik untuk Belajar? Yuk Belajar Sekarang 🌟

Berikut kami sediakan tahapan atau panduan dalam belajar JavaScript agar kalian tidak bingung dalam menentukan jalur belajar.

πŸ“š Tahapan Belajar Pemrograman JavaScript πŸ“š

1️⃣ Jalur Belajar Basic

Jalur belajar ini diperuntukkan bagi kalian yang masih awam atau baru saja terjun di dunia pemrograman. Di sini kalian akan belajar dasar-dasar JavaScript mulai dari variabel hingga objek.

Langkah Topik Target Pembelajaran Materi Video Rujukan
01 Pengenalan Memahami bagaimana JavaScript bekerja Hello World WPU - Pengenalan JavaScript
02 Variabel dan Tipe Data Memahami apa itu variabel dan tipe data yang ada di JavaScript Variable & Datatype WPU - Variabel dan WPU - Tipe Data
03 Operator Aritmatik Dapat melakukan operasi aritmatika sederhana Arithmetic WPU - Operator Aritmatika
04 Perulangan Memahami inti kedua dari pemograman yaitu melakukan perulangan Looping WPU - Perulangan dengan For dan WPU - Perulangan dengan While
05 Pengkondisian Memahami salah satu dari inti dari membuat pemograman yaitu melakukan pengkondisian Conditioning WPU - Pengkondisian
06 Fungsi Mengenal konsep fungsi dalam teknik pemograman Function WPU - Function
07 Konsep Array Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program Array WPU - Array
08 Konsep Objek Mengenal konsep Object yang menjadi konsep paling penting di Javascript Object WPU - Object

2️⃣ Jalur Belajar DOM

Jika sebelumnya kalian sudah mempelajari dan memahamai dasar-dasar JavaScript, selanjutnya kalian bisa belajar DOM. Di sini kalian akan belajar bagaimana berinteraksi langsung dengan website dengan cara memanipulasi objek / element HTML dengan menggunakan JavaScript.

Langkah Topik Target Pembelajaran Materi Video Rujukan
01 Pengenalan Mengenali apa itu DOM dan cara kerjanya Introduction WPU - Pengenalan DOM
02 Nodes Memahami konsep Nodes pada DOM Nodes WPU - DOM Tree
03 Collections Memahami konsep Colections pada DOM Collections WPU - DOM Tree
04 Method Memahami bagaimana cara memanipulasi DOM dengan menggunakan method yang ada Method WPU - DOM Manipulation
05 Events Memahami apa itu event pada DOM yang berguna untuk memberikan interaksi pada element HTML Events WPU - DOM Events
06 Event Listener Memahami cara penulisan addEventListener yang digunakan untuk memberikan events pada element Event Listener WPU - DOM Events
07 Traversal Memahami tentang bagaimana cara mengambil element berdasarkan objek yang ada Traversal WPU - DOM Traversal
08 Event Bubbling Memahami lebih dalam mengenai events dan method-method di dalamnya Event Bubbling WPU - Event Bubbling

3️⃣ Jalur Belajar ES6

Jalur belajar ini bisa kalian ambil jika sudah memahami dasar-dasar JavaScript tanpa mempelajari DOM terlebih dahulu. Di sini kalian akan belajar sintaks dan konsep JavaScript terbaru yang tentunya lebih berguna nantinya.

Langkah Topik Target Pembelajaran Materi Video Rujukan
01 Pengenalan Pengenalan apa itu ES6 Introduction -
02 Variabel Mengenali sintaks terbaru dalam membuat variabel Variable WPU - VAR, LET & CONST
03 Arrow Function Mengenali sintaks terbaru dalam membuat function Arrow Function WPU - Arrow Function
04 Template Literals Memahami cara menyisipkan ekspresi ke dalam sebuah string Template Literals WPU - Template Literals
05 Destructuring Assignment Memahami apa itu Destructuring Assignment dalam memecah array maupun objek Destructuring Assignment WPU - Destrucuting Assignment
06 For..Of Loop Memahamai sintaks looping yang terbaru For..Of WPU - For..Of
07 Spread Operator Memahami apa itu Spread Operator untuk memanipulasi array atau objek Spread Operator WPU - Spread Operator
08 Rest Parameter Memahami penggunaannya dalam menangkap banyak parameter dari sebuah function Rest Parameter WPU - Rest Parameter

⚑ Quick Access ⚑

Semua script yang ada pada repositori ini, dapat diakses dengan cepat lewat link berikut:

πŸ“— Cara menggunakan UI Server

Dengan UI Server, kalian bisa belajar bahasa pemrograman Javascript dan langsung mempraktikkan topik yang sudah kalian pelajari, Bagaimana caranya?

Pertama pastikan Laptop/PC kalian sudah terinstall

  • Git
  • Node.js
  • NPM

Jika belum kalian bisa klik dan ikuti video dibawah ini untuk menginstall semua program yang dibutuhkan

Instalasi git

https://youtu.be/e-6OkXRqWaE

Instalasi Node.js dan NPM

https://youtu.be/VfN1_pEdQAA

Jika sudah terinstall, kalian bisa mengikuti langkah langkah berikut ini

  • Buka terminal dan clone repositori dengan perintah git clone https://github.com/bellshade/Javascript.git
  • Pindahkan ke direktori hasil clone nya, lalu jalankan perintah
npm install
  • Lalu jalankan perintah
npm start
  • Jika sudah muncul tulisan Listening on port 3000 | http://localhost:3000/ maka selamat kalian sudah berhasil menginstall UI Server
  • Buka http://localhost:3000/ dan selamat belajar !!

Konfigurasi Port

Jika port 3000 sudah terpakai maka kalian bisa mengganti konfigurasi port nya

Pertama buka text editor kesukaan kalian lalu buka file .env.sample lalu tambahkan nomor port pada bagian PORT

Contohnya

PORT=3001

Lalu jalankan kembali UI Server nya.

🀩 Yuk ikut berkontribusi ke Bellshade! 🀩

Bantuan kalian diperlukan! Untuk Bellshade dapat lebih jauh lagi membantu anak-anak Indonesia belajar programming, kita butuh tenaga kalian.

"Dengan Bellshade, aku jadi bisa ngoding! Terima kasih Bellshade!!" Kami sangat senang bila kalian ingin melakukan kontribusi pada repositori JavaScript ini. Tapi, sebelum itu, silahkan baca terlebih dahulu Peraturan dan Pedoman Kontribusi yang telah kami siapkan. Terima kasih!

Untuk informasi lebih lanjut, mari gabung dalam komunitas Discord Channel WPU