@code_ready | #консоль

✅ Создание генератора цветов

Генератор цветов на JavaScript: код, который меняет цвет фона элемента при каждом клике. Просто запустите функцию changeColor(), и она создаст случайный цвет в формате HEX.

<div id="colorDisplay"></div>
    <button onclick="changeColor()">Генерировать цвет</button>

#colorDisplay {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 2px solid #333;}

function changeColor() {
    const randomColor = getRandomColor();
    document.getElementById('colorDisplay').style.backgroundColor = randomColor;}
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];}
    return color;}

@code_ready | #обучение #css #js

✅ Вопрос с собеседования

Разница между function declaration и function expression

Ответ:

Function Declaration:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.

Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.

@code_ready | #собеседование

✅ Распознавание голоса на JS

Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)

<h2>Распознавание голоса</h2>
    <p id="transcription"></p>
    <button id="startRecognitionButton">Запись</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "ru-RU";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Ошибка распознавания:", event.error);};
  recognition.start();});

@code_ready | #обучение #js

✅ Шпаргалка с обработчиками событий

Эта шпаргалка включает примеры всех основных событий и соответствующих им обработчиков в JavaScript, которые могут использоваться для управления взаимодействием пользователя с веб-страницей.

@code_ready | #шпаргалка #js

✅ Горячие клавиши для быстрой верстки

• Ctrl + Shift + K — Удаляет текущую строку целиком.

• Ctrl + / — Закомментирует или раскомментирует текущую строку.

• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.

@code_ready | #клавиши

✅ Генератор QR кода на JS

Этот код использует встроенный API https://api.qrserver.com для генерации QR-кода на лету. Он сохраняет простоту и убирает необходимость в сторонних библиотеках.

<h1>QR Code Generator</h1>
  <input type="text" id="qr-text" placeholder="Enter text">
  <button onclick="generateQR()">Generate QR Code</button>
  <div id="qr-code"></div>

function generateQR() {
  const qrText = document.getElementById("qr-text").value;
  const qrCode = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrText}" alt="QR Code">`;
  document.getElementById("qr-code").innerHTML = qrCode;}

@code_ready | #обучение #js

@code_ready | #консоль

✅ Вопрос с собеседования

Что такое тернарный оператор в JS?

Ответ:

Тернарный оператор - это условный оператор, который состоит из трех операндов: условия, значения, возвращаемого, если условие истинно, и значения, возвращаемого, если условие ложно. Он используется для написания более компактного кода сравнительно с использованием условных конструкций типа if...else. В JavaScript тернарный оператор выглядит следующим образом:

• условие - это любое выражение, которое вычисляется в логическое значение (true или false).
• значение_если_истинно - это значение, которое возвращается, если условие истинно.
• значение_если_ложно - это значение, которое возвращается, если условие ложно.

В примере кода, если значение переменной age больше или равно 18, то переменной message присваивается строка "Доступ разрешен", иначе - "Доступ запрещен". После этого message будет содержать соответствующее значение, которое будет выведено в консоль.

@code_ready | #собеседование

✅ Делаем приложение для рисования на холсте

Для рисования на холсте в данном коде используется HTML5 Canvas API. Этот API предоставляет возможность программно создавать растровые изображения на веб-странице.

<canvas id="drawCanvas" width="600" height="350"></canvas>

body{text-align: center;}
canvas {border: 1px solid black;}

document.addEventListener("DOMContentLoaded", () => {
    const canvas = document.getElementById("drawCanvas");
    const context = canvas.getContext("2d");
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    // Начать рисование
    function startDrawing(e) {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];}
    // Закончить рисование
    function stopDrawing() {
        isDrawing = false}
    // Рисование на холсте
    function draw(e) {
        if (!isDrawing) return;
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(e.offsetX, e.offsetY);
        context.strokeStyle = "#000";
        context.lineWidth = 5;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];}
    // Слушатели событий
    canvas.addEventListener("mousedown", startDrawing);
    canvas.addEventListener("mouseup", stopDrawing);
    canvas.addEventListener("mouseout", stopDrawing);
    canvas.addEventListener("mousemove", draw);});

@code_ready | #обучение #js

✅ Шпаргалка по основным операторам

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

@code_ready | #шпаргалка #js

✅ Вопрос с собеседования

Что такое оператор нулевого слияния в JavaScript?

Ответ:

В JavaScript оператор нулевого слияния (также известный как "Nullish Coalescing Operator") представлен двумя знаками вопроса подряд: ??. Этот оператор используется для проверки значений на null или undefined и возвращения альтернативного значения, если проверяемое значение является именно одним из них.

Представьте, что у вас есть ящик, в который вы можете положить что угодно. Иногда вы кладёте в него игрушки, иногда - конфеты, а иногда оставляете его пустым. Этот ящик - ваша переменная в JavaScript.

Теперь представьте, что у вас есть другой ящик, в котором лежит ваш любимый подарок. Если ваш первый ящик (переменная) пустой, вы бы хотели использовать содержимое второго ящика вместо него. Оператор нулевого слияния (??) позволяет вам это сделать в JavaScript.

Таким образом, когда вы используете оператор нулевого слияния, JavaScript проверяет ваш первый ящик (переменную). Если он пустой (т.е. равен null или undefined), вы можете сказать JavaScript взять содержимое второго ящика (значение по умолчанию) и использовать его вместо первого.

@code_ready | #собеседование

@code_ready | #мем

✅ Полезные горячие клавиши VSCode

• Shift + Del — удаляет строку целиком. Теперь не нужно выделять мышкой всю строку и потом нажимать Backspace.

•Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще.

@code_ready | #клавиши