SlideShare a Scribd company logo
JavascriptMata Kuliah Pemrograman Web
Adalah Bahasa script, yang tidak memerlukan compiler untuk
menjalankannya, cukup dengan interpreter.
Javascript untuk membuat program yang digunakan agar
dokumen HTML yang ditampilkan dalam browser menjadi lebih
interaktif dan dinamis
Javascript bukanlah Bahasa pemrograman Java!
Salah satu metod dari javascript adalah getElementById()
Jadi metod html diambil berdasarkan deklarasi awal ID
<p id="demo">JavaScript</p>
document.getElementById("demo").innerHTML =
"Hello JavaScript";
Misal, nama id adalah “demo” yang berisi pesan “Javascript”, akan
digantikan oleh pesan “Hello Javascript”
<body>
<p id="demo">JavaScript</p>
<button type="button"
onclick='document.getElementById("demo").innerHT
ML = "Hello JavaScript!"'>Click Me!</button>
</body>
Mengubah style dari elemen HTML, bervariasi tergantung dari
atribut HTML
document.getElementById("demo").style.fontSize =
‘25px’;
Ukuran font akan diubah menjadi ukuran 25px
<body>
<p id="demo">JavaScript can change the style of an HTML
element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize=
‘25px'">Click Me!</button>
</body>
Menyembunyikan elemen HTML dapat dilakukan dengan cara
mengubah style.display
document.getElementById('demo').style.display =
'none';
none, berarti tidak akan menampilkan apapun
<body>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button"
onclick="document.getElementById('demo').style.displ
ay='none'">Click Me!</button>
</body>
Selain menyembunyikan, JS juga bisa digunakan untuk
menampilkan kembali elemen yang di-hide
document.getElementById('demo').style.display =
'block';
<body>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button"
onclick="document.getElementById('demo').style.display='block'">Cli
ck Me!</button>
</body>
Di dalam HTML, Kode JS harus dimasukkan diantara <script>
dan </script>
<script>
document.getElementById("demo").innerHTML =
“Javascript Pertama";
</script>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
“Javascript Pertama";
</script>
</body>
Fungsi JS bias diletakkan di dalam <head> HTML, fungsi akan
dipanggil saat trigger diaktifkan (biasanya di apply ke dalam button).
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
“Paragraf Berubah.";
}
</script>
</head>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = “Paragraf Berubah.";
}
</script>
</head>
<body>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Tekan INI</button>
</body>
Pointing fungsi (Where To) juga bisa dilakukan dari dalam tag
<body> HTML
Dengan meletakkan script di bagian bawah tag <body>, bisa
meningkatkan kecepatan display script
Script JS juga bisa diletakkan di dalam file yang berbeda, sama
halnya dengan CSS.
File yang berisikan script JS harus berekstensi .js untuk bisa
menjalankannya.
<script src=“scriptSaya.js"></script>
Untuk menggunakan eksternal script cukup dengan
menambahkan src (sumber) file dalam penempatan atribut
<script>
function myFunction() {
document.getElementById("demo").innerHTML = “Paragraf Berubah.";
}
<body>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Tekan INI</button>
<script src=“scriptSaya.js"></script>
</body>
• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().
innerHTML
Untuk mengakses elemen HTML, javascript menggunakan
method document.getElementById(NamaID)
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 6 +
13;
</script>
document.write()
Untuk kebutuhan testing web dan penetrasi keamanan oleh
developer, lebih mudah menggunakan document.write()
<script>
document.write(5 + 6);
</script>
Menggunakan document.write() setelah halaman HTML
selesai Load, akan menghapus semua tampilan elemen HTML
(hardcode di file .html tetap ada, hanya tampilan di dalam
browser yang terhapus)
<button type="button" onclick="document.write(5
+ 6)">Try it</button>
window.alert
Digunakan untuk menampilkan kotak “Alert” pada window/layar,
biasa digunakan untuk pemberitahuan atau pencegahan
accidentally click pada website atau tampilan aplikasi berbasis
HTML.
<script>
window.alert(6 + 13);
</script>
console.log
Untuk keperluan debugging atau pencarian kode bermasalah,
bisa menggunakan console.log() method untuk menampilkan
data
<script>
console.log(5 + 6);
</script>
Kadang di dalam programming, kita akan menemukan data yang
hanya memiliki 2 nilai :
• YES/NO
• ON/OFF
• TRUE/FALSE
Di dalam Javascript (atau di bidang ilmu sains lainnya) disebut
Boolean, yang dimana hanya memiliki 2 nilai yaitu true dan false
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Boolean(10 > 9); //akan muncul nilai true
</script>
Javascript Statements (pernyataan) terdiri atas Nilai, Operator,
Ekspresi, Kata Kunci, dan Komentar
var x, y, z;
x = 5;
y = 6;
z = x + y;
Nilai fixed (tetap) JS disebut dengan literal, dan nilai yang
dideklarasikan disebut variable.
• JS Number and Strings, dimana Number bisa ditampilkan
dengan menggunakan decimal atau tidak, dan Strings untuk
menampilkan karakter alphabet misal Nama. Contoh, 100.60
(Number), dan “John Doe” (Strings)
• Javascript Variable, digunakan untuk menyimpan nilai suatu
data. Nilai data tersebut dideklarasikan dengan menggunakan
syntax var dan tanda “=“ untuk memberikan nilai kepada suatu
data. Contoh, var x; x = 6;
JS menggunakan operator aritmetika untuk melakukan perhitungan.
<p id="demo"></p>
<script>
var x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>
Merupakan gabungan dari Values, Variables, and Operators. Proses perhitungannya
dinamakan Evaluation.
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
OR
<script>
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;
</script>
<script>
document.getElementById("demo").innerHTML = "John" + " " + "Doe";
</script>
JS Keywords digunakan untuk melakukan aksi atau perintah yang akan dilakukan
berdasarkan data variable yang di deklarasikan.
<p id=“hitung"></p>
<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById(“hitung").innerHTML = y;
</script>
Comments syntax “ // “ tidak akan di eksekusi oleh program, berguna menampilkan
komentar suatu kolom kode atau informasi mengenai suatu baris kode, biasanya
sering digunakan untuk membangun pengembangan aplikasi berbasis komunitas,
open source, atau git.
<p id="demo"></p>
<script>
var x;
x = 5;
// x = 6; Baris kode ini tidak akan dieksekusi
document.getElementById("demo").innerHTML = x;
</script>
Saat menulis kode program, biasanya kita diharuskan menggunakan
pernyataan kondisi, yaitu :
• Menggunakan if untuk menspesifik baris kode yang akan dieksekusi,
jika kondisi yang dispesifikan adalah true
• Menggunakan else untuk menspesifik baris kode yang akan
dieksekusi, jika kondisi yang sama adalah false
• Menggunakan else if untuk menspesifikan kondisi baru, jika kondisi
pertama adalah false
• Menggunakan switch untuk menspesifikan lebih dari satu blok
kondisi yang akan dieksekusi
IF statement
<p id="demo">Selamat Malam!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML =
“Selamat Siang!";
}
</script>
Else Statements
<p id="demo"></p>
<script>
var hour = new Date().getHours();
var greeting;
if (hour > 18) {
greeting = “Selamat Pagi";
} else {
greeting = “Selamat Malam";
}
document.getElementById("demo").innerHTML = greeting;
</script>
Else IF Statements
<p id="demo"></p>
<script>
var greeting;
var time = new Date().getHours();
if (time > 10) {
greeting = “Selamat Pagi";
} else if (time > 20) {
greeting = “Selamat Siang";
} else {
greeting = “Selamat Malam";
}
document.getElementById("demo").innerHTML = greeting;
</script>
Switch Statements
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = “Minggu";
break;
case 1:
day = “Senin";
break;
case 2:
day = “Selasa";
break;
case 3:
day = “Rabu";
break;
case 4:
day = “Kamis";
break;
case 5:
day = “Jumat";
break;
case 6:
day = “Sabtu";
}
document.getElementById("demo").innerHTML = “Hari ini adalah
hari " + day;
</script>
• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• while - loops through a block of code while a specified
condition is true
• do/while - also loops through a block of code while a
specified condition is true
FOR Loops
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += “Nomor ke-" + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
FOR Loops using Array
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", “Subaru", “Honda", “Jeep", "Ford"];
var i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
FOR/IN Loops
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
WHILE Loops
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>Nomor ke-" + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
DO/WHILE Loops
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>Nomor ke- " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
• www.w3schools.com/js/
• javascript-roadtrip.codeschool.com/
• Bengkel Internet Pens-ITS. Materi Javascript
• Modul Pemrograman HTML & CSS – STMIK AMIKOM
Yogyakarta

More Related Content

PPTX
Algoritma Pemrograman (Flowchart) - Logika dan Algoritma
PPTX
Binary Search pada Java
PPT
Forward Backward Chaining
PDF
Modul praktikum-pemrograman java dgn netbeans
PPTX
Pertemuan Ke-5 - Sistem Operasi - Sinkronisasi Proses.pptx
DOCX
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
PDF
Pengertian field, record, table, file, data dan basis data lengkap pengerti...
DOCX
sekuensial sercing (data string) dalam C++
Algoritma Pemrograman (Flowchart) - Logika dan Algoritma
Binary Search pada Java
Forward Backward Chaining
Modul praktikum-pemrograman java dgn netbeans
Pertemuan Ke-5 - Sistem Operasi - Sinkronisasi Proses.pptx
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Pengertian field, record, table, file, data dan basis data lengkap pengerti...
sekuensial sercing (data string) dalam C++

What's hot (20)

PPTX
STATISTIKA-Regresi dan korelasi
PPTX
Presentasi konsep dasar html
PDF
Tipe Data pada MySQL
PDF
Database minimarket-Garnis Q
PPTX
Erd perpustakaan
PDF
Contoh peyelesaian logika fuzzy
PDF
3. metodologi data science dts ta v.1
PPTX
Standarisasi penulisan jenis dan jumlah basan dan baran
PPTX
PPT.pptx
DOCX
Laporan survei kwu
PDF
PHP CRUD Database Mysql
PPTX
Dts x dicoding #3 memulai pemrograman kotlin
PPTX
Analisis pohon kepputusan
PPTX
membuat function dalam mysql
PDF
Analisis swot usaha rumahan laundry
PPT
Array dan Contoh
PDF
PENGANTAR DATA SCIENCE.pdf
PPT
linear programming metode simplex
PPT
Pertemuan 2-pemecahan-masalah-ai
PPTX
Data mining 1 pengantar
STATISTIKA-Regresi dan korelasi
Presentasi konsep dasar html
Tipe Data pada MySQL
Database minimarket-Garnis Q
Erd perpustakaan
Contoh peyelesaian logika fuzzy
3. metodologi data science dts ta v.1
Standarisasi penulisan jenis dan jumlah basan dan baran
PPT.pptx
Laporan survei kwu
PHP CRUD Database Mysql
Dts x dicoding #3 memulai pemrograman kotlin
Analisis pohon kepputusan
membuat function dalam mysql
Analisis swot usaha rumahan laundry
Array dan Contoh
PENGANTAR DATA SCIENCE.pdf
linear programming metode simplex
Pertemuan 2-pemecahan-masalah-ai
Data mining 1 pengantar
Ad

Similar to Pemrograman Web 5 - Javascript (20)

PDF
Praktikum javascript
PDF
7 pemrograman internet javascript
PDF
Pemrograman Web - Client Side Javascript
PDF
web_06-javascript.pdf
DOC
Web java script pada html
PDF
Modul Javascript
PDF
Pemrograman Web 6 - jQuery
PPTX
Lecture06 javascript1
PDF
PDF
Belajar Android PHP MySQL Login dengan Volley
ODP
Mengamankan Aplikasi Java EE 6
DOCX
Ansanwan form sederhana php
PDF
Pemrograman Dasar Android
DOCX
Fungsi-Fungsi PHP
DOCX
Belajar pemrograman berbasis web menggunakan dhtmlx 2
PDF
Aneka trik j query pilihan
PDF
Membuat Form tambah dan update barang
PDF
Moduljavascript
PDF
Moduljavascript
PDF
Moduljavascript
Praktikum javascript
7 pemrograman internet javascript
Pemrograman Web - Client Side Javascript
web_06-javascript.pdf
Web java script pada html
Modul Javascript
Pemrograman Web 6 - jQuery
Lecture06 javascript1
Belajar Android PHP MySQL Login dengan Volley
Mengamankan Aplikasi Java EE 6
Ansanwan form sederhana php
Pemrograman Dasar Android
Fungsi-Fungsi PHP
Belajar pemrograman berbasis web menggunakan dhtmlx 2
Aneka trik j query pilihan
Membuat Form tambah dan update barang
Moduljavascript
Moduljavascript
Moduljavascript
Ad

More from Nur Fadli Utomo (20)

PDF
Pemrograman Web 9 - Input Form DB dan Session
PDF
Pemrograman Web 8 - MySQL
PDF
Desain Grafis 6 - UI/UX on Web Application
PDF
Pemrograman Web 7 - Basic PHP
PDF
Desain Grafis 5 - Good Graphic Design
PDF
Desain Grafis 3 - Color
PDF
Desain Grafis 4 - UI/UX
PDF
Pemrograman Web 4 - Bootstrap 3
PDF
Pemrograman Web 3 - CSS Basic Part 2
PDF
Desain Grafis 2 - Kerning Type
PDF
Desain Grafis 1 - Basic
PDF
Pemrograman Web 2 - CSS
PDF
Pemrograman Web - HTML
PDF
PC 9 - Matlab 2nd Chapter
PDF
PC 8 - Matlab
PDF
Pengolahan Citra 7 - Warna
PDF
GK 3 Penggambaran Titik dan Garis
PDF
Citra Biner
PDF
Pengolahan Citra 4 - Histogram Citra
PDF
Pengolahan Citra 3 - Operasi-operasi Digital
Pemrograman Web 9 - Input Form DB dan Session
Pemrograman Web 8 - MySQL
Desain Grafis 6 - UI/UX on Web Application
Pemrograman Web 7 - Basic PHP
Desain Grafis 5 - Good Graphic Design
Desain Grafis 3 - Color
Desain Grafis 4 - UI/UX
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 3 - CSS Basic Part 2
Desain Grafis 2 - Kerning Type
Desain Grafis 1 - Basic
Pemrograman Web 2 - CSS
Pemrograman Web - HTML
PC 9 - Matlab 2nd Chapter
PC 8 - Matlab
Pengolahan Citra 7 - Warna
GK 3 Penggambaran Titik dan Garis
Citra Biner
Pengolahan Citra 4 - Histogram Citra
Pengolahan Citra 3 - Operasi-operasi Digital

Pemrograman Web 5 - Javascript

  • 2. Adalah Bahasa script, yang tidak memerlukan compiler untuk menjalankannya, cukup dengan interpreter. Javascript untuk membuat program yang digunakan agar dokumen HTML yang ditampilkan dalam browser menjadi lebih interaktif dan dinamis Javascript bukanlah Bahasa pemrograman Java!
  • 3. Salah satu metod dari javascript adalah getElementById() Jadi metod html diambil berdasarkan deklarasi awal ID <p id="demo">JavaScript</p> document.getElementById("demo").innerHTML = "Hello JavaScript"; Misal, nama id adalah “demo” yang berisi pesan “Javascript”, akan digantikan oleh pesan “Hello Javascript”
  • 5. Mengubah style dari elemen HTML, bervariasi tergantung dari atribut HTML document.getElementById("demo").style.fontSize = ‘25px’; Ukuran font akan diubah menjadi ukuran 25px
  • 6. <body> <p id="demo">JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('demo').style.fontSize= ‘25px'">Click Me!</button> </body>
  • 7. Menyembunyikan elemen HTML dapat dilakukan dengan cara mengubah style.display document.getElementById('demo').style.display = 'none'; none, berarti tidak akan menampilkan apapun
  • 8. <body> <p id="demo">JavaScript can hide HTML elements.</p> <button type="button" onclick="document.getElementById('demo').style.displ ay='none'">Click Me!</button> </body>
  • 9. Selain menyembunyikan, JS juga bisa digunakan untuk menampilkan kembali elemen yang di-hide document.getElementById('demo').style.display = 'block';
  • 10. <body> <p>JavaScript can show hidden HTML elements.</p> <p id="demo" style="display:none">Hello JavaScript!</p> <button type="button" onclick="document.getElementById('demo').style.display='block'">Cli ck Me!</button> </body>
  • 11. Di dalam HTML, Kode JS harus dimasukkan diantara <script> dan </script> <script> document.getElementById("demo").innerHTML = “Javascript Pertama"; </script>
  • 13. Fungsi JS bias diletakkan di dalam <head> HTML, fungsi akan dipanggil saat trigger diaktifkan (biasanya di apply ke dalam button). <head> <script> function myFunction() { document.getElementById("demo").innerHTML = “Paragraf Berubah."; } </script> </head>
  • 14. <head> <script> function myFunction() { document.getElementById("demo").innerHTML = “Paragraf Berubah."; } </script> </head> <body> <p id="demo">Paragraf</p> <button type="button" onclick="myFunction()">Tekan INI</button> </body>
  • 15. Pointing fungsi (Where To) juga bisa dilakukan dari dalam tag <body> HTML Dengan meletakkan script di bagian bawah tag <body>, bisa meningkatkan kecepatan display script
  • 16. Script JS juga bisa diletakkan di dalam file yang berbeda, sama halnya dengan CSS. File yang berisikan script JS harus berekstensi .js untuk bisa menjalankannya. <script src=“scriptSaya.js"></script> Untuk menggunakan eksternal script cukup dengan menambahkan src (sumber) file dalam penempatan atribut <script>
  • 17. function myFunction() { document.getElementById("demo").innerHTML = “Paragraf Berubah."; } <body> <p id="demo">Paragraf</p> <button type="button" onclick="myFunction()">Tekan INI</button> <script src=“scriptSaya.js"></script> </body>
  • 18. • Writing into an HTML element, using innerHTML. • Writing into the HTML output using document.write(). • Writing into an alert box, using window.alert(). • Writing into the browser console, using console.log().
  • 19. innerHTML Untuk mengakses elemen HTML, javascript menggunakan method document.getElementById(NamaID) <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 6 + 13; </script>
  • 20. document.write() Untuk kebutuhan testing web dan penetrasi keamanan oleh developer, lebih mudah menggunakan document.write() <script> document.write(5 + 6); </script>
  • 21. Menggunakan document.write() setelah halaman HTML selesai Load, akan menghapus semua tampilan elemen HTML (hardcode di file .html tetap ada, hanya tampilan di dalam browser yang terhapus) <button type="button" onclick="document.write(5 + 6)">Try it</button>
  • 22. window.alert Digunakan untuk menampilkan kotak “Alert” pada window/layar, biasa digunakan untuk pemberitahuan atau pencegahan accidentally click pada website atau tampilan aplikasi berbasis HTML. <script> window.alert(6 + 13); </script>
  • 23. console.log Untuk keperluan debugging atau pencarian kode bermasalah, bisa menggunakan console.log() method untuk menampilkan data <script> console.log(5 + 6); </script>
  • 24. Kadang di dalam programming, kita akan menemukan data yang hanya memiliki 2 nilai : • YES/NO • ON/OFF • TRUE/FALSE Di dalam Javascript (atau di bidang ilmu sains lainnya) disebut Boolean, yang dimana hanya memiliki 2 nilai yaitu true dan false
  • 26. Javascript Statements (pernyataan) terdiri atas Nilai, Operator, Ekspresi, Kata Kunci, dan Komentar var x, y, z; x = 5; y = 6; z = x + y;
  • 27. Nilai fixed (tetap) JS disebut dengan literal, dan nilai yang dideklarasikan disebut variable. • JS Number and Strings, dimana Number bisa ditampilkan dengan menggunakan decimal atau tidak, dan Strings untuk menampilkan karakter alphabet misal Nama. Contoh, 100.60 (Number), dan “John Doe” (Strings) • Javascript Variable, digunakan untuk menyimpan nilai suatu data. Nilai data tersebut dideklarasikan dengan menggunakan syntax var dan tanda “=“ untuk memberikan nilai kepada suatu data. Contoh, var x; x = 6;
  • 28. JS menggunakan operator aritmetika untuk melakukan perhitungan. <p id="demo"></p> <script> var x, y; x = 5; y = 6; document.getElementById("demo").innerHTML = x + y; </script>
  • 29. Merupakan gabungan dari Values, Variables, and Operators. Proses perhitungannya dinamakan Evaluation. <script> document.getElementById("demo").innerHTML = 5 * 10; </script> OR <script> var x; x = 5; document.getElementById("demo").innerHTML = x * 10; </script>
  • 31. JS Keywords digunakan untuk melakukan aksi atau perintah yang akan dilakukan berdasarkan data variable yang di deklarasikan. <p id=“hitung"></p> <script> var x, y; x = 5 + 6; y = x * 10; document.getElementById(“hitung").innerHTML = y; </script>
  • 32. Comments syntax “ // “ tidak akan di eksekusi oleh program, berguna menampilkan komentar suatu kolom kode atau informasi mengenai suatu baris kode, biasanya sering digunakan untuk membangun pengembangan aplikasi berbasis komunitas, open source, atau git. <p id="demo"></p> <script> var x; x = 5; // x = 6; Baris kode ini tidak akan dieksekusi document.getElementById("demo").innerHTML = x; </script>
  • 33. Saat menulis kode program, biasanya kita diharuskan menggunakan pernyataan kondisi, yaitu : • Menggunakan if untuk menspesifik baris kode yang akan dieksekusi, jika kondisi yang dispesifikan adalah true • Menggunakan else untuk menspesifik baris kode yang akan dieksekusi, jika kondisi yang sama adalah false • Menggunakan else if untuk menspesifikan kondisi baru, jika kondisi pertama adalah false • Menggunakan switch untuk menspesifikan lebih dari satu blok kondisi yang akan dieksekusi
  • 34. IF statement <p id="demo">Selamat Malam!</p> <script> if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = “Selamat Siang!"; } </script>
  • 35. Else Statements <p id="demo"></p> <script> var hour = new Date().getHours(); var greeting; if (hour > 18) { greeting = “Selamat Pagi"; } else { greeting = “Selamat Malam"; } document.getElementById("demo").innerHTML = greeting; </script>
  • 36. Else IF Statements <p id="demo"></p> <script> var greeting; var time = new Date().getHours(); if (time > 10) { greeting = “Selamat Pagi"; } else if (time > 20) { greeting = “Selamat Siang"; } else { greeting = “Selamat Malam"; } document.getElementById("demo").innerHTML = greeting; </script>
  • 37. Switch Statements <p id="demo"></p> <script> var day; switch (new Date().getDay()) { case 0: day = “Minggu"; break; case 1: day = “Senin"; break; case 2: day = “Selasa"; break; case 3: day = “Rabu"; break; case 4: day = “Kamis"; break; case 5: day = “Jumat"; break; case 6: day = “Sabtu"; } document.getElementById("demo").innerHTML = “Hari ini adalah hari " + day; </script>
  • 38. • for - loops through a block of code a number of times • for/in - loops through the properties of an object • while - loops through a block of code while a specified condition is true • do/while - also loops through a block of code while a specified condition is true
  • 39. FOR Loops <p id="demo"></p> <script> var text = ""; var i; for (i = 0; i < 5; i++) { text += “Nomor ke-" + i + "<br>"; } document.getElementById("demo").innerHTML = text; </script>
  • 40. FOR Loops using Array <p id="demo"></p> <script> var cars = ["BMW", "Volvo", “Subaru", “Honda", “Jeep", "Ford"]; var i, len, text; for (i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + "<br>"; } document.getElementById("demo").innerHTML = text; </script>
  • 41. FOR/IN Loops <p id="demo"></p> <script> var txt = ""; var person = {fname:"John", lname:"Doe", age:25}; var x; for (x in person) { txt += person[x] + " "; } document.getElementById("demo").innerHTML = txt; </script>
  • 42. WHILE Loops <p id="demo"></p> <script> var text = ""; var i = 0; while (i < 10) { text += "<br>Nomor ke-" + i; i++; } document.getElementById("demo").innerHTML = text; </script>
  • 43. DO/WHILE Loops <p id="demo"></p> <script> var text = "" var i = 0; do { text += "<br>Nomor ke- " + i; i++; } while (i < 10); document.getElementById("demo").innerHTML = text; </script>
  • 44. • www.w3schools.com/js/ • javascript-roadtrip.codeschool.com/ • Bengkel Internet Pens-ITS. Materi Javascript • Modul Pemrograman HTML & CSS – STMIK AMIKOM Yogyakarta