Agenda   • Pengenalan  JavaStript   • Peletakan  Script   • Tipe  Data   • Deklarasi  Variabel  &  Konstanta   • Operator   • Struktur  Kendali  dan  Fungsi     • Array  

•  Asal  mula  nama  JavaScript  adalah  LiveScript,  dikembangkan  pertama  kali     pada  tahun  1995  di  Netscape  CommunicaFons.   •  Hasil  kolaborasi  antara  Netscape  dan  Sun  (pengembang  bahasa   pemrograman  “Java” )  memberikan  nama  baru  “JavaScript” pada  tanggal   4  desember  1995.       •  Bahasa  ini  dikenali  pada  browser  Netscape  Navigator  mulai  versi  di  atas   2.0.  ,sedangkan  MicrosoR  melengkapi  Internet  Explorer  dengan  JavaScript     mulai  versi  3.0  ke  atas.   •  JavaScript  adalah  bahasa  skrip  yang  ditempelkan  pada  kode  HTML  dan   diproses  pada  sisi  klien,  sehingga  kemampuan  dokumen  HTML  menjadi   lebih  luas.   •  JavaScript  memungkinkan  untuk  memvalidasi  masukan-­‐masukan  pada  formulir   sebelum  dikirim  ke  server   •  JavaScript  dapat  mengimplementasi  permainan  interakFf    

•  Javascript  bergantung  kepada  browser(navigator)  yang  memanggil   halaman  web  yang  berisi  skrip  skrip  dari  Javascript  yang  terselip  di  dalam   dokumen  HTML.       •  Javascript  Fdak  memerlukan  kompilator  atau  penterjemah  khusus  untuk   menjalankannya  

3

Pengenalan  JavaScript  

PENGENALAN  JAVASCRIPT   JavaScript   merupakan   modifikasi   dari   bahasa   C++   dg  pola  menulisan  lebih  sederhana.   Beberapa  hal  penFng  yang  perlu  diperhaFkan:   •  Menggunakan blok awal { dan blok akhir } •  Sensitive case: Dalam deklarasi variabel membedakan huruf besar dan kecil •  E x t e n t i o n d a r i f i l e n y a u m u m n y a menggunakan .JS •  Sambungan baris dari baris sebelumnya menggunakan tanda \

5

Perbedaan  JavaScript  dan   Pemrograman  Java  

•  JavaScript  sendiri  merupakan  bahasa  yang  mudah  dipahami,  karena  memiliki   kemiripan  dengan  konsep  bahasa  pemrograman  visual,  maupun  Java  ataupun  C.     •  JavaScript  adalah  bahasa  yang  “case  sensi(ve” arFnya  membedakan  penamaan   variabel  dan  fungsi  yang  menggunakan  huruf  besar  dan  huruf  kecil.     •  SeperF  bahasa  Java  ataupun  C,  seFap  instruksi  dalam  JavaScript  diakhiri  dengan   karakter  >>k  koma  (;).  

PELETAKAN  SCRIPT   •  Stript   yang   diletakkan   antara   tag     dan   Eksekusi   script-­‐nya   dilakukan   dengan   event   onload  dalam  tag     •  Script   dan   diletakkan   pada   BODY   bukan   tag    langsung  tereksekusi  tanpa  event   •  Bentuk:   <Script Language=“JavaScript> Statements

Bentuk  skrip  dari  Javascript  dan     Membuat  Komentar  (Skrip  tidak  Tereksekusi)   •  Skrip  dari  JavaScript  terletak  di  dalam  dokumen  HTML.        <SCRIPT  language="Javascript">     letakkan  script  anda  disini         •  Pada  navigator  versi  lama,  sebelum  adanya  JavaScript,  Fdak  mengenal  tag  tersebut  dan  akan   melewatkannya  untuk  di  baca.  Untuk  itu  perlu  ditambahkan  tag  komentar  agar  skripnya  Fdak   dibaca  sebagai  skrip,  tetapi  di  baca  sebagai  komentar  dan  Fdak  akan  dieksekusi  sebagai   program.     <SCRIPT  language="Javascript">             •  Untuk  menulis  komentar  dalam  satu  baris  kita  gunakan  karakter  dobel  slash.        //  semua  karakter  di  belakang  //  >dak  akan  di  eksekusi     •  Untuk  menulis  komentar  yang  terdiri  dari  beberapa  baris  kita  gunakan  karakter  /*  dan  */            /*  Semua  baris  antara  2  tanda  tersebut  >dak  akan  di  eksekusi  oleh  kompilator  */    

Contoh:  Tanpa  Event   <SCRIPT LANGUANGE="JavaSript"> alert("Ini dipanggil dengan tanpa event onload")

Meletakkan  JavaScript  dalam  dokumen  HTML     •  Menggunakan  tag  <SCRIPT>  

   

         

    <TITLE>Contoh  Program  Javascript           <SCRIPT  language="Javascript">    
   alert("Hallo  !");    

//  -­‐-­‐>                

9

•  Tag  <SCRIPT>  diletakkan  diantara  bagian  kepala  dari  dokumen  HTML,  yaitu  bagian  antara  tag    dan  .  Pemanggilan  fungsi  JavaScript  (atau  disebut  juga  event)  diletakkan  di   bagian  badan  dokumen  HTML  atau  bisa  kita  sebut  diantara  tag    dan  .     •  Keterangan  tambahan  di  dalam  tag  <SCRIPT>  menunjukkan  jenis  bahasa  yang  digunakan  dan   versinya,  contohnya  “JavaScript“,  “JavaScript1.1“,“JavaScript1.2“ untuk  bahasa  JavaScript     •  Contoh  :  

Meletakkan  JavaScript  dalam  dokumen  HTML     •  Menggunakan  file  ekstern    

•  Menuliskan  kode  program  JavaScript  dalam  suatu  file  teks  dan  kemudian  file  teks          yang  berisi  kode  JavaScript  di  panggil  dari  dalam  dokumen  HTML  (khusus  Netscape                    mulai  versi  3  keatas).    

     <SCRIPT  LANGUAGE="Javascript"  SRC="url/file.js">    

 dimana  url/file.js  adalah  adalah  lokasi  dan  nama  file  yang  berisi  kode  JavaScript,  jika   perintah  tambahan  SRC  Fdak  disertakan  maka  tag  Script  akan  mencari  kode  yang   terletak  di  dalam  tag  Script.  

 

•  Melalui  event  tertentu   • 

Event  adalah  sebutan  dari  satu  acFon  yang  dilakukan  oleh  user,  contohnya  seperF   klik  tombol  mouse.      

                 

 

dimana  eventHandler  adalah  nama  dari  event  tersebut.      

Pemasukan  Data  

    <TITLE>Pemasukan  Data       <SCRIPT  LANGUAGE  =  "JavaScript">          

11

•  JavaScript  memiliki  mekanisme  yang  memungkinkan  pemakai  disuguhi  jendela  untuk   memasukkan  sederetan  masukan  setelah  pemakai  mengklik  tombol  OK,  maka  kode   dalam  JavaScript  akan  melakukan  serangkaian  proses.   •  Contoh  :  

Jendela  Peringatan  dan  Jendela  Kon@irmasi   <TITLE>Alert Box <SCRIPT LANGUAGE = "JavaScript">

•  Jendela Konfirmasi <TITLE>Konfirmasi <SCRIPT LANGUAGE = "JavaScript">

12

•  Jendela  Peringatan    

DEKLARASI  VARIABEL,   KONSTANTA   •  Ketentuan:   Ø  Dimulai  dengan  karakter   Ø  Penamaan  satu  kata   Ø  SensiFve  case   Ø  Maksimum  255  karakter   Ø  Unik   Ø  Dapat  langsung  diisi  dengan  nilainya  

Variabel  

•  Nama  variabel  harus  dimulai  oleh  satu  huruf  (huruf  besar  maupun   huruf  kecil)  atau  satu  karakter  ''_''.   •  Nama  variabel  bisa  terdiri  dari  huruf  huruf,  angka  angka  atau  karakter  _   dan  &  (spasi  kosong  Fdak  diperbolehkan).   •  Nama  variabel  Fdak  boleh  memakai  nama  yang  digunakan  dalam   reserved  program,  seperF  :  abstract,  boolean,  break,  byte,  if,   implements,  import,  in,  infinity,  instanceof,  int,  interface,  dll    

14

•  Variable  adalah  suatu  obyek  yang  berisi  data  data,  yang  mana   dapat  di  modifikasi  selama  pengeksekusian  program.     •  Aturan  pemberian  nama  variabel  :  

Contoh:   html> <script language="JavaScript"> var pesan="SELAMAT DATANG", nama=”Hasrul Bakri", alamat=”Hartaco Indah Blok IV AF/1", umur=20

document.write("

"+pesan+"

---

") document.write("

Saudara "+nama+"
") document.write("Yang tinggal di "+alamat+"
") document.write("Umur Anda adalah "+umur+" Th

")

Hasil  

Karakter  Khusus  JavaScript   Keterangan

Spesial Karakter

Backspace

\b

Form feed

\f

Newline

\n

Carriage return

\r

Tab

\t

Object  Oriented  dalam   JavaScript  

•  Dadalam  pemrograman  berorientasi  object   terdapat  ProperKes  dan  Methods  (terdiri   dari  sejumlah  instruksi)   Contoh: Pada objek document memuat properi gbColor dan methods write()

Contoh:   <SCRIPT LANGUAGE="JavaScript"> document.bgColor = "blue"; document.write(""); document.write("SELAMAT DATANG"); document.write("
di Dunia JavaScript"); document.write(""); document.write("
<marquee>”); document.write(SEMOGA SUKSES");

Hasil:  

OPERATOR   •  Operator  AritmaFka  

penjumlahan Pengurangan perkalian dan pembagian modulus increment decrement

+ * / % ++ --

Contoh:  

Operator Aritmatika

<script language="JavaScript"> var x=10; var y=3; document.write("

X="+x) document.write("
Y="+y) document.write("
X+Y=")

document.write(x+y) document.write("
X*Y=") document.write(x*y) document.write("
X/Y=") document.write(x/y) document.write("
Sisa hasil bagi X dengan Y=") document.write(x%y) document.write("
++X adalah ") document.write(++x) document.write("
++Y adalah ") document.write(++y)

Hasil:  

•  Operator  Logika  

Logical AND Logical OR Logical NOT

&& || !

•  Operator Relasi Equal Not equal Greater than Greater than or equal to Less than Less than or equal to

== != > >= < <=

Contoh:  

Operator Logika

<script language="JavaScript"> var x=10, y=3, x1=2, y1=15; document.write(x+">"+y+" AND "+x1+">"+y1+" adalah ") document.write("")

document.write((x>y)&&(x1>y1)) document.write("
") document.write(x+">"+y+" OR "+x1+">"+y1+" adalah ") document.write("") document.write((x>y)||(x1>y1)) document.write("
") document.write("NOT("+x+">"+y+" OR "+x1+">"+y1+") adalah ") document.write("") document.write(!((x>y)||(x1>y1)))

Hasil:  

Operasi  Tanggal  dan  Waktu   •  Fungsi-­‐Fungsi  Tanggal   Ø  Date()  untuk  menggambil  tanggal  akFf   Ø  getDay()   untuk   mengambil   hari   ke   dalam   seminggu   dari   suatu   tanggal  akrif   Ø  getDate()  untuk  mengambil  hari  ke  dari    tanggal  akFf   Ø  getMonth()  untuk  mengambil  bulan  dari  tanggal  akFf   Ø  getFullYear()  untuk  mengambil  Tahun  dari  tanggal  akFf  

•  Fungsi-­‐Fungsi  Waktu   Ø  getHours()  untuk  mengambil  JAM  dari  tanggal  akFf   Ø  getMinutes()  untuk  mengambil  MENIT  dari  tanggal  akFf   Ø  getSeconds()  untuk  mengambil  DETIK  dari  tanggal  akFf  

Contoh:  

Operasi Tanggal & Waktu

<script language="JavaScript"> var tgl= new Date(), bln; var d = tgl.getSeconds(); var m = tgl.getMinutes(); var h = tgl.getHours();

var hari= new Array("Minggu","Senin","Selasa","Rabu","Kamis ","Jumat","Sabtu"); var bulan= new Array("Januari","Februari","Maret","April","Mei", "Juni","Juli","Agustus","September","Oktober"," November","Desember"); bln=tgl.getMonth()+1 document.write(tgl) document.write("

Operasi Tanggal") document.write("
Hari ini = "+hari[tgl.getDay()])

document.write("
Tanggal = "+tgl.getDate()) document.write("
Bulan = "+bln +" ("+bulan[tgl.getMonth()]+" )") document.write("
Tahun = "+tgl.getFullYear()) document.write("

Operasi Waktu") document.write("
Hari ini Jam "+h+" lewat ") document.write(m+" menit dan "+d+" detik")

Hasil: