Tutorial js

Persiapan Belajar JavaScript

Untuk belajar JavaScript, Anda hanya butuh browser dan text editor. Sangat sederhana!

Yang Dibutuhkan

1. Web Browser

Pakai browser apapun yang sudah ada:

  • Google Chrome (disarankan untuk development)
  • Mozilla Firefox
  • Microsoft Edge
  • Safari (untuk Mac)

2. Text Editor

Pilih salah satu:

  • Visual Studio Code (gratis, paling populer)
  • Notepad (Windows)
  • TextEdit (Mac)
  • Sublime Text

3. Developer Tools (Built-in di Browser)

Setiap browser punya tools developer:

  • Tekan F12 untuk membuka
  • Console tab untuk lihat output JavaScript
  • Network tab untuk debugging

Menyiapkan Environment

Langkah 1: Buat Folder Project

Buat folder: /belajar-javascript/

Langkah 2: Buat File HTML

Buat file index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar JavaScript</title>
  </head>
  <body>
    <h1>Latihan JavaScript</h1>

    <script>
      // JavaScript kode akan ditulis di sini
      console.log("Halo JavaScript!");
    </script>
  </body>
</html>

Langkah 3: Test File

  1. Save file sebagai index.html
  2. Double-click file untuk buka di browser
  3. Tekan F12 untuk buka Developer Tools
  4. Klik tab Console
  5. Lihat pesan "Halo JavaScript!"

Cara Menulis JavaScript

Ada 3 cara menulis JavaScript:

1. Inline JavaScript

<button onclick="alert('Halo!')">Klik Saya</button>

2. Internal JavaScript

<script>
  alert("Halo dari JavaScript!");
</script>

3. External JavaScript

Buat file script.js, lalu panggil:

<script src="script.js"></script>

Tools Browser yang Penting

Console Browser

  • Buka: Tekan F12 → Console
  • Fungsi: Lihat output, error, test kode
  • Command: Ketik JavaScript langsung di console

Inspect Element

  • Buka: Klik kanan → Inspect
  • Fungsi: Lihat HTML/CSS yang sedang berjalan
  • Manfaat: Debug tampilan website

Tips Setup Environment

Untuk Visual Studio Code:

  1. Install extensions: Live Server, JavaScript (ES6)
  2. Setup: File → Preferences → Settings
  3. Font: Pilih font yang nyaman untuk coding
  4. Theme: Pilih tema gelap/terang sesuai selera

Untuk Chrome:

  1. Bookmark: Developer Tools (F12)
  2. Settings: Buka Settings di DevTools
  3. Console: Set console preferences

Struktur Folder yang Disarankan

belajar-javascript/
├── index.html
├── script.js
├── style.css
├── latihan/
│   ├── latihan1.html
│   ├── latihan2.html
│   └── latihan3.html
└── project/
    ├── kalkulator/
    ├── todo-list/
    └── game-sederhana/

Command Berguna di Console

Basics

console.log("Test"); // Print text
console.error("Error!"); // Print error
console.warn("Warning!"); // Print warning
console.clear(); // Clear console

Debugging

console.table(data); // Show data as table
console.time("test"); // Start timer
console.timeEnd("test"); // End timer

Shortcut Keyboard Penting

Di Browser:

  • F12: Buka/tutup Developer Tools
  • Ctrl + Shift + I: Buka Developer Tools
  • Ctrl + Shift + C: Inspect element mode
  • Ctrl + Shift + J: Langsung ke Console

Di VS Code:

  • Ctrl + `: Buka terminal
  • F5: Run/debug code
  • Ctrl + /: Comment/uncomment
  • Alt + Shift + F: Format code

Testing JavaScript

Method 1: Console Browser

  1. Buka Developer Tools (F12)
  2. Klik tab Console
  3. Ketik JavaScript dan Enter

Method 2: HTML File

  1. Buat file HTML dengan tag <script>
  2. Tulis JavaScript di dalam tag
  3. Buka file di browser

Method 3: Online Editor

Bisa pakai:

  • CodePen.io
  • JSFiddle.net
  • Repl.it

Siap Mulai Coding!

Sekarang Anda sudah siap untuk mulai coding JavaScript!

Checklist persiapan:

  • ✅ Browser sudah ada
  • ✅ Text editor sudah ada
  • ✅ Tahu cara buka Developer Tools
  • ✅ Sudah test console.log()
  • ✅ Folder project sudah dibuat

Mari lanjut ke tutorial berikutnya untuk menulis JavaScript pertama! 🎯