CodeDala
JS
💻 Әзірлеушілерге

JavaScript Бастау

11 тақырып, 99 сабақ: айнымалылар, операторлар, шарттар, циклдер, жолдар, сандар, массивтер, нысандар, функциялар, DOM және финалдық жобалар

Не құрастырасың
📘Берік іргетас
⚡Браузерде тәжірибе
🎯Шағын жобалар
🎓Курс сертификаты
📘 99 сабақ⏱ 1-2 кеш🎓 Кеңейтілген
🎯 Мақсат
JavaScript Бастау меңгеру
⚡+1040XP
🏆СертификатPDF
🎓Курс аяқталды
Прогресс0 / 99 · 0%
Келесі қадам: JavaScript дегеніміз не

Курс бағдарламасы

01

Айнымалылар мен типтер

0 / 8 сабақ
⌄
  1. 01

    JavaScript дегеніміз не

    Бағдарламалау тілі•console.log•Алғашқы іске қосу⚡ +10
    ▶ Қазір
  2. 02

    Айнымалылар: let және const

    Айнымалы деген не•let•const•Атау ережелері⚡ +10
    Ашық
  3. 03

    Жолдар

    Дара / қос тырнақшалар•Шаблонды жолдар `${ }`•Ұзындық пен біріктіру⚡ +10
    Ашық
  4. 04

    Сандар

    Бір тип `number`•Бүтіндер мен бөлшектер•Негізгі операциялар⚡ +10
    🔒 Pro
  5. 05

    Логикалық тип: true мен false

    `true` / `false`•Салыстыру boolean қайтарады•Логикалық операторлар⚡ +10
    🔒 Pro
  6. 06

    null мен undefined

    Екі «мән жоқ»•`undefined` — меншіктелмеген•`null` — арнайы бос⚡ +10
    🔒 Pro
  7. 07

    typeof — типті білу

    `typeof` операторы•Жол қайтарады•null-мен әйгілі ерекшелік⚡ +10
    🔒 Pro
  8. 08

    Динамикалық типтеу

    Тип МӘНГЕ байланған•Қайта меншіктеу типті өзгертеді•Басқа тілдермен салыстыру⚡ +10
    🔒 Pro
02

Операторлар

0 / 6 сабақ
⌄
  1. 09

    Арифметикалық операторлар

    + - * /•Математикадағыдай•Сан қайтарады⚡ +10
    🔒 Pro
  2. 10

    Бөлу: / және %

    Бөлшек `/`•Қалдық `%`•`% 2` арқылы жұп-тақ⚡ +10
    🔒 Pro
  3. 11

    Дәреже: **

    `a ** b`•`Math.pow` қазіргі баламасы•Оңға бағытталған⚡ +10
    🔒 Pro
  4. 12

    Қысқартулар: +=, -=, *=, /=

    `x += 1`•`x = x + 1` баламасы•Барлық 4 амал⚡ +10
    🔒 Pro
  5. 13

    Инкремент пен декремент: ++ және --

    `x++` пен `x--`•Постфикс vs префикс•Қашан орынды⚡ +10
    🔒 Pro
  6. 14

    Жолдарды біріктіру: + және шаблондар

    `+` жолдармен•Шаблонды жолдар `${}`•Не қашан қолдану⚡ +10
    🔒 Pro
03

Шарттар

0 / 10 сабақ
⌄
  1. 15

    if — қарапайым шарт

    `if` синтаксисі•`{ ... }` блогы•Қашан жұмыс істейді⚡ +10
    🔒 Pro
  2. 16

    else — балама жол

    `if ... else`•Екіден біреуі•Әрқашан бірге⚡ +10
    🔒 Pro
  3. 17

    else if — бірнеше тармақ

    `else if` тізбегі•Жоғарыдан төменге•Біріншісі жұмыс істесе — қалғандары жоқ⚡ +10
    🔒 Pro
  4. 18

    Мәндерді салыстыру: == vs ===

    `===` қатаң теңдік•`==` жұмсақ (түрлендірумен)•Неге әрқашан `===`⚡ +10
    🔒 Pro
  5. 19

    Салыстыру: <, >, <=, >=

    Қатынас операторлары•`true`/`false` қайтарады•Тізбектеуге болмайды⚡ +10
    🔒 Pro
  6. 20

    Логикалық операторлар: &&, ||, !

    `&&` — және•`||` — немесе•`!` — емес⚡ +10
    🔒 Pro
  7. 21

    Тернарлы оператор: a ? b : c

    `if/else` қысқа түрі•Мән қайтарады•Қашан орынды⚡ +10
    🔒 Pro
  8. 22

    switch — мән бойынша таңдау

    `switch (val)`•`case` + `break`•`default`⚡ +10
    🔒 Pro
  9. 23

    truthy мен falsy мәндер

    JS boolean-ге айналдырады•Falsy: 6 ерекше мән•Қалғандары — truthy⚡ +10
    🔒 Pro
  10. 24

    Қазіргі JS: ?. және ??

    `?.` — optional chaining•`??` — nullish coalescing•`null`/`undefined`-ден қорғау⚡ +10
    🔒 Pro
04

Циклдер

0 / 10 сабақ
⌄
  1. 25

    for — стандартты есептеуіш

    Жақшаларда 3 бөлім•`{ }` ішіндегі денесі•Қашан қолдану⚡ +10
    🔒 Pro
  2. 26

    while — шартпен цикл

    `while (шарт) { ... }`•Қадам саны белгісіз болғанда•Жаңартуды ұмытпа⚡ +10
    🔒 Pro
  3. 27

    do...while — кем дегенде бір рет орындау

    Алдымен дене, содан тексеру•Бір өтуді кепілдендіреді•Сирек, бірақ керек болады⚡ +10
    🔒 Pro
  4. 28

    for...of — элементтер бойынша жүру

    Массив бойынша цикл•Индекссіз•Ең таза тәсіл⚡ +10
    🔒 Pro
  5. 29

    for...in — нысанның кілттері бойынша

    Нысан кілттері бойынша цикл•Массивтерге ҚОЛДАНБА!•Қашан орынды⚡ +10
    🔒 Pro
  6. 30

    break — циклден шығу

    Мерзімінен бұрын тоқтату•`break`-тен кейін бірден шығу•Тек ағымдағы цикл⚡ +10
    🔒 Pro
  7. 31

    continue — қадамды өткізіп жіберу

    Келесі итерацияға өту•Ағымдағысы үзіледі•Сүзу үшін ыңғайлы⚡ +10
    🔒 Pro
  8. 32

    .forEach — массив әдісі

    Цикл емес, массив әдісі•Функцияны қабылдайды•Қарапайым жағдайда `for...of` орнына⚡ +10
    🔒 Pro
  9. 33

    Кірістірілген циклдер

    Цикл ішіндегі цикл•Кестелер / торлар•Күрделілік жылдам өседі⚡ +10
    🔒 Pro
  10. 34

    Жинақтау: есептеуіш пен қосынды

    Есептеуіш үлгісі•Қосынды үлгісі•Цикл АЛДЫНДА жариялау⚡ +10
    🔒 Pro
05

Жолдар

0 / 10 сабақ
⌄
  1. 35

    Жол ұзындығы және символдарға қол жеткізу

    `.length`•`s[i]` және `s.charAt(i)`•0-ден индекстеу⚡ +10
    🔒 Pro
  2. 36

    Жолдың тілімі: .slice()

    `s.slice(start, end)`•`end` ҚОСЫЛМАЙДЫ•Теріс индекстер⚡ +10
    🔒 Pro
  3. 37

    Регистр: .toUpperCase() пен .toLowerCase()

    Барлығы бас әріпке•Барлығы кіші әріпке•Жаңа жол қайтарады⚡ +10
    🔒 Pro
  4. 38

    Іздеу: .includes(), .indexOf()

    `.includes(sub)` → boolean•`.indexOf(sub)` → сан•Табылмаса `-1`⚡ +10
    🔒 Pro
  5. 39

    Алмастыру: .replace() пен .replaceAll()

    БІР кездесуді алмастыру•`.replaceAll` — барлығын•Жаңа жол қайтарады⚡ +10
    🔒 Pro
  6. 40

    Бөлу мен біріктіру: .split() пен .join()

    `s.split(sep)` → массив•`arr.join(sep)` → жол•Айнадай амалдар⚡ +10
    🔒 Pro
  7. 41

    .trim() — шеттегі бос орындарды алып тастау

    Бос орындар мен `\n` алу•`.trimStart`, `.trimEnd`•Енгізу алдында сақтау⚡ +10
    🔒 Pro
  8. 42

    startsWith пен endsWith

    `s.startsWith(prefix)`•`s.endsWith(suffix)`•Boolean қайтарады⚡ +10
    🔒 Pro
  9. 43

    Көп жолды шаблонды жолдар

    Бэктиктер жол ауыстыруды қолдайды•`\n` де жұмыс істейді•Шаблондарға ыңғайлы⚡ +10
    🔒 Pro
  10. 44

    Жолдарды салыстыру және Number()

    Алфавит бойынша салыстыру•`Number("42")` → сан•`String(42)` → жол⚡ +10
    🔒 Pro
06

Сандар мен Math

0 / 8 сабақ
⌄
  1. 45

    Math.round, .floor, .ceil — дөңгелектеу

    `round` — ең жақынға•`floor` — төмен•`ceil` — жоғары⚡ +10
    🔒 Pro
  2. 46

    Math.abs, Math.sign

    `abs(x)` — модуль•`sign(x)` — таңба ±1 / 0•Тек сандық⚡ +10
    🔒 Pro
  3. 47

    Math.min пен Math.max

    Аргументтерден ең аз / көп•Массивпен — `...` арқылы•ҚАЛАҒАН санды қабылдайды⚡ +10
    🔒 Pro
  4. 48

    Math.random — кездейсоқ сандар

    0 ≤ x < 1 қайтарады•Диапазондағы бүтін•Ойындар, сэмплинг, тесттер⚡ +10
    🔒 Pro
  5. 49

    parseInt пен Number — сандарды талдау

    `Number("42")` — қатаң•`parseInt("42px")` — лоялды•`+x` — қысқа тәсіл⚡ +10
    🔒 Pro
  6. 50

    .toFixed() — бөлшектерді форматтау

    Үтірден кейінгі көрсетілген таңба саны•ЖОЛ қайтарады (!)•Бағалар, пайыздар⚡ +10
    🔒 Pro
  7. 51

    NaN, Infinity және тексерулер

    `NaN` — сан емес•`Infinity` — шексіздік•`Number.isNaN`, `Number.isFinite`⚡ +10
    🔒 Pro
  8. 52

    Number.isInteger және сандарды тексеру

    `Number.isInteger(x)`•Бүтін vs бөлшек•Қауіпсіз диапазон⚡ +10
    🔒 Pro
07

Массивтер

0 / 12 сабақ
⌄
  1. 53

    Массив жасау және қол жеткізу

    `[a, b, c]`•`arr[i]`•0-ден индекс⚡ +10
    🔒 Pro
  2. 54

    .length және итерация

    `.length`•Индекс бойынша for-цикл•for...of элементтер бойынша⚡ +10
    🔒 Pro
  3. 55

    .push() пен .pop() — массив соңы

    `.push(x)` қосу•`.pop()` алу•Мутация!⚡ +10
    🔒 Pro
  4. 56

    .shift() пен .unshift() — массив басы

    `.unshift(x)` басына•`.shift()` бастан алу•push/pop-тан баяуырақ⚡ +10
    🔒 Pro
  5. 57

    .indexOf() пен .includes() — іздеу

    `.includes(x)` → boolean•`.indexOf(x)` → индекс / -1•`===` арқылы салыстыру⚡ +10
    🔒 Pro
  6. 58

    .slice() — бөліктің көшірмесі

    `arr.slice(start, end)`•ЖАҢА массив қайтарады•Мутацияламайды⚡ +10
    🔒 Pro
  7. 59

    .map() — түрлендіру

    Әр элемент → жаңа•Сондай ұзындықтағы массив•Декларативті стиль⚡ +10
    🔒 Pro
  8. 60

    .filter() — шарт бойынша таңдау

    Тек сәйкес келетіндер•ЖАҢА массив қайтарады•Ұзындығы аз болуы мүмкін⚡ +10
    🔒 Pro
  9. 61

    .reduce() — бір мәнге жинау

    `reduce(fn, init)`•Қосынды / есеп / max / min•Аккумулятор + ағымдағы⚡ +10
    🔒 Pro
  10. 62

    .find(), .some(), .every()

    `.find` — алғашқы сәйкес•`.some` — кем дегенде біреуі бар ма?•`.every` — бәрі сәйкес пе?⚡ +10
    🔒 Pro
  11. 63

    Spread `...` — көшірмелер мен біріктіру

    `[...arr]` көшірмесі•`[...a, ...b]` біріктіру•`Math.max(...nums)`⚡ +10
    🔒 Pro
  12. 64

    Сұрыптау: .sort()

    Орнында сұрыптайды•Аргументсіз — лексикографиялық•Салыстырғыш `(a, b) => a - b`⚡ +10
    🔒 Pro
08

Нысандар

0 / 10 сабақ
⌄
  1. 65

    Литералмен нысан жасау

    `{ key: value }`•Бірнеше қасиет•Арасында үтір⚡ +10
    🔒 Pro
  2. 66

    Қол жеткізу: нүкте vs тік жақшалар

    `obj.field`•`obj["field"]`•Не қашан керек⚡ +10
    🔒 Pro
  3. 67

    Өрістерді өзгерту мен қосу

    `obj.field = newVal`•Жаңа өріс — меншікте•`const`-пен жұмыс істейді⚡ +10
    🔒 Pro
  4. 68

    delete — өрісті өшіру

    `delete obj.field`•Өріс жоқ болады•Өзгермейтін балама⚡ +10
    🔒 Pro
  5. 69

    Object.keys, .values, .entries

    Барлық кілттер / мәндер / жұптар•Массивтер қайтарады•Итерация үшін⚡ +10
    🔒 Pro
  6. 70

    Нысан деструктуризациясы

    `const { a, b } = obj`•Бірнеше өрісті бірден•Үнсіз мәндер⚡ +10
    🔒 Pro
  7. 71

    Shorthand: { name: name } орнына { name }

    Атау сәйкес келсе — қысқа жаз•Қазіргі стиль•Аз қайталау⚡ +10
    🔒 Pro
  8. 72

    Нысандарға spread `...`

    `{ ...obj }` көшірмесі•`{ ...a, ...b }` біріктіру•Өзгермейтін жаңартулар⚡ +10
    🔒 Pro
  9. 73

    Computed keys: { [key]: value }

    Динамикалық кілт•Айнымалыдан атау•Литералда `[...]`⚡ +10
    🔒 Pro
  10. 74

    Әдістер мен this

    Функция өріс ретінде•`this` = нысан•Әдістерге жебелі ЕМЕС⚡ +10
    🔒 Pro
09

Функциялар

0 / 12 сабақ
⌄
  1. 75

    Функция жариялау

    `function name(args) { }`•Параметрлер мен `return`•Шақыру: `name(args)`⚡ +10
    🔒 Pro
  2. 76

    Функция-өрнегі vs declaration

    `function name() { }`•`const name = function() { }`•Hoisting әртүрлі⚡ +10
    🔒 Pro
  3. 77

    Жебелі функциялар

    `(args) => ...`•`function` мен `return`-сіз•Қазіргі стиль⚡ +10
    🔒 Pro
  4. 78

    Үнсіз параметрлер

    `function f(x = 10)`•Аргумент `undefined` болса•Кез келген өрнек⚡ +10
    🔒 Pro
  5. 79

    Rest параметрлері: ...args

    `function f(...args)`•Массивке жинайды•Қалаған санда⚡ +10
    🔒 Pro
  6. 80

    Шақырғанда spread

    Массивті аргументтерге шашу•Math.max-пен ыңғайлы•Rest-тің айнасы⚡ +10
    🔒 Pro
  7. 81

    Тұйықтар (closures)

    Функция қоршауды есте сақтайды•Closure арқылы есептеуіш•Күйді оқшаулау⚡ +10
    🔒 Pro
  8. 82

    Функция аргумент ретінде (HOF)

    Higher-order functions•Функцияны береміз•.map / .filter — мысалдар⚡ +10
    🔒 Pro
  9. 83

    Функциядан функция қайтару

    Функция фабрикалары•Карриинг (curry)•Икемді API⚡ +10
    🔒 Pro
  10. 84

    this кәдімгіде vs жебеліде

    Кәдімгі — динамикалық this•Жебелі — лексикалық this•Қашан қайсысын⚡ +10
    🔒 Pro
  11. 85

    Hoisting: declaration vs expression

    Declaration «қалқып шығады»•Expression — жоқ•Қазіргі команда стилі⚡ +10
    🔒 Pro
  12. 86

    IIFE — бірден шақырылған функция

    `(function() { ... })()`•Оқшауланған ауқым жасайды•Ескі үлгі⚡ +10
    🔒 Pro
10

DOM және оқиғалар

0 / 8 сабақ
⌄
  1. 87

    getElementById — элемент табу

    DOM деген не•id бойынша элемент іздеу•Оқу мен жазу⚡ +10
    🔒 Pro
  2. 88

    querySelector — CSS-селекторлар

    Әмбебап іздеу•querySelector пен querySelectorAll•CSS-тің таныс синтаксисі⚡ +10
    🔒 Pro
  3. 89

    textContent пен innerHTML

    Элемент мәтінін өзгерту•textContent — қауіпсіз•innerHTML — HTML-тегтермен⚡ +10
    🔒 Pro
  4. 90

    element.style — JS-тен CSS өзгерту

    Стильдерге тікелей қол жеткізу•kebab-case орнына camelCase•classList қашан жақсы⚡ +10
    🔒 Pro
  5. 91

    classList — кластарды ауыстыру

    Стильдер CSS арқылы, логика JS арқылы•add/remove/toggle/contains•`.style`-ден таза⚡ +10
    🔒 Pro
  6. 92

    addEventListener — басуға жауап беру

    Интерактивтіліктің жүрегі•Жебелі callback•event пен e⚡ +10
    🔒 Pro
  7. 93

    Элементтер жасау: createElement + appendChild

    Динамикалық DOM•createElement•appendChild / append⚡ +10
    🔒 Pro
  8. 94

    Формалар: input.value

    Пайдаланушы енгізуін оқу•input-тағы .value•input vs change оқиғасы⚡ +10
    🔒 Pro
11

Финалдық жобалар

0 / 5 сабақ
⌄
  1. 95

    Жоба 1: Калькулятор

    input-тен оқу•Санға айналдыру•switch — операция үшін⚡ +10
    🔒 Pro
  2. 96

    Жоба 2: Басу санағыш

    Айнымалыдағы күй•Әр оқиғада UI жаңарту•localStorage идеясы⚡ +10
    🔒 Pro
  3. 97

    Жоба 3: TODO-тізім

    Тапсырмалар массиві•Тізімді қайта салу•Индекс бойынша өшіру⚡ +10
    🔒 Pro
  4. 98

    Жоба 4: setInterval-мен таймер

    setInterval / clearInterval•Таймер id-сын сақтау•Бастау / тоқтату / қайта орнату⚡ +10
    🔒 Pro
  5. 99

    Жоба 5: Мини-квиз

    Сұрақтар-нысандардың массиві•Дұрыс жауаптарды санау•Финалдық есеп
    Курс аяқталды
    🔒 Pro