Aplikasi untuk Belajar Javascript Offline dan Online

Javascript adalah bahasa pemrograman yang berjalan di browser dan runtime yang menggunakan Javascript Engine. Oleh karenanya kita tidak perlu menggunakan editor tertentu maupun mengatur environment atau lingkungan kerja untuk memulai belajar Javascript.

Browser Devtools

Web Devtools atau developer tools adalah seperangkat fitur pada browser untuk melakukan tes dan debug pada halaman website. Salah satu fiturnya adalah tab console yang bisa digunakan untuk menjalankan kode Javascript.

Pada artikel perkenalan Javascript telah dibahas bahwa terdapat beberapa Javascript Engine yang dipakai oleh berbagai browser. Meski fitur yang diberikan oleh setiap Engine ini sangat mirip satu sama lain, ada baiknya dalam belajar pemrograman website menggunakan satu Javascript yang sama.

Kami menyarankan untuk menggunakan Javascript Engine V8 dari Google dikarenakan Javascript runtime seperti Nodejs juga menggunakannya. Browser yang menggunakan Javascript Engine V8 adalah Google Chrome dan Chromium-based browser seperti Brave dan Microsoft Edge.

Cara membuka Devtools di browser Chrome dan sejenisnya, yaitu:

  1. Buka tab baru di Chrome, klik titik tiga di pojok kanan atas
  2. Klik More Tools
  3. Klik Developer Tools
Cara membuka Devtools dari menu Chrome
Chromium: Cara membuka Devtools dari menu

Pada operasi sistem Windows, kita bisa membuka Devtools di browser dengan menekan tombol [F12] atau kombinasi tombol [Ctrl] + [Shift] + [i]

Kemudian buka tab console, mulailah mengetik console.log("Memulai belajar Javascript") dan tekan tombol enter untuk menampilkan hasilnya.

Menjalankan kode javascript di console Devtools
Console: Menjalankan kode Javascript

Cara menjalankan kode Javascript di console yakni dengan menekan tombol [Enter], sedangkan untuk membuat baris baru menggunakan kombinasi [Shift] + [Enter]. Hal ini menjadi pertimbangan dalam menjalankan kode Javascript melalui console devtools karena cukup menyusahkan dalam memodifikasi kode.

Online Javascript IDE

Online Javascript IDE (Interactive Development Environment) adalah aplikasi untuk editor dan menjalankan kode Javascript yang disediakan oleh website tertentu. Karena diakses melalui website maka kita perlu online untuk menggunakannya.

Penggunaan IDE Online mempersingkat waktu karena kita tidak perlu banyak mengatur keperluan belajar javascript seperti menginstall teks editor, plugin, server, dan lain-lain. Melainkan cukup mengunjungi website penyedianya saja.

Glot.io adalah salah satu penyedia Javascript IDE dengan fitur yang cukup membantu seperti teks editor, input dan output, penyimpanan kode snippet, dan share kode snippet.

Penggunaan glot.io tidak harus login, kita bisa menikmati fitur berbagi kode snippet dengan orang lain. Terdapat 2 cara untuk berbagi, yakni secara publik dan secara privat, jika kita berbagi secara publik maka kode bisa ditemukan oleh mesin pencari, sedangkan jika terbagi secara privat maka hanya orang yang memiliki url-share-nya saja yang bisa mengakses kode snippetnya.

Fitur utama yang membedakan antara pengguna biasa dengan pengguna yang terdaftar dan telah masuk ke akun Glot.io adalah fitur My Snippets, fitur ini memungkinkan kita untuk menyimpan setiap kode snippet yang telah kita buat. Sehingga kita tidak akan kehilangan kode-kode tersebut.

Kunjungi Glot.io

Berikut ini tampilan dari IDE di Glot.io Javascript:

Glot.io User Interface Javascript Editor
Glot.io: User Interface Javascript Editor

W3School TryIt HTML

W3School TryIt HTML adalah kode editor javascript online yang memiliki tampilan user interface sederhana, tujuan utama dari W3School TryIt adalah menampilkan tampilan website saja. Keunggulannya adalah kita hanya perlu menulis kode pada editor yang tersedia, kemudian klik tombol run dan hasilnya akan muncul segera pada tab output, Keuntungan lain yakni kita bisa mensimulasikan ukuran layar. HTML TryIt Editor bisa menjadi pilihan cepat dan mudah untuk belajar dasar tampilan website.

Berikut tautannya : HTML TryIt Editor W3Schools

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram