JavaScript : Teori Singkat & BAB 3
Praktik
Masdar Wiyono
S1 - Informatika – Universitas Bahaudin Mudhary Madura
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman web.
Ia dapat menghitung, memanipulasi, dan memvalidasi data.
Dapat memperbarui dan mengubah HTML dan CSS.
Mengapa Mempelajari JavaScript?
JavaScript adalah salah satu dari 3 bahasa yang harus dipelajari semua
pengembang web :
1. HTML untuk mendefinisikan konten halaman web
2. CSS untuk menentukan tata letak halaman web
3. JavaScript untuk memprogram perilaku halaman web agar Interaktif.
DOM (Document Object Model)
DOM adalah representasi struktur dokumen web (HTML/XML) dalam bentuk objek
yang bisa diakses dan dimanipulasi oleh JavaScript.
•Saat browser membaca file HTML, dia membuat sebuah pohon (tree).
•Setiap elemen HTML (seperti <h1>, <p>, <div>, <button>) dianggap sebagai node di
dalam pohon itu.
•Dengan JavaScript, kita bisa masuk ke pohon ini untuk mengubah isi, atribut, gaya,
atau menambah/menghapus elemen.
eXtensible Markup Language. (XML)
• XML adalah bahasa markup (mirip dengan HTML) yang digunakan untuk
menyimpan dan mengirim data dalam format yang terstruktur, mudah
dibaca manusia, dan bisa diproses oleh mesin.
Bedanya dengan HTML:
• HTML → untuk menampilkan konten di browser (fokus pada tampilan).
• XML → untuk menyimpan/menyusun data agar bisa dipertukarkan (fokus
pada struktur data). XML hanya menyimpan data, tidak menampilkan data
(beda dengan HTML yang menampilkan di browser).
JavaScript Dapat Mengubah Konten HTML
• Salah satu dari banyak metode JavaScript HTML adalah getElementById().
• Contoh di bawah ini "menemukan" elemen HTML (dengan id="demo"), dan
mengubah konten elemen (innerHTML) menjadi "Halo JavaScript":
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='[Link]("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
JavaScript Dapat Mengubah Nilai Atribut
HTML
• Dalam contoh ini JavaScript mengubah nilai src atribut (sumber) dari sebuah <img> tag:
JavaScript Dapat Mengubah Gaya HTML (CSS)
Mengubah gaya elemen HTML adalah varian dari mengubah atribut HTML:
JavaScript Dapat Menyembunyikan Elemen
HTML
Menyembunyikan elemen HTML dapat dilakukan dengan mengubah display gaya:
JavaScript Dapat Menampilkan Elemen HTML
Menampilkan elemen HTML tersembunyi juga dapat dilakukan dengan mengubah display
gaya:
Tahukah Anda?
• JavaScript dan Java adalah bahasa yang benar-benar berbeda, baik dalam
konsep maupun desain.
• JavaScript ditemukan oleh Brendan Eich pada tahun 1995, dan menjadi
standar ECMA pada tahun 1997.
• ECMA-262 adalah nama resmi standar tersebut. ECMAScript adalah nama
resmi bahasa tersebut.
Tag <script>
Dalam HTML, kode JavaScript disisipkan di antara tag <script>dan </script>.
Fungsi dan Acara JavaScript
• JavaScript function adalah blok kode JavaScript, yang dapat dieksekusi saat
"dipanggil".
• Misalnya, suatu fungsi dapat dipanggil saat suatu peristiwa terjadi, seperti
saat pengguna mengklik tombol.
JavaScript di <head> atau <body>
• Anda dapat menempatkan sejumlah skrip dalam dokumen HTML.
• Skrip dapat ditempatkan di <body>, atau di <head>bagian halaman HTML,
atau di keduanya.
JavaScript di <head>
• Dalam contoh ini, JavaScript function ditempatkan di <head> bagian halaman HTML.
• Fungsi ini dipanggil saat tombol diklik:
JavaScript di <body>
• Dalam contoh ini, JavaScript function ditempatkan di <body> bagian halaman HTML.
• Fungsi ini dipanggil saat tombol diklik:
Menempatkan skrip di bagian bawah elemen
<body> meningkatkan kecepatan tampilan,
karena interpretasi skrip memperlambat
tampilan.
JavaScript Eksternal
• Skrip juga dapat ditempatkan di file eksternal:
• Skrip eksternal praktis ketika kode yang sama digunakan di banyak halaman web yang berbeda.
• Berkas JavaScript memiliki ekstensi berkas .js .
• Untuk menggunakan skrip eksternal, masukkan nama file skrip dalam src atribut (sumber) dari
sebuah <script> tag:
Anda dapat menempatkan referensi skrip eksternal di dalam <head>atau <body>sesuai
keinginan Anda.
Skrip akan berperilaku seolah-olah berada tepat di tempat <script>tag berada.
Skrip eksternal tidak dapat berisi <script>tag.
Keuntungan JavaScript Eksternal
Menempatkan skrip dalam file eksternal memiliki beberapa keuntungan:
•Ini memisahkan HTML dan kode
•Ini membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
•File JavaScript yang di-cache dapat mempercepat pemuatan halaman
Untuk menambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip:
Referensi Eksternal
Skrip eksternal dapat direferensikan dalam 3 cara berbeda:
•Dengan URL lengkap (alamat web lengkap)
•Dengan file path (seperti /js/)
•Tanpa path apa pun
JavaScript Output
JavaScript dapat "menampilkan" data dengan berbagai cara:
•Writing into an HTML element, using innerHTML or innerText.
•Writing into the HTML output using [Link]().
•Writing into an alert box, using [Link]().
•Writing into the browser console, using [Link]().
Pelajari
TUGAS
Tugas 1 – Validasi Form Sederhana
• Form dengan input nama & email.
• Jika kosong → tampilkan pesan error.
• Jika email tidak sesuai dengan format email → beri peringatan.
Tugas 2 – Kalkulator Mini
• Input 2 angka + tombol operasi (tambah, kurang, kali, bagi).
• Hasil muncul di bawah form.
Tugas 3 – Jam Digital Real-Time
• Tampilkan jam berjalan (HH:MM:SS) yang update setiap detik.
Tugas 4 – Ganti Tema Website (Dark/Light Mode)
• Buat tombol untuk mengubah background & warna teks.
Tugas 5 – Buatlah halaman web profi diri sederhana yang terdiri dari HTML,
CSS dan Javascript.
• Kurang lebih seperti contoh
TERIMAKASIH
SELAMAT MENGERJAKAN DAN TETAP SEMANGAT