Mempelajari Dasar Penulisan pada Javascript

Pada materi sebelumnya, kita telah mempelajari mengenai CSS Membuat Background Fullscreen dengan CSS dimana file css diincludekan di dalam index.html dengan cara memanggil class dan id sehingga output yang dihasilkan pada web browser lebih berwarna dan ciamik. Kali ini kita akan berkenalan dengan javascript. apa itu javascript ? skrip jawa ? jelas bukan itu istilahnya, javascript merupakan salah satu bahasa pemrograman yang sangat penting untuk dipelajari dan dipahami karena javascript akan sering digunakan khususnya pada bagian front-end (bagian depan) website bersamaan dengan html dan css. Jika html adalah kerangkanya website, css adalah properti / desainnya, maka javascript merupakan fungsi / kontrol dari website tersebut. Jadi, javascript dapat membuat tampilan website menjadi lebih interaktif dan dinamis.

Javascript adalah bahasa pemrograman yang bekerja pada client-side. client-side yang dimaksud adalah pemrograman ini bekerja pada sisi client, yang hanya dapat dijalankan melalui browser. Javascript biasanya dijalankan ketika ada suatu event tertentu yang terjadi pada halaman web dan event terjadi dikarenakan adanya perubahan halaman website. Javascript merupakan bahasa pemrograman yang paling populer saat ini, hal itu dapat dibuktikan dengan adanya framework javascript seperti NodeJS, Jquery, AngularJS, ReactJS, VueJS, dll yang menjadi andalan para developer dalam mengembangkan websitenya agar terlihat lebih powerfull dan modern. Wah hebat juga javascript ini.

Para tutorial kali ini, saya akan membahas bagaimana mempelajari penulisan dalam pemrograman javascript. kita akan mempratekkan penulisan script sekaligus hasil output dari pemrograman javascript melalui web browser.

Sekilas Info


  • Sebelum mempraktekkan tutorial yang akan dibahas, pastikan anda telah membuka text editor. Saya menyarankan anda menggunakan Visual Studio Code, karena sangat user friendly.
  • Buat folder baru untuk mempraktekkan tutorial ini, misal Belajar HTML, belajarkoding dll (bebas sesuai keinginan).
    Hal ini bertujuan agar kita dapat meletakkan file yang dipraktekkan sehingga terlihat rapih dan terstruktur serta demi kenyamanan dalam mempelajari pemrograman.
  • Praktekkan setiap baris kodenya, jangan dicopas.
    Hal ini bertujuan agar teman-teman dapat melatih kemampuan mengetik koding dan memahami setiap fungsi/kegunaan dari koding.

  1. Buatlah sebuah file bernama index3.html. Letakkan pada folder yang telah dibuat sebelumnya.
  2. Tulislah syntax berikut.
  3. Buat dua buah file bernama index4.html dan script.js kemudian tempatkan di folder yang sama
  4. Masukkan syntax berikut pada index4.html
  5. Masukkan syntax berikut pada script.js
  6. Simpan kedua file tersebut. kemudian buka 2 file (index3.thml dan index4.html) pada browser untuk melihat hasil outputnya.

Penjelasan Tutorial


HTML
Nama Tag Attribut Keterangan / Fungsi
<!DOCTYPE html> DOCTYPE : suatu deklarasi yang digunakan untuk mengidentifikasi jenis dokumen HTML.
type html yang digunakan pada tutorial ini adalah HTML5.
<script> type=”text/javascript” tag html yang berfungsi untuk membuat javascript / menyisipkan file javascript (ex : script.js).
<meta> http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ Memberikan informasi mengenai halaman html yang saat ini sedang digunakan.
http-equiv : merefresh halaman web secara otomatis.
content : isi dokumen meliputi jenisnya (html) dan karakter yang didukung (UTF-8).
UTF-8 adalah Unicode Transformation Format-8.
maksud dari kode tersebut adalah kode HTML yang diinput meliputi semua karakter yang ada hingga saat ini
<button> id=”submit” onclick=”halo_dunia()” tag html yang berfungsi untuk membuat tombol.
onclick : event-handler yang digunakan ketika tombol diklik.

Event-handler : kode program yang berfungsi mengatur dan mengetahui penggunaan kontroller
Javascript
Properti Keterangan / Fungsi
var Membuat variabel
function Membuat Fungsi yang berisikan syntax javascript.
document.getElementById Mengakses element DOM berdasarkan nilai properti id pada elemen
innerHTML Atribut didalam objek elemen HTML yang digunakan untuk mengisi konten berupa string html
alert Membuat sebuah kotak dialog berupa peringatan kepada user setiap kali mengunjungi situs website dan
biasanya muncul pertama kali membuka halaman tersebut.
Dapat disimpulkan bahwa javascript sangat interaktif dan menjadi pelengkap dalam pembuatan front-end suatu website. maka tidaklah heran jika javascript ini sangat wajib diterapkan, dan perlunya mempelajari penulisan dasar pemrogramannya agar nantinya dalam menggunakan framework javascript semakin terbiasa dan mudah. Akan banyak lagi materi javascript yang dipelajari, maka dari itu stay terus di situs ini dan jika kalian belum berhasil mempratekkan diatas, kalian dapat mempraktekkan melalui video berikut ini.

Leave a Reply

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