Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/bellshade/Javascript

Repositori untuk belajar pemrograman Javascript dalam bahasa Indonesia
https://github.com/bellshade/Javascript
hacktoberfest indonesia javascript
Last synced: 3 months ago
JSON representation
Repositori untuk belajar pemrograman Javascript dalam bahasa Indonesia
Host: GitHub
URL: https://github.com/bellshade/Javascript
Owner: bellshade
License: mit
Created: 2021-08-14T01:55:35.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2024-07-26T21:25:31.000Z (4 months ago)
Last Synced: 2024-07-26T22:54:06.950Z (4 months ago)
Topics: hacktoberfest, indonesia, javascript
Language: JavaScript
Homepage:
Size: 3.03 MB
Stars: 341
Watchers: 12
Forks: 177
Open Issues: 13
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project

README

        # Bellshade - JavaScript

> Part of Bellshade Project, managed by [WPU Discord Community](http://discord.gg/S4rrXQU) 


> WPU Community is the fastest growing software developer forum initiated by [Mr. Sandhika Galih](https://www.youtube.com/c/WebProgrammingUNPAS)

![codequality](https://img.shields.io/lgtm/grade/javascript/github/bellshade/Javascript?label=code%20quality%3A%20js&style=for-the-badge)

![codefactor](https://img.shields.io/codefactor/grade/github/bellshade/Javascript/main?label=code%20factor%20quality&style=for-the-badge)

![buildTesting](https://img.shields.io/github/workflow/status/bellshade/Javascript/Node%20CI?style=for-the-badge)

![Visitor Badge](https://visitor-badge.feriirawann.repl.co?username=bellshade&repo=Javascript&label=VISITOR&style=for-the-badge&color=%2344CC11&token=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&contentType=svg)

[![discord](https://img.shields.io/discord/722002048643497994?logo=discord&logoColor=white&style=for-the-badge)](http://discord.gg/S4rrXQU)

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](https://teknojurnal.com/wp-content/uploads/2016/09/Kelebihan-Bahasa-Pemrograman-JavaScript-Banner.jpg)

## 🎉🎉 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](https://github.com/bellshade/HTML-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](https://insights.stackoverflow.com/survey/2021).

![image](https://cdn.discordapp.com/attachments/696006258792333352/905693077484736512/unknown.png)

### 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](https://codepen.io/AllThingsSmitty/pen/JJavZN)

2. [Slider](https://codepen.io/gurovoleg/pen/OqjPLy)

3. [Accordion](https://codepen.io/whit1346/pen/MmeQLR)

4. [Navbar](https://codepen.io/abdosteif/pen/bRoyMb)

5. [Game Sederhana](https://codepen.io/msval/pen/qKhcD)

> ### Tertarik untuk Belajar? Yuk [Belajar Sekarang](learn) 🌟

>

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

## :books: Tahapan Belajar Pemrograman JavaScript :books:

### :one: 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](learn/Basic/001_hello_world)        |                                  [WPU - Pengenalan JavaScript](https://youtu.be/RUTV_5m4VeI)                                  |

|   02    | Variabel dan Tipe Data |           Memahami apa itu variabel dan tipe data yang ada di JavaScript            | [Variable & Datatype](learn/Basic/002_variable_datatype) |              [WPU - Variabel](https://youtu.be/X1q_cK0Qv6o) dan [WPU - Tipe Data](https://youtu.be/1FAnrYu7LCM)               |

|   03    |   Operator Aritmatik   |                    Dapat melakukan operasi aritmatika sederhana                     |    [Arithmetic](learn/Basic/005_arithmetic_operation)    |                                   [WPU - Operator Aritmatika](https://youtu.be/EnXClrVdpTM)                                   |

|   04    |       Perulangan       |           Memahami inti kedua dari pemograman yaitu melakukan perulangan            |            [Looping](learn/Basic/006_looping)            | [WPU - Perulangan dengan For](https://youtu.be/1HussC8jKrk) dan [WPU - Perulangan dengan While](https://youtu.be/61XLzozBj2c) |

|   05    |     Pengkondisian      | Memahami salah satu dari inti dari membuat pemograman yaitu melakukan pengkondisian |       [Conditioning](learn/Basic/007_conditioning)       |                                      [WPU - Pengkondisian](https://youtu.be/hXbDQryJAh0)                                      |

|   06    |         Fungsi         |                   Mengenal konsep fungsi dalam teknik pemograman                    |           [Function](learn/Basic/008_function)           |                                        [WPU - Function](https://youtu.be/6-UqHXBtYkg)                                         |

|   07    |      Konsep Array      |     Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program     |              [Array](learn/Basic/009_array)              |                                          [WPU - Array](https://youtu.be/CW5pfpafgDE)                                          |

|   08    |      Konsep Objek      |       Mengenal konsep Object yang menjadi konsep paling penting di Javascript       |             [Object](learn/Basic/011_object)             |                                         [WPU - Object](https://youtu.be/RKsapPaUgww)                                          |

### :two: 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](learn/DOM/001_Introduction)          |  [WPU - Pengenalan DOM](https://youtu.be/aT60R1cySLM)  |

|   02    |     Nodes      |                                 Memahami konsep _Nodes_ pada DOM                                 |               [Nodes](learn/DOM/002_DOM_Nodes)               |     [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM)     |

|   03    |  Collections   |                              Memahami konsep _Colections_ pada DOM                               |           [Collections](learn/DOM/003_Collections)           |     [WPU - DOM Tree](https://youtu.be/zY5RlT5q5EM)     |

|   04    |     Method     |          Memahami bagaimana cara memanipulasi DOM dengan menggunakan _method_ yang ada           |               [Method](learn/DOM/004_Methods)                | [WPU - DOM Manipulation](https://youtu.be/ff5aKnXmnx0) |

|   05    |     Events     |   Memahami apa itu _event_ pada DOM yang berguna untuk memberikan interaksi pada element HTML    |                [Events](learn/DOM/005_Events)                |    [WPU - DOM Events](https://youtu.be/ndYweb0Yn6o)    |

|   06    | Event Listener | Memahami cara penulisan _addEventListener_ yang digunakan untuk memberikan _events_ pada element |        [Event Listener](learn/DOM/006_Event_Listener)        |    [WPU - DOM Events](https://youtu.be/ndYweb0Yn6o)    |

|   07    |   Traversal    |           Memahami tentang bagaimana cara mengambil element berdasarkan objek yang ada           |             [Traversal](learn/DOM/007_Traversal)             |  [WPU - DOM Traversal](https://youtu.be/SVOCSoGYdpQ)   |

|   08    | Event Bubbling |              Memahami lebih dalam mengenai _events_ dan _method-method_ di dalamnya              | [Event Bubbling](learn/DOM/008_Event_Bubbling_and_Capturing) |  [WPU - Event Bubbling](https://youtu.be/a_JFfPHTAf4)  |

### :three: 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](learn/ES6/001_introduction)             |                               -                               |

|   02    |         Variabel         |                Mengenali sintaks terbaru dalam membuat variabel                |                 [Variable](learn/ES6/002_variable)                 |    [WPU - VAR, LET & CONST](https://youtu.be/7HDgJScwIrI)     |

|   03    |      Arrow Function      |                Mengenali sintaks terbaru dalam membuat function                |           [Arrow Function](learn/ES6/003_arrow_function)           |     [WPU - Arrow Function](https://youtu.be/C8U_3_SBk6s)      |

|   04    |    Template Literals     |          Memahami cara menyisipkan ekspresi ke dalam sebuah _string_           |        [Template Literals](learn/ES6/004_template_literals)        |    [WPU - Template Literals](https://youtu.be/LywZF-xcfd8)    |

|   05    | Destructuring Assignment |  Memahami apa itu _Destructuring Assignment_ dalam memecah array maupun objek  | [Destructuring Assignment](learn/ES6/006_destructuring_assignment) | [WPU - Destrucuting Assignment](https://youtu.be/7f11bDxZSP0) |

|   06    |       For..Of Loop       |                     Memahamai sintaks looping yang terbaru                     |                [For..Of](learn/ES6/007_for_of_loop)                |         [WPU - For..Of](https://youtu.be/LXOG9rHkYOo)         |

|   07    |     Spread Operator      |     Memahami apa itu _Spread Operator_ untuk memanipulasi array atau objek     |          [Spread Operator](learn/ES6/008_spread_operator)          |     [WPU - Spread Operator](https://youtu.be/AT5hfOL1Ddk)     |

|   08    |      Rest Parameter      | Memahami penggunaannya dalam menangkap banyak parameter dari sebuah _function_ |      [Rest Parameter](learn/ES6/009_function_rest_parameter)       |     [WPU - Rest Parameter](https://youtu.be/C0mPB-lyI1I)      |

## ⚡ Quick Access ⚡

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

- [Learn](learn/)

  - [Basic](learn/Basic/)

  - [DOM](learn/DOM/)

  - [ES6](learn/ES6/)

  - [Web Api](learn/WebApi)

- [Algorithm](algorithm/)

## 📗 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](CONTRIBUTING.md) yang telah kami siapkan. Terima kasih!

Untuk informasi lebih lanjut, mari gabung dalam komunitas [Discord Channel WPU](http://discord.gg/S4rrXQU)