ouyn7bxyFaag4m2JoFMaUf90bRL1PfElec3ecMzt
Bookmark

25+ Contoh Script JavaScript Sederhana

contoh script javascript sederhana 2023

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

Posting Komentar