LAPORAN PRAKTIKUM 5

KOMPUTER DAN PEMROGRAMAN (CODING)

DISUSUN OLEH:
Nama : Raka Teo Endrawan
NPM : E1J021067

Nama Asisten Dosen :

1. Adha Dont Differatama (G1A019055)
2. Febrianto Ramandes (G1A019015)

Dosen Pengampu:
Junas Haidi, S.T.,M.T

PROGRAM STUDI AGROEKOTEKNOLOGI

FAKULTAS PERTANIAN
UNIVERSITAS BENGKULU
2022
 BAB 1

PENDAHULUAN

1. Latar belakang
JavaScript merupakan teknologi pemrograman paling populer peringkat
pertama, dan diikuti dengan HTML/ CSS pada peringkat kedua. Selama tujuh tahun
berturut-turut, JavaScript menjadi bahasa pemrograman yang paling umum
digunakan (“Developer Survey Result”, 2019). JavaScript biasanya dipasangkan
dengan HTML dan CSS untuk membuat website maupun aplikasi web. Web
Developer adalah jenis pekerjaan yang selalu dibutuhkan dari tahun ke tahun di era
teknologi ini. Apapun jenis bisnisnya ketika ingin memiliki nama berskala nasional
maupun internasional membutuhkan minimal sebuah website untuk periklanan,
sarana komunikasi antara klien dan pemilik, web app untuk melakukan transaksi
daring, atau sekedar company profiles untuk menunjukkan profesionalitas
perusahaan. JavaScript, HTML, dan CSS adalah teknologi pemrograman paling
dasar dalam pembuatan web maupun web app. Namun, tidak jarang ditemukan
sebuah web yang dibentuk hanya menggunakan JavaScript. Setiap elemen di
dokumen seperti head, tables, table headers, maupun isi table merupakan bagian
dari Document Object Model (DOM) untuk sebuah dokumen. Oleh karena itu,
semua elemen tersebut dapat diakses dan dimanipulasi menggunakan DOM dan
sebuah scripting language seperti JavaScript.

2. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
a. Mengenal dan memahami penggunaan Bahasa pemrograman HTMLdan
CSS untuk merancang website.
b. Membuat tampilan website sederhana menggunakan HTML dan CSS.

1
 BAB 2

TINJAUAN PUSTAKA

JavaScript memiliki kendali penuh dalam web, contoh kendalinya:

JavaScript dapat mengubah semua elemen HTML pada halaman, JavaScript dapat

mengubah semua atribut HTML pada halaman, JavaScript dapat mengubah semua

CSS styles pada halaman web, JavaScript dapat menghapus elemen dan atribut

HTML yang ada, JavaScript bisa menambah elemen dan atribut HTML baru,

JavaScript dapat bereaksi terhadap seluruh HTML events di dalam halaman web,

dan JavaScript dapat membuat HTML events baru di dalam halaman web

(w3schools, 2019).

JavaScript adalah bahasa pemrograman yang penting karena

JavaScript merupakan bahasa dari web browser. Hubungannya dengan browser

membuat JavaScript menjadi salah satu bahasa pemrograman paling populer di

dunia. Web telah menjadi platform penting untuk pengembangan aplikasi, dan

JavaScript merupakan satu-satunya bahasa yang ditemukan dalam semua browser.

Selain kekurangannya, JavaScript sangatlah ringan dalam performa, tetapi agar

dapat menggunakan JavaScript dengan baik, keterbatasan-keterbatasannya perlu

diketahui secara jelas (Crockford, 2008). Client-side JavaScript berisi beberapa

fitur yang membuatnya terlepas dari bahasa pemrograman lainnya. Pertama,

JavaScript dieksekusi dibawah model asynchronous. Ini memungkinkan event

handlers tereksekusi sesuai permintaan, saat pengguna berinteraksi dengan

komponen aplikasi web. Kedua, kebanyakan bagian dari JavaScript dirancang

untuk berinteraksi dengan entitas eksternal yang dikenal sebagai Document Object

Model (DOM). Menggunakan DOM, JavaScript dapat digunakan untuk

mengakses

atau memanipulasi komponen-komponen yang tersimpan di dalam DOM sehingga

2
memungkinkan halaman web berubah tanpa memerlukan sebuah page reload.

Meskipun fitur tersebut memungkinkan sebuah aplikasi web menjadi lebih

interaktif, hal tersebut juga memperkenalkan kesalahan pada kode JavaScript.
Mayoritas (65%) dari kesalahan kode JavaScript berhubungan dengan DOM,
artinya error dan exception yang didapat ketika mengembangkan suatu web
berasal dari programmer yang salah dalam melakukan interaksi dengan DOM
(Ocariza, et al., 2013).

Oleh karena masalah yang ditemukan, diperlukan sebuah aplikasi

pembelajaran untuk membantu pemula yang telah memahami dasar HTML, CSS,
dan JavaScript agar dapat membuat web yang interaktif dan mengurangi
kebingungan atau kesalahan pengembang yang belum fasih dalam pengembangan
aplikasi web ketika berinteraksi dengan Document Object Model. Sudah ada
penelitian tentang gamifikasi pembelajaran bahasa pemrograman Java (Beltran, et
al., 2016).

Sudah ada penelitian gamifikasi pembelajaran tentang konsep

pemrograman (Elshiekh & Butgerit, 2017). Namun, belum ditemukan aplikasi
metode gamifikasi tentang pembelajaran JavaScript HTML Document Object
Model sehingga hal ini sangat cocok untuk dijadikan topik penelitian.

Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data

yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang
disebut API (Application Programming Interface). Sebagai gambarannya adalah
sebagai berikut:

3
 BAB 3

SOAL DAN PEMBAHASAN

• Soal nomor 1

Gambar 1.0 Source Code soal no 1

Source code

<!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>Soal1</title>

</head>

<body>

<p id="paragraf">

Ubah Isi teks dengan Javascript</p>

<button onclick="testFunstion">Di Pencet Aja Ni</button>

</body>

4
<script>

function testFunstion(){

document.getElementById('paragraf').innerHTML = "Hallo Javascript"}

</script>

</html>

Output

Gambar 1.2 Hasil Output

• Pembahasan document.getElementById() :
getElementById() adalah pemilih JavaScript yang mengembalikan elemen
DOM dengan mencocokkan atribut id -nya. innerHTML menunjuk ke
konten elemen di antara tag buka dan tutupnya.
getElementById() yaitu fungsi untuk memilih elemen berdasarkan atribut
id . pada percobaan saya, saya membuat box/kotak pesan berisi “Di Pencet
Aja Ni”

• Soal nomor 2

a. Menampilkan teks dengan menggunakan fungsi document.write()

Input:

5
 Gambar 2.0 Source code Soal No 2

Source code:

<!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> saol 2</title>

</head>

<body>

<p> Menampilkan teks dengan Javascript</p>

</body>

<script> document.write(14 * 12 * 9)</script>

</html>

Output:

6
 Gambar 2.1 Hasil Output Soal nomor 2

• Pembahasan document,write :

Document.write () metode ekspresi dapat ditulis HTML atau kode JavaScript

untuk dokumen. Pada source code Gambar 2.0 saya memasukkan oprasi
14*12*9,maka pada Javascript menampilkan hasil Oprasi nya yaitu 1.512

b. Mempilkan teks dengan fungsi window.alert()

Input:

Gambar 2.2 Source code window.alert

7
Source code:

<!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>soal 2(2)</title>

</head>

<body>

<p>Menampilkan teks dengan Javascript</p>

<button onclick="myFunction()">Cubolah di tekan</button>

</body>

<script>

function myFunction() {

alert("Wailah di tekan nian")

</script>

</html>

Ouput:

8
 Gambar 2.3 Hasil Output window.alert

• Pembahasan window.alert:

Metode window.alert atau alert () digunakan untuk menampilkan dengan pesan

khusus dan peringatan tombol kotak konfirmasi. Dapat dilihat pada gambar 2.3
terdapat Output tombol kotak pesan khusus jika kita menekan kotak tombol yang
tersedia di halaman web.

c. Menampilkan teks dengan fungsi console.log()

Input:

Gambar 2.4 Source code console.log()

9
Souce code:

<!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>Soal 2 (3)</title>

</head>

<body>

<p> Menampilkan teks dengan Javascript </p>

</body>

<script>

console.log(10 + 12)

</script>

</html>

Ouput:

Gambar 2.5 Hasil Output console.log()

10
 • Pembahasan console.log :

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console

Javascript. Fungsi console.log() biasanya digunakan untuk debugging. Karena
setiap pesaan error di Javascript selalu ditampilkan di dalam Console.

• Soal nomor 3

Gambar 3.0 Source Code No 3

Source code:

<!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>soal 3</title>

</head>

<body>

</body>

11
<script>

var x

var y

x = 10

y=3

const z = x + y

document.getElementById('var').innerHTML = z

</script>

</html>

Ouput:

Gambar 3.1 Hasil Output Soal No 3

• Pembahasan document.getElementById() :

getElementById digunakan untuk mengambil suatu value dari form input yang
pastinya dari element HTML dimana element tersebut sudah kita buatkan id.
Maka kita dapat menggunakan getElementById. Sebagai contoh misalnya
saya ingin mengambil value atau nilai dari suatu form input text.

12
 BAB 5

PENUTUP

1. Kesimpulan

Berdasarkan praktikum yang telah praktikan lakukan dapat disimpulkan

bahwa dalam membuat website sangat dibutuhkan oleh sebuah ketelitian dan
keterampilan dasar. Dalam menyusun suatu website membutuhkan dasar atau
landasan. Dasar atau landasan yang dimaksud adalah pemahaman penggunaan
Bahasa pemograman antara lain HTMLCSS dan JSS. Terampil HTML dapat
menjadikan seorang programmer terampil membuat serta menyusun sebuah
website yang ingin dibuat.Lalu mahir menggunakan CSS dapat untuk membuat
programmer mempercantik dan mendesain website yang akan dibuat semenarik
mungkin.

2. Saran

Saran dari saya sebagai praktikan adalah untuk praktikum selanjutnya

yaitu untuk lebih teliti lagi dalam menginput sebuah Bahasa pemrograman serta
menyusun program yang diinginkan dengan benar.Untuk penggunaan
CSS,Javascript,dan DOM lebih terampil lagi.

13
 DATAR PUSTAKA

Crackford. D. 2008. Javascript:The.Good Parts by Douglas Crackford

Penuntun praktikum. 2022. Modul 5 html,css dan javascript . Bengkulu:

Universitas Bengkulu.

Ocariza F. et al. 2013. An Empirical Study of Client-Side JavaScript Bugs

W3schools.com . 2019. HTML,CSS,and Javascript

14
15
 KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN
UNIVERSITAS BENGKULU
FAKULTAS PERTANIAN
PROGRAM STUDI AGROEKOTEKNOLOGI
Jalan W.R. Supratman Kandang Limun Bengkulu
Bengkulu 38371 A Telepeon : (0736)344087, 22105-227

LEMBAR ACC PROYEK CODING

Nama Mahasiswa : Raka Teo Endrawan

NPM : E1J021067

Dosen : Junas Haidi, S.T.,M.T

Asisten :

1. Adha Dont Differatama (G1A019055)

2. Febrianto Ramendes (G1A019015)

Laporan Pratikum Tanda ACC

Hari/Tanggal Laporan diberikan

16