Повторное обучение JavaScript: руководство по основам для начинающих
programming web-development javascript beginners-to-coding javascript-tutorial tutorial-for-beginners understanding-javascript javascript-for-beginners javascript-guide

Повторное обучение JavaScript: руководство по основам для начинающих

8 июля 2025 г.

Из названия этой статьи вы можете сказать, что я снова изучаю JavaScript с нуля и буду строить свой путь, чтобы React and Node.js. Вам может быть интересно, почему. Ну, я недавно написал статью для организации, и это часть отзывов, которую я получил: «... репо несколько улучшено с последним обновлением, но это все еще не лучшее качество кода». Можно сказать, что я чувствовал себя ужасно. Но, тем не менее, это был конструктивный обзор. Это заставило меня заглянуть внутрь, и я обнаружил, что я потерял связь со многими своими способностями кодирования.

Я нахожусь в путешествие, чтобы освежить себя с основами, и я беру вас вместе со мной! Вы можете думать об этом как об учебном пособии для начинающих, но он также предназначен для людей с уже существующими знаниями. Это не слишком глубоко и просто дает фрагменты с небольшими объяснениями для тех, кто ищет быстрое освежение.

  • Я учусь на этом видео.

    https://youtu.be/eerdgm-ehjq?si=-qxazj7xicccst4h

Эта статья является частью серии, которую я начинаю.

В этом уроке мы будем:

  • Понять, что такое JavaScript и почему он мощный
  • Напишите и протестируйте наш первый код JS, используя консоли браузера
  • Изучите типы данных, такие как числа и строки
  • Узнайте о переменных, выражениях и заявлениях
  • Погрузитесь в модель объекта документа (DOM)
  • Используйте логику и функции для создания простой корзины для покупок

Давайте начнем.

Что такое JavaScript?

JavaScript (JS) - это язык программирования, используемый для того, чтобы сделать веб -сайты динамичными. Иногда полезно напоминать себе основы, чтобы вы не злоупотребляли и не использовали потенциал JavaScript. В то время как HTML дает структуру, а CSS добавляет стиль,JavaScript делает вещи интерактивными-Как выпадающие меню, всплывающие окна, калькуляторы, игры и отзывы в реальном времени.

Для этого урока мы используемGoogle ChromeиDevtools Console- Не требуется дополнительного программного обеспечения.

Ваш первый код JavaScript (настройка не требуется)

Как открыть консоль браузера JavaScript:

  1. Загрузите/установите любой веб -браузер по вашему выбору, или вы можете использовать браузер по умолчанию на своем ПК.
  2. Щелкните правой кнопкой мыши на любой веб-странице
  3. НажиматьОсмотретьв раскрывающемся меню, которое появляется
  4. ВыберитеКонсольвкладка

На вкладке консоли тип:

alert('Hello there!');

Эта команда выявляет предупреждение о браузере. JS только что запустил вашу инструкцию.

Теперь попробуйте:

console.log('Logging to the console');

Это регистрирует сообщение в консоли, очень важный инструмент для отладки.

Числа и операции в JavaScript

JS обрабатывает все основные математические операции:

2 + 2          // 4 addition
10 - 3         // 7 subtraction
10 * 3         // 30 multiplication
10 / 2         // 5 divison
15 % 2         // 3 modulus
10^3           // 1000 exponential

Javascript order of Operations

JS следуетПемдасправила:

1 + 1 * 3        // 4
(1 + 1) * 3      // 6

Остерегайтесь десятичных ошибок в JavaScript (математика с плавающей запятой)

0.1 + 0.2        // 0.30000000000000004

Из -за того, как компьютеры обрабатывают десятичные числа, могут возникнуть небольшие неточности.

В этом случае при расчете за деньги используйте центы (меньшая валюта).

(2095 + 799) / 100     // 28.94 (represent $20.95 + $7.99)

JavaScript Math.round Метод фрагмент

ИспользоватьMath.round()Для точных итог:

Math.round(2.7)      // 3
Math.round(2.3)      // 2

Вы можете окружить налогом или итоги, как это:

Math.round((2095 + 799) * 0.1) / 100   // $2.89 tax rounded

Переменные в JavaScript: хранение значений

Использоватьпеременныехранить и повторно использовать данные.

name = Dumebi's tutorial
console.log(name)

пусть и констант в JavaScript

let quantity = 3;
quantity = quantity + 1;    // 4

const taxRate = 0.1;

// taxRate = 0.2; ❌ Error — const can’t be reassigned

Последний комментарий говорит, что после того, как имя переменной основывается наconstего значение или контент не могут быть изменены позже в коде.

Использоватьconstпо умолчанию; переключиться наletЕсли вынуждатьсяпереназначить.

JavaScript имена соглашений

  • Используйте Camelcase:itemPrice, нетitem_price
  • Начните с букв (не чисел или символов)

Строки: работа с текстом в JavaScript

АнитьПросто текст, завернутый в кавычки:

'hello'
"world"
`template`

Конкатенация в JavaScript

starterText = "The price is "
price = "$15"        
endText = starterText + price
console.log(endText)
// The price is $15

Шаблоны литералы в JavaScript

Мы используем бэктики, знак доллара и вьющиеся скобки `${}`Для шаблонов литералов:

num1 = 5
num2 = 6
add = num1 + num2 
addt = "Total number is:" + `${add}`
console.log(addt)
// Total number is:11

Шаблонные литералы используются для объединения двух типов данных в JavaScript. В манипуляции с DOM он также может быть использован для добавления JavaScript к выражению DOM

Выражения против заявлений в JavaScript

Анонцавыражениеявляется частью кода, который дает значение:

3 + 4

Азаявлениевыполняет действие:

let total = 3 + 4;

Булеи и операторы сравнения в JavaScript

Булеи тожеtrueилиfalseПолем Полезно при принятии решений:

true
false
5 > 3              // true
5 === 5            // true
'5' === 5          // false (strict equality)

Последнее утверждение неверно, потому что оператор строгого равенства в JavaScript===это правда, когда значения точно одинаковы по значению и типу. '5', хотя фигура имеет типstringПотому что это прилагается в цитаты. 5 с левой стороны, однако, является фигурой целого числа типа.

Используйте логические в условиях сifблоки:

const age = 16;
if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

Мы поговорим о условиях более глубоких в следующей статье.

Функции в JavaScript: многоразовые кодовые блоки

Функции помогут вам избежать повторения:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Chris'));

Вы можете передавать данные (аргументы) в них и вернуть результат.

function greet(name = 'Chris') {
  return `Hello, ${name}!`;
}

console.log(greet());

Представление DOM (объектная модель документа) в JavaScript

Дом - это живое дерево всех элементов на веб -странице. С манипуляциями с DOM в JavaScript вы можете:

  • Доступ к HTML -элементам
  • Изменить их содержание
  • Отреагировать на действия пользователя

Пример: изменить заголовок

HTML:

<h1 id="main-heading">Original</h1>

JavaScript:

document.getElementById('main-heading').textContent = 'Updated with JS!';

Создать элементы на лету

const newElement = document.createElement('p');
newElement.textContent = 'I was added with JavaScript';
document.body.appendChild(newElement);

События DOM в JavaScript: прослушайте действия пользователя

<button id="clickMe">Click Me</button>

document.getElementById('clickMe').addEventListener('click', function() {
  alert('Button was clicked!');
});

Помните, что для этого файл JavaScript, содержащий код, должен быть добавлен в файл HTML черезscriptтег вheadэлемент.

JavaScript Neping Project: Калькулятор корзины для покупок

const item1 = 2095; // in cents
const item2 = 799;
let total = item1 + item2;

let shipping = total <= 1000 ? 499 : 0;
const tax = Math.round(total * 0.1);

const finalAmount = total + shipping + tax;

console.log(`Final Total: $${finalAmount / 100}`);

Давайте подключим его к DOM:

<button onclick="calculateCart()">Calculate</button>
<p id="result"></p>

function calculateCart() {
  const item1 = 2095;
  const item2 = 799;
  const shipping = (item1 + item2 <= 1000) ? 499 : 0;
  const tax = Math.round((item1 + item2) * 0.1);
  const final = item1 + item2 + shipping + tax;

  document.getElementById('result').textContent = `Total: $${final / 100}`;
}

Теперь, когда вы нажимаете кнопку, она вычисляет и показывает общее количество.

Весь код в этой статье был написан в консоли браузера. В этой первой статье мы рассмотрели:

  • Написание JS в консоли браузера
  • Числа, струны, переменные, выражения и заявления
  • Логические, сравнения и условная логика
  • Функции для повторного использования кода
  • Манипуляции с DOM: изменение элементов, обработка кликов

Мы даже создали простую систему корзины, используя JavaScript и подключили ее к веб -странице. Неплохо на первый день! Я взволнован тем, что будет дальше. Надеюсь, я смогу сделать это еженедельным усилием.

Спасибо, что учились со мной. Давай продолжаем!

Найди меня наLinkedInПолем

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE