Belajar javascript dasar | Hello World!

Judul diatas terdengar menarik bukan ?. JavaScript adalah salah satu bahasa yang sangar menarik dari banyak teknologi web yang lain. dan jika kamu mengikuti tutorial ini dengan baik, kamu dapat menambahkan dimensi baru dan hal lain yang kreatif pada website kamu.

Namun, JavaScript sedikit lebih rumit dari pada HTML dan CSS, dan kamu akan belajar sedikit demi sedikit, dan tetaplah belajar pada langkah-langkah kecil yang saya berikan. Untuk memulainya, saya akan menunjukkan bagaimana cara menambah beberapa skrip JavaScript yang sangat sederhana yakni dengan contoh cara membuat "Hello, world!" (contoh standar pada dasar pemrograman.)

Langsung Ke Tutorialnya

1. Pertama-tema, buka situs percobaan kamu, dan buatlah sebuah file baru bernama main.js. Simpan di dalam folder scripts.
2. Selanjutnya, buka file index.html kamu, 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. Kamu seharusnya mendapatkan hasil seperti berikut:
   

Apa yang Terjadi?

Jadi text heading kamu telah diubah menjadi "Hello world!" mengunakan JavaScript. Kita melakukannya dengan menggunakan fungsi querySelector() untuk mendapatkan heading yang kamu inginkan, dan menyimpannya pada 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!".