INTRO TO
PROGRAMMING Week 1
JAVASCRIPT
SEBELUM MEMULAI TRAINING
Silahkan buat 1 file notepad (.txt) untuk menyimpan catatan dan
penjelasan dari materi yang diajarkan
Pastikan sudah install Visual Studio Code. Dari Code Editor
tersebut, kita akan buat file berekstensi .html
Download Extensions “open in browser” di Visual Studio Code
HTML
HTML = HyperText Markup Language
Merupakan suatu bahasa markah yang digunakan untuk
membuat halaman web, menampilkan berbagai informasi di
dalam browser web
Contoh:
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<p> <i>HyperText Markup Language</i>
(HTML) merupakan sebuah standar yang digunakan secara luas untuk
menampilkan halaman di <i> browser web</i>
</p>
</body>
</html>
JAVASCRIPT
Javascript adalah salah satu bahasa pemrograman yang bisa
digunakan dalam pemgembangan aplikasi berbasis web
Umumnya Javascript digunakan pada web browser untuk
menciptakan halaman web yang menarik , interaktif ser ta
menerapkan berbagai fungsi pada halaman web
Javascript dapat disisipkan ke dalam HTML, baik disisipkan secara
langsung maupun diletakkan ke dalam file .js dan disisipkan dari
dokumen HTML
JavaScript membutuhkan ; (titik koma) di akhir penulisan
codingannya
Contoh:
<body>
<script>
document.write(“selamat pagi”);
</script>
</body>
VARIABEL
Dalam dunia programming, variabel adalah sebuah tempat
penyimpanan nilai / data / value
Nilai yang tersimpan di dalam variabel, dapat berupa teks, angka,
kondisi true / false, dll
Umumnya, ada beberapa tipe data yang bisa disimpan ke dalam
sebuah variabel, diantaranya:
- Char Character (abjad / karakter)
- String Teks
- Integer Angka bulat (tidak ada koma)
- Float Angka (ada koma) max digit: 7
- Double Angka (ada koma), range angka lebih besar dari
pada float [2x lebih besar dari Float] max digit: 15
- Boolean Menyimpan kondisi benar / salah (true / false)
- Array Kumpulan data yang bisa lebih dari 1 . Contoh:
Array (of string) , ar tinya kumpulan data ber tipe String
VARIABEL
Khusus JavaScript, beberapa tipe data yang bisa disimpan ke
variabel, diantaranya:
- string
- number
- boolean
- any
- object
Contoh:
String var namaSiswa = “Budi”;
Number var nilaiSiswa = 80;
Boolean var lulus = true;
Any var product;
Object var array_nama_hewan = [“kucing”, “kelinci”, “gajah”];
*Array masuk kategori Object*
VARIABEL
Aturan dalam penamaan variabel:
- Tidak boleh ada spasi
- Diawali menggunakan huruf kecil, baru setelah itu bisa pakai huruf
besar
- Karakter per tama tidak boleh angka
- Tidak boleh pakai karakter spesial. Hanya bisa alphanumeric dan
under score
- Bersifat case sensitive. Contoh: namahewan, namaHewan,
NAMAHEWAN dianggap variabel yang berbeda-beda (jadi ada 3
variabel)
VARIABEL
- Ada 2 pendekatan dalam memberi nama variabel:
- Camel case : hurufnya besar kecil.
Contoh:
namaOrangTuaSiswa
nilaiUjian1
- Snake case : huruf kecil semua, dipisah pakai under score
Contoh:
nama_orang_tua_siswa
nilai_ujian_1
Misalnya kita mengganti nama variabel ( rename). Maka codingan yang
menggunakan (referensi) variabel tersebut, harus ikut diubah.
Jika tidak , maka codingan menjadi error karena tidak mengenali nama
variabelnya lagi. Maka dari itu, kita disarankan melakukan rename
melalui fitur “Rename Symbol”
OPERATOR PERHITUNGAN (ARITHMETIC)
* (perkalian)
/ (pembagian)
Math.pow(angka, pangkat) (perpangkatan)
Contoh: var result = Math.pow(2, 3); //result = 8
Math.sqr t(angka) akar kuadrat.
Contoh: var result = Math.sqr t(25); //result = 5
+ - (per tambahan & pengurangan)
Operasi yang lain bisa menggunakan Math.(nama fungsinya)
Contoh:
var nilai1 = 85;
var nilai2 = 62.5;
var nilaiRata2 = (nilai1 + nilai2) / 2; //hasilnya : nilaiRata2 = 73.75
var hasilAkarDari = Math.sqr t(25); //hasilnya : hasilAkarDari = 5
OPERATOR PENUGASAN (ASSIGNMENT)
OPERATOR PENUGASAN (ASSIGNMENT)
Contoh:
var x = 3;
x+=2 ; (sama artinya dengan x = x + 2)
Artinya x yang awalnya 3, ditambah 2, maka sekarang nilai
akhir x adalah 5
var y = 5;
y*=3; (sama artinya dengan y = y * 3)
Artinya y yang awalnya 5, dikali 3, maka sekarang nilai akhir y
adalah 15
OPERATOR KOMPARASI (COMPARATION)
> greater than (lebih besar dari)
< less than (lebih kecil dari)
>= Greater than or equal to (lebih besar sama dengan dari)
<= Less than or equal to (lebih kecil sama dengan dari)
== sama dengan (membandingkan nilai)
!= tidak sama dengan (membandingkan nilai)
OPERATOR KOMPARASI (COMPARATION)
Contoh:
==
if (nilai_ujian == 70) {
var teks = “Nilai ujian Anda = 70”;
}
“==“ itu untuk membandingkan nilai. Apabila value dari nilai_ujian adalah
70, maka masuk ke dalam if. Jika nilai_ujian bukan 70, maka tidak masuk
ke if.
!=
if (nilai_ujian != 70) {
var teks = “Nilai ujian Anda bukan 70”;
}
“!=“ untuk membandingkan nilai. Apabila value dari nilai_ujian BUKAN 70,
maka masuk ke dalam if. Jika nilai_ujian adalah 70, maka tidak masuk ke if.
OPERATOR LOGIKA
&& and (dan)
|| or (atau)
! tidak / bukan
OPERATOR LOGIKA
Contoh:
&& if (nilai1 > 70 && nilai2 >= 60) { }
“&&” itu harus 2 kondisi kiri dan kanan sama-sama memenuhi (true),
baru bisa masuk ke kondisi if
|| if (warna == “merah” || warna == “hijau”) { }
“||” itu jika salah satu kondisi kiri atau kanan memenuhi, maka akan
masuk ke kondisi if. Jika kiri dan kanan tidak memenuhi sama sekali,
barulah tidak masuk ke if
! var lulus = !(nilai1 < 70)
“!” itu kondisi kebalikan. Misalnya kasus di atas, apabila nilai1 < 70 =
false, maka karena ada ! nya menjadi true. Sehingga kondisi agar bisa
masuk ke if adalah nilai1 harus lebih besar dari 70
!true = false
!false = true
KONDISI (CONDITION)
Membuat kondisi bisa dengan 2 cara:
If else
Switch
Untuk membuat condition (terutama if else), biasanya
memanfaatkan operator komparasi dan operator logika
IF ELSE
If else merupakan pemrograman kondisional
Jika pakai if, tidak selalu harus ada else
Jika ada else, maka jika kondisi if tidak memenuhi, logika
coding akan masuk ke else
Urutan logika dibaca dari kondisi paling atas
Susunan urutan mempengaruhi hasil, maka buat kondisi yang
terpenting / terbesar di bagian atas
Ada 3 susunan:
- if
- else if
- else
SWITCH
Pemrograman kondisional selain menggunakan if
Switch diikuti dengan case untuk membuat kondisi-kondisinya
Biasanya setelah masuk ke case, ditutup dengan “break”,
supaya proses switchnya terhenti
switch(condition-nya) {
case options1:
break;
case options2:
break;
default:
break;
}
TUGAS DAN LATIHAN
Kerjakan latihan soal dan logika di folder:
“Tugas” Pertemuan 2
