#BelajarBarengUT

Learn Code From Zero to Hero

#BelajarBarengUT #BelajarBarengUT
 01 Pengenalan Javascript

02 Menulis Kode Javascript

03 Variabel

04 Tipe Data
Table of Content 05 Percabangan

06 Perulangan

07 Function

08 Q&A

#BelajarBarengUT
Pengenalan Javascript

Sejarah Javascript

JavaScript atau sering disingkat JS, pertama kali dibuat tahun 1995. Programmer di Netscape bernama Brandan Eich
membuat sebuah bahasa pemrograman scripting untuk berjalan di Netscape Navigator Browser.

Awalnya namanya adalah Mocha, lalu berubah menjadi LiveScript, dan akhirnya menjadi JavaScript.

JavaScript dibuat agar halaman website yang sudah kita buat menggunakan HTML dan CSS bisa lebih interaktif.

JavaScript sekarang sudah mengalahkan Java Applet dan Flash sebagai bahasa pemrograman untuk membuat
halaman web menjadi lebih interaktif, hal ini dikarenakan kemudahan bahasa nya dan juga secara default sekarang
semua browser sudah bisa menjalankan JavaScript tanpa harus menginstall aplikasi tambahan seperti Java Applet dan
Adobe Flash Player.

#BelajarBarengUT
Pengenalan Javascript
Javascript di Client/Server

Awalnya JavaScript memang kebanyakan di gunakan untuk berjalan di client side (Browser).

Namun akhir-akhir ini, semenjak keluar teknologi NodeJS yang bisa digunakan untuk menjalankan
JavaScript tanpa browser, sekarang akhirnya JavaScript juga banyak digunakan untuk membuat
aplikasi di Server.
Karena ini, akhirnya sekarang JavaScript dikenal dengan bahasa pemrograman FullStack (Backend dan Frontend)
karena bisa digunakan untuk membuat aplikasi Backend dan aplikasi Frontend.

Client Side Server Side

#BelajarBarengUT
Pengenalan Javascript
● Direct Case Study
SETUP Environment

Untuk belajar JavaScript, selain devices kita juga perlu menyiapkan beberapa perangkat lunak untuk membantu development.

Untuk menjalankan kode program JavaScrip kita memerlukan Browser.

Text Editor atau Integrated Development Environment, ini digunakan untuk membuat kode program JavaScript.

#BelajarBarengUT
Menulis Kode Javascript ● Live Coding

#BelajarBarengUT
Variabel
Variabel dalam pemrograman berfungsi sebagai wadah untuk Penyimpanan Data
menyimpan dan merujuk nilai-nilai. Mereka memberikan cara bagi
programmer untuk mengidentifikasi dan memanipulasi data
secara dinamis dalam kode. Berikut adalah beberapa kegunaan Referensi Nilai
utama variabel dalam pemrograman

Penamaan

Penggunaan Ulang Data

Perhitungan & Manipulasi

Penanganan Data Input

Pengiriman & Penerimaan Nilai dari fungsi

#BelajarBarengUT
Penamaan Variabel di Javascript
var = variabel yang di deklarasikan “var” memiliki cakupan (scope) lebih luas, biasanya mencakup seluruh fungsi tempat
dimana variabel itu di deklarasikan.

let = variabel yang di deklarasikan dengan “let” memiliki cakupan blok yang lebih ketat, biasanya hanya mencakup blok
kode didalam kurung kurawal ({}) terdekat.

const = dan untuk variabel yang di deklarasikan menggunakan “const” memiliki cakupan blok kode seperti let, namun nilai
dari variabelnya tidak dapat di rubah lagi.

var let const

function variableVar() { function variableLet() { function vriableConst() {

if (true) { if (true) { const z = 30;

var x = 10; let y = 20; z = 40;

console.log(x); console.log(y); console.log(z)

} } }

console.log(x) console.log(y); variableConst()

} }

variableVar(); variableLet()

#BelajarBarengUT
Tipe Data
Alokasi Memori yang Efisien
Tipe data dalam pemrograman sangat penting karena
mereka menggambarkan jenis nilai yang dapat disimpan dan
diolah oleh suatu program. Tipe data membantu komputer Operasi Matematika dan Logika
memahami bagaimana mengalokasikan memori, melakukan
operasi matematika, membandingkan nilai, dan berinteraksi
dengan data secara umum. Berikut adalah beberapa alasan Validasi Data
mengapa tipe data penting dalam pemrograman:

Optimisasi Kinerja

Pengelompokan Data

Pengelolaan Memori

Interaksi dengan Fungsi dan Metode

#BelajarBarengUT
Tipe Data
Number, Apa itu number?
Tipe data untuk angka. Dapat mencakup angka CODE:

bulat dan pecahan. let angkaBulat = 10;

let angkaPecahan = 3.14;

console.log(angkaBulat, typeof angkaBulat);

// Output: 10 "number"

console.log(angkaPecahan, typeof angkaPecahan);

// Output: 3.14 "number"

#BelajarBarengUT
Tipe Data
String, Apa itu String?
Tipe data untuk teks. Digunakan untuk menyimpan CODE:

urutan karakter, seperti kata atau kalimat. let teks = "Hello, world!";

let nama = "Alice";

console.log(teks, typeof teks);

// Output: Hello, world! "string"

console.log(nama, typeof nama);

// Output: Alice "string"

#BelajarBarengUT
Tipe Data
Boolean, Apa itu Boolean?
Tipe data dengan hanya dua nilai: true (benar) CODE:

atau false (salah). Digunakan untuk logika dan let benar = true;
pengambilan keputusan.
let salah = false;

console.log(benar, typeof benar);

// Output: true "boolean"

console.log(salah, typeof salah);

// Output: false "boolean"

#BelajarBarengUT
Tipe Data
Array, Apa itu Array?
Tipe data untuk mengelompokkan beberapa nilai CODE:

dalam satu struktur. Terdiri dari elemen-elemen let angkaAnggota = [1, 2, 3, 4, 5];
yang dapat diakses dengan indeks.
let namaNama = ["John", "Alice", "Bob"];

console.log(angkaAnggota, typeof angkaAnggota);

// Output: [1, 2, 3, 4, 5] "object"

console.log(namaNama, typeof namaNama);

// Output: [John, Alice, Bob] "object"

#BelajarBarengUT
Tipe Data
Object, Apa itu Object?
Tipe data yang digunakan untuk menyimpan CODE:

kumpulan pasangan "kunci-nilai" yang let person = {

merepresentasikan properti dan nilai-nilai terkait
nama: "John",

usia: 30,

pekerjaan: "Developer"

};

console.log(person, typeof person);

// Output: {nama: "John", usia: 30, pekerjaan:

"Developer"} "object"

#BelajarBarengUT
Tipe Data
Null, Apa itu Null?
Tipe data yang menunjukkan bahwa variabel tidak CODE:

memiliki nilai atau nilai kosong. let dataKosong = null;

console.log(dataKosong, typeof dataKosong);

// Output: null "object"

#BelajarBarengUT
Tipe Data
Undefined, Apa itu Undefined?
Tipe data yang diberikan pada variabel yang CODE:

belum diinisialisasi atau tidak memiliki nilai. let dataKosong = null;

console.log(dataKosong, typeof dataKosong);

// Output: null "object"

#BelajarBarengUT
Tipe Data
Simbol, Apa itu Simbol?
Tipe data yang unik dan tak terlihat yang CODE:

digunakan sebagai kunci untuk properti dalam const simbol1 = Symbol("deskripsi1");

objek, menghindari konflik nama properti.
const simbol2 = Symbol("deskripsi2");

console.log(simbol1, typeof simbol1);

// Output: Symbol(deskripsi1) "symbol"

console.log(simbol2, typeof simbol2);

// Output: Symbol(deskripsi2) "symbol"

#BelajarBarengUT
Tipe Data
Function, Apa itu Function?
Tipe data khusus yang dapat menampung kode CODE:

yang dapat dipanggil dengan nama fungsi. function tambah(angka1, angka2) {

return angka1 + angka2;

console.log(tambah, typeof tambah);

// Output: function() {...} "function"

#BelajarBarengUT
Percabangan
Percabangan dalam JavaScript memungkinkan kita untuk
mengambil keputusan berdasarkan kondisi tertentu. Dua jenis CODE: else if (jika tidak)
percabangan umum adalah "if" (jika) dan "else" (jika tidak). "if"
let nilai = 85;
digunakan untuk mengeksekusi blok kode jika kondisi tertentu
terpenuhi, sedangkan "else" digunakan untuk mengeksekusi if (nilai >= 90) {
blok kode alternatif jika kondisi tidak terpenuhi.
console.log("Nilai A.");

CODE: if dan else (jika) } else if (nilai >= 80) {

let usia = 18; console.log("Nilai B.");

if (usia >= 18){ } else if (nilai >= 70) {

console.log(“Kamu sudah dewasa”); console.log("Nilai C.");

} else{ } else {

console.log(“Kamu masih anak-anak”); console.log("Nilai D.");

} }

#BelajarBarengUT
 CODE: switch case

Percabangan let hari = "Senin";

Penggunaan switch dan case berguna ketika kita switch (hari) {

memiliki beberapa nilai yang ingin kita bandingkan dan
case "Senin":
jalankan kode berdasarkan hasil perbandingan tersebut
console.log("Hari pertama dalam seminggu.");

break;

case "Selasa":

console.log("Hari kedua dalam seminggu.");

break;

case "Rabu":

console.log("Hari ketiga dalam seminggu.");

break;

default:

console.log("Hari yang tidak dikenali.");

#BelajarBarengUT
Perulangan
Perulangan memungkinkan kita untuk menjalankan blok for
kode secara berulang kali sesuai dengan kondisi tertentu.
Ada beberapa jenis perulangan yang umum digunakan,
salah satunya adalah for loop. while

* ********* * * * * * *

*** ******* * * * * * *
do while

***** ***** * * * * * *
for of
******* *** * * * * * *

********* * * * * * * * for in

foreach

#BelajarBarengUT
Perulangan
For While Do While

CODE: for CODE: while CODE: do while

for (let i = 0; i < 5; i++) { let counter = 0; let count = 0;

console.log(i); while (counter < 5) { do {

} console.log("Counter: " + counter); console.log(count);

counter++; count++;

} } while (count < 5);

#BelajarBarengUT
Perulangan
FOR IN FOR OF FOREACH

CODE: for in CODE: for of CODE: foreach

let person = { nama: "John", usia: 30, let angka = [1, 2, 3, 4, 5]; let angka = [1, 2, 3, 4, 5];
pekerjaan: "Developer" };
for (let item of angka) { angka.forEach(function(item) {
for (let key in person) {
console.log(item); console.log(item);
console.log(key + ": " + person[key]);
} });
}
Perulangan for...of (untuk Perulangan forEach (mengulang
Perulangan for...in (untuk mengulang properti mengulang elemen dalam array): elemen dalam array):
dalam objek):

#BelajarBarengUT
Looping Challenge ● Live Challenge

membuat pola
* ********* * * * * * *

*** ******* * * * * * * 1. Piramida

2. Piramida terbalik
***** ***** * * * * * * 3. Segitiga
4. Segitiga terbalik
******* *** * * * * * *
menggunakan perulangan for dalam
********* * * * * * * * JavaScript:

#BelajarBarengUT
Penjelasan
CODE: Segitiga CODE: Segitiga Terbalik

let ts = 5; let tst = 5;

Challenge for (let i = 1; i <= ts; i++) { for (let i = tst; i >= 1; i--) {

pada kode challenge kita mengunakan let bintang = ''; let bintang = '';
perulangan for dengan bantuan fungsi
repeat(). for (let j = 1; j <= i; j++) { for (let j = 1; j <= i; j++) {

bintang += '* '; bintang += '* ';

Fungsi repeat() adalah metode bawaan
pada tipe data string dalam JavaScript. } }
Metode ini digunakan untuk
menggandakan string dengan jumlah yang console.log(bintang); console.log(bintang);
ditentukan.
} }

CODE: Piramida CODE: Piramida terbalik

let tp = 5; let tpt = 5;

for (let i = 1; i <= tp; i++) { for (let i = tpt; i >= 1; i--) {

let spasi = ' '.repeat(tp - i); let spasi = ' '.repeat(tpt - i);

let bintang = '*'.repeat(2 * i - let bintang = '*'.repeat(2 * i - 1);

1);
console.log(spasi + bintang);
#BelajarBarengUT console.log(spasi + bintang);
}
Fungsi
Fungsi adalah blok kode yang dapat digunakan kembali yang mengelompokkan serangkaian pernyataan
untuk melakukan tugas tertentu atau menghasilkan nilai. Fungsi digunakan untuk mengorganisasi dan
membagi kode menjadi bagian yang lebih kecil, yang mempermudah pemeliharaan dan pemahaman kode.

Pada dasarnya, fungsi memiliki dua bagian utama:

1. Deklarasi Fungsi: Bagian ini mendefinisikan nama fungsi, parameter (opsional), dan blok kode yang
akan dijalankan saat fungsi dipanggil.
2. Pemanggilan Fungsi: Bagian ini memanggil fungsi dengan menyebutkan namanya bersama dengan
argumen yang diperlukan (jika ada) dalam tanda kurung.

FUNGSI: Penambahan

function tambah(angka1, angka2) {

return angka1 + angka2;

FUNGSI: Perulangan

function perulangan(jumlah) {

for (let i = 0; i < jumlah; i++) {

console.log("Iterasi ke-" + i);

#BelajarBarengUT
}
 Q&A

#BelajarBarengUT