Code Ready | Frontend

const heading = document.getElementById('title');

// Изменяем текст заголовка
heading.textContent = 'Новый заголовок'; 

const button = document.querySelector('button');

// Реагируем на клик
button.addEventListener('click', () => alert('Кнопка нажата!')); 

const list = document.querySelector('ul');
const newItem = document.createElement('li');

newItem.textContent = 'Новый пункт';
 // Добавляем пункт в список
list.appendChild(newItem);

<div id="output"></div>
<script>
  const userInput = "<script>alert('XSS')</script>";
  document.getElementById("output").innerHTML = userInput;
</script>

document.getElementById("output").textContent = userInput;

const button = document.querySelector("button");
button.addEventListener("click", () => console.log("Clicked!"));
// Где-то в коде:
button.addEventListener("click", () => console.log("Clicked again!"));

button.onclick = () => console.log("Clicked!");

const obj1 = { a: 1 };
const obj2 = { a: 1 };

console.log(obj1 == obj2);  // false
console.log(obj1 === obj2); // false

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

const obj = { value: NaN };
console.log(obj.value === NaN); // false

console.log(isNaN(obj.value)); // true

setTimeout(() => {
  console.log('This message is displayed after 2 seconds');
}, 2000);

setInterval(() => {
  console.log('This message is displayed every 3 seconds');
}, 3000);

const timeoutId = setTimeout(() => {
  console.log('This message will not be displayed');
}, 5000);
clearTimeout(timeoutId);

const intervalId = setInterval(() => {
  console.log('This message will stop displaying after 9 seconds');
}, 1000);
setTimeout(() => {
  clearInterval(intervalId);
}, 9000);

function animate() {
  console.log('Animation frame');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

const obj = {
  regularFunc: function() { return this; },
  arrowFunc: () => this
};

const obj = {
  name: 'John',
  regularFunc() { console.log(this.name); },
  arrowFunc: () => console.log(this.name)
};
obj.regularFunc(); // Выводит: "John"
obj.arrowFunc();   // Выводит: undefined

const button = document.querySelector('button');
button.addEventListener('click', function() { console.log(this); }); 
button.addEventListener('click', () => console.log(this));           

function regular() { return this.name; }
const arrow = () => this.name;

console.log(regular.call({ name: 'Alice' })); // "Alice"
console.log(arrow.call({ name: 'Alice' }));   // undefined

// utils.js
export function add(a, b) {
  return a + b;
}
export const pi = 3.14159;

// main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159

// math.js
export default function multiply(a, b) {
  return a * b;
}

// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6

// main.js
async function loadModule() {
  const { add } = await import('./utils.js');
  console.log(add(5, 10)); // 15
}
loadModule();

// main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159

function memoize(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) return cache[key];
    return cache[key] = fn(...args);
  };
}

const factorial = memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});
console.log(factorial(5));  // Первый вызов рассчитывает
console.log(factorial(5));  // Берется из кэша

const heavyCalc = memoize((x, y) => {
  // Симуляция сложных вычислений
  for (let i = 0; i < 1e6; i++) {}
  return x * y;
});
console.log(heavyCalc(3, 4)); // Медленно
console.log(heavyCalc(3, 4)); // Быстро, взято из кэша

// Создаем новый элемент div
const newDiv = document.createElement('div');
// Добавляем элемент в DOM
document.body.appendChild(newDiv); 
// Удаляем элемент
newDiv.remove();

// Добавляем класс
header.classList.add('highlight');
// Удаляем класс
header.classList.remove('highlight'); 
// Переключаем класс
header.classList.toggle('highlight');

// Получаем значение
const inputValue = document.querySelector('input').value;
// Устанавливаем значение
document.querySelector('input').value = 'Новое значение';