Javascript - adamhendrabrata.files.wordpress.com · Javascript Popup Box Alert(“String”);...

26
Javascript BASIC Javascript

Transcript of Javascript - adamhendrabrata.files.wordpress.com · Javascript Popup Box Alert(“String”);...

Javascript

BASIC

Javascript

Pendahuluan

Apa itu JavaScript?

o JavaScript dirancang untuk menambahkan

interaktivitas kehalaman HTML

o JavaScript adalah bahasa scripting

yang ringan

o JavaScript biasanya tertanam langsung ke halaman

HTML

o JavaScript adalah bahasa interpreter (berarti bahwa

script mengeksekusi tanpa kompilasi awal)

20/03/2017 By : Suwondo, S.Kom 2

Pendahuluan

Untuk mendeklarasikan javascript digunakan tag :

<script language=“javascript”> .... </script>

Contoh :

<html>

<body>

<h1>My First Web Page</h1>

<script type="text/javascript">

document.write("<p>" + Date() + "</p>");

</script>

</body>

</html>

20/03/2017 By : Suwondo, S.Kom 3

Pendahuluan

Menggunakan External Javascript :

<script type="text/javascript" src="xxx.js"></script>

Catatan :

tidak seperti pada HTML, javascript untuk penulisan perintah –perintah nya Case – Sensitive artinya huruf besar dan kecil dibedakan.

Tiap akhir statement pada javascript diakhiri dengan semicolon (;) atau titik koma.

Blok javascript dimulai dengan tanda kurung kurawal buka ( { ) dan diakhiri dengan kurung kurawal tutup ( } ).

Komentar satu baris pada javascript di tandai dengan double slash ( // ).

Untuk komentar dengan lebih dari satu baris di awali dengan tanda ( /* ) dan di tutup dengan tanda ( */ ).

20/03/2017 By : Suwondo, S.Kom 4

Javascript Variable

Mendeklarasikan variabel pada javascript

dengan menggunakan kata kunci var.

Contoh :

var x;

var carname;

carname="Volvo";

20/03/2017 By : Suwondo, S.Kom 5

Javascript Operator

Operator Aritmatika

20/03/2017 By : Suwondo, S.Kom 6

Javascript Operator

Operator Penugasan (Assignment Operator)

20/03/2017 By : Suwondo, S.Kom 7

Javascript Operator

Operator + dapat juga digunakan untuk menggabungkan String.

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

Jika number dan string di jumlahkan hasilnya adalah String.

x=5+5;document.write(x);

x="5"+"5";document.write(x);

x=5+"5";document.write(x);

x="5"+5;document.write(x);

20/03/2017 By : Suwondo, S.Kom 8

Javascript Operator

Operator Perbandingan

20/03/2017 By : Suwondo, S.Kom 9

Javascript Operator

Operator Logika

Operator Kondisi

Syntax :

variablename=(condition)?value1:value2

Contoh :

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

20/03/2017 By : Suwondo, S.Kom 10

Javascript Statement BerkondisiIf Stetement

Syntax :

if (condition){code to be executed if condition is true}

else{code to be executed if condition is not true}

Contoh :

<script type="text/javascript">//If the time is less than 10, you will get a "Good morning" greeting.//Otherwise you will get a "Good day" greeting.

var d = new Date();var time = d.getHours();

if (time < 10){document.write("Good morning!");}

else{document.write("Good day!");}

</script>

20/03/2017 By : Suwondo, S.Kom 11

Javascript Statement BerkondisiSwitch – Case Statement

Syntax :

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

case 2:execute code block 2break;

default:code to be executed if n is different from case 1 and 2

}

Break akan memaksa keluar dari statement switch – case.

Contoh :

<script type="text/javascript">

var d=new Date();var theDay=d.getDay();switch (theDay){case 5:

document.write("Finally Friday");break;

case 6:document.write("Super Saturday");break;

case 0:document.write("Sleepy Sunday");break;

default:document.write("I'm looking forward to this weekend!");

}</script>

20/03/2017 By : Suwondo, S.Kom 12

Javascript Popup Box

Alert(“String”);

Ketika sebuah kotak peringatan muncul, user harus klik "OK" untuk

melanjutkan.

Confirm (“String”);

Sebuah kotak konfirmasi sering digunakan jika Anda ingin

pengguna untuk memverifikasi atau menerima sesuatu. Ketika muncul

kotak konfirmasi, user harus klik "OK" atau"Batal"untuk melanjutkan.

Prompt (“String”);

Sebuah kotak prompt sering digunakan jika Anda ingin user

untukmemasukkan nilai sebelum memasuki sebuah halaman.

Ketika prompt box muncul, user harus klik "OK" atau "Cancel

"setelah memasukkan nilai input. Jika pengguna

mengklik "OK" kotak mengembalikan nilai input. Jika pengguna

mengklik "Batal" null kotak kembali.

20/03/2017 By : Suwondo, S.Kom 13

Javascript Functions

Function akan di jalankan melalui sebuah event atau dengan memanggil nama dari function. Untuk mendefinisikan fungsi digunakan :

function functionname(var1,var2,...,varX){some code}

Contoh :

<html><head><script type="text/javascript">function displaymessage(){alert("Hello World!");}</script></head>

<body><form><input type="button" value="Click me!" onclick="displaymessage()" /></form></body></html>

20/03/2017 By : Suwondo, S.Kom 14

Javascript Functions

Return Statement untuk mengembalikan nilai kepada sebuah fungsi.

Contoh :

<html><head><script type="text/javascript">function product(a,b){return a*b;}</script></head>

<body><script type="text/javascript">document.write(product(4,3));</script>

</body></html>

20/03/2017 By : Suwondo, S.Kom 15

Javascript Perulangan

Perulangan for Syntax :

for (variable=startvalue; variable<=endvalue; variable=variable+increment){code to be executed}

Contoh :

<html><body><script type="text/javascript">var i=0;for (i=0;i<=5;i++){document.write("The number is " + i);document.write("<br />");}</script></body></html>

20/03/2017 By : Suwondo, S.Kom 16

Javascript Perulangan

Perulangan while

Syntax :

while (variable<=endvalue){code to be executed}

Contoh :

<html><body><script type="text/javascript">var i=0;while (i<=5){document.write("The number is " + i);document.write("<br />");i++;}

</script></body></html>

20/03/2017 By : Suwondo, S.Kom 17

Javascript Perulangan

Perulangan do – while

Syntax :

do{code to be executed}

while (variable<=endvalue);

Contoh :

<html><body><script type="text/javascript">var i=0;do{document.write("The number is " + i);document.write("<br />");i++;}

while (i<=5);</script></body></html>

20/03/2017 By : Suwondo, S.Kom 18

Javascript Perulangan

For..in Statement

Syntax :

for (variable in object){code to be executed}

Contoh :

var person={fname:"John",lname:"Doe",age:25};

for (x in person){document.write(person[x] + " ");}

20/03/2017 By : Suwondo, S.Kom 19

Javascript Exception Handlingtry – catch Statement

Digunakan untuk mencoba apakah sebuah blok pernyataan mengandung error dalam blok try dan akan di tangkap pada blok catch. Syntax :

try{//Run some code here}

catch(err){//Handle errors here}

Contoh :

<html><head><script type="text/javascript">var txt="";function message(){try

{adddlert("Welcome guest!");}

catch(err){txt="There was an error on this page.\n\n";txt+="Error description: " + err.description + "\n\n";txt+="Click OK to continue.\n\n";alert(txt);}

}</script></head>

<body><input type="button" value="View message" onclick="message()" /></body>

</html>

20/03/2017 By : Suwondo, S.Kom 20

Javascript Special Character

Contoh :var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);

20/03/2017 By : Suwondo, S.Kom 21

Javascript Event

Event digunakan untuk menangani kejadian. Contoh kejadian yang ada yaitu :

jika mouse di klik, atau jika pointer mouse dilewatkan, dll.

20/03/2017 By : Suwondo, S.Kom 22

Javascript String

String digunakan untuk memanipulasi text.

Contoh :

var txt="Hello world!";

document.write(txt.length);

Hasilnya adalah 12.

var txt="Hello world!";

document.write(txt.toUpperCase());

Hasilnya adalah HELLO WORLD

20/03/2017 By : Suwondo, S.Kom 23

Javascript Date

Date digunakan untuk memanipulasi tanggal. Untuk mendeklarasikan

date :

new Date() // current date and time

new Date(milliseconds) //milliseconds since 1970/01/01

new Date(dateString)

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Contoh :

var today = new Date()

var d1 = new Date("October 13, 1975 11:13:00")

var d2 = new Date(79,5,24)

var d3 = new Date(79,5,24,11,33,0)

20/03/2017 By : Suwondo, S.Kom 24

Javascript Array

Array adalah variabel yang berindex, untuk mendeklarasikan array

pada javascript :

var myCars=new Array(); // regular array (add an optional integer

myCars[0]="Saab"; // argument to control array's size)

myCars[1]="Volvo";

myCars[2]="BMW";

Atau

var myCars=new Array("Saab","Volvo","BMW"); // condensed array

Atau

var myCars=["Saab","Volvo","BMW"]; // literal array

Mengakses array :

document.write(myCars[0]);

20/03/2017 By : Suwondo, S.Kom 25

Javascript Math

Math berisi beberapa fungsi untuk

matematika.

Contoh :

var x=Math.PI;

var y=Math.sqrt(16);

document.write(Math.random());

20/03/2017 By : Suwondo, S.Kom 26