Scribd
Unggah
59 tayangan6 halaman

Modul Praktikum 4 Telkom PWT

Modul ini membahas tentang fundamental Javascript melalui praktikum inline script, embedded script, external script, dan tugas membuat halaman web sederhana menggunakan template dan mengimplementasikan JS HTML DOM.

Diunggah oleh

Dhava
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
59 tayangan6 halaman

Modul Praktikum 4 Telkom PWT

Modul ini membahas tentang fundamental Javascript melalui praktikum inline script, embedded script, external script, dan tugas membuat halaman web sederhana menggunakan template dan mengimplementasikan JS HTML DOM.

Diunggah oleh

Dhava
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

Pemrograman Website Modul Praktikum 4

Modul Praktikum 4
Fundamental Javascript

Novian Adi Prasetyo, S.Kom., M.Kom. 1


[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 4
`
4.1. Persiapan
1. Aktifkan Xampp
2. Koneksi Internet

4.2. Inline Script


1. Buat folder baru dengan nama practice4 di dalam folder yang sudah di clone dari
project gitlab masing-masing.
2. Buat file baru dengan nama inline_script.html.
3. Isi dengan kode seperti berikut ini.

4. Untuk menampilkan output dalam console dilakukan dengan cara membuka


melaui inspeksi (ctrl+shift+i).

Novian Adi Prasetyo, S.Kom., M.Kom. 2


[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 4
`
4.3. Embedded Script
1. Buat file baru dengan nama embedded_script.html di dalam folder practice4.
2. Isi dengan kode seperti berikut ini.

3. Jalankan kode di atas pada browser, akan muncul kolom input tinggi dan alas. Isi
kolom tersebut lalu klik tombol hitung luas segitiga maka hasil perhitungan akan
muncul di bawahnya.

4. Pada embedded script kode javascript dapat diletakan pada head atau body, jika
script tidak di haruskan untuk di load sebelum konten body di tampilkan maka
lebih baik script di tulis dalam body, hal ini bertujuan agar ketika script
membutuhkan waktu saat melakukan load object tidak mengganggu proses load
html.
5. Masih pada file yang sama, tambahkan kode berikut di dalam tag <body>.

6. Tampilan html telah di tambahkan, selanjutnya agar fungsi pada tombol konversi
dapat bekerja maka diperlukan pembuatan fungsi dengan nama konversi().
7. Masih pada file yang sama, tambahkan kode berikut di dalam tag <script>.

Novian Adi Prasetyo, S.Kom., M.Kom. 3


[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 4
`

8. Jalankan kode di atas pada browser, akan muncul kolom input nilai angka. Isi
kolom tersebut lalu klik tombol konversi maka hasil konversi nilai akan muncul di
bawahnya.

9. Masih pada file yang sama, tambahkan kode berikut di dalam tag <body>.

10. Tampilan html telah di tambahkan, selanjutnya agar fungsi pada tombol cetak
bekerja dan hitung total dapat bekerja secara otomatis ketika tombol angka di
tekan maka diperlukan pembuatan fungsi dengan nama hitung_total() dan cetak().
11. Masih pada file yang sama, tambahkan kode berikut di dalam tag <script>.

Novian Adi Prasetyo, S.Kom., M.Kom. 4


[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 4
`

4.4. External Script


1. Ubah hasil praktikum pada tahap 4.3. menjadi external script.
2. Buat file baru dengan nama external_script.html di dalam folder practice4.
3. Isi dengan seluruh kode html pada tahap 4.3.
4. Buat folder baru dengan nama js, lalu buat file baru pada folder tersebut dengan
nama script1.js. Isi dengan seluruh kode javascript pada tahap 4.3.
5. Panggil script1.js pada halaman external_script.html.
6. Hasilnya dapat dilihat pada
http://novian.kelasmm1.xyz/practice4/external_script.html

Novian Adi Prasetyo, S.Kom., M.Kom. 5


[email protected]
085-799-255-070
Pemrograman Website Modul Praktikum 4
`
4.5. Tugas
1. Buat sebuah halaman html dengan nama index.html di dalam folder practice4
yang di dalamnya berisikan kode template dari
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s , bagi
yang ingin menggunakan template lain di perbolehkan. (20)
2. Buka https://www.w3schools.com/js lalu implementasikan JS HTML DOM,
tautkan masing-masing hasil implementasi pada index.html. Sehingga hasilnya
kurang lebih seperti berikut ini http://novian.kelasmm1.xyz/practice4/ (40)
3. Lakukan commit & push ke gitlab repository project. (15)
4. Upload ke hosting. (15)
5. Kumpulkan dalam bentuk link file dari gitlab dan link halaman tugas pertemuan 4.
Contoh :
Link file dari gitlab : https://gitlab.com/novian66/quotesrestapi/-
/blob/master/application/controllers/index.html
Link halaman web : http://novian.kelasmm1.xyz/practice4/

6. Keterlambatan pengurangan 30 point.


7. Form di tutup pada H+3.

Novian Adi Prasetyo, S.Kom., M.Kom. 6


[email protected]
085-799-255-070

Anda mungkin juga menyukai