Pemrograman Berbasis WebPertemuan 4 – Javascript
Program Diploma IPB - Aditya Wicaksono, S.Komp 1
Overview • Pendahuluan
• Pengaksesan Javascript
• Dasar Javascript
Program Diploma IPB - Aditya Wicaksono, S.Komp 2
“
”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
Program Diploma IPB - Aditya Wicaksono, S.Komp 4
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 5
Javascript
• Mengakhiri statement dengan titik koma (;) merupakan opsional dalamjavascript
• Case sensitive
• Javascript mengabaikan spasi tambahan
Program Diploma IPB - Aditya Wicaksono, S.Komp 6
Pengaksesan Javascript
Inline
Internal
Eksternal
Program Diploma IPB - Aditya Wicaksono, S.Komp 7
Inline
<button type=“button” onclick=“alert(“Kepo banget sih”);”>
Jangan Klik !
</button>
Program Diploma IPB - Aditya Wicaksono, S.Komp 8
Internal
<html>
<body>
<script type=“text/javascript”>
document.write(“Hello World!”);
</script>
</body>
</html>
Program Diploma IPB - Aditya Wicaksono, S.Komp 9
Eksternal
Index.html
<html>
<head>
<script src=“Script.js” type=“text/javascript”></script>
</head>
</html>
Script.js
document.write(“Hello World!”);
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 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"];
Program Diploma IPB - Aditya Wicaksono, S.Komp 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 fungsijavascript 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 variabeltersebut 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 teksbersamaan
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; // Isi variabel x = 10y="5"+5; // Isi variabel y = “55”z="Hello"+5; // 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;
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";
}
Program Diploma IPB - Aditya Wicaksono, S.Komp 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