1 / 49

Praktikum Java Script

Praktikum Java Script. Pengertian. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML

emiko
Download Presentation

Praktikum Java Script

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Praktikum Java Script

  2. 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

  3. 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

  4. 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.

  5. DeklarasiUmum <script> ……. </script> Agar text editor dapatmengidentifikasikanbahwasintaktersebutmerupakansintakjavascript yang digunakanuntukaplikasidi web, makaperlupenambahansintakdidalamsintak script yaitu <SCRIPT language="Javascript"> letakkanscript andadisini </SCRIPT>

  6. Peletaansintak java script padadokumen HTML • Script javascriptdiletakkandiantara <BODY> …. </BODY> • Script javascriptdiletakkandiantara <HEAD> …. </HEAD>

  7. Peletaansintak java script padadokumen HTML Menggunakan file ekstern • Melalui event tertentu

  8. Komentar <SCRIPT> // iniadalahkomentar /* iniadalah Komentar Yang panjang */ • </SCRIPT>

  9. Menulispada output html Mengakseselemen HTML • document.write(“kalimat yang akanditampilkan”); • //Find the element x=document.getElementById("demo") • //Change the content • x.innerHTML="Hello JavaScript";

  10. 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)

  11. 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.

  12. 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>

  13. 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]);

  14. 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

  15. Konversijenisvariabel • parseFloat() dengan parameter tertentumenjadibilangandesimal, SintaksdarifungsiparseFloatadalahsebagaiberikut : --------------------------------------- parseFloat(string);

  16. Operator Binary

  17. Operator Penugasan • Operator inimemungkinkankitauntukmenyederhanakanoperasipenambahannilaidalamsatuvariabeldanmenyimpanhasilnyadidalamvariabelitusendiri

  18. Operator Unary • Operator inimemungkinkankitauntukmenambahkanataupunmengurangi per unit darisatuvariabel. Operator inisangatbergunadalamstrukturpemrogramansistem Loop, yang membutuhkanpenghitung (variabel yang nilainyanaik/turunsatupersatu ) .

  19. Operator Pembanding

  20. Operator Logika (Booleans) • Operator jenisinimemungkinkankitauntukmemverifikasiapakahbeberapakondisisudahbenar

  21. Operator untukmemanipulasi data string • Operator + yang digunakanuntukvariabeljenis String memungkinkankitauntukmelakukanpenggabungan (concantenate) duavariabel String. var='a'+'b' adalahsamadenganvar='ab' var1='a' var=var1+'b' -> var='ab'

  22. Ekspresiperbandingan • (kondisi) ? nilaibenar : nilaisalah VarHadiah = (nilai > 90) ? “mobil” : “sepeda”

  23. 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 }

  24. 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 }

  25. 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++; }

  26. 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); }

  27. 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; }

  28. 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 }

  29. Pemanggilanfungsi <HTML> <HEAD> <SCRIPT language="Javascript"> <!-- function Pemanggilan() { //blokinstruksi } //--> </SCRIPT> </HEAD> <BODY onLoad="Pemanggilan();" > ………………………………… </BODY> </HTML>

  30. Parameter darifungsi

  31. 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).

  32. 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”

  33. Daftar Event

  34. Daftar Event

  35. Daftar Event

  36. Contoh Event

  37. Object

  38. Object • Membuatobyek var x = new Array(elemen1[, elemen2, ...]); var x = new Boolean(parameter); Nama_dari_obyek = new Date();

  39. 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();

  40. 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.

  41. 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);

  42. Alert <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> alert("Hallo !"); </SCRIPT> </BODY> </HTML>

  43. 2. Metoda confirm() • ,dengantambahankitabisamelakukanpilihan OK atau Cancel. Padasaatkitapilih OK makametodainiakanmengirimkannilai true danmengirimkannilai false jikakitamemilih Cancel • sedangkansintaksnyasendirisamasepertimetoda alert, dalamcontohinisintaksnyaadalah : confirm('Anda Mau MeneruskanProses ?');

  44. 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' );

  45. PRAKTIKUM

  46. Tambahkanhalaman entry page pada pertemuansebelumnyadenganverifikasi code (captcha) menggunakanjavascript

  47. Lanjutan

  48. Lanjutan

  49. SUMBER http://lecturer.eepis-its.edu/~idris/file/PemrogramanWeb/Teori/day-4.pdf http://codeproject.com http://w3schools.com Modul CCIT Ponorogo 2011

More Related