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? Pada dalam web browser yg kita gunakan. Kita sanggup lalukan dua cara sebagai berikut:

1. Menggunakan Console Yang Ada Di Web Browser.

Kita bisa berinteraksi menggunakan Interpreter Javascript menggunakan menggunakan Console yg ada pada developer tools setiap browser. Untuk sanggup mengakses Console, kita memerlukan laman website terlebih dahulu. Caranya kita sanggup menciptakan page website sembarang seperti model 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, selesainya Elemen.

? Pilih mode posisi Developer Tools yg membuat kita nyaman menggunakan pilihan pada sebelah kanan, sebelah kiri, bawah, atas lepas terpisah menurut window. Pilihan tadi kita bisa atur dalam bagian Customize and Control Development Tools dibagian paling kanan menggunakan icon 3 titik sejajar secara vertikal buat Developer Tools yg sudah terbuka.

Cara dua :

? Menggunakan Option Inspect/Periksa. Silakan klik kanan dalam Mouse, kemudian pilih Inspect/Periksa.

? Kemudian pilih Console dibagian atas, selesainya Elemen.

? Pilih mode posisi Developer Tools yang menciptakan kita nyaman dengan pilihan pada sebelah kanan, sebelah kiri, bawah, atas tanggal terpisah berdasarkan window. Pilihan tadi kita bisa atur pada bagian Customize And Control Development Tools dibagian paling kanan dengan icon tiga titik sejajar secara vertikal buat Developer Tools yg sudah terbuka.

Cara 3 :

? Menggunakan Customize And Control Google Chrome. Silakan klik icon tiga titik yang sejajar secara vertikal yang terdapat dalam sebelah atas kanan browser atau window.

? Pilih More Tools.

? Pilih Developer Tools.

? Kemudian pilih Console dibagian atas, selesainya Elemen.

Browser Mozilla Firefox

Cara 1 :

Menggunakan Shortcut

? Silakan tekan tombol Ctrl Shift K.

? Pilih mode posisi Developer Tools yang menciptakan kita nyaman dengan pilihan pada sebelah kanan, sebelah kiri, bawah, atas tanggal terpisah dari window. Pilihan tersebut kita bisa atur pada bagian Customize & Control Development Tools dibagian paling kanan dengan icon tiga titik sejajar secara horizontal untuk Developer Tools yang telah terbuka.

Cara dua :

? Menggunakan Option Inspect Element/Periksa Elemen. Silakan klik kanan pada Mouse, lalu pilih Inspect Element/Periksa Elemen.

? Kemudian pilih Console dibagian atas, sesudah Inspector/Pemeriksa.

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 menciptakan kita nyaman dengan pilihan pada sebelah kanan, sebelah kiri, bawah, atas lepas terpisah dari window. Pilihan tersebut kita sanggup atur dalam bagian Customize And Control Development Tools dibagian paling kanan dengan icon 3 titik sejajar secara horizontal untuk Developer Tools yg sudah terbuka.

Browser Internet Explorer

Cara 1

? Menggunakan Shorcut F12. Tekan F12 dalam keyboard.

? Kemudian pilih Console dalam bagian baris kedua sajian, selesainya CSS

? Pilih posisi Developer Tools dengan posisi yang kita inginkan. Kita mampu atur dibagian Unpin ( Ctrl P ) di tengah tombol Minimize dan Close yang terdapat di bagian kanan Developer Tools. Pilihannya mau terpisah atau nir.

Cara dua

? 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 menggunakan posisi yang kita inginkan. Kita bisa atur dibagian Unpin ( Ctrl P ). Pilihannya mau terpisah atau nir.

Browser Opera

Cara 1 :

? Menggunakan Shortcut. Silakan tekan tombol Ctrl Shift I.

? Kemudian pilih Console dibagian atas, selesainya Elemen.

Cara dua :

? Menggunakan Option Inspect/Periksa. Silakan klik kanan dalam Mouse, kemudian pilih Inspect/Periksa.

? Kemudian pilih Console dibagian atas, selesainya Elemen.

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, selesainya Elemen.

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.

Dua. 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