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>