Rabu, 10 Oktober 2012

Dimana JavaScript Diletakkan

Dimana JavaScript diletakkan

JavaScript dapat diletakkan di <body> dan di bagian <head> pada halaman HTML.

JavaScript di <body>

Contoh di bawah memanipulasi isi dari elemen <p> ketika halaman di load:

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya yang Pertama</h1>
<p id="demo">Paragraf Pertama Saya.</p>
<script>
document.getElementById("demo").innerHTML="JavaScript Pertama Saya";
</script>
</body>
</html>

JavaScript ditempatkan di bagian bawah halaman untuk memastikan itu dijalankan setelah elemen <p> dibuat.

JavaScript Fungsi dan Event

Pernyataan JavaScript dalam contoh di atas, dijalankan ketika halaman di load.

Kadang-kadang kita ingin mengeksekusi JavaScript ketika sebuah event (peristiwa) terjadi, seperti ketika pengguna mengklik tombol. Kemudian kita dapat menulis script dalam fungsi, dan memanggil fungsi ketika peristiwa itu terjadi.

Anda akan belajar lebih banyak tentang fungsi dan event JavaScript di bab berikutnya.

Sebuah Fungsi JavaScript  di <head>

Contoh di bawah memanggil fungsi di bagian <head> ketika sebuah tombol diklik:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Fungsi JavaScript Pertama Saya";
}
</script>
</head>
<body>
<h1>Halaman Web Saya</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Coba</button>
</body>
</html>

Sebuah Fungsi JavaScript di <body>

Contoh ini juga memanggil fungsi ketika sebuah tombol diklik, tetapi fungsi ini di dalam <body>:

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Coba</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Fungsi JavaScript Pertama Saya";
}
</script>
</body>
</html>

Skrip di <head> dan <body>

Anda dapat menempatkan skrip dalam jumlah yang tidak terbatas dalam dokumen Anda, dan Anda dapat memiliki skrip baik di <body> dan di bagian <head> pada waktu yang sama.

Ini adalah praktek umum untuk menempatkan fungsi di bagian <head>, atau di bagian bawah halaman. Dengan cara ini mereka semua di satu tempat dan tidak mengganggu konten halaman.
Menggunakan JavaScript Eksternal

Script juga dapat ditempatkan dalam file eksternal. File eksternal sering berisi kode yang akan digunakan oleh beberapa halaman web yang berbeda.

File JavaScript Eksternal memiliki ekstensi file. Js.

Untuk menggunakan skrip eksternal, gunakan atribut "src" dari tag <script>.

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Coba</button>
<p><strong>Catatan:</strong> Memanggil script eksternal "SkripSaya.js".</p>
<script type="text/javascript" src="SkripSaya.js"></script>
</body>
</html>

function myFunction()
{
document.getElementById("demo").innerHTML="Fungsi JavaScript Pertama Saya";
}

Anda dapat menempatkan script di <head> atau <body> yang Anda inginkan. Script akan berlaku di mana Anda menempatkan tag <script> dalam dokumen.
Skrip eksternal tidak memakai tag <script>.
Artikel Sebelumnya .....
Artikel Selanjutnya .....

Tidak ada komentar:

Posting Komentar