React Developer

PROA

Professional Academy

Pengenalan JavaScript

Agenda

  • Instalasi NodeJS
  • Computer Science?
  • Yuk kenalan sama JavaScript

Instalasi NodeJS

https://nodejs.org/en/download

  • Pilih versi LTS !
  • Sesuaikan dengan Sistem Operasi yang digunakan

Computer Science?

  • Suatu bidang keilmuan yang mempelajari komputer bekerja
  • Komputer Komputasi Kalkulasi Proses
  • Proses macam apa?

Computer Science? (ii)

Semuanya berkutat di ...
Input Proses Output

Computer Science? (iii)

console.log("halo, aku javascript");
"halo, aku javascript"
Input
console.log();
Proses
halo, aku javascript
Output

Algoritma

  • Proses atau sekumpulan langkah yang harus diikuti dalam kalkulasi atau operasi dalam menyelesaikan masalah, khususnya oleh sebuah komputer.
  • Sekumpulan langkah untuk menyelesaikan suatu permasalahan yang ada

Algoritma (ii)

sebuah flowchart

Algoritma (iii)

Mari bermain
Google Games

Yuk kenalan sama JavaScript

  • Variabel
  • Tipe Data
  • Operator
  • Alur Kontrol

Variabel

Sesuatu yang menyimpan suatu nilai, yang bisa diganti nantinya.

Variabel (ii)

Umumnya dideklarasikan dengan cara:

  • cara 1: var
  • cara 2: let
  • cara 3: const
Bedanya apa???

Variabel (iii)

  • var adalah cara penulisan lama, sebaiknya dihindari
  • let digunakan untuk variabel yang BOLEH diubah nantinya
  • const (constant) digunakan untuk variabel yang TIDAK BOLEH diubah nantinya

Variabel (iv)

Mari kita liat contoh kode di bawah ini

const pi = 3.14; // konstanta angka
let harga = 15000; // data angka
let nama = "LipSum"; // data nama;

// ganti harga jadi 10000
harga = 10000;

// ganti pi jadi 3.25
pi = 3.25; // di sini akan terjadi error

Variabel (v)

Apakah hasil dari potongan kode di bawah ini?

let apelPerKilo = 10000;
let minyakPerLiter = 48000;

// misalnya harga apel turun
apelPerKilo = apelPerKilo - 2000;

// misalnya harga minyak naik lagi
minyakPerLiter = minyakPerLiter + 3000

let hargaBelanja = 2 * apelPerKilo + 5 * minyakPerLiter;

console.log('total'); // berapakah hasilnya?

Tipe Data

Primitif
  • Boolean
  • Null
  • Undefined
  • Number
  • String
Objek

Wah banyak sekali

Tenang, kita akan coba bahas satu per satu yah !

Tipe Data (ii)

Boolean

Tipe data benar atau salah (true / false)

Number

Tipe data untuk angka (1, 3.14)

String

Tipe data untuk tulisan ('halo', "dunia")

Tipe Data (iii)

Null

Tipe data yang menyatakan kosong

Undefined

Tipe data untuk variabel yang sudah ada, tapi belum di-assign, belum ditetapkan

Hati hati, slide setelah ini bisa membuat kepala meledak

Tipe data dinamis

JavaScript menganut tipe data yang dinamis

(tipe data dalam variabel boleh diganti kapanpun)

// ini adalah sebuah variabel, sekarang menampung Number
let variabelDinamis = 10;

// sekarang akan kita ganti tipe data nya menjadi boolean
variabelDinamis = true;

// sekarang akan berubah lagi menjadi String
variabelDinamis = "Halo, aku adalah string !";

Operator

  • Operator Aritmatika
  • Operator Relasi
  • Operator Logika

Operator Aritmatika

Operator yang berhubungan dengan perhitungan matematika

Operator Arti Contoh Hasil
+ Penambahan 
let hasil = 4 + 2;
 6
- Pengurangan 
let hasil = 4 - 2;
 2
* Perkalian 
let hasil = 4 * 2;
 8
/ Pembagian 
let hasil = 4 / 2;
 2
% Modulus 
let hasil = 4 % 2;
 0
++ Penambahan (+1) 
let hasil = 4;
hasil++;
 5
-- Pengurangan (-1) 
let hasil = 4;
hasil--;
 3

Operator Relasi

Operator yang berhubungan dengan relasi antar variabel

Operator Arti Contoh Hasil
== Sama dengan 
let hasil = (4 == 2);
 false
!= Tidak sama dengan 
let hasil = (4 != 2);
 true
=== Sama dengan (tipe data) 
let hasil = (4 === 4);
let hasil2 = (4 === "4");

true

false
!== Tidak sama dengan (tipe data) 
let hasil = (4 !== 4);
let hasil2 = (4 !== "4");

false

true

Operator Relasi (ii)

Operator Arti Contoh Hasil
< Kurang dari 
let hasil = (4 < 2);
 false
> Lebih dari 
let hasil = (4 > 2);
 true
<= Kurang dari sama dengan 
let hasil = (4 <= 2);
 false
>= Lebih dari sama dengan 
let hasil = (4 >= 2);
 true

Operator Logika

Operator yang berhubungan dengan Gerbang Logika (AND / OR)

Operator Arti Contoh Hasil
&& Dan 
let hasil  = (4 > 2) && (4 < 2);
let hasil2 = (4 > 2) && (4 > 2);
let hasil3 = (4 < 2) && (4 < 2);
let hasil4 = (4 < 2) && (4 > 2);
 false
true
false
false
|| Atau 
let hasil  = (4 > 2) || (4 < 2);
let hasil2 = (4 > 2) || (4 > 2);
let hasil3 = (4 < 2) || (4 < 2);
let hasil4 = (4 < 2) || (4 > 2);
 true
true
false
true

QnA

Waktunya tantangan !

Selesaikan kode berikut yah

Klik Di sini

Referensi

  • https://www.w3schools.com/js/
  • https://www.tutorialsteacher.com/javascript/javascript-variable
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
withered-flowers (2022)