web programming - javascript
Post on 08-May-2015
2.387 Views
Preview:
DESCRIPTION
TRANSCRIPT
WEB – Javascript
Pemograman Web (2010/2011) – Mar 24, 2011 Teknik Informatika, Universitas Islam Indonesia
Follow Hari Setiaji on Twitter
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
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
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>
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
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>
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
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; }
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}
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;}
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
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>
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
Kotak Dialog
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
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
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
Growing up together..
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
Clue for exam..
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
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
Finally
Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom
top related