Java Script
Java Script
Java Script
Bagi Anda yang belum pernah berkecimpung di dunia pemrograman, Anda pasti bertanya-
tanya, apa itu JavaScript? JavaScript adalah salah satu bahasa pemrograman yang paling
banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan, bahasa pemrograman ini
merupakan salah satu yang paling utama bagi web developer, di antaranya:
Anda bisa mempelajari bahasa pemrograman ini dengan cepat dan mudah, serta
menggunakannya untuk berbagai tujuan, mulai dari meningkatkan fungsionalitas website
hingga mengaktifkan permainan dan software berbasis web. Selain itu, terdapat ribuan
template dan aplikasi JavaScript yang bisa Anda gunakan secara gratis dan semuanya ini
berkat beberapa situs, seperti Github.
Sejarah JavaScript
Proses penyusunan dan desain JavaScript hanya menghabiskan waktu sepuluh hari
oleh Brandan Eich, seorang karyawan Netscape, pada September 1995. Awalnya, nama
bahasa pemrograman ini adalah Mocha, kemudian menjadi Mona, lalu LiveScript sebelum
akhirnya resmi menyandang nama JavaScript. Versi pertamanya hanya digunakan di
kalangan Netscape, dengan fungsionalitas yang terbatas. Namun, bahasa ini terus
dikembangkan oleh komunitas developer yang selalu menggunakan bahasa pemrograman ini.
Pada tahun 1996, JavaScript secara resmi menjadi ECMAScript. Rilis ECMAScript 2
kemudian menyusul pada tahun 1998, dan ECMAScript 3 pada tahun 1999. ECMAScript
dikembangkan hingga akhirnya menjadi JavaScript yang kita kenal saat ini. Tak hanya lintas
browser, bahasa ini juga bisa berfungsi di berbagai perangkat, termasuk perangkat mobile dan
komputer.
Sejak saat itu, JavaScript terus bertumbuh dan berkembang. Pada akhirnya di tahun
2016, sebanyak 92% website menggunakan bahasa pemrograman ini. Hanya dalam kurun
waktu dua puluh tahun, bahasa ini telah beralih dari bahasa pemrograman yang serba terbatas
dan ‘primitif’ menjadi salah satu tool terpenting bagi para web developer. Jika sering
menghabiskan waktu untuk berselancar di internet, Anda pasti sudah sering mendengar nama
bahasa pemrograman ini.
Terdapat sejumlah kelebihan JavaScript yang menjadikan bahasa pemrograman ini lebih
unggul daripada kompetitornya, terutama di beberapa kasus tertentu. Berikut beberapa
kelebihan JavaScript:
Setiap bahasa pemrograman pasti memiliki beberapa kekurangan. Salah satu penyebabnya
adalah semakin populernya bahasa pemrograman yang Anda pilih, termasuk dalam hal ini
adalah JavaScript. Popularitas tersebut, sialnya, mengundang para hacker, scammer, dan
pihak ketiga berbahaya lainnya untuk mencari celah keamanan. Beberapa kekurangan
JavaScript di antaranya:
1. Berisiko tinggi terhadap eksploitasi;
2. Bisa disalahgunakan untuk mengaktifkan kode berbahaya di komputer
pengguna;
3. Tidak semua browser dan perangkat selalu mendukung bahasa pemrograman
ini;
4. JS code snippet agak banyak;
5. Bisa di-render secara berbeda pada masing-masing perangkat yang malah
mengarah ke inkonsistensi.
Perlu Anda ketahui, sebagian web browser juga menawarkan kesempatan bagi user untuk
menonaktifkan JavaScript. Jadi, sebaiknya cari tahu apa yang terjadi pada event yang Anda
unduh ke perangkat yang bahkan tidak mendukungnya.
Alasan mengapa JavaScript menjadi salah satu bahasa pemrograman yang populer adalah
kemudahan proses belajar dan penggunaannya. Banyak developer yang bahkan akhirnya
memilih JavaScript sebagai bahasa pemrograman terbaik. Bahasa pemrograman lainnya
hanya diperlukan jika developer menginginkan sesuatu yang lebih spesifik.
Berikut beberapa bahasa pemrograman yang paling populer:
Fungsi JavaScript, atau yang sering disingkat JS, adalah menjadikan website lebih
interaktif. Script bahasa pemrograman ini berjalan di browser, bukan server, dan
JavaScript
biasanya masuk ke library pihak ketiga untuk menyediakan fungsionalitas tingkat
lanjut tanpa mengharuskan developer melakukan coding dari awal.
Merupakan singkatan dari Hypertext Markup Languange, dan menjadi salah satu
bahasa pemrograman yang paling umum di web serta membentuk buildin block
HTML
dari suatu halaman situs. Sebagai contoh, tag HTML yang termasuk <p> untuk
paragraf dan <img> untuk gambar.
PHP merupakan bahasa pemrograman server-side, sedangkan JavaScript client-
side. Bahasa ini sering terlihat di sistem manajemen konten berbasis PHP,
PHP misalnya WordPress, tapi juga sering digunakan untuk pengembangan back-
end karena menyediakan jalan terbaik guna memfasilitasi proses transfer
informasi dari dan ke database.
CSS adalah singkatan dari Cascading Style Sheets. Dengan CSS, para webmaster
bisa mengatur style serta menentukan tampilan setiap jenis konten. Untuk
menampilkan konten, Anda bisa melakukannya secara manual terhadap setiap
CSS
elemen dalam HTML. Namun, jika Anda melakukannya di CSS, Anda tidak perlu
berulang kali menentukan tampilan elemen-elemen tersebut setiap kali akan Anda
gunakan.
Anggap saja kita sedang membangun sebuah rumah. HTML adalah struktur bangunan rumah
dan sandaran bagi pintu dan tembok, sedangkan CSS adalah karpet dan wallpaper yang
menghiasi setiap sudut rumah sehingga tampak lebih indah dan menarik. JavaScript, dalam
hal ini, menambahkan sifat responsif sehingga Anda bisa membuka pintu dan menyalakan
lampu. Anda bisa saja tidak menggunakan lampu atau tidak membutuhkan pintu. Namun,
risikonya adalah rumah yang gelap dan usang, layaknya bangunan yang telah berdiri sejak
tahun 1995. Hal ini sama seperti ketika Anda memanfaatkan JavaScript untuk webiste.
Untuk memasukan string kode JavaScript ke webpage, Anda harus menggunakan tag
<script>. Anda juga bisa melihat contoh di bawah ini untuk mengecek tampilannya:
<script type="text/javascript">
Your JavaScript code
</script>
Sebaiknya, sertakan JavaScript ke dalam tag <header> untuk situs Anda, kecuali bahasa
tersebut harus Anda jalankan pada waktu tertentu atau dengan elemen halaman web tertentu.
Kode JavaScript juga bisa Anda simpan sebagai file terpisah, dan Anda bisa ‘memanggil’nya
jika membutuhkannya di website.
Untuk informasi selengkapnya, silakan baca tutorial kami tentang cara membuat JavaScript di
website.
Berikut ini beberapa kesalahan yang sering terjadi dalam penggunaan JavaScript yang dapat
memunculkan bug atau kesalahan pemrosesan lainnya.
1. Salah menggunakan operator
Kesalahan paling umum yang membuat para web developer pemula pusing adalah kesalahan
penggunaan operator JavaScript. Meskipun mudah dipahami dan digunakan, ternyata
operator JavaScript justru penggunaannya mudah terbalik-balik. Misalnya, saat seharusnya
menggunakan operator assignment, tetapi Anda malah menggunakan operator comparison
atau perbandingan pada statement atau pernyataan if. Ini merupakan kesalahan paling
mendasar yang memberikan hasil yang tidak tepat.
2. Kesalahan Sintaksis
Seperti halnya di setiap bahasa lainnya di dunia, peraturan tata bahasa sangatlah penting agar
penggunanya bisa memahami konteks pembicaraan. Jika mengurangi maupun menambahkan
tanda baca koma dalam bahasa Inggris bisa menimbulkan makna yang berbeda dalam sebuah
kalimat, maka dalam JavaScript bisa menimbulkan bug atau crash.
Kesalahan sintaksis merupakan kesalahan umum yang sering terjadi pada pemula yang baru
belajar memahami semua peraturan dalam bahasa pemrograman JavaScript. Beberapa
kesalahan sintaksis tersebut, antara lain:
Dalam penulisan kode di JavaScript, Anda bisa memisahnya menjadi dua baris. Namun,
pemisahan ini juga ada aturannya sendiri agar tidak muncul bug atau mengalami crash. Kode
bisa ditulis dalam dua baris, tetapi jangan pernah memisahnya di tengah-tengah.
var a =
“Belajar JavaScript”;
salah”;
Jika pemisahan memang terpaksa harus dilakukan di tengah string, maka tambahkan
backslash (\) seperti berikut ini:
benar”;
Salah menempatkan titik koma juga merupakan kesalahan umum yang terjadi. Akibatnya,
kode tersebut tidak akan dapat dijalankan.
JavaScript secara otomatis akan menutup statement di setiap akhir baris meskipun Anda tidak
menambahkan tanda titik koma. JavaScript juga mengizinkan memisah statement dalam dua
baris, tetapi hal ini tidak berlaku untuk statement return. Ketika Anda memisahkan statement
return, maka hasil yang keluar adalah undefined.
Ketika Anda memisahkan sejumlah nilai dengan koma, terkadang secara tidak sengaja akan
tersisa satu koma di akhir kode. Jika hal ini terjadi, beberapa mesin JavaScript atau JSON
tidak akan bisa membaca kode ini sehingga memberikan hasil yang salah atau mengalami
kegagalan. Jadi, pastikan Anda tidak kelebihan satu tanda baca pun saat menulis kode.
Setelah kamu belajar tentang Variabel dan Tipe data pada Javascript, materi selanjutnya yang
harus dipelajari adalah tentang operator.
Karena kita akan banyak menggunakannya untuk melakukan berbagai macam operasi di
dalam program.
var a = 3;
var b = 4;
var c = a + b;
Jadi…
1. Operator aritmatika;
2. Operator Penugasan (Assignment);
3. Opeartor relasi atau perbandingan;
4. Operator Logika;
5. Operator Bitwise;
6. Operator Ternary;
Operator wajib ada di setiap bahasa pemrograman. Ke 6 jenis operator di atas harus kamu
pahami.
Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %
Jangan gunakan x, karena simbol x bukan termasuk dalam operator di dalam pemrograman.
Contoh:
var a = 5;
var b = 3;
Hasilnya:
Coba juga untuk operator yang lainnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Aritmatika</title>
</head>
<body>
<script>
var a = 15;
var b = 4;
var c = 0;
// pengurangan
c = a - b;
document.write(`${a} - ${b} = ${c}<br/>`);
// Perkalian
c = a * b;
document.write(`${a} * ${b} = ${c}<br/>`);
// pemangkatan
c = a ** b;
document.write(`${a} ** ${b} = ${c}<br/>`);
// Pembagian
c = a / b;
document.write(`${a} / ${b} = ${c}<br/>`);
// Modulo
c = a % b;
document.write(`${a} % ${b} = ${c}<br/>`);
</script>
</body>
</html>
Hasilnya:
Coba pertikan operator modulo (%) dan operator penjumlahan (+).
3 % 2 = 1
Mohon perhatikan!
Pada Javascript, apabila kita akan melakukan operasi terhadap tipe data string atau teks
menggunakan penjumlahan (+), maka yang akan terjadi adalah penggabungan; Bukan
penjumlahan.
Contoh:
102
Karena kedua angka tersebut merupakan string—perhatikan, dia diapit dengan tanda petik.
Contoh:
var a = 19;
Pengisian Nilai =
Operator penugasan sama seperti operator aritmatika. Ia juga digunakan untuk melakukan
operasi aritmatika.
Contoh:
Hasilnya:
jumlahView = jumlahView + 1;
Bisa dibaca:
Isi variabel jumlahView dengan penjumlahan dari nilai jumlahView sebelumnya dengan 1.
Khusus untuk operator penugasan yang dijumlahkan dan dikurangi dengan satu, bisa
disingkat dengan ++ dan -- untuk pengurangan.
Contoh:
var a = 2;
a++;
Lalu pertanyaanya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Penugasan</title>
</head>
<body>
<script>
document.write("Mula-mula nilai score...<br>");
// pengisian nilai
var score = 100;
document.write("score = "+ score + "<br/>");
// pengisian dan menjumlahan dengan 5
score += 5;
document.write("score = "+ score + "<br/>");
</html>
Hasilnya:
Operator perbandingan akan menghasilkan sebuah nilai boolean true dan false.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Perbandingan</title>
</head>
<body>
<script>
var aku = 20;
var kamu = 19;
// sama dengan
var hasil = aku == kamu;
document.write(`${aku} == ${kamu} = ${hasil}<br/>`);
// lebih besar
var hasil = aku > kamu;
document.write(`${aku} > ${kamu} = ${hasil}<br/>`);
// lebih kecil
var hasil = aku < kamu;
document.write(`${aku} < ${kamu} = ${hasil}<br/>`);
// tidak samadengan
var hasil = aku != kamu;
document.write(`${aku} != ${kamu} = ${hasil}<br/>`);
</script>
</body>
</html>
Hasilnya:
Pertanyaanya:
Apa perbedaan == (dua simbol samadengan) dengan === (tiga simbol samadengan)?
Contoh:
Logika OR ||
Negasi/kebalikan !
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Logika</title>
</head>
<body>
<script>
var aku = 20;
var kamu = 19;
// operator || (or)
var hasil = benar || salah;
document.write(`${benar} || ${salah} = ${hasil}<br/>`);
// operator ! (not)
var hasil = !benar
document.write(`!${benar} = ${hasil}<br/>`);
</script>
</body>
</html>
Hasilnya:
AND &
OR |
XOR ^
Negasi/kebalikan ~
Left Shift «
Right Shift »
Operator ini berlaku untuk tipe data int, long, short, char, dan byte.
a = 00111100
b = 00001101
Operasi AND
a = 00111100
b = 00001101
a & b = 00001100
Operasi OR
a = 00111100
b = 00001101
a | b = 00111101
Operasi XOR
a = 00111100
b = 00001101
a ^ b = 00110001
a = 00111100
~a = 11000011
Konsepnya memang hampir sama dengan opeartor Logika. Bedanya, Bitwise digunakan
untuk biner.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Bitwise</title>
</head>
<body>
<script>
var x = 4;
var y = 3;
// operator bitwise or
var hasil = x | y;
document.write(`${x} | ${y} = ${hasil}<br/>`);
// operator negasi
var hasil = ~x;
document.write(`~${x} = ${hasil}<br/>`);
</script>
</body>
</html>
Hasilnya:
Operator-operator sebelumnya hanya dua bagian saja, yaitu: bagian kiri dan kanan. Ini
disebut operator binary.
Opertor ternary pada Javascript, biasanya digunakan untuk membuat sebuah percabangan
if/else.
Simbol opertor ternary terdiri dari tanda tanya dan titik dua (?:).
Perhatikan! <kondisi> dapat kita isi dengan ekspresi yang menghasilkan nilai true dan
false.
Apabila kondisi bernilai true, maka "benar" yang akan dipilih dan sebaliknya—apabila
false—maka "salah" yang akan dipilih.
Pada contoh di atas, “Kamu suka aku” adalah pertanyaan atau kondisi yang akan diperiksa.
Kalau jawabannya benar, maka iya. Sebaliknya akan tidak.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Ternary</title>
</head>
<body>
<script>
var pertanyaan = confirm("Apakah kamu berumur diatas 18 tahun?")
</html>
Hasilnya:
Tugas Java Script :
1.
2.
3.
4.
5.
Latihan Java Script
1. PENULISAN PADA TAG
Contoh:
2. PENULISAN DENGAN TAG <SCRIPT>
Contoh:
3. TIPE DATA
Tipe-tipe data pada javascript yaitu: string, number, boolean, null, object dan
function
4. VARIABEL
Dengan variabel kita dapat menyimpan informasi pada memori dan dapat kita
pergunakan berkali-kali. Untuk membuat variabel ketik awalan var atau bisa juga
langsung dengan nama variabel tersebut.
Contoh:
var namaKu = “Fansyah”
atau
namaKu = “Fansyah”
5. OPERATOR, IF DAN PERULANGAN
Operator pada javascritp mirip dengan operator pada php, lihat pada bagian PHP untuk
mempelajari operator matematika, perbandingan dan logika. Begitu juga dengan sintak if
dan perulangan.
Contoh if: