Lecture06 javascript1

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”>

</script>

<script type="text/javascript">
Komentar satu baris

</script>

SINTAKS DASAR (2)
 Contoh :

<html>
<body>

<h1>My First Web Page</h1>

document.write("<p> Hello World! </p>");
</script>

</body>
</html>

PENGGUNAAN JAVASCRIPT
1. Di dalam tag <body>

<html>
<body>
Latihan:
Tukar baris kode berikut dan lihat
<p id="demo"></p> hasilnya di browser.
Apa yang terjadi dan mengapa?
document.getElementById("demo").innerHTML=Date();
</script>

</body>
</html>

PENGGUNAAN JAVASCRIPT (2)
2. Di dalam tag <head>
 Dieksekusi saat sebuah event terjadi
 Event ditangani oleh sebuah fungsi

<head>
function displayDate() {
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<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, onLoad, onUnload,
prompt, close onBlur, onFocus
History length, forward, go back -
Navigator appCodeName, appName, javaEnabled -
appVersion, plugins
Documents alinkColor, anchors, open, close, write, -
bgColor, title
Image border, complete, height - -
Form action, elements, submit, reset onSubmit, onReset
FileUpload

function functionname(var1,var2,...,varX) {
// some code
}

<html>
<head>
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() { function turn_blue() {
bgchange.style.backgroundColor bgchange.style.backgroundColor="8080ff";
="80ff80"; redTimer=setTimeout("turn_red()", 500);
blueTimer= }
setTimeout("turn_blue()", 500);
} turn_red();
</script>

That’s all for today

Any Question ?

Lecture06 javascript1

More Related Content

What's hot (16)

Similar to Lecture06 javascript1 (20)

More from Muhammad Ghifary (6)

Lecture06 javascript1