Download
1 / 16
160 likes | 372 Views
Javascript. MATA KULIAH :DESAIN WEB. Oleh : Denny Sagita R, S.Kom ., M.Kom. TAHUN AJARAN 2013/2014 SEMESTER GANJIL. Pengenalan JavaScript. Asal mula nama JavaScript adalah LiveScript , dikembangkan pertama kali pada tahun 1995 di Netscape Communications.
E N D
Javascript MATA KULIAH :DESAIN WEB Oleh : Denny Sagita R, S.Kom., M.Kom TAHUN AJARAN 2013/2014 SEMESTER GANJIL
Pengenalan JavaScript • Asalmulanama JavaScript adalahLiveScript,dikembangkanpertama kali padatahun 1995 di Netscape Communications. • HasilkolaborasiantaraNetscape danSun (pengembangbahasapemrograman“Java” ) memberikannamabaru“JavaScript” padatanggal 4 desember 1995. • JavaScript adalahbahasaskrip yang ditempelkanpadakode HTML dandiprosespadasisiklien, sehinggakemampuandokumen HTML menjadilebihluas. • Javascriptbergantungkepada browser(navigator) yang memanggilhalaman web yang berisiskripskripdariJavascript yang terselip di dalamdokumen HTML. • Javascripttidakmemerlukankompilatorataupenterjemahkhususuntukmenjalankannya
Perbedaan JavaScript danJava • JavaScript sendirimerupakanbahasa yang mudahdipahami • JavaScript adalahbahasa yang “case sensitive” • Setiapinstruksidalam JavaScript diakhiridengankaraktertitikkoma (;).
Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi) • Skripdari JavaScript terletak di dalamdokumen HTML. <SCRIPT language="Javascript"> letakkan script andadisini </SCRIPT> • Pada navigator versi lama, sebelumadanya JavaScript, tidakmengenal tag tersebutdanakanmelewatkannyauntuk di baca. Untukituperluditambahkan tag komentar agar skripnyatidakdibacasebagaiskrip, tetapi di bacasebagaikomentardantidakakandieksekusisebagai program. <SCRIPT language="Javascript"> <!-- letakkan script andadisini // --> </SCRIPT> • Untukmenuliskomentardalamsatubariskitagunakankarakterdobel slash. // semuakarakter di belakang // tidakakan di eksekusi • Untukmenuliskomentar yang terdiridaribeberapabariskitagunakankarakter /* dan */ /* Semuabarisantara 2 tandatersebuttidakakan di eksekusiolehkompilator */
Meletakkan JavaScript dalam dokumen HTML • Menggunakan tag <SCRIPT> • Tag <SCRIPT> diletakkandiantarabagiankepaladaridokumen HTML, yaitubagianantara tag <HEAD> dan</HEAD>. • Pemanggilanfungsi JavaScript (ataudisebutjugaevent) diletakkan di bagianbadandokumen HTML ataubisakitasebutdiantara tag <BODY> dan</BODY>. • Contoh : <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-- alert("Hallo !"); // --> </SCRIPT> </BODY> </HTML>
Meletakkan JavaScript dalam dokumen HTML • Menggunakan file ekstern • Menuliskankode program JavaScript dalamsuatu file teksdankemudian file teks yang berisikode JavaScript di panggildaridalamdokumen HTML (khusus Netscape mulaiversi 3 keatas). <SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT> dimanaurl/file.js adalahadalahlokasidannama file yang berisikode JavaScript, jikaperintahtambahan SRC tidakdisertakanmaka tag Script akanmencarikode yang terletak di dalam tag Script. • Melalui event tertentu • Event adalahsebutandarisatu action yang dilakukanoleh user, contohnyasepertikliktombol mouse. <tag eventHandler="kodeJavascript yang akandimasukkan"> dimanaeventHandleradalahnamadari event tersebut.
JavaScript Sebagai Bahasa Berorientasi Objek • JavaScript memperlakukanelemenelemen yang tampil di jendela navigator sebagaisuatuobyek , yang artinyaadalahelemen : • Diklasifikasikanberdasarkanhirarki/tingkatankhusussehinggakitabisamengetahuidimanaletak/lokasiobyekitusebenernya. • Diasosiasikandengankondisiatausifatsifatkhusus (properti)
JavaScript Sebagai Bahasa Berorientasi Objek • Ilustrasi: Kebun Pohon • Dahan o Daun o SarangBurung Panjang= 20 Warna = kuning Tinggi= 4 • Batang • Akar SangkarTernak • Ayam • Bebek • Sarangburung yang berada di ataspohondapat di tuliskansebagaiberikut : Kebun.Pohon.Dahan.SarangBurung • Bilainginmengecatataumenggantiwarnasarangburung yang terletak di ataspohon, makaperintahnya : Kebun.Pohon.Dahan.SarangBurung.warna=hijau
Properti • Propertiadalahatributdarisebuahobjek. • Penulisannya (dipisahkandengantanda “.”) : nama_objek . nama_properti • Propertidapatdiberinilai, penulisannya : objek . properti = nilai • Contoh : <HTML> <HEAD> <TITLE>PropertidefaultStatus</TITLE> </HEAD> <BODY> <H1>TesdefaultStatus</H1> <SCRIPT LANGUAGE = "JavaScript"> <!-- window.defaultStatus = "Selamatbelajar JavaScript“ ; //--> </SCRIPT> </BODY> </HTML> Nama Properti Nilai Nama Objek
Metode • Properti adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. • Penulisannya (dipisahkan dengan tanda “.”) : nama_objek . nama_metode(“parameter”) • Contoh : <HTML> <HEAD> <TITLE>Skrip Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-- document.write(“Selamat Mencoba JavaScript <BR>”): document.write(“Semoga Sukses” !”); // --> </SCRIPT> </BODY> </HTML> Nama Metode Parameter Nama Objek
Penanganan Kejadian (Event Handler) • PenangananKejadianadalahsekumpulankode yang akandijalankanmanakalapemakaimelakukansuatutindakan/kejadian, misalnyamengkliktombol mouse atauketikamenutupjendela browser. • Penulisannya :nama_kejadian = “kumpulankode” • Kumpulan kodedapatberisisejumlahpernyataan. Antarpernyataandipisahkantitik-koma. • Contoh : <HTML> <HEAD> <TITLE>Kejadian</TITLE> </HEAD> <BODY> <H1>TesKejadian</H1> <P>Cobalahmeletakkanpenunjuk mouse ke link berikut danperhatikanisibaris status. Kemudianpindahkanpenunjuk mouse dari link berikutdanperhatikanisibaris status </P> <A HREF = "www.fujitsu.com" onMouseOver = "window.status = 'Andamenyorot link, lho'; return true" onMouseOut = "window.status = ''; return true">Fujitsu</A> </BODY></HTML>
Pemasukan Data • JavaScript memiliki mekanisme yang memungkinkan pemakai disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK, maka kode dalam JavaScript akan melakukan serangkaian proses. • Contoh : <HTML> <HEAD> <TITLE>Pemasukan Data</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-- var nama = prompt("Siapa nama Anda?"); document.write("Hai, " + nama); //--> </SCRIPT> </BODY> </HTML>
Jendela Peringatan dan Jendela Konfirmasi • Jendela Konfirmasi • Jendela Peringatan <HTML> <HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-- window.alert("InimerupakanpesanuntukAnda"); //--> </SCRIPT> </BODY> </HTML> <HTML> <HEAD> <TITLE>Konfirmasi</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-- varjawaban = window.confirm( "Andainginmeneruskan?"); document.write("JawabanAnda: " + jawaban); //--> </SCRIPT> </BODY> </HTML>
Variabel • Variable adalahsuatuobyek yang berisi data data, yang manadapat di modifikasiselamapengeksekusian program. • Aturanpemberiannamavariabel : • Namavariabelharusdimulaiolehsatuhuruf (hurufbesarmaupunhurufkecil) atausatukarakter''_''. • Namavariabelbisaterdiridarihurufhuruf, angkaangkaataukarakter _ dan & (spasikosongtidakdiperbolehkan). • Namavariabeltidakbolehmemakainama yang digunakandalam reserved program, seperti : abstract, boolean, break, byte, if, implements, import, in, infinity, instanceof, int, interface, dll
Mendeklarasikan Variabel • eksplisit: denganmenuliskan kata kuncivarkemudiandiikutidengannamavariabeldannilaidarivariabel : var test = “halo” • implisit: denganmenuliskansecaralangsungnamadarivariabeldandiikutinilaidarivariabel : test = “halo” <SCRIPT language="Javascript"> <!– varVariabelKu; var VariabelKu2 = 3; VariabelKu = 2; document.write(VariabelKu*VariabelKu2); // --> </SCRIPT>
