Scribd
Unggah
64 tayangan

Jobsheet 1 Pengantar JavaScript

Dokumen ini memberikan pengantar tentang JavaScript dengan menjelaskan tujuan pembelajaran yaitu mengenal JavaScript, menulis kode JavaScript, dan menampilkan hasilnya di web. Dokumen ini juga menjelaskan dasar-dasar JavaScript seperti fungsi, penulisan, dan cara menampilkan hasilnya di HTML. Terakhir memberikan contoh tugas praktik membuat halaman web menggunakan JavaScript.

Diunggah oleh

Aziz
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
64 tayangan

Jobsheet 1 Pengantar JavaScript

Dokumen ini memberikan pengantar tentang JavaScript dengan menjelaskan tujuan pembelajaran yaitu mengenal JavaScript, menulis kode JavaScript, dan menampilkan hasilnya di web. Dokumen ini juga menjelaskan dasar-dasar JavaScript seperti fungsi, penulisan, dan cara menampilkan hasilnya di HTML. Terakhir memberikan contoh tugas praktik membuat halaman web menggunakan JavaScript.

Diunggah oleh

Aziz
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Jobsheet 1

Pengantar JavaScript

I. Tujuan Pembelajaran
1. Siswa dapat menjelaskan bahasa pemrograman JavaScript
2. Siswa dapat meletakkan penulisan kode JavaScript dengan benar
3. Siswa dapat menampilkan hasil dari pemrograman JavaScript melalui
web
II. Dasar Teori
1. Fungsi JavaScript
JavaScript adalah bahasa pemrograman yang digunakan dalam
pengembangan website agar lebih dinamis dan interaktif. Jika sebelumnya
hanya mengenal HTML dan CSS, belajar JavaScript dapat meningkatkan
fungsionalitas pada halaman web. Bahkan dengan JavaScript ini bisa
membuat aplikasi, tools, atau bahkan game pada web.
Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan
bahasa pemrograman jenis interpreter, sehingga tidak memerlukan
compiler untuk menjalankannya.

Berikut beberapa hal yang bisa dilakukan dengan JavaScript:

a. JavaScript dapat merubah isi HTML


Sebelum di klik Setelah di klik

b. JavaScript dapat merubah isi dari atribut HTML

Menyalakan Lampu Mematikan Lampu


c. JavaScript dapat merubah style sebuah elemen HTML

Sebelum di klik Setelah di klik

2. Penulisan JavaScript
Pada halaman HTML penulisan JavaScript dibungkus dengan tag
<script> dan </script>. Terdapat beberapa cara untuk meletakkan
JavaScript di halaman HTML:
a. Meletakkan JavaScript di bagian <head> halaman HTML
b. Meletakkan JavaScript di bagian halaman <body> HTML

c. Meletakkan JavaScript diluar dari Halaman HTML (External)


Cara ini paling sering dilakukan karena JavaScript yang
ditulis dapat dengan mudah untuk dikelola dan dipanggil
kembali ketika dibutuhkan di banding dengn cara penyimpanan
internal. Untuk menggunakan teknik ini pertama simpan dulu
kode JavaScript dengan extensi file .js . Kemudian panggil
kembali di halaman HTML dengan atribut src di dalam tag
<script>.

Simpan File.Js Panggil File JavaScript

Catatan: selain JavaScript dapat dipanggil menggunakan file.


JavaScript External juga dapat disimpan dan dipanggil
menggunakan URL (https://www.tes.com/js/myScript.js) atau
Path seperti (/js/myScript.js).
3. Tampilan JavaScript dalam halaman HTML
Seperti yang sudah kita ketahui bersama bahwa JavaScript dapat
digunakan untuk menambah fungsionalitas dari halaman website. Salah
satunya untuk menampilkan data.

Terdapat beberapa cara yang bisa yang bisa digunakan untuk


menampilkan data pada JavaScript:
a. innerHTML
Cara ini dapat dilakukan dengan memberikan id pada elemen
HTML kemudian memberikan nilai pada elemen tersebut.

Kode JavaScript Hasil Output

b. document.write()
Menggunakan document.write() disarankan hanya digunakan
untuk testing karena penggunakan document.write ketika halaman
HTML setelah dimuat akan menghapus seluruh halaman HTML dan
mengganti dengan isi yang ada di document.write().

Kode program
Sebelum di load Sesudah di load

c. window.alert()
Penggunakan windows.alert() sering digunakan untuk
menampilkan peringatan di halaman website contoh penggunaannya
sebagai berikut:

d. console.log()
Sintaks ini sangat sering digunakan untuk debugging yang akan
kita pelajari di jobsheet berikutnya. Berikut contoh penggunaannya:
III. Alat
1. Laptop
2. Text Editor (VS Code)
3. Browser (Google Chrome)
4. Koneksi Internet

IV. Langkah Kerja


1. Persiapkan alat praktik sesuai dengan rekomendasi pada jobsheet.
2. Perhatikan keselamatan kerja.
3. Bacalah instruksi dengan teliti.
4. Kirim pekerjaan dengan tepat waktu.

V. Tugas Praktik
Setelah mempelajari teori dari pengantar JavaScript pada tugas
Praktikum kali ini. Silahkan membuat halaman website yang memenuhi
kriteria berikut:
1. Halaman HTML yang dibuat memiliki tema yang spesifik. (Poin 20)
2. Minimal tugas memiliki satu file HTML. (Poin 20)
3. JavaScript minimal dapat merubah 3 elemen HTML (Poin 60)

Anda mungkin juga menyukai