JavaScript Zero to Expert | 2023
O'zbek dasturchilik segmentida JavaScriptning no'ldan boshlab murakkab qismigacha o'tilgan biron darslik yo'q! Yani seniorlikka chiqish uchun albatta chet el dasturchilarni ko'rishga majburmiz. Mana shunday muammoni oz bo'lsada hal qilsih uchun sizlarga zero to expert nomli javascript kontentini yozishga qaror qildik.
JavaScript darsligini tugatib agar siz ReactJSning 50% ishlash tizimini tushunmasangiz, demak siz JavaScript darsligini yaxshi tushunmabsiz.
Mualliflik huquqiga amal qiling. Ruhsatsiz foydalanilgan kontent va video darsliklar ham diniy ham dunyoviy qoidalarga to'g'ri kelmaydi!
Kontentdan foydalanmoqchi bo'lganlar uchun eslatma barcha foydalanilgan kontent varoqalarida Webbrain Academy tamonidan tayorlanganligi haqidagi ma'lumot bo'lishi shart!
Video darsliklar Webbrain Academy bosh mentori Sardorbek Muhtorov tomonidan tayorlandi!
Videoni to'liq sotib olish uchun: https://teletype.in/@webbrain_ceo/video_darsliklar
BASICS
1 - dars | JavaScript'ga kirish
— JavaScript nima?
— JS'ni githubga bo'glash
— JavaScriptni codini compile qilish
— NodeJS o'rnatish.
2 - dars | Variables
— JavaScript ishlash strukturasi
— Threadlar haqida umumiy tushuncha.
— Variables va Declorations haqida batafsil.
— let, var const larning bir biridan farqi.
3 - dars | Data Types
— Data Types nima?
— Primitive vs Non Primitive
— Number.
— Bigint.
— String.
— Boolean
— Null
— Undefined
— Symbols
— Objects
— Arrays
— Functions
4 - dars | Type Conversions
— O'tilgan darslar yuzasidan savol javob.
— Number Type Conversion.
— String Type Conversion.
— Boolean Type Conversion.
— Null vs Undefined
5 - dars | Operators
— Math operators + - * / % () .
— Tenglik = == ===.
— Qisqartmalar.
— Increment.
— Decrement
6 - dars | Logical Operation
— Comparision
— AND / OR / NOT
— Tenglik = == ===.
— Logical comparision.
— ASCII table haqida.
— amaliy mashqulotlar.
7 - dars | if else
— O'tilgan darslar yuzasidan savol javob.
— if else tushunchasi..
— birdan oshiq holatni taqqoslash.
— else if.
— else if bilan if ning ishlatilishidagi farqi.
— if ishlatishda orderning ahamiyati
8 - dars | ternary operator
— ternary operator nima?
— if else bn ternaryning ishlatilishidagi farqi.
— ikkitadan oshiq holatlarni taqqoslash.
9 - dars | nullish operator.
— Nullish operatori nima?
— Nullish bilan boshqa logical operatorlini farqlari haqida.
10 - dars | Switch
— Githubda file'larni to'g'ri joylash.
— O'tilgan darsliklar yuzasidan savol javob.
— ikkitadan oshiq holatlarni taqqoslash.
— Switch nima?
— Switch bilan if va ? larni taqqoslash.
11 - dars | for loop
— For loop
— For loop parameterlarining tushurib qoldirilishi
— Infinite loops
— var bilan let farqi
— Toq va Juft sonni topish. 99% kishi buni xato yo'lda qiladi.
— Nested Loops
— Label of inner Loops
12 - dars | while | do while loop
— while
— do while
13 - dars | functions
— Function decloration
— Function Expression
— Arrow Function
— Shadowed variable
— Default parameter
— Functions with return
14 - dars | Basic Object - 1/5
— Savol Javob!
— Tushuntirib berish boshqa level!
— Logica nega kerak?
— Objects
— Dynamic access to keys
15 - dars | Advanced Object - 2/5
— Dynamic access to keys
— Copying vs Referencing
— Object assign
— structeredClone
16-dars | Advanced Object - 3/5
— Savol Javob!
— Uyga vazifadan chiqmagan masalalar yechimi.
— Call Stack va Heap qanday malumot saqlaydi?
— this method.
— Constructor Functions
— Symobls as a Key
— Object keylarini yozilish usullari
17 - dars | Advanced Object - 4/5
— Distructure { }
— Renaming variables
— Spread operator (...)
— Updating Objects
18 - dars | Numbers
— Savol Javob!
— Number representation
— Number constructor
— Parsing numbers
— Integer and Faloat numbers.
— Decimal number.
— Binary numbers.
— Hex numbers.
19 - dars | Math
— Math - abs, floor, ceil, round, trunc, random, min, max, pow, sign, sqrt, cbrt
— Methods, toString, toFixed, parseInt, parseFloat, isNaN, Object.is, toPrecision,
— Strange JS
— Homework
20 - dars | Optional Chaining.
— Optional Chaning nima?
— Projectni to'g'ri ishlashi uchun muhim lifehack.
21 - dars | String.
— Homework explanation
— Quots
— Special characters
— Accessing chars
— Loop
— Comparision
— Methods
22 - dars | Array Basics 1/5
— Array nima?
— array decloration
— new Array
— basic array methods
23 - dars | Array Advanced 2/5
— Array loops?
— multi dimansional arrays
— advanced array methods
— Interview assignment
24 - dars | Array Advanced 3/5
— Advanced Array
— find va findIndex ishlash tezligidagi farqi.
— forEach va Map farq
— Multi dimansional arrays
25 - dars | Array Advanced 4/5
— array callback methods
— Exercises
— Reduce.
— flat.
— new Set
— new Map
26 - dars | Array Expert 5/5
— Advanced Array CRUD exercise
— Savol Javob
— C - Create, adding user info
— R - Reading, filter, sort, order...
— U - Update, change user info, mapping
— D - Deleting user info, filter
— Exercises
27 - dars | Distructure
— Array distructure
— Object distructure
— Parametor distructure
— Nested distructure
— res
28 - dars | New Date | JSON
— new Date methods
— JavaScript Object Notation
— stringify and paramas
— parse
29 - dars | Map and Set | WeakMap and WeakSet
— new Map: set, get, delete, clear
— new Map as a generator
— Loops with new Map
— new Set: add, has, delete, clear
— Loops with new Set
— new WeakMap
— new WeakSet
30 - dars | Recursion function
— Recursion function nima?
— Recursion qanday ishlaydi?
— Kompaniya oyliklarini recursion bilan hisoblash
— Recursiya bilan oddiy loopning farqlari va ustunligi.
— Homeworks
31 - dars | Scopes | Closure
— Scope nima?
— Lexical Environment nima?
— Closure nima?
— Garbage collection with scopes.
32 - dars | Old var | Global Object
— Kitob o'qishga rag'bat.
— Nega var bugungi kunda kam ishlatiladi?
— IIFE: Immediately invoked function expression
— Global Obejct: window, global, globalThis.
— Function as an Object.
— NFE: Named Function Expression
— new Function: constructor function
33 - dars | setTimeout | setInterval
— sinxron(synchronous) va asinxron(asynchronous) tushunchalar - 1/2
— setTimeout qanday ishlaydi?
— setInterval qanday ishlaydi?
— Garbage collection / clearInterval / clearTimeout
34 - dars | Advanced functions
— function call
— function apply
— function bind
35 - dars | Cache | DDOS attack Types
— function call
— Transparent cache
— DDOS attack'ning sodda ko'rinishi.
— this qaysi holatlarda undefined bo'lib qoladi?
36 - dars | Advanced Objects | setter and getter functions 5/5
— Properties flag and descriptor
— defineProperty
— getOwnPropertyDescriptor
— setter and getter with function
37 - dars | prototype | __proto__
— proto nima?
— prototype nima?
— prototype vs proto farqi?
38 - dars | Classes Basics 1/4
— Classes nima?
— constructor classes nima?
— Global variables in class
— getter and setter with classes
— Computed named classes
39 - dars | Classes Basics 2/4
— OOP
— Inheritance - meros olish
— Overriding method
— Overriding constructor
— Overriding class fields
40 - dars | Classes Advanced 3/4
— Static variables
— Static functions
— Built-in classes
— instanceof
41 - dars | Classes Advanced 4/4
— Private classes
— Mixins
— Homework
42 - dars | Error handling | Callback
— try catch
— Callbacks
— Callback hell
— Built-in Callbacks
— Facebook login example
43 - dars | Promise
— Promise
— Throwing errors
— Finally
— Facebook login example
— Promise: .then, .catch, .finally
— promise chaining
— promise all
44 - dars | Async await
— try catch
— optional catch
— Throwing errors
— Finally
— Facebook login example
— async await
45 - dars | Generator functions
— generator function nima? // yield, return
— loop with generator function
— generator instance
— ID generating with generator function with real example
— .next va .return properties haqida.
46 - dars | Modules
— Module nima?
— Old organisational way
— import va export
— direct import
— default export va import
— export vs default export
— changing import name
47 - dars | Curry function
— Azizbek Mukhtorov bn interview suhbat
— Curry function nima?
— Nimaga curry function kerak?
— Infinite curry function
48 - dars | Proxy 1
— What is proxy?
— Target / handeler
— set / get
49 - dars | Proxy 2
— owenKeys
— Reflect
— Reference this
50 - dars | DOM kirish.
— Document Object Model ga kirish
— window haqida tushuncha
— JavaScript architecture
51 - dars | Nodes | Elements.
— Nodes in detail
— Elements in detail
— Parent and child
52 - dars | DOM Selectors.
— Selectors
— Query selectors
— DOM content manipulation
53 - dars | Attribute manipulation.
— Browser Load
— hasAttribute
— getAttribute
— setAttribute
— removeAttribute
54 - dars | Creating element.
— createElement
— createTextNode
— Insertion
— before
— after
— remove
— append
— prepend
— replaceWith
55 - dars | Style in JS.
— style
— cssText
— logical operation
56 - dars | Geometry.
— Geometry - offsetParent / offsetLeft
— Scroll - scroll / scrollBy / scrollTo
— Coordinate - getBoundingClientRect()
57 - dars | Events.
— Mouse Events
— addEventListener
— Params / this
— Mini Project
58 - dars | Events 2
— addEventListener
— Events with class
59 - dars | Events bubbling.
— Bubbling qanday muammolarga sabab bo'ladi?
— stopPropogation
— stopImmediatePropogation
60 - dars | Events Deligation.
— Browser default action?
— navigation
— prevent actions
— Project.
61 - dars | Mouse Events in Deep.
— onclick
— oncontextmenu
— onmouseover / mouseout
— onmousedown / mouseup
— onkeyPress — onchange
— onmousemove
— ondblclick — double click
— oncopy — ctr + c
— onpaste — str + v
62 - dars | Keyboard events and actions
— shiftKey: Shift
— altKey: Alt (or Opt for Mac)
— ctrlKey: Ctrl
— metaKey: Cmd for Mac
— Keyboard actions
— evnt.type
— event keys — can’t be triggered by default
63 - dars | Scroll events and Project
— show / hide
— events.scrollHeight
— element.scrollTop
— element.clientHeight
— mini project
65 - dars | Range | Select
— Range nima?
— Keyboard events
— Range Properties
— Selection Attrabutes
— Selection Events
— Range vs Select
66 - dars | Event loop
— Event loop nima?
— Microtask?
— Macrotask?
67 - dars | Execution structure
— DOMContentLoad
— Load / onerror / beforeunload / unload
— async va defer
68 - dars | Observer
— MutationObserver
— childList
— subtree
— attributes
— characterData
69 - dars | click jank attack. — clickjank attack qachon bo'ladi?
— Same Origin Policy
— Blocking top navigation
— X-Frame-Option
— extra video link
70 - dars | Array buffer.
— ArrayBuffer nima?
— TypedArray?|
— Unit8Array?
— DataView
— TextDecoder
— TextEncoder
71 - dars | Blob.
— Blob nima?
— Blob as URL
— Blob to buffer
72 - dars | File reader. — File
— FileReader
— readAsArrayBuffer
— readAsText
— readAsDataURL
73 - dars | fetch 1.
— Backend bilan ishlash.
— Fetch nima va uning terminlari haqida.
— Status codes
— Methods
— fetch with promise.
— fetch with async await
74 - dars | fetch 2.
— Backend bilan ishlash.
— backenddagi malumotni ekranga chiqarish.
— Status codes
— Malumotni backenddan o'chirib yuborish.
75 - dars | fetch 3 | Advanced.
— Fetch Body.
— Fetch headers
— Methods
— Authentication
— swagger.
76 - dars | fetch 4 | Expert Project.
— Sending Image
— Swagger in detail.
— Multipart file
— Form Data
— ReadbleStream
— Fetch API's
77 - dars | URL | SearchParams.
— new URL
— protocol / pathname / host / href / search / hash
— SearchParams
— URL bo'yicha filter qilish.
— URL bo'yicha share qilish.
78 - dars | LocalStorage. — setItem
— getItem
— removeItem
— clear
— Object.keys
79 - dars | SessionStorage.
— setItem
— getItem
— removeItem
— clear
— Object.keys
80 - dars | Cookies | Security.
— what is cookies?
— expires or max-age?
— session cookies?
— delete Cookie
— XSRF attack nima?
— Pul o'tkazmalarini qanday hack qilsa bo'ladi, agar...?
— Cookies flaglari haqida.
— Secure
— samesite - lax va strict
81 - dars | Encoding | Decoding | Security.
— decodeURIComponent.
— decodeURI.
— encodeURIComponent
— new URL.
— searchParams with encode and decoders
82 - dars | Websocket | ExpresJS | Backend.
— new Websocket
— open / message /error / close
— ws:// and wss://
— SearchParams
— Websocket Protocol
— Data Transfer
— Chatting application
— Backend with expressJS
83 - dars | IndexedDB 1 | Offline application.
— indexedDB nima va qachon ishlatiladi?
— offline database ochish.
— Request events haqida.
— DB versiyasini yangilash.
— ObjectStore yasash haqida.
84 - dars | IndexedDB 2 | Transactions | Pul o'tkazmalari.
— Transactions'lar nima?
— Bankdan pul o'tkazmalarni indexedDB orqali amalaga oshirish tartiblari.
— C reate DBStore.
— R ead DBStore.
— U pdate DBStore.
— D elete DBStore.
85 - dars | IndexedDB 3 | Index | Range | Search
— Index.
— Malumot qo'shishdagi options.
— Filter by data value / name / grade
— IDBKeyRange
— LowerBound / UperBound orqali filter qilish
— bound orqali filter qilish.
— "A", "Z" va "a", "z" bo'yicha filterlash.
BONUS VIDEOS
86 - dars | Custom Elements 1
— HTMLElement
— Shadow DOM.
— Slot / props in react
— children in react
87 - dars | Custom Elements 2 | Advanced
— style custom element
— :host / :host() / :host-context()
— ::slotted() / ::part()
— setter / getter
— connectedCallback
— disconnectedCallback
— observedAttributes
— render
88 - dars | RegExp - 1 | Basics
— Flags
— Searching / Replacing / Testing
— Character Classes
— Inverse classes
— Unicode Flag
— Anchor
— Word boundary
89 - dars | RegExp - 2 | Advanced
— Escaping
— Sets and Range
— Quantifiers
— Greedy mode
— Lazy mode
— Capturing groups
— Named groups
— Backreference
90 - dars | RegExp - 3 | Expert
— Alternation
— Lookhead
— Lookbehind
— Catastrophic backtracking
— Sticky flag
— Methods of RegExp
BONUS
Interview savollari va amaliy mashqlar: https://t.me/javascript_homework