Jika Anda ingin belajar coding, JavaScript adalah salah satu bahasa pemrograman yang perlu Anda pelajari. Namun, bagi pemula, bisa jadi sulit untuk memulai karena bahasa pemrograman ini bisa terlihat rumit. Di artikel ini, kita akan membahas Contoh Codingan JavaScript Sederhana untuk membantu Anda memulai dan memahami dunia coding dengan cara yang menyenangkan.
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website interaktif. Bahasa pemrograman ini berbeda dengan HTML dan CSS yang digunakan untuk membuat tampilan website. Dalam JavaScript, Anda dapat menambahkan interaksi seperti animasi, validasi form, dan navigasi halaman.
Kenapa Perlu Belajar JavaScript?
Belajar JavaScript sangat penting karena bahasa pemrograman ini digunakan di seluruh dunia dan menjadi keterampilan yang sangat dicari dalam dunia kerja. Banyak perusahaan dan startup membutuhkan developer yang mahir dalam JavaScript.
Selain itu, belajar JavaScript juga memberi Anda kemampuan untuk membangun website yang lebih interaktif dan menarik. Anda bisa membuat form yang lebih kompleks, membuat animasi, dan mengubah konten halaman secara dinamis.
Contoh Script JavaScript Sederhana
Berikut adalah contoh script JavaScript sederhana yang bisa Anda coba sendiri:
1.Mengubah Warna Background
kamu bisa mengubah warna background halaman website dengan menggunakan kode berikut:
document.body.style.backgroundColor = "red";
Atau kamu juga bisa mencoba warna lainnya seperti hijau, biru, atau bahkan warna pelangi yang indah.
2.Validasi Form
kamu bisa melakukan validasi pada form dengan menggunakan kode berikut:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Nama harus diisi");
return false;
}
}
Jangan lupa untuk mengganti "myForm" dan "fname" dengan nama form dan nama field yang kamu gunakan.
3.Mengubah Konten Halaman
kamu bisa mengubah konten halaman dengan menggunakan kode berikut:
document.getElementById("myText").innerHTML = "Hello JavaScript!";
Ganti "myText" dengan id element HTML yang ingin kamu ubah.
4.Mengubah Gambar
kamu bisa mengubah gambar pada halaman dengan menggunakan kode berikut:
document.getElementById("myImage").src = "newimage.jpg";
Pastikan kamu sudah mengganti "myImage" dengan id gambar yang ingin kamu ubah dan mengganti "newimage.jpg" dengan nama gambar yang ingin kamu tampilkan.
5.Membuat Teks Yang Berkedip
kamu bisa membuat teks yang berkedip dengan menggunakan kode berikut:
setInterval(function() {
var element = document.getElementById('myText');
element.style.display = (element.style.display == 'none' ? '' : 'none');
}, 1000);
Ganti "myText" dengan id element HTML yang ingin kamu buat berkedip.
6.Membuat Dropdown Menu
kamu bisa membuat dropdown menu dengan menggunakan kode berikut:
function dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropdown-button')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Pastikan kamu sudah mengganti "myDropdown" dengan id dropdown menu yang ingin kamu buat.
7.Membuat Slide Show Gambar
kamu bisa membuat slide show gambar dengan menggunakan kode berikut:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000);
}
Pastikan kamu sudah mengganti "mySlides" dengan class gambar yang ingin kamu gunakan pada slide show.
8.Membuat Tombol Scroll to Top
kamu bisa membuat tombol scroll to top dengan menggunakan kode berikut:
myButton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
myButton.style.display = "block";
} else {
myButton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Pastikan kamu sudah mengganti "myBtn" dengan id tombol scroll to top yang ingin kamu gunakan.
9.Membuat Tampilan Jam Digital
kamu bisa membuat tampilan jam digital dengan menggunakan kode berikut:
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // tambahkan angka 0 jika menit atau detik < 10
return i;
}
Pastikan kamu sudah mengganti "clock" dengan id element HTML yang ingin kamu gunakan untuk menampilkan jam digital.
10.Menghitung Jumlah Karakter Pada Inputan
kamu bisa menghitung jumlah karakter pada inputan dengan menggunakan kode berikut:
function countChars(obj){
var maxLength = 100; // ganti dengan jumlah karakter maksimum yang diizinkan
var strLength = obj.value.length;
var charRemain = (maxLength - strLength);
if(charRemain < 0){
document.getElementById("charNum").innerHTML = '' + charRemain + ' karakter terlalu banyak!';
}else{
document.getElementById("charNum").innerHTML = charRemain+' karakter tersisa.';
}
}
Pastikan kamu sudah mengganti "charNum" dengan id element HTML yang ingin kamu gunakan untuk menampilkan jumlah karakter tersisa.
11.Membuat Slider Gambar
kamu bisa membuat slider gambar dengan menggunakan kode berikut:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Pastikan kamu sudah mengganti "mySlides" dan "dot" dengan class element HTML yang ingin kamu gunakan untuk membuat slider gambar.
12.Membuat Tampilan Cuaca
kamu bisa membuat tampilan cuaca dengan menggunakan API cuaca seperti OpenWeatherMap dan kode berikut:
var api = "https://api.openweathermap.org/data/2.5/weather?q=Jakarta&appid=API_KEY";
fetch(api)
.then(response => response.json())
.then(data => {
console.log(data);
var temp = Math.round(data.main.temp - 273.15);
var weather = data.weather[0].description;
var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
document.getElementById("weather-temp").innerHTML = temp + "°C";
document.getElementById("weather-icon").src = icon;
document.getElementById("weather-desc").innerHTML = weather;
});
Pastikan kamu sudah mengganti "API_KEY" dengan API key yang valid dari OpenWeatherMap.
13. Membuat Tooltip Pada Element HTML
kamu bisa membuat tooltip pada element HTML dengan menggunakan kode berikut:
function myFunction() {
var x = document.getElementById("myTooltip");
x.classList.toggle("show");
14.Membuat Tombol Back To Top
kamu bisa membuat tombol back to top dengan menggunakan kode berikut:
var mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Pastikan kamu sudah mengganti "myBtn" dengan id tombol back to top yang ingin kamu gunakan.
15.Membuat Filter Pada Table
kamu bisa membuat filter pada table dengan menggunakan kode berikut:
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Pastikan kamu sudah mengganti "myInput" dan "myTable" dengan id inputan filter dan id table yang ingin kamu gunakan.
16.Membuat Countdown Timer
kamu bisa membuat countdown timer dengan menggunakan kode berikut:
var countDownDate = new Date("Jan 1, 2024 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
Pastikan kamu sudah mengganti tanggal dan waktu countdown sesuai dengan keinginanmu.
17.Membuat Animasi Scroll
kamu bisa membuat animasi scroll dengan menggunakan kode berikut:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Pastikan kamu sudah menggunakan library jQuery untuk bisa menggunakan kode tersebut.
18.Membuat Teks Berjalan
Kamu bisa membuat teks berjalan dengan menggunakan kode berikut:
var slide = document.querySelector('.slide');
var pos = 0;
function sliding() {
setInterval(function() {
pos -= 2;
slide.style.transform = 'translateX(' + pos + 'px)';
if (pos < -slide.offsetWidth) {
pos = 0;
}
}, 10);
}
sliding();
19.Efek Salju di Website
// Membuat efek salju
let snowflakes = []; // array untuk menyimpan salju
for (let i = 0; i < 100; i++) {
let snowflake = document.createElement('div'); // membuat elemen div untuk salju
snowflake.classList.add('snowflake'); // menambahkan kelas snowflake ke elemen div
snowflake.style.left = Math.random() * window.innerWidth + 'px'; // menentukan posisi horizontal salju secara acak
snowflake.style.animationDelay = Math.random() * 10 + 's'; // menentukan keterlambatan animasi secara acak
document.body.appendChild(snowflake); // menambahkan elemen div ke body dokumen
snowflakes.push(snowflake); // menambahkan elemen div ke dalam array snowflakes
}
// Menghapus efek salju setelah 10 detik
setTimeout(function() {
for (let i = 0; i < snowflakes.length; i++) {
document.body.removeChild(snowflakes[i]); // menghapus elemen div dari body dokumen
}
}, 10000);
Jika kamu suka dengan suasana Natal, cobalah menambahkan efek salju pada website-mu dengan menggunakan javascript. Selain membuat website-mu terlihat lebih menarik, kamu juga bisa membuat pengunjungmu merasa lebih terhibur.
20.Game Tebak Kata
// Daftar kata yang harus ditebak
let words = ['apel', 'jeruk', 'mangga', 'pisang', 'anggur'];
// Memilih kata secara acak
let word = words[Math.floor(Math.random() * words.length)];
// Membuat array kosong untuk menyimpan huruf yang sudah ditebak
let guessedLetters = [];
// Membuat fungsi untuk mengecek apakah huruf sudah ditebak atau belum
function isLetterGuessed(letter) {
return guessedLetters.includes(letter);
}
// Membuat fungsi untuk menampilkan kata yang harus ditebak dan huruf yang sudah ditebak
function displayWord() {
let display = '';
for (let i = 0; i < word.length; i++) {
if (isLetterGuessed(word[i])) {
display += word[i];
} else {
display += '_';
}
}
console.log(display);
}
// Memanggil fungsi displayWord untuk menampilkan kata yang harus ditebak
displayWord();
// Meminta pengguna untuk menebak huruf
let letter = prompt('Tebak satu huruf:');
// Menambahkan huruf yang ditebak ke dalam array guessedLetters
guessedLetters.push(letter);
// Memanggil fungsi displayWord untuk menampilkan kata yang harus ditebak dengan huruf yang sudah ditebak
displayWord();
Buatlah game tebak kata sederhana dengan menggunakan javascript. Kamu bisa memberikan petunjuk untuk setiap kata yang harus ditebak, sehingga game-mu akan terasa lebih menarik.
21.Countdown Menuju Tanggal Tertentu
// Tanggal target countdown (tahun, bulan, hari, jam, menit, detik)
var targetDate = new Date("2023-04-01T00:00:00");
// Mendapatkan elemen HTML untuk menampilkan countdown
var countdownElement = document.getElementById("countdown");
// Fungsi untuk menghitung sisa waktu
function hitungSisaWaktu() {
var sekarang = new Date();
var sisaWaktu = targetDate - sekarang;
// Menghitung jumlah hari, jam, menit, dan detik yang tersisa
var sisaHari = Math.floor(sisaWaktu / (1000 * 60 * 60 * 24));
var sisaJam = Math.floor((sisaWaktu % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var sisaMenit = Math.floor((sisaWaktu % (1000 * 60 * 60)) / (1000 * 60));
var sisaDetik = Math.floor((sisaWaktu % (1000 * 60)) / 1000);
// Menampilkan countdown pada elemen HTML yang telah ditentukan
countdownElement.innerHTML = "Countdown menuju tanggal 1 April 2023: " + sisaHari + " hari, " + sisaJam + " jam, " + sisaMenit + " menit, " + sisaDetik + " detik.";
}
// Memanggil fungsi hitungSisaWaktu setiap 1 detik
setInterval(hitungSisaWaktu, 1000);
Dalam script ini, kita menentukan tanggal target countdown pada variabel targetDate. Kemudian, kita menghitung sisa waktu yang tersisa antara tanggal sekarang dan tanggal target menggunakan fungsi hitungSisaWaktu.
Kita juga mendapatkan elemen HTML untuk menampilkan countdown pada variabel countdownElement. Terakhir, kita memanggil fungsi hitungSisaWaktu setiap 1 detik menggunakan fungsi setInterval.
Gunakan javascript untuk membuat countdown menuju tanggal tertentu, seperti ulang tahunmu atau hari libur nasional. Kamu bisa menambahkan pesan lucu untuk memeriahkan countdown-mu.
22.Animasi Kartun Sederhana
// Mendapatkan elemen HTML untuk animasi
var elem = document.getElementById("animasi");
var pos = 0; // posisi awal elemen
var kecepatan = 10; // kecepatan animasi (semakin kecil nilainya, semakin lambat animasi berjalan)
// Fungsi untuk menggerakkan elemen
function gerak() {
if (pos >= window.innerWidth - elem.offsetWidth) { // Jika elemen mencapai batas kanan layar
clearInterval(id); // Berhenti melakukan animasi
} else {
pos++; // Geser elemen sejauh 1 piksel ke kanan
elem.style.left = pos + "px"; // Ubah posisi elemen
}
}
// Memulai animasi
var id = setInterval(gerak, kecepatan);
Jika kamu suka menggambar, cobalah membuat animasi kartun sederhana dengan menggunakan javascript. Kamu bisa membuat karakter kartun dan menganimasikannya dengan javascript.
23.Efek Hover pada Gambar
// Mendapatkan elemen gambar
var gambar = document.getElementById("gambar");
// Menambahkan event listener untuk efek hover
gambar.addEventListener("mouseover", function() {
gambar.src = "gambar_hover.png"; // Mengganti gambar dengan gambar hover
});
// Menambahkan event listener untuk efek hover keluar
gambar.addEventListener("mouseout", function() {
gambar.src = "gambar_normal.png"; // Mengganti gambar dengan gambar normal
});
Script di atas akan mengganti gambar dengan gambar hover saat mouse berada di atas gambar, dan mengembalikan gambar ke keadaan semula saat mouse keluar dari gambar.
Pastikan kamu mengubah gambar_hover.png dan gambar_normal.png dengan nama file gambar yang kamu gunakan.
Kamu juga bisa memodifikasi script ini untuk memberikan efek hover yang lebih kompleks, seperti mengubah warna atau ukuran gambar.
Buatlah efek hover sederhana pada gambar dengan menggunakan javascript. Kamu bisa menambahkan efek bayangan atau efek zoom-in saat pengunjung mengarahkan kursor ke gambar.
24.Permainan Kucing Berburu Tikus
Pertama, kita akan menambahkan variabel score yang akan menyimpan jumlah tikus yang berhasil ditangkap kucing.
var score = 0;
Kemudian, di dalam fungsi catchMouse, setelah kucing berhasil menangkap tikus, kita akan menambahkan efek dan meningkatkan skor.
// Menangkap tikus
if (Math.abs(kucingX - tikusX) < 50 && Math.abs(kucingY - tikusY) < 50) {
// Mengubah posisi tikus
tikusX = Math.floor(Math.random() * (canvas.width - 50));
tikusY = Math.floor(Math.random() * (canvas.height - 50));
// Meningkatkan skor
score++;
// Menambahkan efek
context.beginPath();
context.arc(tikusX + 25, tikusY + 25, 30, 0, 2 * Math.PI);
context.strokeStyle = "red";
context.lineWidth = 10;
context.stroke();
}
Kode di atas akan membuat lingkaran merah di sekitar tikus yang berhasil ditangkap, dan meningkatkan skor. Kita juga akan menambahkan teks skor ke layar.
// Menggambar teks skor
context.font = "bold 20px Arial";
context.fillStyle = "white";
context.fillText("Score: " + score, 20, 30);
Dan itulah cara menambahkan efek dan skor pada permainan kucing berburu tikus kita. Jangan lupa untuk terus berkreasi sendiri agar skill kamu terus berkembang!
25.Efek Paralaks
Pertama, kita akan menambahkan variabel untuk menyimpan jarak perpindahan layer yang lebih lambat.
var parallaxDistance = 200;
Kemudian, di dalam fungsi draw, kita akan menggambar layer yang lebih lambat dengan posisi yang bergeser sedikit dari posisi layer yang lebih cepat.
// Menggambar layer yang lebih cepat
context.drawImage(layer1, 0, 0);
// Menggambar layer yang lebih lambat
var layer2X = -(scrollPosition / 2) % layer2.width;
if (layer2X > 0) {
layer2X -= layer2.width;
}
while (layer2X < canvas.width) {
context.drawImage(layer2, layer2X, parallaxDistance);
layer2X += layer2.width;
}
Perhatikan bahwa kita menggunakan variabel scrollPosition yang merepresentasikan posisi scroll halaman, dan menggerakkan layer yang lebih lambat dengan kecepatan setengah dari posisi scroll.
Kita juga menggunakan variabel layer2X untuk mengatur posisi awal layer yang lebih lambat, dan mengulangi gambar layer tersebut secara berulang-ulang dengan jarak parallaxDistance dari layer yang lebih cepat.
Sekarang, kita bisa menambahkan beberapa animasi pada efek paralaks ini. Misalnya, kita bisa membuat layer yang lebih lambat bergerak lebih lambat dari layer yang lebih cepat dengan menambahkan variabel parallaxSpeed.
var parallaxSpeed = 0.2;
Kemudian, di dalam fungsi draw, kita akan menggeser posisi layer yang lebih lambat dengan parallaxSpeed kali jarak perpindahan scroll.
// Menggambar layer yang lebih cepat
context.drawImage(layer1, 0, 0);
// Menggambar layer yang lebih lambat
var layer2X = -(scrollPosition / 2) % layer2.width;
if (layer2X > 0) {
layer2X -= layer2.width;
}
while (layer2X < canvas.width) {
context.drawImage(layer2, layer2X, parallaxDistance);
layer2X += layer2.width;
}
// Menggeser posisi layer yang lebih lambat
parallaxDistance += scrollPosition * parallaxSpeed;
Sekarang, layer yang lebih lambat akan bergerak lebih lambat dari layer yang lebih cepat, memberikan efek yang lebih realistis.
Tambahkan efek paralaks pada website-mu dengan menggunakan javascript. Kamu bisa membuat gambar dan teks bergerak pada kecepatan yang berbeda untuk memberikan efek yang lebih dinamis.
26.Animasi Loading
var loader = document.querySelector('.loader');
function loading() {
var i = 0;
setInterval(function() {
loader.style.width = (i * 10) + '%';
i++;
if (i > 10) {
i = 0;
}
}, 100);
}
loading();
Tambahkan animasi loading pada website-mu dengan menggunakan javascript. Kamu bisa membuat animasi yang lucu atau menghibur untuk mengalihkan perhatian pengunjung selama website-mu memuat.
Video Belajar Coding Javascript Sederhana
Kesimpulan
Belajar JavaScript mungkin terlihat sulit pada awalnya, tapi dengan praktek dan bermain-main dengan kode, Anda bisa dengan mudah menguasainya. Contoh script JavaScript sederhana di atas hanyalah permulaan, ada banyak hal yang bisa Anda lakukan dengan bahasa pemrograman ini. Selamat mencoba!
FAQs
Apakah JavaScript sulit untuk dipelajari?
JavaScript bisa terlihat sulit pada awalnya, tapi dengan praktek dan kesabaran, Anda bisa dengan mudah menguasainya.
Apa yang bisa dibuat dengan JavaScript?
Anda bisa membuat website interaktif, membuat form yang kompleks, animasi, dan mengubah konten halaman secara dinamis.
Apakah saya perlu menguasai HTML dan CSS sebelum mempelajari JavaScript?
Anda tidak perlu menguasai HTML dan CSS untuk mempelajari JavaScript, tapi memahami HTML dan CSS bisa membantu Anda lebih memahami JavaScript.
Posting Komentar