LAPORAN LATIHAN

MATA KULIAH
PEMOGRAMAN INTERNET DAN E-COMMERCE

Nama : Muhammad Fajrianto

NPM : G1A019037

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS BENGKULU
2021
Modul 5
1. Latihan 1 (js1.html)
Code

Hasil

Penjelasan :
Fungsi document.write() pada JavaScript berfungsi menampilkan data langsung
pada halaman web (bukan pada kotak dialog layaknya fungsi window.alert()), fungsi
ini dapat di gunakan untuk menampilkan data langsung saat halaman web selesai di
muat (loaded) atau di eksekusi pada event tertentu misalnya saat tombol di klik.

2. Latihan 2 (js2.html)
Code

Hasil
 Penjelasan :
Kode di atas ini akan menampilkan pesan, ketika di klik maka akan tampil
teks berkat adanya event onclick() yang terdapat pada javascript. Event tersebut
mengakibatkan elemen tersebut dapat di klik.

3. Latihan 3 (js3.html)
Code

Hasil

Penjelasan :
Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu
sendiri, maupun di program yang lain. Di atas merupakan sebuah fungsi javascript,
yang dapat di tulis dengan function nama_fungsi(){ }. Di dalam fungsi kita dapat
membuat instruksi algoritma yg di perlukan. Penempatan file .js di atas juga disimpan
secara eksternal, untuk menghubungkan script eksternal tersebut kita perlu memberikan
atribut src kepada tag <script> lalu mengarahkan addres dimana file eksternalnya
tersimpan.

4. Latihan 4 (js4.html)
Code
 Hasil

Penjelasan :
Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan
berbagai macam nilai seperti string (teks), number (angka), objek, array, dan
sebagainya. Kita bisa ibaratkan, variabel itu seperti wadah untuk menyimpan sesuatu.
Pada contoh di atas, kita membuat variabel bernama title dengan nilai berupa teks
(string): "Ayo Semangat Pratikum".

5. Latihan 5 (js5.html)
Code
 Hasil

Penjelasan :
Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu
sendiri, maupun di program yang lain. Di atas merupakan sebuah fungsi javascript,
yang dapat di tulis dengan function nama_fungsi(){ }. Di dalam fungsi kita dapat
membuat instruksi algoritma yg di perlukan.
6. Latihan 6 (js6.html)

Code

Hasil

Penjelasan :
OnMouseOver adalah suatu kejadian yang terjadi ketika sebuah elemen html
diletakkan cursor mouse. OnMouseOut adalah suatu kejadian yang terjadi ketika
cursormouse meninggalkan elemen html.
7. Latihan 7 (js7.html)

Code

Hasil

Penjelasan :
Percabangan If merupakan bentuk percabangan yang paling sederhana jika
dibandingkan dengan bentuk percabangan lain. Percabangan if hanya memiliki satu
kondisi, setiap perintah program yang ada dalam blok if akan di eksekusi saat kondisi
yang ditetapkan bernilai benar (true). Blok else memungkinkan program untuk
menjalankan pernyataan alternatif jika kondisi bernilai salah (false). Jika pada bentuk
pecabangan IF hanya memikiki satu kondisi. Pada bentuk percabangan Else if
mempunyai lebih dari satu kondisi.
8. Latihan 8 (js8.html)

Code

Hasil

Penjelasan :
Untuk membuat kode looping kita perlu mendeklarasikan variable secara bertahap
yaitu :

➢ Inisialisasi adalah saat pertama kali kita mendeklarasi sebuah nilai awal,
dimana nilai awal akan berubah selama belum memenuhi syarat kondisi.
➢ Kondisi berfungsi untuk mengecek perubahan yang terjadi setiap kali terjadi
eksekusi iterasi perulangan dengan menggunakan operator perbandingan.
➢ Eksekusi Iterasi proses akhir setiap kali terjadi eksekusi iterasi, biasanya
digunakan untuk proses penambahan (increment) atau pengurangan
(decrement).

9. Latihan 9 (js9.html)
 Code

Hasil :

Penjelasan :

Selain for ada juga while untuk operasi loop atau perulangan pada javascript, dalam
prakteknya menggunakan while harus dengan teliti, karena tidak ada syarat wajib pada
saat menentukan inisialisasi seperti pada For. Pada fungsinya, while hanya memberikan
opsi kondisi, tidak seperti for mengharuskan mendeskripsikan kebutuhan terlebih
dahulu. Kode diatas menampilkan console 1 sampai dengan 10, perhatikan pada bagian
increment ++, anda diwajibkan melakukan penambahan atau pengurangan setiap kali
eksekusi terkahir dijalankan, gunanya untuk melakukan pengecekan pada perubahan
nilai variabel. Kenapa demikian? jika tidak menambahkan penambahan atau
pengurangan sesuai dengan kebutuhan maka proses perulangan tidak akan pernah
berhenti dan komputer anda akan crash karna proses yang tidak ada ujungnya.

10. Latihan 10 (js10.html)

Code

Hasil

Penjelasan :

Penggunaan switch dan case di javascript :

➢ Kondisi pada switch hanya di isi satu kali saja.

➢ Pengisian nilai untuk mencocokan kondisi dengan memasukan nilai di case.
➢ Apabila nilai-nilai yang ada pada case tidak memenuhi syarat maka akan
kembali ke default.

Blok default tidak harus diisi, bagian tersebut opsional apabila tidak ada kondisi yang
memenuhi syarat maka akan kembali ke default.
11. Latihan 11 (js11.html)

Code

Hasil :

Penjelasan :
Dialog prompt() berfungsi untuk mengambil sebuah inputan dari pengguna.
Dialog prompt() akan mengembalikan sebuah nilai string dari apa yang diinputkan oleh
pengguna. Fungsi alert pada script javascript, yang kode ini berfungsi untuk
menghasilkan keluaran berupa pesan khusus kepada pengguna sebagai reaksi.
Modul 6
Praktikum kali ini, kita akan membuat playlist lagu menggunakan HTML DOM.
Instruksi:
1. Buatlah Folder dengan nama 4digit-terakhir-NIM-anda. Misalnya folder 1234.
2. Buka text editor Notepad++.
3. Simpan terlebih dahulu file tersebut dengan nama project sesuai dengan nomor 4 digit
NIM terakhir anda masing-masing. Contoh : 1234.html
(Note. Gunakan ketentuan ini untuk semua file praktikum ini, contoh : 1234.html , 1234.js
dan 1234.css)
4. Selanjutnya yang kita lakukan adalah membuat dokumen HTML dengan sebuah form dan
elemen list yang nantinya akan menampung playlist lagu yang diinputkan, seperti yang
terlihat pada Gambar 3 berikut.

Code

Penjelasan :
<HTML>……..</HTML> berfungsi untuk membuka sekaligus menutup seluruh kode yang
terdapat di dalam HTML. <HEAD>………..</HEAD> untuk mendefenisikan bagian kepala
dokumen dari halaman web. <TITLE>………….</TITLE> untuk mendeklarasikan judul
dokumen. <BODY>………</BODY> untuk mendefinisikan isi dari halaman web yang akan
ditampilkan oleh browser. <script src="9037.js"></script> untuk meletakkan javascript ke
dalam html, <link rel="stylesheet" href="9037.css"> untuk memasukkan file CSS ke dalam
html, <h2>Playlist Lagu</h2> untuk membuat sebuah heading dengan text “Playlist Lagu”,
<form>……….</form> untuk membuat sebuah form dengan inputan dari user sekaligus
membuat tombol “Tambah Lagu”. <ul id="playlist"></ul> untuk mengurutkan suatu daftar
secara tidak beraturan berupa karakter atau simbol.

Jadi kita akan mempraktikan cara menambahkan elemen baru pada dokumen HTML dengan
menggunakan javascript, yang membuat dokumen HTML menjadi lebih interaktif.
Di dalam terdapat sebuah element input dengan tipe text filed untuk mengetikkan judul lagu
dan atribut placeholder yang menampilkan penjelasan dari kolom input. dan elemen input
lainnya dengan tipe button untuk meng-submit judul lagu yang baru ditambahkan.
Playlist yang diinputkan akan muncul dalam bentuk list untuk itu kita membutuhkan elemen
list <ul></ul>, saat ini list lagu masih kosong tapi kita akan mengisinya dengan Javascript pada
instruksi selanjutnya. Jika script diatas dijalankan akan terlihat seperti gambar dibawah ini :

5. Tambahkan aksi pada button “Tambah Lagu” dengan souce Code Javascript seperti berikut:

setelah tambahkan import SC tersebut ke file html. hasilnya ketika dijalankan adalah
sebagai berikut:

6. Selanjutnya bagaimana menangkap text (judul lagu) yang diinputkan user dengan cara
mengambil element input dari DOM dengan menggunakan method getElementById untuk
mendapatkan nilai (value property) pada text elemen input berupa text yang diinputkan user
pada kolom input, dengan cara sebagai berikut:
 Maka hasilnya akan seperti gambar di bawah ini:

7. Sekarang kita akan menampilkan playlist pada halaman web.

Sebelumnya kita telah meletakkan list kosong pada dokumen HTML (<ul></ul>).

Lagu yang diinputkan akan masuk kedalam list (playlist) dengan cara menambahkan
elemen <li></li> didalam elemen <ul></ul> setiap kali lagu baru dimasukkan.

Tambahkan SC javascript berikut ini untuk menambahkan elemen <li> dalam elemen
<ul>.

Kemudian susunan DOM yang baru adalah :

Kemudian hasilnya adalah :
8. Tambahkan Script CSS berikut agar tampilan lebih enak dipandang. Beri nama 4 digit
nim terakhir anda:

Penjelasan :
Kode body{font-family:arial, sans-serif;} untuk menentukan font apa yang akan digunakan
pada teks di halaman web, ul#playlist{…………} untuk membuat suatu daftar secara tidak
beraturan dengan tambahan border (Garis tepi dari sebuah komponen), margin (jarak setelah
Border), padding (jarak komponen Body ke bagian Border) dan gambar background
(gambar latar belakang) yang telah ditentukan sesuai dengan kode yang tertulis pada gambar
diatas.
Hasil akhirnya adalah sebagai berikut :