Pemrograman Berbasis Web - moeslimar.files.wordpress.com fileVariabel yang dideklarasikan di luar fungsi • Dapat diakses dari semua script dan fungsi pada halaman web • Jika memberikan

Pemrograman Berbasis WebPertemuan 4 – Javascript

Program Diploma IPB - Aditya Wicaksono, S.Komp 1

Overview • Pendahuluan

• Pengaksesan Javascript

• Dasar Javascript


“

”Apa yang harus Anda sudah ketahui ?

HTML & CSSProgram Diploma IPB - Aditya Wicaksono, S.Komp 3

Javascript

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

• Dirancang untuk “plug a gap” dalam tekniknya

• Client Side Dynamic Content

• Diinterpretasi


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


Javascript

• Mengakhiri statement dengan titik koma (;) merupakan opsional dalamjavascript

• Case sensitive

• Javascript mengabaikan spasi tambahan


Pengaksesan Javascript

Inline

Internal

Eksternal


Inline

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

Jangan Klik !

</button>


Internal

<html>

<body>

<script type=“text/javascript”>

document.write(“Hello World!”);

</script>

</body>

</html>


Eksternal

Index.html

<html>

<head>

<script src=“Script.js” type=“text/javascript”></script>

</head>

</html>

Script.js

document.write(“Hello World!”);


Memecah baris kode

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


Komentar

//Komentar satu baris

/*

Komentar

Multi

Baris

*/


Variabel

• Nama variabel harus diawali huruf

• Nama variabel juga dapat diawali dengan $ dan _

• Nama variabel case sensitive


Contoh Variabel

var x=5;var y=6;var z=x+y;

var lastname=“Wicaksono",age=26,job=“Dosen";


Array

//Cara 1

var cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";

//Cara 2

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

//Cara 3

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


Object

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

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


Fungsi

function functionname(){some code to be executed}


Contoh Fungsi

<!DOCTYPE html><html><head><script>function myFunction(){alert("Hello World!");}</script></head>

<body><button onclick="myFunction()">Try it</button></body></html>


Fungsi dengan Argumen

function myFunction(var1,var2){some code}


Contoh Fungsi dengan Argumen

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>function myFunction(name,job){alert("Welcome " + name + ", the " + job);}</script>


Fungsi dengan Return Value

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


Variabel Lokal

• Sebuah variabel yang dideklarasikan (menggunakan var) dalam fungsijavascript hanya dapat diakses dari dalam fungsi tersebut (local scope)

• Variabel local akan dihapus segera setelah fungsi selesai


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 variabeltersebut akan secara otomatis dinyatakan sebagai variabel global


Lifetime Variabel

• Lifetime variabel dimulai ketika dideklarasikan

• Variabel local akan dihapus saat fungsi selesai

• Variabel global akan dihapus bila halam ditutup


Operator

• = digunakan untuk menetapkan nilai

• + digunakan untuk menambahkan nilai

• + juga dapat digunakan untuk menambahkan variable string atau nilai teksbersamaan


Contoh Operator

y=5;

z=2;

x=y+z;

// Isi variable x = 7


Contoh Operator

txt1="What a very ";txt2="nice day";txt3=txt1+txt2;

// Isi variable txt3 = “What a very nice day”


Contoh Operator

x=5+5; // Isi variabel x = 10y="5"+5; // Isi variabel y = “55”z="Hello"+5; // Isi variabel z = “Hello5”


Arithmetic Operator

Operator Deskripsi

+ Addition

- Subtraction

* Multiplication

/ Division

% Modulus (sisa hasil bagi)

++ Increment

-- Decrement


Assignment Operator

Operator

=

+=

-=

*=

/=

%=


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


Logical Operator

Operator Deskripsi

&& And

|| Or

! Not


Conditional Operator

variablename = (condition) ? value1 : value2


Contoh Conditional Operator

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


Conditional Statement

• if statement

• if … else statement

• if … else if … else statement

• switch statement


if statement

if (condition)

{

code to be executed if condition is true

}


Contoh

if (time<20)

{

x="Good day";

}


if … else statement

if (condition)

{

code to be executed if condition is true

}

else

{

code to be executed if condition is not true

}


Contoh

if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}


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

}


Contoh

if (time<10)

{

x="Good morning";

}

else if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}


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

}


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;

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

}


Loop

• for

• for in

• while

• do while


for loop

for (statement 1; statement 2; statement 3)

{

the code block to be executed

}


Contoh

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

{

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

}


for in loop

for (variable in object)

{

code to be executed

}


Contoh

var person={fname:“Aditya",lname:“Wicaksono",age:26};

for (x in person)

{

txt=txt + person[x];

}


while loop

while (condition)

{

code block to be executed

}


Contoh

while (i<5)

{


i++;

}


do while loop

do

{

code block to be executed

}

while (condition);


Contoh

do

{


i++;

}

while (i<5);


break statement

for (i=0;i<10;i++)

{

if (i==3)

{

break;

}


}


continue statement

for (i=0;i<=10;i++)

{

if (i==3) continue;


}


Terima Kasih


Documents

Pemrograman Berbasis Web - moeslimar.files.wordpress.com fileVariabel yang dideklarasikan di luar fungsi • Dapat diakses dari semua script dan fungsi pada halaman web • Jika memberikan