MODUL 12 PENGANTAR JAVASCRIPT

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan Javascript yang digabungkan dengan tag HTML.

12.1 Sekilas Tentang Javascript

Javascript adalah bahasa pemrograman yang bersifat client side, digunakan pada bahasa pemrograman web. Kode pemrograman javascript dapat disisipkan kedalam halaman HTML. Pada awalnya, JavaScript mulai diperkenalkan di browser Netscape Navigator 2. Namun waktu itu namanya bukan JavaScript, namun LiveScript. Mengingat pada waktu itu teknologi Java sedang tren, maka pihak Netscape memutuskan untuk mengganti namanya menjadi JavaScript, yang sepertinya nama tersebut lebih marketible dibandingkan LiveScript. Selanjutnya pihak Microsoft (rival Netscape) pun mulai ikut-ikutan memfasilitasi web browser buatannya, ‘Internet Explorer’, supaya bisa mendukung JavaScript. Namun mungkin karena gengsi, pihak Microsoft memberi nama bahasa yang lain, yaitu Jscript.

12.2 Cara  Menulis Javascript

Ada dua jenis bagaimana javascript dibuat, pertama javascript ditulis dalam file yang terpisah dengan HTML, kedua javascript ditulis langsung dalam HTML. Javascript yang ditulis diluar HTML disebut Eksternal Javascript dengan ektensi file .js. Dalam HTML, penulisan script diawali dengan <script> … </script>. Script yang akan dijalankan harus diletakkan diantara <script> dan </script>. Tag <script> memiliki beberapa atribut, namun yang terpenting adalah atribut language dan type.

Karena Javascript bukan satu-satunya bahasa scripting, maka  sangatlah
perlu   untuk  memberitahukan kepada browser   bahwa   bahasa   script   yang
digunakan adalah Javascript dan    selanjutnya browser    akan    menjalankan
modul pendukung Javascript untuk   memprosesnya. Sehingga   untuk
Javascript, pada  tag <script> perlulah ditambahkan atribut berikut ini:

<script language=”JavaScript” type=”text/javascript”>

Script dapat diletakkan di tag <body> dan atau di tag <head> pada bagian halaman HTML.

Contoh 1

Pada contoh 2 berikut, script di tulis pada bagian <body>

Contoh 2

12.3 Tipe Data dan Variabel pada Javascript

Layaknya bahasa pemrograman, javascript juga memiliki tipe data dan variabel. Variabel pada javascript digunakan untuk menyimpan informasi sementara dan nilainya dapat berubah-ubah. Sedangkan tipe data, terkait dengan jenis data atau nilai yang disimpan dalam variabel.

Deklarasi Variabel

Dalam javascript, setiap kali akan menggunakan variabel, langkah pertama yang harus dilakukan adalah mendeklarasikan keberadaan nama variabel. Hal ini perlu dilakukan karena dengan adanya deklarasi nama variabel, komputer akan menyediakan beberapa bagian memori untuk menyimpan nilai pada nama variabel tersebut. Untuk mendeklarasikan variabel digunakan kata var.

Dalam mendeklarasikan nama variabel ada beberapa aturan yang harus diperhatikan, yaitu :

  1. Nama variabel harus dimulai dengan huruf
  • Nama variabel  boleh dimulai dengan $ dan _
  • Nama variabel adalah case sensitive (memperhatikan besar kecilnya huruf).
  • Tidak  boleh  menggunakan  Reserved  Word  atau  kata  tercadang  sebagai  nama

variabel. Kata tercadang adalah kata yang sudah built in dalam javascript yang sudah bermakna khusus. Penggunaan kata tercadang ini akan mengakibatkan error.

Contoh 1

var namakota;

namakota=“Padang”;

Contoh 2

var namakota=“Padang”;

Contoh 3

var namakota=“Padang”, propinsi=“Sumatera Barat”, kode=”1”;

Pada contoh 1 di atas, dideklarasikan variabel namakota. Pada awal pendeklarasian, nilai dari variabel namakota adalah null (kosong). Kemudian variabel namakota diberi nilai Malang. Untuk memberikan nilai pada suatu variabel digunakan tanda petik dua

(“)  apabila  tipe  datanya  berupa  string.  Pada  contoh  2  mendeklarasikan  variabel

namakota yang sekaligus memberi nilai pada variabel namakota. Contoh 3 di atas

mendeklarasikan   beberapa   variabel   sekaligus.   Untuk   mendeklarasikan    beberapa

variabel  digunakan  tanda koma (,) untuk memisahkan variabel satu dengan  yang

lainnya.

Tipe Data

Tipe   data  pada  javascript   meliputi   :   String,   Integer,  Float,  Array,  Object  dan

Booleans.

  • Tipe data string adalah data yang memuat karakter, misalnya “Padang”. String adalah sembarang text yang ada di dalam tanda petik, baik petik ganda (“) maupun petik tunggal (‘).

·     Tipe data integer dan float merupakan tipe data numerik.

  • Dalam mendeklarasikan tipe data object digunakan tanda kurung kurawal (, … – ). Setiap property dalam tipe data object dipisahkan dengan menggunakan tanda koma (, ).
  • Tipe data Booleans terdiri dari dua nilai, yaitu true atau false. Berikut beberapa contoh penggunaan tipe data pada javascript.

Contoh 4

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

var propinsi=’Sumatera Barat’;         // tipe data string

var y=90;                                              // tipe data integer

var e=3.14;                                           // tipe data float

var y=123;                                              // 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=[“PNP”,”UNAND”,”UI”,”ITB”,”ITN”];

Contoh 6

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

Operator Aritmatika

Operator aritmatika digunakan untuk melakukan operasi aritmatika antara variabel dan atau nilai. Misal diberikan y = 5, tabel berikut menjelaskan tentang operator aritmatika.

Operato Deskripsi Contoh Nilai x Nilai y
+ Penjumlahan x=y+2 7 5
Pengurangan x=y – 2 3 5
* Perkalian x=y*2 10 5
/ Pembagian x=y/2 2.5 5
% Modulus (Sisa x=y%2 1 5
++ Increment x 6 6
x 5 6
Decrement x 4 4
x 5 4

Operator Pemberian Nilai

Operator pemberian nilai digunakan untuk memberikan nilai pada variabel. Dalam contoh berikut, diberikan x = 10, dan y = 5. Tabel berikut menjelaskan operator pemberian nilai.

Operator Contoh Sama dengan hasi
= x=y   x=
+= x+=y x=x x=1
-= x -=y x=x – y x=
*= x*=y x=x x=5
/= x/=y x=x/ x=
%= x%=y x=x%y x=

Hirarki Perhitungan

Urutan perhitungan dalam JavaScript sama dengan urutan perhitungan dalam Turbo Pascal atau Turbo C, yaitu yang dalam kurung terlebih dahulu, barulah perkalian dan pembagian, kemudian penambahan dan pengurangan.

Contoh:  
·  2+3*6 =2+18=20

Kenapa bisa begitu? Kenapa tidak 30? Perkalian dan pembagian dikerjakan terlebih dahulu, barulah penambahan dan pengurangan. Untuk lebih jelasnya sebagai berikut: 2+3*6 = 2 + 18, selanjutnya 2 ditambah dengan 18 sama dengan 20.

  • (2+3)*6=5*6=30

Yang ini baru 30, yang dikerjakan yang di dalam kurung terlebih dahulu: 2+3 = 5, selanjutnya 5 * 6 = 30. Sebagai contoh program, lihatlah pasal berikutnya

Operator + yang digunakan pada tipe data String

Operator + juga dapat digunakan untuk menambahkan variabel bertipe data string atau nilai text.

Contoh 7

//untuk menambahkan dua atau lebih variabel tipe String, gunakan operator +

Var txt1=”Selamat Datang”;

Var txt2=”Di Jurusan Teknologi Informasi”;

txt3=txt1+” “+txt2;

Hasil dari script di atas adalah : Selamat Datang Di Jurusan Teknologi Informasi

Contoh 8

//menambahkan String dan Bilangan

x=5+5;

y=”5″+5;

z=”angka “+5;

Hasil dari script di atas adalah :

10

55

angka 5

Operator Pembanding

Operator          pembanding    digunakan       dalam  pernyataan       logika  untuk    menentukan

kesamaan atau perbedaan diantara nilai-nilai. Diberikan nilai X = 5, tabel dibawah ini menjelaskan operator pembanding :

Deskripsi Pembanding Balikan
Sama dengan X==8 False
  X==5 True
Sama persis dengan (nilai dan tipe data) X===”5” False
  X===5 True
Tidak sama dengan X!=8 True
Tidak sama dengan (nilai atau tipe data) X!==”5” True
  X!==5 False
Lebih besar dari X>8 False
Lebih kecil dari X<8 True
Lebih besar sama dengan X>=8 False
Lebih kecil sama dengan X<=8 True

Operator Logika

Operator logika digunakan untuk menunjukkan nilai kebenaran antara beberapa variabel atau beberapa nilai. Diberikan nilai X = 6 dan Y = 3, table dibawah menjelaskan operator logika.

Operator Deskripsi Pembanding Balikan
&& Dan (X<10&&Y>1) True
|| Atau (X==5||Y==5) False
! Negasi/Ingkaran !(x==y) True

Kelebihan dan Kekurangan Javascript

Kelebihan Javascript

  • Ukuran file kecil, Script dari javascript memiliki ukuran yang kecil sehinggaketika web yang memiliki javascript ditampilkan di browser maka akses

tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web yang memiliki script java. Hal ini juga sangat berkepentingan dengan daya kerja server. Semakin kecil space suatu web yang disimpan dalam suatu server maka daya kerja server ketika di browsing oleh user di internet akan tidak terlalu berat, Mudah untuk dipelajari

  • Terbuka, Javascript tidak terikat oleh hardware maupun software tertentubahkan system operasi seperti windows maupun unix. Karena ia bersifat terbuka, maka ia dapat dibuat maupun di baca di semua jenis komputer.

Kekurangan Javascript

  1. Script tidak terenkripsi, karena javascript bersifat client side, maka script yangkita buat di text editor dan telah dijadikan web di server, ketika user me-request web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya dari sourcenya.
  2. Kemampuan terbatas, Walaupun javascript mampu membuat bentuk webmenjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.
  • Keterbatasan Objek, Javascript tidak mampu membuat kelas-kelas yang bisamenampung objek-objek tambahan seperti java karena javascript teleh memiliki objek yang built-in pada sturktur bahasanya.

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan.

1.   Alert :

2. Variabel :

3.    Operator Aritmatika :

4.   Konversi Tipe Data

5.   Tipe Data Array :

REFERENSI LANJUTAN :

  1. https://syaifulhamzah.files.wordpress.com/2013/03/dasar-javascript.pdf
  2. http://tito.pandubrahmanto.com/web-development/tutorial-belajar-javascript-array/
  3. http://www.w3schools.com/js/
  4. http://www.tutorialspoint.com/javascript/
  5. http://www.codecademy.com/en/tracks/javascript
  6. http://htmldog.com/guides/javascript/