Web Programming - Javascript

20
WEB – Javascript Pemograman Web (2010/2011) – Mar 24, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter

description

Materi javascript dasar. Dimulai dari cara penulisan, peletakkan dan komponen-komponen lainnya. Enjoy..

Transcript of Web Programming - Javascript

Page 1: Web Programming - Javascript

WEB – Javascript

Pemograman Web (2010/2011) – Mar 24, 2011 Teknik Informatika, Universitas Islam Indonesia

Follow Hari Setiaji on Twitter

Page 2: Web Programming - Javascript

Point of today.. Kapan Menggunakan Javascript ? Cara Penulisan Cara Peletakan Variabel Struktur Kendali Fungsi Perulangan Event Handler Kotak Dialog Object Dalam Javascript Teknologi Javascript Terkini

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 3: Web Programming - Javascript

Kapan ??

Ketika ada sebuah event yang ingin dieksekusi

Membuat tampilan halaman jadi lebih ‘hidup’

Validasi form Anything else..??

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 4: Web Programming - Javascript

Cara Penulisan

Java Script dapat dituliskan dalam sebuah dokumen HTML dengan dua cara :

1. Sebagai statement dan fungsi menggunakan tag SCRIPT2. Sebagai pengontrol perintah menggunakan tag HTML

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

<SCRIPT LANGUAGE="JavaScript"> JavaScript statements..........</SCRIPT>

<SCRIPT LANGUAGE="JavaScript"> JavaScript statements..........</SCRIPT>

Page 5: Web Programming - Javascript

Karakteristik Javascript Menggunakan blok awal “{“ dan blok akhir “}”. Case Sensitive artinya membedakan penamaan variable dan

fungsi yang menggunakan huruf besar dan huruf kecil. Extension umumnya menggunakan “*.js”. Setiap statement dapat diakhiri dengan “;” sebagaimana

dengan c++, tetapi dapat juga tidak. Jika tidak didukung dalam browser versi lama scriptnya,

scriptnya dapat disembunyikan diantara tag “<!--” dan //--> Jika program dalam satu baris terlalu panjang dapat disambung

kebaris berikut dengan karakter “\”.

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 6: Web Programming - Javascript

Cara Peletakan

Internal Diantara tag <head> </head> Diantara tag <body> </body>

Eksternal Diantara tag <head> </head>

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

<script language=”Java Script” src=”url/file.js”> </script><script language=”Java Script” src=”url/file.js”> </script>

Page 7: Web Programming - Javascript

Variabel Penamaan

Case sensitive Harus diawali dengan huruf atau underscore Bukan keyword JavaScript Tidak mengandung karakter tanda baca atau karakter

untuk operasi pada script Scope

Global Dapat diakses oleh seluruh fungsi Didefinisikan di luar fungsi

Lokal Hanya dapat diakses oleh fungsi itu sendiri Dideklarasikan dalam fungsi

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

var namavariabel=nilainamavariabel=nilaivar namavariabel=nilainamavariabel=nilai

Page 8: Web Programming - Javascript

Struktur Kendali

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

If (kondisi){... blok if ... }Else{

... blok else ... }

If (kondisi){... blok if ... }Else{

... blok else ... }

switch (variabel){case nilai1 :perintah1;break;

case nilai2 :perintah2;break;

default perintahN;

break; }

switch (variabel){case nilai1 :perintah1;break;

case nilai2 :perintah2;break;

default perintahN;

break; }

Page 9: Web Programming - Javascript

Fungsi Fungsi mengandung kode yang akan dieksekusi oleh

sebuah event atau sebuah panggilan (call) terhadap fungsi tersebut

Fungsi biasanya didefinisikan di section head, dan dipanggil dalam dokumen

Fungsi dapat digunakan ulang (reuse) dalam script yang sama atau halaman lainnya

NB : Jika tidak ada argumen harus ada tanda () di belakang nama fungsi

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

namafungsi(argumen1,argumen2,..argumen_n) {

statement_code}

namafungsi(argumen1,argumen2,..argumen_n) {

statement_code}

Page 10: Web Programming - Javascript

Fungsi Argumen adalah variabel yang digunakan dalam

fungsi Nilainya adalah nilai yang dilewatkan ketika fungsi

tersebut dipanggil fungsi mengembalikan nilai balik dengan

menggunakan statement “return”

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

function total(a,b) {

hasil=a+b; return hasil;}

function total(a,b) {

hasil=a+b; return hasil;}

Page 11: Web Programming - Javascript

Contoh Fungsi

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

<script type="text/javascript"> function total(a,b) {

hasil=a+b; return hasil; }

Sum = total(3,5); document.write("Hasil penjumlahan 3 dan 5 adalah "+Sum);</script>

<script type="text/javascript"> function total(a,b) {

hasil=a+b; return hasil; }

Sum = total(3,5); document.write("Hasil penjumlahan 3 dan 5 adalah "+Sum);</script>

Hasil penjumlahan dari 3 dan 5 adalah 8Hasil penjumlahan dari 3 dan 5 adalah 8

Page 12: Web Programming - Javascript

Perulangan

For While Do .. While

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Apa perbedaanya..?Apa perbedaanya..?

<h2>Menampilkan Header</h2><script type="text/javascript">

for (i=1;i<=6;i++){document.write("<h"+i+">Header"+i+"</h"+i+">")}

</script>

<h2>Menampilkan Header</h2><script type="text/javascript">

for (i=1;i<=6;i++){document.write("<h"+i+">Header"+i+"</h"+i+">")}

</script>

Page 13: Web Programming - Javascript

Event HandlerEvent Event akan dijalankan ketika . . .onMouseover user meletakkan kursor mouse diatas suatu elemen

onFocus user memberikan focus kepada satu elemenonBlur elemen kehilangan fokus, artinya user melakukan klik diluar

elemen itu.onChange user memodifikasi isi dari data dalam satu field data

onClick user melakukan klik mouse terhadap satu elemen yang berhubungan dengan event

onLoad navigator user meload/memanggil suatu halamanonSubmit melakukan klik tombol submitonMouseout kursor mouse meninggalkan posisinya dari atas suatu elemen

onReset menghapus data pada suatu form dengan bantuan satu tombol reset

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 14: Web Programming - Javascript

Kotak Dialog

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 15: Web Programming - Javascript

Object Dalam Javascript

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Math date Window/frame Navigator String

document

Link form anchor

select Button/Submit/

reset

Text/textarea radio checkbox

browser

Page 16: Web Programming - Javascript

Teknologi terkini javascript

Digunakan sebagai metode pengiriman request client dibelakang layar. Call it AJAX

Tampilan halaman akan semakin ‘hidup’ dengan adanya library javascript. Example : jQuery, MooTools, Prototype.

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 17: Web Programming - Javascript

Growing up together..

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 18: Web Programming - Javascript

Clue for exam..

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 19: Web Programming - Javascript

To do list..

Review kembali materi HTML, CSS dan Javascript

Update your project Pelajari database dan PHP Pelajari contoh-contoh

Download URL : http://files.setiaji.info

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Page 20: Web Programming - Javascript

Finally

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom