Modul Praktikum Javascript 1 PDF

Javascript Dasar
H a l 3

1.3 PRAKTIK
1.3.1 Hello Javascript
Pada bagian ini, akan dipelajari mengenai:
1. Cara mendeklarasikan variabel dan tipe data dalam Javascript
2. Melakukan proses assignment baru ke dalam variabel dan mencetak nilai dari variabel
tersebut
3. Penggunaan operator aritmatika dan konkatenasi
Soal 1.3.1.1
Buatlah sebuah dokumen HTML berjudul Hello Javascript. Dokumen HTML tersebut berisi kode
Javascript yang berisi 4 variabel yang diinisiasi oleh 4 tipe dasar dalam Javascript. Cetaklah
nilainya. Lalu ubahlah semua variabel dengan nilai yang baru dan cetak lagi hasilnya. Kemudian
lakukan operasi aritmatika dan konkatenasi pada variabel yang bersesuaian dan cetak hasilnya.
Langkah Penyelesaian 1.3.1.2
1. Membuat dokumen HTML berjudul Hello Javascript, sisipkan tag <script>
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Hello Javascript</title>
5. <script type="text/javascript">
6.
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>

2. Sisipkan kode Javascript di dalam dokumen HTML, di dalam tag <script>
a. Inisiasi 4 variabel dengan 4 tipe dasar dan cetak hasilnya
1. var bulat = 50;
2. var desimal = 20.5;
3. var tanda = true;
4. var kata = "hello javascript";
5. document.write("var bulat: "+bulat);
6. document.write("<br /> var desimal: "+desimal);
7. document.write("<br /> var tanda: "+tanda);
8. document.write("<br /> var kata: "+kata);
b. Pengubahan 4 variabel dan cetak hasilnya
1. bulat = 400;
2. desimal = 103.9;
3. tanda = false;
4. kata = "praktikum 1";
5. document.write("<br /> var bulat: "+bulat);
Javascript Dasar

H a l 4

c. Operasi aritmatika dan konkatenasi pada variabel dan cetak hasilnya
1. var opr1 = bulat + 1945;
2. var opr2 = desimal * 27.8;
3. var opr3 = kata + "hello javascript";
Solusi Lengkap 1.3.1.3
1. <!DOCTYPE html>
2. <html>
3. <head>
6. var bulat = 50;
7. var desimal = 20.5;
8. var tanda = true;
9. var kata = "hello javascript";
10. document.write("var bulat: "+bulat);
14. bulat = 400;
15. desimal = 103.9;
16. tanda = false;
17. kata = "praktikum 1";
22. var opr1 = bulat + 1945;
23. var opr2 = desimal * 27.8;
24. var opr3 = kata + "hello javascript";
28. </script>
29. </head>
30. <body>
31. </body>
32. </html>
Pengamatan 1.3.1.4
1. Apa yang terjadi jika kutip dua pada document.write diganti menjadi kutip satu?
2. Apa kegunaan dari <br /> pada tiap string dalam document.write?
3. Apa yang terjadi jika dilakukan operasi pembagian dengan bilangan desimal pada
variabel bulat?
4. Apa yang terjadi jika variabel bulat ditambahkan dengan variabel kata?
5. Apa yang terjadi jika dilakukan operasi perkalian pada variabel kata?
Javascript Dasar

H a l 5

1.3.2 Conditional & Looping Javascript
Pada bagian ini, akan dipelajari mengenai:
1. Penggunaan operator perbandingan dan logika
2. Penggunaan operator perulangan
Soal 1.3.2.1
Buatlah sebuah dokumen HTML berjudul Conditional & Looping Javascript. Dokumen HTML
tersebut berisi kode Javascript yang berisi beberapa variabel yang sudah diinisiasi. Lakukan
operasi perbandingan (if, if-else, switch) dan operasi perulangan (while, do-while, for) pada
variabel-variabel tersebut dan cetak hasilnya.
Langkah Penyelesaian 1.3.2.2
1. Membuat dokumen HTML berjudul Conditional & Looping Javascript, sisipkan tag
<script>
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Conditional & Looping Javascript</title>
6.
7. </script>
8. </head>
9. <body>
10. </body>
11. </html>

2. Sisipkan kode Javascript pada dokumen HTML, di dalam tag <script>
a. Perbandingan if
1. var a = 2;
2. if (a>0) {
3. document.write(a + ": positif <br />");
4. }
b. Perbandingan if-else
1. var b = 0;
2. if (b>0) {
3. document.write("positif <br />");
4. } else if (b==0) {
5. document.write("nol <br />");
6. } else {
7. document.write("negatif <br />");
8. }

Javascript Dasar

H a l 6

c. Perbandingan switch
1. var c = -2;
2. switch (c) {
3. case "0": document.write("nol <br />");break;
4. case "1": document.write("satu <br />");break;
5. default : document.write("lainnya <br />");
6. }
d. Perulangan while
1. var i = 5;
2. while (i>0) {
3. document.write(i + "<br />");
4. i--;
5. }
e. Perulangan do-while
1. var j = 5;
2. do {
3. document.write(j + "<br />");
4. j--;
5. } while (j>0);
f. Perulangan for
1. for (k=6;k>0;k--) {
2. document.write(
3. "<h" + k + ">Header " + k + "</h" + k + ">"
4. );
5. }
Solusi Lengkap 1.3.2.3
1. <!DOCTYPE html>
2. <html>
3. <head>
6. var a = 2;
7. if (a>0) {
8. document.write(a + ": positif <br />");
9. }
10. var b = 0;
11. if (b>0) {
12. document.write("positif <br />");
13. } else if (b==0) {
14. document.write("nol <br />");
15. } else {
16. document.write("negatif <br />");
17. }
18. var c = -2;
19. switch (c) {
20. case "0": document.write("nol <br />");break;
21. case "1": document.write("satu <br />");break;
22. default : document.write("lainnya <br />");
23. }
Javascript Dasar

H a l 7

24. var i = 5;
25. while (i>0) {
26. document.write(i + "<br />");
27. i--;
28. }
29. var j = 5;
30. do {
31. document.write(j + "<br />");
32. j--;
33. } while (j>0);
34. for (k=6;k>0;k--) {
35. document.write(
36. "<h" + k + ">Header " + k + "</h" + k + ">"
37. );
38. }
39. </script>
40. </head>
41. <body>
42. </body>
43. </html>
Pengamatan 1.3.2.4
1. Apa yang terjadi jika var a diisi dengan angka 0?
2. Apa yang terjadi jika var b diisi dengan string angka?
3. Apa kegunaan break pada operasi switch?
4. Apa perbedaan antara operasi while dengan do-while?

Modul Praktikum Javascript 1 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Modul Praktikum Javascript 1 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Javascript Dasar

Anda mungkin juga menyukai