Cara Cepat Memahami Percabangan dan Perulangan Javascript

Dalam suatu program, pada umumnya terdapat proses yang menggunakan logika didalamnya. Seperti masalah yang anda temui sehari hari, ada pengujian kondisi benar atau salah. Bila kondisinya bernilai benar maka program akan memproses suatu perintah tertentu.

Contohnya bayangkan saja seperti anda ditanya mengenai nilai ujian matematika anda. Misalnya pertanyaanya begini "Apakah anda lulus ujian matematika?"

Ya jawabannya jadi tergantung berapa nilai ujian yang anda dapatkan. Selain itu tergantung standar yang dipakai untuk menentukan nilai lulus atau tidaknya berapa?. Karena jawabanya bisa benar atau tidak maka nilai perlu diuji atau diperiksa.

Maka untuk menuliskan logika seperti itu anda dapat menggunakan statemen logika percabangan. Belum lagi yang bertanya misalnya tidak hanya sekali saja atau berulang-ulang. Misalnya seperti contoh diatas yang ditanya tentang kelulusan ujian matematika adalah murid satu kelas. Maka program anda mesti dipersiapkan untuk mengatasi masalah perulangan seperti itu.

Setiap bahasa pemrograman pada umumnya telah memiliki cara untuk menerapkan operasi percabangan dan perulangan. Sebagaimana bahasa pemrograman yang lain, maka Javascript juga memiliki fitur ini.

Percabangan dan Perulangan Javascript


Operasi percabangan

Dalam sebuah game atau juga aplikasi seringkali karakter menemui kondisi harus memilih (conditional). Misalnya memilih tindakan melompat atau merunduk, bergerak ke kanan atau kekiri, dapat poin atau dikurangi  dan banyak lagi macamnya. 

Situasi pilihan ini dalam pemrograman ditulis sebagai struktur percabangan. Didalamnya terdapat pengujian untuk mengambil keputusan agar baris instruksi dikerjakan atau tidak.

Pada Javascript juga disediakan statemen kondisional:

if 

Untuk menguji apakah kondisi sesuai untuk menjalankan perintah instruksi. 

Syntax:

if (kondisi){

// rangkaian kode yang akan dijalankan bila kondisi bernilai benar atau true

}


Seperti contoh diatas pertanyaan yang semula: "Apakah anda lulus ujian matematika?"

Kita ubah pertanyaanya dulu untuk mengetahui berapa nilai yang anda dapatkan dan apakah sudah memenuhi standar lulus misalnya standar kelulusan nilainya 50 maka pernyataanya menjadi:

a. Bila nilai kurang dari 50  maka anda tidak lulus

Sehingga saat ditulis di kode pemrograman menjadi

Contoh:

if (nilai < 50){

status = "tidak lulus";

}

atau bisa juga menjadi:

b. Bila nilai lebih dari 50 maka anda lulus

Contoh:

if (nilai > 50){

status = "lulus";

}

Silahkan pilih mana yang lebih sesuai untuk kebutuhan anda, saat ini kedua pernyataan diatas sama benarnya. Mungkin anda akan bingung kok memilih menggunakan salah satu pengujian? Harusnya kan langsung dapat diuji dengan pernyataan bila nilai kurang dari 50 maka tidak lulus selain itu maka  lulus. Untuk dapat menggunakan pengujian selain itu maka anda perlu menggunakan else seperti dibawah ini.


else 

Untuk menjalankan instruksi bila pengujian pada if diatas bernilai salah atau false maka akan dilanjutkan selain yang diuji. 

syntax:

if(kondisi){

// rangkaian instruksi yang dijalankan bila kondisi bernilai benar atau true

}else{

// rangkaian instruksi yang dijalankan bila kondisi bernilai salah atau false

}

contoh:

if(nilai < 50){

status = "tidak lulus";

}else{

status = "lulus";

}

Pengujian kondisi diatas sepertinya sudah benar sebab yang nilainya kurang dari 50 maka tidak lulus, sedangkan selain itu baik yang nilainya lebih dari 50 dan yang nilainya persis 50 tepat gak ada koma-komanya juga ikut lulus. 

Masalahnya bagaimana bila yang nilainya tepat 50 diharuskan ujian perbaikan, maka penulisan logika kode programnya harus diubah lagi dengan menggunakan else if seperti dibawah ini.


else if 

untuk menguji kondisi baru selain kondisi pada pengujian if, berlaku bila kondisi dalam if bernilai salah atau false

Syntax

if(kondisi1){

// instruksi yang dijalankan bila kondisi bernilai benar atau true

}else if (kondisi2){

// rangkaian instruksi yang dijalankan bila kondisi1 bernilai salah dan kondisi2 bernilai benar atau true

}else{

// rangkaian instruksi yang dijalankan bila konsisi1 dan kondisi2 bernilai salah 

}

Contoh:

if(nilai < 50){ // bila nilainya kurang dari 50

status = "tidak lulus";

}else if(nilai > 50){ // bila nilainya lebih dari 50

status = "lulus";

}else{ //bila nilainya persis sama dengan 50

status = "ujian perbaikan";

}


Selain cara menggunakan if Javascript juga menyediakan perintah switch. Saya tidak membahas switch sebab selain manfaatnya sama saja dengan if, saya juga jarang menggunakan switch.


Operasi Perulangan 

Misalnya yang diuji lulus atau tidak seperti contoh percabangan diatas adalah siswa yang berjumlah 30 orang. Maka kalau menulis kode program satu persatu proses percabangan untuk masing-masing siswa tentu pekerjaan anda sebagai programmer bakal membosankan. Maka solusinya menggunakan perulangan  atau loops.

Dalam bahasa pemrograman biasanya juga tersedia fitur perulangan atau biasa disebut Loops. Manfaat fitur perulangan adalah memudahkan anda untuk mengulangi statemen atau kode yang sama selama kondisinya terpenuhi.

Sebenarnya ada beberapa cara untuk melakukan proses perulangan di javascript. Pada artikel ini saya menggunakan for saja. Manfaat satu sama lain sebenarnya sama yaitu memproses perulangan, yang beda adalah cara menggunakannya dan syntaxnya.


Selain perintah for ada perintah perulangan lain di Javascript yaitu:

  • for /in
  • for /of
  • while
  • do /while


Langsung saja syntaxnya

for (statemen1; statemen2; statemen3){

// instruksi yang akan diulang-ulang

}

Keterangan:

statemen1 = merupakan nilai awal sebelum pengujian

statemen2 = kondisi pengujian bila bernilai benar maka instruksi yang diulang akan dijalankan

statemen3 = perubahan yang terjadi pada nilai setelah kode instruksi dijalankan


Contoh:

for(siswa = 30; siswa > 0; siswa--){

tampil += "Ini siswa ke-"+siswa+"<br>";

}


Bila diterapkan untuk contoh kasus diatas yang berjumlah siswa 30 maka kode nya menjadi seperti berikut ini.

Contoh:

for(siswa = 30; siswa > 0; siswa--){

if(nilai < 50){

status = "tidak lulus";

}else if(nilai > 50){

status = "lulus";

}else{

status = "ujian perbaikan";

}

}


Demikian tulisan kali ini, Semoga penjelasan diatas bermanfaat

Cara Mudah Memahami Array dan Object Javascript

Dalam artikel kali ini kita akan mempelajari Array dan Object. Array ibarat sebuah kereta khusus yang tiap-tiap gerbong hanya dapat menampung isi dengan tipe data yang sama dengan gerbong lainnya. Sedangkan object dapat diibaratkan sebuah kereta yang tiap gerbong dapat berisi tipe yang berbeda. Bahkan uniknya dalam sebuah gerbong object dapat diisi rangkaian gerbong yang lain.

Sebenarnya penjelasannya bisa panjang dan lebar, tetapi untuk pembukaan sampai disini dulu. Penjelasan selanjutnya dapat anda pelajari pada poin-poin dibawah ini. Semoga penjelasan saya dapat bermanfaat bagi anda, langsung saja yuk kita pelajari Array dan Object. 

belajar array dan object javascript


Array JavaScript

Array adalah variabel yang dapat menampung lebih dari satu nilai dalam satu waktu. Array merupakan solusi terbaik ketika ada kasus yang membutuhkan banyak penampung. Masing-masing penampung nilai array disebut dengan elemen array.

Contoh:

// berikut ini adalah variabel yang masing-masing hanya dapat menampung sebuah isi.

var nama1 = “budi”;

Var nama2 = “joko”;

Var nama3 = “susi”;

Bila anda melihat contoh diatas, mungkin tidak masalah menggunakan variabel untuk menampung masing-masing nama. Tetapi akan menjadi terasa bermasalah bila data sudah banyak, misalkan sejumlah 300 atau 7000? Belum lagi bila anda diminta mengurutkan data dari a sampai z atau dari data terkecil terbesar dan lain sebagainya.

Maka solusi terbaik adalah menggunakan array.


Cara Membuat Array di Javascript

1. Cara Literal

Menggunakan array literal adalah cara paling mudah, Aturan penulisan (sytax) sebagai berikut:

Var array_name = [item1,item2,..];

Contoh:

Var nama = [“budi”,”joko”,”susi”,…];


Spasi dan line breaks atau enter tidak menjadi masalah. Berikut ini contoh deklarasi array dalam banyak baris.

Var nama = [

“budi”,

”joko”,

”susi”

];


2. Cara Penugasan

Anda juga bisa membuat array JavaScript dengan cara berikut:

Var nama = new Array(“budi”,”joko”,”susi”);

Bentuk berbeda kedua cara diatas menghasilkan array yang sama. Agar simple, mudah dibaca dan eksekusi yang cepat anda disarankan untuk menggunakan cara literal.


Mengakses Elemen Array

Untuk mendapatkan nilai array atau mengakses array memerlukan referensi berupa angka index. Masing-masing elemen array memiliki index yang selalu dimulai dengan angka 0. Index 0 akan menunjuk pada isi array yang pertama.  Angka index diapit dengan tanda kurung siku “[]”. 

var namasiswa = nama[0];

Contoh:

Var nama = new Array(“budi”,”joko”,”susi”);

var namasiswa = nama[0];  // Ini adalah cara mengakses nilai “budi”

console.log(namasiswa);


Mengubah Isi Elemen Array

Isi elemen array dapat diubah dengan penugasan nilai.

Contoh

Nama[0] = “wati”;


Mengakses seluruh Isi Array

Untuk mengakses semua elemen dalam array maka bisa dilakukan dengan memanggil nama array.

Var nama = new Array(“budi”,”joko”,”susi”);

console.log(nama);


Mengurutkan Array

Untuk mengurutkan array javascript memiliki fitur khusus yaitu berupa fungsi dengan nama sort. Perlu diketahui bahwa fungsi sort pada Javascript akan efektif untuk diterapkan pada array yang berisi data string.

Contoh 1:

var fruits = ["pisang", "rambutan", "apel", "mangga","jeruk"];

fruits.sort();

hasilnya:

["apel", "jeruk", "mangga", "pisang", "rambutan"]


Tetapi bila diterapkan pada data berupa angka, maka bisa salah hasilnya. 

Contoh 2:

var points = [40, 100, 1, 5, 25, 10];

points.sort();

hasilnya:

[1, 10, 100, 25, 40, 5]


Coba perhatikan! urutan nilainya jadi tidak benar bukan, Tapi jangan pergi dulu sebab ada solusinya. Solusinya adalah dengan menambahkan fungsi perbandingan. Apa itu fungsi perbandingan?


Fungsi Perbandingan

Tujuan dari fungsi perbandingan adalah untuk menentukan urutan alternatif. Fungsi bandingkan harus mengembalikan nilai negatif, nol, atau positif, bergantung pada argumen:

fungsi (a, b) {return a - b}

Saat fungsi sort () membandingkan dua nilai, fungsi tersebut mengirimkan nilai ke fungsi bandingkan, dan mengurutkan nilai sesuai dengan nilai yang dikembalikan (negatif, nol, positif).


Jika hasilnya negatif a disortir sebelum b.

Jika hasilnya positif b disortir sebelum a.

Jika hasilnya 0, tidak ada perubahan yang dilakukan dengan urutan kedua nilai tersebut.


Jadi penerapannya terhadap data array berupa angka diatas adalah seperti berikut:

Contoh 3:

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

hasilnya:

[1, 5, 10, 25, 40, 100]


Object JavaScript

Anda sudah mempelajari bahwa variabel adalah sebuah tempat untuk menampung nilai data. Sedangkan array adalah sebuah tempat untuk menampung banyak nilai data yang bertipe sama. Kali ini kita akan mengenal Object yang dapat menampung banyak nilai dengan banyak tipe. 

Jadi anda dapat menampung nama dan nilai datanya masing masing dengan object. Perhatikan perbedaan tersebut pada contoh berikut:

Contoh:

Var nama= “budi”;                 //variable satu 

Var namapegawai = new Array(“budi”,”joko”,”susi”); //array

var datapegawai = {nama:”Budi”,usia:”17”,jeniskelamin:”pria”}; //object


Membuat Object (Object Definition)

Sebagaimana membuat array, anda bisa membuat object secara literal. 

Contoh:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Spasi dan line break tidak penting, Objek dapat dibuat menggunakan banyak baris.

var person = {

  firstName: "John",

  lastName: "Doe",

  age: 50,

  eyeColor: "blue"

};

Object Properties

Bila dalam array ada index, pada object ada properties. Properties akan memudahkan anda untuk menandai nilai yang anda butuhkan. Pasangan antara nama:nilai dalam JavaScript disebut dengan properties. 

Contoh:

Nama Properti

Nilai Properti

Nama

Budi

Gelar

Drs

Usia

17

Jeniskelamin

Pria


Mengakses Properti Object

Anda dapat mengakses properti object JavaScript dengan dua cara:

NamaObject.namaproperti

Atau

NamaObject[“namaproperti”]

Contoh:

Siswa.nama;

Atau

Siswa[“nama”];


Object Berisi Method

Object benar-benar keren, anda tidak hanya dapat mengisinya dengan nilai bertipe data primitif, anda bisa mengisinya dengan array bahkan anda juga bisa mengisi method kedalam Object. Method adalah aksi yang bisa dijalankan pada object. Method disimpan dalam object dalam bentuk definisi fungsi.

Nama Properti

Nilai Properti

Nama

Budi

Gelar

Drs

Usia

17

Jeniskelamin

Pria

penulisan

Function(){retrun this.nama+“ “+this.gelar


Sehingga menjadi seperti berikut, contoh:

Var pegawai = {

Nama : “Budi”,

Gelar : “Drs”,

Usia : “17”,

Jeniskelamin : “Pria”,

Penulisan : function(){

Return this.Gelar +”. “+this.Nama;

}

Kata Kunci This

Pada definisi fungsi, this menggantikan object pemilik fungsi. Pada contoh diatas, this menggantikan objek pegawai yang memiliki properti fungsi penulisan. Dengan kata lain maka nama dan gelar telah menjadi property dari object this.


Mengakses Methode pada Object

Anda apat mengakses method dengan syntax berikut:

Namaobject.namamethod()

Contoh:

Namagelar = pegawai.penulisan();


Bila anda mengakses method tanpa menggunakan tanda kurung buka dan kurung tutup (), maka akan mengembalikan hasil definisi fungsi.

Contoh

Namagelar = pegawai.penulisan;


Aturan Penulisan Object

Jangan mendeklarasikan string, number dan boolean sebagai objek. Bila anda melanggar aturan ini maka kode JavaScript akan menjadi rumit dan eksekusinya menjadi lambat. Contohnya seperti berikut:

var x = new String();        // Declares x as a String object

var y = new Number();        // Declares y as a Number object

var z = new Boolean();       // Declares z as a Boolean object

Ketika variabel JavaScript dideklarasikan dengan kata kunci new, maka variabel tersebut berubah menjadi objek. Mendeklarasikan tipe data diatas memang bisa dilakukan tetapi sebaiknya dihindari sebab penggunaan variabel biasa bahkan lebih baik performanya dibandingkan menjadikan tipe data sebagai objek.

Object pada Javascript merupakan dasar dari format tipe pertukaran data JSON (Javascript Object Notation) yang banyak digunakan saat ini. Dengan JSON maka pertukaran data  antar aplikasi maupun antar server dapat dengan mudah dilakukan. 

Karena Object adalah dasar dari JSON, maka ada banyak kemiripan antara object dengan JSON tapi keduanya tidak sama. 

Demikian tulisan kali ini, semoga bermanfaat.

Cara Asik Belajar Konsep Pemrograman Javascript

Saya mulai mengenal Javascript yaitu pada saat saya belajar desain website. Kemudian karena kebutuhan lebih lanjut saya mulai belajar pemrograman website. Saya mulai suka pemrograman web sebab hanya dengan aplikasi notepad bawaan windows saja sudah bisa dimanfaatkan untuk beragam karya sesuai ide dan kreatifitas.

Malah sekarang lebih mudah lagi, sebab Javascript sekarang malah langsung bisa ditulis dan dijalankan lewat browser. Jadi bila anda ingin belajar lebih mudah, maka anda dapat memanfaatkan fitur console di browser seperti yang saya tulis di artikel  lainnya.

Cara belajar javascript langsung di browser sebenarnya untuk mempercepat proses, anda juga bisa melakukan copy paste code yang ada dalam blog ini atau dari berbagai website tutorial javascript lain ke console browser anda. Tetapi agar dapat melatih kemampuan menulis kode pemrograman, maka alangkah baiknya bila anda mengetik kode tersebut.

Belajar Konsep Javascript



Kemampuan javascript yang sekarang berbeda dengan javascript saat saya kenal waktu dulu belajar. Saat ini javascript juga bisa menangani data bahkan dapat dimanfaatkan menjadi aplikasi mobile dan game. 

Untuk sampai bisa membuat aplikasi mobile dan game saya sarankan untuk belajar setahap demi setahap. Walaupun tetap harus belajar dengan sabar, tapi selalu ada cara mudah agar anda bisa memanfaatkan Javascript. Misalnya dimulai dari memami perbedaan konsep dan persamaan konsep antar bahasa pemrograman berikut.

Memahami Perbedaan Konsep Bahasa Pemrograman

Sebagaimana belajar bahasa pemrograman yang lain anda perlu memahami cara penulisan bahasa pemrograman javascript. Anda perlu menyesuaikan penulisan 

  1. Statement
  2. Syntax
  3. Nilai
  4. Operator dan 
  5. Identifier 

Langsung saja kita mulai dengan belajar memahami statment seperti keterangan berikut:

Statement Javascript

Setiap program Javascript terdiri dari kumpulan pernyataan atau statement. Statemen dalam javascript terdiri dari beberapa macam bagian antara lain yaitu:

Nilai atau Values, Operators, Expressions, Keywords, and  Komentar atau Comments.


Setiap statemen di Javascript dipisahkan dengan tanda titik koma. contohnya adalah seperti berikut:

var a, b, c;     // Declare 3 variables

a = 5;           // Assign the value 5 to a

b = 6;           // Assign the value 6 to b

c = a + b;       // Assign the sum of a and b to c

bisa juga ditulis seperti berikut:

a = 5; b = 6; c = a + b;


Syntax Javascript

adalah kumpulan dari aturan yang kita buat agar program berjalan sesuai yang kita harapkan.

var x, y, z;       // Declare Variables

x = 5; y = 6;      // Assign Values

z = x + y;         // Compute Values


Nilai Javascript

Ada dua macam nilai dalam javascript yaitu:

  • Nilai tetap disebut fixed values,
  • Nilai yang dapat berubah atau disebut variable values.

contoh nilai tetap:

9.9 //nilai berupa angka

"Wahyu" // nilai berupa text


Contoh nilai variabel;

var x; // nilai x dapat diubah sesuai kebutuhan

x = 5;

x = 27; 

maka nilai x adalah 27 sebab nilai sebelumnya 5 tertimpa dengan nilai 27.


Operator 

Merupakan simbul untuk memproses nilai. 

Ada dua macam operator, antara lain:

Operator Aritmatic (+, -, *, /) untuk memproses nilai secara aritmatika.

Penugasan atau Assignment operator ( = ) menugaskan atau memberikan nilai pada variabel;

var x, y;

x = 5;

y = 6;


Keyword Javascript

merupakan kata-kata yang sudah tercatat dalam standar javascript. Kata-kata yang tercatat ini tidak boleh digunakan untuk menjadi varibel.

var x,y; // var merupakan kata yang sudah tercatat


Komentar Javascript

adalah simbul untuk menunjukkan bahwa informasi yang ditandai merupakan catatan atau komentar yang tidak akan dibaca oleh program. Cukup sebagai catatan bagi pembuat kode dan programmer lain yang membaca kode.

contoh:

var x=5; 

// nilai x adalah 5 dan 

// tulisan ini adalah catatan saya

bisa juga dengan bentuk multi-line seperti berikut

contoh:

var x=5; 

/* nilai x adalah 5 dan 

tulisan ini adalah catatan saya*/


Identifiers 

Nama yang dibuat untuk variabel, label dan fungsi harus berupa kata yang diawali dengan huruf mulai a sampai dengan z bukan angka,  underscore (_) atau tanda dollar ($). Setiap identifier dianggap case-sensitif artinya huruf besar dan kecil dianggap berbeda. 

contoh:

nama = "joko";

Nama = "susi";

//baik nama dan Nama dianggap berbeda jadi nilainya tidak akan saling menimpa.


Tipe Data

Sebuah variabel JavaScript dapat menampung nilai berupa angka seperti 1000 atau teks seperti “Selamat Datang”. Pada bahasa pemrograman text disebut sebagai string. Javascript bisa memanfaatkan berbagai tipe data seperti angka, string, object dan lain sebagainya. 

Tipe data yang dapat digunakan pada Javascript ada dua macam yakni:

  1. Tipe data seperti bahasa pemrograman lain (primitif) : number, boolean, text
  2. Tipe data : Array, Object

Contoh:

Tipe data primitif

var length = 16;                                                        // Number

var panjang = 1,6;                                                            // Number

var lastName = "Johnson";                                              // String

var pelajaran = ['matematika','fisika','biologi'];                        // Array

var siswa = {firstName:"John", lastName:"Doe"};    // Object


Memahami Kesamaan Konsep Bahasa Pemrograman

Sedangkan bila anda sudah menguasai cara penulisannya maka anda perlu menguasai konsepnya. Dengan menguasai konsep pemrograman, walaupun pindah bahasa pemrograman yang lain maka anda tidak perlu kesulitan lagi. Karena bahasa pemrograman pada dasarnya memiliki kesamaan konsep. Dasar konsep pemrograman yang perlu anda pahami antara lain:

  1. konstanta
  2. variabel
  3. array
  4. object
  5. operasi percabangan
  6. operasi perulangan

Pada artikel ini dibahas sampai nomor 2 saja, untuk nomor 3 dan selanjutnya dibahas di artikel lainnya. Langsung saja kita bahas dari nomor 1.

Konstanta

Konstanta atau const merupakan tempat penampung (variable) yang nilainya tetap sehingga isi dan namanya tidak dapat diganti.

const nama='joko';

nama='susi'; //TypeError: Assignment to constant variable.

const usia=17;

var usia=20 //TypeError: Assignment to constant variable.


Variabel 

Variabel (varible) merupakan tempat penampung sementara di memory, uniknya variabel punya alamat dan ukuran sesuai dengan tipe data. Javascript memiliki variabel yang otomatis dapat dibuat secara global dan digunakan kapan saja. Global artinya dapat digunakan di luar scope atau didalam scope.

Untuk membuat variabel di JavaScript disebut dengan deklarasi sebuah  variabel (Declaring). Anda dapat mendeklarasikan variabel dengan kata kunci var sebelum nama variabel.

Contoh

var nama;

Setelah deklarasi, variabel belum memiliki nilai dan secara default berisi undefined. Untuk mengisi atau menugaskan nilai pada variabel menggunakan tanda sama dengan (=):

nama = “Budi”;

Anda juga bisa bisa langsung mengisi nilai pada variabel pada saat mendeklarasikannya.

Contoh

var nama = “Budi”;

Pada contoh diatas anda membuat sebuah variabel nama dan langsung mengisi nilai “Budi”. Ketika kita menampilkan isi variabel nama kedalam console browser maka hasilnya seperti demikian:

Contoh:

var nama = "Budi";

nama; //isinya adalah Budi


Deklarasi berulang (Redeclare)

Bila anda mendeklarasikan kembali variabel yang sudah pernah dideklarasikan, maka isi variabel tidak akan terhaspus. Contohnya variabel nama diaas akan tetap terisi.

var nama = "Budi";

var nama;

nama; // isinya tetap Budi


Hoisting dalam variabel

Yang spesial di Javascript adalah metode hoisting pada variabel. Anda tidak perlu khawatir bila belum mendefinisikan variabel, sebab walaupun akhirnya anda menulis deklarasi dibagian bawah, anda masih tetap dapat memanfaatkan variabel tersebut.

contoh

usia = 25;

var usia;

usia; // isinya masih 25, sebab terdapat metode hoisting (mengangkat) yang baru didefinisikan


Sebuah Statemen dengan Banyak Variabel

Anda dapat melakukan deklarasi banyak variabel dalam sebuah statemen. Silahkan mengawali statemen dengan kata var dan memisahkan setiap deklarasi variabel dengan tanda koma (comma).

var person = "John Doe", carName = "Volvo", price = 200;

Anda juga bisa memisahkan deklarasi dalam beberapa baris sendiri:

var nama = "Joni Quest",

namaMerek = "Mercy",

price = 200;


Let 

Merupakan tempat penampung yang cara kerjanya hampir sama dengan var, dengan sebuah perbedaan yaitu bila var adalah function scope tapi let adalah block scope.

Kelebihan Let

Let bebas dari deklarasi berulang

Let tidak memperbolehkan nama yang sama untuk deklarasi.

let nama='joko';

let nama='susi'; //SyntaxError:Identifier "nama" has aready been declared


let tidak membolehkan hoisting

Let tidak memperbolehkan pemanggilan nilai yang belum dideklarasikan.

nilai=10

let nilai //referenceError:Cannot access 'nilai' before initialization


Let terpengaruh block scope bukan function scope

Let merupakan block scope jadi anda tidak perlu membuat function seperti pada membuat local variabel. 

Contoh

let b=2

if (true){

  let b=3

}

b // isinya 2

3 Cara Mudah Membuat Scene di Phaser Sesuai Konsep JavaScript

Saat bermain game anda tentu sering menemukan pemandangan yang menarik. Ada tampilan yang menambah  kesan seru, ceria, atau sebaliknya ngeri dan menyeramkan. Pemandangan atau tampilan memang sengaja dibuat agar sesuai dengan tema game. Setiap game digital memiliki tampilan visual yang biasa disebut scene

Secara umum scene juga bisa digambarkan sebagai tempat atau tampilan dalam game. Didalam scene bisa diisi dengan elemen lainnya seperti karakter, object, tombol, animasi dan lain sebagainya. Scene biasa digunakan untuk membedakan tampilan satu dan lainnya saat akan dibuat kode pemrogramannya.

Daftar isi artikel

Sebelum melanjutkan membaca artikel ini, saya menuliskan pemahaman saya tentang:

  1. Memahami Apa itu Scene
  2. Merancang Scene dalam flowchart
  3. Bentuk Metamorfosa Kode Scene di Phaser 2.x

Langsung saja mulai dari nomor satu dari daftar isi diatas.

Membuat Game Scene


Memahami Apa itu Scene Game

Agar lebih mudah memahami maka kita ibaratkan saja scene dengan slide. Anda tentu mengenal Power Point bukan? Iya aplikasi terkenal untuk membuat file presentasi itu.

Bila dianalogikan dengan microsoft power point, scene dalam game sama dengan slide. Anda bisa menambahkan gambar background, mengatur layout, pindah dari slide satu ke slide lainnya melalui waktu yang sudah disetting otomatis ataupun melalui klik pada tombol atau cara lainnya. Begitu juga dengan scene sama persis seperti slide.

Ilustrasi Scene seperti Slide

Scene bisa dimanfaatkan menjadi bermacam-macam tampilan misalnya seperti scene loading, scene menu, scene level-1, scene level-2, scene gameover, scene menang, scene kalah, dan lain-lain. Anda dapat berpindah scene dengan memicu kejadian misalnya status menang, waktu habis, atau menu yang dipilih.

Apa yang terjadi dalam scene harus sesuai dengan informasi dalam Game Design Dokumen yang anda buat sebelumnya.


Merancang Scene dalam Flowchart

Dalam sebuah Game Design dokumen anda dapat menemukan Scene lebih mudah di bagian Flowboard, gabungan dari flowchart dan storyboard. Aturan apa yang terjadi dalam sebuah scene akan dapat dipahami dengan mudah oleh programmer melalui flowchart. 

flowchart game

Pada setiap game engine pembuatan scene pada umumnya hampir sama. Anda diberikan opsi membuat scene dengan layout kosong yang dapat anda isi dengan menambahkan background dan object yang anda butuhkan. Anda hendaknya melakukan setting ukuran panjang lebar atau otomatis menyesuaikan media permainan.

Sedangkan pada game framework seperti Phaser, anda akan menemukan banyak tutorial mengenai scene. Dalam website resmi PhaserJS di http://phaser.io anda akan menemukan berbagai macam contoh cara memanfaatkan Phaser. Salah satu kategori contoh tersebut khusus membahas tentang scene.

Cara Membuat Scene di PhaserJS

Bentuk Metamorfosa Kode Scene

Pada contoh pada website resmi Phaser tersebut pada umumnya menggunakan satu buah scene saja. Disini sebenarnya saya ingin menunjukkan bagaimana mengembangkan scene yang dari satu buah ke scene yang lebih banyak melalui logika pemrograman javascript. Kita mulai dengan scene paling sederhana.

Catatan : Saya menggunakan Phaser versi 2 untuk menulis penjelasan dalam contoh artikel ini.

Pada Phaser versi 2.x.x scene dikenal dengan nama state. Sedangkan pada Phaser versi 3 sudah menggunakan istilah scene. Jadi karena saya menggunakan phaser 2 maka contoh di artikel ini menggunakan istilah state dibagian kodenya.

Scene Sederhana di Phaser Menggunakan Konsep Function

Jenis scene ini paling mudah dibuat karena paling sederhana karena hanya berisi satu scene atau satu tampilan saja. Dalam tutorial penjelasan fitur di website phaser pada umumnya menggunakan jenis scene  ini.

Contoh sebuah  scene yang menampilkan sebuah gambar pesawat

var game = new Phaser.Game(
window.innerWidth
window.innerHeight
Phaser.AUTO
'phaser-game'
preload: preloadcreate: createupdate: updaterender: render });

function preload() {
    game.load.image('ship''assets/images/ship.png');
}
function create(){  
    game.add.sprite(game.world.centerX,game.world.centerY,'ship');  
}
function update(){
}
function render(){
}


Multi Scene dalam Satu File Menggunakan Konsep Object

Kemudian dari sebuah scene ini dapat dikembangkan menjadi banyak scene dalam sebuah game tapi masih dalam satu halaman koding. Jadi yang satu halaman adalah kodingnya tapi scene-nya lebih dari satu. Caranya adalah dengan membuatnya menjadi object Javascript.

Keuntungan Multi Scene dalam Satu File

  1. Game menjadi lebih menarik karena memiliki banyak tampilan yang berbeda
  2. Game menjadi lebih mudah dicustom dibandingkan satu scene
  3. Kecepatan loading lebih baik dibandingkan Multiscene banyak file

Pada contoh berikut ini scene dibuat sebagai level, levelnya ada tiga buah yaitu level1, level2 dan level3. Untuk pindah dari scene satu ke scene lainnya dapat dilakukan dengan klik pada layar.

var inGame = new Phaser.Game(window.innerWidthwindow.innerHeight
Phaser.AUTO'phaser-inGame');

inGame.level1 = {
    preload : function () {
        inGame.load.image('ship''assets/images/ship.png');
        inGame.stage.backgroundColor = "#000";
        var style = { font: "bold 21px Arial"fill: "#fff"boundsAlignH: "center"
boundsAlignV: "middle" };
    
        text = inGame.add.text(00"dunia 1 \n (silahkan di klik mana aja)"style);
        inGame.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        inGame.add.sprite(inGame.world.centerX,inGame.world.centerY,'ship');    
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level2');
    }
}

inGame.level2 = {
    preload : function () {
        inGame.load.image('ship''assets/images/ship.png');
        inGame.stage.backgroundColor = "#f00";
        var style = { font: "bold 21px Arial"fill: "#0ff"boundsAlignH: "center",
 boundsAlignV: "middle" };

        text = inGame.add.text(00"dunia 2 \n (silahkan di klik mana aja)"style);
        inGame.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        inGame.add.sprite(inGame.world.centerX,inGame.world.centerY,'ship');    
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level3');
    }
}
inGame.level3 = {
    preload : function () {
        inGame.load.image('ship''assets/images/ship.png');
        inGame.stage.backgroundColor = "#00f";
        var style = { font: "bold 21px Arial"fill: "#0ff"boundsAlignH: "center"
boundsAlignV: "middle" };

        text = inGame.add.text(00"dunia 3 \n (silahkan di klik mana aja)"style);
        inGame.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        inGame.add.sprite(inGame.world.centerX,inGame.world.centerY,'ship');    
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level1');
    }
}
inGame.state.add('level1',inGame.level1);
inGame.state.add('level2',inGame.level2);
inGame.state.add('level3',inGame.level3);
inGame.state.start('level1');


Multi Scene dengan File Terpisah Masing-masing Scene

Kode dalam satu file dengan banyak scene akan menjadi menyulitkan saat melakukan koding selanjutnya. Apalagi bila game sudah bertambah kompleks maka kode perlu dipilah-pilah berdasarkan tampilan scene. Oleh sebab itu akan lebih mudah bila setiap scene masing-masing dibuat pada file yang berbeda.

Keuntungan Scene pada File Terpisah
Dengan pemilahan setiap scene dalam satu file berbeda maka kelebihannya yaitu:
  1. Memudahkan programmer dalam proses mencari kesalahan atau debuging. 
  2. Kode scene dapat dibongkar pasang dengan game lain yang serupa dengan mudah. Contohnya bagian loader, game over, credit dan lain-lain yang biasanya setiap game buatan suatu developer sama atau mirip.
  3. Selain itu kode proram menjadi lebih mudah dipelihara untuk pengembangan game selanjutnya. Misalnya bila programmer lebih dari satu maka bisa bekerja secara pararel sehingga game dapat lebih cepat diselesaikan.
Kekurangan Scene Terpisah pada File
  1. Karena file didalam game bertambah banyak maka saat loading memerlukan waktu tambahan.
  2. Hasil akhirnya pada game yaitu ukurannya bertambah besar.

Langsung saja diawali dengan file utama yang akan diload pertama kali saat game dimulai. File ini mengenalkan object semua scene dalam game seperti pada contoh ini adalah object level.
File pertama menginisiasi level, diberi nama level.js:
var inGame = inGame || {};//object yang sebagai pengenal agar tiap file terkoneksi
inGame.dolen = new Phaser.Game(
    window.innerWidth,
    window.innerHeight,
    Phaser.CANVAS,
    parent,
    false,
    false);


inGame.dolen.state.add('level3',inGame.level3);
inGame.dolen.state.add('level2',inGame.level2);
inGame.dolen.state.add('level1',inGame.level1);
inGame.dolen.state.start('level1');

File kedua berisi kode level1, diberi nama level1.js:
var inGame = inGame || {};//terhubung dengan object inGame lainnya

inGame.level1 = {
    preload : function () {        
        this.stage.backgroundColor = "#000";
        var style = { font: "bold 21px Arial"fill: "#fff"boundsAlignH: "center"
boundsAlignV: "middle" };
    
        text = this.add.text(00"dunia terpencar 1 \n (silahkan di klik mana aja)",
 style);
        this.input.onTap.add(this.pindah,this);
    },
    create : function (){           
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level2');
    }
}

File ketiga berisi kode level2, diberi nama level2.js:
var inGame = inGame || {};//terhubung dengan object inGame lainnya
inGame.level2 = {
    preload : function () {
        this.load.image('ship''assets/images/ship.png');
        this.stage.backgroundColor = "#f00";
        var style = { font: "bold 21px Arial"fill: "#0ff"boundsAlignH: "center"
boundsAlignV: "middle" };
        text = this.add.text(00"dunia terpencar 2 \n (silahkan di klik mana aja)",
 style);
        this.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        this.add.sprite(this.world.centerX,this.world.centerY,'ship');  
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level3');
    }
}

File keempat berisi kode level3, diberi nama level3.js:
var inGame = inGame || {};//terhubung dengan object inGame lainnya
var kapal;
inGame.level3 = {
    preload : function () {
        this.load.image('ship''assets/images/ship.png');
        this.stage.backgroundColor = "#00f";
        
        this.input.onTap.add(this.pindah,this);
        
    },
    create : function (){   
        this.add.sprite(this.world.centerX,this.world.centerY,'ship');  
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level1');
    }
}

Setiap file harus dipanggil dalam file html utama agar dapat dijalankan. Pada umumnya file html utama itu adalah index.html. Contohnya dengan urutan seperti berikut:
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script src="phaser.2.7.7.min.js"></script>
    </head>
    <body>
        <script src="level3.js"></script>
        <script src="level2.js"></script>        
        <script src="level1.js"></script>
        <script src="level.js"></script>
    </body>
</html>

Kesimpulan:
Cara membuat scene menggunakan Phaser dapat didalam sebuah file, atau bisa juga di sendirikan setiap scene dalam sebuah file masing-masing. Sesuaikan saja dengan kebutuhan anda yang telah dirancang dalam Game Design Document (GDG).

Demikian tulisan kali ini semoga bermanfaat.

5 Alasan Saya Memilih Phaser dalam Membuat Game

Setelah beberapa tahun mencoba berbagai macam game engine ternyata akhirnya hingga saat ini pilihan saya jatuh ke PhaserJS. Saya telah mencoba berbagai game engine seperti Unity, Constract, gameDevelop dan beberapa lainnya akhirnya memilih Phaser. Cocok bagi saya tentu saja belum mesti begitu juga untuk anda. 

Sebenarnya saya mulai tahu Phaser sudah sejak lama yaitu sekitar akhir tahun 2013, bahkan sejak saya masih belajar pemrograman mobile dengan intelXDK. Pada salah satu pilihan Javascript engine di intelXDK ada Phaserjs yang kemudian mulai saya explorasi. Tetapi setelah beberapa minggu ekplorasi itu tidak saya lanjutkan akibat beberapa pekerjaan yang sudah deadline sehingga harus saya prioritaskan.

Karena banyaknya pekerjaan dan padatnya jadwal mengajar, membuat saya dulu juga ingin mencoba alternatif membuat game dengan tanpa harus menulis kode bahasa pemrograman. Oleh sebab itu saya mulai mencoba-coba berbagai engine game dimulai dari constract kemudian lainnya. 

Tetapi setelah game yang saya buat dengan bantuan game engine sudah jadi, ternyata saya tidak puas karena ada batasan yang diterapkan bertentangan dengan keinginan saya. Kemudian saya mulai berpetualang mencoba engine satu dan lainnya, untuk menemukan mana yang dapat membantu saya tanpa harus dibatasi dan mesti tanpa biaya. 


Phaser adalah Framework Game atau Engine Game?

Walaupun di forum-forum masih banyak yang memperselisihkan antara Framework dan Engine. Tetapi saya nyatanya menemukan bila Phaser memang tidak dibungkus dengan tampilan GUI yang memudahkan seseorang membuat game. Phaser memang mengharuskan menulis kode.

Meskipun ada Phaser Editor tetapi itu juga bukan game engine-nya Phaser. Phaser editor merupakan software untuk membantu menulis kode secara khusus untuk membuat game dengan Phaser.

Phaser menyediakan berbagai fungsi yang dapat dimanfaatkan seseorang untuk membuat game dengan menuliskan kode programnya. Maka saya setuju memang  phaser lebih tepat disebut sebagai framework game. 

Kelebihan Phaserjs



Baik engine ataupun framework keduanya memiliki kelebihan dan kelemahan yang saling berkebalikan. Jadi bila pada engine merupakan kelemahan maka diframework merupakan kelebihan. Menurut pendapat peserta forum html5gamedev setelah dikumpulkan disini saya rangkum

Kelebihan Framework Game adalah

  1. Dibuat untuk membuat game dengan menulis kode
  2. Lebih fleksibel dan memberikan kebebasan bagi orang yang membuat game dengan framework itu
  3. Karena berisi kode jadi yang tahu secara lebih dalam adalah yang menulis kode itu sendiri

Kekurangan Framework adalah

Memerlukan waktu belajar (learning curve) yang lebih panjang dibandingkan dengan engine atau singkatnya lebih susah. Ya bisa dimengerti karena menulis bahasa pemrograman itu seperti belajar dan menulis dengan bahasa asing yang bukan sehari hari. Ditambah lagi yang ditulis mesti berdasarkan logika pemrograman.

Padahal sebenarnya kalau tahu triknya mudah juga kok menggunakan framework. Seperti cara belajar JavaScript yang menurut banyak orang susah, tapi kalau tahu cara sederhanya mudah lho, seperti di artikel cara belajar Javascript paling mudah yang jarang diketahui umum.

Saya sebenarnya tidak terlalu bermasalah apakah Phaser merupakan framework ataukah game engine. Saya cuma fokus apakah sarana tersebut dapat membantu saya mewujudkan tujuan saya dengan efektif dan efisien. 

Kelebihan dan Kekurangan Phaser

Maka saya mencoba mengenal Phaser dari kelebihan dan kekurangannya. Berikut ini kelebihan dan kekurangan baik menurut pendapat beberapa pengguna yang telah saya rangkum dan pendapat menurut saya sendiri.

Kelebihan Phaser Menurut Penggunanya

  1. Phaser dirancang dengan struktur yang baik, sehingga memudahkan pemula sekalipun untuk belajar
  2. Phaser dirancang untuk pengembangan game dan menjadi salah satu yang terbaik
  3. Phaser didukung dengan banyak plugin
  4. Phaser mampu berjalan di WebGL dan Canvas sehingga anda dapat memilih sendiri atau membiarkan sistem yang memilihnya untukmu

Kelebihan Phaser Menurut Saya

Bila anda ingin membuat game dengan mudah, maka anda dapat memilih untuk menggunakan salah satu dari game engine yang telah ada. Sedangkan saya sebenarnya ingin bebas tidak diatur-atur untuk menuangkan ide maka saya memilih Phaser dengan alasan:

  1. Dengan Phaser saya bebas mengatur tampilan sesuai yang saya inginkan. Background saya yang berkaitan dengan dunia bahasa pemrograman terutama pemrograman web sering menggelitiki diri saya untuk mengcustomisasi tampilan dengan HTML+CSS. Tentu saja Phaser dapat mengakomodir hal tersebut.
  2. Saya sebenarnya ingin mengatur lebih detil tentang kapan munculnya kejadian bagaimana kejadian itu muncul atau memacu kejadian yang lain. Salah satu kejadian yang dulu mendasari saya menggunakan phaser adalah dalam memunculkan iklan. Beberapa engine ada yang memberikan fasilitas memunculkan iklan, tetapi ada juga yang harus membayar dulu.
  3. Saya menyukai membuat game dengan tanpa biaya. Saat ini banyak Engine yang bebas biaya walaupun dengan batasan aturan tertentu.
  4. Saya ingin membuat game hanya sekali kerja tapi dapat digunakan di desktop, website, maupun mobile. 
  5. Alasan selanjutnya ini sebenarnya adalah karena keterbatasan saya yang memiliki peralatan komputer dengan spesifikasi intel pentium 2 belum core masih 32bit, RAM 2GB. Dengan spesifikasi tersebut saya tertantang untuk tetap dapat membuat game yang menyenangkan. Syukurlah dengan phaser hal itu masih dapat diwujudkan.

Setelah kelebihan Phaser yang menarik untuk digunakan, maka tentu tidak imbang bila tidak dituliskan pula apa saja kekurangan menurut penggunanya dan juga menurut saya sendiri.

Kekurangan Menurut Penggunanya

  1. Ukuran phaser untuk game desktop menjadi besar sebab perlu dibungkus dengan thirdparty misalnya electron atau NWJS yang dulu bernama NodeWebKit.
  2. Untuk membuat game mobile memerlukan bantuan third party seperti cordova.
  3. Pengaturan state terkadang membingungkan untuk pemula


Kekurangan Phaser Menurut Saya

  1. Phaser memiliki versi 2 yang berbeda dengan versi 3. Sehingga bila ingin membuat game dengan versi 3 harus merubah kode lagi.
  2. Phaser harus ngoding, iya karena framework belum ada enginenya maka harus ditulis. Tetapi sisi baiknya jadi lebih cepat paham untuk orang dengan background programmer.
  3. Phaser belum dapat dimanfaatkan untuk game 3D. Mungkin bisa tapi perlu upaya extra yang belum saya ketahui.


Kesimpulan

Phaser merupakan framework yang baik untuk mengembangkan game lintas platform (cross platform). Dengan dukungan komunitas dan berbagai plugin membuat pemula lebih mudah belajar dalam lingkungan yang menyenangkan. 

Saya akhirnya menyadari bahwa berbagai game engine memang memiliki kelebihan dan juga kekurangannya masing-masing. Terus terang saya juga suka Engine dan disini saya tidak mengunggulkan bahwa Phaser adalah yang terbaik. 

Tetapi phaser merupakan Framework yang cocok bagi saya karena dapat saya manfaatkan sesuai dengan keinginan saya saat ini. Jadi tulisan ini memang alasan subjectif saya dan silahkan anda membuat pilihan sendiri.

Apakah suatu saat saya akan berpindah menggunakan Game Engine? Bila memang ide saya dapat diwujudkan dengan game Engine maka kenapa tidak, saya tidak menutup diri untuk menggunakannya kelak.

Demikian tulisan saya kali ini, semoga bermanfaat.