�ݺ�ߣ

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>
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>
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>
onclick="document.getElementById('demo').style.display='block'">Cli
ck Me!</button>
</body>

Di dalam HTML, Kode JS harus dimasukkan diantara <script>
dan </script>
<script>
“Javascript Pertama";
</script>

<body>
<p id="demo"></p>
<script>
“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() {
“Paragraf Berubah.";
}
</script>
</head>

<head>
<script>
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=/masatooetomo/pemrograman-web-5-javascript/“scriptSaya.js"></script>
Untuk menggunakan eksternal script cukup dengan
menambahkan src (sumber) file dalam penempatan atribut
<script>

document.getElementById("demo").innerHTML = “Paragraf Berubah.";
}
<body>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Tekan INI</button>
<script src=/masatooetomo/pemrograman-web-5-javascript/“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>
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>

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) {
“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>";
}
</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++;
}
</script>

DO/WHILE Loops
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>Nomor ke- " + i;
i++;
}
while (i < 10);
</script>

• www.w3schools.com/js/
• javascript-roadtrip.codeschool.com/
• Bengkel Internet Pens-ITS. Materi Javascript
• Modul Pemrograman HTML & CSS – STMIK AMIKOM
Yogyakarta

�ݺ�ߣ

Pemrograman Web 5 - Javascript

More Related Content

Pemrograman Web 5 - Javascript