Kelas Programming Dasar

Javascript - Var,
Condition, & Functions

Suci Fadhilah
Review
Tipe Data
number
string
boolean
object
function
undefined
Mengapa Tipe Data
Penting?
Mengapa Tipe Data
Penting?
true + 12

true + '12'
+(true, '12')
 Mengapa Tipe Data
Penting?
data harus dioperasikan sesuai
dengan tipenya agar program
berjalan sesuai dengan tujuannya
Bahas Tugas 2
 Are you ready?

Let's Start!
 1 Variables
Today's
Agenda 2 Conditions

3 Functions
"Bermain" dengan Data
Typeof
var a;
typeof a;
Typeof
var a;
typeof a; //undefined
Parsing
Teknik mengubah tipe data
Parsing
Teknik mengubah tipe data

Explicit
var a = "42";
var b = Number(a);

a;
b;
Parsing
Teknik mengubah tipe data

Explicit
var a = "42";
var b = Number(a);

a; // "42"
b; // 42
Parsing
Teknik mengubah tipe data

Explicit Implicit
var a = "42"; var a = "42";
var b = Number(a); var b = a * 1; //implicitly coerced

a; // "42" a; // "42"
b; // 42 b; // 42
Number(x); String(x); Boolean(x);

https://www.w3schools.com/js/js_type_conversion.asp
Variable
kucing

2310
var kucing = 2310;
kucing

2310
 Variable
"Sebuah tempat/wadah yang memiliki nama,
berguna untuk "menampung" sebuah nilai"
 Deklarasi
Deklarasi mendaftarkan variabel ke
dalam lingkup yang sesuai

Inisialisasi
Inisialisasi menyediakan memori
untuk variabel

Penugasan
Penugasan
menetapkan nilai yang
spesifik ke dalam variabel
 Deklarasi
Deklarasi mendaftarkan variabel ke
dalam lingkup yang sesuai
var a;

Inisialisasi
Inisialisasi menyediakan memori
untuk variabel
var a;

Penugasan
Penugasan
menetapkan nilai yang
spesifik ke dalam variabel
var a = 20;
Practice

Variable
var kucing = 2310;
Practice

Variable
var kucing = 2310;
declare
Practice

Variable
var kucing = 2310;
declare variable name
Practice

Variable
var kucing = 2310;
declare variable name value / reference
Deklarasi Variable
tidak hanya var !
Deklarasi Variable
tidak hanya var !
var let const
JS Block Scope
{ {
var x = 2; let x = 2;
} }
JS Block Scope
{ //global scope { //local scope
var x = 2; let x = 2;
} }
// x CAN be used here // x CANNOT be used here
Redeclaring
var x = 10; var x = 10;
// Here x is 10 // Here x is 10
{ {
var x = 2; let x = 2;
// Here x is 2 // Here x is 2
} }
// Here x is ? // Here x is ?
Redeclaring
var x = 10; var x = 10;
// Here x is 10 // Here x is 10
{ {
var x = 2; let x = 2;
// Here x is 2 // Here x is 2
} }
// Here x is 2 // Here x is 10
Conts
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Conts
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is ?
Conts
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Penamaan Variable
var no Space Allowed;
var 1NotStartedWithNumber;

var endWithNumberAllowed123;
var underscore_is_allowed;
var allowed$;
var $_$;
var camelCaseIsTheBest;
var camelCaseisTheStandardNamingRule;
var camelcaseisthestandardnamingrule;
Conditions
Reminder

Input Program Output

 Program Menghitung Harga

Ibu beli 1 Katalog Harga:

telur, 2 Telur - 10.000
Ayam - 50.000
??
apel Apel - 5.000
Durian - 100.000
Contoh Program

var totalPrice = 0;

totalPrice = (totalAyam * hargaAyam)

+ (totalTelur * hargaTelur) + .....

console.log(totalPrice);
Ada Promo?
Program Menghitung Harga

Katalog Harga:
Telur - 10.000
Ibu beli 3 Ayam - 50.000
telur, 3 Apel - 5.000
Durian - 100.000
??
apel
kalau beli minimal
30.000, dapet
diskon 2.000
totalPrice
totalPrice >= 30000 ?
totalPrice >= 30000 ?
 YES

totalPrice >= 30000 ?

NO
 YES
totalPrice = totalPrice - 2000;

totalPrice >= 30000 ?

NO
 YES
totalPrice = totalPrice - 2000;

totalPrice >= 30000 ?

totalPrice
NO
Conditional If

if (totalPrice >= 30000) {

totalPrice = totalPrice - 2000;
}
Conditional If-Else

if (totalPrice >= 30000) {

totalPrice = totalPrice - 2000;
console.log(totalPrice + " discount!");
} else {
console.log(totalPrice);
}
 YES
totalPrice = 50000 totalPrice = totalPrice - 5000;

NO

YES
totalPrice = 30000 totalPrice = totalPrice - 2000;

NO

YES
totalPrice = 20000 totalPrice = totalPrice - 1000;
Conditional Switch Case

switch (totalPrice) {
case 50000:
totalPrice = totalPrice - 5000; break;
case 30000:
totalPrice = totalPrice - 2000; break;
case 20000:
totalPrice = totalPrice - 1000; break;
}
Conditional ? :
var a = 42;
var b = (a > 41) ? "hello" : "world";

//similar to:
if (a > 41) {
b = "hello";
} else {
b = "world";
}
Functions
 Functions
Secara umum, function adalah sebuah blok kode yang
bisa "dipanggil" untuk melakukan sebuah tugas spesifik.
function countTotalAfterDiscount(totalPrice){

if (totalPrice >= 30000) {

totalPrice = totalPrice - 2000;
console.log(totalPrice + " discount!");
} else {
console.log(totalPrice);
}

}
function countTotalAfterDiscount(totalPrice){

if (totalPrice >= 30000) {

totalPrice = totalPrice - 2000;
console.log(totalPrice + " discount!");
} else {
console.log(totalPrice);
}

countTotalAfterDiscount(totalPrice);
function isGettingADiscount(totalPrice){

if (totalPrice >= 30000) {

return true;
} else {
return false;
}

isGettingADiscount(totalPrice);
Why Function?
Code reusability

Modularity

Abstraction
 Function

Build-in User-defined
 Function

Build-in User-defined
dibuat sendiri sesuai
sudah disediakan oleh JS
kebutuhan
bisa langsung "dipanggil"
menggunakan keyword
contoh:
"function"
alert();
dapat memiliki return value
atau tidak
 Build-in Function: Math
sin(), cos(), tan(), random(), round(),
floor(), ceil(), log(), ....

contoh:

var rand = Math.random();

console.log(rand);
Function, Parameters, and
Return Value
var totalPrice = 30000;

function printPrice(price){
console.log(price);
}

printPrice(totalPrice);

function printPrice(){
return "Rp." + totalPrice; // "Rp. 30000"
}

var price = printPrice(price);

price //"Rp. 30000"

function printPrice(price){
//with parameters
console.log(price);
//no return value
}

function printPrice(){
//without parameters
return totalPrice;
//with return value
}

var price;
price = printPrice(); //number
keyword nama parameter

function printPrice(price){
return "Rp." + price;
}

function body
return value
Practice

Popup box
JavaScript
alert(x);
prompt(x);
confirm(x);
function f(am) { function f(a) {
let a = 10; var a = 10;
console.log(a); console.log(a);
} }
Latihan
1. Buat fungsi cek apakah pembeli mendapat diskon atau
tidak (seperti contoh if else sebelumnya)
Latihan
1. Buat fungsi cek apakah pembeli mendapat diskon atau tidak
(seperti contoh if else sebelumnya)
2. Buat fungsi menghitung volume balok

function calcVolume(panjang, lebar, tinggi) {

return panjang*lebar*tinggi;
}

var vol = calcVolume(5,6,7);

Latihan
1. Buat fungsi cek apakah pembeli mendapat diskon atau tidak
(seperti contoh if else sebelumnya)
2. Buat fungsi menghitung volume balok
3. Buat program yang ambil input dari prompt, yang akan
panggil fungsi nomor 1 atau nomor 2
We're done!
Thank you for
participating. Have a
great day ahead.