Terjemahan ke Bahasa Indonesia

JavaScript - Fitur

Selamat datang, para pemula pemrogram! Hari ini, kita akan mendalamkan dunia menarik JavaScript. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda melalui fitur-fitur yang membuat JavaScript menjadi bahasa pemrograman yang kuat dan populer. Jadi, siapkan buku catatan virtual Anda, dan mari kita mulai petualangan pemrograman ini bersama!

JavaScript - Features

Fitur JavaScript

JavaScript seperti pisau Swiss Army di dunia pemrograman. Itu multifungsi, mudah digunakan, dan penuh dengan fitur yang membuatnya menjadi bahasa pemrograman yang digunakan oleh pemula maupun pengembang berpengalaman. Mari kita jelajahi fitur-fitur ini satu per satu, ya?

Setup Mudah

Salah satu hal terbaik tentang JavaScript adalah betapa mudahnya untuk memulai. Tidak seperti beberapa bahasa pemrograman lain yang memerlukan instalasi yang rumit, JavaScript sudah terpasang di setiap browser web modern. Itu seperti memiliki tempat bermain built-in di ujung jari Anda!

Untuk mulai mengoding dalam JavaScript, Anda hanya memerlukan editor teks dan browser. Mari coba contoh sederhana:

<!DOCTYPE html>
<html>
<body>
<script>
console.log("Hello, World!");
</script>
</body>
</html>

Simpan ini sebagai file .html, buka di browser Anda, dan voila! Anda telah menjalankan kode JavaScript pertama Anda. Pesan "Hello, World!" akan muncul di konsol browser (biasanya dapat diakses dengan menekan F12).

Dukungan Browser

Ingat saat saya katakan bahwa JavaScript sudah terpasang di browser? Itu adalah keunggulan besar. Ini berarti kode JavaScript Anda dapat berjalan di setiap perangkat dengan browser, dari smartphone hingga refrigerator cerdas (ya, itu sudah menjadi halnya sekarang!).

Catatan menarik: JavaScript diciptakan dalam hanya 10 hari oleh Brendan Eich pada tahun 1995. Meskipun lahir dalam kecepatan, ia telah tumbuh menjadi salah satu bahasa pemrograman yang paling banyak digunakan di dunia. bicara tentang kisah kesuksesan!

Manipulasi DOM

DOM berarti Document Object Model. Bayangkan itu seperti pohon keluarga dari halaman web. JavaScript dapat berinteraksi dengan pohon ini, memungkinkan Anda mengubah konten, struktur, dan gaya halaman web secara dinamis.

Mari lihat contoh sederhana:

<!DOCTYPE html>
<html>
<body>
<h1 id="myHeading">Hello, JavaScript!</h1>
<script>
document.getElementById("myHeading").innerHTML = "Saya cinta JavaScript!";
</script>
</body>
</html>

Dalam contoh ini, kita menggunakan JavaScript untuk mengubah teks heading kita. Ketika Anda membuka ini di browser, Anda akan melihat "Saya cinta JavaScript!" bukan "Hello, JavaScript!". Itu seperti magis, tapi lebih baik karena Anda adalah si penEMU!

Penanganan Event

JavaScript dapat mendengarkan dan merespon event di halaman web. Event bisa berupa klik, penekanan tombol, bahkan halaman selesai dimuat. Fitur ini memungkinkan Anda membuat halaman web interaktif yang merespon tindakan pengguna.

Mari lihat contoh tombol klik sederhana:

<!DOCTYPE html>
<html>
<body>
<button id="myButton">Klik saya!</button>
<p id="demo"></p>
<script>
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Tombol diklik!";
});
</script>
</body>
</html>

Ketika Anda mengklik tombol, teks "Tombol diklik!" akan muncul. Itu seperti mengajarkan halaman web Anda untuk merespon high-five!

Tipe Dinamis

Dalam JavaScript, Anda tidak perlu menentukan tipe data yang akan dipegang oleh variabel. Itu ditipekan secara dinamis, yang berarti tipe ditentukan secara otomatis. Fitur ini membuat JavaScript lebih fleksibel dan mudah ditulis.

let x = 5;         // x adalah bilangan
x = "Hello";       // Sekarang x adalah string
x = true;          // Sekarang x adalah boolean

Itu seperti memiliki kotak magis yang dapat menampung apa pun yang Anda masukkan!

Pemrograman Fungsional

JavaScript mendukung pemrograman fungsional, gaya pemrograman di mana Anda dapat menggunakan fungsi sebagai nilai. Anda dapat menset fungsi sebagai argumen ke fungsi lain, mengembalikannya sebagai nilai, dan mengassign mereka ke variabel.

function sayHello(name) {
return "Hello, " + name + "!";
}

function greet(greeting, name) {
console.log(greeting(name));
}

greet(sayHello, "Alice");  // Keluaran: Hello, Alice!

Dalam contoh ini, kita menset fungsi sayHello sebagai argumen ke fungsi greet. Itu seperti memberi petunjuk kepada teman Anda bagaimana cara menyapa seseorang!

Dukungan Cross-platform

JavaScript tidak hanya untuk browser lagi. Dengan platform seperti Node.js, Anda dapat menggunakan JavaScript untuk membuat aplikasi server-side, aplikasi destop, bahkan aplikasi mobile. Itu seperti pisau Swiss Army yang terus tumbuh dengan menambahkan banyak alat baru!

Pemrograman Berorientasi Objek

JavaScript mendukung pemrograman berorientasi objek (OOP), memungkinkan Anda membuat dan bekerja dengan objek. Objek di JavaScript seperti wadah yang dapat menampung data dan fungsi yang terkait.

let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};

person.greet();  // Keluaran: Hello, my name is John

Bayangkan objek sebagai persona digital. Mereka memiliki karakteristik (seperti nama dan umur) dan dapat melakukan tindakan (seperti menyapa).

Objek Bawaan

JavaScript datang dengan set objek bawaan yang menyediakan fungsi yang berguna secara default. Ini termasuk Math untuk operasi matematika, Date untuk bekerja dengan tanggal dan waktu, dan Array untuk bekerja dengan daftar data.

Berikut adalah tabel dari beberapa objek bawaan dan metode umum:

Objek	Metode Umum	Deskripsi
Math	Math.random(), Math.round()	Menyediakan operasi matematika
Date	Date.now(), new Date()	Memungkinkan bekerja dengan tanggal dan waktu
Array	push(), pop(), map()	Menyediakan metode untuk bekerja dengan array
String	toLowerCase(), toUpperCase(), split()	Menyediakan metode manipulasi string
Object	Object.keys(), Object.values()	Menyediakan metode untuk bekerja dengan objek

Prototipe Objek

JavaScript menggunakan prototipe untuk pewarisan. Setiap objek di JavaScript memiliki prototipe, dan objek mewarisi properti dan metode dari prototipe mereka.

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
console.log(this.name + " makes a sound.");
}

let dog = new Animal("Rex");
dog.speak();  // Keluaran: Rex makes a sound.

Bayangkan prototipe sebagai rancangan yang objek dapat mewarisi. Itu seperti pewarisan genetik, tapi untuk kode!

Objek Global

Dalam lingkungan browser, objek global adalah window. Itu mewakili jendela browser dan menyediakan akses ke fungsi khusus browser.

window.alert("Hello, World!");  // Menampilkan dialog peringatan
console.log(window.innerWidth);  // Mengambil lebar jendela browser

Objek global seperti panggung tempat pertunjukan JavaScript Anda berlangsung. Itu menyiapkan panggung dan menyediakan prop!

Metode Bawaan

JavaScript menyediakan banyak metode bawaan yang membuat tugas umum lebih mudah. Misalnya, metode array seperti map(), filter(), dan reduce() adalah alat kuat untuk bekerja dengan data.

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled);  // Keluaran: [2, 4, 6, 8, 10]

Metode ini seperti memiliki tim bantuan yang dapat melakukan tugas cepat pada data Anda.

Pemrograman Modular

JavaScript mendukung pemrograman modular, memungkinkan Anda membagi kode Anda menjadi modul yang dapat digunakan kembali. Hal ini membuat kode Anda lebih terorganisir dan mudah dipelihara.

// math.js
export function add(a, b) {
return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3));  // Keluaran: 5

Modul seperti blok LEGO. Anda dapat membangun mereka secara terpisah dan kemudian menggabungkannya untuk menciptakan sesuatu yang menakjubkan!

JSON

JavaScript Object Notation (JSON) adalah format data interchange yang ringan dan mudah dibaca oleh manusia serta mudah diparse dan digenerate oleh mesin. Itu banyak digunakan untuk mentransmisikan data antara server dan aplikasi web.

let person = {
name: "John",
age: 30,
city: "New York"
};

let json = JSON.stringify(person);
console.log(json);  // Keluaran: {"name":"John","age":30,"city":"New York"}

JSON seperti penerjemah universal yang membantu bagian-bagian berbeda dari aplikasi Anda berkomunikasi satu sama lain.

Pemrograman Asinkron

JavaScript mendukung pemrograman asinkron, yang memungkinkan kode Anda untuk melakukan tugas yang berjalan lama tanpa memblokir eksekusi kode lain. Hal ini sangat penting untuk membuat aplikasi web yang responsif.

console.log("Start");

setTimeout(() => {
console.log("Ini asinkron");
}, 2000);

console.log("End");

// Keluaran:
// Start
// End
// Ini asinkron (setelah 2 detik)

Pemrograman asinkron seperti dapat mengelola banyak tugas sekaligus. Anda dapat memulai tugas, melanjutkan ke hal lain, dan kemudian kembali saat tugas pertama selesai.

Arsitektur Berbasis Event

JavaScript menggunakan arsitektur berbasis event, khususnya di lingkungan browser. Ini berarti kode Anda dapat merespon berbagai event yang terjadi, seperti tindakan pengguna atau event sistem.

document.addEventListener('DOMContentLoaded', () => {
console.log('DOM telah dimuat');
});

window.addEventListener('resize', () => {
console.log('Jendela diubah ukurannya');
});

Arsitektur berbasis event seperti menata sejumlah domino. Ketika event terjadi (seperti mengklik tombol), itu memicu reaksi berantai eksekusi kode.

Dukungan Server-side

Dengan platform seperti Node.js, JavaScript dapat digunakan di sisi server. Ini memungkinkan Anda menggunakan JavaScript untuk pengembangan front-end dan back-end, membuatnya mungkin untuk membangun aplikasi full-stack dengan bahasa tunggal.

const http = require('http');

const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!');
});

server.listen(8080, () => {
console.log('Server berjalan di port 8080');
});

JavaScript di sisi server seperti dapat memasak di dapur (back-end) serta melayani di meja (front-end). Itu memberikan Anda kontrol atas seluruh pengalaman makan!

Dan itu adalah, teman-teman! Kita telah mengembara melalui fitur menarik JavaScript. Ingat, seperti setiap keterampilan, pemrograman memerlukan latihan. Jadi, jangan takut untuk mencoba, membuat kesalahan, dan belajar dari mereka. Sebelum Anda tahu, Anda akan mengoding seperti angin! Selamat coding, dan may the JavaScript be with you!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Tinjauan Umum

Tutorial Selanjutnya:

JavaScript - Mengaktifkan