javascript
TRANSCRIPT
![Page 1: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/1.jpg)
Fahrizal Nuansa – 113040246
Yosua Bachtiar – 113040250
Getha Azam Ceterio - 113040158
![Page 2: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/2.jpg)
![Page 3: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/3.jpg)
Javascript adalah bahasa Scripting, bukan bahasa pemrograman.
Javascript biasanya embedded secara langsung pada HTML pages.
Javascript adalah interpreted language (artinya bahwa scripts dijalankan tanpa di kompile terlebih dahulu).
Apakah Java dan Javascript sama?, Tidak, Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep maupun dari sisi desain.
JavaScript bersifat Case Sensitive, artinya huruf besar dan kecil
dibedakan.
![Page 4: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/4.jpg)
Nama resmi JavaScript : ECMAScript.
ECMAScript dikembangkan oleh ECMA Organization.
Diciptakan oleh Brendan Eich. Muncul pertama kali di semua browser Netscape dan Microsoft pada tahun 1996.
Disetujui sebagai standar internasional pada tahun 1998.
![Page 5: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/5.jpg)
![Page 6: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/6.jpg)
JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untuk menjalankan saat terjadi sesuatu, seperti sebuah page telah selesai dipanggil atau saat seorang user meng-klik pada HTML element.
JavaScript dapat membaca dan menulis HTML elements - JavaScript dapat membaca dan mengubah isi dari HTML element
JavaScript dapat digunakan untuk mem-validasi data - JavaScript dapat digunakan untuk mem-validasi form data sebelum di-submitted ke server.
JavaScript dapat digunakan untuk mendeteksi browser pengunjung - JavaScript dapat digunakan untuk mendeteksi browser pengunjung.
JavaScript dapat digunakan untuk membuat cookies - JavaScript dapat digunakan untuk menyimpan dan memanggil informasi di komputer pengunjung
![Page 7: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/7.jpg)
Script tidak terenkripsi - Karena javascript bersifat client side, maka script yang kita buat di text editor dan telah dijadikan web di server, ketika user merequest web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya dari sourcenya.
Kemampuan terbatas - Walaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.
![Page 8: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/8.jpg)
![Page 9: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/9.jpg)
Program JavaScript dituliskan pada file HTML (.html atau .htm) menggunakan tag <SCRIPT>
Contoh : <script type=“text/javascript”>
//kode Javascript
</script>
![Page 10: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/10.jpg)
![Page 11: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/11.jpg)
Ditempatkan pada tag <head>
Ditempatkan pada tag <body>
Sebagai file external.
![Page 12: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/12.jpg)
![Page 13: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/13.jpg)
Dengan menempatkan sintax JavaScript pada tag head, tidak akan mengganggu isi dari halaman web karena semua script disatukan pada satu tempat.
Contoh :
<html> <head> <script type="teks/javascript"> //kode Javascript </script> </head> </html>
![Page 14: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/14.jpg)
![Page 15: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/15.jpg)
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.
Contoh :
<html> <head> </head> <body> <script type="teks/javascript"> //kode Javascript </script> </body> </html>
![Page 16: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/16.jpg)
![Page 17: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/17.jpg)
Terkadang ada yang menginginkan menjalankan JavaScript
yang sama dalam beberapa kali pada halaman yang berbeda,
tetapi tidak mau disibukkan jika harus menulis ulang script yang
diinginkan di setiap halaman. Maka JavaScript dapat ditulis di
file secara eksternal. Jadi, antara dokumen HTML dan
JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari
dokument HTML. Berkas JavaScript tersebut disimpan dengan
ekstensi .js.
![Page 18: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/18.jpg)
.
Untuk menggunakan eksternal JavaScript (.js) dipakai
atribut "src" pada tag <script> pada halaman HTML-nya.
Contoh namaFile.js :
document.write("pesan ini tampil ketika halaman diload");
Contoh cobaExternal.html : <html> <head></head> <body> <script src="namaFile.js"></script> <p>Script di atas berada di berkas “namaFile.js" (eksternal) >/p> </body> </html>
Hasil :
![Page 19: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/19.jpg)
![Page 20: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/20.jpg)
Mendeklarasikan variabel pada javascript dengan menggunakan kata
kunci var.
Aturan penamaan variabel :
- Nama variabel bersifat Case Sensitive
- Harus dimulai dengan huruf atau karakter underscore.
- Nama variabel tidak boleh mengandung spasi.
Var userName;
userName = “RedWhite”;
var Kota; //berbeda dengan.. var kota;
Penulisan Var yang salah var @Kota; var 1993kota;
Penulisan Var yang benar var Kota; var _kota;
Penulisan Var yang salah var Nama Mahasiswa;
Penulisan Var yang benar var Nama_Mahasiswa; //atau var NamaMahasiswa;
![Page 21: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/21.jpg)
Contoh :
<body> <script language="Javascript"> var x = 100; document.writeln('variabel x bernilai =' + x + '<br>'); var user = 'fahrizal nuansa'; document.writeln('Selamat datang '+user+'<br>'); </script> </body>
Hasil :
![Page 22: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/22.jpg)
![Page 23: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/23.jpg)
Macam-macam Operator Aritmatika pada JavaScript :
![Page 24: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/24.jpg)
Contoh :
<body> <script language="Javascript"> var x = 100; var y = 200; var hasil = x + y; document.writeln('Hasil penjumlahan dari '+ x + ' + ' + y + '= '+hasil); </script> </body>
Hasil :
![Page 25: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/25.jpg)
![Page 26: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/26.jpg)
Digunakan untuk memberikan nilai operan yang terletak di sebelah
kanan ke operan di sebelah kiri dan disimbolkan dengan tanda '=‘.
Macam-macam operator Assigment pada JavaScript :
![Page 27: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/27.jpg)
Contoh :
Hasil :
![Page 28: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/28.jpg)
![Page 29: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/29.jpg)
Digunakan untuk membandingkan dua buah operan. Operan yang
dikenal operator ini dapat bertipe string, numeric, maupun ekspresi lain.
Hasil perbandinga berupa keadan true dan false
Macam - macam operator pembanding :
![Page 30: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/30.jpg)
Contoh :
Hasil :
![Page 31: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/31.jpg)
![Page 32: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/32.jpg)
Digunakan untuk menghubungkan ungkapan pembanding (relasi).
Operator logika membandingkan operan-operannya dan
mengembalikan nilai logik yang nilainya bergantung pada hasil
perbandingan tersebut.
Macam - macam operator logika :
![Page 33: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/33.jpg)
Contoh :
Hasil :
![Page 34: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/34.jpg)
![Page 35: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/35.jpg)
if (kondisi)
if (kondisi1) else (kondisi2)
if (kondisi1) else if (kondisi2) else (kondisi3)
switch
Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi bernilai true.
Pada Javascript terdapat beberapa macam pengkondisian :
Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai true, dan kondisi lain bernilai false.
Gunakan statement ini untuk memilih satu dari banyak kondisi.
Gunakan statement ini untuk memilih satu dari banyak kondisi.
![Page 36: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/36.jpg)
Sintaks :
Contoh :
if (kondisi)
{
aksi
}
Hasil
![Page 37: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/37.jpg)
Sintaks :
Hasil :
if (kondisi)
{
aksi
}
else
{
aksi
}
Contoh :
![Page 38: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/38.jpg)
Sintaks :
if (kondisi1)
{
dieksekusi jika kondisi1 bernilai true
}
else if (kondisi2)
{
dieksekusi jika kondisi1 false dan kondisi2
true
}
else
{
dieksekusi jika kondisi1 dan kondisi2 false
}
![Page 39: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/39.jpg)
Contoh :
Hasil :
![Page 40: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/40.jpg)
Sintaks :
- a adalah variabel.
- break berfungsi untuk mencegah case berikutnya tereksekusi ..
otomatis.
switch (a)
{
case 1 : { aksi 1 } break;
case 2 : { aksi 2 } break;
case 3 : { aksi 2 } break;
case 4 : { aksi 2 } break;
…………………………………………………………………
default : { aksi default }
}
![Page 41: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/41.jpg)
Contoh :
Hasil :
![Page 42: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/42.jpg)
![Page 43: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/43.jpg)
Prinsip kerja operator ternary adalah menyederhanakan bentuk "if..else" dimana setiap blok dari "if..else" hanya mempunyai 1 perintah, dan melakukan evaluasi ekspresi tersebut.
Bentuk operator Ternary -> "?"
Sintaks :
Contoh :
Hasil :
namaVariabel = (kondisi)? Nilai1 : Nilai2;
![Page 44: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/44.jpg)
![Page 45: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/45.jpg)
for
while
pengulangan sebanyak jumlah yang ditentukan.
Pada Javascript terdapat beberapa macam pengulangan :
pengulangan sampai bertemu kondisi “true”.
![Page 46: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/46.jpg)
Sintaks :
Contoh :
for (var=startValue; var<=endValue; var=var+increment)
{
source code
}
Hasil
![Page 47: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/47.jpg)
Sintaks For...In melakukan pengulangan sebanyak elemen array atau
sebanyak properti dari suatu objek.
Contoh :
Hasil
![Page 48: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/48.jpg)
Perintah break akan menghentikan pengulangan dan akan
mengeksekusi sintaks berikutnya setelah pengulangan.
Contoh :
Hasil
![Page 49: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/49.jpg)
Perintah continue akan melewati value pengulangan yang ditentukan,
kemudian melanjutkan ke value berikutnya.
Contoh :
Hasil
![Page 50: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/50.jpg)
Sintaks :
Contoh :
var=startValue;
while (var<=endValue)
{
source code
}
Hasil
![Page 51: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/51.jpg)
![Page 52: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/52.jpg)
Alert Box
Confirm Box
Prompt Box
Biasanya digunakan untuk memberikan informasi ke pengguna.
Pada Javascript terdapat beberapa macam PopUp Box :
Biasanya digunakan apabila aplikasi membutuhkan verifikasi atau persetujuan dari pengguna.
Biasanya digunakan apabila aplikasi ingin pengguna memasukkan dahulu suatu nilai sebelum memasuki suatu halaman.
![Page 53: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/53.jpg)
Contoh :
Hasil
![Page 54: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/54.jpg)
Penjelasan :
Contoh :
var r = confirm();
Jika tombol “OK” yang ditekan, maka confirm akan mengisikan nilai “true” ke variabel konfirmasi, sebaliknya “false” jika tombol “Cancel” yang ditekan.
Hasil
![Page 55: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/55.jpg)
Sintaks :
Contoh :
prompt(“msg”,”nilaiDefault”);
Hasil
![Page 56: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/56.jpg)
![Page 57: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/57.jpg)
Sebuah fungsi berisi source code yang akan dieksekusi ketika dipanggil.
Sebuah fungsi akan dieksekusi jika dipanggil nama fungsinya atau dieksekusi oleh suatu event.
Sisipkan source code ke dalam fungsi untuk mencegah suatu source code langsung tereksekusi saat halaman terbuka.
Fungsi dapat dipanggil dari mana saja di suatu halaman bahkan dari file JavaScript yang berbeda (external javascript), jika pada halaman tersebut file-file javascript sudah disisipkan.
Fungsi bisa mengembalikan nilai ke pemanggilnya.
![Page 58: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/58.jpg)
Sintaks :
Contoh :
function namaFungsi(parameter1, parameter2, ... parameterN)
{
......
}
Hasil
![Page 59: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/59.jpg)
Contoh :
Hasil
![Page 60: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/60.jpg)
![Page 61: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/61.jpg)
Event adalah aksi yang dilakukan user terhadap
elemen HTML yang dapat dideteksi oleh
JavaScript.
Setiap elemen di halaman web memiliki event
tertentu yang dapat memicu JavaScript.
Event didefinisikan dalam atribut tag HTML.
Event digunakan dalam kombinasi dengan fungsi,
dan fungsi tersebut tidak akan tereksekusi sebelum
event tersebut terjadi.
![Page 62: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/62.jpg)
![Page 63: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/63.jpg)
![Page 64: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/64.jpg)
onLoad :
- Event yang terjadi saat memasuki suatu halaman.
Contoh : Hasil :
onUnload
- Event yang terjadi saat keluar dari suatu halaman.
Contoh : Hasil :
<body onLoad=“alert(‘Coba onLoad’)”>
</body>
<body onUnload="alert('Coba onUnLoad')">
</body>
![Page 65: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/65.jpg)
Contoh :
Hasil
![Page 66: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/66.jpg)
![Page 67: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/67.jpg)
JavaScript dapat digunakan untuk memvalidasi data dari form sebelum dikirimkan ke server.
Contoh valid.js :
![Page 68: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/68.jpg)
Contoh FormValidation.html:
Hasil :
![Page 69: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/69.jpg)
![Page 70: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/70.jpg)
Pada bahasa pemrograman Javascript, terdapat object yang dapat digunakan untuk merepresentasikan tanggal dan waktu, yaitu objek date. Untuk ‘menghidupkan’ sebuah instance date sintaks yang digunakan adalah sebagai berikut:
Pada objek date, ada berbagai method yang dapat kita gunakan, yaitu sebagai berikut :
var waktu = new Date();
![Page 71: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/71.jpg)
![Page 72: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/72.jpg)
![Page 73: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/73.jpg)
![Page 74: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/74.jpg)
Contoh jam.js :
![Page 75: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/75.jpg)
Contoh jam.html :
Penjelasan Script :
setTimout(“namaFungsi()”, delay);
Fungsi setTimeout akan memanggil namaFungsi()
bila waktu delay sudah terpenuhi.
Satuan waktu delay : milisecond.
1000ms = 1s
document.getElementById('jam').innerHTML="Hari "+x+", Pukul "+h+":"+m+":"+s;
Berfungsi untuk mengakses element dengan Id = jam, dan menuliskan hari, jam, menit,
detik kedalam element yang ber Id = jam.
Hasil :
![Page 76: Javascript](https://reader035.vdocuments.site/reader035/viewer/2022081401/557210f9497959fc0b8e0b09/html5/thumbnails/76.jpg)
Selesai