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
• 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
• let adalah untuk variable yang bisa diubah nilainya kembali. Link referensi: 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

Module

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

File sapa.js

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

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

File index.js

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

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

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

Berdasarkan Class

<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

<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

<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.

<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

<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

<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

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

Beri event pada selector

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

AddEventListener

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

Perhatikan dan cobakan contoh berikut.

<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>