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

Ukuran: px

Mulai penontonan dengan halaman:

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

Verawati Setiawan
7 tahun lalu
Tontonan:

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

2 Overview Pendahuluan Pengaksesan Javascript Dasar Javascript Program Diploma IPB - Aditya Wicaksono, S.Komp 2

3 Apa yang harus Anda sudah ketahui? HTML & CSS Program Diploma IPB - Aditya Wicaksono, S.Komp 3

4 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

5 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

6 Javascript Mengakhiri statement dengan titik koma (;) merupakan opsional dalam javascript Case sensitive Javascript mengabaikan spasi tambahan Program Diploma IPB - Aditya Wicaksono, S.Komp 6

7 Pengaksesan Javascript Inline Internal Eksternal Program Diploma IPB - Aditya Wicaksono, S.Komp 7

8 Inline <button type= button onclick= alert( Kepo banget sih ); > Jangan Klik! </button> Program Diploma IPB - Aditya Wicaksono, S.Komp 8

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

10 Eksternal <html> </html> <head> </head> Index.html <script src= Script.js type= text/javascript ></script> Script.js document.write( Hello World! ); Program Diploma IPB - Aditya Wicaksono, S.Komp 10

11 Memecah baris kode document.write("hello \ World!"); Program Diploma IPB - Aditya Wicaksono, S.Komp 11

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

13 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

14 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

15 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

16 Object var person=firstname:"john", lastname:"doe", id:5566; name=person.lastname; name=person["lastname"]; Program Diploma IPB - Aditya Wicaksono, S.Komp 16

17 Fungsi function functionname() some code to be executed Program Diploma IPB - Aditya Wicaksono, S.Komp 17

18 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

19 Fungsi dengan Argumen function myfunction(var1,var2) some code Program Diploma IPB - Aditya Wicaksono, S.Komp 19

20 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

21 Fungsi dengan Return Value function myfunction() var x=5; return x; Program Diploma IPB - Aditya Wicaksono, S.Komp 21

22 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

23 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

24 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

25 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

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

27 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

28 Contoh Operator x=5+5; // Isi variabel x = 10 y="5"+5; // Isi variabel y = 55 z="hello"+5; // Isi variabel z = Hello5 Program Diploma IPB - Aditya Wicaksono, S.Komp 28

29 Arithmetic Operator Operator Deskripsi + Addition - Subtraction * Multiplication / Division % Modulus (sisa hasil bagi) ++ Increment -- Decrement Program Diploma IPB - Aditya Wicaksono, S.Komp 29

30 Assignment Operator Operator = += -= *= /= %= Program Diploma IPB - Aditya Wicaksono, S.Komp 30

31 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

32 Logical Operator Operator Deskripsi && And Or! Not Program Diploma IPB - Aditya Wicaksono, S.Komp 32

33 Conditional Operator variablename = (condition)? value1 : value2 Program Diploma IPB - Aditya Wicaksono, S.Komp 33

34 Contoh Conditional Operator voteable = (age < 18)? "Too young : "Old enough"; Program Diploma IPB - Aditya Wicaksono, S.Komp 34

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

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

37 Contoh if (time<20) x="good day"; Program Diploma IPB - Aditya Wicaksono, S.Komp 37

38 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

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

40 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

41 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

42 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

43 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

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

45 for loop for (statement 1; statement 2; statement 3) the code block to be executed Program Diploma IPB - Aditya Wicaksono, S.Komp 45

46 Contoh for (var i=0; i<5; i++) x=x + "The number is " + i + "<br>"; Program Diploma IPB - Aditya Wicaksono, S.Komp 46

47 for in loop for (variable in object) code to be executed Program Diploma IPB - Aditya Wicaksono, S.Komp 47

48 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

49 while loop while (condition) code block to be executed Program Diploma IPB - Aditya Wicaksono, S.Komp 49

50 Contoh while (i<5) x=x + "The number is " + i + "<br>"; i++; Program Diploma IPB - Aditya Wicaksono, S.Komp 50

51 do while loop do code block to be executed while (condition); Program Diploma IPB - Aditya Wicaksono, S.Komp 51

52 Contoh do x=x + "The number is " + i + "<br>"; i++; while (i<5); Program Diploma IPB - Aditya Wicaksono, S.Komp 52

53 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

54 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

55 Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 55

dokumen-dokumen yang mirip

Perangkat Lunak Pengembangan Web

Perangkat Lunak Pengembangan Web Pertemuan 2 Dasar Pemrograman PHP I Program Diploma IPB - Aditya Wicaksono, SKomp 1 HTML Apa yang harus Anda sudah tahu? CSS Javascript Program Diploma IPB - Aditya Wicaksono,