Oke, kita lanjut lagi belajar Javascript Seperti yang bisa kalian lihat di Youtube gue tuh Udah ada satu playlist baru namanya Javascript Tutorial dan ini khusus Untuk seputaran Javascript Buat kalian yang masih pemula, pengen belajar Dari nol, itu ada playlistnya Bisa dicek di homepage gue atau masuk ke menu Playlist ini atau kalian bisa klik juga Di bagian judul dari Playlistnya disini, kalau kalian klik Akan muncul banyak, gak banyak sih Masih 2 video, jadi bakalan Gue update terus untuk playlist Javascriptnya Nanti kalau kalian cek ke dalam playlistnya disini bakal sesuai urutan ya. Jadi yang paling atas itu yang awal terus lanjut ke 2, 3, 4, 5, 6 sampai seterusnya. Cuman memang kalau dibilang struktur nggak terlalu terstruktur juga.
Tapi intinya semua materi javascript akan gue masukkan ke playlist ini. Dan kalian bisa pilih sesuai dengan judulnya. Semua yang gue masukin berupa javascript ke dalam playlist ini itu adalah yang sering gue pakai di industri ataupun pas.
gua belajar dulu bahkan gitu ya gua belajar apa aja akan gua masukkan ke sini kita langsung masuk aja ke video kali ini kita akan belajar yang namanya dom atau dokumen objek model jadi buat kalian yang belum tahu tentang dom dom itu kurang lebih kayak standarisasi dari wetrisi atau World Wide Web Consortium susah banget ngobrolnya memang itu biar bisa mengakses atau update konten elemen yang ada di HTML Termasuk strukturnya bisa kita update juga Dan juga stylingnya bisa kita isi langsung dari javascript kurang lebih Itu yang disebut dengan DOM Document Object Model Di tutorial kali ini gue akan coba sharing seputar beberapa poin Kurang lebih ada 5 poin Yang pertama itu kita akan belajar yang namanya Element Manipulation Ya sesuai seperti judulnya aja bahwa kita akan bermain DOM Jadi udah pasti gak jauh dari yang namanya Element Manipulation Kita akan belajar menambahkan elemen dari javascript langsung ke HTMLnya ataupun memanipulasi datanya juga bahkan atau menghapus dan lain-lain kurang lebih terus yang kedua gue akan coba sharing seputar data selektor di dalam javascript yang sering kita pakai aja gitu ya dan yang ketiga kita akan belajar yang namanya styling langsung di javascript lalu yang keempat kita akan belajar yang namanya event dan juga yang terakhir itu nomor 5 ada tugas kecil untuk persiapan seperti biasa sama aja masih pakai struktur folder yang terakhir kita pakai belajar di beberapa video pemula javascript di playlist gue kita masih folder yang ini belajar javascript dasar dan di dalam folder itu cuman ada index.html dan juga main.js ya buat kalian yang belum tahu isian foldernya kayak gimana dan kalau lu belum punya lu bisa ikutin playlist gua yang javascript tuh dari video yang satu dulu biar bisa foldernya sama kayak kita Oke kita mulai di sini gua akan buka VS Code nya untuk buka VS Code mungkin kalian udah bisa ya harusnya atau memasukkan project ke dalam VS Code itu kalian harusnya udah bisa karena kalian harusnya udah nonton dulu video-video sebelumnya Oke disini ada index HTML, gue rekap sedikit dan juga disini main.js gue kosongkan gak ada apa-apa. Karena kita akan belajar dari nol lagi untuk DOM, Document Object Model. Karena itu berbeda ranah dari yang sebelumnya di tutorial gue di playlist javascriptnya.
Untuk index HTMLnya itu cukup kita panggil javascriptnya doang disini. Di baris ke 7 kurang lebih di HTMLnya itu kita integrasikan main.jsnya ke dalam HTML sini kayak begini. Oke, disini strukturnya cuma punya title doang Titlenya disini ada DAF Rizal dan juga ada H1, belajar javascript dasar Kita mulai dokumen objek model yang pertama Di main.js kita akan coba mengubah Mengubah isian dari index HTML ini lewat javascript tanpa kita nge-moding di HTML-nya Oke, itu tujuan kurang lebih kalau kita bermain DOM salah satunya itu Kita open dulu untuk index HTML-nya Gue klik dua kali muncul seperti ini dan kita akan mulai coba perhatikan di bagian atas sini title itu masuk ke bagian diafrizzal sini dan salah satu hal yang paling sederhana di dalam document object model adalah merubah bagian-bagian ini diafrizzal akan kita ganti dengan kata-kata lain di dalam index.html itu ada diafrizzal, saya tidak akan ubah jadi kita ubah dari main.cs gimana cara mengubahnya?
kalian tinggal ketik saja document.title karena disana kan namanya title maka lu bisa masuk langsung ke sini dengan keyword awalnya itu dokumen terus pakai titik title karena ini objek jadi dia masuknya pakai titik gitu ya untuk masuk ke dalam sesuatunya dokumen tuh bawaan dari sononya dari javascriptnya lu nggak usah terlalu banyak mikirin ini ini bagian dari apa ya window objek kalau nggak salah gua lupa juga dah secara teorinya tapi intinya kalau mau masuk ke bagian title, lu ketik aja dokumen.title cuman sebelum kita ubah, lu mesti tau dulu apa isi dari dokumen.title sebenarnya ada atau enggak, dengan cara troubleshooting yang selalu gua bilang dengan cara apa, masih inget? console.log dalam kurung dokumen.title jangan lupa di save terus lu pergi ke browser lagi dan refresh browsernya kalau tidak terjadi apa-apa karena disini kita bermainnya console.log maka kita pergi ke, klik kanan, inspect cari di bagian Console sini Oke Console Dea Afriza Jadi dokumen title saat ini adalah Dea Afriza Mana tadi Aduh Nah ini ya Sekarang kalau kita ubah Dokumen.title Ini masih nyambung dengan materi yang kemarin ya Materi yang assignment to variable Kurang lebih assignment values to variable Jadi kita masukin values baru untuk title Yaitu Taruh aja disini Siapa nama lo Vikri Gobles Misalnya gitu ya Vikri Gobles lu save lagi, lu lihat ke bagian browser, kalau lu refresh bagian title di bagian sini, di bagian tab browsernya itu berubah jadi vikri goblets, kalau kita console.log di bagian sini untuk dokumennya lagi console.log, dokumen.title maka title terakhir itu akan menjadi kalau kita refresh Fikri Gobles, yang awalnya di Afrizal berubah menjadi Fikri Gobles Itu materi pertamanya, sederhana Kita gak akan terlalu banyak mainin si title Jadi ini konsol gue hapus dulu Ini gue hapus Kalau kita mau ambil isian HTML-nya Ini, H1 ini Itu berarti dia akan ada di dalam body Maka kita bisa panggil dia lewat document.body Cara mengetahuinya seperti biasa Troubleshooting dengan cara console.log dulu aja Console.log Contohnya save lu akan lihat ada apa aja elemen yang ada di dalam body kalau kita refresh browsernya body muncul kesini dan isinya adalah H1 belajar JavaScript dasar bla bla bla bla bla sekarang gua akan hapus H1 nya biar kita bermain full dari JavaScript nya aja H1 di HTML nya kita hapus semua oke sisain cuman script doang sini dan ini kayak begini Jadi kalau kita save di browser tidak akan muncul apa-apa Dan kita akan munculkan lewat javascript disini Dokumen.body itu kan isi dari bodinya Nah isi dari bodinya kita bisa timpah dengan sesuatu hal Caranya kita bikin variable dulu biar gampang untuk dokumen bodinya Bikinlah const body disini sama dengan document body Jadi nanti untuk mengakses bagian elemen body Itu tinggal panggil body tanpa harus panggil document.body Biar agak lebih ringkas gitu ya Dan kalau lo mau isi bagian bodinya dengan sesuatu Lo bisa pakai yang namanya body append Dalam kurung isi apa yang lo keluarkan di browser gitu Taruh lah disini seperti biasa ya Hello world Hello world Ya begitu Save Kalau lo refresh ke bagian sini, maka hello world akan muncul ke dalam browsernya. Yang artinya append itu untuk mengisikan sesuatu ke dalam sebuah elemen.
Nah disini elemennya adalah si body. Kalau body pakai sama dengan kaya title bisa nggak bang? Mari kita coba. Body sama dengan hello world save.
Kalau di refresh nggak bisa. Assignment to a constant variable. kalau ini gua ganti jadi led karena cons adalah cons tantang gak bisa diganti nilainya maka kalau gua refresh pun tetap gak muncul apa-apa ya karena berbeda untuk title memang seperti ini kalau untuk bagian body ke dalam itu kita pakai yang namanya append jadi disini gua cons aja dulu nah kayak gini aja terus disini tadi apa ya jadi gua lupa.append body.append append atau append sih append aja ya ngomongnya Halo world maka dia akan muncul ke browser pada berhasil gak bro sampai sini harusnya berhasil ya Oke misalkan gua pengen bikin hasil satu lagi ya kan tadi hasil satunya hilang jadi di bawah sini kita coba create element ya dengan cara dokumen dot create element ada tuh bawaan dari javascriptnya dokumen dot create element apa yang mau kita bikin di dalam sini ini muncul langsung kalau di gua di swasudiocode gua Misalkan kita mau munculin H1 Kayak gini Udah save aja kayak gitu H1 dulu Kalau lu save ini gak akan tercipta apa-apa Karena masih kosongan Si dokumen elemen create-nya ini masih kosong Belum diisi nilai apapun Jadi gak ada apa-apa disini Oke tuh Cuman kayak begini Hello world Gak ada H1 gak ada apa-apa di bagian elemen sini Di bagian konsol pun gak ada apa-apa juga Untuk mengisinya Itu bukan pakai append Kalau append itu untuk body ya kurang lebih Nanti sebenernya kalian bisa pake append juga Untuk meng-combine sesuatu Tapi untuk mengisi ini Kalian bisa masukin dulu ini ke dalam variable Biar lebih enak lagi Taruh lah const Apa ya H1 title Misalnya gini ya Atau title doang dah Ah ntar lu pusing lagi sama yang atas H1 dah gini doang ya Const H1 sama dengan create element H1 Oke Terus kalo mau diisi Itu lu tinggal ketik aja H1 titik Ada 3 cara nih disini nih lu bisa pakai yang namanya inner text inner HTML ataupun bahkan bisa pakai yang namanya teks konten ya begini taruh kita pakai yang teks kontennya teks konten sama dengan Anjay ini H1 bro gitu misalnya kalau lu save terus lu reload lagi browsernya masih belum muncul apa-apa Kenapa? Karena ini masih ada di belakang Belum nampil ke bagian depan Kalau pengen nampil ke bagian depan Kita mesti upenkan ini kemana Nah ini Ini elemen itu belum di dalam body Belum di dalam mana-mana Supaya dia bisa masuk ke dalam body Maka kita upenkan ke dalam body Dengan cara seperti ini Body.appen Appen Aduh gak enak banget nyebutnya.appen Apa yang mau di upenkan?
Yang mau di upenkan kan tadi Kalau di atas itu kan hello world ya String langsung kayak begini Nah sekarang gue pengen yang masuk ke dalam body itu bukan string ini Tapi elemen yang udah kita bikin ini H1 Ngerti gak tuh? Harusnya ngerti ya Tinggal masukin aja kesini H1 Oke kalau lo reload browsernya Anjay ini H1 bro Ada yang boleh ditanyain gak? Kalau boleh ditanyain sekarang Tanyain dulu di kolom komentar bro Biar gak pusing berkelanjutannya nanti gitu Jadi kurang lebih ya gitu lah ya Intinya ini body Kalau mau diisi bisa dengan cara append Isian di body HTML sini tuh bisa dipakein append Untuk mengisikan sesuatu Apapun itu Mau string Mau element itu bisa Tapi kalau string ya langsung aja kayak gini Kalau element Saratnya lo harus bikin dulu elemennya Apakah H1, H2, H3, div, tabel Ataupun lain-lain Element atau elemen sih Element lah Nah disini kan kita udah bikin H1 Variable Yang nampung elemen Baru dengan elemen H1 ya jadi kita bikin Elemen H1 atau heading 1 Yang artinya textnya besar Terus ini kan kalau kita sebaris ini doang Belum ada isinya dong itu baru elemen H1 seolah-olah kayak begini doang nih kalau di HTMLnya H1 Tutup H1 kayak gitu doang Terus di bagian sini Itu kita isi Text kontennya yang artinya Di tengah-tengah sini di dalamnya itu kita isi bro Jadinya ini keluar seperti ini H1 anjay ini H1 bro gitu Nah kenapa?
Karena ya ini kan yang kita isi di dalam H1 H1 text content isinya anjay ini H1 bro Nah kenapa kalau nggak di append dia nggak muncul ke bagian browser? Karena kan ini mau di kemana ini H1 ini mau di kemana ini Hasil akhir ini nih Ya mau dimasukin ke dalam body dong Karena kan HTML itu ada di dalam body kalau muncul ke browser ya kan jadi kita apen lah apa yang diapen apen apen H1 yang diapen gitu ngerti mengerti mengerti dong Oke lanjut ya kita coba bikin pakai yang lain-lain taruh disini kalian bikin lagi elemen baru cons nama saya misalnya gitu sama dengan dokumen. Hai create element pakai P aja misalnya akan terus lu masukin di sini P, E, K, O, P Si nama saya, variabelnya dot Tadi kan text content nih Kita coba pake yang lain ya Pake inner HTML Sama dengan, dia afriza Ini sebenernya sama aja Text content, inner HTML Cuman ada perbedaan sedikit nanti Tapi intinya sama-sama muncul ke bagian browser Ntar gue jelasin Kalo kita save dan kita reload Dia tidak akan muncul Masih inget kenapa dia gak akan muncul? karena belum di append, append append betul sekali jadi body.append append itu kita masukin nama saya gitu ya save kalau kita reload boom dia frizzle muncul oke oke sekarang kita pakai yang satu lagi cons nama kamu sama dengan dokumen.createElement Hai baik lagi dah boleh atau B dah nama kamu titik inner teks sama dengan nama kamu siapa Fikri goblets kalau di refresh ini di save ya terus di refresh refresh refresh itu nggak muncul tapi kalau kita up and can happen happen happen dot happen nama kamu save terus lu reload lagi ada vikri goblets berupa tag B the official berupa tag P H1 anjay berupa H1 hello world string kosong karena tadi di up and di atas kosong jadi kita hapus saja begini pusing sampai sini seharusnya tidak ya Nah ini perbedaan ketiga ini salah satu yang paling berbalok adalah kalau kita injek lagi ke bagian Kok injek sih Kita masukin lagi sebuah elemen ke dalam sini Taruh lah yang text content disini ada i ya di dalamnya I kayak gini Terus disini Oh jangan i Mark w e e Mark w e e Markuee nah tutup Markuenya ini cara-cara jadul yang menakjubkan dulu waktu awal kali pertama kali ngoding nah ya kayak gini ya ini kan elemen HTML yang membuat teksnya bergerak nih kita masuk-masukin semuanya sini ntar kita lihat yang bergerak yang mana Markuee ya lu masuk-masukin sendiri aja pokoknya mah ikutin aja tutup Markuee nah kita save Nanti kalian bisa tahu nih perbedaan antara teks konten inner HTML dan inner text itu apa Mark WEE ini artinya membuat teksnya berjalan dari kanan ke kiri Kurang lebih kayak gitu Kita coba reload Refresh Silahkan Ada yang tahu bedanya apa?
Nah simpulkan sendiri di kolom komentar ya Yang mengerti berarti anda siap lanjut ke materi berikutnya Kalau tidak mengerti Assalamualaikum warahmatullahi wabarakatuh Pokoknya ya Gimana-gimana? Coba udah komen udah Pause dulu videonya bro Gue mau ngopi dulu Gue tidak akan menjelaskan apa perbedaannya Cukup dibuktikan saja kurang lebih seperti itu Dan kalian simpulkan masing-masing Kalau merasa kalian gak yakin Silahkan browsing sendiri Atau cari di video lain di youtuber lain Kita lanjut lagi Ini materi yang kurang lebih seputar apen-apenan Bosen ya Kita move lagi ke materi berikutnya Tentang data selektor Oke ini akan gua hapus semuanya sampai sini sampai body juga akan gua hapus sebenarnya nah gini aja oke cuman bermain di title ini doang terus di HTML kita akan masukkan sesuatu taruhlah kita akan bikin yang namanya tombol boleh di sini ya tombol button testing atau jangan testing deh halo klik saya gitu ya klik saya oke Hai terus disini kita punya ID pertama kita get by ID dulu ya jadi sini ID nya misalnya ID ID itu kurang lebih untuk ngasih tahu ini batentu spesifiknya apa sih Nah supaya kita dari javascript bisa tahu ini batentu punya nilai jadi kita langsung masukin aja taruh disini btn bisa gitu ya btn1 dah klik saya satu misalnya itu gua copy ini kebawah kontrol c kontrol V ini klik saya dua ID nya btn2 Oke kita reload lagi browsernya reload ada klik 1 dan klik 2 ya oke console.log kalau diklik tidak terjadi apa-apa ya jadi kita akan coba modifikasi tampilan tombolnya jadi kita panggil dulu bagian ID nya di dalam JS dengan cara taruh tadi namanya btn1 kita pilihkan variabel penampungnya namanya cons btn1 sama dengan document.getElementById dalam kurung nah ini adalah nama id nya id di btn1 tadi apa? di button yang pertama itu id nya btn1 kalau lo cek sini id btn1 terus untuk yang kedua kita copy juga ini sama btn2 ganti aja tinggal 22 kayak gitu kalau kita console.log btn1 nya console.log btn1 pas kita refresh browsernya maka akan muncul buton 1 ya nggak klik saya satu sini muncul kalau kita konsol log yang btn2 maka btn2 langsung muncul ke bagian konsol artinya kita udah bisa menseleksi lewat javascript yang mana elemen tersebut yang mau kita ubah nantinya Nah misalkan yang elemen 1 alias button pertama itu akan kita ganti tampilannya gua nggak mau ada bordernya misalnya begitu Ayo kita coba disini sekaligus juga dengan styling ya jadinya btn1.style nah dot misalnya gua mau hapus bordernya langsung aja masuk ke elemen bukan ke elemen ke style CSS yang harus kita lakukan kalau mau ubah border apa border kayak gini ya sama dengan pakai string non yang artinya border akan gua hilangkan untuk button pertama paham gak tuh button pertama style bordernya gua bikin non ini memang gabung sama CSS sih kurang lebih tapi ya sedikit aja lah ya Jadi kalau kita refresh maka dia jadi seperti itu buduk enggak ada bordernya Bro ya untuk yang satu kalau yang dua masih aman lu juga bisa timpah-timpah dengan styling lainnya taruhlah btn1.style.padding bisa sama dengan 8px kayak gitu save terus btn1.font-size Sama dengan misalkan 24px, terus btn1.background, sama dengan misalkan warna backgroundnya itu tomato, kayak gitu ya. Terus, udah gini dulu misalnya, kalau kita refresh, waduh gitu ya.
Kurang lebih itu berbeda sama button yang sebelah sini. Itu via javascript, kurang lebih dengan cara yang seperti ini. Ini kalau bicara styling-styling lewat javascript Jadi pakai pemanggilan getElementById itu bisa Atau pakai yang satu lagi Nah btn2 itu akan kita panggil dengan cara yang lain Taruh lah disini bukan id nih Misalkan kita punya class Biasa tml itu ada class Supaya kita bisa styling-styling pakai class gitu kurang lebih Taruh lah disini class btn jangan btn lagi dah ntar lu pusing ya boleh deh btn2 nama kelasnya btn2 kalau ini id btn1 untuk panggilnya bisa pakai cara yang paling mudah sebenarnya daripada getElementById ini hanya spesifik, hanya bisa panggil id doang, kalau pengen universal itu bisa pakai btn2 sama dengan dokumen.querySelector dalam kurung lu masukin apa misalnya titik, tadi kan nama kelas itu pakai titik kalau id itu pakai pager manggilnya kalau titik itu pakai kelas, kelasnya apa tadi namanya? btn2 kalau kita console.log btn2-nya, itu menghasilkan hal yang sama kayak tadi tuh, masih sama aja kayak tadi jadi ini untuk data selector ya, untuk manggilnya bisa pakai getElementById nggak perlu lagi pakai pager di sini, nggak perlu lagi pakai titik tinggal langsung masukin aja special khusus untuk id kalau query selector itu bisa untuk apa aja?
Lo mau pake pager untuk ID bisa. Lo mau pake titik untuk kelas juga bisa. Nah disini juga lo bisa langsung masukin untuk elemen HTMLnya. Mau apa misalkan lo mau munculin yang button ini. Lo tinggal panggil aja langsung bisa kayak gini juga button.
Cuman gak spesifik jadinya ya. Gak tau button yang mana. Karena kita akan masukin elemen button.
Yang pasti nanti akan muncul yang pertama ini. Yang ini gak akan muncul di konsol kita. Jadi kalau kita konsolok btn2 nya atau btn doang.
Taruh lah ya. karena kita enggak enggak spesifik mau cari apa yang mana kelas yang mana ini yang mana kita langsung ke semua elemen button itu kita cari kita dapetin yang pertamanya yang mana misalkan kalau kita refresh ya ini dapatnya yang saya satu ini gitu ya lanjut ke materi yang terakhir yaitu event jadi di tombol sini kita bisa punya event Pak di yang satu akan gua masukkan sebuah event namanya on click sama dengan Lo bisa pakein alert langsung, ini gak di dalam main.js ya, ini di HTMLnya langsung Alert, misalnya kayak gini Aku di klik gitu misalkan ya Pake string 1, jadi ininya string 2 di luar Terus alert, string 1 di dalam Atau kutip 1 di dalam, aku di klik Tutup lagi pake kutip 2 Gak boleh kutip 2 semuanya, nanti error Jadi kalau di luar udah kutip 2, di dalamnya kutip 1. Atau di luar kutip 1, di dalamnya kutip 2. Harus agak beragam gitu bro ya. Namanya juga hidup, gak boleh monoton. Harus ganti-ganti terus kayak gitu lah.
Pacar. Eh pacar lagi ya. Repress langsung. Kita coba reload.
Dan kalau lu klik saya, maka aku di klik. Kalau yang ini kan belum. Ya gak? Nah lu lakukan hal yang sama untuk yang bagian kedua ini. Ini untuk on click.
Nah kalau mau masukin on click ini ke dalam JS-nya, itu pakai 2 cara bisa ya. Pake cara pertama itu langsung kita bikin function di javascriptnya Atau pake cara kedua itu kita bikin sebuah event listener Tapi kita akan coba bikin function aja di javascriptnya Supaya gak terlalu pusing juga Kita langsung bikin aja disini nih Di dalam onclick ini taruh lah nanti kita bikin function di dalam javascriptnya Adalah function namanya misalnya Ganti warna Pake buka tutup kayak gini ya Nah artinya ketika tombol ini di klik Kita akan cari Ganti warna. Cari function ganti nama yang ada di dalam script main.js. Karena sekarang belum ada.
Jadi pas di klik itu belum di refresh. Ganti warna is not defined. Kelihatan di bagian konsol ya.
So kita bikin dulu di bagian main.js. Ini konsol gue hapus dulu. Kita bikin function yang namanya adalah ganti warna.
Pakai kurawal kayak gini. Bikin dulu console log biar aman. Aman.
Setidaknya pas di klik ini tombol akan mengarahkan si button ini untuk masuk ke bagian javascript yang fungsinya itu ganti warna. Yang mana isi ganti warna adalah aman. Jadi kalau kita save dan kita reload. Pas di klik mesinnya disini akan muncul tulisan aman.
Berarti fungsi itu. klik lagi 2 3 4 5 6 7 8 9 10 Jadi kalau disininya kita ganti jadi alert ditambahin misalnya dibawah alert aman kita refresh lagi aman muncul sini oke sekarang kita combine Pak gimana kalau pas diklik ganti warna itu warna buttonnya berubah yang tadinya buttonnya tomato ya kan kalau lu cek nih warnanya pas diklik dia ubah jadi biru misalnya gitu jadi disini tinggal ini hapus dulu ya BTN satu karena kita udah punya button satunya itu yang mana dot style dot background sama dengan Taruh lah kita ubah jadi aqua alias biru Aqua itu biru kurang lebih ya Jadi kalau kita reload pas di klik harusnya dia berubah biru harusnya Nah ada yang sudah berhasil Ganti warna untuk merubah warna backgroundnya sesuai aja gitu kan Oke kita langsung lanjut lagi ke bagian event yang berikutnya Ada yang namanya on mouse over On mouse over itu supaya ketika mouse kita masuk Kita bisa melakukan sesuatu, men-trigger sesuatu Hai taruh di sini on mouse over begini sama dengan ngapa yang akan kita lakukan taruh alat dulu di sini hehehe gitu ya untuk ngecek-ngecek dulu sebelum masuk ke javascript on mouse over alert hehehe ketika kita refresh terus mouse nya kita geser ke bagian button ini adudududu tuh kan ke pencet muncul hehehe kalau mostu masuk lagi gua mau jelasin dulu Pak kalau masukin ke sini ya tuh lagi Hiya, hiya, hiya Artinya apa? Artinya kita bisa melakukan sesuatu lewat trigger tersebut Ketika mouse kita masuk, kita mau ngapain? Nah rencananya, gue pengen ketika mouse ini masuk, bukan alert, tapi ubah Ih, ini tuh ya Tapi ubah bagian klik saya, tulisan klik saya satu dengan lain-lain Oke, kita coba Masuk ke bagian main.js Kita bikin sebuah function lagi, function ubah text terus kita bikin kayak gini console.log ubah text nya kalau udah bikin function di main.js kita bisa arahkan bagian mana yang mau diarahkan ke function tersebut bagian mouse over karena yang on click udah keganti warna yang on mouse over gue mau arahkan ke bagian ubah text jadi ini kita hapus ubah text save kalau kita refresh ih nah pas mos kita geser harusnya di sini konsol ada muncul ya karena di kodingan main.js tadi itu ada ubah teksnya coba tuh ubah teksnya 2 3 4 5 6 1 2 3 4 nah kurang lebih kayak gitu ya jadi kita bisa mengubah teksnya ketika mosnya datang nah untuk mengubah teksnya bagaimana digabungin lagi materi yang tadi di awal Bro ini gua hapus btn satu dot Text content Bisa ya Text content sama dengan Apa misalnya Hihihi Misalnya gitu ya Hihihi Hahaha Boleh lah Save Terus pas kita reload Seret Kosong ya Perhatikan tulisan klik saya satu ini Kalau gue mouse kesini Hahaha Hihihi Berhasil? Sama gak?
Reload lagi ya Mouse nya geser ke dalam Bah Hai ada satu lagi yang namanya apa namanya the almost out jadi ketika must kita keluar kita balikin lagi ke seperti semula caranya di sebelah sini kita tambahin lagi on mouse out on mouse out nah sama dengan alert dulu seperti biasa out misalnya kayak gitu ya Nah kalau di save kurang lebih kayak beginilah hasilnya ya jangan lupa kita cek pakai alert dulu terus kita reload Kalau mouse kita masuk, klik saya akan berubah jadi hahaha Kalau mouse kita keluar dari tombol ini, hey, out out out out out Rencana gue adalah pas keluar, balikin lagi textnya jadi text yang original Yang mana sebelumnya adalah klik saya 1 Nah kalau kita bikin satu function, namanya itu function oritext misalnya gitu ya Alias mengembalikan lagi text btn1 .txtcontent sama dengan klik saya satu tadi kan gitu ya jadi kita bisa arahin ke sini ketika mouse nya keluar mana tadi nah ini alatnya kita hapus arahin ke oritex Hai Jadi kalau kita save ya ini almost over ubah teks on most out oritex ini kodingannya kalau kita save dan kita reload tuh dia bulat balik terus klik saya satu set ahihi pasti klik berubah jadi biru pas keluar jadi klik saya satu balik lagi balik lagi balik lagi balik lagi ya gitu kurang lebih nah langkah lebih bagusnya kalau kita bikin default untuk teks kontennya jadi disini kita bikin aja langsung nih btn satu dot Text content sama dengan klik saya 1. Jadinya untuk oritext itu kita tinggal gak usah kayak gini. Default text contentnya adalah klik saya 1. Nah nanti pas ubah text dia akan berubah jadi text content hehehe hahaha. Ini akan berubah jadi hahaha hehehe.
Di HTMLnya kita gak usah pake yang namanya klik saya 1 ini. Ini kita hapus. Jadi button kosong.
kayak begini karena untuk isi kontennya itu sudah di dalam javascript yang mana klik saya satu jadi kalau kita refresh masih sama aja kayak yang tadi nah klik saya satu pas kita geser aihi balik lagi gagal karena kita salah panggil harusnya ini jadi sebuah variabel cons default default text sama dengan ini masuk ini sini ini default text ngerti nggak kayak materi awal tadi kemarin kok tadi sih Kemarin tuh variable terus variablenya adalah klik C1 Global variabel ya ini ya terus BTN satu teks konten isinya adalah default text yang mana berarti sama dengan klik C1 jadinya pasti dibawa lebih enak gitu manggilnya BTN satu titik teks konten sama dengan default text gitu Jadi kalau sudah kita coba refresh lagi set set set set set set set klik nah gitu ya gua kasih clue satu kali lagi sebelum kita masuk ke tugas ya contoh misalkan pas di klik selain ubah warnanya gua pengen juga munculin sesuatu jadi kita pergi ke bagian function yang pas di kliknya mana ganti warna ini ya pas di klik ganti warna gua akan tambahkan juga sesuatu kita akan create elemen di dalam ganti warna sini atau untuk lebih relevan lagi kita ganti jangan ganti warna untuk function yang di kliknya on click jangan ganti warna tapi klik button Ini boleh ya Klik button Terus kita ganti disini Yang tadinya ganti warna Jadi klik button Ketika di klik button Akan merubah background warna Terus ketika di klik button Kita akan ngapain lagi Ini sebagai clue tugas Diingat-ingat ya Gue akan create sebuah elemen disini Cons Taruhlah disini New text Sama dengan Document.createElement p lalu new text akan gua isi dengan xcontent Halo bung apa kabar misalkan gitu lalu gua akan append append append append append ini ke body body.append new text ye bodinya kagak ada Bentar, kita panggil lagi bodinya Tadi udah dihapus, lupa Cons body sama dengan Document.get.body Sorry Jadi, kalau gue refresh Ini kan kayak gini Kalau di klik selain dia merubah warnanya menjadi biru Dia juga akan memunculkan sebuah elemen baru Halo bung, apa kabar? Nah, aman ya Kita masuk ke tugas ya Tugas kecilnya adalah Hai munculkan sebuah elemen HTML baru dengan isi berupa teks bertuliskan nama kalian Oke tapi bukan ketika tombol diklik bukan tapi melainkan ketika tombol ini digeser ke sini ya digeser ni mosni sorry mos digeser ke yang klik dua kalian kerjanya diklik dua aja ya ketika mos digeser ke bagian klik sayang kedua ini tombol yang kedua pas masuk mosnya ke dalam munculin sebuah teks di sini nih Pas mouse-nya keluar, ubah warna teks yang baru. Taruh lagi nih ya, pas gue mouse-nya masuk sini, kan muncul tuh elemen kayak begini. Nah ini mouse masih di dalam nih. Pas mouse gue keluar, ubah warna si teks ini.
Gimana? Mengerti kan? Itu tugasnya. Sangat-sangat mudah.
Jadi buat kalian semua, semangat mengerjakan tugasnya. Kalau berhasil, dengan cara apapun terserah kalian, tergantung logik kalian masing-masing. Implementasikan lewat coding-an yang kayak macam beginian.
Semuanya clue-nya sudah gue kasih. Jadi gak ada alasan untuk tidak bisa mengerjakan harusnya. Karena ini tugasnya sederhana. Jadi langsung aja di tag ke instagram gue. At dea.avriza Langsung jangan lupa di follow.
Terus story in. Ntar tag gue. Ntar gue restory bro.
Kalau yang berhasil ya. Di hari pertama ketika video ini rilis. Kalau kalian berhasil oke.
Sampai jumpa di video berikutnya. Untuk tutorial javascript. Jangan lupa pantengin terus playlist javascript di gue. Nanti akan gue selalu update materi-materi yang dasar-dasar seperti ini.
Sampai ke bagian nanti dalam-dalamnya. Oke bye-bye semuanya.