Hai, teman-teman! Jadi, kalian mungkin pernah denger tentang JavaScript, kan? Nah, JavaScript itu adalah salah satu bahasa pemrograman yang paling banyak dipake di dunia web. Dengan JavaScript, kita bisa bikin halaman web jadi lebih hidup dan interaktif!

Pengenalan JavaScript

Bayangin kamu lagi duduk di depan komputer, buka browser, dan surfing internet. Nah, setiap kali kamu berinteraksi dengan halaman web—klik tombol atau isi form—itu semua berkat JavaScript.

Jadi, JavaScript itu bahasa pemrograman yang bikin web jadi hidup dan interaktif. Tanpa JavaScript, web bakal statis dan ngebosenin.

JavaScript adalah salah satu bahasa pemrograman yang paling populer di dunia. Kenapa? Karena hampir semua website modern pasti pakai JavaScript. Mulai dari situs berita, media sosial, sampai aplikasi web yang “kaya” fitur seperti Gmail atau YouTube, semuanya pakai JavaScript.

Sejarah Singkat JavaScript

JavaScript pertama kali muncul tahun 1995, diciptain oleh Brendan Eich dari Netscape (sekarang bagian dari Mozilla). Awalnya, JavaScript dibuat dengan tujuan simpel: bikin halaman web lebih dinamis. Waktu itu, belum ada yang nyangka kalau JavaScript bakal jadi se-powerful sekarang.

Satu hal menarik, JavaScript awalnya dikembangkan cuma dalam 10 hari! Meskipun awalnya dianggap remeh, sekarang JavaScript udah berevolusi jadi bahasa pemrograman yang kompleks dan digunakan di berbagai macam platform, nggak cuma di browser.

Kegunaan JavaScript

JavaScript itu multifungsi, bisa dibilang semacam pisau Swiss army dalam dunia pemrograman. Berikut beberapa kegunaan utamanya:

Membuat Halaman Web Interaktif:

Contoh gampangnya, waktu kalian klik tombol di halaman web terus ada animasi yang muncul, atau waktu kalian isi form dan langsung ada pesan error kalau ada yang salah, itu semua karena JavaScript. Jadi, nggak cuma HTML dan CSS aja yang bikin tampilan halaman web, tapi JavaScript juga nambahin fungsi dan interaktivitasnya.

Meng-update Konten Tanpa Reload:

Misalnya, lagi buka Twitter atau Instagram, kalian scrolling terus ada konten baru yang muncul tanpa harus reload halaman. Itu karena JavaScript bisa nge-load data baru di belakang layar, terus nambahin ke halaman yang lagi kalian buka.

Membuat Game dan Aplikasi Web:

Banyak game online dan aplikasi web (kayak Google Docs atau Trello) yang dibangun dengan JavaScript. Jadi, kalau kalian pengen bikin game sederhana atau aplikasi yang keren, JavaScript bisa jadi temen setia kalian.

Menghandle Data dari Server:

JavaScript bisa berkomunikasi dengan server untuk ngambil atau ngirim data. Contohnya, waktu kalian kirim pesan di chat aplikasi, JavaScript ngirim data ke server dan ngambil respon balik terus nampilin di layar kalian.

Dipake di Backend:

Nggak cuma di browser, JavaScript juga bisa dipake di server-side dengan bantuan Node.js. Jadi, kalian bisa bikin aplikasi full-stack hanya dengan JavaScript, dari frontend sampe backend.

Intinya, JavaScript tuh bahasa pemrograman yang super fleksibel dan powerful buat bikin web jadi lebih interaktif dan dinamis. Jadi, kalau kalian pengen belajar bikin web yang keren dan berfungsi dengan baik, JavaScript wajib banget dipelajari!

Mengapa JavaScript Penting?

JavaScript itu penting karena hampir semua aspek web modern nggak bisa lepas dari JavaScript. Mau belajar pemrograman buat web? JavaScript adalah wajib hukumnya. Ini adalah bahasa yang fleksibel, powerful, dan punya komunitas besar yang terus berkembang.

Selain itu, karena JavaScript bisa digunakan di front-end (apa yang dilihat pengguna) dan back-end (apa yang terjadi di server), belajar JavaScript berarti kamu bisa jadi developer full-stack.

Dengan JavaScript, kamu nggak cuma sekedar bikin halaman web; kamu bisa bikin pengalaman web yang benar-benar menarik, intuitif, dan interaktif.

Hola, teman-teman! Kali ini kita bakal ngobrol soal sejarah dan evolusi JavaScript. Mungkin kedengarannya kayak pelajaran sejarah, tapi tenang aja, kita bikin seru dan gampang dipahami ya!

Sejarah JavaScript

JavaScript lahir di tahun 1995, ketika web baru mulai berkembang. Pada saat itu, halaman web hanya bisa menampilkan teks dan gambar statis tanpa interaktivitas yang berarti.

Brendan Eich, seorang engineer di Netscape, adalah orang yang pertama kali menciptakan JavaScript. Yang luar biasa, bahasa ini dibuat dalam waktu hanya 10 hari! Pada awalnya, JavaScript diberi nama Mocha, kemudian berubah menjadi LiveScript, dan akhirnya menjadi JavaScript.

Kalian mungkin bertanya-tanya, kenapa namanya JavaScript?

Apa ada hubungannya sama bahasa pemrograman Java?

Nah, sebenarnya, ini cuma strategi pemasaran aja. Waktu itu, Java lagi populer banget, jadi mereka pikir nama JavaScript bakal menarik perhatian lebih banyak orang. Padahal, JavaScript dan Java itu beda banget, kayak apel sama jeruk!

Tujuan Awal JavaScript

Tujuan utama pembuatan JavaScript adalah untuk membuat halaman web menjadi lebih hidup dan interaktif. Netscape, yang saat itu merupakan browser paling populer, ingin pengguna bisa berinteraksi dengan halaman web, seperti mengisi formulir dan memvalidasi input sebelum dikirim ke server. JavaScript pun menjadi solusinya.

JavaScript didesain sebagai bahasa pemrograman yang mudah dipelajari oleh para desainer dan non-programmer. Meskipun awalnya dianggap remeh oleh komunitas developer, JavaScript terbukti mampu berkembang menjadi salah satu bahasa pemrograman paling penting di dunia.

Evolusi JavaScript

Setelah JavaScript diluncurkan, berbagai versi baru terus dikembangkan.

Pada tahun 1996, Microsoft melihat potensi JavaScript dan membuat versinya sendiri yang disebut JScript, yang kemudian diintegrasikan ke dalam Internet Explorer.

Langkah ini memulai "perang browser" di akhir tahun 90-an, di mana Netscape dan Microsoft berusaha memenangkan hati para pengguna dengan fitur-fitur baru, termasuk JavaScript.

Namun, karena masing-masing browser memiliki implementasi JavaScript yang berbeda-beda, sering kali muncul masalah kompatibilitas.

Oleh karena itu, pada tahun 1997, JavaScript diserahkan ke ECMA International, sebuah organisasi standar, dan diberi nama resmi ECMAScript. ECMAScript adalah standar yang menjadi dasar pengembangan JavaScript.

Masa Kegelapan: JavaScript yang Terlupakan

Di awal tahun 2000-an, meskipun JavaScript ada di mana-mana, banyak developer yang menganggapnya sebagai bahasa yang "berantakan" dan kurang powerful dibandingkan bahasa lain seperti Java atau C++.

Saat itu, JavaScript sering digunakan hanya untuk hal-hal kecil seperti membuat pop-up atau validasi form sederhana. Bahkan, beberapa developer lebih memilih untuk menonaktifkan JavaScript di browser mereka karena masalah keamanan dan performa.

Kebangkitan JavaScript: AJAX dan Web 2.0

Semuanya mulai berubah dengan munculnya teknik AJAX (Asynchronous JavaScript and XML) di tahun 2005. AJAX memungkinkan halaman web untuk mengambil data dari server secara asinkron tanpa perlu me-refresh halaman.

Ini adalah langkah besar dalam membuat aplikasi web yang lebih interaktif dan cepat, seperti Gmail dan Google Maps. AJAX adalah pendorong utama di balik apa yang disebut dengan "Web 2.0", sebuah era baru di mana web menjadi lebih interaktif, dinamis, dan aplikasi berbasis web mulai menyaingi aplikasi desktop.

Modernisasi JavaScript: ECMAScript 5 dan 6

JavaScript terus berkembang, dan tonggak sejarah berikutnya adalah rilis ECMAScript 5 (ES5) pada tahun 2009. ES5 memperkenalkan banyak fitur baru yang membuat JavaScript lebih stabil dan lebih mudah digunakan.

Namun, perubahan terbesar datang pada tahun 2015 dengan rilis ECMAScript 6 (ES6), yang juga dikenal sebagai ECMAScript 2015.

ES6 membawa banyak fitur modern ke dalam JavaScript, seperti:

  • Arrow Functions: Cara lebih singkat dan bersih untuk menulis fungsi.
  • Classes: Mendukung pemrograman berorientasi objek dengan lebih baik.
  • Modules: Memungkinkan pembagian kode ke dalam file-file terpisah.
  • Promises: Menyederhanakan penanganan operasi asinkron.

Setelah ES6, JavaScript mengalami pembaruan tahunan, yang berarti selalu ada fitur-fitur baru yang ditambahkan untuk membuat bahasa ini semakin kuat dan modern.

JavaScript di Mana-Mana

Sekarang, JavaScript tidak hanya digunakan di browser. Dengan adanya Node.js, JavaScript bisa dijalankan di server, memungkinkan developer untuk menulis kode backend dan frontend dengan satu bahasa yang sama.

Selain itu, JavaScript juga menjadi dasar bagi berbagai framework dan library populer seperti React, Angular, dan Vue.js, yang digunakan untuk membangun aplikasi web modern.

JavaScript juga digunakan di luar web. Misalnya, aplikasi desktop (melalui Electron) dan aplikasi mobile (melalui React Native) juga bisa dibuat dengan JavaScript. Bahkan, JavaScript juga mulai digunakan dalam pengembangan perangkat Internet of Things (IoT) dan robotika!

JavaScript di Masa Depan

JavaScript terus berkembang dengan komunitas yang sangat besar di belakangnya. Setiap tahun, fitur-fitur baru ditambahkan, dan JavaScript semakin menjadi bahasa pemrograman yang tak tergantikan dalam dunia pengembangan web dan aplikasi.

Dengan dukungan dari berbagai perusahaan besar seperti Google, Facebook, dan Microsoft, masa depan JavaScript terlihat sangat cerah.

JavaScript telah berkembang jauh dari asalnya sebagai bahasa "sederhana" untuk menambah interaktivitas di web. Sekarang, JavaScript menjadi salah satu pilar utama pengembangan teknologi modern. Dan jika kamu ingin menjadi developer yang kompeten di era digital ini, belajar JavaScript adalah langkah yang sangat penting.

Nah, itulah cerita singkat tentang sejarah dan evolusi JavaScript. Seru, kan? Yuk, kita lanjut ke topik berikutnya: cara kerja JavaScript di browser!

Halo teman-teman! Yuk, kita lanjutin perjalanan kita mengenal JavaScript. Kali ini kita akan bahas gimana sih cara kerja JavaScript di browser. Tenang aja, bahasanya santai dan gampang dipahami kok!

Apa yang Terjadi Saat Kamu Membuka Halaman Web?

Ketika kamu membuka sebuah halaman web browser (seperti Chrome, Firefox, atau Safari) akan mengambil file HTML, CSS, dan JavaScript dari server.

File HTML adalah struktur dasar halaman web, CSS mengatur tampilannya, dan JavaScript adalah otaknya yang membuat halaman web jadi interaktif.

Begitu file JavaScript ini sampai di browser, browser akan mulai menjalankan kode tersebut. Tapi, bagaimana sebenarnya JavaScript bekerja di balik layar? Mari kita bedah prosesnya!

JavaScript Engine: Otak di Balik Kode

Di dalam setiap browser modern, ada yang namanya JavaScript Engine. Ini adalah sebuah program yang bertugas untuk mengeksekusi kode JavaScript. Masing-masing browser punya JavaScript Engine-nya sendiri:

  • Google Chrome menggunakan V8.
  • Mozilla Firefox menggunakan SpiderMonkey.
  • Safari menggunakan JavaScriptCore (sering disebut Nitro).
  • Microsoft Edge (yang lama) menggunakan Chakra.

Nah, ketika kamu menjalankan sebuah halaman web yang berisi JavaScript, engine inilah yang bekerja untuk memahami dan mengeksekusi instruksi yang kamu tulis di kode.

Parsing dan Eksekusi Kode

Langkah pertama yang dilakukan oleh JavaScript Engine adalah parsing.

Parsing ini bisa diibaratkan seperti engine "membaca" kode JavaScript yang kamu tulis dan memahaminya. Engine akan memecah kode menjadi struktur yang bisa dimengerti oleh komputer, yang disebut Abstract Syntax Tree (AST).

Setelah parsing selesai, JavaScript Engine akan melanjutkan ke proses eksekusi. Ini adalah tahap di mana kode benar-benar dijalankan. Engine menerjemahkan kode JavaScript ke dalam bahasa mesin yang bisa dimengerti oleh komputer, dan kemudian menjalankan instruksi-instruksi tersebut.

Single Threaded: Satu Jalur Eksekusi

JavaScript adalah bahasa yang single-threaded. Ini artinya, JavaScript hanya bisa menjalankan satu instruksi pada satu waktu.

Jadi, jika ada kode yang membutuhkan waktu untuk dijalankan (seperti mengambil data dari server), JavaScript harus "menunggu" sampai proses itu selesai sebelum melanjutkan ke instruksi berikutnya.

Namun, bukan berarti browser akan berhenti bekerja saat menunggu. Di sini, JavaScript mengandalkan event loop untuk menangani tugas-tugas ini, sehingga kode tetap bisa berjalan lancar tanpa membuat halaman web jadi tidak responsif.

Event loop ini memastikan bahwa meskipun JavaScript hanya punya satu thread, kode tetap bisa menangani banyak tugas dengan efisien.

DOM dan JavaScript: Kerjasama untuk Interaktivitas

JavaScript sering digunakan untuk mengubah atau memanipulasi DOM (Document Object Model).

DOM adalah representasi dari struktur halaman HTML yang bisa diakses dan diubah oleh JavaScript. Misalnya, saat kamu mengklik tombol untuk mengubah warna latar belakang elemen, JavaScript akan mengubah DOM untuk mengimplementasi perubahan ini.

JavaScript bisa menambah, menghapus, atau memodifikasi elemen di DOM dengan menggunakan berbagai metode seperti document.getElementById() atau document.querySelector(). Inilah yang memungkinkan halaman web jadi interaktif.

API Browser: Membuat Halaman Web Lebih Canggih

JavaScript juga bisa bekerja sama dengan berbagai API (Application Programming Interface) yang disediakan oleh browser. API ini seperti alat tambahan yang bisa digunakan JavaScript untuk melakukan hal-hal seperti:

  • Mengambil data dari server: Menggunakan Fetch API atau XMLHttpRequest.
  • Menyimpan data secara lokal: Menggunakan Local Storage atau IndexedDB.
  • Mengakses lokasi geografis pengguna: Menggunakan Geolocation API.
  • Mengelola waktu: Seperti menunda eksekusi kode menggunakan setTimeout() atau setInterval().

API ini yang membuat halaman web jadi sangat kaya fitur dan bisa melakukan banyak hal canggih.

Menangani Kesalahan: Error Handling

Saat menjalankan kode, JavaScript bisa saja menemukan error, seperti mencoba mengakses elemen DOM yang belum ada, atau kesalahan logika dalam kode.

Ketika ini terjadi, JavaScript Engine akan menghentikan eksekusi kode dan memberikan pesan error yang bisa dilihat di console browser. Oleh karena itu, penting untuk menggunakan teknik error handling seperti try...catch untuk menangani error yang mungkin terjadi.

Asynchronous: Mengelola Tugas yang Berjalan Secara Paralel

Meskipun JavaScript adalah single-threaded, ia bisa menangani tugas-tugas asinkron, seperti mengirim request ke server atau menunggu user input, tanpa harus berhenti total. Ini dilakukan dengan menggunakan callback, promises, atau async/await.

Misalnya, ketika kamu mengirim request ke server untuk mendapatkan data, JavaScript tidak akan menunggu sampai data itu kembali sebelum menjalankan kode lainnya.

Sebaliknya, ia akan terus menjalankan kode lain sambil "menunggu" data tersebut di belakang layar. Setelah data tadi selesai, JavaScript akan mulai mengeksekusinya.

Jadi, meskipun JavaScript terlihat sederhana di permukaan, ada banyak proses yang terjadi di balik layar saat kamu menjalankan kode di browser.

Dari mulai parsing, dieksekusi oleh JavaScript Engine, manipulasi DOM, hingga bekerja dengan API browser, semua ini adalah bagian dari bagaimana JavaScript membuat halaman web jadi hidup dan interaktif. Dengan memahami cara kerja ini, kamu bisa menulis kode yang lebih efisien dan mengatasi masalah yang muncul dengan lebih baik.

Gimana, udah kebayang kan gimana cara kerja JavaScript di browser?

Seru banget, kan?

Yuk, kita lanjut ke bagian berikutnya: menyiapkan lingkungan pengembangan buat JavaScript!

Hello, teman-teman! Kali ini kita bakal bahas gimana cara menyiapkan lingkungan pengembangan buat mulai ngoding JavaScript. Tenang aja, caranya gampang kok, dan kita bakal bikin seru dan santai!

Siapkan Alat Tempur Kamu untuk Ngoding JavaScript

Oke, jadi kamu sudah siap buat belajar JavaScript, tapi sebelum kamu mulai ngoding, kamu butuh yang namanya lingkungan pengembangan. Ini environment kamu buat menulis, menguji, dan menjalankan kode JavaScript. Mari kita bahas satu per satu apa aja yang kamu butuhin!

Text Editor atau IDE: Tempat Kamu Menulis Kode

Pertama-tama, kamu butuh tempat untuk menulis kode. Ada dua pilihan utama: Text Editor atau IDE (Integrated Development Environment). Apa bedanya?

Text Editor: Ini adalah aplikasi yang ringan dan fokus hanya buat menulis kode. Beberapa text editor populer di kalangan programmer JavaScript adalah:

  • Visual Studio Code (VS Code): Ini adalah text editor yang paling populer sekarang. Gratis, open-source, dan punya banyak ekstensi yang bisa membantu kamu ngoding lebih produktif.
  • Sublime Text: Editor yang ringan dan cepat. Cocok buat kamu yang suka simple.
  • Project IDX: Dibuat oleh google berbasis web-base. Meskipun baru di luncurkan, editor ini layak untuk kamu coba.

IDE: Ini lebih berat dan biasanya punya fitur yang lebih lengkap dibanding text editor. IDE sering kali sudah dilengkapi dengan debugger, terminal, dan tools lainnya. Contoh IDE yang sering dipakai buat JavaScript adalah:

  • WebStorm: Dibuat oleh JetBrains, WebStorm adalah IDE yang kuat dan sangat cocok buat pengembangan web. Tapi, ini berbayar.
  • Eclipse dengan plugin JSDT (JavaScript Development Tools): Meskipun lebih populer untuk Java, Eclipse juga bisa dipakai buat ngoding JavaScript.

Rekomendasi: Untuk pemula, VS Code adalah pilihan terbaik. Gratis, mudah digunakan, dan punya banyak ekstensi yang bisa kamu tambahkan sesuai kebutuhan.

Browser: Tempat Kode Kamu Dieksekusi

JavaScript adalah bahasa yang hidup di browser, jadi kamu butuh browser buat menjalankan dan menguji kode kamu. Beberapa browser yang sering dipakai oleh developer adalah:

  • Google Chrome: Populer karena kecepatan dan dukungannya untuk standar web terbaru. Chrome juga punya DevTools yang sangat powerful buat debugging.
  • Mozilla Firefox: Juga punya DevTools yang kuat, dan beberapa developer lebih suka menggunakan Firefox karena alat debugging yang kadang lebih intuitif.
  • Microsoft Edge: Sejak beralih ke Chromium, Edge jadi pilihan bagus yang cepat dan hemat baterai untuk laptop.
  • Safari: Kalau kamu pengguna Mac, Safari juga nggak kalah dalam hal performa, meskipun DevTools-nya nggak sepopuler Chrome atau Firefox.

Rekomendasi: Google Chrome biasanya jadi pilihan utama, tapi bagus juga untuk menguji kode kamu di berbagai browser untuk memastikan kompatibilitas.

Console Browser: Sahabat Terbaik Buat Debugging

Setiap browser modern dilengkapi dengan console di DevTools, di mana kamu bisa melihat output dari kode JavaScript kamu, nge-debug, atau bahkan nulis kode langsung di sana. Console ini adalah alat yang sangat penting buat ngecek apakah kode kamu jalan dengan benar atau nggak.

Cara buka console:

  • Chrome: Klik kanan di halaman web → Pilih "Inspect" atau tekan Ctrl + Shift + I (Windows) atau Cmd + Option + I (Mac).
  • Firefox: Klik kanan di halaman web → Pilih "Inspect" atau tekan Ctrl + Shift + I (Windows) atau Cmd + Option + I (Mac).
  • Edge: Klik kanan di halaman web → Pilih "Inspect" atau tekan Ctrl + Shift + I (Windows) atau Cmd + Option + I (Mac).
  • Safari: Aktifkan mode pengembang di pengaturan → Klik kanan di halaman web → Pilih "Inspect" atau tekan Cmd + Option + C.

Terminal atau Command Line: Jalankan Perintah Berbasis Text

Biasanya digunakan untuk setup project atau melakukan konfigurasi melalui terminal atau command line. Ini adalah tempat di mana kamu bisa menjalankan perintah buat berbagai hal, mulai dari instalasi paket, menjalankan server, hingga debugging.

  • Di Windows, kamu bisa pakai Command Prompt atau PowerShell. Tapi, banyak developer suka pakai Windows Terminal yang lebih canggih.
  • Di Mac atau Linux, kamu bisa pakai Terminal.

Kalau kamu sering bekerja dengan JavaScript di luar browser (misalnya, pakai Node.js), terminal jadi sangat penting buat ngelola paket dan menjalankan kode.

Node.js dan npm: Siapkan JavaScript untuk Sisi Server

Meskipun awalnya JavaScript hanya berjalan di browser, sekarang JavaScript juga bisa jalan di server dengan bantuan Node.js. Kalau kamu berencana buat belajar atau bikin aplikasi yang jalan di server, kamu perlu instal Node.js.

Bersamaan dengan install Node.js, kamu juga akan dapat npm (Node Package Manager), yang memungkinkan kamu untuk menginstal ribuan paket dan modul yang bisa membantu kamu dalam mengerjakan project dengan lebih mudah.

Cara instal Node.js:

  1. Kunjungi nodejs.org dan download versi LTS yang sesuai dengan sistem operasi kamu.
  2. Ikuti instruksi instalasi.

Setelah diinstal, kamu bisa cek apakah instalasi berhasil dengan mengetik perintah node -v dan npm -v di terminal.

Extensions dan Plugins: Tingkatkan Kemampuan Editor Kamu

Text editor modern kayak VS Code punya sistem ekstensi yang bisa nambahin fitur-fitur canggih. Beberapa ekstensi yang berguna untuk ngoding JavaScript:

  • ESLint: Bantu kamu menulis kode yang lebih bersih dengan memberikan notifikasi kalau ada error atau warning di kode kamu.
  • Prettier: Otomatis mempercantik format kode kamu, jadi kamu nggak perlu repot format manual.
  • Live Server: Buka server lokal langsung dari editor kamu dan lihat perubahan kode secara real-time di browser.

Dengan menyiapkan lingkungan pengembangan yang baik, kamu sudah setengah jalan menuju kesuksesan dalam belajar JavaScript.

Pilih text editor yang nyaman, browser yang powerful, dan lengkapi dengan tools yang mendukung produktivitas kamu.

Gimana, udah siap buat mulai ngoding?

Yuk, kita lanjut ke topik berikutnya: cara menulis JavaScript di HTML.

Helo guys! Setelah kita mengenal apa itu JavaScript, sekarang saatnya kita belajar bagaimana cara menulis dan menempatkan JavaScript di dalam HTML. Yuk, kita mulai!

Kalau kamu baru mulai belajar JavaScript, langkah pertama yang perlu kamu kuasai adalah cara menulis kode JavaScript di dalam file HTML. Ini adalah dasar yang penting karena JavaScript adalah bahasa yang berfungsi di dalam halaman web.

Jadi, gimana cara kita menulis JavaScript di HTML? Mari kita bahas satu per satu dengan gaya yang santai biar kamu gampang paham!

Cara paling dasar dan umum untuk menulis JavaScript di HTML adalah dengan menggunakan tag <script>. Kamu bisa menulis kode JavaScript langsung di dalam tag ini, dan browser akan mengeksekusi kode tersebut saat halaman web di-load.

Contohnya, kita mau menampilkan pesan "Hello, World!" di console. Ini kode HTML-nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript</title>
    <script>
      console.log("Ini dijalankan sebelum halaman dimuat!");
    </script>
  </head>
  <body>
    <h1>Selamat Datang di Halaman Web Saya</h1>
  </body>
</html>

Penjelasan:

  • Tag <script> ini adalah tempat di mana kita menulis kode JavaScript di dalam file HTML.
  • console.log('Hello, World!'); adalah baris kode JavaScript yang bakal menampilkan teks "Hello, World!" di console browser.

Kamu juga bisa menulis kode JavaScript di dalam tag <head>.

Namun, ini biasanya hanya dilakukan untuk kode yang nggak berhubungan langsung dengan elemen halaman yang ada di dalam tag <body>.

Kalau kamu butuh kode JavaScript yang dijalankan sebelum seluruh halaman dimuat, kamu bisa menulisnya di sini.

Contoh:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript</title>
    <script>
      console.log("Ini dijalankan sebelum halaman dimuat!");
    </script>
  </head>
  <body>
    <h1>Selamat Datang di Halaman Web Saya</h1>
  </body>
</html>

Namun, cara ini biasanya tidak disarankan untuk pemula karena bisa membuat pengkodean menjadi lebih rumit. Lebih baik menempatkan JavaScript di bagian bawah halaman untuk memastikan bahwa elemen HTML sudah sepenuhnya dimuat sebelum JavaScript dijalankan.

Nah, kalau kode JavaScript kamu mulai panjang dan kompleks, lebih baik kamu memisahkan kode tersebut ke dalam file eksternal.

Caranya?

Gampang banget! Kamu cukup bikin file JavaScript terpisah dengan ekstensi .js, misalnya script.js, dan panggil file tersebut di dalam tag <script> dengan atribut src.

Contoh:

Buat file HTML seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript</title>
  </head>
  <body>
    <h1>Selamat Datang di Halaman Web Saya</h1>

    <!-- Panggil file JavaScript eksternal -->
    <script src="script.js"></script>
  </body>
</html>

Lalu buat file script.js dengan isi seperti ini:

console.log('Hello dari file eksternal!');

Penjelasan:

  • Dengan menggunakan atribut src di tag <script>, kamu bisa memisahkan kode JavaScript dari file HTML.
  • Ini bikin kode lebih rapi dan lebih mudah di-maintain, apalagi kalau kode kamu mulai panjang dan butuh banyak fungsionalitas.

Selain langsung di tag <script>, kamu juga bisa menulis JavaScript di dalam atribut event HTML, seperti onclick, onmouseover, dan sebagainya. Ini cara cepat untuk menambahkan interaksi langsung di elemen HTML tertentu.

Contoh:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript</title>
  </head>
  <body>
    <h1>Selamat Datang di Halaman Web Saya</h1>
    <button onclick="alert('Tombol diklik!')">Klik Aku!</button>
  </body>
</html>

Penjelasan:

  • onclick="alert('Tombol diklik!')" adalah cara untuk mengeksekusi kode JavaScript saat tombol diklik.
  • alert('Tombol diklik!') adalah contoh kode yang menampilkan jendela pop-up dengan pesan.

Defer dan Async: Mengontrol Waktu Eksekusi JavaScript

JavaScript punya sifat unik: kalau ada kode JavaScript di tengah-tengah halaman HTML, browser bakal berhenti dulu untuk mengeksekusi JavaScript tersebut sebelum melanjutkan pemrosesan HTML. Ini kadang bisa bikin halaman terasa lambat, terutama kalau JavaScript-nya kompleks.

Untungnya, ada dua cara untuk mengontrol kapan kode JavaScript dieksekusi: defer dan async.

defer: Dengan atribut defer, JavaScript akan dijalankan setelah seluruh halaman selesai dimuat. Ini bagus kalau kamu mau pastikan HTML selesai di-load dulu sebelum JavaScript dijalankan.

Contoh:

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

async: Atribut async membuat JavaScript dieksekusi secepat mungkin, tanpa harus menunggu seluruh halaman selesai dimuat. Ini bagus untuk kode JavaScript yang nggak tergantung pada elemen HTML tertentu.

Contoh:

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

Dengan memahami cara menulis JavaScript di HTML, kamu sudah siap untuk mulai ngoding dan bikin halaman web interaktif.

Mau nulis langsung di tag <script>, atau pakai file eksternal, semuanya tergantung kebutuhan kamu. Yang penting, kamu harus ngerti kapan dan di mana tempat terbaik buat menulis kode JavaScript supaya halaman web kamu jalan dengan optimal.

Nah, itu dia cara-cara menulis JavaScript di dalam HTML. Mudah kan?

Jadi, kalian bisa mulai menulis dan menjalankan kode JavaScript kalian sendiri! Selamat mencoba! 💻

Sekarang mari kita lanjut ke topik berikutnya: dasar-dasar JavaScript!