Jobsheet Pemrograman Web SMT 2

JOBSHEET 1/ NAMA:.............................................../ABSEN:........./KELAS:............./NILAI:....................
JOBSHEET PRAKTIKUM
Satuan Pendidikan : SMK
Kelas/semester : X / 2 (Genap)
Mata Pelajaran : Pemrograman web
Alokasi Waktu : 4 x 45 Menit
Kompetensi Dasar:
Memahami format formulir pada halaman web
Materi Dasar:
Komponen entri teks (input teks password, dan input multiline) pada formulir halaman web
Tugas Peserta Didik:
a. Menyebutkan macam-macam entri teks

b. Mengidentifikasi tiap-tiap perbedaaan perintah/atau struktur entri teks
c. Membuat program menggunakan entri teks
A. Petunjuk Praktik
1. Nyalakan komputer sesuai SOP
B. Keselamatan Kerja
1. Gunakanlah pakaian kerja
2. Siapkan/kontrol media dan peralatan yang akan dipraktikkan
3. Ikutilah instruksi dari instruktur ataupun prosedur kerja yang tertera pada lembar kerja
4. Mintalah ijin dari instruktur anda bila hendak melakukan pekerjaan yang tidak tertera pada lembar kerja
5. Bersihkan/rapikan dan kontrol kembali media dan peralatan selesai praktik
C. Tujuan
1. Peserta didik dapat Menyebutkan macam-macam entri teks
2. Peserta didik dapat Mengidentifikasi tiap-tiap perbedaaan perintah/atau struktur entri teks
3. Peserta didik dapat Membuat program menggunakan entri teks
D. Alat dan Bahan:

1. Komputer
E. Langkah kerja
1. Sebutkan macam-macam entri teks
2. Jelaskan karakteristik/ciri-ciri entri teks menggunakan textarea dan menggunakan form
3. ketiklah program berikut ini,Tuliskan hasilnya setela program dijalankan di mozilla firefox atau di google chrome dan berikan analisa program nya.
<html>
<head> <title> tugas entri teks </title></head>
<body>
<p> < textarea name=”papan isi” cols=”40” Rows=”6”></textarea></p>
</body>
</html>
<html>
<head> <title> tugas entri password </title></head>
<body>
<form>
Password : <input type=”password” name=”password” maxlength=”6”>
</form>
</body>
</html>
<html>
<head> <title> tugas entri text dan submit </title></head>
<body>
<form>
Nama : <input type=”text” name=”nama” > <br>
Kelas : <input type=”text” name=”kelas” > <br>
<input type=”submit” value=”submit” >
</form>
</body>
</html>
6.Buatlah program menggunakan html untuk membuat tampilan sbb:
Nama :
Kelas :
No :
Hobby :
Password :
SUBMIT RESET
F. Hasil Kerja
1.
2.
3.
4.
5.
6.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Menjelaskan Komponen entri pilihan (input file, radio, checkbox, select dan datalist) pada formulir halaman web
1. Mengidentifikasi karakteristik tiap entri pilihan

2. Membuat program menggunakan entri pilihan
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengidentifikasi karakteristik tiap entri pilihan
2. Peserta didik dapat Membuat program menggunakan entri pilihan
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
<html>
<head>
<title>radio button </title>
</head>
<body>
ISILAH DATA ANDA DIBAWAH INI: <br>

<form>
Nama Siswa :<input type="text" name="nama" >
</form>
A.Tingkat Pendidikan :
<form>
<input type="radio" name="pendidikan" value="KELAS X"> Kelas X <br>
<input type="radio" name="pendidikan" value=" KELAS XI "> Kelas XI <br>
<input type="radio" name="pendidikan" value=" KELAS XII "> Kelas XII <br>
</form>
<br>
B.Keterangan kehadiran:
<form>
<input type="checkbox" name="vehicle" value=" Sakit "> Hadir <br>
<input type="checkbox" name="vehicle" value="Ijin">Tidak hadir <br>
</form>
<br>
C.Jurusan :
<form>
<select name="jurusan">
<option value="TKR">TKR</option>
<option value="MM">MM</option>
<option value="TPM">TPM</option>
</select>
</form>
<input type="submit" value="kirim" value="kirim">
<br>
</body>
</html>
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Mata Pelajaran : Pemrograman Web
Kompetensi Dasar:
Memahami style pada halaman web
Materi Dasar:
Cara kerja dan anatomi Cascading Style Sheet
a. Mengidentifikasi perbedaan andata selector class dan id

b. Membuat program menggunakan CSS
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengidentifikasi perbedaan andata selector class dan id
2. Peserta didik dapat Membuat program menggunakan CSS
D.Alat dan Bahan:
1. Komputer
E.Langkah kerja
1.Ketiklah program berikut ini.
<html>
<head> <tittle>Contoh selektor kelas dan ID</tittle>
<style type="text/css">
.kotak { Border: solid; Padding: 5px; font-size:50; }
#jawa { Background-color: red; /* latarbelakang */}
#inggris { Font-weight: bold; Font-size:100; Background-color:green; }
</style>
</head>
<body>
<div id="Indonesia" class="kotak">Selamat pagi !</div>
<div id="jawa">Sugeng enjing !</div>
<div id="inggris" class="kotak">Good morning !</div>
</body>
</html>
Silahkan anda tuliskan hasil dari program diatas.
Silahkan anda edit deklarasi class / id nya sehingga menjadi tampilan yang berbeda dari contoh diatas
Berikan analisa anda tentang program diatas.
2. Ketiklah program berikut ini.

<html>
<head> <tittle> contoh </tittle>
.btn { color:yellow; background:black; border: 2px ; font-family: "calibri", Times, serif; font-size: 14px; }
</style>
</head>
<body>
<table>
<tr>
<td>
<form>
<p><label for="nama"> Username</label><input type="text" name="nama" /></p>
<p><input type="submit" value="send" class="btn" /></p>
</form>
</td>
</tr>
</body>
</html>

Silahkan anda edit deklarasi class / id nya sehingga menjadi tampilan yang berbeda dari contoh diatas
Berikan analisa anda tentang program diatas
3. Buatlah html nya untuk menghasilkan tampilan seperti dibawah, Gunakanlah CSS untuk mengatur ditiap bagiannya. Anda bisa
menggunakan selector class dan selector ID
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Style pada teks
a. Mengidentifikasi karakteristik perintah style pada teks

b. Membuat program menggunakan style pada teks
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengidentifikasi perintah style pada teks
2. Peserta didik dapat Membuat program menggunakan style pada teks
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
<html>
<head> <tittle> modofikasi teks </tittle>
.cs1 { Border:solid; Padding: 1px; font-size:50; }
#cs2 { Background-color: red; /* latarbelakang */}
#cs3 { Font-weight: bold; Font-size:100; Background-color:green; }
.cs3 { color:yellow; background:black; border: 2px ; font-family: "calibri", Times, serif; font-size: 14px; }
p.cs4 { color:red; font-size:20 }
p.cs5 { letter-spacing: 1cm ;}
p.cs6 { text-decoration: line-through ;}
p.cs7 { word-spacing: 40px ;}
p.cs8 {line-height : 1cm;}
</style>
</head>
<body>
<p class="cs1" > kita belajajar css, yang ini call css style cs1 </p>
<p class="cs4">
Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar karakter atau
huruf
</p>
<p class="cs5"> yang ini adalah contoh <br> mengatur spasi pada <br> paragraf use css <br> </p>
<p class="cs6" > contoh medifikasi yang lainnya </p>
</body>
</body>
</html>

2. Buatlah program untuk tampilan seperti dibawah ini. Gunakan CSS untuk pengerjaannya.Untuk menyelesaikan yang
seperti dibawah ini adalah gabungan antara CS dengan tabel.
F.Hasil Kerja
1.
2.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Style pada multimedia
a. Mengidentifikasi karakteristik perintah style pada multimedia

b. Membuat program menggunakan style pada t multimedia
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengidentifikasi perintah style pada multimedia
2. Peserta didik dapat Membuat program menggunakan style pada multimedia
D.Alat dan Bahan:
1. Komputer
E.Langkah kerja
<html>
<head> <tittle> </tittle>
<style>
p.cs1 { Margin-top: 10px; Float: left; clear:both; width: 200px ; height: 200px; }
p.cs2 { Margin-top: 10px; Float: right; clear: both; widht: 100px; height: 100px;}
p.cs3 {margin-top: 10px; float: right; clear: both; width: 100px; height: 100px}
p.cs4 { color: blue; font-size: 20 ;}
</style> </head>
<body>
<p class="cs4"> Contoh CSS pada gambar / image </p> <br>
<p class="cs1"> <img src="gb1.jpg"> </p>
<p class="cs2"> <img src="gb2.jpg"> </p>
<p class="cs3"><img src="gb1.jpg"> </p>
</body>
</html>

Dari program diatas coba ubahlah marginnya dan float nya serta clear nya, kemudian simpulkan apa fungsi dari masing-masing tag html tersebut.
2. Ketiklah program berikut ini.

<html>
<head>
<tittle>Contoh CSS</tittle>
<style>
Img { Margin-top: 10px; Float: left;Clear: both; width:200px; height:200px;}
</style>
</head>
<body>
Contoh CSS pada gambar (img)<br>
<img src="gb1.jpg" >
<img src="gb2.jpg">
<img src="gb3.jpg">
</body>
</html>

Berikan analisa anda tentang program diatas
3. Buatlah program menggunakan gabungan antara CSS dan tabel untuk menampilkan tampilan yang sbb:
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Style pada tabel
1. Mengidentifikasi karakteristik perintah style pada tabel

2. Membuat program menggunakan style pada tabel
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengidentifikasi perintah style pada tabel
2. Peserta didik dapat Membuat program menggunakan style pada tabel
D.Alat dan Bahan:
1. Komputer
E.Langkah kerja
<html>
<head>
<style>
table,td,th { border:1px solid red; }
table { width:50%; }
th { height:75px; }
td { width: 50px; height: 50px;text-align: center;}
p { color:blue; font-size:20;}
</style> </head>
<body>
<p> Pada contoh ini membahas tentang :<br>
1.style pada th( judul tabel) <br>
2.style pada td(kolom) dan pengaturan teks nya<br>
3.style pada garis table</p>
<table>
<tr> <th>Nama Depan</th> <th>Nama</th> </tr>
<tr> <td>Ema</td> <td>Fulata</td> </tr>
<tr> <td>Novero</td> <td>Habba</td></tr>
</table>
</body>
</html>

Dari contoh diatas Ubahlah sehingga menjadi tampilan yang berbeda.. minimal 2 perubahan. Printscreen lah hasilnya dan berikan analisa anda terkait
dengan perubahan tersebut.
2. Buatlah program menggunakan CSS dan tabel untuk menampilkan tampilan yang sbb:
3. Buatlah program menggunakan CSS dan tabel untuk menampilkan tampilan yang sbb:
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Style pada formulir
1. Mengidentifikasi karakteristik perintah style pada tormulir

2. Membuat program menggunakan style pada formulir
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengidentifikasi perintah style pada formulir
2. Peserta didik dapat Membuat program menggunakan style pada formulir
D.Alat dan Bahan:
1. Komputer
E.Langkah kerja
<HTML>
<HEAD> <TITLE>Pengaturan Pada Form Text Area</TITLE>
<STYLE ="text/css">
form{ border:1px solid #666666; width : 70%; margin-left:0; /*jarak fieldset dari batas kiri layout*/
background-color:#ffff66;}
</STYLE> </HEAD>
<BODY>
<form >
<table>
<TR> <TD width="50" >Nama </TD> <TD width="175" > <textarea name="textarea"
cols=107></textarea></TD></TR>
<TR> <TD width="50" >Pesan </TD> <TD width="175" > <textarea name="textarea"cols=50 rows=14>
</textarea></TD> </TR>
</table>
</form>
</BODY>
</HTML>

2. Buatlah progam sehinggal memunculkan output seperti dibawah ini.

Program ini adalah penggunaan CSS pada form, tabel yang melipatkan textarea dan input type=submit.
Selamat mencoba.
3. Buatlah progam sehinggal memunculkan output seperti dibawah ini.

Program ini adalah penggunaan CSS pada form, tabel yang melipatkan textarea dan KHUSUS input type=submit nya berubah seperti dibawah ini.
( diawal tampilan biasa tapi pada saat di klik berubah tampilannya).Selamat mencoba
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Memahami teknik pemrograman pada halaman web
Materi Dasar:
Anatomi dan cara kerja kode javascript

a. Mengetahui pengertian javasricp

b. Menjelaskan ciri-ciri javasrcip
c. Mengetahui strukutur penulisan sricp pada javasricp
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat menjelaskan pengertian javascrip
2. Peserta didik dapat menyebutkan ciri-ciri javasricp
3. Peserta didik dapat mengetahui struktur penulisan sricp pada javasricp
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
1.Apa yang anda ketahui tentang java scrip
2.Sebutkan ciri-ciri javascrip
3.Tuliskan penulisan sricp dalam javasricp
4.Jelaskan bagaimana cara memberikan komentar pada javascrip
5.Ketiklah yang berikut ini, kemudian tuliskan hasilnya
<html>
<head>
<title>contoh program javascript</title>
</head>
<body>
<script language="javascript">
alert("Hallo !");
</script>
</body>
</html>
6. Ketiklah yang berikut ini, kemudian tuliskan hasilnya
<html>
<head> <title>contoh program javascript</title> </head>
<body>
document.write("Hallo !"); </script>
</body>
</html>
7.Apa perbedaan antara perintah alert dengan documen.write
F.Hasil Kerja
1.
2.
3.
5.
6.
7.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Dasar pemrograman client (variabel, tipe data, operator)

a. Mengetahui pengertian variabel

b. Mengetahui strukutur penulisan variabel pada javasricp
c. Menjalankan program dan menganalisa program
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengetahui pengertian variabel
2. Peserta didik dapat Mengetahui strukutur penulisan variabel pada javasricp
3. Peserta didik dapat Menjalankan program dan menganalisa program
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
1.Jelaskan pengertian dari variabel
2.Ada 3 teknik pemberian nama pada variabel, Sebutkan dan berikan contohnya
3.Tulislan sturktur variabel beserta inisialisasinya
4.Jelaskan apa yang dimaksud dengan tipe data, Integer, Float, String, Boolean.
5.ketiklah program berikut:
<html>
<head> <title> contoh 2 program hitung </title></head>
<body>
var hasil;
var nilai;
var nilai2 = 3;
nilai = 2;
document.write("hasil : ");
document.write(nilai - nilai2);
</script>
</body>
</html>
Tulislah bagaimana hasilnya.
Berikan analisa anda

<html>
<head> <title> contoh 2 program hitung </title></head>
<body>
var nilai;
var nilai2 = 3;
nilai = 2;
document.write(" maka hasilnya adalah : " + nilai * nilai2);

</script>
</body>
</html>
Tulislah bagaimana hasilnya.

7.Dari contoh soal no 5 dan 6, tuliskan perbedaannya
F.Hasil Kerja
1.
2.
3.
4.
5.
6.
7.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Dasar pemrograman client (variabel, tipe data, operator)

a. Mengetahui pengertian variabel

b. Mengetahui strukutur penulisan variabel pada javasricp
c. Menjalankan program dan menganalisa program serta membuat program
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengetahui pengertian variabel
2. Peserta didik dapat Mengetahui strukutur penulisan variabel pada javasricp
3. Peserta didik dapat Menjalankan program dan menganalisa program serta membuat program
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
<html>
<head> <title>contoh program halaman 145</title> </head>
<body>
var hasil=5*2+2;
document.write(hasil);
</script>
</body>
</html>
Tuliskan bagaimana hasilnya

<html>
<head> <title>contoh program halaman 145 menghitung rata2</title> </head>
<body>
var n1;
n1 = 2.3;
var n2 = 3.4;
var n3 = 4.5;
var n4 = 6.7;
var n5 = 7.8;
var n6 = 8.9;
var n7 = 9.10;
var n8 = 10.1;
var hasil;
hasil = ((n1+n2+n3+n4+n5+n6+n7+n8)/8);
document.write("PROGRAM RATA-RATA ");

document.write("<br> ");
document.write("diketahui bilangan berikut: ");
document.write("2.3 ; 3.4 ; 4.5 ; 6.7 ; 7.8 ; 8.9 ; 9.10 ; 10.1 ");
document.write("maka rata-rata bilangan diatas adalah : ");
document.write(hasil); </script>
</body>
</html>

Bagaimana cara/perintah untuk ganti baris pada javasricp
3. Buatlah program javascript untuk menghitung luas lingkaran jika diketahui jari-jarinya adalah
2.3
4. Diketahui variabel B bernilai 2.3, gunakan program javascript untuk memisahkan/mengambil

bagian berkoma dari bilangan diatas sehingga misal, variabel C akan bernilai 0.3
F.Hasil Kerja
1.
2.
3.
4.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Array 1 dimensi
a. Mengetahui strukutur penulisan array pada javasricp

b. Menjalankan program dan menganalisa program serta membuat program menggunakan array 1 dimensi
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengetahui strukutur penulisan array pada javasricp
menggunakan array 1 dimensi
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
<html>
<head><title> hal 151 </title></head>
<body>
var arrayBulan = ["jan", "feb", "march", "april", "mei", "juni","juli","agusts","sept","okt","nop","des"];
var arrayZodiak =["leo","pisces","gemini","cancer","sagitarius"];
document.write( "jika kamu lahir di bulan juni maka bintang kamu adalah: " + arrayZodiak[2] );
//hasil: gemini
</script>
</body>
</html>

2. ketiklah program berikut:

<html>
<head><title> hal 151 contoh </title></head>
<body>
var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah",
"Zebra"];
document.write("elemen ke 4 dari array adalah " + arrayHewan[3]);

//hasil: "elemen ke 4 dari array adalah Singa"
</script>
</body>
</html>

3. Diketahui himpunan namaHari = {“Senin”, “Selasa”, “Rabu” } dan himpunan bilanganBulat =

{1,2,3} masing-masing memiliki relasi satu-satu, dimana setiap satu bilangan bulat berpasangan
tepat dengan satu namaHari,. Buatlah program javascript menggunakan array 1 dimensi untuk
menunjukkan relasi ini.
Misal:
Program akan memunculkan output
4. ketiklah program berikut:
<html>
<body>
var elemenBil1 = 1;
var elementHari1 = "senin";
var elemenBil2 = 2;
var elementHari2 = "selasa";
var elemenBil3 = 3;
var elementHari3 = "rabu";
document.write(" jika bilangan yang anda pilih adalah 1, maka akan muncul " +elementHari1);
document.write("<br>");
document.write(" jika bilangan yang anda pilih adalah hari Rabu, maka akan muncul bilangan "
+elemenBil3);
</script>
</body>
</html>

Berikan analisa anda tentang array 1 dimensi dengan penggunaan var elemen.
F.Hasil Kerja
1.
2.
3.
4.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Struktur kontrol percabangan pada program client

a. Mengetahui strukutur percabangan menggunakan IF

b. Menjalankan program dan menganalisa program serta membuat program menggunakan IF
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengetahui strukutur percabangan menggunakan IF
menggunakan IF
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
<html>
<head><title> hal 157</title></head>
<body>
var umur;
umur = prompt ("masukkan umur");
umur = parseInt (umur);
if(umur >15 && umur < 21)

{document.write("kamu anak SMK");}
</script>
</body>
</html>

Apa fungsi perintah prompt
Apa fungsi operator &&

<html>
<head><title> hal 157</title></head>
<body>
var umur;
umur = prompt ("masukkan umur");
umur = parseInt (umur);
if(umur >15 && umur < 19)

{document.write("kamu anak SMK");}
else
{document.write("kamu bukan anak SMK lagi");}
</script>
</body>
</html>
3.Buatlah program menghitung luas lingkaran dengan inputan jari-jari terserah dari user sendiri.
Misal outputnya sbb:
Tampilan awal program
User menginputkan jari-jari
Jika klik ok maka muncul
4.Buatlah program menentukan remial siswa dengan inputan berupa nilai siswa.
Jika nilai siswa <= 80, maka nilai ditambahkan dengan skor 2 (misal jika dpt nilai 70 maka akan menjadi 72).
Dan outputnya adalah sbb:
Tampilan awal program
User menginputkan nilai ulangan
Jika klik ok maka muncul

F.Hasil Kerja
1.
2.
3.
4.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Struktur kontrol percabangan pada program client

a. Mengetahui strukutur percabangan menggunakan IF bersarang dan switch

b. Menjalankan program dan menganalisa program serta membuat program menggunakan IF bersarang dan
switch
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengetahui strukutur percabangan menggunakan IF bersarang dan switch
menggunakan IF bersarang dan switch
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
1.ketiklah program yang berikut ini tentang “ If bersarang “
<html>
<body>
var nilai;
nilai = prompt ("masukkan berat badan anda : ");
nilai = parseInt (nilai);
var arrayNama =["anda terlalu langsing","anda orang yang proporsional","anda agak sedikit
kegendutan",
"anda kegendutan","wahhh anda harus diet super ketat"];
if(nilai <= 40)

{alert(arrayNama[0]);
}
else if (nilai >= 41 && nilai <45)
{alert(arrayNama[1]);}
else if (nilai >= 45 && nilai < 50)
else if (nilai > 50 && nilai < 65)
else if (nilai > 66)
</script>
</body>
</html>
Bagaimana hasil dari program diatas setelah dijalankan

Variabel apa saja yang digunakan dalam program diatas
Berikan analisa anda terkait ptogram diatas
2. ketiklah program yang berikut ini tentang “ switch “

Karena program berikut masih belum selesai , Maka sempurnakanlah program dibawah ini:
<html>
<head><title> hal 158, switch </title></head>
<body>
var nilai;
nilai = prompt ("SELAMAT DATANG DI TEBAK-TEBAKAN BUAH
Silahkan masukkan angka 1 s/d 5 ");
var arrayNama =["mangga","pisang","jambu","duku","salak"];

switch (nilai)
{
case 1 : document.write("buah yang anda pilih adalah: " +arrayNama[0]);
break;
case 2 : document.write("buah yang anda pilih adalah: " +arrayNama[1]);
break;
}
</script>
</body>
</html>

3. ketiklah program yang berikut ini tentang “ switch “

Karena program berikut masih belum selesai , Maka sempurnakanlah program dibawah ini:
<html>
<head><title> hal 158, switch </title></head>
<body>
var nilai;
nilai = prompt ("masukkan angka 1 s/d 6 untuk menebak hewan apa yang ada didalamnya");
var arrayNama =["kuda","musang","terumbu","kucing","jalak"];
switch (nilai)
{
case 1 : alert("hewan yang anda pilih adalah: " +arrayNama[0]);
break;
break;
break;
}
</script>
</body>
</html>

Apa perbedaan antara soal nomer 2 dengan soal nomer 3
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Struktur kontrol perulangan pada program client

a. Mengetahui strukutur perulangan

b. Menjalankan program dan menganalisa program serta membuat program menggunakan perulangan
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
1. Peserta didik dapat Mengetahui strukutur perulangan
menggunakan perulangan
D.Alat dan Bahan:
1. Komputer
E.Langkah kerja
1.ketiklah program yang berikut ini tentang “ perulangan menggunakan FOR“
<html>
<body>
var i;
i = parseInt (i);
for ( i = 0 ; i < 3 ; i++)

{
document.write("hallo javascript <br>");
}
</script>
</body>
</html>
Ada cara lain mengganti baris dalam program diatas yaitu
Apa yang adapat anda simpulkan dari perintah for ( i = 0 ; i < 3 ; i++)
2. ketiklah program yang berikut ini tentang “ perulangan menggunakan WHILE“

<html>
<body>
var j;
j = parseInt (j);
var j = 0;
while(j<3)
{
document.write("arigato gozaimasu <br>");
j+=1;
}
</script>
</body>
</html>

Apa yg dpt anda simpulkan dari soal nomer 1 dan 2
3. ketiklah program yang berikut ini tentang “ perulangan menggunakan DO WHILE“

<html>
<body>
var k;
k = parseInt (k);
var k = 0;
do
{
document.write("INI PERULANGAN DENGAN DO (pernyataan) WHILE (kondisi) <br>");
k++;
}
while (k<3);
</script>
</body>
</html>

Apa yang adapat anda simpulkan tentang perulangan mengguanakan perintah Do While
F.Hasil Kerja
1.
2.
3.
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Menjelaskan Fungsi bawaan dan buatan user pada program client

a. Menjalankan program dan menganalisa program serta membuat program
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
1.ketiklah program yang berikut ini tentang “ PENGINPUTAN DATA BY USER“
<html>
<body>
var panjang;
panjang = prompt ("masukkan panjang Balok :");
panjang = parseInt (panjang);
var lebar;
lebar = prompt ("masukkan lebar Balok :");
lebar = parseInt(lebar);
var hasil;
hasil =panjang * lebar;
alert("Sehingga luas alasnya adalah adalah :" +hasil);
</script>
</body>
</html>
Tuliskan Bagaimana hasilnya setelah program dijalankan

Analisalah program diatas.
2.ketiklah program yang berikut ini tentang “ PENGGUNAAN FUNGSI PADA JAVASRICP“
<html>
<body>
function hitungLuasAlas ( p, l )
{ var luas = p * l; return luas; }
function hitungVolume ( la, t )

{ var vol = la * t / 2; return vol; }
var panjang = 5;
var lebar = 3;
var tinggi = 4;
var luasAlas;
var volume;
luasAlas = hitungLuasAlas(panjang, lebar);

volume = hitungVolume(luasAlas, tinggi);
alert("Maka luas alas nya adalah= ");

alert(luasAlas);
alert("Maka volumenya nya adalah= ");
alert(volume);
</script>
</body>
</html>
3.ketiklah program yang berikut ini tentang “ PENGGUNAAN FUNGSI PADA JAVASRICP“
<html>
<head><title> hal 172.2 </title></head>
<body>
function hitungLuasAlas(panjang,lebar )
{ var luas = panjang * lebar; return luas; }
function hitungVolume (panjang,lebar,tinggi)

{ var volume =panjang*lebar*tinggi ; return volume; }
var panjang;
panjang = prompt ("masukkan panjang Balok :");
panjang = parseInt (panjang);
var lebar;
lebar = prompt ("masukkan lebar Balok :");
lebar = parseInt(lebar);
var tinggi;
tinggi = prompt ("masukkan tinggi Balok :");
tinggi = parseInt(tinggi);
luas=hitungLuasAlas(panjang, lebar);
alert("Sehingga luas alasnya adalah adalah :" +luas);
volume=hitungVolume (panjang,lebar,tinggi);
alert("volume balok adalah :" +volume);
</script>
</body>
</html>

Apa perbedaan antara soal nomer 2 dan 3
4.Buatlah progam menghitung luas lingkaran , dengan inputan jari-jarinya adalah dari user.
Dalam program yang akan anda buat harus didalamnya mengandung fungsi ( function )
5.Buatlah program menghitung Nilai Rapot , Dimana ruus nilai rapot adalah sbb:
Nrapot = (2*Ruh+UTS+UAS+Rnh)/5
Inputan dari user berupa :
1. Rata-rata nilai UH (Ruh)
2. Nilai UTS (UTS)
3. Nilai UAS (UAS)
4. Rata-rata nilai harian (Rnh)
F.Hasil Kerja
1.
2.
3.
4
5
JOBSHEET PRAKTIKUM
Kompetensi Dasar:
Materi Dasar:
Menjelaskan Fungsi bawaan dan buatan user pada program client

a. Menjalankan program dan menganalisa program serta membuat program
A.Petunjuk Praktik
B.Keselamatan Kerja
C.Tujuan
D.Alat dan Bahan:

1. Komputer
E.Langkah kerja
1.ketiklah program yang berikut ini tentang “ PENGINPUTAN DATA BY USER, PENGGUNAAN FUNGSI “
<html>
<head><title> hal 172.6 mengihung nilai rata-rata 6 angka</title></head>
<body>
function hitungRata(n1,n2,n3,n4,n5,n6)
{ var Rata =(n1+n2+n3+n4+n5+n6)/6; return Rata; }
var n1;
n1 = prompt ("masukkan angka ke 1:");
n1 = parseInt (n1);
var n2;
n2 = parseInt (n2);
var n3;
n3 = parseInt (n3);
var n4;
n4 = parseInt (n4);
var n5;
n5 = parseInt (n5);
var n6;
n6= prompt ("masukkan angka ke 6:");
n6 = parseInt (n6);
Rata=hitungRata(n1,n2,n3,n4,n5,n6 );
alert("NILAI RATA-RATA DARI KE 6 ANGKA YANG ANDA INPUTKAN ADALAH :" +Rata);
</script>
</body>
</html>

2.Buatlah program menghitung Nilai Rapot , Dimana rumus nilai rapot adalah sbb:
Nrapot = (2*Ruh+UTS+UAS+Rnh)/5
5. Rata-rata nilai UH (Ruh)
6. Nilai UTS (UTS)
7. Nilai UAS (UAS)
8. Rata-rata nilai harian (Rnh)
9. Nilai rapot (Nakhir)
Kemudian sertakan fungsi if untun menentukan grade dari nilai rapot/ nilai akhir yang sdh didapat dengan
ketentuan sbb:
jika nilai akhir <80 maka akan memunculkan komentar GRADE ANDA C
jika nilai akhir >= 80 maka akan memunculkan komentar GRADE ANDA B
jika nilai akhir >=90 maka akan memunculkan komentar GRADE ANDA A
3.Gunakanlah fungsi berikut ini unutk membuat program menghitung luas kerucut.
1. Jari-jari
2. sisimiring
function hitungluaskerucut(jari,sisimiring)
{ var luaskerucut =3.14*jari *sisimiring+ 3.14*jari*jari; return luaskerucut; }
4. Gunakanlah fungsi berikut ini unutk membuat program menghitung luas kerucut.
1. alas
2. tinggi
function hitungluassegitiga(alas,tinggi)
{ var luassegitiga =0.5*alas*tinggi; return luassegitiga; }
F.Hasil Kerja
1.
2.
3.
4

Jobsheet Pemrograman Web SMT 2

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

Jobsheet Pemrograman Web SMT 2

Diunggah oleh

Hak Cipta:

Format Tersedia

JOBSHEET 1/ NAMA:.............................................../ABSEN:........./KELAS:............./NILAI:....................

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman web

Alokasi Waktu : 4 x 45 Menit

Memahami format formulir pada halaman web

Tugas Peserta Didik:

a. Menyebutkan macam-macam entri teks

D. Alat dan Bahan:

6.Buatlah program menggunakan html untuk membuat tampilan sbb:

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman web

Alokasi Waktu : 4 x 45 Menit

Memahami format formulir pada halaman web

Tugas Peserta Didik:

1. Mengidentifikasi karakteristik tiap entri pilihan

D.Alat dan Bahan:

ISILAH DATA ANDA DIBAWAH INI: <br>

3.Buatlah program menggunakan html untuk membuat tampilan sbb:

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman Web

Alokasi Waktu : 4 x 45 Menit

Memahami style pada halaman web

Cara kerja dan anatomi Cascading Style Sheet

Tugas Peserta Didik:

a. Mengidentifikasi perbedaan andata selector class dan id

2. Ketiklah program berikut ini.

Silahkan anda tuliskan hasil dari program diatas.

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman web

Alokasi Waktu : 4 x 45 Menit

Memahami format formulir pada halaman web

Style pada teks

Tugas Peserta Didik:

a. Mengidentifikasi karakteristik perintah style pada teks

D.Alat dan Bahan:

Silahkan anda tuliskan hasil dari program diatas.

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman web

Alokasi Waktu : 4 x 45 Menit

Memahami format formulir pada halaman web

Style pada multimedia

Tugas Peserta Didik:

a. Mengidentifikasi karakteristik perintah style pada multimedia

Silahkan anda tuliskan hasil dari program diatas.

2. Ketiklah program berikut ini.

Silahkan anda tuliskan hasil dari program diatas.

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman web

Alokasi Waktu : 4 x 45 Menit

Memahami format formulir pada halaman web

Style pada tabel

Tugas Peserta Didik:

1. Mengidentifikasi karakteristik perintah style pada tabel

Silahkan anda tuliskan hasil dari program diatas.

Satuan Pendidikan : SMK

Mata Pelajaran : Pemrograman web

Alokasi Waktu : 4 x 45 Menit

Memahami format formulir pada halaman web

Style pada formulir

Tugas Peserta Didik:

1. Mengidentifikasi karakteristik perintah style pada tormulir

Silahkan anda tuliskan hasil dari program diatas.

2. Buatlah progam sehinggal memunculkan output seperti dibawah ini.