├── 01. Perkenalan JavaScript ├── index.html ├── main.js └── styles.css ├── 02. Variables ├── index.html ├── main.js └── styles.css ├── 03. Aritmatika Javascript ├── index.html ├── main.js └── styles.css ├── 04. User Input ├── index.html ├── main.js └── styles.css ├── 05. Type Conversation ├── index.html ├── main.js └── styles.css ├── 06. Const ├── index.html ├── main.js └── styles.css ├── 07. Math ├── index.html ├── main.js └── styles.css ├── 08. Mencari Hipotenusa pada segitiga ├── index.html ├── main.js └── styles.css ├── 09. Count Program ├── index.html ├── main.js └── styles.css ├── 10. Math Random ├── index.html ├── main.js └── styles.css ├── 11. Useful String Method ├── index.html ├── main.js └── styles.css ├── 12. String Slicing ├── index.html ├── main.js └── styles.css ├── 13. Chain Method ├── index.html ├── main.js └── styles.css ├── 14. If Statement ├── index.html ├── main.js └── styles.css ├── 15. Checkbox ├── index.html ├── main.js └── styles.css ├── 16. Switches ├── index.html ├── main.js └── styles.css ├── 17. And or Logical Operations ├── index.html ├── main.js └── styles.css ├── 18. Not Logical Operation ├── index.html ├── main.js └── styles.css ├── 19. While Loops ├── index.html ├── main.js └── styles.css ├── 20. do while Loops ├── index.html ├── main.js └── styles.css ├── 21. For Loop ├── index.html ├── main.js └── styles.css ├── 22. Break and Continue Statement ├── index.html ├── main.js └── styles.css ├── 23. Nested Loops ├── index.html ├── main.js └── styles.css ├── 24. Function ├── index.html ├── main.js └── styles.css ├── 25. Return Statement ├── index.html ├── main.js └── styles.css ├── 26. Tenary operators ├── index.html ├── main.js └── styles.css ├── 27. Var vs Let ├── index.html ├── main.js └── styles.css ├── 28. template literals ├── index.html ├── main.js └── styles.css ├── 29. Format Currency ├── index.html ├── main.js └── styles.css ├── 30. Number Guessing Game ├── index.html ├── main.js └── styles.css ├── 31. Temperature Convert ├── index.html ├── main.js └── styles.css ├── 32. Array ├── index.html ├── main.js └── styles.css ├── 33. Loop Di Array ├── index.html └── main.js ├── 34.Sorting dengan array ├── index.html └── main.js ├── 35. 2D Array ├── index.html └── main.js ├── 36. Spread Operators ├── index.html └── main.js ├── 37. Rest Parameters ├── index.html └── main.js ├── 38. Callbacks ├── index.html └── main.js ├── 39. Arrayforeach ├── index.html └── main.js ├── 40. Array Map ├── index.html └── main.js ├── 41. Array Filter ├── index.html └── main.js ├── 42. Array Reduce ├── index.html └── main.js ├── 43. Array Sorting ├── index.html └── main.js ├── 44. Array Function Expressions ├── index.html └── main.js ├── 45. Arrow Function ├── index.html └── main.js ├── 46. Shuffle An array ├── index.html └── main.js ├── 47. Nested Function ├── index.html └── main.js ├── 48. Map ├── index.html └── main.js ├── 49. Object ├── index.html └── main.js ├── 50. This ├── index.html └── main.js ├── 51. Class ├── index.html └── main.js ├── 52. Constructor ├── index.html └── main.js ├── 53. Static Keyword ├── index.html └── main.js ├── 54. Inheritence ├── index.html └── main.js ├── 55. Super Keyword ├── index.html └── main.js ├── 56. Getters and Setters ├── index.html └── main.js ├── 57. Object as argument ├── index.html └── main.js ├── 58. Array of Object ├── index.html └── main.js ├── 59. Anonymous Object ├── index.html └── main.js ├── 60. Errors ├── index.html └── main.js ├── 61. SetTimeout ├── index.html └── main.js ├── 62. SetInterval ├── index.html ├── main.js └── style.css ├── 63. Date Object ├── index.html └── main.js ├── 64. Clock Program ├── index.html ├── main.js └── style.css ├── 65. Synchronus And Asynchronus ├── index.html └── main.js ├── 66. ConsoleTime ├── index.html └── main.js ├── 67.Promise ├── index.html └── main.js ├── 68. Async ├── index.html └── main.js ├── 69. Await ├── index.html └── main.js ├── 70 .ES6Modules ├── index.html ├── main.js └── utility.js ├── 71. DOM ├── index.html └── main.js ├── 72. Element Selector ├── index.html └── main.js ├── 73. DOM Traverse ├── index.html └── main.js ├── 74. addchange HTML Element ├── index.html └── main.js ├── 75. AddChange CSS ├── index.html └── main.js ├── 76. Events ├── index.html ├── main.js └── style.css ├── 77. EventListener ├── index.html ├── main.js └── style.css ├── 78. ShowHide HTML ├── index.html ├── main.js ├── style.css └── zeta.jpg ├── 79. Detect Keys ├── index.html ├── main.js └── style.css ├── 80. Animation ├── index.html ├── main.js └── style.css ├── 81. CanvasAPI ├── index.html ├── main.js └── style.css ├── 82. Windows ├── index.html ├── main.js └── style.css ├── 83. Cookie ├── index.html └── main.js ├── 84. Stopwatch Program ├── index.html ├── main.js └── style.css ├── 85. batuguntingkertas ├── index.html ├── main.js └── style.css ├── 86. TicTacToe ├── index.html ├── main.js └── style.css └── README.md /01. Perkenalan JavaScript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

Selamat belajar Java Script

12 | 13 | 14 | -------------------------------------------------------------------------------- /01. Perkenalan JavaScript/main.js: -------------------------------------------------------------------------------- 1 | // Saat kita belajar JavaScript kalian Harus (namun tidak wajib) untuk belajar HTML Dan juga CSS terlebih dahulu supaya lebih mengerti dengan apa yang akan dijelaskan, dan jika sudah kalian juga harus mendownload Extansion Live Server (tidak wajib) untuk lebih memudahkan kalian dalam melihat hasil codingan kita nanti dengan lebih cepat karena menggunakan auto refresh. dan siapkan file bertipe "abcd.js". jika sudah semua disiapkan maka siapkan kopi dan lets go into code 2 | 3 | 4 | 5 | // Console.log adalah cara untuk kita menampilkan sesuatu di console suatu browser 6 | // Ketika text memilili "" dan '' itu disebut string 7 | // String di dalam JavaScript adalah tipe data yang terdiri dari kumpulan karakter yang berurutan. 8 | console.log ('I like pizza'); 9 | console.log ("its really good!"); 10 | 11 | alert('I REALLY LOVE PIZZA!'); //Alert digunakan untuk menampilkan teks di dalam browser menggunakan fitur alert di dalam browser 12 | -------------------------------------------------------------------------------- /01. Perkenalan JavaScript/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/01. Perkenalan JavaScript/styles.css -------------------------------------------------------------------------------- /02. Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 |

12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /02. Variables/main.js: -------------------------------------------------------------------------------- 1 | /* Variable adalah cara kita menyimpan value */ 2 | /* Sebuah variabel berperilaku seolah-olah itu adalah nilai yang dikandungnya */ 3 | 4 | /* 2 cara: */ 5 | /* 1. deklarasi (var, let, const) */ 6 | /* 2. Assignment ('=' Assignment operator) */ 7 | 8 | // Untuk sekarang kita menggunakan let dalam mendeklarasi variable 9 | 10 | let firstname = 'Rafael' //strings 11 | let age = 14; //numbers 12 | let student = true // ini yang kita sebut booleans yaitu data yang hanya terdapat 2 macam yaitu true = 1 & false = 0 13 | 14 | // Ini adalah contoh pemakai variable dalam javascript 15 | age = age + 1 //logika nya adalah umur kita = age dan age sendiri yaitu 14 dan ditambah +1 16 | 17 | 18 | console.log("hello", firstname) 19 | console.log("you are ",age, " years old") //jadi saat kita mengconsole.log age, age tersebut akan bertambah 1 20 | console.log("Enrolled:", student) 21 | 22 | //Ini adalah contoh advanced/kompleks penggunaan JavaScript & HTML 23 | // Jadi document.getelementById().innerHTML adalah cara kita memanipulasi element pada HTML dan mengubahnya dari javascript 24 | document.getElementById("p1").innerHTML = "hello "+ firstname 25 | document.getElementById("p2").innerHTML = "you are " + age + " years old" 26 | document.getElementById("p3").innerHTML = "Enrolled: "+ student 27 | -------------------------------------------------------------------------------- /02. Variables/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/02. Variables/styles.css -------------------------------------------------------------------------------- /03. Aritmatika Javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /03. Aritmatika Javascript/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | ekspresi aritmatika adalah kombinasi dari (nilai, variabel, dll.) 3 | operator (+ - * / %) yang dapat dievaluasi menjadi suatu nilai 4 | x y = x + 6*/ 5 | 6 | // Jika kita mendeklarasi students = 20 7 | let students = 20 8 | 9 | // Maka kita bisa menambah,mengurangi,kali,bagi 10 | // dengan cara : 11 | 12 | // students += 1 yang berarti students = students + 1 yang akan menjadi 21 13 | // students -= 1 yang berarti students = students - 1 yang akan menjadi 19 14 | // students *= 1 yang berarti students = students x 1 yang akan menjadi 20 15 | // students /= 2 yang berarti students = students : 2 yang akan menjadi 10 16 | 17 | 18 | console.log (students) 19 | 20 | /* Yang bisa dilakukan dalam opeasi ini: 21 | 1. Eksponen 22 | 2. Multiplication & Division 23 | 3. Penjumlahan & Pengurangan 24 | 4. Dalam kurung() */ 25 | 26 | // Contoh: 27 | let results = 3 + 10 * (2 * 2) 28 | console.log (results) 29 | 30 | 31 | -------------------------------------------------------------------------------- /03. Aritmatika Javascript/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/03. Aritmatika Javascript/styles.css -------------------------------------------------------------------------------- /04. User Input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04. User Input/main.js: -------------------------------------------------------------------------------- 1 | // Cara menggunakan User Input 2 | 3 | // ada 2 cara yaitu Easy Way & Hardway 4 | 5 | // Easyway adalah dengan cara menggunakan prompt 6 | // Sebagai Contoh : 7 | 8 | let username = prompt("Whats your name?") 9 | console.log(username) 10 | 11 | // Hardway adalah dengan cara menggunakan DOM (Data Orientation Manipulation) yaitu mengubah sesuatu pada HTML //menggunakan Java script 12 | // Sebagai Contoh : 13 | 14 | // getelementbyId(Id yang terdapat pada element HTML) kita akan membahasnya lebih dalam pada pertemuan selanjutnya 15 | document.getElementById("mybutton").onclick = function(){ 16 | username = document.getElementById ("mytext").value 17 | console.log (username) 18 | document.getElementById("mylabel").innerHTML = "Hello " + username; 19 | } -------------------------------------------------------------------------------- /04. User Input/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/04. User Input/styles.css -------------------------------------------------------------------------------- /05. Type Conversation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /05. Type Conversation/main.js: -------------------------------------------------------------------------------- 1 | // type conversation = mengubah tipe data suatu nilai ke yang lain (strings, angka, booleans) 2 | 3 | let age = prompt("how old are you") 4 | // Ketika kita memakai prompt, mau kita mengisinya dengan angka atau pun huruf. komputer akan selalu membacanya dengan tipe data string 5 | 6 | console.log (typeof age) // Pembuktian 7 | 8 | // Namun ketika kita memakai Number(Value) itu akan mengubah tipe data prompt yang tadinya string ke number 9 | age = Number(age) 10 | console.log (typeof age) 11 | // Kenapa jika kita ingin memasukkan angka ke prompt itu kita harus ganti ke tipe number? supaya kita bisa menggunakan operasi matematika dalam value prompt tersebut 12 | //contoh: 13 | 14 | age += 1 15 | console.log ("Selamat ulang tahun Umur mu sekarang "+ age + ". Selamat Ya!") // + dalam console log adalah cara kita menambahkan deklarasi var ke dalam baris kata 16 | 17 | // Contoh Lain dari penggunaan type conversation 18 | 19 | let x = Number(3.14) 20 | let y = String(3.14) 21 | let z = Boolean("pizza") // Tidak berisi value = false, Berisi value = true 22 | 23 | console.log (x , typeof x) 24 | console.log (y, typeof y) 25 | console.log (z, typeof z) -------------------------------------------------------------------------------- /05. Type Conversation/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/05. Type Conversation/styles.css -------------------------------------------------------------------------------- /06. Const/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /06. Const/main.js: -------------------------------------------------------------------------------- 1 | // Const = variable yang tidak bisa kita ubah nilainya 2 | 3 | // Contoh= 4 | /* const nama = "Rafael" 5 | const nama = "KitaubahmenjadiAsep" 6 | 7 | console.log(nama) */ 8 | // ini bisa terjadinya redeklarasi variable 'nama' dan malah berujung eror pada code maka dari itu const ada konstan dalam artian tidak bisa diubah 9 | 10 | // contoh kecil dari pemakai variable const: 11 | const PI = 3.14159 12 | let radius 13 | let kelilinglingkaran 14 | 15 | radius = prompt("Enter the radius of a circle") 16 | radius = Number(radius) 17 | 18 | // Pemakaian variable & prompt dalam rumus matematika : 19 | // Rumus 20 | kelilinglingkaran = 2 * PI * radius 21 | 22 | console.log ("Keliling Lingkaran adalah:", kelilinglingkaran) -------------------------------------------------------------------------------- /06. Const/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/06. Const/styles.css -------------------------------------------------------------------------------- /07. Math/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /07. Math/main.js: -------------------------------------------------------------------------------- 1 | // Matematika dalam JavaScript 2 | 3 | let x = 3.14 4 | let y = 8 5 | let z = 5 6 | let maximize 7 | let minimize 8 | 9 | // x = Math.round(x) Pembulatan misal x = 3.14 berarti menjadi 3 10 | // x = Math.floor(x) Pembulatan Terkecil misal x = 3.14 menjadi 3 11 | // x = Math.ceil(x) Pembulatan Terbesar misal x = 3.14 menjadi 4 12 | // x = Math.pow(x, 2) Power/Pecahan misal x = 3.14 menjadi 3.14^2 13 | // x = Math.sqrt (x, 2) Akar misal x = 4 menjadi √4 = 2 14 | // x = Math.abs(x) menjauhi angka <0 15 | 16 | // minimize = Math.min (x, y , z) Math.min adalah cara kita untuk mencari nilai terkecil dalam value misalnya x=3, y=8, z=5 maka Math.min(x, y, z) adalah 3 karena x = 3 (angka terkecil) 17 | 18 | // maximize = Math.max (x, y , z)Math.max adalah cara kita untuk mencari nilai terbesar dalam value misalnya x=3, y=8, z=5 maka Math.max(x, y, z) adalah 8 karena y = 8 (angka terbesar) 19 | 20 | x = Math.PI //Biar gak ribet x = 3.142...dst kita bisa memakai x = Math.PI (Math.PI adalah Phi namun lebih lengkap) 21 | 22 | // Melihat Nilai X 23 | console.log (x) 24 | -------------------------------------------------------------------------------- /07. Math/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/07. Math/styles.css -------------------------------------------------------------------------------- /08. Mencari Hipotenusa pada segitiga/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Pthagoras Segitiga

11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

19 | 20 |

21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /08. Mencari Hipotenusa pada segitiga/main.js: -------------------------------------------------------------------------------- 1 | //Pythagoras adalah Rumus mencari garis miring pada segitiga 2 | // dan juga kita akan menghitung 3 | // cara mencari Pythagoras adalah dengan memakai rumus a^2 * b^2 = c^2 yang bisa kita sederhanakan menjadi √a^2 * b^2 yang bisa kita lakukan didalam JavaScript dan kali ini kita menggunakan EasyWay dengan cara Prompt dan HardWay dengan cara DOM (Data Orientation Manipulation) 4 | 5 | 6 | // EASY WAY 7 | 8 | // Kita akan mendeklarasi variable terlebih dahulu 9 | let a 10 | let b 11 | let c 12 | //-------------------\\ 13 | 14 | // EASYWAY 15 | 16 | // Dan Langsung saja kita mengesekusi dengan memakai fitur javascript yaitu prompt() 17 | a = prompt ("Enter Side a") 18 | // dan ingat! pada prompt() mau kita menulisnya angka ataupun huruf, prompt otomotis membaca tipe nya adalah string maka dari itu kita harus mengubahnya ke tipe number dengan cara : 19 | a = Number(a) 20 | 21 | b = prompt ("Enter Side B") 22 | // dan ingat! pada prompt() mau kita menulisnya angka ataupun huruf, prompt otomotis membaca tipe nya adalah string maka dari itu kita harus mengubahnya ke tipe number dengan cara : 23 | b = Number(b) 24 | 25 | c = Math.pow(a , 2) + Math.pow (b , 2) 26 | c = Math.sqrt (c) 27 | 28 | alert (c) 29 | 30 | documentid = document.getElementById 31 | 32 | // HARD WAAY 33 | 34 | // Ini adalah contoh dari penggunaan DOM yaitu menggunakan document.getelementById() yang maksudnya adalah kita akan menambahkan fungsi atau fitur pada tombol,ketikan,input pada HTML dengan mencari Id yang terdapat pada HTML pada kasus ini kita akan menambahkan sesuatu fitur ketikan kita click pada button di HTML 35 | 36 | document.getElementById("submitbutton").onclick = function(){ 37 | //dari yang kita lihat disitu terdapat.onclick dan juga function(){}, .onclick sendiri adalah ketika button itu di click atau pada saat di click, dan function(){} adalah fungsi atau fitur, teruntuk function akan dijabarkan lebih detail pada pertemuan berikutnya 38 | 39 | // a = element html yang ber Id "inpA" 40 | a = document.getElementById("inpA").value //.value sendiri adalah Isi dari Inputan si Id "inpA" misalnya pada HTML kita isi 8 maka .value nya adalah 8 41 | a = Number(a) //Dan 8 ini kita akan ubah menjadi tipe data number karena kalau tidak 8 ini akan dibaca string dan tidak bisa dioperasikan dalam matematika 42 | 43 | // b = element html yang ber id "inpB" 44 | b = document.getElementById("inpB").value//.value sendiri adalah Isi dari Inputan si Id "inpb" misalnya pada HTML kita isi 4 maka .value nya adalah 4 45 | 46 | b = Number(b)//Dan 4 ini kita akan ubah menjadi tipe data number karena kalau tidak 4 ini akan dibaca string dan tidak bisa dioperasikan dalam matematika 47 | 48 | // Jadi kita sudah tau a = 8 dan b = 4 maka saat button yang ber id "submitbutton" di click maka si javascript ini akan membuat perhitungan ini: 49 | 50 | 51 | c = Math.pow(a , 2) + Math.pow (b , 2) 52 | c = Math.sqrt(c) 53 | //yang berarti a^2 x b^2 = √c 54 | 55 | // dan ketika semuanya sudah diesekusi maka kita akan melihat hasilnya dengan cara memakai DOM lagi, kita bisa memakai .innerHTML untuk menambahkan paragraph pada label Id Pada HTML, pada kasus ini kita menambahkan variable C jadi kesimpulannya kita menambahkan hasil pythagoras segitiga ke Label ber Id "resultc" 56 | document.getElementById("resultc").innerHTML = "C = " + c 57 | 58 | } 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /08. Mencari Hipotenusa pada segitiga/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/08. Mencari Hipotenusa pada segitiga/styles.css -------------------------------------------------------------------------------- /09. Count Program/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /09. Count Program/main.js: -------------------------------------------------------------------------------- 1 | let counter = 0 2 | 3 | document.getElementById("decrease").onclick = function(){ 4 | counter -= 1 5 | document.getElementById("count").innerHTML = counter 6 | } 7 | 8 | document.getElementById("reset").onclick = function(){ 9 | counter = 0 10 | document.getElementById("count").innerHTML = counter 11 | } 12 | 13 | document.getElementById("increase").onclick = function(){ 14 | counter += 1 15 | document.getElementById("count").innerHTML = counter 16 | } -------------------------------------------------------------------------------- /09. Count Program/styles.css: -------------------------------------------------------------------------------- 1 | #count{ 2 | text-align: center; 3 | display: block; 4 | font-size: 5em; 5 | } 6 | 7 | .labelbutton{ 8 | text-align: center; 9 | align-items: center; 10 | 11 | } -------------------------------------------------------------------------------- /10. Math Random/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |

13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /10. Math Random/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | document.getElementById("roll").onclick = function(){ 6 | x = Math.floor(Math.random() * 6) + 1 7 | y = Math.floor(Math.random() * 6) + 1 8 | z = Math.floor(Math.random() * 6) + 1 9 | 10 | document.getElementById("randomchancesX").innerHTML = x 11 | document.getElementById("randomchancesY").innerHTML = y 12 | document.getElementById("randomchancesZ").innerHTML = z 13 | } -------------------------------------------------------------------------------- /10. Math Random/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/10. Math Random/styles.css -------------------------------------------------------------------------------- /11. Useful String Method/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /11. Useful String Method/main.js: -------------------------------------------------------------------------------- 1 | let username = "Rafael pandu" 2 | let phonenumber = "123-456-789" 3 | 4 | // console.log(username.length) 5 | // console.log(username.charAt(0)) 6 | // console.log(username.indexOf('p')) 7 | // console.log (username.lastIndexOf('a')) 8 | // console.log (username.trim()) 9 | // username = username.toUpperCase(); 10 | // username = username.toLowerCase(); 11 | 12 | phonenumber = phonenumber.replaceAll("-", "/") 13 | console.log(phonenumber) 14 | console.log (username) -------------------------------------------------------------------------------- /11. Useful String Method/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/11. Useful String Method/styles.css -------------------------------------------------------------------------------- /12. String Slicing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /12. String Slicing/main.js: -------------------------------------------------------------------------------- 1 | let fullname = "Rafael Pandu" 2 | let firstname; 3 | let lastname; 4 | 5 | firstname = fullname.slice(0, fullname.indexOf(" ")) 6 | lastname = fullname.slice(fullname.indexOf(" ") + 1) 7 | 8 | console.log (firstname) 9 | console.log (lastname) -------------------------------------------------------------------------------- /12. String Slicing/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/12. String Slicing/styles.css -------------------------------------------------------------------------------- /13. Chain Method/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /13. Chain Method/main.js: -------------------------------------------------------------------------------- 1 | let username = "rafael" 2 | 3 | let letter = username.charAt(0).toUpperCase() 4 | 5 | console.log (letter) -------------------------------------------------------------------------------- /13. Chain Method/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/13. Chain Method/styles.css -------------------------------------------------------------------------------- /14. If Statement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /14. If Statement/main.js: -------------------------------------------------------------------------------- 1 | // if statemenet = a basic form of descision makin 2 | // if a condition is true, the do something 3 | // if not, then don't do it 4 | 5 | /* let age = 100 6 | 7 | if (age>=65) { 8 | console.log ("You are senior citizen!") 9 | } 10 | else 11 | 12 | if(age >= 18){ 13 | console.log ("you are an adult!") 14 | } 15 | else 16 | 17 | if (age<0){ 18 | console.log("YOU HAVE'NT BEEN BORN YET!!") 19 | } 20 | else{ 21 | console.log ("You are a child!") 22 | } */ 23 | 24 | let online = false 25 | 26 | if (online){ 27 | console.log ("You are Online Now!") 28 | } 29 | else{ 30 | console.log ("You are Offline Now!") 31 | } 32 | -------------------------------------------------------------------------------- /14. If Statement/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/14. If Statement/styles.css -------------------------------------------------------------------------------- /15. Checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /15. Checkbox/main.js: -------------------------------------------------------------------------------- 1 | document.getElementById("mybutton").onclick = function(){ 2 | 3 | const checkbox = document.getElementById("mycheckbox") 4 | const radioboxvisa = document.getElementById("myradiovisa") 5 | const radioboxpaypal = document.getElementById("myradiopaypal") 6 | const radioboxgopay = document.getElementById("myradiogopay") 7 | if(checkbox.checked){ 8 | console.log("You are subscribed!") 9 | }else{ 10 | console.log ("You aren't Subscribed!") 11 | } 12 | 13 | 14 | if(radioboxvisa.checked) { 15 | console.log("You Have A Visa!") 16 | } 17 | else if (radioboxpaypal.checked){ 18 | console.log ("You Have A Paypal!") 19 | } 20 | else if (radioboxgopay.checked){ 21 | console.log ("You have A Gopay") 22 | 23 | } 24 | else{ 25 | console.log ("You must select a payment type!") 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /15. Checkbox/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/15. Checkbox/styles.css -------------------------------------------------------------------------------- /16. Switches/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /16. Switches/main.js: -------------------------------------------------------------------------------- 1 | let grade = "C " 2 | 3 | switch(grade){ 4 | case "A": 5 | console.log ("Pefect!") 6 | break 7 | case "B": 8 | console.log ("You Did Great!") 9 | break 10 | case "C": 11 | console.log ("Never Give Up!") 12 | break 13 | case "F": 14 | console.log ("There is no fail in learn") 15 | break 16 | default: 17 | console.log ("Grade is not letter Grade!") 18 | } -------------------------------------------------------------------------------- /16. Switches/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/16. Switches/styles.css -------------------------------------------------------------------------------- /17. And or Logical Operations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /17. And or Logical Operations/main.js: -------------------------------------------------------------------------------- 1 | // Gives us the abillity to check more than 1 condition concurrently 2 | // && AND (BOTH conditions must be true) 3 | // || OR (Either condition can be true) 4 | 5 | let temp = 15 6 | let sunny = true 7 | 8 | if(temp > 0 && temp < 30 && sunny){ 9 | console.log("The weather is good") 10 | }else{ 11 | console.log ("The weather is bad!") 12 | } -------------------------------------------------------------------------------- /17. And or Logical Operations/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/17. And or Logical Operations/styles.css -------------------------------------------------------------------------------- /18. Not Logical Operation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /18. Not Logical Operation/main.js: -------------------------------------------------------------------------------- 1 | //! NOT Logical operator 2 | // typically used to reverse a condition's boolean value 3 | // true --> false, false --> true 4 | 5 | let temp = -15 6 | let sunny = true 7 | 8 | 9 | if (!(temp > 0)){ 10 | console.log("Its cold outside!") 11 | }else{ 12 | console.log("Its warm outside") 13 | } 14 | if (!sunny){ 15 | console.log("Its cloudy outside") 16 | }else{ 17 | console.log("Its sunny outside") 18 | } -------------------------------------------------------------------------------- /18. Not Logical Operation/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/18. Not Logical Operation/styles.css -------------------------------------------------------------------------------- /19. While Loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /19. While Loops/main.js: -------------------------------------------------------------------------------- 1 | // While loop = repeat some code 2 | // while some condition is true 3 | // potentionally infinite 4 | 5 | -------------------------------------------------------------------------------- /19. While Loops/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/19. While Loops/styles.css -------------------------------------------------------------------------------- /20. do while Loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /20. do while Loops/main.js: -------------------------------------------------------------------------------- 1 | // do while loop = do something, 2 | // then check the condition, 3 | // repeat if condition is true 4 | 5 | let username = "" 6 | 7 | do{ 8 | username = prompt("enter your name") 9 | }while(username == "") 10 | console.log ("hello", username) 11 | 12 | -------------------------------------------------------------------------------- /20. do while Loops/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/20. do while Loops/styles.css -------------------------------------------------------------------------------- /21. For Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /21. For Loop/main.js: -------------------------------------------------------------------------------- 1 | // For loop = repeat some code a 2 | // certain amount of times 3 | 4 | for(let i = 1; i<=100; i++){ 5 | console.log (i) 6 | } -------------------------------------------------------------------------------- /21. For Loop/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/21. For Loop/styles.css -------------------------------------------------------------------------------- /22. Break and Continue Statement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /22. Break and Continue Statement/main.js: -------------------------------------------------------------------------------- 1 | for (let i = 1; i<=20; i++){ 2 | if (i == 13){ 3 | continue 4 | } 5 | console.log (i) 6 | } -------------------------------------------------------------------------------- /22. Break and Continue Statement/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/22. Break and Continue Statement/styles.css -------------------------------------------------------------------------------- /23. Nested Loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /23. Nested Loops/main.js: -------------------------------------------------------------------------------- 1 | // nested loops = a loop inside of another loops 2 | 3 | let symbols = prompt ("Enter Symbols") 4 | let rows = prompt ("Enter number of Rows") 5 | let columns = prompt ("Enter number of columns") 6 | 7 | 8 | for(let i = 1; i <= rows; i+=1){ 9 | for(let j = 1; j <= columns; j+=1){ 10 | document.getElementById("myrectangle").innerHTML += symbols 11 | } 12 | document.getElementById("myrectangle").innerHTML += "
" 13 | } -------------------------------------------------------------------------------- /23. Nested Loops/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/23. Nested Loops/styles.css -------------------------------------------------------------------------------- /24. Function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /24. Function/main.js: -------------------------------------------------------------------------------- 1 | 2 | startprogram() 3 | 4 | function startprogram(){ 5 | let username = "Rafael" 6 | let age = 16 7 | 8 | 9 | Birthday(username, age) 10 | } 11 | 12 | 13 | 14 | function Birthday (username, age){ 15 | console.log("happy Birthday!") 16 | console.log("Happy Birthday to you!") 17 | console.log("Happy Birthday dear,", username) 18 | console.log("I love you") 19 | console.log("Happy Level Up!") 20 | console.log("You are", age, "years old!!") 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /24. Function/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/24. Function/styles.css -------------------------------------------------------------------------------- /25. Return Statement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /25. Return Statement/main.js: -------------------------------------------------------------------------------- 1 | // returns = returns a value back to the place 2 | // where you invoked a function 3 | 4 | let area 5 | let width 6 | let height 7 | 8 | width = prompt ("enter width") 9 | height = prompt ("enter height") 10 | 11 | area = getarea(width, height) 12 | 13 | console.log ("The area is:", area) 14 | 15 | function getarea(width, height){ 16 | let results = width * height 17 | return results 18 | } -------------------------------------------------------------------------------- /25. Return Statement/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/25. Return Statement/styles.css -------------------------------------------------------------------------------- /26. Tenary operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /26. Tenary operators/main.js: -------------------------------------------------------------------------------- 1 | // Tenary Operators = shortcut for and 'if/else statetment' 2 | // take 3 operands 3 | 4 | // 1. a condition with ? 5 | // 2. expression if True : 6 | // 3. expression if False : 7 | 8 | // condition ? exprIfTrue : expIfFalse 9 | 10 | checklist(false) 11 | 12 | function checklist(check){ 13 | check ? console.log ("You are checking the box") : console.log ("YOu ArE NOT ChECking ThE bOX") 14 | } -------------------------------------------------------------------------------- /26. Tenary operators/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/26. Tenary operators/styles.css -------------------------------------------------------------------------------- /27. Var vs Let/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /27. Var vs Let/main.js: -------------------------------------------------------------------------------- 1 | // Variable scope = where a variable is accesible 2 | 3 | //let = variables are limited to block scope {} 4 | //var = variables are limited to function (){} 5 | 6 | dosomething() 7 | 8 | function dosomething(){ 9 | for (let i = 1; i <= 10; i += 1){ 10 | 11 | } 12 | 13 | } 14 | console.log (i) 15 | -------------------------------------------------------------------------------- /27. Var vs Let/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/27. Var vs Let/styles.css -------------------------------------------------------------------------------- /28. template literals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /28. template literals/main.js: -------------------------------------------------------------------------------- 1 | // template literals = delimited with (`) 2 | // instead of double or single quotes 3 | // allows embedded variables and expressions 4 | 5 | let username = "Rafael Pandu" 6 | let items = 3 7 | let total = 75 8 | 9 | // console.log ("Hello", username) 10 | // console.log ("You have", items, "In you kart") 11 | // console.log ("Your total is $", total) 12 | 13 | // console.log (`Hello ${username}`) 14 | // console.log (`You have ${items} in you kart`) 15 | // console.log (`Your total is $${total}`) 16 | 17 | let text = 18 | `Hello ${username}
19 | You have ${items} in you kart
20 | Your total is $${total}` 21 | 22 | document.getElementById("mylabel").innerHTML = text -------------------------------------------------------------------------------- /28. template literals/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/28. template literals/styles.css -------------------------------------------------------------------------------- /29. Format Currency/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /29. Format Currency/main.js: -------------------------------------------------------------------------------- 1 | // Tolocalstring() = returns a string with a language 2 | // sensitive representation of this number 3 | 4 | // number.tolocalestring(locale, {options}) 5 | 6 | // 'locale' = specify that language (undefined = default) 7 | //'options' = object with formatting options 8 | 9 | let mynum = 100000 10 | 11 | mynum = mynum.toLocaleString (undefined, {style: "unit", unit: "celsius"}) 12 | 13 | console.log (mynum) -------------------------------------------------------------------------------- /29. Format Currency/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/29. Format Currency/styles.css -------------------------------------------------------------------------------- /30. Number Guessing Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Number Guessing Game

11 |

Pick Between 1 - 10

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /30. Number Guessing Game/main.js: -------------------------------------------------------------------------------- 1 | const answer = Math.floor(Math.random() * 10 + 1) 2 | let guesses = 0 3 | console.log (answer) 4 | 5 | document.getElementById("submit").onclick = function(){ 6 | 7 | let guess = document.getElementById("guessfield").value 8 | guesses += 1 9 | 10 | if(guess == answer){ 11 | alert(`${answer} is the number. it took you ${guesses} guesses`) 12 | }else 13 | if (guess < answer){ 14 | alert("too small!") 15 | }else{ 16 | alert ("too Large!") 17 | } 18 | 19 | 20 | } 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /30. Number Guessing Game/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/30. Number Guessing Game/styles.css -------------------------------------------------------------------------------- /31. Temperature Convert/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |

13 |
14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /31. Temperature Convert/main.js: -------------------------------------------------------------------------------- 1 | // document.getElementById("buttonsubmit").onclick = function(){ 2 | 3 | // let temp 4 | 5 | // function tocelcius(temp){ 6 | // return (temp - 32) * (5/9) 7 | // } 8 | 9 | // function tofahrenheit (temp){ 10 | // return (temp * 9 / 5) + 32 11 | // } 12 | 13 | // if(document.getElementById("cbutton").checked){ 14 | // let temp = document.getElementById("numberfield").value 15 | // temp = tocelcius(temp) 16 | // document.getElementById("labeltemp").innerHTML = "Temperature is : " + Math.floor(temp) + "°C" 17 | // } 18 | // else 19 | // if (document.getElementById("fbutton").checked){ 20 | 21 | // let temp = document.getElementById("numberfield").value 22 | // temp = tofahrenheit(temp) 23 | // document.getElementById("labeltemp").innerHTML = "Temperature is : " + Math.floor(temp) + "°F" 24 | 25 | // }else{ 26 | // document.getElementById("labeltemp").innerHTML = "Select a unit!" 27 | // } 28 | // } 29 | 30 | 31 | -------------------------------------------------------------------------------- /31. Temperature Convert/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/31. Temperature Convert/styles.css -------------------------------------------------------------------------------- /32. Array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /32. Array/main.js: -------------------------------------------------------------------------------- 1 | // Array = sebuah variable yang bisa menyimpanan banyak value data 2 | 3 | 4 | // Contoh dari penggunaan sebuah array 5 | let fruits = ['apple', 'banana', 'watermelon'] //Didalam array ada yang disebut index, dan index itu adalah suatu data dalam sebuah array dan index selalu dimulai dari 0 karena komputer selalu memulai sebuah perhitungan dari 0 6 | 7 | fruits.unshift("melon") // unshift = menambahkan element padda array namun di awal index 8 | fruits.push("lemon") //Push = menambahkan element pada array namun diakhir index 9 | fruits.pop(); //pop = untuk menghapus element diakhir index misalnya pada kasus ini "lemon" 10 | fruits.shift(); // shift = untuk menghapus element diawal index misalnya pada kasus ini "melon" 11 | 12 | 13 | let length = fruits.length // Cara mengetahui length pada array 14 | let index = fruits.indexOf("apple") //cara mengetahui index pada value yang ingin dicari 15 | 16 | console.log(fruits) 17 | console.log(length) 18 | console.log(index) 19 | -------------------------------------------------------------------------------- /32. Array/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/32. Array/styles.css -------------------------------------------------------------------------------- /33. Loop Di Array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /33. Loop Di Array/main.js: -------------------------------------------------------------------------------- 1 | // Array = sesuatu yang bisa menyimpan banyak data 2 | 3 | let buahbuahan = ['jeruk','apel','pisang'] 4 | 5 | console.log(buahbuahan[2]) 6 | 7 | buahbuahan.push("lemon") // Menambahkan Element di akhir suatu array 8 | buahbuahan.pop() // Menghapus Element Akhir 9 | buahbuahan.unshift ("mangga") //Menambahkan element di awal array 10 | buahbuahan.shift() //Menghapus Element di awal suatu array 11 | 12 | let length = buahbuahan.length 13 | let index = buahbuahan.indexOf("apel") 14 | 15 | console.log (length) 16 | console.log (index) 17 | 18 | // for(i = length - 1; i >= 0 ;i = i-1){ 19 | // console.log(buahbuahan[i]) 20 | // } 21 | 22 | for (let i of buahbuahan){ 23 | console.log(i) 24 | } -------------------------------------------------------------------------------- /34.Sorting dengan array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /34.Sorting dengan array/main.js: -------------------------------------------------------------------------------- 1 | let buahbuahan = ['nanas','jeruk','apel'] 2 | console.log (buahbuahan) 3 | length = buahbuahan.length 4 | 5 | for(let buah = 0; buah < length ;buah++){ 6 | console.log(buahbuahan.sort().reverse()[buah]) 7 | } -------------------------------------------------------------------------------- /35. 2D Array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /35. 2D Array/main.js: -------------------------------------------------------------------------------- 1 | let buahbuahan = ['apel','jeruk','nanas']; 2 | let dagingdagingan = ['telur', 'Steak', 'Ikan'] 3 | let sayursayuran = ['brokoli','singkong','terong'] 4 | 5 | let menutoko = [buahbuahan,dagingdagingan,sayursayuran] 6 | 7 | console.log(menutoko[0][1]) 8 | 9 | for(let menu of menutoko){ 10 | for(let apasaja of menu){ 11 | console.log(apasaja) 12 | } 13 | } -------------------------------------------------------------------------------- /36. Spread Operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /36. Spread Operators/main.js: -------------------------------------------------------------------------------- 1 | // Spread Operators : mengizinkan iterable seperti array atau string 2 | // untuk diperluas di tempat di mana nol atau lebih 3 | // argumen diharapkan 4 | 5 | 6 | 7 | let username = "Rafael Pandu Sumanti" 8 | let angka = [1,2,3,4,5,6,7,8,9] 9 | console.log(Math.max(...angka)) 10 | 11 | let class1 = ['spongebob','patrick','sandy'] 12 | let class2 = ['squidward','mrcrab','plankton'] 13 | 14 | class1.push(...class2) 15 | console.log (...class1) -------------------------------------------------------------------------------- /37. Rest Parameters/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /37. Rest Parameters/main.js: -------------------------------------------------------------------------------- 1 | // Rest Parameters = mewakili jumlah yang tidak 2 | // terbatas parameter 3 | // (mengemas argumen dalam array) 4 | 5 | 6 | let a = 1 7 | let b = 2 8 | let c = 3 9 | let d = 4 10 | let e = 5 11 | 12 | console.log (sum(a, b, c, d , e)) 13 | 14 | // jadi sum(apapun) kita masukkan ke function 15 | function sum(...numbers){ 16 | //... berguna untuk mengemas 1 per 1 argumen 17 | 18 | total = 0 19 | // kita buat loop untuk pertambahan dalam sum() 20 | for(let number of numbers){ 21 | total += number //total = (a+b+c+d+e) 22 | } 23 | return total //kita return supaya total ini bisa jadi deklarasi diluar function 24 | } 25 | -------------------------------------------------------------------------------- /38. Callbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /38. Callbacks/main.js: -------------------------------------------------------------------------------- 1 | // Callback tuh kayak memanggil kembali fungsi dari function ke function lainnya 2 | // misal hasil di function pertama 2, nah trus 2 ini pindahin ke function lainnya buat 3 | // di masukkin ke dalam .innerHTML 4 | 5 | x = 10 6 | y = 20 7 | z = 30 8 | n = 40 9 | 10 | 11 | let total = sum(x,y,z,n,DisplayDOM) 12 | console.log (hasil) 13 | 14 | function sum(x,y,z,n, results){ 15 | hasil = x + y + z + n 16 | results(hasil) //sebenarnya results ini adalah DisplayDOM karena ketika kalian code diatas kalian sadar 17 | //bahwa x,y,z,n,(DisplayDOM) 18 | } 19 | 20 | function DisplayDOM(hasil){ 21 | // Nah tadi kan hasilnya adalah lah perjumlahan dari x,y,z,n ini kita masukkan ke dalam fungsi DisplayDOM(hasil) 22 | // Fungsi dari function ini adalah memasukkan hasil dari penjumlahan "hasil" ke .innerHTML 23 | document.getElementById("mylabel").innerHTML = hasil 24 | } -------------------------------------------------------------------------------- /39. Arrayforeach/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /39. Arrayforeach/main.js: -------------------------------------------------------------------------------- 1 | // .foreach adalah value index dari array misal jika kalian dibawah foreach dari students adalah students[0] = spongebob 2 | // students [1] = patrick dst.. dan ketika foreach() kita masukkan function akan membuat index dari 1 per 1 array 3 | // akan mendapatkan masing masing fungsi dari function yang kita tuju 4 | 5 | let students = ["spongebob", "patrick", "squidward"] //mari kita buat array dengan deklarasi students 6 | 7 | 8 | 9 | function capatilize(element, index, array){ 10 | //jangan lupa untuk () kita dari belakang ke depan jangan sampai array,index,element. namun element,index,array 11 | 12 | array[index] = element[0].toUpperCase() + element.substring(1) //maksud dari baris code ini adalah students[index] 13 | // akan kita buat awalnya capslock sisanya lowerCase, ya kayak gtu dah 14 | } 15 | students.forEach(capatilize) //nah disini kita masukin students nya ke foreach dengan memakai function capatilize 16 | 17 | // trus kita console.log semua value di dalam array menggunakan fitur function ini yang berarti 1 per 1 value index 18 | // dalam array akan kita console.log memakai foreach 19 | students.forEach(print) 20 | function print(element){ 21 | console.log (element) 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /40. Array Map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /40. Array Map/main.js: -------------------------------------------------------------------------------- 1 | //array.map() adalah = callback yang di mapping untuk di masukkin ke function trus dibuat jadi array baru 2 | // susah dimengerti ya? wkwkwkwk yaudah semangat yuk bisa 3 | 4 | 5 | let numbers = [1, 2, 3, 4]; 6 | let squares = numbers.map(square); 7 | console.log (squares) 8 | 9 | function square(element) { 10 | return Math.pow(element, 2); 11 | } 12 | 13 | -------------------------------------------------------------------------------- /41. Array Filter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /41. Array Filter/main.js: -------------------------------------------------------------------------------- 1 | let numbers = [11,24,21,10,8,11,18,20] 2 | 3 | 4 | numbers 5 | .filter(checkage) 6 | .forEach(print) 7 | 8 | function checkage(x){ 9 | return x >= 18 10 | } 11 | 12 | function print(x){ 13 | console.log (x) 14 | } -------------------------------------------------------------------------------- /42. Array Reduce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /42. Array Reduce/main.js: -------------------------------------------------------------------------------- 1 | // array.reduce() = membuat array menjadi 1 value kesatuan anjay 2 | 3 | let harga = [1,2,3,4,5,6,7,8,9,10] 4 | 5 | let total = harga.reduce(penjumlahan) 6 | console.log(`Jadi Harga total yang sudah anda belanjakan adalah $${total}`) 7 | 8 | 9 | function penjumlahan(x,y){ 10 | return x + y 11 | } 12 | -------------------------------------------------------------------------------- /43. Array Sorting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /43. Array Sorting/main.js: -------------------------------------------------------------------------------- 1 | let grades = [76,90,99,65,83,93,100,67] 2 | 3 | let sortingdesce = grades.sort(descending).forEach(print) 4 | 5 | let sortingasce = grades.sort(ascending).forEach(print) 6 | 7 | function descending(a,b){ 8 | return b - a 9 | } 10 | 11 | function ascending(a,b){ 12 | return a - b 13 | } 14 | 15 | function print(x){ 16 | console.log(x) 17 | } -------------------------------------------------------------------------------- /44. Array Function Expressions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /44. Array Function Expressions/main.js: -------------------------------------------------------------------------------- 1 | // on expressions = function without a name (anonymous function) 2 | // avoid poluting the global scope with names 3 | // Write it, the forget about 4 | 5 | let count = 0 6 | 7 | function increasebutton(){ 8 | count += 1 9 | document.getElementById("mylabel").innerHTML = count 10 | } 11 | 12 | function decreasebutton(){ 13 | count -= 1 14 | document.getElementById("mylabel").innerHTML = count 15 | } 16 | 17 | function resetbutton(){ 18 | count = 0 19 | document.getElementById("mylabel").innerHTML = count 20 | } -------------------------------------------------------------------------------- /45. Arrow Function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Formulir pendaftaran SMK Wira Buana

10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /45. Arrow Function/main.js: -------------------------------------------------------------------------------- 1 | let array = [13,15,11,1,9,10,20,4] 2 | 3 | array 4 | .sort((a, b) => a - b) 5 | .forEach ((x) => console.log(x)) -------------------------------------------------------------------------------- /46. Shuffle An array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /46. Shuffle An array/main.js: -------------------------------------------------------------------------------- 1 | let cards = ["A", "2", "3", "4","5","6","7","8","9","10","J","Q","K"] 2 | 3 | shuffle(cards) 4 | cards 5 | .forEach((x) => console.log(x)) 6 | 7 | function shuffle (array){ 8 | let currenindex = array.length 9 | 10 | while(currenindex != 0){ 11 | let randomindex = Math.floor(Math.random() * currenindex) 12 | currenindex -= 1 13 | 14 | let temp = array[currenindex] 15 | array[currenindex] = array[randomindex] 16 | array[randomindex] = temp 17 | } 18 | 19 | } -------------------------------------------------------------------------------- /47. Nested Function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /47. Nested Function/main.js: -------------------------------------------------------------------------------- 1 | let username = "Bro" 2 | let userinbox = 0 3 | 4 | login() 5 | function login(){ 6 | displayUserName() 7 | displayUserInboX() 8 | 9 | } 10 | 11 | function displayUserName(){ 12 | console.log (`Welcome ${username}`) 13 | } 14 | 15 | function displayUserInboX(){ 16 | console.log (`You Have ${userinbox} New Messages`) 17 | } -------------------------------------------------------------------------------- /48. Map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /48. Map/main.js: -------------------------------------------------------------------------------- 1 | // Map = object that holds key-value parts of any data type 2 | 3 | const store = new Map([ 4 | ["T-Shirt",20], 5 | ["Jeans",30], 6 | ["Socks",10], 7 | ["Underwear",15] 8 | ]) 9 | 10 | let shoppingcart = 0 11 | 12 | // store.set("Hat", 40) 13 | // store.delete("Hat") 14 | // console.log (store.has("Underwear")) 15 | // console.log(store.size) 16 | 17 | 18 | store.forEach((x, y) => console.log(`You Buy some ${y} and the price is ${x}$`)) -------------------------------------------------------------------------------- /49. Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /49. Object/main.js: -------------------------------------------------------------------------------- 1 | // Object = A Group of properties and methods 2 | // Properties = What an object has 3 | // methods = What an object can do 4 | // use . to access properties/methods 5 | 6 | const car = { 7 | model:"Mustang", 8 | color:"red", 9 | year:2023, 10 | 11 | drive : function(){ 12 | console.log("You Drive that car") 13 | } 14 | } 15 | 16 | const car2 = { 17 | model:"Lamborghini", 18 | color:"black", 19 | year:2019, 20 | 21 | drive2 : function(){ 22 | console.log(`You drive the ${this.model}`) 23 | } 24 | } 25 | 26 | console.log(car2.model) 27 | console.log(car2.color) 28 | console.log(car2.year) 29 | 30 | car2.drive() 31 | car2.brake() -------------------------------------------------------------------------------- /50. This/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /50. This/main.js: -------------------------------------------------------------------------------- 1 | // This = reference to a particular object 2 | // the object depends on the immediate context 3 | 4 | const car = { 5 | 6 | model:"Mustang", 7 | color:"red", 8 | year:2023, 9 | 10 | drive : function(){ 11 | console.log(`You Drive that ${this.model} car`) 12 | } 13 | } 14 | 15 | const car2 = { 16 | model:"Lamborghini", 17 | color:"black", 18 | year:2019, 19 | 20 | drive2 : function(){ 21 | console.log(`You drive the ${this.model}`) 22 | } 23 | } 24 | 25 | car.drive() 26 | car2.drive2() -------------------------------------------------------------------------------- /51. Class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /51. Class/main.js: -------------------------------------------------------------------------------- 1 | // Class = a blueprint for creating objects 2 | // define what properties and methods they have 3 | // use a constructor for unique properties 4 | 5 | class player{ 6 | 7 | score = 0 8 | 9 | username = "Xtentacionz" 10 | 11 | pause(){ 12 | console.log ("You Paused the game") 13 | } 14 | 15 | victory(){ 16 | this.score += 1 17 | console.log(this.score) 18 | } 19 | } 20 | 21 | let player1 = new player 22 | let player2 = new player 23 | 24 | player1.victory() 25 | player2.pause() 26 | 27 | -------------------------------------------------------------------------------- /52. Constructor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /52. Constructor/main.js: -------------------------------------------------------------------------------- 1 | // Constructor = a special method of a class, 2 | // accepts arguments and assigns properties 3 | 4 | class students{ 5 | constructor(Nama,Umur,Nilai){ 6 | 7 | this.Nama = Nama 8 | this.Umur = Umur 9 | this.Nilai = Nilai 10 | } 11 | 12 | 13 | } 14 | 15 | let students1 = new students("Rafael", 15, 99) 16 | 17 | console.log (students1) -------------------------------------------------------------------------------- /53. Static Keyword/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /53. Static Keyword/main.js: -------------------------------------------------------------------------------- 1 | // static = belongs to the class, not the objects 2 | // properties: useful for cache, fixed=configuration 3 | // methods: useful for utility functions 4 | 5 | class car{ 6 | static numberofcars = 0 7 | constructor(model){ 8 | 9 | this.model = model 10 | car.numberofcars += 1 11 | } 12 | 13 | static startrace(){ 14 | console.log("3...2...1...GO!") 15 | } 16 | } 17 | 18 | 19 | car.startrace() 20 | 21 | -------------------------------------------------------------------------------- /54. Inheritence/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /54. Inheritence/main.js: -------------------------------------------------------------------------------- 1 | // inheritence = Inheritence adalah suatu pewarisan yang memiliki parent dan children 2 | // yang berfungsi sebagai pengwaris dari element,function dari parent (Semoga ngerti) 3 | 4 | 5 | // Parent 6 | class Sekolah{ 7 | active = true 8 | study(){ 9 | console.log(`Murid Murid ${this.name} sedang belajar`) 10 | } 11 | 12 | praktek(){ 13 | console.log (`Murid Murid ${this.name} sedang melakukan praktek`) 14 | } 15 | } 16 | 17 | 18 | // Children 19 | class SekolahDasar extends Sekolah{ 20 | 21 | name = "Kelas 6B" 22 | 23 | bermain(){ 24 | console.log (`Murid murid ${this.name} sedang bermain`) 25 | } 26 | 27 | } 28 | 29 | class SekolahMenengahPertama extends Sekolah{ 30 | 31 | name = "Kelas 9B" 32 | 33 | kerjakelompok(){ 34 | console.log (`Murid murid ${this.name} sedang kerja kelompok`) 35 | } 36 | 37 | } 38 | 39 | class SekolahMenengahKejuruan extends Sekolah{ 40 | 41 | name = "Kelas XRPL1" 42 | 43 | PKL(){ 44 | console.log (`Murid murid ${this.name} sedang melakukan PKL`) 45 | } 46 | 47 | } 48 | 49 | const SD = new SekolahDasar() 50 | const SMP = new SekolahMenengahPertama() 51 | const SMK = new SekolahMenengahKejuruan() 52 | 53 | // SD 54 | SD.study() 55 | SD.praktek() 56 | SD.bermain() 57 | 58 | // SMP 59 | SMP.study() 60 | SMP.praktek() 61 | SMP.kerjakelompok() 62 | 63 | // SMK 64 | SMK.study() 65 | SMK.praktek() 66 | SMK.PKL() 67 | -------------------------------------------------------------------------------- /55. Super Keyword/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /55. Super Keyword/main.js: -------------------------------------------------------------------------------- 1 | // Super Keyword : adalah untuk membuat fungsi dari constructor(a,b,c) 2 | // berfungsi ke children nya 3 | 4 | // Parent 5 | class Sekolah{ 6 | constructor(nama,umur){ 7 | this.nama = nama 8 | this.umur = umur 9 | } 10 | } 11 | 12 | 13 | // Children 14 | class SekolahDasar extends Sekolah{ 15 | constructor(nama, umur, iq){ 16 | super(nama, umur) 17 | this.iq = iq 18 | } 19 | } 20 | 21 | class SekolahMenengahPertama extends Sekolah{ 22 | constructor(nama,umur,iq){ 23 | super(nama,umur) 24 | this.iq = iq 25 | } 26 | } 27 | 28 | class SekolahMenengahKejuruan extends Sekolah{ 29 | constructor(nama,umur,iq){ 30 | super(nama,umur) 31 | this.iq = iq 32 | } 33 | } 34 | 35 | const SD = new SekolahDasar("Ucup Marucup",9,190) 36 | const SMP = new SekolahMenengahPertama("Ghifa",14,999) 37 | const SMK = new SekolahMenengahKejuruan("RavelSki", 15, "Berapa aja boleh") 38 | 39 | console.log (`${SD.nama} adalah seorang pelajar yang berumur ${SD.umur} tahun, Dengan IQ sekisar ${SD.iq}`) 40 | console.log (`${SMP.nama} adalah seorang pelajar yang berumur ${SMP.umur} tahun, Dengan IQ sekisar ${SMP.iq}`) 41 | console.log (`${SMK.nama} adalah seorang pelajar yang berumur ${SMK.umur} tahun, Dengan IQ sekisar ${ SMK.iq}`) -------------------------------------------------------------------------------- /56. Getters and Setters/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /56. Getters and Setters/main.js: -------------------------------------------------------------------------------- 1 | // Get = mengikat properti object ke sesuatu intinya 2 | // biasanya sih string 400(L) 3 | 4 | // Set = mengubah object menjadi memiliki properti function 5 | // ketika properti itu menjadi value (udahlah gausah dihafalin ga penting juga) 6 | 7 | class Car { 8 | constructor(power, gas) { 9 | this._gas = gas 10 | this._power = power 11 | 12 | if (this._gas > 50){ 13 | this._gas = 50 14 | }else if (this._gas < 0){ 15 | this._gas = 0 16 | } 17 | } 18 | 19 | get power() { 20 | return `${this._power}Hp` 21 | } 22 | 23 | get gas() { 24 | return `${this._gas}L ${this._gas / 50 * 100}%` 25 | } 26 | 27 | 28 | } 29 | 30 | const carInstance = new Car(400,100); 31 | 32 | console.log(`The Car's power is ${carInstance.power} and the car's gas is ${carInstance.gas}`); -------------------------------------------------------------------------------- /57. Object as argument/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /57. Object as argument/main.js: -------------------------------------------------------------------------------- 1 | 2 | class Car{ 3 | constructor(model,years,color){ 4 | this.model = model 5 | this.years = years 6 | this.color = color 7 | } 8 | } 9 | 10 | const car1 = new Car("Mustang", 1999, "Black") 11 | const car2 = new Car("Nissan", 2001, "Gray") 12 | const car3 = new Car("Lamborghini", 2019, "Red") 13 | 14 | Viewcar1() 15 | Viewcar2() 16 | Viewcar3() 17 | 18 | 19 | function Viewcar1(){ 20 | console.log (car1.model) 21 | console.log (car1.years) 22 | console.log (car1.color) 23 | } 24 | 25 | function Viewcar2(){ 26 | console.log (car2.model) 27 | console.log (car2.years) 28 | console.log (car2.color) 29 | } 30 | 31 | 32 | 33 | function Viewcar3(){ 34 | console.log (car3.model) 35 | console.log (car3.years) 36 | console.log (car3.color) 37 | } 38 | 39 | -------------------------------------------------------------------------------- /58. Array of Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /58. Array of Object/main.js: -------------------------------------------------------------------------------- 1 | class student{ 2 | constructor(nama,kelas,IQ){ 3 | this.nama = nama 4 | this.kelas = kelas 5 | this.IQ = IQ 6 | } 7 | belajar(){ 8 | console.log(`Murid atas nama ${this.nama} sedang belajar`) 9 | } 10 | } 11 | 12 | const student1 = new student("Ravel", "XRPL1", 0) 13 | const student2 = new student("Pelski", "XTKJ2", 999) 14 | const student3 = new student("Sans", "XMM", 666) 15 | const student4 = new student("Alberto","Apaaja",1010110) 16 | 17 | const students = [student1,student2,student3,student4] 18 | 19 | ViewBelajar(students) 20 | 21 | function ViewBelajar(belajar){ 22 | for(const murid of belajar){ 23 | murid.belajar() 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /59. Anonymous Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /59. Anonymous Object/main.js: -------------------------------------------------------------------------------- 1 | // Anonymous Object = Objects tanpa nama 2 | // yang bikin syntax lo 3 | // ga panjang panjang amat 4 | 5 | class card{ 6 | constructor(value, suit){ 7 | this.value = value 8 | this.suit = suit 9 | } 10 | } 11 | 12 | 13 | 14 | const cards = [ 15 | new card("A", "Hearts"), 16 | new card("A", "Spades"), 17 | new card("A", "Diamonds"), 18 | new card("A", "Clubs"), 19 | new card("2", "Hearts"), 20 | new card("2", "Spades"), 21 | new card("2", "Diamonds"), 22 | new card("2", "Clubs")] 23 | 24 | cards.forEach((x) => console.log(`${x.value} ${x.suit}`)) 25 | -------------------------------------------------------------------------------- /60. Errors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /60. Errors/main.js: -------------------------------------------------------------------------------- 1 | // Eror = objek yang ada sesuatu yang salah bisa itu berupa: 2 | // can't open a file 3 | // lost connection 4 | // User types incorrect input 5 | // Type Eror 6 | // throw = mengesekusi sebuah user input 7 | 8 | try{ 9 | x = prompt("Enter a number") 10 | x = Number(x) 11 | 12 | if(isNaN(x)) throw "That wasnt a number" 13 | if(x == "") throw "That was Empty" 14 | console.log(x) 15 | } 16 | catch(Eror){ 17 | console.log(Eror) 18 | } 19 | finally{ 20 | console.log("This Always execute") 21 | } -------------------------------------------------------------------------------- /61. SetTimeout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /61. SetTimeout/main.js: -------------------------------------------------------------------------------- 1 | 2 | let payment = "Bitcoin Currency"; 3 | let price = 69.69; 4 | 5 | let timer1 = setTimeout(firstmessages,3000, payment, price) 6 | let timer2 = setTimeout(secondmessages,6000) 7 | let timer3 = setTimeout(thirdmessages,9000) 8 | 9 | function firstmessages(payment, price){ 10 | alert(`Buy this ${payment} for $${price}`) 11 | } 12 | function secondmessages(){ 13 | alert(`this is not a scam`) 14 | } 15 | function thirdmessages(){ 16 | alert(`DO ITTT!!!!`) 17 | } 18 | 19 | document.getElementById("mybutton").onclick = function(){ 20 | clearTimeout(timer1) 21 | clearTimeout(timer2) 22 | clearTimeout(timer3) 23 | alert(`Thanks for buy`) 24 | } -------------------------------------------------------------------------------- /62. SetInterval/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

0

11 | 12 | 13 | -------------------------------------------------------------------------------- /62. SetInterval/main.js: -------------------------------------------------------------------------------- 1 | 2 | let count = 0 3 | let hasil = prompt("Seberapa Besar Cinta ku padamu") 4 | hasil = Number(hasil) 5 | let interval = setInterval(Test, 1) 6 | 7 | function Test(){ 8 | 9 | if(count < hasil){ 10 | count +=1 11 | document.getElementById("count").innerHTML = `${count}%` 12 | }else{ 13 | clearInterval("interval") 14 | } 15 | 16 | } 17 | 18 | -------------------------------------------------------------------------------- /62. SetInterval/style.css: -------------------------------------------------------------------------------- 1 | .parg{ 2 | font-size: 3em; 3 | color: violet; 4 | font-family: Arial, Helvetica, sans-serif; 5 | font-weight: bold; 6 | align-items: center; 7 | text-align: center; 8 | } -------------------------------------------------------------------------------- /63. Date Object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /63. Date Object/main.js: -------------------------------------------------------------------------------- 1 | let date = new Date() 2 | // let year = date.getFullYear() 3 | // month = date.getMonth() 4 | // dayofmonth = date.getDate() // Day of Month 5 | // dayofweek = date.getDay() 6 | // hour = date.getHours() 7 | // minutes = date.getMinutes() 8 | // second = date.getSeconds() 9 | 10 | // date = date.toLocaleString() 11 | 12 | document.getElementById("mylabel").innerHTML = formatdate(date) +" "+ formattime(date) 13 | 14 | 15 | function formatdate(date){ 16 | let year = date.getFullYear() 17 | let month = date.getMonth() 18 | let day = date.getDate() 19 | 20 | return `${month}/${day}/${year}` 21 | } 22 | 23 | function formattime(date){ 24 | let hour = date.getHours() 25 | let minutes = date.getMinutes() 26 | let second = date.getSeconds() 27 | hour = (hour % 12) || 12 28 | if(hour >= 12){ 29 | return `${hour}:${minutes}:${second} ${"pm"}` 30 | }else{ 31 | return `${hour}:${minutes}:${second} ${"am"}` 32 | } 33 | } -------------------------------------------------------------------------------- /64. Clock Program/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /64. Clock Program/main.js: -------------------------------------------------------------------------------- 1 | // Clock Program = Mari kita baut program Jam bersama-sama 2 | 3 | time() 4 | setInterval(time2,1) 5 | 6 | function time(){ 7 | let years = new Date().getFullYear() 8 | let month = new Date().getMonth() 9 | let dates = new Date().getDate() 10 | 11 | document.getElementById("mylabel").innerHTML = `${years}/${month}/${dates}` 12 | } 13 | 14 | function time2(){ 15 | let hours = new Date().getHours() 16 | let minutes = new Date().getMinutes() 17 | if (minutes < 10){ 18 | minutes = `0${minutes}` 19 | }else{ 20 | minutes = minutes 21 | } 22 | let second = new Date().getSeconds() 23 | if (second < 10){ 24 | second = `0${second}` 25 | }else { 26 | second = second 27 | } 28 | let millseconds = new Date().getMilliseconds() 29 | 30 | 31 | 32 | 33 | 34 | document.getElementById("mylabel2").innerHTML = `${hours}:${minutes}:${second}:${millseconds}` 35 | 36 | 37 | 38 | 39 | } -------------------------------------------------------------------------------- /64. Clock Program/style.css: -------------------------------------------------------------------------------- 1 | .mylabel{ 2 | font-family: monospace; 3 | font-size: 4rem; 4 | color: rgb(99, 99, 163); 5 | } -------------------------------------------------------------------------------- /65. Synchronus And Asynchronus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /65. Synchronus And Asynchronus/main.js: -------------------------------------------------------------------------------- 1 | //synchronous = Synchronous code adalah kode yang dieksekusi secara berurutan, 2 | // langkah demi langkah, mulai dari atas ke bawah. 3 | // Setiap tugas harus menunggu tugas sebelumnya selesai sebelum melanjutkan 4 | 5 | //Asynchronous = Asynchronous code adalah kode yang tidak menunggu tugas sebelumnya selesai 6 | // untuk melanjutkan ke langkah berikutnya. 7 | // Hal ini memungkinkan kode untuk melakukan tugas lain sambil menunggu operasi tertentu selesai. 8 | 9 | const test = "Test" 10 | console.log("Start") 11 | setTimeout(() => console.log("This is Asynchronous"),4000) 12 | console.log("End") -------------------------------------------------------------------------------- /66. ConsoleTime/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /66. ConsoleTime/main.js: -------------------------------------------------------------------------------- 1 | 2 | // Start 3 | console.time("Typing Time") 4 | 5 | prompt("Type this text: Hello World") 6 | 7 | console.timeEnd("Typing Time") -------------------------------------------------------------------------------- /67.Promise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /67.Promise/main.js: -------------------------------------------------------------------------------- 1 | const promise = new Promise((resolve,reject) => { 2 | let fileloaded = false 3 | 4 | if(fileloaded){ 5 | resolve("File is Loaded") 6 | }else{ 7 | resolve("File NOT Loaded!") 8 | } 9 | }) 10 | 11 | promise 12 | .then(value => console.log(value)) 13 | .catch(error => console.log(error)) -------------------------------------------------------------------------------- /68. Async/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /68. Async/main.js: -------------------------------------------------------------------------------- 1 | // aync = membuat function menjadi return promise 2 | 3 | async function loadfile(){ 4 | 5 | let fileloaded = false; 6 | 7 | if(fileloaded){ 8 | return "File is loaded" 9 | }else{ 10 | throw "File NOT Loaded" 11 | } 12 | } 13 | 14 | loadfile() 15 | .then(value => console.log(value)) 16 | .catch(error => console.log(error)) -------------------------------------------------------------------------------- /69. Await/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /69. Await/main.js: -------------------------------------------------------------------------------- 1 | 2 | async function loadfile(){ 3 | 4 | let fileloaded = false; 5 | 6 | if(fileloaded){ 7 | return "File is loaded" 8 | }else{ 9 | throw "File NOT Loaded" 10 | } 11 | } 12 | async function startprocess(){ 13 | try{ 14 | let message = await loadfile() 15 | console.log(message) 16 | }catch(error){ 17 | console.log(error) 18 | } 19 | } 20 | 21 | startprocess() -------------------------------------------------------------------------------- /70 .ES6Modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /70 .ES6Modules/main.js: -------------------------------------------------------------------------------- 1 | // ES6 Modules adalah sistem yang digunakan dalam bahasa pemrograman 2 | //JavaScript untuk memecah kode ke dalam bagian-bagian yang lebih kecil dan terorganisir, yang disebut modul. 3 | //Modul memungkinkan Anda untuk mengelola kode dengan lebih baik, membaginya ke dalam file terpisah, 4 | //dan mengimpor atau mengekspor fungsionalitas antar file. 5 | 6 | import * as Mathutil from "./utility.js" 7 | 8 | console.log(Mathutil.PI) 9 | 10 | console.log(Mathutil.luaslingkaran(4)) -------------------------------------------------------------------------------- /70 .ES6Modules/utility.js: -------------------------------------------------------------------------------- 1 | export const PI = 3.14 2 | 3 | export function luaslingkaran(jarijari){ 4 | return 2 * jarijari * PI 5 | } -------------------------------------------------------------------------------- /71. DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /71. DOM/main.js: -------------------------------------------------------------------------------- 1 | document.body.style.backgroundColor = "skyblue" 2 | document.getElementById("mydiv").innerHTML = "Hello" -------------------------------------------------------------------------------- /72. Element Selector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

This Is Title

10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 | 36 | 37 | -------------------------------------------------------------------------------- /72. Element Selector/main.js: -------------------------------------------------------------------------------- 1 | let title = document.getElementById("title") //mencari dengan ID 2 | title.style.fontFamily = "arial" 3 | 4 | let fruits = document.getElementsByName("fruit") //mencari dengan name 5 | 6 | // For each untuk melihat 1 per 1 value yang ada di fruits atau Name(fruit) 7 | // dan ketika fruit itu checked maka akan menghasilkan value dari fruit tersebut 8 | fruits.forEach((fruit) => { 9 | if(fruit.checked){ 10 | console.log(fruit.value) 11 | } 12 | }) 13 | 14 | // let desserts = document.getElementsByClassName("desserts"); 15 | // desserts[0].style.backgroundColor = "red" 16 | 17 | let element = document.querySelector("#title") //querySelector adalah command yang sering digunakan 18 | //dikarenakan command ini bisa dipakai segala jenis misal (# = id, . = class, [] = element) 19 | element.style.color = "red" 20 | 21 | let elementdessers = document.querySelector(".desserts") 22 | elementdessers.style.color = "blue" 23 | 24 | let elementattribute = document.querySelector("[for]") 25 | elementattribute.style.backgroundColor = "lime" 26 | 27 | let list = document.querySelectorAll(".desserts") //Query selectorALL adalah untuk menggunakan semua query yang ada namun 28 | // harus memakai .foreach 29 | 30 | list.forEach((list) =>{ 31 | console.log(list)}) 32 | -------------------------------------------------------------------------------- /73. DOM Traverse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 15 | 20 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /73. DOM Traverse/main.js: -------------------------------------------------------------------------------- 1 | let element = document.querySelector("#sayur") 2 | let sibling = Array.from(element.children) 3 | 4 | sibling.forEach(child => child.style.backgroundColor = "lime") 5 | 6 | 7 | 8 | // .firstElementChild 9 | // .lastElementChild 10 | // .parentElement 11 | // .nextElementSibling 12 | // .children[] 13 | // Array.from(.children) -------------------------------------------------------------------------------- /74. addchange HTML Element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /74. addchange HTML Element/main.js: -------------------------------------------------------------------------------- 1 | // add/change HTML elements 2 | // .innerHTML (vulnerable to XSS attacks) 3 | // .textContent (more secure) 4 | 5 | // const nametag = document.createElement("h1") 6 | // nametag.textContent = prompt("Test") 7 | // document.body.append(nametag) 8 | 9 | let buah = document.getElementById("buah") 10 | 11 | let banyakbuah= document.createElement("li") 12 | banyakbuah.textContent = "mangga" 13 | 14 | // buah.append(banyakbuah) 15 | // buah.prepend(banyakbuah) 16 | buah.insertBefore(banyakbuah, buah.getElementsByTagName("li")[2]) 17 | 18 | 19 | 20 | 21 | // mylist.append(list) 22 | // mylist.prepend(list) 23 | 24 | -------------------------------------------------------------------------------- /75. AddChange CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

My Title

11 | 12 | 13 | -------------------------------------------------------------------------------- /75. AddChange CSS/main.js: -------------------------------------------------------------------------------- 1 | const title = document.querySelector("#title") 2 | 3 | title.style.color = "lime" 4 | title.style.backgroundColor = "black" 5 | -------------------------------------------------------------------------------- /76. Events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /76. Events/main.js: -------------------------------------------------------------------------------- 1 | const buttonclick = document.getElementById("button") 2 | // buttonclick.onclick = Something 3 | // document.body.onload = Something 4 | const element = document.getElementById("mytext") 5 | element.onchange = Something 6 | 7 | const div = document.getElementById("mydiv") 8 | // div.onmouseover = changecolor 9 | // div.onmouseleave = resetcolor 10 | div.onmousedown = changecolor 11 | div.onmouseup = resetcolor 12 | 13 | function Something(){ 14 | alert ("You DO Something") 15 | } 16 | function changecolor(){ 17 | div.style.backgroundColor = "red" 18 | } 19 | function resetcolor(){ 20 | div.style.backgroundColor = "aqua" 21 | } -------------------------------------------------------------------------------- /76. Events/style.css: -------------------------------------------------------------------------------- 1 | #mydiv{ 2 | background-color: aqua; 3 | color: aquamarine; 4 | width: 100px; 5 | height: 100px; 6 | margin: 20px; 7 | } -------------------------------------------------------------------------------- /77. EventListener/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /77. EventListener/main.js: -------------------------------------------------------------------------------- 1 | const div1 = document.getElementById("firstdiv") 2 | 3 | div1.addEventListener("mouseover", changecolor) 4 | div1.addEventListener("mouseout", resetcolor) 5 | 6 | function changecolor(){ 7 | div1.style.backgroundColor = "red" 8 | } 9 | function resetcolor(){ 10 | div1.style.backgroundColor = "green" 11 | } -------------------------------------------------------------------------------- /77. EventListener/style.css: -------------------------------------------------------------------------------- 1 | #firstdiv{ 2 | width: 100px; 3 | height: 100px; 4 | background-color: green 5 | } -------------------------------------------------------------------------------- /78. ShowHide HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /78. ShowHide HTML/main.js: -------------------------------------------------------------------------------- 1 | const toggle = document.getElementById("toggle") 2 | const myimage = document.querySelector("#image") 3 | 4 | toggle.addEventListener("click", () => { 5 | if(myimage.style.display == "none"){ 6 | myimage.style.display = "block" 7 | }else{ 8 | myimage.style.display = "none" 9 | } 10 | }) -------------------------------------------------------------------------------- /78. ShowHide HTML/style.css: -------------------------------------------------------------------------------- 1 | #image{ 2 | width: 100px; 3 | } -------------------------------------------------------------------------------- /78. ShowHide HTML/zeta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProjectRavel/JavaScript-Indonesia/dd5026fdddc35d840399fc4ff584760782ee56d5/78. ShowHide HTML/zeta.jpg -------------------------------------------------------------------------------- /79. Detect Keys/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /79. Detect Keys/main.js: -------------------------------------------------------------------------------- 1 | const box = document.getElementById("mydiv") 2 | // window.addEventListener("keydown", x => console.log(x.key)) 3 | window.addEventListener("keydown", move) 4 | let x = 0 5 | let y = 0 6 | 7 | function move(event){ 8 | 9 | switch(event.key){ 10 | case "ArrowUp": 11 | y = y - 5; 12 | box.style.top = y + "px"; 13 | break; 14 | case "ArrowDown": 15 | y = y + 5 16 | box.style.top = y + "px" 17 | break; 18 | case "ArrowLeft": 19 | x = x + 5; 20 | box.style.right = x + "px"; 21 | break; 22 | case "ArrowRight": 23 | x = x - 5 24 | box.style.right = x + "px" 25 | 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /79. Detect Keys/style.css: -------------------------------------------------------------------------------- 1 | #mydiv{ 2 | background-color: aqua; 3 | width: 100px; 4 | height: 100px; 5 | position: relative; 6 | } -------------------------------------------------------------------------------- /80. Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /80. Animation/main.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById("button"); 2 | const box = document.getElementById("mydiv"); 3 | 4 | button.addEventListener("click", move) 5 | 6 | function move(){ 7 | let ScaleX = 1; 8 | let ScaleY = 1; 9 | 10 | let timerid = setInterval(frame, 5) 11 | 12 | function frame(){ 13 | if(ScaleX >= 2 || ScaleY >= 2){ 14 | ScaleX -= 0.01; 15 | ScaleY -= 0.01; 16 | box.style.transform = "scale("+ScaleX+","+ScaleY+")" 17 | } 18 | else if(ScaleX >= 1 || ScaleY >= 1){ 19 | 20 | ScaleX += 0.01; 21 | ScaleY += 0.01; 22 | box.style.transform = "scale("+ScaleX+","+ScaleY+")" 23 | 24 | } 25 | 26 | } 27 | 28 | 29 | } -------------------------------------------------------------------------------- /80. Animation/style.css: -------------------------------------------------------------------------------- 1 | #mydiv{ 2 | margin-top: 10px; 3 | background-color: red; 4 | width: 100px; 5 | height: 100px; 6 | position: relative; 7 | } -------------------------------------------------------------------------------- /81. CanvasAPI/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /81. CanvasAPI/main.js: -------------------------------------------------------------------------------- 1 | let canvas = document.getElementById("mycanvas"); 2 | let context = canvas.getContext("2d"); 3 | 4 | context.strokeStyle = "red" 5 | context.lineWidth = 5 6 | 7 | // Draw Line 8 | // context.strokeStyle = "yellow" 9 | // context.fillStyle = "red" 10 | // context.beginPath(); 11 | // context.moveTo(250, 0) 12 | // context.lineTo(0,250) 13 | // context.lineTo(500,250) 14 | // context.lineTo(250,0) 15 | // context.stroke() 16 | // context.fill() 17 | 18 | // Draw Rectangle 19 | // context.strokeRect(0,0,250,250) 20 | 21 | // Draw Circle 22 | //(x,y,r,sAngle,eAngle,counterclockwise) 23 | // context.beginPath() 24 | // context.arc(250,250,200,0, 2 * Math.PI) 25 | // context.stroke() 26 | 27 | // Draw TEXT 28 | context.font = "50px MV Boli" 29 | context.textAlign = "center" 30 | context.fillText("You WIN!",canvas.width / 2, canvas.height / 2) -------------------------------------------------------------------------------- /81. CanvasAPI/style.css: -------------------------------------------------------------------------------- 1 | #mycanvas{ 2 | border: 1px solid black; 3 | } -------------------------------------------------------------------------------- /82. Windows/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /82. Windows/main.js: -------------------------------------------------------------------------------- 1 | // console.log(window.scrollY) 2 | // console.log(window.scrollX) 3 | // console.log(window.location.href) 4 | // window.location.href = "https://google.com" 5 | // console.log(window.location.hostname) 6 | // console.log(window.location.pathname) 7 | // const button = document.getElementById("button") 8 | 9 | // button.addEventListener ("click", () => window.print()) 10 | 11 | const age = window.prompt("Enter your age") 12 | 13 | if(age < 18){ 14 | window.alert("You must 18+ To enter this site") 15 | window.close() 16 | }else{ 17 | console.log("yay") 18 | } -------------------------------------------------------------------------------- /82. Windows/style.css: -------------------------------------------------------------------------------- 1 | #mydiv{ 2 | width: 1000px; 3 | height: 1000px; 4 | background-color: aqua; 5 | } -------------------------------------------------------------------------------- /83. Cookie/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /83. Cookie/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | deleteCookie("firstName") 4 | deleteCookie("lastName") 5 | 6 | console.log (document.cookie) 7 | 8 | function setCookie(name, values){ 9 | document.cookie = `${name}=${values};path=/` 10 | } 11 | function deleteCookie(name){ 12 | setCookie(null,null,null) 13 | } -------------------------------------------------------------------------------- /84. Stopwatch Program/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /84. Stopwatch Program/main.js: -------------------------------------------------------------------------------- 1 | // //Simple Declare 2 | // const timedisplay = document.querySelector("#count"); 3 | // const startbtn = document.querySelector("#startBtn"); 4 | // const resetbtn = document.querySelector("#resetBtn"); 5 | // const pausebtn = document.querySelector("#pauseBtn"); 6 | 7 | // // Declare Number 8 | // let starttimer = 0; 9 | // let elapsedtime = 0; 10 | // let paused = true; 11 | // let intervalid; 12 | // let hrs = 0; 13 | // let mins = 0; 14 | // let secs = 0; 15 | 16 | // startbtn.addEventListener("click", () =>{ 17 | // if(paused){ 18 | // paused = false 19 | // starttimer = Date.now() - elapsedtime 20 | // intervalid = setInterval(updatetime, 1000) 21 | // } 22 | // }); 23 | // pausebtn.addEventListener("click", () => { 24 | // if(!paused){ 25 | // paused = true 26 | // elapsedtime = Date.now() - starttimer 27 | // clearInterval(intervalid) 28 | // } 29 | 30 | // }); 31 | // resetbtn.addEventListener("click", () => { 32 | // paused = true 33 | // clearInterval(intervalid) 34 | // starttimer = 0; 35 | // elapsedtime = 0; 36 | // secs = 0 37 | // mins = 0 38 | // hrs = 0 39 | // timedisplay.textContent = `00:00:00` 40 | // }); 41 | 42 | // function updatetime(){ 43 | // elapsedtime = Date.now() - starttimer 44 | 45 | // secs = Math.floor((elapsedtime/1000) % 60); 46 | // mins = Math.floor((elapsedtime / (1000 * 60)) % 60); 47 | // hrs = Math.floor((elapsedtime / (1000 * 60 * 60)) % 60); 48 | 49 | // hrs = pad(hrs) 50 | // mins = pad(mins) 51 | // secs = pad(secs) 52 | 53 | // timedisplay.textContent = `${hrs}:${mins}:${secs}` 54 | 55 | // function pad(unit) { 56 | // return unit < 10 ? `0${unit}` : unit.toString(); 57 | // } 58 | 59 | 60 | // } 61 | 62 | const count = document.getElementById("count") 63 | const startbtn = document.getElementById("startBtn") 64 | const pausebtn = document.getElementById("pauseBtn") 65 | const resetbtn = document.getElementById("resetBtn") 66 | 67 | let paused = true; 68 | let starttimer; 69 | let elapsedtime = 0; 70 | let hours = 0; 71 | let mins = 0; 72 | let secs = 0; 73 | 74 | startbtn.addEventListener("click", () => { 75 | if(paused){ 76 | paused = false 77 | starttimer = Date.now() - elapsedtime 78 | intervalcount = setInterval(startcounting, 1000) 79 | } 80 | }) 81 | 82 | pausebtn.addEventListener("click", () => { 83 | if(!paused){ 84 | paused = true 85 | starttimer = Date.now() - elapsedtime 86 | clearInterval(intervalcount) 87 | } 88 | }) 89 | 90 | resetbtn.addEventListener("click", () => { 91 | paused = true; 92 | clearInterval(intervalcount) 93 | starttimer; 94 | elapsedtime = 0; 95 | hours = 0; 96 | mins = 0; 97 | secs = 0; 98 | count.textContent = `00:00:00` 99 | }) 100 | 101 | function startcounting(){ 102 | elapsedtime = Date.now() - starttimer 103 | 104 | secs = Math.floor((elapsedtime / 1000) % 60) 105 | mins = Math.floor((elapsedtime / (1000 * 60)) % 60) 106 | hours = Math.floor((elapsedtime / (1000 * 60 * 60) % 60)) 107 | 108 | secs = pad(secs) 109 | mins = pad(mins) 110 | hours = pad(hours) 111 | 112 | count.textContent = `${hours}:${mins}:${secs}` 113 | 114 | function pad(input){ 115 | return input < 10 ? `0${input}` : input.toString() 116 | }} -------------------------------------------------------------------------------- /84. Stopwatch Program/style.css: -------------------------------------------------------------------------------- 1 | .stopwatchdiv{ 2 | margin: auto auto; 3 | background-color: rgb(49, 49, 49); 4 | border-radius: 20px; 5 | width: fit-content; 6 | text-align: center; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | .count{ 11 | font-family: monospace; 12 | color: rgb(29, 221, 12); 13 | font-size: 4rem; 14 | margin: 20px; 15 | text-align: center; 16 | } 17 | .buttondiv{ 18 | padding: 5px; 19 | } 20 | 21 | .button{ 22 | font-family: monospace; 23 | font-size: 1rem; 24 | padding: 5px; 25 | border-radius: 5px; 26 | margin-inline: 6px; 27 | border: 1px solid white; 28 | cursor: pointer; 29 | background-color: rgb(44, 44, 44); 30 | color: white; 31 | } -------------------------------------------------------------------------------- /85. batuguntingkertas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |

Game Gunting, Batu, Kertas

12 | 13 |
14 | 15 |


16 | 17 |

18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /85. batuguntingkertas/main.js: -------------------------------------------------------------------------------- 1 | // Decalration 2 | const batuBtn = document.getElementById("batu") 3 | const guntingBtn = document.getElementById("gunting") 4 | const kertasBtn = document.getElementById("kertas") 5 | const choice = document.getElementById("choice") 6 | const array = ["Batu", "Gunting", "Kertas"] // 0 , 1 , 2 7 | const result = document.getElementById("result") 8 | const computer = document.getElementById("computerchoice") 9 | 10 | 11 | batuBtn.addEventListener ("click", () => { 12 | 13 | let randomizer = Math.floor(Math.random() * 3) 14 | console.log(randomizer) 15 | choice.textContent = "Batu" 16 | switch(randomizer){ 17 | case 0: 18 | computer.textContent = "Batu" 19 | result.style.color = "Gray" 20 | result.textContent = "Seri!" 21 | break 22 | case 1: 23 | computer.textContent = "Gunting" 24 | result.style.color = "Lime" 25 | result.textContent = "Kamu Menang!" 26 | break 27 | case 2: 28 | computer.textContent = "Kertas" 29 | result.style.color = "Red" 30 | result.textContent = "Kamu Kalah!" 31 | 32 | } 33 | 34 | 35 | 36 | }) 37 | kertasBtn.addEventListener("click", () => { 38 | let randomizer = Math.floor(Math.random() * 3) 39 | choice.textContent = "Kertas" 40 | switch(randomizer){ 41 | case 0: 42 | computer.textContent = "Batu" 43 | result.style.color = "Lime" 44 | result.textContent = "Kamu Menang!" 45 | break 46 | case 1: 47 | computer.textContent = "Gunting" 48 | result.style.color = "Red" 49 | result.textContent = "Kamu Kalah!!" 50 | break 51 | case 2: 52 | computer.textContent = "Kertas" 53 | result.style.color = "Gray" 54 | result.textContent = "Seri!" 55 | 56 | } 57 | }) 58 | guntingBtn.addEventListener("click", () => { 59 | let randomizer = Math.floor(Math.random() * 3) 60 | choice.textContent = "Gunting" 61 | switch(randomizer){ 62 | case 0: 63 | computer.textContent = "Batu" 64 | result.style.color = "Red" 65 | result.textContent = "Kamu Kalah!" 66 | break 67 | case 1: 68 | computer.textContent = "Gunting" 69 | result.style.color = "Gray" 70 | result.textContent = "Seri!" 71 | break 72 | case 2: 73 | computer.textContent = "Kertas" 74 | result.style.color = "Lime" 75 | result.textContent = "Menang!" 76 | 77 | } 78 | }) 79 | -------------------------------------------------------------------------------- /85. batuguntingkertas/style.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | 3 | border-radius: 10px; 4 | padding: 10px; 5 | width: fit-content; 6 | text-align: center; 7 | margin: auto auto; 8 | box-shadow: 5px 10px 10px rgb(212, 212, 212); 9 | } 10 | #header1{ 11 | font-family: Arial, Helvetica, sans-serif; 12 | color: rgb(59, 59, 59); 13 | } 14 | #youlabel{ 15 | font-family: Arial, Helvetica, sans-serif; 16 | font-weight: bold; 17 | font-size: 1.3rem; 18 | } 19 | #choice{ 20 | font-family: Arial, Helvetica, sans-serif; 21 | font-weight: bold; 22 | font-size: 1.3rem; 23 | color: rgb(55, 196, 0); 24 | } 25 | .game{ 26 | margin-inline: 5px; 27 | border-color: gray; 28 | border-radius: 2px; 29 | box-shadow: rgba(128, 128, 128, 0.479) 2px 2px 4px; 30 | border-style: none; 31 | cursor: pointer; 32 | padding: 5px; 33 | width: 70px; 34 | font-family: Arial, Helvetica, sans-serif; 35 | } 36 | #computerlabel{ 37 | font-family: Arial, Helvetica, sans-serif; 38 | font-weight: bold; 39 | font-size: 1.3rem; 40 | } 41 | #computerchoice{ 42 | font-family: Arial, Helvetica, sans-serif; 43 | font-weight: bold; 44 | font-size: 1.3rem; 45 | color: rgb(196, 0, 0); 46 | } 47 | .result{ 48 | font-family: Arial, Helvetica, sans-serif; 49 | font-weight: bold; 50 | font-size: 1.3rem; 51 | } -------------------------------------------------------------------------------- /86. TicTacToe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |

Tic Tac Toe

12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |

24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /86. TicTacToe/main.js: -------------------------------------------------------------------------------- 1 | const cells = document.querySelectorAll(".cell"); 2 | const statustext = document.querySelector("#statustext"); 3 | const restart = document.querySelector("#restartbutton"); 4 | const wincondition = [ 5 | [0, 1, 2], 6 | [3, 4, 5], 7 | [6, 7, 8], 8 | [0, 3, 6], 9 | [1, 4, 7], 10 | [2, 5, 8], 11 | [0, 4, 8], 12 | [2, 4, 6] 13 | ]; 14 | let options = ["", "", "", "", "", "", "", "", ""]; 15 | let currentplayer = "X"; 16 | let running = false; 17 | 18 | initializeGame(); 19 | 20 | function initializeGame() { 21 | cells.forEach(cell => cell.addEventListener("click", cellclicked)); 22 | restart.addEventListener("click", restartgame); 23 | statustext.textContent = `Giliran ${currentplayer} untuk melangkah`; 24 | running = true; 25 | } 26 | 27 | function cellclicked() { 28 | const cellindex = this.getAttribute("cellIndex"); 29 | 30 | if (options[cellindex] !== "" || !running) { 31 | return; 32 | } 33 | updatecell(this, cellindex); 34 | changeplayer(); // Call changeplayer here 35 | checkwinner(); 36 | } 37 | 38 | function updatecell(cell, index) { 39 | options[index] = currentplayer; 40 | cell.textContent = currentplayer; 41 | cell.style.pointerEvents = "none"; // Disable further clicks on the cell. 42 | } 43 | 44 | function changeplayer() { 45 | currentplayer = (currentplayer == "O") ? "X" : "O"; 46 | statustext.textContent = `Giliran ${currentplayer} untuk melangkah`; 47 | } 48 | 49 | function checkwinner() { 50 | for (const condition of wincondition) { 51 | const [a, b, c] = condition; 52 | if (options[a] && options[a] === options[b] && options[a] === options[c]) { 53 | statustext.textContent = `${options[a]} memenangkan permainan!`; 54 | running = false; 55 | return; 56 | } 57 | } 58 | 59 | if (!options.includes("")) { 60 | statustext.textContent = "Permainan berakhir, hasil imbang!"; 61 | running = false; 62 | } 63 | } 64 | 65 | function restartgame() { 66 | options = ["", "", "", "", "", "", "", "", ""]; 67 | currentplayer = "X"; 68 | statustext.textContent = `Giliran ${currentplayer} untuk melangkah`; 69 | running = true; 70 | cells.forEach(cell => { 71 | cell.textContent = ""; 72 | cell.style.pointerEvents = "auto"; 73 | }); 74 | } 75 | 76 | // this, cellindex -------------------------------------------------------------------------------- /86. TicTacToe/style.css: -------------------------------------------------------------------------------- 1 | .cell{ 2 | width: 75px; 3 | height: 75px; 4 | border: black solid 2px; 5 | line-height: 75px; 6 | font-size: 3rem; 7 | font-family: sans-serif; 8 | cursor: pointer; 9 | } 10 | #cellcontainer{ 11 | display: grid; 12 | grid-template-columns: repeat(3,auto); 13 | width: 225px; 14 | margin: auto; 15 | } 16 | #gamecontainer{ 17 | text-align: center; 18 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ProjectRavel - Deskripsi Pelajaran JavaScript 2 | 3 | Selamat datang di **ProjectRavel**! Repository ini berisi materi dan pelajaran untuk mempelajari JavaScript dari dasar hingga tingkat lanjutan. Pelajaran ini dirancang agar mudah dipahami, lengkap dengan contoh kode dan latihan praktis untuk membantu Anda menguasai JavaScript. 4 | 5 | ## Daftar Isi 6 | 7 | 1. [Pendahuluan](#pendahuluan) 8 | 2. [Pengenalan JavaScript](#pengenalan-javascript) 9 | 3. [Variabel dan Tipe Data](#variabel-dan-tipe-data) 10 | 4. [Operator dan Ekspresi](#operator-dan-ekspresi) 11 | 5. [Struktur Kontrol](#struktur-kontrol) 12 | 6. [Fungsi](#fungsi) 13 | 7. [Objek dan Array](#objek-dan-array) 14 | 8. [DOM Manipulation](#dom-manipulation) 15 | 9. [Event Handling](#event-handling) 16 | 10. [Asynchronous JavaScript](#asynchronous-javascript) 17 | 11. [Module dan Bundling](#module-dan-bundling) 18 | 12. [Latihan dan Proyek](#latihan-dan-proyek) 19 | 20 | ## Pendahuluan 21 | 22 | JavaScript adalah bahasa pemrograman yang sangat populer untuk pengembangan web. Dengan JavaScript, Anda dapat membuat situs web interaktif, dinamis, dan kaya fitur. Pelajaran ini akan membawa Anda melalui konsep-konsep dasar hingga teknik-teknik lanjutan dalam pemrograman JavaScript. 23 | 24 | ## Pengenalan JavaScript 25 | 26 | Pada bagian ini, Anda akan mempelajari sejarah singkat JavaScript, bagaimana cara kerjanya di dalam browser, dan bagaimana cara menulis kode JavaScript pertama Anda. 27 | 28 | ## Variabel dan Tipe Data 29 | 30 | Pelajari cara mendeklarasikan variabel menggunakan `var`, `let`, dan `const`. Kenali berbagai tipe data dalam JavaScript seperti `string`, `number`, `boolean`, `array`, dan `object`. 31 | 32 | ## Operator dan Ekspresi 33 | 34 | Pahami penggunaan operator aritmatika, logika, perbandingan, dan operator lainnya dalam JavaScript untuk membentuk ekspresi. 35 | 36 | ## Struktur Kontrol 37 | 38 | Dalami penggunaan struktur kontrol seperti `if`, `else`, `switch`, `for`, `while`, dan `do...while` untuk mengendalikan alur program. 39 | 40 | ## Fungsi 41 | 42 | Pelajari cara mendefinisikan dan memanggil fungsi, memahami konsep scope dan hoisting, serta menggunakan fungsi anonim dan arrow functions. 43 | 44 | ## Objek dan Array 45 | 46 | Kenali cara bekerja dengan objek dan array, serta metode-metode penting yang dapat digunakan untuk memanipulasi data dalam objek dan array. 47 | 48 | ## DOM Manipulation 49 | 50 | Pelajari cara mengakses dan memanipulasi Document Object Model (DOM) untuk mengubah konten dan tampilan halaman web secara dinamis. 51 | 52 | ## Event Handling 53 | 54 | Pahami cara menangani event dalam JavaScript, seperti click, submit, dan keypress, serta penggunaan event listener. 55 | 56 | ## Asynchronous JavaScript 57 | 58 | Pelajari konsep asynchronous dalam JavaScript, termasuk penggunaan callback, promises, dan async/await untuk mengelola operasi asinkron. 59 | 60 | ## Module dan Bundling 61 | 62 | Pahami cara membagi kode JavaScript ke dalam modul dan menggunakan bundler seperti Webpack untuk mengelola dependensi dan meminimalkan kode. 63 | 64 | ## Latihan dan Proyek 65 | 66 | Di bagian ini, Anda akan menemukan latihan-latihan praktis dan proyek mini yang dapat membantu memperkuat pemahaman Anda tentang JavaScript. 67 | 68 | ## Kontribusi 69 | 70 | Kami sangat terbuka terhadap kontribusi dari komunitas. Jika Anda ingin berkontribusi, silakan ikuti panduan kontribusi yang ada di repository ini. 71 | 72 | 73 | Selamat belajar dan semoga sukses dalam perjalanan Anda menguasai JavaScript bersama **ProjectRavel**! 74 | 75 | Jika ada pertanyaan atau masukan, jangan ragu untuk menghubungi kami melalui [akun GitHub ProjectRavel](https://github.com/ProjectRavel). 76 | 77 | Terima kasih! 78 | --------------------------------------------------------------------------------