Belajar Javscript Dari Nol Untuk Pemula - Tutorial Lengkap
Belajar Javscript Dari Nol Untuk Pemula - Tutorial Lengkap - Jika kau tengah atau akan mendalami dunia web development (pengembangan web), selain harus mempelajari HTML dan CSS, kau juga harus berguru bahasa pemograman Javascript.
Javascript mengalami banyak perkembangan dari tahun ketahun, yang awalnya hanya dipakai untuk browser, kini Javascript juga dgunakan pada Aplikasi, Game, Console dan masih banyak lagi.
Dan berdasarkan data dari lembaga pembelajaran bahasa pemograman Stackoverflow, Javascript menjadi bahasa pemograman nomor satu yang paling terkenal 3 tahun belakangan ini.
Oleh alasannya itu, saya mengajak kau untuk berguru Javascript bersama-sama. Untuk kau yang masih belum paham sama sekali, hening saja, saya akan menciptakan 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 kau sudah memasang Web Browser di PC mu. Makara kini kau hanya perlu memasang Teks Editor di PC mu. Saya sarankan untuk memakai 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 sanggup kau simpulkan terhadap fitur Console milik Browser? Seperti yang sudah diterangkan oleh Pengembang browser, fitur Inspect Element dibentuk untuk para Web Development.
Makara kesimpulannya, ketika ini kita sanggup tahu bahwa fitur tersebut sanggup beguna untuk mencoba eksklusif Javasccript pada Browser tanpa Software lainnya. Juga sanggup memberitahu kita jikalau ada error pada Javascript yang dibuat.
Maka tampilannnya akan ibarat gambar dibawah ini.
Bukalah file Welcome_Javascript.html yang gres saja kau buat, memakai Browser.
Hasilnya ibarat gambar dibawah ini.
Kamu merasa ada yang aneh tidak? Jika iya, akal-akalan saja tidak tahu, OK? wkkkwkwkw.
Kamu tidak hanya menulis kalimat Selamat Datang! tapi juga menulis kalimat Saya berguru 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 alasannya perintah yang dipakai 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 kau akan melihat kalimat Saya berguru Javascript/
Kamu sanggup menentukan mau menulis Javascript didalam head atau sanggup juga di dalam body.
Mana yang lebih baik?
Setelah saya lakukan percobaan, Penulisan Javascript di Body lebih baik alasannya sanggup menciptakan situs atau blog mu dimuat (Load) lebih cepat.
Atau sanggup juga dengan menulis ibarat ini,
Silahkan buat file gres di Visual Studio Code, simpan dengan nama dan format klik_dong.html setelah itu coba buka file tersebut memakai Browser.
Tampilan pada Teks Editor,
Tampilan pada Browser,
Tampilan pada Browser sehabis Klik,
Kedua Javascript yang saya beri diatas, walaupun cara penulisannya beda, tetapi mempunyai fungsi yang sama, yakni untuk memanggil fungsi alert().
Pada arahan petama, kita memanfaatkan atibut Html yakni onclick. Atribut tersebut menyatakan bahwa fungsi akan dijalankan ketika elemen Html tersebut di Klik.
Lalu pada arahan kedua, kita memanfaatkan atribute href untuk memanggil Javascript.
Karena bekerjsama fungsi dari atribute href pada html ialah untuk memanggil sebuah tauatan atau link, semoga fungsi Javascript sanggup bekerja, untuk memanggil fungsi -- kita harus menambah goresan pena 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 memakai tag <script> pada Html. Hasil jadinya ibarat ini,
Berikut ini pola penggunaannya pada Html,
Berhubung kita belum berguru ihwal hosting Javascript, cobalah kau buat file baru, beri nama dan format JS_Eksternal.js
Lalu isi dengan arahan berikut ini,
Lalu, tambahkan tag pemanggil JS tersebut di Html, ibarat berikut ini,
Simpan dan buka file HTML tersebut.
Untuk tahap awal, cukup hingga disini. Bacalah panduan berguru Javascript lain di Blog galihdesin.
Javascript mengalami banyak perkembangan dari tahun ketahun, yang awalnya hanya dipakai untuk browser, kini Javascript juga dgunakan pada Aplikasi, Game, Console dan masih banyak lagi.
Dan berdasarkan data dari lembaga pembelajaran bahasa pemograman Stackoverflow, Javascript menjadi bahasa pemograman nomor satu yang paling terkenal 3 tahun belakangan ini.
Oleh alasannya itu, saya mengajak kau untuk berguru Javascript bersama-sama. Untuk kau yang masih belum paham sama sekali, hening saja, saya akan menciptakan 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 ialah bahasa pemograman tingkat tinggi dan dinamis. Tingkat tinggi maksudnya adalah, sebuah bahasa pemograman yang sanggup menciptakan pemogramnya pusing, tapi diwaktu yang sama menciptakan para penggunannya termudahkan. Tergantung bagaimana cara kerja Javascipt yang dibentuk -- Itu istilah kasarnya dari saya pribadi.
Tidak usah panjang lebar, saya anggap kau sudah mengerti apa itu Javascript yah.
Alat Yang diharapkan untuk berguru Javascript
Untuk berguru Javascript, kau 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 kau sudah memasang Web Browser di PC mu. Makara kini kau hanya perlu memasang Teks Editor di PC mu. Saya sarankan untuk memakai 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, alasannya Javascript ialah bahasa aktivitas yang lebih yummy dipelajari dengan santai. Kalau tidak, bukannya cepat bisa, malahan kepala jadi pening.
Yuk Kenalan dengan Console Javascript!
Beberapa sobat yang gres berguru Javascript dan coba mensimulasikannya di Web browser, mengeluhkan bahwa mereka tidak sanggup tahu apakah Javascript yang mereka buat berhasil atau error? Lalu saya katakan,"Sob, pesan error jikalau Javascript gagal bekerja ada di fitur Console yang ada di Browser.".
Untuk memakai fitur Console pada Browser, kau cukup klik kanan > Inspect Element > Pilih tab Console atau sanggup dengan menekan tombol CTRL + Shift + i.
Dengan memakai fitur Console pada browser, kita sanggup eksklusif menyusun Javascript dan eksklusif mencobanya di Browser tersebut.
Sebagai contoh, coba yuk? Buka Browser > Masuk ke Inspect Element > Pilih tab Console > Tulis arahan dibawah ini!
Dengan memakai fitur Console pada browser, kita sanggup eksklusif menyusun Javascript dan eksklusif mencobanya di Browser tersebut.
Sebagai contoh, coba yuk? Buka Browser > Masuk ke Inspect Element > Pilih tab Console > Tulis arahan 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 sanggup kau simpulkan terhadap fitur Console milik Browser? Seperti yang sudah diterangkan oleh Pengembang browser, fitur Inspect Element dibentuk untuk para Web Development.
Makara kesimpulannya, ketika ini kita sanggup tahu bahwa fitur tersebut sanggup beguna untuk mencoba eksklusif Javasccript pada Browser tanpa Software lainnya. Juga sanggup memberitahu kita jikalau ada error pada Javascript yang dibuat.
Buatlah Javascript Pertama mu
Saya harap, hingga tahap ini, kau sudah tahu cara memakai dan fungsi dari Console.
Sekarang saatnya kita buat Javascript pertama mu.
Buka Visual Studio Code, masukkan arahan berikut ini dan simpan dengan nama Welcome_Javascript.html.
<!DOCTYPE html> <html> <head> <title>Selamat berguru Javascript</title> </head> <body> <script> console.log("Saya berguru Javascript"); document.write("Selamat Datang!"); </script> </body> </html>Maka tampilannnya akan ibarat gambar dibawah ini.
Bukalah file Welcome_Javascript.html yang gres saja kau buat, memakai Browser.
Hasilnya ibarat gambar dibawah ini.
 |
| Tampilan pada Browser Chrome |
Kamu merasa ada yang aneh tidak? Jika iya, akal-akalan saja tidak tahu, OK? wkkkwkwkw.
Kamu tidak hanya menulis kalimat Selamat Datang! tapi juga menulis kalimat Saya berguru 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 alasannya perintah yang dipakai 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 kau akan melihat kalimat Saya berguru Javascript/
Cara Menulis Javascript di HTML
Pada percobaan penulisan Javascript di HTML memakai Visual Code Studio tadi, kita memakai metode penulisan Javascaript secara Embed atau bahasa Indonesianya ialah Penempelan. Dikarenakan kita menulis Script eksklusif di HTML.
Berikut ini ialah 3 metode penulisan Javascript :
- Embed
Penulisan Javascript eksklusif di dalam HTML. - Inline
Penulisan Javascript yang disisipkan didalam atribut HTML. - Eksternal
Penulisan Javascript yang terpisah dengan HTML. Dan memakai tag HTML pemanggil Javscript untuk menggunakannya.
1. Metode Penulisan Embed
Metode Embed ialah penulisan Javascaript eksklusif didalam HTML, lebih tepatnya di antara arahan <head> dan </head>.
Bisa juga ditulisa di antar arahan <body> dan </body>.
Untuk metode ini, kita mengunakan tag <script> sebagai tag pembuka, dan tag </script> sebagai tag penutup. Jadi, arahan di susus diantara tag tersebut.
Misalnya :
<!DOCTYPE html> <html> <head> <title>Belajar Javascript dari Awal</title> <script> // ini ialah penulisan arahan javascript // di dalam tag <head> console.log("Welcome_Javscript dari Head"); </script> </head> <body> <p>Belajar Javascript untuk Pemula</p> <script> // ini ialah penulisan arahan javascript // di dalam tag <body> console.log("Welcome_Javascript dari body"); </script> </body> </html> Kamu sanggup menentukan mau menulis Javascript didalam head atau sanggup juga di dalam body.
Mana yang lebih baik?
Setelah saya lakukan percobaan, Penulisan Javascript di Body lebih baik alasannya sanggup menciptakan situs atau blog mu dimuat (Load) lebih cepat.
2. Metode Penulisan Inline
Metode ini ialah 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 sanggup juga dengan menulis ibarat ini,
<a href="javascript:alert('Hore!')">Klik adek Bang!</a>Silahkan buat file gres di Visual Studio Code, simpan dengan nama dan format klik_dong.html setelah itu coba buka file tersebut memakai Browser.
Tampilan pada Teks Editor,
Tampilan pada Browser,
Tampilan pada Browser sehabis Klik,
Kedua Javascript yang saya beri diatas, walaupun cara penulisannya beda, tetapi mempunyai fungsi yang sama, yakni untuk memanggil fungsi alert().
Pada arahan petama, kita memanfaatkan atibut Html yakni onclick. Atribut tersebut menyatakan bahwa fungsi akan dijalankan ketika elemen Html tersebut di Klik.
Lalu pada arahan kedua, kita memanfaatkan atribute href untuk memanggil Javascript.
Karena bekerjsama fungsi dari atribute href pada html ialah untuk memanggil sebuah tauatan atau link, semoga fungsi Javascript sanggup bekerja, untuk memanggil fungsi -- kita harus menambah goresan pena javascript: pada nilai atribut sebelum fungsi yang akan dijalankan.
3. Metode Penulisan Eksternal
Penulisan arahan Javascript dengan metode ini ialah penulisan Javascript yang terpisah dengan arahan Html. Cara ini biasa dipakai oleh para programmer dengan tujuan agar.lebih gampang dilakukan pengembangan (editing).
Contoh, saya akan memanggil javascript berikut ini, yang sudah saya simpan di hosting.
alert("Hello, ini ialah aktivitas JS eksternal!");Dan alamat url penyimpanannya di,
https://cdn.rawgit.com/galih977/hello-world/bc1bed05/halo-temangalih.jsJadi, untuk memanggil Javascript tersebut, kita memakai tag <script> pada Html. Hasil jadinya ibarat ini,
<script src="https://cdn.rawgit.com/galih977/hello-world/bc1bed05/halo-temangalih.js"></scritp>Berikut ini pola penggunaannya pada Html,
Berhubung kita belum berguru ihwal hosting Javascript, cobalah kau buat file baru, beri nama dan format JS_Eksternal.js
Lalu isi dengan arahan berikut ini,
alert("Hello, ini ialah aktivitas JS eksternal!");Lalu, tambahkan tag pemanggil JS tersebut di Html, ibarat berikut ini,
Simpan dan buka file HTML tersebut.
Untuk tahap awal, cukup hingga disini. Bacalah panduan berguru Javascript lain di Blog galihdesin.
