javascript basic

javascript berjalan pada sisi client.

kelemahan dari penggunaan var adalah hoisting -> sesuai artinya “Mengangkat” variabel yang dideklarasikan menggunakan var ini dapat diinisialisasi terlebih dahulu sebelum dideklarasikan

x = 100;
var x;
console.log(x);

//hoisting mengangkat variabel var ke atas seperti di bawah ini :
var x;
x = 100;
console.log(x);

/* output: 100 */


//let tidak dapat di deklarasikan seperti diatas !

const -> immuatable

Array merupakan tipe data yang dapat mengelompokkan lebih dari satu nilai dari tipe data lain dengan menempatkannya pada satu variabel. 

let myArray = ["Coklat", 42.5, 22, true, "Programming"];
console.log(myArray);

/* output:
[ 'Coklat', 42.5, 22, true, 'Programming' ]
*/
Jika kita mengakses nilai array lebih dari index-nya maka hasilnya akan undefined.

Objek serupa dengan array yang dapat menampung banyak nilai dengan tipe data yang beragam. Untuk mengelola data menggunakan objek, bedanya objek diakses tidak melalui indexing,  melainkan menggunakan pendekatan key-value. Untuk mengakses nilainya kita gunakan key. Key juga biasa disebut dengan properti.


=== operator
const aString = '10';
const aNumber = 10

console.log(aString == aNumber) // true, karena nilainya sama-sama 10
console.log(aString === aNumber) // false, karena walaupun nilainya sama, tetapi tipe datanya berbeda



if/else

if{}else{}
if{}else if{} else if{}else{}

for in js 
for(let i = 0; i < 5; i++)
for(arrayItem of myArray)

note !!
Perlu kita perhatikan bahwa, ketika kita lupa menuliskan keyword let, const atau var pada script ketika membuat sebuah variabel, maka variabel tersebut akan menjadi global.

history

Sebagai navigasi (go back atau go forward) histori URL browser.

location

Mendapatkan URL yang terdapat pada address bar browser.

alert()

Menampilkan dialog alert dengan pesan dan tombol “ok”.

close()

Menutup tab yang aktif.

confirm()

Menampilkan dialog dengan pesan dan tombol “ok” dan “cancel”. Method ini akan mengembalikan nilai boolean sesuai response dari pengguna.

prompt()

Menampilkan dialog dengan pesan dan teks input. Method ini akan mengembalikan nilai string sesuai response dari pengguna.

dom merupakan application programming interface (api) untuk html,xml, svg. dengan dom berkas html dapat direpresnatasikan dalam bentuk objek yang ldapat diakses oleh javascript.

DOM inilah js dapat memanipulasi elemn beserta atributnya pada html.

struktur object dom digambarkan seberti node tree

document memiliki method :
getElementByid()
getElementByName()
getElementByClassName()
getElementsByTagName()
querySelector() -> document.querySelector(".button")

querySelectorAll()

dom manipulation :
let catImage = document.querySelector("#catImage");
catImage.setAttribute("src", "https://i.ibb.co/55VG7vL/three-cat.jpg");

innerHTML -> konten dalam bentuk HTML
innerText -> konten dalam bentuk teks


let newElement = document.createElement('p');

newElement.innerHTML = '<em>Hello world</em>'

//append to body
document.body.appendChild(newElement);

*diatas contoh membuat html elemen baru dengan createElement()

event pada element :
dinamakan event handler. cara menggunakannya adalah dengan addEventListener() pada tag elemen.

catImage.addEventListener('click', function(event){
    document.querySelector('#count').innerText++;
})