Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download JavaScript
Document related concepts
no text concepts found
Transcript
Pengembangan Web
Ramos Somya
Java Script itu adalah bahasa pemrograman, yang
sering digunakan untuk membangun halaman
web, sehingga lebih interaktif.
Seringkali digunakan buat hal2 seperti nampilin
tanggal, validasi form, ngatur tampilan, proteksi
web, dll..
Java Script adalah client side scripting.. Artinya semua
instruksi dalam coding akan dijalankan dalam komputer
client, bukan server.
Java Script butuh interpreter (penerjemah). Maksudnya
gini, komputer kita tu taunya bahasa mesin, kode binary
gitu. Padahal Java Script itu mendekati bahasa manusia
dan belum dicompile jadi bahasa yang dingertiin
komputer kita. Nah, interpreter sebagai penerjemah Java
Script ini udah tergabung dalam browser yang baru2.. Jadi
nggak semua browser kenal Java Script..
Banyak sekali hal yang bisa dilakukan dengan
Java Script.. Contohnya sudah disebutkan
sebelumnya.
Menjadi tool pembuatan web
Menambah interaksi
Dsb
Jutaan web menggunakan Java Script di
dalamnya..
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Java Script diawali tag <script> seperti di atas.
Di tengah2nya ada blok program yg kalo dijalankan
akan mencetak tulisan “Hello World” ke halaman
web.
Ada Java Script yang hanya akan berjalan jika
dipanggil.
Ada juga yang akan berjalan begitu halaman diload.
Kita bisa bikin java script sebanyak mungkin
terserah kita mau berapa.
Java Script itu emang mirip2 C, en Java.. Tapi JS
bukan keduanya.
Karena mirip, tentunya kita nggak akan kesulitan
waktu menggunakannya.
Banyak
hal yang sama, seperti fungsi,
perulangan, variabel, dan kondisi.
Kayak bahasa permograman laen, variabel jelas
ada di JS.
Tau kan, variabel?? Itu suatu obyek yang
menampung nilai.
Bedanya, di JS nggak ada tipenya (kayak String,
char, int, float), tipenya tergantung isi yang kita
inputkan.
<script type="text/javascript">
var name = “Site Title“;
document.write(name);
document.write("<h1>"+name+"</h1>");
</script>
Pada contoh di atas, ada cara mendeklarasikan variabel
(baris 2)
Mengisi variabel (baris 2 juga)
Dan menampilkannya (baris 3 en 4)
Gampang kan? JS di atas akan menampilkan isi variabel
“name”
Fungsi JS “document.write” dapat digunakan untuk
menuliskan tag-tag HTML loh, jadi kita bisa bikin macem2
lewat JS.
Harus diawali huruf atau underscroe “_”
Variabelnya case sensitive, huruf besar sama kecil
dibedain, jadi harus sama persis klo make
variabel.
Variabel hanya bisa digunakan dalam sekali jalan
(1 fungsi), begitu keluar dari fungsi itu / proses
selesai, variabel itu dah hilang…
Bebas, bisa macem2, kayak gini :
var nama_variable;
var nama_variable = isi_variable;
nama_variable; (nggak pake var nggak papa)
Ngisinya juga sama kok. Nggak usah pake var.
Persis kayak C en Java, jadi liat2 lagi aja.
Ada :
if
if-else
if di dalem if
switch
Ingat, untuk nulis kondisi jangan pake
hurup besar (ex : IF), ntar error.
<script type="text/javascript">
//Kalo waktu menunjukkan kurang dari jam 10, akan ditulis “Good
Morning”
//Kalo nggak, akan ditulis “Good day!”
var d = new Date(); // var d diisi nilai dari fungsi mengambil waktu saat ini
var time = d.getHours(); // var time diisi nilai jam saat ini dari d (d kan
waktu)
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
<script type="text/javascript">
//Tulisan yang muncul bakal beda2 tergantung hari
var d=new Date(); // kayak sebelumnya, Date() itu fungsi bawaan JS.
hari=d.getDay();
switch (hari)
{
case 5:
document.write(“Hari Jumat")
break
case 6:
document.write(“Hari Sabtu")
break
case 0:
document.write(“Hari Minggu")
break
default:
document.write(“Nunggu weekend nih!")
}
</script>
JS nyediain popup boxes alert, confirm en prompt.
Contohnya gini, coba aja :
alert(“teks”); //akan muncul teks sesuai yang ditulis
dan kita disuruh nekan “OK”.
confirm(“teks”); // sama, tapi selain OK ada Cancel.
OK returnnya true, Cancel returnnya False
Prompt(“teks”,”nilai_kembalian”); //sama, tapi klo di
OK, yang kembali tu nilai kembalian yang dituliskan..
Klo di Cancel returnnya null.
Ya kayak di C en Java, ada function di JS.
Bikinnya juga mirip :
function displaymessage() //nama fungsi
{//kurung kurawal buka tanda awal blok
alert("Hello World!"); //isi fungsi
}//tutup
Kayak yg disinggung di awal, ada JS yang
hanya akan berjalan ketika dipanggil.
Maksudnya dipanggil adalah, ketika
elemen HTML dikenai event. Event itu
misalnya : ketika tombol ditekan, ketika
text diisi, ketika link disorot, dsb. Ngerti
kan?
Nah, contohnya ada di slide berikut
<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>
JS yang dipanggil itu ciri khasnya :
Ditulis di dalem head
Bentuknya fungsi-fungsi
Di slide sebelumnya, fungsi “displaymessage”
akan dipanggil ketika tombol “Click me”
ditekan.
Penggunaan event dilakukan dengan atribut
“onclik” pada tag tombol “Click me”
Contoh fungsi dengan nilai kembalian (a and b):
function prod(a,b)
{
x=a*b
return x
}
Klo mo manggil fungsi di atas, harus pake parameter
product=prod(2,3)
And again.. Sama kayak C n Java.. Ada :
For
While
Do While
<html>
<body>
<script type="text/javascript">
var i=0;
document.write(“<ul>”);
for (i=0;i<=10;i++)
{
document.write(“<li>Nomor " + i + “</li>);
}
document.write(“</ul>”);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var i=0
document.write(“<ul>”);
while (i<=10)
{
document.write(“<li>Nomor " + i + “</li>);
i=i+1;
}
document.write(“</ul>”);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var i=0
document.write(“<ul>”);
do
{
document.write(“<li>Nomor " + i + “</li>);
i=i+1
}
while (i<0)
document.write(“</ul>”);
</script>
</body>
</html>
Break : Keluar dari perulangan
Continue : Dalam perulangan, lompat ke nilai
perulangan selanjutnya.
<html>
<body>
<script type="text/javascript">
var i=0;
document.write(“<ul>”);
for (i=0;i<=10;i++)
{
if (i==3){continue}//coba jg continue diganti break
document.write(“<li>Nomor " + i + “</li>);
}
document.write(“</ul>”);
</script>
</body>
</html>
Event yang bisa dikenakan ke elemen
HTML tu ada banyak.
Misal : onload, onclick, onchange,
onsubmit, dll.
Semua bisa digunakan untuk memicu
pemanggilan fungsi JS.
Nah, sekarang kita akan lihat JS yang
langsung jalan begitu halaman ngeload
(mbuka), tanpa dipanggil.
(Next slide..)
<html>
<head>
</head>
<body>
<script type="text/javascript">
var tgl = new Date()
var jam = tgl.getHours();
var menit = tgl.getMinutes();
var detik = tgl.getSeconds();
document.write(jam+":"+menit+":"+detik);
</script>
</body>
</html>
Ciri JS ygn langsung jalan :
Ada di dalem body
Biasanya selalu ada instruksi / blok program di
luar blok fungsi (nggak pake fungsi, langsung
ketik)
JS sebelumnya akan menampilkan jam
sekarang di halaman web.
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="#"
onsubmit="return validate_form(this)"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="#"
onsubmit="return validate_form(this);"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
Buatlah kalkulator sederhana menggunakan HTML
dan Java Script seperti berikut ini:
