Belajar Dasar Javascript Lengkap Untuk Pemula
Assalamualaikum wr.wb Pada kali ini kita akan Belajar Javascript Lengkap Untuk Pemula
Pada Tutorial Belajar Dasar Javascript Lengkap untuk Pemula ini. Kita akan mempelajari Dasar - Dasar Pemrograman Javascript. Kita akan mempelajari Struktur Javascript serta Contoh Program Javascript.
Pada kesempatan kali ini admin akan memberikan tutorial mengenai Belajar Dasar Javascript Lengkap Untuk Pemula, silahkan teman-teman bahas pembahasan dibawah ini sampai selesai ya
Pengenalan Dasar Javascript
Apa bedanya javascript dengan HTML dan CSS?, HTML digunakan untuk dapat menampilkan kontent pada website serta digunakan sebagai kerangka pembuatan website, CSS digunakan untuk mendesign website menjadi lebih menarik supaya pengguna dapat menikmati fitur dan halaman dengan mudah, Sedangkan Javascript berfungsi sebagai suatu fungsi yang digunakan untuk membuat website menjadi lebih interaktif.
Pada pembahasan kali ini admin akan membahas sejarah singkat, Deskripsi dari javascript, serta menjelaskan aturan-aturan dalam penulisan javascript mulai dari sintaks javascript hingga dengan bagaimana menulis koding denga javascript.
1. Sejarah Singkat dari Javascript
Pada awalnya javascript dikembangkan oleh Brendan Eich dari Netscape. Yang pada awalnya javacript mempunyai nama Mocha selanjutnya berganti lagi menjadi LiveScript. Bahasa scripping tersebut terus berkembang seiring perkembangan zaman dan pada akhirnya bahasa scriptping tersebut berubah menjadi Javascript.
Karena kesuksesan dari javascript tersebut, muncullah persaingan dari perusahaan Microsoft yang memperkenalkan Internet Explorer 3 sebagai web browser yang secara gratis yang disediakan sebagai aplikasi bawaan dari Sistem Operasi windows.
2. Pengertian Javascript
Javascript merupakan bahasa pemrograman cripting yang telah dipergunakan diberbagai platform. Bahasa pemrograman javascript tidak membutuhkan compiler karena browser sudah dapat menginterpretasikannya dengan bahasa HTML, javascript juga dapat digunakan untuk membuat game, animasi dan lain sebagainya.
Pada pembuatan suatu website, Javascript dapat teman-taman gunakan untuk dapat membuat website menjadi lebih interaktif. Selain bahasa pemrograman ini memiliki beberapa kelebihan, tentunya bahasa pemrograman ini memiliki kekurangan nah salah satunya dapat digunakan untuk mengaktifkan kode-kode yang berbahaya didalam komputer para penggunanya.
3. Sintaks Javascript
Apa yang dimaksud dengan sintak - sintak javascript? sintak javascript merupakn suatu aturan yang digunakan untuk menuliskan kode javascript yang harus kita pahami agar saat kita membuat program, program dapat berjalan tanpa ada kendala. Dibawah ini merupakan aturan- aturan penulisan kode javascript yang wajib teman -teman pahami.
Case Sensitive
Javascript merupakan salah satu bahasa pemrograman yang bersifat case sensitive yang merupakan suatu aturan yang membedakan antara huruf kecil dan huruf kapital. Artinya jika teman- teman menuliskan suatu variabel dengan 'nama' tentunya akan berbeda dengan 'Nama', karena huruf besar dan kecil dianggap berbeda.
Teman-teman juga tentunya harus berhati -hati dalam menuliskan kode javascript. Misalnya, getElementById("id").innerHTML;. silahkan perhatikan penulisan kode javascript tesebut, getElementById dan inner HTML harus ditulis sama persis supaya program dapat berjalan dengan lancar.
Statement Javascript
Merupakan suatu perintah javascript yang ditujukan kepada browser dengan maksud untuk memberitahu apa saja yang harus browser kerjakan, sebuah statement pada umumnya diakhiri dengan penulisan titik koma atau semicolon.
titik koma ataupun semicolon tersebut difungsikan sebagai pemisah antara statement yang satu dengan statement yang lainnya. dengan adanya titik koma atau semicolon .. teman - teman dapat menulisakan beberapa perintah dalam satu baris.
Namun terkadang kita dapat menemukan sebuah statement tanpa menggunakan titik koma atau semicolon dan program tetap berjalan dengan lancar. Itu dikarenakan tanda koma atau semicolon hanya sebagai saja.
Break Up Line
Break Up Line digunakan untuk dapat menuliskan string atau suatu kaliamat yang panjang pada javascript, teman-teman dapat memisahkannya menjadi beberapa baris dalam penggunaannya 'backslash'. kalian harus ingat aturan penulisan menggunakan backslash hanya dapat difungsikan untuk string atau kalimat
sebagai tambahannya, dalam aturannya penulisan kode javascript, kode javascript mengabaikan spasi dan tab. Itu artinya jika teman - teman menuliskan variable, maka variable tersebut tidak boleh mengandung spasi tentunya agar program yang telah kita buat dapat berjalan dengan lancar.
Komentar
Komentar dalam javascript merupakan suatu catatan yang dapat dibilang untuk dapat mempermudah atau dapat mendeskripsikan suatu kode javascript. Komentar tentunya sangat penting agar kita dapat mengetahui fungsi dari setiap bagian - bagian kode javascript tanpa membaca kodenya.
Komentar biasanya dapat kita tulis didekat kode yang ingin kita beri catatan. Jika teman - teman ingin menuliskan komentar dalam satu baris, silahkan gunakan tanda garis miring double //. Tetapi jika yang ingin diberi komentar lebih dari satu baris maka penulisannnya diawali dengan tanda /* dn diakhiri dengan tanda */.
4. Memulai Program
Untuk dapat memulai program dari bahasa pemrograman yang satu ini tentunya cukup mudah, teman - teman hanya membutuhkan text editor seperti VSCode, sublime, notepad dan lain - lain untuk menulis kodenya dan web browser untuk dapat menjalankan programnya.
Kode program javascript tentunya dapat dibuat dalam document HTML, kode javascript tersebut ditulis didalam Tag <script>. untuk penyimpanannya teman-teman dapat menyimpan kode javascript ini pada bagian head, body , ataupun footer pada document HTML.
Untuk menuliskan sebuat statement tentunya harus diakhiri dengan titik koma, namun jika kita tidak menggunakan titik koma maka program tetap akan berjalan dengan baik. itu dikarenakan penggunakan semicolon yang bersifat optional, untuk contoh dari program javascript silahkan perhatikan kode program dibawah ini:
<script type="text/javascript">
Cara Untuk Menyisipkan Kode Javascript ke HTML
Sebelum teman - teman menulis dan memasukan kode javascript kedalam document HTML, alangkah lebih baik nya teman-teman pahami terlebih dahulu mengenai HTML. pengetahuan dari HTML tersebut sangat perlu untuk dipahami karena javascript pada artikel kali ini akan ditulis serta disisipkan kedalam document HTML.
Dibawah ini beberapa cara untuk menyisipkannya.
1. Event Handler
Controller seperti halnya mouse serta keyboard yang terdapat pada komputer tentunya sangat memperngaruhi aksi yang akan muncul pada suatu halaman website. Teman - teman dapat membuat program javascript yang dapat menampilkan suatu dialog pada halaman website seperti popup serta yang lain sebagainya.
Misalkan ketika kita menekan tombol kiri mouse, maka akan muncul dialog atau popup pada website tersebut. Nah kadi Event Handler pada javascript digunakan untuk dapat mengatur penggunaan pada controller tersebut.
Event handler dalam javascript merupakan suatu bagian dari pemrograman yang dapat digunakan untuk menhandle sebuah event pada sebuah halaman website. Event merupakan suatu yang dapat terjadi ketika pengguna melakukan aksi seperti mengklik toacpad atau mouse pada website , Untuk scriptnya silahkan teman-teman perhatikan script dibawah ini:
<body>
<h3>Klik Tombol ini ! </h3>
<button onclick="alert('Halo, Nama Saya Muhammad Rizal Supriadi.');"> Klik Saya </button>
</body>2. URL pada Element Anchor
Elemen Anchor atau yang sering disebut dengan Tag <a> pada HTML dapat memiliki suatu attribut yang bernama 'href'. Pada umumnya attribut href tersebut berisikan alamat URL, karena difungsikan untuk membuat link, lalu adakah buhungan keterkaitan antara Tag tersebut dengan javascript?
Javascript memiliki sebuah konsep yang disebut 'protokol javascript' dimana dalam konsep tersebut bekerja dengan cara merubah alamat link atau url menjadi kode javascript. Jadi alamat url pada tag <a> dapat kita ubah menjadi kode javascript, dibawah ini merupakan script silahkan perhatikan:
<body>
<h3> Silahkan Klik Tombol ini ! </h3>
<a href="javascript:alert('Halo, Nama Muhammad Rizal Supriadi.');">Klik Saya</a>
</body>
3. Element Script
Element script atau biaasa dikatakan Tag <script> pada document HTML digunakan untuk menampung kode javascript pada sisi client, Itu artinya teman - teman menulis serta memasukan kode javascript diantara Tag <script> tersebut. Cara sersebut dapat dikatakan sebagai cara memasukan kode javascript secara internal.
Tag <script>, yang berisikan kode javascript , teman- teman bisa memasukannya pada element head , element body ataupun pada element footer, berikut merupan penulisan script nya:
<!DOCTYPE html>
<html>
<title> Penggunaan elemen script </title>
<head>
<script> alert("Selamat Datang"); </script>
</head>
<body>
<script>
document.write("Teks ini dengan kode Javascript");
</script>
</body>
</html>
dari contoh script diatas, kita dapat melihat tentunya ada 2 cara untuk dapat memasukan kode javascript kedalam document HTML.
4. File External
Pada metode yang terakhir ini, script dari javascript tidak ditulis secara langsung pada document HTML. Tetapi penulisan kode javascript ini dilakukan dengan cara terpisah dari docment HTML. tentunya file yang akan digunakan untuk nenampilkan kode javascript harus berextensi .js misalnya nama.js.
file nama.js yang berisi script javascript tersebut kemudian kita akan memanggilnya dengan menggunakan element script tentunya memakai atrribut src. contoh <script src="nama.js" />. Intinya teman - teman harus menyiapkan dua buah file yaitu file pertanya yang berisi khusus kode dari javascript dan file kedua merupakan file HTML yang akan kita gunakan untuk memanggil file javascript.
Berikut merupakan cara menggabungkan kedua file javascript dengan document HTML. langkah pertama silahkan teman - teman tulis ulang kode javascript berikut:
alert("Halo Dunia, tekan ok untuk dapat melanjutkan"); kemudian kalian simpan dengan nama .. nama.js
Setelah teman-teman selesai menulis dan menyimpan kode javascript sederhana tersebut. selanjutkan kita akan memanggil kode yang berisikan javascript tersebut pada document HTML. berikut ini merupakan perikan document HTML nya:
<!DOCTYPE html>
<html>
<title> Contoh menggunakan elemen script </title>
<head>
<script src="file.js" />
</head>
<body>
</html>
...isi dokumen html...
</body>
Mungkin sampai disini dlu untuk tutorial mengenai Belajar Dasar Javascript Lengkap Untuk Pemula, semoga teman - teman dapat mengikutinya dengan tanpa ada kendala.
Terimakasi telah membaca artikel ini, semoga bermanfaat .. Salam Succes :)
By: Muhammad Rizal Supriadi
