Modul 5 Mumuh

TUGAS MODUL 5
Disusun untuk memenuhi tugas

Mata Kuliah: Pemrograman Web 1
Dosen Pengampu:
Gina Dewi Sonia, M.T.I
Disusun oleh:
Mumuh Abdu Somad
(20214121031)
INFORMATIKA S-1
FAKULTAS TEKNIK
UNIVERSITAS ISLAM AL – IHYA KUNINGAN
Jl. Mayasih No. 11 Cigugur, Kuningan Jawa Barat Telp.(0232)-873186
Tahun Pelajaran 2020/2021

1. Menuliskan Teks
<!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>Menuliskan teks</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Kode di atas menggunakan kode JavaScript (JS) yang dideklarasikan dengan tag
<script>[kode_JS]</script>. Kode JS yang digunakan pada program di atas adalah
document.write(“Hello World!”); yang berfungsi untuk menampilkan teks Hello World! Di
tampilan web.
2. Memformat teks dengan tag HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Memformat teks dengan tag HTML</title>
</head>
<body>
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
Sama seperti sebelumnya, kali ini saya menggunakan tag <h1> di dalam kode JS dan
menampilkannya, sehingga hasilnya terlihat seperti gambar yang ada di samping kode.
3. JavaScript yang diletakan pada bagian head
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScrivt yang diletakan di bagian head</title>
function message() {
alert("Ini adalah pop up peringatan/pengingat yang akan tampil jika halaman
direfresh");
}
</script>
</head>
<body onload="message()"></body>
</html>
Dalam penulisan kode JS, Anda memiliki setidaknya 4 cara, yaitu menuliskan langsung
pada tag, penulisan pada file eksternal, penulisan pada atribut dan penulisan pada url.
Pada kode HTML di atas, saya akan menuliskan kode JS di dalam tak Head dan
kemudian memanggilnya di dalam tag body.
Function message(){ Kode JS di samping berguna untuk

Alert(“pesan_alert”); membuat sebuah pop up alert.
}
onload=”message()” Atribut di dalam tag Body tersebut
berguna untuk memanggil kode JS
dengan nama message.
4. JavaScript yang diletakan pada bagian body
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript yang diletakan di body</title>
</head>
<body>
document.write("Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia,
est.");
</script>
</body>
</html>
Saya berpikir kode ini memiliki kesamaan dengan poin nomor 1, jadi saya tidak akan
menganalisisnya.
5. JavaScript Eksternal
File HTML File JS
<!DOCTYPE html> function message() {
<html lang="en"> alert("Script untuk pesan pop up ini ditulis
<head> pada file external");
<meta charset="UTF-8" /> }
<meta name="viewport"
content="width=device-width, initial-
scale=1.0" />
<title>JavaScript External</title>
</head>
<body onload="message()">
<script src="5.js"></script>
</body>
</html>
Cara untuk memanggil file JS ke kode
HTML adalah dengan menambahkan
atribut src=”lokasi_fileJS” pada tag
<script>
6. Deklarasi variabel, memberi nilai dan menampilkannya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deklarasi variabel, memberi nilai, dan menampilkannya</title>
</head>
<body>
<script>
var name = "Tugas Poin 6, pembuatan variabel";
document.write("<h1>" + name + "</h1>");
</script>
</body>
</html>
Kode JS kali ini digunakan untuk pendeklarasian variabel, memberikan nilai dan
menampilkannya.
Var name Pendeklarasian sebuah variabel dengan
nama variabel name
Name = “nilai dari variabel” Apa yang ada di dalam tanda kutip adalah
nilai dari variabel
Document.write(“<h1>” + nama + “</h1>” Sama seperti menampilkan teks di halaman
web, tapi kali ini isi dari tag <h1> diganti
menggunakan sebuah variabel nama.
7. Fungsi
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
function myfunction(){alert("Hoja de puta");}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()" value="Call function" />
</form>
<p>Dengan menekan tombol, sebuah fungsi akan dipangil/diaktifkan.</p>
</body>
</html>
Kali ini adalah tentang penggunaan fungsi di JS, fungsi biasanya di deklarasikan dengan kode
function nama_fungsi(){
Isi/kode di dalam fungsi
}
8. Fungsi dengan argumen
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fungsi dengan Argumen</title>
function myfunction(txt) {
alert(txt);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Poin 8 selesai!')" value="Call function"
/>
</form>
<p>Dengan menekan tombol, sebuah fungsi dan argumen akan dipangil/diaktifkan.
Fungsinya akan menampilkan argumen dalam bentuk pop up alert.</p>
</body>
</html>
Sama seperti sebelumnya, akan tetapi penulisan isi untuk pop up-nya di tulis di dalam
atribut <input type=”button” onclick=”nama_fungsi(„isi pesan pop up‟)”>, dari kode itu,
kemudian akan diambil oleh kode JS function nama_fungsi(txt){alert(txt);} di mana
pesan pop up-nya akan diubah menjadi setara dengan txt.
9. Fungsi dengan argumen (lagi)
<!DOCTYPE html>
<html lang="en">
<head>
function myfunction(txt) {
alert(txt);
}
</script>
</head>
<body>
<form><input type="button" onclick="myfunction('Tidak ada!')" value="Apa hal baik
yang terjadi hari ini?" /> <input type="button" onclick="myfunction('Bombardir tugas!')"
value="Apa hal buruk yang terjadi hari ini?" /></form>
<p>Sama seperi poin sebelumnya</p>
</body>
</html>
Poin ini memiliki kode yang sama dengan yang sebelumnya, jadi saya akan melewatkan
analisisnya.
10. Fungsi yang mengembalikan suatu nilai
<!DOCTYPE html>
<html lang="en">
<head>
function myFunction() {
return "Hallo, yang semangat nugasnya!";
}
</script>
</head>
<body>
document.write(myFunction());
</script>
<p>Script yang berada di body memanggil sebuah fungsi.</p>
<p>Fungsinya akan mengembalikan sebuah teks.</p>
</body>
</html>
Dengan memanfaatkan kode return pada JS,
Anda bisa mengembalikan nilai dari suatu
fungsi. Dari contoh di atas, bisa dilihat jika
fungsi myfunction memiliki kode return yang
berisikan sebuah kalimat, kemudian dengan
dipanggilnya fungsi itu di dalam body, maka
kalimat yang ada di dalam return akan ditampilkan.
11. Fungsi dengan argumen yang mengembalikan suatu nilai
<!DOCTYPE html>
<html lang="en">
<head>
function total(numberA, numberB) {return numberA + numberB;}
</script>
</head>
<body>
document.write(total(60, 9));
</script>
<p>Script di body akan memanggil sebuah fungsi dengan 2 argumen, 60 dan 9</p>
<p>Fungsi return akan menjumlahkan kedua argumen tersebut.</p>
</body>
</html>
Sama seperti sebelumnya, tapi kali ini kode return digunakan untuk operasi penjumlahan
matematika.

Bahasa

Modul 5 Mumuh

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Modul 5 Mumuh

Diunggah oleh

Hak Cipta:

TUGAS MODUL 5

Disusun untuk memenuhi tugas

Gina Dewi Sonia, M.T.I

Mumuh Abdu Somad

Jl. Mayasih No. 11 Cigugur, Kuningan Jawa Barat Telp.(0232)-873186

Tahun Pelajaran 2020/2021

Function message(){ Kode JS di samping berguna untuk

Anda mungkin juga menyukai