700 likes | 1.11k Views
Praktikum Java Script. Pengertian. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML
E N D
Pengertian • Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML • Bahasainiadalahbahasapemrogramanuntukmemberikankemampuantambahanterhadapbahasa HTML denganmengijinkanpengeksekusianperintahperintahdisisi user, yang artinyadisisi browser bukandisisi server web • Javascriptjugatidakmemerlukankompilatorataupenterjemahkhususuntukmenjalankannya
KelebihanJavascript • Ukuran file kecil Script darijavascriptmemilikiukuran yang kecilsehinggaketika web yang memilikijavascriptditampilkandi browser makaaksestampilannyaakanlebihcepatdibandingkanketika browser membukasuatu web yang memiliki script java • Mudahuntukdipelajari Bahasanyatidakserumit java • Terbuka Javascripttidakterikatoleh hardware maupun software tertentubahkan system operasi
KekuranganJavascript • Script tidakterenkripsi Karenajavascriptbersifat client side, maka script yang kitabuatdi text editor dantelahdijadikan web di server, ketika user me-request web dari server tersebutmakasintakjavascriptakanlangsungditampilkandi browser. • Kemampuanterbatas Walaupunjavascriptmampumembuatbentuk web menjadiinteraktifdandinamis, namunjavascripttidakmampumembuat program aplikasisendiriseperti java. • KeterbatasanObjek Javascripttidakmampumembuatkelas-kelas yang bisamenampungobjek-objektambahanseperti java karenajavascripttelahmemilikiobjek yang built-in padasturkturbahasanya.
DeklarasiUmum <script> ……. </script> Agar text editor dapatmengidentifikasikanbahwasintaktersebutmerupakansintakjavascript yang digunakanuntukaplikasidi web, makaperlupenambahansintakdidalamsintak script yaitu <SCRIPT language="Javascript"> letakkanscript andadisini </SCRIPT>
Peletaansintak java script padadokumen HTML • Script javascriptdiletakkandiantara <BODY> …. </BODY> • Script javascriptdiletakkandiantara <HEAD> …. </HEAD>
Peletaansintak java script padadokumen HTML Menggunakan file ekstern • Melalui event tertentu
Komentar <SCRIPT> // iniadalahkomentar /* iniadalah Komentar Yang panjang */ • </SCRIPT>
Menulispada output html Mengakseselemen HTML • document.write(“kalimat yang akanditampilkan”); • //Find the element x=document.getElementById("demo") • //Change the content • x.innerHTML="Hello JavaScript";
Variable Variable adalahsuatuobyek yang berisidata, yang manadapatdimodifikasiselamapengeksekusian program. kriteriaberikutinipenulisanvariabel : • Namavariabelharusdimulaiolehsatuhuruf (hurufbesarmaupunhurufkecil) atausatukarakter''_''. • Namavariabelbisaterdiridarihurufhuruf, angkaangkaataukarakter _ dan & (spasikosongtidakdiperbolehkan). • Namavariabeltidakbolehsesuaidengansintak yang adadi java script • Namavariabelcase sensitive (y dan Y adalahvariabel yang berbeda)
Jenisjenis data darivariabel • Numerik Berupabilanganatauangka yang mempunyaisifatmatematis (bisadijumlah, tambahdsb), misalnya : 17, 8, 1945 Integer : yaitusuatubilanganbulattanpapecahan Float : yaitusuatubilanganpecahanatauberpangkat. • Kata (kumpulan huruf) : kita sebut string var a = "Hallo"; var name = “Institut \”Teknologi \” Bandung ” • Booleans adalahsatuvariabelkhusus yang bergunauntukmengevaluasisuatukondisitertentu, olehkarenanyabooleanmempunyaiduanilai : True : diwakiliolehnilai 1 False : diwakiliolehnilai 0 • variabeldenganjenis null : satukatakhusus (termasuk keyword juga) untukmenjelaskanbahwatidakada data didalamnya.
MendeklarasikanVariabel • eksplisit : denganmenuliskankatakuncivarkemudiandiikutidengannamavariabeldannilaidarivariabel : var test = “halo” ; • implisit : denganmenuliskansecaralangsungnamadarivariabeldandiikutinilaidarivariabel : test = “halo “ -------------------------------------------------------------------------------------- <SCRIPT language="Javascript"> <!-- varVariabelKu; var VariabelKu2 = 3; VariabelKu = “Anissa”; Var x=true; Var y=null; document.write(VariabelKu*VariabelKu2); // --> </SCRIPT>
Array • var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; • Atau var cars=new Array("Saab","Volvo","BMW"); • Atau var cars=["Saab","Volvo","BMW"]; • Pengaksesan • document.write("elemen ke 4 dari tabel adalah "+cars[1]);
Konversijenisvariabel Meskipun JavaScript memungkinkanpengaturanperubahanjenisvariabelsecaratransparan, kadangkadangkitaperlujugauntukmelakukankonversijenisvariabelsecarapaksa. Ada 2 fungsidasar yang memungkinkanmerubahjenisvariabel yang dilewatkandengan parameter tertentu : • parseInt() Fungsiinimungkinkanmerubahsatuvariabel yang dilewatkandengan parameter tertentu (bisadalambentuk string ataupundalambentukbilangandalam basis yang disebutkandi parameter kedua) menjadibilanganbulat. Sintaksnyaadalahsebagaiberikut : parseInt(string[, basis]); ----------- • var a = "123"; • var b = "456"; • document.write(a+b,"<BR>"); // hasil 123456 • document.write(parseInt(a)+parseInt(b),"<BR>"); // hasil 579
Konversijenisvariabel • parseFloat() dengan parameter tertentumenjadibilangandesimal, SintaksdarifungsiparseFloatadalahsebagaiberikut : --------------------------------------- parseFloat(string);
Operator Penugasan • Operator inimemungkinkankitauntukmenyederhanakanoperasipenambahannilaidalamsatuvariabeldanmenyimpanhasilnyadidalamvariabelitusendiri
Operator Unary • Operator inimemungkinkankitauntukmenambahkanataupunmengurangi per unit darisatuvariabel. Operator inisangatbergunadalamstrukturpemrogramansistem Loop, yang membutuhkanpenghitung (variabel yang nilainyanaik/turunsatupersatu ) .
Operator Logika (Booleans) • Operator jenisinimemungkinkankitauntukmemverifikasiapakahbeberapakondisisudahbenar
Operator untukmemanipulasi data string • Operator + yang digunakanuntukvariabeljenis String memungkinkankitauntukmelakukanpenggabungan (concantenate) duavariabel String. var='a'+'b' adalahsamadenganvar='ab' var1='a' var=var1+'b' -> var='ab'
Ekspresiperbandingan • (kondisi) ? nilaibenar : nilaisalah VarHadiah = (nilai > 90) ? “mobil” : “sepeda”
StrukturKondisional • Strukturkondisionaladalahinstruksiinstruksi yang memungkinkankitauntukmelakukan test apakahsatukondisiadalahbenaratautidak, danmemungkinkanjugaterjadinyaprosesinteraksididalamskrip yang kitabuat if ((kondisi1)&&(kondisi2)) if ((kondisi1)||(kondisi2)) ----------------------------- if (kondisi syarat1 terpenuhi) { daftar instruksi atau blok instruksi } else { daftar instruksi/blok instruksi yang lain }
Loop • strukturinstruksiinstruksi yang dapatdieksekusiberulangumangselamakondisisyaratnyabelumterpenuhi. for (penghitung; kondisi loop berhenti; modfikasipenghitung) { daftar instruksi instruksi atau blok instruksi } Sebagaicontoh : for (i=1; i<6; i++) { Alert(i) } ------------------------ while (kondisisyaratterpenuhi) { daftar instruksi instruksi atau blok instruksi }
Instruksi continue • Adahal yang patutdiperhatikanjuga, adakalanyakitaperlumelakukanlompatan (jump) terhadapsatuataubeberapanilaitertentudidalam loop tanpamenghentikan loop itusendiri. Sintaks yang digunakandisiniadalah continue , dandiletakkandidalam loop itusendiri, padaumumnyakitatambahkanjugastrukturkondisionalsebagaisyaratsupayasintakstersebutberjalanlancar. Contoh : x=1; while (x<=10) { if (x == 7) { Alert('pembagianoleh 0'); X++; continue; } a = 1/(x-7); Alert(a); x++; }
Instruksi break • Sebaliknyakitajugabisamemaksa loop berhentisebelumwaktunyadenganalasan yang dikemukandibagianawaldari loop. Instruksi Break memungkinkanmenghentikansuatu loop (baikuntuk for ataupun while). Pemakaiannyasendirisepertiinstruksi continue, yaitupenambahanstrukturkondisional agar supaya loop berhentidantidakberulangulang looping Contoh : for (x=1; x<=10; x++) { a = x-7; if (a == 0) { Alert('pembagianoleh 0'); break; } Alert(1/a); }
Instruksi switch …. case • Instruksiinimemungkinkankitauntukmelakukan test berbagainilaidarivariabel yang sama. Dengancarainikitabisamelakukan testing terhadapberbagainilaivariabellebihsederhanadaripadamemakaiinstruksi if. switch (Variabel) { case Nilai1: blokinstruksi; break; case Nilai2: blokinstruksi; break; case NilaiX: blokinstruksi; break; default: blokinstruksi; break; }
Fungsi • Fungsiadalah subprogram yang memungkinkankitauntukmenjalankansekelompokinstruksidengansatupemanggilansederhananamafungsitersebutdarisatuataubeberapabagiandidalambadansuatu program. • Pendefinisian satu fungsi dinamakan deklarasi. Sintaks pendeklarasian suatu fungsi adalah sebagaiberikut : function Nama_dari_Fungsi(argumen1, argumen2, ...) { daftar instruksi atau blok instruksi }
Pemanggilanfungsi <HTML> <HEAD> <SCRIPT language="Javascript"> <!-- function Pemanggilan() { //blokinstruksi } //--> </SCRIPT> </HEAD> <BODY onLoad="Pemanggilan();" > ………………………………… </BODY> </HTML>
Bekerja dengan variabel di dalam fungsi • Variabel yang dideklarasikansecaraimplisitdidalamfungsi (tanpakatakuncivar) akanmenjadi global, yang artinyavariabelmasihbisadiaksessesudaheksekusidarifungsi. • Variabel yang dideklarasikansecaraeksplisitdidalamfungsi (menggunakankatakuncivar) akanmenjadilokal, yang artinyahanyadapatdiaksesdaridalamfungsi, semuareferensi yang memakaivariabelinidariluarfungsiakanmenyebabkanpesan error (variabeltidakdikenal).
Event • Event adalahsuatuaksi yang dilakukanolehpemakai yang memicujalannyakode JavaScript anda.sebagianbesar event dipicuolehpemakai yang memanipulasihalaman web pada program browsernya • Macam-macam event : • Click , event initerjadijikapemakaimengkliktombol mouse pada link atauelemen yang terdapat form. • Focus, event initerjadijikapemakaimengklikataumeletakkan pointer mouse padaelemen form seperti field teks , kotakcekdansebagainya. • Blur , event initerjadijikapemakaimenyingkirkan focus (pointer mouse) darielemen form yang sebelumnyadiberi focus. • Change , event initerjadijikapemakaimengubah input ataumasukanpadaelemen form. • MouseOver, terjadijikapemakaimeletakkan mouse diatassebuah link . • Select, event initerjadijikapemakaimemilihtekspadaelemen form , sepertimenggeser pointer mouse padatekssambilmenahantombolkiri mouse. • Submit, event initerjadibilamengkliktombol “submit”
Object • Membuatobyek var x = new Array(elemen1[, elemen2, ...]); var x = new Boolean(parameter); Nama_dari_obyek = new Date();
Object • Mengakses object properties • objectName.propertyName • Example : • var message="Hello World!"; • var x=message.length; • Mengakses Object Method • objectName.methodName() • var message="Hello world!"; • var x = message.toUpperCase();
Kotak Dialog • Kotak dialog adalah satu jendela yang tampil di bagian depan (layer paling atas) menyusul satu event yang di jalankan, dan memungkinkan kita untuk : • Memberikanperingatankepada user • Memberikanpilihan yang harusdipiliholeh user • Meminta user untukmengisiataumelengkapiisianpadasuatu form field.
1.Metoda alert() • Metoda alert() memungkinkan navigator untukmenampilkansatukotak dialog yang berisisatutombol OK danteksketerangan (sebagaisatusatunya parameter darimetoda). Padasaatkotakinimuncul, user tidakpunyapilihan lain selainmenekantombol OK. • Sintaksnyaadalahsebagaiberikut : alert(nama_dari_variabel); alert('teks'); alert('teks' + nama_dari_variabel);
Alert <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> alert("Hallo !"); </SCRIPT> </BODY> </HTML>
2. Metoda confirm() • ,dengantambahankitabisamelakukanpilihan OK atau Cancel. Padasaatkitapilih OK makametodainiakanmengirimkannilai true danmengirimkannilai false jikakitamemilih Cancel • sedangkansintaksnyasendirisamasepertimetoda alert, dalamcontohinisintaksnyaadalah : confirm('Anda Mau MeneruskanProses ?');
Metoda prompt() • Metoda prompt() agaksedikitlebihcanggihdibandingkankeduametodasebelumnyakarenadiadilengkapidengansatucarauntukmendapatkaninformasi yang diberikanoleh user. Metoda prompt() terdiridari 2 komponen, yang pertamateksuntukpertanyaandan yang keduaadalahteks default dari field yang akandiisiinformasioleh user. prompt('Siapakah Nama Anda ?', 'isi disini' );
Tambahkanhalaman entry page pada pertemuansebelumnyadenganverifikasi code (captcha) menggunakanjavascript
SUMBER http://lecturer.eepis-its.edu/~idris/file/PemrogramanWeb/Teori/day-4.pdf http://codeproject.com http://w3schools.com Modul CCIT Ponorogo 2011