Belajar Dasar Javascript

© CCP - Programmers –

JavaScript adalah bahasa pemograman yang digunakan untuk menambahkan fitur interaktif pada website anda,

seperti ketika ingin membuat game, melakukan perubahan ketika mengklik tombol, efek dinamik, animasi, dan masih banyak lagi.

Tutorial ini adalah dasar dari JavaScript yang akan memberikan gambaran apa yang bisa anda buat dengan JavaScript.

 

Apakah JavaScript Yang Sebenarnya?

JavaScript adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen HTML dan digunakan untuk membuat website yang interaktif.

JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.

Anda dapat melakukan banyak hal dengan JavaScript.

Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengklik button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.

JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :

• Application Programming Interfaces (APIs) dibangun pada web browser agar memungkinkan anda melakukan apapun dari dinamik dokumen HTML dan set CSS yang anda buat, untuk menangkap dan memodifikasi video dari web cam, atau membuat animasi 3D dan sampel audio.

 

• API pihak ketiga menyediakan akses bagi Developer untuk menghubungkan aplikasi mereka pada website atau aplikasi lain layaknya facebook dan twitter. Pernahkan anda login soundcloud dengan facebook ? itu API pihak ketiga.

 

• Frameworks pihak ketiga dan libraries dapat digabungkan pada HTML sehingga memungkinkan Developer membangun website atau aplikasi dengan cepat.

Karena artikel ini hanya sebagai pengenalan.

kami tidak ingin membingungkan anda pada tingkat ini dengan membahas secara detail tentang apa perbedaan antara inti bahasa javascript dan perbedaan alat yang digunakan di atas.

Anda bisa belajar semuanya nanti pada Area Belajar JavaScript , dan pada semua bagian MDN.

Di bawah ini kami akan memperkenalkan anda pada beberapa aspek dari inti bahasa, dan anda juga bisa bermain dengan beberapa fitur API Browser.

 

Contoh "Hello World"

Judul diatas terdengar menarik bukan ?. JavaScript adalah salah satu bahasa yang sangar menarik dari banyak teknologi web yang lain.

dan jika anda mengikuti tutorial ini dengan baik, anda dapat menambahkan dimensi baru dan hal lain yang kreatif pada website anda. 

Namun, JavaScript sedikit lebih rumit dari pada HTML dan CSS, dan anda akan belajar sedikit demi sedikit, dan tetaplah belajar pada langkah-langkah kecil yang kami berikan.

Untuk memulainya, kami akan menunjukkan bagaimana cara menambah beberapa skrip JavaScript yang sangat sederhana pada halaman Anda, yakni dengan contoh cara membuat "Hello, world!"

1. Pertama-tema, buka situs percobaan anda, dan buatlah sebuah file baru bernama main.js Simpan di dalam folder scripts.

2. Selanjutnya, buka file index.html Anda, dan masukkan elemen berikut pada sebuah baris bari sebelum tag penutup </body>:

<script src="scripts/main.js"></script>

3. Ini sama halnya dengan cara kerja elemen <link> untuk CSS — ini menempatkan JavaScript ke halaman, sehingga dapat memberikan pegaruh pada HTML (CSS, dan lainnya pada halaman).

4. Sekarang tambahkan kode berikut pada file main.js:

var myHeading = document.querySelector('h1');

myHeading.innerHTML = 'Hello world!';

 

5. Sekarang pastikan file HTML dan JavaScript disimpan, dan muat index.html di browser. Anda seharusnya mendapatkan hasil seperti berikut:

 

Jadi text heading anda telah diubah menjadi "Hello world!" mengunakan JavaScript. Kita melakukannya dengan menggunakan fungsi querySelector() untuk mendapatkan referensi untuk heading, dan menyimpannya di variabel myHeading. Ini sama halnya seperti yang kita lakukan saat menggunakan CSS selector — kita menginginkan untuk melakukan sesuatu ke sebuah elemen, maka kita perlu memilihnya terlebih dahulu.

Setelah itu, kita tambahkan nilai dari variabel myHeading  properti innerHTML  ( dimana mewakili konten heading) ke "Hello world!".

 

Oke mungkin segini dulu yang bisa mimin sampaikan, tunggu di postingan berikutnya ya :')