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

</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 ?

Technology

Lecture06 javascript1