Bagian 3 JavaScript – Mengenal Logic Programming Untuk Membuat Website Dinamis “Front End dan Back End Developer”

Tutorial ini merupakan lanjutan dari tutorial sebelumnya, yaitu HTML dan CSS. Jika belum mengetahui apa itu HTML dan CSS, kamu bisa mempelajarinya pada tutorial di bawah ini.

1. Full Stack Web Developer Bagian 1 – HTML
2. Full Stack Web Developer Bagian 2 – CSS 

Saya harap kamu telah mengetahui HTML dan CSS, dan mari kita lanjut belajar.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang dapat bekerja di lingkungan front-end dan back-end (server). Namun pada tutorial ini, kita akan lebih fokus belajar dalam bidang front end menggunakan JavaScript.

JavaScript umumnya digunakan untuk membuat website dan aplikasi yang interaktif dan dinamis, seperti game, live chat, dan media informasi.

Cara Penulisan JavaScript

Ada 2 cara untuk menulis atau lebih tepatnya menempatkan kode JavaScript.

1. Menempatkan kode JavaScript, di dalam file .html.
2. Menempatkan kode javaScript, di dalam file .js dan memanggilnya di file .html

Baiklah untuk tahap dasar, kita akan belajar menampilkan teks menggunakan JavaScript dengan kedua metode penulisan diatas.

1. Menempatkan JavaScript Di Dalam File html

Buka teks editor (Sublime Text, VSCode, ataupun teks editor lainya). Kemudian salin kode di bawah ini, lalu simpan dengan nama html-javascript.html, dan lihat hasilnya di browser.

2. Menempatkan JavaScript Di Dalam File .js dan memanggilnya di File html

Buka teks editor. Kemudian salin kode di bawah ini, lalu simpan dengan nama teks.js

Buka teks editor. Kemudian salin kode di bawah ini, lalu simpan dengan nama teks.html

Lihat hasilnya di browser dengan melakukan klik 2 kali pada file teks.html

Diatas kita telah belajar menulis kode JavaScript dan mengetahuinya bahwa Javascript bisa ditulis di dalam file html dan diluar file html. Selanjutnya kita akan belajar JavaScript lebih dalam lagi.

Silahkan klik tombol Next Step untuk melanjutkan belajar.

Di bawah ini kita akan belajar variabel, operator, dan seleksi kondisi.

Variable

var NamaVariable = "Ini Valuenya";
var AngkaVariable = 100;

Contohnya adalah seperti di bawah ini

Operator

+ (tambah)
- (kurang)
* (kali)
/ (div atau hasil bagi)
% (modulus atau sisa hasil bagi)

Contohnya adalah seperti di bawah ini

Assignment Operator

var nilai = 98; //98 di simpan ke variabel nilai

Operator Pembanding

var nilai = 98;

nilai == 98; // equal operator
nilai != 98; // not equal
nilai > 98; // greater than
nilai < 98; // less than

Seleksi Kondisi IF

if(true) {
// jalankan perintah
}

Contohnya adalah seperti di bawah ini

Seleksi Kondisi IF ELSE

if(true) {
// jalankan perintah
}
else {
// jalankan perintah
}

Contohnya adalah seperti di bawah ini

Silahkan klik tombol Next Step untuk melanjutkan belajar.

Looping atau Iteration

Looping atau iteration adalah suatu kondisi yang bertujuan untuk mengulang suatu proses.

Di javascript kita dapat melakukan loop dengan menggunakan dua cara, yakni menggunakan  for dan while.

for(/* inisialiasasi, kondisi, increment ++ / decrement -- */ ) {
  /* proses */
}

while(/* kondisi */) { 
  /* proses  */
  /* increment ++ / decrement -- */
  }

Misal ada soal untuk menampilkan heading 1 sampai dengan 6. Pada kasus tersebut bisa saja kita mengetikan dengan html standart untuk menulis script heading 1 sampai dengan 6 secara manual, namun dengan javascript hal tersebut bisa dibuat lebih mudah dan simple tentunya.

Berikut adalah scriptnya.

1. Contoh penerapan looping for adalah seperti di bawah ini

2. Contoh penerapan looping untuk while adalah seperti di bawah ini

Tutorial ini belum selesai, dan akan segera di update. Nantinya kita akan belajar JavaScript lebih dalam lagi dan membuat suatu project dengan JavaScript 😀