tRikSonic

HTML script Tag

Terakhir diperbarui : 22 Mei 2018 - 11.45

Tutorial HTML <script>

HTML script Tag - belajar html script, element <script> digunakan sebagai wadah penulisan sebuah skrip code atau javascript.
html font

Contoh HTML <script> :

<p id="demo">Klik button dibawah</p>
<button onclick="demoScript();">Generate</button>

<script>
function demoScript () {
   document.getElementById("demo").innerHTML = "<strong>Inner HTML<\/strong>";
   alert ("Javascript Test");
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p id="demo">Klik button dibawah</p>
<button onclick="demoScript();">Generate</button>

<script>
function demoScript () {
   document.getElementById("demo").innerHTML = "<strong>Teks Tebal<\/strong>";
   alert ("Javascript sukses");
}
</script>

</body>
</html>

Contoh 2 HTML <script> :

<p class="demo">Teks Biasa</p>
<div class="demo">Teks Biasa</div>
<span class="demo">Teks Biasa</span>

<p>Klik tombol Generate untuk menjalankan javascript</p>

<button onclick="demoScript();">Generate</button>

<script>
function demoScript () {
  var element = document.querySelectorAll(".demo");
  for (var index = 0, len = element && element.length; index < len; ++index){
     element[index].innerHTML= "<b>Teks Tebal<\/b>";
  }
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p class="demo">Teks Biasa</p>
<div class="demo">Teks Biasa</div>
<span class="demo">Teks Biasa</span>

<p>Klik tombol Generate untuk menjalankan javascript</p>

<button onclick="demoScript();">Generate</button>

<script>
function demoScript () {
  var element = document.querySelectorAll(".demo");
  for (var index = 0, len = element && element.length; index < len; ++index){
     element[index].innerHTML= "<b>Teks Tebal<\/b>";
  }
}
</script>

</body>
</html>

Attribute HTML <script> :

async
Attribute async digunakan hanya untuk penggunaan berupa script eksternal atau script yang di tempatkan di root directory blog / website atau di luar template atau tema. Jika attribut ini disebutkan maka javascript eksternal akan diload setelah 70% - 90 % halaman di muat.
Attribute async ini bersifat boolean, yang berarti bisa disebutkan nilai dari attribut, bisa juga tidak disebutkan. Lihat contoh html dibawah ini :

Contoh HTML <script> attribute async
<!-- contoh 1 tanpa di sebutkan nilai dari attribut -->
<script async src="/js/javascript.js"></script>

<!-- contoh 2 di sebutkan nilai dari attribut -->
<script async="async" src="/js/javascript.js"></script>
Dari dua contoh penerapan attribute async diatas merupakan penulisan yang benar dan mempunyai fungsi yang sama.
charset
Attribut charset digunakan untuk menentukan kode karakter. Selengkapnya mengenai penggunaan attribut charset dapat mengunjungi tautaun berikut ini : https://www.w3.org/TR/html4/charset.html
defer
Attribute defer digunakan hanya untuk penggunaan berupa script eksternal atau script yang di tempatkan di root directory blog / website atau di luar template atau tema. Jika attribut ini disebutkan, maka javascript eksternal akan diload konten pada halaman selesai 100% di muat.
Attribute defer ini bersifat boolean, yang berarti bisa disebutkan nilai dari attribut, bisa juga tidak disebutkan. Lihat contoh html dibawah ini :

Contoh HTML <script> attribute defer
<!-- contoh 1 tanpa di sebutkan nilai dari attribut -->
<script defer src="/js/javascript.js"></script>

<!-- contoh 2 di sebutkan nilai dari attribut -->
<script defer="defer" src="/js/javascript.js"></script>
Dari dua contoh diatas merupakan penulisan yang benar dan mempunyai fungsi yang sama.
Catatan : Penggunaan attribute defer harus dipahami cara kerjanya, salah salah fungsi dari javascript menjadi tidak berfungsi.
Misal : anda menggunakan library jQuery eksternal dan mendefernya sedangkan code dari jQuery anda tuliskan pada content atau pada template/tema, hal ini menyebabkan code jquery yang ada menjadi tidak berfungsi, karena library dari jQuery terakhir di load.
Solusinya code jquery yang anda buat harus berada di luar juga atau eksternal dan di panggil dengan mendefernya juga, dengan susunan library jQuery yang pertama dan code jQuery yang kedua, Bisa di lihat pada contoh di bawah ini.
<script defer="defer" src="/js/jQuery.js"></script>
<script defer="defer" src="/js/template-fungsi-jquery.js"></script>
src
Attribut src hanya di gunakan untuk penggunaan memanggil script eksternal, dan jika attribut ini ditulis maka nilai dari attribut wajib disebutkan.

Contoh HTML <script> attribute src
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.active {
   background : orange;
   padding : 10px;
   color : wheat;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>

<button id="klik">
  Klik tombol ini untuk menjalankan jQuery
</button>

<div id="demo">Lorem ipsum...</div>

<script>
$("#klik").click(function(){
    $("#demo").toggleClass("active");
});
</script>

</body>
</html>
type
Attribute type digunakan untuk menentukan jenis dari type script.
selengkapnya mengenai standar media type html dapat dilihat pada tautan ini IANA Media Types
Contoh HTML <script> attribute type
Beberapa contoh penggunaan HTML <script> dengan attribut type :
<script type='text/javascript'></script>

<script type='application/ld+json'></script>

<script type="application/javascript"></script>

<script type="text/javascript" src="javascript.js"></script>

Global Attributes:

Element <script> mencakup Global Attributes HTML.

Event Attributes:

Element <script> mencakup Event Attributes HTML.

Browser Support :

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Default CSS :

Browser yang support dengan element <script>, mempunyai nilai default :
script {
  display: none;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.