Informatika Kelas VIII
Cara Menulis Kode JavaScript
======================================
SMP Negeri 26 Bekasi
Guru H. Rudi Mardianto, S.Pd
Embedded Files
Cara Menulis Kode JavaScript
Cara Menulis Kode JavaScript
Ada dua cara yang bisa Anda coba untuk membuat kode JavaScript, yaitu:
1. Langsung di File HTML (Internal JavaScript)
1. Langsung di File HTML (Internal JavaScript)
Sesuai namanya, Anda bisa langsung memasukkan kode JavaScript pada file berformat HTML. Caranya dengan menuliskan kode di antara tag <script> </script>, lalu tempatkan skrip tersebut pada tag <body>.
Contohnya seperti berikut:
<!DOCTYPE html>
<html>
<body>
<script>
alert("Ini adalah kode JavaScript SMPN 26!")
</script>
</body>
</html>
Jika dilihat perbaris:
2. Terpisah dari File HTML (External JavaScript)
2. Terpisah dari File HTML (External JavaScript)
Cara kedua adalah dengan membuat file JavaScript terpisah, lalu menghubungkannya dengan file HTML. External JavaScript lebih direkomendasikan, karena:
Reusability – Memungkinkan JavaScript digunakan di banyak file HTML.
Readability – Membuat kode program jadi lebih mudah dibaca.
Conciseness – Meringkas jumlah baris kode yang dihasilkan.
Berikut adalah contoh penggunaan External JavaScript:
File HTML:
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>
Jika dilihat perbaris:
File JavaScript:
alert("Ini adalah kode JavaScript SMPN 26!");
Pada poin berikutnya, Anda akan mempraktikkan tutorial JavaScript untuk membuat sebuah program sederhana.
Membuat Program Sederhana yang menampilkan pop up ketika menekan sebuah tombol
Membuat Program Sederhana yang menampilkan pop up ketika menekan sebuah tombol
Seperti yang sudah dijelaskan, Anda membutuhkan web browser dan code editor untuk mempraktikkan tutorial JavaScript. Nah, di sini kami menggunakan browser Google Chrome dan editor Visual Studio Code.
Selain itu, Anda perlu menyiapkan sebuah folder pada komputer sebagai tempat menyimpan file HTML dan JavaScript. Di sini kami membuat folder dengan nama helloworld.
Setelah menyiapkan beberapa hal di atas, mari ikuti tutorial JavaScript membuat program sederhana yang menampilkan pop up ketika menekan sebuah tombol.
Langkah-langkahnya sebagai berikut:
Buka Notepad dan buat file baru dengan cara klik File > New File. Kemudian, tulis kode berikut untuk membuat sebuah halaman HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nama Lengkap Kamu</title>
</head>
<body>
<h1>Praktik Informatika Program JavaScript Nama Lengkap Kamu Kelas VIII SMPN 26 Bekasi</h1>
</body>
</html>
Simpan file/Save As dengan nama: Praktik Nama Kamu 8h.html dan ganti Type: All File
Jika dilihat perbaris:
2. Buat lagi sebuah file baru di Notepad, klik File kemudian pilih New.
Ketikkan kode di bawah ini untuk membuat fungsi untuk menampilkan pop up JavaScript:
function button() {
alert("Ini adalah hasil praktik membuat Tombol JavaScript Nama kamu SMPN 26");
};
Kali ini simpan file dengan nama: Praktik Tombol.js
Jika dilihat perbaris:
Kembali lagi ke file:
Praktik Nama Kamu 8h.html
tambahkan kode berikut setelah tag </h1>(Fungsinya untuk menghubungkan file ini dengan file: Praktik Tombol.js yang tadi dibuat)
<button onclick="button()">Klik Tombol Ini!</button>
<script src="Praktik Tombol.js"></script>
Simpan kembali perubahan pada file tersebut.
Jika dilihat perbaris:
Selanjutnya buka folder tempat kalian menyimpan, klik kanan pada file Praktik Nama Kamu 8h.html > Open with > Google Chrome. Anda akan melihat tampilan seperti ini:
Silakan tekan tombol ‘Klik Tombol Ini!’ dan akan muncul pop up sebagai berikut:
Selama kalian coding JavaScript dengan benar, website tidak akan mengalami error.
TUGAS LATIHAN:
Langkah-langkah pengerjaan tugas:
Pertama, buka Visual Studio Code dan buat file baru dengan cara klik File > New File. Setelah itu, tulis kode berikut untuk membuat sebuah halaman HTML, tulis namamu di script title di bawah ini sebelum tulisan SMPN 26 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMPN 26 BEKASI</title>
</head>
<body>
<h1>Ini adalah Program JavaScript SMPN 26</h1>
</body>
</html>
Simpan file dengan nama index.html
Selanjutnya buat lagi sebuah file baru, lalu ketikkan kode di bawah ini. Gunanya untuk membuat fungsi untuk menampilkan pop up JavaScript:
function button() {
alert("Ini adalah Tombol JavaScript SMPN 26");
};
Kali ini simpan file dengan nama script.js
Kembali lagi ke file index.html tambahkan kode berikut setelah tag </h1>.
(Fungsinya untuk menghubungkan file ini dengan file script.js yang tadi dibuat) :
<button onclick="button()">Klik Tombol Ini!</button>
<script src="script.js"></script>
Simpan kembali perubahan pada file tersebut.
Page updated
Report abuse