JQUERY BASIC - Pertemuan 5 Part 1

Summary

The 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

00:00

😀 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.

05:13

🛠️ 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.

10:15

🖼️ 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.

15:18

🔧 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.

20:27

📝 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.

Keywords

💡JavaScript

JavaScript is a high-level, interpreted programming language commonly used for enhancing web interactivity and creating dynamic content. In the video's context, it is the core technology for building websites and making them interactive. The script mentions JavaScript as a powerful tool for website development, and it is used to create sliders and other interactive elements.

💡Library

In programming, a library is a collection of pre-written code that programmers can use to perform certain tasks without having to write the code from scratch. The script refers to JavaScript libraries, which are collections of JavaScript code that extend the functionality of the language, such as the jQuery library discussed in the video.

💡jQuery

jQuery is a fast, small, and feature-rich JavaScript library designed to simplify the client-side scripting of HTML documents. The video script discusses jQuery as a means to make websites more interactive, with the example of a BX Slider, which is a jQuery plugin for creating image sliders.

💡Framework

A framework in web development is a collection of tools, conventions, and best practices that make it easier to build and maintain web applications. The script briefly mentions frameworks for JavaScript, indicating that they are tools that have emerged to facilitate the use of JavaScript in web development.

💡BX Slider

BX Slider is a lightweight and responsive jQuery plugin used to create sliders with images and content. In the video, the speaker uses BX Slider as an example of a jQuery plugin that can be implemented to make a website's images slide, thus enhancing the user experience.

💡Documentation

Documentation in programming refers to the written materials that describe how a program or library works. The script emphasizes the importance of looking at the documentation for jQuery and BX Slider to understand how to implement them in a web project.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. The script describes creating an HTML file and using HTML tags to structure the web page, including the use of div tags to contain images for the slider.

💡CSS

CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in HTML. The script mentions CSS in the context of styling the web page and making adjustments to the slider's appearance.

💡Slider

In web design, a slider is a component that allows users to navigate between different pieces of content, often images, in a carousel-like fashion. The video script uses the term 'slider' to refer to the interactive image carousel created with the BX Slider plugin.

💡DOM

The Document Object Model (DOM) is a programming interface for HTML documents. It treats HTML documents as a tree structure where each node is an object representing a part of the document. The script refers to the DOM in the context of selecting elements, such as the 'content' class, to apply jQuery functions like the BX Slider.

💡 CDN

A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. The script mentions including jQuery from a CDN, such as Google's, which allows developers to load resources from servers that are closer to the user, improving load times.

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