Slide IST209 1 Intro Dasar Javascript

Pengolahan Informasi Berbasis
Bahasa Pemrograman Script
Intro Dasar Javascript dan
JQuery

Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Script tag
• Embeded Script:

Untuk HTML sebelum HTML 5,
tambahkan attribut type seperti
berikut:

//tulis script anda di sini




//tulis

//tulis script
script anda
anda di
di
sini
sini



• Linked Script:




Untuk HTML sebelum HTML 5, tambahkan attribut type seperti berikut:



Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Comments
• Inline comments:


//tulis
//tulis comment
comment anda
anda di
di sini
sini



• Blocked comments:


/*
/* tulis
tulis comment

comment Anda
Anda
di
di sini
sini anda
anda di
di sini
sini */
*/



Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Variable
• Pembuatan variable:

var
var uts,
uts, uas;
uas;
var
var tugas=100;
tugas=100;



• Tipe variable:
Pada javascript dikenal semua tipe variable yang umum
digunakan pada bahasa pemrograman lain, seperti: number,
string, boolean, …dsb
Pada javascript, kita tidak perlu khawatir tentang tipe suatu
variable. Walaupun suatu variable awalnya diisi dengan nilai tipe
integer, namun bisa diisi dengan nilai tipe string. Jadi tipe suatu
variable adalah
tergantung
tipe dari nilai yang mengisinya

terakhir kali.
var
var testVariable
testVariable == 5;
5;
testVariable
testVariable == "Jack";
"Jack";



Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Variable
• Array
▫ Array berisi daftar nilai.
▫ Array pada javascript dapat berisi nilai tipe apa saja, bahkan
satu array bisa memiliki beragam tipe nilai

var
var
var
var

squares
squares
mixed
mixed ==

== [1,
[1, 4,
4, 9,
9,
[1,
[1, "Jack",
"Jack",

16,
16, 25];
25];
5,
5, true,
true, 6.5,
6.5, "Franklin"];
"Franklin"];

var
var isiSquares
isiSquares == squares[2];
squares[2];
var
var isiMixed
isiMixed == mixed[1];
mixed[1];

Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Variable
• Object


var
var car
car == {{
wheelCount:
wheelCount: 4,
4,
colour:
colour: "red",
"red",
seatCount:
seatCount: 5,
5,
carMaximumSpeed:

carMaximumSpeed: 99
99
};
};
jumlahBan
jumlahBan == car.wheelCount;
car.wheelCount;
kecepatanMaks
kecepatanMaks == car["carMaximumSpeed"];
car["carMaximumSpeed"];
car.colour
car.colour == "black";
"black";



Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Function

• Contoh:


function
function bahaya()
bahaya() {{
alert("Ini
alert("Ini peringatan
peringatan bahaya");
bahaya");
}}
bahaya();
bahaya();




function
function perhatian(nama)
perhatian(nama) {{

alert("Panggilan
alert("Panggilan untuk
untuk saudara"
saudara" ++ nama);
nama);
}}
perhatian("jack");
perhatian("jack");



Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Function
• Contoh:


function
function panggilan(untuk,
panggilan(untuk, dari)
dari) {{
alert("Penggilan
alert("Penggilan kepada"
kepada" ++ untuk
untuk ++ oleh
oleh ++
"dari");
"dari");
}}
panggilan("Putra",
panggilan("Putra", "Wati");
"Wati");




function
function panggilan(untuk,
panggilan(untuk, dari)
dari) {{
alert("Penggilan
alert("Penggilan kepada"
kepada" ++ untuk
untuk ++ oleh
oleh ++
"dari");
"dari");
}}
var
var nama1
nama1 == "Putra";
"Putra";
var
var nama2
nama2 == "Wati";
"Wati";
panggilan(nama1,
panggilan(nama1, nama2);
nama2);

Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

Function
• Passing variable tipe object


function
function pesanan(mobil)
pesanan(mobil) {{
alert("jumlah
alert("jumlah roda:
roda: "" ++ mobil.wheelCount
mobil.wheelCount ++ "\n");
"\n");
alert("warna:
alert("warna: "" ++ mobil.colour
mobil.colour ++ "\n");
"\n");
alert("jumlahKursi:
alert("jumlahKursi: "" ++ mobil.seatCount
mobil.seatCount ++ "\n");
"\n");
alert("kecepatanMaks:
alert("kecepatanMaks: "" ++ mobil.carMaximumSpeed
mobil.carMaximumSpeed ++
"\n");
"\n");
}}
var
var car
car == {{
wheelCount:
wheelCount: 4,
4,
colour:
colour: "red",
"red",
seatCount:
seatCount: 5,
5,
carMaximumSpeed:
carMaximumSpeed: 99
99
};
};
pesanan(car);
pesanan(car);



Function

Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

• return:






function
function pesan(isiPesan)
pesan(isiPesan) {{
alert(isiPesan);
alert(isiPesan);
}}








function
function tulisPesan()
tulisPesan() {{
return
return prompt("Masukkan
prompt("Masukkan pesan
pesan anda
anda :: ",
", "ketik
"ketik di
di
sini");
sini");
}}


Panggilan
Panggilan







Augury El Rayeb, S.Kom., MMSI.
Bahasa Pemrograman (Pemrograman Visual) | IST103

That’s All
• Thank’s