Bahan Ajar

BAB I

PENGENALAN HTML

( HyperText Markup Language )

1.1. Pengertian HTML

• HTML adalah sebuah bahasa markup berupa kode-kode tag yang menginstruksikan

browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.

• HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan

halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan

oleh World Wide Web Consortium (W3C).

• Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser

web seperti Mozilla Firefox atau Microsoft Internet Explorer.

• Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang

XHTML yang merupakan pengembangan dari HTML.

Spesifikasi HTML standar :http://www.w3.org/TR/html4.

1.2. Penulisan Tag HTML

• Nama tag ditulis di dalam tanda < dan >.

• Nama tag boleh ditulis dalam huruf kecil, kapital atau kombinasi.

– Contoh : <HTML> <html> <Html>

• Beberapa tag m engandung atribut di dalamnya:

– Contoh : <P ALIGN = “CENTER”>

dimana P : nam tag

ALIGN : nama atribut

CENTER : nilai atribut

• Hindari pasangan tag yang berpotongan dengan pasangan lain.

1.3. Skema Dasar HTML

Keterangan :

� <HTML> …. </HTML> menandai awal dan akhir dokumen HTML

� <HEAD> …. </HEAD> menandai awal dan akhir header dokumen

� <TITLE> Judul Dokumen </TITLE> memberi judul pada dokumen

� <BODY> Isi Dokumen </BODY> menandai awal dan akhir isi dokumen

1.4. Jenis Elemen HTML

Secara garis besar, terdapat 4 jenis elemen dari HTML:

• structural

tanda yang menentukan level atau tingkatan dari sebuah teks (contoh,

<h1>Golf</h1> akan memerintahkan browser untuk menampilkan "Golf" sebagai

teks tebal besar yang menunjukkan sebagai Heading 1.

Teks dalam badan

dokumen

judul

Nama berkas

• presentational

tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks

tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational

saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk

mengatur tampilan teks.

• hypertext

tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke

dokumen lain (contoh, <a href = "http://www.wikipedia.org/"> Wikipedia </a> akan

menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu).

• elemen widget

yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis

horizontal (<hr>).

1.5. Jenis Tag HTML

1. Tag Judul (Heading)

<Hn>Judul paragraf</Hn>

Dengan n = 1,2,3,4,5,6 (tingkat besar huruf judul)

2. Tag Paragraf (Paragraph)

<p>paragraf</p>

� Untuk menandai suatu paragraf.

� Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan

sesudahnya.

3. Tag Atribut 1 (Bold, Italic, Underline)

� <b>Kalimat yang dicetak tebal</b>

� <i>Kalimat yang dicetak miring</i>

� <u>Kalimat yang digarisbawahi</u>

� Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau

digarisbawahi.

4. Tag Atribut 2 (Superscript, Subscript)

� <sup>bagian yang dicetak tinggi</sup>

� <sub>bagian yang dicetak rendah</sub>

� Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya

untuk rumus matematika atau kimia.

�

�

5. Tag Ganti Baris (Break line)

� <br>

� Untuk pindah ke baris berikutnya.

� Bentuk penulisan lain yang dianjurkan (XML style) : <br />

6. Tag Font (size)

� Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna

tertentu.

� Tag : font Parameter : size, face, color

7. Tag Font (face)

� Memformat suatu bagian kalimat dengan ukuran,

� jenis huruf, atau warna tertentu.


8. Tag Font (color)

� Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna

tertentu.


9. Tag Enumerasi (List, Unnumbered List, Ordered List)

� <li>item</li>

� Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol •

(bullet)

� Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.

� Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol>

</ol>

10. Tag Garis Mendatar (Horizontal Line)

� <hr>

� membentuk garis pemisah mendatar.

� Bentuk penulisan lain yang dianjurkan (XML style) : <hr />

11. Tag Gambar (Image)

� <img src="NamaFileGambar">

NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, JPG, atau

.PNG.

� Untuk menampilkan sebuah file gambar.

� Bentuk penulisan lain yang dianjurkan (XML style) :

<img src="NamaFileGambar"/>

12. Tag Link (Anchor)

� <a href="Link">Kata yang di-click</a>

� <a name="#Acuan">Kata yang dituju</a>

� Link = Alamat URL atau nama file dan/atau acuan yang dituju

� Acuan = Kata sembarang sebagai penanda membentuk link ke URL/file/bagian

dokumen lain.

13. Tag Tabel (Table) – data

� <table> definisi tabel</table>

� Menampilkan data dalam bentuk tabel

� Tabel didefinisikan dengan cara menyatakan baris-barisdan kolom- kolom.

� Tag untuk penanda baris adalah <tr>definisi baris</tr>

� Tag untuk penanda kolom adalah <td>data</td>

14. Tag Tabel (Table) – layout

� Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk

keperluan ini)

15. Frame

� Frame membagi layar k dalam beberapa jendela, dimana masing-masing layar

menampilkan web page yang berbeda.

� Tag Dasar :

– <frameset> ..</frameset>

– <frame />

– <noframes> .. </noframes>

� Basic attributes

– cols = “values”….(value biasanya dituliskan dalam % menunjukkan besar

pembagian area)

– rows = “values”

– name = “frame_name”

– src = “frame_source(url)”

– target = “frame_name”

�

<frameset rows=“30%,*”>

<frame src=“banner.htm” />

<frameset cols = “25%,75%” >

<frame src=“menu.htm” />

<frame src=“content.htm” />

</frameset>

</frameset>

16. Form

Kegunaan Form dalam web:

� memperoleh data-data user baik nama, alamat dan data lainnya

� untuk mendaftar pada service yang di sediakan.

� memperoleh informasi pembelian secara online

� memperoleh feedback dari user mengenai website anda

17. Form – Text

� Form-1.htm

<HTML>

<HEAD>

<TITLE>Formulir-

1</TITLE>

</HEAD>

<BODY>

<FORMACTION =

"Info.htm"METHOD

= "GET">

Nama :

<INPUT TYPE = "TEXT" NAME = "nama pegawai" SIZE = 20"

MAXLENGTH = "20 ">

<BR>

Hobby :

<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = 25" MAXLENGH

= "40 ">

<BR>

<INPUT TYPE = " SUBMIT" VALUE = "KIRIM">

<INPUT TYPE = " RESET " VALUE = "KOSONGKAN">

</FORM>

</BODY>

</HTML>

� Info.htm

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

</BODY>

Info

</HTML>

Banner

Menu Content

18. Form (Password, Checkbox,Radio)

� Password :

<INPUT TYPE=“PASSWORD” NAME=“password” SIZE=“8”

MAXLENGTH=“8”>

� Checkbox

Buah yang Anda sukai : <BR>

<INPUT TYPE = “CHECKBOX”

NAME = “anggur” CHECKED> Anggur <BR>


NAME = “jeruk”> Jeruk<BR>


NAME = “melon”> Melon<BR>

� Radio

Agama : <BR>

<INPUT TYPE = “RADIO”

NAME = “agama” VALUE "I>Islam<BR>

<INPUT TYPE = “RADIO”

NAME = “agama” VALUE "K>Kristen<BR>

19. Form (Select, Textarea)

� Select :

Musik yang Disukai :<BR>

<SELECT NAME = “musik”>

<OPTION VALUE = “Jazz”>Jazz

<OPTION VALUE = “Rock”>Rock

<OPTION VALUE = “Keroncong”>Keroncong

� Textarea

Komentar Anda : <BR>

TEXTAREA NAME =“komentar”

ROWS =“5” COLS=40’

WRAP>123….ABC

</TEXTAREA>

LATIHAN

1. Perhatikan Gambar dibawah ini:

Dari gambar seperti diatas tuliskan atau buatkan bagaimana TAG HTML nya!

2. Tuliskan tag HTML jika ingin menampilkan : Kita dapat merujuk ke homepage Unindra

3. Buatlah dengan tag HTML untuk menampilkan file gambar dibawah ini !

o honda.jpg

o yamaha.png

o suzuki.gif

4. Buatlah dengan tag HTML untuk output / gambar di bawah ini !

NO NAMA ALAMAT KETERANGAN

1 RATNA DEPOK LUNAS

2 SISKA JAKARTA LUNAS

5. Perhatikan Form Menu dibawah ini

FORM KOMENTAR

Nama :

Komentar :

Buatlah dengan Tag HTML Form & Table untuk gambar diatas !

Kirim Batal

BAB 2

PENGENALAN CSS

(Cascading Style Sheets)

2.1 Pengertian CSS

� Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan

untuk memperindah halaman website (situs), dengan CSS kita dapat

dengan mudah mengubah keseluruhan warna dan tampilan yang ada di

situs kita sekaligus memformat ulang situs kita.

� CSS ini telah distandarkan oleh World Wide Web Consortium (W3C)

untuk digunakan di web browser

� Keuntungan CSS

- Dapat di-update dengan cepat dan mudah, karena kita

cukup mendefinisikan sebuah style-sheet global yang berisi

aturan-aturan CSS tersebut untuk diterapakan pada seluruh

dokumen-dokumen HTML pada halaman situs kita.

- User yang berbeda dapat mempunyai style-sheet yang

berbeda pula.

- Ukuran dan kompleksitas document code dapat diperkecil.

2.2 Penulisan CSS

Syntaxis CSS dibagi dalam 3 bagian, yaitu : selector {property : value}

Dimana :

selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).

property : atribut yang akan diubah.

h1 { color: green; }

selector

property

value

Penulisan CSS dibagi 3 penempatan :

o Internal Style Sheet

o External Style Sheet

o Inline Style Sheet

1. Internal Style Sheet

Yaitu menuliskan langsung script CSS di file HTML-nya.

Contoh :

<html>

<head>

<title>Belajar CSS</title>

<style type=”text/css”>

p {color: white; }

body {background-color: black; }

</style>

</head>

<body>

<p>Selamat Datang CSS</p>

</body>

</html>

2. External CSS

Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata

lain file CSS terpisah dengan file HTML. Browser akan membaca definisi

style dari file test.css dan akan mengikuti format tersebut.Eksternal style

ditulis di text editor lain dengan ekstention .css . Contoh :

<html>

<head>


<link rel=”stylesheet” type=”text/css”

href=”test.css”/>

</head>

<body>

<h3> Selamat Datang CSS </h3> </body>

</html>

3. Inline CSS

Yaitu penulisan kode CSS dalam tag HTML.

Contoh :

<html>

<head>


</head>

<p style=”background: blue; color: white;”>Style

Menggunakan CSS</p>

</body>

</html>

2.3 Jenis – jenis CSS

1. Font Property

� Font

Syntax : font: <value>

PossibleValues :

[<font-style>||<font-variant>||<font-weight>]?<font-size>[/<line-

height>]?<font-family>

Contoh:

P { font: italic bold 12pt/14pt Times, serif }

� Font Size

Syntax : font-size: <value>

PossibleValues :

<absolute-size>|<relative-size>|<length>|<percentage>

• <absolute-size>:xx-small | x-small |small|medium| large|x-large | xx-

large

• <relative-size> : larger | smaller

• <percentage>(in relation to parent element)

� Font Style

Syntax : font-style: <value>

Possible Values : normal |italic|oblique

� Font Variant

Syntax : font-variant: <value>

Possible Values : normal | small-caps

� Font Weight

Syntax : font-weight: <value>

Possible Values : normal |bold|bolder| lighter | 100 | 200 | 300 |400 |

500 | 600 | 700 | 800 | 900

2. Color & Background Property

� Color

Sintax : color : <color>

Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB.

16 keyword diambil dari palette Windows VGA: aqua, black, blue,

fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,

white, and yellow.

Ada 4 cara dalam menuliskan warna menggunakan kode RGB:

1. #rrggbb (e.g., #00cc00)

2. #rgb (e.g., #0c0)

- rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g.,

rgb(0,204,0))

- rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan

100.0 (e.g., rgb(0%,80%,0%))

� Background Color

Syntax : background-color: <value>

Possible Values : <color>| transparent

� Background

Syntax : background: <value>

Possible Values :

<background-color>||<background-image>||<background-

repeat>||<background-attachment>||<background-position>

3. CSS : Text Alignment & Box Property

� Text Alignment

Syntax : text-align: <value>

Possible Values : left | right | center | justify

� Box Properties

Bottom Border Width

Syntax : border-bottom-width: <value>

Possible Values : thin | medium | thick |<length>

� Width

Syntax : width: <value>

Possible Values: <length>|<percentage>| auto

� Height

Syntax : height : <value>

Possible Values : <length>| auto

� Border Style

Syntax : border-style: <value>

Possible Values: [ none | dotted | dashed | solid | double | groove |

ridge | inset | outset ]{1,4}

2.4 Hyperlink dengan CSS.

Contoh code program HTML hyperlink dengan CSS, untuk code HTMLnya

seperti berikut :

Dan untuk CSS nya seperti berikut :

Output pada browser :

Penjelasan :

Kita lihat code program,

� a : link = link awal dengan warna orange dan untuk garis bawah teks masih ada.

� a : visited = jika cursor dan di klik akan berwarna biru

� a : hover = jika cursor disorot ke link yang kita sorot maka akan berwarna

merah dan garis bawah pada teks akan hilang, sebab terdapat selector text-

decoration dan value none.

� a : active = jika link tersebut diklik dan halaman web berada pada link tersebut.

LATIHAN

1. Buatlah layout halaman web menggunakan CSS yang berisikan tentang profil diri

Anda !

2. Buatlah contoh penulisan CSS dengan metoda :

� Internal Style Sheet

� External Style Sheet

� Inline Style Sheet

BAB 3

PENGENALAN JAVASCRIPT

3.1 Sekilas tentang JavaScript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses

di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi

semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk

memvalidasi masukan - masukan pada formulir sebelum formulir dikirimkan ke

server.

Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda.

Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien),

sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang

dijalankan oleh klien.

Apa yang bisa dilakukan JavaScript :

1. Menciptakan halaman web yang lebih interaktif dan menarik.

2. Dapat memberikan text/content yang dinamis kedalam halaman HTML.

3. Dapat memberikan reaksi tertentu pada suatu event.

4. JavaScript bisa digunakan untuk validasi data pada form HTML sebelum dikirim

ke server. Contoh pada validasi e-mail.

5. Mendeteksi banyaknya pengunjung pada browser.

6. JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek

mouseover pada suatu image atau link. Dengan efek ini, suatu gambar dapat

berubah ketika mouse didekatkan ke gambar tersebut dan masih banyak lagi.

Ada beberapa hal penting dalam JavaScript yaitu :

1. Menggunakan blok awal "{" dan blok akhir "}".

2. Case Sensitive artinya membedakan penamaan variable dan fungsi yang

menggunakan huruf besar dan huruf kecil.

3. Extension umumnya menggunakan "*.js".

4. Setiap statement dapat diakhiri dengan ";" sebagaimana dengan C++, tetapi dapat

juga tidak.

5. Jika tidak didukung dalam browser versi lama, Scriptnya dapat disembunyikan

diantara tag "".

6. Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut

dengan karakter "\".

3.2 Struktur JavaScript

Struktur dari JavaScript adalah sbb :

<SCRIPT LANGUAGE = ”JavaScript”>

<!- -

Penulisan kode javascript

// - - >

</SCRIPT>

Keterangan :

Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser

tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar

sehingga tidak ditampilkan pada jendela browser.

3.3 JavaScript sebagai bahasa berorientasi pada obyek

1. Properti

Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya

properti warna mobil.

Penulisan :

Nama_objek.nama_properti = nilai

window.defaultStatus = ”Selamat Belajar JavaScript”;

2. Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan

sesuatu tindakan terhadap objek.

Penulisan :

Nama_objek.nama_metode(parameter)

document.write (”Hallo”)

3.4 Bentuk Script dari JavaScript

Script dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak

akan terlihat dalam jendela browser, karena ada tag tertentu yang memerintahkan

browser untuk memperlakukan bahwa script tersebut adalah script dari

JavaScript.

JavaScript dapat dituliskan dalam sebuah dokumen HTML dengan 2 cara :

1. Sebagai statement dan fungsi menggunakan tag SCRIPT.

2. Sebagai pengontrol perintah menggunakan tag HTML.

Tag SCRIPT yang dituliskan dalam HTML dituliskan sebagai berikut :

<SCRIPT>

JavaScript

statements................

</SCRIPT>

SCRIPT tersebut belum menunjukkan bahasa JavaScript, dan untuk memasukkan

bahasa JavaScriptnya tinggal menggunakan atribut LANGUAGE = JavaScript,

lengkapnya seperti berikut :

<SCRIPT LANGUAGE="JavaScript">

JavaScript

statements................

</SCRIPT>

3.5 Meletakkan JavaScript dalam Dokumen HTML

Ada beberapa cara untuk meletakkan kode JavaScript di dalam halaman

HTML.

1. Internal dalam file HTML

Pada umumnya kita meletakkan tag <script> diantara bagian kepala dari

dokumen HTML, yaitu bagian antara tag <head> dan </head>. Pemanggilan

fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen

HTML atau bisa kita sebut diantara tag <body> dan </body>.

2. Menggunakan file ekstern

Cara berikutnya adalah menuliskan kode program JavaScript dalam suatu file

teks dan kemudian file teks yang berisi kode JavaScript dipanggil dari dalam

dokumen HTML (khusus Netscape mulai versi 3 keatas).

Kode yang kita sisipkan ke dalam dokumen HTML adalah sebagai berikut :

<SCRIPT language="JavaScript" SRC="url/file.js"> </SCRIPT>

Dimana url/file.js adalah lokasi dan nama file yang berisi kode JavaScript, jika

perintah tambahan SRC tidak disertakan maka tag SCRIPT akan mencari kode yang

terletak dalam tag SCRIPT.

Contoh :

Simpan dengan nama "inti.js"

document.writeln("<CENTER>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("<H1>UNINDRA</H1>");

document.writeln("<H2>FAKULTAS TEKNIK dan ILMU KOMPUTER<H2>");

document.writeln("<H3>JURUSAN TEKNIK INFORMATIKA<H3>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("</CENTER>");

Simpan dengan nama "tampil.html"

<HTML>

<BODY>

<B>Contoh ini menggunakan Javascript yang diambil dari File

lain..</B>

<P>

<SCRIPT language="JavaScript" SRC="isi.js"></SCRIPT>

</BODY>

</HTML>

3.6 Memberikan Komentar (script tidak tereksekusi)

Seringkali pada browser versi lama, sebelum adanya JavaScript tidak

mengenal tag JavaScript dan tidak akan melewatkannya untuk dibaca. Contoh kode

diatas tidak akan terlihat di browser kita, akan tetapi dia akan menampilkan jendela

peringatan (berupa kotak dialog) karena script tersebut tidak lengkap, maksudnya

pada <SCRIPT language="javascript">, language="javascript">

nya tidak terbaca oleh browser sehingga akan merusak dokumen HTML yang akan

kita buat. Maka kita perlu tambahkan tag komentar agar scriptnya tidak dibaca sebagai

script akan tetapi dibaca sebagai komentar dan tidak akan dieksekusi sebagai program.

Contoh penggunaannya bisa seperti di bawah ini :

<SCRIPT language="javascript">



</SCRIPT>

JavaScript mendukung dua bentuk format untuk komentar :

1. Komentar satu baris, diawali dengan suatu double slash (//)

2. Komentar banyak baris, diawali dengan suatu /* dan diakhiri dengan suatu */

3.7 Menggunakan Tag <NOSCRIPT>

Tag ini digunakan untuk menampilkan pesan ke browser yang tidak

mendukung JavaScript dan jika browser sudah mendukung JavaScript maka tag ini

akan diabaikan dan isinya tidak akan ditampilkan.

Contoh :

Simpan dengan nama "cek.html"

<html> <body> <NOSCRIPT> Halaman ini menggunakan program JavaScript, Browser anda belum mendukungnya..!! </NOSCRIPT> <SCRIPT language="javascript"> document.write ("Browser yang ini sudah

mendukung JavaScript dengan baik") </SCRIPT> </body> </html>

Dengan tag <NOSCRIPT> ini minimal ada pemberitahuan dari browser bahwa

halaman yang dibuka mengandung program JavaScript, dan memberitahukan bahwa

browser yang digunakan belum mendukungnya.

Catatan :

Jika browser sudah mendukung JavaScript dan dinonaktifkan maka JavaScript yang

kita buat tidak berjalan.

3.8 Tipe Data

1. Numerik

a. Integer (bilangan bulat)

b. Float (bilangan desimal)

2. String (karakter, angka, tanda baca)

3. Boolean (bernilai true atau false)

3.9 Operator

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

* Perkalian 2

/ Pembagian 2

% Sisa Pembagian 2

++ Penaikan 1 (Kalau terletak di

depan)

-- Penurunan 1 (Kalau terletak di

depan)

Operator Assignment

Operator Contoh Ekuivalen dengan

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y

Operator Pembanding

Operator Penjelasan Contoh

== Sama dengan 5==8

!= Tidak sama dengan 5!=8

> Lebih besar dari 5>8

< Lebih kecil dari 5<8

>= Lebih besar atau sama

dengan

5>=8

<= Lebih kecil atau sama dengan 5<=8

Operator Logika

Operator Penggunaan

&& And

|| Or

! Not

Operator String

Operator concatenation digunakan untuk menggabungkan dua string.

Contoh :

text1="Hello" text2="JavaScript" text3=text1+text2

Hasil :

text3="Hello JavaScript"

3.9 Variabel

Variabel adalah suatu obyek yang berisi data data, yang mana dapat

dimodifikasi selama pengeksekusian program. Di JavaScript kita bisa memberikan

nama variabel sepanjang yang kita suka, akan tetapi harus memenuhi kriteria berikut

ini :

1. Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil)

atau satu karakter "_".

2. Nama variabel bisa terdiri dari huruf huruf, angka angka atau karakter "_" dan

"&" (spasi kosong tidak diperbolehkan).

3. Nama variabel tidak boleh memakai nama nama berikut ini (reserved oleh

program):

o abstract

o boolean, break, byte

o case, catch, char, class, const, continue

o debugger, default, delete, do, double

o else, export, extends

o Dan lain lain.

� Mendeklarasikan Variabel

Deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara :

1. Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dangan

nama variabel dan nilai dari variabel.

Contoh :

var coba = "hello"

2. Implisit : dengan menuliskan secara langsung nama dari variabel dan

diikuti nilai dari variabel.

Contoh :

coba = "hello"

� Meletakkan Variabel

1. Lokal : Jika dideklarasikan dengan menggunakan kata kunci var di dalam

suatu fungsi tertentu, maka variabel itu hanya bisa diakses dari dalam

fungsi tersebut, dan artinya variabel ini tidak berguna bagi fungsi fungsi

yang lain.

2. Global : Jika dideklarasikan di bagian awal dari script program, yang

artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam

program bisa mengakses variabel ini.

3.10 Objek dalam JavaScript

� Pengenalan Objek

JavaScript membagi satu halaman browser dalam berbagai objek dengan

tujuan untuk memudahkan kita mengaksessalah satu objek dan

memanipulasinya dengan cara merubah sifat/kondisi (properti) objek. Objek

tersebut diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita

bisa mengetahui dimana letak/lokasi objek itu sebenarnya.

Dimulai dari objek yang paling besar diantara semuanya (yang berisi objek

lainnya). Kemudian turun berdasarkan tingkatan atau hirarkinya sampai

kepada objek yang kita inginkan.

1. Objek paling besar adalah objek window dari browser.

2. Di dalam objek window, ada satu objek yang ditampilkan dalam bentuk

sebuah halaman, kita sebagai objek dokumen atau document.

3. Halaman berisi banyak objek seperti formula, image, dll.

� Hirarki Objek Browser

Hirarki ini penting untuk membuat acuan kepada objek dan propertinya.

Turunan dari suatu objek adalah properti dari objek orang tuanya. Karena

semua objek adalah merupakan turunan dari objek window, sehingga objek

window sendiri sendiri tidak memiliki acuan ke objek maupun properti

apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window lain

membutuhkan tambahan nama window kepada objek acuannya. Hal ini objek

window.

� Properti

Properti adalah atribut dari sebuah objek. Penulisannya (dipisahkan dengan tanda

"."):

nama_objek . nama_properti

Properti dapat diberi nilai, penulisannya :

objek . properti = nilai

Contoh :

Simpan dengan nama "status.html"

<html>

<head> <title>Properti defaultStatus</title> </head> <body>

<h3>Tes defaultStatus</h3> <p>Lihat di pojok kiri bawah...^^</p> <script language="javascript">



</script> </body> </html>

Penjelasan :

� Method

Method/Metode adalah suatu kumpulan kodeyang digunakan untuk melakukan

suatu tindakan terhadap objek.

ipisahkan dengan tanda "." :

nama_objek . nama_metode("parameter")

Contoh:

Simpan dengan nama "metode.html"

<html>

<head> </head> <body> <script language="javascript">

document.write("<h2>Semangat ^^

!!</h2>"); </script>

</body> </html>

Penjelasan :

� Event Handler

Dengan menggunakan JavaScript, kita dapat membuat halaman web yang

interaktif dan dinamis. Event adalah aksi dari user yang bisa terdeteksi oleh

JavaScript. Kita mendefinisikan event di tag tag HTML. Event handler tidak perlu

dimulai dengan tag <SCRIPT language="javascript">. Dia menyatu

dengan kode HTML.

Beberapa contoh event handler yang sering digunakan antara lain :

Event Event akan dijalankan ketika...

onMouseover User meletakkan kursor mouse diatas suatu elemen.

onFocus User memberikan focus kepada suatu elemen.

onBlur Elemen kehilangan fokus, artinya user melakukan klik diluar elemen itu.

onChange User memodifikasi isi dari data dalam satu field data.

onClick User melakukan klik mouse terhadap satu elemen yang berhubungan

dengan event.

onLoad Navigator user meload/memanggil suatu halaman.

onSubmit Melakukan klik tombol submit.

onMouseout Kursor mouse meninggalkan posisinya dari atas suatu elemen.

onReset Menghapus data pada suatu form dengan bantuan satu tombol reset.

Contoh:

Mengimplementasikan Event Handler, simpan dengan nama "event.html"

<html> <head></head> <body>

<input type="text" size="30"

onFocus="window.status='Silakan mengisi kotak';"> <br>

<input type="button" value="Lihat

tanggal" onMouseover="window.status='Lihat

tanggal hari ini'; return true;"

onClick="alert('Anda menekan tombol');">

</body> </html>

Saat mouse focus pada input text

Saat mouse berada di atas tombol

Event saat tombol di klik

� Struktur Kendali

Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman

web membutuhkan perintah perintah yang dapat mengatur aliran dari informasi.

Instruksi IF

if (kondisi)

{ ... blok if ... } else

{ ... blok else ...

}

Dalam bagan if tersebut, kondisi awal akan diperiksa. Jika benar, maka blok if

akan dijalankan. Namun jika kondisi ini bernilai salah, maka blok else yang

akan dijalankan.

Loop FOR dan WHILE

Syntax untuk perintah for adalah sebagai berikut :

for (penghitung; kondisi loop berhenti; modifikasi

penghitung) {

Daftar instruksi instruksi atau blok instruksi }

Sedangkan untuk while

while (kondisi syarat terpenuhi) {

Daftar instruksi instruksi atau blok instruksi }

Switch Case

switch (variabel)

{

case nilai1 : perintah1; break; case nilai2 :

perintah2; break; default

perintahN; break;

}

Contoh penggunaan Switch Case, simpan dengan nama "kendali.html"

<html> <head> <title>switch</title>

</head> <body> <script language="javascript"> <!--

var tanggal = new Date(); var kode_hari = tanggal.getDay(); var nama_hari = "";

switch(kode_hari) { case 0: nama_hari = "Minggu"; break;

case 1: nama_hari = "Senin"; break;

case 2: nama_hari = "Selasa"; break; case 3:

nama_hari = "Rabu"; break; case 4:

nama_hari = "Kamis"; break;

case 5:

nama_hari = "Jumat"; break; case 6: nama_hari = "Sabtu";

break; } document.write("Hari ini hari " +

nama_hari); document.write(", tanggal " +

tanggal.getDate() + "/" + (tanggal.getMonth() + 1)

+ "/" + tanggal.getYear());

//--> </script> </body>

</html>

� Fungsi

Fungsi adalah subprogram yang memungkinkan kita untuk menjalankan

sekelompok instruksi dengan satu pemanggilan sederhana nama fungsi

tersebut dari satu atau beberapa bagian di dalam badan suatu program.

function nama_dari_fungsi (argumen1, argumen2, ...)

{

Daftar instruksi instruksi atau blok instruksi

}

Pemanggilan fungsi : nama_dari_fungsi();

Contoh:

Mengimplementasikan fungsi dengan IF ELSE, simpan dengan nama

"fungsi_if.html"

<html> <head> <title>Fungsi dengan IF</title> </head>

<body> <table> <form name="fungsi_if"

action="fungsi.html" method="post"> <tr> <td>Masukkan nilai</td>

<td>:</td> <td> <input type="text"

name="angka"> </td> </tr> <tr>

<td colspan="3"> <input type="button" name="tombolProses"

value="Cek Nilai" onClick="cekNilai()"> </td> </tr>

</form> </table> <script language="javascript">

function cekNilai() { if (document.fungsi_if.angka.value >

65) document.write("Selamat anda

LULUS"); else document.write("Anda tidak

LULUS");

} </script> </body>

</html>

� Kotak Dialog

Alert()

Fungsi alert() merupakan navigator yang digunakan untuk menampilkan

suatu kotak dialog beserta informasi yang kita inginkan dengan satu pilihan

yakni "OK". User tidak mempunyai pilihan lain selain menekan tombol "OK".

Kita juga bisa menuliskan informasi yang kita inginkan tidak hanya dalam satu

baris yakni memutusnya dengan + '\n' +.

Contoh:

Simpan dengan nama "alert.html"

<html> <head></head>

<body> <script language="javascript"> window.alert("Terima Kasih !!"); </script>

</body> </html>

� Confirm()

Fungsi confirm() merupakan navigator seperti alert box dengan dua pilihan yakni

"OK" dan "Cancel". Jika kita menekan "OK" maka fungsi confirm() akan

mengembalikan nilai benar dan sebaliknya jika "Cancel" maka nilai salah akan

dikembalikan.

Contoh:

Simpan dengan nama "confirm.html"

<html>

<head></head> <body> <script language="javascript">

var r=window.confirm("Silakan tekan

tombol !!"); if (r==true) {

document.write("Anda pilih

OK"); }

else { document.write("Anda pilih

Cancel");

} </script> </body>

</html>

� Prompt()

Fungsi prompt() merupakan navigator seperti box lainnya yang digunakan

jika kita menginginkan user melakukan inputan sebelum memasuki sebuah

halaman. Ketika kotak dialog ini muncul, user akan memiliki dua pilihan

tombol "OK" atau "Cancel" untuk diproses setelah memasuki inputan.

Contoh:

Simpan dengan nama "prompt.html"

<html>

<head></head> <body> <script language="javascript"> var nama=prompt("Masukkan

nama anda !","user"); if (nama!=null && nama!=""){ document.write("Hallo "

+ nama + " ^_^"); } </script> </body>

</html>

� Implementasi

JavaScript pada validasi buku tamu, simpan dengan nama "validasi.html"

<html> <head> <title>Buku Tamu</title>

<script type="text/javascript"

language="javascript"> function validate() {

var

a=document.getElementById("email").value.indexOf("@"); var

fname=document.getElementById("fname").value;

var

i=document.getElementById("isi").value; submitOK="true";

if(fname.length==0){ alert("Silakan isi nama !");

}

if(fname.length>10){ alert("Nama tidak boleh

melebihi 3 karakter !"); submitOK="false";

} if(a==-1){ alert("bukan email yang valid

!"); submitOK="false"; } if(i.length==0){

alert("Silakan isi pesan !"); } if(submitOK=="false"){

return false; } } </script>

</head> <body> <form action="validasi.html"

onsubmit="return validate()"> <table width="42%" border="0"> <tr> <td width="31%">

Nama (max 10 karakter) </td> <td width="2%"> :

</td> <td width="67%"> <input name="text"

type="text" id="fname" size="20"> </td> </tr> <tr>

<td> e-mail </td>

<td> : </td> <td>

<input name="text2"

type="text" id="email" size="20"> </td>

</tr> <tr> <td> Pesan

</td>

<td> : </td> <td>

<textarea rows="5"

cols="20" id="isi"></textarea> </td>

</tr> <tr> <td> <input name="submit"

type="submit" value="Submit"> </td> <td>

</td> <td>

</td> </tr> </table>

</form> </body> </html>

LATIHAN

Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan

menggunakan javascript.

Contoh tampilan :

Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau /

ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan

operasi arithmetic sesuai dengan tombol yang ditekan.

Bahan Ajar

Documents

Transcript of Bahan Ajar