Dasar-Dasar Penggunaan Javascript ~ Malu Bertanya Sesat Di Jalan

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 mengkil 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.

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!" (contoh standar pada dasar pemrograman.)

Penting: Jika anda belum mengikuti semua kursus kami, download contoh kode berikut dan gunakan untuk memulai.

Catatan: Alasan kita menepatkan elemen <script> di bawah file html adalah ketika HTML di muat oleh browser untuk ditampilkan pada sebuah file. Jika JavaScript dimuat pertama kali dan seharusnya mempengatuhi HTML di bawahnya, kemungkinan ini tidak bisa bekerja, oleh karena itu JavaScript dimuat sebelum HTML bekeja seperti seharusnya. Oleh karena itu, strategi yang terbaik biasanya adalah di bawah halaman.

Pertama-tema, buka situs percobaan anda, dan buatlah sebuah file baru bernama main.js. Simpan di dalam folder scripts.
Selanjutnya, buka file index.html Anda, dan masukkan elemen berikut pada sebuah baris bari sebelum tag penutup </body>:
```
<script src="scripts/main.js"></script>
```

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).

Sekarang tambahkan ode berikut pada file main.js:

var myHeading = document.querySelector('h1');
myHeading.innerHTML = 'Hello world!';

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

Apa yang Terjadi?

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!".

Kursus Kilat Bahasa Dasar

Mari kita jelaskan beberapa fitur dasar dari bahasa JavaScript, untuk memberi anda pemahaman lebih dalam bagaimana semuanya bekerja. Lebih baik lagi, fitur ini umum diterapkan pada semua bahasa pemrograman. Jika anda memahami fundamental ini, anda berada pada jalur untuk menguasai segala pemrograman!

Penting: Pada artikel ini, coba masukkan contoh kode ke konsole browser anda dan lihat apa yang terjadi. Untuk detail tentang konsole browser, lihat Temukan Browser alat pengembang.

Catatan: Fitur seperti ini sangat umum pada semua bahasa pemrograman. Jika anda dapat memahami dasar ini, anda akan mampu memulai pemrograman apapun.

Variabel

Variables merupakan wadah yang dapat anda beri nilai. Anda bisa memulai mendeklarasikan variabel dengan keyword var, diikuti nama yang anda inginkan:

var myVariable;

Catatan: Semua baris di JS harus diakhiri dengan semi-colon (;), untuk menandakan akhr baris kode. Jika anda tidak menambahkanya, anda bisa mendapatkan hasil yang tidak diinginkan.

Catatan: Anda bisa memanggil variabel apa saja, tapi ada beberapa pembatasan (lihat artikel ini tentang aturan penamaan variabel.)

Catatan: JavaScript sangat case sensitive — myVariable sangat berbeda dengan variabel myvariable. jika anda mendapatkan masalah pada kode anda, periksa huruf besar/kecil (casing)!

Setelah mendeklarasikan sebuah variabel, anda bisa menambahkan nilai:

myVariable = 'Bob';

Anda dapat mengambil nilai dengan memangil nama variabel:

myVariable;

Anda bisa melakukan operasi ini dalam satu baris jika anda menginginkanya:

var myVariable = 'Bob';

Setelah memberikan nilai pada variabel, setelah itu anda bisa mengubah nilainya:

var myVariable = 'Bob';
myVariable = 'Steve';

Catat bahwa variabel memiliki Tipe data yang berbeda:

Variabel	Penjelasan	Contoh
String	Teks String. Untuk menamdakan bahwa variabel adalah sebuah string anda perlu menambahkan tanda kutip.	`var myVariable = 'Bob';`
Number	Angka/number. Angka tidak menggunakan tanda kutip.	`var myVariable = 10;`
Boolean	Nilai True/False. `true`/`false` merupakan keyword spesial di JS, dan tidak perlu menggunakan kutip.	`var myVariable = true;`
Array	Struktur yang memungkinkan anda menyimpan lebih dari satu nilai dalam sebuah reference.	`var myVariable = [1,'Bob','Steve',10];` Panggil setiap member array seperti ini: `myVariable[0]`, `myVariable[1]`, etc.
Object	Pada dasarnya, semua. Semuanya di javascript adalah sebuah objek, dan dapat disimpan dalam variabel. Ingatlah untuk anda belajar.	`var myVariable = document.querySelector('h1');` All of the above examples too.

Jadi kenapa kita memerlukan variabel? Baik, variable dibutuhkan dalam berbagai hal menarik di pemrograman. Jika nilainya tidak berubah, maka anda tidak dapat melakukan sesuatu hal yang bersifat dinamis, seperti menyesuaikan pesan salam ke pengunjung website anda, atau mengubah gambar yang tampil di galeri, dan masih banyak lagi.

Komentar

Anda dapat menambahkan komentar di kode Javascript, seperti halnya pada CSS. Di JavaScript, sebaris komentar ditulis seperti berikut:

// Ini adalah komentar

Namun anda juga dapat menggunakan lebih dari satu baris komentar seperti yang anda lakukan pada CSS:

/*
Ini adalah komentar
lebih dari satu baris
*/

Operator

operator pada dasarnya adalah simbol matematika yang bertindak atas dua nilai (atau variabel yang berisi nilai) dan menghasilkan nilai baru. Pada tabel dibawah anda bisa melihat beberapa operator yang sederhana, disertai contoh untuk anda coba di konsole browser.

Operator	Penjelasan	Simbol	Contoh
penambahan / penggabungan	Digunakan untuk menambahkan nilai satu dengan lainnya menjadi sebuah nilai baru, atau menggabungkan dua teks string.	`+`	`6 + 9; "Hello " + "world!";`
pengurangan, Perkalian, pembagian	Yang ini hasilnya sama seperti yang kita kenal di matematika dasar.	`-`, `*`, `/`	`9 - 3; 8 * 2; // perkalian di JS menggunakan tanda bintang (*) 9 / 3;`
operator penugasan	Anda telah melihat ini sebelumnya, penugasan di JS digunakan untuk memberikan nilai pada variabel.	`=`	`var myVariable = 'Bob';`
Operator kesetaraan	Melakukan tes untuk melihat apakah suatu nilai sama dengan nilai pembanding, dan mengembalikan nilai hasil berupa boolean `true`/`false` .	`===`	`var myVariable = 3; myVariable === 4;`
Negasi, tidak sama dengan	Sering digunakan bersama operator kesetaraan, operator negasi di JS sama dengan logical NOT — membalik nilai `true` menjadi `false` dan sebaliknya.	`!`, `!==`	Ekspresi dasarnya bernilai `true`, namun pada pernamdingan mengembalikan nilai `false` karena kita menggunakan negasi: `var myVariable = 3; !myVariable === 3;` Disini kita mencoba "Apakah `myVariable` NOT ( tidak ) sama dengan 3". Mengembalikan nilai `false`, karena disitu pembandingnya sama dengan 3. `var myVariable = 3; myVariable !== 3;`

Disana masih banyak lagi yang dapat anda pelajari, tapi ini dulu yang kita cukup pahami. Lihat Operator dan ekspressi untuk daftar yang lebih lengkap.

Catatan: Mencampur tipe data akan memyebabkan hasil yang tidak kita duga ketika melakukan perhitungan, jadi hati - hati ketika memberikan nilai pada variabel pastikan memberikan nilai yang sesuai, dan mendapatkan hasil sesuai yang anda inginkan. Misalnya menuliskan "35" + "25" pada konsol. Kenapa anda tidak mendapatkan nilai yang anda inginkan? karena tanda kutip mengubah angka menjadi teks string — anda hanya mendapatkan nilai string yang digabungkan, dan bukan angka yang ditambahkan. Jika anda memasukkan 35 + 25, anda akan mendapatkan nilai yang sesuai.

Kondisional

Kondisional adalah struktur kode yang memungkinkan anda untuk menguji apakah ekspresi mengembalikan nilai yang benar atau tidak, dan kemudian menjalankan perintah lain tergantung pada hasilnya. Bentuk umum dari kondisional disebut if ... else. Contoh seperti berikut:

var esKrim = 'coklat';
if (esKrim === 'coklat') {
  alert('Yay, Aku suka eskrim coklat!');    
} else {
  alert('Hahhh, tapi sukanya coklat...');    
}

Ekspresi didalam if ( ... ) dalah pengujian — disini menggunakan operator kesetaraan (seperti yang dijelaskan sebelumnya) untuk membandingkan variabe esKrim dengan string coklat untuk melihat keduanya sama. Jika hasil perbandingan mengembalikan nilai true, kode blok pertama akan dijalankan. Jika tidak, akan di lewati dan kode blok selanjutnya akan di jalankan, tepatnya setelah statement else.

Fungsi

Functions merupakan cara encapsulasi fungsi yang ingin anda gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda ingin menggunakannya kembali. Anda telah melihat beberapa fungsi diatas, seperti:

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

alert('Halo!');

Fungsi ini merupakan built-in browser untuk anda gunakan kapanpun.
Jika anda melihat sesuatu yang mirip dengan nama variabel, tapi menggunakan tanda kurung — () — setelahnya, anda dapat memastikan bahwa itu adalah fungsi. Fungsi terkadang menggunakan arguments — bit data yang dibutuhkan untuk dapat menjalankan fungsinya. Argumen di tulis di dalam tanda kurung, dan dipisahkan dengan koma jika memiliki lebih dari satu argumen.
Misal, Fungsi alert() membuat kotak pop-up terlihat pada jendela browser, namun kita perlu membaerikan string sebagai sebuah argumen untuk mengatakan pada fungsi alert()pesan apa yang harus di tampilkan pada kotak po-pup.
Berita bagusnya adalah kita dapat membuat fungsi anda sendiri — pada contoh berikut kita menulis sebuah fungsi sederhana dengan menggunakan dua argumen dan mengalikannya menjadi nilai baru:

function kalikan(angka1,angka2) {
  var hasil = angka1 * angka2;
  return hasil;
}

Coba jalankan fungsi diatas pada konsole, kemudian coba gunakan fungsi anda beberapa kali, misal.:

kalikan(4,7);
kalikan(20,20);
kalikan(0.5,3);

Catatan: Statement return mengatakan pada browser untuk mengembalikan nilai variabel hasil keluar dari fungsi sehingga dapat digunakan. Hal ini diperlukan karena variabel yang didefinisikan di dalam blok kode atau cakupan fungsi hanya akan tersedia didalam fungsi itu sendiri. Hal ini disebuat variable scoping (baca lebih lanjut tentang variable scoping disini.)

Events

Untuk membuat hal yang interaktif pada website, anda perlu menggunakan event — kode struktur ini mendengarkan setiap hal yang terjadi pada browser, dan kemudian memungkinkan anda menjalankan kode sebagai respon pada hal yang terjadi tersebut. Contoh yang paling terjadi adalah click event, dimana di suarakan oleh browser ketika mouse anda mengklik pada elemen seperti link, tombol atau yang lainnya. Untuk menunjukkannya, coba tambahkan kode berikut pada konsol anda, kemudian coba klik pada halaman web tersebut:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Banyak sekali cara untuk melampirkan event pada sebuah elemen; disini kita memilih elemen HTML dan membuat properti handler onclick yang sama dengan fungsi anonim (fungsi tanpa nama) yang berisi kode yang ingin kita jalankan ketika event terjadi.
Catat bahwa

document.querySelector('html').onclick = function() {};

sama dengan

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Hanya untuk lebih pendek saja menuliskannya.

Meningkatkan contoh website kita

Sekarang kita meninjau beberapa dasar JavaScript, mari tambahkan bebrapa fitur dasar ke contoh situs kita untuk memberi anda satu langkah kepada suatu yang mungkin.

Menambahkan pengubah gambar

Pada bagian ini kita akan menambahkan gambar lain pada situs kita, dan tambahkan beberapa Javascript sederhana untuk mengubah antara keduanya ketika gambar di-klik.

Pertama, cari gambar lain yang ingin anda gunakan di situs anda. Pastikan ukurannya sama dengan gambar pertama, atau kurang lebih sama.
Simpan gambar pada folder images anda.

Pada file main.js , tuliskan kode JavaScript berikut (Jika kode Javascript hello world masih disana, hapus saja):

var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
    } else {
      myImage.setAttribute ('src','images/firefox-icon.png');
    }
}

Simpan semua file dan muat index.html di browser. Sekarang kita klik gambarnya, seharusnya berubah tampilannya menjadi gambar yang satunya!

Kita menyimpan referensi ke elemen gambar Kita dalam variabel myImage. Selanjutnya, Kita membuat fungsi tanpa nama (fungsi "anonim") pada property variabel pengendali event onclick. Sekarang, setiap kali elemen gambar ini diklik:

Kita mendapatkan nilai atribut src dari gambar.
Kita menggunakan kondisional untuk memeriksa apakah nilai src sama dengan path gambar asli:
1. Jika ya, kita mengubah nilai src ke path gambar kedua, memaksa gambar lain dimuat dalam elemen <image>.
2. Jika tidak (artinya harus sudah mengalami perubahan), kita mengubah nilai src kembali ke jalur gambar asli, untuk membalikkannya kembali ke semula.

Menambahkan pesan selamat datang yang dinamis

Selanjutnya, Kita akan menambahkan sedikit kode lagi untuk mengubah judul halaman untuk menyertakan pesan pembuka yang dinamis saat pengguna pertama kali masuk ke situs. Pesan pembuka ini akan bertahan saat pengguna meninggalkan situs dan kemudian kembali lagi. Kita juga akan menyertakan opsi untuk mengubah pengguna dan oleh karena itu pesan selamat datang diperlukan setiap waktu.

Pada index.html, Tambahkan baris berikut sebelum elemen <script>:
```
<button>Change user</button>
```

Pada main.js, tambahkan kode berikut di bagian bawah file, persis seperti yang tertulis - ini mengacu pada tombol baru yang akan kita tambahkan, judulnya, dan simpan pada variabel:

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

Sekarang tambahkan fungsi berikut untuk mengatur ucapan yang dinamis - ini belum berinteraksi tapi nanti akan kita gunakan:

function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}

Fungsi ini berisi fungsi prompt() yang menampilkan kotak dialog seperti alert(). Perbedaannya adalah prompt() meminta pengguna untuk memasukkan data, dan menyimpan data tersebut dalam variabel saat tombol dialog OK ditekan. Dalam kasus ini, kita meminta pengguna memasukkan namanya. Selanjutnya, kita memanggil API yang disebut localStorage, yang memungkinkan kita menyimpan data di browser, dan mengambilnya nanti. Kita menggunakan fungsi setItem LocalStorage () untuk membuat dan menyimpan item data yang disebut 'name', dan menetapkan nilainya ke variabel myName yang berisi nama pengguna yang dimasukkan. Akhirnya, kita mengatur innerHTML dari judul ke string, ditambahk nama penggunanya.

Selanjutnya, tambahkan blok if ... else — kita bisa memanggil kode inisialisasi, sebagai pengatur saat aplikasi pertama kali dimuat:

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}

Blok kode pertama kali menggunakan operator negasi (logical NOT) untuk memeriksa apakah item data ada - jika tidak ada, fungsi setUserName() dijalankan untuk membuatnya. Jika sudah ada (misalnya pengguna mengaturnya saat mereka mengunjungi situs), kita mengambil nama yang tersimpan dengan menggunakan getItem() dan menetapkan innerHTML dari judul ke string, ditambah nama pengguna, sama seperti yang kita lakukan di dalam setUserName().

Terakhir, letakkan pengendali event di bawah onclick pada tombolnya, sehingga saat diklik fungsi setUserName() dijalankan. Hal ini memungkinkan pengguna untuk mengatur nama baru kapan pun mereka mau dengan menekan tombol:

myButton.onclick = function() {
  setUserName();
}

Sekarang saat pertama kali mengunjungi situs, akan meminta nama pengguna kemudian memberi pesan yang dinamis kepada anda. Kemudian Anda bisa mengganti nama kapan saja dengan menekan tombol. Sebagai bonus tambahan, karena namanya tersimpan di dalam localStorage, tetap ada setelah situs ditutup, jadi pesan yang dinamis akan tetap ada saat Anda membuka situs ini lagi!

Kesimpulan

Jika Anda telah mengikuti semua petunjuk dalam artikel ini, halaman yang Anda buat harus terlihat seperti ini (Anda juga dapat melihat versi kami di sini):

Jika Anda terjebak kebingungan, Anda selalu bisa membandingkan pekerjaan Anda dengan contoh kode yang telah kami selesaikan di Github.
Di sini, kita hanya benar-benar menenepuk permukaan JavaScript. Jika Anda telah menikmati pembelajarannya dan ingin belajar lebih dalam dengan studi Anda, masuklah ke Panduan JavaScript kami.

Malu Bertanya Sesat Di Jalan

Dasar-Dasar Penggunaan Javascript