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>
<!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 typeBeberapa 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 :
| 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;
}