Rabu, 08 Mei 2024

Javascript pada HTML

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang banyak digunakan dalam pengembangan website. Salah satu kegunaannya adalah membuat website yang interaktif. Bahasa ini juga dapat membantu HTML dalam proses pengelolaan file.

Kelebihan JavaScript

Ada beberapa kelebihan JavaScript yang perlu Anda tahu.

  1. Meringankan Beban Server: JavaScript menggunakan sistem client-side. Client-side Scripting adalah bahasa pemrograman web yang pengolahan datanya dilakukan oleh komputer pengguna/pengunjung. Alhasil, penggunaan sumber daya di server akan lebih ringan.
  2. Prosedural: JavaScript dapat mencakup semua kemampuan bahasa prosedural, seperti pembulatan, pemeriksaan kondisi, looping, dan beberapa kemampuan yang dapat dijalankan di halaman web.
  3. Multi Platform: JavaScript dapat dijalankan di berbagai platform, sehingga mudah untuk diintegrasikan dan dimodifikasi.
  4. Mudah Dipelajari: JavaScript mudah untuk dipelajari karena sintaks yang digunakan mirip dengan Bahasa Inggris. Bahasa pemrograman ini menggunakan model Document Object Model (DOM JavaScript) yang menyediakan banyak fungsionalitas pada berbagai objek sehingga mudah untuk dikembangkan.
  5. Mudah Melakukan Debug dan Tes: Kemudahan membaca sintaks JavaScript membuat proses debug dan tes mudah untuk dilakukan. Apabila terjadi error, akan muncul pesan masalah yang terjadi.
  6. Tidak Membutuhkan Kompilasi: JavaScript tidak membutuhkan proses kompilasi sehingga tidak memerlukan kompiler. Pada saat dibaca saat pengembangan website, bahasa pemrograman ini dikenali sebagai tag HTML.

 

Ada 4 cara menulis kode Javascript pada HTML:

1. Menulis Javascript pada Tag <script>

Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.

Tag <script> dapat kita buat di dalam tag <head> maupun <body>.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    <script>
    console.log("Hi, ini kode Javascript");
    </script>
</head>
<body>

<script>
document.write("Javascript itu keren!");
</script>
</body>
</html>

Hasilnya:

penulisan-javascript-di-tag-script

Mana sih yang lebih baik?

ditulis di dalam <head> atau di <body>?

Kedua cara ini memang sah-sah saja dilakukan, namun ada juga pendapat yang mengatakan:

Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display. 1

Penulisan di akhir <body> akan meningkatkan kecepatan display atau tampilannya konten di web.

Karena, jika kita tulis di dalam <head>, script tersebut akan dieksekusi terlebih dahulu sebelum konten ditampilkan.

Jadi, disarankan menulis kode Javascript di dalam <body>, tepatnya sebelum tutup </body>.

2. Menulis Javascript pada File Eksternal

Cara kedua, kita bisa menulis Javascript di File yang terpisah dengan HTML.

Biasanya digunakan jika kita tidak ingin kode Javascript bercampur dengan kode HTML.

Bagaimana caranya?

Caranya, buatlah sebuah file yang berekstensi .js. File ini kita isi dengan kode Javascript.

Sebagai contoh, saya akan membuat file eksternal dengan nama kode-script.js dan file-external.html sebagai kode HTML-nya.

file javascript dan html

Berikut ini isi file kode-script.js :

document.write("Kode Javascript dari File Eksternal");

Lalu isi file-external.html adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>

    <script src="kode-script.js"></script>
</body>
</html>

Hasilnya:

contoh eksternal javascript

Coba kamu perhatikan!

Pada kode HTML file-external.html, kita tetap menggunakan tag <script>. Akan tetapi, tag ini tidak kita isi dengan kode Javascript. Melainkan kita menggunakan atribut src untuk menggunakan kode Javascript yang ada di file kode-script.js.

O ya, perlu diperhatikan juga:

Tag <script> tetap harus ditutup dengan </script> walaupun tidak punya isi.

Salah: ❌

<script src="kode-script.js">

Benar: ✅

<script src="kode-script.js"></script>

Lalu gimana jika kode Javascript-nya berada di folder yang berbeda dengan dokumen HTML-nya?

Atau JavaScript-nya berada di internet?

Itu gimana?

Untuk kode Javascript yang berada di folder yang berbeda, kita menulisnya mengikuti alamat path folder-nya.

Misalnya struktur folder-nya seperti ini:

struktur direktori project

Karena file kode-script.js berada di dalam folder js, maka kita harus menulisnya:

<script src="js/kode-script.js"></script>

Gimana paham kan?

Nah, untuk kode Javascript yang diambil dari internet, kita cukup tuliskan alamat URL dari Javascript tersebut.

Contoh:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

3. Menulis Javascript pada Atribut

Penulisan Javascript pada atribut bisanya dilakukan pada atribut event.

Contoh:

<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>

Pada contoh ini, kita membuat elemen <button> dan memiliki atribut onclick yang berisi kode Javascript.

Nantinya, kode javascript yang ada di dalam atribut onclick akan dieksekusi saat event klik terjadi pada elemen <button>.

Apakah Javascript hanya bisa ditulis pada atribut onclick saja?

Atribut onclick adalah salah satu atribut event yang ada di HTML, kode Javascript bisa ditulis di semua atribut event.

Ingat atribut event!

Bukan atribut biasa.

Jika kamu ingin lihat semua atribut event, silakan cek di Event Reference

event reference

Penulisan atribut event di HTML diawali dengan on, misalnya untuk event click, maka pada atribut HTML ditulis onclick.

Contoh lagi biar makin paham:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penulisan Javascript di Atribut</title>
</head>

<body>
    <textarea onkeyup="document.getElementById('counter').innerText = this.value.length" cols="30" rows="10"></textarea>
    <p>Panjang: <span id="counter">0</span> karakter</p>
</body>

</html>

Pada contoh ini, kita menggunakan event keyup, maka ditulis onkeyup. Event ini terjadi saat kita melepas tombol di keyboard.

Jadi nantinya saat kita mengetik pada elemen <textarea>, kode Javascript yang ada di onkeyup akan dieksekusi.

Kode Javascript tersebut berfungsi untuk menampilkan jumlah karakter yang diketik.

4. Penulisan Javascript pada URL

Nah ini yang menurut saya cara yang cukup aneh.

Cara ini memang jarang digunakan dan hampir tidak ada yang menggunakannya di dalam aplikasi.

Tapi tetap bisa.

Caranya, pada URL kita gunakan javascript: lalu diikuti dengan kode Javascript yang ingin dieksekusi.

Contoh:

javascript:alert("Nah! ini Javascript")

Ini di ketik pada address bar browser.

Maka hasilnya:

Pemanggilan Javascript pada URL

Catatan: Cara ini tidak bekerja di web browser versi terbaru, karena ini merupakan sebuah celah yang bisa dipakai untuk serangan XSS.

Lalu, bagaimana kita menggunakan cara ini di HTML?

Cara ini bisa kita gunakan pada tag <a>, lalu mengisinya di atribut href.

Contoh:

<a href="javascript:alert('Wih! hebat bukan?')">Coba Klik</a>

Hasilnya:

javascript di url

BAHAN PRAKTIKUM:
javascript didalam html
simpan dengan nama:belajar.html
<!DOCTYPE html>
<html>
<body>

<h2>Apa yang bisa dilakukan javascript?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

simpan dengan nama:belajar1.html
<!DOCTYPE html>
<html>
<body>

<h2>Apa yang bisa dilakukan javascript?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

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

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

simpan dengan nama:belajar2.html
<!DOCTYPE html>
<html>
<body>

<h2>Apa yang bisa dilakukan javascript?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

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

</body>
</html>

simpan dengan nama:belajar3.html
<!DOCTYPE html>
<html>
<body>

<h2>Apa yang bisa dilakukan javascript?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

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

</body>
</html>  

simpan dengan nama:belajar4.html
<!DOCTYPE html>
<html>
<body>

<h2>Apa yang bisa dilakukan javascript?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

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

</body>
</html>  

simpan dengan nama:belajar5.html
<!DOCTYPE html>
<html>
<body>

<h2>Apa yang bisa dilakukan javascript?</h2>

<p>JavaScript can show hidden HTML elements.</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>

simpan dengan nama:count.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      ProgressCountdown(10, "pageBeginCountdownText");

      function ProgressCountdown(timeleft, text) {
        return new Promise((resolve, reject) => {
          var countdownTimer = setInterval(() => {
            timeleft--;

            document.getElementById(text).textContent = timeleft;

            if (timeleft <= 0) {
              clearInterval(countdownTimer);
              resolve(true);
            }
          }, 1000);
        });
      }
    </script>

    <style>
      .dot {
        height: 100px;
        width: 100px;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
      }

      .clock {
        text-align: center;
      }
      .pp {
        text-align: center;
      }

     
    </style>

    <div class="row begin-countdown">
      <div class="col-md-12 text-center">
        <div class="dot" style="position: center">
          <h3 id="pageBeginCountdownText" class="clock">10</h3>
          <p class="pp">Seonds</p>
        </div>
      </div>
    </div>
  </body>
</html>

javascript diluar html

Buat folder tersendiri simpanlah file-file ini dengan nama yang sudah ditentukan
 
simpan dengan nama:index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="program.js"></script>
</head>
</html> 

 simpan dengan nama:program.js
var n = prompt("Masukan nama anda:");
var c = confirm("Hai "+n+"! Apakah saya tampan?");
if (c == true) {
alert('Oh Thanks!!');
}else{
alert('Why?!!');
}


simpan dengan nama:index.html



simpan dengan nama:style.css



simpan dengan nama:program.js

Diposkan oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)