Hallo semuanya, kali ini kita akan mempraktikan bagaimana sih, contoh implementasi sebuah kode javascript pada webiste. Javascript pada website ibarat simbiosis mutualisme, saling membutuhkan. Website tanpa javascript akan terlihat kurang sedap, dan akan ya statis.
Agar semangat belajar javascript, kali ini saya akan menunjukkan sedikit contoh penggunaan javascript pada website. Silahkan di praktikan, kita mulai sama sama.
Apa yang akan kita buat ?
Sekarang kita akan memperaktikan dasar dari javascript, sebelum kita lanjutkan materi kita lebih lanjut. Kita akan membuat contoh halaman website yang disisipi kode javascript agar tampilannya nampak interaktif.
Langkah Pembuatan
1. Membuat file dengan nama main.js
Pertama kita menyiapkan terlebih dahulu kode javascriptnya seperti dibawah ini, dan kita akan simpan dengan nama main.js. kode tersebut kemudian kita simpan dalam folder dengan nama scripts isi dari kode tersebut yaitu sebagai berikut:
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
function setUserName() {
let myName = prompt('Please enter your name.');
if(!myName || myName === null) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Hello, ' + myName;
}
}
myButton.onclick = function() {
setUserName();
}
Perhatikan kode di atas, fokus pada kode berikut:
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
function setUserName() { ... }
Kode tersebut berfungsi sebagai event yang berfungsi membuat website menjadi lebih interaktif, biasanya kode ini ditempatkan pada (tombol, link atau yang lainnya). Makanya dibawah kode tersebut terdapat kode untuk menampikan tombol.
myButton.onclick = function() {
setUserName();
}
Langkah selanjutnya kita akan membuat index. html.
2. Membuat index.html
Tentunya untuk menjalankan javascript tersbut, kita membutuhkan kode html untuk menjalankannya, untuk itu mari kita buat kode htmlnya.
<script src="scripts/main.js"></script>
Kita tinggal menambahkan kode diatas untuk memanggil main.js yang telah kita buat sebelum kode </body> dalam file index.html .
<!DOCTYPE html>
<html>
<head>
<title> JavaScritp </title>
</head>
<body>
<script src="scripts/main.js"></script>
</body>
</html>
Jika mengikuti langkah di atas, maka kita akan memiliki file dengan susunan sebagai berikut. Di dalam folder scripts kita menyimpan file main.js tadi.
Bila kita jalankan kode nya, maka akan menghasilkan tampilan seperti berikut ini.
Ketika dijalankan mula mula akan muncul tampilan seperti di atas, jika kita klik change user, maka akan memunculkan sebuah PopUp seperti di bawah ini.
Disini kita harus memasukkan nama, jika telah kita masukkan nama, maka akan muncul tampilan seperti di bawah ini.
Silahkan di coba.
3. Menambahkan CSS
Agar lebih meyakinkan lagi, mari kita tambahkan CSS. Untuk menambahkan CSS kita menggunakan cara biasa, yaitu dengan teknik penulisan CSS eksternal. Silahkan berkreasi sendiri dengan kode CSS yang di inginkan. Atau bisa mengikut CSS berikut:html {
font-size: 10px;
font-family: 'Open Sans', sans-serif;
background-color: #00539F;
}
h1 {
font-size: 60px;
text-align: center;
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
p {
font-size :14px;
}
Selanjutnya kode CSS di atas disimpan dalam sebuah folder dengan nama style. Dengan nama file style.css. Jangan lupa menambahkan link untuk memanggil CSS yang telah kita buat pada header index.html agar CSS yang kita buat terbaca.
Bila kita jalankan maka tampilan dari kode yang kit buat tadi, yaitu sebagai berikut:
Terimakasih, silahkan di praktikan sendiri, mungkin masih pada sedikit bingung, karena kita belum pernah pelajari teknik event di atas. Saya sengaja share contoh ini, agar mahasiswa memiliki motivasi untuk belajar JavaScript.
Sekian dulu,
Jangan lupa absen di kolom komentar.
Ahmad Subki
Posting Komentar