iqmah

FUNDAMENTAL
JAVASCRIPT
PART 1
A. About Java Script
JavaScript (JS) adalah bahasa pemrogramman yang sangat ringan, Umum dikenal sebagai
Bahasa scripting untuk halaman web, Banyak lingkungan non browser juga menggunakn
javascript, seperti node.js dan Apache CouchDB. JS merupakan prototype-based, multi-
paradigm, bahasa scripting dinamis, medukung object-oriented.

Saat ini javascript tidak hanya digunakan di sisi client (browser) saja. Javascript juga
digunakan pada server, console, program desktop, mobile, IoT, game, dan lain-lain.
Hal ini membuat javascript semakin populer dan menjadi bahasa yang paling banyak
digunakan di Github.

Source: https://www.petanikode.com/javascript-dasar/
Javascript awalnya bernama Mocha, lalu berubah menjadi LiveScript saat browser
Netscape Navigator 2.0 rilis versi beta (September 1995). Namun, setelah itu dinamai
ulang menjadi Javascript.

Jangan keliru antara JavaScript dengan Bahasa pemrograman java. Keduanya "Java" dan
"JavaScript" adalah merek dagang dan merek ini terdaftar oleh Oracle di U.S. dan negara
lainnya. Namun, kedua bahasa pemrograman tersebut memiliki sintaks, struktur, dan
penggunaan yang berbeda.

B. Tools are required

Apa saja perlatan yang harus disiapkan untuk belajar Javascript?
• Web Browser (Google Chrome, Firefox, Opera, dll)
• Teks Editor (rekomendasi: VS Code)

C. Show the output of JS

Output biasanya ditampilkan dalam bentuk teks dengan fungsi print(). Nah sedikit
berbeda dengan JS. Ada 4 cara menampilkan output pada Javascript :
1. Menggunakan Fungsi console.log();
2. Menggunakan Fungsi alert();
3. Menggunakan Fungsi document.write();
4. Menggunakan innerHTML.
Namun pada modul ini hanya cara pertama dan kedua yang akan dibahas

1. Menggunakan Fungsi console.log();

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript.
Klik Ctrl+Shift+I ataupun klik kanan inspect element pada browser Anda
 Kemudian pilih tab yang bertuliskan Console

Contoh penggunaan:

console.log("Hello World!");

Kemudia tekan enter untuk menjalankan kode

Hasilnya:

Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error
di Javascript selalu ditampilkan di dalam Console.
Selain console.log(), terdapat juga beberapa fungsi
untuk debugging seperti console.debug(), console.info(), console.error(), console.dir(),
dsb.

2. Menggunakan Fungsi alert();

Fungsi alert() adalah fungsi untuk menampilkan jendela dialog. Fungsi sebenarnya
berada pada objek window.
 Secara lengkap bisa ditulis seperti ini:
window.alert("Hello World!");
Bisa juga ditulis alert() saja seperti ini:
alert("Hello World!");

Hasilnya:

D. Variabel dan Tipe Data

1. Variabel
Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan
berbagai macam nilai seperti string (teks), number (angka), objek, array, dan
sebagainya. Kita bisa ibaratkan, variabel itu seperti wadah untuk menyimpan sesuatu.
Setiap variabel didefinisikan menggunakan kata kunci var
var myNumber = 3; // a number
var myString = "Hello, World!" // a string
var myBoolean = true; // a boolean
var myArray = []; // an array
var myObject = {}; // an object

Dalam JS kita tidak perlu menuliskan tipe datanya, JS akan mendeteksi sendiri tipe data
yang Anda tuliskan. Jika variable tidak didefiniskan atau tidak diisi maka variabel akan
bernilai undefined (belum ditentukan)

Contoh:
var x;
Maka variabel x akan bernilai undefined.
Untuk menampilkan isi variabel, kita bisa memanfaatkan fungsi-fungsi untuk
menampilkan output yang dibahas pada point sebelumnya
Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya dapat kita isi ulang
(berubah).

2. Tipe Data
Tipe data adalah jenis-jenis data yang bisa kita simpan di dalam variabel. Ada
beberapa tipe data dalam pemrograman Javascript:

• String (teks)
• Integer atau Number (bilangan bulat)
• Float (bilangan Pecahan)
• Boolean
• Object
Javascript adalah bahasa yang bersifat dynamic typing, artinya kita tidak harus
menuliskan tipe data pada saat pembuatan variabel seperti pada bahasa C, C++, Java,
dsb. yang bersifat static typing.
 Contoh:
var name = "Becce";
var age = 22;
var single = true;
Javascript akan otomatis mengenali tipe data yang kita berikan pada variabel.
Pada contoh di atas variabel:

• name bertipe data String;

• age bertipe data integer;
• dan single bertipe data boolean.
Hal ini bisa juga kita cek dengan kata kunci typeof.

Contoh:
typeof name;
typeof age;
typeof single;

E. Function
Dalam pemrograman, fungsi sering digunakan untuk membungkus program menjadi
bagian-bagian kecil.
Logika program yang ada di dalam fungsi dapat kita gunakan kembali dengan
memanggilnya.Sehingga tidak perlu menulis ulang. Fungsi di dalam Javascript adalah
sebuah objek. Karena memiliki properti dan juga method.Ada dua cara untuk
mendefinisikan fungsi dalam JavaScript - fungsi yang dinamai dan fungsi anonim. Untuk
mendefinisikan fungsi bernama, kami menggunakan pernyataan fungsi sebagai berikut:
function greet(name)
{
return "Hello " + name + "!";
}
console.log(greet("Eric")); // prints out Hello Eric!

Untuk mendefinisikan fungsi anonim, kita dapat menggunakan sintaks berikut:

var greet = function(name)
{
return "Hello " + name + "!";
}
console.log(greet("Eric")); // prints out Hello Eric!

Cara lain menulis fungsi dalam JS adalah dengan cara arrow function.Fungsi ini mulai
muncul pada standar ES6.
Contoh:
var namaFungsi = () => {
console.log("Hello World!");
}
namaFungsi()

// atau seperti ini (jika isi fungsi hanya satu baris):

var namaFungsi = () => console.log("Hello World!");
 Sebenarnya hampir sama dengan yang menggunakan ekspresi. Bedanya, kita
menggunakan tanda panah (=>) sebagai ganti function.

Exercise !

Buat fungsi yang disebut multiplyFive yang menerima angka dan mengembalikan
angka itu setelah dikalikan 5.

F. Percabangan
1. Percabangan If/Else
Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan.
Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah
(else). Logikanya sama seperti Bahasa pemrograman lainnya begitupun dengan
sintaxnya
Berikut contohnya
var pass=prompt(“enter ur pass”)
if (pass == 123)
{
console.log("Welcome");
} else {
console.log("Wrong Pass, Try Again");
}

2. Percabangan switch/case
Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.
Strukturnya seperti ini:
switch(variabel){
case <value>:
// blok kode
break;
case <value>:
// blok kode
break;
default:
// blok kode
}

Kita dapat mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok
switch.Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan
dengan varabel. Setiap case harus diakhiri dengan break. Khusus
untuk default, tidak perlu diakhiri dengan break karena dia terletak di bagian
akhir.Pemberian break bertujuan agar program berhenti
mengecek case berikutnya saat sebuah case terpenuhi.

3. Percabangan dengan Operator Ternary

Percabangan menggunakan opreator ternary merupakan bentuk lain dari
percabangan if/else.
Bisa dibilang bentuk singkatnya dari if/else.
Contoh:
var jwb = prompt("Apakah Jakarta ibu kota indonesia?");
var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
console.log("Jawaban Anda "+jawaban)

Fungsi dari method toUpperCase() untuk mengubah teks yang diinputkan

menjadi huruf kapital semua.
Apabila kondisi yang ada di dalam kurung—(jwb.toUpperCase() == "IYA")—
bernilai true, maka nanti isi dari variabel jawaban akan sama dengan "Benar".
Tapi kalau bernilai false, maka variabel jawaban akan berisi "Salah".

Exercise!
Buatlah program Check Driver Age, dimana user harus memasukkan input umur
mereka dan jika umurnya kurang dari 18 munculkan alert("Sorry, you are too youn
to drive this car”), jika umurnya lebih dari 18 munculkan alert("Powering On. Enjoy
the ride!"), dan jika umurnya sama dengan 18 maka munculkan
alert("Congratulations on your first year of driving. Enjoy the ride!");

G. Perulangan
Pada dasarnya konsep perulangan pada JS sama dengan Bahasa pemrograman
lainnya.
Ada beberapa perulangan

1. For
Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena
sudah jelas berapa kali ia akan mengulang.
Contoh :
var i;
for (i = 0; i < 3; i = i ++)
{
console.log(i);
}
Maka hasilnya:
0
1
2

2. While
Perulangan while adalah versi yang lebih sederhana dari for yang memeriksa
apakah ekspresi bernilai true dan berjalan selama pernyataannya true.
Contoh :
var i = 99;
while (i > 0)
{
console.log(i + " bottles of beer on the wall");
i -= 1;
}
 3. Do/While
Perulangan do/while sama seperti perulangan while.
Perbedaanya:Perulangan do/while akan melakukan perulangan
sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam
kurung while.
Bentuknya seperti ini:
do {
// blok kode yang akan diulang
} while (<kondisi>);

Contoh
var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)
console.log("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

4. Perulangan Foreach
Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.
Perulangan ini termasuk dalam perulangan counted loop, karena jumlah
perulangannya akan dituentukan oleh panjang dari array.
Ada dua cara menggunakan perulangan foreach di Javascript:
1. Menggunakan for dengan operator in;
2. Mengguunakan method forEach().

Contoh:
var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i in languages){
document.write(i+". "+ languages[i] + "<br/>");
}

// kita punya array seperti berikut

var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];

// Kemudian kita tampilkan semua hari

// dengan menggunakan method foreach
days.forEach(function(day){
document.write("<p>" + day + "</p>");
});

Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa
menggunakan arrow function seperti ini:
// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];

// Kemudian kita tampilkan semua hari

// dengan menggunakan method foreach
days.forEach((day) => {
document.write("<p>" + day + "</p>");
});

5. Perulangan dengan Method repeat()

Perulangan dengen method atau fungsi repeat() termasuk dalam perulangan
counted loop.Fungsi ini khusus digunakan untuk mengulang sebuah teks
(string). Bisa dibilang ini merupakan singkat dari perulangan for.

Contoh:
document.write("Ulangi kalimat ini! ".repeat(100));

H. Array
Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data
dalam satu tempat.Setiap data dalam Array memiliki indeks, sehingga kita akan mudah
memprosesnya.Struktur data merupakan cara-cara atau metode yang digunakan untuk
menyimpan data di dalam memori komputer.

Cara menuliskan Array

var myArray = [1, 2, 3];
var theSameArray = new Array(1, 2, 3);
Karena javascript merupakan bahasa pemrograman yang dynamic typing maka kita bisa
menyimpan dan mencampur apapun di dalam array.

Contoh:
var myData = [12, 2.1, true, 'C', "Petanikode"];

Cara Mengambil Data dari Array

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];
makanan[1] //-> "Mie Ayam"

Manipulasi Array
1. Pushing and popping
Metode push dan pop menyisipkan atau menambahkan dan menghapus variabel
dari akhir array.
Contoh :
var myStack = [];
myStack.push(1);
myStack.push(2);
myStack.push(3);
console.log(myStack);
This will print out:

1,2,3
Lalu gunakan pop() untuk remove data yang terakhir dari array
console.log(myStack.pop());
console.log(myStack);
 This will print out the variable we popped from the array, and what's left of the array:
3 // the result from myStack.pop()
1,2 // what myStack contains now

2. Shift()
Kita juga dapat menghapus data dari depan dengan menggunakan method shift().
Contoh:
var bunga = ["Mawar", "Melati", "Anggrek", "Sakura"];

// hapus data dari depan

bunga.shift();
Maka data yang terhapus adalah "Mawar".

3. splice()
Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi atau method
yang digunakan adalah splice().Fungsi ini memiliki dua parameter yang harus
diberikan:
array.splice(<indeks>, <total>);

Keterangan:

• <indeks> adalah indeks dari data di dalam array yang akan dihapus;
• <total> adalah jumlah data yang akan dihapus dari indeks tersebut.
Biasanya kita berikan nilai total dengan nilai 1 agar hanya menghapus satu data saja.

Contoh:
var bunga = ["Mawar", "Melati", "Anggrek", "Sakura"];

// hapus Anggrek
bunga.splice(2, 1);

Beberapa Method pada Array

1. Method filter()
Method filter() berfungsi untuk menyaring data dari array.Parameter yang
harus diberikan pada method filter() sama seperti method forEach(), yaitu:
sebuah fungsi callback.

Contoh:
const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// Kita ambil data yang hanya habis dibagi dua saja

const filteredArray = angka.filter((item) => {return item % 2 === 0});

console.log(filteredArray) // -> [2, 4, 6, 8]

Pada contoh di atas, kita memberikan arrow function sebagai fungsi callback
yang akan melakukan penyaringan terhadap array.
Sebenarnya kita bisa buat lebih sederhana lagi seperti ini:
const filteredArray = angka.filter(item => item % 2 === 0);

2. Method includes()
Method ini berfungsi untuk mengecek apakah sebuah data ada di dalam array
atau tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan
data sudah ada di dalam array.

Contoh:
var tanaman = ["Padi", "Kacang", "Jagung", "Kedelai"];

// apakah kacang sudah ada di dalam array tanaman?

var adaKacang = tanaman.includes("Kacang");

console.log(adaKacang); // -> true

// apakah bayam ada?

var adaBayam = tanaman.includes("Bayam");

console.log(adaBayam); // -> false

3. Method sort()
Method sort() berfungsi untuk mengurutkan data pada array.

Contoh:
var alfabet = ['a','f','z','e','r','g'];
var angka = [3,1,2,6,8,5];

console.log(alfabet.sort()); //-> ["a", "e", "f", "g", "r", "z"]

console.log(angka.sort()); // -> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Exercise!
Gunakan Array berikut:
var array = ["Banana", "Apples", "Oranges", "Blueberries"];
1. Hapus Banana dari array
2. Urutkan array
3. Tambahkan kiwi pada index terakhir
4. Hapus Apel dari array
5. Tampilkan hasil array