HTML script tag

HTML elemen <script> adalah tag yang digunakan untuk menulis atau menghubungkan kode Java Script, sehingga membantu menambahkan interaktivitas dan logika pada halaman web. kamu bisa menulis kode Java Script langsung didalam tag <script> ini atau menggunakan atribut "src" untuk menghubungkan file Java Script ke external.

1. html tag <script> internal

<!DOCTYPE html>
<html>
<head>
<style>
body, h2 {color:#454545; font-size:20px; font-family:monospace;}
</style>
</head>
<body>
<h2>Contoh: Element &lt;script&gt; internal </h2> <hr>
<p id="contoh1"></p>
<script>
document.getElementById("contoh1").innerHTML = "Ini Adalah Contoh Script Menentukan Pada &lt;p&gt; id Contoh1";
</script>
</body>
</html>

Cicagak Berbagi

2. html tag <script> internal, dengan fungsi

<!DOCTYPE html>
<html>
<head>
<style>
body, h2 {color:#454545; font-size:20px; font-family:monospace;}
.button {padding:5px; background:#C12283; color:#fff; border:none;}
.button:hover {box-shadow: 0 0 2px #000; background:green;}
p {color:#6A5ACD;}
</style>
</head>
<body>
<h2>Contoh: Element &lt;script&gt; internal, dengan fungsi </h2> <hr>
<button class="button" type="button" onclick="contoh2()">Klik Disini!</button>
<button class="button" type="button" onclick="hapus()">Hapus!</button>
<p id="contoh2"></p>
 
<script>
  function contoh2(){
    document.getElementById("contoh2").innerHTML = "Ini Adalah Contoh Script Menentukan Pada &lt;p&gt; id Contoh2, dengan panggilan fungsi. atribut pada button";}
  function hapus(){
    document.getElementById("contoh2").innerHTML = "berhasil di hapus...";}
  </script>
</body>
</html>

Cicagak Berbagi

3. html tag <script> menampilkan isi script dengan css

<!DOCTYPE html>
<html>
<head>
<style>
body, h2 {color:#454545; font-size:20px; font-family:monospace;}
.button {padding:5px; background:#C12283; color:#fff; border:none;}
.button:hover {box-shadow: 0 0 2px #000; background:green;}
p {color:#6A5ACD;}
script {display:block; background:#ddd; border-radius:2px; padding:5px;} /* Menampilkan Isi Script */
</style>
</head>
<body>
<h2>Contoh: Element &lt;script&gt; menampilkan isi script dengan CSS </h2> <hr> 
<button class="button" type="button" onclick="contoh3(), showHide()">Klik Disini!</button>
<p id="contoh3"></p>

<script>
  function contoh3(){
    document.getElementById("contoh3").innerHTML = "Ini Adalah Contoh Script Menentukan Pada &lt;p&gt; id Contoh3, dengan panggilan fungsi. atribut pada button";
    }

  function showHide() {
    var x = document.getElementById("contoh3");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
</script>
</body> 
</html>

Cicagak Berbagi