update

Author: last-endcode

async_JS/01_setup.js

@@ -0,0 +1,13 @@
+// JS is single threaded, synchronous language
+console.log('one');
+console.log('two');
+console.log('three');
+stillProcess();
+console.log('fours');
+
+function stillProcess() {
+  for (let i = 0; i < 1000; i++) {
+    console.log(`still processs....`);
+  }
+  console.log('done');
+}

async_JS/02_recipes-example.js

@@ -0,0 +1,20 @@
+// make soup
+// boil wate 10 min
+// chop onion
+// add carrots boil for 5 min
+// chop carrots
+// add onion boil for 5 min
+
+boilWaters(1000);
+console.log('chop onion');
+boilWaters(5000);
+console.log('chop carrots');
+boilWaters(5000);
+
+function boilWaters(time) {
+  console.log(`boiling....`);
+  for (let i = 0; i < time; i++) {
+    console.log('still not done');
+  }
+  console.log('done...');
+}

async_JS/03_asynchronous.js

@@ -0,0 +1,27 @@
+// make soup
+// boil wate 10 min
+// chop onion
+// add carrots boil for 5 min
+// chop carrots
+// add onion boil for 5 min
+
+// disini dia mencetak
+// boil wate.....
+// chop onion.....
+// kemudian still busy menghitung counter sampai 10000
+// jika sudah baru menuju ke setTimeout done
+// karena javascript membaca perbaris line by line
+// mau bolWaters(0), atau 1000 dia tetap membaca baris perbaris
+// jadi ketika loop selesai otomatis setTimeout berjalan terakhir
+boilWaters(0);
+console.log('chop onion');
+for (let i = 0; i < 1000; i++) {
+  console.log('still busy....');
+}
+
+function boilWaters(time) {
+  console.log(`boil wate.....`);
+  setTimeout(() => {
+    console.log('done');
+  }, time);
+}

async_JS/04_callback_hell..js

@@ -0,0 +1,37 @@
+// callback hell
+
+boilWater();
+console.log(`chop carrot`); // yg kedua dijalankan
+
+function boilWater() {
+  console.log(`boiling....`); //prtama dijalankan krna invoke
+  // 1
+  setTimeout(() => {
+    console.log(`done...`); // dia running ke 3
+    console.log(`add carrot`); // dia running ke 4
+    //2
+    setTimeout(() => {
+      console.log(`carrot done`); //dia running ke 6
+      console.log(`add onion`); //dia running ke 7
+      //3
+      setTimeout(() => {
+        console.log(`onion done`); /// dan terakhir adalah done
+      }, 10000); // waiting onion... 10 detik sebelum masuk sini
+      console.log(`waiting onion.....`); //dia running ke 8 dan mnunggu 10 detik setTimeout ke 3
+    }, 10000); // chop onions.. waiting 10detik sebelum masuk kesini
+    console.log(`chop onions...waiting`); //dia running ke 5 dan mnunggu 10 detik setTimeout ke 2
+  }, 100);
+}
+
+// Notes:
+/*
+boiling....
+chop carrot
+done...
+add carrot
+chop onions...waiting //setTimeout 1 mnunggu 5detik
+carrot done
+add onion
+waiting onion..... //setTimeout 2 mnunggu 5detik
+onion done
+*/

async_JS/05_callback_hellDOM.js

@@ -0,0 +1,19 @@
+// callback dom
+
+const heading1 = document.querySelector('.one');
+const heading2 = document.querySelector('.two');
+const heading3 = document.querySelector('.three');
+
+const btn = document.querySelector('.btn');
+
+btn.addEventListener('click', function () {
+  setTimeout(() => {
+    heading1.style.color = 'red';
+    setTimeout(() => {
+      heading2.style.color = 'green';
+      setTimeout(() => {
+        heading3.style.color = 'blue';
+      }, 3000);
+    }, 2000);
+  }, 1000);
+});

async_JS/06_promises.js

@@ -0,0 +1,40 @@
+// callbacks, promises, async/await
+// promises - pending, resolved, rejected
+// then catch - pass another callback
+const heading1 = document.querySelector('.one');
+const heading2 = document.querySelector('.two');
+const heading3 = document.querySelector('.three');
+
+const btn = document.querySelector('.btn');
+
+btn.addEventListener('click', () => {});
+
+// promises pending
+// disini dia akan menghasilkan pending
+// const promise = new Promise((resolve, reject) => {});
+// console.log(promise);
+
+// promises
+// resolve, reject is callback function
+const promise = new Promise((resolve, reject) => {
+  let value = false;
+  if (value) {
+    resolve(`This will true value`);
+  } else {
+    reject(`Error i'm sorry... cause not true`);
+  }
+});
+
+// Tidak bisa mengakses sperti ini
+// console.log(promise.value); //undefined
+// solusi jika ingin tau sukses , or error for value
+// gunakan then (sucess), dan catch tuk error value
+// dan tuk callbackfunction massing2 tsb whatever
+// karena dia akan merujuk pada value yg true/false
+promise
+  .then((justTrue) => {
+    console.log(justTrue);
+  })
+  .catch((errrrr) => {
+    console.log(errrrr); //Error i'm sorry... cause not true
+  });

async_JS/index copy.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <style>
+    h1 {
+      text-align: center;
+      font-weight: bold;
+    }
+    .btn {
+      margin: 0 auto;
+      display: grid;
+      justify-content: center;
+      padding: 10px;
+      letter-spacing: 1.2px;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+  </style>
+  <body>
+    <h1>Asynchronous JavaScript</h1>
+    <h1 class="one">Heading ONE</h1>
+    <h1 class="two">Heading TWO</h1>
+    <h1 class="three">Heading THREE</h1>
+    <button class="btn">Change Colors</button>
+  </body>
+  <script src="./05_callback_hellDOM.js"></script>
+</html>

async_JS/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <style>
+    h1 {
+      text-align: center;
+      font-weight: bold;
+    }
+    .btn {
+      margin: 0 auto;
+      display: grid;
+      justify-content: center;
+      padding: 10px;
+      letter-spacing: 1.2px;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+  </style>
+  <body>
+    <h1>Asynchronous JavaScript</h1>
+    <h1 class="one">Heading ONE</h1>
+    <h1 class="two">Heading TWO</h1>
+    <h1 class="three">Heading THREE</h1>
+    <button class="btn">Change Colors</button>
+  </body>
+  <script src="./06_promises.js"></script>
+</html>