# Persiapan Belajar

## Peralatan Belajar

### 1. Web Browser / Peramban Web

Kita akan menggunakan *web browser* untuk melakukan pembelajaran JavaScript ini, sangat dianjurkan untuk memakai *web browser* yang memiliki fitur *inspect page*. Beberapa list yang direkomendasikan adalah:

* Google Chrome: <https://www.google.com/chrome/>
* Mozilla Firefox: <https://www.mozilla.org/en-US/firefox/>
* Opera: <https://www.opera.com/download>

{% hint style="info" %}
**Sangat dianjurkan untuk memakai Google Chrome (versi terbaru)**. Karena fitur bawaannya yang sudah sangat mendukung kita untuk belajar dan bekerja. Di sepanjang pembelajaran ini kita akan memakai Google Chrome untuk ilustrasi ataupun demo.
{% endhint %}

### 2. Text Editor / Pengolah Text

Text editor ini boleh apa saja yang penting nyaman, **dianjurkan untuk memakai&#x20;*****code editor*****&#x20;yang memiliki penyorot sintaks&#x20;*****(syntax highlighter)*** untuk dapat membaca kode dengan lebih mudah dan meminimalisir kesalahan. Beberapa list yang direkomendasikan adalah:

* VSCode: <https://code.visualstudio.com/download>
* Atom: <https://atom.io/>
* Sublime: <https://www.sublimetext.com/>
* WebStorm: <https://www.jetbrains.com/webstorm/>

{% hint style="info" %}
**Sangat dianjurkan untuk memakai VSCode (versi terbaru)**. Karena selain tidak berbayar alias gratis, VSCode juga sudah sangat memenuhi standard dan bisa dikustomisasi berdasarkan keinginan kita jika suatu saat dibutuhkan.
{% endhint %}

## Menjalankan Script

Pada pembelajaran JavaScript ini kita akan memakai tag `<script>` yang ada pada file HTML.  Ingat, yang penting dari contoh-contoh yang akan kita bahas hanyalah yang ada di dalam tag `<script></script>` saja ya! Sebagai contoh:

{% tabs %}
{% tab title="coba.html" %}

```markup
<html>
  <body>
    <script>
      console.log('Halo Dunia!');
    </script>
  </body>
</html>
```

{% endtab %}
{% endtabs %}

> ^ Contoh sederhana file HTML dengan JavaScript di dalamnya

Kita tinggal simpan kode di atas dengan nama misalkan **contoh.html** kemudian kita buka file tersebut dengan *web browser* kita.

## Melihat Hasil / Output

**Pada pembelajaran JavaScript ini kita akan menggunakan console pada web browser untuk melihat hasil atau output dari kode yang kita tulis.** Untuk membuka panel console ini, klik kanan pada halaman di Chrome atau tekan F12 lalu akan muncul sebuah panel di sebelah kanan, kemudian pindahkan *inspect* pada tab console.  Seperti pada **contoh.html** di atas, kita akan mendapatkan output seperti berikut:

![Contoh output dari coba.html ketika dijalankan](https://849971125-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdAWlam36zxEKONDkOt%2F-Mdb-BxkGxkjAiQQ_3u5%2F-MdcrrryQ0YTrMZsvTVd%2FScreen%20Shot%202021-07-03%20at%2003.18.24.png?alt=media\&token=d1f05dfd-f245-40ca-b9ab-78be5ffa4563)

Ada beberapa tipe varian output menggunakan console, yang digunakan berdasarkan tujuan atau pembe, 3 yang paling sering digunakan yaitu: log, warn dan error.

{% tabs %}
{% tab title="coba.html" %}

```markup
<html>
  <body>
    <script>
      console.log('Halo Dunia!');
      console.warn('Halo Dunia!');
      console.error('Halo Dunia!');
    </script>
  </body>
</html>
```

{% endtab %}
{% endtabs %}

![Contoh output console.log(), console.warn() dan console.error() secara berurutan](https://849971125-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdAWlam36zxEKONDkOt%2F-Mdb-BxkGxkjAiQQ_3u5%2F-MdcsI3qNoj_ZE2leRZr%2FScreen%20Shot%202021-07-03%20at%2003.20.08.png?alt=media\&token=3232d6d8-124e-45e3-9823-02143f8635ae)

Selain itu kita juga akan menggunakan **prompt()** untuk melakukan input. Contoh untuk kasus mengambil input nama:

{% tabs %}
{% tab title="coba.html" %}

```markup
<html>
  <body>
    <script>
      prompt('Tuliskan namamu:');
    </script>
  </body>
</html>
```

{% endtab %}
{% endtabs %}

![Output dari contoh kode promt di atas](https://849971125-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdAWlam36zxEKONDkOt%2F-MdBCNTXIXr7nNwBmE9A%2F-MdC_O1xkz9ibp1AT5lG%2FScreen%20Shot%202021-06-27%20at%2020.07.53.png?alt=media\&token=922cf477-dae8-4df4-8091-f27bc2c4eec3)
