Agar input (file) ni malumotini olmoqchi bo'lsangiz.

 var selectedFiles = fileInput.files; 

input(file) massiv qaytarishini unutmang chunki input(file) da multiple atributini hisobiga input (file) ga istaganizcha file yuklash imkonyati payda bo'ladi va har bir file massivning elementi sifatida tushadi.

  <input class="input" multiple type="file"> 

@abs_javascript

confetti-js

Vercel danfoydalanadiganlar bu effectni juda yaxshi bilishsa kerak. Yangi amalyotimda bu effectni bir necha turini sinab ko'rdim.

Link: https://abs-javascript-confetti-js.netlify.app/
GitHub: https://github.com/Abdulvahobjon/js-project-30

@abs_javascript

Effectdan foydalanish uchun manba:
https://confetti.js.org/more.html

Foydalanish uncha qiyin emas)
@abs_javascript

OOP nima ?

OOP (Object Oriented Programming ) - Obyectga Yonaltirilgan Dasturlash , OPP ishlatib yozilgan dasturlarda hamma narsa Obyectlarga asoslangan bo'ladi.
Yani hayotdagi narsalarni Obyect ko'rinishida yoziladi.

Obyectni O'zgaruvchilarini PROPERTY yoki HOSSASI deyiladi.
Obyect tarkibidagi Functionni METHOD deyiladi.

@abs_javascript

Biz odatda ishlatadigan Object (Obyekt) ni ko'rinish.
Lekin !!! —————-
Biz bu usulda Obyectlarni yaratish eng maqul usul emas. Agar siz 2 ta ohshash Obyect paydo qilishingiz kerak bo'lib qoldi. Hozirgi usulda Obyectlarni qiymatlarini o'zgartirgan holatda qaytadan yozishingiz kerak bo'ladi.
Bir xil narsani faqat nomlarni (value) o'zgartirgan hola ikki marotabadan ko'p yozyabsiznmi ? , demak sizni ko'dizda muammo bor.

Qanday yechim qilish mumkin ?

Bunga yechim sifatida 2 ta usulni taklif qilaman.
1. Factory function
2. Constructor function

@abs_javascript

Factory function nima ?

Factory function - bu yangi ob'ektni namunasini qaytaradigan funksiya.

@abs_javascript

Oddiy usulda ( nomaqul ) Object hosil qilinsa.

@abs_javascript

Tepadagi kodni Foctory function bilan hosil qilinganda.

@abs_javascript

Bu kodimizni yanada qisqarturish mumkin.

O'zgaruvchi va Parametrlar bir bil bo'lsa - O'zgaruvchini nomini yozishingizni o'zi kifoya.
Object ichidagi funksiyalarda (Method) - function va ikki nuqtani olib tashlash mumkin.

@abs_javascript

Agar postlar foydali bo'layotgan bo'lsa dostlaringiz ham ulashsangiz juda hursand bo'lar edim.

Yangi amalyot tayyorbo'ldi.))

Istagan va istagancha malumotingizni zipga aylantirish

Bu website orqali istagan malumotingizni .ZIPga aylantira olishingiz mumkin.

Link: https://abdulvahob-zip-file.netlify.app/
GitHub: https://github.com/Abdulvahobjon/js-project-30

@abs_javascript

Loyihamizni kodlari bilan tanishib chiqamiz.

HTML ga sdnjs da link olib kelib saqlab olishingiz kerak
https://cdnjs.com/libraries/jszip
https://cdnjs.com/libraries/FileSaver.js

2 - 3 - qator: Input va Button ni chaqirib oldim;
5-qator: click hususiyatini qo'shish;
6-qator: JSZip obyectini yaratish. Bu obyect yordamida filelarni zip holatiga keltiramiz;
7-qator: Inputga yuklangan filelarni for bilan har birini olib zip obyektiga qo’shadi.;
11-qator: ZIP obyectini blob formatida yaratadi. Blob formati fayllarni brauzerda saqlashga yordam beradi;
12-qator: ZIP obyectini yaratish amalga oshganidan keyin ishga tushadi. info o'zgaruvchisi zip file yaratilgan zip obyectini ifodalaydi;
13-qator: Yaratilgan zip objectini "info .zip" nomi bilan saqlaydi;

@abs_javascript

Hozir bir muammo yechimini ustida ishlash uchun tayorgarlik ko'ryabman.

Agar Websitega 2 va undan ortiq YouTubedan video olib keladigan bo'lsaiz , ikkala videoni ishga tushurgan vaqtizda , ikkisiham bir vaqtning o'zida ishlay veradi. Asliga biri ishlagan payt ikkinchisi automatik ochishligi kerak. Bu muammoni ko'p saytlarda bor ekan.
Misol uchun:
daryo.uz
imaninvest.com/how-it-works
(kun.uz ham bor ekan )

Ko'p muammolarga , duch kelmaguningcha unday muammo borliginiham bilmas ekansan bazida.

@abs_javascript

Bu postimda
1. Factory function
2. Constructor function haqida aytib o'tgan edim

Factory function haqida tanishib chiqdik https://t.iss.one/abs_javascript/1098
Keling endi Constructor function haqida tanishib chiqamiz.

@abs_javascript

Constructor fuction haqida. Boshladik.

JavaScriptda o'zgaruvchilar nomlash.

O'zgaruvchilarni nomlashning 3 ta turini ko'rib chiramiz.

camelCase
Qoshma so'zlardan yasalgan o'zgaruvchini talab qiladi.Birinchida kelgan so'zdan boshqa barcha qo'shilgan so'zlarning birinchi harfi katta harfda bo'ladi.

PascalCase
camelCase ga o'xshab ketadi farqi bunda hamma so'zlarning bosh harfi katta harifda bo'ladi.

smake_case
Hamma harflar kichik harfda bo'ladi. Har bir so'z orasida pastki chiziq bilan ajratiladi.

@abs_javascript

Factory functionlarni camelCase usulda nomlash kerak.
Constructor functionlarni PascalCase usulda nomlash kerak.

@abs_javascript

Constructor funksiyasida malumot return yordamida qaytarilmaydi.
funksiya ichida object yaratiladi. This kalit so'zi bajarilayotgan objectni ifodalaydi.

This kalit so'zidan keyin nuqta qoyiladi va kerakli hohsa yoki method nomi yoziladi va unga Constructordan kelgan paramertni (rasmda: name, age) berib
yuboramiz .

Va yangi objectni yaratish uchun o'zgaruvchiga new deymiz va undan keyin constructor nomini berib qiymatini kiritishimiz kerak bo'ladi.

@abs_javascript