Scribd
Unggah
7 tayangan39 halaman

Javascript

Diunggah oleh

SanaX
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
7 tayangan39 halaman

Javascript

Diunggah oleh

SanaX
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 39

JAVASCRIPT

TIM TEACHING
1. Pengantar Pemrograman Web
2. HTML (Hypertext Markup Language)
3. Javascript
4. Bahasa PHP
5. Koneksi Basisdata
6. POST dan GET Method
Outline 7. CMS (Content Management System)
Pemrogaman Web 8. Ujian Tengah Semester
9. SESSION dan COOKIE
10. Operasi File
11. CSS Preprocessor
12. JSON dan RESTful API
13. Pemrograman Framework
14. Final Project
15. Final Project
16. Ujian Akhir Semester
Pengenalan JavaScript
• JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.
• JavaScript didesain untuk membuat halaman HTML menjadi lebih
interaktif.
• JavaScript biasanya disisipkan langsung pada halaman HTML.
• Client Side scripting.
• JavaScript dan Java adalah dua hal yang berbeda.
• JavaScript dan Java sangat berbeda dari bahasa maupun dari
konsep dan desainnya.
Pengenalan JavaScript
• JavaScript merupakan bahasa yang mudah dipahami, karena
memiliki kemiripan dengan konsep bahasa pemrograman visual,
maupun Java ataupun C.
• JavaScript adalah bahasa yang “case sensitive” artinya
membedakan penamaan variabel dan fungsi yang menggunakan
huruf besar dan huruf kecil.
• Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript
diakhiri dengan karakter titik koma (;).
JavaScript dan Java
Keunggulan JavaScript
• JavaScript dapat menempatkan text secara dinamis pada halaman
HTML.
• Dieksekusi berdasarkan event tertentu.
• Membaca dan menuliskan elemen-elemen HTML.
• Digunakan untuk memvalidasi data dari form, sebelum dikirimkan
ke server.
• Digunakan untuk mendeteksi browser pengunjung website.
• Digunakan untuk menyimpan dan mengambil informasi dari
komputer pengunjung website.
Penggunaan JavaScript
• Menggunakan tag HTML <script>
• Contoh:

<script type=“text/javascript”>
...
...
</script>
Penempatan JavaScript
• Ditempatkan pada tag <head>
• Ditempatkan pada tag <body>
• Ditempatkan pada tag <head> dan <body>
• Sebagai file external.
JavaScript pada Tag <head>
• Dengan menempatkan sintax JavaScript pada tag head, tidak akan
mengganggu isi dari halaman web karena semua script disatukan
pada satu tempat.
• Contoh :
<head>
<script type=“text/javascript”>
alert(“JavaScript pada tag Head.”);
</script>
</head>
JavaScript pada Tag <body>
• Contoh :
<body>
<h1>Belajar JavaScript</h1>
<p>

<script type=“text/javascript”>
document.write(“JavaScript pada tag Body.”);
</script>

</p>
</body>
JavaScript Sebagai File External
• Jika ingin menjalankan script JavaScript yang sama di banyak halaman,
gunakan JavaScript sebagai file independen.
• Simpan file tersebut dengan ekstensi .js
• Contoh :
<head>
<script type=“text/javascript” src=“external.js”>
</script>
</head>
JavaScript Sebagai File External
File contoh1.js
document.write(“<h2>Text ini ditulis dengan JavaScript</h2>”);

File contoh1.html
<head>
<script type=“text/javascript” src=“contoh1.js”></script>
</head>
Variabel
• Aturan penulisan Variabel :
• Nama variabel bersifat Case Sensitive
• Harus dimulai dengan huruf atau karakter underscore.
• Deklarasi Variabel dengan statement var
• var nama;
• var nama=“Rizki”;
• Variabel yang tidak dideklarasikan
• nama=“Rizki”;
• x=y+5;
Variabel
Contoh: Hasil
<body>
<h3>Operasi Penjumlahan</h3>
<b>Tiga + Empat =
<script type="text/javascript">
var jumlah;
jumlah="Tujuh";
document.write(jumlah);
</script>
</b>
</body>
Operator Aritmatika
• Macam-macam Operator Aritmatika pada JavaScript
Operator Deskripsi Contoh Hasil
+ Penjumlahan x = 5 + 2; x=7
- Pengurangan x = 10 – 2; x=8
* Perkalian x = 5 * 4; x = 20
/ Pembagian x = 10 / 2; x=5
% Modulus x = 5 % 2; x=1
++ Increment x++; x = x+1
-- Decrement x--; x = x-1
Contoh
operator + pada string Hasil
<body>
<script type="text/javascript">
var x = "Java";
var y = "Script";
z = x + y;
document.write(z);
</script>
</body>
Contoh
x=5+5;
document.write(x); 10

x="5"+"5";
document.write(x); 55

x=5+"5";
document.write(x); 55

x="5"+5;
55
document.write(x);
Catatan: Jika menggabungkan angka dengan string, maka hasilnya akan string.
Operator Assigment
• Macam-macam operator Assigment pada JavaScript.
Operator Contoh Sama Dengan Hasil
= x = “Belajar JS”; x = Belajar JS
+= x += 6; x = x + 6; x=8
-= x -= 2; x = x - 2; x=6
*= x *= y; x = x * y; x = 20
/= x /= 2; x = x / 2; x=5
%= x %= y; x = x % y; x=1
Contoh
operator Assigment Hasil
<body>
<script type="text/javascript">
var x = 7;
var y = 3;
x += 10;
x++;
x -= y;
document.write("Hasil x ="+x);
</script>
</body>
Komentar
• Digunakan untuk menerangkan script JavaScript yang dibuat.
• Mencegah script tersebut dieksekusi oleh browser.
• Macam-macam komentar.
• Single Line
• Dimulai dengan karakter : //
• Multi Line
• Dimulai dengan karakter : /*
• Diakhiri dengan karakter : */
• Contoh :
/*
document.write(“Script ini tidak akan dieksekusi”);
*/
Operator Pembanding
• Macam - macam operator pembanding
• Misal nilai x = 4.
Operator Deskripsi Contoh
== Sama dengan x == 9 → salah
=== Sama persis dengan ( tipe data dan nilai ) x === 4 → benar
x === “4” → salah
!= Tidak sama dengan x != 9 → benar
> Lebih besar dari x > 9 → salah
< Lebih kecil dari x < 9 → benar
>= Lebih besar sama dengan dari x >= 9 → salah
<= Lebih kecil sama dengan dari x <= 9 → benar
Operator Pembanding
• Macam – macam operator logika
• Misal nilai x = 8, dan y = 2.

Operator Deskripsi Contoh


&& Dan (and) (x < 10 && y > 1) → benar
|| Atau (or) (x == 5 || y == 2) → benar
! Tidak (not) !(x==y) → benar
Pengkondisian
Pada JavaScript terdapat beberapa macam pengkondisian.
• if (kondisi)
• Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi
bernilai true.
• if (kondisi1) else (kondisi2)
• Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai
true, dan kondisi lain bernilai false.
• if (kondisi1) else if (kondisi2) else (kondisi3)
• Gunakan statement ini untuk memilih satu dari banyak kondisi.
• switch
• Gunakan statement ini untuk memilih satu dari banyak kondisi.
Pengkondisian
Contoh
• if statement <script type="text/javascript">

• Sintaks: var jam = 13;


if (jam > 11) {
if (kondisi){
document.write("Selamat Siang");
aksi
}
}
</script>
Hasil
Pengkondisian
• if (kondisi1) else (kondisi2)
• Sintaks

if (kondisi){
aksi
}
else {
aksi
}
Pengkondisian
• if (kondisi1) else (kondisi2)
Contoh Hasil
<script type="text/javascript">
var jam = 8;
if (jam >= 11) {
document.write("Selamat Siang");
} else {
document.write("Selamat Pagi")
}
</script>
Pengkondisian
• if (kondisi1) else if (kondisi2) else (kondisi3)
• 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
}
Pengkondisian
• if (kondisi1) else if (kondisi2) else (kondisi3)
Contoh Hasil
<script type="text/javascript">
var jam = 17;
if (jam > 11 && jam < 15) {
document.write("Selamat Siang");
} else if (jam <= 11) {
document.write("Selamat Pagi")
} else {
document.write("Selamat Sore");
}
</script>
Pengkondisian
• Switch
• n adalah variabel
• Gunakan break untuk mencegah case berikutnya tereksekusi otomatis.
• Sintaks
switch (n)
{
case 1 : { aksi 1 } break;
case 2 : { aksi 2 } break;
default : { aksi default }
}
Pengkondisian
<script type="text/javascript">
var hari = 4; Contoh • Switch
var pesan =""; Hasil
switch (hari){
case 0 : {pesan = "Hari ini hari Minggu";} break;
case 1 : {pesan = "Hari ini hari Senin“;} break;
case 2 : {pesan = "Hari ini hari Selasa“;} break;
case 3 : {pesan = "Hari ini hari Rabu“;} break;
case 4 : {pesan = "Hari ini hari Kamis“;} break;
case 5 : {pesan = "Hari ini hari Jumat“;} break;
case 6 : {pesan = "Hari ini hari Sabtu“;} break;
default : pesan = "Hari apa?";
}
document.write(pesan);
</script>
Ternary
• Operator Ternary merupakan operator yang melibatkan tiga buah
operand.
• Operator ini dilambangkan dengan tanda ?: serta berguna untuk
melakukan pemilihan terhadap nilai tertentu dimana pemilihan
tersebut didasarkan atas ekspresi tertentu.
• Merupakan model penyederhanaan dari if...else
• Cocok untuk melakukan proses pengisian variabel suatu hasil
pengujian.
Ternary
• Sintaks
namaVariabel = (kondisi)? Nilai1 : Nilai2;

Contoh Hasil
<script type="text/javascript">
var jam = 8;
var pesan = "";

pesan = (jam <= 11) ? "Selamat Pagi" : "Selamat Siang";

document.write(pesan)
</script>
Pengulangan
• Pada JavaScript, ada dua macam pengulangan :
• FOR, pengulangan sebanyak jumlahyang ditentukan,
• WHILE, pengulangan sampai bertemu kondisi “true”.
Pengulangan - for
• Sintaks for (var=startValue; var<=endValue; var=var+increment)
{
source code
}

Contoh Hasil
<script type="text/javascript">
var i = 0;
for (i = 0; i < 5; i++) {
document.write("Nomor Antrian : " + i);
document.write("<br />");
}
</script>
Pengulangan - while
• Sintaks var=startValue;
while (var<=endValue){
source code
}

Contoh Hasil
<script type="text/javascript">
var i = 0;
while (i < 4) {
document.write("Nomor Antrian : " + i);
document.write("<br />");
i++;
}
</script>
Pengulangan For...In
• Untuk melakukan pengulangan sebanyak elemen array atau sebanyak properti
dari suatu objek.
Contoh Hasil
<script type="text/javascript">
var x;
var mybook = new Array();
mybook[0] = "PemWeb";
mybook[1] = "MatDis";
mybook[2] = "BasDat";
for (x in mybook) {
document.write(mybook[x] + "<br />");
}
</script>
Break Statement
• Perintah break akan menghentikan pengulangan dan akan mengeksekusi
sintaks berikutnya setelah pengulangan.
Contoh Hasil
<script type="text/javascript">
var i = 0;
for (i = 0; i < 5; i++) {
if (i == 3) {
break;
}
document.write("Nomor Antrian : " + i);
document.write("<br />");
}
document.write("Akhir pengulangan");
</script>
Continue Statement
• Perintah continue akan melewati value pengulangan yang ditentukan,
kemudian melanjutkan ke value berikutnya.
Contoh Hasil
<script type="text/javascript">
var i = 0;
for (i = 0; i < 5; i++) {
if (i == 3) {
continue;
}
document.write("Nomor Antrian : " + i);
document.write("<br />");
}
document.write("Akhir pengulangan");
</script>
TERIMA KASIH

Anda mungkin juga menyukai