JavaScript Next Gen
Setup Project
Membuat struktur project dan file dasar untuk JavaScript Next Gen
Struktur Project
Pertama, kita akan membuat struktur direktori yang terorganisir untuk project JavaScript Next Gen.
index.html
main.js
app.js
Langkah-Langkah Setup
Membuat File HTML Dasar
Buat file index.html sebagai halaman utama aplikasi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Next Gen</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-4xl mx-auto">
<header class="mb-8">
<h1 class="text-3xl font-bold text-blue-600 mb-2">
JavaScript Next Gen Praktikum
</h1>
<p class="text-gray-600">
Belajar fitur modern JavaScript (ES6+)
</p>
</header>
<main class="bg-white p-6 rounded-lg shadow-md">
<div id="output" class="space-y-4">
<!-- Output akan ditampilkan di sini -->
</div>
<div class="flex space-x-4 mt-8">
<button id="runBtn"
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">
Run Demo
</button>
<button id="clearBtn"
class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded">
Clear Output
</button>
</div>
</main>
</div>
<!-- Type module penting untuk mendukung ES modules -->
<script type="module" src="js/main.js"></script>
</body>
</html>Module Script
Perhatikan atribut type="module" pada tag script. Ini penting untuk menggunakan fitur ES6 modules (import/export).
Langkah Selanjutnya
Setelah setup selesai, kita akan mulai mengimplementasikan fitur-fitur ES6+ pada bagian selanjutnya.