Pengantar Javascript Part : 1 | Catatan Kecil

(1)

PENGANTAR JAVASCRIPT.

Sekilas Te ta g Javas ript

Ja as ipt adalah ahasa pe og a a a g popula . Ja as ipt adalah ahasa pe og a a a g digu aka u tuk HTML da WEB, u tuk “e e , PC, Laptop, ta let da le ih a ak lagi. Kode pe og a a ja as ipt dapat disisipka kedala hala a HTML. Pada a al a, Ja a“ ipt ulai dipe ke alka di

o se Nets ape Na igato . Na u aktu itu a a a uka Ja a“ ipt, a u Li e“ ipt. Me gi gat pada aktu itu tek ologi Ja a seda g pa as-pa as a atau seda g t e , aka pihak Nets ape

e utuska u tuk e gga i a a a e jadi Ja a“ ipt, a g sepe i a a a te se ut le ih a kei le di a di gka Li e“ ipt. “ela jut a pihak Mi osot i al Nets ape pu ulai ikut-ikuta e fasilitasi e o se uata a, I te et E plo e , supa a isa e duku g Ja a“ ipt. Na u u gki ka e a ge gsi, pihak Mi osot e e i a a ahasa a g lai , aitu Js ipt. Mulai saat itu, Nets ape da Mi osot ulai e lo a-lo a e ge a gka ahasa te se ut dala e si a g

e lai a . Oleh se a pe sai ga itulah te kada g suatu Ja a“ ipt u gki isa eke ja de ga aik di o se Nets ape, tapi idak de ikia hal a di IE, egitu pula se alik a.

Bagai a a Me ulis Javas ript

Ada dua je is agai a a ja as ipt di uat, pe ta a ja as ipt ditulis dala ile a g te pisah de ga HTML, kedua ja as ipt ditulis dala HTML. Ja as ipt a g ditulis dilua HTML dise ut Ekste al Ja as ipt de ga ekte si ile .js. Dala HTML, pe ulisa s ipt dia ali de ga <s ipt> … </s ipt>. “ ipt a g aka dijala ka ha us diletakka dia ta a <s ipt> da </s ipt>. Tag <s ipt> e iliki e e apa at i ut, a u a g te pe i g adalah at i ut la guage da t pe. Ka e a Ja as ipt uka satu-satu a ahasa s ipi g, aka sa gatlah pe lu u tuk e e itahuka kepada o se ah a ahasa s ipt a g digu aka adalah Ja as ipt da sela jut a o se aka e jala ka odul pe duku g Ja as ipt u tuk e p oses a. “ehi gga u tuk Ja as ipt, pada tag <s ipt> pe lulah dita ahka at i ut e ikut i i:

“ ipt dapat diletakka di tag < od > da atau di tag <head> pada agia hala a HTML.

Contoh 1

(2)

Pada o toh e ikut, s ipt di tulis pada aga < od >

document.write(“<h1> Belajar Javascript</h1>”);

</script> ...

</body> </html>

Pe ulisa Fu gsi pada Javas ript

Pe ulisa javas ript di dala tag <head>

Dala o toh e ikut, s ipt ja a diletakka di tag <head> pada hala a HTML. Fu gsi aka dipa ggil

{

(3)

document.getElementById("coba").innerHTML="Belajar Fungsi Javascript"; }

</script> </body> </html>

Me

eri Ko e tar pada Javas ript.

Ko e ta pada suatu s ipt idak aka dieksekusi oleh Ja as ipt. Ko e ta dita ahka pada s ipt u tuk e e ika pe jelasa s ipt atau e uat sk ip idak dieksekusi. U tuk e e ika ko e ta a g ha a satu a is gu aka //.

Be ikut o toh agai a a e e i ko e ta si gle.

Contoh 5

// Write to a heading:

document.getElementById("myH1").innerHTML="Selamat datang di Homepage Saya"; // Write to a paragraph:

document.getElementById("myP").innerHTML="Ini adalah paragraph saya.";

Contoh 6

var x=5; // mendeklarasikan x dan memasangkannya dengan 5 var y=x+2; // mendeklarasikan y dan memasangkannya dengan x+2

U tuk e e ika ko e ta le ih da i satu a is, gu aka /* da */. Jadi s ipt a g te letak di a ta a /* da */ aka dia ggap se agai ko e ta . Be ikut o toh e e i ko e ta a g le ih da i satu a is.

Co toh

/*

Kode berikut akan ditulis ke heading dan paragraph. Dan akan menampilkan halaman homepage

*/

(4)

TIPE DATA DAN VARIABEL

Tipe Data da Varia el pada Javas ript

Lazi a ahasa pe og a a , ja as ipt e iliki ipe data da a ia el. Va ia el pada ja as ipt sepe i kotak atau adah a g digu aka u tuk e i pa i fo asi a g se a iasa dapat diload. “eda gka ipe data te kait de ga je is data atau ilai a g disi pa dala a ia el.

Deklarasi Varia el

Dala ja as ipt, seiap kali aka e ggu aka a ia el, la gkah pe ta a a g ha us dilakuka adalah e dekla asika ke e adaa a a a ia el. Hal i i pe lu dilakuka ka e a de ga ada a dekla asi a a a ia el, o pute aka e ediaka e e apa agia e o i u tuk e i pa ilai pada a a a ia el te se ut. U tuk e dekla asika a ia el digu aka kata var. Dala e dekla asika a a a ia el ada e e apa atu a a g ha us dipe haika , aitu :

. Na a a ia el ha us di ulai de ga hu uf . Na a a ia el juga dapat di ulai de ga $ da _

. Na a a ia el adalah asesensiive e pe haika esa ke il a hu uf .

. Ja ga e ggu aka Reserved Word atau kata te ada g se agai a a a ia el. Kata te ada g adalah kata a g sudah uilt in dala ja as ipt a g sudah e ak a khusus. Pe ggu aa kata te ada g i i aka e gaki atka error.

Contoh 1

var namakota;

namakota=“Malang”;

Contoh 2

var namakota=“Malang”;

Contoh 3

var namakota=“malang”, propinsi=“Jawa Timur”, kode=”3”, x=6.23;

(5)

e dekla asika e e apa a ia el sekaligus. U tuk e dekla asika e e apa a ia el digu aka ta da ko a , u tuk e isahka a ia el satu de ga a g lai a.

Tipe Data

Tipe data pada ja as ipt elipui : “t i g, I tege , Float, A a , O je t da Boolea s. Tipe data st i g adalah data a g e uat ka akte , isal a Mala g . “t i g adalah se a a g te t a g ada di dala ta da peik, aik peik ga da aupu peik tu ggal . Tipe data i tege da loat e upaka ipe data u e ik. Dala e dekla asika ipe data o je t digu aka ta da ku u g ku a al { … } . “eiap p ope t dala ipe data o je t dipisahka de ga e ggu aka ta da ko a , . Tipe data Boolea s te di i da i dua

ilai, aitu t ue atau false. Be ikut e e apa o toh pe ggu aa ipe data pada ja as ipt. Contoh 4

var namakota=“Malang”; // tipe data string

var propinsi=’Jawa Timur’; // tipe data string

var x1=34; // tipe data integer

var x2=3.14; // tipe data float var y=123e4; // tipe data integer var x=true; // tipe data boolean

Contoh 5

//berikut beberapa cara mendeklarasikan Array var mobil=new Array();

mobil[0]=”Toyota”; mobil[1]=”Daihatsu”; mobil[2]=”Honda”;

var bulan=new Array(“Januari”,”Febuari”,”Maret”,”April”);

var kampus=[“UM”,”UNMUH”,”KANJURUHAN”,”UIN MAULANA MALIK”,”ITN”];

Contoh 6

var klien={nama:”Pamungkas”, sex:”Laki-Laki”, id:”5758”};

(6)

OPERATOR PADA JAVASCRIPT

Operator Arit aika

Ope ato a it aika digu aka u tuk elakuka ope asi a it aika a ta a a ia el da atau ilai. Misal di e ika = , ta el e ikut e jelaska te ta g ope ato a it aika.

Ope ato Desk ipsi Co toh Nilai Nilai

+ Pe ju laha = +

- Pe gu a ga = –

* Pe kalia = *

/ Pe agia = / .

% Modulus “isa agi = %

++ I e e t =++

= ++

-- De e e t =--

= --

Operator Pe

eria Nilai

Ope ato pe e ia ilai digu aka u tuk e e ika ilai pada a ia el. Dala o toh e ikut, di e ika = , da = . Ta el e ikut e jelaska ope ato pe e ia ilai.

Ope ato Co toh “a a de ga hasil

= = =

+= += = + =

-= -= = – =

*= *= = * =

/= /= = / =

(7)

Operator + ya g digu aka pada ipe data Stri g

Ope ato + juga dapat digu aka u tuk e a ahka a ia el e ipe data st i g atau ilai te t. Contoh 1

//untuk menambahkan dua atau lebih variabel tipe String, gunakan operator + txt1="Selamat Datang";

txt2="Di Jurusan Matematika"; txt3=txt1+” “+txt2;

Hasil dari script di atas adalah :

Selamat Datang Di Jurusan Matematika

Contoh 2

//menambahkan String dan Bilangan x=5+5;

y="5"+5;

z="angka "+5;

Hasil dari script di atas adalah :

10

55

angka 5

Operator Pe

a di g

Ope ato pe a di g digu aka dala pe ataa logika u tuk e e tuka kesa aa atau pe edaa dia ta a ilai- ilai. Di e ika ilai X = , ta el di a ah i i e jelaska ope ato pe a di g

Ope ato Desk ipsi Pe a di g Balika

== “a a de ga X== False

X== T ue

=== “a a pe sis de ga ilai da ipe data X=== False

X=== T ue

!= Tidak sa a de ga X!= T ue

!== Tidak sa a de ga ilai atau ipe data X!== T ue

X!== False

> Le ih esa da i X> False

< Le ih ke il da i X< T ue

Le ih esa sa a de ga X>= False

(8)

Operator Logika

Ope ato logika digu aka u tuk e u jukka ilai ke e a a a ta a e e apa a ia el atau e e apa ilai. Di e ika ilai X = da Y = , ta le di a ah e jelaska ope ato logika.

Ope ato Desk ipsi Pe a di g Balika

&& Da X < && Y > T ue

|| Atau X == || Y == False

! Negasi/I gka a ! == T ue

Operator Bersyarat

Ja as ipt juga e uat ope ato e s a at a g e e ika suatu ilai ke suatu a ia el e dasa ka ko disi a g sa a.

“ ta a :

NamaVariabel=(syarat)?nilai 1: nilai 2

Co toh :

<!DOCTYPE html> <html>

<body>

<p>Klik tombol untuk memeriksa usia</p>

Usia:<input id="usia" value="18" /> <p>Apakah Usianya mencukupi?</p>

function myFunction() {

var usia,periksa;

usia=document.getElementById("usia").value;

periksa=(usia<18)?"Terlalu Muda":"Usia memenuhi"; document.getElementById("coba").innerHTML=periksa; }

</script>

(9)

Prakiku : Javas ript Part

alert("blok script 1 sedang dijalankan"); </script>

<p>Paragraph 2</p>

document.bgColor = "RED";

alert("blok script 2 sedang dijalankan"); </script>

<title>Contoh Javascript</title> </head>

<body>

variabelku = "Hello"; // bertipe string alert(variabelku);

variabelku = 54321; // bertipe numerik alert(variabelku);

(10)

Laiha . Operator Arit aika

var bilPertama = 15; var bilKedua = 10;

hasil = bilPertama + bilKedua;

alert(hasil); // menampilkan hasil 15

hasil = bilPertama - bilKedua;

hasil = bilPertama * bilKedua;

hasil = bilPertama / bilKedua;

alert(hasil); // menampilkan hasil 1.5 var bilangan; var hasil;

bilangan = 5;

bilangan += 4; // ekuivalen dengan statement bilangan = bilangan + 4; alert(bilangan); // menampilkan 9

hasil = bilangan + 2 - 1 * 4; alert(hasil); // menampilkan 7 var harga = prompt("Masukkan harga mula-mula (Rp) : "); var hargaDiskon;

hargaDiskon = harga - 0.2 * harga;

document.write("Harga setelah didiskon : Rp. " + hargaDiskon); </script>

(11)

Laiha . Me gko versi Tipe Data

var teks = "2.3 adalah bilangan riil"; var bil1;

var bil2;

bil1 = parseFloat(teks); // konversi ke riil

document.write("Nilai dari bil1 = " + bil1 + "<br>");

bil2 = parseInt(teks); // konversi ke integer document.write("Nilai dari bil2 = " + bil2);

// menampilkan elemen array

document.write("mhs[0] = " + mhs[0] + "<br>"); document.write("mhs[2] = " + mhs[2] + "<br>"); document.write("mhs[1] = " + mhs[1] + "<br>");

// mengubah value elemen

mhs[1] = "Ari";

document.write("mhs[1] diubah menjadi " + mhs[1]);

(12)

Laiha . State e t

<!DOCTYPE html> <html>

<body>

<h1>Belajar Javascript</h1>

<p id=”paragraf">Ini adalah suatu paragraf</p> <div id="Div">Ini adalah div.</div>

<p>

<button type="button" onclick="myFunction()">Coba Javascript</button> </p>

function myFunction() {

document.getElementById("paragraf").innerHTML="Halo Semuanya"; document.getElementById("Div").innerHTML="Bagaimana Kabar And?"; }

</script>

<p>Ketika Anda mengklik "Coba Javascript", dua elemen akan berubah.</p>