CodeDala
JS
💻 For developers

JavaScript Start

11 topics, 99 lessons: variables, operators, conditions, loops, strings, numbers, arrays, objects, functions, DOM, and final projects

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 99 lessons⏱ 1-2 evenings🎓 Advanced
🎯 Mission
Master JavaScript Start
⚡+1040XP
🏆CertificatePDF
🎓Course complete
Progress0 / 99 · 0%
Next up: What is JavaScript

Course program

01

Переменные и типы

0 / 8 lessons
⌄
  1. 01

    What is JavaScript

    A programming language•console.log•First run⚡ +10
    ▶ Now
  2. 02

    Variables: let and const

    What a variable is•let•const•Naming rules⚡ +10
    Open
  3. 03

    Strings

    Single / double quotes•Template strings `${ }`•Length and concatenation⚡ +10
    Open
  4. 04

    Numbers

    One type `number`•Integers and fractions•Basic operations⚡ +10
    🔒 Pro
  5. 05

    The boolean type: true and false

    `true` / `false`•Comparisons return a boolean•Logical operators⚡ +10
    🔒 Pro
  6. 06

    null and undefined

    Two «no value» states•`undefined` — not assigned•`null` — empty on purpose⚡ +10
    🔒 Pro
  7. 07

    typeof — find out the type

    The `typeof` operator•Returns a string•The famous quirk with null⚡ +10
    🔒 Pro
  8. 08

    Dynamic typing

    The type is bound to the VALUE•Reassignment changes the type•Comparison with other languages⚡ +10
    🔒 Pro
02

Операторы

0 / 6 lessons
⌄
  1. 09

    Arithmetic operators

    + - * /•Like in math•Return a number⚡ +10
    🔒 Pro
  2. 10

    Division: / and %

    Fractional `/`•Remainder `%`•Parity via `% 2`⚡ +10
    🔒 Pro
  3. 11

    Power: **

    `a ** b`•Modern replacement for `Math.pow`•Right-associative⚡ +10
    🔒 Pro
  4. 12

    Shorthands: +=, -=, *=, /=

    `x += 1`•Equivalent to `x = x + 1`•All 4 operations⚡ +10
    🔒 Pro
  5. 13

    Increment and decrement: ++ and --

    `x++` and `x--`•Postfix vs prefix•When it’s appropriate⚡ +10
    🔒 Pro
  6. 14

    String concatenation: + and templates

    `+` with strings•Template strings `${}`•When to use which⚡ +10
    🔒 Pro
03

Условия

0 / 10 lessons
⌄
  1. 15

    if — a simple condition

    `if` syntax•The `{ ... }` block•When it fires⚡ +10
    🔒 Pro
  2. 16

    else — the alternative path

    `if ... else`•One of two options•Always together⚡ +10
    🔒 Pro
  3. 17

    else if — several branches

    A chain of `else if`•Top to bottom•First match wins — the rest don’t⚡ +10
    🔒 Pro
  4. 18

    Comparing values: == vs ===

    `===` strict equality•`==` loose (with coercion)•Why always `===`⚡ +10
    🔒 Pro
  5. 19

    Comparison: <, >, <=, >=

    Relational operators•Return `true`/`false`•Can’t be chained⚡ +10
    🔒 Pro
  6. 20

    Logical operators: &&, ||, !

    `&&` — and•`||` — or•`!` — not⚡ +10
    🔒 Pro
  7. 21

    Ternary operator: a ? b : c

    A short form of `if/else`•Returns a value•When it’s appropriate⚡ +10
    🔒 Pro
  8. 22

    switch — selection by value

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

    truthy and falsy values

    JS converts to boolean•Falsy: 6 special values•Everything else is truthy⚡ +10
    🔒 Pro
  10. 24

    Modern JS: ?. and ??

    `?.` — optional chaining•`??` — nullish coalescing•Protection from `null`/`undefined`⚡ +10
    🔒 Pro
04

Циклы

0 / 10 lessons
⌄
  1. 25

    for — the standard counter

    3 parts in the parentheses•Body in `{ }`•When to use it⚡ +10
    🔒 Pro
  2. 26

    while — a loop with a condition check

    `while (condition) { ... }`•When the number of steps is unknown•Don’t forget to update⚡ +10
    🔒 Pro
  3. 27

    do...while — run at least once

    Body first, check later•Guarantees one pass•Rare, but sometimes needed⚡ +10
    🔒 Pro
  4. 28

    for...of — iterate over elements

    A loop over an array•Without an index•The cleanest way⚡ +10
    🔒 Pro
  5. 29

    for...in — iterate over object keys

    A loop over object keys•NOT for arrays!•When it’s appropriate⚡ +10
    🔒 Pro
  6. 30

    break — exit the loop

    Early interruption•Right after `break`•Only the current loop⚡ +10
    🔒 Pro
  7. 31

    continue — skip a step

    Jump to the next iteration•The current one is cut off•Handy for filtering⚡ +10
    🔒 Pro
  8. 32

    .forEach — an array method

    An array method, not a loop•Takes a function•Instead of `for...of` for simple cases⚡ +10
    🔒 Pro
  9. 33

    Nested loops

    A loop inside a loop•Tables / grids•Complexity grows fast⚡ +10
    🔒 Pro
  10. 34

    Accumulation: counter and sum

    Counter pattern•Sum pattern•Declare BEFORE the loop⚡ +10
    🔒 Pro
05

Строки

0 / 10 lessons
⌄
  1. 35

    String length and character access

    `.length`•`s[i]` and `s.charAt(i)`•Indexing from 0⚡ +10
    🔒 Pro
  2. 36

    String slice: .slice()

    `s.slice(start, end)`•`end` is NOT included•Negative indices⚡ +10
    🔒 Pro
  3. 37

    Case: .toUpperCase() and .toLowerCase()

    All to upper case•All to lower case•Return a new string⚡ +10
    🔒 Pro
  4. 38

    Search: .includes(), .indexOf()

    `.includes(sub)` → boolean•`.indexOf(sub)` → number•`-1` if not found⚡ +10
    🔒 Pro
  5. 39

    Replacement: .replace() and .replaceAll()

    Replace ONE occurrence•`.replaceAll` — all•Returns a new string⚡ +10
    🔒 Pro
  6. 40

    Splitting and joining: .split() and .join()

    `s.split(sep)` → array•`arr.join(sep)` → string•Mirror operations⚡ +10
    🔒 Pro
  7. 41

    .trim() — remove edge whitespace

    Remove spaces and `\n`•`.trimStart`, `.trimEnd`•Before saving inputs⚡ +10
    🔒 Pro
  8. 42

    startsWith and endsWith

    `s.startsWith(prefix)`•`s.endsWith(suffix)`•Return a boolean⚡ +10
    🔒 Pro
  9. 43

    Multi-line template strings

    Backticks allow line breaks•`\n` also works•Handy for templates⚡ +10
    🔒 Pro
  10. 44

    String comparison and Number()

    Alphabetical comparison•`Number("42")` → number•`String(42)` → string⚡ +10
    🔒 Pro
06

Числа и Math

0 / 8 lessons
⌄
  1. 45

    Math.round, .floor, .ceil — rounding

    `round` — to nearest•`floor` — down•`ceil` — up⚡ +10
    🔒 Pro
  2. 46

    Math.abs, Math.sign

    `abs(x)` — absolute value•`sign(x)` — sign ±1 / 0•Purely numeric⚡ +10
    🔒 Pro
  3. 47

    Math.min and Math.max

    Minimum / maximum of arguments•With an array — via `...`•Accept ANY number of them⚡ +10
    🔒 Pro
  4. 48

    Math.random — random numbers

    Returns 0 ≤ x < 1•An integer in a range•Games, sampling, tests⚡ +10
    🔒 Pro
  5. 49

    parseInt and Number — parsing numbers

    `Number("42")` — strict•`parseInt("42px")` — lenient•`+x` — the short way⚡ +10
    🔒 Pro
  6. 50

    .toFixed() — formatting decimals

    A given number of decimal places•Returns a STRING (!)•Prices, percentages⚡ +10
    🔒 Pro
  7. 51

    NaN, Infinity and checks

    `NaN` — not a number•`Infinity` — infinity•`Number.isNaN`, `Number.isFinite`⚡ +10
    🔒 Pro
  8. 52

    Number.isInteger and checking numbers

    `Number.isInteger(x)`•Integer vs fractional•Safe range⚡ +10
    🔒 Pro
07

Массивы

0 / 12 lessons
⌄
  1. 53

    Creating an array and access

    `[a, b, c]`•`arr[i]`•Index from 0⚡ +10
    🔒 Pro
  2. 54

    .length and iteration

    `.length`•for loop by index•for...of by elements⚡ +10
    🔒 Pro
  3. 55

    .push() and .pop() — the end of an array

    `.push(x)` to add•`.pop()` to take•Mutation!⚡ +10
    🔒 Pro
  4. 56

    .shift() and .unshift() — the start of an array

    `.unshift(x)` to the start•`.shift()` take from the start•Slower than push/pop⚡ +10
    🔒 Pro
  5. 57

    .indexOf() and .includes() — search

    `.includes(x)` → boolean•`.indexOf(x)` → index / -1•Comparison via `===`⚡ +10
    🔒 Pro
  6. 58

    .slice() — a copy of a piece

    `arr.slice(start, end)`•Returns a NEW array•Doesn’t mutate⚡ +10
    🔒 Pro
  7. 59

    .map() — transformation

    Each element → a new one•Returns an array of the same length•Declarative style⚡ +10
    🔒 Pro
  8. 60

    .filter() — selecting by condition

    Only matching ones•Returns a NEW array•The length may be smaller⚡ +10
    🔒 Pro
  9. 61

    .reduce() — fold into a single value

    `reduce(fn, init)`•Sum / count / max / min•Accumulator + current⚡ +10
    🔒 Pro
  10. 62

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

    `.find` — the first match•`.some` — is there at least one?•`.every` — do all match?⚡ +10
    🔒 Pro
  11. 63

    Spread `...` — copies and merging

    `[...arr]` a copy•`[...a, ...b]` merging•`Math.max(...nums)`⚡ +10
    🔒 Pro
  12. 64

    Sorting: .sort()

    Sorts in place•Without an argument — lexicographically•Comparator `(a, b) => a - b`⚡ +10
    🔒 Pro
08

Объекты

0 / 10 lessons
⌄
  1. 65

    Creating an object with a literal

    `{ key: value }`•Several properties•A comma between them⚡ +10
    🔒 Pro
  2. 66

    Access: dot vs square brackets

    `obj.field`•`obj["field"]`•When you need which⚡ +10
    🔒 Pro
  3. 67

    Changing and adding fields

    `obj.field = newVal`•A new field — just assign•Works with `const`⚡ +10
    🔒 Pro
  4. 68

    delete — remove a field

    `delete obj.field`•The field disappears•An immutable alternative⚡ +10
    🔒 Pro
  5. 69

    Object.keys, .values, .entries

    All keys / values / pairs•Return arrays•For iteration⚡ +10
    🔒 Pro
  6. 70

    Object destructuring

    `const { a, b } = obj`•Several fields at once•Default values⚡ +10
    🔒 Pro
  7. 71

    Shorthand: { name } instead of { name: name }

    Name matches — write it short•Modern style•Less repetition⚡ +10
    🔒 Pro
  8. 72

    Spread `...` for objects

    `{ ...obj }` a copy•`{ ...a, ...b }` merging•Immutable updates⚡ +10
    🔒 Pro
  9. 73

    Computed keys: { [key]: value }

    A dynamic key•The name from a variable•`[...]` in a literal⚡ +10
    🔒 Pro
  10. 74

    Methods and this

    A function as a field•`this` = the object•NOT arrow functions for methods⚡ +10
    🔒 Pro
09

Функции

0 / 12 lessons
⌄
  1. 75

    Declaring a function

    `function name(args) { }`•Parameters and `return`•Call: `name(args)`⚡ +10
    🔒 Pro
  2. 76

    Function expression vs declaration

    `function name() { }`•`const name = function() { }`•Hoisting differs⚡ +10
    🔒 Pro
  3. 77

    Arrow functions

    `(args) => ...`•Without `function` and `return`•Modern style⚡ +10
    🔒 Pro
  4. 78

    Default parameters

    `function f(x = 10)`•If the argument is `undefined`•Any expression⚡ +10
    🔒 Pro
  5. 79

    Rest parameters: ...args

    `function f(...args)`•Collects into an array•Any number of them⚡ +10
    🔒 Pro
  6. 80

    Spread at call time

    Unpack an array into arguments•Handy with Math.max etc.•The mirror of rest parameters⚡ +10
    🔒 Pro
  7. 81

    Closures

    A function remembers its environment•A counter via a closure•State isolation⚡ +10
    🔒 Pro
  8. 82

    A function as an argument (HOF)

    Higher-order functions•We pass a function•.map / .filter — examples⚡ +10
    🔒 Pro
  9. 83

    Returning a function from a function

    Function factories•Currying (curry)•Flexible APIs⚡ +10
    🔒 Pro
  10. 84

    this in regular vs arrow functions

    Regular — dynamic this•Arrow — lexical this•When to use which⚡ +10
    🔒 Pro
  11. 85

    Hoisting: declaration vs expression

    Declaration «floats up»•Expression — no•Modern teams’ style⚡ +10
    🔒 Pro
  12. 86

    IIFE — an immediately invoked function

    `(function() { ... })()`•Creates an isolated scope•An old pattern⚡ +10
    🔒 Pro
10

DOM и события

0 / 8 lessons
⌄
  1. 87

    getElementById — find an element

    What the DOM is•Finding an element by id•Reading and writing⚡ +10
    🔒 Pro
  2. 88

    querySelector — CSS selectors

    Universal search•querySelector vs querySelectorAll•Familiar CSS syntax⚡ +10
    🔒 Pro
  3. 89

    textContent vs innerHTML

    Change an element’s text•textContent — safe•innerHTML — with HTML tags⚡ +10
    🔒 Pro
  4. 90

    element.style — change CSS from JS

    Direct access to styles•camelCase instead of kebab-case•When classList is better⚡ +10
    🔒 Pro
  5. 91

    classList — toggle classes

    Styles via CSS, logic via JS•add/remove/toggle/contains•Cleaner than .style⚡ +10
    🔒 Pro
  6. 92

    addEventListener — reacting to a click

    The heart of interactivity•An arrow callback•event vs e⚡ +10
    🔒 Pro
  7. 93

    Creating elements: createElement + appendChild

    Dynamic DOM•createElement•appendChild / append⚡ +10
    🔒 Pro
  8. 94

    Forms: input.value

    Reading user input•.value on an input•The input vs change event⚡ +10
    🔒 Pro
11

Финальные проекты

0 / 5 lessons
⌄
  1. 95

    Project 1: Calculator

    Reading from an input•Converting to a number•switch for the operation⚡ +10
    🔒 Pro
  2. 96

    Project 2: Click counter

    State in a variable•Updating the UI on each event•The localStorage idea⚡ +10
    🔒 Pro
  3. 97

    Project 3: TODO list

    An array of tasks•Re-rendering the list•Removal by index⚡ +10
    🔒 Pro
  4. 98

    Project 4: Timer with setInterval

    setInterval / clearInterval•Storing the timer id•Start / stop / reset⚡ +10
    🔒 Pro
  5. 99

    Project 5: Mini-quiz

    An array of question objects•Counting correct answers•A final report
    Course complete
    🔒 Pro