Tutorial Javascript :
Apa yang dilakukan oleh Javascript :
@ JS memberi kemudahan dalam mendesign dari HTML dengan programming tool
@JS bisa memasukan text dinamic kedalam halaman HTML.
contohnya : document.write(“<h1>” + name + “</h1>”)
@JS bisa bereaksi dengan event ,seperti ketika halaman sudah selesai di load atau kerika user click
@JS bisa menulis dan membaca HTML elements
@JS bisa digunakan untuk validasi data
@JS bisa digunakan untuk mendeteksi pengunjung
@JS bisa digunakan untuk membuat cookies
<html>
<body>
<script type=”text/javascript”>
document.write(“Hello World!”);
</script>
</body>
</html>
Jika tidak suport dengan browsernya maka anda bisa memasukan tanda diantara <script>
seperti dibawah ini :
<html>
<body>
<script type=”text/javascript”>
<!–
document.write(“Hello World!”);
//–>
</script>
</body>
</html>
Meletakkan Javascript dimana ?
Untuk meletakkan Javascript bisa dimana saja, adapun yang pertama adalah sebagai berikut :
@di Head Section
Script untuk di execusi ketika script ini dipanggil atau ketika event digerakkan.
contoh :
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
@di Body section
dieksekusi ketika halaman di load
contohnya :
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
@diantara keduanya,diantara head dan body
contohnya :
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
@menggunakan javascript external
Dimana memanggil javas dengan memanggil file dengan extensi .js
contohnya :
<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>
Javas Koding :
<script type=”text/javascript”>
document.write(“<h1>This is a header</h1>”);
document.write(“<p>This is a paragraph</p>”);
document.write(“<p>This is another paragraph</p>”);
</script>
Variable Javascript
Untuk variable di Javas sangat sensitive dimana x dengan X berbeda
contoh penulisan variable :
x=5;
carname=”Volvo”;
Operator pada Javas :
Operator Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
– Decrement x=–y x=4
perbandingan Operator pada Javas
Operator Description Example
== is equal to x==8 is false
=== is exactly equal to (value and type) x===5 is true
x===”5″ is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true
Bagaimana cara menggunakan Operator Perbandingan ini,
Untuk menggunakan operator contohnya :
if (age<18) document.write(“Too young”);
Operator Logika
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
IF STATEMENT
<script type=”text/javascript”>
//Write a “Good morning” greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write(“<b>Good morning</b>”);
}
</script>
IF ELSE dan ELSE IF
<script type=”text/javascript”>
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write(“<b>Good morning</b>”);
}
else if (time>10 && time<16)
{
document.write(“<b>Good day</b>”);
}
else
{
document.write(“<b>Hello World!</b>”);
}
</script>
SWICTH
contohnya :
<script type=”text/javascript”>
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write(“Finally Friday”);
break; // untuk mencegah kode dari menjalankan ke next case secara otomatis
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>
ALERT BOX
ini sering digunakan untuk menampilkan informasi kepada user
contohnya :
alert(“sometext”);
CONFIRM BOX
sering digunakan untuk memberi konfirmasi dimana ada 2 command OK dan CANCEL
contohnya:
confirm(“sometext”);
PROMPT BOX :
ini sering digunakan jika kamu ingin user untuk mengisi nilai sebelum masuk ke dalam page anda.
Contohnya :
prompt(“sometext”,”defaultvalue”);
JAVAS FUNCTIONS
untuk menjaga browser dari execusi koding ketika halaman di Load kau akan memasukan kode kedalam function
Contohnya :
<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>
FOR
<html>
<body>
<script type=”text/javascript”>
var i=0;
for (i=0;i<=10;i++)
{
document.write(“The number is ” + i);
document.write(“<br />”);
}
</script>
</body>
</html>
RESULT :
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
WHILE
<html>
<body>
<script type=”text/javascript”>
var i=0;
while (i<=10)
{
document.write(“The number is ” + i);
document.write(“<br />”);
i=i+1;
}
</script>
</body>
</html>
RESULT :
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
JAVAS BREAK dan CONTINUE
BREAK:
<html>
<body>
<script type=”text/javascript”>
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write(“The number is ” + i);
document.write(“<br />”);
}
</script>
</body>
</html>
RESULT :
The number is 0
The number is 1
The number is 2
CONTINUE
<html>
<body>
<script type=”text/javascript”>
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write(“The number is ” + i);
document.write(“<br />”);
}
</script>
</body>
</html>
RESULT :
The number is 0
The number is 1
The number is 2
The number is 4 // langsung ke 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
kesempatan kali ini adalah sebagai Berikut :
<html>
