JavaScript-1 Membangun Interactive Websites

32
JavaScript-1 Membangun Interactive Websites

Transcript of JavaScript-1 Membangun Interactive Websites

Page 1: JavaScript-1 Membangun Interactive Websites

JavaScript-1

Membangun InteractiveWebsites

Page 2: JavaScript-1 Membangun Interactive Websites

Static Websites

Digunakan hanya untuk menampilkan informasi

Relatif mudah dan murah dalam pembuatan

Relatif murah dalam hosting (tidak memerlukan fiturpendukung apa pun)

Kerugian: Update memerlukan tenaga ahli

Jika tidak di-update, maka isinya akan membosankan

Situs dapat menjadi tidak menarik/tidak bermanfaatbagi pengunjung

Digunakan hanya untuk menampilkan informasi

Relatif mudah dan murah dalam pembuatan

Relatif murah dalam hosting (tidak memerlukan fiturpendukung apa pun)

Kerugian: Update memerlukan tenaga ahli

Jika tidak di-update, maka isinya akan membosankan

Situs dapat menjadi tidak menarik/tidak bermanfaatbagi pengunjung

Page 3: JavaScript-1 Membangun Interactive Websites

Dynamic Websites

Relatif lebih sulit dan mahal saat dikembangkan pertama kali

Lebih mahal dalam dalam hosting (dapat memerlukan fiturpendukung tertentu yang harus terpasang pada server)

Update (penambahan/pengubahan content) mudah dilakukan

Situs menjadi lebih menarik dan dapat membuat pengunjunguntuk kembali berkunjung di lain waktu

Dapat digunakan untuk kolaborasi

Relatif lebih sulit dan mahal saat dikembangkan pertama kali

Lebih mahal dalam dalam hosting (dapat memerlukan fiturpendukung tertentu yang harus terpasang pada server)

Update (penambahan/pengubahan content) mudah dilakukan

Situs menjadi lebih menarik dan dapat membuat pengunjunguntuk kembali berkunjung di lain waktu

Dapat digunakan untuk kolaborasi

Page 4: JavaScript-1 Membangun Interactive Websites

Membuat Dynamic Website

Server-side Scripting Menggunakan bahasa/script yang terpasang di server

dan dieksekusi di server untuk:

Menghasilkan isi web

Mengatur session

Mengatur aliran informasi

Server-side language/script

ASP, PHP, ColdFusion, JavaScript, Perl, Ruby

Server-side Scripting Menggunakan bahasa/script yang terpasang di server

dan dieksekusi di server untuk:

Menghasilkan isi web

Mengatur session

Mengatur aliran informasi

Server-side language/script

ASP, PHP, ColdFusion, JavaScript, Perl, Ruby

Page 5: JavaScript-1 Membangun Interactive Websites

Membuat Dynamic Website

Client-side Scripting Merespon pada aktivitas pengguna seperti pada

Pergerakan Mouse

Terjadinya events seperti Mouse Click

Menggunakan bahasa/script yang dieksekusi di komputerpengguna (bukan di server)

Script (dan Kode HTML) dikirim ke komputer penggunadan dieksekusi oleh peramban yang digunakan olehpengguna

Server-side language/script

VBScript,JavaScript

Client-side Scripting Merespon pada aktivitas pengguna seperti pada

Pergerakan Mouse

Terjadinya events seperti Mouse Click

Menggunakan bahasa/script yang dieksekusi di komputerpengguna (bukan di server)

Script (dan Kode HTML) dikirim ke komputer penggunadan dieksekusi oleh peramban yang digunakan olehpengguna

Server-side language/script

VBScript,JavaScript

Page 6: JavaScript-1 Membangun Interactive Websites

JavaScript

Dikembangkan oleh Brendan Eich di NetscapeCommunication Corp pada tahun 1995 selanjutnyadikembangkan bersama dengan Sun Microsystem.

Berbeda dengan Bahasa Java yang juga dikembangkan olehSun Microsystem

Merupakan bahasa interpreted Tidak diubah menjadi object code, tetap berupa source

code yang dikirim ke komputer pengguna

Terdapat Just-In-Time (JIT) Compiler untuk JavaScriptsehingga dapat dijalankan dengan lebih cepat untukkeperluan aplikasi yang memerlukan kinerja yang lebihtinggi

Dikembangkan oleh Brendan Eich di NetscapeCommunication Corp pada tahun 1995 selanjutnyadikembangkan bersama dengan Sun Microsystem.

Berbeda dengan Bahasa Java yang juga dikembangkan olehSun Microsystem

Merupakan bahasa interpreted Tidak diubah menjadi object code, tetap berupa source

code yang dikirim ke komputer pengguna

Terdapat Just-In-Time (JIT) Compiler untuk JavaScriptsehingga dapat dijalankan dengan lebih cepat untukkeperluan aplikasi yang memerlukan kinerja yang lebihtinggi

Page 7: JavaScript-1 Membangun Interactive Websites

JavaScript Fitur

JavaScript dapat menampilkan teks secara dinamik kedalam halaman web

document.write(‘Hello World’) ;

JavaScript dapat diprogram untuk bereaksi saat terjadisuatu event

onclick, onmouseover

JavaScript dapat digunakan untuk membacanilai/content pada elemen HTML pada suatu halamanweb dan dapat pula menuliskan suatu nilai/contentpada suatu elemen.JavaScript dapat digunakan untuk melakukan validasiterhadap data input pada formJavaScript dapat digunakan untuk mendeteksiperamban yang digunakan oleh penggunjung situs

JavaScript dapat menampilkan teks secara dinamik kedalam halaman web

document.write(‘Hello World’) ;

JavaScript dapat diprogram untuk bereaksi saat terjadisuatu event

onclick, onmouseover

JavaScript dapat digunakan untuk membacanilai/content pada elemen HTML pada suatu halamanweb dan dapat pula menuliskan suatu nilai/contentpada suatu elemen.JavaScript dapat digunakan untuk melakukan validasiterhadap data input pada formJavaScript dapat digunakan untuk mendeteksiperamban yang digunakan oleh penggunjung situs

Page 8: JavaScript-1 Membangun Interactive Websites

JavaScript Syntax

Terdiri dari serangkaian perintah yang diletakkan dalam tagscript

<script>Kode untuk JavaScript...</scipt>

<script>Kode untuk JavaScript...</scipt>

Elemen script dapat diletakkan di mana saja dalam dokumenweb, akan tetapi disarankan untuk meletakkan pada elemenHEAD

Page 9: JavaScript-1 Membangun Interactive Websites

JavaScript Syntax

Tag <script> memiliki atribut:

Attribute Nilai Deskripsi

src URL URL dari file yangberisi source codedari JavaScript

src URL URL dari file yangberisi source codedari JavaScript

type Jenis media Jenis media dariscript. Nilai bakuadalah 'text/javascript'

Page 10: JavaScript-1 Membangun Interactive Websites

JavaScript Syntax

Page 11: JavaScript-1 Membangun Interactive Websites

JavaScript Syntax

Script dapat dituliskan pada halaman web bercampur dengankode HTML atau dapat pula disimpan ke dalam file ataudisimpan di lokasi URL tertentu kemudian dirujuk

<script type=‘text/javascript’src=‘../js/prototype.js’ />

<script type=‘text/javascript’src=‘http://www.cs.ui.ac.id/imgs/js/prototype.js’ />

<script type=‘text/javascript’src=‘../js/prototype.js’ />

<script type=‘text/javascript’src=‘http://www.cs.ui.ac.id/imgs/js/prototype.js’ />

Page 12: JavaScript-1 Membangun Interactive Websites

JavaScript Syntax

Pada peramban lama, tag <script> tidak dikenal sehingga tagini akan dilewati, akan tetapi instruksi yang ada dalam tag<script> tetap akan diproses sehingga isi instruksinya (sourcecode) akan tampil. Untuk mengatasinya, perintah JavaScriptdapat ditempatkan dalam HTML Comment sehingga apabilaperamban tidak mendukung JavaScript, maka source codetidak akan ditampilkan.

Pada peramban lama, tag <script> tidak dikenal sehingga tagini akan dilewati, akan tetapi instruksi yang ada dalam tag<script> tetap akan diproses sehingga isi instruksinya (sourcecode) akan tampil. Untuk mengatasinya, perintah JavaScriptdapat ditempatkan dalam HTML Comment sehingga apabilaperamban tidak mendukung JavaScript, maka source codetidak akan ditampilkan.

<script><!--

Kode untuk JavaScript...-->

</scipt>

Page 13: JavaScript-1 Membangun Interactive Websites

Contoh JavaScript dalamHalaman Web

<html doctype='html'><head>

<script>window.alert('Selamat Datang') ;</script>

<head><body>

<h1>JavaScript</h1></body>

</html>

<html doctype='html'><head>

<script>window.alert('Selamat Datang') ;</script>

<head><body>

<h1>JavaScript</h1></body>

</html>

Saat halaman web diakses, maka akan tampil/popupwindow kecil yang menampilkan tulisan 'SelamatDatang' dan Tombol (Button) bertuliskan 'OK'. KlikButton OK untuk menutup window.

Page 14: JavaScript-1 Membangun Interactive Websites

Aturan dalam JavaScript

Setiap instruksi diakhiri dengan tandasemicolon ;

Penamaan variabel dalam JavaScriptbersifat Case Sensitive– Variabel dengan nama Nilai berbeda dengan variabel dengan

nama nilai

– Nama variabel tidak boleh menggunakan nama-nama yangtermasuk dalam reserved-words JavaScript sepertiabstract, boolean, break, byte, if, implements,import, in, infinity, instanceof, int, interface

Setiap instruksi diakhiri dengan tandasemicolon ;

Penamaan variabel dalam JavaScriptbersifat Case Sensitive– Variabel dengan nama Nilai berbeda dengan variabel dengan

nama nilai

– Nama variabel tidak boleh menggunakan nama-nama yangtermasuk dalam reserved-words JavaScript sepertiabstract, boolean, break, byte, if, implements,import, in, infinity, instanceof, int, interface

Page 15: JavaScript-1 Membangun Interactive Websites

Variabel

Merupakan objek yang digunakan untuk menyimpan suatunilai

Nama variabel harus diawali dengan huruf atau karakter _

Nama variabel terdiri dari huruf, angka, huruf _, huruf &.Penggunaan spasi dalam nama variabel tidak diperbolehkan.

Merupakan objek yang digunakan untuk menyimpan suatunilai

Nama variabel harus diawali dengan huruf atau karakter _

Nama variabel terdiri dari huruf, angka, huruf _, huruf &.Penggunaan spasi dalam nama variabel tidak diperbolehkan.

Page 16: JavaScript-1 Membangun Interactive Websites

JavaScriptkeywordsbreak case catch continue default

delete do else false finally

for function if in instanceof

new null return switch this

throw true try typeof var

void while with

Keywords that are reserved but not used by JavaScript

abstract boolean byte char class

const debugger double enum export

extends final float goto implements

import int interface long native

package private protected public short

static super synchronized throws transient

volatile

JavaScriptkeywordsbreak case catch continue default

delete do else false finally

for function if in instanceof

new null return switch this

throw true try typeof var

void while with

Keywords that are reserved but not used by JavaScript

abstract boolean byte char class

const debugger double enum export

extends final float goto implements

import int interface long native

package private protected public short

static super synchronized throws transient

volatile

Page 17: JavaScript-1 Membangun Interactive Websites

Deklarasi Variabel

Secara eksplisit menggunakan instruksi var

var nilai ;var nama, alamat ;

Secara implisit dengan menggunakannya secara langsungmelalui assignment

nama = ‘Syahrini’ ;

alamat = ‘Kp Rawa Bebek Gg H Paih RT 002/14 Kel PdTerong’ ;

Secara eksplisit menggunakan instruksi var

var nilai ;var nama, alamat ;

Secara implisit dengan menggunakannya secara langsungmelalui assignment

nama = ‘Syahrini’ ;

alamat = ‘Kp Rawa Bebek Gg H Paih RT 002/14 Kel PdTerong’ ;

Page 18: JavaScript-1 Membangun Interactive Websites

Tipe Data Primitif

Boolean• Bernilai true atau false

Number• 64-bit floating point (sama dengan double pada Java)

• Tidak ada tipe Integer

• Special Values: nan (not a number) dan Infinity

String• Rangkaian nol atau lebih karakter

• String literal dituliskan menggunakan ‘ atau ‘’.

• Special Values• null dan undefined

Boolean• Bernilai true atau false

Number• 64-bit floating point (sama dengan double pada Java)

• Tidak ada tipe Integer

• Special Values: nan (not a number) dan Infinity

String• Rangkaian nol atau lebih karakter

• String literal dituliskan menggunakan ‘ atau ‘’.

• Special Values• null dan undefined

Page 19: JavaScript-1 Membangun Interactive Websites

Scope

Variabel yang didefinisikan dalamsuatu function hanya dapat diaksesoleh function itu sendiri

Variabel yang didefinisikan di luarfunction akan dapat diakses olehseluruh function

Variabel akan aktif saatdideklarasikan dan akan berakhir saathalaman ditutup

Variabel yang didefinisikan dalamsuatu function hanya dapat diaksesoleh function itu sendiri

Variabel yang didefinisikan di luarfunction akan dapat diakses olehseluruh function

Variabel akan aktif saatdideklarasikan dan akan berakhir saathalaman ditutup

Page 20: JavaScript-1 Membangun Interactive Websites

Popup Boxes

Alert Box

• Pengguna harus meng-klik ‘OK’ untuk meneruskan

• alert(‘Klik untuk Melanjutkan’)

Confirm Box

• Pengguna harus meng-klik ‘OK’ atau ‘Cancel’ untukmeneruskan

• konfirmasi = confirm(‘Data akan dihapus?’)

Prompt Box

• Pengguna harus meng-klik ‘OK’ atau ‘Cancel’ setelahmemasukkan nilai

• nama = prompt(‘Silakan Masukkan Nama Anda’,‘nama default’)

Alert Box

• Pengguna harus meng-klik ‘OK’ untuk meneruskan

• alert(‘Klik untuk Melanjutkan’)

Confirm Box

• Pengguna harus meng-klik ‘OK’ atau ‘Cancel’ untukmeneruskan

• konfirmasi = confirm(‘Data akan dihapus?’)

Prompt Box

• Pengguna harus meng-klik ‘OK’ atau ‘Cancel’ setelahmemasukkan nilai

• nama = prompt(‘Silakan Masukkan Nama Anda’,‘nama default’)

Page 21: JavaScript-1 Membangun Interactive Websites

Function parseInt Penggunaan Prompt Box akan menghasilkan nilai string

• Untuk mengoperasikan sebagai nilai numerik makanilai harus dikonversi dengan menggunakan functionparseInt.

• var n = parseInt(somestring)

<script>var nilai1= prompt(‘Masukkan Nilai Pertama’,0) ;var nilai2= prompt(‘Masukkan Nilai Kedua’,0) ;var total = nilai1+nilai2 ;alert (total) ;

</script>

<script>var nilai1= prompt(‘Masukkan Nilai Pertama’,0) ;var nilai2= prompt(‘Masukkan Nilai Kedua’,0) ;var total = nilai1+nilai2 ;alert (total) ;

</script> <script>var nilai1= prompt(‘Masukkan Nilai Pertama’,0) ;var nilai2= prompt(‘Masukkan Nilai Kedua’,0) ;var value1=parseInt(nilai1) ;var value2=parseInt(nilai2) ;var total = value1+value2 ;alert (total) ;

</script>

Page 22: JavaScript-1 Membangun Interactive Websites

Object

Object memiliki property dan methods

Contoh object dan beberapa properties atau methods nya

Object document

Properties

Object string

Properties length

Methods write Methods toUpperCase

Object window

Properties

Methods alertprompt

Halaman web yang berisi perintahJavaScript merupakan object dengannama: document

Page 23: JavaScript-1 Membangun Interactive Websites

Object

<script type="text/javascript">var txt="Hello World!" ;document.write(txt.length) ;document.write(txt.toUpperCase()) ;window.alert(‘Done..’) ;

</script>

<script type="text/javascript">var txt="Hello World!" ;document.write(txt.length) ;document.write(txt.toUpperCase()) ;window.alert(‘Done..’) ;

</script>

<script type="text/javascript">var nama= window.prompt(‘Nama anda:’, ‘Joko’) ;document.write(‘<h1>’+’Hello ‘+nama+’</h1>’) ;

</script>

Page 24: JavaScript-1 Membangun Interactive Websites

Language

Conditional Statementsifif … else …switch

Loopfor loopwhile loop

try …. Catchthrow

Conditional Statementsifif … else …switch

Loopfor loopwhile loop

try …. Catchthrow

Page 25: JavaScript-1 Membangun Interactive Websites

If statement

<script type=‘text/javascript’>

var sekarang = new Date() ;

var jam = sekarang.getHours() ;

if (sekarang <= 12) alert(‘Selamat Pagi’) ;

</script>

25

<script type=‘text/javascript’>

var sekarang = new Date() ;

var jam = sekarang.getHours() ;

if (sekarang <= 12) alert(‘Selamat Pagi’) ;

</script>

Page 26: JavaScript-1 Membangun Interactive Websites

If … else statement

<script type=‘text/javascript’>

var sekarang = new Date() ;

var jam = sekarang.getHours() ;

if (sekarang <= 12) alert(‘Selamat Pagi’) ;

else if (sekarang <= 15) alert(‘Selamat Siang’) ;

else if (sekarang <= 18) alert(‘Selamat Sore’) ;

else alert(‘Selamat Malam’) ;

</script>

26

<script type=‘text/javascript’>

var sekarang = new Date() ;

var jam = sekarang.getHours() ;

if (sekarang <= 12) alert(‘Selamat Pagi’) ;

else if (sekarang <= 15) alert(‘Selamat Siang’) ;

else if (sekarang <= 18) alert(‘Selamat Sore’) ;

else alert(‘Selamat Malam’) ;

</script>

Page 27: JavaScript-1 Membangun Interactive Websites

For Loop statement

<script type=‘text/javascript’>

for (var i = 0; i < 100; i=i+2) {

document.write(i) ;

document.write(‘<br />’) ;

}

</script>

27

<script type=‘text/javascript’>

for (var i = 0; i < 100; i=i+2) {

document.write(i) ;

document.write(‘<br />’) ;

}

</script>

Page 28: JavaScript-1 Membangun Interactive Websites

While Loop statement

<script type=‘text/javascript’>

var i = 0 ;

while (i < 100) {

document.write(i) ;

document.write(‘<br />’) ;

}

</script>

28

<script type=‘text/javascript’>

var i = 0 ;

while (i < 100) {

document.write(i) ;

document.write(‘<br />’) ;

}

</script>

Page 29: JavaScript-1 Membangun Interactive Websites

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

!= Ketidaksamaan Pembanding

< Kurang dari Pembanding

<= Kurang dari atau samadengan

Pembanding<= Kurang dari atau samadengan

Pembanding

> Lebih dari Pembanding

>= Lebih dari atau samadengan

Pembanding

! Bukan Logika

&& Dan Logika

|| Atau Logika

? Kondisi ? Nilai Benar :Nilai Salah

Pembanding

Page 30: JavaScript-1 Membangun Interactive Websites

Operator Kegunaan Prioritas

+ Penjumlahan 3- Pengurangan 3

* Perkalian 2/ Pembagian 2

% Sisa Pembagian(modulus)

2

Operator Matematika

% Sisa Pembagian(modulus)

2

++ Penaikan 1 (kalau terletak di depanvariabel)4 (kalau terletak dibelakang variabel

-- Penurunan 1 (kalau terletak di depanvariabel)4 (kalau terletak dibelakang variabel

Page 31: JavaScript-1 Membangun Interactive Websites

Try .. Catch

<p id=‘demo’></p>

<script>try {

adddlert("Welcome guest!");}catch(err) {

document.getElementById("demo").innerHTML =err.message;}

</script>

Error dapat terjadi dalam penulisan JavaScript. Error dapatditangani dengan menggunakan try.. catch

<p id=‘demo’></p>

<script>try {

adddlert("Welcome guest!");}catch(err) {

document.getElementById("demo").innerHTML =err.message;}

</script>

Page 32: JavaScript-1 Membangun Interactive Websites

Throw Throw

digunakanuntukmembuatcustom error(throwexception)

Throwdigunakanuntukmembuatcustom error(throwexception)