Hand Out Praktikum Web Programming Topik 3 – JavaScript Pengenalan JavaScript JavaScript merupakan salah satu bahasa scripting di Web. JavaScript digunakan di jutaan halaman-halaman Web untuk meningkatkan desain, validasi form, mendeteksi browser yang digunakan, membuat cookies, dan banyak lagi lainnya. JavaScript merupakan bahasa script yang sangat popular di internet, dan bekerja dalam semua browser-browser utama, seperti misalnya Internet Explorer, Firefox, dan Opera.

Apa Itu JavaScript? • • • • • •

JavaScript didesain untuk menambahkan interaktifitas pada halaman-halaman HTML JavaScript adalah bahasa scripting Sebuah bahasa scripting adalah bahasa pemrograman yang ringan JavaScript biasanya ditumpangkan (embedded) secara langsung pada halaman-halaman HTML JavaScript adalah bahasayang diinterpretasikan (yang berarti bahwa script tersebut dieksekusi tanpa dikompilasi terlebih dahulu) Semua orang dapat menggunakan JavaScript tanpa perlu membeli lisensi

Apakah Java dan JavaScript Sama? Tidak! Java dan JavaScript adalah dua bahasa yang sangat berbeda baik dalam hal konsep maupun desain! Java (dikembangkan oleh Sun Microsystems) adalah bahasa yang kuat dan jauh lebih rumit – dalam kategori yang sama dengan C dan C++

Apa Saja yang Bisa Dilakukan JavaScript? •

•

JavaScript memberikan para desainer HTML sebuah alat pemrograman – para perancang HTML biasanya bukanlah seorang programmer, tapi JavaScript adalah bahasa scripting dengan sintaks yang sangat sederhana! Hampir semua orang dapat meletakkan “potongan” kecil kode di dalam halaman-halaman HTML mereka. JavaScript dapat meletakkan teks dinamis ke dalam sebuah halaman HTML – Sebuah pernyataan JavaScript seperti ini: document.write("

" + name + "

") dapat menuliskan sebuah teks variable ke dalam halaman HTML

This HO is created by Finkle (         )Page 1

•

• •

•

•

JavaScript dapat bereaksi terhadap event – JavaScript dapat diset untuk eksekusi ketika sesuatu terjadi, seperti misalnya sebuah halaman telah selesai loading atau ketika seorang user mengklik pada sebuah element HTML JavaScript dapat membaca dan menulis elemen-elemen HTML – JavaScript dapat membaca dan mengubah isi dari sebuah elemen HTML JavaScript dapat digunakan untuk memvalidasi data – JavaScript dapat digunakan untuk memvalidasri data form sebelum dikirim ke sebuah server. Hal ini menghemat pemrosesan ekstra dari server JavaScript dapat digunakan untuk mendeteksi browser milik pengunjung – JavaScript dapat dignakan untuk mendeteksi browset milik para pengunjung, dan – tergantung pada browser tersebut – meload halaman lainnya yang secara spesifik didesain untuk browser tersebut JavaScript dapat digunakan untuk membuat cookies – JavaScript dapat digunakan untuk menyimpan dan mengambil informasi pada komputer milik pengunjung

Nama Sesungguhnya adalah ECMAScript Nama resmi JavaScript adalah “ECMAScript”. Standar ini dikembangkan dan diurus oleh organisasi ECMA. ECMA-262 adalah standar resmi JavaScript. Standar ini didasarkan pada JavaScript (Netscape) dan JScript (Microsoft). Bahasa ini dikembangkan oleh Brendan Eich di Netscape (dengan Navigator 2.0), dan telah muncul di semua browser milik Netscape dan Microsoft sejak tahun 1996. Pengembangan ECMA-262 dimulai pada tahun 1996, dan edisi pertama diadopsi oleh ECMA General Assembly pada Juni 1997. Standar ini diakui sebagai sebuah standar ISO internasional (ISO/IEC 16262) pada tahun 1998. Pengembangan dari standar ini masih dalam tahap pengerjaan.

Bagaimana Meletakkan JavaScript di dalam Halaman HTML <script type="text/javascript"> document.write("Hello World!");

Kode di atas akan menghasilkan keluaran berikut pada halaman HTML: Hello World!

This HO is created by Finkle ()Page 2

Penjelasan Contoh

Untuk memasukkan JavaScript ke dalam halaman HTML, kita menggunakan tag <script>. Di dalam tag <script> kita menggunakan atribut type untuk mendefinisikan bahasa scripting tersebut. Jadi, <script type="text/javascript"> dan memberitahukan dimana letak JavaScript dimulai dan berhenti: <script type="text/javascript"> ...

Tulisan document.write adalah standar perintah JavaScript untuk menuliskan output ke sebuah halaman. Dengan memasukkan perintah document.write diantara tag <script> dan , browser akan mengenalinya sebagai perintah JavaScript dan mengeksekusi baris kode tersebut. Dalam hal ini browser akan menuliskan Hello World! pada halaman. By entering the document.write command between the <script> and tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: <script type="text/javascript"> document.write("Hello World!");

Catatan: Jika kita tidak memasukkan tag <script>, maka browser hanya akan memperlakukan perintah document.write("Hello World!") sebagai teks murni, dan hanya menuliskan seluruh baris tersebut pada halaman tersebut.

This HO is created by Finkle ()Page 3

Comment HTML untuk Menangani Browser Sederhana Browser-browser yang tidak mendukung JavaScript akan menampilkan JavaScript sebagai isi halaman. Untuk mencegah hal ini terjadi, dan sebagai bagian dari standar JavaScript, tag comment HTML dapat digunakan untuk menyembunyikan JavaScript. Cukup tambahkan tag comment HTML (akhir dari comment) pada statement terakhir JavaScript. <script type="text/javascript">

Dua tanda slash pada akhir dari baris comment adalah simbol comment JavaScript. Ini mencegah JavaScript untuk mengeksekusi tag -->.

Dimana Tempat untuk Meletakkan JavaScript JavaScript di dalam sebuah halaman akan dieksekusi secara langsung ketika halaman tersebut diload di sebuah browser. Ini tidak selalu menjadi yang kita inginkan. Kadang-kadang kita ingin mengeksekusi sebuah script ketika halaman tersebut di-load, kadang-kadang kita ingin script tersebut di-load ketika seorang user memicu sebuah event. Scripts di bagian head: Script-script yang ingin dieksekusi ketika mereka dipanggil, atau ketika suatu event dipicu, diletakkan di bagian head. Ketika kita meletakkan sebuah script di bagian head, kita akan memastikan bahwa script tersebut di-load sebelum digunakan oleh orang lain. <script type="text/javascript"> ....

Script di bagian body: Script yang ingin dieksekusi ketika halaman di-load diletakkan di bagian body. Ketika kita meletakkan sebuah script di bagian body maka script tersebut akan menghasilkan isi dari halaman.

This HO is created by Finkle ()Page 4

<script type="text/javascript"> ....

Script yang terletak di bagian body dan head: Kita dapat meletakkan script yang jumlahnya tak terbatas di dokumen milik kita, jadi kita dapat meletakkan script baik di bagian head maupun body. <script type="text/javascript"> .... <script type="text/javascript"> ....

Menggunakan JavaScript Eksternal Kadang-kadang kita mungkin ingin menjalankan JavaScript yang sama pada pada beberapa halaman, tanpa harus menuliskan script yang sama pada setiap halaman tersebut. Untuk mempermudah ini, kita dapat menuliskan sebuah JavaScript di file eksternal. Simpan file JavaScript eksternal tersebut dengan ekstensi file .js. Catatan: Script eksternal tidak dapat mengandung tag <script>! Untuk menggunakan script eksternal, tunjuk file .js di atribut “src” di tag <script>: <script type="text/javascript" src="xxx.js">

Catatan: Ingat untuk meletakkan script tepat dimana kita ingin meletakkan script tersebut!

This HO is created by Finkle ()Page 5

JavaScript Bersifat Case Sensitive Tidak seperti HTML, JavaScript bersifat case sensitive – oleh karena itu, perhatikan kapitalisasi huruf ketika kita menuliskan statement JavaScript, membuat atau memanggil variable, object, dan fungsi.

Statement JavaScript Sebuah statement JavaScript adalah command/perintah kepada browser. Tujuan dari perintah ini adalah untuk memberitahu browser apa yang harus dilakukannya. Statement JavaScript berikut memberitahu browser untuk menuliskan “Hello Finkle” pada halaman web: document.write("Hello Finkle");

Adalah hal yang normal untuk meletakkan tanda ; pada akhir dari setiap statement yang dapat dieksekusi. Kebanyakan orang berpikir bahwa ini adalah latihan pemrograman yang bagus, dan kita akan sering sekali melihat contoh JavaScript ini di web. Tanda ; bersifat optional (tergantung dari standar JavaScript), dan browser seharusnya menginterpretasikan akhir dari setiap baris adalah akhir dari statement. Oleh karena itu, kita akan sering melihat contoh-contoh tanpa tanda ; di akhir sebuah baris. Catatan: Menggunakan tanda ; membuat kita dapat menuliskan beberapa statement pada satu baris.

Kode JavaScript Kode JavaScript (atau cukup JavaScript saja) adalah serangkaian dari statement JavaScript. Masing-masing statement dieksekusi oleh browser dalam urutan yang tertulis. Contoh berikut akan menuliskan sebuah header dan dua paragraf di sebuah halaman web: <script type="text/javascript"> document.write("

This is a header

"); document.write("

This is a paragraph

"); document.write("

This is another paragraph

");

Block JavaScript Statement JavaScript dapat dikelompokkan bersama-sama di dalam blok-blok. This HO is created by Finkle ()Page 6

Blok diawali dengan tanda {, dan diakhiri dengan tanda }. Tujuan dari sebuah blok adalah untuk membuat serangkaian dari statement dieksekusi bersamaan. Contoh berikut akan menuliskan sebuah header dan dua paragraf pada sebuah halaman web: <script type="text/javascript"> { document.write("

This is a header

"); document.write("

This is a paragraph

"); document.write("

This is another paragraph

"); }

Contoh di atas mungkin tidak terlalu berguna. Itu hanya mendemonstrasikan penggunaan blok. Biasanya block digunakan untuk mengelompokkan statement-statement di dalam sebuah fungsi atau di dalam sebuah kondisi (dimana sekumpulan statement akan dieksekusi jika ditemukan sebuah kondisi).

Comment pada JavaScript Comment dapat ditambahkan untuk menjelaskan JavaScript, atau untuk membuatnya lebih dapat terbaca. Comment baris tunggal dimulai dengan tanda //. Contoh berikut menggunakan comment baris tunggal untuk menjelaskan kode: <script type="text/javascript"> // Ini akan menuliskan header: document.write("

This is a header

"); // Ini akan menuliskan dua paragraf document.write("

This is a paragraph

"); document.write("

This is another paragraph

");

Comment Multi-Baris pada JavaScript Comment yang terdiri dari beberapa baris dapat dimulai dengan tanda /* dan diakhiri dengan tanda */. Contoh berikut menggunakan comment multi-baris untuk menjelaskan kode: the code: <script type="text/javascript"> /* Kode di bawah akan menuliskan

This HO is created by Finkle ()Page 7

satu header dan dua paragraf */ document.write("

This is a header

"); document.write("

This is a paragraph

"); document.write("

This is another paragraph

");

Menggunakan Comment untuk Mencegah Eksekusi Di dalam contoh berikut, comment digunakan untuk mencegah eksekusi dari sebaris kode tunggal: <script type="text/javascript"> document.write("

This is a header

"); document.write("

This is a paragraph

"); //document.write("

This is another paragraph

");

Di dalam contoh berikut, comment digunakan untuk mencegah eksekusi dari beberapa baris kode: <script type="text/javascript"> /* document.write("

This is a header

"); document.write("

This is a paragraph

"); document.write("

This is another paragraph

"); */

Menggunakan Comment pada Akhir Baris Di dalam contoh berikut comment diletakkan pada akhir baris: <script type="text/javascript"> document.write("Hello"); // Ini akan menulis "Hello" document.write("Finkle"); // Ini akan menulis "Finkle"

Variabel JavaScript Sama seperti pada matematika, variabel pada JavaScript juga digunakan untuk menyimpan nilainilai atau ekspresi. Sebuah variabel dapat memiliki nama yang pendek, seperti x, atau nama yang lebih deskriptif, misalnya carname. Peraturan untuk nama-nama variabel JavaScript: •

Nama variabel bersifat case sensitive (y dan Y adalah dua variabel yang berbeda)

This HO is created by Finkle ()Page 8

•

Nama variabel harus dimulai dengan huruf atau karakter underscore _

Catatan: Karena JavaScript bersifat case-sensitive, maka nama variabel juga case-sensitive.

Contoh Nilai sebuah variabel dapat berubah selama proses eksekusi sebuah script. Kita dapat mengarah pada sebuah variabel dengan namanya, untuk menampilkan atau mengubah nilainya. A variable's value can change during the execution of a script. You can refer to a variable by its name to display or change its value. Berikut adalah caranya: <script type="text/javascript"> var firstname; firstname="Hengky"; document.write(firstname); document.write("
"); firstname="Tandra"; document.write(firstname);

Script di atas mendeklarasikan sebuah variabel, memberikan nilai kepadanya, menampilkan nilainya, mengubah nilainya, dan menampilkan nilainya lagi.

Mendeklarasikan (Membuat) Variabel JavaScript Membuat variabel di dalam JavaScript juga sering disebuah sebagai “mendeklarasikan” variabel. Kita dapat mendeklarasikan variabel JavaScript dengan statement var: var x; var carname;

Setelah deklarasi yang ditunjukkan di atas, variabel-variabel tersebut masih kosong (belum punya nilai). Tapi, kita juga dapat mendeklarasikannya:

langsung

memberikan

nilai

kepada

variabel

ketika

kita

var x=5;

This HO is created by Finkle ()Page 9

var carname="Mercedes Benz";

Setelah eksekusi dari statement di atas, maka variabel x akan menyimpan nilai 5, dan variabel carname akan menyimpan nilai Mercedes Benz. Catatan: Ketika kita memberikan nilai berupa teks kepada sebuah variabel, kita harus menggunakan tanda “ di sekeliling nilai tersebut.

Memberikan Nilai kepada Variabel JavaScript yang Belum Dideklarasikan Jika kita memberikan nilai kepada variabel yang belum dideklarasikan, maka variabel tersebut akan secara otomatis dideklarasi. Pernyataan berikut: x=5; carname="Mercedes Benz";

memiliki efek yang sama dengan: var x=5; var carname="Mercedes Benz";

Mendeklarasikan Ulang Variabel JavaScript Jika kita mendeklarasikan ulang sebuah variabel JavaScript, maka nilai pada variabel sebelumnya tidak akan hilang. var x=5; var x;

Setelah eksekusi dari statement tersebut, variabel x akan masih tetap memiliki nilai 5. Nilai x tidak di-reset (atau dibersihkan) ketika kita mendeklarasikannya.

Aritmatika JavaScript Sama seperti matematika, kita dapat melakukan operasi aritmatika dengan variabel JavaScript: y=x-5; z=y+5;

Operator Perbandingan This HO is created by Finkle ()Page 10

Operator perbandingan dapat digunakan dalam statement logika untuk menentukan persamaan atau perbedaan diantara variabel atau nilai-nilai. Misalkan nilai x = 5, tabel di bawah ini akan menjelaskan tentang operator perbandingan: Operator

Penjelasan

Contoh

==

is equal to

x==8 is false

===

is exactly equal to (value and type)

x===5 is x==="5" is false

!=

is not equal

x!=8 is true

>

is greater than

x>8 is false

<

is less than

x<8 is true

>=

is greater than or equal to

x>=8 is false

<=

is less than or equal to

x<=8 is true

true

Bagaimana Cara Penggunaannya Operator perbandingan dapat digunakan dalam statement kondisional untuk membandingkan nilai-nilai dan mengambil keputusan tergantung dari hasilnya: if (age<18) document.write("Too young");

This HO is created by Finkle ()Page 11

Operator Logika Operator logika digunakan untuk menentukan logika antara variabel dan nilai-nilai. Misalkan nilai x=6 dan y=3, tabel di bawah menjelaskan operator logika: Operator

Penjelasan

Contoh

&&

and

(x < 10 && y > 1) is true

||

or

(x==5 || y==5) is false

!

not

!(x==y) is true

Operator Kondisional JavaScript juga mengandung sebuah operator kondisional yang menempatkan nilai ke sebuah variabel berdasarkan pada beberapa kondisi. Sintaks variablename=(condition)?value1:value2

Contoh greeting=(visitor=="PRES")?"Dear President ":"Dear ";

Jika variabel visitor bernilai "PRES", maka variabel greeting akan diberi nilai "Dear President " jika bukan, maka akan bernilai "Dear".

Statement Kondisional Seringkali ketika kita menuliskan kode, kita ingin menghasilkan aksi yang berbeda untuk keputusan yang berbeda. Kita dapat menggunakan statement kondisional di dalam kode milik kita untuk melakukannya. Di dalam JavaScript, kita memiliki statement kondisional seperti berikut: • • •

Statement if – gunakan statement ini jika kita ingin mengeksekusi beberapa kode hanya jika sebuah kondisi yang dispesifikasikan bernilai benar. Statement if...else – gunakan statement ini jika kita ingin mengeksekusi beberapa kode jika kondisinya benar, dan kode lainnya jika kondisinya salah Statement if...else if....else – gunakan statement ini jika kita ingin memilih salah satu dari banyak blok untuk dieksekusi

This HO is created by Finkle ()Page 12

•

Statement switch – gunakan statement ini jika kita ingin memilih salah satu dari banyak blok untuk dieksekusi

Statement If Kita dapat menggunakan statement ini jika kita ingin mengeksekusi hanya beberapa kode saja jika sebuah kondisi yang dispesifikasikan bernilai benar. Sintaks if (kondisi) { Kode yang akan dieksekusi jika kondisi benar }

Perhatikan bahwa if ditulis dalam huruf kecil. Jika kita menggunakan huruf besar (IF) maka akan muncul JavaScript error! Contoh 1 <script type="text/javascript"> //Menuliskan sapaan "Good morning" jika //waktunya kurang dari 10 var d=new Date(); var time=d.getHours(); if (time<10) { document.write("Good morning"); }

Contoh 2 <script type="text/javascript"> //Menuliskan "Lunch-time!" jika jam menunjukkan pukul 11 var d=new Date(); var time=d.getHours(); if (time==11) { document.write("Lunch-time!"); }

Catatan: Ketika membandingkan variabel-variabel kita harus selalu menggunakan dua tanda sama dengan (==)! Perhatikan bahwa tidak ada no ..else.. di sintaks ini. Kita hanya menyuruh kode untuk mengeksekusi beberapa kode hanya jika kondisi yang dispesifikasikan benar.

This HO is created by Finkle ()Page 13

Statement If...else Jika kita ingin mengeksekusi beberapa kode jika ebua kondisi benar dan kode lainnya jika kondisinya tidak benar, gunakan statement if….else. Sintaks if (kondisi) { Kode untuk dieksekusi jika kondisinya benar } else { Kode untuk dieksekusi jika kondisinya salah }

Contoh <script type="text/javascript"> //Jika waktunya kurang dari 10, //kita akan mendapat sapaan "Good morning". //Jika tidak, kita akan mendapat sapaan "Good day". var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); }

Statement If...else if...else Kita dapat menggunakan statement if....else if...else jika kita ingin memilih salah satu dari banyak set baris untuk dieksekusi. Sintaks if (kondisi1) { Kode untuk dieksekusi jika kondisi1 benar } else if (kondisi2) { Kode untuk dieksekusi jika kondisi2 benar } else {

This HO is created by Finkle ()Page 14

Kode untuk dieksekusi jika kondisi1 dan kondisi2 tidak benar }

Contoh <script type="text/javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("Good morning"); } else if (time>10 && time<16) { document.write("Good day"); } else { document.write("Hello World!"); }

Element Switch JavaScript Kita dapat menggunakan statement switch jika kita ingin memilih satu dari banyak blok kode untuk dieksekusi. Sintaks switch(n) { case 1: eksekusi blok 1 break; case 2: eksekusi blok 2 break; default: kode untuk dieksekusi jika n berbeda dari case 1 dan case 2 }

Berikut adalah cara kerjanya: Pertama-tama, kita memiliki sebuah ekspresi tunggal n (biasanya adalah sebuah variabel), yang hanya dievaluasi sekali. Nilai dari ekspresi tersebut kemudian dibandingkan dengan nilai dari setiap case di dalam struktur. Jika akan kecocokan, blok kode yang terdapat di dalam case tersebut dieksekusi. Gunakan break untuk mencegah kode berjalan ke case selanjutnya secara otomatis. Contoh <script type="text/javascript"> //Kita akan menerima sapaan yang berbeda berdasarkan //hari apa hari ini. Perhatikan bahwa Sunday=0, //Monday=1, Tuesday=2, dll.

This HO is created by Finkle ()Page 15

var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!"); }

Fungsi-Fungsi dalam JavaScript Untuk mencegah browser mengeksekusi sebuah script saat halaman di-load, kita dapat meletakkan script kita ke dalam sebuah fungsi. Sebuah fungsi berisikan kode yang hanya akan dieksekusi oleh sebuah even atau oleh panggilan terhadap fungsi tersebut. Kita juga dapat memanggil sebuah fungsi dari mana saja di dalam halaman (atau bahkan dari halaman lain jika fungsi tersebut ditanamkan k edalam file eksternal .js). Fungsi-fungsi dapat didefinisikan baik di bagian dan bagian dari sebuah dokumen. Bagaimanapun, untuk mencegah bahwa fungsi tersebut dibaca atau di-load oleh browser sebelum dipanggil, akan lebih baik untuk meletakkannya di bagian . Contoh <script type="text/javascript"> function displaymessage() { alert("Hello World!"); }

Jika baris: alert("Hello world!!") di contoh di atas tidak dituliskan dalam sebuah This HO is created by Finkle ()Page 16

fungsi, maka akan dieksekusi saat baris tersebut di-load. Sekarang, script tersebut tidak dieksekusi sebelum user menekan tombol tersebut. Kita telah menambahkan sebuah even onClick pada tombol tersebut yang akan mengeksekusi fungsi displaymessage() ketika tombol tersebut ditekan.

Bagaimana mendefinisikan fungsi Sintaks untuk mendeklarasikan fungsi adalah: function namafungsi(var1,var2,...,varX) { Kode-kode }

var1, var2, dll adalah variabel atau nilai yang dilewatkan ke dalam fungsi tersebut. Tanda { dan } mendefinisikan awal dan akhir dari fungsi. Catatan: Sebuah fungsi tanpa paramenter harus memiliki tanda () setelah nama fungsi: function namafungsi() { Kode-kode }

Catatan: Jangan lupa tentang pentingnya huruf capital di dalam JavaScript! Kata function harus dituliskan di dalam huruf kecil, jika tidak akan muncul JavaScript error! Juga perhatikan bahwa kita harus memanggil sebuah fungsi dengan nama (dan juga huruf besar-huruf kecil) yang sama dengan nama fungsi.

Statement return Statement return digunakan untuk menspesifikasikan nilai yang dikembalikan dari fungsi. Jadi, fungsi yang akan mengembalikan nilai harus menggunakan statement return. Contoh

Fungsi di bawah ini akan mengembalikan hasil kali dari dua angka (a dan b): function prod(a,b) { x=a*b; return x; }

This HO is created by Finkle ()Page 17

Ketika kita memanggil fungsi di atas, kita harus melewatkan dua variabels: product=prod(2,3);

Nilai yang dikembalikan dari fungsi prod() adalah 6, dan akan disimpan di variabel bernama product.

Usia Variabel JavaScript Ketika kita mendeklarasikan variabel di dalam sebuah fungsi, variabel tersebut hanya bisa diakses di dalam fungsi tersebut. Ketika kita keluar dari fungsi tersbut, variabelnya akan dihancurkan. Variabel-variabel ini dinamakan sebagai variabel local. Kita dapat memiliki variabel local dengan nama yang sama pada fungsi lainnya, karena masing-masing variabel dikenali hanya oleh fungsi dimana mereka berada saat dideklarasikan. Jika kita mendeklarasikan sebuah variabel di dalam sebuah fungsi, semua fungsi di dalam halaman dapat mengaksesnya. Usia dari variabel tersbut dimulai dari ketika mereka dideklarasikan, dan berakhir ketika halaman tersebut ditutup.

Perulangan JavaScript Seringkali ketika kita menuliskan sebuah kode, kita menginginkan blok kode yang sama untuk dijalankan berulang-ulang secara berurutan. Alih-alih menambahkan beberapa baris yag hamper sama ke dalam sebuah script, kita dapat menggunakan perulangan untuk menjalankan pekerjaan seperti ini. Di dalam JavaScript terdapat dua jenis perulangan: • •

for – mengulang blok kode sebanyak jumlah yang dispesifikasi while – mengulang blok kode selama kondisi yang dispesifikasi bernilai true

Perulangan for Perulangan for digunakan ketika kita mengetahui berapa banyak kali sebuah script akan dijalankan. Sintaks for (var=startvalue;var<=endvalue;var=var+increment) { Kode yang akan dieksekusi }

Contoh This HO is created by Finkle ()Page 18

Penjelasan: Contoh di bawah mendefinisikan sebuah perulangan yang dimulai dengan i=0. Perulangan akan terus berjalan selama I kurang dari atau sama dengan 10. i akan bertambah 1 setiap kali perulangan berjalan. Catatan: Parameter increment dapat bernilai negatif, dan <= dapat digantikan dengan statement perbandingan lainnya. <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { document.write("The number is " + i); document.write("
"); }

Hasil The The The The The The The The The The The

number number number number number number number number number number number

is is is is is is is is is is is

0 1 2 3 4 5 6 7 8 9 10

Perulangan while Perulangan while digunakan ketika kita ingin perulangan tersebut dieksekusi dan terus dieksekusi sementara kondisi yang dispesifikasikan masih benar. while (var<=endvalue) { Kode yang dieksekusi }

Contoh: Penjelasan: Contoh di bawah ini mendefinisikan sebuah perulangan yang dimulai dengan i=0. Perulangan akan terus dijalankan selama i kurang dari atau sama dengan 10. i akan bertambah 1 setiap kali perulangan dijalankan. This HO is created by Finkle ()Page 19

<script type="text/javascript"> var i=0; while (i<=10) { document.write("The number is " + i); document.write("
"); i=i+1; }

Hasil The The The The The The The The The The The

number number number number number number number number number number number

is is is is is is is is is is is

0 1 2 3 4 5 6 7 8 9 10

Perulangan do...while Perulangan do...while adalah varian dari perulangan while. Perulangan ini akan selalu mengeksekusi blok kode SEKALI, dan kemudian akan mengulang perulangan selama kondisi yang dispesifikasikan benar. Perulangan ini akan dieksekusi sekurang-kurangnya satu kali, bahkan jika kondisinya salah, karena kode tersebut dieksekusi sebelum kondisi dites. do {

Kode yang dieksekusi } while (var<=endvalue);

Contoh <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("
"); i=i+1;

This HO is created by Finkle ()Page 20

} while (i<0);

Hasil The number is 0

Statement break dan continue JavaScript Ada dua statement special yang dapat digunakan di dalam perulangan: break dan continue. Break

Perintah break akan menghentikan perulangan dan meneruskan mengeksekusi kode yang terdapat setelah perulangan (jika ada). Contoh <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("
"); }

Hasil The number is 0 The number is 1 The number is 2

Continue

Perintah continue akan menghentikan perulangan saat ini dan meneruskan dengan nilai selanjutnya.

This HO is created by Finkle ()Page 21

Contoh <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("
"); }

Result The The The The The The The The The The

number number number number number number number number number number

is is is is is is is is is is

0 1 2 4 5 6 7 8 9 10

Statement For...In Statement for...in digunakan untuk perulangan (iterasi) diantara elemen-elemen di dalam sebuah array atau diantara property-property sebuah object. Kode di dalam perulangan for ... in dieksekusi sekali untuk setiap elemen/property. Sintaks for (variable in object) { Kode yang dieksekusi }

Argumen variabel dapat berupa variabel bernama, elemen array, atau property dari sebuah object.

This HO is created by Finkle ()Page 22

Contoh

Penggunaan for...in untul mengulang melalui sebuah array: <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "
"); }

Events Dengan menggunakan JavaScript, kita memiliki kemampuan untuk menciptakan halaman web yang dinamis. Event adalah aksi yang bisa dideteksi oleh JavaScript. Setiap elemen di dalam web memiliki event tertentu yang dapat memicu fungsi-fungsi JavaScript. Sebagai contoh, kita dapat menggunakan event onClick dari elemen button (tombol) untuk mengindikasikan bahwa sebuah fungsi akan dijalankan ketika seorang user meng-klik tombol tersebut. Kita mendefinisikan elemen di dalam tag-tag HTML. Contoh event: • • • • • •

Klik pada mouse Proses load sebuah halaman web atau gambar Peletakan kursor mouse pada daerah tertentu di web page Pemilihan input box di dalam sebuah form HTML Pengiriman form HTML Penekanan tombol keyboard

Catatan: Event biasanya digunakan dalam kombinasi dengan fungsi, dan fungsi tidak akan dieksekusi sebelum event tersebut muncul!

Attribute onabort

Event muncul ketika... Tag yang support Proses loading pada sebuah gambar

This HO is created by Finkle ()Page 23

onblur

terganggu Sebuah elemen kelihangan fokusnya

onchange

User mengubah isi dari sebuah field

, <br /> <br /> onclick<br /> <br /> Klik pada sebuah object<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> ondblclick<br /> <br /> Klik ganda pada sebuah object<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> <a>, <acronym rel="nofollow">, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var> <select>,<br /> <br /> This HO is created by Finkle ()Page 24<br /> <br /> onfocus<br /> <br /> Sebuah error muncul ketika proses <img>, <object>, <style> loading pada sebuah dokumen atau gambar <a>, <acronym rel="nofollow">, <address rel="nofollow">, Sebuah elemen mendapat focus<br /> <br /> onkeydown<br /> <br /> Sebuah tombol keyboard ditekan<br /> <br /> onkeypress<br /> <br /> <acronym rel="nofollow">, <address rel="nofollow">, Sebuah tombol keyboard ditekan atau <a>, <area>, <b>, <bdo>, <big>, ditahan<br /> <br /> onerror<br /> <br /> <area>, <b>, <bdo>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var> <a>, <acronym rel="nofollow">, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onkeyup<br /> <br /> Sebuah tombol keyboard dilepaskan<br /> <br /> <a>, <acronym rel="nofollow">, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,<br /> <br /> This HO is created by Finkle ()Page 25<br /> <br /> <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onload<br /> <br /> Sebuah halaman atau gambar selesai <body>, <frame>, <frameset>, <iframe>, <img>, <link>, loading <script><br /> <br /> onmousedown Tombol pada mouse ditekan<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onmousemove Mouse digerakkan<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onmouseout<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>,<br /> <br /> Mouse digerakkan dari sebuah elemen<br /> <br /> This HO is created by Finkle ()Page 26<br /> <br /> <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onmouseover Mouse digerakkan ke sebuah elemen<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onmouseup<br /> <br /> Tombol pada mouse dilepaskan<br /> <br /> <a>, <address rel="nofollow">, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var><br /> <br /> onreset onresize<br /> <br /> Tombol reset di-klik Window atau frame diubah ukurannya<br /> <br /> <form> <a>, <address rel="nofollow">, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var><br /> <br /> This HO is created by Finkle ()Page 27<br /> <br /> onselect onsubmit onunload<br /> <br /> Teks dipilih Tombol submit ditekan User keluar dari halaman<br /> <br /> <input type="text">, <textarea> <form> <body>, <frameset><br /> <br /> onload dan onUnload Event onload dan onUnload dipicu ketika uer memasuki atau meninggalkan sebuah halaman. Event onload sering digunakan untuk mengecek tipe dan versi browser, dan menampilkan versi yang sesuai dari halaman web berdasarkan informasi tersebut. Baik event onload dan onUnload juga digunakan untuk berurusan dengan cookie yang harus di set ketika user memasuki atau meninggalkan sebuah halaman. Sebagai contoh, kita bisa membuat sebuah popup yang menanyakan nama user semenjak kedatangan pertamanya di halaman kita. Nama tersebut kemudian tersimpan di dalam sebuah cookie. Lain kali ketika pengunjung tersebut dating lagi, kita dapat memunculkan popup lainnya yang mengatakan sesuatu seperti: “Welcome, John Doe!”.<br /> <br /> onFocus, onBlur dan onChange Event onFocus, onBlur dan onChange sering digunakan dalam kombinasi dengan validasi dari field form. Berikut adalah sebuah contoh tentang bagaimana menggunakan event onChange. Fungsi checkEmail() akan dipanggil ketika user mengubah isi dari field tersebut: <input type="text" size="30" id="email" onchange="checkEmail()"><br /> <br /> onSubmit Event onSubmit digunakan untuk memvalidasi SEMUA field form sebelum mengirimnya. Berikut adalah contoh tentang bagaimanamenggunakan event onSubmit. Fungsi checkForm() akan dipanggil ketika user mengklik tombol submit di form. Jika nilai dari field tidak diterima, pengiriman data harus dibatalkan. Fungsi checkForm() mengembalkan baik nilai true atau false. Jika fungsi tersebut mengembalikan nilai true, maka form akan dikirimkan, jika tidak, maka pengiriman akan dibatalkan: <form method="post" action="xxx.htm" onsubmit="return checkForm()"><br /> <br /> This HO is created by Finkle ()Page 28<br /> <br /> onMouseOver dan onMouseOut onMouseOver and onMouseOut sering digunakan untuk membuat tombol-tombol “beranimasi”. Berikut adalah contoh event onMouseOver. Sebuah alert box akan muncul ketika sebuah event onMouseOver terdeteksi: <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false" rel="nofollow"> <img src="w3schools.gif" width="100" height="30"> </a><br /> <br /> Penutup Wow, sungguh sebuah hand out yang sangat panjang! Sebelumnya, saya meminta maaf jika hand out ini terlalu panjang (sehingga biaya fotokopinya juga mahal ). Tapi, menurut saya sendiri, jika ingin membuat panduan mengenai sebuah bahasa pemrograman, kita perlu memasukkan setiap aspek-aspek yang terdapat di dalamnya. Apalah arti sebuah hand out jika tidak jelas (betul ga?) Praktikan diminta untuk membaca dan mencoba memahami isi dari hand out tersebut sehingga nantinya dapat mempermudah dan mempersingkat proses tutorial. Isi dari materi yang diberikan cukup mudah untuk dimengerti karena memang disadur dari sumber tutorial yang ditujukan bagi orang awam (programmer senior seperti Anda-Anda semua tentu tidak kalah dibanding orang awam kan?) Ok, tanpa berniat memperpanjang HO ini lagi, saya pribadi mengucapkan selamat mempelajari JavaScript dan jatuh cinta lah kepadanya (lho?), karena script ini sangat berguna bagi Anda yang ingin lebih mendalami profesi Web Programmer!<br /> <br /> This HO is created by Finkle ()Page 29 </div> </div> <hr /> <h4>Related Documents</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/ho-topik-3-1wovp78e2yol" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/1wovp78e2yol.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/ho-topik-3-1wovp78e2yol" class="text-dark">Ho Topik 3</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> July 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 4</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/topik-3-q6zp1xl1ymzp" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/q6zp1xl1ymzp.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/topik-3-q6zp1xl1ymzp" class="text-dark">Topik 3</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 7</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/topik-3-gl3gjjw2wr3p" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/gl3gjjw2wr3p.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/topik-3-gl3gjjw2wr3p" class="text-dark">Topik 3</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 21</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/topik-68o2nryne9op" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/68o2nryne9op.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/topik-68o2nryne9op" class="text-dark">Topik</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 21</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/topik-3docx-j39ee9lv8vog" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/j39ee9lv8vog.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/topik-3docx-j39ee9lv8vog" class="text-dark">Topik 3.docx</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> December 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 17</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/topik-3-menilai-68o2mlm9yzp9" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/68o2mlm9yzp9.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/topik-3-menilai-68o2mlm9yzp9" class="text-dark">Topik 3 Menilai</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 13</small> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white"> <div class="container"> <div class="row"> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Our Company</h5> <ul class="list-unstyled"> <li><i class="fas fa-location-arrow"></i> 3486 Boone Street, Corpus Christi, TX 78476</li> <li><i class="fas fa-phone"></i> +1361-285-4971</li> <li><i class="fas fa-envelope"></i> <a href="mailto:info@pdfcoke.com" class="text-white">info@pdfcoke.com</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Quick Links</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/about" class="text-white">About</a></li> <li><a href="https://pdfcoke.com/contact" class="text-white">Contact</a></li> <li><a href="https://pdfcoke.com/help" class="text-white">Help / FAQ</a></li> <li><a href="https://pdfcoke.com/account" class="text-white">Account</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Legal</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/tos" class="text-white">Terms of Service</a></li> <li><a href="https://pdfcoke.com/privacy-policy" class="text-white">Privacy Policy</a></li> <li><a href="https://pdfcoke.com/cookie-policy" class="text-white">Cookie Policy</a></li> <li><a href="https://pdfcoke.com/disclaimer" class="text-white">Disclaimer</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Follow Us</h5> <ul class="list-unstyled list-inline list-social"> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-linkedin"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-instagram"></i></a></li> </ul> <h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5> <ul class="list-unstyled "> <li><a href="#" class="bb-alert" data-msg="IOS app is not available yet! Please try again later!"><img src="https://pdfcoke.com/static/images/app-store-badge.svg" height="45" /></a></li> <li><a href="#" class="bb-alert" data-msg="ANDROID app is not available yet! Please try again later!"><img style="margin-left: -10px;" src="https://pdfcoke.com/static/images/google-play-badge.png" height="60" /></a></li> </ul> </div> </div> </div> </footer> <div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white"> <div class="container"> <p>Copyright © 2024 PDFCOKE.</p> </div> </div> <script src="https://pdfcoke.com/static/javascripts/jquery.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/popper.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootstrap.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootbox.all.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/filepond.js"></script> <script src="https://pdfcoke.com/static/javascripts/main.js?v=1720247558"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144986120-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-144986120-1'); </script> </body> </html>