Tutorial Lengkap Belajar JavaScript Untuk Pemula
Belajar Javascript Dasar - Di artikel ini kita akan berkenalan dengan javascript dan belajar bagaimana cara menerapkan javascript untuk membuat suatu program dengan HTML. Sebelum masuk ke topik bagaimana cara penggunaan javascript di dalam HTML, alangkah lebih baik jika kita berkenalan terlebih dahulu dengan javascript.
Table of Contents
Apa itu Javascript ?
Javascript atau mungkin lebih dikenal dengan sebutan "JS" merupakan bahasa pemrograman yang dinamis dan salah satu bahasa pemrograman terpopuler di dunia saat ini. Javascript dapat bekerja di sebagian besar search engine seperti Google Chrome, Internet Explorer, Mozilla Firefox, Opera dan lain-lain. Javascript dapat disisipkan di halaman web dengan menggunakan tag <script>. Javascript merupakan salah satu teknologi inti World Wide Web atau biasa disebut dengan WWW selain HTML dan CSS. Javascript sangat membantu untuk membuat halaman web yang interaktif dan merupakan bagian aplikasi web yang esensial.
Javascript awalnya hanya diimplementasikan sebagai client-side (browser) dalam web explore, tapi kini javascript dapat disisipkan ke dalam software seperti server side dalam web server dan basis data, dalam program non web seperti perangkat lunak pengolah kata dan pembaca PDF, dan sebagai runtime environment yang memungkinkan penggunaan javascript untuk membuat aplikasi desktop maupun mobile. Dan bahkan saat ini, javascript juga sudah diterapkan dalam pembuatan AI dan IoT.
Source: Wikipedia
Suvery yang dilakukan stackoverflow pada tahun 2020 menghasilkan Javascript menempati posisi pertama selama delapan tahun berturut-turut pada kategori "Programming, Scripting and Markup Languages" dari total response 57.378 users. Keren ya.
Source: Developer 2020 Survey
Statistik di overflow juga diikuti statistik javascript di github dengan menempati posisi pertama pada kategori TOP languages over the year. Source: octoverse.
Pada Q2 tahun 2021, Javascript juga masih belum patah dominasinya dengan masih menempati posisi pertama pada kategori "pull request","pushes" dan "stars". source: Madnight.github
Sejarah Javascript
Javascript pertama kali dikembangkah oleh Brendan Eich dari Netscape di bawah nama Mocha, yang kemudian namanya diganti menjadi livescript dan berganti lagi menjadi JavaScript. Navigator sebelumnya telah mendukung java untuk lebih bisa dimanfaatkan oleh para programmer non-java. Maka dikembangkanlah bahasa pemrograman yang bernama LiveScript untuk mengakomodir hal tersebut. Bahasa pemrograman inilah yang akhirnya dikembangkah dan diberi nama Javascript, walaupun tidak ada hubungannya dengan Java, aksara jawa dan apalagi pulau jawa (Java). Jadi jangan bingung antara Javascript dengan bahasa pemrograman java. Baik Java maupun Javascript keduanya merupakan trademark atau merek dagang yang keduanyapun memiliki syntax, semantic dan penggunaan.
Source: Wikipedia
Belajar Javascript Dasar
Setelah mengetahui apa itu javascript dan sejarah javascript, sekarang mari kita masuk ke contoh penggunaan javascript dasar pada HTML. Ada beberapa cara menggunakan javascript dalam HTML diantaranya adalah inline, embed dan eksternal. Di artikel belajar javascript untuk pemula ini nanti akan dibahas dari masing-masing cara menggunakan javascript di HTML tersebut.
<script>
document.getElementById("demo").innerHTML = "Hello World";
</script>Di HTML, penggunaan kode javascript disisipkan diantara tag <script> dan </script> seperti pada contoh di atas. Menggunakan javascript lama dalam HTML mungkin perlu menggunakan attribute <script type="text/javascript">, tapi untuk saat ini attribute type sudah tidak diperlukan lagi karena javascript merupakan bahasa skrip default dalam HTML. Kode javascript dapat ditempatkan di dalam <head> atau di dalam <body> pada halaman HTML. Tapi menempatkan kode javascript di antara <body></body> dapat meningkatkan performa website karena interpretasi skrip dapat memperlambat tampilan.
Contoh Inline Javascript
<button onclick="document.getElementById('demo').style.fontSize='small'">Small</button>Contoh Embed
<button onclick="small()">Small</button>
<script>
function small(){
document.getElementById("demo").style.fontSize = "small";
}
</script>Contoh Eksternal Javascript
<button onclick="small()">Small</button>
<script src="main.js"></script>main.js
function small()
{
document.getElementById("demo").style.fontSize = "small";
}Dari ketiga contoh penggunaan javascript di atas fungsinya sama saja, yaitu mengubah style font size HTML ketika button diklik.
Menampilkan data dengan javascript dapat dilakukan dengan cara yang berbeda-beda, diantaranya:
- innerHTML, digunakan untuk menampilkan data ke dalam element HTML.
- document.write(), digunakan untuk menampilkan data ke dalam output HTML.
- window.alert() digunakan untuk menampilkan data ke dalam alert box atau biasa disebut juga pop up.
- console.log(), digunakan untuk menampilkan data ke console browser (biasanya digunakan untuk debugging).
Menggunakan innerHTML
<!DOCTYPE html>
<html>
<body>
<h1>Belajar Javascript</h1>
<p>Menggunakan innerHTML</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello world! welcome to codelapan.com";
</script>
</body>
</html>Untuk mengakses element HTML dengan javascript dapat menggunakan metode document.getElementbyId(id). Attribute id pada element digunakan untuk mendifinisikan element HTML yang akan diproses ke dalam javascript. dan property innerHTML digunakan untuk mendifinisikan konten HTML yang akan ditampilkan.
Pada contoh di atas, element <p> kita beri attribute id="demo", kemudian kita buat script javascript yang digunakan untuk memproses attribute id="demo" dengan getElementById dan selanjutnya kita tampilkan data pada attribute id="demo" dengan text "Hello world! welcome to codelapan.com" menggunakan innerHTML.
Menggunakan Document.write()
<!DOCTYPE html>
<html>
<body>
<h1>Belajar Javascript</h1>
<script>
document.write("Tutorial Javascript Dasar dari Codelapan");
</script>
</body>
</html>document.write() diperuntukkan untuk tujuan pengujian script javascript. Untuk penggunaan document.write() sendiri bisa dilihat pada contoh kode di atas. Dengan kode seperti di atas, jika dibuka pada browser maka value "Tutorial Javascript dari Codelapan" akan tampil tepat di bawah element <h1> dengan data Belajar Javascript.
Menggunakan window.alert()
<script>
window.alert("welcome to codelapan.com");
</script>Untuk menampilkan data dengan window.alert() bisa dengan cara seperti di atas atau bisa juga dengan cara seperti di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
</head>
<body>
<h1>Menampilkan Alert</h1>
<script>
alert('welcome to codelapan.com');
</script>
</body>
</html>Selain dengan cara yang pertama, untuk menampilkan alert pada web browser dengan javascript juga bisa menggunakan script alert seperti pada contoh di atas. Dengan kode di atas, ketika kita membuka browser atau ketika reload halaman, maka akan menampilkan pesan alert "welcome to codelapan.com".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
</head>
<body>
<h1>Menampilkan Alert</h1>
<a href="#" onclick="alert('welcome to codelapan.com')">Click here</a>
<a href="javascript:alert('welcome to codelapan.com')">Click here</a>
</body>
</html>Pada contoh sebelumnya kita menggunakan script alert untuk menampilkan alert setiap membuka browser maupun saat reload halaman. Kali ini kita akan menampilkan alert saat klik link. kita juga bisa menampilkan alert dengan event onclick dan javascript:alert. Contoh menampilkan alert saat klik link bisa dilihat pada contoh kode di atas, dimana pada kedua contoh link di atas ketika diklik akan sama-sama menampilkan pesan alert "welcome to codelapan.com".
Menggunakan Console.log()
Method console.log() digunakan untuk menampilkan pesan ke console. Console.log() biasanya digunakan untuk tujuan testing atau pengujian terhadap suatu fungsi javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
</head>
<body>
<script>
console.log('Hello World!');
document.write('welcome to codelapan.com');
</script>
</body>
</html>Contoh penggunaan console.log() bisa dilihat pada contoh code di atas. Jika kita buka pada browser maka yang tampil di halaman browser hanya "welcome to codelapan.com". Lalu dimana text "Hello World" ditampilkan ?
Coba klik kanan>inspect>tab console atau tekan F12 maka hasilnya akan seperti gambar di atas. Text "Hellow World!" yang kita tampilkan dengan method console.log() sudah berhasil ditampilkan juga. Contoh lain penggunaan console.log() bisa dilihat pada dua contoh di bawah ini.
Contoh: menampilkan object ke console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
</head>
<body>
<script>
var fullname = { firstname : "John", lastname : "Doe" };
console.log(fullname);
document.write('Hello World!');
</script>
</body>
</html>Hasil
Di atas merupakan contoh bagaimana cara menampilkan object javascript ke console.
Contoh: Menampilkan array ke console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
</head>
<body>
<script>
var member = ["Paijo", "Ponidi", "Tukiman", "Suwaji","Tulkiyem","Monaji" ];
console.log(member);
document.write('Hello World!');
</script>
</body>
</html>Hasil
Dan contoh di atas merupakan cara bagaimana cara menampilkan data array javascript ke console.
Mengubah Konten HTML dengan Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
</head>
<body>
<h1 id="demo">Hello World!</h1>
<button onclick="change()">Click</button>
<script>
function change(){
document.getElementById("demo").innerHTML = "Welcome to Codelapan.com";
}
</script>
</body>
</html>Dengan javascript, kita bisa mengubah konten HTML dengan metode getElementById() seperti pada contoh di atas. Dengan kode di atas, jika kita buka di browser maka saat pertama kali halaman dimuat akan menampilkan text "Hello World!" namun ketika kita klik button maka akan memanggil fungsi change dan dari fungsi change tersebut akan mencari elemen HTML dengan id="demo" dan mengubah konten element HTML dengan innerHTML menjadi "welcome to Codelapan.com".
Mengubah HTML styles (CSS) dengan Javascript
Menggunakan inline javascript untuk mengubah font size bisa menggunakan cara seperti contoh di atas. Pada contoh di atas, kita set default font-size: small, kemudian kita buat 3 button size option dengan masing-masing terdapat inline javascript untuk mengubah font size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
<style>
body {
font-size: small;
}
</style>
</head>
<body id="demo">
<h1>Hello World!</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button onclick="small()">Small</button>
<button onclick="medium()">Medium</button>
<button onclick="large()">Large</button>
<script>
function small(){
document.getElementById("demo").style.fontSize = "small";
}
function medium(){
document.getElementById("demo").style.fontSize = "medium";
}
function large(){
document.getElementById("demo").style.fontSize = "large";
}
</script>
</body>
</html>Atau jika ingin menggunakan embed javascript bisa juga menggunakan seperti pada contoh di atas. Secara fungsi sama saja antara inline maupun embed hanya saja yang mebedakan hanyalah metode penulisan kodenya saja.
Hide & Show Element HTML
Ada saatnya kita akan membutuhkan fungsi javascript yang bisa berfungsi untuk menyembunyikan atau menampilkan suatu element. Untuk membuat hal tersebut, kta bisa menggunakan style.display="hide" atau style.display="block" seperti pada contoh di bawah ini.
Inline Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
<style>
body {
font-size: small;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p id="demo">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button onclick="document.getElementById('demo').style.display='none'">Hide</button>
<button onclick="document.getElementById('demo').style.display='block'">Show</button>
</body>
</html>Embed Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript</title>
<style>
body {
font-size: small;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p id="demo">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
<script>
function hide(){
document.getElementById("demo").style.display = "none";
}
function show(){
document.getElementById("demo").style.display = "block";
}
</script>
</body>
</html>Dari kedua contoh penggunaan javascript di atas mempunyai fungsi yang sama yaitu ketika button Hide diklik maka akan mengubah style display dari element HTML dengan id="demo" menjadi none dan ketika button show diklik maka akan mengubah style display menjadi block.
Kita akhiri terlebih dahulu artikel kali ini dan akan kita sambung lagi topik belajar javascript di artikel berikutnya. Jika ada kritik, saran atau masukan yang bisa membangun agar kedepannya kami semakin baik lagi dalam menghadirkan artikel, tinggalkan komentar kalian di form komentar yang tersedia di bawah ini. See you :)
Web illustrations by Storyset
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 66851 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32132 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 31338 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28485 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27761 views
Facebook 
Whatsapp 
Twitter 
Telegram