View
2.041
Download
3
Category
Preview:
Citation preview
WEB PROGRAMMING
LECTURE 6 – JAVASCRIPT (1)
ORGANIZED BY
GHIFAR
MATERI JAVASCRIPT (1)
Pendahuluan
Sintaks Dasar
Penggunaan Javascript
Hirarki Objek Javascript
Function
PENDAHULUAN JAVASCRIPT
Client-side scripting
Bahasa scripting yang paling populer di Internet,
dapat berjalan di hampir semua browser
Didesain untuk menambah interaktifitas pada
halaman HTML
Interpreted language (tanpa kompilasi)
Free (tanpa membeli lisensi)
Javascript is not Java !
PENDAHULUAN JAVASCRIPT (2) : APA YANG
DAPAT DILAKUKAN JAVASCRIPT?
sebagai alat pemrograman bagi desainer HTML
dapat meletakkan teks dinamis pada halaman
HTML
document.write(“<h1>”+name+”</h1>”); {name
merupakan variable}
dapat bereaksi terhadap event
dapat membaca dan menulis elemen HTML
dapat digunakan untuk validasi data
dapat mendeteksi pengunjung browser
dapat membuat cookie
SINTAKS DASAR (1)
Case sensitive
<script language=”javascript”> <!--// pendefinisian variabel atau objek/* statement-statement javascript */ //-->
</script>
<script type="text/javascript"><!--// pendefinisian variabel atau objek/* statement-statement javascript */ //-->
</script>
Komentar satu baris
Komentar lebih dari satu baris
SINTAKS DASAR (2)
Contoh :
<html><body>
<h1>My First Web Page</h1>
<script type="text/javascript">document.write("<p> Hello World! </p>");
</script>
</body></html>
PENGGUNAAN JAVASCRIPT
1. Di dalam tag <body>
<html><body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<script type="text/javascript">document.getElementById("demo").innerHTML=Date();
</script>
</body></html>
Latihan:Tukar baris kode berikut dan lihathasilnya di browser.Apa yang terjadi dan mengapa?
PENGGUNAAN JAVASCRIPT (2)
2. Di dalam tag <head>
Dieksekusi saat sebuah event terjadi
Event ditangani oleh sebuah fungsi
<head><script type="text/javascript">
function displayDate() {document.getElementById("demo").innerHTML=Date();
}</script>
</head><body>
<h1>My First Web Page</h1><p id="demo"></p><button type="button" onclick="displayDate()">Display Date</button>
</body>
PENGGUNAAN JAVASCRIPT (3)
3. File eksternal
Ekstensi : js
Dapat digunakan oleh banyak halaman web
<html><head>
<script type="text/javascript" src=”sample.js"></script></head><body></body>
</html>
Perhatikan lokasi penyimpanan file eksternal
HIRARKI OBJEK JAVASCRIPT
Dua tipe objek:
Language object
Disediakan oleh bahasa dan tidak bergantung pada objek lain
Navigator
Disediakan oleh browser, tergantung pada jenis browser yang
digunakan
Object Properties Methods Event Handler
Window frames , status, top,name alert, confirm, prompt, close
onLoad, onUnload, onBlur, onFocus
History length, forward, go back -
Navigator appCodeName, appName, appVersion, plugins
javaEnabled -
Documents alinkColor, anchors, bgColor, title
open, close, write, -
Image border, complete, height - -
Form action, elements, FileUpload
submit, reset onSubmit, onReset
function functionname(var1,var2,...,varX) {// some code
}
<html><head>
<script type="text/javascript">function displaymessage() {
alert("Hello World!");}
</script></head><body>
<form><input type="button" value="Click me!" onclick="displaymessage()" />
</form></body>
</html>
<p id=bgchange style="background-color: 0000ff”> The background changes every half second</p>
<script type=“text/javascript">function turn_red() { bgchange.style.backgroundColor="ff8080";greenTimer=setTimeout("turn_green()", 500);
}function turn_green() { bgchange.style.backgroundColor
="80ff80";blueTimer=
setTimeout("turn_blue()", 500);}
function turn_blue() { bgchange.style.backgroundColor="8080ff";redTimer=setTimeout("turn_red()", 500);
}
turn_red();</script>
That’s all for today
Any Question ?
Recommended