Pengenalan JavaScript


JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript sangat populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Microsoft Edge, Mozilla Firefox, Opera dan lainnya.


JavaScript Dapat 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".


Contoh

<p id="demo">JavaScript dapat mengubah konten HTML</p>

<button
  type="button"
  onclick='document.getElementById("demo").innerHTML = "Halo JavaScript!"'
>
  Klik Disini!
</button>

Hasil

JavaScript dapat mengubah konten HTML



JavaScript juga dapat menggunakan tanda kutip ganda dan tunggal.


Contoh

<button
  type="button"
  onclick="document.getElementById('demo').innerHTML = 'Halo JavaScript!'"
>
  Klik Disini!
</button>

JavaScript Dapat Mengubah Nilai Atribut HTML

Dalam contoh ini JavaScript mengubah nilai atribut src (source) dari sebuah tag <img>.


Contoh

<p>JavaScript dapat mengubah nilai atribut HTML.</p>

<p>
  Dalam contoh ini, JavaScript mengubah nilai dari atribut src (source) dari
  sebuah gambar.
</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">
  Hidupkan lampu
</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px" />

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">
  Matikan lampu
</button>

Hasil

JavaScript dapat mengubah nilai atribut HTML.

Dalam contoh ini, JavaScript mengubah nilai dari atribut src (source) dari sebuah gambar.



JavaScript Dapat Mengubah Style HTML (CSS)

Mengubah style dari elemen HTML adalah varian dari mengubah atribut HTML.


Contoh

<p id="demo">JavaScript dapat mengubah style HTML.</p>

<button
  type="button"
  onclick="document.getElementById('demo').style.fontSize='35px'"
>
  Klik Disini!
</button>

Hasil

JavaScript dapat mengubah style HTML.



JavaScript Dapat Menyembunyikan Elemen HTML

Menyembunyikan elemen HTML dapat dilakukan dengan mengubah style display.


Contoh

<p id="demo">JavaScript dapat menyembunyikan elemen HTML.</p>

<button
  type="button"
  onclick="document.getElementById('demo').style.display='none'"
>
  Klik Disini!
</button>

Hasil

JavaScript dapat menyembunyikan elemen HTML.



JavaScript Dapat Menampilkan Elemen HTML

Menampilkan elemen HTML tersembunyi juga dapat dilakukan dengan mengubah style display.


Contoh

<p>JavaScript dapat menampilkan elemen HTML yang disembunyikan.</p>

<p id="demo" style="display:none">Halo JavaScript!</p>

<button
  type="button"
  onclick="document.getElementById('demo').style.display='block'"
>
  Klik Disini!
</button>

Hasil

JavaScript dapat menampilkan elemen HTML yang disembunyikan.



Tahukah kamu?

JavaScript dan Java adalah bahasa yang sama sekali berbeda, baik dalam konsep maupun desain.

JavaScript ditemukan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA pada tahun 1997.

ECMA-262 adalah nama resmi standar. ECMAScript adalah nama resmi bahasa tersebut.


Sumber referensi: w3schools

Komentar

Posting Komentar