Halo, saya Scarlet. Disini saya mempersembahkan tutorial JavaScript yang dapat membantu Anda-Anda sekalian agar lebih mudah memahami apa itu JavaScript.

Langsung saja.

---

JavaScript, suatu bahasa pemrograman dalam ruang lingkup website. JavaScript bisa dibilang adalah core dari website setelah HTML, karena JavaScript dapat menambahkan fasilitas-fasilitas maupun fitur-fitur pada website. Kalau untuk CSS, itu masih major karena hanya digunakan apabila hendak mendesain atau memperindah tampilan website belaka, dan tidak terlalu perlu apabila sang pembuat website tidak mau mendesain website-nya.

Langsung saja :

Lesson 1 : Introduction

I. All about JavaScript
Seperti apa yang sudah saya jabarkan diatas, JavaScript merupakan suatu bahasa pemrograman dalam ruang lingkup website. Ingat bahwa JavaScript jauh berbeda dari Java. Jadi jangan samakan JavaScript dengan Java -- jangan pernah samakan, lebih tepatnya.

II. Tools

Ada beberapa tools untuk mengeksekusi kode JavaScript, berikut :

I. Web Console

Web Console, sering kita temui apabila menekan menu Inspect Element pada browser. Console tidak hanya berguna untuk menunjukkan warning dan error pada kode JavaScript, tapi juga dapat digunakan untuk mengeksekusi JavaScript. Apabila kalian ingin memastikan guna dari Web Console, kalian dapat mengeklik kanan pada mouse kalian dan mengeklik menu Inspect Element, dan mengeklik menu Console. Dan coba copas kode berikut :

Code:

function helloworld() {
 alert('Hello world! Ini kode pertama yang saya eksekusi di Web Console :D');
}

helloworld();

Kalian pasti akan mendapatkan pop-up bertuliskan 'Hello world! Ini kode pertama yang saya eksekusi di Web Console'. Diatas, kita telah membuat fungsi / function baru dengan nama helloworld yang akan bekerja setiap kali kita menggunakan kode 'helloworld();'. Function seperti kode diatas dinamakan wrapper function. :) tapi ini bukanlah pembahasan utama, kita akan membahasnya di bahasan yang lain.

II. Scratchpad

Scratchpad, suatu extension khusus Mozilla Firefox kalau saya tidak salah. Tool ini dapat meng-render hasil dari kode JavaScript menjadi sebuah komentar. Supaya tidak pusing, mari kita lihat kode berikut :

Code:

/* halo ini adalah komentar */
alert('Hello'); /* ini akan menghasilkan pop up dengan tulisan 'Hello' */

Untuk komentar JavaScript akan dibahas lebih lanjut nanti. Apabila kalian mempunyai Scratchpad, apabila kalian ingin memastikan fungsi Scratchpad, silahkan gunakan kode berikut :

Code:

function someval() {
 var pages = 'Hello!!!';
 console.log(pages);
}

someval();

Kode yang agak berbeda dari kode yang pertama. Disini lagi-lagi kita kembali membuat suatu wrapper function dengan nama someval. 'console.log' merupakan suatu kode yang meng-log sesuatu di Web Console. Semisal 'console.log('yippie');' dan kalian akan mendapat suatu tulisan bertuliskan 'yippie' pada Web Console kalian. Namun bedanya, pada Scratchpad, kalian hanya akan mendapat komentar seperti yang saya contohkan sebelum saya menjelaskan cara penggunaan Scratchpad. Dan kode berikut akan menghasilkan :

Code:

/*
Hello!!!
*/

Jadi, mari kita mulai melompat pada pembahasan serius. Walau masih mendasar.

---

Lesson 2 : Types

I. Tipe-tipe primitif

Tidak usah bingung dengan kata 'primitif', cukup perhatikan penjelasannya. Ada lima macam tipe-tipe primitif bagi JavaScript, berikut :

• Number - 99 / 1000 / 1.8247
  
• Logical (Boolean) - True / False
  
• Strings - "Hey there" atau 'Hey there', semuanya sama saja.
  
• null - 0. Karena JavaScript merupakan suatu bahasa coding 'case-sensitive', maka null jauh berbeda dari Null, NULL, ataupun yang lainnya.
  
• undefined - undefined. Misalnya seperti.. 'var something; console.log(something);' maka akan mengembalikan 'undefined'.
  

II. Konversi tipe data

Oke, karena kemampuan trenslet saya abal (tapi entah kenapa saya ngomongnya lancar lel), maka saya akan menjelaskan ini dengan cara saya sendiri, bukan menurut dokumentasi dari MDN (Mozilla Developer Network), jadi mohon maaf kalau penjelasannya rada gaje. (_ _)

Kamu tidak perlu membuat variabel baru apabila kamu ingin mendeklarasikan value dalam suatu variabel yang sama. Apabila kamu menulis kode berikut :

Code:

var test = 'This is the value';

Kamu tidak perlu susah-susah mengubah value-nya dengan kembali mendeklarasikan test, seperti berikut :

Code:

var test = 'This is the value';
var test = 'Re-declaring the value!'; /* WRONG */

Kamu hanya perlu menghapus kata 'var' dari test karena value dari variabel test sudah menjadi defined, bukan undefined. Jadi, kita sebut redeclaring menjadi re-defining, agar tidak perlu mumet.

Code:

var test = 'This is the value';
test = 'This is the correct way to redefine a value of a variable.'; /* CORRECT */

III. Plus (+)

Tanda plus. Kalian tahu tanda plus? Menandakan sesuatu yang positif, dan lain-lain bukan? Nah, didalam JavaScript, simbol plus (+) digunakan sebagai suatu operator untuk penjumlahan dan juga suatu operator untuk menyambungkan suatu variabel dll pada suatu string. Kalau saya tak salah.

Berikut adalah contohnya :

Code:

var wahaha = 'little star';
var thisisvar = 'Twinkle twinkle ' + wahaha

Satu kesalahan yang dibuat oleh para newbie scripter adalah, 'gimana nih kk? gak ada spasi di antara string & variable, padahal gw liat di script lain ada spasinya, kok script gw gk bisa y kk? sori kk gw... blablabla'

Kesalahannya adalah pada peletakan single-quote. Apabila kamu meletakkannya sebagai berikut :

Code:

var ragecomic = '1CAK, for fun only';
var dialog = 'Situs yang paling direkomendasikan untuk mengakses seputar dunia hiburan yang menggunakan rage comic dalam Bahasa Indonesia adalah' + ragecomic;

Maka akan mem-print 'Situs yang paling direkomendasikan untuk mengakses seputar dunia hiburan yang menggunakan rage comic dalam Bahasa Indonesia adalah1CAK, for fun only'.

Sementara apabila single-quote diletakkan sebagai berikut :

Code:

var ragecomic = '1CAK, for fun only';
var dialog = 'Situs yang paling direkomendasikan untuk mengakses seputar dunia hiburan yang menggunakan rage comic dalam Bahasa Indonesia adalah ' + ragecomic;

Maka akan mem-print 'Situs yang paling direkomendasikan untuk mengakses seputar dunia hiburan yang menggunakan rage comic dalam Bahasa Indonesia adalah 1CAK, for fun only'.

Ingat juga kalau apabila kalian menggunakan kode berikut :

Code:

var wahaha = 'little star';
var thisisvar = 'Twinkle twinkle' + 'wahaha';

Itu akan membaca 'wahaha' sebagai string, bukan sebagai variabel. Jadi, kode diatas akan melempar hasil 'Twinkle twinklewahaha'.

...

IV. Variable

Variabel, sebuah obyek JavaScript (eh obyek atau fungsi ya) yang dapat dibuat dengan simpel, caranya ialah dengan mendeklarasikan variabel baru, yaitu : 'var [name] = [value];'.

Parameters - [name] = nama variabel. Contoh, 'var test'.
                  [value] = value dari variabel. Contoh, 'var test = 'this is test';'.

I. Errors

Ketika kamu sedang mendeklarasikan variabel, mungkin saja ada beberapa syntax error. Dan syntax error tersebut akan dilempar ketika kamu mendeklarasikan variabel dengan cara berikut :

Code:

var test;
alert('Value dari g adalah ' + test); /* Error : "The value of test is not defined" */
alert('Value dari u adalah ' + somevar); /* Error : ReferenceError karena tidak ada variabel bernama somevar */

Kalian juga dapat mengecek apakah suatu variabel memiliki value atau tidak memiliki value dengan menggunakan if statement. Contoh :

Code:

var pacman = ':v';
if(pacman === undefined) {
 console.log('Undefined variable');
}else{
 console.log('Defined variable');
}

Apabila value dari variabel dicek menggunakan boolean (logical) maka akan mengeluarkan hasil 'True' atau 'False'. Berikut adalah contohnya :

Code:

var thisistest = 'testing..';
if(thisistest.length > 0 === true) {
 console.log('Checked with boolean, returns true');
}else{
 console.log('Checked with boolean, returns false');
}

Dimana artinya apabila JavaScript membaca value dari variabel thisistest. Dan if statement diatas menjelaskan bahwa apabila value dari thisistest lebih besar dari 0, maka akan melempar hasil 'Checked with boolean, returns true' dan sebaliknya maka akan melempar hasil 'Checked with boolean, returns false'.

Dan juga, apabila kalian menggunakan variabel dengan obyek berupa nomor, maka akan melempar hasil 'NaN', singkatan dari 'Not a Number'. Semisal apabila kita menjumlahkan variabel sometest yang terdiri dari string dengan angka 2 maka kita akan mendapatkan hasil 'NaN'. Contoh :

Code:

var sometest;
var test = sometest + 2;
console.log(test); /* akan menghasilkan NaN */

var sometest = 'This is a string';
var test = sometest + 2;
console.log(test); /* tetap menghasilkan NaN */

Jadi apabila kalian menggunakan operator Matematika selain pada sesama nomor, maka akan menghasilkan NaN. Lain cerita jika kalian menjumlahkan variabel yang terdiri dari nomor dengan nomor.

Apabila kalian mengevaluasikan 'null' dalam suatu variabel, dalam definisi nomor, null sama dengan 0, dan false dalam definisi boolean. Berikut adalah contohnya :

Code:

var n = null;
console.log(n + 23); /* akan melempar 23 */

V. Variable Scopes
Scope. Sejauh ini saya tak terlalu paham mengenai Variable Scope, lain cerita kalau Function Scope~. Oke, berikut adalah penjelasannya :

Code:

var x = 10;

Kode diatas adalah global variable, dimana kalian dapat mengakses variable tersebut walau hanya digunakan khusus untuk suatu page tertentu. Global variable adalah variabel yang tidak 'terkurung' oleh function apapun, lebih tepatnya berada di luar semua function. Jadi semisal apabila saya membuat suatu variabel khusus untuk digunakan di Portal, namun masih tetap bisa digunakan di tempat-tempat lain, semisal Index, topik, Chatbox, dan sebagainya. Kalian juga dapat mengakses global variable dengan menggunakan window.[nama variabel disini]; karena di setiap webpage, setiap obyek global yang terkandung di dalamnya akan dibaca sebagai 'window'.

Code:

function variaScope(param1, param2) {
 var x = 10;
}

Jangan bingung dengan param1 dan param2. Variable diatas merupakan sebuah private variable, dimana tidak bisa diakses walaupun sudah diakses menggunakan kode variaScope. Silahkan lihat bagaimana saya memanggil functionnya :

Code:

console.log(x); /* akan melempar 'x was not defined' */
variaScope();
console.log(x); /* walaupun variaScope sudah dipanggil, x masih tetap undefined */

Jadi, bagaimana caranya supaya variable x dapat diakses? Gampang. Hapus huruf 'var' dan selesai~ apabila huruf var di dalam function dihapus, maka variable tersebut dinamakan local function.

Code:

console.log(x); /* akan melempar 'x was not defined' */
variaScope();
console.log(x); /* 10 */

Berikut adalah catatan untuk scope-scope dari variable :

• Global Variable : berada di luar segala function
  Perumpamaan untuk global variable adalah orang yang sedang jalan-jalan. Kita dapat menyapanya dengan mudah, dan berbicara dengannya dengan mudah.
  
• Local Variable : berada di dalam function, namun dengan huruf 'var' yang dihapus.
  Perumpamaan untuk local variable adalah orang yang berada di dalam rumah. Kita harus mengetuk pintu terlebih dahulu untuk dapat berbicara dengannya.
  
• Private Variable : berada di dalam function, dengan huruf 'var' yang berada di samping nama variable-nya
  Perumpamaan untuk private variable adalah orang yang berada di dalam rumah namun tidak sedang ingin berbicara, walaupun pintu diketuk sekalipun ia takkan membukakan pintu.
  

VI. Constant

Constant, merupakan suatu variabel yang memiliki value 'read-only', dimana value yang terkandung didalamnya tidak bisa diubah, tidak seperti variabel, dapat diubah.

Code:

const something = 'this is a value';

Dengan mengubah huruf 'var' menjadi 'const', value dari variabel 'something' tidak akan bisa diubah. Walau kalian mengubahnya dengan cara seperti ini :

Code:

something = 'this is a redeclare';

Value dari something TIDAK akan bisa berubah. Eits, jangan pusing dengan kata 'const'. Const sebenarnya sama dengan variabel, tapi dalam versi read-only.  

Kalian tidak dapat membuat konstan dengan nama yang sama dengan suatu variabel maupun suatu function. Semisal :

Code:

function something() {
 var haha = 'rofl';
}

const something = 'lol'; /* error */
const haha = 'lmao'; /* error */

Lesson 3 : Arrays & JSONs

I. Arrays

Arrays merupakan salah satu obyek JavaScript. Arrays adalah suatu list yang dikurung di dalam tanda [ dan diakhiri dengan tanda ]. Array bisa mengandung string dan number, kalau yang saya ketahui sekarang. Kalau variable, dst silahkan bereksperimen sendiri #plak
Array dimulai dari angka 0, kemudian ke 1, 2, 3, dst.

Berikut adalah contoh dari array :

Code:

var array = ['Array 1', 'Array 2', '2345'];

I. Accessing Arrays

Untuk mengakses masuk sebuah array, kamu dapat mencoba melakukan sedikit eksperimen, seperti halnya kode berikut :

Code:

var array = ['Array 1', 'Array 2', 'Array 3'];
console.log(array[0]); /* 'Array 1' */
console.log(array[1]); /* 'Array 2' */
console.log(array[2]); /* 'Array 3' */

II. JSON

JSON, atau JavaScript Object Notation, adalah salah satu obyek JavaScript yang mengandung berbagai macam data yang dimasukkan oleh klien di dalamnya. Dimulai dengan tanda { dan diakhiri dengan tanda }. Apabila digunakan dengan variable, maka diawali dengan tanda ={ dan diakhiri dengan tanda }; . Dan juga jangan lupa gunakan tanda koma bagi data JSON yang belum selesai. Mari kita simak cara penggunaan JSON :

Code:

{
'admins':'Agoess Naruto, Levi Ackerman, Shinobi, Scarlet',
'moderators':'D.E.A.T.H, fafa kuswandana',
'staffrpg':'Levi Ackerman, Karl La Hire, Vampire, Weda Uchiha',
'dischap':'Illumination, d0nc35, Danish D Daniyal, dreamer11',
'designer':'Portgas D. Takiya',
'writers':'Namikaze Jar\'z, Karl La Hire, Neivf, Sthefen_Senju, Uchiha Atsuko, Uchiha Ichimaru, Uchiha Sato, Uchiha Shun, Uzumaki Fukuoka'
}

var abcde = 'xdddddddddddd';
var somedata ={
 'somedata':'some data here',
 'alphabet':abcde
};

Seperti yang kalian lihat di kode diatas, kalian juga dapat memasukkan data JSON berupa variable ke dalam JSON. Ada beberapa mungkin yang bertanya seperti ini : 'kk, gw pengen nyoba nge-print data JSON ke homepage tapi kok gak bisa ya?? selalu nge-print [object Object], gimana ini kk?'

Solusinya adalah, jangan lupa memakai JSON.stringify();.

Code:

var abcde = 'xdddddddddddd';
var somedata ={
 'somedata':'some data here',
 'alphabet':abcde
};

var stringify = JSON.stringify(somedata);
document.body.appendChild(stringify); /* akan mem-print data dari JSON 'somedata' ke homepage */

Lesson 4 : Method, Object, dan Properties

Adalah sebuah kesalahan apabila ada yang menganggap method, object, dan properties itu sama. Terlebih, apabila salah memahaminya, pasti akan langsung di-judge oleh para user JavaScript yang lain. Agar tidak salah paham, sebaiknya saja jelaskan mengenai 3 ini sebelum kalian bisa mulai nge-koding. Bab-nya akan saya jelaskan secara runtut, dimulai dari menjelaskan object, setelah itu properties, dan setelah itu method, karena di dalam JavaScript, object lebih didahulukan daripada property, sementara property lebih didahulukan daripada method, dan method berada di posisi terakhir. Agar makin paham, silahkan baca bab-nya. Berikut :

Object

Apa itu object? Object adalah sebuah object /you dont say/

Code:

var newObject = new Object(); //atau
var newObject2 = {};

Kedua-duanya adalah sebuah object. Jadi, di contoh diatas tertera 2 variabel, yaitu [ic]newObject[/ic] dan [ic]newObject2[/ic]. Walau berbeda huruf dan berbeda semicolon, tapi tetaplah sebuah object.

Property

Apa itu property? Property adalah properti / isi dari sebuah object. Semisal :

Code:

var newObject2 = {
key: value
}; //atau

newObject.key = value;

Ada 2 object diatas yang sudah disediakan di bab Object.
Catatan: apabila kamu ingin membuat sebuah variabel menjadi key dari sebuah object, kamu bisa menggunakan kode ini:

Code:

var variableName;
newObject[variableName] = value;

Method

Apa itu method? Method adalah metode dari sebuah properti. Metode ini berupa function.

Code:

var newObject2 = {
 key: function value() { console.log('test'); }
};

Simpel.

---

Oke, nanti bakal saya update. Semoga bermanfaat.  Ada yang tidak dimengerti? Jangan ragu untuk bertanya.  

Referensi dimiliki oleh MDN. Seluruh konten dimiliki oleh saya (Scarlet).  

---

Gatel nge-koding? Bosen ngeliat basic-basic dari JavaScript? Tenang, saya disini bakal menyediakan dokumentasi dari JavaScript yang bisa digunakan apabila hendak membuat suatu kode JavaScript baru.

Di pelajaran sebelumnya saya sudah mengajarkan basis-basis dari JavaScript, dan kini saya akan mengajarkan metode-metodenya. Apabila masih belum bisa JavaScript saya rekomendasikan membaca guide basic di atas, seperti kata pepatah, 'if you can't walk, then you can't run'.


Array.prototype.push;
Array.prototype.push merupakan salah satu metode JavaScript dalam obyek array. Metode ini dapat memasukkan data array baru ke dalam array yang sudah ada dan mengecek berapa saja obyek array yang ada.

Contoh :

Code:

var admins = ['Levi', 'Shinobi'];
var new = admins.push('Scarlet');
console.log(admins); /* ['Levi', 'Shinobi', 'Scarlet'] */
console.log(new); /* 3 */

Array.isArray;
Array.isArray merupakan salah satu metode JavaScript dalam obyek array. Metode ini akan mengecek apakah data yang dimasukkan oleh klien merupakan array atau bukan, dan akan mengembalikan hasil berupa boolean (true/false)

Contoh :

Code:

var newarray = ['FAN', 'Indofanster'];
Array.isArray(newarray); /* mengembalikan hasil berupa true, karena isi dari variable newarray adalah array */

var newarraymaybe = 'Indofanster';
Array.isArray(newarraymaybe); /* mengembalikan hasil berupa false, karena isi dari variable newarraymaybe adalah  string, bukan array */

Array.prototype.concat;
Array.prototype.concat merupakan salah satu metode JavaScript dalam obyek array. Metode ini akan menggabungkan 2 array, berbeda dengan .push(); yang digunakan untuk menambah obyek array.

Contoh :

Code:

var moderator = ['D.E.A.T.H'];
var moderator2 = ['fafa kuswandana'];

var fusion = moderator.concat(moderator2);
console.log(fusion); /* ['D.E.A.T.H', 'fafa kuswandana'] */

Array.prototype.toString;
Array.prototype.toString merupakan salah satu metode JavaScript dalam obyek array. Metode ini akan mengubah Array menjadi String.

Contoh :

Code:

var teamseven = ['Naruto Uzumaki', 'Sasuke Uchiha', 'Sakura Haruno'];
var toStr = teamseven.toString();
console.log(toStr); /* Naruto Uzumaki, Sasuke Uchiha, Sakura Haruno */

Array.prototype.pop;
Array.prototype.pop merupakan salah satu metode JavaScript dalam obyek array. Metode ini akan menghapus array yang berada di urutan terakhir.

Contoh :

Code:

/* warning : feels detected  */
var feels = ['Hinata', 'Naruto', 'Neji'];
var deathchara = feels.pop();

console.log(feels); /* ['Hinata', 'Naruto']
console.log(deathchara); /* 'Neji' */

Nggak perlu dimasukkan ke dalam variable, gunakan variable kalau perlu.

Array.prototype.unshift;
Array.prototype.unshift merupakan salah satu metode dalam obyek Array. Metode ini akan menambahkan satu atau lebih elemen Array ke awal Array dan menghasilkan jumlah dari Array.

Contoh :

Code:

var array = ['a', 'b'];
array.unshift('Z'); /* mengembalikan 3 */
console.log(array) /* ['Z', 'a', 'b'] */

---

Sip, cuma itu saja dokumentasi yang bisa saya bagikan saat ini, besok akan di-update lagi atau setidaknya beberapa jam lagi, untuk selengkapnya silahkan lihat dokumentasi yang asli : [link]. CMIIW, kalau ada yang pengen nambahin/ngoreksi silahkan post dimari atau edit (biar greget ). Terima kasih.