Beranda
  • Beranda
  • Kursus Programming
  • Karir
  • Layanan Kami
    • IT Outsourcing
    • Jasa Pembuatan Software
    • Jasa Programmer
    • Jasa Pembuatan Website
      • Jasa Pembuatan Website Toko Online
      • Jasa Pembuatan Website Company Profile
      • Jasa Pembuatan Website Rental Mobil
      • Jasa Pembuatan Website Pribadi
      • Jasa Pembuatan Website Marketplace
  • Tutorial IT
    • Tutorial HTML
    • Tutorial JavaScript
    • Tutorial JQuery
    • Tutorial SQL
    • Tutorial Java
    • Tutorial CSS
    • Tutorial Dart
    • Tutorial PHP
    • Tutorial Flutter
  • Blog

Tutorial JavaScript

  • Tutorial Belajar JavaScript
  • Pengertian JavaScript
  • Cara Membuat JavaScript Di HTML
  • Output JavaScript
  • Contoh Coding JavaScript
  • Penulisan JavaScript
  • Komentar Pada JavaScript
  • Variabel JavaScript
  • Operator Pada JavaScript
  • Penjumlahan JavaScript
  • Operator Assignment
  • Tipe Data JavaScript
  • Fungsi Pada JavaScript
  • JavaScript Object
  • Event Pada JavaScript
  • JavaScript Text Atau String
  • Berbagai Fungsi Pada String
  • JavaScript Angka Atau Number
  • Berbagai Fungsi Pada Number
  • Array Pada JavaScript
  • Berbagai Fungsi Pada Array
  • Mengurutkan Array
  • Mengambil Nilai Array
  • JavaScript Tanggal
  • Format Date
  • Fungsi Get Pada Date
  • Fungsi Set Pada Date
  • JavaScript Boolean
  • Perbandingan Dengan JavaScript
  • Kondisi Dengan JavaScript
  • Kondisi Dengan Switch
  • Perulangan Pada JavaScript
  • Perulangan While JavaScript
  • JavaScript Break
  • Membuat Fungsi JavaScript
  • Parameter Pada Fungsi
  • Memanggil Fungsi JavaScript
  • Konsep Scope
  • Keyword this Pada JavaScript
  • Class Pada JavaScript
  • Membuat Object JavaScript
  • Properti Pada Object
  • Fungsi Pada Object
  • Mencetak Nilai Object
  • Mengakses Nilai Dalam Object
  • Constructor Pada Object
  • Beranda
  • Tutorial
  • Cara Membuat JavaScript Di HTML

Cara Membuat JavaScript Di HTML

Daftar Isi
  • JavaScript Dalam Elemen Head
  • JavaScript Dalam Elemen Body
  • JavaScript Dalam File Eksternal
  • Kelebihan Memakai File Eksternal
  • URL File Eksternal

Coding JavaScript ditulis di dalam elemen script. Elemen script dibuka memakai tag <script> dan ditutup memakai tag </script>.

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Tag script mempunyai atribut type. Atribut type tidak wajib ditulis, sifatnya hanya opsional. Cara penulisan atribut type yang lazim adalah
<script type=”text/javascript”>.

Terdapat tiga pilihan lokasi coding JavaScript, pertama di dalam elemen head, kedua di dalam elemen body dan ketiga sebagai file eksternal yang terpisah.

JavaScript Dalam Elemen Head #

Coding JavaScript dapat diletakkan di dalam elemen head. Tag <script> diletakkan di dalam tag <head>.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Pada contoh di atas diperlihatkan fungsi myFunction di dalam tag script. Fungsi ini akan dipanggil apabila tombol Try it ditekan. Kita akan membahas fungsi JavaScript pada topik selanjutnya.

JavaScript Dalam Elemen Body #

Coding JavaScript dapat diletakkan di dalam elemen body. Tag <script> diletakkan di dalam tag <body>.

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Sangat disarankan untuk meletakkan tag script pada bagian paling bawah elemen body. Praktek ini akan mempercepat proses penampilan dokumen HTML pada web browser. Elemen-elemen HTML yang berada di atas tag script akan ditampilkan terlebih dahulu, setelah itu baru coding JavaScript dieksekusi.

JavaScript Dalam File Eksternal #

Coding JavaScript juga dapat diletakkan dalam file yang terpisah dari dokumen HTML. File ini mempunyai ekstensi js. Fungsi myFunction dapat dimasukkan ke dalam file myScript.js.

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Kita dapat memakai file myScript.js pada dokumen HTML yang terpisah. Pergunakan atribut src pada tag script. Atribut src berisi URL file eksternal yang akan dipakai.

<script src="myScript.js"></script>

Pada contoh di atas diperlihatkan fungsi myFunction di dalam myScript.js dapat dipanggil dari dokumen HTML yang terpisah.

Kelebihan Memakai File Eksternal #

Pada prakteknya, JavaScript dalam file eksternal lebih banyak digunakan. Praktek ini mempunyai beberapa kelebihan :

  • Memisahkan coding HTML dengan coding JavaScript
  • Membuat dokumen HTML menjadi lebih mudah dibaca dan dimengerti
  • File eksternal JavaScript dapat dimasukkan kedalam cache sehingga mempercepat proses menampilkan dokumen HTML

Kita juga dapat memakai lebih dari satu file eksternal JavaScript seperti contoh di bawah ini.

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

URL File Eksternal #

URL file eksternal bisa berupa URL absolute ataupun URL relative.

Contoh untuk URL absolute.

<script src="https://nextgen.co.id/tutorial/js/myScript.js"></script>

Contoh untuk URL relative.

<script src="js/myScript.js"></script>

<script src="myScript.js"></script>

What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Pengertian JavaScriptOutput JavaScript

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Daftar Isi
  • JavaScript Dalam Elemen Head
  • JavaScript Dalam Elemen Body
  • JavaScript Dalam File Eksternal
  • Kelebihan Memakai File Eksternal
  • URL File Eksternal

Marketing Office

Epicentrum Walk Office Suite 529A, Jl. HR. Rasuna Said, Jakarta Selatan 12940

Workshop

Nextgen Training Center, Jl. Raya Tanah Baru no 3, Pancoran Mas, Depok

Email

sales@nextgen.co.id

@2020 PT Nextgen Inovasi Indonesia

PT. Nextgen Inovasi Indonesia

PT Nextgen Inovasi Indonesia adalah perusahaan IT yang didirikan pada tahun 2015. Lini bisnis kami adalah inovasi dalam cara belajar teknologi informasi dengan cepat dan efisien.