Belajar JavaScript Kode Dasar Untuk Pemula Tahap 1

  • 5 min read
  • May 29, 2020
Dasar
Hosting Unlimited Indonesia

Belajar dasar JavaScript. Sebuah bahasa pemrograman yang sangat sangat diperlukan untuk menjadi web front end. Bahkan perkembangan kode JavaScript, menjadikan bahasa ini juga diperlukan untuk web back end. Contoh JavaScript untuk back end adalah Node.js, Express.js, Angular.js, dan lain-lain. Kita bahkan dapat membuat aplikasi seluler dengan JavaScript. Yakni dengan perantara Framework, sepeti Phonegap dan React Native.

Berbagai kelebihan tersebut menjadikan JavaScript expert sangat dicari cari di dunia IT (Information Technology). Untuk belajar JavaScript, sangatlah mudah. Kamu bisa dapatkan materi pada buku-buku konvensional, atau ebook. Terdapat pula banyak coding bootcamp, untuk mempelajari Full Stack JavaScript. Sebut saja seperti Arkademy, Hacktiv8, Devschool.id, dumbways.id, berproyek ISA (Income Sharing Agreements).

Sebelum bermimpi untuk menjadi JavaScript expert, maka langkah awal yang harus dilakukan adalah memahami dasar. Mari belajar dasar-dasar JavaScript di sini.

Pengertian JavaSript

Merupakan bahasa pemrorgaman website untuk membuat interaksi pada elemen HTMLTermasuk ke dalam jenis client side programming, seperti halnya HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets). Namun, JavaScript terbaru juga dapat bertindak sebagai side server programming. Memiliki fitur yang dinamis dan tidak bertipe, serta dapat diproses secara interpreted.

Bahasa ini menggunakan standar spesifiasi ECMAScriptJavaScript dapat digunakan langsung pada file HTML atau disimpan pada file terpisah lalu dipanggil. Nantinya dasar-dasar kamu tentang JavaScript akan dipertebal dengan artikel sejarah JavaScript yang akan admin bahas kemudian hari.

Berikut adalah contoh kode dasar JavaScript;

Belajar dasar menjalankan JavaScript

Ada tiga cara yang dapat digunakan untuk menjalankan JavaScript. Yakni inline, internal dan external. Sebagai informasi, admin menggunakan HTMLPad 2016 sebagai text editor dalam materi ini. Text editor inilah yang admin gunakan untuk memberikan materi lain, tentang HTML, CSS, PHP.

Panduan yang admin gunakan merekomendasikan Komodo Edit, sebagai text editor. Hanya saja admin lebih terbiasa menggunakan HTMLPad 2016.

Konten dasar HTMLPad2016 LautanIT
Konten HTMLPad 2016 lautanit

Google Chrome jadi web browser andalan admin untuk semua materi koding HTML, CSS, JavaScript, dan PHPPenulisan JavaSript memiliki sifat yang berbeda dengan HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets). Bila HTML dan CSS bersifat case insensitive, maka JavaScript bersifat case sensitive. Penulisan huruf besar dan kecil akan berbeda dampaknya.

Inline JavaScript

Inline JavaScript, menempatkan kode JavaScript secara langsung menjadi atribut pada tag HTMLPerhatikan contoh koding dibawah ini..

Koding Inline JavaScript

Kode JavaScript yang terdapat pada skrip di atas adalah onclick. Onclick adalah kode JavaScript untuk event. Dan berikut adalah skrip/koding di atas..(simpan terlebih dahulu, ekstensi .html)

Konten dasar JavaScript LautanIT
Hasil inline JavaScript

Internal JavaScript

Internal JavaScript adalah bentuk penulisan kode JavaScript diletakkan diantara tag <script></script>.  Berikut adalah contoh dari internal JavaScript;

Skrip di atas menempatkan tag <script> tepat di atas </body>. Sebenarnya kita juga menempatkannya di antara tag <head></head>.  Penulisan seperti ini juga ditemukan pada website W3Schools.com. Peletakkan tag <script> baik di atas </body> atau di antara <head></head>, tidak banyak mempengaruhi performa program.

Tetapi, apabila di dalam file HTML terdapat 2 atau 3 internal JavaScript, maka script yang lebih dulu dijalankan web browser adalah yang paling atas. Kode kode dibawahnya, sampai HTML sekalipun tidak akan diproses. Mari kita buktikan..

Berikut adalah hasilnya..

dasar
Hasil urutan internal JavaScript

Terdapat pula fakta baru dari hasil percobaan yang admin lakukan. Kode JavaScript, lebih dulu dibaca dari pada kode HTML (Hypertext Markup Language). Kode JavaScript lebih yang pertama kali dibaca oleh web browser adalah kode JavaScript di atas tag </head>. Akan tercetak di Google Chrome sebagai peringatan dengan teks LautanIT.

Ketika peringatan tersebut di OK kan, maka akan beralih pada kode JavaScript kedua. Yakni tepat di bawah tag <body> (setelah heading pertama). Tulisan yang muncul adalah “semua ada di sini”. Sedangkan kalimat heading 1 Is The Best tidak muncul. Kata itu baru akan muncul ketika kita sudah meng OK kan peringatan.

Begitu seterusnya. Bagaimana cara kode JavaScript dan HTML tampil bersamaan, dan mengatur urutan tampil sesuai kehendak kita?.

Baca terus artikel ini

External JavaScript

Mode penulisan ini dapat dilalui dengan 2 file. Satu sebagai pemanggil dan yang satu sebagai yang dipanggil. Jelas bahwa file yang di panggil ber ekstensi .js dan pemanggil ber ektensi .html. Mari kita coba…

Langkah pertama, buat file berisikan kode JavaScript, lalu simpan dengan nama sesuka kamu, dan beri ekstensi .js. Admin menyimpannya dengan nama dipanggil.js

Contoh;

Langkah kedua, buat file pemanggil berektensi .html. Kita dapat memanggil file dipanggil.js dengan bantuan tag script ber atribut src. Src merupakan inisial dari source. Yang berarti sumber. Lihatlah skrip di bawah ini

Simpan pada folder yang sama. Berikut adalah hasilnya; (teks akan tampil setelah tombol OK di klik)

dasar
Hasil external JavaScript

Selain ketiga cara diatas ada 2 cara lagi dalam menuliskan kode JavaScript, yakni dengan memasukkannya sebagai value dari atribut href pada tag anchor.

Ketika link klik sini di klik maka alert akan muncul. Cara lainnya adalah dengan menulis kode JavaScript di address bar web browser.  2 cara terakhir ini sudah ditinggalkan.

Manakah yang terbaik ?

Semua jenis penulisan memiliki kelebihan dan kekurangan masing-masing. Namun banyak dari expert untuk menyarankan penggunaan external JavaScript. Alasannya kamu dapat mengatur 1000 halaman hanya dengan menulis satu file JavaScript.

Atribut JavaScript yang harus diingat

HTML5 menghadirkan solusi untuk programmer yang menginginkan kode-kode JavaScript untuk diproses bersamaan dengan kode HTML. Ataupun memungkinkan untuk memilih kode JavaScript yang mau dijalankan pertama kali.

Solusi itu berupa atribut async dan defer.

Atribut async

Atribut ini memungkinkah web browser untuk memproses kode JavaScript dengan HTML secara simultan. Kita contohkan pada bentuk external JavaScript dengan kodenya yang menyesuaikan.

Hasilnya teks www… akan tampil bersamaan dengan kode JavaScript. Lalu bagaimana jika kita menggunakan gaya internal JavaScript. Akankah bisa dilakukan ?, kita coba lagi, dengan skrip internal JavaScript.

Dari percobaan yang admin lakukan, atribut async tidak bekerja pada model internal JavaScript. Kamu dapat melihat hasilnya dengan melakukan percobaan mandiri. Mungkin kamu ingin mencobanya pada inline JavaScript.

Kegunaan atribut ini lebih jelas terlihat, ketika kita dalam keadaan online mengakses suatu website. Kamu pasti sering melihat halaman website seperti sedang loading. Hanya menampilkan sebagian dari konten, sebelum bagian yang lain muncul. Contoh;

dasar
Contoh penggunaan async

Bukti nyata dapat dilihat dengan melalui melihat source BukaLapak. Tekan tombol Ctrl + U, secara bersamaan saat membuka BukaLapak. Dan benar saja, atribut async digunakan, namun ditulis dalam gaya yang berbeda.

dasar
Async Bukalapak

Soal kecepatan web browser mengakses file JavaScript, tergantung pada ukuran file, server dan kecepatan internet yang digunakan.

Atribut defer

Atribut memungkinkan kamu untuk kapan sebuah file JavaScript dijalankan. Sama seperti atribut asyncdefer hanya akan bekerja pada model external JavaScript. Untuk gambaran lebih jelas, kamu bisa ikuti perintah di bawah ini

Buat file ekstensi .js dengan skrip seperti di bawah

Buat file ekstensi HTML untuk memanggil file JavaScript tadi.

Cobalah terlebih dahulu skrip diatas, ingat file yang dipanggil dan pemanggil dalam satu folder.

dasar
Hasil tanpa defer

Mau berapa kali tombol Klik sini diklik, maka tidak akan terjadi apa-apa. Hal ini dikarenakan kode JavaScript dijalankan terlebih dahulu, bukan setelah tombol Klik sini di klik. Untuk merubahnya tinggal tambahkan atribut defer pada tag script.

Dan hasilnya, teks LautanIT akan muncul ketika tombol diklik.

Alat bantu belajar JavaScript

Teman-teman admin yang hobi ngoding mengatakan bahwa JavaScript adalah bahasa pemrograman yang paling rumit. Dikarenakan tidak adanya sistem default untuk melihat kesalahan koding. Sama seperti HTML(Hypertext Markup Language) dan CSS (Cascading Style Sheets). Namun hal itu dapat diakali dengan text editor yang mempunyai fitur error checking.

Tapi kita juga menggunakan web developer tools pada web browser bila teks editor berupa notepad jadul. Cara mengaksesnya cukup dengan kombinasi tombol Ctrl+Shift+i.

dasar
Web developer tools

Tab Inspector digunakan untuk menelusuri seluruh kode HTML yang terdapat pada web. Tab Console digunakan untuk menampilkan pesan error.

Kesimpulan

JavaScript adalah bahasa pemrograman website yang sangat dinamis. Bisa digunakan juga sebagai bahasa aplikasi mobile dengan bantuan framework. Memiliki 3 cara penulisan, yakni inline, internal, dan external. Masing-masing penulisan memiliki kelebihan dan kekurangan, namun external lebih banyak disarankan oleh expert. 2 atribut penting dalam JavaScript adalah async dan defer. Berguna untuk mengatur proses dan waktu munculnya kode JavaScript.  Semangat belajar dasar-dasar bahasa JavaScript

sumber : di bawah

Pratama, Andre. 2017. JavaScript Uncover Panduan Belajar JavaScript untuk Pemula.Padang Panjang : www.duniailkom.com

petanikode.com, w3schools.com

Hosting Unlimited Indonesia
Related Post :

Leave a Reply

Your email address will not be published. Required fields are marked *