Modul Javascript Untuk Pemula
Modul Javascript Untuk Pemula
MODUL BAHASA
PEMROGRAMAN
DASAR BAHASA PEMROGRAMAN JAVASCRIPT
JANUARY 1, 2023
DAFTAR ISI
Page | i
DAFTAR ISI......................................................................................................................... I
HTML
Dalam membangun sebuah website HTML berperan sebagai pembuat
bentuk.
CSS
Dalam membangun sebuah website CSS memiliki peran sebagai design
bentuk, warna, tulisan dan sebagainya
JavaScript
Dalam membangun sebuah website JavaScript berguna untuk membuat fitur-
fitur serta efek yang membuat halaman website lebih interaktif.
Kita mulai dengan cara penulisan syntax javascript yang baik dan benar. dan
adapun pengetahuan dasar yang harus kita ketahui dari javascript adalah sebagai
berikut.
syntax javascript bisa di gunakan dengan 2 cara teman-teman. yaitu dengan cara
di sisipkan pada halaman HTML langsung, dan 1 lagi dengan cara menyimpan file
javascript dengan ekstensi .js. dan kemudian menginclude nya pada halaman
HTML. agar lebih spesifik akan kita bahas satu persatu.
<!DOCTYPE html>
Page | 6
<html>
<head>
<title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>
</head>
<body>
<h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="nama"></div>
<script>
document.getElementById("nama").innerHTML = "Nama Saya Malas Ngoding";
</script>
</body>
</html>
coba perhatikan pada contoh di atas. terdapat sebuah element div yang kita beri
id=”nama”. dan kemudian kita memberikan sentuhan javascript di sana dengan
perintah berikut. Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan
Javascript
Setelah membahas cara penulisan javascript secara internal, atau dengan cara
menyisipkan langsung syntax javascript pada html, maka di sini kita akan membahas
cara lainnya untuk menggunakan javascript, yaitu dengan cara menggunakan
javascript secara external. caranya buat lah dua buah file, yaitu :
di file belajar.html kita akan menuliskan syntax HTML nya saja. dan pada belajar.js
kita akan menuliskan syntax javascript nya pada file belajar.js. dan cara agar kedua
file ini terhubung adalah dengan cara menghubungkannya dengan syntax berikut.
<!DOCTYPE html>
<html>
<head> Page | 8
<title>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</title>
</head>
<body>
<h1>Belajar Javascript Part 2 : Cara Penulisan Dan Penggunaan Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="nama"></div>
</body>
<script type="text/javascript" src="belajar.js"></script>
</html>
belajar.js
belajar.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript</title>
</head>
<body>
<h1>Belajar Javascript Part 3 : Mengenal Variabel Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="nama"></div>
<div id="alamat"></div> Page | 10
<script>
var nama = "Malas Ngoding";
var alamat = "Jakarta";
document.getElementById("nama").innerHTML = nama;
document.getElementById("alamat").innerHTML = alamat;
</script>
</body>
</html>
seperti yang teman-teman perhatikan pada syntax di atas. saya membuat dua
buah variabel javascript. dengan nama “nama” dan “alamat”. oh ya teman-teman
jangan lupa untuk memberikan tanda titik koma atau semicolon(;) di akhir baris nya.
karena ini ketetapan cara penulisan javascript.
dan kemudian saya menampilkan isi dari variabel ini ke dalam element nama dan
alamat.
document.getElementById("nama").innerHTML = nama;
document.getElementById("alamat").innerHTML = alamat;
Page | 11
note :
beikut adalah operator yang dapat kita gunakan di javascript untuk membuat
perhitungan aritmatika.
+ Penjumlahan
– Pengurangan
* Perkalian
/ Pembagian
% Modulus
++ Increment
— Decrement
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 4 : Operator Aritmatika Pada Javascript</title>
</head> Page | 13
<body>
<h1>Belajar Javascript Part 4 <br/> Operator Aritmatika Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="penjumlahan"></div>
<script>
var bilangan1 = 6;
var bilangan2 = 2;
document.getElementById("penjumlahan").innerHTML = penjumlahan;
</script>
</body>
</html>
pada contoh di atas kita membuat contoh penjumlahan. dengan mengisi nilai pada
variabel di atas terdapat dua buah variabel. yaitu variabel bilangan1 dan bilangan2.
variabel bilangan1 berisi nilai 6. dan variabel bilagan2 berisi nilai 2. kemudian untuk
menjumlahkannya kita tinggal menambahkan operator bilangannya seperti contoh di
atas.
1
sampai di sini variabel penjumlahan sudah berisi hasil dari bilangan1 di tambah Page | 14
bilangan2. 6+2.
kemudian hasilnya kita tampilkan pada element yang ber id penjumlahan.(tag div).
dan hasilnya.
contoh lainnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 4 : Operator Aritmatika Pada Javascript</title>
</head>
<body>
<h1>Belajar Javascript Part 4 <br/> Operator Aritmatika Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<div id="penjumlahan"></div>
<div id="pengurangan"></div>
<div id="perkalian"></div>
<div id="pembagian"></div>
<div id="modulus"></div>
Page | 15
<script>
var bilangan1 = 6;
var bilangan2 = 2;
document.getElementById("penjumlahan").innerHTML = penjumlahan;
document.getElementById("pengurangan").innerHTML = pengurangan;
document.getElementById("perkalian").innerHTML = perkalian;
document.getElementById("pembagian").innerHTML = pembagian;
document.getElementById("modulus").innerHTML = modulus;
</script>
</body>
</html>
dan hasilnya
Page | 16
Number
String
Boolean
Array
Object
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body>
<h1>Tipe Data Number Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
seperti yang dapat teman-teman lihat pada contoh di atas. penulisan tipe data
number tidak menggunakan tanda petik seperti string.
<!DOCTYPE html>
<html> Page | 19
<head>
<title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body>
<h1>Tipe Data String Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<script>
// tipe data string
var kalimat = "Belajar javascript dasar di malasngoding.com";
dapat di lihat pada contoh tipe data string di atas. terdapat sebuah variabel dengan
tipe data string. dan kemudian kita tampilkan. Belajar Javascript Part 5 : Mengenal
Tipe Data Pada Javascript
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body>
<h1>Tipe Data Array Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<script>
// tipe data Array
var hewan = ["Kambing", "Bebek", "Ayam"];
di dalam variabel array hewan ini terdapat data kambing, bebek dan ayam. berarti
angka penyebut untuk kambing adalah 0. bebek 1 dan ayam 2. angka nya di mulai
dari 0. dan untuk mengakses/menampilkan salah satu angka nya adalah sebagai
berikut. Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript.
hewan[1]
ini berarti kita memilih data array di dalam variabel hewan dengan nomor urut 1. dan
akan di tampilkan hewan bebek.
kambing = 0
bebek = 1
ayam = 2
Page | 22
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body>
<h1>Tipe Data Object Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<script>
// tipe data object
var manusia = {
nama : "malas ngoding",
alamat : "Jakarta",
umur : 30,
pekerjaan : "facebooker"
};
1 var manusia = {
3 alamat : "Jakarta",
4 umur : 30,
5 pekerjaan : "facebooker"
6 };
nama, alamat, umur, pekerjaan adalah nama. dan valuenya adalah malasngoding,
jakarta, 30 dan facebooker. untuk mengakses data nya, pertama tuliskan nama
variabel, dan kemudian di ikuti dengan nama data. misalnya jika kita ingin
menampilkan data alamat. penulisannya adalah manusia.alamat, maka akan di
tampilkan jakarta.
Page | 24
10 Marc h 2016
BAB 6
Membuat Function di Javascript
seperti yang teman-teman lihat pada contoh di atas. untuk membuat function,
penulisannya harus di awali oleh syntax “function” dan kemudian di lanjutkan
dengan nama function yang mau di buat. dan isi dari function di tuliskan di dalam
tanda kurung kurawal pembuka “{” dan tanda kurung kurawal penutup “}”.
langsung saja kita masuk ke tutorial membuat function dengan javascript. silahkan
teman-teman perhatikan contoh berikut ini untuk membuat function di javascript.
<!DOCTYPE html>
<html> Page | 25
<head>
<title>Belajar Javascript Part 6 : Membuat Function di Javascript</title>
</head>
<body>
<script>
// membuat function tampilkan_nama
function tampilkan_nama(){
return "Malas Ngoding";
}
document.getElementById("hasil").innerHTML = tampilkan_nama();
</script>
</body>
</html>
2 function tampilkan_nama(){
3 return "Malas Ngoding";
4 }
Page | 26
kita membuat function dengan nama tampilkan_nama(). yang berisi perintah untuk
mengembalikan string “malas ngoding”. jadi saat function tampilkan_nama() di
panggil, hasilnya adalah “malas ngoding”.
10 Marc h 2016
Event pada javascript adalah sesuatu yang terjadi pada element. pasti teman-teman
pada bingung kan dengan pengertian event pada javascript. jadi gini, misalnya kita
memiliki sebuah tombol di halaman website atau aplikasi yang kita bangun, dan kita
ingin memberikan suatu aksi jika tombol tersebut di klik. jadi yang menjadi event di
sini adalah “klik”. misalnya jika tombol di klik maka akan di tampilkan pesan yang
menampilkan sebuah kalimat. jadi event nya adalah klik. adapun beberapa event
yang terdapat pada javascript adalah sebagai berikut.
Baiklah akan kita bahas beberapa event javascript yang sudah di jelaskan di atas.
7.2 Cara Membuat Event Javascript
Untuk membuat event dengan javascript, kita bisa menambahkan atribut dengan
nama-nama event di atas, pada element html yang ingin kita berikan event.
Page | 28
contohnya.
1
untuk contohnya saya akan membuat event klik pada sebuah tombol. jadi saya ingin
menampilkan sebuah kalimat jika tombol tersebut di klik.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 7 : Mengenal Event Pada Javascript</title>
</head>
<body>
<h1>Mengenal Event Pada Javascript</h1>
<h2>www.malasngoding.com</h2>
<script>
// membuat function tampilkan_nama
function tampilkan_nama(){
document.getElementById("hasil").innerHTML = "<h3>Nama Saya
Adalah Andi</h3>";
}
</script>
</body>
Page | 29
</html>
coba teman-teman perhatikan pada contoh di atas, terdapat sebuah tombol yang
kita berikan event klik.
coba teman-teman perhatikan pada contoh di atas, terdapat sebuah tombol yang
kita berikan event klik.
pada saat tombol ini di klik maka akan di jalankan function tampilkan_nama(). nah
lalu kita buat function tampilkan_nama nya.
.function tampilkan_nama(){
isi dari function tampilkan_nama() ini adalah menampilkan kalimat “nama saya
adalah andi” pada element id hasil.
seperti contoh penulisan string javascript di atas, terdapat 2 contoh variabel yang
menyimpan data ber tipe data string.
untuk penulisan tipe data string, kita bisa menggunakan petik dua (“) atau perik satu
(‘).
seperti contoh penulisan string javascript di atas, terdapat 2 contoh variabel yang
menyimpan data ber tipe data string.
untuk penulisan tipe data string, kita bisa menggunakan petik dua (“) atau perik satu
(‘).
Lalu bagaimana jika kita ingin menggunakan tanda petik di dalam tipe data
string ? Caranya adalah dengan membali tanda petik. jika string di bungkus oleh
petik dua, maka petik yang di gunakan di dalam string adalah petik satu. begitu juga
sebaliknya, jika string di bungkus oleh petik satu, maka petik yang harus di gunakan
dalam string adalah petik dua. contoh nya :
<script>
var kata = 'nama saya "diki"';
document.getElementById("tampil").innerHTML=kata;
</script>
March 2016
Perlu teman-teman perhatikan. seperti yang sudah kita bahas pada tutorial javasript
dasar sebelumnya, bahwa javascript memiliki sifat case sensitive, yang artinya
penulisan javascript sangat berpengaruh sekali tentang besar kecil huruf nya. jadi
untuk membuat tanggal, teman-teman harus menuliskan fungsi date nya dengan
benar. maksud nya huruf D nya besar.
contoh salah
date()
contoh benar
Date()
Pada sub judul ini kita akan membahas tentang cara menggunakan fungsi Date()
pada javascript. Page | 34
pada contoh ini, saya memasukkan fungsi date ke dalam variabel tanggal. dan
kemudian menampilkannya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 9 : Menampilkan Tanggal Dengan Javascript</title>
</head>
<body>
<h1>Menampilkan Tanggal Dengan Javascript</h1>
<h2>www.malasngoding.com</h2>
<script>
var tanggal = new Date();
document.getElementById("hasil").innerHTML = tanggal;
</script>
</body>
</html>
document.getElementById("hasil").innerHTML = tanggal;
dan hasilnya.
Page | 35
2 M arch 2016
switch.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript Part 10 : Switch Case Di Javascript</title>
</head>
<body>
<h1>Switch Case Di Javascript</h1>
<h2>www.malasngoding.com</h2>
<script>
switch (warna){
case "hitam":
teks = "warna hitam";
break;
case "merah":
teks = "Warna merah";
break;
case "hijau":
teks = "Warna hijau"; Page | 37
break;
default:
teks = "Warna tidak terdeteksi";
}
document.getElementById("hasil").innerHTML = teks;
</script>
</body>
</html>
perhatikan pada contoh di atas. kita memiliki sebuah variabel bernama warna. dan
berisi string “merah”.
1 switch (warna){
2 case "hitam":
5 case "merah":
7 break;
8 case "hijau":
10 break;
11 default:
13 }
jika warna menemukan data case nya yang sesuai dengan isi dari variabel warna
maka proses pengecekan akan di hentikan. di sini data di temukan pada
pengecekan kedua yaitu merah. kemudian kita menyimpan string ke dalam variabel
teks. sampai di sini kita telah memiliki isi di dalam variabel teks. dan terakhir kita
tampilkan.
document.getElementById("hasil").innerHTML = teks;
dan hasilnya.
Page | 39
BAB 11
Page | 40
Perulangan For Pada Javascript
Pada tutorial ini kita akan belajar membuat perulangan angka dan perulangan string
pada javascript. silahkan teman-teman perhatikan contoh berikut ini.
for.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Javascript Part 11 : Perulangan For Pada Javascript</title>
5 </head>
6 <body> Page | 41
8 <h2>www.malasngoding.com</h2>
10
11 <button onclick="perulangan()">TOMBOL</button>
12
14 <div id="hasil"></div>
15
16 <script>
17 function perulangan() {
19 var x;
22 }
23 document.getElementById("hasil").innerHTML = text;
24 }
25 </script>
26 </body> Page | 42
27 </html>
di sini kita membuat sebuah tombol yang jika di klik maka akan menjalankan function
perulangan(). baca tutorial sebelumnya di malasngoding.com tentang pengenalan
event pada javascript.
indexOf() Menemukan letak string dalam sebuah string (di urutan ke berapa)
Menemukan letak string dalam sebuah string (di urutan ke berapa). di hitung dari
LastindexOf()
akhir
Page | 45
Menampilkan string dari karakter ke berapa sampai yang ke berapa (sama seperti
substring()
slice())
Menampilkan string dari karakter ke berapa sampai yang ke berapa (sama seperti
substr()
slice())
Supaya tidak bingung, berikut saya sertakan juga contoh penggunaan dan penulisan
dari masing-masing fungsi yang sudah di sebutkan di atas. Manipulasi String Pada
Javascript
5 <script>
7 document.getElementById("contoh").innerHTML = kalimat.length;
8 </script>
di sini kita buat sebuah variabel ‘kalimat’ yang menyimpan sebuah string “saya
belajar javascript di www.malasngoding.com”. lalu kita hitung jumlah karakter dari
string tersebut dengan length.
document.getElementById("contoh").innerHTML = kalimat.length;
dan hasilnya :
1 <h2>www.malasngoding.com</h2>
3 <p id="contoh"></p>
4
5 <script>
6
Page | 47
7 var kalimat = "Selamat datang di tutorial string javascript";
9 document.getElementById("contoh").innerHTML = temukan;
10
11 </script>
contoh :
1 <h2>www.malasngoding.com</h2>
3 <p id="contoh"></p>
5 <script>
9 </script>
Page | 48
Contonya
1 <h2>www.malasngoding.com</h2>
3 <p id="contoh"></p>
5 <script>
9 </script>
Page | 49
dan hasilnya adalah “www.malasngoding.com”. karena kita memerintahkan untuk
menampilkan karakter ke 22 sampai 42. seperti yang dapat kita lihat pada contoh di
atas.
kalimat.slice(22, 42)
jadi pada parameter pertama, kita masukkan misalnya kata yang ingin kita ganti. dan
pada parameter kedua nya kita masuk kan kata yang menjadi penggantinya.
1 <h2>www.malasngoding.com</h2>
3 <p id="contoh"></p>
4
5 <script>
8 document.getElementById("contoh").innerHTML = ganti;
9 </script>
1 <h2>www.malasngoding.com</h2>
3 <p id="besar"></p>
4 <p id="kecil"></p>
5
6 <script>
10 var a = kalimat.toUpperCase();
11
13 var b = kalimat.toLowerCase();
14
15 document.getElementById("besar").innerHTML = a;
16 document.getElementById("kecil").innerHTML = b;
17 </script>
1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4 Page | 52
5 <script>
7 var b = "hadi";
9 // menggabungkan string
11 document.getElementById("contoh").innerHTML = gabung;
12 </script>
pada contoh penggunaan concat() javascript ini, kita membuat sebuah variabel a
yang berisi “diki alfarabi”. dan variabel b berisi “hadi”. sebenarnya saat di tampilkan
bisa saja dengan cara a+” “+b. tapi degan javascript bisa lebih mudah, yaitu
menggunakan fungsi concat. yang hasilnya akan menjadi “diki alfarabi hadi”.
1 <h2>www.malasngoding.com</h2>
2
3 <p id="contoh"></p>
4 Page | 53
5 <script>
10 document.getElementById("contoh").innerHTML = convert[0];
11 </script>
Pada contoh ini, kita membuat sebuah variabel bernama huruf. dan berisi ‘a,b,c’.
kemudian kita pecahkan string ini menjadi array dengan split(). dan menetapkan
tanda ‘,’ sebagai pemisah.
nah, maka jadilah array yang tersimpan dalam variabel convert. dan menampilkan
array urutan pertama
document.getElementById("contoh").innerHTML = convert[0];