Belajar Javascript es5 Dan es6 Part 1 Pengenalan

bewoksatukosong.com | Hallo semuanya kembali lagi dengan om bewok dengan membawakan tutorial series mengenai javascript, well javascript ini saat ini menjadi trend di tahun belakangan ini, karena dengan adanya banyak framework javascript seperti angular, react, vue dan lain-lain otomatis demand javascript menjadi lebih besar dari sebelumnya nah untuk mempelajari itu semua, kita harus belajar javascript dasar-dasarnya dulu, sebelum kita bermain pada framework tersebut, karena jika kita sudah paham dasar dari javascript, kita akan lebih mudah mempelajari framework-framework yang sudah om bewok sebutin diatas. 

Anyway om bewok juga akan berbagi kepada kalian mengenai es6.

Apa sih es6 ? 

Sebenarnya ini pembaruan dari javascript sebelumnya, dan biasanya syntax lebih singkat, tapi kalau belum paham awalnya nanti jadi bingung sendiri. Tapi tenang aja om bewok akan berbagi dari dasar sampai advance lah istilahnya, kalau misalnya ada kalimat yang menurut kalian salah, kasih tau ya. kita sama-sama belajar.

Oke anyway untuk pengenalan om bewok akan memberikan contoh-contoh dari javascript itu sendiri, kalian bisa ikutin biar lebih paham cara kerjanya, gapapa kalau kalian belum mengerti maksudnya apa, yang penting dicoba aja dulu. 

Sedikit demi sedikit kita akan jelasin pada tutorial selanjutnya lebih dalam. Langsung saja kita coba ya

Kita buat folder terlebih dahulu dengan nama belajar_javascript, lalu didalamnya buat folder dengan nama #1_pengenalan nah didalamnya kita buat file bernama 1_pengenalan.html dan 2_pengenalan.html

kalau bingung bisa lihat gambar dibawah, atau bisa juga ambil source code om bewok dibawah ini.
Source code Github 

Struktur Folder #1_pengenalan

Kali ini kita akan belajar mengubah text(html) menggunakan javascript

Oke om bewok memberikan 2 contoh dulu ya untuk pengenalan 

Gambar 1. Tampilan dari 1_pengenalan.html

1_pengenalan.html 

kita mengubah id p ubah menjadi hello bewoksatukosong, kenapa bisa berubah text-Nya ?  

karena kita menggunakan method getElementById("ubah") lalu kita masukan HTML baru menjadi hello bewoksatukosong

Jadi getElementById berfungsi untuk mengambil suatu element pada id atau class, kebetulan dia mengubah text html tapi nantinya dia bisa mengubah jadi apa aja, misalnya mengubah warna text menjadi merah, memperbesar huruf dan masih banyak lagi. 

Pokoknya dia bisa mengambil atau mengendalikan semua id atau class pada html atau apapun, tergantung perintah aja dia mah, kita lanjut soal id ubah. Karena id dia namanya ubah, lalu kita masukan pada getElementById menjadi ubah lalu kita ganti text-Nya menjadi hello bewoksatukosong. 

Kalau belum mengerti nanya aja di comment ya.

Selanjutnya 

Gambar 2. Sebelum button diklik

Gambar 3. Sesudah Button diklik

2_pengenalan.html

nah kita menggunakan bantuan button untuk mengubah isi html tersebut

kira - kira seperti ini jika dibuat percakapan-Nya

"Hey button bantuin aku dong, aku mau text yang tulisan hello babang tampan berubah menjadi saya bukan babang tampan tapi itu di lakukan ketika kamu click button kamu. bisa kan ???? "

Nah cara kerjanya mirip seperti yang pertama, perhatikan ya 

Kita buat p ID dengan nama ubah, selanjutnya kita buat button dengan nama klik aku, TAPI kita masukan onClick yang namanya fungsiAku 

ARTINYA dari onClick ini adalah dia akan melakukan sesuatu apa yang kamu minta, tergantung apa yang akan kamu tulis pada fungsiAku yang akan kita  buat selanjutnya 

Selanjutnya kita buat fungsiAku yang artinya, kita mau kasih dia kerjaan pada fungsiAku

Seperti :

HEY Function fungsiAku tolong buatin text yang ada pada p yang id nya bernama ubah kamu ganti ya, menjadi saya bukan babang tampan, jadi pas kamu klik button tersebut, text-Nya langsung berubah ya. AWAS LU KALAU GA BERUBAH. AKU NGAMBEK 😡

Please tolongin aku, karena aku bukan babang tampan 😭😭

Nah begitu kalau kita buat percakapan-Nya. 

Please banget kalau belum mengerti tulis di comment ya, om bewok mau tau feedback dari teman-teman, apakah teman-teman ngerti atau enggak ??

Oke segitu dulu aja dari om bewok, semoga bermanfaat ya.

Sampai jumpa di Tutorial Selanjutnya ya 

Source Code Github

Tutorial Series Belajar Javascript es5 & es6