Cara menggunakan javascript reader

Sekali lagi, Adobe telah mengkonfirmasi lubang keamanan raksasa dalam aplikasi Adobe PDF Reader mereka yang buggy, kembung, dan benar-benar tidak aman. Ini juga bukan pertama kalinya — itu seperti rentetan lubang keamanan non-stop dari produk Adobe.

Juga tidak ada aplikasi antivirus yang memeriksa lubang keamanan ini, jadi jangan berpikir Anda aman ... lubang terbaru membutuhkan menonaktifkan Javascript di Adobe Reader, dan untuk melakukan itu, Anda harus menuju ke Edit -> Preferensi, dan kemudian temukan kategori JavaScript di sebelah kiri.

Setelah Anda berada di sana, Anda dapat menonaktifkan JavaScript hanya dengan mencentang kotak "Aktifkan Acrobat JavaScript". Pengaturan ini mungkin lebih aman secara umum, meskipun ini akan sedikit membatasi fungsionalitas.

Alternatif!

Anda juga dapat memperbaiki lubang keamanan dengan mencopot pemasangan Adobe Reader sepenuhnya dan menggunakan alternatif — sesuatu seperti Sumatra PDF, pembaca PDF ringan favorit pribadi saya.

Link

Plus

Send

Pada tutorial sebelumnya mengenai Cara Memasukkan Kode JavaScript ke file HTML, saya meletakkan tag <script> di dalam tag <head>.

Namun sebenarnya di bagian manakah kode JavaScript sebaiknya ditempatkan? Pada tutorial kali ini kita akan bahas tentang Posisi Terbaik Meletakkan Kode JavaScript.

Posisi JavaScript di Dalam Tag <head>

Pada dasarnya, kita bebas ingin meletakkan kode JavaScript di bagian mana saja, selama berada di dalam tag <script>.

Umumnya, tag <script> diletakkan pada awal kode HTML di akhir tag <head>, atau di akhir tag <body>. Posisi peletakan ini akan mempengaruhi bagaimana urutan kode JavaScript berjalan.

Halaman HTML di proses oleh web browser dari atas ke bawah secara berurutan. Aturan ini juga berlaku untuk kode HTML, CSS, dan JavaScript, sehingga kode JavaScript yang ada di dalam tag <head>, akan diproses lebih dahulu dari pada isi dokumen HTML yang terdapat di dalam tag <body>.

Untuk melihat efeknya, silahkan coba kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
 
  <script>
    alert("Hello World!!");
  </script>
   
</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p>Saya sedang belajar JavaScript di duniailkom.com</p>
  <p>Belajar Web Programming di Duniailkom.</p>
</body>
</html>

Contoh ini sama persis dengan praktek yang kita jalankan pada tutorial sebelumnya (Internal JavaScript). Kali ini kita akan fokus ke cara web browser mengeksekusi halaman ini.

Dalam contoh diatas, tag <script> yang berisi kode JavaScript berada di dalam tag <head>. Berikut tampilannya saat dijalankan:

Sebelum kita men-klik tombol OK dari kotak alert, perhatikan tampilan teks HTML di halaman tersebut. Di situ tidak terlihat tulisan apapun, padahal di dalam kode HTML terdapat 2 kalimat di dalam tag <p>. Hanya setelah men-klik tombol OK, barulah teks tersebut bisa terlihat.

Ini berarti jika kode JavaScript diletakkan pada tag <head>, kode tersebut akan diproses sebelum konten web yang ada di dalam tag <body>.

Posisi peletakan JavaScript diawal seperti ini bisa mendatangkan masalah. Berikut contoh kasusnya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 

  <script>
    let a = document.getElementById("div_semangat");
    a.innerHTML += "<p>Sedang belajar JavaScript, semangat...!!!</p>";
  </script>

</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="div_semangat"></div> 
</body>
</html>

Dalam kode ini saya membuat 2 perintah JavaScript di baris 7-8. Untuk sementara, kode ini tidak perlu dipahami, kita akan bahas dalam tutorial terpisah. Namun inti dari kode tersebut dipakai untuk menambah 1 tag <p> ke dalam element HTML yang memiliki id="div semangat". Tag HTML dengan id="div semangat"merujuk ke sebuah tag div di baris 15.

Ketika dijalankan, tidak ada tambahan kalimat apapun, jadi apa yang terjadi?

Untuk melihat kenapa kalimat tersebut tidak tampil, kita bisa cek pesan error JavaScript dari tab console Developer Tools. Tutorialnya pernah dibahas pada Cara Menampilkan Pesan Error JavaScript. Berikut pesan error yang tampil:

Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')

Error ini berisi penjelasan bahwa JavaScript tidak bisa membaca property innerHTML dari sebuah nilai null. Dalam JavaScript, null merupakan tipe data khusus yang berarti ‘tidak ada data’.

Ini terjadi karena pada saat kode JavaScript di eksekusi, tag div masih belum tersedia dan belum sempat diproses. Salah satu solusi dari masalah ini adalah dengan memindahkan tag <script> ke akhir tag <body>.

Posisi JavaScript di Akhir Tag <body>

Untuk mengatasi masalah urutan eksekusi, mayoritas programmer lebih memilih meletakkan kode JavaScript di akhir tag <body>. Tujuannya agar memastikan seluruh tag HTML sudah tampil dan siap dimanipulasi dari JavaScript.

Sebagai pembuktian, mari kita pindahkan posisi tag <script> ke akhir tag <body>:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="div_semangat"></div> 

  <script>
    let a = document.getElementById("div_semangat");
    a.innerHTML += "<p>Sedang belajar JavaScript, semangat...!!!</p>";
  </script>

</body>
</html>

Hasilnya, kalimat “Sedang Belajar JavaScript, Semangat…!!!” sukses ditampilkan ke dalam web browser.

Saat ini mayoritas programmer lebih menyarankan meletakkan kode JavaScript di akhir tag<body> seperti ini. Selain bisa mengatasi contoh masalah kita diatas, hal tersebut juga untuk menghindari terjadinya render blocking JavaScript.

Render blocking JavaScript adalah proses tertundanya loading halaman web karena web browser sibuk mengeksekusi kode program JavaScript.

Seperti yang sudah kita bahas, web browser mengeksekusi kode program secara berurutan dari atas ke bawah. Dengan menempatkan kode JavaScript di akhir tag <body>, user sudah bisa melihat tampilan halaman web terlebih dahulu sembari kode JavaScript di eksekusi web browser.

Sebenarnya terdapat berbagai teknik lain untuk mengatasi masalah render blocking JavaScript, yang salah satunya menggunakan atribut async dan defer. Namun karena materi tersebut sedikit advanced dan penjelasannya cukup panjang, saya siapkan di buku JavaScript Uncover.

Dalam tutorial berikutnya, kita akan bahas tentang bagaimana Cara Menampilkan Hasil Program JavaScript.

Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke: JavaScript Uncover – Panduan Belajar JavaScript.