Menu
Bahasa pemrograman JavaScript merupakan salah satu dari tiga bahasa pemrograman yang harus di pelajari semua pengembang web. Karena tiga pondasi utama membangun sebuah web adalah HTML, CSS, dan JavaScript. Dimana HTML untuk mendefenisikan konten halaman web, CSS untuk menentukan tata letak halaman web, dan JavaScript untuk memprogram prilaku halaman web.
Penggunaan JavaScript dapat menjadikan website lebih dinamis dan interaktif, sama halnya manusia memiliki sebuah otak dan otot agar dapat dinamis dan berinteraksi.
Selain itu, JavaScript merupakan bahasa pemrograman Web yang mampu melakukan proses perhitungan serta dapat di gunakan untuk menampilkan pesan atau biasa di kenal dengan messagebox ketika kita mengeksekusi suatu objek tertentu.
Penulisan baha JavaScript seperti halnya dengan CSS dapat dilakukan dengan tiga cara yaitu bisa dituliskan langsung pada elemen HTML, ditulis secara internal, dan eksternal.
Berikut ini adalah contoh sederhana penggunaan bahasa JavaScript untuk membuat sebuah pesan.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Jangan Di Klik" onclick="alert('Saya bilang jangan diklik !')">
</body>
</html>
Dengan menggunakan bahasa JavaScript Anda dapat melakukan perubahan pada konten HTML seperti mengganti teks, nilai atribut, gaya pada elemen, menyembunyikan atau menampilkan elemen, dll.
Contoh berikut menunjukkan bagaimana menggunakan JavaScript untuk mengatur konten pada halaman web.
1. Mengubah Konten HTML
Salah satu dari banyak metode JavaScript HTML adalah getElementById(). Contoh di bawah ini “menemukan” elemen HTML (dengan id=”demo”), dan mengubah konten elemen (innerHTML) menjadi “Halo JavaScript”:
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan Javascript?</h2>
<p id="demo">JavaScript dapat mengubah konten HTML.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
2. Mengubah Nilai Atribut HTML
JavaScript dapat merubah nilai dari sebuah atribut. Dalam contoh ini JavaScript mengubah nilai atribut src dari tag <img>, dalam hal ini JavaScript mengubah nilai atribut src dari sebuah gambar.
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang Dapat Dilakukan JavaScript ?</h2>
<p>JavaScript dapat mengubah nilai atribut HTML.</p>
<p>Dalam hal ini JavaScript mengubah nilai atribut src (sumber) dari sebuah gambar.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Menyalakan lampu</button>
<img decoding="async" id="myImage" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="width:100px" data-lazy-src="pic_bulboff.gif"><noscript><img decoding="async" id="myImage" src="pic_bulboff.gif" style="width:100px"></noscript>
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Mematikan lampu</button>
</body>
</html>
3. Mengubah Gaya Elemen HTML
Mengubah gaya elemen HTML, adalah bagian dari mengubah atribut HTML yang dapat dilakukan oleh bahasa JavaScript untuk mengatur tampilan pada halaman web.
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript ?</h2>
<p id="demo">JavaScript dapat mengubah gaya pada sebuah elemen HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
4. Menyembunyikan dan Menampilkan Elemen HTML
Menyembunyikan dan menampilkan elemen HTML dapat dilakukan dengan mengubah gaya tampilan.
Berikut ini adalah contoh penggunaan kode JavaScript untuk menyembunyikan elemen HTML.
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript ?</h2>
<p id="demo">JavaScript dapat menyembunyikan elemen HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
Berikut ini adalah contoh penggunaan kode JavaScript untuk menampilkan elemen HTML yang tersembunyi.
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript Do?</h2>
<p>JavaScript dapat menampilkan elemen HTML yang tersembunyi.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
Kode JavaScript dapat ditulis menggunakan tag Script yang di letakkan di antara elemen head atau body. Penulisan kode tersebut di kenal dengan penulisan secara internal. berikut beberapa contoh penulisan kode JavaScript internal.
1. Penulisan JavaScript dalam Elemen Body diantara Tag Script
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
2. Penulisan JavaScript diantara Head dan Body Menggunakan Function
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
3. Penulisan JavaScript didalam Body Menggunakan Function
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Skrip juga dapat ditempatkan di file eksternal. Skrip eksternal praktis ketika kode yang sama digunakan di banyak halaman web yang berbeda. File JavaScript memiliki ekstensi file .js. Untuk menggunakan skrip eksternal, letakkan nama file skrip di atribut src (sumber) dari tag script.
Menempatkan skrip di file eksternal memiliki beberapa keuntungan. Ini memisahkan HTML dan kode Itu membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara.
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Skrip eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web sama. Contoh ini menggunakan URL lengkap untuk menautkan ke skrip:
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script data-minify="1" src="https://masagena.id/wp-content/cache/min/1/js/myScript.js?ver=1725967448"></script>
</body>
</html>
Contoh ini menggunakan skrip yang terletak di folder tertentu di situs web yang sama.
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script data-minify="1" src="https://masagena.id/wp-content/cache/min/1/js/myScript.js?ver=1725967448"></script>
</body>
</html>
Contoh ini menautkan ke skrip yang terletak di folder yang sama dengan halaman web.
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
You cannot copy content of this page
