Latihan Dasar Programming Multimedia - Simple JavaScript Slideshow in 5 Minutes 1

Simple JavaScript Slideshow in 5 Minutes

1. Tujuan 

Belajar Programming Multimedia dengan melakukan beberapa tutorial. 

2. Alat 

• Visual Studio Code  
• Browser (​Chrome​ / ​Firefox​) 

3. Bahan 

(Tanpa bahan) 

4. Dasar Teori

Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.

javascript berfungsi membuat sebuah halaman website lebih interaktif dan dinamis. Penggunaan kode javascript sangat dibutuhkan untuk website-website yang berorientasi pada kenyamanan pengakses (user-experience). Namun, penggunaan kode javascript ini tidak akan maksimal jika tidak dibarengi dengan penggunaan css karena javascript juga tidak akan lepas dari html.

1. HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.
2. CSS: Menentukan layout, style, serta keselarasan halaman website.
3. JavaScript: Menyempurnakan tampilan dan sistem halaman web.

5. Tugas Praktikum 

Praktekkan 3 tutorial dari beberapa tutorial yang disediakan. 

Jika Tugas Akhir yang dikerjakan memiliki korelasi dengan mata kuliah ini, maka tugas  praktikum diganti dengan progress Tugas Akhir. Korelasi mata kuliah ditentukan oleh dosen. 

6. Petunjuk Praktikum 

1. Pilih 3 tutorial dari beberapa tutorial yang disediakan  

2. Praktekkan tutorial tersebut dalam waktu maksimal sebelum UTS  

3. Jika ada sisa waktu, boleh menambah 1 atau lebih tutorial yang disukai di luar tutorial  yang disediakan 

Berikut adalah daftar tutorial yang disediakan: 

Video / Webcam 

1. Build a Webcam Filter & Picture App With WebRTC & Canvas 
2. How to Take Picture From Webcam in Javascript Using Webcam.js | Webcam Capture in  Javascript
3. 11.8: Video Effects with Seriously.js - p5.js Tutorial
4. Create A Custom HTML5 Video Player
5. Custom HTML5 Video Player - #JavaScript30 11/30
6. Custom Video Player | CSS - JavaScript Tutorial
7. Teachable Machine  

Image 

8. Image Filters in JS | JavaScript Tutorials | Web Development Tutorials
9. ​CamanJS - Build An Image Filter Web App
10. JAVASCRIPT Grayscale filter script
11. 360° Image Panorama View using HTML,CSS and Javascript 

Gallery / Slideshow / Slider 

12. Portfolio Gallery Filter in Javascript
13. Simple JavaScript Slideshow In 5 Minutes
14. How To Create a Slider or Carousel in Minutes Using Glide.js
15. Responsive Touch Slider Using Html CSS & Swiper.js - 3D Responsive Slider Using  Swiper.js 

Audio 

16. Custom Audio Player | CSS - JavaScript Tutorial
17. How to Play Audio with JavaScript
18. HTML - Audio Playlist 

Animation 

19. Let's animate like Apple using GSAP and ScrollMagic for beginners - PART 1
20. Animated Page Transitions Tutorial: SERIES 2 - Barba JS and GSAP - PART 1
21. Creating Page Transition Animations EASILY with Swup
22. JavaScript Animation Tutorial with Anime.js 
23. Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial 
24. Text Typing Effects By Using JavaScript
25.Text Animation using jquery plugin textillate - Advanced Technology
26. Learn Web Animation 

AR / VR / MR / XR / ... 

27. Easily code a virtual reality web experience with A-Frame (WebVR)
28.Augmented Reality with A-Frame
29. Easy Augmented Reality (AR) With JavaScript | AR.js | A-Frame
30. Augmented Reality in 10 lines of HTML 

7. Hasil Praktikum
https://www.youtube.com/watch?v=4YQ4svkETS0
  

Pengerjaan di Visual Studio Code

Hasil

8. Kesimpulan

Pada praktikum kali ini dapat disimpulkan bahwa kita dapat membuat slide show dengan mudah dengan menggunakan bahasa Javascript. kesulitan yang saya alami yaitu kurang teliti pada saat mengerjakan, sehingga gambar tidak muncul. 

9. Referensi

https://www.devaradise.com/id/2014/11/pengertianl-apa-itu-javascript-manfaat-cara-kerja.html

https://www.hostinger.co.id/tutorial/apa-itu-javascript/