Ads by Yasya El Hakim
Membuat Program Pertama dengan JavaScript

Terkadang ataupun seringkali, ada benarnya dengan kata "Cara terbaik dalam belajar adalah mempraktikannya". Berhubungan dengan kata tersebut, disini kita akan langsung memahami serta mempraktikkan cara untuk membuat Aplikasi dengan Javascript.

Tujuan dari adanya bagian ini sebenarnya bukan untuk menjelaskan segala hal yang berhubungan dengan JavaScript: Ketahuilah, terdapat banyak sekali hal yang mungkin belum kalian ketahui serta dapat membuat kalian semakin pusing.

Tujuan asli dari bagian ini adalah untuk membuat kalian menjadi lebih santai dan tidak pusing dalam memahami segala hal tentang JavaScript. Intinya, pelajari dengan santai dan nikmatilah hasilnya.

Jika kalian belum pernah atau belum berpengalaman dengan dunia pemrograman, salah satu hal yang bisa membuat kalian menjadi pusing adalah tentang bagaimana cara kerja komputer sebenarnya.

Manusia dapat mengerti kesalahan input seperti perkataan atau tulisan dengan sangat mudah, tetapi tidak dengan komputer. Jika saya melakukan ksalahn dalam menulis artikel ini, kalian pasti kalian akan langsung mengetahui dan memahami maksudnya (Saya sengaja menulis teks "ksalahn", tetapi kalian pasti tau maksudnya).

Sama seperti bahasa pemrograman lainnya, JavaScript tidak memiliki kemampuan untuk mengerti kesalahan input. Huruf kapital, pengejaan, urutan kata, dan tanda baca sangatlah penting untuk diperhatikan. Maka dari itu, pastikan kalian sudah menuliskan atau mempraktikkan contoh kode yang akan saya berikan pada bagian ini dengan benar.

Sejarahnya, banyak sekali yang membahas cara membuat aplikasi pertama dan menampilkan teks "Hello World" atau "Halo Dunia". Sangat menarik untuk kalian ketahui bahwasanya tradisi ini di mulai pada tahun 1972 oleh pak Brian Kernighan - Seorang ilmuan komputer yang bekerja di Bell Labs. Pertama kali ditunjukkan pada tahun 1978 dalam bahasa pemrograman C - Oleh pak Brian Kernighan dan pak Dennis Ritchie. Sampai sekarang ini, bahasa pemrograman C sangatlah berkembang dengan luas dan telah menjadi salah satu bahasa pemrograman yang sangat berpengaruh.

Tepat pada bagian ini, kita akan menggunakan tradisi dari bapak Brian Kernighan yang sudah ada sejak 47 tahun yang lalu. Kita akan melihat teks "Hello Word" yang akan tampil pada layar tetapi saya ubah dengan bahasa Indonesia menjadi "Halo Dunia".



Dimana Harus Memulai?

Pada bagian ini, kita akan membahas cara menggunakan JavaScript dengan semua perwujutannya (Server-Side, Scripting, Desktop, Browser-Based, dll), tetapi demi alasan sejarah dan praktik, kita akan memulai dari program yang berdasarkan Browser (Browser-Based).

Salah satu alasan mengapa kita harus memulai dengan contoh Browser-Based adalah agar kita dapat memiliki akses pada pustaka grafis.

Pada dasarnya, manusia adalah makhluk visual - mampu meningkatkan konsep pemrograman kedalam elemen visual adalah alat pembelajaran yang sangat efektif.

Pada bagian ini, kita akan banyak membahas tentang membuat baris kode, teks dan lain sebagainya. Tetapi sebelum itu, mari kita mulai dengan hal kecil berupa visual yang sangat menarik.

Disini, saya juga akan menjelaskan beberapa konsep penting seperti Event-Driven Programming yang dapat membuat kalian semakin semangat dalam mempelajari JavaScript khususnya pada bagian selanjutnya.

Apa Saja Tool atau Alat yang Dibutuhkan?

Sama seperti petani yang ingin mancangkul sawah tanpa menggunakan alat berupa cangkul, kita tidak dapat membuat atau menulis kode tanpa bantuan beberapa tools atau alat. Tools yang kita butuhkan pada bagian kali ini hanyalah (minimal) sebuah Web Browser - seperti Firefox, Chrome, Opera, dll serta Text Editor - seperti Notepad, Notepad++, Sublime Text, dll.

Terdapat banyak sekali Web Browser yang dapat kalian gunakan. Tetapi, hanya satu yang harus kalian pilih. Disini, saya memilih untuk menggunakan Firefox (Developer Edition) - saya akan memberitahukan kepada kalian mengapa saya menggunakan Firefox dan fitur apa saja yang dapat membantu kalian dalam memulai petualangan dalam pemrograman.

Selain Web Browser, kalian juga membutuhkan sebuah Text Editor yang sangat berguna untuk menuliskan kode. Kalian dapat memilih salah satu dari berbagai macam Text Editor. Text Editor dapat di kategorikan sebagai Text-Mode Editor atau Windowed Editor.

Text-Mode Editor yang paling terkenal adalah Vi/Vim dan Emacs. Salah satu keuntungan untuk menggunakan Text-Mode Editor adalah pada dasarnya, kalian dapat menggunakannya pada komputer atau PC atau melalui SSH - artinya, kalian dapat menghubungkan secara remote.

Windowed Editor lebih terasa lebih modern dengan beberapa elemen User Interfacenya (Tampilannya). Beberapa Windowed Editor yang paling populer adalah Atom, Sublime Text, Coda, Visual Studio, Notepad++, TextPad, dan Xcode. Jika kalian sudah terbiasa dengan salah satu editor tersebut, tidak ada alasan bagi kalian untuk mengubah editor yang sedang kalian gunakan.

Jika kalian masih menggunakan Notepad pada Windows, saya sangat merekomendasikan untuk meng-upgrade dengan yang lebih canggih (Notepad++ adalah salah satu editor yang mudah dan gratis untuk digunakan). Disini, saya memilih untuk menggunakan Sublime Text (Gratis - Berbayar).

Berhubungan dengan Text Editor, terdapat beberapa fitur dan kelebihan yang mungkin harus kalian ketahui.

Syntax Highlighting

Syntax Highlighting dapat bekerja dengan menggunakan warna untuk membedakan syntax (tulisan) elemen dari program. Contoh, Literal mungkin akan memiliki satu warna dengan Variabel Lain (Tenang saja, nantinya kalian akan mempelajari dan mengetahui isitilah tersebut).

Fitur ini sangat berfungsi untuk mempermudah kita dalam menemukan suatu masalah pada kode. Semua Text Editor modern rata-rata memiliki fitur ini.

Bracket Matching

Semua bahasa pemrograman pasti menggunakan tanda kurung parentheses "()", curly braces "{}", dan square brackets "[]" (Secara kolektif disebut sebagai "Brackets").

Terkadang, konten yang ada di dalam tanda kurung (Brackets) tersebut terdiri dari banyak baris, atau bahkan memenuhi layar, memiliki Brackets di dalam Brackets, dan lain sebagainya.

Sangat penting bagi kita untuk mencocokkan pembuka dan penutup dari Brackets; jika tidak, program yang kalian buat tidak akan bekerja. Pencocokkan Bracket dapat memberikan petunjuk visual tentang dimana Bracket itu dimulai dan diakhiri serta dapat membantu kalian dalam menemukan masalah karena Bracket yang tidak cocok.

Penggunaan Bracket Matching pada setiap Text Editor sangatlah berbeda-beda, bagi pemula Bracket yang tidak cocok akan sangat membingungkan. Jadi, disini saya menyarankan agar kalian sudah mengetahui cara menggunakan fitur Bracket Matching pada Text Editor.

Code Folding

Code Folding hampir mirip dengan Bracket Matching (Pencocokkan tanda kurung). Code Folding berguna untuk menyembunyikan dan menampilkan baris kode sementara agar kalian fokus dengan apa yang sedang kalian tulis.

Istilah Code Folding berasal dari melipat selembar kertas untuk menyembunyikan detail-nya. Sama seperti Bracket Matching, penggunaan Code Folding pada setiap Text Editor terkadang berbeda-beda.

Autocompletion

Autocompletion (Juga disebut dengan istilah Word Completion atau IntelliSense - Terminologi Microsoft) merupakan fitur yang dapat kita gunakan untuk memberikan saran tentang apa yang ingin kalian tulis sebelum kalian menyelesaikan tulisan tersebut.

Autocompletion memiliki dua tujuan. Pertama, untuk menghemat waktu dalam menulis. Contoh, jika kalian ingin menulis encodeURIComponent, kalian hanya perlu menulis enc, kemudian pilih encodeURIComponent dari daftar saran Autocompletion. Tujuan kedua dinamakan discoverability. Contoh, jika kalian menuliskan enc karena kalian ingin menggunakan encodeURIComponent, kalian dapat melihat atau menjelajahi fungsi yang dinamakan dengan encodeURI.

Tergantung Text Editor yang sedang kalian gunakan, mungkin kalian dapat melihat beberapa dokumentasi untuk membedakan kedua tujuan diatas. Fitur Autocompletion (menurut saya) lebih sulit untuk diterapkan kedalam JavaScript dari pada bahasa pemrograman lainnya karena JavaScript adalah bahasa pemrograman yang harus di ketik secara langsung.

Jika bagi kalian Autocompletion adalah fitur penting, mungkin kalian harus mencari editor lain yang dapat memenuhi kebutuhan kalian.

Komentar di Dalam Komentar pada JavaScript

Sama seperti bahasa pemrograman lain, JavaScript memiliki sebuah Syntax (Penulisan) untuk membuat komentar pada kode. Semua komentar akan diabaikan oleh JavaScript; artinya, komentar hanya berguna bagi kalian yang menuliskan kode atau bagi programmer lainnya.

Kalian dapat menuliskan bahasa natural (bahasa manusia) tentang penjelasan atau fungsi kode yang kalian tulis. Pada bagian ini, kita akan menggunakan komentar pada kode untuk menjelaskan tentang apa yang akan terjadi.

Pada JavaScript, tedapat dua jenis komentar yaitu Inline Comments dan Block Comments.

Inline Comments dapat ditulis dengan mengawali karakter slash atau garis miring "//". Sedangkan Block Comments dapat ditulis dengan mengawali karakter slash dan asterisk atau tanda bintang "/*" dan mengakhiri dengan karakter asterisk dan slash "*/" serta dapat terdiri dari beberapa baris.

Berikut adalah contoh dari kedua jenis komentar pada JavaScript:

console.log("halo"); // menampilkan teks "halo" kedalam console

/*
    Pada baris sebelumnya, semua teks setelah dua karakter slash (garis miring) "//" akan diabaikan oleh JavaScript karena dua karakter slash merupakan pendahuluan dari komentar.

    Baris teks ini adalah Block Comments dan juga akan diabaikan oleh JavaScript. Disini, saya menggunakan beberapa ruang (tab atau spasi) yang dinamakan Indentation agar dapat kalian baca dengan mudah.
*/

/*Ini adalah Block Comment jika tidak menggunakan Indentation. Terlihat agak sulit untuk dibaca bukan?*/



Syntax komentar pada CSS (Cascading Style Sheet) juga sama seperti JavaScript yang menggunakan Block Comment (Bedanya, Inline Comment tidak didukung oleh CSS).

HTML (HyperText Markup Language) juga sama seperti CSS - tidak memiliki Inline Comment dan penulisan Block Comment sangat berbeda dengan JavaScript.

Penulisan komentar pada HTML dapat diawali dengan karakter "<!--" dan "-->". Berikut adalah contohnya:

<head>
    <title>Contoh HTML dan CSS</title>
    <!-- Ini adalah komentar pada HTML...
        yang dapat terdiri dari beberapa baris. -->
    <style>
        body: { color: red; }
        /* Ini adalah komentar pada CSS...
            yang juga dapat terdiri dari beberapa baris. */
    </style>
    <script>
        console.log("halo"); // Kembali ke JavaScript..
        /* ... Inline dan Block Comments sangat didukung. */
    </script>
</head>


Memulai untuk Menggunakan JavaScript

Kita akan mulai dengan membuat tiga buah file yaitu sebuah file HTML, CSS, dan JavaScript. Kita dapat melakukan atau menuliskan segala hal pada file HTML (File CSS dan JavaScript dapat dimasukkan kedalam HTML), tetapi tedapat kelebihan jika kita memisahkan masing-masing file nya.

Jika kalian baru belajar tentang pemrograman, saya sangat menyarankan kalian agar tetap mengikuti langkah-langkah yang saya berikan.

Mungkin awalnya akan terlihat seperti banyak yang harus dikerjakan untuk menyelesaikan hal yang simpel. Ya, saya akan menunjukkan kepada kalian tentang suatu kebiasaan buruk.

Langkah tambahan dari kebiasaan buruk yang akan kalian lihat disini adalah kalian akan melihat contoh kode ataupun teks yang saya tulis berulang-ulang kali - yang sekarang mungkin terlihat sulit bagi kalian.

Mengapa demikian? Saya hanya ingin memastikan agar kalian dapat memelajarinya dengan mudah dengan cara yang baik dan benar.

Catatan penting untuk bagian ini adalah contoh kode yang saya buat menggunakan Syntax ES5. Hal ini untuk memastikan bahwa contoh kode yang saya berikan dapat berjalan dengan lancar.

Catatan lain, kalian harus memastikan bahwa ketiga file yang kalian buat berada di dalam satu direktori (folder yang sama).

Sekarang, mari kita mulai dengan file JavaScript. Dengan menggunakan Text Editor, buatlah sebuah file bernama main.js. Lalu, masukkan satu baris kode seperti berikut kedalam file main.js:

console.log('main.js berhasil dimuat');


Kemudian, buatlah sebuah file CSS yang benama main.css. Untuk sekarang, kita tidak perlu memasukkan kode apapun kedalam file main.css. Agar tidak kosong, mari kita masukkan komentar berikut kedalamnya:

/* Ini adalah komentar pada CSS */


Terakhir, buatlah sebuah file yang bernama index.html dan masukkan kode berikut kedalamnya:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <h1>Aplikasi Pertamaku</h1>
    <p>Selamat mempelajari JavaScript!</p>

    <script type="text/javascript" src="main.js"></script>
</body>
</html>


Bagian ini tidaklah membahas semua tentang HTML atau Web Application Development, saya yakin kebanyakan dari kalian yang membaca artikel ini sudah memahami HTML maupun CSS. Jadi, tujuan dari bagian ini adalah melihat beberapa aspek dari HTML karena sangat terkait dengan JavaScript Development.

Dokumen HTML terdiri dari dua bagian utama seperti <head> dan <body>. <head> terdiri dari informasi yang secara langsung tidak akan di tampilkan pada Browser, sedangkan <body> terdiri dari konten halaman yang akan terlihat pada Browser. Sangatlah penting bagi kita untuk memahami kedua elemen utama tersebut.

Pada bagian <head>, kita memiliki elemen <link rel="stylesheet" type="text/css" href="main.css">; elemen tersebut berguna untuk menghubungkan file CSS yang telah kalian buat kedalam dokumen HTML.

Kemudian, sebelum bagian </body>, kita memiliki elemen <script type="text/javascript" src="main.js"></script>; elemen tersebut berguna untuk menghubungkan file JavaScript yang telah kalian buat kedalam dokumen HTML.

Mungkin akan terlihat aneh bagi kalian bahwasanya terdapat satu elemen yang berada di bagian <head> dan satu elemen lagi berada dibagian <body>.

Sebenarnya, kita juga dapat meletakkan elemen <script> kedalam bagian <head>. Tetapi meletakkan elemen <script> kedalam bagian <body> akan lebih meningkatkan perfoma dan kompleksitas.

Pada bagian <body>, kita memiliki elemen <h1>Aplikasi Pertamaku</h1>, yang mana merupakan level pertama dari Heading kemudian diikuti dengan elemen <p>Selamat mempelajari JavaScript!</p> yang merupakan suatu paragraf dan terdiri dari beberapa teks.

Langkah selanjutnya adalah membuka file index.html dengan menggunakan Web Browser yang kalian gunakan. Cara termudah untuk melakukannya pada semua sistem operasi adalah dengan cara mengeklik file tersebut sebanyak dua kali. Setelah terbuka, kalian akan melihat konten dari dokumen HTML yang kalian buat.

Terdapat banyak sekali contoh kode yang akan saya tunjukkan pada bagian ini dan selanjutnya. Karena rata-rata banyak sekali file HTML dan JavaScript, maka dari itu, saya tidak akan menampilkannya setiap kali. Tetapi, saya akan menjelaskannya.

Menggunakan JavaScript Console

Sekarang, kita sudah menulis sebuah script seperti console.log('main.js berhasil dimuat');. Lalu, apa yang akan terjadi? Console adalah tool yang dapat membantu para programmer dalam mendiagnoas segala hal yang dikerjakannya. Saya yakin kalian akan sering menggunakannya.

Berbeda jenis Browser, maka berbeda pula cara untuk mengakses Console. Maka dari itu, saya menyarankan agar kalian sudah mengetahui Keyboard Shortcut. Untuk membuka Console pada Firefox, kalian dapat menekan tombol Ctrl + Shift + K (Windows dan Linux).

Pada halaman index.html, bukalah JavaScript Console. Kalian akan melihat teks "main.js berhasil dimuat" (Jika kalian tidak melihatnya, maka coba refresh browser kalian).

console.log merupakan sebuah metode (Kalian akan mempelajari lebih lanjut perbedaan tentang fungsi "Function" dan metode "Method" pada bagian selanjutnya) yang dapat menampilkan apapun yang ingin kalian tampilkan pada Console serta sangat berguna untuk debugging.

Salah satu dari banyak fitur yang dapat membantu dari Console adalah, pada dasarnya kalian akan melihat output dari program serta kalian dapat memasukkan JavaScript langsung dari Console untuk menguji kode, mempelajari fitur JavaScript, atau bahkan mengubah atau memodifikasi kode program sementara.

Menggunakan jQuery

Sekarang, kita akan coba untuk menggunakan serta menambahkan salah satu Client-Side Scripting Library yang paling populer yang dinamakan dengan jQuery.

Meskipun kalian tidak harus menggunakannya, perlu kalian ketahui bahwasannya jQuery adalah library yang sangat bagus untuk ditambahkan kedalam halaman web yang kalian buat. Semakin sering kalian dalam menggunakan jQuery, maka kalian akan semakin terbiasa dengan Syntax nya.

Sebelum bagian </body>, tepatnya sebelum file main.js yang telah kita buat. Mari tambahkan jQuery tepat diatasnya:

<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>


Perlu kalian catat bahwasannya kita menggunakan URL. Artinya, halaman yang kalian buat tidak akan sempurna tanpa akses internet. Pada contoh kode diatas, kita telah menghubungkan jQuery dari Content Delivery Network (CDN) yang memiliki kelebihan performa.

Selain itu, jika kalian ingin menggunakan jQuery secara offline, kalian dapat mendownload file tersebut dan menghubungkannya kedalam dokumen HTML yang kalian buat.

Sekarang, mari kita ubah kode pada file main.js dan mari kita lihat kelebihan dari fitur jQuery. Buka file main.js, hapus semua kode di dalamnya dan ubah dengan kode berikut:

$(document).ready(function() {
    'use strict';
    console.log('main.js berhasil dimuat');
});


Jika kalian tidak memiliki pengalaman dalam menggunakan jQuery, mungkin contoh kode diatas telihat seperti omong kosong.

Sebenarnya, banyak hal yang terjadi pada contoh kode yang menggunakan jQuery diatas.

Hal yang dilakukan oleh jQuery adalah untuk memastikan bahwa Browser sudah memuat semua dokumen HTML sebelum menjalankan kode JavaScript yang kita buat (yang sebelumnya hanya sebuah console.log).

Setiap kali kita bekerja dengan Browser-Based JavaScript, kita harus mempraktikkan hal tersebut pada jQuery. Semua kode JavaScript yang kalian tulis harus berada diantara kode $(document).ready(function() { dan });.

Kode 'use strict' adalah salah satu hal yang akan kita pelajari pada bagian selanjutnya. Sebagai dasarnya, kode tersebut dapat memberitahukan JavaScript Interpreter untuk memerlakukan kode yang kalian buat agar semakin ketat.

Meskipun terlihat agak aneh, sebenarnya kode tersebut dapat membantu kalian dalam menuliskan kode JavaScript agar menjadi semakin baik serta mencegah masalah biasa sampai masalah yang sulit untuk di diagnosa.

Membuat Grafis dengan JavaScript

Salah satu manfaat yang dimiliki oleh HTML5 adalah Standardized Graphics Interface. Dengan menggunakan <canvas> pada HTML5, kita dapat membuat grafis seperti kotak, bulat, atau bahkan poligonal. Menggunakan <canvas> secara langsung akan sangat membingungkan. Jadi, disini kita akan menggunakan Graphics Library yang dinamakan Paper.js.

Terdapat Canvas Graphics Library populer yang dapat kalian selain Paper.js seperti KineticJS, FabricJS, dan EaselJS.

Sebelum menggunakan Paper.js, kita harus menambahkan elemen <canvas> kedalam HTML. Tambahkan kode berikut kedalam <body> (Letakkan dimana saja; contoh, setelah tag paragraf):

<canvas id="mainCanvas"></canvas>


Perlu diperhatikan bahwa kita telah memberikan atribut id kedalam elemen <canvas> yang sangat berguna untuk dapat diakses dengan mudah oleh JavaScript maupun CSS. Jika kita sudah memasukkan kode diatas kedalam dokumen HTML kemudian me-refresh halaman, maka kita tidak akan melihat apapun didlamnya.

Setiap elemen pada HTML dapat memiliki ID dan setiap ID harus unik atau berbeda. Jadi, pada kode diatas kita telah memasukkan id="mainCanvas" pada canvas.

Selanjutnya, mari kita ubah file main.css agar elemen <canvas> yang kita buat dapat terlihat secara visual. Tenang saja, jika kalian belum terbiasa dengan kode CSS berikut - kode CSS berikut hanya untuk mengatur lebar dan tinggi serta menambakan garis batas (border) kedalam elemen yang ada pada dokumen HTML:

#mainCanvas {
    width: 400px;
    height: 400px;
    border: solid 1px black;
}


Jika kalian belum paham dengan HTML dan CSS, kalian dapat mempelajarinya disini.

Refresh halaman kalian, sekarang kalian dapat melihat elemen <canvas> secara visual.

Sekarang, kita harus memasukkan atau menggambar sesuatu kedalamnya, disini kita akan menggunakan bantuan dari Paper.js. Tambahkan kode berikut Tepat setelah elemen <script> jQuery, tetapi sebelum <script> main.js:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>


Sama seperti jQuery, kita telah menggunakan CDN untuk menghubngkan Paper.js kedalam project yang kita buat.

Perlu kalian ketahui bahwasannya dalam melakukan urutan pelatakkan script sangatlah penting. Pada contoh yang telah kita buat, kita telah menambahkan dan mengurutkan jQuery, lalu Paper.js, terakhir adalah main.js.

Jadi, sebenarnya tidaklah terlalu penting dalam mengatur urutan script diatas. Tetapi, saya selalu menambahkan jQuery pada posisi atau urutan paling atas.

Sekarang kita telah menambahkan Paper.js, selanjutnya kita harus mengkonfigurasikan Paper.js. Setiap kali kalian melakukan sesuatu seperti kode di bawah ini - kode berulang yang dibutuhkan sebelum kalian melakukan segala hal - biasanya sering disebut dengan istilah boilerplate.

Buka file main.js dan tambahkan kode berikut kedalamnya tepat setelah kode 'use strict'; (kalian dapat menghapus kode console.log('main.js berhasil dimuat');):

paper.install(window);
paper.setup(document.getElementById('mainCanvas'));

// HAL YANG INGIN DIKERJAKAN
 
paper.view.draw();


Pada baris pertama, kita telah menginstall Paper.js pada Scope Global (Kalian akan mengetahui istilah tersebut pada bagian selanjutnya).

Baris kedua, kita telah menyertakan Paper.js kedalam canvas dan menyiapkan Paper.js untuk dapat menggambar.

Baris ketiga, dimana kita menggunakan komentar // HAL YANG INGIN DIKERJAKAN adalah lokasi untuk mengerjakan suatu hal.

Baris terakhir dapat memberitahukan Paper.js untuk menggambar suatu hal pada layar.

Sekarang, mari kita mulai menggambar. Kita awali dengan membuat lingkaran berwarna hijau ditengah canvas. Ubah komentar // HAL YANG INGIN DIKERJAKAN dengan baris kode berikut:

var c = Shape.Circle(200, 200, 50);
c.fillColor = 'red';


Refresh Browser kalian, dan kalian akan melihat lingkaran berwarna merah. Selamat, kalian sudah berhasil membuat satu hal dasar dengan JavaScript!

Sebenarnya terdapat banyak hal di balik kedua baris pada contoh kode diatas, tetapi untuk sekarang, sangat penting bagi kita untuk mengetahui beberapa hal.

Pada baris pertama, kita telah membuat sebuah objek berbetuk lingkaran (Circle), dan dapat bekerja dengan tiga argumen: koordinat x dan y serta radius lingkaran dari bentuk lingkaran.

Ingatlah, pada kode CSS, kita telah membuat tinggi canvas menjadi 400 pixel dan lebar canvas menjadi 400 pixel. Jadi, sisi tengah dari canvas adalah (200, 200) dan Radius 50 dapat membuat lingkaran seperdelapan dari lebar dan tinggi canvas.

Pada baris kedua, berfungsi untuk mengatur dan mengisi (fill) warna, yang sangat berbeda dengan warna garis batas (outline) - dapat disebut dengan istilah Stroke. Jika kalian sudah paham, janganlah ragu untuk bereksperimen dengan kode diatas.

Menjalankan Tugas Secara Otomatis (Automating Repetitive Task) pada JavaScript

Pertimbangkan jika kalian tidak hanya ingin membuat satu bentuk lingkaran pada canvas, tetapi ingin memenuhi banyak lingkaran pada canvas. Jika kalian memisahkan lingkarannya menjadi 50 pixel dan membuatnya menjadi sedikit kecil, kalian dapat memasukkan 64 lingkaran kedalam canvas.

Tentu saja kalian harus menyalin kode yang sudah ada dan mempastekannya sebanyak 63 kali serta mengatur masing-masing koordinatnya. Hal tersebut terlihat sangat banyak untuk dilakukan bukan?

Untungnya, tugas repetatif (Repetitive) atau pekerjaan yang berulang-ulang adalah salah satu fungsi dan tugas dari komputer. Sekarang, mari kita lihat bagaimana cara menyusun 64 lingkaran dengan jarak yang sama.

Disini, kita harus mengganti kode yang telah kita buat dengan kode berikut:

var c;
for(var x=25; x<400; x+=50) {
    for(var y=25; y<400; y+=50) {
        c = Shape.Circle(x, y, 20);
        c.fillColor = 'red';
    }
}


Jika kalian me-refresh browser, kalian akan melihat 64 lingkaran berwarna merah! Jika kalian masih baru dalam dunia pemrograman, mungkin kode yang saya berikan diatas agak membingungkan, tetapi kode tersebut lebih baik dari pada menuliskannya secara manual.

Hal yang kita lakukan pada kode diatas dinamakan dengan for loop yang merupakan bagian dari syntax Control Flow (Akan kita pelajari pada bagian selanjutnya).

for loop dapat kita gunakan untuk menentukan kondisi inisial (25), kondisi akhir (kurang dari 400), dan nilai tambahan (50).

0Komentar

Sebelumnya Selanjutnya