HTML script Tag

Tutorial HTML <script>

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

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>

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>

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.

Nilai atau value dari attribute ini adalah async

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

Nilai atau value dari attribute ini adalah Kode karakter

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>

Nilai atau value dari attribute ini adalah defer

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>

Nilai atau value dari attribute ini adalah URL/Link

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>

Nilai atau value dari attribute ini adalah media_type

Global Attributes:

Element <script> mencakup Global Attributes HTML.

Event Attributes:

Element <script> mencakup Event Attributes HTML.

Browser Support :

Chrome	Ya
Safari	Ya
Firefox	Ya
Opera	Ya
IE	Ya
Edge	Ya

Default CSS :

Browser yang support dengan element <script>, mempunyai nilai default :

script {
  display: none;
}