DEV Community: boibolang

Slider Component - JavaScript & CSS

boibolang — Sun, 14 Jul 2024 07:42:05 +0000

Pada kesempatan kali ini kita akan praktik membuat slider, slider bisa berisi image maupun text nantinya disesuaikan dengan kebutuhan. Idenya adalah dengan menyiapkan image maupun text yang akan dijadikan slide, kemudian terdapat button sebagai navigasi kiri-kanan, nantinya kita juga bisa menggunakan arrow keyboard maupun dot. Untuk praktik kali ini kita akan memakai image sebagai content dari slide. Langsung saja kita siapkan file index.html, style.css dan app.js. Untuk file app.js kita akan buat secara bertahap

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Slider</title>
  </head>
  <body>
    <div class="slider">
      <div class="slide"><img src="../img/img-1.jpg" alt="Photo 1" /></div>
      <div class="slide"><img src="../img/img-2.jpg" alt="Photo 2" /></div>
      <div class="slide"><img src="../img/img-3.jpg" alt="Photo 3" /></div>
      <div class="slide"><img src="../img/img-4.jpg" alt="Photo 4" /></div>
      <button class="slider__btn slider__btn--left">&larr;</button>
      <button class="slider__btn slider__btn--right">&rarr;</button>
      <div class="dots"></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

/* style.css */

.slider {
  max-width: 100rem;
  height: 50rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* untuk animasi */
  transition: transform 1s;
}

.slide > img {
  /* untuk menyamakan ukuran image */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__btn {
  position: absolute;
  top: 50%;
  z-index: 10;

  border: none;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  color: #333;
  border-radius: 50%;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 6%;
  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 6%;
  transform: translate(50%, -50%);
}

.dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #b9b9b9;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  background-color: red;
  opacity: 1;
}

Untuk file app.js kita akan buat bertahap sebagai berikut :

Posisikan image pada window view (viewport width) berdampingan, dan geser ketika ada trigger

const slides = document.querySelectorAll('.slide');

slides.forEach((s, i) => (s.style.transform = `translateX(${100 * i}%)`));

Dengan menggunakan index dari forEach dan translateX kita bisa menentukan posisi viewport setiap kali ada trigger

Supaya image tampak semua kita kecilkan ukurannya, nantinya kita kembalikan ke ukuran normal jika aplikasi sudah jadi

const slides = document.querySelectorAll('.slide');

const slider = document.querySelector('.slider');
slider.style.transform = 'scale(0.2)';
slider.style.overflow = 'visible';

slides.forEach((s, i) => (s.style.transform = `translateX(${100 * i}%)`));

Hasilnya sebagai berikut

Assign event handler kepada button


// Component initiation
const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');

let curSlide = 0;

const slider = document.querySelector('.slider');
slider.style.transform = 'scale(0.2)';
slider.style.overflow = 'visible';

slides.forEach((s, i) => (s.style.transform = `translateX(${100 * i}%)`));

btnRight.addEventListener('click', function () {
  curSlide++;
  slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - curSlide)}%)`));
});

Kita perlu memberi limiter supaya slider tidak bergeser terus setelah image-nya habis. Ketika sudah sampai pada image terakhir kita kembalikan ke image awal. Dengan sedikit refactoring kita bisa menyelesaikan kode untuk app.js sebagai berikut

const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');

let curSlide = 0;
const maxSlide = slides.length;

const goToSlide = function (slide) {
  slides.forEach((s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`));
};

// Activate on first load
goToSlide(0);

// Next slide
const nextSlide = function () {
  if (curSlide === maxSlide - 1) {
    curSlide = 0;
  } else {
    curSlide++;
  }
  goToSlide(curSlide);
};

// Prev slide
const prevSlide = function () {
  if (curSlide === 0) {
    curSlide = maxSlide - 1;
  } else {
    curSlide--;
  }
  goToSlide(curSlide);
};

btnRight.addEventListener('click', nextSlide);
btnLeft.addEventListener('click', prevSlide);

Selanjutnya kita tambahkan event handler untuk keyboard arrow left dan right

...
// Event handler for keyboard arrow
document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowLeft') prevSlide();
  e.key === 'ArrowRight' && nextSlide();
});

Selanjutnya kita tambahkan dot navigation. Kode untuk dot navigation kita tempatkan di awal setelah inisiasi component

const dotContainer = document.querySelector('.dots');

// Dot handler
const createDots = function () {
  slides.forEach((_, i) => {
    dotContainer.insertAdjacentHTML(
      'beforeend',
      `<button class="dots__dot" data-slide="${i}"></button>`
    );
  });
};

// Activate on first load
createDots();

// Event handler for dots
dotContainer.addEventListener('click', function (e) {
  if (e.target.classList.contains('dots__dot')) {
    const { slide } = e.target.dataset;
    goToSlide(slide);
  }
});

Tahap akhir kita akan tambahkan active navigation, jadi image yang tampak di window juga akan memberi display aktif pada dot navigation. Dalam hal ini dot navigation akan kita beri warna merah

// Activate dots
const activateDot = function (slide) {
  // Remove class from all
  document
    .querySelectorAll('.dots__dot')
    .forEach((dot) => dot.classList.remove('dots__dot--active'));

  // Activate class only for selected
  document
    .querySelector(`.dots__dot[data-slide="${slide}"]`)
    .classList.add('dots__dot--active');
};
// Activate on first load
activateDot(0);

Kita juga harus menambahkan function activateDot() pada setiap posisi image. Kode lengkap dari app.js adalah sebagai berikut

const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const dotContainer = document.querySelector('.dots');

let curSlide = 0;
const maxSlide = slides.length;

// Dot handler
const createDots = function () {
  slides.forEach((_, i) => {
    dotContainer.insertAdjacentHTML(
      'beforeend',
      `<button class="dots__dot" data-slide="${i}"></button>`
    );
  });
};

// Activate on first load
createDots();

// Activate dots
const activateDot = function (slide) {
  // Remove class from all
  document
    .querySelectorAll('.dots__dot')
    .forEach((dot) => dot.classList.remove('dots__dot--active'));

  // Activate class only for selected
  document
    .querySelector(`.dots__dot[data-slide="${slide}"]`)
    .classList.add('dots__dot--active');
};
// Activate on first load
activateDot(0);

const goToSlide = function (slide) {
  slides.forEach(
    (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
  );
};

goToSlide(0);
activateDot(0);

// Next slide
const nextSlide = function () {
  if (curSlide === maxSlide - 1) {
    curSlide = 0;
  } else {
    curSlide++;
  }
  goToSlide(curSlide);
  activateDot(curSlide);
};

const prevSlide = function () {
  if (curSlide === 0) {
    curSlide = maxSlide - 1;
  } else {
    curSlide--;
  }
  goToSlide(curSlide);
  activateDot(curSlide);
};

btnRight.addEventListener('click', nextSlide);
btnLeft.addEventListener('click', prevSlide);

// Event handler for keyboard arrow
document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowLeft') prevSlide();
  e.key === 'ArrowRight' && nextSlide();
});

// Event handler for dots
dotContainer.addEventListener('click', function (e) {
  if (e.target.classList.contains('dots__dot')) {
    const { slide } = e.target.dataset;
    goToSlide(slide);
    activateDot(slide);
  }
});

Hasilnya sebagai berikut

Lazy-load Image - JavaScript & CSS

boibolang — Thu, 13 Jun 2024 15:48:07 +0000

Dalam pembuatan web application, salah satu elemen yang paling banyak menyedot resource adalah image (gambar). Maka dari itu ada berbagai macam cara menyimpan gambar dalam sebuah web application. Kali ini kita akan belajar salah satu cara memanipulasi gambar yaitu lazy-load, lazy-load kita masih akan memakai intersection observer. Triknya adalah kita siapkan 2 buah gambar yang satu dengan resolusi penuh, satunya lagi dengan resolusi rendah. Gambar dengan resolusi rendah akan kita pakai sebagai default, ketika target memasuki intersection maka kita ganti dengan gambar resolusi penuh

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy-load Image</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>Lazy-load Image</header>
    <div class="section">
      <img src="image/img1s.png" alt="" data-img="image/img1.png" width="500px" class="lazy-img" />
    </div>
    <div class="section">
      <img src="image/img3s.png" alt="" data-img="image/img3.png" width="500px" class="lazy-img" />
    </div>
    <div class="section">
      <img src="image/img2s.png" alt="" data-img="image/img2.png" width="500px" class="lazy-img" />
    </div>
    <script src="app.js"></script>
  </body>
</html>

/* style.css */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.lazy-img {
  filter: blur(20px);
}

img {
  transition: all 0.3s ease-out;
}

header {
  font-size: 200px;
}

header,
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section:nth-child(odd) {
  background-color: cadetblue;
}

.section:nth-child(even) {
  background-color: blanchedalmond;
}

// app.js

const imgTargets = document.querySelectorAll('img[data-img]');

const loadImg = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;

  // ganti gambar dengan resolusi penuh
  entry.target.src = entry.target.dataset.img;

  // ketika target load, hilangkan class 'lazy-image'. jika tidak memakai fungsi ini, maka efek smooth-nya tidak akan tampak
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '-200px',
});

imgTargets.forEach((img) => imgObserver.observe(img));

Kuncinya ada pada potongan kode berikut
<img src="image/img1s.png" alt="" data-img="image/img1.png" width="500px" class="lazy-img" />
Image source src="image/img1s.png" berisi gambar dengan resolusi rendah sedangkan calon penggantinya ada pada kode data-img="image/img1.png", lalu kita manipulasi dengan javascript lewat kode entry.target.src = entry.target.dataset.img. Hasilnya sebagai berikut

Blurr Element - JavaScript & CSS

boibolang — Wed, 12 Jun 2024 15:54:25 +0000

Two articles in a row, sebenarnya sudah lama hanya tinggal menulis ulang saja. Kali ini kita akan membuat blurr effect, semacam efek kabur yang dapat diaplikasikan pada menu untuk menampilkan fokus. Jadi idenya ketika mouse berada pada menu tertentu, menu yang lain akan nge-blur. Kita akan menerapkan blurr effect dengan 3 metode berbeda. Siapkan 3 file andalan kita.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blurr Effect</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="header">
      <div class="menu">
        <a class="link" href="#">Hello</a>
        <a class="link" href="#">How</a>
        <a class="link" href="#">Are</a>
        <a class="link" href="#">You</a>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

/* style.css */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  height: 100vh;
  background-color: burlywood;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .menu {
  background-color: chocolate;
  width: 900px;
  display: flex;
  justify-content: space-around;
  height: 100px;
  align-items: center;
  font-size: 50px;
  font-weight: bolder;
  border-radius: 9999px;
  border: 2px solid #efefef;
}

.header .menu a {
  text-decoration: none;
  transition: all 0.7s ease-out;
}

Cara Pertama

Kita akan menggunakan event mouseover dan mouseout serta memanfaatkan DOM traversal closest. Untuk closest sudah pernah kita gunakan pada proyek sebelumnya, saya sendiri juga termasuk yang baru mengetahui metode closest ini, kalau dari MDN docs penjelasannya sebagai berikut :

The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector. Return value : the closest ancestor Element or itself, which matches the selectors. If there are no such element, null.

Jadi penjelasan singkatnya metode closest mencari keatas (parent/anchestor) sampai menemukan selector yang dicari atau dirinya sendiri

// app.js

menu.addEventListener('mouseover', (e) => {
  if (e.target.classList.contains('link')) {

    // menentukan target
    const link = e.target;

    // menentukan menu lain selain target
    const siblings = link.closest('.menu').querySelectorAll('.link');

    // jika menu lain bukan target (tidak terkena mouseover) maka opacity diset 0.2
    siblings.forEach((el) => {
      if (el !== link) el.style.opacity = 0.2;
    });
  }
});

menu.addEventListener('mouseout', (e) => {
  if (e.target.classList.contains('link')) {
    const link = e.target;
    const siblings = link.closest('.menu').querySelectorAll('.link');

    siblings.forEach((el) => {
      if (el !== link) el.style.opacity = 1;
    });
  }
});

Hasilnya

Cara kedua

Kita akan mencoba me-refactor kode diatas supaya lebih rapi karena ada kode yang berulang (rekursif). Untuk refactor kita buat fungsi baru


// refactor
const handleOver = function (e, opacity) {
  if (e.target.classList.contains('link')) {
    const link = e.target;
    const siblings = link.closest('.menu').querySelectorAll('.link');

    siblings.forEach((el) => {
      if (el !== link) el.style.opacity = opacity;
    });
  }
};

menu.addEventListener('mouseover', handleOver(e, 0.5));
menu.addEventListener('mouseout', handleOver(e, 1));

Kode diatas akan menghasilkan error sebagai berikut

Kenapa ? Karena metode addEventListener memerlukan sebuah fungsi untuk parameter keduanya, bukan sembarang variabel. Maka kita akan mem-passing fungsi sebagai berikut (hasilnya sama dengan diatas jadi saya tidak akan memperlihatkan)


const menu = document.querySelector('.menu');
menu.addEventListener('mouseover', function (e) {
  handleOver(e, 0.2);
});

menu.addEventListener('mouseout', function (e) {
  handleOver(e, 1);
});

Cara ketiga

Cara terakhir kita akan menggunakan bind method yang juga pernah kita bahas disini. Bind method akan mengembalikan (return) fungsi yang dengan atribut/keyword 'this' yang bisa diisi nilai apapun


const handleOver = function (e) {
  if (e.target.classList.contains('link')) {
    const link = e.target;
    const siblings = link.closest('.menu').querySelectorAll('.link');

    siblings.forEach((el) => {
      if (el !== link) el.style.opacity = this;
    });
  }
};
menu.addEventListener('mouseover', handleOver.bind(0.2));
menu.addEventListener('mouseout', handleOver.bind(1));

Argument pada bind hanya bisa diisi single value, apabila membutuhkan lebih bisa passing data berupa array

Flying-in Effect - JavaScript & CSS

boibolang — Wed, 12 Jun 2024 13:04:55 +0000

Oke gaes, lanjut lagi belajarnya ya. Kali ini kita akan membuat flying-in effect, tool-nya masih sama dengan yang sebelumnya yaitu kita akan menggunakan intersection observer. Seperti biasa kita siapkan code standar wajib : index.html, style.css dan app.js

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reveal Element</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="header"><h1>This is header</h1></header>
    <section class="section" id="section--1"><h1>This is section 1</h1></section>
    <section class="section" id="section--2"><h1>This is section 2</h1></section>
    <section class="section" id="section--3"><h1>This is section 3</h1></section>
    <script src="app.js"></script>
  </body>
</html>

// style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section,
header {
  height: 900px;
  border-top: 1px solid #ddd;
  transition: transform 1s, opacity 1s;
}

.section:nth-child(odd) {
  background-color: aquamarine;
}

.section:nth-child(even) {
  background-color: cadetblue;
}

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

h1 {
  width: 100%;
  text-align: center;
  padding-top: 50px;
  font-size: 100px;
}

Tampilan awalnya seperti ini ya

Nah kita ingin pada saat masuk section berikutnya ada semacam efek fly-in. Logic-nya kira-kira seperti ini :

Sembunyikan dulu section, kita sembunyikan pakai class .section--hidden di css
Tentukan target intersection antara section dan viewport
Kalau sudah kena targetnya, munculkan elemennya

Dapatkan target

// app.js

const allSections = document.querySelectorAll('.section');

const revealSection = (entries, observer) => {
  const [entry] = entries;
  console.log(entry);
}

const sectionObserver = new IntersectionObserver(revealSection, {
  root: null,
  threshold: 0.15
});

allSections.forEach(section=>{
  sectionObserver.observe(section);
  section.classList.add('section--hidden');
});

Coba jalankan dan inspect element, scroll halaman sampai intersection pertama terjadi, tentunya section tidak adakan terlihat karena kita sembunyikan. Dari console inspect element kita dapatkan informasi sebagai berikut :

target : section#section--1.section.section--hidden
clasName : "section section--hidden"
id : "section--1"

Munculkan elemennya
Kode lengkap app.js sebagai berikut

// app.js

const allSections = document.querySelectorAll('section');
const revealSection = (entries, observer) => {
  const [entry] = entries;
  console.log(entry);

  // jika tidak terjadi intersection jangan lakukan apa-apa
  if (!entry.isIntersecting) return;

  // jika terjadi intersection class section--hidden dihilangkan
  entry.target.classList.remove('section--hidden');

  // supaya observer tidak diekseskusi terus menerus
  observer.unobserve(entry.target);
};

const sectionObserver = new IntersectionObserver(revealSection, {
  rot: null,
  threshold: 0.1,
});

allSections.forEach((section) => {
  sectionObserver.observe(section);
  section.classList.add('section--hidden');
});

Hasilnya sebagai berikut :

Sticky Element - JavaScript & CSS

boibolang — Sun, 09 Jun 2024 08:08:25 +0000

Halo semua, 2 bulan ini absen posting dikarenakan kesibukan yang padat. Mari kita mulai belajar lagi seputar JavaScript dan CSS, kali ini kita akan membahas dan membuat sticky element. Sticky element paling sering kita temukan pada navigation bar sebuah website, ada banyak cara untuk membuat sticky element, pada postingan kali ini kita akan membuat dengan 2 cara berbeda. Langsung saja kita buat file index.html, app.js dan style.css

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky Navigation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <div class="nav">
        <div class="logo">LOGO</div>
        <ul class="menu">
          <li><a href="#" class="section-1">Section 1</a></li>
          <li><a href="#" class="section-2">Section 2</a></li>
          <li><a href="#" class="section-3">Section 3</a></li>
          <li><a href="#" class="section-4">Section 4</a></li>
        </ul>
      </div>
      <div class="title">
        <h1>This is header</h1>
      </div>
    </header>
    <section class="section" id="section-1">This is section 1</section>
    <section class="section" id="section-2">This is section 2</section>
    <section class="section" id="section-3">This is section 3</section>
    <section class="section" id="section-4">This is section 4</section>

    <script src="app.js"></script>
  </body>
</html>

style.css

/* file: style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.title {
  height: 900px;
  background-color: cornflowerblue;
}

.nav {
  height: 50px;
  width: 100%;
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.nav .logo {
  padding-left: 20px;
}

.nav ul {
  display: flex;
}

.nav ul li {
  list-style: none;
  padding-right: 20px;
}

.nav ul li a {
  text-decoration: none;
}

.section {
  height: 900px;
  font-size: 50px;
}

.section:nth-child(odd) {
  background-color: greenyellow;
}

.section:nth-child(even) {
  background-color: burlywood;
}

.nav.sticky {
  position: fixed;
}

Sticky Element Cara Pertama

Kita isi dulu file app.js dengan implementasi smooth scrolling pada materi yang pernah kita bahas disini

// file: app.js

const selectors = {
  linkSection1: document.querySelector('.section-1'),
  linkSection2: document.querySelector('.section-2'),
  linkSection3: document.querySelector('.section-3'),
  linkSection4: document.querySelector('.section-4'),
  section1: document.querySelector('#section-1'),
  section2: document.querySelector('#section-2'),
  section3: document.querySelector('#section-3'),
  section4: document.querySelector('#section-4'),
  navbar: document.querySelector('.nav'),
};

// Smooth scrolling
selectors.linkSection1.addEventListener('click', () => {
  selectors.section1.scrollIntoView({ behavior: 'smooth' });
});
selectors.linkSection2.addEventListener('click', () => {
  selectors.section2.scrollIntoView({ behavior: 'smooth' });
});
selectors.linkSection3.addEventListener('click', () => {
  selectors.section3.scrollIntoView({ behavior: 'smooth' });
});
selectors.linkSection4.addEventListener('click', () => {
  selectors.section4.scrollIntoView({ behavior: 'smooth' });
});

Hasilnya kurang lebih sebagai berikut

Kita ingin pada saat masuk ke Section 1 dan seterusnya, navigation bar-nya muncul. Kurang lebih logic-nya sebagai berikut :

Dapatkan koordinat atas (top) Section 1 terhadap koordinat window
Jika koordinat window lebih dari koordinat atas (top) Section 1 maka munculkan navigation bar

Mari kita implementasikan pada file app.js

// Sticky navbar cara pertama
// 1. Sticky navigation muncul pada saat section 1 tampil, maka harus kita dapatkan koordinat Y section 1
const section1Coord = selectors.section1.getBoundingClientRect();
console.log('Section 1 top:', section1Coord.top);

// 2.Jika tampilan koordinat Y window lebih dari koordinat Y section 1 maka sticky nav muncul
window.addEventListener('scroll', () => {
  console.log(window.scrollY);
  if (window.scrollY > section1Coord.top) selectors.navbar.classList.add('sticky');
  else selectors.navbar.classList.remove('sticky');
});

Jika kita inspect halaman, berapa sih koordinat atas (top) section 1 sebenarnya ? Dari kode diatas didapatkan bahwa jarak atas (top) Section 1 terhadap window adalah 950 pixel. Hal ini sebenarnya bisa kita hitung dari tinggi header (900 px) + tinggi navigation bar (50 px).

Maka dengan logic diatas jika window scroll lebih dari 950 pixel maka navigation bar akan muncul, hasilnya sebagai berikut

Metode ini tidak cocok dipakai untuk skala besar karena scroll akan aktif terus menerus selama halaman diakses, dapat menyebabkan performance issue.

Sticky Element Dengan Intersection Observer API

Apa pula itu Intersection Observer API ? Berikut penjelasan dari website MDN

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Penjelasan singkatnya adalah intersection observer API akan memonitor posisi target terhadap posisi dokumen. Prakteknya seperti apa ? Mari kita bahas.
Syntax intersection observer API adalah sebagai berikut

const observer = new IntersectionObserver(obsCallback, obsOptions).

opsCallback adalah fungsi/callback yang akan dieksekusi, sedangkan obsOptions adalah parameter yang digunakan.

obsOptions memiliki beberapa parameter

obsOptions = {
  root: 0,
  threshold: 0.1,
  rootMargin: '-50px'
}

root : adalah posisi dimana intersection dengan target terjadi, jika diisi dengan null artinya terhadap top-level viewport
threshold : adalah kapan akan muncul aksinya, bisa diisi dengan nilai tungal (dalam %) atau array. Jika kita isi 0.1 (sama dengan 10%) maka aksi akan muncul pada jarak 10% pada saat intersection terjadi atau 10% sebelum intersection berakhir
rootMargin : adalah batas (atas-bawah : height) dari element yang beririsan

Lengkapnya seperti ini

// Sticky navbar menggunakan intersection observer API

const obsCallback = (entries) => {
  entries.forEach((entry) => {
    console.log(entry);
  });
};
const obsOption = {
  root: null,
  threshold: 0.1,
  rootMargin: '-50px',
};
const observer = new IntersectionObserver(obsCallback, obsOption);
observer.observe(selectors.section1);

Perhatikan posisi berikut

Pada saat Section 1 masuk viewport sebesar 0.1 viewport, observer akan mendeteksi. Property yang penting untuk diingat adalah isIntersection dan intersectionRatio, pada console nilainya adalah true (isIntersection) dan 0.10105444490909576 (intersectionRatio). Jika kita scroll terus sebelum Section 1 habis sebesar 0.1 viewport, observer akan mendeteksi perubahan tapi kali ini nilai dari isIntersection adalah false dan intersectionRatio adalah 0.09617595374584198

Logic untuk implementasi kira-kira seperti ini
Kapan kita ingin navigation bar muncul ? Pada saat header sudah tidak terlihat, ini berarti property isIntersection bernilai false

// Sticky navigation bar menggunakan Intersection Observer API

const header = document.querySelector('header');
const navHeight = selectors.navbar.getBoundingClientRect().height;
const stickyNav = (entries) => {
  const [entry] = entries;

  if (!entry.isIntersecting) selectors.navbar.classList.add('sticky');
  else selectors.navbar.classList.remove('sticky');
};

const headerObserver = new IntersectionObserver(stickyNav, {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`,
});
headerObserver.observe(header);

Hasilnya sebagai berikut

Note : console log untuk intersection observer gambarnya kurang jelas, bisa dicoba sendiri di browser masing-masing

Tabbed Element- JavaScript & CSS

boibolang — Fri, 29 Mar 2024 00:18:01 +0000

Tabbed element adalah salah satu customized element dalam HTML, artinya element/component ini tidak disediakan langsung oleh HTML tapi dibuat sendiri sama seperti hamburger menu yang terkenal itu. Cara membuat tabbed element sebenarnya mudah, triknya adalah menyembunyikan (hide) elemen lain sementara elemen yang aktif dalam posisi terlihat (visible). Cara ini juga sama seperti yang digunakan untuk membuat pop-up window. Sebelum menuju kesana kita akan mempelajari dulu yang namanya DOM traversal.

DOM Traversal
DOM traversal adalah teknik untuk berpindah dan memanipulasi elemen-elemen HTML. DOM traversal sendiri kalau dibahas bisa panjang penjelasannya, disini saya akan bahas seperlunya saja. Ketika kita mempunyai sebuah halaman HTML, maka sebenarnya struktur halaman HTML tersebut terdiri dari hirarki-hirarki yang biasa dimodelkan dalam DOM tree. Contoh sebagai berikut :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <h1 id="header1"></h1>
    <p id="par1">This is text</p>
    <p id="par2">This is also text</p>
    <div class="container">
      <span>This is span</span>
      <p id="par3">This is text inside a container</p>
    </div>
    <script src="src/script.js"></script>
  </body>
</html>

DOM tree dari HTML diatas adalah sebagai berikut :

Hubungan tiap element dalam DOM tree diatas adalah sebagai berikut :

Atas dan bawah adalah hubungan parent dan children
Kiri dan kanan adalah hubungan siblings

DOM traversal memungkinkan kita mengakses elemen ke arah atas, bawah maupun kiri dan kanan.

Going downward : child
Untuk mengakses child element (arah awah) contohnya sebagai berikut :

// Going downwards
console.log(document.body.querySelectorAll('p'));
console.log(document.body.querySelector('p'));
console.log(document.querySelector('.container').childNodes);
console.log(document.querySelector('.container').children);

Hasilnya sebagai berikut :

Perintah querySelectorAll() dan childNodes akan menghasilkan sebuah NodeList sedangkan children akan menghasilkan sebuah HTMLCollection. Lalu apa bedanya ? NodeList adalah sebuah array yang mana kita bisa gunakan metode forEach() untuk mengekstrak elemen-elemen didalmnya, sedangkan HTMLCollection tidak bisa kita gunakan metode forEach() karena bukan array. Tapi kita bisa gunakan trik menggunakan spread operator untuk bisa mengakses elemen dalam HTMLCollection.

// Mengekstrak NodeList
console.log('===========');
const p = document.querySelectorAll('p');
p.forEach(element=>{
  console.log(element)
})

// Mengekstrak HTMLCollection
console.log('===========');
const collection = document.querySelector('.container').children;
[...collection].forEach(element=>{
  console.log(element)
})

Going upwards : parent/anchestor
Beberapa method untuk mengakses parent element sebagai berikut :

// Going upwards
console.log('===========');
console.log(document.querySelector('#par3').parentNode);
console.log(document.querySelector('#par3').parentElement);
console.log(document.querySelector('#par3').parentElement.parentElement);
console.log(document.querySelector('#par3').closest('.container'));

Hasilnya sebagai berikut :

Going sideways : siblings
Di javascript hanya bisa mengakses direct siblings/elements (1 langkah ke kiri dan ke kanan), kalau ingin mengakses beberapa langkah maka bisa digunakan chaining :

// Going sideways
console.log('===========');
console.log(document.querySelector('#par2').nextElementSibling);
console.log(document.querySelector('#par2').nextSibling);
console.log(document.querySelector('#par2').previousElementSibling);
console.log(document.querySelector('#par2').previousSibling);
console.log(document.querySelector('#par2').previousElementSibling.previousElementSibling);
console.log(document.querySelector('#par2').previousSibling.previousSibling);

Hasilnya sebagai berikut :

Kembali ke laptop
Berbekal pengetahuan mengenai DOM traversal diatas untuk membuat tabbed component maka kita siapkan kode sederhana sebagai berikut :
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tabbed Component</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="tab-component">
        <div class="tab-button">
          <button class="btn btn-1 button-active" data-tab="1">Tab 1</button>
          <button class="btn btn-2" data-tab="2">Tab 2</button>
          <button class="btn btn-3" data-tab="3">Tab 3</button>
        </div>
        <div class="tab-collection tab-content-1 tab-active">
          <h5>Main Content Tab 1</h5>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum voluptas nihil autem dolor laudantium recusandae nesciunt at, totam, ad dicta quisquam nemo rerum aliquam alias quis velit!
            Temporibus, beatae fugit.
          </p>
        </div>
        <div class="tab-collection tab-content-2">
          <h5>Main Content Tab 2</h5>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus aliquam totam doloribus deleniti neque ab consectetur minima cumque sapiente porro?</p>
        </div>
        <div class="tab-collection tab-content-3">
          <h5>Main Content Tab 3</h5>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quod nulla ex voluptatem minima assumenda culpa exercitationem hic consequuntur, dignissimos illum cum dolor praesentium,
            deleniti non. Et officiis laboriosam ad?
          </p>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-component {
  width: 800px;
}

.tab-button {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
}

.btn {
  width: 200px;
  height: 30px;
  border-radius: 9999px;
  border: none;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  cursor: pointer;
  background-color: cadetblue;
  color: wheat;
}

.button-active {
  transform: scale(1.3);
  background-color: cadetblue;
  color: wheat;
}

.tab-collection {
  height: 250px;
  line-height: 40px;
  font-size: 30px;
  padding: 10px;
  border-radius: 3px;
  display: none;
}

.tab-active {
  display: block;
  background-color: cadetblue;
  color: wheat;
}

script.js

'use strict';

const tabCollection = document.querySelectorAll('.tab-collection');
const btn = document.querySelectorAll('.btn');
const tabButton = document.querySelector('.tab-button');

tabButton.addEventListener('click', function (e) {
  const clicked = e.target.closest('.btn');
  console.log(clicked);
  console.log(clicked.dataset.tab); // Untuk memastikan nilai data-tab

  // Jika yang di-klik bukan button maka tidak akan menjalankan operasi apapun
  if (!clicked) return;

  // Menghilangkan class yang aktif di button dan tab
  btn.forEach((button) => button.classList.remove('button-active'));
  tabCollection.forEach((tab) => tab.classList.remove('tab-active'));

  // Mengaktifkan button
  clicked.classList.add('button-active');

  // Mengaktifkan tab content
  document.querySelector(`.tab-content-${clicked.dataset.tab}`).classList.add('tab-active');
});

Dan berikut adalah hasilnya :

Event Delegation - JavaScript

boibolang — Sun, 17 Mar 2024 04:13:56 +0000

Event delegation dalam JavaScript adalah suatu teknik untuk menangani event bubbling lebih efisien ? Apa itu event bubbling ? Sebelum kesana kita perlu paham dulu mengenai event capturing, bubbling dan propagation. Bubbling dan capturing adalah 2 fase dari propagation. Sederhananya bubbling adalah DOM traversal dari target ke root, sedangkan capturing adalah kebalikannya yaitu DOM traversal dari root ke target. Target adalah elemen yang dikenakan event (children), root adalah induk (parent) dari elemen yang dikenakan event. Misal kita punya kode html seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Event Delegation</title>
  </head>
  <body>
    <header>
      <ul>
        <li><a class="btn btnScroll1" href="#section-1">Section 1</a></li>
        <li><a class="btn btnScroll2" href="#section-2">Section 2</a></li>
        <li><a class="btn btnScroll3" href="#section-3">Section 3</a></li>
      </ul>
    </header>
    <section class="section" id="section-1">
      <p>This is section 1</p>
    </section>
    <section class="section" id="section-2">
      <p>This is section 2</p>
    </section>
    <section class="section" id="section-3">
      <p>This is section 3</p>
    </section>
    <script src="eventDel.js"></script>
  </body>
</html>

Jika kita mengaplikasikan click event misalnya kepada salah satu elemen button, maka gambarannya sebagai berikut :

Capturing sangat jarang digunakan sehingga kita akan fokus pada bubbling. Berikut kode JavaScript-nya :

'use strict';

const header = document.querySelector('header');
const button1 = document.querySelector('.btnScroll1');

function printHead() {
  console.log('header');
}
function printBtn() {
  console.log('button1');
}

button1.addEventListener('click', printBtn);
header.addEventListener('click', printHead);

Apabila kita klik tombol Section 1 maka hasil di console sebagai berikut :

Terlihat bahwa sebenarnya eksekusi event handler 'click' tidak hanya pada target saja (button1), tapi juga pada parent element (header) sehingga muncul keduanya di console. Bagaimana caranya supaya event handler hanya mengeksekusi target saja ? Kita gunakan event.stopPropagation() untuk mencegah event bubbling ke parent element sebagai berikut :

function printBtn(event) {
  event.stopPropagation();
  console.log('button1');
}

Terlihat bahwa console hanya menampilkan button1 dan tidak header. addEventListener sebenarnya memiliki 1 parameter terakhir selain event dan function yaitu bolean (tru/false). Parameter ini secara default bernilai false sehingga tidak perlu ditulis, jika diisi true maka akan mengaktifkan capturing phase dan menonaktifkan bubbling phase. Contohnya sebagai berikut :

function printHead() {
  console.log('header');
}
function printBtn() {
  console.log('button1');
}
button1.addEventListener('click', printBtn);
header.addEventListener('click', printHead, true);

Terlihat bahwa header akan muncul pertama kali sebelum button1 di console, ini dikarenakan capturing phase dieksekusi pada header kemudian turun ke button1 (target).

Oke sekarang kita masuk ke event delegation, apa itu event delegation ? Jadi semisal kita punya banyak sekali tombol navigasi dalam suatu div, bagaimana kita mengakses dan mengeksekusi tombol-tombol tersebut ?

Memakai perintah querySelectarAll() dan forEach seperti yang pernah kita lakukan pada contoh smooth scrolling. Cara ini efektif jika elemennya tidak banyak tapi akan sangat mempengaruhi performa jika elemennya terlalu banyak.
Memakai event delegation, dengan cara menyeleksi parent element (root) dan memastikan elemen (tombol) yang dieksekusi serta meng-assign (delegate) perintah kepada masing-masing tombol.

// Event delegation
// Menambahkan event listener ke parent element
document.querySelector('header').addEventListener('click', function (e) {
  e.preventDefault();

  // Memastikan elemen yang dieksekusi dan meng-assign perintah
  if (e.target.classList.contains('btn')) {
    const id = e.target.getAttribute('href');
    document.querySelector(id).scrollIntoView({
      behaviour: 'smooth',
    });
  }
});

Hasilnya sama dengan smooth scrolling seperti sebelumnya, namun kali ini dengan event delegation.

Smooth Scrolling - JavaScript & CSS

boibolang — Sun, 18 Feb 2024 14:44:36 +0000

Kali ini kita akan mendemokan smooth scrolling, yaitu efek beerganti posisi secara smooth/halus. Smooth scrolling sendiri bisa dibilang merupakan fitur wajib dalam sebuah halaman web, tentunya supaya efek smooth scroling terlihat, setting animation effect (pada Window 11) harus aktif, untuk versi window lain silahkan diaktifkan. Untuk Mac saya tidak tahu settingnya dimana sebab belum pernah pegang Macbook, yang jelas meskipun efek smooth scrolling pada browser sudah aktif namun jika animation effect pada sistem operasi tidak aktif maka percuma saja. Pada demo kali kita akan mencoba 3 jenis metode scrolling yaitu :

Scrolling biasa
Smooth scrolling cara lama
Smooth scrolling cara baru

Pertama-tama buatlah file html, css dan js. Untuk template kode file html dan css sebagai berikut.

index.html



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <ul>
        <li><button class="btnScroll1">Section 1</button></li>
        <li><button class="btnScroll2">Section 2</button></li>
        <li><button class="btnScroll3">Section 3</button></li>
      </ul>
    </header>
    <section class="section" id="section-1">
      <p>This is section 1</p>
    </section>
    <section class="section" id="section-2">
      <p>This is section 2</p>
    </section>
    <section class="section" id="section-3">
      <p>This is section 3</p>
    </section>
    <script src="smooth.js"></script>
  </body>
</html>

styles.css



:root {
  --color-primary: #fd424b;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

header {
  color: var(--color-primary);
  font-size: 30px;
  font-weight: bold;
  background-color: rgb(239, 245, 58);
  margin-top: 0px;
  top: 0;
  width: 100%;
  position: sticky;
  /* position: fixed; */
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin: 0 20px;
}

button {
  background-color: rgb(239, 245, 58);
  font-size: 20px;
  font-weight: bold;
}

button:hover {
  color: #fd424b;
  cursor: pointer;
}

.section {
  height: 1000px;
}

#section-1 {
  background-color: rgb(243, 125, 52);
}

#section-2 {
  background-color: rgb(173, 243, 52);
}

#section-3 {
  background-color: rgb(66, 150, 246);
}

p {
  font-weight: bold;
  font-size: 100px;
  padding-top: 34.667px;
}

Scrolling biasa
Scrolling dengan metode ini agak rumit, meskipun sudah jarang sekali dipakai (karena ada metode baru yang lebih sederhana) tapi saya pikir perlu sebagai dasar pemahaman. Metode scrolling ini membutuhkan koordinat (X dan Y, atau left dan top) posisi tujuan. Darimana kita bisa mendapatkan koordinat tersebut ? Dengan metode getBoundingClientRect(); kita bisa mengambil koordinat posisi yang kita inginkan. Berikut kode JavaScript-nya.



'use strict';

// Smooth scrolling
const btnScroll1 = document.querySelector('.btnScroll1');
const btnScroll2 = document.querySelector('.btnScroll2');
const btnScroll3 = document.querySelector('.btnScroll3');
const section1 = document.querySelector('#section-1');
const section2 = document.querySelector('#section-2');
const section3 = document.querySelector('#section-3');

btnScroll1.addEventListener('click', function (e) {
  const sect1coord = section1.getBoundingClientRect();
  console.log(sect1coord);
  console.log('left/top:', sect1coord.left, sect1coord.top);
});

Halaman web belum saya manipulasi, artinya posisi <section class="section" id="section-1> adalah pada posisi default, jika kita klik menu Section 1 hasilnya sebagai berikut.

Koordinat x/left bernilai 0 sedangkan koordinat y/top bernilai 34.6666 (dalam satuan pixel). Kenapa kita harus mengetahui kordinat tersebut ? Sebab koordinat itulah nanti yang akan menjadi posisi tujuan scrolling kita, kalau kita set koorniat x/y = 0/0 kan sama saja ? Benar jika posisi yang kita tuju berada pada posisi teratas, namun dengan semakin kompleksnya halaman web posisi scrolling tidak mesti menuju halaman paling atas. Sekarang mari kita implementasikan scrolling pada event handler diatas.



btnScroll1.addEventListener('click', function (e) {
  const sect1coord = section1.getBoundingClientRect();
  console.log(sect1coord);
  console.log('left/top:', sect1coord.left, sect1coord.top);

  // Scrolling
  window.scrollTo(sect1coord.left, sect1coord.top);
});

Apa yang terjadi ? Scrooling kita berfungsi tapi kenapa lompat-lompat ? Itu dikarenakan metode getBoundingClientRect(); bersifat relatif terhadap viewport, artinya koordinat x/y atau letf/top posisinya akan berubah sesuai dengan halaman web yang terlihat. Untuk mengatasinya bisa kita lakukan beberapa hal, yang pertama adalah mengubah posisi header pada file css dari sticky menjadi fixed, silahkan dicoba. Yang kedua adalah menyertakan posisi window scroll pada tujuan sebagai berikut.



btnScroll1.addEventListener('click', function (e) {
  const sect1coord = section1.getBoundingClientRect();
  console.log(sect1coord);
  console.log('left/top:', sect1coord.left, sect1coord.top);

  // Scrolling
  window.scrollTo(sect1coord.left + window.scrollX, sect1coord.top + window.scrollY);
});

Untuk smooth scrolling cara lama dan cara baru kita implementasikan ke Section 2 dan Section 3, kode programnya sebagai berikut.



btnScroll2.addEventListener('click', function (e) {
  const sect2coord = section2.getBoundingClientRect();

  // Smooth scrolling cara lama
  window.scrollTo({
    left: sect2coord.left + window.scrollX,
    top: sect2coord.top + window.scrollY,
    behavior: 'smooth',
  });
});

btnScroll3.addEventListener('click', function (e) {
  // Smooth scrolling cara baru
  section3.scrollIntoView({ behavior: 'smooth' });
});

Hasilnya adalah sebagai berikut.

Interaksi JavaScript dan CSS

boibolang — Sat, 17 Feb 2024 08:42:16 +0000

JavaScript dapat dipakai untuk memanipulasi property CSS dalam sebuah website sehingga menjadi lebih interaktif. Pertama buatlah file html, css dan tentu saja javascript sederhana sebagai berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Title</title>
  </head>
  <body>
    <header>This is header</header>
    <script src="note.js"></script>
  </body>
</html>

:root {
  --color-primary: #fd424b;
}

header {
  color: var(--color-primary);
  font-size: 30px;
  font-weight: bold;
}

Tampilan awal seperti berikut.

Berikut adalah contoh-contoh mainpulasi CSS dengan JavaScript.

Create html element
Untuk membuat elemen html digunakan perintah sebagai berikut.

const message = document.createElement('div'); // Membuat elemen
message.classList.add('cookie-message'); // Memberi nama class
message.innerHTML = 'This is cookie <button class="btn">Close</button>'; // Isi dari elemen <div> yang baru saja dibuat

Setelah elemen html yang diinginkan dibuat selanjutnya adalah menempatkan elemen tersebut. Beberapa metode untuk menempatkan elemen html sebagai berikut :

prepend : menempatkan elemen html sebelum elemen lainnya sebagai first-child
append : menempatkan elemen html setelah elemen lainnya sebagai last-child
before : menempatkan elemen html sebelum elemen lainnya sebagai sibling
after : menempatkan elemen html setelah elemen lainnya sebagai sibling

prepend
Dengan perintah sebagai berikut di javascript header.prepend(message); didapatkan hasil sebagai berikut.

Jika kita inspect halaman html tersebut, terlihat bahwa elemen <div> yang kita buat menjadi first-child dari <header>.

append
Dengan perintah sebagai berikut header.append(message); maka hasilnya sebagai berikut.

Kemana elemen <div> yang ada diatas <header> ? Kalau kita inspect halaman didapatkan sebagai berikut.

Benar bahwa perintah append membuat elemen menjadi last-child tapi kemanakah elemen <div> yang berada diatas <header> ? Jawabannya adalah karena elemen html yang kita buat merupakan live element jadi akan terus diupdate dan tidak bisa berada pada dua tempat sekaligus. Lantas bagaimana jika kita ingin menampilkan keduanya ? Gunakanlah perintah header.append(message.cloneNode(true)); maka didapat hasil sebagai berikut.

Perintah header.before(message); dan header.after(message); menghasilkan tampilan yang sama, hanya saja elemen html yang dihasilkan posisinnya akan berbeda sebagai berikut.

before dan after

Terlihat bahwa posisi div dan header adalah sejajar, dalam DOM disebut sebagai sibling. Silahkan dicoba sendiri untuk metode header.after(message); dan header.after(message.cloneNode(true));.

Delete html element
Tentunya elemen yang dibuat juga harus bisa dihapus. Kita akan menghapus elemen yang tadi dibuat dengan tombol, maka kita membutuhkan event driven method yaitu eventListener.

document.querySelector('.btn').addEventListener('click', function () {
  message.remove();
  // Sebelum adanya remove()
  // message.parentElement.removeChild(message);
});

CSS Style
Nilai maupun property dari CSS dapat kita manipulasi dengan JavaScript. Penulisan property di JavaScript untuk memanipulasi CSS menggunakan aturan camel case misalkan kita biasa menulis di CSS backgroud-color maka di JavaScript penulisannya menjadi backgrounddColor.

message.style.backgroundColor = '#5ec576';
message.style.width = '80%';

Mengambil nilai dari property CSS.

// Mengambil nilai style
console.log(message.style.color); // Tidak mengembalikan apa-apa
console.log(message.style.backgroundColor); // Output: rgb(94, 197, 118)

Mengapa console.log(message.style.color); tidak mengembalikan nilai apapun ? Itu dikarenakan nilai dari property CSS yang bisa diambil adalah jika CSS tersebut bertipe inline style, jika tidak maka dianggap tidak ada atau berada diluar (eksternal CSS). Supaya eksternal CSS bisa dikenali dan diambil nilai property-nya digunakan perintah sebagai berikut.

// Cara supaya bisa diambil nilai property jika bukan inline style
console.log(getComputedStyle(message).color); // Output: rgb(187, 187, 187)
console.log(getComputedStyle(message).height); // Output: 48.3333px

Hasil dari metode getComputedStyle berupa string untuk menjadikannya Number digunakan metode sebagai berikut.

// getComputedStyle menghasilkan string, gunakan Number.parseFloat
message.style.height = Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px';
console.log(getComputedStyle(message).height); // Output: 51.3229px

Kita juga bisa merubah custom property atau pre-defined property sebagai berikut.

// Merubah custom property style
document.documentElement.style.setProperty('--color-primary', 'blue');

Attribute
Untuk keperluan demo kita tambahkan logo dan button pada file html kita sehingga menjadi seperti ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Title</title>
  </head>
  <body>
    <header>This is header</header>
    <img data-version-number="3.0" designer="john" src="img/logo.png" alt="Bankist logo" class="nav__logo" id="logo" />
    <a class="nav__link--btn" href="#">Click</a>
    <script src="note.js"></script>
  </body>
</html>

Beberapa metode yang bisa kita pakai sebagai berikut.

// Mendapatkan nilai atribut
const logo = document.querySelector('.nav__logo');
console.log(logo.alt); // Output: Bankist logo
console.log(logo.src); // Output: http://127.0.0.1:5500/img/logo.png, absolute path
console.log(logo.getAttribute('src')); // Output: img/logo.png, relative path
console.log(logo.className); // Output: nav__logo

// Non-standard attribute: attribut yang dibuat sendiri tidak akan dikenali
console.log(logo.designer); // Output: undefined

// Cara supaya dikenali
console.log(logo.getAttribute('designer')); // Output: john

// Setting attribut
logo.alt = 'It is beautiful';
logo.setAttribute('company', 'bankbot');
console.log(logo.alt); // Output: It is beautiful
console.log(logo.getAttribute('company')); // Output: bankbot

const link1 = document.querySelector('.nav__link--btn');
console.log(link1.href); // Output: http://127.0.0.1:5500/index.html#
console.log(link1.getAttribute('href')); // Output: #

// Special atribut: data-
console.log(logo.dataset.versionNumber); // Output: 3.0

// Classes
logo.classList.add('c', 'j'); // Menambahkan class 'c' dan 'd'
// logo.classList.remove('c', 'j'); // Menghapus class
logo.classList.toggle('j'); // Menyembunyikan class 'j' sehingga tersisa class 'nav__logo' dan 'c'
console.log(logo.classList.contains('c')); // Output: true

// Jangan lakukan
// logo.className = 'bobi'; // Akan mengganti semua nama class

Timer - JavaScript

boibolang — Sun, 11 Feb 2024 03:49:06 +0000

JavaScript mermiliki 2 buah fungsi timer yaitu setTimeout dan setInterval. setTimeout hanya dieksekusi 1 kali selama rentang waktu yang ditentukan, sedangkan setInterval dieksekusi berkali-kali selama rentang waktu yang ditentukan.

setTimeout

setTimeout(function () {
  console.log('Hello');
}, 5000); // interval waktu dalam milidetik untuk mengeksekusi fungsi
console.log('Waitng...'); // kode ini akan ditampilkan lebih dahulu

Argumen fungsi pada setTimeout juga bisa diisi.

setTimeout(
  function (par1, par2) {
    console.log(`Here is ${par1} and ${par2}`);
  }, 1000, 'hammer', 'nail');

Membatalkan setTimeout dengan clearTimeout. clearTimeout membutuhkan argumen yaitu setTimeout yang akan dibatalkan, oleh karenanya dalam penggunaan clearTimeout, setTimeout harus disimpan dalam sebuah variabel.

const tool = function () {
  setTimeout((par1, par2) => console.log(`The tools: ${par1} and ${par2}`), 5000, ...par); // kode ini akan disimpan dalam register dan menunggu 5 detik untuk diekseskusi
};

const par = ['jigsaw', 'welder'];
tool();
console.log('Waiting...');
if (par.includes('jigsaw')) {
  clearTimeout(tool);
  console.log('setTimeout telah dibatalkan');
}

setInterval

setInterval(function () {
  const now = new Date();
  console.log(now.getSeconds()); // menampilkan nilai detik dari date
}, 1000); // dieksekusi setiap 1000 milidetik (1 detik)

setIntervaldengan parameter

setInterval(
  function (par1, par2) {
    const now = new Date();
    console.log(`${par1} dan ${par2}`, now.getSeconds());
  }, 1000,'hammer', 'jigsaw');

Membuat Timer dan Counter
Kita akan membuat sebuah aplikasi timer dan counter dengan memanfaatkan setIntervaldan clearInterval. Sebelumnya buatlah file html sederhana dengan 2 buah tombol. Saya membuatnya secara online dengan JSFiddle.

Timer

const btnStart = document.querySelector('.btnStart');
const btnStop = document.querySelector('.btnStop');
const text = document.querySelector('.text');

let startTimer; // variabel panampung setInterval harus berada pada global window object

btnStart.addEventListener('click', function () {
  startTimer = setInterval(function () {
    const now = new Date();
    text.textContent = `${now.getMinutes()}:${now.getSeconds()}`;
    console.log(`${now.getMinutes()}:${now.getSeconds()}`);
  }, 1000);
});

btnStop.addEventListener('click', function () {
  clearInterval(startTimer); // membersihkan variabel startTimer
  text.textContent = 'Timer Stop';
  console.log('Timer Stop');
});

Counter

const btnStart = document.querySelector('.btnStart');
const btnStop = document.querySelector('.btnStop');
const text = document.querySelector('.text');

let startTimer;
btnStart.addEventListener('click', function () {
  let time1 = 10;
  startTimer = setInterval(function () {
    text.textContent = `${time1}`;
    console.log(time1);
    if (time1 === 0) {
      clearInterval(startTimer);
      text.textContent = 'Timer Stop';
    }
    time1--;
  }, 1000);
});

btnStop.addEventListener('click', function () {
  clearInterval(startTimer);
  text.textContent = 'Timer Stop';
});

Note: video terakhir yang saya upload hasilnya kurang sempurna, silahkan dicoba sendiri kodenya

Number - JavaScript

boibolang — Fri, 09 Feb 2024 03:47:32 +0000

Angka (Number) dalam JavaScript diwakili dengan bilangan biner, oleh sebab itu sangat sulit menulis bilangan pecahan dalam JavaScript sehingga secara umum JavaScript tidak cocok untuk perhitungan keuangan dan scientific.
JavaScript memiliki 5 tipe data yang bisa menampung nilai :

string
number
boolean
object
function

JavaScript memiliki 6 tipe data object :

Object
Date
Array
String
Number
Boolean

JavaScript memiliki 2 tipe data yang tidak bisa menampung nilai :

null : tidak ada nilai atau untuk membersihkan nilai dari sebuah variabel
undefined : variabel yang dideklarasikan tapi belum diisi nilai, atau argumen fungsi yang tidak memiliki nilai

Sekarang akan kita bahas Number serta beberapa metode manipulasinya.

console.log(23 === 23.0); // Output: true
console.log(0.1 + 0.2); // Output: 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // Output: false

// Konversi string menjadi angka (number)
const str = '23';
console.log(typeof str); // Output: string
const str2 = Number(str);
console.log(typeof str2); // Output: number
console.log(+str); // Output: 23 (number)

// Parsing: mengubah bilangan ke bilangan lain
console.log(Number.parseInt('30px', 10)); // Output: 30, mengubah ke bilangan bulat (integer) base 10
console.log(Number.parseInt('e23', 10)); // Output: nan, karakter pertama bukan angka
console.log(Number.parseFloat('2.5rem')); // Output: 2.5, mengubah ke bilangan pecahan (float)
console.log(Number.parseInt('2.5rem')); // Output: 2, dibulatkan kebawah

// isNan: mengevaluasi apakah nilai BUKAN berupa angka
console.log(Number.isNaN(20)); // Output: false
console.log(Number.isNaN('20')); // Output: false
console.log(Number.isNaN(+'20x')); // Output: true, bukan angka. Konversi string ke angka tidak bisa dilakukan jika terdapat karakter bukan angka
console.log(Number.isNaN(23 / 0)); // Output: false

// isFinite: mengevaluasi apakah nilai berupa angka
console.log(Number.isFinite(20)); // Output: true
console.log(Number.isFinite('20')); // Output: false
console.log(Number.isFinite(+'20x')); // Output: false
console.log(Number.isFinite(23 / 0)); // Output: false

// isInteger: mengevaluasi apakah nilai berupa bilangan bulat
console.log(Number.isInteger(23)); // Output: true
console.log(Number.isInteger(23.0)); // Output: true
console.log(Number.isInteger(23.004)); // Output: false
console.log(Number.isInteger(23 / 0)); // Output: false

MATH OBJECT

// sqrt
console.log(Math.sqrt(25)); // Output: 5
console.log(25 ** (1 / 2)); // Output: 5
console.log(8 ** (1 / 3)); // Output: 2

// min - max
console.log(Math.max(5, 34, 56, 12, 34, 67)); // Output: 67
console.log(Math.max(5, 34, 56, 12, 34, '67')); // Output: 67, otomatis mengkonversi string menjadi angka
console.log(Math.max(5, '34px', 56, 12, 34, 67)); // Output: nan, terdapat karakter bukan angka dalam kumpulan nilai

console.log(Math.min(5, 34, 56, 12, 34, 67)); // Output: 5
console.log(Math.min('5', 34, 56, 12, 34, 67)); // Output: 5, otomatis mengkonversi string menjadi angka
console.log(Math.min(5, '34px', 56, 12, 34, 67)); // Output: nan, terdapat karakter bukan angka dalam kumpulan nilai

// bilangan konstan PI
console.log(Math.PI * Number.parseFloat('10px') ** 2); // Output: 314.1592653589793

// pembulatan
console.log(Math.trunc(50.7)); // Output: 50, pembulatan kebawah
console.log(Math.round(23.7)); // Output: 24, pembulatan keatas untuk desimal lebih dari 0.5
console.log(Math.round(23.2)); // Output: 23, pembulatan kebawah untuk desimal kurang dari 0.5
console.log(Math.ceil(23.7)); // Output: 24, pembulatan keatas berapapun nilai desimal
console.log(Math.ceil('23.2')); // Output: 24, pembulatan keatas berapapun nilai desimal
console.log(Math.floor(23.7)); // Output: 23, pembulatan kebawah berapapun nilai desimal
console.log(Math.floor('23.2')); // Output: 23, pembulatan kebawah berapapun nilai desimal

// trunc dan floor menghasilkan nilai sama untuk bilangan positif, tapi berbeda untuk bilangan negatif
console.log(Math.trunc(-50.7)); // Output: -50
console.log(Math.floor(-50.7)); // Output: -51

// random: nilai random antara 0 dan 1 (tidak pernah bernilai 0 ataupun 1)
console.log(Math.trunc(Math.random() * 6) + 1); // Output: bilangan acak 1 sampai dengan 6 (termasuk 1 dan 6)

const random = (min, max) => Math.trunc(Math.random() * (max - min) + 1) + min;
console.log(random(10, 20)); // Output: bilangan acak antara 10 dan 20 (termasuk 10 dan 20)

// toFixed(): mengembalikan nilai berupa string
console.log((2.7).toFixed(0)); // bulat desimal, Output: 3
console.log(typeof (2.7).toFixed(0)); // Output: string
console.log((2.7).toFixed(3)); // 3 angka di belakang koma, Output: 2.700
console.log((2.7342342).toFixed(3)); // 3 angka di belakang koma, Output: 2.734
console.log(+(2.7342342).toFixed(3)); // konversi menjadi number, Output: 2.734
console.log(typeof +(2.7).toFixed(0)); // Output: number

// remainder operator (%): sisa hasil bagi
console.log(5 % 2);
const isEven = (n) => n % 2 === 0;
console.log(isEven(9)); // Output: false
console.log(isEven(4)); // Output: true

// numeric separator
const diameter = 233_000_000_000;
console.log(diameter); // Output: 233000000000
const priceCent = 345_565;
console.log(priceCent); // Output: 345565

const PI = 3.14_15;
console.log(PI); // Output: 3.1415

console.log(Number('23_000')); // Output: nan, karena terdapat karakter string
console.log(parseInt('23_000')); // Output: 23

BIGINT
BigInt diperkenalkan pada ECMASCRIPT 2020, digunakan untuk menyimpan angka yang bernilai besar yang tidak bisa diwakili oleh Number. Dalam JavaScript angka diwakili oleh bilangan biner 64 bit, hanya 53 bit yang digunakan sisanya digunakan untuk penanda desimal dan bilangan negatif.
BigInt dibuat dengan cara memanggil fungsi BigInt() atau menambahkan huruf n di akhir angka. BigInt tidak bisa dimanipulasi dengan metode Object Math dan juga tidak bisa dicampur operasinya dengan Number.

// angka maksimum yang bisa ditangani oleh Number
console.log(2 ** 53 - 1); // Output: 9007199254740991
console.log(Number.MAX_SAFE_INTEGER); // Output: 9007199254740991

Apa yang terjadi jika kita menambahkan angka melebihi MAX_SAFE_INTEGER ?

console.log(9007199254740991); // Output: 9007199254740991
console.log(90071992547409912); // Output: 90071992547409920
console.log(900719925474099123); // Output: 900719925474099100

Bisa dilihat nilainya sudah tidak valid lagi, pada bagian inilah BigInt mengambil peran. Jika kita menggunakan BigInt maka hasilnya sebagai berikut.

console.log(9007199254740991); // Output: 9007199254740991
console.log(90071992547409912n); // Output: 90071992547409912n
console.log(900719925474099123n); // Output: 900719925474099123n

console.log(543463209829074892734826427864725476); // number, Output: 5.434632098290749e+35
console.log(543463209829074892734826427864725476n); // BigInt, Output: 543463209829074892734826427864725476n
console.log(BigInt(543463209829074892734826427864725476)); // BigInt konversi dari Number, Output: 543463209829074906066561013957787648n

Perhatikan pada contoh diatas bahwa ada ada perbedaan hasil ketika membuat BigInt langsung dan ketika menggunakan konversi dari Number. Maka disarankan untuk membuat BigInt dengan memberi akhiran n pada Number daripada dengan fungsi BigInt.

const huge = 13412323432432432423543543n;
const num = 23;
console.log(huge * num); // Output: error, BigInt tidak bisa dicampur operasinya dengan Number
console.log(huge * BigInt(num)); // Output: 308483438945945945741501489n

console.log(20n > 15); // Output: true
console.log(20n === 20); // Output: false
console.log(20n == 20); // Output: true
console.log(20n == '20'); // Output: true
console.log(huge + ' is REALLY BIG NUMBER'); // Output: 13412323432432432423543543 is REALLY BIG NUMBER

Array - JavaScript

boibolang — Sun, 04 Feb 2024 12:22:25 +0000

Array adalah kumpulan nilai yang memiliki index berurutan (dimulai dai index ke-0), hampir semua bahasa pemrograman memiliki tipe data array atau tipe data yang perlakuannya mirip dengan array. Berikut adalah beberapa metode yang bisa diterapkan ketika bekerja dengan array.
Slice

/**
 * slice: mengakses array tanpa merubah isi array
 * slice tidak merubah array asal
 */

let arr = ['abigail', 'boston', 'cincinnati', 'duck', 'elephant'];
console.log(arr.slice(2)); // Output: ['abigail', 'boston', 'cincinnati']
console.log(arr.slice(1, 3)); // Output: ['boston', 'cincinnati']
console.log(arr.slice(-2)); // Ambil 2 element terakhir, Output: ['duck', 'elephant]
console.log(arr.slice(1, -2)); // Ambil element ke-1 sampai dengan sebelum 2 element terakhir, Output: ['boston', 'cincinnati]

// Ketiga kode dibawah menghasilkan output yang sama yaitu array arr itu sendiri
console.log(arr.slice());
console.log(arr);
console.log([...arr]);

Splice

/**
 * splice: menambah/mengurangi element array
 * splice menghasilkan array baru, merubah array asal
 */

let arr2 = ['apple', 'bamboo', 'chocolate', 'dumb', 'eel'];
arr2.splice(1, 0, 'lemon', 'orange'); // Pada index ke-1, tambahkan elemen 'lemon' dan 'orange'
console.log(arr2); // Output: ['apple', 'lemon', 'orange', 'bamboo', 'chocolate', 'dumb', 'eel']
arr2.splice(3, 2); // Pada index ke-3 hapus 2 element
console.log(arr2); // Output: ['apple', 'lemon', 'orange', 'dumb', 'eel']
arr2.splice(-2); // Hapus 2 element terakhir
console.log(arr2); // Output: ['apple', 'lemon', 'orange']
arr2.splice(2); // Sisakan 2 element pertama, hapus yang lain
console.log(arr2); // Output: ['apple', 'lemon']

Reverse

/**
 * reverse: merubah urutan array
 * reverse merubah array asal
 */

let arr3 = ['leonardo', 'donatello', 'raphael', 'michaelangelo'];
arr3.reverse();
console.log(arr3); // Output: ['michaelangelo', 'raphael', 'donatello', 'leonardo']

Concat

/**
 * concat: menggabungkan isi 2 buah array
 * concat tidak merubah array asal
 */

let arr4 = [1, 2, 3, 4, 5];
let arr5 = ['pizza', 'mozarella', 'spaghetti', 'risotto'];
const arr6 = arr4.concat(arr5);
console.log(arr6); // Output: [1, 2, 3, 4, 5, 'pizza', 'mozarella', 'spaghetti', 'risotto']
console.log([...arr4, ...arr5]); // Bisa juga dengan spread, hasilnya sama seperti diatas

Join

/**
 * join: menggabungkan isi didalam array dengan/tanpa parameter/karakter
 * join tidak merubah array asal, tetapi hasilnya berupa string bukan array
 */

console.log(arr6.join('-')); // Output: 1 - 2 - 3 - 4 - 5 - pizza - mozarella - spaghetti - risotto
console.log(arr6.join()); // default pemisah adalah tanda koma (,) Output: 1,2,3,4,5,pizza,mozarella,spaghetti,risotto

/**
 * at: menunjuk isi array pda elemen tertentu
 */

let arr7 = [23, 24, 25, 50];
console.log(arr7[1]); // Output: 24
console.log(arr7.at(1)); // Output: 24

// Mendapatkan element terakhir dari array
console.log(arr7[arr7.length - 1]); // Output: 50
console.log(arr7.slice(-1)); // Output: 50
console.log(arr7.at(-1)); // Output: 50

Iterasi

// foreach
const arr8 = [23, -45, 56, 35, -67, -43, 56];
arr8.forEach(function (value, key, map) {
  // parameter map dapat tidak ditulis
  if (value > 0) {
    console.log(`${key}: ${value} (positif)`);
  } else {
    console.log(`${key}: ${value} (negatif)`);
  }
});

// for-of
for (const [key, value] of arr8.entries()) {
  if (value > 0) {
    console.log(`${key}: ${value} (positif)`);
  } else {
    console.log(`${key}: ${value} (negatif)`);
  }
}

Hasil dari kode program for-of sama dengan forEach diatas.

// foreach dengan map
const abbr = new Map([
  ['HP', 'Harry Potter'],
  ['HG', 'Hermione Granger'],
  ['RW', 'Ron Weasley'],
]);
abbr.forEach(function (value, key) {
  console.log(`${key}: ${value}`);
});

// foreach dengan set
const currencies = new Set(['USD', 'GBP', 'JPY', 'EUR', 'IDR', 'GBP']);
currencies.forEach(function (value, _) {
  // Karena set hanya berisi pasangan value-value maka parameter kedua pada foreach diisi '_' karena wajib ada
  console.log(`${value}`); // Output: USD GBP JPY EUR IDR
});

Data Transformation: map, filter, reduce

// map: memanipulasi elemen array, mengembalikan array baru sehingga harus disimpan dalam varabel baru
const ppn = 1.11;
const harga = [12000, 15000, 16000, 20000, 25000, 35000];
const hargaPpn = harga.map(function (value) {
  return value * ppn;
});
console.log(hargaPpn);

// filter: mem-filter elemen array, mengembalikan array baru sehingga harus disimpan dalam varabel baru
const hargaBaru = harga.filter(function (value) {
  return value > 17000;
});
console.log(hargaBaru);

// reduce: mengembalikan nilai tunggal
const hargaAll = harga.reduce(function (acc, value, i) {
  console.log(`Iteration ${i}: ${acc}`);
  return acc + value;
}, 0); // 0: nilai awal accumulator
console.log(hargaAll); // Output: 123000

// reduce untuk mencari nilai maksimum dalam sebuah array
const max = harga.reduce(function (acc, value) {
  if (acc > value) return acc;
  else return value;
}, harga[0]);
console.log(max); // Output: 35000

Beberapa metode array yang lain.

// find: mengembalikan elemen array berdasarkan kondisi, hanya elemen yang pertama kali ditemukan akan dikembalikan
const hargaBig = harga.find((value) => value > 20000); // menggunakan arrow function, return keyword tidak perlu ditulis jika hasilnya hanya satu baris
console.log(hargaBig); // Output: 25000

// includes: mengembalikan nilai boolean (true/false) jika ditemukan elemen yang sesuai
console.log(harga.includes(16000)); // Output: true
console.log(harga.includes(50000)); // Output: false

// some: mengembalikan nilai true jika kondisi terpenuhi meskipun hanya satu
console.log(harga.some((value) => value > 25000)); // Output: true

// every: mengembalikan nilai true hanya jika semua kondisi terpenuhi
console.log(harga.every((value) => value > 25000)); // Output: false
console.log(harga.every((value) => value > 10000)); // Output: true

// flat: menghilangkan pemisah dalam nested array sehingga menjadi satu kesatuan array
const arr9 = [[1, 2, 3], [4, 5, 6], 7, 8];
console.log(arr9.flat()); // Output: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

const arr10 = [[[1, 2], 3], [4, [5, 6]], 7, 8];
console.log(arr10.flat()); // menghilangkan pemisah array 1 dimensi, Output: [ [1, 2], 3, 4, [5, 6], 7, 8 ]
console.log(arr10.flat(2)); // menghilangkan pemisah array 2 dimensi, Output: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

// flatMap: memanipulasi semua elemen array (map) dan menciptakan array 1 level (flat) baru
const flMp = arr9.flat().flatMap(function (value) {
  return value * 2;
});
console.log(flMp); // Output: [ 2, 4, 6, 8, 10, 12, 14, 16 ]

// sort: mengurutkan array, merubah array asal
const penumpang = ['Harry', 'Hermione', 'Herman', 'Hadi', 'Hardi'];
console.log(penumpang.sort()); // Output: [ "Hadi", "Hardi", "Harry", "Herman", "Hermione" ]
console.log(penumpang); // Output: // Output: [ "Hadi", "Hardi", "Harry", "Herman", "Hermione" ]

const arr11 = [2, 4, 5, 6, 9, 12, 45, 32, 78];
console.log(arr11.sort()); // isi dari arr11 dianggap sebagai string sehingga hasilnya: [ 12, 2, 32, 4, 45, 5, 6, 78, 9 ]

// cara yang benar
arr11.sort(function (a, b) {
  if (a > b) return 1;
  if (a < b) return -1;
});
console.log(arr11); // Output: [ 2, 4, 5, 6, 9, 12, 32, 45, 78 ]
arr11.sort((a, b) => a - b);
console.log(arr11); // Output: [ 2, 4, 5, 6, 9, 12, 32, 45, 78 ]
arr11.sort((a, b) => b - a);
console.log(arr11); // Output: [ 78, 45, 32, 12, 9, 6, 5, 4, 2 ]

// new Array(): menciptakan array baru
const arr12 = new Array(7); // menciptakan array kosong 1 dimensi dengan 7 elemen
console.log(arr12); // Output: [ <7 empty slots> ]

// fill: mengisi elemen array, merubah array asal
arr12.fill(2); // mengisi semua elemen array dengan angka 2
console.log(arr12); // Output: [ 2, 2, 2, 2, 2, 2, 2 ]
arr12.fill(1, 3); // mengisi dengan angka 1 mulai elemen ke-3
console.log(arr12); // Output: [ 2, 2, 2, 1, 1, 1, 1 ]
arr12.fill(4, 3, 5); // mengisi dengan angka 4 mulai elemen ke-3 sampai dengan sebelum elemen ke-5
console.log(arr12); // Output: [ 2, 2, 2, 4, 4, 1, 1 ]

// from: menciptakan array baru
const arr13 = Array.from({length: 7}, () => 3); // menciptakan array 1 dimensi dengan 7 elemen berisi angka 3
console.log(arr13); // Output: [ 3, 3, 3, 3, 3, 3, 3 ]
const arr14 = Array.from({length: 7}, (_, i) => i + 1); // menciptakan array 1 dimensi dengan 7 elemen, tiap elemen berisi index array + 1
console.log(arr14); // Output: [ 1, 2, 3, 4, 5, 6, 7 ]