pemrograman web meggunakan javascript -...

Lisensi Dokumen: Copyright © 2008-2017ilmuti.org

Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap

dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

PEMROGRAMAN WEB MEGGUNAKAN JAVASCRIPT

Rosiana Safitri

[email protected]

Abstrak

JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan

pada suatu dokumen HTML, 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.

Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan

terlihat dari dalam jendela navigator anda, karena diantara tag tertentu yang

memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari

JavaScript. Agar script tidak dibaca sebagai skrip, akan tetapi dibaca sebagai komentar

dan tidak akan dieksekusi sebagai program. Sebuah objek tersusun atas properti,

metode, dan penanganan kejadian.Dalam penanganan kejadian terdapat bebera sub

yaitu: menangani pemasukkan data, mengenal jendala peringatan, mengenal jendela

konfirmasi, mengenal hirarki objek. JavaScript juga mempunyai konsep variabel yaitu

suatu objek yang berisi data-data, yang mana dapat dimodifikasi selama pengeksekusian

program.

Pada JavaScript kita menggunakan system case sensitive yang artinya membedakan

nama variable dengan huruf besar dan huruf kecil. Terdapat 2 macam konsep variabel,

yaitu mendeklarasikan Variabel dan deklarasi variabel. Deklarasi variabel dapat kita

lakukan dengan dua cara yaitu:

Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variable

dan nilai dari variable Implisit : dengan menuliskan secara langsung nama dari variable

http://www.ilmuti.org/



mailto:[email protected]





dan diikuti nilai dari variabel. Ada 2 Fungsi dasar yang memungkinkan merubah jenis

variabel yang dilewatkan dengan parameter tertentu : Parselnt(), dan parseFloat().

Struktur Kondisional adalah intruksi-insruksi yang memungkinkan kita untuk

melakukan test apakah satu kondisi benar atau tidak, dan memungkinkan juga terjadinya

proses iterasi didalam skrip yang kita buat.ada beberapa pernyataan dari struktur

kondisional,pernyataan if, if..else, whie, do..while.

Kata kunci : Web, HTML, JavaScript, Internet

Pendahuluan

Pada era globalisasi, perkembangan teknologi akhir-akhir ini meningkat sangat pesat.

Salah satunya perkembangan dalam dunia web, oleh karena itu penulis memaparkan

masalah tentang perograman web dengan menggunakan JavaScript. javaScript itu

sendiri adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan

pada suatu dokumen HTML, 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 tidak ada hubungannya dengan Java, Javascript dikembangkan secara

terpisah, walaupun tadinya mengadopsi bahasa java. Javascript bersifat open language,

yaitu dapat digunakan oleh siapapun tanpa harus membayar lisensi, mungkin sama

halnya dengan open source, boleh digunakan secara gratis.

Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek

yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah

membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke

server, merubah image kursor ketika melewati objek tertentu.








Pembahasan

1. Pengertian Java Script

JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya

berjalan pada suatu dokumen HTML, 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. Secara fungsional, JavaScript digunakan untuk menyediakan akses

script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari

penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form

sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek

tertentu.

Perbedaan javascript dan java :

JavaSript Java

Bahasa yang diintepresentasikan langsung

oleh browsser

Bahasa yang setengah kompilasi dan

memerlukan java virtual Machine untuk

menterjemahkannya

Kode integrasi dangan HTML Kode(applet) terpisah dari dokumen HTML,

dipanggil pada saat membuka dokumen

HTML

Bahasa dengan karakteristik yang terbatas Bahasa dengan karakteristik yang luas

(pendeklararian jenis variable)

Hubungan dinamis, referensi dari obyek

diverivikasi pada saat loading

Hubungan statis, obyek harus ada pada saat

program di loading (di kompilasi)

Kode program bisa diakses Kode program tersembunyi








2. Bentuk skrip dari JavaScript

Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan

terlihat dari dalam jendela navigator anda, karena diantara tag tertentu yang

memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip

dari JavaScript.Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah

skrip dari JavaScript adalah sebagai berikut:

<SRIPT language=”Javascript”>

Letakkan sript anda disini

</SRIPT>

<HTML>

<HEAD>

<TITLE>Skrip Javascript</TITLE>

</HEAD>

<BODY>

Percobaan memakai javaScript:<BR>

<SCRIPTLANGUAGE=”JavaScrip”>

<!–

document.write(“Sealamat Mencoba JavaScript<BR>”);

dokumen.write(“Semoga Sukses”);

//à

</SCRIPT>

</BODY>

</HTML>

3. Memberikan Komentar Dalam JavaScript

Agar script tidak dibaca sebagai skrip, akan tetapi dibaca sebagai komentar dan tidak

akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :








<SCRIPT language=”JavaSrcipt”>

<!–

Letakkan script anda disini

//à

</SCRIPT>

Kegunaannya antara lain adalah :

a. Mengingatkan kita akan bagian-bagian khusus didalam skrip tersebut, jika kita

ingin merubah sesuatu di dalamnya.

b. Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan

petunjuk-petunjuk yang anda buat melalui komentar, kecuali anda tidak mau

mensharing program yang anda miliki.

4. JavaScript Sebagai Bahasa Berorientasi Objek

Sebuah objek tersusun atas properti, metode, dan penanganan kejadian.

a. Properti adalah atribut dari sebuah objek.

Contoh objek dalam JavaScript yaitu window. Objek ini memiliki banyak property, salah

satu diantaranya adalah default status. Properti ini menyatakan baris status yang terdapat

pada jendela browser.

Untuk mengakses sebuah property, perlu penulisan dengan bentuk sebagai berikut;

nama_objek.nama_properti

Contoh : Nama objek Nama properti

Windows.defaultStatus

Properti dapat diberi nilai melalui bentuk penugasan berikut:

Objek.properti=nilai








Contoh : window.dafaultStatus=”Selamat belajar JavaScript”;

<HTML>

<HAED>

<TITLE>Properti defaultStatus</TITLE>

</HEAD>

<BODY>

<H1>Tes defaultStatus</H1>

<SCRIPT LANGUAGE=”JavaScript”>

<!–

Window.defaultStatus=”Selamat belajat JavaScript”;

//à

</SCRIPT>

</BODY>

</HTML>

Window.defaultStatus

b. Metode

Adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan

terhadap objek. Sebagai contoh, write() pada objek document adalah metode

yang digunakan untuk menuliskan tulisan ke jendela browser.

Contoh : Nama objek Nama property

Document.write(“Halo”)

parameter

Jika sebuah kode tidak melibatkan parameter, tanda kurung buka dan tutup harus

disertakan Contoh : window.focus()








c. Penanganan Kejadian (Event handler)

Adalah sekumpulan kode yang akan dijal;ankan manakala pemakai melakukan

suatu tindakan. Contoh kejadian adalah ketika pemakai meng-klik tombol mouse

atau ketika menutup jendela browser. Bentuk penanganan kejadian adalah

sebagai berikut :

Nama_kejadian=”kumpulan kode”

Kumpulan kode berisi sebuah pernyataan, antar pernyataan dipisah dengan ;.

Contoh kejadian adalah onMouseOver (ketika penunjuk mouse menunjuk ke

link) dan onMouse Out (ketika penunjuk mouse tidak lagi menyorot link).

Contoh Penanganan Kejadian :

<HTML>

<HEAD>

<TITLE>Kejadian</TITLE>

</HEAD>

<BODY>

<H1>Tes Kejadian</H1>

<P>Cobalah letakkan penunjuk mouse ke link berikutdan perhatikan isi baris

status. Kemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi

baris status

</P>

<A HREF=”www.fujitsu.com”

onMouseOver=”window.status=’Anda menyorot link, lho’;return true”

onMouseOut=”window.status=”;return true”>fujitsu</A>








</BODY></HTML>

Menangani Pemasukan Data

<HTML>

<HEAD>

<TITLE>Pemasukan Data</TITLE>

</HEAD>

<BODY>


<!–

var nama=prompt(“Siapa nama anda?”);

Document.write(“Hai,”+nama);

//– >

</SCRIPT>

</BODY>

</HTML>

Mengenal Jendela Peringatan

Jika karena sesuatu hal anda ingin memberikan pesan kepada pemakai, anda

bisa menyajikannya dalam bentuk kotak dialog yang disebut Alert Box.

<HTML>

<HEAD>

<TITLE>Alert Box</TITLE>

</HEAD>

<BODY>


<!–








Window.alert(“Ini merupakan pesan untuk anda”);

//– >

</SCRIPT>

</BODY>

</HTML>

Mengenal Jendela Konfirmasi

<HTML>

<HEAD>

<TITLE>Konfirmasi</TITLE>

</HEAD>

</BODY>


<!–

Var jawaban=window.comfirm(“anda ingin meneruskan?”);

Document.write(“Jawaban Anda:”+jawaban);

//– >

</SCRIPT>

</BODY>

</HTML>

Mengenal Hirarki Objek

Salah satu objek yang mempunyai kedudukan tertinggi dalam JavaScript

adalah window. Objek ini sendiri memiliki objek lain; antara lain yaitu

statusbar dan document. Dengan demikian untuk mengakses document

diperlukan penulisan sebagai berikut :








Nama objek objek ini merupakan properti

bagi window

Window.document.write(“halo”)

Metode milik objek document

window

5. Konsep Variabel Dalam JavaScript

Variabel adalah suatu objek yang berisi data-data, yang mana dapat

dimodifikasiselam pengeksekusian program. Di JavaScript kita bias memberikan

nama variable dengan criteria berikut ini :

Nama variable harus dimulai oleh satu huruf (huruf besar maupun kecil) atau

satu karakter”_”.

Nama variable bias terdiri dari huruf-huruf, angka-angka atau karakter_dan &

(spasi kosong tidak diperbolehkan).

Nama variable tidak boleh memakai reserved word.

Pada JavaScript kita menggunakan system case sensitive yang artinya membedakan

nama variable dengan huruf besar dan huruf kecil.

Nama variable yang benar Nama variable yang tidak benar Alasan

Variabel Nama Dari Variabel Ada spasi kosong

Nama_Dari_Variabel 123Nama_Dari_Variabel Dimulai dengan angka

nama_dari_variabel [email protected] Karakter @

Nama_dari_variabel 123 Nama-Dari-Variabel Karakter -

_707 Transient Reserved word

Statusbar

document




mailto:[email protected]





a. Mendeklarasikan Variabel

Deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara :

Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama

variable dan nilai dari variable : var test=”halo”.

Implisit : dengan menuliskan secara langsung nama dari variable dan diikuti

nilai dari variabel : test=”halo”.

Navigator secara otomatis akan memperlukan pernyataan itu sebagai deklarasi dari

sebuah variable.Pengaksesan variable bergantung lokasi dimana dia dideklarasikan:

Jika dia didelkarasikan di bagian awal dari skrip program, yang artinya sebelum

pendeklarasian semua fungsi, maka semua fungsi di dalam program bias mengakses

variabel ini, dan variable ini menjadi variabel global. Jika dia dideklarasikan

dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variable

itu hanya bias diakses dari dalam fungsi tersebut, dan artinya variable ini tidak

berguna bagi fungsi-fungsi yang lain, dan kita sebut variabel ini menjadi variabel

local.

Contoh Mendeklarasikan Variabel

<HTML>

<HEAD>

<TITLE>Contoh deklarasi variabel</TITLE>

</HEAD>

<BODY>

<SCRIPT language=”JavaScript”>

<!–

Var VariabelKu;

Var VariabelKu2=3;

VariabelKu=2;








Document.write(VariabelKu*variabelKu2);

//à

</SCRIPT>

</BODY>

</HTML>

Contoh Variabel Lokal dan Global

<HTML>

<HEAD>

<TITLE>Contoh variabel Lokal dan Global</TITLE>

</HEAD>

<BOBY>

<SCRIPT language=”Javascript”>

<!–

var a=12;

var b=4;

Function Perkalian Dengan2(b)

{var a=b*2;return a;}

Document.write(“Dua kali dari”,b,” adalah”,Perkalian Dengan2(b));

document.write(“Nilai dari a adalah “,a);

//à

</SCRIPT>

</BODY>

</HTML>

b. Konversi jenis variabel

Meskipun JavaScript memungkinkan pengaturan perubahan jenis variabel secara

transparan, kadang-kadang kita perlu juga untuk melakukan konversi jenis variabel








secara paksa. Ada 2 Fungsi dasar yang memungkinkan merubah jenis variabel yang

dilewatkan dengan parameter tertentu :

a. Parselnt()

Fungsi ini memungkinkan merubah satu variabel yang dilewatkan dengan

parameter tertentumenjadi bilangan bulat. Sintaksnya adalah :

Parselnt(string[,basis]);

Contoh :

Var a=”123”; var b=”456”;

Document.write(a+b,”<BR>”);//hasil6

Document.write(parselnt(a)+parselnt(b),”<BR;// hasil 579

b. parseFloat()

Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah variabel

yang dilewatkan dengan parameter tertentu menjadi bilangan desimal, sintaks

dari fungsi parseFloat adalah :

parseFloat(string);

tabel contoh tentang penggunaan fungsi parseFloat()

Contoh

Hasil

parseFloat(“128.34”); 128.34

parseFloat(“128,34”); 128

parseFloat(“12.3E-6”); 0.0000123

parseFloat(“halo”); NaN

parseFloat(“24.568Halo38”); 24.568

parseFloat(“halo38.24”); NaN

parseFloat(“AFBBEF”); NaN

parseFloat(“0284”); 284

parseFloat(“0xAB882F”); 11241519








c. Struktur Kondisional

Adalah intruksi-insruksi yang memungkinkan kita untuk melakukan test apakah

satu kondisi benar atau tidak, dan memungkinkan juga terjadinya proses iterasi

didalam skrip yang kita buat.

a. Pernyataan if

Instruksi ini memungkinkan kita untuk mengeksekusi satu blokinstrukdi jika

kondisi syaratnya terpenuhi. Sintaks dari intruksi ini adalah : if (kondisi syarat

terpenuhi)

{daftar intruksi atau blok intruksi}

Beberapa catatan penting tentang intruksi ini :

Kondisi harus terletak diantara dua tanda kurung.

Kita bias meletakkan beberapa kondisi dengan menggunakan operator AND

atau OR

b. Pernyataan if..else

Instruksi if adalah intruksi dasar yang hanya memungkunkan kita untuk

melakukan pemeriksaan apakah satu kondisi terpenuhi atau tidak. Pada

kenyataanya kita menginginkan lebih dari satu kondisi syarat untuk

menjalankan program, untuk kebutuhan itu kita bias menggunakann instruksi

if…else…

Sintaks lengkap dari instruksi ini adalah :

If(kondisi syarat1 terpenuhi) {

Daftar instruksi atau blok instruksi

}

Else {

Daftar instruksi/blok instruksi yang lain

}








c. Pernyataan While

Sintaks dari intruksi ini adalah :

While (kondisi syarat terpenuhi) {

daftar instruksi-instruksi atau blok instruksi

}

Contoh pernyataan while

<HTML>

<HEAD>

<TITLE>Contoh while</TITLE>

</HEAD>

<BODY>


<!–

Var bilangan=0;

While (bilangan <5) {

document.write(“JavaScript<BR;

bilangan++;

}

//à

</SCRIPT>

</BODY>

</HTML>

d. Pernyatan do…while

Bentuk pernyataan do…while :

do {

blok pernyataan

} while (kondisi);








Contoh pernyataan do .. while

<HTML>

<HEAD>

<TITLE>Contoh do while</TITLE>

</HEAD>

<BODY>


<!–

Var bilangan=1;

do {

document.write(bilangan +”<BR>”);

bilangan++;

} while (bilangan <6);

//à

</SCRIPT>

</BODY>

</HTML>

e. Pernyataan For

For adalah salah satu intruksi yang menggunakan fasilitas Loop. Dalam

sintaksnya kita hanya perlu memasukkan nama variabel sebagai penghitung

(dan juga nilai awalnya, serta kondisi dimana loop akan berhanti(pada dasarnya,

kondisi dimana nilai penghitung melewati angka tertentu)), dan yang terakhir

intruksimodifikasi penghitung, increment (naik per unit) atau decrement (turun

par unit).sintaks lengkap dari intruksi ini adalah :

for (penghitung; kondisi loop berhenti; modifikasi penghitung){

daftar intruksi-instruksi atau blok instruksi

}








Contoh pernyataan For

<HTML>

<HEAD>

<TITLE>Contoh for</TITLE>

</HEAD>

<BODY>


<!–

var bilangan=0;

for (bilangan=1; bilangan <=5;

bilangan++)

document.write(bilangan + “<BR>”);

//à

</SCRIPT>

</BODY></HTML>

Penutup

JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan

pada suatu dokumen HTML. Javascript dikembangkan secara terpisah, dan tidak ada

hubungannya dengan java. Javascript bersifat open language, yaitu dapat digunakan

oleh siapapun tanpa harus membayar lisensi, mungkin sama halnya dengan open soure.

Kemampuan javascript diantaranya adalah :

- Berinteraksi / membaur dengan bahasa pemrograman / kode html.

- Dapat mengubah konten / isi sebuah halaman web.

Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript,

yaitu JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf

besar dan huruf kecil.








Referensi

http://erviana17.blogspot.co.id/2017_01_01_archive.html

http://www.google/pemrograman JavaScript.com

http://www.wikipidea.com

http://www.google/pengertian JavaScript.com

http://www.google/artikel javascript.com

Biografi

“Do your best at every opportunity that you have”

Musik dan photography adalah hobi saya. Hal lain dari saya yaitu suka travelling dan

adventure, dari pengalaman itu saya bisa banyak belajar arti menghargai waktu, mandiri,

bersyukur, dan menolong sesama. Untuk Pendidikan saya belajar di salah satu perguruan

tinggi swasta mengambil jurusan komputer akuntansi. Itu aja sih sekilas tentang saya, ingin

tahu saya lebih lanjut bisa dilihat di https://www.instagram.com/rosiana_aph/?hl=id




http://erviana17.blogspot.co.id/2017_01_01_archive.html

http://www.google/pemrograman%20JavaScript.com

http://www.wikipidea.com/

http://www.google/pengertian%20JavaScript.com

http://www.google/artikel%20javascript.com

https://www.instagram.com/rosiana_aph/?hl=id

pemrograman web meggunakan javascript -...

Documents