Tutorial JavaScript

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

2 thoughts on “Tutorial JavaScript

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s