Scribd
Unggah
21 tayangan

1 HTML+Javascript

Dokumen tersebut memberikan penjelasan tentang penggunaan berbagai element HTML untuk pemformatan teks seperti paragraf, judul, tebal, miring, garis bawah, teks mentah, dan ukuran font."

Diunggah oleh

ryanramadhan261005
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
21 tayangan

1 HTML+Javascript

Dokumen tersebut memberikan penjelasan tentang penggunaan berbagai element HTML untuk pemformatan teks seperti paragraf, judul, tebal, miring, garis bawah, teks mentah, dan ukuran font."

Diunggah oleh

ryanramadhan261005
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 116

HTML DASAR I-1

PRAKTIKUM I
HTML DASAR

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapa t memahami struktur dasar
dari dokumen HTML
2. Penunjang
2.1. Struktur Dasar Dokument HTML
HTML merupakan singkatan dari HyperText Markup Language adalah
script untuk menyusun dokumen-dokumen Web. Dokumen HTM L disimpan dalam
format teks reguler dan mengandung tag-tag yang memerintahkan web browser
untuk mengeksekusi perintah-perintah yang dispesifikasikan. Untuk penulisan pada
dokumen HTML ini tidak mengandung case sensitif jadi anda bisa menggunakan
huruf besar atau kecil. Untuk menyimpan Dokument HTML kam u bisa menyimpan
dengan extension HTM atau HTML. Kita menggunakan HTML ka rena pada software
jaman sekarang kita bisa menyimpan file dengan extension lebih dari 3 huruf,
karena dulu sebuah software hanya bisa menyimpan file dengan extension hanya 3
huruf maka dari itu Dokumen HTML disimpan dengan extension HTM.
Disini kita akan menggunakan plain text editor (Notepad) karena untuk
belajar HTML alangkah bagus nya kalau kita membuat man ual daripada harus
menggunakan HTML Editor (Frontpage, Dreamweaver atau yang lainnya)
Cara pembuatan Dokumen HTML
Klik Start
Pilih All Program
Pilih Accessories
Pilih Notepad
HTML DASAR I-2

Setelah file notepad terbuka ketikkan Struktur Dasar dokumen HTML seperti contoh
dibawah ini

Setelah itu simpan file tersebut dengan extension HTML.


Klik File
Pilih Save
Simpan dengan nama Index.html
HTML DASAR I-3

Anda bisa melihat hasil nya dengan meng double klik pada file index.html
Seperti contoh yang telah kita buat diatas tadi

Dari struktur dasar HTML di bawah dapat dijelaskan sebagai berikut:


HTML DASAR I-4

a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh body
adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang
terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah
karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML,
dan </body> ini adalah tag penutup isi dokumen HTML.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai
contoh untuk menampilkan judul dokumen HTML pada web br owser digunakan ,
element title, dimana :
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu e lement HTML, tidak boleh saling
tumpang tindih dengan pasangan tag-tag lainnya. Cont oh penulisan tag-tag yang
benar.
HTML DASAR I-5

Contoh penulisan tag-tag yang salah

c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama
dan nilai. Penulisannya adalah sebagai berikut:
<TAG
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
> .................
</TAG>

Secara umum nilai attribute harus berada dalam tand a petik satu atau dua. Sebagai
contoh, untuk membuat warna teks menjadi kuning dan la tarbelakang halaman web
menjadi hitam, penulisannya adalah
HTML DASAR I-6

d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang diguna kan adalah HTML.
Sintaks:

e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di
antara tag <html> dan tag </html>.
Sintaks:
HTML DASAR I-7

f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser.
Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:

g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> dan tag </head>. Element BODY mempunyai attribute-
attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang
akan ditampilkan pada browser.
Sintaks:
HTML DASAR I-8

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada
llatarbelakang dokumen HTML, background memberikan latarbelakang dokumen
HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink
memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link
yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesif ikasikan maka attribute
background yang akan digunakan, akan tetapi jika nilai attribute background (gambar)
tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.
HTML DASAR I-9

TUGAS

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script
latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan
menggunakan web browser atau gunakan editor yang tela h tersedia pada modul ini
dengan mengklik menu Editor.
Latihan 1:
Judul Dokumen HTML : HTML Dasar
Simpan nama file: HTMLDASAR_MenampilkanText.html

Menampilkan text:

Hari ini saya belajar HTML dasar, ternyata HTML dasar m udahnya :)
Latihan 2:
Judul Dokumen HTML : HTML Dasar
Simpan nama file: HTMLDASAR_MerubahWarnaText.html
Merubah warna teks menjadi biru

Latihan 3:
Judul Dokumen HTML : HTML Dasar
Simpan nama file: HTMLDASAR_MerubahWarnaBackground.ht ml
Merubah warna background menjadi hitam.

Latihan 4:
Judul Dokumen HTML : HTML Dasar
Simpan nama file: HTMLDASAR_MerubahBackgroundGambar.h tml
Merubah background dengan suatu gambar
Catatan :
images/ = nama direktori file gambar disimpan
PoliteknikAceh.jpg = nama file gambar
HTML FORMAT TEKS II - 1

PRAKTIKUM II
HTML FORMAT TEKS
1. Tujuan
Setelah mempelajari materi ini diharapkan anda dap at memahami penggunaan
element-element untuk pemformatan teks.
2. Penunjang
2.1. HTML Format Text

Dari browser diatas kita bisa menggunakan element-element di bawah ini untuk
mempercantik penampilan.
a. ELEMENT BR (Line Break)
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak
mempunyai tag penutup.
HTML FORMAT TEKS II - 2

Sintaks:

b. ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris
kosong di awal dan akhir paragraf. Tag penutup </p> s ifatnya optional
jika suatu paragraf diikuti oleh paragraph berikutnya. Jika tag </p>
diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di
akhir paragraf. Element P mempunyai attribute yaitu align yang bernilai
"left", "center", "right" yang menspesifikasikan posisi tepi horizontal
dari paragraf (default: "left").
HTML FORMAT TEKS II - 3

Sintaks:

c. ELEMENT H1,H2,H3,H4,H5,H6 (Header)


Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat he ader dengan
format 6 jenis ukuran huruf dan tercetak tebal. Nil ai ukuran huruf
terbesar adalah H1 dan terkecil adalah H6. Element i ni mempunyai
attribute yaitu align yang bernilai "left", "center", "right" yang
menspesifikasikan posisi horizontal dari header (default: "left").
HTML FORMAT TEKS II - 4

Sintaks :

d. ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
<b> ….. </b>
HTML FORMAT TEKS II - 5

Sintaks:
HTML FORMAT TEKS II - 6

e. ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
<i> ….. </i>
Sintaks:
HTML FORMAT TEKS II - 7

f. ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah
(underline). <u> …. </u>
Sintaks:
HTML FORMAT TEKS II - 8

g. ELEMENT PRE (Preformated text)


Element PRE berfungsi untuk menampilkan teks seperti apa adanya.
<pre> …. </pre>
Sintaks:
HTML FORMAT TEKS II - 9

h. ELEMENT CENTER
Element CENTER berfungsi untuk menampilkan teks dengan posisi
horizontal ditengah. <center> .... </center>
Sintaks:
HTML FORMAT TEKS II - 10

i. ELEMENT BASEFONT
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf
tampilan dari web browser. Attribute dari element ini adalah size yang
merupakan ukuran huruf dengan nilai "1" sampai den gan "7" pixel, atau
berupa ukuran relatif ( + atau - ), default nya ada lah "3" pixel. Element
ini tidak mempunyai tag penutup.
Sintaks:
<basefont size="pixel">
HTML FORMAT TEKS II - 11

j. ELEMENT FONT
Element FONT berfungsi untuk merubah jenis, ukuran d an warna dari
tampilan huruf. Element ini mempunyai attribute color untuk merubah
warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis
huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran
huruf (pixel).
Sintaks:
<font color="warna" face="font" size="pixel">
..........................
</font>
HTML FORMAT TEKS II - 12

k. ELEMENT HR (Horizontal Rule)


Element HR berfungsi untuk membuat suatu garis horizontal. Element ini
tidak mempunyai tag penutup dan mempunyai attribute align untuk
menempatkan posisi secara horizontal ("left", "cent er", "right"), size
untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang
garis ("persen"), dan noshade (garis solid).
Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>
HTML FORMAT TEKS II - 13

Tugas
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script
latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan
menggunakan web browser atau gunakan editor yang tela h tersedia pada modul ini
dengan mengklik menu Editor.

Latihan 1:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ELementBR.html
Menampilkan teks dengan ganti baris (element BR):

Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan JSP

Belajar bahasa pemrograman web.


Dengan materi dasar HTML.
Dan JSP.

Latihan 2:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ELementP.html
Menampilkan teks dalam bentuk paragraf (element P):

Tampilan teks sebelum paragraf.

Tampilan teks paragraf pertama.

Tampilan teks paragraf kedua.

Tampilan teks setelah paragraf.


HTML FORMAT TEKS II - 14

Tugas tambahan:
Gantilah setiap tag </p> dengan element BR, dan lihat hasilnya.

Latihan 3:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_PAlign.html
Menampilkan posisi horizontal kelurusan paragraf:

Paragraf ini pada posisi rata kiri (default)


Paragraf ini pada posisi rata tengah
Paragraf ini pada posisi rata kanan
Paragraf ini pada posisi rata kiri

Latihan 4:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ELementH.html
Menampilkan teks sebagai header (element H):
Ini Heading-6
Ini Heading-5
Ini Heading-4
Ini Heading-3
Ini Heading-2
Ini Heading-1
Tugas tambahan:
Tempatkanlah tampilan isi element H3 di kanan dan H5 di tengah.

Latihan 5:
Judul Dokumen HTML : HTML Format Text
HTML FORMAT TEKS II - 15

Simpan nama file: HTMLFormatText_ElementIBU.html


Menampilkan teks dalam format tebal, miring dan garis bawah:

Ini normal teks


Ini teks tercetak tebal (bold)
Ini teks tercetak miring (italic)
Ini teks tercetak garis bawah (underline)
Tugas tambahan:
Buat teks tercetak miring dan tebal.

Latihan 6:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ElementPRE.html
Menampilkan teks dalam bentuk apa adanya (element PRE):

Ini bentuk penulisan preformated text


apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis

Latihan 7:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ElementCenter.html
Menampilkan teks pada posisi tengah jendela web brows er (element CENTER):

Teks ini terletak di tengah layar web browser


dengan menggunakan e lement CENTER

Latihan 8:
Judul Dokumen HTML : HTML Format Text
HTML FORMAT TEKS II - 16

Simpan nama file: HTMLFormatText_ElementBasefont.html


Menampilkan teks berdasarkan element BASEFONT:

Teks ini mempunyai size = 1


Teks ini mempunyai size = 2
Teks ini mempunyai size = 3
Teks ini mempunyai size = 4
Teks ini mempunyai size = 5
Teks ini mempunyai size = 6
Teks ini mempunyai size = 7

Latihan 9:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ElementFont.html
Menampilkan teks dengan menggunakan element FONT:

Teks dengan format color=fuchia; size=+2; face=verdana


Teks dengan format color=gray; size=6; face=algerian
Teks dengan format color=red; size=-1; face=impact

Latihan 10:
Judul Dokumen HTML : HTML Format Text
Simpan nama file: HTMLFormatText_ElementHR.html
Menampilkan garis horizontal menggunakan elemen HR:

Tugas tambahan:
Buatlah garis horizontal di bawah ini dengan size=5, align=center dengan urutan
width 20%, 35%, 45%:
HTML DAFTAR URUTAN III - 1

PRAKTIKUM III
HTML Daftar Urutan
1. Tujuan
Setelah mempelajari materi ini diharapkan anda dap at memahami penggunaan
element-element untuk pembuatan daftar urutan.
2. Penunjang
2.1. HTML Daftar Urutan
a. ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini
mempunyai attribute yaitu start, dan type. Attribute start berfungsi
untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi
untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a
untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad
romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ).
Dalam element OL harus terdapat beberapa element LI.
Sintaks:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
<li> ……. </li>
</ol>
HTML DAFTAR URUTAN III - 2

b. ELEMENT UL (Unordered List)


Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam
format bullet). Element ini mempunyai attribute yaitu type. Attribute
type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari
pada attribute type ini adalah "circle", "square" da n "disc" . Dalam
element UL harus terdapat beberapa element LI.
Sintaks:
<ul type="circle"|"square"|"disc">
..........................
</ul>
HTML DAFTAR URUTAN III - 3

c. ELEMENT LI (List Item)


Element LI merupakan isi dari pada daftar. Element ini harus berada di
dalam element OL atau UL. Element ini mempunyai attribute type dan
value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan
attribute value berisikan nilai nomor urutan dari attribute type.
Sintaks:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
HTML DAFTAR URUTAN III - 4

..........................
</li>

d. DEFINITION LIST
Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag
menentukan definition term serta <DD> tag menentukan definition itu
sendiri.
Sintaks:
<dl>
<dt>
<dd> .... </dd>
</dt>
</dl>
HTML DAFTAR URUTAN III - 5

Soal Latihan :
Gunakan teks editor misalkan "Notepad" untuk menyunting dan Menyimpan script
Latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan
menggunakan web browser atau gunakan editor yang tela h tersedia pada modul ini
dengan mengklik menu Editor.

Latihan 1:
Judul Dokumen HTML : HTML Daftar Urutan
Simpan nama file: HTMLDaftarUrutan _ElementOL1.html
Menampilkan teks dengan daftar urut (element OL):

Matakuliah Teknik Komputer Semester 3:


1. Jaringan Komputer 2
2. Sistem Terdistribusi 2
3. Bengkel Web 2
4. Sistem Operasi
HTML DAFTAR URUTAN III - 6

5. Konsep Teknologi Informasi

Latihan 2:
Judul Dokumen HTML : HTML Daftar Urutan
Simpan nama file: HTMLDaftarUrutan _ELementOLa.html
Menampilkan teks dengan daftar urut (element OL):

Matakuliah Teknik Komputer Semester 3:


a. Jaringan Komputer 2
b. Sistem Terdistribusi 2
c. Bengkel Web 2
d. Sistem Operasi
e. Konsep Teknologi Informasi

Latihan 3:
Judul Dokumen HTML : HTML Daftar Urutan
Simpan nama file: HTMLDaftarUrutan _ElementOL1a.html
Menampilkan teks dengan daftar urut (element OL):

1. Matakuliah Teknik Komputer Semester 3:


a. Jaringan Komputer 2
b. Sistem Terdistribusi 2
c. Bengkel Web 2
d. Sistem Operasi
e. Konsep Teknologi Informasi

Tugas tambahan:
Ubahlah tampilannya dalam format kombinasi ordered list dan unordered list.
TABLE IV - 1

PRAKTIKUM IV
HTML Table
1. Tujuan
Setelah mempelajari materi ini diharapkan anda dap at memahami penggunaan
element-element untuk pembuatan tabel.
2. Penunjang
2.1. HTML Table
a. ELEMENT TABLE
Element TABLE befungsi untuk membuat suatu data multidimensi yang
terdiri atas kolom dan baris. Element ini mempunyai attribute seperti
align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi
sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi
tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.
Sintaks:
<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>

b. ELEMENT CAPTION
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini
harus berada di dalam element TABLE dan mempunyai attribute align
dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak
di bawah tabel).
TABLE IV - 2

Sintaks:
<caption align="top"|"bottom">
..........................
</caption>

c. ELEMENT TR (Table Row)


Element TR mendefinisikan baris pada tabel dan element ini harus
berada di dalam element TABLE. Pada element TR terda pat element TH
dan TD. Attribute yang terdapat pada element ini adalah align,
valign(posisi vertikal), dan bgcolor.
Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>

d. ELEMENT TH (Table Header) dan TD (Table Data)


Element TH dan TD merupakan informasi pada tabel. T H mendefinisikan
isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal
dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di
dalam element TR. Attribute kedua element ini adalah align, valign,
bgcolor, colspan, rowspan
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
TABLE IV - 3

..........................
</th>

<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>
TABLE IV - 4

Soal Latihan :

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut
dengan menggunakan web browser atau gunakan editor ya ng telah tersedia pada
modul ini dengan mengklik menu Editor.

Latihan 1:
Judul Dokumen HTML : HTML Tabel
Simpan nama file: HTMLTabel_MembuatTabelText.html
Buat tabel untuk teks di bawah ini:
TABLE IV - 5

Tugas tambahan:
1. Ganti ukuran cellpadding, cellspacing, border de ngan lainnya.
2. Berikan nilai width dan height pada tabel hingga 100%.

Latihan 2:
Judul Dokumen HTML : HTML Tabel
Simpan nama file: HTMLTabel_MembuatTabelBaris.html
Dari Latihan 1 gantilah warna background baris tabel menjadi baris-1=blue baris-
2=yellow baris-3=red baris-4=green

Tugas tambahan:
Ubahlah align pada baris-2 kolom-1 dan baris-4 kolom- 2 ke kanan

Latihan 3:
Judul Dokumen HTML : HTML Tabel
Simpan nama file: HTMLTabel_MembuatTabelColspan.html
Buat tabel untuk teks di bawah ini:
IMAGE V-1

PRAKTIKUM V
HTML Image
1. Tujuan
Setelah mempelajari materi ini diharapkan anda dap at memahami penggunaan
element-element untuk menampilkan gambar.
2. Penunjang
2.1. HTML Image
a. ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak
mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks
alternatif jika gambar tidak tampil), border (menentukan ketebalan
garis), height, width, hspace (jarak kosong posisi horizontal, vspace
(jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan
beserta nama file-nya).
Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
IMAGE V-2
IMAGE V-3

Soal Latihan :
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut
dengan menggunakan web browser atau gunakan editor ya ng telah tersedia pada
modul ini dengan mengklik menu Editor.

Latihan 1:
Judul Dokumen HTML : HTML Imagel
Simpan nama file: HTMLImage_Gambar.html
Tampilkan gambar (PoltekAceh.jpg) dengan ukuran width dan height 160pixel dan
border 8pixel :

Tugas tambahan:
Letakkan gambar tersebut ke kanan, setelah itu ke kiri.

Latihan 2:
Judul Dokumen HTML : HTML Imagel
Simpan nama file: HTMLImage_GambarDirectory.html
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan
nama PoltekAceh.jpg
IMAGE V-4

Latihan 3:
Judul Dokumen HTML : HTML Imagel
Simpan nama file: HTMLImage_GambarText.html
Tampilkan gambar PoltekAceh.jpg dengan ukuran width d an height 80pixel dan border
8pixel serta teks seperti di bawah ini:

Profil Singkat Politeknik Aceh

Politeknik Aceh didirikan atas prakarsa Pemerintah Kota Banda Aceh bekerjasama
dengan pihak BRR, USAID dan Chevron Corporation. Untuk pengembangan sistem
pendidikannya dipercayakan pada Swisscontact dan Polite knik Manufaktur Negeri
(POLMAN) Bandung.

Politeknik Aceh merupakan lembaga pendidikan jenjang D iploma 3 berorientasi praktis


dalam bidang akuntansi, teknik elektronika, teknik komputer serta teknik mekatronika
yang diselaraskan dengan kebutuhan kompetensi tenaga ker ja industri.

Dikelola oleh Yayasan Politeknik Aceh dan didukung manajemen dan staf pengajar
yang kompeten serta sarana prasarana lengkap dan terki ni, mulai dari kampus,
laboratorium serta peralatan proses belajar mengaja r dengan perbandingan rasio yang
sangat ideal.
HTML HYPERLINK VI - 1

PRAKTIKUM VI
HTML Hyperlink
1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan
element-element untuk menghubungkan ke internal atau eksternal halaman web.
2. Penunjang
2.1. HTML Hyperlink
a. ELEMENT A
Element A befungsi untuk menghubungkan ke internal ataupun eksternal
halaman web. Element ini mempunyai attribute href, name,
dan target. Attribute href berfungsi sebagai hypertext reference yang
mempunyai nilai URI (uniform resource identifier) yang akan
menghubungkan ke eksternal halaman web. Attribute name berfungsi
untuk menghubungkan ke tempat tujuan dalam halaman web (anchor).
Attribute target berfungsi untuk menampilkan halaman web pada suatu
jendela frame atau jendela baru.
Sintaks:
<a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self">
...........................
</a>
HTML HYPERLINK VI - 2
HTML HYPERLINK VI - 3

Soal Latihan :
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script
latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan
menggunakan web browser atau gunakan editor yang tela h tersedia pada modul ini
dengan mengklik menu Editor.

Latihan 1:
Judul Dokumen HTML : HTML Hyperlink
Simpan nama file: HTML Hyperlink_LinkExternal.html
Membuat link eksternal:

Link:
1. yahoo
2. google
3. d3tkj

Tugas tambahan:
Tambahkan setiap link dengan target "_blank", "_paren t", "_self", "_top". Amatilah
hasilnya.

Latihan 2:
Judul Dokumen HTML : HTML Hyperlink
Simpan nama file: HTML Hyperlink_LinkInternal.html
Membuat link internal dan anchor:
HTML HYPERLINK VI - 4

Link internal dan anchor adalah link yang menunjuk ketempat yang ada dalam
dokument ini.
kebagian akhir
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.

Ini adalah teks bagian kedua dalam dokumen ini.


Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.

Ini adalah teks bagian ketiga dalam dokumen ini.


Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.

Ini adalah teks bagian keempat dalam dokumen ini.


Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
HTML HYPERLINK VI - 5

Ini adalah teks bagian keempat dalam dokumen ini.


Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.

Ini adalah teks bagian kelima dalam dokumen ini.


Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.
Ini adalah teks bagian kelima dalam dokumen ini.

Ini adalah teks bagian keenam dalam dokumen ini.


Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
Ini adalah teks bagian keenam dalam dokumen ini.
kebagian pertama

Tugas tambahan:
Buatlah link ke bagian ketiga dari posisi bagian keenam.
HTML FORM VII - 1

PRAKTIKUM VII
HTML FORM
1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan
element-element untuk pembuatan form.
2. Penunjang
2.1. HTML Form
a. ELEMENT FORM
Element FORM berfungsi untuk mendefinisikan form interaktif. Element
ini mempunyai attribute yaitu action, dan method. Attribute action
berisikan aksi terhadap form yang dikirim (URI) dan attribute method
berisikan metode form melakukan proses pengiriman(GET/POST).
Sintaks:
<form action="action" method="GET"|"POST">
...........................
</form>

b. ELEMENT INPUT
Element INPUT berfungsi untuk mendefinisikan input yang akan
dimasukkan pengguna. Element ini mempunyai attribute yaitu name,
size, type, value, checked. Attribute name mendefinisikan nama dari
input kontrol form, attribute size mendefinisikan ukuran teks pada input
kontrol, type mendefinisikan bentuk-bentuk input kontrol, value
mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan
terpilih pada type radio/checkbox. Element ini tidak mempunyai tag
penutup dan harus berada di dalam element FORM.
Sintaks:
<input
name="name"
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
HTML FORM VII - 2

value="value"
checked >

c. ELEMENT SELECT
Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form
kontrol. Element ini mempunyai attribute yaitu name, size,
multiple(diizinkan banyak pilihan). Element ini harus berada di dalam
element FORM.
Sintaks:
<select
name="name"
size="number"
multiple >
.....................
</select>

d. ELEMENT OPTION
Element OPTION mendefinisikan opsi pilihan pada menu SELECT.
Element ini mempunyai attribute selected, dan value. Attribute selected
opsi terpilih dan attribute value berisikan nilai element OPTION.
Sintaks:
<option
selected
value="number" >
.....................
</option>

e. ELEMENT TEXTAREA
Element TEXTAREA berfungsi sebagai input kontrol form untuk
memasukkan teks lebih dari satu baris. Element ini mempunyai attribute
yaitu name, cols, rows. Attribute name mendefinisikan nama input
HTML FORM VII - 3

kontrol form element textarea, attribute cols mendefinisikan jumlah


kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah
baris textarea yang terlihat. Element ini harus berada di dalam element
FORM
Sintaks:
<textarea
name="name"
cols="number"
rows="number" >
.....................
</textarea>

Soal Latihan :
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script
llatihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan
menggunakan web browser atau gunakan editor yang tela h tersedia pada modul ini
dengan mengklik menu Editor.

Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit,
seperti tampilan di bawah ini:
HTML FORM VII - 4

Latihan 2:
Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:
PENDAHULUAN VIII - 1

PRAKTIKUM VIII
PENDAHULUAN

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar
dari javascript
2. Pengantar
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya
bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk
browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena
kurang aman, pengembangannya yang terkesan burn burn dan tidak ada pesan
kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat
menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama
antara Netscape dan Sun (pengembang bahasa pemrograman "Java" ) pada
masa itu, maka Netscape memberikan nama "JavaScript" kepada bahasa tersebut
pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri
mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai
"Jscript" di browser Internet Explorer 3.
Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya
berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah
bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk
memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan
pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di
sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil halaman web
yang berisi skrip skrip dan Javascript dan tentu saja terselip di dalam dokumen
HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus
untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah
termasuk di dalam browser tersebut). Lain halnya dengan bahasa "Java" (dengan
mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator
khusus untuk menterjemahkannya di sisi user/klien.
PENDAHULUAN VIII - 2

2.1. Keperluan JavaScript


Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan, yaitu:
a. Teks Editor
Digunukan untuk menuliskan kode-kode Java Script, teks editor yang dapat
digunakan antara lain notepad dan ultra edit.
b. Web Browser
Digunakan untuk menampilkan halaman web yang mengandung kode-kode
Java Script. Web browser yang digunakan hams mendukung Java Srcipt.

2.2. Penulisan JavaScript


Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-
kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu
a. Javascript ditulis pada file yang sama
Untuk penulisan dengan cara ini, perintah yang digunakan adalah
<SCRIPT LANGUANGE= "JavaScript" >program java scrip disini</SCRIPT>.
Perintah tersebut biasanya diletakkan :

1. Bagian Head
2. Bagian Body (jarang digunakan).

<HTML> <HEAD><TITLE></TITLE>
</HEAD>
<SCRIPT LANGUAGE="Javascript">
kode javascript disini
</SCRIPT>
<BODY>

kode HTML disini

</BODY>

</HTML>
3. Simpan dengan nama Filename.html
PENDAHULUAN VIII - 3

b. Javascript ditulis pada file terpisah


Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar
dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah:

<SCRIPT SRC= "namafile.js"> ...</SCRIPT>

Diantara tag <SCRIPT> dan <SCRIPT> tidak diperlukan lagi kode


Javascriptnya karena sudah dibuat dalam file terpisah. File yang mengandung
kode Javascript berekstensi .js

2.3. Program pertama JavaScript


Pada bagian ini kita akan membuat program dengan menggunakan Javascript.
Program ini akan menampilkan teks " Belajar Pemrograman Javascript"
PENDAHULUAN VIII - 4

Berikut diberikan beberapa contoh program sederhana dengan menggunakan


Javascript :
PENDAHULUAN VIII - 5
PENDAHULUAN VIII - 6

File isi.js
document.writeln("<CENTER>");
document.writeln("<HR WIDTH=600 COLOR=Black>");
document.writeln("<H1>POLITEKNIK ACEH</H1>");
document.writeln("<H2>TEKNIK KOMPUTER<H2>");
document.writeln("<HR WIDTH=600 COLOR=Black>");
document .writeln("</CENTER>");

File HTML
<HTML>
<HEAD><TITLE>Belajar Javascript</TITLE>
</HEAD> <HTML>
<BODY>
<B>Contoh ini menggunakan Javascript yang diambil dari File lain..</B><P>
<SCRIPT language="JavaScript" SRC="javascript/isi.js"></SCRIPT>
</BODY>
</HTML>

Note : untuk penyimpanan isi.js sediakan 1 folder khusus script untuk


javascript supaya memudahkan anda untuk mengatur file.
PENDAHULUAN VIII - 7

2.4. Komentar
Sama seperti bahasa pemrograman lain. Javascript juga menyediakan fasilitas untuk
menuliskan komentar, komentar ini berguna bila nantinya anda atau orang lain
membaca program. Pemberian komentar dalam Javascript dapat dilakukan dengan
dua cara yaitu dengan menuliskan komentar setelah tanda garis miring dua kali,
contoh :
//ini komentar
atau
/*ini juga komentar */
VARIABEL JAVASCRIPT IX - 1

PRAKTIKUM IX
VARIABEL JAVASCRIPT

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami Variabel yang
ada pada javascript
2. Variabel dalam javascript
Variabel adalah empat dimana kita menyimpan nilai-nilai atau informasi-informasi
pada JavaScript. Variabel yang dideklarasikan dapat di isi dengan nilai apa saja.
Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya anda
boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. Jika anda
memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa anda telah
mendeklarasikan variabel tersebut.
Aturan penamaan variabel :
• Harus diawalai dengan karakter (huruf atau baris bawah)
• Tidak boleh menggunakan spasi
• Huruf Kapital dan kecil memiliki arti yang berbeda
• Tidak boleh menggunakan kata-kata yang merupakan perintah dalam
JavaScript.

Deklarasi Variabel

Var nama_variabel = nilai


Atau
Nama variabel = nilai

Contoh :
var nama; Nama = "Cut Tari"
var nama = "Luna Maya" X = 1980;
var X = 1986; Y = 08123123212
var Y;
VARIABEL JAVASCRIPT IX - 2

2.1. Type Data


Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data secara
explisit. Hal ini dapat dilihat dan beberapa contoh variabel diatas. Anda
mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun JavaScript tidak
memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit. Terdapat
empat macam tipe data implisit yang dimiliki oleh JavaScript yaitu :
• Numerik, seperti : 2137612236, 1000, 45, 3.146789 ds b
• String, seperti : "Hallo", "April", "Jl. Pango Raya", "Banda Aceh" dsb
• Boolean, bernilai true atau false
• Null, variabel yang tidak diinisilisasi

2.2. Type Numeric


Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan
bulat (integer) dan bilangan pecahan(real/float). Untuk bilangan bulat, kita dapat
merepresentasikan dengan basis desimal, oktal atau heksadesimal.
Contoh :
var A = 100;
var B = Ox2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik atau notasi
ilmiah (notasi E).
Contoh :
var a = 3.14533567;
var b = 1.23456E+3;

2.3. Type String


Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string
diantara tanda petik tunggal (') atau tanda petik ganda (")
Contoh :
var str ='Contoh deklarasi string';
var strl = "cara ini juga bisa untuk menulis string";
VARIABEL JAVASCRIPT IX - 3

2.4. Type Boolean


Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya digunakan
untuk mengecek suatu kondisi atau keadaan.
Contoh :
var X = (Y > 90);
contoh diatas menunjukkan bahwa jika Y lebih besar dan 90 maka X akan bernilai
True.

2.5. Type Null


Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal
(inisialisasi).

2.6. Operator
Operator pada JavaScript terbagi menjadi enam, yaitu :
• Aritmatika
• Pemberian nilai (Assign)
• Pemanipulasian bit (bitwise)
• Pembanding
• Logika
• String

a) Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua macam operator
aritmatik, yaituoperator numerik tunggal dan operator aritmatik biner.
Perbedaan kedua operator terletak pada jumlah operan yang harus
dioperasikan.

Operator Tunggal/Biner Keterangan


+ Biner Penjumlahan
- Biner Pengurangan
* Biner Perkalian
/ Biner Pembagian
% Biner Modulus
- Tunggal Negasi
VARIABEL JAVASCRIPT IX - 4

++ Tunggal Penambahan dengan satu


-- Tunggal Pengurangan dengan satu

b) Operator pemberian nilai


Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai
suatu operan.

Operator keterangan Contoh Ekuivalen


= Sama dengan X=Y
+= Ditambah dengan X+=Y X=X+Y
-= Dikurangi dengan X-=Y X=X-Y
*= Dikali dengan X*=Y X=X*Y
1= Dibagi dengan X/=Y X=X/Y
%= Modulus dengan X%=Y X=X%Y
&= Bit AND dengan X&Y X=X&Y
1= Bit OR XI=Y X=X1Y

c) Operator manipulasi bit


Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe
bilangan bulat.

Operator Keterangan
& Bit AND
| Bit OR
^ Bit XOR
~ Bit NOT
<< Geser ke kiri
>> Geser ke Kanan
>>> Geser ke kanan dengan diisi nol

Contoh :
var A = 12; // A = 1100b
var B = 10; // B = 1010b
var C=A &B
maka akan dihasilkan bilangan seperti berikut :
1100b
1010b AND
1000b
VARIABEL JAVASCRIPT IX - 5

var A = 12;
var C = A<< 2 var D = A >> 1
maka variabel C akan bernilai 48(0011 0000b)
variabel D akan bernilai 6 (0110b)

d) Operator pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenal
operator ini dapat bertipe string, numerik, maupun ekspresi lain.

Operator Keterangan
= Sama dengan
!= Tidak sama dengan
> Lebih besar
< Lebih Kecil
>= Lebih besar atau sama dengan
<= Lebih kecil atau sama dengan

e) Operator logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.

Operator Keterangan
&& Operator logika AND
|| Operator Logika OR
! Operator logika NOT
Contoh :
var A = true;
var B = false;
var C = A && B; //menghasilkan false var D=A||B; // false
var E = !A; //false

f) Operator string
Selain operator pembanding, operator string pada JavaScript juga mengenal
satu operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan
untuk menggabungkan beberapa string menjadi sebuah string yang lebih
panjang.
VARIABEL JAVASCRIPT IX - 6

Contoh :
nama = "Java" + "Script";
akan menghasilkan "JavaScript" pada variabel nama

Memasukkan Data
Untuk memasukkan data dari keyboard dapat dilakukan dengan menggunakan
perintah input.
VARIABEL JAVASCRIPT IX - 7
OBJECT JAVASCRIPT X-1

PRAKTIKUM X
OBJECT JAVASCRIPT

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami Object – object
yang ada pada javascript
2. Object untuk memasukkan data
Terdapat beberapa objek yang dapat digunakan untuk memasukkan data. Objek -
objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut
meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.
2.1. Object Text
Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh
penggunaannya dapat kita lihat pada contoh berikut :
OBJECT JAVASCRIPT X-2

2.2. Object Radio


Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan
data. Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan
radio[indeks]. Disamping itu objek radio juga mempunyai nili True jika dipilih dan
False jika tidak. Untuk memilih suatu objek radio menggunakan properti Checked.
OBJECT JAVASCRIPT X-3

2.3. Object Checkbox


Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek.
Penggunaannya hampir sama seperti objek radio.
OBJECT JAVASCRIPT X-4
OBJECT JAVASCRIPT X-5

2.4. Object TextArea


Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks
dengan banyak baris.
OBJECT JAVASCRIPT X-6

2.5. Object Select


Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar.
Objek select berguna apabila di dalam form terdapat banyak pilihan yang telas
mempunyai nilai tertentu.
OBJECT JAVASCRIPT X-7
OBJECT JAVASCRIPT X-8
PERCABANGAN XI - 1

PRAKTIKUM XI
PERCABANGAN

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami Percabangan
yang ada pada javascript
2. Percabangan
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web
membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi.
Berdasarkan hasil komputasi yang telah dilakukan, JavaScript akan membuat
keputusan jalur mana yang akan dieksekusi. Pada dasarnya dalam JavaScript terdapat
dua macam pernyataan percabangan yaitu if. .else dan switch.
2.1. If..Else
Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian mengeksekusi
pernyataan tertentu bila kondisi tersebut terpenuhi, dan mengeksekusi pernyataan lain
bila kondisi tersebut tidak terpenuhi.

if (kondisi)
{
//pernyataan1 dieksekusi
//bila kondisi terpenuhi
}
else
{
//pernyataan2 dieksekusi
//bila kodisi tidak terpenuhi
}

kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean
true atau false Untuk kasus yang melibatkan lebih banyak kondisi, maka kita dapat
meletakkan pernyataan if lain setelah else
PERCABANGAN XI - 2

if (kondisi1)
{
//pernyataan1 dieksekusi
//bila kondisi1 terpenuhi
}
else if (kondisi2)
{
//pernyataan2 dieksekusi
//bila kodisi1 tidak terpenuhi
}
else
{
//pernyataan3 dieksekusi
//bila kodisi2 tidak terpenuhi
}
PERCABANGAN XI - 3
PERCABANGAN XI - 4
PERCABANGAN XI - 5

2.2. Contoh Kasus


Perusahaan Travel "Bintang Jatuh" mempunyai armada dengan tujuan :

Tujuan Harga Tiket


Medan 120000
Sigli 30000
Bireun 40000

Apabila seorang pemesan sudah menjadi anggota/member Travel Bintang Jatuh maka
akan mendapatkan diskon 10 %.

Subtotal : Harga Tiket x Jumlah Tiket


Diskon : 0.10 x Subtotal
Total : Subtotal – Diskon
Buat Program dengan menggunakan Javascript untuk menyelesaikan masalah
tersebut. Dengan ketentuan sebagai berikut :

Input : Nama pemesan Output : Harga tiket


Tujuan Sub Total
Jumlah Tiket Diskon
Member Total bayar
PERCABANGAN XI - 6
PERCABANGAN XI - 7

2.3. Percabangan Majemuk


Percabangan majemuk adalah suatu percabangan yang dapat melibatkan lebih dari 1
kondisi di dalam percabangannya. Biasanya percabangan sepert ini menggunakan
operator tambahan seperti AND, OR dan sebagainya.
PERCABANGAN XI - 8
PERCABANGAN XI - 9

2.4. Switch
Selain menggunakan if..else, percabangan juga dapat ditangani dengan perintah
switch. Dengan kata lain pernyataan switch digunakan untuk menyederhanakan
pernyataan if..else yang terlalu banyak.
PERCABANGAN XI - 10
PERULANGAN XII - 1

PRAKTIKUM XII
PERULANGAN

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami beberapa
metode perulangan pada javascript
2. Perulangan
Untuk mengulang kejadian beberapa kali maka kita membutuhkan proses perulangan.
Pada JavaScript dikenal beberapa metode/cara perulangan.

2.1. Perulangan For


Digunakan untuk mengeksekusi pernyataan-pernyataan beberapa kali. Perulangan For
paling sering dipakai, jika anda sudah tahu akhir dan perulangan tersebut. . Perintah
for mengulang suatu loop sampai kondisi menghasilkan evaluasi true atau loop keluar
dengan perintah break .
Contoh:

for (nilai awal;kondisi;penambahan)


{
ulang pernyataan ini;
}

Contoh dalam program :


For(x=1;x<=10;x++)
{
document.writeln("Belajar JavaScript Yuuuuu..");
}
PERULANGAN XII - 2
PERULANGAN XII - 3

2.2. Perulangan While


Perulangan lain yang dapat digunakan adalah dengan menggunakan perintah While.
Perintah while digunakan untuk perulangan yang tidak diketahui berapa kali proses
perulangannya. Perintah while terus mengulangi loop selama kondisi memiliki nilai
true. Syntax untuk perintah while adalah sebagai berikut :

while (kondisi)
{
ulang pernyataan ini;
}
PERULANGAN XII - 4

2.3. Perulangan Do While


Perulangan ini hampir sama seperti while, digunakan apabila kita belum tahu berapa
kali perulangan harus dilakukan. Bedanya pernyataan do..while pengujiannya
dilakukan di akhir pernyataan.
Do
{
//pernyataan1 dieksekusi
}
while (kondisi);
PERULANGAN XII - 5

1. Tampilan Awal
PERULANGAN XII - 6

2. Prompt password

3. Alert jika terjadi kesalahan password

4. Alert apabila telah terjadi 3 kali kesalahan penginputan password

5. Alert apabila password benar


PERULANGAN XII - 7

6. Halaman Utama (welcome.html)


OBJECT JAVASCRIPT (2) XIII - 1

PRAKTIKUM XIII
OBJECT JAVASCRIPT (2)

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami beberapa object
Array, Date dan Math pada javascript
2. Object Array
Array adalah suatu variable yang dapat memuat beberapa nilai secara berurutan atau
seri. Artinya variable yang dideklarasikan sebagai array isinya tidak satu. Berikut
adalah pendeklarasian untuk array.

nama = new Array(3)

Pernyataan diatas menunjukan bahwa variabel nama memiliki 3 elemen. Ketiga


elemen tersebut akan memiliki nilai masing-masing 0, 1, 2. Nilai pertama = 0. Untuk
mengisikan ketiga elemen tersebut kita dapat melakukan dengan cara :

nama[0] ="Dian"
nama[1] ="Andri"
nama [2] ="Irawan"

Selain cara diatas kita juga bisa mendeklarasikan array sekaligus dengan mengisikan
elemen-elemennya.

nama = new Array("Dian","Andri","Irawan")

Maka hasilnya seperti dibawah ini :

nama yang ke 1 [0] isinya adalah "Dian"


nama yang ke 2 [1] isinya adalah "Andri"
nama yang ke 3 [2] isinya adalah "Irawan"
OBJECT JAVASCRIPT (2) XIII - 2
OBJECT JAVASCRIPT (2) XIII - 3

2.1. Object Tanggal (Date)


Objek ini digunakan untuk memanipulasi tanggal dan waktu pada JavaScript. Untuk
pendeklarasiannya adalah sebagi berikut :

lama = new Date()


OBJECT JAVASCRIPT (2) XIII - 4

pernyataan diatas menyatakan bahwa variabel lama mengandung unsur tanggal dan
waktu.

Metode – metode untuk object date

Metode Kegunaan
getDate() Menghasilkan tanggal (integer) mulai 1 — 31.
getDay() Menghasilkan hari(integer) mulai 0-6.
Minggu = 0, Senin = 1,..........
getMonth() Menghasilkan bulan(integer) mulai 0-11.
Januari=0, Feb=1, ..
getFullYear() Menampilkan tahun menjadi 4 digit
getHoursO Menghasilkan jam mulai 0-23
getMinutes() Menghasilkan menit mulai 0-59
getSeconds() Menghasilkan detik mulai 0-59
OBJECT JAVASCRIPT (2) XIII - 5

2.2. Object Math


Math digunakan untuk menangani perhitungan matematis yang rumit. Bentuk
penulisan :

Math.metode(nilai)

Metode Untuk Objek Math

Metode Keterangan
abs(a) Nilai absolut dari a
acos(a) Nilai arc-kosinus dari a
asin(a) Nilai arc-sinus dari a
atan(a) Nilai arc-tan dari a
ceil(a) Membulatkan nilai ke integer diatasnya
cos(a) Nilai kosinus dari a
exp(a) Nilai E pangkat a
Log(a) Nilai logaritma dari a
Max(a,d) Nilai terbesar dari a dan d
Min(a,d) Nilai terkecil dari a dan d
Pow(a,d) Nilai dari a pangkat d
Random(a,d) Nilai acak antar 0 dan 1
Round(a) Membulatkan nilai a ke integer terdekat
Sqrt(a) Nilai akar dari kuadrat a
Sin(a) Nilai sinus dari a
Tan(a) Nilai tangen dari a
OBJECT JAVASCRIPT (2) XIII - 6
OBJECT JAVASCRIPT (3) XIV - 1

PRAKTIKUM XIV
OBJECT JAVASCRIPT (3)

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami beberapa object
String, Document, dan Windows pada javascript
2. Object String
String adalah suatu objek yang merupakan kumpulan dan elemen karakter-karakter.
Dalam Javascript string atau karakter harus diapit dengan tanda petik ganda(") atau
tanda petik tunggaln.
Contoh pendeklarasian Objek String :

Nama = "Luna Maya"


Panjang = Nama,length; // Panjang akan berisi 14
Length adalah property yang sering digunakan dalam objek string yang digunakan Untuk
mengetahui banyaknya karakter dalam suatu string. Objek String juga memiliki method
yang dapat digunakan untuk memanipulasi string tersebut. Adapun Method yang dapat
digunakan

Method Fungsi
big() Tercetak lebih besar
blink() Efek berkedip aktif pada browerNetscape
bold() Tercetak tebal
charAt(n) Mengambil karakter ke —n dan string. Index string
dimulai dan 0
fixed() Tercetak fixed-pitch
fontcolor(‘warna') Tercetak sesuai warna yang didefmisikan
index0f(‘char') Mengambil nilai indeks dan suatu karakter
italic() Tercetak miring
link(‘url') Menjadikan string hyperlink
small() Tercetak lebih kecil
strike() Tercetak dengan coretan
sub() Tercetak subscript
substring(a,b) Mengambil karakter dan posisi a sampai b-1
sup() Tercetak superscript
toLowerCase() Tercetak huruf kecil
toUpperCase() Tercetak huruf besar
OBJECT JAVASCRIPT (3) XIV - 2

split(‘’) Menjadikan string diuraikan/dipisahkan berdasarkan


tanda (’’). Hasil dan split akan dihasilkan sebuah
array dengan indeks 0 untuk string ke 1 dan
OBJECT JAVASCRIPT (3) XIV - 3
OBJECT JAVASCRIPT (3) XIV - 4

2.1. Object Dokumen


Objek ini digunakan untuk mengakses informasi mengenai dokumen HTML, tampilan
output dan memanipulasinya.
Property dari document meliputi :

Property Fungsi
bgColor Memberikan warna latar belakang
fgColor Memberikan warna foreground atau warna huruf
link[] Mengakses objek anchor/link(dapat digunakan nama object
anchor/link
linkColor=warna Memberikan warna link
alinkColor=warna Memberikan warna pada active link
valinkColor=warna Memberikan warna pada visited link
Title=judul Windows memberikan judul/title windows
Image[] Mengakses objek image(dapat digunkaan nama objek
anchor/link
Forms[] Mengakses objek form(dapat digunakan nama objek form)

Method dari object document meliputi :

Method Fungsi
open() Menciptakan/membuka document HTML
close0 Mengakhiri document HTML
write(output) Memberikan output ke browser
writeln(output) Memberikan output ke browser dengan menyertakan
perpindahan baris

Khusus untuk output ke browser ada beberapa hal yang perlu diperhatikan :
• Diisi dengan string(") atau 0
• Dapat diberikan tag HTML
• Dapat digunakan untuk menampilkan isi dari variable
• Terdapat karakter spesial :
\b = untuk backspace
\f = untuk form feed
\n = untuk baris baru
\r = untuk carriage return
\t = untuk tab
OBJECT JAVASCRIPT (3) XIV - 5

2.2. Object Windows


Objek window merupakan objek tertinggi dalam objek Javascript. Objek ini digunakan
untuk memanipulasi tampilan jendela dan document HTML.
Property pada objek windows
Property Fungsi

length Mengetahui jumlah frame pada window


location.href Mengakses objek location untuk melakukan
redirect atau berpindah ke alamat tertentu.
Status=nilai status Memberikan nilai status window
OBJECT JAVASCRIPT (3) XIV - 6

Metode – metode untuk objek window

Method Fungsi
alert(pesan) Memunculkan messagebox sebuah pesan
kesalahan
confirm(pesan) Memunculkan pesan konfirmasi. Method ini akan
menghasilkan dua nilai kembalian yaitu true untuk
prompt(pesan,nilai default) Memunculkan pesan yang menunggu sebuah input

close() Menutup jendela aktif


open(url | file, windowname, Membuka jendela baru dengan feature meliputi:
feature) toolbar=yes | no mengaktifkan toolbar
status=yes | no mengaktifkan window status
menubar=yes | no mengaktifkan menubar
scrollbars=yes | no mengaktifkan scrollbar
resizable=yes | no jendela resizeable
print() Membuka jendela dialog print
OBJECT JAVASCRIPT (3) XIV - 7
OBJECT JAVASCRIPT (3) XIV - 8
OBJECT JAVASCRIPT (3) XIV - 9
OBJECT JAVASCRIPT (3) XIV - 10
KEJADIAN (EVENT) - 1 XV - 1

PRAKTIKUM XV
KEJADIAN (EVENT) - 1

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami Event pada
javascript
2. Kejadian (Event)
Event adalah sesuatu yang terjadi pada halaman HTML. Berikut ini terdapat beberapa
bentuk kejadian yaitu jika pengguna memuat dokumen, pengguna memasukkan data,
pengguna mengklik tombol dan sebagainya. Hal-hal tersebut diatur oleh even. Semua
kejadian pada Javascript dapat anda tangani dengan menentukan kejadiannya.
Biasanya kejadian(even) adalah sebuah fungsi, tetapi pada beberapa kasus, kita dapat
menuliskan pernyataan-pernyataannya secara langsung.
Berikut ini adalah daftar kejadian(even) pada JavaScript :
Kejadian Keterangan
onClick Kejadian yang dibangkitkan bila pengguna mengklik sebuah
elemen form atau link
onChange Dibangkitkan bila informasi masukan pada sebuah elemen
form (text, textarea, select) diubah oleh pengguna.
onBlur Dibangkitkan ketika suatu elemen kehilangan focus masukan,
yaitu ketika pengguna menekan tombol <tab> atau mengklik
elemen lain form lainnya.
onFocus Dibangkitkan bila sebuah elemen form menerima focus
masukan; yaitu bila pengguna mengklik elemen form tersebut
atau menekan tombol <tab> sehingga focus masukan
berpindah ke elemen ini.
onAbort Dibangkitkan bila pengguna menghentikan pemuatan citra
(tag<img>) yaitu bila pengguna menekan tombol stop atau
mengklik link
onError Dibangkitkan bila terjadi kesalahan saat browser memuat
dokumen atau citra.
onLoad Dibangkitkan bila browser selesai memuat document
onUnload Dibangkitkan bila pengguna keluar dan dokumen
onMouseOver Dibangkitkan bila kursor mouse berada di atas sebuah link
onMouseOut Dibangkitkan bila kursor mouse keluar dan daerah link atau
peta citra.
onReset Dibangkitkan bila pengguna menekan tombol reset
onSelect Kejadian yang dibangkitkan bila pengguna memilih sebagian
atau seluruh teks pada elemen form yang berupa kotak teks.
onSubmit Dibangkitkan ketika pengguna menekan tombol submit.
KEJADIAN (EVENT) - 1 XV - 2

2.1. Penanganan kejadian (Event)


Berikut ini akan diberikan beberapa contoh program-program yang menggunakan
kejadian¬kejadian dalam aplikasinya
Contoh program yang menggunakan even OnClick :
KEJADIAN (EVENT) - 1 XV - 3
KEJADIAN (EVENT) - 1 XV - 4

Contoh program yang menggunakan even OnBlur dan onFocus :


KEJADIAN (EVENT) - 1 XV - 5
KEJADIAN (EVENT) - 1 XV - 6

Contoh program yang menggunakan even onLoad dan onUnload :


KEJADIAN (EVENT) - 1 XV - 7

• Ketika halaman web di buka

• Ketika halaman web di tutup


KEJADIAN (EVENT) - 2 XVI - 1

PRAKTIKUM XVI
KEJADIAN (EVENT) - 2

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami Event on submit
pada javascript
2. Event On Submit
Event on submit akan dibangkitkan apabila seorang user menekan tombol submit.
Dengan event ini data yang diinputkan akan dikirimkan ke tempat lain (email, file teks
atau ke dalam suatu tabel).
KEJADIAN (EVENT) - 2 XVI - 2
FRAME XVII - 1

PRAKTIKUM XVII
FRAME

1. Tujuan
Setelah mempelajari materi ini diharapkan anda dapat memahami Frame pada
javascript
2. Membuat Frame
Frame digunakan untuk memisahkan beberapa halaman web yang ditampilkan dalam
suatu halaman web. Penggunaan frame biasa diperuntukkan untuk memuat halaman
yang selalu diakses misal halaman menu. Berikut adalah contoh program yang
menggunakan frame.

Halaman Utama.HTML

Halaman Menu.HTML
FRAME XVII - 2

Halaman Awal.HTML
FRAME XVII - 3

Anda mungkin juga menyukai