Pemrograman Berbasis Web Pertemuan 4 Javascript. Program Diploma IPB - Aditya Wicaksono, S.Komp 1

Pemrograman Berbasis Web Pertemuan 4 – Javascript

Program Diploma IPB - Aditya Wicaksono, S.Komp

1

Overview


• • •

Pendahuluan

Pengaksesan Javascript Dasar Javascript

2

“ Apa yang harus Anda sudah ketahui ?

”

HTML & CSS Program 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 dalam javascript

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

6

Pengaksesan Javascript

Inline

Internal

Eksternal


7

Inline


8

Internal <script type=“text/javascript”>

document.write(“Hello World!”); Program Diploma IPB - Aditya Wicaksono, S.Komp

9

Eksternal Index.html

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

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

10

Memecah baris kode

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


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


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

15

Object

var person={firstname:"John", lastname:"Doe", id:5566}; name=person.lastname; name=person["lastname"];


16

Fungsi

function functionname() { some code to be executed }


17

Contoh Fungsi <script> function myFunction() { alert("Hello World!"); } Program Diploma IPB - Aditya Wicaksono, S.Komp

18

Fungsi dengan Argumen

function myFunction(var1,var2) { some code }


19

Contoh Fungsi dengan Argumen <script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } Program Diploma IPB - Aditya Wicaksono, S.Komp

20

Fungsi dengan Return Value

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


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


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


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


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”


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 = += -= *= /= %=


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


32

Conditional Operator

variablename = (condition) ? value1 : value2


33

Contoh Conditional Operator

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


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 }


36

Contoh

if (time<20)

{ x="Good day"; }


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

}


40

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

}


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 }


45

Contoh

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

{ x=x + "The number is " + i + "
"; }


46

for in loop

for (variable in object)

{ code to be executed }


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 }


49

Contoh while (i<5) {

x=x + "The number is " + i + "
"; i++;


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


54

Terima Kasih


55

Pemrograman Berbasis Web Pertemuan 4 Javascript. Program Diploma IPB - Aditya Wicaksono, S.Komp 1

Recommend Documents