PEMROGRAMAN WEB 08 – JavaScript Dasar
advertisement
PEMROGRAMAN WEB
08 – JavaScript Dasar
Andi WRE
JavaScript
Scripting language
Lightweight scripting language
Client-side scripting language
Membuat halaman web menjadi lebih interaktif
Digunakan untuk menambahkan fungsionalitas halaman web, validasi
form, berkomunikasi dengan server, dll.
Case sensitive
JavaScript ≠ Java
Here comes your
footer
Web Programming
– JavaScript
Dasar
Kegunaan JavaScript
Programming tool bagi designer
Menangani event pada halaman web
Dapat membaca dan mengubah isi dari sebuah element HTML
Validasi data
Mendeteksi jenis browser yang sedang digunakan
Dapat mengambil dan menyimpan informasi pada browser (create
cookies)
Here comes your
footer
Web Programming
– JavaScript
Dasar
Cara Penulisan JavaScript <body>
Ditempatkan dalam tag body
Here comes your
footer
Web Programming
– JavaScript
Dasar
Cara Penulisan JavaScript <head>
Ditempatkan dalam tag head
Javascript dalam header biasanya berupa function, jika tidak dalam bentuk
function maka kode JavaScript tersebut akan langsung diproses ketika
halaman web di-load.
Contoh tanpa function :
Here comes your
footer
Web Programming
– JavaScript
Dasar
Cara Penulisan JavaScript <head>
Contoh dengan function
Here comes your
footer
Web Programming
– JavaScript
Dasar
External JavaScript
Kode JavaScript dibuat dalam file yang terpisah
File yang berisi kode JavaScript namaFile.js
Memanggil file .js
<script type="text/javascript" src=“namaFile.js"></script>
Javascript yang dibuat dalam file terpisah biasanya berupa function, jika tidak
dalam bentuk function maka kode JavaScript tersebut akan langsung diproses
ketika halaman web di-load.
Here comes your
footer
Web Programming
– JavaScript
Dasar
External JavaScript
Contoh tanpa function
latihan.html
tampil.js
Here comes your
footer
Web Programming
– JavaScript
Dasar
External JavaScript
Contoh dengan function
latihan2.html
tampil.js
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Statement
JavaScript Case Sensitve
Setiap statement diakhiri dengan semicolon “ ; ”
Komentar dalam JavaScript
single line comments //
multi line comment /* … */
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Variable
Variable pada JavaScript tidak memperdulikan tipe data
Variable dapat bersifat Local/Global
Gunakan keyword var
Aturan penamaan variable :
- Nama variable bersifat case sensitve
- Diawali dengan karakter alfabet, $, atau _
Deklarasi variable :
var x;
var carname;
Assignment :
var x=5;
var carname="Volvo";
x=5;
carname="Volvo";
Here comes your
footer
Web Programming
– JavaScript
Dasar
ParseInt dan ParseFloat
parseInt Mengubah dari data bertipe string menjadi integer
parseFloat Mengubah dari data bertipe string menjadi float
Contoh :
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Operators
Operator Aritmatika
Operator Assignment
Operator + pada string akan menghasilkan penggabungan dari kedua string
tersebut.
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Operators
Operator Perbandingan
Operator Logika
Operator perbandingan dapat digunakan pada saat mengisi nilai pada sebuah
variable. variablename=(condition)?value1:value2
Here comes your
footer
Web Programming
– JavaScript
Dasar
Conditional Statement
if Statement
if (condition)
{
code to be executed if condition is true
}
if...else Statement
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Here comes your
footer
Web Programming
– JavaScript
Dasar
Conditional Statement
if...else if...else Statement
switch 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
}
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
}
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Loops
for Loop
for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}
For...In Statement
for (variable in object)
{
code to be executed
}
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Loops
while Loop
while (variable<=endvalue)
{
code to be executed
}
do...while Loop
do
{
code to be executed
}
while (variable<=endvalue);
Here comes your
footer
Web Programming
– JavaScript
Dasar
Break and Continue Statements
Break Statement
Menghentikan loop dan mengeksekusi perintah berikutnya setelah loop
Continue Statement
Menghentikan loop yang sekarang sedang dieksekusi dan meneruskan loop
dengan nilai yang berikutnya
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Popup Boxes
Alert Box
Memunculkan message box atau pesan peringatan
Sintaks :
alert("pesan");
Contoh :
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Popup Boxes
Confirm Box
Memunculkan pesan konfirmasi dan memiliki dua nilai kembalian berupa
boolean
“OK”
True
“Cancel” False
Sintaks :
confirm("pesan");
Contoh :
Tekan OK
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Popup Boxes
Prompt Box
Meminta user untuk memasukkan sebuah nilai
“OK” mengembalikan nilai yg di input user
“Cancel” mengembalikan nilai null
Sintaks :
prompt("pesan", “nilai default");
Contoh :
Tekan OK
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Math Object
Here comes your
footer
Web Programming
– JavaScript
Dasar
JavaScript Math Object
Contoh :
Here comes your
footer
Web Programming
– JavaScript
Dasar
Latihan 1
Here comes your
footer
Web Programming
– JavaScript
Dasar
Latihan 2
Warning jika operator bukan +,-,*,/
Here comes your
footer
Web Programming
– JavaScript
Dasar