Belajar JavaScript Dasar Lengkap

Object Oriented programming JavaScript

Belajar javascript dasar  lengkap untuk pemula – Pemrograman berorientasi objek (Inggris: object-oriented programming disingkat OOP) merupakan paradigma pemrograman yang berorientasikan kepada objek. Semua data dan fungsi di dalam paradigma ini dibungkus dalam kelas-kelas atau objek-objek. Dalam pemrogramman berorientasi objek tidak terlepas dari tiga komponen utama yaitu Class Object dan Method.

Asalnya JavaScript tidak memiliki konsep class, karena JavaScript bukan Object Oriented Programming(OOP) language tapi Prototype-based language. Namun pada tahun 2015, ES6 memperkenalkan konsep class, yang mirip dengan class pada OOP language meskipun tidak benar-benar mirip.

1. Class Merupakan penggambaran dari sebuah object atau benda,sifat objek, dan juga apa yang bisa dilakukan oleh objek.
2. Objek adalah merupakan suatu bentuk dari class
3. Method adalah tindakan yang bisa dilakukan didalam class

Class

Class adalah ‘cetak biru’ atau ‘blueprint’ dari object. Class digunakan hanya untuk membuat kerangka dasar. Yang akan kita pakai nantinya adalah hasil cetakan dari class, yakni object.

Class adalah prototype, atau blueprint, atau rancangan yang mendefinisikan variable dan method-methode pada seluruh objek tertentu. Class berfungsi untuk menampung isi dari program yang akan di jalankan, di dalamnya berisi atribut / type data dan method untuk menjalankan suatu program.

Class merupakan suatu blueprint atau cetakan untuk menciptakan suatu instant dari object. class juga merupakan grup suatu object dengan kemiripan attributes/properties, behaviour dan relasi ke object lain. Contoh : Class Person, Vehicle, Tree, Fruit dan lain-lain.

class className {
    constructor()

    method1()
    method2()
    ...
}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class</h2>

<p>How to use a JavaScript Class.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script>

</body>
</html>

Object

Objek berfungsi membungkus data dan fungsi bersama menjadi suatu unit dalam sebuah program komputer. Objek merupakan dasar dari modularitas dan struktur dalam sebuah program komputer berorientasi objek.

“Jadi object adalah representasi hasil pemikiran yang diterapkan untuk membuat sebuah program”.

Sebuah mobil memiliki properti seperti berat dan warna, dan metode seperti start dan stop:

<script>

let car = "Fiat";
document.getElementById("demo").innerHTML = car;

</script>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

Method

Method biasa kita kenal sebagai function dan procedure. Dikatakan fungsi bila  method tersebut melakukan suatu proses dan mengembalikan suatu nilai (return  value), dan dikatakan prosedur bila method tersebut hanya melakukan suatu proses dan tidak mengembalikan nilai (void).

Method adalah tindakan yang bisa dilakukan didalam class. Jika menggunakan analogi class laptop kita, maka contoh method adalah: menghidupkan laptop, mematikan laptop, mengganti cover laptop, dan berbagai tindakan lain.

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Method</h2>
<p>Pass a parameter into the "age()" method.</p>
<p id="demo"></p>

<script>
class Car 
{
  constructor(name, year)
 {
    this.name = name;
    this.year = year;
  }
  age(x) 
{
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>
</body>
</html>

<< Part 10

• Abdul Qadir, 2013, From Zero to A Pro Javascript & Jquery, Andi Yogyakarta
• Tutorials point, 2015, JavaScript Language Tutorials Point, E-book,com
• https://www.w3bai.com/id/
• https://www.w3schools.com/