Bab-1 Pengenalan JavaScript
Bab-1 Pengenalan JavaScript
[email protected]
[email protected]
Line/Telegram: 081221480577
1.1.JavaScript
Java Script adalah bahasa script yang berdasar pada objek yang memperbolehkan
pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen
HTML. Dimana objek tersebut dapat berupa suatu dokumen, URL, windows, frame
form, button atau item lain yang semuanya itu mempunyai properti yang saling
berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan
atribut lain.
1.2.Memulai JavaScript
Untuk dapat memulai dan menjalankan program JavaScript, ada dua perangkat lunak
yang diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah pengolah
kata yang menghasilkan file dalam format ASCII murni. Bila Anda adalah pengguna
Windows, Anda bisa menggunakan Notepad,Wordpad atau menggunakan
Notepad++. Selain itu browser web yang akan anda gunakan harus mendukung
JavaScript, Anda dapat menggunakan Chrome, Firefox, Internet Explorer, Opera
ataupun browser lainnya yang mendukung JavaScript.
JavaScript sebagai bahasa pemrograman yang berjalan di atas browser harus di tulis di
dalam HTML. Ada empat cara penulisan javascript pada HTML.
1. Tag <script>
Cara umum yang dipakai adalah menuliskanya dalam tag <script>. Tag <script> bisa
dibuat di dalam tag <head>, maupun di dalam tag <body>.
Menulis ke dalam output HTML menggunakan document.write ().
Contoh penulisan Java Script
NamaFile:js1.html
<html>
<title>Penulisan Javascript</title>
<script>
document.write("ini kode Javascript");
</script>
</html>
<html>
<h2>Penulisan dengan innerHTML</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Belajar Java Script";
</script>
</html>
Gambar22. Menampilkan Teks dengan innerHTML
2. File Eksternal
Jika tidak ingin kode Javascript bercampur dengan HTML, bisa menuliskannya pada file
terpisah. Caranya, adalah dengan menyimpannya pada sebuah file yang berekstensi .js,
misalnya isinya sebagai berikut.
// file-eksternal.js
alert("Kode Javascript dari File Eksternal");
Kemudian, kita perlu menghubungkan file eksternal tersebut dengan file HTML. Caranya,
gunakan tag <script> dengan atribut src untuk menentukan lokasi file Javascriptnya.
<html>
<title>Penulisan dengan external Javascript</title>
<script src="file-eksternal.js">
</script>
</head>
</html>
3. Atribut Event
Cara atribut event ini sering digunakan untuk memanggil fungsi pada event terentu. Misalnya
ketika suatu elemen diklik, maka jalankan fungsi Javascript.
Selain event onclick ada juga event-event yang lain, seperti onsubmit, onload,
ondoubleclick, onmouseover, onmouseout, dsb.
4. URL
Cara penulisan Javascript pada URL, cara ini jarang digunakan, namun kita juga perlu
mengetahuinya. Penulisan Javascript pada URL menggunakan protokol Javascript. Misal,
cobalah untuk menuliskan kode seperti ini pada URL browser.
Dari ke empat cara penulisan JavaScript tadi diatas, gunakanlah yang menurut anda lebih
mudah dalam penggunaanya.
1.3.Program JavaScript
Pada bagian ini, akan diberikan contoh program untuk menampilkan teks sederhana kelayar
monitor.
Namafile:js3.html
<script>
document.write("<font size=8><center>");
document.write("SELAMAT DATANG DI JAVASCRIPT <br>");
document.write("Contoh sederhana menampilkan teks<br>");
document.write("Dengan menggunakan JavaScript<br>");
</script>
Namafile:js4.html
<script>
document.write("<center>");
document.write("<h1><font color=blue>UNIVERSITAS KOMPUTER INDONESIA</h1>");
document.write("<h2><font color=red>Prodi Ilmu Komunikasi</h2><hr>");
document.write("<h3><font color=orange>JL.DIPATIUKUR 112 BANDUNG<h2><br>");
document.write("</center>");
</script>
1.4. Komentar
Sama seperti bahasa pemrograman yang lainnya, JavaScript juga menyediakan fasilitas
untuk menuliskan komentar, komentar ini beguna bila nantinya Anda atau orang lain
membaca suatu program.
Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitu dengan
menuliskan komentar setelah tanda garis miring dua kali, contoh:
<form>
<input type="button" value="Proses" onClick="alert('Anda telah MengClick Tombol Proses')">
</form>
Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu. Kita telah membuat
form dan sebuah tombol (ini merupakan bahasa HTML standard) . Bagian yang baru adalah
onClick="alert('Anda telah MengClick Tombol Proses')" yang berada di dalam tag <input>.
Inilah yang mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi jika terjadi event
Click, komputer akan mengeksekusi alert(''Anda telah MengClick Tombol Proses''), yang
merupakan kode JavaScript.
alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung anda dapat
menentukan string yang akan muncul pada window yang dimaksud.
Satu hal yang mungkin membingungkan: pada perintah document.write() kita
menggunakan double quotes (") dan pada alert() kita menggunakan juga single quotes ('),
mengapa? Pada contoh ini kita menuliskan onClick="alert('Ya')", kita gunakan keduanya
(double dan single quote) . Jika kita tulis onClick="alert("Ya")" maka komputer akan
bingung mana yang menjadi bagian event-handler onClick dan mana yang bukan. Urutan
penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Ya")'.
Ada banyak event-handler lain yang bisa kita gunakan. Selengkapnya lihat pada referensi
JavaScript.
1.6. Function
Pada dasarnya function merupakan suatu cara yang dapat anda gunakan untuk menyatukan
beberapa perintah
Fungsi Tanpa Parameter
Berikut merupakan contoh sebuah fungsi sederhana untuk menampilkan teks.
<script>
function menampilkan_teks()
{
document.write("Contoh Fungsi Menggunakan<br>");
document.write("Java Script<br>");
}
menampilkan_teks();
</script>
Gambar 1.6.Penggunaan Fungsi
Function dapat pula dikombinasikan dengan event-handler seperti pada contoh berikut ini:
<script>
function penjumlahan(x,y) {
var result = x + y;
alert(result);
}
penjumlahan(10,5);
</script>
<script>
function kali(a,b){
hasilkali = a * b;
return hasilkali;
}
// memanggil fungsi
var nilai1 = 20;
var nilai2 = 5;
var hasilperkalian = kali(nilai1, nilai2);
document.write(hasilperkalian);
</script>
Gambar 1.7.Fungsi yang mengembalikan nilai
1.8.1.Tipe Numerik
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan
bulat dan bilangan real.
Untuk bilangan bulat, Anda bisa merepresentasikan dengan basis desimal, oktal, atau
heksadesimal.
Contoh:
var A = 100;
var A = 0x2F;
Untuk pendeklarasian tipe bilangan real, Anda bisa menggunakan tanda titik atau
notasi ilmiah (notasi E).
Contoh:
var a = 123.567
var b = 1.234567E+3
1.8.2. Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string
diantara tanda tunggal (‘) atau tanda petik ganda (”);
Contoh:
var A = ‘Ini pendeklarasian String’;
var C = “Ini juga string “;
1.8.3.Tipe Boolean
Tipe Boolean hanya mempunyai nilai True atau false. Tipe ini biasanya digunakan
untuk mengecek suatu kondisi atau keadaan.
Contoh
Var X = (Y>90);
Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akan bernilai
True.
1.9. Operator
Operator pada JavaScript dibagi menjadi enam, yaitu
Aritmetik
Pemberian nilai (Assign)
Pemanipulasian bit (bitwise)
Pembanding
Logika
String
Operator Keterangan
& Bit AND
| Bit OR
^ Bit XOR
~ Bit NOT
<< Geser ke kiri
>> Geser ke kanan
>>> Geser kekanan dengan diisi nol
<script>
var A = 12; // A = 1100b
var B = 10; // B = 1010b
var C = A & B
/*maka akan dihasilkan bilangan seperti berikut:
1100b
1010b AND 1000b
*/
document.write("C:",C,"<br>");
var A = 12;
var C = A << 2;
var D = A>>1
document.write("A:",A,"<br>");
document.write("B:",B,"<br>");
document.write("C:",C,"<br>");
document.write("D:",D,"<br>");
</script>
Operator Keterangan
&& Operator logika AND
|| Operator logika OR
! Operator logika NOT
Contoh:
var A = true;
var B = false;
var C = A && B; //false
var D = A || B; //true
var E = !A; // false
1.9.6. Operator String
Selain operator pembanding, operan bertipe string pada JavaScript juga mengenal
satu operator lagi yang dinamakan penggabungan. Operator ini digunakan untuk
menggabungkan beberapa string menjadi sebuah string yang lebih panjang.
Contoh:
Nama = “Java” + ” Script”;
Akan menghasilkan “JavaScript” pada variabel Nama
Penggunaan Operator String
<script>
document.writeln("<h1>Operasi Aritmetika </h1><pre>");
var A = "100";
var B = "200";
var C = 300;
var D = 400;
var E = A + B;
document.writeln('"100" + "200" = ' + E); E = B + C;
document.writeln('"200" + 300 = ' + E); E = C + D;
document.writeln(' 300 + 400 = ' + E);
</script>
Referensi:
*Aplikasi Internet Menggunakan HTML, CSS & Java Script, Taryana Suryana,
Elexmedia Komputindo