# Hari 15: ESnext dan DOM Dasar

### Pengenalan ES6

ES6 dan + adalah Javascript versi modern kalo Asrul sendiri yang ngomong karena fiturnya aduhai, jatuh cinta banget lah. Maaf kalau udah mulai lebay.

### `var`, `const` dan `let`

Awalnya javascript hanya punya var sebagai deklarasi dari sebuat variable.

```
var nama = "Asrul Harahap";

```

Tapi sekarang telah ditambahkan `const` dan `let`, bertanya, apasih bedanya?

- var mencakup fungsi variable ke lingkup "global" jika berada di tingkat atas. Link referensi: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
- const adalah untuk variabel yang tidak ingin Anda diubah nilainya (read only). Link referensi: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
- let adalah untuk variable yang bisa diubah nilainya kembali. Link referensi: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)

### Arrow Function

Perhatikan penulisan function dengan arrow function.

Function Normal

```
function panggilAku() {
  return "Asrul Harahap";
}

```

Function dengan Arrow

```
const panggilAku = () => "Asrul Harahap";

```

Function Normal

```
function banyakArgumen(arg1, arg2, arg...) {
    return [arg1, arg2, arg...]
}

```

Function dengan Arrow

```
const banyakArgumen = (arg1, arg2, arg...) => {
  return [arg1, arg2, arg...]
}
```

### Helper ES6

Beberapa helper yang dipakai untuk membantu koding Anda pada ES6, yaitu: map, filter, find, dll. Untuk lebih jelas saya telah menulisnya sebelumnya pad postingan berikut. [Baca Postingan](https://asrul.dev/penggunaan-map-filter-dan-reduce-javascript)

### Module

Perhatikan penggunaan module ES6 berikut pada file `index.js` dan file `sapa.js`.

File `sapa.js`

```jsx
export const halo = (nama) => {
  return `Halo, ${nama}`;
};

export const hi = () => {
  return "Hi, apa kabar?";
};
```

File `index.js`

```jsx
import { halo, hi } from "./sapa.js";
console.log(halo("Asrul Dev"));
// hasil: Halo, Asrul Dev

console.log(hi());
// hasil: Hi, apa kabar?
```

### Dasar-dasar DOM

DOM merupakan singkatan dari **Data Object Model** yang digunakan untuk memanipulasi apa saja yang ada dalam struktur HTML, memanipulasi yang dimaksud berupa menambah, mengubah, atau menghapus elemen dalam HTML.

DOM akan dimuat oleh browser ketika semua file html sudah selesai dijalankan.

> Ini materi tambahan sebagai penguat masuk React Js. Buat file dengan .html untuk uji coba materi ini.

### Selector DOM

### Berdasarkan ID

```html
<div id="boxs">
</div>

<script>
  document.getElementById("boxs").innerHTML = "Halo DOM, ayo belajar"
</script>
```

### Berdasarkan Class

```html
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<script>
  document.getElementByClassName("box")[0].innerHTML = "Javascript"
  document.getElementByClassName("box")[1].innerHTML = "PHP"
  document.getElementByClassName("box")[2].innerHTML = "Python"
</script>
```

### Berdasarkan Tag

```html
<p> Daftar Warna </p>
<ul>
  <li></li>
  <li></li>
</ul>
<script>
  document.getElementByTagName("li")[0].innerHTML = "Merah"
  document.getElementByTagName("li")[1].innerHTML = "Putih"
</script>
```

Contoh mengambil data dari form input

```html
<form onsubmit="submitForm()">
    <label>
        Nama: <br />
        <input type="text" id="name">
    </label>
    <button type="submit">Cek</button>
</form>

<script>
    function submitForm() {
        var name = document.getElementById('name').value;

        alert( "Halo " + name)
    }
</script>
```

### Membuat element dan menambah attribute

Dengan DOM, kamu dapat membuat elemen baru menggunakan `createElement('namaElement')`, kamu juga dapat menambahkan attribute pada elemen tersebut dengan  `setAttribute('nama attribute', 'nilai attribute')`.

Untuk memasukkan elemen ke element lain dengan kode berikut `namaInduk.appendChild(namaAnak)`

Perhatikan dan cobakan contoh berikut.

```html
<div id="lembar-kerja"></div>

<script>
    var img = document.createElement('img');
    var lembarKerja = document.getElementById('lembar-kerja')

    img.setAttribute('src', 'https://avatars2.githubusercontent.com/u/15111402?s=460&v=4')
    img.setAttribute('width', '200')
    img.setAttribute('height', '200')

    lembarKerja.appendChild(img)
</script>
```

### Mengedit Element

Mengganti elemen pada html

```html
<div id="place">
    <h2 id="old">Old Text<h2>
</div>
<script>
    var newEl = document.createChild('h3')
    var text = document.createTextNode('New Text')
    newEl.appendChild('text')

    var old = document.getElementById('old')
    var place = document.getElementById('place')

    place.replaceChild(newEl, old)
</script>

```

### Menghapus Element

Menghapus elemen pada html

```html
<div id="place">
    <h2 id="ada">ada Text<h2>
    <h2 id="ilang">Ilang Text<h2>
</div>
<script>
    var ilang = document.getElementById('ilang')
    var place = document.getElementById('place')
    place.removeChild(ilang)
</script>

```

### Membuat element dan menambah attribute

Dengan DOM, kamu dapat membuat elemen dengan event yang akan diset dengan 3 cara:

### Pada elemennya sendiri

```html
<button onclick="panggilFungsi()">Klik</button>
<script>
    function () {
        alert(input.value)
    }
</script>
```

### Beri event pada selector

```html
<input type="text" id="inputNama">
<script>
    var input = document.getElementById('inputNama')
    input.onclick = function() {
        alert(input.value)
    }
</script>

```

### AddEventListener

```html
<input type="text" id="inputNama">
<script>
    var input = document.getElementById('inputNama')
    input.addEventListener('click', function() {
        alert(input.value)
    })
</script>
```


Perhatikan dan cobakan contoh berikut.

```html
<div id="lembar-kerja"></div>

<script>
    var img = document.createElement('img');
    var lembarKerja = document.getElementById('lembar-kerja')

    img.setAttribute('src', 'https://avatars2.githubusercontent.com/u/15111402?s=460&v=4')
    img.setAttribute('width', '200')
    img.setAttribute('height', '200')

    lembarKerja.appendChild(img)

    img.addEventListener('mouseenter', function() {
        alert('Kamu menyentuh gambar orang ganteng itu')
    })
</script>
```