Start Your Journey With Javascript

Learn modern javascript fundamental and start build the world

Transcript

1. Start Your Journey With Javascript Learn a modern javascript programming fundamentals and start build the world PIBITI, 6 & 13 November 2021 by S. Sembara, Freelance Web Developer sembara9090@gmail.com CC BY-SA 4.0 License
3. • Hi, my name is Sebastianus Sembara • You can call me Bastian • Work as a freelance web developer • Surabaya JS core organizer • STIKOM Surabaya Final-year student 😂 Reach me on: Instagram @ssembara Twitter @ssembara99 Mail sembara9090@gmail.com
4. “ There's no programmer from other (programming) languages that can say "I have made a platform, website, mobile app, backends from database to business logics only using one programming language" else than JavaScript. ” Rahmadani Ardhiyanto, SurabayaJS Meetup #9 - 21 June 2020
5. Javascript (what?) • Javascript adalah bahasa pemrograman tingkat tinggi yang awalnya dikembangkan untuk membuat website menjadi lebih interaktif • Saat ini javascript dapat dijalankan pada server menggunakan Node.js • Termasuk bahasa scripting (penggunaan interpreter)
6. Javascript (why?) • Code once, run anyway • Beginners friendly • Potensi karir
7. sumber: https://octoverse.github.com/ Top languages over the years
8. Environment Quokka.js Node.js Text Editor (VS Code Recommended)
9. First Code!
10. Comments
11. Variabel dan Tipe Data • Pada javascript setidaknya ada tiga cara untuk mendeklarasikan sebuah variabel, yaitu menggunakan keyword var, let, dan const • Ada 2 tipe data dalam javascript: ◦ 1. Primitives : String, Number, Boolean, Null, Undefined, Symbol ◦ 2. Object : Object dan Array
12. https://medium.com/coderupa/es6-var-let-const-apa-bedanya-1cd4daaee9f0 Difference (?)
13. Operator • Assignment Operator penjumlahan (+), pengurangan (-), pembagian (/), perkalian (*), modulus (%), perpangkatan (**) • Comparison Operator sama (==), tidak sama (!=), identik (===), tidak identik (!==), lebih besar (>), lebih besar sama dengan ... (>=), lebih kecil (<), lebih kecil sama dengan... (<=) • Logical Operator AND (&&), OR (||), NOT (!)
14. John memiliki uang sejumlah Rp. 255.800, bantu John untuk menghitung banyaknya uang pecahan dari total uang, dalam pecahan: 1. Rp. 100.000 = ? 2. Rp. 10.000 = ? 3. Rp. 1.000 = ? 4. Rp. 100 = ?
15. Decision • Pengambilan keputusan adalah hal yang penting dalam pemrograman. • Kita bisa memanfaatkan if-else statement • atau switch-case untuk memilih satu opsi berdasarkan kondisi yang diberikan.
16. Decision - IF Statement
17. Decision - IF/ELSE Statement
18. Decision - Ternary Operation
19. Decision - Switch Case • Tanda kurung setelah keyword switch berisi variabel atau expression yang akan dievaluasi. • Kemudian untuk setiap kondisi yang mungkin terjadi, kita masukkan keyword case diikuti dengan nilai yang valid. Jika kondisi pada case sama dengan variabel pada switch, maka blok kode setelah titik dua (:) akan dijalankan. • Keyword break digunakan untuk keluar dari proses switch. • Terdapat satu case bernama default yang memiliki fungsi yang sama dengan keyword else.
20. Menghitung nilai ujian mahasiswa Teknik Informatika, Jika: 1. 90 - 100 => A 2. 80 - 89 => B 3. 70 - 79 => C 4. 60 - 69 => D 5. 0 - 59 => E
21. Loop • Dalam bahasa pemrograman ada yang disebut dengan istilah “looping” • dimana tujuan dari looping ini adalah perintah untuk mengulang perintah yang dibuat dalam satu blok • tanpa harus mengetik syntax berulang-ulang.
22. For Loop
23. For of Loop
24. While and Do-While
25. Buatlah deret angka kelipatan 3
26. Buatlah pola bintang sehingga berbentuk persegi panjang
27. Cetaklah 100 angka dengan syarat : • Kelipatan 3 cetak “PIBITI” • Kelipatan 5 cetak “JAVASCRIPT” • Kelipatan 15 cetak “INFORMATIKA”
28. Object Oriented Programming • OOP merupakan paradigma pemrograman yang berdasarkan pada konsep objek yang memiliki atribut serta dapat melakukan operasi atau prosedur tertentu. • Terdapat 4 (empat) pilar dalam object oriented programming, antara lain: encapsulation, abstraction, inheritance, dan polymorphism. • Class merupakan blueprint untuk mendefinisikan karakteristik dari sebuah objek.
29. KONSEP bulu berwarna kuning tinggi badan 25 cm berat badan 4kg • Berjalan • Berlari • Tidur Kemampuan:
30. Class Nama Class Kucing Karakteristik Nama, Warna, Tinggi, Berat Kapabilitas/Aksi Berjalan, Berlari, Tidur
32. 4 Pilar OOP Encapsulation Abstraction Inheritance Polymorphism
33. Encapsulation Enkapsulasi adalah kondisi di mana attribute atau method di dalam class dibungkus dan bersifat privat. Artinya objek lain tidak bisa mengakses atau mengubah nilai dari property secara langsung. Cat + String Name + String Color + printName() + walk() Dog + String Name + String Color + printName() + walk()
34. Abstraction • Abstraksi dapat dikatakan merupakan penerapan alami dari enkapsulasi. Abstraksi berarti sebuah objek hanya menunjukkan operasinya secara high-level. • Misalnya kita cukup tahu bagaimana bagaimana pesan dikirim atau diterima, namun kita tidak perlu tahu seperti apa proses enkripsi dan dekripsi isi pesan, atau bagaimana sebuah daftar contact dapat bertambah.
35. Inheritance Beberapa objek bisa memiliki beberapa karakteristik atau perilaku yang sama, tetapi mereka bukanlah objek yang sama. Animal + String Name + Int Age + Bol isMammal Eagle + String Name + String Color + Bol isMammal = false + Fly() Cat + String Name + String Color + Bol isMammal = true + Walk()
36. Polymorphism Sebuah objek dapat memiliki bentuk atau implementasi yang berbeda-beda pada satu metode yang sama.
37. https://github.com/ssembara/javascript-fundamental
38. Any Question ?