Pada hari Sabtu, tanggal 15 Februari 2020, pengurus Komunitas Surabayadev sejumlah kurang lebih 10 orang mengadakan kegiatan belajar bersama di Dilo Surabaya yang terletak di AJBS Surabaya.

Kegiatan ini merupakan kegiatan rutin yang diadakan oleh komunitas Surabayadev untuk meningkatkan skill masing-masing pengurus. Sebelumnya komunitas Surabayadev juga mengadakan kegiatan belajar bersama dengan materi UI UX.

Kenapa Surabayadev Belajar JavaScript?

Selama bertahun-tahun berturut-turut, JavaScript adalah bahasa pemrograman yang paling dicari dan tumbuh cepat. JavaScript merupakan salah satu pilihan paling tepat dalam pengembangan antarmuka web interaktif karena didukung oleh semua browser modern.

Seperti yang ditunjukkan oleh survei tahunan yang diadakan oleh Stack Overflow, sekitar 70 persen dari 72.525 Software Developer profesional menyatakan mereka menggunakan JavaScript. Selain itu, ini adalah salah satu bahasa yang paling dicari yang berarti bahwa 17,8% responden belum menggunakannya tetapi ingin mempelajarinya.

survei tahunan yang diadakan oleh Stack Overflow

Menurut data yang diberikan oleh stackshare.io, lebih dari 10400 perusahaan di seluruh dunia menggunakan JavaScript di techstack yang mereka gunakan, diantaranya adalah Facebook, Linkedin, AirBnb, dll.

Perusahaan yang menggunakan JavaScript

Begitulah kawan, JavaScript itu keren, dan oleh sebab itu Pengurus SurabayaDev ingin meningkatkan skill programming JavaScript dipandu oleh Antoni dan Arryangga.

Inti Acara Belajar JavaScript Hari ini

Materi yang dibawakan oleh Arryangga dan Antoni

Kegiatan belajar bersama kali ini berlangsung dari pukul 10.00 hinggal 17.00, cukup lama namun seru. Hal yang dipelajari oleh para pengurus Surabayadev diantaranya adalah:

  1. Apa itu front end?
  2. JavaScript Basic
    • Tipe Data
    • Array & Object Properties (Loop & Iteration)
    • DOM Manipulation
    • Events & Event Handling
    • LocalStorage
    • Fetch API
  3. Live Practice (Coding & Deploy) TODO List App dengan Vanilla JS

Source code tersedia di Github: https://github.com/surabayadev/todolist-vanillajs
(Jangan lupa di ⭐ star juga ya ?)

Antoni dan Arryangga Sedang mengajar JavaScript

Seperti yang sebelumnya, sesi akhir dari acara ini ditutup dengan diskusi langsung, setiap individu dapat memberikan pertanyaan kepada Arryangga dan Antoni, serta review acara hari ini.

Dan setelah itu masuk kepada ritual intinya yang tidak boleh ketinggalan sama sekali, foto bareng:

Foto bersama Arryangga dan Antoni di Surabayadev

Jika kita berselancar di dunia maya, kita sering menjumpai berbagai macam tipe file dokumen, seperti audio, picture, pdf, ppt, docx, dan lain sebagainya. Sebagai pelajar atau mahasiswa pasti sangat sering menemukan dokumen tersebut jika sedang mencari tugas di internet.

Orang-orang dapat menemukan file tersebut tidak lain karena sumbangsih dari  para author di Internet yang melakukan upload dokumen. Dokumen tersebut sejatinya hanya bisa di download, namun ada cara agar para penjelajah internet dapat menikmatnya tanpa harus melakukan download terlebih dahulu.

Nah, pada artikel ini, akan dibahas cara untuk menampilkan PDF tanpa JavaScript di Browser

Html Object element

Pada HTML, mungkin tidak banyak dari kita yang mengetahui sebuah element <object> , dengan adanya element <object> ini, kita dapat menanamkan (embed) file PDF yang kita miliki ke dalam HTML tanpa pustaka pihak ketiga. Caranya sangat mudah :

  1. Pastikan kita sudah memiliki URL file pdf yang ingin ditampilkan.
  2. Tambahkan attribute type dengan value application/pdf ke object element.
  3. Tambahkan attribute data dengan value URL pdf yang ingin ditampilkan ke object element.
  4. Set height and width sesuai keigininan.
<!DOCTYPE html>
<html>
  <head>
    <title>Embedding pdf</title>
  </head>
  <body>
    <h1>My pdf</h1>
    <object
      type="application/pdf"
      data="URL_pdf_yang_ingin_ditampilkan/sample.pdf"
      width="600"
      height="700"
    >
    </object>
  </body>
</html>

Output - Menampilkan Pdf tanpa JavaScript

Menampilkan PDF pada HTML tanpa JavaScript - 1

Demo

Salah satu hal yang membuat saya aneh (bukan artian negative) pada JavaScript adalah kita dapat menggunakan variable dan function yang belum di deklarasikan diawal, hal ini biasa disebut dengan Hoisting , coba kita perhatikan kode dibawah ini :

sayHi(); // Output : Hi there!

function sayHi() {
   console.log('Hi there!');
}

Walaupun function sayHi() dipanggil lebih dahulu dibanding dengan pendeklarasiannya, namun kode tersebut diatas akan berjalan normal, dan akan mengeluarkan output "Hi there!" , hal ini juga sama dengan :

function sayHi() {
   console.log('Hi there!');
}

sayHi(); // Output : Hi there!

Hal ini terjadi karena JavaScript masuk kedalam compiled language , oleh karena itu saat kode JavaScript yang sedang diproses, pada iterasi pertama semua variable dan function akan dideklarasikan di awal, sebelum kode di ekseskusi satu persatu. Hal ini mirip seperti saat kita mendeklarasikan variable dan function di awal.

Only declarations are hoisted

JavaScript Hoisting hanya berlaku pada pendeklarasian saja, bukan pada inisialisasi. Jika sebuah variable dideklarasikan dan di inisialisasi setelah digunakan, maka hasilnya akan undefined , contoh :

console.log(num); // Returns undefined 

var num; 

num = 6;

Namun jika kita melakukan pendeklarasian variable setelah digunakan, dan menginisialisasi sebelum digunakan, maka itu akan mereturn value yang di inisialisasi :

num = 6;

console.log(num); // returns 6

var num;

Contoh - contoh lain untuk mendemonstrasikan hoisting :

//Example 1 - Does not hoist
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
//This will not work as JavaScript only hoists declarations

//Example 2 - Hoists
var num1 = 3; //Declare and initialize num1
num2 = 4; //Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2; //Declare num2 for hoisting

//Example 3 - Hoists
a = 'Cran'; //Initialize a
b = 'berry'; //Initialize b
console.log(a + "" + b); // 'Cranberry'
var a, b; //Declare both a & b for hoisting

Hal lain yang harus diperhatikan adalah pendeklarasian sebuah Class tidak dapat di hoisting, kita tidak dapat menggunakan sebuah Class sebelum di deklarasikan :

var john = new Person('John', 'Doe'); //ReferenceError: Person is not defined

class Person {
    constructor(name, surname) {
        this.name = name;
        this.surname = surname;
    }
}

// This good!!
var jane = new Person('Jane', 'Doe'); //No problems here

Jika kalian memiliki masukan, komentar, atau ingin diskusi lebih lanjut, silahkan komentar ya. Terimakasih.