Pemasangan JavaScript di HTML

Setelah struktur dari HTML terbuat maka untuk membuat halaman menjadi lebih interaktif dapat dilakukan pemasangan JavaScript. Secara sederhana ada 2 fungsi yang biasa digunakan, yaitu .value dan .innerHTML. Cara kerjanya adalah client akan memberikan inputan, kemudian inputan itu akan dibawa oleh syntax .value dengan id tertentu, selanjutnya nilai tersebut akan diolah di dalam JavaScript. Setelah hasil didapatkan dari JavaScript maka akan disisipkan ke tag yang ada di HTML dengan syntax .innerHTML dengan id tertentu. JavaScript bekerja di sisi pengguna atau client side. Hal ini memungkinkan JavaScript di sisipkan di dokumen HTML.

Seperti bahasa pemrograman kebanyakan, di JavaScript juga teradapat aturan untuk menulis variabel, yaitu dimulai dengan huruf atau underscore (_), tidak dapat mengandung spasi (white space), nama variabel yang terdiri atas dua kata dibuat camelCase, dan tidak dapat mengandung karakter spesial ( seperti @). Di ES6 tidak direkomendasikan menggunakan var karena adanya hoisting atau penulisan nilai sebelum pendeklarasian variabel. Sebagai gantinya lebih direkomendasikan penggunaan let atau const.

Sekarang akan coba diterapkan pada struktur HTML yang sudah dibuat sebelumnya. Pada kasus ini akan dipasang JavaScript untuk menghitung nilai rata-rata dari matematika, fisika, dan kimia. Ikuti langkah di bawah:

Perhatikan pada syntax di bawah pada file HTML yang sudah dibuat sebelumnya:

<label>Masukan nilai matematika</label>
<input type="text"><br>
<label>Masukan nilai fisika</label>
<input type="text"><br>
<label>Masukan nilai biologi</label>
<input type="text"><br>
<input type="button" value="Rata-Rata" >

Kemudian berikan id pada setiap input untuk dapat diambil nilainya nanti, perhatikan kode di bawah:

<label>Masukan nilai matematika</label>
<input type="text" id="matematika"><br>
<label>Masukan nilai fisika</label>
<input type="text" id="fisika"><br>
<label>Masukan nilai biologi</label>
<input type="text" id="biologi"><br>
<input type="button" value="Rata-Rata" id="rataan">

Di atas tag </body> buat tag baru yaitu <script></script>
Sekarang akan diambil trigger dari button jika ditekan oleh client, gunakan syntax di bawah:

let button = document.getElementById("rataan")
function rumus (){
}
button.addEventListener("click", rumus)

Sekarang fokus pada pembuatan function dengan nama rumus ()
Ambil setiap nilai yang diinput oleh client pada kolom matematika, fisika, dan biologi sesui id yang ditetapkan, perhatikan syntax di bawah:

let button = document.getElementById("rataan")
function rumus (){
let matematika = document.getElementById("matematika").value
let fisika = document.getElementById("fisika").value
let biologi = document.getElementById("biologi").value
}
button.addEventListener("click", rumus)

Buat rumus rata-rata di bawahnya, perhatikan syntax:

let button = document.getElementById("rataan")
function rumus (){
let matematika = document.getElementById("matematika").value
let fisika = document.getElementById("fisika").value
let biologi = document.getElementById("biologi").value
let rataan = (Number(matematika)+Number(fisika)+Number(biologi))/3
}
button.addEventListener("click", rumus)

Kemudian hasil yang ditampung pada variabel rataan akan di sisipkan di file HTML dengan id="hasil", perhatikan syntax di bawah:

let button = document.getElementById("rataan")
function rumus (){
let matematika = document.getElementById("matematika").value
let fisika = document.getElementById("fisika").value
let biologi = document.getElementById("biologi").value
let rataan = (Number(matematika)+Number(fisika)+Number(biologi))/3
document.getElementById("hasil").innerHTML = rataan
}
button.addEventListener("click", rumus)

Untuk menampilkan hasilnya buat sebuah tag kembali di file HTML dengan id="hasil", perhatikan syntax di bawah:

<label>Masukan nilai matematika</label>
<input type="text" id="matematika"><br>
<label>Masukan nilai fisika</label>
<input type="text" id="fisika"><br>
<label>Masukan nilai biologi</label>
<input type="text" id="biologi"><br>
<input type="button" value="Rata-Rata" id="rataan">
<h3 id="hasil"></h3>

Simpan file dan coba jalankan di browser
Pemasangan JavaScript di HTML berhasil!

sumber: anonim

Sederhana cara kerja dari JavaScript yaitu ambil nilai dari HTML yang telah diinput oleh client dengan .value, kemudian olah nilai tersebut dengan aritmetika yang ada di JavaScript, hingga didapatkan hasil yang diharapkan baru dikirim kembali ke file HTML dengan .innerHTML. Untuk mengatur posisi bisa dilakukan denga css flexible box. Walaupun sebelumnya diketahui ada teknik floating di css, tetapi itu tidak cukup praktis karena perlu pengaturan yang detail. Nah, disinilah kelebihan dari flexible box yang memberikan ukuran secara otomatis dan mampu beradaptasi dengan ukuran container. Ada 4 hal yang perlu dipahami, yaitu:

Flex container : elemen yang menampung flex item (div yang menampung div)
Flex grow : pengaturan flex item untuk menyesuaikan ruang container yang kosong
Flex direction : mengubah arah keluarnya flex item (horizontal atau vertikal)
Flex basis : mirip seperti flex grow, hanya saja ukurannya bisa lebih detail (misal dalam %)

Selain DOM atau document object model, JavaScript melakukan pengontrolan website melalui BOM atau browser object model. Untuk menerapkan DOM biasanya digunakan text editor semacam VS Code, sedangankan untuk menerpakan BOM bisa dilakukan langsung melalui browser dengan klik kanan inspect dan pilih tab console. Kembali perlu diingat bahwa document website bekerja dari baris atas ke bawah sehingga urutan proses sangat berpengaruh terhadap berjalan tidaknya konsep DOM dan BOM. Di dalam DOM juga dikenal istilah DOM tree, yaitu struktur yang analog dengan cabang pada batang pohon. Jika ujung dari batang disebut daun maka DOM tree ujungnya disebut node. Nah, front end developer akan banyak bergulat dengan DOM dan BOM untuk membentuk website yang menarik.

Untuk memanfaatkan BOM, seperti mengetahui tipe data dan inputan, bisa menggunakan alert atau prompt atau console.log dengan syntax typeof. Secara default BOM akan menangkap sebuah inputan sebagai string, sehingga jika yang diinput oleh client berupa angka misalnya, maka akan tetap terbaca sebagai string. Untuk mengatasi hal tersebut bisa dilakukan cast atau parse ke tipe data tertentu. Place holder juga bisa dimasukkan ke dalam kotak input pada prompt dengan koma, contohnya prompt('Masukan Nama', 'Misalnya: Jokourno'). Dengan demikian anggota BOM yang perlu diketahui oleh seorang Front End Developer adalah alert, prompt, dan console.

Pemanfaatan DOM menggunakan syntax document. Dengan syntax tersebut sudah bisa didapatkan struktur mulai dari tag HTML, head, body, dst. Nah, document sebagai objek itu memiliki banyak cabang atau node yang akan diakses dengan method seperti id, name, classname, tagname, dan selector. Untuk menyisipkan sesuatu di document bisa digunakan 2 syntax, yaitu .innerHTML (untuk menyisipkan elemen) dan .innerText (untuk menyisipkan teks). Menjadi penting juga bagaimana cara membaca data melalui console yang ada di browser. Misalnya tag h1 yang ada di dokumen berjumlah 4 maka otomatis kalau dipanggil dengan getElementByTagName akan ada 0, 1, 2,3 indeks. Sedangkan untuk mengubah style melalui console di browser bisa menggunakan style.property.

Dengan memanfaatkan inspect atau console yang ada di browser dapat lebih mudah dipahami bagaimana cara kerja dari method appendChild() dan insertBefore(). Metode appendChild() digunakan untuk menambahkan elemen di bagian akhir sebuah elemen, sedangkan insertBefore() digunakan untuk menambahkan elemen di bagian awal sebuah elemen. Kedua method tersebut banyak digunakan untuk proses event tertentu, misalnya saat client mengisi inputan dan mengklik tombol. Di JavaScript sedikitnya ada 5 kategori event, yaitu:

Window events

onload : setelah halaman diunduh
onpageshow : halaman kembali diunduh
onresize : halaman diubah ukurannya

Form events

onreset : ketika client menekan tombol reset
onsubmit : ketika client menekan tombol submit

Keyboard events

onkeydown : ketika client menekan tombol keyboard
onkeypress : ketika client menahan tekanan tombol keyboard
onkeyup : ketika client melepas tekanan tombol keyboard

Clipboard events

oncopy : ketika client melakukan copy
oncut : ketika client melakukan cut
onpaste : ketika client melakukan paste

Mouse events

onclick : ketika client mengklik mouse 1 kali
ondblclick : ketika client mengklik mouse 2 kali berturut-turut
onmouseover : ketika client mengempatkan kursor di atas elemen

Inline event handler secara dasar digunakan untuk mengani event, namun inline event handler memiliki keterbatasan yaitu tidak dapat menambahkan 1 atau lebih fungsi sebagai event handler. Nah, untuk dapat menambahkan 1 atau lebih fungsi sebagai event handler perlu digunakan method addEventListener(). Penggunaan method event tentu tidak lepas dari kekurangan. Bubbling dan capturing menjadi fenomena yang perlu dipahami sebab dapat menimbulkan bug pada berkas HTML. Secara sederhana fenomena bubbling adalah eksekusi dari child menuju parent element sedangkan caputring sebaliknya yaitu dari parent ke child element.

Lebih lanjut perlu diketahui tentang web storage atau penyimpanan di web. Dengan adanya web storage maka memungkinkan web diakses secara offline. Tujuan dari web storage sendiri adalah untuk meminimalkan akses berulang ke database. Ada 2 jenis web storage, yaitu local storage (tidak hilang jika halaman web ditutup) dan session storage (data hilang jika halaman web ditutup). Keduanya baik local storage dan session storage menggunakan method setItem() untuk membuat item sedangkan untuk mendapatkan nilai menggunakan method getItem(). Karena web storage baik itu local maupun session menyimpan data dalam format key-value maka web storage dimungkinkan untuk menyimpan data dalam bentuk JSON. Menyimpan dalam bentuk JSON memerlukan method JSON.parse(). Selain itu terkadang perlu dilakukan pengubahan data objek menjadi string menggunakan method JSON.stringify().

ref:

https://www.w3schools.com/jsref/dom_obj_document.asp

Jokourno

Cari Blog Ini

Pemasangan JavaScript di HTML

Komentar