Cara menggunakan contoh coding javascript sederhana
Cara Membuat Form Login Sederhana dengan JavaScript Show
Cara Membuat Form Login Sederhana dengan JavaScript - Pada postingan kali ini saya akan kembali membahas hal-hal yang berkaitan dengan pemrograman web, yakni membuat sebuah form login pada halaman web. Pada jejaring sosial seperti facebook, twitter, kaskus dll. Sering kali kita menemukan sebuah form login yang mana biasanya anda di suruh untuk memasukkan username atau email dan kemudian password anda. Hal ini dilakukan bertujuan sebagai keamanan akun anda dari pihak yang bertanggung jawab yang dapat menyalahgunakan akun anda. Nah, disini akan mencoba membuat form login sederhana dengan menggunakan javascript yang mana terdapat 2 buah inputan yakni username dan password. Algoritma untuk membuat form login sendiri bisa bilang simple yakni jika username dan password dimasukkan benar maka akan muncul pesan “Selamat anda berhasil login...!!!” dan begitu juga sebaliknya. Source Code Program
Penjelasan Kode Program
Demo Form LoginUntuk melihat demonya secara langsung dapat melalui link yang ada di bawah ini. Tampilkan Demo Catatan : Source code program di atas tidak include dengan kode CSS. Jadi tampilan yang discreenshoot akan berbeda dengan tampilan yang di demo. Printscreen Output ProgramSemoga postingan kali ini bermanfaat, dan jika ada yang ditanyakan mengenai source code diatas, silahkan tinggalkan komentar anda. Hallo teman-teman, pernah mendengar istilah JavaScript? Pasti kamu pernah mendengarnya, kan? Lalu, seperti apa sih JavaScript itu? Jika kamu seorang programmer web, pasti sudah familiar dengan yang satu ini. Sebaliknya, bagi kamu yang baru mulai terjun ke dunia programmer mesti tahu apa itu JavaScript?
Biasanya para programmer menggunakan JavaScript untuk memudahkan pekerjaan mereka dan membuat automasi dalam beberapa jenis pemrograman. 💻 Mulai Belajar PemrogramanBelajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional. Daftar SekarangKarena itulah, JavaScript begitu penting untuk seorang programmer. Eits, tidak perlu khawatir bagi kamu yang baru memulai atau ingin menjadi programmer JavaScript ya. Kali ini kita akan berkenalan dengan JavaScript, serta fungsi dan contohnya. Simak tuntas sobat! Apa Itu JavaScript?Tahukah kamu bahwa JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif. Kalau sebelumnya kamu hanya mengenal HTML dan CSS, nah sekarang kamu jadi tahu bahwa JavaScript dapat meningkatkan fungsionalitas pada halaman web. Bahkan dengan JavaScript ini kamu bisa membuat aplikasi, tools, atau bahkan game pada web. Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan bahasa pemrograman jenis interpreter, sehingga kamu tidak memerlukan compiler untuk menjalankannya. JavaScript memiliki fitur-fitur seperti berorientasi objek, client-side, high-level programming, dan loosely typed. Sejarah JavaScriptBagi kamu yang masih awam, mungkin penasaran bagaimana awal mulanya diciptakan bahasa pemrograman ini. Pada tahun 1994 JavaScript mulai dikenal, pada saat itu web dan internet sudah mulai berkembang. JavaScript didesain oleh Brendan Eich yang merupakan karyawan Netscape. Transformasi nama JavaScript, dimulai dari Mocha, Mona, LiveScript, hingga akhirnya resmi bernama JavaScript. Versi awal bahasa JS hanya dipakai di kalangan Netscape beserta dengan fungsionalitas pun yang masih terbatas. Singkat cerita pada tahun 1996 JavaScript secara resmi dinamakan sebagai ECMAScript. ECMAScript 2 dikembangkan pada tahun 1998 yang dilanjutkan dengan ECMAScript 3 setahun kemudian. ECMAScript terus dikembangkan sampai akhirnya menjadi JavaScript atau JS hingga saat ini. Pada tahun 2016, 92% web diketahui telah menggunakan JavaScript. Itulah mengapa JavaScript atau JS terus berkembang. Mengapa harus pakai JavaScript?Sebagai developer zaman now. JavaScript menjadi salah satu bahasa pemrograman yang sangat populer. Mengapa? Di tahun 2016 saja sudah ada sekitar 92% pembuatan web menggunakan JS, apalagi di tahun-tahun sekarang. Tentunya web yang dibuat dengan JS akan lebih dinamis dan interaktif. Banyak perusahaan top global yang sudah mengimplementasikan JS sebagai bahasa pemrograman andalannya. Kita bisa buktikan juga bahwa JS itu populer dan menjadi bahasa yang paling banyak digunakan di Github. Seperti FB, Linkedin, Trello, Medium, bahkan Google, salah satu bahasa yang digunakan di antaranya adalah JS (JavaScript). Itulah alasan mengapa para developer berlomba-lomba untuk jadi yang terbaik dalam mempelajari JavaScript. Fungsi JavaScriptKamu pasti sudah paham tentunya dengan fungsi JavaScript. Selain membuat web jadi lebih dinamis dan interaktif, JS digunakan juga untuk proses logika data. “Intinya, fungsi JS tidak hanya soal urusan front end, tapi juga sekaligus dipakai untuk urusan back end,” imbuh developer. Keunggulan JavaScriptSepertinya kamu sudah mengetahui keunggulan dari JavaScript, tapi saya akan paparkan lebih dalam lagi deh hehe. Inilah beberapa keunggulan JS yang membuat tekadmu kuat untuk mempelajarinya. 1. General PurposeSaat ini JavaScript tidak hanya digunakan di sisi client (browser) saja lho. Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu kamu bisa mengembangkan back-end (server), console, program desktop, mobile, IoT, game, dan lainnya menggunakan JavaScript. 2. Mudah untuk DipelajariSetiap bahasa pemrograman memiliki tingkat kesulitan yang berbeda. Tingkat kesulitan bisa dilihat dari beberapa faktor. Menurut saya sih, syntax atau penulisan jadi salah satu faktor yang paling penting buat dipelajari. JS masih tergolong mudah dipelajari asalkan kamu serius dalam belajar dan selalu berani melakukan improvement atau bermain-main dengan itu. Masih belum percaya JS mudah dipelajari? Baiklah, ini perbandingan JS dengan beberapa bahasa lainnya. Contohnya dalam menampilkan “Hello World!” ya. Bahasa C++ C++1 2 3 4 5 6 7 #include
int main() { std::cout << "Hello, world!\n"; return 0; } Bahasa Java Java1 2 3 4 5 6 class AppHelloWorld {
public static void main(String[] args) { System.out.println("Hello World!"); } } Bahasa JavaScript JavaScript1 console.log('Hello World!') Kode program di atas menampilkan hasil yang sama yaitu “Hello World!”. Gimana? terbukti kan, JS jauh lebih ringkas dalam hal penulisan. 3. Sangat PowerfullKamu harus tau! JavaScript termasuk bahasa pemrograman yang sudah mature, sifat inilah yang membuat JavaScript sangat powerfull. Dulu, website basisnya masih PHP atau mungkin saja kita pakai WordPress. Semua logika web dibuat dan bergantung pada sisi server. Inilah yang membuat web browser lebih statis. Browser modern memiliki sifat interaktif dan dinamis. Logika yang sebelumnya harus di-handle oleh sisi server, kini sepenuhnya dapat di-handle pada sisi client, semua berkat JavaScript. 4. Banyak perusahaan yang mengimplementasikan JSSiapa yang nggak mau kerja di startup? Iya pasti maulah, jika gajinya besar hehe. Kamu akan dibutuhkan perusahaan seperti startup jika serius untuk belajar JavaScript. JavaScript menempati urutan ke-4 soal gaji developer tertinggi di tahun 2018 dengan rata-rata pendapatan adalah $105,415 (Techrepublic). Bayangkan jika dirupiahkan? Apalagi pada tahun ini bisa makin lebih besar nih. Dan lebih manisnya lagi, jika kamu bekerja sebagai developer Google dsb karena mereka semua sudah menerapkan JavaScript sebagai penunjang teknologi. Dan itupun juga tergantung pada level pemrograman kamu dan juga posisi kerja. 5. Dukungan KomunitasInilah salah satu alasan JavaScript banyak digandrungi oleh developer. Dukungan dari komunitas adalah hal penting dalam memilih sebuah bahasa pemrograman. Tentu saja, jika kamu sedang mengembangkan sebuah aplikasi, serta menemukan bug. Dengan dukungan komunitas yang baik, maka kamu akan lebih mudah untuk menemukan solusi dari bug tersebut. Tools yang Dipakai untuk Belajar JavaScriptApa saja sih tools yang harus disiapkan untuk belajar JavaScript? Khusus bagi pemula, kamu cukup menggunakan tools berikut:
Mengenal Console JavaScriptBanyak orang yang mengatakan, “Belajar JavaScript itu susah, tidak seperti belajar HTML. Sebab saat melihat hasilnya di web browser, pesan error-nya tidak tampil.” Pendapat ini tidak benar ya karena kamu bisa melihatnya melalui console. Buka terlebih dahulu Google Chrome, kemudian klik kanan pilih “Inspect” -> Console. Kamu juga dapat secara langsung menambahkan kode program pada console browser. 1 console.log ("Hallo sobat Dicoding!")
Kita dapat simpulkan bahwa console dapat digunakan untuk menguji sebuah fungsi ataupun kode JavaScript. Console dapat kita gunakan juga untuk melihat pesan error saat debugging program. Terus apa lagi ya? Kamu dapat simpulkan sendiri deh. Contoh Ngoding Dasar dengan JavaScriptKalau begitu, mari kita coba praktikan dengan menuliskan kode program berikut ini. Kamu bisa gunakan teks editor sepert VScode atau sejenisnya. Kode Lab: 1 2 3 4 5 6 7 8 9 10 11 12 13 Kode Lab: <!DOCTYPE html> <html> <head> <title>Hello World Javascript</title> </head> <body>
console.log("Saya belajar Javascript di Dicoding"); document.write("Hallo Dicoding");
</body> </html>
Silakan buka berkas belajar2.html dengan cara double klik saja ya. Maka outputnya seperti ini: Lho, kok nggak muncul tulisan “Saya belajar JavaScript di Dicoding”. Jangan khawatir! Sebab perintah console.log() hanya akan menampilkan pesan ke dalam console JavaScript saja. Sedangkan document.write() berfungsi untuk menulis ke dokumen HTML.Wah, kita sudah mengenal fungsi console.log() dan document.write(). Mantaps kan. Simak juga beberapa artikel mengenai JavaScript:
Baiklah, itulah yang dapat saya sampaikan. Insyaallah kita akan lanjutkan kembali materi di lain waktu ya. Jika ada pertanyaan atau saran, silahkan isi pada kolom komentar ya.
|