Dasar-Dasar Perangkat Lunak dan GIM 191 c. Mandiri d. Bergotong-royong 4. Sarana & Prasarana Sarana dan Prasarana yang dibutuhkan pada saat belajar dengan modul ini antara lain: a. LKPD b. Alat Tulis c. Android d. Laptop/komputer 5. Target Peserta Didik a. Peserta didik reguler/tipikal: 75% b. Peserta didik dengan kesulitan belajar: 15% c. Peserta didik dengan pencapaian tinggi: 10% 6. Model Pembelajaran yang Digunakan Pembelajaran secara discovery learning B. KOMPONEN INTI 1. Tujuan Pembelajaran a. Peserta didik dapat menjelaskan tentang prosedur dan fungsi dengan kata-kata sendiri (Pertemuan 25). b. Peserta didik dengan kreatif dan mandiri dapat membuat program yang memuat fungsi menggunakan tool pengembang perangkat lunak (Pertemuan 25). c. Peserta didik dapat menjelaskan tentang class, objek, method dengan kata-kata sendiri (Pertemuan 26). d. Peserta didik dengan kreatif dan mandiri dapat membuat program yang menerapkan class, objek, dan method menggunakan tool pengembang perangkat lunak (Pertemuan 27). e. Peserta didik dapat menjelaskan tentang enkapsulasi, interface, pewarisan, dan polymorphism dengan kata-kata sendiri (Pertemuan 28). f. Peserta didik dengan kreatif dan mandiri dapat membuat program yang menerapkan enkapsulasi dan interface menggunakan tool pengembang perangkat lunak (Pertemuan 29-30).
Cita Puspitasari, S.Pd dan Renita, S.Kom. 192 g. Peserta didik dengan kreatif dan mandiri dapat membuat program yang menerapkan pewarisan dan polymorphism menggunakan tool pengembang perangkat lunak (Pertemuan 31-32). 2. Pemahaman Bermakna a. Prosedur dan fungsi b. Class, objek, method c. Enkapsulasi, interface, pewarisan, dan polymorphism 3. Pertanyaan Pemantik a. Apa itu fungsi dan prosedur? b. Apakah yang kalian ketahui tentang pembuatan fungsi dan prosedur menggunakan tool pengembang perangkat lunak? c. Apa itu class, objek, method, dan package? d. Bagaimana membuat class, objek, method, package menggunakan tool pengembang perangkat lunak? e. Apa itu enkapsulasi, interface, pewarisan, dan polymorphism? f. Bagaimana cara menerapkan enkapsulasi menggunakan tool pengembang perangkat lunak? g. Bagaimana cara menerapkan interface menggunakan tool pengembang perangkat lunak? h. Bagaimana cara menerapkan pewarisan menggunakan tool pengembang perangkat lunak? i. Bagaimana cara menerapkan polymorphism menggunakan tool pengembang perangkat lunak? 4. Persiapan Pembelajaran Menyiapkan presentasi pembelajaran Membuat pertanyaan yang harus dijawab oleh siswa 5. Kegiatan Pembelajaran: KEGIATAN PEMBELAJARAN Pertemuan 25 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan 20
Dasar-Dasar Perangkat Lunak dan GIM 193 memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assesmen diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Apa itu fungsi dan prosedur? Apakah yang kalian ketahui tentang pembuatan fungsi dan prosedur menggunakan tool pengembang perangkat lunak? 6. Guru memberikan gambaran tentang manfaat mempelajari materi yang akan dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. menit Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang fungsi dan prosedur di internet (Profil bernalar kritis). 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet tentang fungsi dan prosedur. Eksploras.i Konsep 1. Guru menyampaikan materi tentang fungsi dan prosedur. 2. Peserta didik menyimak video yang diberikan oleh guru tentang fungsi dan prosedur. 210 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 194 Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk membuat fungsi dan prosedur menggunakan tool pengembang perangkat lunak (Profil bergotongroyong). Refleksi Terbimbing 1. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 2. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 3. Kelompok lain atau guru menanggapi jawaban dari kelompok yang sedang presentasi. 4. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. Demonstrasi Kontekstual 1. Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang prosedur dan fungsi dan pembuatan fungsi dan prosedur menggunakan tool pengembang perangkat lunak (Profil mandiri). Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta Didik Bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban 40 menit
Dasar-Dasar Perangkat Lunak dan GIM 195 atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. KEGIATAN PEMBELAJARAN Pertemuan 26 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 5. Guru menyampaikan pertanyaan pemantik Apa itu class, objek, method, dan package? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. 20 menit Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang class, objek, method, dan package. (Profil bernalar kritis) 2. Peserta didik menyampaikan informasi yang didapat di internet tentang class, objek, method, dan package. 210 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 196 Eksplorasi Konsep 1. Guru menyampaikan materi tentang class, objek, method, dan package. 2. Peserta didik menyimak video yang di berikan oleh guru tentang class, objek, method, dan package. Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk mendiskusikan materi tentang class, objek, method, dan package. (Profil bergotongroyong) Refleksi Terbimbing 1. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 2. Guru dan kelompok lain menanggapi jawaban dari kelompok yang sedang presentasi. 3. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 4. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat berdiskusi. Demonstrasi Kontekstual 1. Peserta didik mengerjakan soal yang diberikan oleh guru tentang materi class, objek, method, dan package. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 40 menit
Dasar-Dasar Perangkat Lunak dan GIM 197 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. KEGIATAN PEMBELAJARAN Pertemuan 27 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Guru menyampaikan tujuan pembelajaran yang ingin dicapai. 5. Guru menyampaikan pertanyaan pemantik. Bagaimana cara membuat class, objek, method, dan menggunakan tool pengembang perangkat lunak? 6. Mengaitkan kejadian sehari-hari dengan materi. 7. Memberikan gambaran tentang manfaat mempelajari materi dalam kehidupan sehari-hari. 20 menit Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang pembuatan class, objek, method, dan package menggunakan tool pengembang perangkat lunak di internet. (Profil bernalar kritis) 210 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 198 2. Peserta didik menyampaikan informasi yang didapat di internet tentang pembuatan class, objek, method, dan package menggunakan tool pengembang perangkat lunak. Eksplorasi Konsep 1. Guru menyampaikan materi tentang pembuatan class, objek, method, dan package menggunakan tool pengembang perangkat lunak. 2. Peserta didik menyimak video yang diberikan oleh guru tentang pembuatan class, objek, method, dan package menggunakan tool pengembang perangkat lunak. Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk mendiskusikan materi tentang pembuatan class, objek, method, dan package menggunakan tool pengembang perangkat lunak. (Profil bergotong-royong) Refleksi Terbimbing 1. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 2. Guru dan kelompok lain menanggapi jawaban dari kelompok yang sedang presentasi. 3. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 4. Peserta didik menanyakan kepada guru jika mengalami kesulitan saat berdiskusi. Demonstrasi Kontekstual 1. Peserta didik mengerjakan soal yang diberikan oleh guru tentang pembuatan class, objek, method, dan package menggunakan tool pengembang perangkat
Dasar-Dasar Perangkat Lunak dan GIM 199 lunak. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi 1. Peserta didik bersama guru menyimpulkan hasil diskusi untuk pembelajaran hari ini. 2. Guru memberikan penjelasan jawaban atas pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 28 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assesmen diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Apa itu enkapsulasi, interface, pewarisan, dan polymorphism? 6. Guru memberikan gambaran tentang 20 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 200 manfaat mempelajari materi yang akan dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang enkapsulasi, interface, pewarisan, dan polymorphism. (Profil bernalar kritis) 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet tentang enkapsulasi, interface, pewarisan, dan polymorphism. Eksplorasi Konsep 1. Guru menyampaikan materi tentang enkapsulasi, interface, pewarisan, dan polymorphism. 2. Peserta didik menyimak video yang diberikan oleh guru tentang enkapsulasi, interface, pewarisan, dan polymorphism. Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk menganalisis enkapsulasi, interface, pewarisan, dan polymorphism. (Profil bergotong royong) Refleksi Terbimbing 1. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 2. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 3. Kelompok lain/guru menanggapi jawaban dari kelompok yang sedang presentasi. 4. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 201 Demonstrasi Kontekstual 1. Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang enkapsulasi, interface, pewarisan, dan polymorphism. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta didik bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 29 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 20 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 202 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assesmen diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Bagaimana cara menerapkan enkapsulasi menggunakan tool pengembang perangkat lunak? 6. Guru memberikan gambaran tentang manfaat mempelajari materi yang akan dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang penerapan enkapsulasi menggunakan tool pengembang perangkat lunak. (Profil bernalar kritis) 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet tentang penerapan enkapsulasi menggunakan tool pengembang perangkat lunak. Eksplorasi Konsep 1. Guru menyampaikan materi tentang penerapan enkapsulasi menggunakan tool pengembang perangkat lunak. 2. Peserta didik menyimak video yang diberikan oleh guru tentang penerapan enkapsulasi menggunakan tool pengembang perangkat lunak. Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk menganalisis penerapan enkapsulasi dan interface menggunakan 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 203 tool pengembang perangkat lunak. (Profil bergotong-royong) Refleksi Terbimbing 1. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 2. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 3. Kelompok lain/guru menanggapi jawaban dari kelompok yang sedang presentasi. 4. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. Demonstrasi Kontekstual 1. Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang penerapan enkapsulasi dan interface menggunakan tool pengembang perangkat lunak. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta Didik Bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada 40 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 204 peserta didik. 2. Guru menutup dengan memberikan salam. KEGIATAN PEMBELAJARAN Pertemuan 30 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assesmen diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Bagaimana cara menerapkan interface menggunakan tool pengembang perangkat lunak? 6. Guru memberikan gambaran tentang manfaat mempelajari materi yang akan dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. 20 menit Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang penerapan interface menggunakan tool pengembang perangkat lunak. (Profil bernalar kritis) 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet tentang penerapan enkapsulasi dan interface menggunakan tool 210 menit
Dasar-Dasar Perangkat Lunak dan GIM 205 pengembang perangkat lunak. Eksplorasi Konsep 1. Guru menyampaikan materi tentang penerapan enkapsulasi dan interface menggunakan tool pengembang perangkat lunak. 2. Peserta didik menyimak video yang diberikan oleh guru tentang penerapan enkapsulasi dan interface menggunakan tool pengembang perangkat lunak. Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk menganalisis penerapan interface menggunakan tool pengembang perangkat lunak. (Profil bergotongroyong) Refleksi Terbimbing 1. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 2. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 3. Kelompok lain/guru menanggapi jawaban dari kelompok yang sedang presentasi. 4. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. Demonstrasi Kontekstual 1. Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang penerapan enkapsulasi dan interface menggunakan tool pengembang perangkat lunak. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang
Cita Puspitasari, S.Pd dan Renita, S.Kom. 206 mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta Didik Bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 31 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assesmen diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Bagaimana cara menerapkan pewarisan menggunakan tool pengembang perangkat lunak? 6. Guru memberikan gambaran tentang manfaat mempelajari materi yang akan 20 menit
Dasar-Dasar Perangkat Lunak dan GIM 207 dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang penerapan pewarisan menggunakan tool pengembang perangkat lunak. (Profil bernalar kritis) 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet tentang penerapan pewarisan menggunakan tool pengembang perangkat lunak. Eksplorasi Konsep 1. Guru menyampaikan materi tentang penerapan pewarisan menggunakan tool pengembang perangkat lunak. 2. Peserta didik menyimak video yang diberikan oleh guru tentang penerapan pewarisan dan polymorphism menggunakan tool pengembang perangkat lunak. Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk menganalisis penerapan pewarisan dan polymorphism menggunakan tool pengembang perangkat lunak. (Profil bergotongroyong) Refleksi Terbimbing 1. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 2. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 3. Kelompok lain/guru menanggapi jawaban dari kelompok yang sedang 210 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 208 presentasi. 4. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. Demonstrasi Kontekstual 1. Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang penerapan pewarisan menggunakan tool pengembang perangkat lunak. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta Didik Bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. 40 menit KEGIATAN PEMBELAJARAN Pertemuan 32 Tahapan Kegiatan Alokasi Waktu Pendahuluan 1. Guru membuka pelajaran dengan memberi salam dan peserta didik menjawab salam dari guru. 20 menit
Dasar-Dasar Perangkat Lunak dan GIM 209 2. Salah satu peserta didik memimpin kegiatan berdoa sebelum pembelajaran dimulai. (Profil beriman dan bertakwa kepada Tuhan YME dan berakhlak mulia) 3. Guru mengecek kehadiran peserta didik. 4. Peserta didik melakukan assesmen diagnostik kognitif dan non kognitif. 5. Menyampaikan pertanyaan pemantik yaitu: Bagaimana cara menerapkan polymorphism menggunakan tool pengembang perangkat lunak? 6. Guru memberikan gambaran tentang manfaat mempelajari materi yang akan dipelajari. 7. Guru menyampaikan tujuan pembelajaran pada pertemuan yang akan berlangsung. Kegiatan Inti Mulai dari diri 1. Peserta didik menggali informasi tentang penerapan polymorphism menggunakan tool pengembang perangkat lunak. (Profil bernalar kritis) 2. Beberapa peserta didik menyampaikan informasi yang didapat di internet tentang penerapan polymorphism menggunakan tool pengembang perangkat lunak. Eksplorasi Konsep 1. Guru menyampaikan materi tentang penerapan polymorphism menggunakan tool pengembang perangkat lunak. 2. Peserta didik menyimak video yang diberikan oleh guru tentang penerapan polymorphism menggunakan tool pengembang perangkat lunak. 210 menit
Cita Puspitasari, S.Pd dan Renita, S.Kom. 210 Ruang Kolaborasi 1. Peserta didik membentuk kelompok untuk menganalisis penerapan polymorphism menggunakan tool pengembang perangkat lunak. (Profil bergotong-royong) Refleksi Terbimbing 1. Guru membimbing peserta didik untuk melakukan diskusi kelompok. 2. Secara berkelompok, peserta didik mempresentasikan hasil pekerjaan kelompoknya. 3. Kelompok lain/guru menanggapi jawaban dari kelompok yang sedang presentasi. 4. Guru memberikan semangat kepada peserta didik lain untuk menjawab pertanyaan. Demonstrasi Kontekstual 1. Peserta didik secara mandiri mengerjakan soal yang diberikan oleh guru tentang penerapan polymorphism menggunakan tool pengembang perangkat lunak. (Profil mandiri) Elaborasi Pemahaman 1. Peserta didik bisa bertanya jika ada kesulitan dalam memahami materi. 2. Guru membimbing peserta didik yang mengalami kesulitan dalam memahami materi. Penutup Koneksi Antar Materi Peserta Didik Bersama 1. Guru bersama peserta didik menyimpulkan materi yang telah dipelajari. 2. Guru memberikan penjelasan jawaban atas pertanyaan-pertanyaan yang ada. 3. Peserta didik menulis rangkuman berdasarkan arahan dari guru. 40 menit
Dasar-Dasar Perangkat Lunak dan GIM 211 Aksi Nyata 1. Guru memberikan motivasi kepada peserta didik. 2. Guru menutup dengan memberikan salam. 6. Asesmen Soal Diskusi dan Tes Formatif (Terlampir) 7. Pengayaan & Remedial Terlampir 8. Refleksi Peserta Didik dan Guru 1. Apa ada kendala pada kegiatan pembelajaran? 2. Apakah semua peserta didik aktif selama mengikuti kegiatan pembelajaran? 3. Apa saja kesulitan yang dihadapi peserta didik selama mengikuti kegiatan pembelajaran? 4. Apakah kesulitan yang dialami peserta didik dapat teratasi? 5. Apa level pencapaian rata-rata peserta didik dalam kegiatan pembelajaran ini? 6. Apakah seluruh peserta didik dapat tuntas dalam pelaksanaan pembelajaran? 7. Apa strategi yang harus dipilih supaya peserta didik dapat menuntaskan kompetensi? C. LAMPIRAN 1. LKPD a. Tes formatif Soal Latihan Pertemuan 25 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Fungsi atau prosedur di dalam javascript dibedakan menjadi! Sebutkan dan jelaskan! 2. Tuliskan deklarasi fungsi pada Javascript! 3. Tuliskan deklarasi prosedur pada Javascript! 4. Sebutkan 3 cara memanggil fungsi di Javascript!
Cita Puspitasari, S.Pd dan Renita, S.Kom. 212 Kunci jawaban dan norma penilaian No Kunci Jawaban Skor 1 1. Fungsi yang telah dibuat oleh javascript (built-in function) 2. Fungsi yang dibuat oleh pengembang (user defined function) 25 2 function nama_fungsi() { return blok_program } 25 3 function nama_fungsi() {blok_program} 25 4 1. Memanggil secara langsung dari dokumen HTML 2. Memanggil dengan hyperlink 3. Menggunakan Event 25 Total 100 Soal Latihan Pertemuan 26 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Apa yang dimaksud dengan class? 2. Sebutkan fungsi dari class! 3. Jelaskan apa yang dimaksud dengan objek! 4. Apa yang kalian ketahui tentang method? Kunci jawaban dan norma penilaian No Kunci Jawaban Skor 1 Class adalah prototype, atau blueprint, atau rancangan yang mendefinisikan variabel dan metode-metode pada seluruh objek tertentu. 25 2 Fungsi dari class adalah untuk menampung isi dari program yang akan dijalankan, di dalamnya berisi atribut/tipe data dan metode untuk menjalankan suatu program. 25 3 Objek adalah segala sesuatu yang ada di dunia ini. Entah itu benda mati ataupun makhluk hidup. Semuanya objek. 25
Dasar-Dasar Perangkat Lunak dan GIM 213 4 Method adalah kumpulan program yang mempunyai nama. Method merupakan sarana bagi programmer untuk memecah program menjadi bagian-bagian yang kecil agar jadi lebih kompleks sehingga dapat digunakan berulang-ulang. 25 Total 100 Soal Latihan Pertemuan 28 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Jelaskan pengertian dari enkapsulasi! 2. Apa yang dimaksud dengan interface? 3. Apa yang dimaksud dengan inheritance? 4. Sebutkan 2 jenis polymorphism! Kunci jawaban dan norma penilaian No Kunci Jawaban Skor 1 Enkapsulasi atau pengkapsulan adalah konsep tentang pengikatan data atau metode yang berbeda yang disatukan atau “dikapsulkan” menjadi satu unit data. Encapsulation dapat mempermudah dalam pembacaan kode karena informasi yang disajikan tidak perlu dibaca secara rinci dan sudah merupakan satu kesatuan. 25 2 Biasanya interface juga bisa dikatakan sebagai bentuk lain dari abstract class. Walaupun secara konsep teori dan tujuan penggunaannya berbeda dari interface pada umumnya. Sama halnya seperti abstract dalam class, interface juga hanya berisi signature dari method, yaitu hanya nama method dan parameternya saja, itu pun jika parameternya ada. 25 3 Inheritance adalah konsep OOP di mana kita dapat membentuk class baru yang “mewarisi” atau memiliki bagian-bagian dari class yang sudah ada sebelumnya. 25 4 Dalam Java, terdapat 2 jenis polymorphism yaitu Static Polymorphism dan Dynamic Polymorphism. 25 Total 100
Cita Puspitasari, S.Pd dan Renita, S.Kom. 214 b. Lembar Observasi Jobsheet Fungsi dan Prosedur Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code Langkah kerja Buat Projek baru VSC kemudian ketik script Latihan 1 dan 2. Simpulkan perbedaan fungsi dan prosedur! Latihan 1 <!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function tampilNama() {var nama = document.getElementById("nama").value document.getElementById("tampil").innerHTML="Nama : "+nama} </script> </head> <body> <select id="nama" OnChange="tampilNama()"> <option value="Nia">Nia</option> <option value="Okta">Okta</option> <option value="Saras">Saras</option> </select> <br> <div id='tampil'></div> </body> </html> Latihan 2 //Membuat fungsi jumlah dengan parameter a dan b
Dasar-Dasar Perangkat Lunak dan GIM 215 function jumlah(a,b) {return document.write('Hasil = '+(a+b))} //Memanggil fungsi jumlah jumlah(3,6) 2. Norma Penilaian No Aspek penilaian Skor maks 1 Hasil Praktik 40 2 Kerja sama kelompok 30 3 Tepat waktu 20 Total skor 90 Jobsheet Class Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code Langkah kerja Buat Projek baru VSC kemudian ketikkan script cara menambahkan Class di bawah ini! <!DOCTYPE html> <html> <head> <title>addClass</title> <style type="text/css"> .aqua { background: aqua; } </style> </head>
Cita Puspitasari, S.Pd dan Renita, S.Kom. 216 <body> <p class="contoh aqua">Elemen dengan class "contoh dan aqua"</p><!--Elemen yang sudah di beri dua class--> <p class="contoh">Elemen yang memiliki class "contoh" saja</p><!--Elemen yang akan di tambahkan class aqua--> <button id="btn">Tambahkan class aqua</button><!--Untuk memproses kode javascript--> </body> </html> Keterangan sudah berada dalam commenting di tag html di atas, jalankan di browsernya, maka akan tampil seperti gambar di bawah ini: Kedua, tuliskan kode javascript di bawah tag button, dan berikut kodenya: <script> var element = document.getElementById("btn"); var paragraf = document.querySelectorAll(".contoh"); element.onclick = function(){ paragraf[1].classList.add("aqua"); } </script>
Dasar-Dasar Perangkat Lunak dan GIM 217 Penjelasan kode javascript di atas: variabel element: berfungsi untuk mengambil id dari button untuk proses onclick. variabel paragraf: untuk menyeleksi semua class. contoh yang berada di elemen p. paragraf[1].classList.add(“aqua”): berfungsi untuk memilih paragraf mana yang akan kita tambahkan class aqua. Karena kita hanya memiliki dua elemen, maka elemen 1 atau paragraf kedualah yang akan kita tambahkan class. Setelah selesai mengetikkan kode javascript di atas, coba refresh file html yang ada di browser tadi lalu klik buttonnya, maka elemen 1 atau paragraf kedua akan terkena efek dari class aqua: Jobsheet Objek Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code Langkah kerja Buat Projek baru VSC kemudian ketikan script cara membuat objek dengan kata kunci di bawah ini! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0">
Cita Puspitasari, S.Pd dan Renita, S.Kom. 218 <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Belajar Objek Javascript</title> <script> function Person(firstName, lastName){ // properti this.firstName = firstName; this.lastName = lastName; // method this.fullName = function(){ return `${this.firstName} ${this.lastName}` } this.showName = function(){ document.write(this.fullName()); } } var person1 = new Person("Muhar", "Dian"); var person2 = new Person("Petani", "Kode"); person1.showName(); document.write("<br>"); person2.showName(); </script> </head> <body> Hasilnya:
Dasar-Dasar Perangkat Lunak dan GIM 219 Jobsheet Enkapsulasi Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code Langkah kerja Buat Projek baru VSC, kemudian ketikkan script contoh Enkapsulasi di bawah ini! Katakanlah kita membuat objek Film lain, dan ingin konsol log deskripsi. Nama dan sutradara tidak dapat diakses di luar ruang lingkup. Data disembunyikan, dikemas di dalam Film. const Movie = function(n, d){ let name = n let director = d return { description: function(){ console.log(`${director} directed ${name} `) } } } const titanic = new Movie('Titanic', 'James Cameron') titanic.description() // James Cameron directed Titanic Jobsheet Pewarisan Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code Langkah kerja: Buat proyek baru VSC kemudian ketikkan script contoh pewarisan di bawah ini! Dalam pewarisan klasik, metode dari kelas dasar (kelas induk) dapat
Cita Puspitasari, S.Pd dan Renita, S.Kom. 220 disalin ke dalam kelas turunan (kelas anak). Dengan "extends", kelas Karyawan mewarisi konstruktor dan metode toString dari kelas Person. constructor(name){ this.name = name; } //class method to return the string toString(){ return (`Name of person: ${this.name}`); } } class Employee extends Person{ constructor(name,id){ //super keyword for calling above class constructor super(name); this.id = id; } toString(){ return (`${super.toString()},Employee ID: ${this.id}`); } } let john = new Employee('John',32); console.log(john.toString()); //'Name of person: John,Employee ID: 32' Jobsheet Polymorphism Alat dan bahan 1. Komputer/laptop 2. Visual Studio Code Langkah kerja Buat Projek baru VSC, kemudian ketikkan script contoh polymorphism di bawah ini! Seperti yang ditunjukkan pada nama: "poly" = "many" dan "morphism" = "form", polimorfisme menyediakan cara untuk melakukan satu tindakan dalam berbagai bentuk. Program akan menentukan arti atau penggunaan mana yang diperlukan untuk setiap eksekusi objek itu, mengurangi kebutuhan untuk menggandakan kode. Pada contoh berikut, semua film memiliki fungsi yang sama dengan bentuk yang
Dasar-Dasar Perangkat Lunak dan GIM 221 berbeda. let movie1 = function () {} movie1.prototype.description = function() { return "description of movie1" } let movie2 = function() {} movie2.prototype = Object.create(movie1.prototype); movie2.prototype.description = function() { return "description of movie2" } let movie3 = function() {} movie3.prototype = Object.create(movie1.prototype); movie3.prototype.description = function() { return "description of movie3" } let movies = [new movie1(), new movie2(), new movie3()]; movies.forEach(function(movie){ console.log(movie.description()); }); No Aspek penilaian Skor maks 1 Hasil Praktik 40 2 Kerja sama kelompok 30 3 Tepat waktu 20 Total skor 90 c. Pengayaan dan Remedi Soal Remedi Pertemuan 25 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Fungsi atau prosedur di dalam Javascript dibedakan menjadi 2! Sebutkan dan jelaskan! 2. Tuliskan deklarasi fungsi pada Javascript! 3. Tuliskan deklarasi prosedur pada Javascript! 4. Sebutkan 3 cara memanggil fungsi di Javascript!
Cita Puspitasari, S.Pd dan Renita, S.Kom. 222 Kunci jawaban dan norma penilaian No Kunci Jawaban Skor 1 Fungsi yang telah dibuat oleh javascript (built-in function) Fungsi yang dibuat oleh pengembang (user defined function) 25 2 function nama_fungsi() {return blok_program} 25 3 function nama_fungsi() {blok_program} 25 4 Memanggil secara langsung dari dokumen HTML Memanggil dengan hyperlink Menggunakan Event 25 Total 100 Soal Pengayaan 1. Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 2. Carilah materi tentang class, method dan object! Soal Remedi Pertemuan 26 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Apa yang dimaksud dengan class? 2. Sebutkan fungsi dari class! 3. Jelaskan apa yang dimaksud dengan objek! 4. Apa yang kalian ketahui tentang method? Kunci jawaban dan norma penilaian No Kunci Jawaban Skor 1 Class adalah prototype, atau blueprint, atau rancangan yang mendefinisikan variable dan metode-metode pada seluruh objek tertentu. 25 2 Fungsi dari class adalah untuk menampung isi dari program yang akan dijalankan, di dalamnya berisi atribut/tipe data dan metode untuk menjalankan suatu 25
Dasar-Dasar Perangkat Lunak dan GIM 223 program. 3 Objek adalah segala sesuatu yang ada di dunia ini. Entah itu benda mati ataupun makhluk hidup. Semuanya objek. 25 4 Method adalah kumpulan program yang mempunyai nama. Method merupakan sarana bagi programmer untuk memecah program menjadi bagian-bagian yang kecil agar jadi lebih kompleks sehingga dapat digunakan berulang-ulang. 25 Total 100 Soal Pengayaan 1. Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 2. Carilah materi tentang penerapan class, method dan object pada javasript! Soal Remedi Pertemuan 28 Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 1. Jelaskan pengertian dari enkapsulasi! 2. Apa yang dimaksud dengan interface? 3. Apa yang dimaksud dengan inheritance? 4. Sebutkan 2 jenis polymorphism! Kunci jawaban dan norma penilaian No Kunci Jawaban Skor 1 Enkapsulasi atau pengkapsulan adalah konsep tentang pengikatan data atau metode yang berbeda yang disatukan atau “dikapsulkan” menjadi satu unit data. Encapsulation dapat mempermudah dalam pembacaan kode karena informasi yang disajikan tidak perlu dibaca secara rinci dan sudah merupakan satu kesatuan. 25 2 Biasanya interface juga bisa dikatakan sebagai bentuk lain dari abstract class. Walaupun secara konsep teori dan tujuan penggunaannya berbeda dari interface pada umumnya. Sama halnya seperti abstract dalam class, 25
Cita Puspitasari, S.Pd dan Renita, S.Kom. 224 interface juga hanya berisi signature dari method, yaitu hanya nama method dan parameternya saja itu pun jika parameternya ada. 3 Inheritance adalah konsep OOP di mana kita dapat membentuk class baru yang “mewarisi” atau memiliki bagian-bagian dari class yang sudah ada sebelumnya. 25 4 Dalam Java, terdapat 2 jenis polymorphism yaitu Static Polymorphism dan Dynamic Polymorphism. 25 Total 100 Soal Pengayaan 1. Silakan jawab pertanyaan-pertanyaan berikut ini dengan bahasa Anda sendiri! 2. Carilah materi tentang penerapan Enkapsulasi dan Interface pada Javascript! 3. Bahan Bacaan Guru dan Peserta Didik Materi Pertemuan 25 a. Prosedur dan Fungsi Fungsi atau yang bisa kita sebut prosedur adalah suatu blog program yang mempunyai tugas tertentu berdasarkan tujuan dari fungsi/prosedur itu sendiri. Dalam bahas pemrograman lain seperti pascal fungsi dan prosedur dibedakan dalam cara pendeklarasian, contohnya di dalam pascal ada pernyataan procedure dan function untuk pendeklarasiannya, Namun di javascript tidak ada perbedaan secara khusus dalam cara pendeklarasian untuk fungsi maupun prosedur. Cara untuk mengetahui apakah suatu blok program merupakan fungsi adalah jika memiliki nilai balik (return value) sedangkan prosedur tidak memiliki. 1) Jenis Fungsi di Javascript Fungsi atau prosedur di dalam javascript dibedakan menjadi dua yaitu: a) Fungsi yang telah dibuat oleh javascript (built-in function).
Dasar-Dasar Perangkat Lunak dan GIM 225 b) Fungsi yang dibuat oleh pengembang (user defined function). 2) Mendeklarasikan Fungsi dan Prosedur di Javascript Sebenarnya ada beberapa bentuk/cara mendeklarasikan fungsi di javascript misalnya dengan mendeklarasikan secara langsung (tanpa kata kunci function di depan nama fungsi) atau dengan ekspresi assignment. Tetapi bentuk umum dan yang saya rekomendasikan adalah dengan menggunakan kata kunci function sebelum nama fungsi. Seperti yang terlihat pada contoh di bawah ini: 3) Deklarasi Fungsi function nama_fungsi(){ return blok_program } 4) Deklarasi Prosedur function nama_fungsi(){ blok_program } Dari bentuk di atas dapat dilihat dengan jelas perbedaan antara fungsi dan prosedur di mana fungsi memiliki nilai balik (return value) sedangkan prosedur tidak memiliki. 5) Cara Memanggil Fungsi Setelah kita mendeklarasikan suatu fungsi dan kemudian ingin kita gunakan maka kita perlu memanggilnya. Ada tiga cara memanggil fungsi di javascript yaitu: a) Memanggil secara langsung dari dokumen HTML b) Memanggil dengan hyperlink c) Menggunakan Event 6) Memanggil Secara Langsung Kita dapat langsung memanggil suatu fungsi yang telah
Cita Puspitasari, S.Pd dan Renita, S.Kom. 226 dibuat dalam dokumen HTML. <!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function Hello(){ return alert('Hello Guys') } </script> </head> <body> <script> //Memanggil fungsi Hello() Hello() </script> </body> </html> Perhatikan pada contoh di atas fungsi Hello() saya buat di dalam tag <head> lalu kemudian saya panggil fungsi tersebut dari tag <body>. Harap diperhatikan karena program yag dibuat secara sekuensial (program dieksekusi dari atas ke bawah) maka pendeklarasian fungsi harus terlebih dahulu dideklarasikan sebelum kita memanggilnya. 7) Memanggil Fungsi Dari Hyperlink Fungsi juga dapat dipanggil dari hyperlink melalui atribut href. Perhatikan contoh di bawah ini: <!DOCTYPE html> <html> <head> <script>
Dasar-Dasar Perangkat Lunak dan GIM 227 function Hello(){ return alert('Hello Guys') } </script> </head> <body> <a href='Javascript:Hello()'>Klik Disini</a><br> </body> </html> Kita dapat memanggil fungsi javascript dari link lewat atribut href dengan nilai ‘Javascript:nama_fungsi()’ penggunaan ini bisa kalian terapkan saat ingin membuat sebuah aksi saat pengguna mengklik link. 8) Menggunakan Event (Rekasi Terhadap Suatu kejadian) Javascript mampu memberikan reaksi pada suatu elemen HTML yaitu dengan menggunakan event. Baca jenis-jenis event di javascript. Ada banyak jenis event namun saya akan beri dua contoh event berikut: OnClick Kejadian yang terjadi ketika suatu elemen diklik OnChange Kejadian yang terjadi ketika nilai suatu elemen berubah 9) Contoh Event Onclick <!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function Hello(){
Cita Puspitasari, S.Pd dan Renita, S.Kom. 228 return alert('Hello Guys') } </script> </head> <body> <a href='#' onclick="Hello()">Klik Disini</a> </body> </html> Dapat dilihat pada contoh di atas fungsi Hello() dipanggil melalui event onclick, ketika pengguna mengklik link tersebut maka akan memicu event ini terjadi. 10) Contoh Event Onchange <!DOCTYPE html> <html> <head> <script> //Membuat fungsi Hello() function tampilNama(){ var nama = document.getElementById("nama").value
Dasar-Dasar Perangkat Lunak dan GIM 229 document.getElementById("tampil").innerHTML="Nama : "+nama } </script> </head> <body> <select id="nama" OnChange="tampilNama()"> <option value="Nia">Nia</option> <option value="Okta">Okta</option> <option value="Saras">Saras</option> </select> <br> <div id='tampil'></div> </body> </html> Pada contoh kedua fungsi akan dipanggil dari event onchange, ketika terdapat perubahan nilai dalam combobox maka memicu event ini bekerja. 11) Fungsi Dengan Parameter Fungsi di dalam pemrograman juga dapat disematkan daftar variabel yang berisi nilai untuk diproses pada fungsi tersebut. Di javascript pelewatan parameter bisa dilakukan dengan nilai (value).
Cita Puspitasari, S.Pd dan Renita, S.Kom. 230 Contoh : //Membuat fungsi jumlah dengan parameter a dan b function jumlah(a,b) { return document.write('Hasil = '+(a+b)) } //Memanggil fungsi jumlah jumlah(3,6) Hasil: Hasil = 9 Fungsi jumlah () memiliki 2 parameter yaitu a dan b dengan menampilkan hasil penjumlahan dari kedua variabel tersebut. Ketika fungsi tersebut dipanggil maka harus kita sematkan nilai (value) untuk masing-masing parameter dalam fungsi tersebut. Nilai yang saya sematkan pada fungsi jumlah () adalah 3 dan 6 masing-masing nilai tersebut akan dimasukkan pada variabel yang terdapat dalam parameter fungsi jumlah (). 12) Kesimpulan Fungsi yang didefinisikan oleh user sangatlah penting untuk kita pelajari saat belajar dasar javascript, karena ke depan kita akan banyak bekerja dalam manipulasi elemen HTML menggunakan fungsi atau membuat objek dan masih banyak lagi.
Dasar-Dasar Perangkat Lunak dan GIM 231 Materi Pertemuan 26 a. Class, objek, dan method 1) Class Class adalah prototype, atau blueprint, atau rancangan yang mendefinisikan variabel dan metode-metode pada seluruh objek tertentu. Class berfungsi untuk menampung isi dari program yang akan dijalankan, di dalamnya berisi atribut/tipe data dan method untuk menjalankan suatu program. Class merupakan suatu blueprint atau cetakan untuk menciptakan suatu instant dari objek. Class juga merupakan grup suatu objek dengan kemiripan attributes/properties, behaviour dan relasi ke object lain. Contoh: Class Person, Vehicle, Tree, Fruit dan lain-lain. 2) Objek Dalam kehidupan nyata, kita sering menjumpai objek. Objek adalah segala sesuatu yang ada di dunia ini. Entah itu benda mati ataupun makhluk hidup. Semuanya objek. Objekobjek ini dapat kita modelkan di dalam pemrograman. Biasanya menggunakan paradigma OOP (Object Oriented Programming) atau pemrograman beorientasikan objek. Paradigma OOP ini merupakan sebuah teknik atau cara di dalam pemrograman dimana segala sesuatu dipandang sebagai objek. Objek-objek ini dapat saling berinteraksi sehingga membentuk sebuah program. 3) Method Method adalah kumpulan program yang mempunyai nama. Method merupakan sarana bagi programmer untuk memecah program menjadi bagian-bagian yang kecil agar jadi lebih kompleks sehingga dapat digunakan berulangulang. Method merupakan suatu operasi berupa fungsi-fungsi yang dapat dikerjakan oleh suatu objek. Method didefinisikan pada class akan tetapi dipanggil melalui object. Contoh, pada object pea: terdapat method ambilRasa, kupasKulit dan lainlain.
Cita Puspitasari, S.Pd dan Renita, S.Kom. 232 Materi Pertemuan 27 a. Cara Menambahkan Class Menggunakan Javascript Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. Javascript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. Pada tutorial kali ini saya akan membahas tentang “Cara Menambahkan Class Menggunakan Javascript”. Pada javascript kita mengenal elemen classList yang mempunyai metode add () untuk menambahkan class pada suatu elemen di dalam html. Di dalam kasus yang saya akan bahas kali ini saya akan mencoba salah satu metode yang ada di classList yaitu metode add (). Berikut adalah langkahlangkah Cara Menambahkan Class Menggunakan Javascript: Pertama teman-teman buka text editor teman-teman dan ketikan kode html di bawah ini: <!DOCTYPE html> <html> <head> <title>addClass</title> <style type="text/css"> .aqua { background: aqua; } </style> </head> <body> <p class="contoh aqua">Elemen dengan class "contoh dan aqua"</p><!--Elemen yang sudah di beri dua class--> <p class="contoh">Elemen yang memiliki class "contoh" saja</p><!--Elemen yang akan di tambahkan class aqua--> <button id="btn">Tambahkan class aqua</button><!-- Untuk memproses kode javascript-->
Dasar-Dasar Perangkat Lunak dan GIM 233 </body> </html> Keterangan sudah berada dalam commenting di tag html di atas. Coba teman-teman jalankan di browser teman-teman, maka akan tampil seperti gambar di bawah ini: Kedua, teman-teman tuliskan kode javascript di bawah tag button, dan berikut kodenya: <script> var element = document.getElementById("btn"); var paragraf = document.querySelectorAll(".contoh"); element.onclick = function(){ paragraf[1].classList.add("aqua");} </script> Penjelasan kode javascript di atas: variabel element: berfungsi untuk mengambil id dari button untuk proses onclick. variabel paragraf: untuk menyeleksi semua class. Contoh yang berada di elemen p paragraph [1].classList.add(“aqua”): berfungsi untuk memilih paragraf mana yang akan kita tambahkan class aqua. karena kita hanya memiliki dua elemen maka elemen 1 atau paragraf kedualah yang akan kita tambahkan class. Setelah selesai mengetikkan kode javascript di atas, coba teman-teman refresh file html yang ada di browser tadi lalu klik buttonnya, maka elemen 1 atau paragraf kedua akan
Cita Puspitasari, S.Pd dan Renita, S.Kom. 234 terkena efek dari class aqua: Bagaimana teman-teman, cukup mudahkan menambahkan class menggunakan Javascript? Dengan javascript kita bisa dengan mudah menambahkan class pada elemen yang kita inginkan. b. Objek pada Javascript Apa itu objek di Javascript dan bagimana cara membuatnya? Objek sebenarnya adalah sebuah variabel yang menyimpan nilai (properti) dan fungsi (method). Contoh objek mobil: Bagaimana cara kita memodelkan mobil ini di dalam kode program? Bisa saja seperti ini: var car = "Mobil Fiat";
Dasar-Dasar Perangkat Lunak dan GIM 235 Tapi variabel car hanya akan menyimpan nama mobil saja. Karena itu, kita harus menggunakan objek. Objek pada javascript, dapat dibuat dengan tanda kurung kurawal dengan isi berupa key dan value. Contoh: Kode di atas bisa juga ditulis seperti ini: var car = { type:"Fiat", model:"500", color:"white"}; Apa Perbedaan Properti dan Method? Pada contoh di atas, kita baru hanya membuat properti saja. Properti adalah ciri khas dari objek (variabel). Sedangkan method adalah perilaku dari objek (fungsi). Lalu bagaimana cara membuat method di dalam objek? Method dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi. Contoh: var car = { // properti type: "Fiat", model: "500", color: "white", // method
Cita Puspitasari, S.Pd dan Renita, S.Kom. 236 start: function(){ console.log("ini method start");}, drive: function(){ console.log("ini method drive");}, brake: function(){ console.log("ini method brake");}, stop: function(){ console.log("ini method stop");}}; Cara Mengakses Properti dan Method Objek Kita sudah tahu cara membuat objek, lalu pertanyaanya: Bagaimana cara mengakses properti dan method dari objek? Caranya menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method. Contoh: console.log(car.type); console.log(car.color); car.start(); car.drive(); perhatikan car.type, car.color, car.start(), dan car.drive()!
Dasar-Dasar Perangkat Lunak dan GIM 237 Untuk mengakses properti, kita cukup gunakan nama objek properti. Sedangkan untuk method, kita harus menggunakan tanda kurung. Ini menyatakan kalau kita ingin mengeksekusi fungsi. Menggunakan Keyword this Kata kunci this digunakan untuk mengakses properti dan method dari dalam method (objek). Contoh: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Belajar Objek Javascript</title> <script>
Cita Puspitasari, S.Pd dan Renita, S.Kom. 238 var person = { firstName: "Muhar", lastName: "Dian", showName: function(){ alert(`Nama: ${this.firstName} ${this.lastName}`); } }; person.showName(); </script> </head> <body> Hasilnya: Kata kunci this pada contoh di atas akan mengacu pada objek person. Membuat Class Objek dengan this Pada pemrograman berorientasikan objek, kita biasanya membuat objek dengan membuat instance dari class.
Dasar-Dasar Perangkat Lunak dan GIM 239 Akan tetapi pada contoh-contoh di atas, kita membuat objeknya secara langsung. Lalu bagaimana kalau kita inign membuat objek yang lain dengan properti yang sama. Bisa saja dibuat dua seperti ini: var person = { firstName: "Muhar", lastName: "Dian", showName: function(){ alert(`Nama: ${this.firstName} ${this.lastName}`); } }; var person2 = { firstName: "Petani", lastName: "Kode", showName: function(){ alert(`Nama: ${this.firstName} ${this.lastName}`); } }; Ini tentu tidak efektif, jika kita ingin membuat banyak objek. Karena kita harus menulis ulang kode yang sama. Solusinya kita bisa gunakan class. Pada Javascript versi ES5, class belum ada. Fitur ini baru ditambahkan pada Javascript versi ES6. Pada ES5, kita bisa membuat class dengan fungsi. Lalu di dalamnya menggunakan kata kunci this. Contoh: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Belajar Objek Javascript</title>
Cita Puspitasari, S.Pd dan Renita, S.Kom. 240 <script> function Person(firstName, lastName){ // properti this.firstName = firstName; this.lastName = lastName; // method this.fullName = function(){ return `${this.firstName} ${this.lastName}` } this.showName = function(){ document.write(this.fullName()); } } var person1 = new Person("Muhar", "Dian"); var person2 = new Person("Petani", "Kode"); person1.showName(); document.write("<br>"); person2.showName(); </script> </head> <body> Hasilnya: