Bab 1: Pengenalan JavaScript

Bab 1: Pengenalan JavaScript

1.1 Sejarah dan Evolusi JavaScript

1.1.1 Awal Mula JavaScript

  • Diciptakan oleh Brendan Eich pada tahun 1995

  • Awalnya bernama "Mocha", kemudian berubah menjadi "LiveScript"

  • Akhirnya dinamai "JavaScript" ketika Netscape dan Sun Microsystems berkolaborasi

  • Tujuan awal: memberikan interaktivitas pada halaman web

1.1.2 Evolusi JavaScript

  • 1997: JavaScript distandarisasi oleh ECMA International (ECMAScript)

  • 2009: ECMAScript 5 (ES5) dirilis dengan fitur-fitur baru

  • 2015: ECMAScript 2015 (ES6) - perubahan besar dalam bahasa

  • 2016-sekarang: Update tahunan dengan penambahan fitur baru

  • Perkembangan dari bahasa client-side sederhana menjadi bahasa full-stack

1.1.3 JavaScript vs ECMAScript

  • ECMAScript adalah spesifikasi bahasa

  • JavaScript adalah implementasi dari ECMAScript

  • Perbedaan antara spesifikasi dan implementasi

  • Berbagai engine JavaScript (V8, SpiderMonkey, JavaScriptCore)

1.2 Peran JavaScript dalam Pengembangan Web Modern

1.2.1 Client-Side Development

  • Manipulasi DOM

  • Event handling

  • Form validation

  • Animasi dan efek visual

  • Single Page Applications (SPA)

1.2.2 Server-Side Development

  • Node.js dan server-side JavaScript

  • RESTful API development

  • Database interactions

  • Real-time applications

  • Microservices

1.2.3 Mobile Development

  • Progressive Web Apps (PWA)

  • React Native

  • Ionic

  • NativeScript

  • Cross-platform development

1.2.4 Desktop Development

  • Electron

  • NW.js

  • Desktop applications dengan JavaScript

1.3 Persiapan Lingkungan Pengembangan

1.3.1 Text Editor/IDE

  • Visual Studio Code

    • Instalasi

    • Konfigurasi dasar

    • Extensions yang direkomendasikan

  • Alternatif editor:

    • Sublime Text

    • Atom

    • WebStorm

    • Brackets

1.3.2 Browser

  • Google Chrome

  • Mozilla Firefox

  • Microsoft Edge

  • Safari

  • Perbedaan antar browser dalam pengembangan

1.3.3 Node.js dan NPM

  • Instalasi Node.js

  • Pengenalan NPM (Node Package Manager)

  • Package.json dasar

  • Node Version Manager (nvm)

1.4 Browser Developer Tools

1.4.1 Chrome DevTools

  • Console panel

    • Console.log()

    • Console.error()

    • Console.warn()

    • Console.table()

  • Elements panel

    • Inspeksi DOM

    • CSS editing

    • Box model

  • Sources panel

    • Debugging

    • Breakpoints

    • Watch expressions

  • Network panel

    • Request monitoring

    • Performance analysis

    • Resource loading

1.4.2 Debugging Tools

  • Breakpoints

  • Step-by-step debugging

  • Watch variables

  • Call stack

  • Exception handling

1.4.3 Performance Tools

  • Timeline

  • Memory analysis

  • CPU profiling

  • Network optimization

1.5 Praktik dan Latihan

1.5.1 Setup Proyek Pertama

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    <script>
        console.log("Welcome to JavaScript!");
    </script>
</body>
</html>

1.5.2 Latihan Developer Tools

  1. Membuka console dan mencoba perintah dasar

  2. Inspeksi elemen HTML

  3. Memonitor network requests

  4. Menggunakan breakpoints sederhana

1.5.3 Proyek Mini

Membuat halaman web sederhana dengan:

  • Alert box

  • Console messages

  • DOM manipulation dasar

  • Event listener sederhana

1.6 Ringkasan

  • JavaScript adalah bahasa pemrograman yang versatile

  • Perkembangan dari client-side scripting ke full-stack development

  • Pentingnya tools dan environment yang tepat

  • Dasar-dasar debugging dan developer tools

1.7 Referensi dan Bacaan Lanjutan

  • MDN Web Docs: JavaScript Guide

  • JavaScript.info

  • W3Schools JavaScript Tutorial

  • Chrome DevTools Documentation

  • Node.js Official Documentation

1.8 Latihan Akhir Bab

  1. Instalasi dan konfigurasi lingkungan pengembangan

  2. Membuat proyek JavaScript sederhana

  3. Menggunakan developer tools untuk debugging

  4. Eksperimen dengan console commands

  5. Review pemahaman sejarah dan evolusi JavaScript

PreviousOutlineNextBab 2: Dasar-Dasar JavaScript

Last updated