 |
| Siswa-siswi MTs Muslimin Citapen sedang praktek membuat web sederhana.* |
Ekstrakurikuler Bahasa Pemrograman JavaScript ini hanya untuk perkenalan kepada siswa MTs/SMP.
Pertama-tama buat dulu folder di desktop untuk menyimpan file html dan
javascript, beri nama: belajar-javascript
Buka Sublime Text, buat file
html dengan cara klik kanan pada folder belajar-javascript
> New File > File > Save beri nama hello-world.html.
Buat tag html standar dengan menulis html > Tab
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Hello
World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Cara berinteraksi dengan
Javascript
1. Console
Console
ada di setiap browser, cara memunculkannya dengan klik kanan > Inspect atau Inspect element
Di sini
bisa ditulis sintaks sederhana seperti alert
yang berfungsi menampilkan kata pada pop
up browser.
Contoh:
alert(“Hello
World!”); // diakhiri dengan “;”
atau
alert
(“Awas komputer Anda terkena virus!”);
Maka browser akan memunculkan pop up dengan tulisan Awas komputer Anda terkena virus!
2. HTML
a.
Internal, dengan menyisipkan tag script di
antara <script>…. </script> di akhir body atau sebelum tutup body
tulis
alert(“Hello World!”);
b.
Eksternal, menghubungkan dengan file Javascript (misalnya latihan.js)
Dengan
menulis <script src=”latihan.js”></script> di akhir body atau
sebelum tutup body.
Internal:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Javascript</title>
</head>
<body>
<script>
console.log("Saya belajar Javascript");
document.write("Hello World!");
alert(“Awas ada penyusup!”);
</script>
</body>
</html>
·
Fungsi console.log() menampilkan output ke console
javascript;
·
Fungsi document.write() menampilkan output ke dokumen
HTML;
·
dan Fungsi alert() menampilkan output ke jendela dialog.
Eksternal:
Kita buat dua file, yaitu: file HTML dan Javascript.
Isi dari file latihan.js:
alert("Hello, ini adalah program JS eksternal!");
console.log(“Saya
sedang belajar javascript”);
Isi dari file index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript dari Nol</title>
</head>
<body>
<p>Tutorial
Javascript untuk Pemula</p>
<!--
Menyisipkan kode js eksternal -->
<script
src="latihan.js"></script>
</body>
</html>
Menggunakan console di
browser
Untuk memunculkannya dengan klik kanan di situs apapun kemudian pilih Inspect
(ada juga yang Inspect element), pilih Console dari deretan
menunya.
Di console kita bisa melakukan berbagai operasi.
Operasi aritmatika (+, -,
*, /) dan % = modulus (sisa bagi).
Contoh lakukan operasi-operasi di bawah ini (tekan Enter untuk melihat
hasilnya)
10 / 5
….
10 % 5
….
10 % 3
Lakukan juga operasi di bawah ini, berapa hasilnya?
1 + 2 *3- 4
Urutan operasi matematika mengikuti aturan KuKaBaTaKu singkatan dari () * / + -
Jadi supaya hasilnya 5, maka harus ditambahkan (1+2)*3-4
Operasi penugasan
var x
x = 10
x
//hasilnya akan 10
operator penugasan +=
x = 10
x += 5 //artinya 10 ditambahkan
dengan 5
//hasilnya akan 15
Operator Perbandingan
== sama dengan
!= tidak sama dengan
=== strick sama dengan
!== strick tidak sama
dengan
>, <, >=. <=
Operator perbandingan akan menghasilkan nilai boolean (true, false)
10 == 10 (apakah 10 sama dengan 10)
//maka jawabannya true
Coba lakukan operadi boolean di bawah ini:
10 == 15
10 != 10
10 != 15
10 == “10”
10 === “10”
catatan :
Untuk mengulang di console pakai tombol panah ke atas
Untuk menghapus tulisan di console klik ikon ᴓ Ctrl + L (clear console)
Operator Logika
&& = AND
|| = OR
! = NOT
Contoh
x = 5
Apakah x itu bilangan genap atau bukan?
(x % 2 == 0) à untuk menentukan bilangan genap
// hasilnya false
Menggabungkan dengan ekspresi lain, apakah bilangan itu lebih kecil dari
10
x = 12
Apakah x bilangan genap dan lebih kecil dari 10
(x % 2 ==0) && (x < 10)
// hasilnya false
&& itu harus kedua-duanya true
(x % 2 == 0) || (x < 10)
salah satu benar pasti true
!(x < 10)
//hasilnya NOT
Operator String
(penambahan string dengan tanda +)
a = “apple”
b= “pen”
a + b
//hasilnya “applepen”
a + “ “ + b
//hasilnya “apple pen”
coba jumlahkan
“10” + 10 + 10
10 + 10 + “10”
‘jum’at’ à hasilnya akan error
‘jum\’at’ à harus menyisipkan escape karakter back slash (\)
Operator typeof (untuk
mengetahui tipe data)
typeof (operand)
hitung hasil di bawah ini:
typeof (23)
typeof (“10”)
typeof (true)
Operator kondisional
(kondisi) ? benar : salah
(x % 2 == 0) ? “genap” : “ganjil”
length (untuk menghitung jumlah karakter)
var nama = “dede suhaya”
nama.length hasilnya 11
Sumber: Disarikan dari Kanal Web Programming Unpas
