Javascript & JQuery Client Side Scripting. Herman Tolle Sistem Informasi PTIIK UB

Transkripsi

1 Javascript & JQuery Client Side Scripting Herman Tolle Sistem Informasi PTIIK UB

2 Web Dinamis Website yang dinamis menyediakan interaksi antara pengguna dengan halaman web Interaktifitas tidak didapatkan pada dokumen yang murni HTML saja. Kemampuan pemrograman dapat ditambahkan pada dokumen web untuk interaktifitas

3 Why JavaScript? Web application round-trip expensive no way to do computation on the client side example: form validation Web pages static no way to allow users to interact with the page example: popup link menus What is needed client-side code

4 Pemrograman Web Client Side Script : Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client. Javascript, Jscript, VBScript Server Side Script: Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client. ASP/ASP.Net, PHP, CGI, JSP, dll

5 Pemrosesan Script Web Browser (Client side processing) HTML JavaScript Java Applets HTTP Web Server Server Side Processing CGI SSI Servlet PHP JSP ASP Databases

6 Client Side Script Script yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML. Penambahan script ini mempunyai tujuan tertentu. Misalnya: menampilkan jam dan tanggal yang upto-date, menu yang dinamis (mis: pull down menu), kontrol terhadap sebuah window, animasi sederhana, animasi mouse maupun untuk validasi form, dll

7 Client Side Script Advantage: Waktu proses relatif cepat karena langsung dieksekusi oleh browser client Tidak memerlukan web server untuk hosting Dapat dieksekusi langsung oleh berbagai browser Disadvantage: Script bisa dilihat oleh pengguna Script dapat di copy-paste Tidak cocok untuk akses data atau database

8 Server Side Script Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll PHP: open source dan banyak digunakan luas Active Server Pages (ASP) dan ASP.Net, teknologi yang dikembangkan oleh Microsoft ColdFusion (CFM), dikembangkan oleh Macromedia Java Server Pages dan Servlet dikembangkan oleh Sun Microsystem Common Gateway Interface (CGI), yang dibuat dengan bahasa pemrograman C++ atau Perl Server Side Include (SSI), seperti misalnya Frontpage Server Extension

9 Server Side Script Advantage: Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-paste Cocok untuk akses data atau aplikasi database Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll Disdvantage: Waktu proses relatif lebih lambat karena dieksekusi oleh server Memerlukan web server untuk hosting

10 JavaScript Dikembangkan oleh Netscape tahun 1995 JavaScript is a scripting language for web clients interpreted Un-typed: tidak memiliki tipe data spesifik Dynamic HTML combination of JavaScript, CSS and DOM to create very flexible web page presentation

11 Pengenalan JavaScript Asal mula nama JavaScript adalah LiveScript, dikembangkan pertama kali pada tahun 1995 di Netscape Communications. Hasil kolaborasi antara Netscape dan Sun (pengembang bahasa pemrograman Java ) memberikan nama baru JavaScript pada tanggal 4 desember JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses pada sisi klien, sehingga kemampuan dokumen HTML menjadi lebih luas. JavaScript memungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum dikirim ke server JavaScript dapat mengimplementasi interaktiftifitas Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript yang terselip di dalam dokumen HTML. 11

12 Perbedaan JavaScript dan Pemrograman Java JavaScript adalah bahasa yang case sensitive artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil. Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma (;). 12

13 JavaScript code can be embedded in a Web page using SCRIPT tags <SCRIPT> </SCRIPT> the output of JavaScript code is displayed as if directly entered in HTML <html> <head> <title>javascript Page</title> </head> <body> <script type="text/javascript"> document.write("hello world!"); document.write("<p>how are <br />" + "<i>you</i>?</p>"); </script> <p>here is some static text as well. </p> </body> </html>

14 Bentuk skrip dan Komentar Skrip dari JavaScript terletak di dalam dokumen HTML. <SCRIPT language="javascript"> letakkan script anda disini </SCRIPT> Pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip, tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program. <SCRIPT language="javascript">  </SCRIPT> Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash. // semua karakter di belakang // tidak akan di eksekusi Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */ /* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */ 14

15 Meletakkan Script dalam HTML Menggunakan tag <SCRIPT> Tag <SCRIPT> diletakkan 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>. Contoh : <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="javascript">  </SCRIPT> </BODY> </HTML> 15

16 Meletakkan Script dalam HTML Menggunakan file ekstern Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). <SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT> dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script. Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik tombol mouse. <tag eventhandler="kode Javascript yang akan dimasukkan"> dimana eventhandler adalah nama dari event tersebut. 16

17 Properti Properti adalah atribut dari sebuah objek. Penulisannya (dipisahkan dengan tanda. ) : nama_objek. nama_properti Properti dapat diberi nilai, penulisannya : objek. properti = nilai Contoh : <HTML> <HEAD> <TITLE>Properti defaultstatus</title> </HEAD> <BODY> <H1>Tes defaultstatus</h1> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> Nama Objek Nama Properti Nilai 17

18 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">  </SCRIPT> </BODY> </HTML> Nama Objek Nama Metode Parameter 18

19 Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan manakala pemakai melakukan suatu tindakan/kejadian, misalnya mengklik tombol mouse atau ketika menutup jendela browser. Penulisannya :nama_kejadian = kumpulan kode Kumpulan kode dapat berisi sejumlah pernyataan. Antar pernyataan dipisahkan titik-koma. Contoh : <HTML> <HEAD> <TITLE>Kejadian</TITLE> </HEAD> <BODY> <H1>Tes Kejadian</H1> <P>Cobalah meletakkan penunjuk mouse ke link berikut dan perhatikan isi baris status. Kemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris status </P> <A HREF = " onmouseover = "window.status = 'Anda menyorot link, lho'; return true" onmouseout = "window.status = ''; return true">fujitsu</a> </BODY> </HTML> 19

20 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">  </SCRIPT> </BODY> </HTML> 20

21 Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan Jendela Konfirmasi <HTML> <HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> <HTML> <HEAD> <TITLE>Konfirmasi</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 21

22 Variabel Variable adalah suatu obyek yang berisi data data, yang mana dapat di modifikasi selama pengeksekusian program. Aturan pemberian nama variabel : Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter ''_''. Nama variabel bisa terdiri dari huruf huruf, angka angka atau karakter _ dan & (spasi kosong tidak diperbolehkan). Nama variabel tidak boleh memakai nama yang digunakan dalam reserved program, seperti : abstract, boolean, break, byte, if, implements, import, in, infinity, instanceof, int, interface, dll 22

23 Mendeklarasikan Variabel eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel : var test = halo implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel : test = halo <SCRIPT language="javascript"> <! var VariabelKu; var VariabelKu2 = 3; VariabelKu = 2; document.write(variabelku*variabelku2); // --> </SCRIPT> 23

24 Operator Matematika <HTML> <HEAD> <TITLE>Operasi Matematika</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 24

25 Operator Pembanding dan Logika Operator Keterangan Kategori == Kesamaan Pembanding!= Ketidaksamaan Pembanding < Kurang dari Pembanding <= Kurang dari atau sama dengan Pembanding > Lebih dari Pembanding >= Lebih dari atau sama dengan Pembanding! Bukan Logika && Dan Logika Atau Logika? Kondisi? Nilai Benar : Nilai Salah Pembanding 25

26 Operator Pembanding dan Logika <HTML> <HEAD> <TITLE>Operator?</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 26

27 Pernyataan IF Pernyataan IF tanpa else if (kondisi) { // blok pernyataan yang dijalankan // kalau kondisi bernilai benar } <HTML> <HEAD> <TITLE>Contoh if</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> Pernyataan IF dengan ELSE if (kondisi) { // blok pernyataan yang dijalankan // kalau kondisi bernilai benar } else { // blok pernyataan yang dijalankan // kalau kondisi bernilai salah } <HTML> <HEAD> <TITLE>Contoh if-else</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 27

28 Pernyataan IF Bersarang <HTML> <HEAD> <TITLE>Contoh if Berkalang</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 28

29 Pernyataan Switch Bentuknya : switch (variabel) { case nilai1 : perintah1; break; case nilai2 : perintah2; break; default perintahn; break; } 29

30 <HTML> <HEAD> <TITLE>Contoh switch</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 30

31 Bentuk pernyataan : while (kondisi) { pernyataan } Proses Berulang : Pernyataan While Contoh : <HTML> <HEAD> <TITLE>Contoh while</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 31

32 Proses Berulang : Pernyataan Do.While Bentuk pernyataan : do { blok pernyataan } while (kondisi) ; Contoh : <HTML> <HEAD> <TITLE>Contoh do while</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 32

33 Perulangan : Pernyataan For. Bentuk pernyataan : for (inisialisasi; kondisi; penaikan_penurunan) { pernyataan_pernyataan } Contoh : <HTML> <HEAD> <TITLE>Contoh for</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 33

34 Proses Pengulangan dalam Pengulangan <HTML> <HEAD> <TITLE>Contoh for Berkalang</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </PRE> </BODY> </HTML> 34

35 Fungsi Mendefinisikan Fungsi function nama(daftar_parameter) { Pernyataan_1; pernyataan_n; } HTML> <HEAD> <TITLE>Contoh Fungsi</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> Nama fungsi c = jumlah ( 2, 3 ); Nilai balik argumen 35

36 Fungsi yang Dibuat Sendiri Memvalidasi Masukan pada Formulir <HTML> <HEAD> <TITLE>Validasi Masukan</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> <FORM NAME = "formku"> <PRE> Nama : <INPUT TYPE = "TEXT" NAME = "nama"><br> <INPUT TYPE = "BUTTON" VALUE = "Kirim" onclick = "ceknama(this.form)"><br> </PRE> </FORM> </BODY> </HTML> 36

37 Fungsi yang Dibuat Sendiri Menampilkan Jam <HTML> <HEAD> <TITLE>Jam</TITLE> </HEAD> <BODY> <FORM NAME = "formwaktu"> Waktu Sekarang : <INPUT TYPE = "TEXT" NAME = "tekswaktu" VALUE = "" SIZE = "22"> </FORM> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 37

38 OBJEK Objek dari Navigator (Browser) JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek, dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifat/kondisi (properti) mereka. Dimulai dari obyek yang paling besar diantara semuanya, kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan. Obyek paling besar adalah obyek jendela (window) dari navigator. Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah halaman, kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya.. Untuk mengakses satu obyek, kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh : <script language="javascript">  </script> 38

39 JavaScript Object Reference JavaScript has a wide variety of objects you can use when programming, and each of them have different properties you can control or display through the use of methods. This list should make your programming jobs in JavaScript a little easier. Client-side JavaScript objects Anchor, Applet, Array, Boolean, Button, Checkbox, Date, document, event, FileUpload, form, Frame, Function, Hidden, History, Image, Java, JavaArray, JavaClass, JavaObject, JavaPackage, Layer Link, Location, Math, MimeType, Navigator, netscape, Number, Object, Option, Packages, Password, Plugin, Radio, RegExp, Reset, screen, Select, String, Style, Submit, Sun, Text, Textarea, window.

40 Objek Standard JavaScript 40

41 Objek Array Obyek array adalah satu obyek yang memungkinkan kita untuk membuat dan memanipulasi tabel, berikut ini adalah sintaks untuk membuat tabel : var x = new Array(elemen1[, elemen2,...]); jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi tabel kosong pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut. Metode standard Objek Array : 41

42 Objek Array Contoh : <HTML> <HEAD> <TITLE>Properti prototype</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 42

43 Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu. Sintaks sintaks untuk membuat obyek date adalah berikut ini : Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini. Nama_dari_obyek = new Date( hari, bulan tanggal tahun jam:menit:detik ) parameter berbentuk string dengan batas batas pemisah sepeti format diatas. Nama_dari_obyek = new Date(tahun, bulan, hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma Objek Waktu Standard getmonth(), getsecond(), gettime(),tolocalstring(),setdate(x),setday(x), sethours(x),setmonth(x), settime(x), dll Contoh : lihat Pembahasan SWITCH 43

44 Objek Password <HTML> <HEAD> <TITLE>Mengakses Objek password</title> </HEAD> <BODY> <FORM NAME = "formtes" ACTION = "tesform.htm" METHOD = "POST"> <PRE> Password Pengganti : <INPUT TYPE = "PASSWORD" NAME = "password_1"> Password Sekali Lagi: <INPUT TYPE = "PASSWORD" NAME = "password_2"> </PRE> <INPUT TYPE = "BUTTON" NAME = "tombolproses" VALUE = "Proses" onclick = "cekpassword()"> </FORM> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML> 44

45 Kapabilitas Javascript Implementasi pemrograman dalam dokumen HTML Fungsi-fungsi sisi client: validasi form (cek input), menampilkan Jam, Interaktifitas: Menu interaktif, pop up window Animasi: animasi mouse, background Kontrol setiap elemen dokumen HTML 45

46 Document Object Model Describes how the document object from JavaScript can be traversed and modified Represented as tree structure Can add new elements to the page Can change attributes of existing elements DOM has levels 0-3 and many substandards The DOM interface used in other contexts with other languages (C++, Java, python, etc.)

47 The document as a tree <html> <head> <title>a Document</title> </head> <body> <h1>a web page</h1> <p>a <i>simple</i> paragraph</p> </body> </html> <head> <title> A document document <html> <body> <h1> A web page <p> A <i> paragraph simple

48 Client-side JavaScript objects

49 Tips Client Side Script: Gunakan untuk proses-proses sisi client Script Javascript mudah untuk dibajak Pelajari bagaimana cara menambahkan ke website kita Source:

50 Referensi JavaScript Guide from Netscape (Complete Reference): als/communicator/jsguide4/index.htm Quick Reference from Shelly Cahsman: JavaScript Object Reference: bjects/index.html

51 Task Tambahkan pada website Anda: Show the time and date to a Web page. Add a greeting to a Web page based on the time of day. Using mouse event handlers create rollover effect.

52 JQUERY Javascript Framework

53 JQuery Powerful JavaScript library Access parts of a page using CSS or XPath-like expressions Modify the appearance of a page Alter the content of a page Change the user s interaction with a page Rich library of methods for AJAX development (AJAX = Asynchronous JavaScript and XML) With jquery and AJAX, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.

54 A Quality of Life by jquery: $( #firstname ).text( Joe Black ); $( button ).click(function() {alert Clicked ;}); $(.content ).hide(); $( #main ).load( content.htm ); $( <div/> ).html( Loading ).appendto( #content ); Very compact and fluent programming model

55 jquery is a lightweight, open-source JavaScript library that simplifies interaction between HTML and JavaScript

56 It was and still being developed by John Resig from Mozilla and was first announced in January 2006

57 It has a great community, great documentation, tons of plugins, and it was recently adopted by Microsoft (how about intellisense in VS?)

58 The current version is (as of July 2009)

59 Download the latest version from

60 To enable itellisense in VS 2008 SP1 install the vsdoc hotfix: VS90SP1-KB x86.exe

61 Copy the jquery.js and the jquery-vsdoc.js into your application folder

62 Reference it in your markup <script src= jquery.js /> No need to reference the vsdoc.js

63 Reference it in your JS files: ///<reference path= jquery.js /> or just drag it into the file

64 You can also reference it from Google <script src= ajax/libs/jquery/1.2.6/ jquery.min.js > </script>

65 jquery Core Concepts

66 The Magic $() function var el = $( <div/> ) Create HTML elements on the fly

67 The Magic $() function $(window).width() Manipulate existing DOM elements

68 The Magic $() function $( div ).hide(); $( div, $( p )).hide(); Selects document elements (more in a moment )

69 The Magic $() function $(function(){ }); Fired when the document is ready for programming. Better use the full syntax: $(document).ready(function(){ });

70 The full name of $() function is jquery( div ); It may be used in case of conflict with other frameworks.

71 The library is designed to be isolated (function(){ var jquery=window.jquery=window.$=function(){ // }; })(); jquery uses closures for isolation

72 Avoid $() conflict with other frameworks var foo = jquery.noconflict(); // now foo() is the jquery main function foo( div ).hide(); // remove the conflicting $ and jquery var foo = jquery.noconflict(true);

73 jquery s programming philosophy is: GET >> ACT $( div ).hide() $( <span/> ).appendto( body ) $( :button ).click()

74 Almost every function returns jquery, which provides a fluent programming interface and chainability: $( div ).show().addclass( main ).html( Hello jquery );

75 Three Major Concepts of jquery The $() function Get > Act Chainability

76 jquery Selectors

77 All Selector $( * ) // find everything Selectors return a pseudo-array of jquery elements

78 Basic Selectors By Tag: $( div ) // <div>hello jquery</div> By ID: $( #usr ) // <span id= usr >John</span> By Class: $(.menu ) // <ul class= menu >Home</ul> Yes, jquery implements CSS Selectors!

79 More Precise Selectors $( div.main ) // tag and class $( table#data ) // tag and id

80 Combination of Selectors // find by id + by class $( #content,.menu ) // multiple combination $( h1, h2, h3, div.content )

81 Hierarchy Selectors $( table td ) $( tr > td ) $( label + input ) // descendants // children // next $( #content ~ div ) // siblings

82 Selection Index Filters $( tr:first ) $( tr:last ) $( tr:lt(2) ) $( tr:gt(2) ) $( tr:eq(2) ) // first element // last element // index less than // index gr. than // index equals

83 Visibility Filters $( div:visible ) // if visible $( div:hidden ) // if not

84 Attribute Filters $( div[id] ) $( div[dir= rtl ] ) $( div[id^= main ] ) $( div[id$= name ] ) $( a[href*= msdn ] ) // has attribute // equals to // starts with // ends with // contains

85 Forms Selectors $( input:checkbox ) // checkboxes $( input:radio ) $( :button ) $( :text ) // radio buttons // buttons // text inputs

86 Forms Filters $( input:checked ) // checked $( input:selected ) // selected $( input:enabled ) // enabled $( input:disabled ) // disabled

87 Find Dropdown Selected Item <select name= cities > <option value= 1 >Tel-Aviv</option> <option value= 2 selected= selected >Yavne</option> <option value= 3 >Raanana</option> </select> $( select[name= ddl ] option:selected ).val()

88 SELECTORS DEMO

89

90 Document Traversal

91 A Selector returns a pseudo array of jquery objects $( div ).length Returns number of selected elements. It is the best way to check selector.

92 Getting a specific DOM element $( div ).get(2) or $( div )[2] Returns a 2 nd DOM element of the selection

93 Getting a specific jquery element $( div ).eq(2) Returns a 2 nd jquery element of the selection

94 each(fn) traverses every selected element calling fn() var sum = 0; $( div.number ).each( function(){ sum += (+this.innerhtml); }); this is a current DOM element

95 each(fn) also passes an indexer $( table tr ).each( function(i){ if (i % 2) $(this).addclass( odd ); }); $(this) convert DOM to jquery i - index of the current element

96 Traversing HTML.next(expr).prev(expr) // next sibling // previous sibling.siblings(expr) // siblings.children(expr) // children.parent(expr) // parent

97 Check for expression $( table td ).each(function() { if ($(this).is( :first-child )) { $(this).addclass( firstcol ); } });

98 Find in selected // select paragraph and then find // elements with class header inside $( p ).find(.header ).show(); // equivalent to: $(.header, $( p )).show();

99 Advanced Chaining $( <li><span></span></li> ) // li.find( span ) // span.html( About Us ) // span.andself() // span, li.addclass( menu ) // span,li.end() // span.end() // li.appendto( ul.main-menu );

100 Get Part of Selected Result $( div ).slice(2, 5).not(.green ).addclass( middle );

101 HTML Manipulation

102 Getting and Setting Inner Content $( p ).html( <div>hello $!</div> ); // escape the content of div.b $( div.a ).text($( div.b ).html());

103 Getting and Setting Values // get the value of the checked checkbox $( input:checkbox:checked ).val(); // set the value of the textbox $( :text[name= txt ] ).val( Hello ); // select or check lists or checkboxes $( #lst ).val([ NY, IL, NS ]);

104 Handling CSS Classes // add and remove class $( p ).removeclass( blue ).addclass( red ); // add if absent, remove otherwise $( div ).toggleclass( main ); // test for class existance if ($( div ).hasclass( main )) { // }

105 Inserting new Elements // select > append to the end $( h1 ).append( <li>hello $!</li> ); // select > append to the beginning $( ul ).prepend( <li>hello $!</li> ); // create > append/prepend to selector $( <li/> ).html( 9 ).appendto( ul ); $( <li/> ).html( 1 ).prependto( ul );

106 Replacing Elements // select > replace $( h1 ).replacewith( <div>hello</div> ); // create > replace selection $( <div>hello</div> ).replaceall( h1 );

107 $( h3 ).each(function(){ $(this).replacewith( <div> $(this).html() }); Replacing Elements while keeping the content + + </div> );

108 Deleting Elements // remove all children $( #maincontent ).empty(); // remove selection $( span.names ).remove(); // change position $( p ).remove( :not(.red) ).appendto( #main );

109 Handling attributes $( a ).attr( href, home.htm ); // <a href= home.htm > </a> // set the same as the first one $( button:gt(0) ).attr( disabled, $( button:eq(0) ).attr( disabled)); // remove attribute - enable $( button ).removeattr( disabled )

110 Setting multiple attributes $( img ).attr({ src : /images/smile.jpg, alt : Smile, width : 10, height : 10 });

111 CSS Manipulations // get style $( div ).css( background-color ); // set style $( div ).css( float, left ); // set multiple style properties $( div ).css({ color : blue, padding : 1em margin-right : 0, marginleft: 10px });

112 // get window height var winheight = $(window).height(); // set element height $( #main ).height(winheight); //.width() element Dimensions //.innerwidth().width() + padding //.outerwidth().innerwidth() + border //.outerwidth(true) including margin The default unit is Pixel (px)

113 Positioning // from the document $( div ).offset().top; // from the parent element $( div ).position().left; // scrolling position $(window).scrolltop();

114 Events

115 When the DOM is ready $(document).ready(function(){ // }); Fires when the document is ready for programming. Uses advanced listeners for detecting. window.onload() is a fallback.

116 Attach Event // execute always $( div ).bind( click, fn); // execute only once $( div ).one( click, fn); Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error (or any custom event)

117 jquery.event object

118 Detaching Events $( div ).unbind( click, fn); (Unique ID added to every attached function)

119 Events Triggering $( div ).trigger( click ); Triggers browser s event action as well. Can trigger custom events. Triggered events bubble up.

120 Events Helpers // attach / trigger elem.blur(fn) / elem.blur() elem.focus(fn) / elem.focus() elem.click(fn) / elem.click() elem.change(fn) / elem.change() And many others

121 Preventing Browser Default Action // use different triggering function $( div ).triggerhandler( click ); // prevent default action in handler function clickhandler(e) { e.preventdefault(); } // or just return false function clickhandler(e) {return false;}

122 Preventing Bubbling // stop bubbling, keep other handler function clickhandler(e) { e.stoppropagation(); } // stop bubbling and other handlers function clickhandler(e) { e.stopimmediatepropagation(); } // or just return false function clickhandler(e) {return false;}

123 Live Events // attach live event ( div ).live( click, fn); // detach live event ( div ).die( click, fn); Currently supported events: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

124 EVENTS DEMO

125 Effects

126 Showing or Hiding Element // just show $( div ).show(); // reveal slowly, slow=600ms $( div ).show( slow ); // hide fast, fast=200ms $( div ).hide( fast ); // hide or show in 100ms $( div ).toggle(100);

127 Sliding Elements $( div ).slideup(); $( div ).slidedown( fast ); $( div ).slidetoggle(1000);

128 Fading Elements $( div ).fadein( fast ); $( div ).fadeout( normal ); // fade to a custom opacity $( div ).fadeto ( fast, 0.5); Fading === changing opacity

129 Detecting animation completion $( div ).hide( slow, function() { alert( The DIV is hidden ); }); $( div ).show( fast, function() { $(this).html( Hello jquery ); }); // this is a current DOM element Every effect function has a (speed, callback) overload

130 Custom Animation //.animate(options, duration) $( div ).animate({ width: 90%, opacity: 0.5, borderwidth: 5px }, 1000);

131 Chaining Animation $( div ).animate({width: 90% },100).animate({opacity: 0.5},200).animate({borderWidth: 5px }); By default animations are queued and than performed one by one

132 Controlling Animations Sync $( div ).animate({width: 90% }, {queue:false, duration:1000}).animate({opacity : 0.5}); The first animation will be performed immediately without queuing

133 Referensi Jquery.com W3CShools.com