BASIC penulisan javascript
<html>
<body>
<script
type="text/javascript">
...
</script>
</body>
</html>
Contoh:
<html>
<body>
<script type="text/javascript">
document.write("Belajar Javascript")
</script>
</body>
</html>
Jenis
penulisan javascript
1.
Head section
Format penulisan:
<html>
<head>
<script
type="text/javascript">
....
</script>
</head>
Contoh:
<html>
<head>
<script
type="text/javascript">
function
message()
{
alert("This
alert box was called with the onload event")
}
</script>
</head>
<body
onload="message()">
</body>
</html>
2.
Body section
Format penulisan:
<html>
<head>
</head>
<body>
<script
type="text/javascript">
document.write("Tulisan
ini akan tampil pada saat loding ")
</script>
</body>
</html>
3.
External script
Contoh:
<html>
<head>
<script
src="xxx.js"></script>
</head>
<body>
</body>
</html>
Penggunaan
Variabel pada Javascript
Format penulisan variabel:
Var namavar = “value”
atau
Namavar = “value”
Contoh:
<html>
<body>
<script
type="text/javascript">
var
name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>Contoh
pendeklarasian variabel dan penggunaannya</p>
<p>nilai
variabel akan langsung tampil</p>
</body>
</html>
JavaScript Popup Boxes
Di dalam bahasa JavaScript kita dapat membuat
kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu:
1.
Alert box
2.
Alert box with line breaks
3.
Confirm box
4.
Prompt box
Alert
Box
Alert box di gunakan untuk memberikan informasi pesan kepada user
dan bila user yakin dengan pilihannya. Alert box ini mempunyai satu tombol “OK”
untuk melanjutkan proses.
Syntax:
alert("sometext")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input
type="button" onclick="disp_alert()" value="Display
alert box" />
</body>
</html>
Alert
Box and line breaks
<html>
<head>
<script
type="text/javascript">
function
disp_alert()
{
alert("Hello
again! This is how we" + '\n' + "add line breaks to an alert
box!")
}
</script>
</head>
<body>
<input
type="button" onclick="disp_alert()" value="Display
alert box" />
</body>
</html>
Confirm Box
Confirm box biasanya di gunakan jika kita
ingin memberikan penyataan kepada user untuk memberikan pilihan jawaban apakah
akan terus di lanjutkan atau di batalkan. Kotak confirm box memberikan dua
tombol pilihan kepada user berupa tombol “OK” dan tombol “Cancel”. Jika pilihan
tombol “OK” maka halaman web akan
diproses jika pilihan tombol “Cancel” maka halaman tidak akan diproses.
Syntax:
confirm("sometext")
Contoh:
<html>
<head>
<script
type="text/javascript">
function
disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed
Cancel!")
}
}
</script>
</head>
<body>
<input
type="button" onclick="disp_confirm()" value="Display
a confirm box" />
</body>
</html>
Prompt
Box
Prompt box biasanya di
gunakan untuk memberikan pesan kepada user agar user memberikan inputan sebelum
halaman web itu diproses. Ketika prompt box muncul, dan user diminta untuk
mengklik tombol awal yang kemudian akan muncul box yang harus di input oleh
user sesuai dengan pertanyaan yang di ajukan.
Setelah di input kemudian
user mengklik tombol "OK" atau "Cancel". Untuk melanjutkan
proses pilih tombol “OK” dan browser akan menampilkan hasil. Jika tombol
“Cancel” kotak box akan kembali kosong
untuk mengulang.
Syntax:
prompt("sometext","defaultvalue")
Contoh:
<html>
<head>
<script
type="text/javascript">
function
disp_prompt()
{
var name=prompt("Please enter your
name","Harry Potter")
if (name!=null && name!="")
{
document.write("Hello " + name +
"! How are you today?")
}
}
</script>
</head>
<body>
<input
type="button" onclick="disp_prompt()" value="Display a
prompt box" />
</body>
</html>
Fungsi pada JavaScript
Fungsi merupakan blok kode yang akan di jalankan
pada saat nama function itu jalankan oleh event tertentu atau pada saat function
itu di panggil. Fungsi ini juga dapat di jalankan oleh browser pada saat
loading sebuah halaman web.
Function juga
bisa di panggil di halaman web mana saja dengan cara kita membuat file external
berupa file .JS (extention file javascrip). Yang berisi syntak javascript. File
itu kita panggil pada halaman web yang yang mau sisipkan javacscript.
Function dapat di definisikan di bagian <head>
dan bagian <body> dari halaman web. Jika kita menginginkan script itu di
panggil pada saat halaman web di load maka kita tempatkan script itu di bagian
<head>
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>
Output dari scrip di atas adalah akan
muncul tombol yang harus di clik bila ingin menampilkan pesan nya.
Bagaimana
cara mendefinisikan sebuah Fungsi
Sintak untuk membuat fungsi adalah:
function namafungsi (var1,var2,...,varX)
{
kode teks
}
Keterangan:
·
var1,
var2, adalah variable atau nilai suatu fungsi.
·
Nilai
fungsi harus di awali dan di akhiri dengan tanda kurung kurawal. { }
· Bila variable, parameter atau nilai tidak ada maka tanda kurung harus tetap di gunakan.()
· Di sarankan untuk tidak menggunakan huruf capital pada javascript lebih baik gunakan huruf kecil semua. Untuk nama fungsi, nama variable, parameter dan lainya di sarankan untuk menggunakan huruf kecil semua.
Contoh:
function prod(a,b)
{
x=a*b
return x
}
Jenis Fungsi:
Bahasa
Javascript mempunyai beberapa type penulisan function. Di antaranya adalah:
1. Function
Basic
How to
call a function.
2. Function
with arguments
How to
pass a variable to a function, and use the variable in the function.
3. Function
with arguments 2
How to
pass variables to a function, and use these variables in the function.
4. Function
that returns a value
How to let
the function return a value.
5. A
function with arguments, that returns a value
How to let
the function find the product of two arguments and return the result.
Contoh Fungsi:
<html>
<head>
<script
type="text/javascript">
function
myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="myfunction()" value="Call function">
</form>
<p>Tekan
tombol untuk memanggil Function.</p>
</body>
</html>
Contoh 1: Fungsi dengan
argumen:
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction('Hello')" value="Call function">
</form>
<p>Tekan tombol untuk memanggil function nya</p>
</body>
</html>
Output:
Contoh 2: Fungsi
dengan argumen
<html>
<head>
<script
type="text/javascript">
function
myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="myfunction('Good
Morning!')" value="In the Morning">
<input
type="button" onclick="myfunction('Good Evening!')"
value="In the Evening">
</form>
<p>Pilih
Tombol untuk memanggil Function nya.</p>
</body>
</html>
Output:
Contoh fungsi dengan
nilai kembalian
<html>
<head>
<script
type="text/javascript">
function
myFunction()
{
return
("Hello, have a nice day!")
}
</script>
</head>
<body>
<script
type="text/javascript">
document.write(myFunction())
</script>
<p>The
script in the body section calls a function.</p>
<p>The
function returns a text.</p>
</body>
</html>
Contoh fungis dengan
nilai kembalian
<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>
<p>Script
dalam bagian body memanggil fungsi dengan 2 parameter (4 and 3).</p>
<p>fungsi akan memanggil kembali sesuai nilai parameter.</p>
</body>
</html>
