Home » Website » 3 Konsep Dasar Penulisan Bahasa Pemrograman JavaScript

3 Konsep Dasar Penulisan Bahasa Pemrograman JavaScript

Daftar Isi

Mengenal Bahasa JavaScript

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.

JavaScript Inline

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 id="myImage" src="pic_bulboff.gif" style="width:100px" data-lazy-src="http://pic_bulboff.gif?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img 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> 

				
			

JavaScript Internal

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> 

				
			

JavaScript Eksternal

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 src="https://www.w3schools.com/js/myScript.js"></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 src="/js/myScript.js"></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>

				
			
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments