Dasar JavaScript

Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.

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

  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 ode 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:

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.

Variables

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:

  1. var myVariable = document.querySelector('h1');
  2. 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.

  1. Pertama, cari gambar lain yang ingin anda gunakan di situs anda. Pastikan ukurannya sama dengan gambar pertama, atau kurang lebih sama.
  2. Simpan gambar pada folder images anda.
  3. 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');
        }
    }
  4. Simpan semua file dan muat index.html di browser. Sekarang kita klik gambarnya, seharunya berubah tampilannya menjadi gambar yang satunya!

So here, we are storing a reference to our image element in the myImage variable. Next, we make this variable's onclick event handler property equal to an anonymous function. Now, every time this image element is clicked:

  1. We retrieve the value of the image's src attribute.
  2. We use a conditional to check whether the src value is equal to the path to the original image:
    1. If it is, we change the src value to the path to the 2nd image, forcing the other image to be loaded inside the <image> element.
    2. If it isn't (meaning it must already have changed), we change the src value back to the original image path, to flip it back to what it was originally.

Adding a personalized welcome message

Next we will add another bit of code, to change the page's title to include a personalized welcome message when the user first navigates to the site. This welcome message will persist when the user leaves the site and then comes back. We will also include an option to change the user and therefore the welcome message anytime it is required.

  1. In index.html, add the following line just before the <script> element:
    <button>Change user</button>
  2. In main.js, add the following code at the bottom of the file, exactly as written — this grabs references to the new button we added and the heading, and stores them in variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Now add the following function to set the personalized greeting — this won't do anything yet, but we'll use it later on:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.innerHTML = 'Mozilla is cool, ' + myName;
    }
    This function contains a prompt() function, which brings up a dialog box a bit like alert() does; the difference is that prompt() asks the user to enter some data, and stores that data in a variable when the dialog OK button is pressed. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser, and retrieve it later on. We use localStorage's setItem() function to create and store a data item called 'name', and set its value to the myName variable that contains the name the user entered. Finally, we set the innerHTML of the heading to a string, plus the user's name.
  4. Next, add this if ... else block — we could call this the initialization code, as it sets up the app when it first loads:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
    }
    This block first uses the negation operator (logical NOT) to check whether the name data item exists — if it doesn't exist, the setUserName() function is run to create it. If it already exists (i.e. the user set it when they previously visited the site), we retrieve the stored name using getItem() and set the innerHTML of the heading to a string, plus the user's name, the same as we did inside setUserName().
  5. Finally, put the below onclick event handler on the button, so that when clicked the setUserName() function is run. This allows the user to set a new name whenever they want by pressing the button:
    myButton.onclick = function() {
      setUserName();
    }

Now when you first visit the site, it'll ask you for your user name then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

If you get stuck, you can always compare your work with our finished example code on Github.

Here, we have only really scratched the surface of JavaScript. if you have enjoyed learning about it and and want to go deeper with your studies, go to our JavaScript Guide.

Tag Dokumen dan Kontributor

 Kontributor untuk laman ini: rmsubekti, miftahafina, adeyahya
 Terakhir diperbarui oleh: rmsubekti,