Belajar Javascript Part 6 - Lingkungan Pengembangan Javascript ( Javascript Development Environment )

Belajar Javascript Part 6 - Lingkungan Pengembangan Javascript (Javascript Development Environment) – Noted untuk Lingkungan Pengembangan Javascript sendiri adalah sebuah sistem atau tools, tempat dimana kita akan menuliskan program Javascript kita. biasanya apabila kita menggunakan bahasa pemprograman seperti C, Java, Python ada sesuatu yang harus diinstall terlebih dahulu seperti ‘compiler’, virtual machine, atau program-program pendukung lainnya. Dengan menggunakan bahasa pemprograman Javascript hal tersebut tidak perlu dilakukan. Karena biasanya kita sudah memiliki lingkungan pengembangan Javascript tersebut berupa aplikasi web browser pada perangkat komputer kita, sedangkan di dalam setiap web browser sudah ada ‘Interpreter’ Javascript di dalamnya untuk menerjemahkan source code program javascript ke dalam bahasa mesin. Kita bisa bebas menggunakan web browser apapun sesuai dengan favorit kita, baik itu Internet explorer, google chrome, mozilla firefox, opera, safari, dan lain sebagainya.

Untuk bisa berinteraksi dengan ‘Interpreter Javascript’ di dalam web browser yang kita gunakan. Kita bisa lalukan 2 cara sebagai berikut:

1. Menggunakan Console Yang Ada Di Web Browser.

Kita bisa berinteraksi dengan Interpreter Javascript dengan menggunakan Console yang ada pada developer tools setiap browser. Untuk bisa mengakses Console, kita memerlukan halaman website terlebih dahulu. Caranya kita bisa membuat halaman website sembarang seperti contoh dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Lingkungan Pengembangan Javascript</title>
</head>
<body>
 <h1>Hello World ! </h1>
</body>
</html>

Setelah dibuat halaman website tersebut, bukalah halaman website tersebut pada web browser yang kita gunakan dengan 3 cara berikut :

Browser Google Chrome

Cara 1 :

● Menggunakan Shortcut. Silakan tekan tombol Ctrl + Shift + I.

● Kemudian pilih Console dibagian atas, setelah Elemen.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize and Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara vertikal untuk Developer Tools yang sudah terbuka.

Cara 2 :

● Menggunakan Option Inspect/Periksa. Silakan klik kanan pada Mouse, kemudian pilih Inspect/Periksa.

● Kemudian pilih Console dibagian atas, setelah Elemen.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara vertikal untuk Developer Tools yang sudah terbuka.

Cara 3 :

● Menggunakan Customize And Control Google Chrome. Silakan klik icon 3 titik yang sejajar secara vertikal yang ada pada sebelah atas kanan browser atau window.

● Pilih More Tools.

● Pilih Developer Tools.

● Kemudian pilih Console dibagian atas, setelah Elemen.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara vertikal untuk Developer Tools yang sudah terbuka.

Browser Mozilla Firefox

Cara 1 :

Menggunakan Shortcut

● Silakan tekan tombol Ctrl + Shift + K.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize dan Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara horizontal untuk Developer Tools yang sudah terbuka.

Cara 2 :

● Menggunakan Option Inspect Element/Periksa Elemen. Silakan klik kanan pada Mouse, kemudian pilih Inspect Element/Periksa Elemen.

● Kemudian pilih Console dibagian atas, setelah Inspector/Pemeriksa.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara vertikal untuk Developer Tools yang sudah terbuka.

Cara 3 :

● Menggunakan Open Menu Browser. Silakan klik icon 3 garis yang sejajar secara vertikal yang ada pada sebelah atas kanan browser atau window.

● Pilih Web Developer.

● Pilih Web Console.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara horizontal untuk Developer Tools yang sudah terbuka.

Browser Internet Explorer

Cara 1

● Menggunakan Shorcut F12. Tekan F12 pada keyboard.

● Kemudian pilih Console pada bagian baris kedua menu, setelah CSS

● Pilih posisi Developer Tools dengan posisi yang kita inginkan. Kita bisa atur dibagian Unpin ( Ctrl + P ) di tengah tombol Minimize dan Close yang ada di bagian kanan Developer Tools. Pilihannya mau terpisah atau tidak.

Cara 2

● Menggunakan Tools pada bagian browser/window. Klik tools ( Alt + x ) dibagian paling kanan atas browser/window. Kemudian pilih developer tools.

● Kemudian pilih Console pada bagian baris kedua menu, setelah CSS

● Pilih posisi Developer Tools dengan posisi yang kita inginkan. Kita bisa atur dibagian Unpin ( Ctrl + P ). Pilihannya mau terpisah atau tidak.

Browser Opera

Cara 1 :

● Menggunakan Shortcut. Silakan tekan tombol Ctrl + Shift + I.

● Kemudian pilih Console dibagian atas, setelah Elemen.

Cara 2 :

● Menggunakan Option Inspect/Periksa. Silakan klik kanan pada Mouse, kemudian pilih Inspect/Periksa.

● Kemudian pilih Console dibagian atas, setelah Elemen.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara vertikal untuk Developer Tools yang sudah terbuka.

Cara 3 :

● Menggunakan Customize And Control Opera. Silakan klik icon opera pada sebelah atas kiri atas browser atau window.

● Pilih Developer.

● Pilih Developer Tools.

● Kemudian pilih Console dibagian atas, setelah Elemen.

● Pilih mode posisi Developer Tools yang membuat kita nyaman dengan pilihan di sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara vertikal untuk Developer Tools yang sudah terbuka.

Lingkungan atau alat untuk pengembangan Javascript

Setelah kita mengetahui bagaimana mengakses console yang ada pada browser. Kita juga harus mengetahui apa saja fungsi console. Pertama, fungsi console pada developer tool untuk menulis script Javascript. Console yang ada pada browser sebagai salah satu alat developer tool juga berguna pada saat kita mengalami error atau melakukan kesalahan pada program javascript kita, dengan cara memberitahu errornya apa, terjadi di file mana, dan di baris ke berapa berupa pesan yang ada pada Console. Console yang ada pada browser sebagai salah satu alat developer tool juga berguna melakukan debugging pada program seperti uji coba Try and Error seperti menggunakan fungsi console.log.

2. Dengan Menuliskan Script Javascript Di Halaman Html

1.1 Menulis Javacript Di Halaman HTML

Menulis atau meletakkan file Javascript pada halaman HTML yang sama harus dibungkus dengan tag <script>. Sebenarnya kita bisa lakukan dengan 2 cara untuk menuliskan file javascript atau tag <script> pada halaman HTML. Pertama kita bisa letakkan di dalam tag <head> dan yang kedua kita bisa letakkan di dalam tag <body>. Tapi sebaikanya dari kedua cara tersebut, untuk tag <script> diletakkan di dalam tag <body> tepatnya sebelum tag tutup body atau tag </body>. Silakan untuk contohnya bisa lihat sintak halaman HTML berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript</title>
</head>
<body>
	<h1>Hello World</h1>

<script>
	alert ('Hello World')
</script>	
</body>
</html>

1.1 Membuat Halaman Javascript Terpisah

Untuk menuliskan script Javascript kita bisa membuat di file Javascript yang terpisah dari halaman HTML seperti kita membuat ‘file eksternal CSS’. Kita membuat file dengan ekstensi .html dan .js terpisah. Kemudian untuk menghubungkan kedua file tersebut, di dalam halaman HTML kita membuat tag <script> dengan meletakkan tag <script> tersebut di dalam tag <body> tepatnya sebelum tag tutup body atau tag </body>. Lalu tambahkan atribut ‘src’ di dalam tag pembuka <script> untuk menghubungkan file HTML dengan file javascript dengan ekstensi .js tadi. Nilai atau value dari atribut ‘src’ tersebut berupa letak relatif file Javascript berada. Untuk contoh lebih jelas silakan lihat sintak berikut.

File HTML : index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript</title>
</head>
<body>
	<h1>Hello World</h1>


<script src="latihan.js"></script>	
</body>
</html>

File Javascript : latihan.js