Cara menggunakan INTRIDUCTION pada JavaScript

Langkah pertama untuk mengetahui client-side-scripting adalah berkenalan dengan Javascript.

Berjumpa lagi dengan gua Hanas Bayu Pratama sebagai mentor web development. Kali ini gua akan membahas mengenai Javascript dan cara penulisannya

Sebelum melanjutkan ada baiknya kalian mengikuti tutorial sebelumnya mengenai Web Development — Pengenalan

Apa pengertian dan fungsi Javascript?

Javascript adalah bahasa client-side-scripting yang berarti kode yang ditulis berada pada bagian client (browser) dan tidak berada di server. Javascript dapat melakukan berbagai interaksi antara halaman website dengan pengguna melalui berbagai fungsi.

Javascript biasanya digunakan untuk membuat pemberitahuan berupa notifikasi atau alert, validasi form, efek, membuat game, animasi, dan hal lainnya yang berhubungan dengan aktivitas pengguna secara langsung.

Contoh pengggunaan Javascript agar website menjadi lebih atraktif adalah toko online seperti Tokopedia, Lazada, dan Bukalapak. Pada halaman utama Tokopedia, kalian pasti menemui lucky egg yang biasanya muncul dan kalian bisa pecahkan telurnya 😁😁😁. Selain itu, toko online pasti terdapat slider atau gambar yang dapat bergerak secara otomatis. Itu semua bisa terjadi karena menggunakan javascript.

SINTAKS (SYNTAX)

Semua bahasa pemrograman pasti mempunyai sintaks, lalu apa sintaks itu? Sintaks adalah aturan penulisan code pada bahasa pemrograman dan setiap bahasa pemrograman memiliki aturan penulisan code masing-masing.

Misalkan bahasa indonesia memiliki aturan penulisan dan pelafalan yang dikenal dengan EYD (Ejaan Yang Disempurnakan). Nah, penulisan dan pelafalan dalam bahasa Indonesia disebut sebagai sintaks bahasa Indonesia.

src: https://apptopia.com/google-play/app/cn.museedu.iden/intelligence

Lalu kita bandingkan sintaks bahasa Indonesia dengan bahasa Inggris atau bahasa lain. Tentu saja berbeda dari segi sintaksnya bukan? Nah bahasa pemrograman juga sama seperti bahasa manusia, kalau kita bandingkan bahasa pemrograman satu dengan yang lain, maka akan berbeda juga sintaksnya.

Meskipun berbeda sintaksnya antara bahasa Indonesia dan Inggris, akan tetapi kalau kita teliti lagi maka akan kita temukan bahwa mereka berdua memiliki kesamaan, yaitu memiliki kata benda, kata sifat, kata keterangan, subjek, predikat, dan objek yang menyusun kalimat.

Nah bahasa pemrograman juga sama, meskipun berbeda sintaksnya, akan tetapi bahasa pemrograman memiliki control flow yang sistemnya sama saja akan tetapi hanya berbeda sintaksnya.

CONTROL FLOW

Control Flow adalah sebuah cara untuk memberi tau program instruksi apa yang harus dijalankan. Control Flow memiliki perulangan (seperti for, foreach, while, dan do while) dan pengkondisian (if, else if,else, dan switch) didalamnya.

https://www.seasiainfotech.com/blog/difference-between-java-and-javascript/

Sebagai contoh kita bandingkan Java dengan Javascript (perlu diketahui bahwa Javascript bukan Java atau bahkan script nya Java 😁😁😁). Meskipun berbeda sintaks nya, akan tetapi keduanya memiliki control flow yang sama.

Lalu bagaimana caranya untuk menulis sintaks Javascript?

Internal Javascript jika ditulis pada halaman maka wajib menggunakan tag <script> dan tag tsb juga digunakan untuk menyambungkan ke eksternal javascript.
Javascript Sifatnya Case Sensitive (huruf biasa dan kapital berpengaruh).
Sintaks Javascript biasanya ditulis dibagian element <body> atau tag <head> (lebih sering ditulis dibagian dalam element <body>).
Disetiap akhir baris tidak wajib menggunakan titik koma (;) dan akan tetap berjalan (walaupun banyak programmer Javascript menggunakan (;) dalam penulisan sintaks Javascriptnya akan tetapi sama saja berjalan walaupun tanpa (;) tetap bisa).
File eksternal Javascript disimpan dengan ekstensi .js.
Javascript dapat diketik pada file HTML dan PHP.

Bagaimana menulis variabel pada javascript?

Pengetikkan nama variabel dapat menggunakan huruf, angka, dan tanda underscore.
Pengetikkan nama variabel wajib diawali dengan huruf. Contoh: hello, world.
Pengetikkan nama variabel harus memperhatikan huruf besar dan kecil (case sensitive).
Nama variabel tidak boleh mengandung spasi.
Pengetikkan variabel javascript diawali dengan sintaks “var / let /const”.

Dari kelimat cara diatas, dapat dicontohkan penulis variabel pada Javascript sebagai berikut:

let kata = "Hello World"
var welcome = "Hello"
const satuan = 12
const koma = 12.5

Apa perbedaan var, let, dan const? Yang perlu diperhatikan paling penting adalah const, karena const merupakan konstanta, maka variabel ini apabila sudah dideklarasi tidak dapat diubah. Untuk let dan var sebenarnya sama, hanya ada perbedaan sedikit. Info lebih lengkap silahkan baca di https://medium.com/coderupa/es6-var-let-const-apa-bedanya-1cd4daaee9f0.

Jenis File Javascript

Internal Javascript

Internal Javascript adalah kode Javascript yang ditulis didalam file HTML. Untuk menggunakannya kita harus mengetikkan sintaks javascript di element <script>.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Belajar Javascript</title>
</head>
<body><script>
    var x = 2019;
    var y = 2020;
	console.log(x);
	console.log("hello world");
    console.log("Hai, Nama Saya Hanas, saya adalah pengajar web periode " + x + "-" + y + " di Komandro CCIT FTUI");
    console.log(document);
    alert("Selamat Belajar Javascript");
</script>
</body>
</html>

Dari sintaks diatas, disana terdapat sintaks sebagai berikut:

var →untuk membuat variabel
console.log → untuk menampilkan text,variabel atau boolean(true/false) di console(kalian tinggal klik kanan mouse lalu klik inspect atau ctrl+shift+i dan setelah itu pilih console).
console.log(document) → untuk menampilkan seluruh element HTML di console.

Kita bisa klik kanan pada mouse, setelah itu klik Inspect atau Ctrl + Shift + I pada keyboard. setelah itu kalian klik panel tab Console.

External Javascript

External Javascript adalah file Javascript yang terpisah, artinya file ini ditulis diluar dengan ekstensi file .js. Untuk menggunakannya kita harus mengetikkan src di dalam tag <script> agar dapat terhubung ke file yang .

file html dan javascipt dibawah akan digunakan secara berlanjut ya

belajarJavascript.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Belajar Javascript</title>
</head>
<body><h2>Selamat Belajar Javascript</h2>
<script type="text/javascript" src="javascript_basic.js"></script>
</body>
</html>

javascript_basic.js

var x = 2019;var y = 2020;console.log(x);console.log("hello world");console.log("Hai, Nama Saya Hanas, saya adalah pengajar web periode " + x + "-" + y + " di Komandro CCIT FTUI");console.log(document);

Hasilnya akan sama seperti internal Javascript. Selain itu, Javascript Juga bisa menampilkan dialog box yang disebut pop up box.

Terdapat 3 jenis pop up box pada javascript, yaitu :

alert

Digunakan untuk menerima parameter berisi pesan yang akan dimunculkan pada pop up alertnya. Untuk contoh code javascriptnya bisa dilihat dibawah:

alert('welcome..');

Kalian bisa memblok sintaks Javascript sebelumnya lalu tekan “ctrl + /” untuk memberi komentar pada file Javascript kita agar sintaks sebelumnya menjadi command sehingga tidak aktif. Hasilnya akan seperti ini

//alert('welcome..');

tara, ini dia hasilnya

jika alert nya lebih dari 1 maka akan seperti dibawah

alert('welcome..');
alert('welcome..');
alert('welcome..');

Jika muncul lebih dari 1 kali pop up box pada javascipt, maka browser akan menampilkan teks dengan tanda checklist disebelah kiri. Jika kita klik checklist tersebut lalu tekan OK maka dialog box tersebut tidak akan muncul lagi. Untuk mengulang kita tekan refresh dan tidak perlu checklist pesan tersebut agar dialog box muncul.

prompt

Sama seperti alert, prompt juga dapat memunculkan dialog pesan. akan tetapi prompt juga memiliki button ok dan cancel yang jika di klik dapat melakukan aksi yang berbeda.disini juga inputan berupa text box dimana nilai yang kita inputkan akan disimpan kedalam memori Sehingga kita membutuhkan variabel untuk menampung nilai tersebut yang nantinya akan dimunculkan ke dalam dialog box selanjutnya, atau pun di dalam tampilan teks di website.

var day = parseInt(prompt("input a number of day"));
if (day) {
 switch (day) {
  case 1:
   alert("Day is Monday");
   break;
  case 2:
   alert("Day is Tuesday");
   break;
  case 3:
   alert("Day is Wednesday");
   break;
  case 4:
   alert("Day is Thursday");
   break;
  case 5:
   alert("Day is Friday");
   break;
  case 6:
   alert("Day is Saturday");
   break;
  case 7:
   alert("Day is Sunday");
   break;
  default:
   alert("Not a valid number");
 }
} else {
 alert("belum mengisi nomor");
}

Proses input nomor

Hasil

Hasil apabila tidak mengisi nomor.

confirm

Pop Up Box sebuah program biasanya akan menampilkan dialog box yang dimulai dari alert selamat datang, prompt inputan nama, dilanjutkan dengan confirm bahwa user akan memasukkan input lagi atau tidak. Kondisi ini akan terus berulang selama kita menekan tombol OK, dan akan berhenti pada saat konfirmasi kita tekan Cancel. untuk confirm kita menggunakan konsep control flow, khususnya pengkondisian.

var again = true;
while (again) {
 var name = prompt('input your name:');
 alert('hello ' + name);
 again = confirm('try again?');
}
alert('thank you..');

Langkah pertama, prompt memasukkan nama.

Lalu akan muncul alert dengan nama sesuai input.

Akan muncul prompt untuk mencobanya kembali.

Hasil apabila kita klik cancel.

Untuk pop up box dan console.log pada Javascript, biasanya hanya digunakan untuk testing saja, yaitu untuk test code pada Javascript hasilnya sesuai ekspektasi atau tidak. Nah, bagaimana kalau kita berinteraksi dengan element HTML kita? Disinilah konsep dom dimulai.

DOM (Document Object Model)

DOM adalah sebuah metode yang dapat memperbolehkan akses dan perubahan suatu konten, struktur, dan style oleh script pada sebuah dokumen HTML.

Pada metode DOM, setiap element html dipandang sebagai sebuah object. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan object dari dokumen html itu sendiri. Dibawah ini adalah representasi HTML DOM dalam model pohon :

src: https://www.researchgate.net/figure/Example-of-DOM-Node-Tree_fig1_254002847

Manipulasi DOM

Metode manipulasi DOM mengacu konten, struktur, dan style pada dokumen html dapat diakses atau bahkan dirubah dengan menggunakan sintaks yang ada dijavascript.

Akses Element DOM

Sebelum mulai melakukan manipulasi terhadap element-element DOM, tentunya kita harus terlebih dahulu memilih mana element yang akan kita ubah propertinya. Terdapat beberapa selector yang dapat kita gunakan untuk mengakses element DOM, yaitu:

saran saya kalian baca terlebih dahulu Web Development Introduction — CSS karena konsep selector Javascript hampir mirip dengan selector css

getElementById

Fungsi ini biasanya digunakan untuk mengakses element HTML berdasarkan nilai property id pada element. Fungsi ini hanya bisa digunakan 1 kali dalam 1 dokumen. Apabila terdapat lebih dari satu element dengan id yang sama, maka hanya berfungsi pada element paling atas.

Untuk contoh code, bisa dilihat dibawah (kali ini saya to the point ya, saya yakin kalian pasti sudah tahu bagaimana cara membuat html jika sudah mengunjungi Web Development Introduction — Belajar HTML)

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div id="">
  <h2 id="h2"></h2>
  <p id="h2"></p>
 </div>
 <script>
 var a = document.getElementById("h2");
 a.innerHTML = "Nama Saya adalah si pitung";
 </script>
</body>
</html>

Hasil dari getElementById

Untuk tag <h2> dapat dijalankan, karena dia berada diatas sebelum tag <p>, sedangkan tag <p> tidak dapat dijalankan karena attribute id sudah dipakai sebelumnnya. innerHTML sendiri fungsinya digunakan untuk menuliskan text html pada Javascript dan tanda document sebelum selector digunakan untuk menandai halaman HTML yang akan dikenai selector Javascript

getElementsByTagName

Fungsi ini digunakan untuk menyeleksi tag pada suatu dokumen html. Berbeda dengan getElementById yang hanya bisa menyeleksi 1 element pada dokumen html, getElementsByTagName dapat juga digunakan untuk menyeleksi banyak elemen dom dan ini terjadi karena selector ini mengandung konsep array.

Saran saya kalian bisa ke Fundamental Programing — Array agar kalian memahami maksudnya.

Sekarang kalian bisa melihat contoh dibawah:

<!DOCTYPE html>
<html>
<head>
<style>
 .tag {
 width: 50%;
 height: 300px;
 margin: 20px auto;
 background-color: blue;
 text-align: center;
 padding: 50px;
 font: 35px sans-serif;
 }
 </style>
 <title></title>
</head>
<body>
 <div class="tag">
  <p>Inilah hasil dari selector tag pada javascript</p>
  <p>Inilah hasil dari selector tag pada javascript</p>
  <p>Inilah hasil dari selector tag pada javascript</p>
  <p>Inilah hasil dari selector tag pada javascript</p>
 </div>
 <script>
 const p = document.getElementsByTagName('p');
 for (let i =0; i < p.length; i++) {
 p[i].style.color = 'white';
 p[i].style.backgroundColor = 'green';
 }
 </script>
</body>
</html>

Nah, untuk menggunakan selector ini kita wajib banget menggunakan control flow agar dapat berjalan. Pada Javascript kita juga dapat menggunakan property css dengan syarat jika properti itu mengandung lebih dari 1 kata maka wajib awal dari kata keduanya huruf besar dan tidak ada spasi antar katanya. Jika kita menjalankan kode diatas, maka hasilnya seperti dibawah ini:

Hasil Selector Tag

Lalu kita juga bisa nih, untuk menyeleksi satu element menggunakan selector ini (hapus isi <script> kalian sebelumnya dan ganti dengan yang ada dibawah).

<script>
 const p = document.getElementsByTagName('p')[2];
 p.style.backgroundColor = 'orange';
 p.style.color = 'white';
</script>

Jika kita jalankan, maka hasilnya seperti dibawah:

tara, ini dia hasilnya

getElementsByClassName

Konsepnya sama seperti getElementsByTagName, akan tetapi selector ini Dapat menyeleksi attribute class yang ada di element html.

<!DOCTYPE html>
<html>
<head><style>
 .tag {
 width: 50%;
 height: 300px;
 margin: 20px auto;
 background-color: blue;
 text-align: center;
 padding: 50px;
 font: 35px sans-serif;
 }
 </style>
 <title></title>
</head>
<body>
 <div class="tag">
  <p class="text">Ini untuk selector class pada javascript</p>
  <p class="text">Ini untuk selector class pada javascript</p>
  <p class="text">Ini untuk selector class pada javascript</p>
  <p class="text">Ini untuk selector class pada javascript</p>
 </div>
 <script>
 const p = document.getElementsByClassName('text');
 for (let i =0; i < p.length; i++) {
 p[i].style.color = 'white';
 p[i].style.backgroundColor = 'green';
 }
 </script>
</body>
</html>

Hasilnya sama seperti menggunakan selector getElementsByTagName ya

querySelector

Selector ini hanya dapat digunakan untuk element pertama saja, mirip seperti getElementById ya, akan tetapi selector ini tidak hanya id saja yang dipilih, akan tetapi dapat menyeleksi semua tipe selector css dan hanya 1 element dokumen saja yang dapat dipilih. Dibawah ini adalah contoh pengimplementasian querySelector:

<!DOCTYPE html>
<html>
<head><style>
 .tag {
 width: 50%;
 height: 300px;
 margin: 20px auto;
 background-color: blue;
 text-align: center;
 padding: 50px;
 font: 35px sans-serif;
 }
 </style>
 <title></title>
</head>
<body>
 <div class="tag">
  <p class="text">Ini untuk selector querySelector pada javascript</p>
  <p class="text">Ini untuk selector class pada javascript</p>
  <p class="text">Ini untuk selector class pada javascript</p>
  <p class="text">Ini untuk selector class pada javascript</p>
 </div>
 <script>
    const p = document.querySelector('.text');
    p.style.color = 'white';
    p.style.backgroundColor = 'yellow';
 </script>
</body>
</html>

Hasil query selector.

querySelectorAll

Sama seperti querySelector, bedanya dia dapat menyeleksi banyak element html seperti contoh dibawah.

<!DOCTYPE html>
<html>
<head><style>
 .tag {
 width: 50%;
 height: 300px;
 margin: 20px auto;
 background-color: blue;
 text-align: center;
 padding: 50px;
 font: 35px sans-serif;
 }
 </style>
 <title></title>
</head>
<body>
 <div class="tag">
  <p class="text">Ini adalah querySelectorAll javascript</p>
  <p class="text">Ini adalah querySelectorAll javascript</p>
  <p class="text">Ini adalah querySelectorAll javascript</p>
  <p class="text">Ini adalah querySelectorAll javascript</p>
 </div>
 <script>
 const p = document.querySelectorAll('.text');
 for (let i =0; i < p.length; i++) {
 p[i].style.color = 'white';
 p[i].style.backgroundColor = 'green';
 }
 </script>
</body>
</html>

tara, ini dia hasilnya

Kalian juga bisa mencoba code dibawah (kalian coba sendiri ya agar kalian bisa mengetahui hasil dari kalian mengetikkannya).

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
 <meta content="ie=edge" http-equiv="X-UA-Compatible">
 <title>Latihan JQuery</title>
</head>
<body>
 <p id="demo">Text ini bisa berubah</p>
 <p id="demo-text">Tulisan Text ini dapat berubah</p>
 <button id="alert">Klik ini untuk menampilkan Alert</button> 
 <button id="text">Klik ini untuk merubah text</button> 
 <button id="style">Klik ini untuk memodifikasi text</button> 
 <script>
 var alerting = document.getElementById("alert");function sendAlert() {
 alert("You click the button");
};
alerting.onclick = sendAlert;
var ubahStyleText = document.getElementById("style");function changeStyle() {
 document.getElementById("demo").style.fontSize = "30px";
 document.getElementById("demo").style.color = "green";
 document.getElementById("demo").style.fontFamily = "Arial";
};
ubahStyleText.onclick = changeStyle;
var ubahText = document.getElementById("text");function changeText() {
 document.getElementById("demo-text").innerHTML = "Sekarang text ini dirubah oleh innerHTML";
};
ubahText.onclick = changeText;
 </script>
</body>
</html>

Sekarang mari kita bahas library Javascript yaitu salah satunya JQuery.

src: https://annexal.com/logoshowcase/fifth/jquery_logo/

Apa sih JQuery itu?

JQuery adalah library Javascript yang mana isinya adalah code javascript yang sudah dikembangkan oleh para developer sehingga kita tidak perlu banyak mengetik banyak code. Cukup dengan memanggil fungsi pada JQuery maka kita dapat menggunakannya untuk file kita.

Apa kelebihan JQuery?

Mudah di pahami.
Kita cukup mengetik sintaks yang pendek untuk melakukan fungsi yang kompleks.
Gratis.
Ringan.

Bagaimana Cara Menggunakan JQuery ?

Secara online

Cara menggunakannya yaitu dengan menghubungkan file html / php dengan link jquery secara langsung. dengan menggunakan cara ini maka JQuery hanya akan berjalan jika laptop kalian terkoneksi dengan internet karena file jquery yang dituju berada di server JQuery.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Secara Offline

Cara menggunakannya yaitu dengan mendownload file jquery, setelah itu kalian dapat menghubungkan file html / php dengan file jquery.

Kemudian mendownload file JQuery bisa klik disini.

https://jquery.com/download/

Jika kalian klik kotak yang saya maksud maka akan muncul tampilan seperti dibawah

https://code.jquery.com/jquery-3.4.1.min.js

Tenang, itu sebenarnya cuma kodingan jQuery kok, buka virus ataupun malware. kalian tinggal klik kanan mouse, lalu save as kemudian simpan di folder

<script src="js/jquery-3.3.1.min.js"></script>

untuk menghubungkan jquery sesuaikan tempat folder kalian menyimpan dan nama JQuery nya.

Lalu bagaimana cara kita menggunakan fungsi yang ada di JQuery?

Kalian bisa menggunakan fungsi JQuery didalam tag <script> setelah tag script JQuery. Ini dilakukan agar Jquery diload dulu, baru setelah itu fungsi-fungsi yang ada di JQuery bisa digunakan.

Nah Sekarang kita akan menggunakan Event pada Javascript.
Event pada Jquery merupakan aksi untuk menyembunyikan element, memunculkan element, dsb. event dapat dilakukan ketika kita sudah menetapkan selector yang ingin diberikan aksi oleh JQuery.

Untuk contoh penerapannya bisa lihat contoh dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>latihan JQuery</title>
 <style>
 .container {
 margin: 20px;
 text-align: center;
 background: yellow;
 border: solid 1px;
 border-radius: 5px;
 height: 120px;
 display: none;
 }
 .btn {
 text-align: center;
 padding: 5px;
 margin: 2px;
 border: 3px solid blue;
 border-radius: 4px;
 background-color: lightblue;
 box-shadow: 2px 3px 5px gray;
 }
 </style>
</head>
<body>
 <h2>Aplikasi</h2><button class="btn">Show / Hide the thought of the day</button>
 <div class="container">
  <p>The thought of the day is:</p>
  <p>Where there is a will, there is a way!</p>
 </div>
 <script src="js/jquery-3.3.1.min.js" type="text/javascript">
 </script> 
 <script>
 $(document).ready(function() {
 $(".btn").click(function() {
 $(".container").slideToggle();
 });
 });
 </script>
</body>
</html>

Kalau dilihat dari contoh, saya telah membuat element <div> yang saya beri nama classnya container dan membuat tombol dengan nama classnya btn

<script>
 $(document).ready(function() {
  $(".btn").click(function() {
   $(".container").toggle()
  });
 });
</script>

Kali ini saya akan jelaskan sintaks yang saya pakai untuk menjalankan fungsi pada JQuery.

$(document).ready(function() {............})

sintaks diatas digunakan untuk memberitahu bahwa JQuery akan dijalankan pada saat halaman sudah siap diload penuh. lalu aksi JQuery akan dijalankan jika halaman sudah siap.

$(".btn").click(function() {
   $(".container").toggle()
});

Lalu sintaks diatas juga digunakan untuk memberikan aksi/event kepada element yang classnya btn ketika diklik.

Tampilan sebelum di klik.

Tampilan sesudah di klik.

Pada contoh diatas, element yang ditampilkan dan disembunyikan saat tombol diklik adalah element yang memiliki class container.

Setelah kita mengenal event pada JQuery, sekarang kita lanjut untuk mengenal Effect pada JQuery

Effect pada javascript banyak jenisnya yaitu :

hide()➡ fungsi ini untuk menyembunyikan element
show()➡ fungsi ini untuk menampilkan element
toggle()➡ fungsi ini perpaduan dari fungsi hide() dan show()
fadeIn()➡ fungsi ini untuk menampilkan element dengan effect memudar
fadeOut()➡fungsi ini untuk menyembunyikan element dengan effect memudar
fadeToggle()➡ fungsi ini perpaduan dari fadeIn() dan fadeOut
slideDown()➡ fungsi ini untuk menampilkan element dengan efek slide
slideUp()➡fungsi ini untuk menyembunyikan element dengan efek slide
slideToggle()➡fungsi ini perpaduan dari slideUp() dan slideDown()
animate()➡fungsi ini untuk membuat efek animasi pada element

Untuk mencobanya kalian tinggal ubah saja fungsi yang kita buat sebelumnya dengan cara merubah fungsi toggle() pada <script> dengan fungsi lain.

Sebenarnya masih banyak lagi fungsi pada Javascript dan JQuery, kalian bisa coba sendiri Fungsi Javascript dan JQuery dengan mengunjungi 2 link dibawah.

Kami menyarankan kamu belajar di W3Schools. Selain lengkap, bahasa dan contohnya juga mudah membuatmu mengerti Javascript. Selamat belajar & happy coding!