JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website menjadi interaktif. Misalnya, JavaScript memungkinkan terjadinya perubahan saat sebuah tombol diklik, pembuatan animasi, pengembangan game, dan masih banyak lagi.
Di GitHub, JavaScript adalah bahasa pemrograman yang paling banyak digunakan. Popularitasnya didorong oleh banyaknya perusahaan besar yang menciptakan framework JavaScript yang sangat baik, seperti Facebook dengan React dan Google dengan Angular. Selain itu, semakin banyaknya tools yang memudahkan pengembangan JavaScript, seperti webpack dan yarn, bersama dengan evolusi berkelanjutan dari JavaScript itu sendiri menjadi bahasa pemrograman yang matang (ES6), semakin memperkuat prominensinya.
Saat ini, JavaScript tidak hanya digunakan untuk membuat aplikasi yang berjalan di browser, tetapi juga untuk mengembangkan aplikasi desktop, mobile, bahkan aplikasi IoT. Semakin populer sebuah bahasa pemrograman, semakin banyak peluang kerja yang dihasilkan, itulah sebabnya sangat bermanfaat untuk belajar JavaScript.
Biasanya, ketika mulai belajar bahasa pemrograman, selain mempelajari dasar-dasar langkah demi langkah untuk secara bertahap membangun kemampuan JavaScript Anda, Anda juga bisa belajar dari contoh. Berikut adalah 5 contoh aplikasi sederhana untuk belajar JavaScript. Contoh-contoh ini dibuat dengan JavaScript murni, tanpa library seperti jQuery atau lainnya. Setiap contoh menyertakan komentar pada baris kode untuk menjelaskan tujuan dari baris tersebut. Semoga contoh-contoh JavaScript ini dapat membantu Anda dalam perjalanan belajar.
Memulai
Yang Anda butuhkan untuk membuat dan menjalankan contoh JavaScript di bawah ini adalah:
- Text editor
- Web browser
Saya menggunakan Visual Studio Code sebagai text editor, dan Google Chrome sebagai web browser. Anda dapat menggunakan text editor lain, seperti Sublime atau Zed. Untuk web browser, Anda dapat menggunakan Mozilla atau Safari. Ngomong-ngomong, Visual Studio Code dibuat dengan JavaScript.
Setelah Anda memiliki text editor dan web browser, mari langsung masuk ke contoh JavaScript di bawah ini.
Hello, World!
Ini hampir seperti ritual wajib dalam tutorial untuk memulai dengan potongan kode yang menampilkan "Hello, world!". Mari ikuti tutorial lainnya. Tapi dalam contoh ini, tidak hanya ada satu output "Hello, world!", melainkan lima. Karena ada banyak cara untuk menampilkan pesan di JavaScript.
index.html
<div class="app"></div>
<script src="app.js"></script>app.js
// Using alert
alert("Hello world!");
// Using console. See the result in the developer console (F12)
console.log("Hello world!");
// Select an existing element and fill it with text
var app = document.querySelector(".app");
app.innerHTML = "Hello world!";
// Directly write text inside the body
document.body.appendChild(document.createTextNode("Hello world!"));
// Create a new element, fill it with text, then add it inside the body
var title = document.createElement("h1");
title.appendChild(document.createTextNode("Hello world!"));
document.body.appendChild(title);Demo Hello World
Kelima metode yang disebutkan adalah sebagai berikut: Pertama, kita menggunakan alert yang muncul langsung ketika program berjalan.
Kedua, menggunakan console.log, yang menampilkan pesan di developer console (F12 atau klik kanan -> inspect element). Selain menampilkan pesan, console.log juga dapat digunakan untuk debugging (mencari bug).
Ketiga, dengan mengatur atribut innerHTML dari elemen yang sudah ada di DOM. Kita perlu terlebih dahulu mengambil elemen dari DOM menggunakan document.querySelector.
Keempat, dengan langsung menulis teks di body menggunakan appendChild, yang berfungsi untuk menyisipkan Node ke dalam elemen, dan createTextNode, yang membuat Text Node.
Terakhir, dengan membuat elemen baru menggunakan document.createElement yang kemudian kita sisipkan ke dalam elemen body menggunakan appendChild.
Timer
Contoh berikutnya adalah timer yang menampilkan berapa detik aplikasi telah berjalan di browser. Untuk membuat timer ini, kita menggunakan setInterval, yang akan mengeksekusi fungsi pada interval yang ditentukan.
index.html
This website has been running for <b class="timer">0</b> seconds.
<script src="app.js"></script>app.js
var elapsed = 0;
var start = new Date();
var timer = document.querySelector(".timer");
// Function to calculate the number of seconds that have elapsed
function tick() {
elapsed = new Date() - start;
var roundedElapsed = Math.round(elapsed / 100);
var seconds = (roundedElapsed / 10).toFixed(1);
timer.innerHTML = seconds + " seconds";
};
// Every 50 milliseconds, run the tick function
setInterval(tick, 50);Demo Timer
Menu Navigasi
Berikutnya adalah Menu Navigasi sederhana, di mana kita melacak item menu mana yang dipilih dan menampilkannya.
index.html
<nav class="nav">
<a href="#" class="menu is-active" data-value="Home">Home</a>
<a href="#" class="menu" data-value="Services">Services</a>
<a href="#" class="menu" data-value="About">About</a>
<a href="#" class="menu" data-value="Contact Us">Contact Us</a>
</nav>
<div class="info">
You selected: <span class="selected">Home</span>
</div>
<script src="app.js"></script>app.js
var selectedMenu = "Home";
var selected = document.querySelector(".selected");
var menus = document.querySelectorAll(".menu");
var activeClass = "is-active";
// https://stackoverflow.com/a/43824723/1240036
function hasClass(el, className) {
if (el.classList)
return el.classList.contains(className);
return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
}
function addClass(el, className) {
if (el.classList)
return el.classList.add(className);
else if (!hasClass(el, className))
el.className += " " + className;
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className);
else if (hasClass(el, className)) {
var reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
el.className = el.className.replace(reg, " ");
}
}
// Function to set an element as active by adding the class is-active if the element
// has the same data-value, and removing the class is-active if the data-value is not the same
function toggleActive(els, elSelected) {
els.forEach(function(el) {
if (el.dataset.value === elSelected.dataset.value) {
addClass(el, activeClass);
selected.innerHTML = elSelected.dataset.value;
} else {
removeClass(el, activeClass);
}
})
}
menus.forEach(function(menu) {
// Add a listener for the click event, which is toggleActive.
menu.addEventListener("click", toggleActive.bind(this, menus, menu));
});Demo Menu Navigasi
Untuk mengubah tampilan menu yang sedang dipilih, kita perlu mengubah class dari menu navigasi yang dipilih. Itulah mengapa kita menggunakan tiga fungsi yang berguna untuk mengubah class dari sebuah elemen.
Fungsi pertama, hasClass, mengembalikan nilai true atau false dan digunakan untuk memeriksa apakah sebuah elemen memiliki class tertentu atau tidak.
Fungsi kedua adalah addClass, yang seperti namanya, untuk menambahkan class ke elemen. Fungsi ini menggunakan hasClass untuk menghindari penambahan class jika elemen sudah memiliki class tersebut.
Fungsi ketiga, removeClass, untuk menghapus class dari elemen. Fungsi ini juga menggunakan hasClass, sehingga hanya melakukan operasi penghapusan class jika class tersebut ada pada elemen.
Kemudian, ada fungsi toggleActive, yang akan kita panggil ketika menu diklik. Untuk memastikan toggleActive dieksekusi saat klik, kita perlu mendaftarkannya menggunakan addEventListener.
Validasi Login
Contoh berikutnya sangat sederhana; kita hanya menampilkan pesan jika email dan password yang dimasukkan tidak cocok dan menampilkan alert jika cocok. Dalam skenario dunia nyata, validasi dilakukan di server menggunakan ajax.
index.html
<div class="container">
<form action="" class="form">
<div class="error" style="display: none"></div>
<div class="input-field">
<label for="email">Email</label>
<input type="text" id="email" />
</div>
<div class="input-field">
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<input type="submit" value="Login">
</form>
</div>app.js
var form = document.querySelector(".form");
var error = document.querySelector(".error");
var inputFields = document.querySelectorAll(".input-field");
var email = document.getElementById("email");
var password = document.getElementById("password");
function addError(message) {
error.innerHTML = message;
error.style.display = "block";
}
function removeError() {
error.innerHTML = "";
error.style.display = "none"; // Change "hidden" to "none" for correct CSS display property
}
function validate(event) {
// event.preventDefault() stops the form from submitting and sending data to "action".
event.preventDefault();
error.style.display = "none";
if (email.value !== "[email protected]" || password.value !== "password") {
addError("Email or password is incorrect");
} else {
removeError();
alert("You have successfully logged in!");
}
}
form.addEventListener("submit", validate);Demo Validasi Login
Contoh ini sangat sederhana. Kita hanya menggunakan error.style.display untuk membuat elemen error terlihat atau tersembunyi dengan memberikan nilai block dan none.
Kemudian, kita mengubah konten teks dari elemen error dengan menggunakan innerHTML.
Form Order
Berikutnya adalah contoh yang sedikit lebih kompleks, melibatkan beberapa elemen dan operasi. Kita akan membuat aplikasi untuk menampilkan daftar item menu yang dapat dipilih dan kemudian menampilkan total biaya yang harus dibayar.
index.html
<div class="app"></div>
<script src="helper.js"></script>
<script src="app.js"></script>helper.js
// https://stackoverflow.com/a/43824723/1240036
function hasClass(el, className) {
if (el.classList)
return el.classList.contains(className);
return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
}
function addClass(el, className) {
if (el.classList)
return el.classList.add(className);
else if (!hasClass(el, className))
el.className += " " + className;
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className);
else if (hasClass(el, className)) {
var reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
el.className = el.className.replace(reg, " ");
}
}
function currency(amount) {
return "$" + amount;
}app.js
var products = [
{
id: 1,
name: "Cappuccino",
price: 35000,
active: true,
},
{
id: 2,
name: "Green Tea Latte",
price: 40000,
active: true
},
{
id: 3,
name: "Fish and Chips",
price: 50000,
active: true,
},
{
id: 4,
name: "Tuna Sandwich",
price: 45000,
active: true,
},
{
id: 5,
name: "Mineral Water",
price: 8000,
active: false,
},
{
id: 6,
name: "French Fries",
price: 18000,
active: false,
},
];
var total = 0;
var app = document.querySelector(".app");
// Render title
function renderTitle(container) {
var title = document.createElement("h1");
title.innerHTML = "Order";
container.appendChild(title);
}
function addTotal(product, total, isAdd) {
if (isAdd) {
total += product.price;
} else {
total -= product.price;
}
return total;
}
// Render list
function renderList(container, products) {
var orderList = document.createElement("ul");
products.forEach(function(product) {
var productItem = document.createElement("li");
var productPrice = document.createElement("span");
productPrice.innerHTML = currency(product.price);
productItem.innerHTML = product.name;
productItem.appendChild(productPrice);
orderList.appendChild(productItem);
productItem.addEventListener("click", function(event) {
var isAdd = !hasClass(productItem, "is-active");
if (isAdd) {
addClass(productItem, "is-active");
} else {
removeClass(productItem, "is-active");
}
total = addTotal(product, total, isAdd);
var totalElement = document.querySelector(".total span");
totalElement.innerHTML = currency(total);
});
});
container.appendChild(orderList);
}
// Render Total
function renderTotalContainer(container, total) {
var totalContainer = document.createElement("div");
addClass(totalContainer, "total");
totalContainer.innerHTML = "Total: ";
var totalValue = document.createElement("span");
totalValue.innerHTML = currency(total);
totalContainer.appendChild(totalValue);
container.appendChild(totalContainer);
}
renderTitle(app);
renderList(app, products);
renderTotalContainer(app, total);
var productElements = document.querySelectorAll("li");
productElements.forEach(function(productElement, index) {
if (index < 2) {
productElement.dispatchEvent(new Event("click"));
}
});Demo Form Order
Di sini kita menggunakan tiga fungsi untuk operasi class yang mirip dengan contoh kedua: hasClass, addClass, dan removeClass. Perbedaannya adalah di sini kita memindahkannya ke file lain, helpers.js, untuk keterbacaan yang lebih baik. Selain itu, dalam file ini, kita menyertakan fungsi currency, yang hanya menambahkan "$" di depan jumlah.
Fungsi baru yang digunakan dalam contoh ini adalah dispatchEvent. dispatchEvent berguna untuk memicu event listener pada elemen, yang dalam contoh di atas adalah "click", menghasilkan dua item teratas terpilih.
Kesimpulan
Belajar JavaScript itu mudah selama kita memiliki kemauan. Umumnya, operasi yang dilakukan dalam aplikasi JavaScript meliputi:
- Memilih elemen di DOM
- Memanipulasi DOM (mengubah atribut elemen seperti class)
- Membuat elemen
- Menambahkan eventListener ke elemen untuk membuatnya interaktif
Tentu saja, masih banyak lagi yang harus dipelajari tentang JavaScript. Tetap semangat, dan terima kasih telah membaca. Jangan lupa untuk membagikan ini kepada teman-teman Anda juga, haha.