JavaScript adalah salah satu bahasa pemrograman yang paling populer di dunia. Dikembangkan pertama kali oleh Brendan Eich pada tahun 1995, JavaScript dirancang untuk membuat halaman web menjadi lebih interaktif dan dinamis. Awalnya digunakan secara eksklusif di sisi klien (browser), namun seiring dengan berkembangnya teknologi, JavaScript kini juga dapat dijalankan di sisi server melalui platform Node.js. Oleh karena itu, Pengenalan Dasar Pemrograman JavaScript sangat penting untuk kita pelajari.
Dengan JavaScript, Programmer dapat membuat berbagai jenis aplikasi web, mulai dari aplikasi sederhana hingga aplikasi web kompleks. Bahasa ini memiliki sintaksis yang sederhana dan mudah dipelajari, membuatnya menjadi pilihan yang populer bagi pengembang pemula maupun berpengalaman.
Melalui artikel Pengenalan Dasar Pemrograman Javascript, kita akan mengenali berbagai aspek dan konsep dasar bahasa pemrograman JavaScript, serta contoh penggunaannya dalam pengembangan aplikasi web modern. Mari kita mulai pelajaran kita dalam memahami JavaScript dengan lebih mendalam!
Berikut adalah tabel bab yang akan kita pelajari :
Table of Contents
- Bab 1: Pengenalan Dasar Pemrograman JavaScript
- Bab 2: Pengenalan Sejarah JavaScript
- Bab 3: Pengenalan Struktur Dasar Javascript
- Bab 4: Variabel dan Tipe Data
- Bab 5: Operator
- Bab 6: Struktur Kontrol
- Bab 7: Fungsi
- Bab 8: Array
- Bab 9: Objek
- Bab 10: Looping
- Bab 11: Pengantar DOM
- Bab 12: Event Handling
- Bab 13: AJAX
- Bab 14: Manipulasi DOM
- Bab 15: Local Storage
- Bab 16: Pengenalan ES6
- Bab 17: Promises
- Bab 18: Async/Await
- Bab 19: React
- Bab 20: Node.js
Bab 1: Pengenalan Dasar Pemrograman JavaScript
JavaScript adalah bahasa pemrograman yang sering digunakan untuk mengembangkan aplikasi web interaktif. Bahasa ini dapat dijalankan di sisi klien (browser) maupun sisi server (Node.js), membuatnya sangat serbaguna dalam pengembangan perangkat lunak.
Contoh Coding:
console.log("Hello, JavaScript!");
Hasil:
Hello, JavaScript!
Bab 2: Pengenalan Sejarah JavaScript
JavaScript pertama kali dikembangkan oleh Brendan Eich pada tahun 1995 saat bekerja di Netscape Communications. Tujuan utamanya adalah untuk membuat halaman web lebih interaktif dan dinamis.
Bab 3: Pengenalan Struktur Dasar Javascript
Program JavaScript terdiri dari satu atau lebih statement yang dieksekusi secara berurutan. Setiap statement diakhiri dengan tanda titik koma.
Contoh Coding:
console.log("Hello");
console.log("World");
Hasil:
Hello World
Bab 4: Variabel dan Tipe Data
Variabel digunakan untuk menyimpan data. JavaScript memiliki tipe data seperti number, string, boolean, object, dan lainnya.
Contoh Coding:
var nama = "John"; var umur = 25; var isMarried = false;
Bab 5: Operator
Operator digunakan untuk melakukan operasi pada variabel dan nilai. Contohnya operator penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/).
Contoh Coding:
var a = 5; var b = 3; console.log(a + b); console.log(a - b); console.log(a * b); console.log(a / b);
Hasil:
8 2 15 1.6666666666666667
Bab 6: Struktur Kontrol
Struktur kontrol digunakan untuk mengontrol alur eksekusi program. Contoh struktur kontrol adalah if statement dan loop.
Contoh Coding:
var angka = 5;
if (angka > 0) {
console.log("Angka positif.");
} else if (angka < 0) {
console.log("Angka negatif.");
} else {
console.log("Angka nol.");
}
Hasil:
Angka positif.
Bab 7: Fungsi
Fungsi adalah blok kode yang dapat dipanggil secara berulang. Fungsi digunakan untuk mengorganisir kode dan menghindari duplikasi.
Contoh Coding:
function tambah(a, b) {
return a + b;
}
console.log(tambah(5, 3));
Hasil:
8
Bab 8: Array
Array adalah struktur data yang digunakan untuk menyimpan beberapa nilai dalam satu variabel.
Contoh Coding:
var angka = [1, 2, 3, 4, 5];
for (var i = 0; i < angka.length; i++) {
console.log(angka[i]);
}
Hasil:
1 2 3 4 5
Bab 9: Objek
Objek adalah kumpulan nilai yang terkait bersama sebagai properti dan metode.
Contoh Coding:
var orang = {
nama: "John",
umur: 25,
pekerjaan: "Developer"
};
console.log(orang.nama);
console.log(orang.umur);
console.log(orang.pekerjaan);
Hasil:
John 25 Developer
Bab 10: Looping
Looping digunakan untuk menjalankan blok kode secara berulang.
Contoh Coding:
for (var i = 1; i <= 5; i++) {
console.log("Iterasi ke-" + i);
}
Hasil:
Iterasi ke-1 Iterasi ke-2 Iterasi ke-3 Iterasi ke-4 Iterasi ke-5
Bab 11: Pengantar DOM
Document Object Model (DOM) adalah representasi struktur halaman web yang memungkinkan JavaScript berinteraksi dengan elemen HTML.
Contoh Coding:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM</title>
</head>
<body>
<button onclick="myFunction()">Klik Saya</button>
<script>
function myFunction() {
alert("Hello, World!");
}
</script>
</body>
</html>
Bab 12: Event Handling
Event Handling digunakan untuk menangani interaksi pengguna, seperti klik mouse atau input keyboard.
Contoh Coding:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Event Handling</title>
</head>
<body>
<button onclick="myFunction()">Klik Saya</button>
<script>
function myFunction() {
alert("Tombol diklik!");
}
</script>
</body>
</html>
Bab 13: AJAX
Asynchronous JavaScript and XML (AJAX) digunakan untuk mengirim dan menerima data dari server tanpa mengubah halaman web secara keseluruhan.
Contoh Coding:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();
Bab 14: Manipulasi DOM
JavaScript dapat digunakan untuk mengubah struktur, gaya, dan isi elemen HTML melalui DOM.
Contoh Coding:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Manipulasi DOM</title>
</head>
<body>
<div id="demo">Ini adalah teks.</div>
<button onclick="ubahTeks()">Ubah Teks</button>
<script>
function ubahTeks() {
document.getElementById("demo").innerHTML = "Teks telah diubah!";
}
</script>
</body>
</html>
Bab 15: Local Storage
Local Storage digunakan untuk menyimpan data pada browser untuk penggunaan di masa mendatang.
Contoh Coding:
localStorage.setItem("nama", "John");
var nama = localStorage.getItem("nama");
console.log(nama);
Hasil:
<code>John</code>
Bab 16: Pengenalan ES6
ECMAScript 6 (ES6) adalah versi terbaru dari JavaScript dengan penambahan fitur-fitur baru seperti let, const, arrow function, template literals, dan lainnya.
Contoh Coding:
const PI = 3.14; console.log(PI);
Hasil:
<code>3.14</code>
Bab 17: Promises
Promise digunakan untuk menangani operasi asynchronous dalam JavaScript.
Contoh Coding:
var janji = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Berhasil!");
}, 2000);
});
janji.then(function(data) {
console.log(data);
});
Hasil (setelah 2 detik):
<code>Berhasil!</code>
Bab 18: Async/Await
Async/Await adalah fitur ES8 yang menyediakan cara untuk menulis kode asynchronous yang lebih bersih dan mudah dimengerti.
Contoh Coding:
function ambilData() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Data diterima!");
}, 2000);
});
}
async function prosesData() {
const data = await ambilData();
console.log(data);
}
prosesData();
Hasil (setelah 2 detik):
Data diterima!
Bab 19: React
React adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) yang interaktif.
Contoh Coding:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return <h1>Halo, React!</h1>;
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Hasil:
Halo, React!
Bab 20: Node.js
Node.js adalah runtime JavaScript yang memungkinkan pengembangan aplikasi server-side menggunakan JavaScript.
Contoh Coding:
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('Hello, Node.js!');
res.end();
});
server.listen(3000, () => {
console.log('Server berjalan pada port 3000');
});
Dengan memahami konsep-konsep dasar dan contoh penggunaannya, Anda akan siap memulai perjalanan dalam mempelajari JavaScript untuk pengembangan aplikasi web. Selain itu anda dapat mempelajari pemrograman lainnya untuk menambah skill anda Selamat belajar!
Leave a Reply