JQUERY BASIC - Pertemuan 5 Part 1
Summary
TLDRThe video script discusses the use of JavaScript, specifically the jQuery library, in creating interactive websites. It introduces the concept of using jQuery for website development and demonstrates how to implement a BX Slider, a jQuery plugin, to create a slideshow effect with three images. The script also covers how to add jQuery and BX Slider libraries to a webpage, either by downloading or using online sources, and emphasizes the importance of consulting documentation for proper implementation.
Takeaways
- đ JavaScript is a powerful technology used to create interactive websites.
- đ jQuery is a JavaScript library that simplifies the process of adding interactivity to websites.
- đ The script discusses the use of jQuery to enhance the interactivity of a website, specifically through the example of a slider.
- đ The BX Slider is a jQuery plugin that allows for creating a responsive and interactive image slider.
- đ To implement the BX Slider, one needs to include the necessary jQuery and BX Slider libraries in the HTML document.
- đ Documentation is crucial for understanding how to use jQuery and its plugins, such as the BX Slider.
- đ The script demonstrates how to add jQuery and BX Slider to a webpage, either by downloading the libraries or by including them via CDN links.
- đ CSS can be used to style the slider and ensure that the images are displayed centrally within the slider area.
- đ The script provides a step-by-step guide on how to set up a basic HTML page and add the necessary code to create a functioning slider.
- đ It is important to ensure that the jQuery and BX Slider libraries are correctly linked and that the CSS is properly applied to achieve the desired slider functionality.
Q & A
What is the main purpose of JavaScript in web development according to the script?
-JavaScript is used in web development to make websites more interactive and dynamic, utilizing its powerful technology.
What is jQuery and how does it relate to JavaScript?
-jQuery is a JavaScript library that simplifies HTML document traversing, event handling, and animation, making it easier to develop interactive web pages.
What is the BX Slider mentioned in the script?
-BX Slider is a jQuery plugin that allows the creation of responsive and interactive sliders for images or content, enhancing the user experience on a website.
How can one include jQuery in their web page according to the script?
-jQuery can be included in a web page either by downloading the library from jquery.com and linking it in the HTML, or by using a CDN link directly in the script tag.
What is the process of adding a jQuery plugin like BX Slider to a web page?
-To add a jQuery plugin like BX Slider, one needs to include the plugin's documentation, download or link to the plugin's source, and then initialize the plugin using the correct jQuery syntax within a script tag.
Why is it necessary to refer to the documentation when using jQuery or its plugins?
-Documentation provides the necessary instructions, examples, and syntax required to properly implement and customize jQuery plugins, avoiding guesswork and potential errors.
What is the significance of the '.ready()' function in jQuery mentioned in the script?
-The '.ready()' function in jQuery is used to ensure that the DOM is fully loaded before executing the code inside the function, preventing any errors due to premature execution.
How can one ensure that the images used in a slider are displayed in the center of the web page?
-Centering images in a web page can be achieved by using CSS properties such as 'margin: auto;' or by using the 'center' tag, ensuring that the images are aligned properly within their container.
What is the role of CSS in the context of creating a slider with BX Slider?
-CSS is used to style the slider, including the layout, appearance, and positioning of the slides, as well as adding animations and transitions for a smooth user experience.
Why might the script suggest removing the jQuery library link if one is using BX Slider?
-The script may suggest removing the jQuery link if there is a conflict or if the version of jQuery included is not compatible with the BX Slider plugin, which requires a specific version of jQuery.
How can the slides in a BX Slider be made to automatically transition to the next slide?
-Auto-transition can be achieved by setting the 'auto' property to 'true' in the BX Slider initialization, allowing the slides to automatically move to the next one after a set interval.
Outlines
đ Introduction to JavaScript and jQuery
The first paragraph introduces the concept of JavaScript as a powerful technology for creating interactive websites. It mentions the existence of various frameworks for JavaScript but focuses on the jQuery library, a popular JavaScript library. The speaker discusses the use of jQuery to enhance website interactivity, giving the example of the BX Slider, a jQuery plugin that allows for image sliding effects. The paragraph also touches on the ease of implementing jQuery by referring to its documentation rather than complex coding.
đ ïž Setting Up jQuery and Creating a Slider
This paragraph delves into the process of adding jQuery to a webpage, either by downloading it from the official jQuery website or by including it from a Content Delivery Network (CDN) like Google. It explains how to integrate jQuery into a web page using script tags and provides a step-by-step guide for creating a basic HTML structure with a div for content, where images can be inserted. The speaker also discusses the importance of understanding the documentation for implementing features like the BX Slider.
đŒïž Enhancing Web Page with Image Slider Using BX Slider
The third paragraph continues the discussion on creating an image slider using the BX Slider plugin. It explains the need for a specific library for BX Slider and how to include it in the webpage. The speaker provides a brief overview of the coding process, mentioning the use of the 'document.ready' function in jQuery to initialize the slider. The paragraph also highlights the importance of including the correct library and ensuring that the HTML structure is set up to accommodate the slider functionality.
đ§ Troubleshooting and Automating the Slider
In this paragraph, the speaker addresses potential issues that may arise when implementing the slider, such as the need to ensure that the BX Slider library is correctly referenced. They mention the importance of checking for errors and understanding the role of the 'auto' parameter in making the slider automatically transition between slides. The speaker also discusses the importance of centering the images within the slider for a better visual presentation.
đ Finalizing the Slider and Encouraging Self-Learning
The final paragraph wraps up the tutorial by encouraging learners to experiment with the code and understand the process step by step, rather than simply copying and pasting. The speaker emphasizes the importance of learning from documentation and suggests that images for the slider can be sourced offline as well. They also mention the possibility of adding a 'center' tag to ensure the images are centrally aligned within the slider.
Mindmap
Keywords
đĄJavaScript
đĄLibrary
đĄjQuery
đĄFramework
đĄBX Slider
đĄDocumentation
đĄHTML
đĄCSS
đĄSlider
đĄDOM
đĄ CDN
Highlights
JavaScript is a powerful technology used for creating interactive websites.
Numerous frameworks have emerged for JavaScript to enhance web development.
The session focuses on learning the jQuery library, a popular JavaScript library.
jQuery simplifies the process of making websites interactive without full JavaScript coding.
BX Slider is introduced as a jQuery plugin to create image sliders for web pages.
Documentation is key for implementing jQuery and plugins like BX Slider without guessing code.
Creating a basic HTML page is the first step before adding JavaScript functionalities.
Div tags are used to structure content, such as images, within a webpage.
Three images are used as an example to demonstrate the implementation of a slider.
The process of making images slide within a single area is explained using jQuery.
Offline and online methods for including the jQuery library in a webpage are discussed.
Downloading and using the jQuery library from jquery.com or including it via a CDN is demonstrated.
The importance of linking the jQuery library correctly using script tags is emphasized.
CSS can be added internally for styling purposes, making it easier to manage.
The speaker guides through creating a responsive slider using BX Slider with jQuery.
The necessity of including the specific library for BX Slider before using it is highlighted.
A step-by-step approach is suggested for better understanding rather than copy-pasting code.
Autoplay functionality for the slider is mentioned, enhancing the user experience.
The transcript concludes with a reminder to center images and ensure proper CSS integration for aesthetics.
Transcripts
y Siapa yang mau atau Siapa yang tahu
apa itu
jquery ayo enggak ada yang
jawab library javascript
Bu Oke library javascript Nah ada
ngomongin javascript nah
eh sebetulnya javascript ini digun untuk
membuat sebuah website karena javascript
ini mempunyai eh teknologi yang powerful
ya untuk membuat sebuah website nah eh
kalian bisa membuat website dengan full
javascript eh apalagi sekarang sudah
muncul banyak framework-famework ya
untuk untuk javascript ini tapi untuk eh
Dasa yang akan kita pelajari hanya
library cjquery-nya saja ya Jadi kita
tidak full eh membuat si atau
menggunakan javascript nanti Mungkin
kalian bisa improve atau e belajar lebih
lanjut mengenai javascript Bagaimana sih
menggunakan javascript di
pembuatan website oke nah eh javascript
digunakan pada pembuatan website ini
sudah kita bahas di awal fungsinya untuk
membuat si website tersebut lebih
interaktif ya lebih interaktif salah
satunya ini saya akan Contohkan satu
buah javascript
ee yaitu BX slider sor satu buah jquery
yaitu BX slider di mana BX slider ini
memungkinkan
eh page kalian atau halaman kalian itu
lebih interaktif salah satunya
ini kita punya tiga gambar eh dengan
menggunakan javript si gambar ini bisa
ng-slide slider BX slider ketika Kalian
mau menambahkan jquery atau javascript
atau Eh tadi BX slider ini yang akan
kita bahas kalian perlu Cari dokumen
dokumentasinya lalu tinggal kalian pakai
Jadi cukup mudah kalian gak perlu ini
nebak-nebak codingnya apa gak perlu kita
langsung cari aja documentationnya terus
kita gunakan gitu ya
oke sekali lagi kita akan buat
javascript kita butuh t gambar kita
bikin satu buah halaman ini kalian
jangan nging dulu ya Lihatin aja
dulu
saya saya bikin nama
html-nya
halamanjquery.html saya simpan di htdx
ya
halamanjquery.html terus seperti biasa
saya keluarkan eh default tag HTML terus
saya mau bikin eh atau Saya mau
menambahkan tiga
gambar Saya mau pakai Div content dulu
terus di dalam Div content Saya mau
masukkan tiga gambar
Anggaplah Saya mau gambar apa ya misal
saya cari di sini gambar gambar
kegiatan
University ini ya
Eh yang gambarnya agak yang gambarnya
landscape ya kita ambilnya ya
kita bikin tiga gambar aja masing-masing
punya di Ya tapi saya enggak kasih kelas
di dalam
div-nya mm gambarnya kita bikin
beda-beda
aja h
ni
misalnya kita sudah punya
Eh apa tuh tiga buah gambar ya kita
running dulu di sini openin browser biar
cepat ya tuh kita sudah punya tiga buah
gambar 1 2 3 gimana sih caranya supaya
kita e bisa bikin Si tiga gambar ini
jadi ng-eslide di dalam satu buah area
ya satu area kayak gini contohnya Ini
kan mereka itu tiga gambar yang berbeda
tapi mereka tuh ng-slide-nya di satu
area di satu area ini nah gimana caranya
kalian bisa
eh
klik wait ini codingnya saya lupa klik
apa
nah oke ini nih ini ketika kita klik
instal ini katanya kita dikasih tahu the
easy way-nya cara gampangnya supaya bisa
menambahkan slide seperti yang tadi tuh
sama seperti yang tadi saya buat di dia
punya satu area atau satu kelas namanya
slider si kelas slider tersebut punya
Child atau punya anaknya atau punya
bagian ada dua di kalau ini dia bukan
gambar tapi dia adalah teks ya tuh I am
a slide and I am another slide nah saya
juga bikin codingnya E ada satu area
atau satu kelas namanya konten di mana
sih kelas konten ini punya tiga bagian
yaitu di pertama gambar yang pertama di
kedua dua gambar yang kedua dan di
ketiga gambar yang ketiga ya jadi tiga
gambar tersebut dinaungi atau di dalam
satu bagian yaitu di kelas content sama
seperti ini tuh ya Nah untuk menambahkan
jquery atau javascript sebetulnya kalian
perlu menambahkan
eh apa ya namanya ya sourch-nya atau ya
library-nya lah library-nya kalian bisa
tambahkan secara online maupun offline
nih contohnya ada dari W school W schol
mencontohkan Gimana sih caranya ngad
jquery ke dalam page kalian ke dalam web
pages kalian yang pertama katanya ada
cara offline yaitu download Si library
jquery-nya dari jquery.com dari sini
atau kalian include jquery from cdn like
Google nah kalau ini caranyaah Eh kalian
menyisipkan sebuah link kayak kita tadi
masukin gambar Ya gambar yang tadi saya
bikin kan Klik Kanan copy image address
baru masukin di sini nah sama seperti
itu si jquery library-nya pun bisa
ditambahkan secara online
menggunakan link ya kita bahas dulu yang
menggunakan secara offline kalau secara
offline kalian bisa download di sini
atau sebetulnya ini isinya sih Harusnya
coding ya nah ini contohnya
e Anggaplah yang coba yang ini nah ini
ini isinya coding jadi sih sebetulnya
bukan diownload ya tapi lebih ke kalian
copy kalian copy semua codingnya terus
Kalian bikin sebuah file Misalnya
namanya apa
jquyjs ya Jadi
exsan ini
ini baru kalian save Nah ini kan
save-nya di htdx baru nanti di sini
kalian e panggil si library-nya pakai
script search
nanti Nah di sini panggillah nama
file-nya jquery
jquery.js itu ya Secara offline caranya
kayak gitu ulangin ya Jadi kalian harus
download coding ini atau copy coding ini
ini library jquery-nya dimasukkan ke
dalam satu file Di sini bebas
penyimpanannya di mana saja lalu untuk
mengkoneksikan dengan html-nya kalian
perlu pakai script tag script lalu
dikasih search baru panggil nama file
ini itu ya kan kalau CSS pakainya link
ya link HF nih link HF kalau jquery
kalian pakainya tag script terus dikasih
sourchnya gitu ya paham sampai sini
untuk yang offline ada yang bingung dulu
enggak ada ya Oke Enggak ada kalau gitu
kita lanjut
eh ke secara online secara online ini
cukup mudah kalian tinggal masukin link
dari Google cdn di sini ini dicopy aja
tuh lihat di sini dicopy terus
dimasukkan aja di sini
nah selesai jadi kalau secara online
kalian enggak memerlukan si ini nih
yang ini kalian enggak perlu karena kan
enggak dipanggil juga ya di sini ya di
sournya enggak dipanggil berarti yang
ini kalau secara online kalian enggak
perlu download dulu library dari eh
jaquery.com enggak perlu kalian tinggal
masukin si snya secara online seperti
ini Ini udah selesai kalian menambahkan
documentation untuk library jquery-nya
jadi jquerynya Sudah bisa digunakan
sampai sini ada yang
bingung enggak ada
enggak ada Oke kalau enggak ada saya mau
e bikin CSS dulu secara internal ya
supaya
gampang Saya mau bikin si imnya ini
semuanya t imnya ini winya
e berapa ya Anggaplah
3,5
pikelnya 100 pel Coba kita lihat dulu
kita dulu si ukuran dari gambarnya
ya terlalu
kecil Nah kayak gini aja ya oke Ini udah
semuanya satu eh ukuran oke nah sekarang
kita akan masukkan si eh coding untuk
membuat si knya ini si gambarnya ini
bisa ngeslide gimana caranya kalian bisa
lihat di sini di bagian eh documentation
dari BX
slidernya itu di sini nih Mana ya Nah
tuh Nih ada yang namanya
eh fungsi atau perintah untuk membuat si
slide-nya itu BX slider ini nih namanya
dot BX slider tapi sebelum kalian bikin
atau masukkan ini kalian perlu
menambahkan library khusus untuk si BX
slidernya ini library-nya berarti kalian
harus instal dulu ya ini harus instal
dulu nih Run from common l b install
back sliderave sebetulnya bisa juga
caranya secara offline kita lihat dulu
ada enggak dia
si
offline slidernya Oh ini nih yang ini
nih ini kita coba masukkan
ya yang online kita masukkan
dulu
Wi
Wait
ya ini Kita sudah masukkan eh untuk
documentation dari Link Ex
querynya ya backider documentation
library-nya ini wajib dimasukkan baru
kita bisa bikin di sini untuk perintah
jquery buat bikin Si back slidernya
pakai tag script ya kalau kalau jquery
kalau CSS tagnya style kalau
eh jquy tagnya
scriipt nah kalian tinggal copy dari
sini nih yang
ini Ini dokumen ready function Ini
dokumen ini kalau kalian lihat di jquery
ada dolar ya dolar kayak gini ini
artinya ee menandakan sebuah objek ya
menandakan sebuah
objek Nah kalau di sini kan dia dot
slider coba saya mau tanya deh sama
kalian ini dot slider manggil apa ya
kira-kira
ya CL plus
betul e pakai sebentar
iya iya
sebentar sebentar
A belum ke sem
kok Sori ya ya oke nah Ini kan namanya
kelasnya slider sedangkan nama kelas
kita apa bukan slider tapi konten kan
Nah ini konten berarti di sini kita
ganti konten ini maksudnya apa saya eh
bahas dari sini ini dokumen ready
function berarti objek dokumen dokumen
itu ngomongin tentang si halaman html
ini ini yang halaman
jquery.html Katanya kita bikin function
untuk dokumen ready function dokumen
ready function nih nih dokumen ready
function ya terus dot content BX slider
maka si kassas konten ini diterapkan
fungsi di jquery namanya BX slider
sehingga jadinya ini harusnya udah jadi
sih
wiit tuh lihat kalian lihat jadi satu ya
bukan satu jadi jadi mereka tuh
nge-slide tuh 1 2 3 tuh ngeslide
tampilannya masih
ee kurang rapi karena dia harusnya ada
di tengah dan juga tadi ada next
slide-nya itu pakai arrow ya Nah ini
kenapa bisa langsung Mereka ee jadi di
dalam satu area dan bergeser secara eh
gantian itu caranya hanya pakai fungsi
yang ini BX slider jadi ini s-nya enggak
boleh kecil karena ini adalah fungsi ya
perintah di dalam jquery-nya Jadi kalau
s-nya kecil ya dia enggak akan ngerasa
ada tu ya Jadi ini harus ee Pak Sensitif
ya gitu nah tapi kalau kita hapus ini
ini kan library si eh jquery-nya ya
untuk back slidernya ya kita hapus tuh
enggak ada kenapa enggak ada karena dia
menggunakan BX slider tapi dia enggak
panggil si library untuk BX slidernya
kalau kalian Klik Kanan di sini inspect
terus ngelihat errornya ini ada error
satu errornya itu undefined harusnya
function yang BX slider nih kita lihat
tuh BX slider
katanya dia gak ngedeteksi B slider ini
bukan sebuah function karena kenapa
karena si eh tadi codingnya yang buat
manggil library backidernya kita
hapus tapi kalau kita balikan udah gak
eror ya sayang itu aja dulu ini udah jam
kamu takutnya
kerja oke kayak gitu ya ngerti sampai
sini dulu Ada yang bingung
bu k tiba-tiba ada tulisan PR next 1 3
itu langsung dari library jquerynya jadi
gampang kan Tinggal kita pakai
aja sampai sini ada yang bingung nih 10
menit lagi nih
Oke next ya Nah katanya kita cek lagi di
sini ada enggak si cssnya dia
menyediakan gak ya cssnya ini cssnya
juga ya si Oh ini nih css-nya Nah ini
nih nih css-nya nih bagian atas tuh
Kalian bisa copy Terus kalian masukkan
si css-nya di
sini dia secara online juga ya lihat tuh
https cdn JS deliver dan lain-lainnya
itu secara online enggak offline ini
kita Coba refresh Apa yang berpengaruh
ketika dia ditambahkan CS S Tuh jadinya
Si pref next 13-nya hilang dan ganti
jadi
errow Bu itu Kok enggak di tengah ya Oke
kita bikin tengahnya aja di html aja ya
si gambarnya tuh enggak di tengah Hm
kita kasih aja Tengah di sini pakai tag
center
ya supaya dia semuanya ada di tengah
tuh tuh di tengah
udah ya dia bisa nge-slide tapi enggak
otomatis
nge-eslide-nya bisa enggak ya Bu dibikin
otomatis bisa saya lupa Bentar ya saya
ingat-ingat dulu BX slider
H saya lupa nih
Sema benar
ya kadang-kadang kadang-kadang saya tuh
suka lupa bagian
ee Ini nih ini kurungk awalnya nih wait
BX
slider bentar ya
kalau di titik
du saya lupa nih jadi si fungsinya auto
tapi saya lupa untuk bikinnya
tuh Aut
kentas kayaknya engak ada di
dokumentasinya
deh auto true auto
true kalian bikin aja dulu sampai dia
jadi ya baru saya cek dulu di bagian ini
nih buat bikin Si auto ngeslide
ya nih kalian bikin dulu sampai sini
nah bikin tu sampai sini cara bikinnya
Eh kalau bisa sih kalian enggak usah
lihat dulu codingnya maksudnya bikin aja
dulu sendiri caranya kan ada ya Eh si
apa tuh si documentation-nya nih saya
kirimin ke kalian Jadi kalian bisa step
by stepnya pakai cara sendiri ya jadi
enggak yang copy paste dari e coding
saya per Line supaya kalian tahu caranya
gimana oke Ini juga yang bagian
apa tuh bagian gambar juga kan Tinggal
dimasukin sebuah kelas namanya konten
terus dikasih di terus dikasih tag
center buat bikin dia di tengah masukin
gambarnya boleh juga secara offline
gambarnya enggak harus online habis itu
e tambahin di atasnya kayak gini Oke y
silakan bikin dulu sampai waktunya habis
juga kan nanti kita Break dulu kalau
zoomnya habisnya 10 menit Silakan dicoba
foreign
5.0 / 5 (0 votes)