Jika serius ingin mempelajari JavaScript lebih jauh lagi, bisa lanjut ke library seperti jQuery, framework

seperti AngularJS maupun ReactJS, atau ke server menggunakan Node.js

JavaScript bersifat case sensitif (huruf kecil dan huruf besar dianggap berbeda)

Kelemahan Inline Javascript

* bercampur dengan HTML

* hanya memuat dalam 1 baris, tdk cocok jika kode yang panjang

* kode javascript tsb tidak bisa digunakan ditempat yang lain

Aturan Dasar, Variabel dan Konstanta

1. Statement

2. Case Sensitivity > huruf besar dan huruf kecil dianggap berbeda

3. Whitespace > akan diabaikan

4. Baris Komentar > kode tidak akan di eksekusi

1. VARIABEL DAN KONSTANTA

1. Variabel dalam JavaScript

- membuat variabel dengan "var"

- Typeless Programming Language

variabelnya bisa diisi dengan tipe data apa saja tanpa harus

dideklarasikan terlebih dahulu.

2. Aturan Penamaan Variabel (Identifier)

3. Gaya Penulisan Variabel: CamelCase

4. Membuat Variabel Tanpa Perintah var

kebiasaan yang buruk

 Di dalam JavaScript, sebenarnya kita bisa membuat variabel tanpa

perintah var. contoh angka = 123456; console.log(angka);

5. Mengenal Strict Mode

use strict > akan membuat browser menampilkan error

- Untuk browser belum mendukung ECMAScript 5, string

"use strict"; akan diabaikan.

- tidak digunakan "use strict"; secara global. tempatkan ke dalam

function

6. Membuat Variabel dengan Perintah let

7. Konstanta dalam JavaScript

Variabel yang tidak bisa diubah sepanjang kode program. isi

konstanta tersebut tidak bisa ditukar dengan nilai lain

const

8. Identifier dan Literal

2. TIPE DATA JAVASCRIPT

1. Perbedaan Tipe Data Primitive dan Object

A. Tipe data primitif

sederhana dan hanya terdiri dari 1 nilai. Contoh number string

boolean null undifine symbol

B. Object

Array Date RegExp Map dan WeakMap* Set dan WeakSet*

2. Tipe Data Number

- [suport] Penulisan Scientific Notation > 3e3 = 3 x 103 = 3000

- Bil Desimal 9digit, Biner 2digit, Oktal 8digit, dan Heksades 16digit
 - NaN & Infinity > menampung hasil matematika “tidak umum"

Contoh 9 * "a"; Nan 5 / 0; Infinity

- Kesalahan Pembulatan Tipe Data Number

0.1 + 0.2; hasil JS 0.30000000000000004

JavaScript format angka IEEE-764 double-precision floating-point

3. Tipe Data String

- Escape Character > 'Hari Jum\'at' > dihitung krakter biasa

- Menulis Karakter Unicode

- Template String

var foo = "Indonesia";

var bar = `Selamat Pagi ${foo}`; / = "Selamat Pagi " + foo;

4. Tipe Data Boolean

nilai boolean harus ditulis dalam huruf kecil, tidak boleh

mengandung huruf besar [MAKA ERROR]

5. Tipe Data Null dan Undefined [data yang tidak ada]

6. Operator typeof

Operator typeof digunakan untuk melihat tipe data dari sebuah

variabel. Apakah tipe datanya number, string, boolean, object /.....

7. Tipe Data Array

- Mengakses Element Array

- Mengubah Element Array

- Array 2 Dimensi

3. OPERATOR JAVASCRIPT

1. Operator Aritmatika
 - Operator Aritmatika > % [ sisa bagi ]

2. Operator Increment dan Decrement

3. Operator Perbandingan

- false < true; //true

- Perbedaan antara == dengan ===

Berbeda [==] data sama true [===] data dan tipenya sama true

- Falsy dan Truthy Value

Nilai yang hasil konversinya menjadi false dikenal dengan istilah

falsy value, begitu juga true

Falsy Value = false, null, undifined, Nan, O, '', "" [string kosong]

Truhty Value = true, { object kosong }, [ array kosong ], infinity

4. Operator Logika

- true || true && false;

true || (true && false), [ kedudukan && lebih tinggi ]

- &&[keduanya benar], ||[salah satu], ![kebalikan] !falese //true

- Operasi Logika non Boolean

"Duniailkom" || "JavaScript"; //Duniailkom

"Duniailkom" && "JavaScript"; //JavaScript

true || "JavaScript"; //true

5. Operator String

- Penyambungan String atau Penambahan Angka

- '10' + 10 + 9; //10109

6. Operator Bitwise

operator khusus untuk menangani operasi logika bilangan biner

7. Operator Assignment
8. Operator Spread

- fungsinya > menggabungkan array

- menggunakan ... [titik 3 kali]

9. Urutan Operator dalam JavaScript

PENTING

3. STRUKTUR LOGIKA DAN PERULANGAN

1. IF

2. IF ELSE

3. IF ELSE IF

4. Nested IF ELSE

5. SWITCH

kurang lebih mirip seperti if else, tapi lebih efisien jika kondisi yang

diperiksa ada banyak

6. Operator Conditional

result = (condition) ? statement_true : statement_false

7. FOR

for (start; condition; increment) {

statement;

var i = 1;

for (; i <= 10;) {

console.log("Hello JavaScript " + i);

i++;

8. Perulangan Bersarang (Nested Loop)

9. Infinity Loop

- i > 10 akan selalu benar

- for (var i = 20; i > 10; i++)

- nilai i tidak akan pernah dibawah 10 + increment

10. Perintah Break dan Continue

Perintah break dan continue digunakan untuk menghentikan sebuah

perulangan sebelum waktunya

11. WHILE

12. DO WHILE

13. Menampilkan Element Array Dengan Perulangan

- .length

14. FOR OF

penulisannya sangat singkat dan kita tidak perlu mencari tau berapa

jumlah element array

- var siswa = ["Andri", "Joko", "Sukma", "Rina", "Sari"];

- for (var i of siswa)

4. Function

1. Pengertian

Function diperlukan untuk memecah alur program yang besar

menjadi beberapa program kecil agar mudah di kelola.

- Format function

function function_name (argument1, argument2,...) {

statement;

statement;
 return value;

2. Membuat dan Memanggil Function

3. Mengembalikan Nilai Function

- return > mengembalikan suatu nilai ketika fungsi ini dipanggil.

- efeknya akan langsung menghentikan function tersebut

- hanya boleh mengembalikan 1 nilai saja

4. Argument Function

Argumen vs Parameter

5. Default Argument

mempersiapkan nilai awal untuk argument. Dengan tujuan, jika

argument ini tidak diinput, nilai awal akan digunakan.

jika sebuah argument tidak diisi, nilai undefined

6. Arguments Object

array khusus bernama arguments.

7. Spread Operator untuk Argument

function angka(a, b, ...sisa){

console.log(a); // 4

console.log(b); // 8

console.log(sisa); // Array [ 3, 7 ]

angka(4, 8, 3, 7);

8. Variable Scope

Variable Scope >sejauh mana sebuah variabel masih dapat diakses

global variable >bisa diakses darimana saja

 local variable > bisa diakses di dalam ruang lingkup terbatas

function foo(){

a = 21;

var a = 5;

console.log(a); // 21

* variabel di defenisikan tanpa var. Ketika ditulis seperti ini, variabel a

akan berefek ke global scope

9. Perbedaan Cara Membuat Variabel var vs let

- Perbedaan antara var dan let ada di variable scope

- let memiliki scope yang lebih kecil, yakni dibatasi oleh tanda kurung

kurawal yang biasanya digunakan untuk block kode program

- kelebihannya terhindar dari masalah bentrok antar variabel

11. Function: First-class Citizen

function bisa disimpan ke dalam variabel

var hitung = function rata2(a,b) { return (a + b)/2; };

var hitung = function(a,b) { return (a + b)/2; };

- rata2 boleh dihapus tidak akan berpengaruh

- dikenal Anonymous Functions

console.log(hitung(4,8)); // 6

console.log(rata2(4,8)); // ReferenceError: rata2 is not defined

12. Arrow Notation

function () { return "Mesin Dihidupkan"; };

var totalJuga = (a,b,c) => { return a+b+c; };

4. JAVASCRIPT OBJECT

1. Apa itu Object?

2. Format Dasar Object

- { } kurung kurawal kosong sudah membuat obek

membuat object, tidak perlu membuat class terlebih dahulu.

property dan method

3. Object Property

- Akses property dengan dot [ . ] contoh > mahasiswa.nama

Tdk dapat akses property number

- menggunakan bracket notation contoh > mahasiswa["nama"]

KELEBIHAN dapat mengakses property yang namanya tdk umum

seperti mengandung spasi / karakter / angka

4. Menambah Object Property

sama seperti array

5. Mengubah Nilai Object Property

dapat dengan cara menimpa property

6. Object Method

pergi: function (tempat) { return "Pergi ke "+ tempat; }

console.log( mobil.pergi("Medan") );

console.log( mobil["pergi"]("Ambon") );

7. Mengubah Object Method

8. Nested Object

9. Object Reference

10. Perulangan FOR IN

- perulangan FOR IN Array

5. OOP JAVASCRIPT

1. Pengertian Class dan Object

2. Membuat Class dan Object

- kebiasaan programmer membuat nama class dgn CamelCase

- operator instanceof untuk mengecek apakah suatu object

merupakan instance dari sebuah class.

- Class berperan wadah menyediakan semua yang dibutuhkan object.

3. Class Sebagai “Object Induk”

untuk apa kita repot-repot membuat class? Kenapa tidak langsung

membuat object saja?

4. Class Property

menambahkan property ke dalam Class, harus menggunakan method

khusus bernama constructor() - > otomatis akan berjalan saat

proses pembuatan object (saat proses instantiation).

- menulis property untuk class menggunakan objek khusus this.

5. Pengertian This

Argument Constructor

menambahkan nilai pada metod khusus constructor

6. Class Method

class Mobil {

constructor(merk, tipe, harga) {

this.merk = merk;

hidupkan(){
 return "Mesin "+this.merk+" Dihidupkan";

7. Javascript: Prototype Based Language

private, protected dan public juga tidak ada di JavaScript.

8. Membuat Object dengan Constructor Functions

- membuat “class” tanpa keyword class

- constructor functions > function khusus digunakan membuat

“kelompok object”, sebutan class OOP biasa.

9. Membuat Class Method Dengan Object Prototype

prototype > property dan method bisa ditambahkan kapan saja

Mobil.prototype.hidupkan = function(){

return "Mesin Dihidupkan"; };

class mobil dengan nama function hidupkan

10. Object Bawaan JavaScript

Jika menggunakan object constructor, kita bisa mengakses puluhan

method yang tersedia untukobject tersebut

Contoh

var bar = new String("Belajar JavaScript");

console.log( bar.toUpperCase() ); // BELAJAR JAVASCRIPT

console.log( bar.substr(3,9) ); // ajar Java

6. NUMBER OBJECT

1*

Number.MAX_VALUE
 Number.MIN_VALUE

Number.isInteger()

Number.parseInt()

Math.abs()

String.prototype.length

Number.prototype.toFixed()

Number.prototype.toString()

2. Number Object Property

Number.EPSILON

Number.MAX_SAFE_INTEGER

Number.MAX_VALUE

Number.MIN_SAFE_INTEGER

Number.MIN_VALUE

Number.NaN

Number.NEGATIVE_INFINITY

Number.POSITIVE_INFINITY

3. Number Object Method

Number.isNaN()

Number.isFinite()

Number.isInteger()

Number.isSafeInteger()

Number.parseFloat()

Number.parseInt()

4. Number Instance Method

Number.prototype.toExponential()
 Number.prototype.toFixed()

Number.prototype.toPrecision()

Number.prototype.toString()

Number.prototype.toLocaleString()

Number.prototype.valueOf()

7. MATH OBJECT

1. Math Object Property

2. Math Object Method

hal 244 [ terdapat 35 method ]

3. Method Math.ceil(x), Math.floor(x), dan Math.round(x)

- Math.ceil() pembulatan ke atas

- Math.floor() pembulatan ke bawah

- Math.round() pembulatan ke bawah kurang dari 0,5 dan pembulatan

ke atas jika lebih dari 0,5 (termasuk angka 0.5).

4. Method Math.random()

Angka acak yang dihasilkan berada dalam rentang 0 - 1, tapi tidak

termasuk angka 1 itu sendiri

Contoh 0.7656339439523763

5. Method Math.max() dan Math.min()

var foo = [45,90,12,55,19,75];

console.log( Math.max(...foo) ); // 90

6. Method Math.abs()

membuat angka negatif jadi positif

8. STRING OBJECT

1. String Object Method

String.fromCharCode()

String.fromCodePoint()

String.raw()

2. Method String.prototype.toLowerCase() dan

String.prototype.toUpperCase()

3. Method String.prototype.charAt()

menampilkan karakter di posisi tertentu

- berlaku dalam array juga

4. Method String.prototype.charCodeAt() dan

String.prototype.codePointAt()

Menampilkan kode unicode sebuah karakter

5. String.prototype.substr()

- mengambil sebagian karakter string

- Method ini bisa diisi dengan 2 argumen

6. String.prototype.split()

var bar = "satu,dua,tiga,empat,lima";

console.log ( bar.split(',') );

// Array [ "satu", "dua", "tiga", "empat", "lima" ]

7. Method String.prototype.trim()

digunakan untuk menghapus karakter whitespace di awal dan akhir

string. Contoh username.trim()

8. concat()

pengambungan string
9. includes()

mengecek apakah sebuah string ada di dalam string asal atau tidak

10. repeat()

repeat(5)

mengulang string sebanyak 5 kali

11. replace()

- proses pergantian string dengan string lain

- foo.replace(/JavaScript/g,"PHP")

* menghapus seluruh string javascript

9. REGULAR EXPRESSION OBJECT

1. Cara Membuat RegExp Object

- Fungsinya memeriksa sebuah inputan sudah sesuai atau belum

(test), fitur pencarian (search), penggantian string (replace).

2. RegExp Object Method

- Method RegExp.prototype.test() RegExp.prototype.exec()

10. ARRAY OBJECT

1. *

- Array Literal new Array(); Array Kurung Siku []

- Method Array.isArray() = ngecek dia array kalo iya TRUE

- Array.prototype.length = berisi informasi mengenai jumlah

element dari sebuah array

2. Array Instance Method

- revere() = membalikan urutan

- concat() = menggabungkan array

- slice() = mengambil / men-copy sebagian element array

- splice() = menambah atau mengurangi element array

- join() = menggabungkan element array menjadi string

- push + pop = menambah dan menghapus element di akhir

- unshift + shift = menambah dan menghapus element di awal

- includes() = mengecek apakah sebuah nilai ada di dalam array. Jika

ada TRUE

- indexOf() = mencari sebuah element di dalam array

-** Method forEach() berfungsi menjalankan sebuah function untuk

setiap element array.

* terdapat 3 argumen foreach

* Function bisa dipisah

- forEach(function(element, index, array) { } );

Argumen pertama berupa nilai element yang sedang di proses

(atau value array).

Argumen kedua berupa index element yang sedang di proses

(atau key array).

Argumen ketiga berisi seluruh array asal.

-** map() mirip seperti forEach(), Bedanya, method map() akan

mengembalikan sebuah array baru sebagai hasil callback.

mengembalikan = return

var foo = [8,4,7,9,3,2];

var bar = foo.map(

function (element, index, array) { return element * 2; }

 );

console.log ( bar );

-** filter() mirip map() bedanya hasil pemanggilan callback hanya

bisa true atau false. Jika hasilnya true, pertahankan element array.

Jika hasilnya false, hapus element tersebut.

- every() cek isi setiap/semua element array. array dengan memenuhi

SYARAT jika lolos hasil TRUE

- some() mirip dengan every hanya salah sati isi array memenuhi

syarat hasil TRUE

- Method Array.prototype.find() dan Array.prototype.findIndex()

- Method Array.prototype.reduce() dan Array.prototype.reduceRight()

- sort()

Bagaimana jika angka ?? 319

11. DATE OBJECT

merupakan object khusus di dalam JavaScript untuk memproses

tanggal (dan waktu)

1. *

- new Date();

- getDay

- getMonth mengembalikan digit bulan dengan nilai 0-11

- getYears

- getMinutes

- gethours

- getSeconds
 - menghitung selisih tanggal

membuat var objek tgl lalu dikurangi

12. Global Property dan Global Function

property dan function JavaScript yang tidak

“melekat” ke object apapun, dan bisa diakses dari mana saja

1. Global Property

konstanta spesial JavaScript, fungsinya menyimpan nilai khusus

bersifat case sensitif

Infinity NaN undefined null

2. Global Function

- eval() -> memproses string menjadi perintah JavaScript baik itu

variabel / function

var foo = "100 + 30";

var bar = eval(foo);

console.log( bar ); // 130

var foo = "alert('Hello World')";

val(foo); // alert jalan

- isFinite() ->

- isNaN() ->

- parseInt() ->

- parseFloat() ->

13. DOM (Document Object Model)

1. pengertian DOM
2. pengertian BOM (Browser Object Model)