Belajar Javscript Dari Nol Untuk Pemula - Tutorial Lengkap - Jika kamu tengah atau akan mendalami dunia web development (pengembangan web), selain harus mempelajari HTML dan CSS, kamu juga harus belajar bahasa pemograman Javascript.
Javascript mengalami banyak perkembangan dari tahun ketahun, yang awalnya hanya digunakan untuk browser, sekarang Javascript juga dgunakan pada Aplikasi, Game, Console dan masih banyak lagi.
Dan menurut data dari forum pembelajaran bahasa pemograman Stackoverflow, Javascript menjadi bahasa pemograman nomor satu yang paling populer 3 tahun belakangan ini.
Oleh karena itu, saya mengajak kamu untuk belajar Javascript bersama-sama. Untuk kamu yang masih belum paham sama sekali, tenang saja, saya akan membuat tutorial pembelajaran Javascript dari awal, untuk pemula -- sejelas mungkin. Jika dirasa ada yang kurang dimengerti, silahkan tuliskan komentar di artikel ini ya.
Tenang saja, kedua software diatas gratis. Dan saya yakin kamu sudah memasang Web Browser di PC mu. Jadi sekarang kamu hanya perlu memasang Teks Editor di PC mu. Saya sarankan untuk menggunakan Visual Studio Code. Sangat ringan walaupun untuk PC dengan spesifikasi yang rendah.
Lalu tekan Enter, apa yang terjadi? Saya yakin akan muncul pesan pop-up. Seperti gambar dibawah ini.
Dari percobaan diatas, apa yang bisa kamu simpulkan terhadap fitur Console milik Browser? Seperti yang sudah diterangkan oleh Pengembang browser, fitur Inspect Element dibuat untuk para Web Development.
Jadi kesimpulannya, saat ini kita bisa tahu bahwa fitur tersebut bisa beguna untuk mencoba langsung Javasccript pada Browser tanpa Software lainnya. Juga bisa memberitahu kita jika ada error pada Javascript yang dibuat.
Maka tampilannnya akan seperti gambar dibawah ini.
Bukalah file Welcome_Javascript.html yang baru saja kamu buat, menggunakan Browser.
Hasilnya seperti gambar dibawah ini.
Kamu merasa ada yang aneh tidak? Jika iya, pura-pura saja tidak tahu, OK? wkkkwkwkw.
Kamu tidak hanya menulis kalimat Selamat Datang! tapi juga menulis kalimat Saya belajar Javasript. Tapi kenapa yang muncul hanya kalimat Selamat Datang! saja?
Pertanyaan yang bagus!!!
Silahkan periksa perintah yang ditulis, sekali lagi. Terdapat dua perintah berbeda yakni,
Jelas sekali penyebab mengapa tidak semua kalimat muncul karena perintah yang digunakan berbeda.
Perintah console.log() berfungsi untuk menampilkan pesan (log) ke Console.
Sedangkan perintah document.write() berfungsi untuk menampilkannya (write) di Browser.
Cobalah lihat Console Browser. Disana kamu akan melihat kalimat Saya belajar Javascript/
Kamu bisa memilih mau menulis Javascript didalam head atau bisa juga di dalam body.
Mana yang lebih baik?
Setelah saya lakukan percobaan, Penulisan Javascript di Body lebih baik karena bisa membuat situs atau blog mu dimuat (Load) lebih cepat.
Atau bisa juga dengan menulis seperti ini,
Silahkan buat file baru di Visual Studio Code, simpan dengan nama dan format klik_dong.html setelah itu coba buka file tersebut menggunakan Browser.
Tampilan pada Teks Editor,
Tampilan pada Browser,
Tampilan pada Browser setelah Klik,
Kedua Javascript yang saya beri diatas, walaupun cara penulisannya beda, tetapi memiliki fungsi yang sama, yakni untuk memanggil fungsi alert().
Pada kode petama, kita memanfaatkan atibut Html yakni onclick. Atribut tersebut menyatakan bahwa fungsi akan dijalankan saat elemen Html tersebut di Klik.
Lalu pada kode kedua, kita memanfaatkan atribute href untuk memanggil Javascript.
Karena sebenarnya fungsi dari atribute href pada html adalah untuk memanggil sebuah tauatan atau link, agar fungsi Javascript bisa bekerja, untuk memanggil fungsi -- kita harus menambah tulisan javascript: pada nilai atribut sebelum fungsi yang akan dijalankan.
Contoh, saya akan memanggil javascript berikut ini, yang sudah saya simpan di hosting.
Dan alamat url penyimpanannya di,
Jadi, untuk memanggil Javascript tersebut, kita menggunakan tag <script> pada Html. Hasil akhirnya seperti ini,
Berikut ini contoh penggunaannya pada Html,
Berhubung kita belum belajar tentang hosting Javascript, cobalah kamu buat file baru, beri nama dan format JS_Eksternal.js
Lalu isi dengan kode berikut ini,
Lalu, tambahkan tag pemanggil JS tersebut di Html, seperti berikut ini,
Simpan dan buka file HTML tersebut.
Untuk tahap awal, cukup sampai disini. Bacalah panduan belajar Javascript lain di Blog galihdesin.
Javascript mengalami banyak perkembangan dari tahun ketahun, yang awalnya hanya digunakan untuk browser, sekarang Javascript juga dgunakan pada Aplikasi, Game, Console dan masih banyak lagi.
Dan menurut data dari forum pembelajaran bahasa pemograman Stackoverflow, Javascript menjadi bahasa pemograman nomor satu yang paling populer 3 tahun belakangan ini.
Oleh karena itu, saya mengajak kamu untuk belajar Javascript bersama-sama. Untuk kamu yang masih belum paham sama sekali, tenang saja, saya akan membuat tutorial pembelajaran Javascript dari awal, untuk pemula -- sejelas mungkin. Jika dirasa ada yang kurang dimengerti, silahkan tuliskan komentar di artikel ini ya.
Pengertian Javascript
Javascript adalah bahasa pemograman tingkat tinggi dan dinamis. Tingkat tinggi maksudnya adalah, sebuah bahasa pemograman yang bisa membuat pemogramnya pusing, tapi diwaktu yang sama membuat para penggunannya termudahkan. Tergantung bagaimana cara kerja Javascipt yang dibuat -- Itu istilah kasarnya dari saya pribadi.
Tidak usah panjang lebar, saya anggap kamu sudah mengerti apa itu Javascript yah.
Alat Yang dibutuhkan untuk belajar Javascript
Untuk belajar Javascript, kamu membutuhkan 2 software berikut ini.
- Teks Editor .
Notepad, Atom atau Visual Studio Code. - Web Browser.
Chrome atau Mozilla Firefox)
Tenang saja, kedua software diatas gratis. Dan saya yakin kamu sudah memasang Web Browser di PC mu. Jadi sekarang kamu hanya perlu memasang Teks Editor di PC mu. Saya sarankan untuk menggunakan Visual Studio Code. Sangat ringan walaupun untuk PC dengan spesifikasi yang rendah.
Untuk langkah awal sebagai programmer Javascript pemula, saya rasa dua sofware diatas sudah cukup. Janganlah terburu-buru, karena Javascript adalah bahasa program yang lebih enak dipelajari dengan santai. Kalau tidak, bukannya cepat bisa, malahan kepala jadi pening.
Yuk Kenalan dengan Console Javascript!
Beberapa teman yang baru belajar Javascript dan coba mensimulasikannya di Web browser, mengeluhkan bahwa mereka tidak bisa tahu apakah Javascript yang mereka buat berhasil atau error? Lalu saya katakan,"Sob, pesan error jika Javascript gagal bekerja ada di fitur Console yang ada di Browser.".
Untuk menggunakan fitur Console pada Browser, kamu cukup klik kanan > Inspect Element > Pilih tab Console atau bisa dengan menekan tombol CTRL + Shift + i.
Dengan menggunakan fitur Console pada browser, kita bisa langsung menyusun Javascript dan langsung mencobanya di Browser tersebut.
Sebagai contoh, coba yuk? Buka Browser > Masuk ke Inspect Element > Pilih tab Console > Tulis kode dibawah ini!
Dengan menggunakan fitur Console pada browser, kita bisa langsung menyusun Javascript dan langsung mencobanya di Browser tersebut.
Sebagai contoh, coba yuk? Buka Browser > Masuk ke Inspect Element > Pilih tab Console > Tulis kode dibawah ini!
console.log("Halo sobat Galihdesign!");
alert("Belajar Javascript Yuk!");Lalu tekan Enter, apa yang terjadi? Saya yakin akan muncul pesan pop-up. Seperti gambar dibawah ini.
Dari percobaan diatas, apa yang bisa kamu simpulkan terhadap fitur Console milik Browser? Seperti yang sudah diterangkan oleh Pengembang browser, fitur Inspect Element dibuat untuk para Web Development.
Jadi kesimpulannya, saat ini kita bisa tahu bahwa fitur tersebut bisa beguna untuk mencoba langsung Javasccript pada Browser tanpa Software lainnya. Juga bisa memberitahu kita jika ada error pada Javascript yang dibuat.
Buatlah Javascript Pertama mu
Saya harap, sampai tahap ini, kamu sudah tahu cara menggunakan dan fungsi dari Console.
Sekarang saatnya kita buat Javascript pertama mu.
Buka Visual Studio Code, masukkan kode berikut ini dan simpan dengan nama Welcome_Javascript.html.
<!DOCTYPE html>
<html>
<head>
<title>Selamat belajar Javascript</title>
</head>
<body>
<script>
console.log("Saya belajar Javascript");
document.write("Selamat Datang!");
</script>
</body>
</html>Maka tampilannnya akan seperti gambar dibawah ini.
Bukalah file Welcome_Javascript.html yang baru saja kamu buat, menggunakan Browser.
Hasilnya seperti gambar dibawah ini.
 |
| Tampilan pada Browser Chrome |
Kamu merasa ada yang aneh tidak? Jika iya, pura-pura saja tidak tahu, OK? wkkkwkwkw.
Kamu tidak hanya menulis kalimat Selamat Datang! tapi juga menulis kalimat Saya belajar Javasript. Tapi kenapa yang muncul hanya kalimat Selamat Datang! saja?
Pertanyaan yang bagus!!!
Silahkan periksa perintah yang ditulis, sekali lagi. Terdapat dua perintah berbeda yakni,
- console.log()
- document.write()
Jelas sekali penyebab mengapa tidak semua kalimat muncul karena perintah yang digunakan berbeda.
Perintah console.log() berfungsi untuk menampilkan pesan (log) ke Console.
Sedangkan perintah document.write() berfungsi untuk menampilkannya (write) di Browser.
Cobalah lihat Console Browser. Disana kamu akan melihat kalimat Saya belajar Javascript/
Cara Menulis Javascript di HTML
Pada percobaan penulisan Javascript di HTML menggunakan Visual Code Studio tadi, kita menggunakan metode penulisan Javascaript secara Embed atau bahasa Indonesianya adalah Penempelan. Dikarenakan kita menulis Script langsung di HTML.
Berikut ini adalah 3 metode penulisan Javascript :
- Embed
Penulisan Javascript langsung di dalam HTML. - Inline
Penulisan Javascript yang disisipkan didalam atribut HTML. - Eksternal
Penulisan Javascript yang terpisah dengan HTML. Dan menggunakan tag HTML pemanggil Javscript untuk menggunakannya.
1. Metode Penulisan Embed
Metode Embed adalah penulisan Javascaript langsung didalam HTML, lebih tepatnya di antara kode <head> dan </head>.
Bisa juga ditulisa di antar kode <body> dan </body>.
Untuk metode ini, kita mengunakan tag <script> sebagai tag pembuka, dan tag </script> sebagai tag penutup. Jadi, kode di susus diantara tag tersebut.
Misalnya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript dari Awal</title>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <head>
console.log("Welcome_Javscript dari Head");
</script>
</head>
<body>
<p>Belajar Javascript untuk Pemula</p>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <body>
console.log("Welcome_Javascript dari body");
</script>
</body>
</html>
Kamu bisa memilih mau menulis Javascript didalam head atau bisa juga di dalam body.
Mana yang lebih baik?
Setelah saya lakukan percobaan, Penulisan Javascript di Body lebih baik karena bisa membuat situs atau blog mu dimuat (Load) lebih cepat.
2. Metode Penulisan Inline
Metode ini adalah penulisan Javascript di dalam atribut Html. Biasanya, pengaplikasian metode ini bertujuan untuk memanggil suatu fungsi atau event tertentu. Sebagai contoh,
<a href="#" onclick="alert('Hore!')">Klik adek Bang!</a>Atau bisa juga dengan menulis seperti ini,
<a href="javascript:alert('Hore!')">Klik adek Bang!</a>Silahkan buat file baru di Visual Studio Code, simpan dengan nama dan format klik_dong.html setelah itu coba buka file tersebut menggunakan Browser.
Tampilan pada Teks Editor,
Tampilan pada Browser,
Tampilan pada Browser setelah Klik,
Kedua Javascript yang saya beri diatas, walaupun cara penulisannya beda, tetapi memiliki fungsi yang sama, yakni untuk memanggil fungsi alert().
Pada kode petama, kita memanfaatkan atibut Html yakni onclick. Atribut tersebut menyatakan bahwa fungsi akan dijalankan saat elemen Html tersebut di Klik.
Lalu pada kode kedua, kita memanfaatkan atribute href untuk memanggil Javascript.
Karena sebenarnya fungsi dari atribute href pada html adalah untuk memanggil sebuah tauatan atau link, agar fungsi Javascript bisa bekerja, untuk memanggil fungsi -- kita harus menambah tulisan javascript: pada nilai atribut sebelum fungsi yang akan dijalankan.
3. Metode Penulisan Eksternal
Penulisan kode Javascript dengan metode ini adalah penulisan Javascript yang terpisah dengan kode Html. Cara ini biasa digunakan oleh para programmer dengan tujuan agar.lebih mudah dilakukan pengembangan (editing).
Contoh, saya akan memanggil javascript berikut ini, yang sudah saya simpan di hosting.
alert("Hello, ini adalah program JS eksternal!");Dan alamat url penyimpanannya di,
https://cdn.rawgit.com/galih977/hello-world/bc1bed05/halo-temangalih.jsJadi, untuk memanggil Javascript tersebut, kita menggunakan tag <script> pada Html. Hasil akhirnya seperti ini,
<script src="https://cdn.rawgit.com/galih977/hello-world/bc1bed05/halo-temangalih.js"></scritp>Berikut ini contoh penggunaannya pada Html,
Berhubung kita belum belajar tentang hosting Javascript, cobalah kamu buat file baru, beri nama dan format JS_Eksternal.js
Lalu isi dengan kode berikut ini,
alert("Hello, ini adalah program JS eksternal!");Lalu, tambahkan tag pemanggil JS tersebut di Html, seperti berikut ini,
Simpan dan buka file HTML tersebut.
Untuk tahap awal, cukup sampai disini. Bacalah panduan belajar Javascript lain di Blog galihdesin.