javascript-1 membangun interactive websites
TRANSCRIPT
JavaScript-1
Membangun InteractiveWebsites
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
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
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
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
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
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
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
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'
JavaScript Syntax
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’ />
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>
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.
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
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.
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
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’ ;
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
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
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’)
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>
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
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>
Language
Conditional Statementsifif … else …switch
Loopfor loopwhile loop
try …. Catchthrow
Conditional Statementsifif … else …switch
Loopfor loopwhile loop
try …. Catchthrow
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>
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>
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>
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>
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
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
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>
Throw Throw
digunakanuntukmembuatcustom error(throwexception)
Throwdigunakanuntukmembuatcustom error(throwexception)