Belajar Java Script Part 2 Perkenalan JavaScript

 


Bahas Tuntas Yuk...

Kita tahu sebuah halaman website dapat terbentuk dari 3 bahasa program penyusun yang ada didalamnya.

Dari 3 bahasa program tersebut 2 diantaranya bukan merupakan bahasa program, seperti HTML yang adalah bahasa markup pembentuk kerangka halaman website, kemudian CSS yang merupakan bahasa styling untuk website agar tampil lebih baik dan secara visual enak dipandang.

Lalu yang ketiga adalah javascript yang akan kita bahas kali ini. Ok langsung saja mari berkenalan dengan javascript yang merupakan salah satu bahasa pemrograman yang digunakan untuk membangun tampilan website.

Apa itu javascript ?

Javascript adalah bahasa pemrograman atau disebut juga bahasa yang berbasis scripting yang dapat mengimplementasikan fitur yang ada di halaman web. istilahnya bahasa pemrograman javascript ini merupakan salah satu bahasa pemrograman yang memiliki peran penting dalam hal pembuatan website.

Bingung apa yang saya maksud diatas?

Agar lebih paham kita ketahui dulu 3 bahasa pembentuk utama sebuah halaman web.

Kita tahu bahwa elemen yang dibuat dengan bahasa dokumen Hypertext Markup Language (HTML) adalah susunan blok bangunan di halaman web (sudah saya jelaskan sebelumnya diatas adalah kerangka web).

Dan Cascading Style Sheet (CSS) digunakan untuk mendesain setiap elemen HTML yang telah kita buat sebelumnya.

Nah javascript disini bertugas sebagai yang mengimplementasikan fitur pada sebuah halaman website.

Kalau diibaratkan, javascript ini membuat apa yang ada didalam halaman web tersebut menjadi lebih interaktif.

Untuk dapat lebih memahami lagi coba kita lihat contoh dari susunan kode html, css dan javascript dibawah ini


<!DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
<style type="text/css">
button {
font-family: sans-serif;
border: none;
padding: 15px 30px;
font-size: 20px;
outline: none;
margin: 10px;
}
#btn {
background-color: rgb(23, 52, 89);
color: #f8f9f9;
box-shadow: .5px .5px 1px 2px #000000;
}
</style>
</head>
<body>
<button id="btn"> Show a Dialog </button>

<script type="text/javascript">
document.getElementById("btn").onclick = function() {
alert("I am a dialog box!")
}
</script>
</body>
</html>

Dan kalau kode diatas kita jalankan di browser akan tampil terlihat seperti gambar dibawah ini

menampilkan dialog box dengan javascript

Dalam contoh diatas, HTML digunakan untuk membuat tombol, kemudian CSS digunakan untuk mendesainnya. Terakhir, javascript digunakan untuk menambahkan fungsi sederhana yang dapat menampilkan kotak dialog, saat tombol diklik.

Selanjutnya

Apa yang dapat dilakukan oleh javascript?

Ada banyak, berikut ini beberapa contoh apa yang dilakukan oleh kode program javascript:

1. Javascript dapat mengubah konten elemen di HTML.

    Dapat kita lihat contoh kode javascript berikut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ubah Konten Dengan JS</title>
</head>
<body>

<p id="demo">Hello World!</p>
<button type="button" onclick="myFunc()">Ubah Konten</button>

<script type="text/javascript">
function myFunc(){
document.getElementById("demo").innerHTML = "Hello Everyone!!";
}
</script>

</body>
</html>

Dari kode diatas maka akan membuat sebuah tombol/button pada halaman web, dapat dilihat pada gambar ilustrasi dibawah ini saat sebuah button diklik

mengubah konten elemen dengan javascript


2. Javascript dapat mengubah nilai yang dimiliki oleh atribut

    Sebagai contohnya kita akan mengubah nilai dari atribut src yang ada pada tag HTML img dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ubah Nilai Atribut Dengan JS</title>
</head>
<body>

<img src="https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577_960_720.jpg" id="image" width="250" />
<button type="button" onclick="myFunc()">Ubah Gambar</button>

<script type="text/javascript">
function myFunc(){
document.getElementById("image").src = "https://cdn.pixabay.com/photo/2016/11/18/17/46/house-1836070_960_720.jpg";
}
</script>

</body>
</html>

Dari kode diatas dibawah ini merupakan hasil yang ditampilkan oleh web browser

mengubah nilai atribut dengan javascript


3. Javascript dapat mengubah styling/gaya dari sebuah elemen HTML.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ubah Style Elemen HTML Dengan JS</title>
</head>
<body>

<p id="demo" style="color: gold;">Hello World!</p>
<button type="button" onclick="myFunc()">Ubah Style</button>

<script type="text/javascript">
function myFunc(){
document.getElementById("demo").style.color = "green";
document.getElementById("demo").style.fontWeight = "bold";
document.getElementById("demo").style.fontSize = "300%";
}
</script>

</body>
</html>

Berikut gambar ilustrasi saat kode diatas dijalankan oleh browser maka saat kita menekan tombol Ubah Style, yang terjadi gaya dari tulisan Hello World akan berubah. Lihat gambar dibawah ini

mengubah styling/gaya elemen dengan javascript


4. Javascript juga dapat menampilkan atau menyembunyikan elemen HTML. 

    Ini merupakan salah satu hal yang masih berkaitan dengan poin 3 diatas kalau javascript bisa mengubah gaya dari elemen HTML yang akan kita ubah stylenya.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Hide Elemen HTML Dengan JS</title>
</head>
<body>

<p id="demo" style="width: 200px; height: 200px; background-color: gold;">Hello World!</p>
<button type="button" onclick="show()">Tampilkan</button>
<button type="button" onclick="hide()">Sembunyikan</button>

<script type="text/javascript">
function show(){
document.getElementById("demo").style.display = "block";
}

function hide(){
document.getElementById("demo").style.display = "none";
}
</script>

</body>
</html>

Dapat kita lihat gambar ilustrasi dibawah ini saat kode javascript diatas dibuka oleh browser. 

menampilkan dan menyembunyikan elemen dengan javascript

Ketika kita menekan tombol sembunyikan maka elemen tersebut akan disembunyikan oleh javascript, akan tetapi saat kita menekan tombol tampilkan maka javascript akan menampilkan elemen tersebut seperti yang terlihat pada gambar diatas.

Sebenarnya ada banyak hal lagi yang dapat dilakukan oleh bahasa pemrograman javascript dalam membuat sebuah website tidak hanya tampil menarik akan tetapi secara UX(user experience) dapat membuat pengunjung website berlama-lama berada di dalam halaman web kita.

Kesimpulan

Kesimpulan dari pembelajaran kita kali ini adalah javascript merupakan bahasa program yang biasa disebut scripting language yang tugasnya dapat membuat setiap elemen didalam website menjadi lebih interaktif serta kita belajar jika ada banyak kemampuan yang dapat ditawarkan oleh bahasa pemrograman yang satu ini ini.

Ok saya rasa cukup sekian pembahasan saya kali ini tentang pengenalan javascript. Untuk kamu yang membaca artikel saya ini boleh diskusikan dengan saya dikolom komentar pada bagian bawah artikel ini. Terima kasih sudah membaca

2 Responses to "Belajar Java Script Part 2 Perkenalan JavaScript"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel