MODUL 5

JAVASCRIPT:
DASAR, VARIABEL, & FUNGSI
RINGKASAN
Setelah Anda berlatih dan menguasai segi tampilan dari web menggunakan HTML dan CSS, sudah
saatnya Anda berlatih untuk mengenal pemrgraman web yang sebenarnya, yaitu pemrgraman
skrip! Mulai dari tahap ini Anda akan bela"ar #a$aS%ript sebagai skrip dasar yang dikenal semua
brwser &skrip pada sisi %lient'! Anda tidak akan langsung melmpat bela"ar skrip dari sisi ser$er,
karena skrip dari sisi ser$er akan selalu memaksa Anda untuk menggunakan satu prduk tertentu
&AS(, C), (H(, dan lain*lain', dan biasanya Anda akan men"adi +anatik pada satu prduk sa"a tanpa
mengetahui kemampuan prduk lain! Anda "uga tidak akan bela"ar bahasa pemrgraman #a$a
se%ara khusus, karena #a$a +kusnya adalah prtabilitas, bukan pada web sa"a! Disamping
#a$aS%ript, bilamana waktu memungkinkan Anda nantinya "uga akan berlatih menggunakan
,-S%ript &salah satu anggta keluarga ,isual -asi% yang men%akup ,-, ,-S%ript, ,-A.ma%r, AS(,
,-!net, dan AS(!net'!
Operatr Aritmetika
Operator Descrpto! E"a#p$e Res%$t
/ Additin 012
0/2
3
* Subtra%tin 012
5*0
4
5 Multipli%atin 013
055
26
. Di$isin 75.5
5.2
4
2!5
8 Mdulus &di$isin remainder' 582
7689
7682
7
2
6
// :n%rement 015
0//
01;
** De%rement 015
0**
013
Operatr (enun"ukan
Operator E"a#p$e Is T&e Sa#e As
1 01y 01y
/1 0/1y 010/y
*1 0*1y 010*y
51 051y 0105y
.1 0.1y 010.y
81 081y 0108y
Operatr (erbandingan
Operator Descrpto! E"a#p$e
11 is e<ual t 5119 returns +alse
=1 is nt e<ual 5=19 returns true
> is greater than 5>9 returns +alse
? is less than 5?9 returns true
>1 is greater than r e<ual t 5>19 returns +alse
?1 is less than r e<ual t 5?19 returns true
Operatr Lgika
Operator Descrpto! E"a#p$e
@@ and 01;
y14
&0 ? 76 @@ y > 7' returns true
AA r 01;
y14
&0115 AA y115' returns +alse
= nt 01;
y14
0 =1 y returns true
LATI'AN
Sederhana sa"a, agar Anda mau membiasakan diri dengan #a$aS%ript, maka Anda harus banyak
berlatih mulai dari yang paling dasar! -uatlah semua %nth di bawah ini, "alankan untuk melihat
hasilnya, dan lakukan mdi+ikasi untuk lebih mengenal dan mengetahui kegunaan skrip yang baru
Anda buat!
() *e!%$s+a! te+s
?html>
?bdy>
?s%ript type1Bte0t."a$as%riptB>
d%ument!write&BHell Crld=B'
?.s%ript>
?.bdy>
?.html>
,) *e#-or#at te+s .e!/a! ta/ 'T*L
?html>
?bdy>
?s%ript type1Bte0t."a$as%riptB>
d%ument!write&B?h7>Hell Crld=?.h7>B'
?.s%ript>
?.bdy>
?.html>
0) Ja1aScrpt 2a!/ .$eta++a! pa.a 3a/a! 'EAD
?html>
?head>
?s%ript type1Bte0t."a$as%riptB>
+un%tin message&'
D
alert&BThis alert b0 was %alled with the nlad e$entB'
E
?.s%ript>
?.head>
?bdy nlad1Bmessage&'B>
?.bdy>
?.html>
4) Ja1aScrpt 2a!/ .$eta++a! pa.a 3a/a! BOD5
?html>
?head>
?.head>
?bdy>
?s%ript type1Bte0t."a$as%riptB>
d%ument!write&BThis message is written when the page ladsB'
?.s%ript>
?.bdy>
?.html>
6) Ja1aScrpt e+ster!a$
?html>
?head>
?.head>
?bdy>
?s%ript sr%1B000!"sB>
?.s%ript>
?p>
The a%tual s%ript is in an e0ternal s%ript +ile %alled B000!"sB!
?.p>
?.bdy>
?.html>
7) De+$aras 1ara3e$, #e#3er !$a, .a! #e!a#p$+a!!2a
?html>
?bdy>
?s%ript type1Bte0t."a$as%riptB>
$ar name 1 BHegeB
d%ument!write&name'
d%ument!write&B?h7>B/name/B?.h7>B'
?.s%ript>
?p>This e0ample de%lares a $ariable, assigns a $alue t it, and then displays the
$ariable!?.p>
?p>Then the $ariable is displayed ne mre time, nly this time as a heading!?.p>
?.bdy>
?.html>
8) F%!/s
?html>
?head>
?s%ript type1Bte0t."a$as%riptB>
+un%tin my+un%tin&'
D
alert&BHFLLOB'
E
?.s%ript>
?.head>
?bdy>
?+rm>
?input type1BbuttnB
n%li%k1Bmy+un%tin&'B
$alue1BCall +un%tinB>
?.+rm>
?p>-y pressing the buttn, a +un%tin will be %alled! The +un%tin will alert a message!?.p>
?.bdy>
?.html>
9) F%!/s .e!/a! ar/%#e!
?html>
?head>
?s%ript type1Bte0t."a$as%riptB>
+un%tin my+un%tin&t0t'
D
alert&t0t'
E
?.s%ript>
?.head>
?bdy>
?+rm>
?input type1BbuttnB
n%li%k1Bmy+un%tin&GHellG'B
$alue1BCall +un%tinB>
?.+rm>
?p>-y pressing the buttn, a +un%tin with an argument will be %alled! The +un%tin will alert
this argument!?.p>
?.bdy>
?.html>
:) F%!/s .e!/a! ar/%#e! ;$a/<
?html>
?head>
?s%ript type1Bte0t."a$as%riptB>
+un%tin my+un%tin&t0t'
D
alert&t0t'
E
?.s%ript>
?.head>
?bdy>
?+rm>
?input type1BbuttnB
n%li%k1Bmy+un%tin&GHd Mrning=G'B
$alue1B:n the MrningB>
?input type1BbuttnB
n%li%k1Bmy+un%tin&GHd F$ening=G'B
$alue1B:n the F$eningB>
?.+rm>
?p>
Chen yu %li%k n ne + the buttns, a +un%tin will be %alled! The +un%tin will alert
the argument that is passed t it!
?.p>
?.bdy>
?.html>
(=) F%!/s 2a!/ #e!/e#3a$+a! s%at% !$a
?html>
?head>
?s%ript type1Bte0t."a$as%riptB>
+un%tin my)un%tin&'
D
return &BHell, ha$e a ni%e day=B'
E
?.s%ript>
?.head>
?bdy>
?s%ript type1Bte0t."a$as%riptB>
d%ument!write&my)un%tin&''
?.s%ript>
?p>The s%ript in the bdy se%tin %alls a +un%tin!?.p>
?p>The +un%tin returns a te0t!?.p>
?.bdy>
?.html>
(() F%!/s .e!/a! ar/%#e! 2a!/ #e!/e#3a$+a! s%at% !$a
?html>
?head>
?s%ript type1Bte0t."a$as%riptB>
+un%tin ttal&numberA,number-'
D
return numberA / number-
E
?.s%ript>
?.head>
?bdy>
?s%ript type1Bte0t."a$as%riptB>
d%ument!write&ttal&2,4''
?.s%ript>
?p>The s%ript in the bdy se%tin %alls a +un%tin with tw arguments, 2 and 4!?.p>
?p>The +un%tin returns the sum + these tw arguments!?.p>
?.bdy>
?.html>