Javascript adalah bahasa script yang bisa dijalankan di browser dan biasa disebut dengan client side programming.
Client disini adalah browser seperti: Google Chrom, Internet Explorer, Firefox, Safari, dan sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML. Kode javascript dituliskan pada editor seperti notepad, notepad++, pspad editor, dll. Dalam menjalankan javascript tidak dibutuhkan compiler tetapi melalui browser karena browser memiliki engine yang bisa menginterpretasikan semua kode java script.
Javascript bisa juga ditulis terpisah dan filenya diberikan esktensi .js Contoh: namafile.js. Cara menyisipkan javascript di file html adalah seperti berikut:
2 Tipografi
Sintaks javascript mirip dengan bahasa C atau java.
- Javascript bersifat case sensitive artinya huruf kecil dan huruf besar adalah berbeda
- Setiap baris kode javascript dipisahkan dengan titik koma (;)
- Komentar dalam javascript diawali dengan // atau ditulis di atara /* dan */
3 Variabel
Penulisan variabel di javascript bisa diimbuhi underscore ( _ ) atau tanda dollar ($)
4 Operator
A. Operator aritmatika
| operator | definisi |
| + | Penambahan |
| – | Pengurangan |
| * | Perkalian |
| / | Pembagian |
| % | Modulus (sisa hasil bagi) |
| code | Hasil: |
| <script>
var x = 5; var y = 2; z = x * y; alert(z); </script> |
B. Operator assignment
| Shorthand operator | arti |
| x += y | x = x + y |
| x -= y | x = x – y |
| X *= y | x= x * y |
| X /= y | x= x / y |
| kode | Hasil |
| <script>
var x = 8; var y = 5; x += y alert(x); </script> |
C. Operator pembanding
| operator | definisi | contoh |
| == | Sama dengan | Var1 == “coba” |
| != | Tidak sama dengan | x != y |
| > | Lebih besar dari | x > y |
| < | Lebih kecil dari | x < 8 |
| >= | Lebih besar sama dengan | x >= y |
| <= | Lebih kecil sama dengan | X <= 6 |
| Code: | Hasil: |
| <html>
<head> <script> var x = 5; var y = 1; if(x > y){ alert(“x lebih besar dari y”); } </script> </head> <body> </body> </html>
|
 |
- Operator Logika
| Operator | Definisi | Contoh |
| && | Dan | x >= 60 && x< 70 |
| || | Atau | x == 4 || x == 8 |
| ! | Bukan | !expression |
| Code | Hasil |
| <script>
var x = 95; if(x >= 80){ alert(“Nilai = A”); }else if(x >= 70 && x < 80){ alert(“Nilai = B”); }else if(x >= 60 && x < 70){ alert(“Nilai = C”); }else{ alert(“Nilai = D”); } </script> |
 |
5 Statement Conditional
Kondisional berguna untuk mengecek suatu kondisi dan melakukan suatu kode jika kondisi tersebut benar atau salah.
- If
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}
- If – else
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}else{
kode yang dijalankan jika salah
}
- If – else if – else
Jika kondisi yang dibutuhkan banyak Sintaks :
if(kondisi 1){
kode yang dijalankan jika kondisi 1 benar
}else if(kondisi 2){
kode yang dijalankan jika kondisi 2 benar
}else if(kondisi 3){
kode yang dijalankan jika kondisi 3 benar
}else{
kode jika salah satu kondisi di atas tidak ada yang benar
}
6 Pengulangan (looping)
Konsep dasar looping:
- Berapa jumlah perulangan yang terjadi harus diketahui dengan baik
- kekurangan atau kelebihan langkah akan mengakibatkan tidak validnya suatu perhitungan dalam sebuah
- Dalam teknik looping, yang harus ditentukan pertamakali adalah kapan sebuah loop harus mulai dan kapan suatu loop harus berakhir/berhenti berproses.
- Untuk pergerakan dari titik awal sampai pada titik akhir, diperlukan suatu langkah (step) untuk mengontrol nilai pergerakan
1. For
untuk looping yang sudah ditentukan terlebih dahulu awalnya berapa, dijalankan sampai kondisi bagaimana.
Sintaks :
for(awal; kondisi; penambahan){ kode untuk dijalankan
}
2. While
Berguna untuk menjalankan suatu kode terus menerus selama kondisi bernilai true. Sintaks :
7 Penanganan Event (Event Handler)
- event handler: onclick
apabila user mengklik radio button akan mengubah warna latar halaman web
8 Memformat Teks dengan Javascript
Untuk membantu melakukan formating terhadap teks secara programming, javascript menyediakan beberapa metode formating menggunakan javascript.
| properti | Deskripsi |
| length | Menghasilkan jumlah karakter dari suatu string atau teks |
| Metode | Deskripsi |
| Anchor (nama) | Menghasilkan string dengan diapit tag <A name=”nama”> |
| big () | Menghasilkan string dengan diapit tag <BIG> |
| blink () | Menghasilkan string dengan diapit tag <BLINK> |
| bold () | Menghasilkan string dengan diapit tag <B> |
| fixed () | Menghasilkan string dengan diapit tag <TT> surrounding it |
| fontcolor (warna) | Menghasilkan string dengan diapit tag <FONT color=”warna”> |
| fontsize (size) | Menghasilkan string dengan diapit tag <FONT size=”size”> |
| italics () | Menghasilkan string dengan diapit tag <I> |
| link (url) | Menghasilkan string dengan diapit tag <A href=”url”> |
| small () | Menghasilkan string dengan diapit tag <SMALL> |
| strike () | Menghasilkan string dengan diapit tag <STRIKE> |
| sub () | Menghasilkan string dengan diapit tag <SUB> |
| sup () | Menghasilkan string dengan diapit tag <SUP> |
| toLowerCase () | Mengubah string menjadi huruf kecil semua. |
| toUppeerCase () | Mengubah string menjadi huruf besar semua |
9 Penanganan Objek String
| metode | deskripsi |
| charAt (x) | Menghasilkan karakter pada posisi x dari suatu string. |
| charCodeAt (x) | Menghasilkan nilai Unicode value dari karakter pada posisi x dari suatu string |
| Concat (teks1, teks2,…) | Menggabungkan satu atau lebih string-string (teks1, teks2, dan sebagainya). |
| fromCharCode (c1, c2,…) | Menghasilkan string yang dibuat menggunakan urutan dari nilai unicode |
| indexOf (substr, [start]) | Mencari dan (jika ditemukan) menghasilkan nomor index number dari karakter atau substring yang di dalam string. Jika tidak ditemukan, hasilnya -1. “Start” adalah argument opsional,posisi awal di string untuk memulai pencarian , defaultnya adalah 0 |
| Match (regexp) | Mengeksekusi suatu pencarian untuk string berdasarkan pola regular expression. Menghasikan suatu array informasi, jika tidak ditemukan menghasilkan null. |
| replace
(regexp,replacetext) |
Mencari dan menukar string yang dicari berdasarkan pola regular expression. |
| search (regexp) | Mengetes apakah pola regular expression cocok pada suatu string, jika cocok akan menghasilkan index dari yang cocok, jika tidak ada yang cocok menghasilkan -1. |
| slice (start, [end]) | Menghasilkan substring dari suau string berdasarkan “start” dan “end” argument. |
| split (delimiter, [limit]) | Memotong-motong string berdasarkan pembatas yang ditentukan, hasilnya dalam bentuk array. |
| substr (start, [length]) | Menghasilkan karakter atau substring dari suatu string yang dimulai dari “start” sampai panjang “length” yang ditentukan. |
Contoh: validasi email
mengecek apakah email yang dimasukkan valid atau tidak. Cara mengeceknya adalah apakah string yang diinput mengandung karakter @ atau titik (.)
code:
Hasil:
10 Membuka Window di Javascript
Untuk membuka window di javascript adalah dengan metode open() Sintaks:
window.open(url, nama_window, konfigurasi)
| Konfigurasi | Deskripsi | Nilai |
| Width | Lebar window | Lebar window dalam pixel |
| Height | Tinggi window | Tinggi window dalam pixel |
| Toolbar | Menampilkan toolbar browser | 1 atau 0 |
| Menubar | Menampilkan menubar browser | 1 atau 0 |
| Scrollbars | Menampilkan scrollbars | 1 atau 0 |
| Resizable | Set apakah bisa window diubah-ubah ukurannya | 1 atau 0 |
11 Alert, Confirm, And Prompt
Alert: untuk menampilkan window alert
Cofirm: digunakan untuk memunculkan window konfirmasi atau semacam pertanyaan yang jawabannya antara OK atau Cancel
Prompt: digunakan untuk meminta inputan melalui window