search

Bab 1: Pengenalan JavaScript

hashtag
Bab 1: Pengenalan JavaScript

hashtag
1.1 Sejarah dan Evolusi JavaScript

hashtag
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

hashtag
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

hashtag
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)

hashtag
1.2 Peran JavaScript dalam Pengembangan Web Modern

hashtag
1.2.1 Client-Side Development

  • Manipulasi DOM

  • Event handling

  • Form validation

  • Animasi dan efek visual

  • Single Page Applications (SPA)

hashtag
1.2.2 Server-Side Development

  • Node.js dan server-side JavaScript

  • RESTful API development

  • Database interactions

  • Real-time applications

  • Microservices

hashtag
1.2.3 Mobile Development

  • Progressive Web Apps (PWA)

  • React Native

  • Ionic

  • NativeScript

  • Cross-platform development

hashtag
1.2.4 Desktop Development

  • Electron

  • NW.js

  • Desktop applications dengan JavaScript

hashtag
1.3 Persiapan Lingkungan Pengembangan

hashtag
1.3.1 Text Editor/IDE

  • Visual Studio Code

    • Instalasi

    • Konfigurasi dasar

    • Extensions yang direkomendasikan

  • Alternatif editor:

    • Sublime Text

    • Atom

    • WebStorm

    • Brackets

hashtag
1.3.2 Browser

  • Google Chrome

  • Mozilla Firefox

  • Microsoft Edge

  • Safari

  • Perbedaan antar browser dalam pengembangan

hashtag
1.3.3 Node.js dan NPM

  • Instalasi Node.js

  • Pengenalan NPM (Node Package Manager)

  • Package.json dasar

  • Node Version Manager (nvm)

hashtag
1.4 Browser Developer Tools

hashtag
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

hashtag
1.4.2 Debugging Tools

  • Breakpoints

  • Step-by-step debugging

  • Watch variables

  • Call stack

  • Exception handling

hashtag
1.4.3 Performance Tools

  • Timeline

  • Memory analysis

  • CPU profiling

  • Network optimization

hashtag
1.5 Praktik dan Latihan

hashtag
1.5.1 Setup Proyek Pertama

hashtag
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

hashtag
1.5.3 Proyek Mini

Membuat halaman web sederhana dengan:

  • Alert box

  • Console messages

  • DOM manipulation dasar

  • Event listener sederhana

hashtag
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

hashtag
1.7 Referensi dan Bacaan Lanjutan

  • MDN Web Docs: JavaScript Guide

  • JavaScript.info

  • W3Schools JavaScript Tutorial

  • Chrome DevTools Documentation

  • Node.js Official Documentation

hashtag
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