Mengenal Bahasa Pemrograman JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membangun website dari sisi client
(client side). JavaScript membuat website Anda menjadi lebih dinamis dan interaktif. Sesuatu yang
tidak bisa dilakukan HTML dan CSS.
Bahasa pemrograman JavaScript adalah bahasa tingkat tinggi, berjenis scripting (scripting
language), ditulis secara dinamis (dynamically typed), dan dijalankan oleh interpreter. Apa
maksudnya?
JavaScript tergolong bahasa tingkat tinggi. Artinya ia punya aturan penulisan yang menyerupai
bahasa manusia. Dengan begitu, belajar JavaScript jadi lebih mudah. Bahkan untuk pemula
sekalipun.
Sedangkan scripting language maksudnya JavaScript adalah bahasa pemrograman yang tertanam
di dalam program yang lebih besar, seperti web browser. Jadi, yang bisa menggunakan JavaScript
adalah program tersebut.
Sementara dynamically typed artinya, satu variabel pada program dengan coding JavaScript dapat
berisi tipe data yang berbeda. Anda bisa mengisi variabel dengan angka, kemudian menggantinya
ke huruf tanpa mengalami error.
JavaScript harus dijalankan oleh interpreter. Maksudnya, ia harus diterjemahkan ke dalam bahasa
yang dimengerti komputer agar bisa dijalankan. Nah, proses penerjemahan ini dilakukan secara
otomatis oleh web browser.

Belajar JavaScript, Anda cuma membutuhkan dua tools, yaitu:

1. Web Browser
Web browser berfungsi untuk menerjemahkan (interpreter) bahasa JavaScript ke bahasa
komputer. Beberapa web browser yang bisa Anda gunakan antara lain Google Chrome, Mozilla
Firefox, Microsoft Edge, dan lain-lain.
2. Code Editor
Code editor berfungsi untuk menuliskan sintaks atau kode program agar menjadi sebuah
program JavaScript utuh. Beberapa code editor yang bisa Anda coba diantaranya Visual Studio
Code, Sublime Text, dan Notepad++.
Setelah mempersiapkan keduanya, pastikan Anda memahami dulu beberapa panduan dalam
bahasa pemrograman JavaScript.
Hal-hal yang Perlu Dipahami Sebelum Menggunakan JavaScript
Sebelum Anda lanjut belajar coding JavaScript, ada beberapa hal yang wajib Anda pahami. Mulai
dari aturan penulisannya, variabel, tipe data, sampai operator JavaScript. Mari simak penjelasan
selengkapnya!
Aturan Penulisan Kode JavaScript
Bahasa pemrograman JavaScript punya beberapa aturan penulisan kode yang harus Anda patuhi,
diantaranya:
1. Whitespace
Whitespace adalah area kosong berisi karakter tidak terlihat pada JavaScript, seperti spasi, tab, atau
enter. Whitespace berguna untuk menata susunan kode agar terlihat lebih rapi.
Penggunaan Whitespace tidak akan menambah ukuran file JavaScript secara signifikan, sehingga
kinerja website tetap optimal. Ditambah lagi, Whitespace akan diabaikan ketika browser
menjalankan JavaScript.
Berikut adalah contoh penggunaan Whitespace saat coding JavaScript:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
2. Line Length
Line Length atau panjang baris adalah jumlah karakter JavaScript yang ada dalam satu baris kode.
Idealnya, satu baris kode terdiri kurang dari 80 karakter. Hal ini bertujuan untuk meningkatkan
kenyamanan saat coding JavaScript.
Jika sebuah perintah JavaScript dalam satu baris terlalu panjang, potong perintah tersebut menjadi
dua baris. Usahakan untuk memotong perintah setelah operator (+,-,=) atau koma (,) seperti contoh
berikut:
document.getElementById("demo").innerHTML =
"Hello Dolly.";
3. Comments
Pada JavaScript, komentar berguna untuk mencatat maksud dari sebuah atau beberapa baris kode.
Untuk itu, pastikan menulis komentar dengan bahasa yang ringkas dan mudah dimengerti.
Ada dua cara menandai komentar di JavaScript. Yang pertama yaitu komentar satu baris yang
diawali dengan tanda // seperti contoh berikut:
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
Cara yang kedua adalah komentar beberapa baris dengan tanda /* pada awal dan akhir komentar
seperti ini:
/*The code below will change
the heading with id = "myH"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
4. Case Sensitive
Bahasa pemrograman JavaScript bersifat Case Sensitive, artinya ia membedakan penulisan huruf
besar dan kecil. Contohnya variabel bernama „helloworld‟ akan dianggap berbeda dengan perintah
„HelloWorld‟.
Untuk itu, usahakan selalu konsisten dalam menulis kode. Sebab, kesalahan penulisan sekecil
apapun dapat menyebabkan error pada website Anda. Jika perlu, hanya gunakan huruf kecil saat
coding JavaScript.
5. Statement Rules
Statement atau pernyataan adalah instruksi atau alur kerja sebuah program. Pada JavaScript,
terdapat dua aturan dalam penulisan statement. Yang pertama adalah simple statement yang diakhiri
dengan titik koma (;) seperti berikut:
const cars = ["Volvo", "Saab", "Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
}; // Dengan titik koma
Sementara yang kedua adalah complex statement yang bisa diakhiri tanpa titik koma seperti contoh
yang satu ini:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
} // Tanpa titik koma
6. Reserved Words
Reserved Words adalah kata-kata khusus yang tidak boleh digunakan sebagai nama variabel atau
fungsi. Pasalnya, kata-kata tersebut sudah dipakai untuk menjalankan perintah bawaan pada bahasa
pemrograman JavaScript.
Berikut adalah daftar Reserved Words JavaScript yang wajib Anda ketahui:
Berikut aturan penulisan untuk beberapa Reserved Words di atas:
 While:
while (i < 10) {
text += "The number is " + i;
i++;
}
 For:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
 Switch Case:
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
Selain memahami aturan penulisan kode, Anda juga harus paham tentang variabel. Simak
penjelasannya pada poin berikut ini.
Variabel JavaScript
Variabel adalah sebuah wadah yang digunakan untuk menampung nilai atau data pada bahasa
pemrograman. Variabel yang bisa diberi nama ini bisa menampung angka, tulisan, boolean, dan
lain-lain.
Ada tiga tahap dalam menggunakan variabel ketika belajar JavaScript, yaitu:
1. Declaration- Tahap mendaftarkan variabel ke dalam program yang ditulis.
2. Initialization- Tahap menyiapkan memori yang nantinya digunakan oleh variabel.
3. Assignment – Tahap menetapkan nilai spesifik untuk disimpan ke dalam variabel.
Contoh penerapannya seperti ini:
 var x; //declaration & initialization
x = 10; //assignment
Nah, tiga Reserved Words yang dapat Anda gunakan untuk mendeklarasikan variabel yaitu var,
let, dan const. Tapi untuk pemula, direkomendasikan untuk menggunakan var saja karena punya
aturan yang lebih simpel.
Berikut beberapa aturan pembuatan variabel yang harus Anda perhatikan:
1. Hindari Penggunaan Spasi – Jika nama variabel terdiri dari dua kata, jangan gunakan spasi
sebagai pemisah. Sebaiknya gunakan underscore seperti berikut:
var born_date;
2. Hindari Awalan Angka – Angka tidak boleh digunakan sebagai awalan nama variabel, tapi bisa
digunakan untuk mengakhiri nama variabel, seperti:
var 1date; //ini salah
var date1; //ini benar
3. Gunakan camelCase – camelCase adalah standar penulisan variabel yang direkomendasikan.
Format dasarnya adalah seluruh kata pertama memakai huruf kecil dan huruf pertama kata
kedua memakai kapital, contohnya:
var bornYear;
4. Gunakan Shorthand – Shorthand adalah metode yang digunakan untuk menyingkat penulisan
variabel. Gunanya agar kode program yang dihasilkan jadi lebih ringkas. Berikut contoh
penerapannya:
var name = "Arif",
age = 17,
pass = true;
Dengan adanya Shorthand, Anda tidak perlu menuliskan var pada ‘age’ dan ‘pass’, meskipun
mereka berdua sebenarnya adalah variabel.
Setelah belajar apa itu Variabel, berikutnya mari mempelajari apa itu tipe data JavaScript.
Tipe Data JavaScript
Seperti yang sudah sedikit dijelaskan di atas, nilai atau value disimpan pada variabel. Nah, nilai
tersebut bisa berisi beberapa tipe data berikut:
1. Number
Tidak seperti bahasa pemrograman lain, JavaScript tidak memakai tipe data angka yang berbeda-
beda. Misalnya, integer, float, dan long. Ia hanya punya satu tipe angka, yaitu number yang
sanggup menyimpan data hingga 64 bit.
Demikian, JavaScript tetap bisa menggunakan berbagai jenis bilangan, seperti:
 Bilangan Bulat – Misalnya 10, 1500, dan 12345.
 Bilangan Pecahan – Contohnya 3.14, 0.5, dan 100.00.
 Bilangan Eksponensial – Misalnya 123e5 atau 123e-5.
 Bilangan Negatif – Contohnya -0.25 atau -123.
 Bilangan Spesial – Misalnya Infinity (10/0), -Infinity (-10/0), dan NaN (0/0).
2. String
Pada JavaScript, String adalah tipe data yang digunakan untuk menuliskan data tekstual (plain
text). Untuk membuat string, Anda perlu menambahkan tanda petik pada teks tersebut. Bisa petik
dua (“”) atau petik satu (‘’).
Sebenarnya tidak ada aturan baku yang menjelaskan kapan harus menggunakan petik dua atau
petik satu. Meski begitu, disarankan untuk memakai petik dua untuk penulisan string. Lalu,
gunakan petik satu untuk penekanan di teks tertentu, contohnya:
"Besok adalah hari Jum’at"
Anda juga bisa menerapkan yang sebaliknya. Gunakan petik satu untuk memulai string, jika teks
tertentu memakai tanda petik dua, seperti:
‘Mereka sedang melakukan kegiatan “Gerakan Tanam Pohon”’
3. Boolean
Boolean adalah sebuah tipe data JavaScript yang digunakan untuk memberikan nilai
logika true atau false. Nah, Boolean berguna untuk menentukan aksi berbeda dan mengatur alur
kerja program.
Contoh penggunaan Boolean saat coding JavaScript sebagai berikut:
Boolean(10 > 20);
// false
4. Function
Function adalah tipe data dalam bentuk perintah yang dapat digunakan di bagian program yang
memerlukan. Untuk menggunakannya, Anda perlu membuat Function terlebih dahulu, baru
kemudian memanggilnya.
Ketika belajar JavaScript, ada dua jenis Function yang perlu Anda ketahui, yaitu:
 Built-in Function – Function bawaan milik JavaScript yang siap digunakan. Contohnya alert(),
confirm(), dan prompt().
 User-defined Function – Function yang Anda buat sendiri. Formatnya adalah function
namaFunction().
Berikut adalah contoh penggunaan Function pada JavaScript:
var x = myFunction(5, 4);
function myFunction(a, b) {
return a * b; }
5. Array
Array adalah tipe data JavaScript yang digunakan untuk menampung lebih dari satu nilai dan
memiliki index.
Dengan Array, Anda bisa memasukkan tipe data yang berbeda dalam satu Array. Selain itu, ia
berguna untuk menghemat penggunaan variabel ketika coding JavaScript.
Anda bisa memakai Array dengan membuat kurung siku. Lalu, menulis nilai Array di dalamnya dan
dipisahkan dengan koma.
Contoh Array pada bahasa pemrograman JavaScript adalah sebagai berikut:
var person = ["John", "Doe", "Ben"];
6. Object
Mirip dengan Array, Object adalah tipe data yang memiliki lebih dari satu nilai. Bedanya, Object
tidak punya index tapi nama.
Kenapa Anda harus menggunakan Object saat belajar JavaScript? Ternyata, Object dapat
mengorganisir data lebih baik dari Array. Sebab, Anda bisa memasukkan Function dan Array pada
Object.
Hasilnya, Anda bisa menghemat baris kode yang dihasilkan saat coding JavaScript. Nah, di bawah
ini adalah contoh pemakaian Object pada JavaScript:
const person = {
firstName: "John",
lastName : "Doe",
score : [5,7,8,10,9],
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Selain menguasai tipe data JavaScript, pastikan Anda juga belajar tentang operator JavaScript.
Karena, kedua hal ini saling berkaitan.
Operator JavaScript
Pada JavaScript, operator adalah sebuah simbol yang digunakan untuk melakukan operasi. Baik itu
perhitungan, perbandingan, atau logika. Nah, jenis-jenis operator JavaScript adalah sebagai
berikut:
1. Aritmatika
Operator aritmatika adalah operator yang digunakan untuk melakukan perhitungan matematika.
Misalnya, penambahan, pengurangan, dan perkalian. Berikut contoh pemakaian operator
aritmatika saat coding JavaScript:
5 * 6;
10 % 2;
(1 + 2) / 3 * 6;
2. Penugasan
Ketika belajar JavaScript, operator penugasan (assignment) adalah operator yang digunakan untuk
mendeklarasikan nilai dari suatu variabel.
Operator Penugasan
 Sama Dengan (=)
 Tambah Sama Dengan (+=)
 Kurang Sama Dengan (-=)
 Kali Sama Dengan (*=)
 Bagi Sama Dengan (/=)
 Modulus (sisa pembagian) Sama Dengan (%=)
 Eksponensial Sama Dengan (**=)
Contoh operator penugasan bisa Anda lihat pada contoh berikut:
var x = 10;
 x += 5; // a =10 +5
3. Perbandingan
Operator perbandingan (comparison) adalah operator pada JavaScript yang dipakai untuk
membandingkan nilai dari dua variabel. Nah, operator perbandingan ini nantinya akan
menghasilkan Boolean (true atau false).
Daftar Operator Perbandingan
 Nilai Sama Dengan (==)
 Nilai dan Tipe Data Sama Dengan (===)
 Tidak Sama Dengan (!=)
 Nilai dan Tipe Data Tidak Sama Dengan (!==)
 Lebih Besar Dari (>)
 Lebih Kecil Dari (<)
 Lebih Besar Dari atau Sama Dengan (>=)
 Lebih Kecil Dari atau Sama Dengan (<=)
Berikut contoh penggunaan operator perbandingan:
10 <= 8; //false
4. Logika
Operator logika adalah operator yang digunakan untuk menentukan logika dari beberapa value
yang digabungkan. Mirip dengan operator perbandingan, operator yang satu ini juga menghasilkan
Boolean.
Operator Deskripsi
&& And (dan)
|| Or (atau)
! Not (tidak)
Contohnya seperti ini:
var x = 8;
(x % 2 == 0) && (x < 10);
True
5. String
Sesuai namanya, operator string adalah operator yang digunakan untuk menggabungkan nilai dari
tipe data string. Caranya dengan menggunakan tanda + seperti pada operator aritmatika.
Berikut contohnya saat coding JavaScript:
var text1 = "John";
var text2 = "Doe";
var text3 = text1 + " " + text2;
6. Typeof
Operator typeof adalah operator yang dipakai untuk mengetahui tipe data dari suatu nilai. Berikut
adalah contoh penggunaan operator Typeof di bahasa pemrograman JavaScript:
typeof "John" // Returns "string"
typeof 3.14 // Returns "number"
 typeof false // Returns "boolean"
typeof [1,2,3,4] // Returns "object"
7. Kondisional
Operator kondisional adalah operator yang digunakan untuk melakukan pengecekan pada suatu
kondisi. Ia juga dapat menentukan nilai ketika kondisi tersebut bernilai true dan false.
Contohnya seperti ini:
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice"; //"Beer"
Nah, itu tadi beberapa operator yang akan Anda temukan ketika belajar JavaScript. Berikutnya,
mari memahami beberapa cara menulis kode JavaScript.
Cara Menulis Kode JavaScript
Ada dua cara yang bisa Anda coba untuk membuat kode JavaScript, yaitu:
1. Langsung di File HTML (Internal JavaScript)
Sesuai namanya, Anda bisa langsung memasukkan kode JavaScript pada file berformat HTML.
Caranya dengan menuliskan kode di antara tag <script> </script>, lalu tempatkan skrip tersebut
pada tag <body>.
Contohnya seperti berikut:
<!DOCTYPE html>
<html>
<body>
<script>
alert("Ini adalah kode JavaScript!")
</script>
</body>
</html>
2. Terpisah dari File HTML (External JavaScript)
Cara kedua adalah dengan membuat file JavaScript terpisah, lalu menghubungkannya dengan file
HTML. External JavaScript lebih direkomendasikan, karena:
 Reusability – Memungkinkan JavaScript digunakan di banyak file HTML.
 Readability – Membuat kode program jadi lebih mudah dibaca.
 Conciseness – Meringkas jumlah baris kode yang dihasilkan.
Berikut adalah contoh penggunaan External JavaScript:
 File HTML:
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>
 File JavaScript:
 alert("Ini adalah kode JavaScript!");
Pada poin berikutnya, Anda akan mempraktikkan tutorial JavaScript untuk membuat sebuah
program sederhana.
Cara Menempatkan Code JavaScript dan Membuatnya
Mari kita bahas berbagai cara membuat kode JavaScript di dalam HTML:
Seperti yang sudah dijelaskan, Anda membutuhkan web browser dan code editor untuk
mempraktikkan tutorial JavaScript. Nah, di sini kami menggunakan browser Google Chrome dan
editor Visual Studio Code.
Selain itu, perlu menyiapkan sebuah folder pada komputer sebagai tempat menyimpan file HTML
dan JavaScript. Di sini kita buat folder dengan nama belajarjs.
 Tag <script>
Untuk membuat kode JavaScript di dalam HTML kita bisa menulisnya langsung di dalam file
HTML, namun kode JavaScript harus berada di dalam tag <script>.
<script>
document.getElementById("demo").innerHTML = "JavaScript Pertamaku.”;
</script>
Kode ini bisa kita tempatkan di dalam tag HTML <head> atau <body>.
Kita bisa menempatkannya di mana saja di dalam tag <head> atau <body>, tapi umumnya
kode JavaScript ditempatkan tepat sebelum tag </head> atau </body>.
Untuk menulis kode JavaScript di dalam tag <script> HTML, kodenya akan terlihat seperti ini:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript pada Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "JavaScript Pertamaku.";
</script>
</body>
</html>
Simpan file dengan nama scrip.html.
Selanjutnya buka folder belajarjs, klik kanan file scrip.html > Open with > Google Chrome.
Anda akan melihat tampilan seperti ini:

 Function dan Event JavaScript

 Function JavaScript adalah sekumpulan kode JavaScript, yang dapat dijalankan saat
“dipanggil”.
Misalnya, suatu function dapat dipanggil saat suatu event terjadi, seperti saat pengguna
mengklik tombol.
 JavaScript di <head> atau <body>
Anda dapat menempatkan sejumlah script JavaScript dalam dokumen HTML. JavaScript dapat
ditempatkan di tag <head> atau <body> pada bagian halaman HTML, atau keduanya.
 JavaScript di <head>
Dalam contoh ini, function JavaScript ditempatkan di <head> pada halaman HTML. Function
tersebut dipanggil (invoked) ketika sebuah tombol diklik.
Contoh :
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Merubah Paragraf.";
}
</script>
</head>
<body>
<h2>JavaScript di Head</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
</body>
</html>
Simpan file dengan nama head.html.
Selanjutnya buka folder belajarjs, klik kanan file head.html > Open with > Google Chrome.
Anda akan melihat tampilan seperti ini:

 JavaScript di <body>
Dalam contoh ini, function JavaScript ditempatkan di bagian <body> pada halaman HTML.
 Function tersebut dipanggil (invoked) ketika sebuah tombol diklik.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript pada bagian Body</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph diubah.";
}
</script>
</body>
</html>
Simpan file dengan nama head.html.
Hasilnya:

Menempatkan script di bagian bawah elemen <body> meningkatkan kecepatan tampilan,

karena interpretasi script memperlambat tampilan.
 JavaScript Eksternal
JavaScript juga dapat ditempatkan di file eksternal. External file: myScript.js.
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Script eksternal akan praktis jika kode yang sama digunakan di banyak halaman web yang
berbeda.
File JavaScript memiliki ekstensi file .js.
Untuk menggunakan script eksternal, letakkan nama file script di atribut src (sumber) dari tag
<script>.
Contoh :
<!DOCTYPE html>
 <html>
<body>
<h2>External JavaScript</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
<p>(myFunction disimpan dalam file eksternal yang disebut "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Simpan file dengan nama index.html.
Hasilnya:

Penempatan script eksternal dapat diletakan pada <head> atau <body> sesuai dengan yang
diinginkan.
Script eksternal tidak boleh berisi tag <script>
 Manfaat JavaScript Eksternal
Menempatkan script di file eksternal memiliki beberapa keuntungan:
o Javascript eksternal memisahkan HTML dan kode
o JavaScript eksternal membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
o File JavaScript yang disimpan dalam cache dapat mempercepat pemuatan halaman
Untuk menambahkan lebih dari satu file script ke sebuah halaman – gunakan beberapa tag
script seperti berikut.
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
 Referensi Eksternal
Script eksternal dapat direferensikan dengan URL lengkap atau dengan relative path pada
halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk ditautkan ke script.
<!DOCTYPE html>
<html>
 <body>
<h2>External JavaScript</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
<p>(myFunction disimpan dalam file eksternal bernama "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
Contoh ini menggunakan script yang terletak di folder tertentu di situs web saat ini.
!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
<p>(myFunction disimpan dalam file eksternal bernama "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>
Contoh ini menautkan ke script yang terletak di folder yang sama dengan halaman saat ini:
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">Sebuah paragraf.</p>
<button type="button" onclick="myFunction()">Klik disini</button>
<p>(myFunction disimpan dalam file eksternal bernama "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>

JavaScript Display Possibilities

JavaScript dapat “menampilkan” atau menghasilkan output data dengan berbagai cara, contohnya
seperti berikut :
 Penulisan ke dalam elemen HTML, menggunakan innerHTML.
 Penulisan ke dalam output HTML menggunakan document.write ().
 Penulisan ke dalam kotak peringatan, menggunakan window.alert ().
 Penulisan ke konsol browser, menggunakan console.log ().
 Penggunaan innerHTML
Untuk mengakses elemen HTML, JavaScript dapat menggunakan method
document.getElementById (id).
Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML.
Contohnya :
 <!DOCTYPE html>
<html>
<body>

<h2>Halaman web pertamaku</h2>

<p>Paragraf pertamaku</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>
Simpan file dengan nama innerhtml.html.
Hasilnya ;

Mengubah properti innerHTML dari elemen HTML adalah cara umum untuk menampilkan data
dalam HTML.
 Penggunaan document.write()
Untuk tujuan pengujian, maka akan lebih mudah menggunakan document.write().
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Halaman web pertamaku</h2>

<p>Paragraf pertamaku</p>

<p>Jangan pernah memanggil document.write setelah dokumen selesai dimuat.

Ini akan menimpa seluruh dokumen.</p>

<script>
document.write(5 + 6);
 </script>

</body>
</html>
Simpan file dengan nama docwrite.html.
Hasilnya ;

Menggunakan document.write () setelah dokumen HTML dimuat, akan menghapus semua

HTML yang ada.
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Halaman web pertamaku</h2>

<p>Paragraf pertamaku</p>

<button type="button" onclick="document.write(5 + 6)">Klik disini</button>

</body>
</html>
Simpan file dengan nama docwrite01.html.
Hasilnya ;
 Klik Button : Klik disini.
Hasilnya.

Metode document.write () sebaiknya hanya digunakan untuk tujuan pengujian.

 Penggunaan windows.alert()
Untuk menampilkan sebuah data, dapat dilakukan dengan menggunakan alert box.
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Halaman web pertamaku</h2>

<p>Paragraf pertamaku</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
Simpan file dengan nama winalert.html.
Hasilnya.
 Klik OK.

Penggunaan keyword window dapat diskip.

Dalam JavaScript, objek window adalah objek cakupan global, yang berarti bahwa variabel,
properti, dan metode secara default dimiliki oleh objek window. Ini juga berarti bahwa
menentukan keyword window adalah pilihan opsional.
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Halaman web pertamaku</h2>

<p>Paragraf pertamaku</p>

<script>
alert(5 + 6);
</script>

</body>
</html>
Hasilnya sama.
 Penggunaan console.log()
 Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript.
Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di
Javascript selalu ditampilkan di dalam Console.
Selain console.log(), terdapat juga beberapa fungsi untuk debugging seperti console.debug(),
console.info(), console.error(), console.dir(), dsb.
Untuk tujuan debugging dapat dilakukan dengan cara memanggil metode console.log () di
browser untuk menampilkan data.
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 pada keyboard akan mengaktifkan debugging.</p>

<p>Lalu klik "Console" pada menu debugger.</p>
<p>Kemudian click Run kembali.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>
Simpan file dengan nama consolelog.html.
Hasilnya.

JavaScript Print
JavaScript tidak memiliki object print atau method print apapun untuk mencetak data.
Kita tidak dapat mengakses perangkat output dari JavaScript.
Satu-satunya pengecualian adalah kita dapat memanggil method window.print () di browser untuk
mencetak konten window saat ini.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Method window.print()</h2>
<p>Klik tombol untuk mencetak halaman saat ini.</p>
<button onclick="window.print()">cetak halaman ini</button>
</body>
</html>
Simpan file dengan nama winalert.html.
Hasilnya

Mengenala Variabel dan Konstanta Pada Javascript

Variabel merupakan “tempat” untuk menyimpan informasi sementara. Informasi yang disimpan
dalam variabel dapat berubah sesuai dengan kebutuhan.
Sementara itu, konstanta juga merupakan tempat untuk menyimpan informasi, hanya saja nilai
pada konstanta (idealnya) tidak dapat diubah. Pada JavaScript, kondisi ini tergantung pada
kemampuan browser, karena meskipun telah didefinisikan sebagai konstanta, nilainya dapat
berubah.
Cara penulisan Variabel dan Konstanta di JavaScrip
 Nama variabel bersifat case-sensitif, artinya huruf besar dan huruf kecil berpengaruh. Contoh:
nilai, Nilai dan nilAi merupakan 3 buah variabel yang berbeda.
 Nama variabel harus diawali dengan huruf, $ atau _(underscore).
 Nama variabel tidak boleh diawali angka.
 Nama variabel tidak boleh menggunakan keywords (kata-kata kunci) yang memiliki fungsi atau
arti khusus dalam JavaScript. Contoh: for, if, while, dll.
 Variabel didefinisikan dengan var, sementara konstanta didefinisikan dengan const.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Variabel Pada Javascript</title>

</head>
<body>
<h2>Mengenal Variabel Pada Javascript</h2>

<div id="nama"></div>
<div id="alamat"></div>

<script>
var nama = "Bejo";
var alamat = "Semarang";
document.getElementById("nama").innerHTML = nama;
document.getElementById("alamat").innerHTML = alamat;
</script>
</body>
</html>
Simpan file dengan nama variable.html.
Hasilnya

Contoh lainnya:
<!DOCTYPE html>
<html>
<body>
<h2>Variabel pada JavaScript</h2>
<p>Pada contoh ini x, y dan z adalah variabel.</p>
<p id="demo"></p>
<script>
 var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML ="Nilai z adalah :" + z;
</script>
</body>
</html>

Fungsi Matematika JavaScript

Objek math atau fungsi matematika JavaScript memberi Anda properti dan metode matematika
untuk konstanta dan fungsi matematika. Tidak seperti objek global lainnya, Math bukan
konstruktor. Semua properti dan object Math bersifat statis dan dapat dipanggil dengan
menggunakan Math sebagai objek tanpa membuatnya.
Fungsi Matematika JavaScript
 Math.max() - Untuk menemukan nilai tertinggi.
Math.min(19, 81, 72, -5, -94, 50);
 Math.min() - Untuk menemukan yang terendah.
Math.max(20, 65, -23, 69, -8, 79);
 Math.random() – Akan mengembalikan nilai numerik acak antara 0 (inklusif), dan 1 (eksklusif)
Math.random();
 Math.round() – Untuk membulatkan angka ke bilangan bulat terdekat, naik atau turun
Math.round(81.7);
Math.round(9.2);
 Math.ceil() – untuk membulatkan angka ke atas dekat dengan integer:
Math.ceil(47.5);
Math.ceil(14.9);
 Math.floor() – untuk membulatkan angka ke bawah ke bilangan bulat terdekat
Math.floor(29.3);
Math.floor(44.9);

Properti untuk Konstanta

Properti objek matematika JavaScript digunakan untuk konstanta matematika. Anda mungkin
akrab dengan beberapa di antaranya, seperti nomor Pi, atau nomor Euler. Jika Anda
membutuhkannya dalam kode JavaScript, Anda dapat menggunakan properti yang tercantum
dalam tabel di bawah ini. Anda akan menemukan kedua nama nilai konstan dan perkiraan yang
ditentukan untuk masing-masing.
Property Description
E Mengembalikan Angka Euler (sekitar 2,718).
LN2 Berfungsi untuk mengembalikan natural logaritma dari 2 (sekitar 0,693)
 LN10 Mengembalikan logaritma natural dari 10 (sekitar 2,302)
LOG2E Mengembalikan logaritma base-2 dari E (sekitar 1.442)
LOG10E Mengembalikan logaritma base-10 dari E (sekitar 0.434)
PI Mengembalikan PI (sekitar 3,1416)
SQRT1_2 Mengembalikan square root dari 1/2 (sekitar 0,707)
SQRT2 Mengembalikan square root dari 2 (approximately 1,414)
Metode yang Digunakan
Anda juga dapat menggunakan berbagai metode (methods) untuk bekerja dengan objek
matematika. Mereka akan membiarkan Anda mendapatkan nilai dari operator aritmatika serta
trigonometri.
Lihat tabel di bawah ini untuk membiasakan diri dengan metode. Saat Anda belajar menggunakan
metode ini, bekerja dengan objek matematika akan sangat mudah.
Metode Deskripsi
abs(var1) Mengembalikan nilai absolut dari var1
acos(var1) Mengembalikan arccosine dari var1 pada radian
asin(var1) Mengembalikan arcsine dari var1 di radian
Mengembalikan arcangent dari var1 sebagai nilai numerik antara –
atan(var1)
PI/2 dan PI/2 radian
atan2(var2,var1) Mengembalikan arctangent dari hasil bagi argumen
Mengembalikan var1 yang dibulatkan ke atas ke bilangan bulat
ceil(var1)
terdekat
cos(var1) Mengembalikan kosinus var1 (var1 dalam radian)
exp(var1) Nilai kembalian Evar1
Berguna untuk mengembalikan var1 yang telah dibulatkan ke bawah
floor(var1)
menuju bilangan bulat terdekat
log(var1) Mengembalikan logaritma natural (basis E) dari var1
max(var1,var2,var3,…,n) Mengembalikan nomor dengan nilai tertinggi
min(var1,var2,var3,…,n) Mengembalikan nomor dengan nilai terendah
pow(var1,var2) Mengembalikan nilai var1 ke pangkat var2
random() Berguna untuk mengembalikan random number antara 0 dan 1
round(var1) Bulatkan var1 ke bilangan bulat terdekat
sin(var1) Mengembalikan sinus dari var1 (var1 dalam radian)
sqrt(var1) Mengembalikan akar kuadrat dari var1
tan(var1) Mengembalikan tangent of angle
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Penggunaan Fungsi Math pada JavaScript</h2>
<p id="demo1"></p>
 <p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<p id="demo9"></p>
<p id="demo10"></p>
<p id="demo11"></p>
<p id="demo12"></p>
<p id="demo13"></p>
<script>
document.getElementById("demo1").innerHTML ="Math.PI: " + Math.PI;
document.getElementById("demo2").innerHTML ="Math.round(4.7): " + Math.round(4.7);
document.getElementById("demo3").innerHTML ="Math.round(4.4): " + Math.round(4.4);
document.getElementById("demo4").innerHTML ="Math.pow(8,2): " + Math.pow(8,2);
document.getElementById("demo5").innerHTML ="Math.sqrt(64): " + Math.sqrt(64);
document.getElementById("demo6").innerHTML ="Math.abs(-4.7): " + Math.abs(-4.7); //return
4.7
document.getElementById("demo7").innerHTML ="Math.ceil(4.4): " + Math.ceil(4.4); //return 5
document.getElementById("demo8").innerHTML ="Math.floor(4.7): " + Math.floor(4.7); //return
4
document.getElementById("demo9").innerHTML ="Math.sin(90*Math.PI/180) : " +
Math.sin(90*Math.PI/180); //return 1 (the sin of 90 degrees
document.getElementById("demo10").innerHTML ="Math.cos(90*Math.PI/180) : " +
Math.cos(90*Math.PI/180); //return 1 (the cos of 0 degrees
document.getElementById("demo11").innerHTML ="Math.min(0,150,30,20,-8,-200) : " +
Math.min(0,150,30,20,-8,-200); //return -200
document.getElementById("demo12").innerHTML ="Math.max(0,150,30,20,-8,-200) : " +
Math.max(0,150,30,20,-8,-200); //return 150
document.getElementById("demo13").innerHTML ="Math.random() : " + Math.random();
//return a random number
</script>
</body>
</html>
Simpan file dengan nama fungmath.html.
Hasilnya
Membuat fungsi pada Javascript
Fungsi pada JavaScript adalah sekumpulan kode yang dirancang untuk melakukan tugas tertentu.
Sebuah fungsi JavaScript dijalankan ketika ada yang memanggilnya.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Fungsi JavaScript</h2>
<p>Contoh ini memanggil fungsi yang melakukan kalkulasi, dan mengembalikan hasilnya:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Simpan file dengan nama fungsi01.html.
Hasilnya
 Sintaks Fungsi JavaScript
Fungsi JavaScript didefinisikan dengan keyword function, diikuti dengan nama, diikuti dengan
tanda kurung ().
Nama fungsi dapat berisi huruf, angka, underscore, dan tanda dolar (aturan yang sama seperti
variabel).
Tanda kurung juga memungkinkan untuk menyertakan nama parameter yang dipisahkan dengan
koma: (parameter1, parameter2, …)
Kode yang akan dijalankan oleh fungsi ditempatkan di dalam tanda kurung kurawal: {}
Sintaks JavaScript
function name(parameter1, parameter2, parameter3) {
// kode untuk dieksekusi
}
Parameter fungsi dicantumkan di dalam tanda kurung () di definisi fungsi. Argumen fungsi adalah
nilai yang diterima oleh fungsi saat dipanggil.
Di dalam fungsi, argumen (parameter) berperilaku sebagai variabel lokal. Sebuah Fungsi hampir
sama dengan sebuah Prosedur atau Subrutin, dalam bahasa pemrograman lain.
 Fungsi Invocation
Kode di dalam fungsi akan dieksekusi ketika ada yang memanggil fungsi seperti:
 Ketika event terjadi (ketika pengguna mengklik tombol)
 Ketika dipanggil dari kode JavaScript
 Otomatis (dipanggil sendiri)

 Fungsi Return
Saat JavaScript mencapai pernyataan return, fungsi tersebut akan berhenti dijalankan.

Jika fungsi dipanggil dari sebuah statement, JavaScript akan kembali (return) untuk mengeksekusi
kode setelah statement pemanggilan.

Fungsi sering menghitung nilai return. Nilai yang dikembalikan “return” kembali ke pemangil.

Contoh:
Hitung hasil dari dua angka, dan kembalikan hasilnya:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Fungsi JavaScript</h2>
<p>Contoh ini memanggil fungsi yang melakukan kalkulasi dan mengembalikan hasilnya:</p>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Simpan file dengan nama fungsi02.html.
Hasilnya

Pernyataan bersyarat
Sering kali ketika menulis kode pemrograman, kita ingin melakukan tindakan yang berbeda pada
keputusan yang berbeda.
Untuk solusi hal tersebut kita dapat menggunakan pernyataan bersyarat dalam kode
pemrograman.
JavaScript memiliki beberapa pernyataan bersyarat berikut:
 if - untuk menentukan blok kode yang akan dieksekusi, jika kondisi yang ditentukan benar
 else - menentukan blok kode yang akan dieksekusi, jika kondisi yang ditentukan salah
 else if - menentukan kondisi baru yang akan diuji, jika kondisi pertama salah
 switch - menentukan banyak blok kode alternatif yang akan dieksekusi
 Pernyataan if
Gunakan pernyataan if untuk menentukan blok kode JavaScript yang akan dieksekusi jika
kondisinya benar.
Sintaks JavaScript
if (condition) {
// blok kode yang akan dieksekusi jika kondisinya benar
}
Perhatikan bahwa if ditulis dalam huruf kecil. Huruf besar (If atau IF) akan menghasilkan
kesalahan JavaScript.
Contoh:
Ucapkan salam “Selamat siang” jika waktunya kurang dari 18:00.
Contoh :
<!DOCTYPE html>
<html>
<body>

<p> Menampilkan "Selamat siang!" jika jam kurang dari 18:00: </p>
<p id="demo">Selamat malam!</p>

<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>

</body>
</html>
Simpan file dengan nama kondisi_if.html.
Hasilnya

 Pernyataan else
Gunakan pernyataan else untuk menentukan blok kode yang akan dieksekusi jika kondisinya salah.
Sintaks JavaScript
if (condition) {
// blok kode yang akan dieksekusi jika kondisinya benar
} else {
// blok kode yang akan dieksekusi jika kondisinya salah
 }
Contoh:
Jika jam kurang dari 18.00 , buat ucapan “Selamat siang”, jika tidak, “Selamat malam”.
<!DOCTYPE html>
<html>
<body>

<p> Klik tombol untuk menampilkan salam berbasis waktu: </p>

<button onclick="myFunction()">Klik disini</button>

<p id="demo"></p>

<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Selamat siang";
} else {
greeting = "Selamat malam";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>
Simpan file dengan nama kondisi_else.html.
Hasilnya

 Pernyataan else if
Gunakan pernyataan else if untuk menentukan kondisi baru jika kondisi pertama salah
Sintaks JavaScript
if (condition1) {
// blok kode yang akan dieksekusi jika condition1 benar
} else if (condition2) {
 // blok kode yang akan dieksekusi jika condition1 salah dan condition2 benar
} else {
// blok kode yang akan dieksekusi jika kondisi1 salah dan kondisi2 salah
}
Contoh:
Jika jam kurang dari 10:00, buat ucapan “Selamat pagi”, jika tidak, tapi waktunya kurang dari
20:00, buat ucapan “Selamat siang”, jika tidak, “Selamat malam”:
<!DOCTYPE html>
<html>
<body>

<p> Klik tombol untuk menampilkan salam berbasis waktu: </p>

<button onclick="myFunction()">Klik disini</button>

<p id="demo"></p>

<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Selamat Pagi";
} else if (time < 18) {
greeting = "Selamat Siang";
} else {
greeting = "Selamat malam";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>
Simpan file dengan nama kondisi_elseif.html.
Hasilnya
 Switch Case Pada JavaScript
Switch Case adalah fungsi yang berguna untuk membuat pengecekan sebuah nilai dan nilai yang
tersedia untuk pengecekan bisa banyak atau lebih dari satu.
Switch Case pada JavaScript dasarnya adalah sama dengan pencabangan atau IF ELSE, hanya saja
caranya yang berbeda, bisa dikatakan lebih sederhana ketimbang penggunaan IF ELSE.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Switch Case di JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var hari = '';
switch (new Date().getDay()) {
case 0:
hari = 'Minggu';
break;
case 1:
hari = 'Senin';
break;
case 2:
hari = 'Selasa';
break;
case 3:
hari = 'Rabu';
break;
case 4:
hari = 'Kamis';
break;
case 5:
hari = 'Jumat';
break;
case 6:
hari = 'Sabtu';
}
document.getElementById("demo").innerHTML = "Hari ini adalah hari : "+hari;
</script>
</body>
</html>
Simpan file dengan nama swictcase.html.
Hasilnya
Program kalkulator sederhana dengan bahasa pemrograman javascript
 Contoh : 01
<!DOCTYPE html>
<html>
<head>
<title>Latihan JavaScript</title>
<script type="text/javascript">
function fadd()
{
var a=document.forms["kalkulator"]["fnilaiA"].value;
var b=document.forms["kalkulator"]["fnilaiB"].value;
var c=Number(a)+Number(b);
document.getElementById("hasil").innerHTML=c;
}
</script>
<style>
</style>
</head>
<body>
<div>
<div style="background-color:lavender;">
<form name="kalkulator">
<div>
<label for="nilaiA">Nilai 1 :</label>
<input type="text" id="nilaiA" name="fnilaiA">
</div>
<div>
<label for="nilaiB">Nilai 2 :</label>
<input type="text" id="nilaiB" name="fnilaiB">
</div>
<div>
<input type="button" value="+" onclick="fadd()">
</div>
</form>
</div>
<div style="background-color:lavender;">
 <div>
<div>Hasil :</div>
<div id="hasil"></div>

</div>
</div>
</div>

</body>
</html>
Simpan file dengan nama kalkulator.html.
Hasilnya

 Contoh : 02
HTML
<!doctype html>
<html lang="en">
<head>
<title>Kalkulator Sederhana Javascript</title>
</head>

<body>
<br>
<br>
<br>
<center>
<form method="post" action="">
<label for="nilai1">Nilai 1</label>
<input type="text" id="nilai1" autocomplete="off">
<label for="nilai2">Nilai 2</label>
<input type="text" id="nilai2" autocomplete="off">
<br>
<br>
<br>
<label for="hasil">Hasil</label>
<input type="text" id="hasil">
<br>
 <br>
<br>
<button type="button" id="tambah"><b>+</b></button>
<button type="button" id="kurang"><b>-</b></button>
<button type="button" id="reset"><b>reset</b></button>
</form>
</center>

<script src="script01.js"></script>
</body>
</html>
Simpan file dengan nama index01.html.
Sintak JavaScrip
//buat variabel
var nilai1 = document.getElementById('nilai1');
var nilai2 = document.getElementById('nilai2');
var tambah = document.getElementById('tambah');
var kurang = document.getElementById('kurang');
var hasil = document.getElementById('hasil');
var reset = document.getElementById('reset');

tambah.addEventListener('click', function(){
//jalankan program untuk tambah
tambah = parseInt(nilai1.value) + parseInt(nilai2.value);
hasil.value = tambah;
});

kurang.addEventListener('click', function(){
//jalankan program untuk kurang
kurang = parseInt(nilai1.value) - parseInt(nilai2.value);
hasil.value = kurang;
});

reset.addEventListener('click', function(){
//jalankan program untuk reset
hasil.value = "";
nilai1.value = "";
nilai2.value = "";
});
Simpan file dengan nama script01.js.
Hasilnya :
TUGAS :
 Tambahkan fungsi perkalian dan pembagian pada Program kalkulator sederhana
dengan bahasa pemrograman javascript.
RANGKUMAN
Dengan menggunakan Javascript kita dapat
 Dapat Mengubah Konten HTML
 Dapat Mengubah Atribut HTML
 Dapat Mengubah Style HTML (CSS)
 Dapat Menyembunyikan dan Menampilkan Elemen HTML