Jika Anda pun punya pertanyaan demikian saran saya baca tulisan ini sampai selesai.
Saya pribadi sangat kagum dengan kemampuan Javascript ini.
Nggak mau ketinggalan, saya akan gunakan JS untuk website yang sudah saya buat.
Bagi Anda yang baru saja mempelajari JS, sebaiknya membaca pos sebelumnya tentang pengertian dan penggunaan Javascript untuk Pemula.
Setelah membacanya, Anda akan lebih mendapatkan ilmu yang mendalam tentang dasar-dasar JS.
Postingan ini pun akan nyambung dengan materi-materi sebelumnya.
Sudah membacanya?
Kalau sudah mari kita lanjut terkait pengaruh apa saja yang bisa Javascript berikan untuk website Anda.
Saya merangkumnya dalam 5 hal yang bisa Anda pelajari satu-persatu.
Ini penjelasannya!
1# Javascript Mampu Mengubah Isi Elemen HTML
Kebayang gak yang awalnya script <p>Hello World</p> ketika dijalankan pada browser pasti muncul Hello World.Namun, Anda bisa mengubahnya menjadi Hello, Wildan dengan Javascript. Keren, kan?
Baik, untuk mencobanya silahkan buat file baru bernama js1.html lalu ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Mengubah Isi Elemen HTML dengan Javascript</title>
</head>
<body>
<p id="main">Hello, World</p>
<button type="button" onclick="ubah();">Ubah Isi ELement</button>
<script type="text/javascript">
function ubah() {
var p = document.getElementById('main');
p.innerHTML = "Hello, Wildan";
}
</script>
</body>
</html>
2# Javascript Mampu Mengubah Attribut Elemen HTML
Ini luar biasa sekali.Jika saya punya attribut href pada elemen HTML yang isinya “google.com” saya bisa ubah menjadi “google.co.id”.
Alurnya begini:
Sintax sebelumnya:
<a href=”google.com”>Buka Google</a>
Setelah diubah menjadi:
<a href=”google.co.id”>Buka Google</a>
Luar biasa, kan?
Mari kita coba sekarang juga. Buka teks editor kesayangan Anda lalu buat js2.html dan ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Mengubah Attribut Elemen HTML dengan Javascript</title>
</head>
<body>
<a href="https://google.com" id="myGoogle">Buka Google.com</a>
<button type="button" onclick="ubah();">Ubah Attribut</button>
<script type="text/javascript">
function ubah() {
var a = document.getElementById('myGoogle');
a.href = "https://google.co.id";
}
</script>
</body>
</html>
3# Javascript Mampu Mengubah Style Elemen HTML
Pada bagian ini erat kaitannya dengan CSS.Namun siapa sangka kalau Javascript juga tak kalah hebat dengan CSS untuk mengatur tampilan halaman web.
Contoh sederhananya, JS mampu mengubah warna dan hal lainnya.
Baiklah, untuk contoh silahkan buat file js3.html, lalu ketik script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Mengubah Style Elemen HTML dengan Javascript</title>
</head>
<body>
<p id="p">This is a Paragraph</a>
<button type="button" onclick="ubah();">Ubah Style</button>
<script type="text/javascript">
function ubah() {
var p = document.getElementById('p');
p.style.color = "blue";
}
</script>
</body>
</html>
4# Javascript Mampu Menyembunyikan Elemen HTML
Langsung saja, buat js4.html lalu ketik script berikut ini:<!DOCTYPE html>
<html>
<head>
<title>Menyembunyikan Elemen HTML dengan Javascript</title>
</head>
<body>
<p id="p">Ini adalah Teks</a>
<button type="button" onclick="ubah();">Ubah</button>
<script type="text/javascript">
function ubah() {
var p = document.getElementById('p');
p.style.display = "none";
}
</script>
</body>
</html>
5# Javascript Mampu Menampilkan Tanggal Elemen HTML
Langsung saja, buat js5.html lalu ketik script berikut ini:<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Jam dan Tanggal dengan Javascript</title>
</head>
<body>
<p id="p">Tampilkan A saja</a>
<button type="button" onclick="ubah();">Ubah</button>
<script type="text/javascript">
function date() {
var data = new Data();
alert(data);
}
</script>
</body>
</html>
***
Sampai sini bagaimana? Mudah kan.
Demikianlah pembahasan 5 hal yang bisa dilakukan oleh Javascript yang boleh menjadi referensi Anda atau bahan ajar Anda.
Thanks.
Comments