Anda di halaman 1dari 55

Pemrograman Berbasis Web

Pertemuan 4 Javascript

Program Diploma IPB - Aditya Wicaksono, S.Komp

Overview

Program Diploma IPB - Aditya Wicaksono, S.Komp

Pendahuluan

Pengaksesan Javascript
Dasar Javascript


Apa yang harus Anda sudah ketahui ?

HTML & CSS


Program Diploma IPB - Aditya Wicaksono, S.Komp

Javascript
Bukan Java. Javascript dikembangkan oleh Netscape sedangkan Java
dikembangkan oleh Sun

Dirancang untuk plug a gap dalam tekniknya


Client Side Dynamic Content
Diinterpretasi
Program Diploma IPB - Aditya Wicaksono, S.Komp

Javascript
Dirancang untuk menambah interaktifitas kedalam halaman HTML
Merupakan scripting language
Dapat ditanam langsung di halaman HTML
Dapat digunakan setiap orang tanpa harus membayar lisensi
Didukung oleh sebagian besar browser
Program Diploma IPB - Aditya Wicaksono, S.Komp

Javascript

Mengakhiri statement dengan titik koma (;) merupakan opsional dalam


javascript

Case sensitive
Javascript mengabaikan spasi tambahan
Program Diploma IPB - Aditya Wicaksono, S.Komp

Pengaksesan Javascript

Inline

Internal

Eksternal

Program Diploma IPB - Aditya Wicaksono, S.Komp

Inline

<button type=button onclick=alert(Kepo banget sih);>

Jangan Klik !
</button>

Program Diploma IPB - Aditya Wicaksono, S.Komp

Internal
<html>
<body>
<script type=text/javascript>

document.write(Hello World!);
</script>
</body>
</html>
Program Diploma IPB - Aditya Wicaksono, S.Komp

Eksternal
Index.html
<html>

Script.js
document.write(Hello World!);

<head>
<script src=Script.js
type=text/javascript></script>
</head>
</html>
Program Diploma IPB - Aditya Wicaksono, S.Komp

10

Memecah baris kode

document.write("Hello \
World!");

Program Diploma IPB - Aditya Wicaksono, S.Komp

11

Komentar
//Komentar satu baris
/*

Komentar
Multi
Baris
*/
Program Diploma IPB - Aditya Wicaksono, S.Komp

12

Variabel

Nama variabel harus diawali huruf


Nama variabel juga dapat diawali dengan $ dan _
Nama variabel case sensitive
Program Diploma IPB - Aditya Wicaksono, S.Komp

13

Contoh Variabel

var x=5;
var y=6;
var z=x+y;
var lastname=Wicaksono",age=26,job=Dosen";
Program Diploma IPB - Aditya Wicaksono, S.Komp

14

Array
//Cara 2
//Cara 1

var cars=new Array("Saab","Volvo","BMW");

var cars=new Array();


cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

//Cara 3

Program Diploma IPB - Aditya Wicaksono, S.Komp

var cars=["Saab","Volvo","BMW"];

15

Object

var person={firstname:"John", lastname:"Doe", id:5566};


name=person.lastname;
name=person["lastname"];

Program Diploma IPB - Aditya Wicaksono, S.Komp

16

Fungsi

function functionname()
{
some code to be executed
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

17

Contoh Fungsi
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Program Diploma IPB - Aditya Wicaksono, S.Komp

18

Fungsi dengan Argumen

function myFunction(var1,var2)
{
some code
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

19

Contoh Fungsi dengan Argumen


<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
Program Diploma IPB - Aditya Wicaksono, S.Komp

20

Fungsi dengan Return Value

function myFunction()
{
var x=5;
return x;
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

21

Variabel Lokal

Sebuah variabel yang dideklarasikan (menggunakan var) dalam fungsi


javascript hanya dapat diakses dari dalam fungsi tersebut (local scope)

Variabel local akan dihapus segera setelah fungsi selesai

Program Diploma IPB - Aditya Wicaksono, S.Komp

22

Variabel Global

Variabel yang dideklarasikan di luar fungsi


Dapat diakses dari semua script dan fungsi pada halaman web
Jika memberikan nilai ke variabel yang belum dideklarasikan, maka variabel
tersebut akan secara otomatis dinyatakan sebagai variabel global

Program Diploma IPB - Aditya Wicaksono, S.Komp

23

Lifetime Variabel

Lifetime variabel dimulai ketika dideklarasikan


Variabel local akan dihapus saat fungsi selesai
Variabel global akan dihapus bila halam ditutup
Program Diploma IPB - Aditya Wicaksono, S.Komp

24

Operator

= digunakan untuk menetapkan nilai


+ digunakan untuk menambahkan nilai
+ juga dapat digunakan untuk menambahkan variable string atau nilai teks
bersamaan

Program Diploma IPB - Aditya Wicaksono, S.Komp

25

Contoh Operator
y=5;
z=2;

x=y+z;
// Isi variable x = 7
Program Diploma IPB - Aditya Wicaksono, S.Komp

26

Contoh Operator

txt1="What a very ";


txt2="nice day";
txt3=txt1+txt2;
// Isi variable txt3 = What a very nice day
Program Diploma IPB - Aditya Wicaksono, S.Komp

27

Contoh Operator

x=5+5;
y="5"+5;
z="Hello"+5;

// Isi variabel x = 10
// Isi variabel y = 55
// Isi variabel z = Hello5

Program Diploma IPB - Aditya Wicaksono, S.Komp

28

Arithmetic Operator
Operator

Deskripsi

Addition

Subtraction

Multiplication

Division

Modulus (sisa hasil bagi)

++

Increment

--

Decrement
Program Diploma IPB - Aditya Wicaksono, S.Komp

29

Assignment Operator
Operator
=
+=
-=
*=
/=
%=

Program Diploma IPB - Aditya Wicaksono, S.Komp

30

Comparison Operator
Operator

Deskripsi

==

equal to

===

exactly equal to (equal value and equal type)

!=

not equal

!==

not equal (different value or different type)

>

greater than

<

less than

>=

greater than or equal to

<=

less than or equal to


Program Diploma IPB - Aditya Wicaksono, S.Komp

31

Logical Operator
Operator

Deskripsi

&&

And

||

Or

Not

Program Diploma IPB - Aditya Wicaksono, S.Komp

32

Conditional Operator

variablename = (condition) ? value1 : value2

Program Diploma IPB - Aditya Wicaksono, S.Komp

33

Contoh Conditional Operator

voteable = (age < 18) ? "Too young : "Old enough";

Program Diploma IPB - Aditya Wicaksono, S.Komp

34

Conditional Statement

if statement
if else statement
if else if else statement
switch statement
Program Diploma IPB - Aditya Wicaksono, S.Komp

35

if statement

if (condition)

{
code to be executed if condition is true
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

36

Contoh

if (time<20)

{
x="Good day";
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

37

if else statement
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Program Diploma IPB - Aditya Wicaksono, S.Komp

38

Contoh
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
Program Diploma IPB - Aditya Wicaksono, S.Komp

39

if else if else statement


if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true

Program Diploma IPB - Aditya Wicaksono, S.Komp

40

Contoh
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";

Program Diploma IPB - Aditya Wicaksono, S.Komp

41

switch statement
switch(n)
{
case 1:
execute code block 1
break;

case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
Program Diploma IPB - Aditya Wicaksono, S.Komp

42

Contoh
var day=new Date().getDay();
switch (day)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
Program Diploma IPB - Aditya Wicaksono, S.Komp

case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
default:
x="Today it's Saturday";
}
43

Loop

for
for in
while
do while
Program Diploma IPB - Aditya Wicaksono, S.Komp

44

for loop

for (statement 1; statement 2; statement 3)

{
the code block to be executed
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

45

Contoh

for (var i=0; i<5; i++)

{
x=x + "The number is " + i + "<br>";
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

46

for in loop

for (variable in object)

{
code to be executed
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

47

Contoh
var person={fname:Aditya",lname:Wicaksono",age:26};
for (x in person)
{
txt=txt + person[x];

}
Program Diploma IPB - Aditya Wicaksono, S.Komp

48

while loop

while (condition)

{
code block to be executed
}

Program Diploma IPB - Aditya Wicaksono, S.Komp

49

Contoh
while (i<5)
{

x=x + "The number is " + i + "<br>";


i++;

}
Program Diploma IPB - Aditya Wicaksono, S.Komp

50

do while loop
do
{

code block to be executed


}

while (condition);
Program Diploma IPB - Aditya Wicaksono, S.Komp

51

Contoh
do
{

x=x + "The number is " + i + "<br>";


i++;
}

while (i<5);
Program Diploma IPB - Aditya Wicaksono, S.Komp

52

break statement
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
Program Diploma IPB - Aditya Wicaksono, S.Komp

53

continue statement
for (i=0;i<=10;i++)
{

if (i==3) continue;
x=x + "The number is " + i + "<br>";

}
Program Diploma IPB - Aditya Wicaksono, S.Komp

54

Terima Kasih

Program Diploma IPB - Aditya Wicaksono, S.Komp

55