Laporan P-Web Pertemuan

LAPORAN PRAKTIKUM
PEMOGRAMAN WEBSITE
JAVASCRIPT DASAR
Oleh :
Nama : Rahmat hidayat
NIM : 22343027
Dosen Pengampu :
Syukhri, ST., M.CIO
PRODI INFORMATIKA
DEPARTEMEN ELEKTRONIKA
FAKULTAS TEKNIK
UNIVERSITAS NEGERI PADANG
2022
1. Latihan 1
Penjelasan:
Kode di atas merupakan JavaScript yang menetapkan variabel str dengan string "W3Schools is
great!" dan kemudian menampilkan string tersebut di dalam elemen p pada halaman HTML
dengan menggunakan method document.write(). Selain itu, kode juga menampilkan panjang
string str menggunakan property length. Hasilnya, pada halaman HTML akan muncul teks
"W3Schools is great!" di dalam elemen p dan angka 19 yang merupakan panjang dari string
tersebut.
2. Latihan 2
Penjelasan :
Kode di atas adalah contoh JavaScript yang menguji apakah sebuah string mengandung kata
tertentu atau tidak.
 Pertama, variabel str diinisialisasi dengan string "W3CSchools is great!".
 Kemudian, indexOf() dipanggil pada str dengan parameter kata "School".
 Jika indexOf() mengembalikan nilai yang lebih besar dari atau sama dengan nol, maka
kata tersebut ditemukan di dalam string dan posisi pertama karakter kata dalam string
ditampilkan menggunakan document.write().
 Jika tidak ditemukan, maka pesan "School not found!" akan ditampilkan.
3. Latihan 3
Penjelasan :
Kode di atas adalah sebuah halaman web HTML yang mengandung satu elemen skrip
JavaScript. Saat halaman web dimuat, skrip ini akan mencari kata "great" dalam variabel str dan
jika kata tersebut ditemukan, akan menampilkan kata itu di dalam dokumen HTML
menggunakan metode document.write().
4. Latihan 4
Penjelasan :
Kode tersebut adalah kode HTML yang mengandung sebuah script JavaScript. Script
JavaScript ini memuat dua metode string yaitu substr() dan substring() yang digunakan untuk
mengambil sebagian dari string.
Pada baris ke-4, variabel str diisi dengan string "W3CSchool is great!". Kemudian, pada baris
ke-5 dan ke-6, digunakan method substr() dan substring() untuk mengambil sebagian dari
string str. Method substr() mengembalikan sebagian string dimulai dari karakter kedua
(indeks 1) sebanyak enam karakter sedangkan method substring() mengembalikan sebagian
string dimulai dari karakter kedua (indeks 1) hingga karakter keenam (indeks 5).
.
5. Latihan 5
Penjelasan :
Kode tersebut adalah sebuah dokumen HTML yang memiliki sebuah elemen <body> yang berisi
sebuah script JavaScript. Pada script tersebut terdapat variabel 'str' yang berisi string "Hello
JavaScripters!". Kemudian dilakukan dua kali pemanggilan fungsi 'document.write()', pertama
untuk menampilkan string 'str' dalam huruf kecil dan kedua untuk menampilkan string 'str' dalam
huruf besar.
6. Latihan 6
Penjelasan :
Kode tersebut merupakan kode HTML yang menampilkan 6 nama dalam sebuah array famname
menggunakan JavaScript. Pertama-tama, variabel famname dideklarasikan sebagai array kosong
dengan panjang 6. Kemudian, setiap elemen dalam array famname diisi dengan sebuah nama.
Setelah itu, perulangan for digunakan untuk menampilkan setiap elemen famname pada
dokumen HTML menggunakan metode document.write(). Setelah setiap elemen ditampilkan,
tanda baris baru ditambahkan menggunakan tag "<br>".
7. Latihan 7
Penjelasan :
Kode tersebut adalah sebuah program JavaScript yang menampilkan nama-nama dalam sebuah
array ke dalam dokumen HTML menggunakan fungsi document.write(). Nama-nama disimpan
dalam variabel famname sebagai sebuah array. Kemudian, loop for digunakan untuk mengambil
setiap elemen dalam array dan menampilkannya satu per satu menggunakan fungsi
document.write() diikuti dengan tag <br> untuk membuat baris baru di setiap pengulangan.
Hasil akhirnya adalah daftar nama-nama keluarga yang ditampilkan dalam dokumen HTML.
8. Latihan 8
Penjelasan :
Kode tersebut merupakan kode HTML yang menampilkan tanggal hari ini menggunakan
JavaScript. Saat kode tersebut dijalankan, script akan membuat sebuah objek tanggal baru
menggunakan constructor Date(), kemudian menampilkan tanggal, bulan, dan tahun dari objek
tersebut menggunakan method getDate(), getMonth() (dengan ditambah 1 karena nilai bulan
dimulai dari 0), dan getFullYear(), dan menuliskannya di dalam dokumen HTML menggunakan
method document.write().
9. Latihan 9
Penjelasan :
Kode tersebut merupakan sebuah dokumen HTML yang berisi JavaScript untuk menampilkan
waktu saat ini pada halaman web. Saat kode dijalankan, variabel d akan berisi objek Date yang
merepresentasikan waktu saat ini. Kemudian, dengan menggunakan metode getHours(),
getMinutes(), dan getSeconds() dari objek Date, kode tersebut akan menampilkan jam, menit,
dan detik saat ini pada halaman web.
10. Latihan 10
Penjelasan :
Kode tersebut menampilkan sebuah halaman HTML yang hanya memiliki satu skrip JavaScript.
Skrip tersebut membuat objek Date baru yang merepresentasikan tanggal dan waktu saat ini.
Kemudian, tahun pada tanggal tersebut diubah menjadi 1990 menggunakan metode
setFullYear(). Akhirnya, nilai dari objek Date yang telah diubah ditampilkan di halaman
menggunakan document.write(). Oleh karena itu, halaman akan menampilkan tanggal dan waktu
di tahun 1990.
11. Latihan 11
Penjelasan :
Kode tersebut adalah kode HTML dengan skrip JavaScript yang mencetak waktu saat ini dalam
format UTC (Koordinat Universal Waktu). Variabel d diinisialisasi dengan waktu saat ini,
kemudian metode getUTCHours(), getUTCMinutes(), dan getUTCSeconds() digunakan untuk
mendapatkan jam, menit, dan detik saat ini dalam zona waktu UTC. Kemudian, hasilnya dicetak
ke dalam dokumen HTML dengan menggunakan metode document.write().
12. Latihan 12
Penjelasan :
Kode tersebut adalah sebuah dokumen HTML yang mengandung sebuah script JavaScript. Saat
halaman HTML ini dimuat di browser, kode JavaScript akan dieksekusi.
Kode JavaScript ini membuat variabel d untuk menyimpan tanggal saat ini menggunakan new
Date(). Selanjutnya, variabel weekday merupakan array yang berisi hari-hari dalam seminggu.
Kemudian, dengan menggunakan document.write(), kode ini menampilkan pesan teks "Today is"
diikuti dengan nama hari saat ini yang diperoleh dari indeks d.getDay() di dalam array weekday.
Dengan demikian, ketika halaman HTML ini dimuat, pesan teks akan ditampilkan di halaman
dengan informasi hari saat ini.
13. Latihan 13
Penjelasan :
Kode tersebut adalah kode JavaScript yang menampilkan tanggal, hari, dan bulan saat ini pada
halaman HTML. Kode tersebut berisi beberapa variabel seperti "d" yang diinisialisasi sebagai
objek Date() untuk mendapatkan waktu saat ini, "weekday" yang berisi array nama hari dalam
seminggu, "monthname" yang berisi array nama bulan dalam setahun.
Kode ini menggunakan metode built-in dari objek Date untuk mendapatkan hari, tanggal, dan
bulan saat ini. Kemudian, kode ini menggunakan metode document.write() untuk menampilkan
hasilnya pada halaman HTML. Dalam contoh ini, kode akan menampilkan "Thursday 10. Mar
2023" jika dijalankan pada tanggal 10 Maret 2023.
14. Latihan 14
Penjelasan :
Kode tersebut adalah kode HTML dengan Javascript yang menampilkan jam digital yang terus
berjalan di halaman web. Kode ini memiliki fungsi-fungsi yang mengatur waktu dan membuat
timer untuk memperbarui tampilan waktu setiap 1 detik. Pada saat halaman dimuat, fungsi "start"
dijalankan untuk memulai timer dan menampilkan jam pada elemen input dengan nama
"display". Sedangkan ketika halaman ditutup, fungsi "stop" dijalankan untuk menghentikan
timer.
15. Tugas Evaluasi
Source Code HTML
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,
100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css" integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM
/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="style.css" type="text/css" rel="stylesheet"/>
<title>Biodata Diri</title>
</head>
<body>
<nav class="navigation">
<ul class="nav">
<li>
<a>
<i class="fa fa-home"></i>
</a>
</li>
<li class="active"><a href="index.html">Home</a></a></li>
<li><a href="hobby.html">Hobby</a></a></li>
<li><a href="galery.html">Gallery</a></a></li>
<li><a href="kontak.html">Kontak</a></a></li>
</ul>
</nav>
<header style="text-align: center;">
<br>
<img src="img/foto.jpg" alt="foto" width="200" height="200"
style="border-radius: 50%;">
<h1>
<script type="text/javascript">
var str=("rahmat hidayat")
document.write("<br>")
document.write(str.toUpperCase())
</script>
</h1>
<article style="text-align: center;">
<br>
<p>
var nama = prompt("Siapa nama Anda?");
document.write("Hai " + nama + ", Nama saya Rahmat hidayat.
Saya adalah mahasiswa Informatika UNP. Saya berasal dari kota Padang." );
</SCRIPT>
</p>
<br>
<p>
Saat ini saya tinggal di jalan palinggam 1 no 2.
</p>
</article>
<br>
</header>
<hr>
<br>
<h2 align="center">Riwayat Pendidikan</h2>
<div style="max-width: 600px; margin: 3em auto">
<table border="1" width="100%">
<thead>
<tr>
<th>Sekolah</th>
<th>Tahun</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><a
href="https://sekolah.data.kemdikbud.go.id/index.php/chome/profil/b0001e79-2ff5-
e011-81f4-25e38bd5aaee" target="_blank">SDN 11 Pasa Gadang</a></td>
<td align="center">2009-2015</td>
</tr>
<tr>
<td align="center"><a href="https://smpn2padang.sch.id/"
target="_blank">SMPN 2 Padang</a></td>
</tr>
<tr>
<td align="center"><a href="https://sman2-padang.sch.id/"
target="_blank">SMAN 2 Padang</a></td>
</tr>
<tr>
<td align="center""><a href="https://unp.ac.id/"
target="_blank">Universitas Negeri Padang</a></td>
<td align="center">2022-Sekarang</td>
</tr>
</tbody>
</table>
<br>
<div align="center">
<FORM NAME = "formWaktu">
Waktu Sekarang :
<INPUT TYPE = "TEXT"
NAME = "teksWaktu"
VALUE = ""
SIZE = "22">
</FORM>
function aturWaktu() {
var hari =
["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
var bulan
=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var sekarang = new Date();
var jam = sekarang.getHours();
var menit = sekarang.getMinutes();
var detik = sekarang.getSeconds();
var hariIni = hari[sekarang.getDay()];
var bulanIni = bulan[sekarang.getMonth()];
var waktuSekarang = jam + ":" + menit + ":" + detik + "
" + hariIni + " / " + sekarang.getDate() + " " + bulanIni + " " +
sekarang.getFullYear();
document.formWaktu.teksWaktu.value = waktuSekarang;
setTimeout(aturWaktu, 1000);
}
aturWaktu();
</script>
</div>
</div>
<hr>
<footer style="text-align: center;">
<p>Copyright © 2023 Rahmat Hidayat.</p>
</footer>
</body>
</html>
Source Code CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Raleway", sans-serif;
background-color: #DFCDC3;
background-image: image();
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(17, 9, 9);
margin: auto;
align-items: center;
width: 980px;
}
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
nav ul li a:hover{
color: red;
}
.active {
background-color: chocolate;
}
.content {
margin: 20px;
}
.social{
margin: auto;
margin-top: 20px;
margin-bottom: 50px;
}
.social a{
font-size: 30px;
color: #212121;
margin-right: 20px;
}
.social a:hover{
color: orange;
}
.gallery-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-item {
margin: 10px;
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;`
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.2);
}
Analisis :
Pada kode HTML biodata sebelumnya, saya menambahkan beberapa kode javascript yaitu yang
pertama :
1. Untuk mengubah huruf pada string menjadi huruf besar semua
Membuat variabel "str" dengan nilai "rahmat hidayat" dan kemudian menampilkan teks tersebut
dalam huruf besar (uppercase) dengan menggunakan metode "toUpperCase()". Hasil output akan
ditampilkan di bawah baris baru (line break) menggunakan fungsi "document.write()".
2. Untuk menanyakan nama pengunjung web
Pada baris pertama, kode ini akan memunculkan sebuah dialog prompt yang akan menampilkan
pesan "Siapa nama Anda?" dan menunggu pengguna untuk memasukkan nama mereka.
Kemudian, nilai nama yang dimasukkan oleh pengguna akan disimpan di dalam variabel
bernama "nama".
Pada baris kedua, kode ini akan menampilkan pesan "Hai [nama pengguna yang dimasukkan]",
diikuti dengan pesan lain yang menjelaskan bahwa si penulis adalah seorang mahasiswa
Informatika UNP yang berasal dari kota Padang. Pesan ini ditampilkan menggunakan fungsi
"document.write()", yang menampilkan teks di dalam dokumen HTML.
3. Untuk menampilkan waktu sekarang
Kode tersebut adalah sebuah fungsi JavaScript yang disebut "aturWaktu". Fungsi ini digunakan
untuk menampilkan waktu saat ini pada halaman web.
Kode tersebut menggunakan variabel "hari" dan "bulan" untuk menyimpan nama hari dan bulan
dalam bentuk array. Kemudian, variabel "sekarang" digunakan untuk menyimpan objek Date
saat ini.
Variabel "jam", "menit", "detik", "hariIni", dan "bulanIni" digunakan untuk menyimpan
informasi waktu saat ini yang akan ditampilkan pada halaman web.
Selanjutnya, variabel "waktuSekarang" digunakan untuk menyimpan string yang berisi waktu
saat ini dan informasi tanggal dalam format yang telah ditentukan.
Terakhir, nilai "waktuSekarang" dimasukkan ke dalam elemen form dengan nama "teksWaktu"
menggunakan properti "value". Fungsi setTimeout digunakan untuk memanggil fungsi
"aturWaktu" setiap satu detik untuk memperbarui waktu yang ditampilkan.

Laporan P-Web Pertemuan

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan P-Web Pertemuan

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

3. Untuk menampilkan waktu sekarang

Anda mungkin juga menyukai