Товары
\n \n \n \n\n \n\n
\n\n Товар 1 - $100
\n\n
\n Описание товара 1
\n \n\n
\n Товар 2 - $200
\n\n
\n Описание товара 2
\n \nОписание товара 1
\n \nОписание товара 2
\n \nОтвет сгенерирован нейросетью и может содержать ошибки
Да, множество функций веб-сайта будут работать без JavaScript, в том числе:
Однако не будут работать интерактивность, динамические эффекты и клиентская логика.
<!DOCTYPE html>
<html>
<head>
<title>Сайт без JavaScript</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Этот текст отобразится даже без JavaScript</p>
</body>
</html>
Вся структура HTML отобразится корректно.
<style>
body {
font-family: Arial;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
<button>Кнопка</button>
Все CSS стили, включая :hover, :active, анимации - работают без JavaScript.
<nav>
<a href="/about">О сайте</a>
<a href="/products">Товары</a>
<a href="/contacts">Контакты</a>
</nav>
Ссылки полностью функциональны. Переход по страницам происходит без JavaScript.
<form action="/api/submit" method="POST">
<input type="text" name="username" required>
<input type="email" name="email" required>
<input type="password" name="password" required>
<button type="submit">Отправить</button>
</form>
Форма отправляется на сервер и обрабатывается server-side (PHP, Node.js, Python и т.д.). Валидация через HTML5 атрибуты (required, pattern) также работает.
<!-- Изображения -->
<img src="/photo.jpg" alt="Фотография">
<!-- Видео -->
<video width="320" height="240" controls>
<source src="/video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео
</video>
<!-- Аудио -->
<audio controls>
<source src="/audio.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио
</audio>
Все медиа элементы работают нативно. Видео и аудио плееры имеют встроенные элементы управления.
Если сайт использует SSR (Next.js, Nuxt, PHP и т.д.), то весь контент будет отрендерен на сервере и отправлен как готовый HTML:
<!-- Сервер отправляет готовую разметку -->
<div>
<h1>Товары</h1>
<ul>
<li>Товар 1 - 100 руб</li>
<li>Товар 2 - 200 руб</li>
<li>Товар 3 - 300 руб</li>
</ul>
</div>
<!-- Детали (collapsible content) -->
<details>
<summary>Показать больше</summary>
<p>Дополнительная информация</p>
</details>
<!-- Диалоговое окно (HTML5 dialog) -->
<dialog id="dialog">
<p>Содержимое диалога</p>
<button onclick="document.getElementById('dialog').close()">Закрыть</button>
</dialog>
Эти элементы работают без JavaScript.
// Это не будет работать
button.addEventListener('click', () => {
alert('Кнопка нажата');
});
// Это не будет работать
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));
Apps построенные на React, Vue, Angular без SSR не будут работать:
<!-- Будет пусто при отключенном JavaScript -->
<div id="root"></div>
<script src="bundle.js"></script>
// Это не будет работать
document.querySelector('.item').remove();
// Это не будет работать
localStorage.setItem('user', 'Иван');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Сайт без JavaScript</title>
<style>
body { font-family: Arial; max-width: 1000px; margin: 0 auto; }
header { background: #333; color: white; padding: 20px; }
nav a { margin: 0 15px; color: white; text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { padding: 20px; }
.product { border: 1px solid #ddd; padding: 15px; margin: 10px 0; }
details { margin: 10px 0; }
summary { cursor: pointer; font-weight: bold; }
</style>
</head>
<body>
<header>
<h1>Мой магазин</h1>
<nav>
<a href="/">Главная</a>
<a href="/products">Товары</a>
<a href="/about">О нас</a>
<a href="/contacts">Контакты</a>
</nav>
</header>
<main>
<h2>Товары</h2>
<!-- Отправка формы на сервер -->
<form action="/api/search" method="GET">
<input type="text" name="q" placeholder="Поиск товара">
<button type="submit">Найти</button>
</form>
<!-- HTML5 details для разворачивания -->
<details>
<summary>Товар 1 - $100</summary>
<div class="product">
<p>Описание товара 1</p>
<form action="/api/cart" method="POST">
<input type="hidden" name="product_id" value="1">
<button type="submit">Добавить в корзину</button>
</form>
</div>
</details>
<details>
<summary>Товар 2 - $200</summary>
<div class="product">
<p>Описание товара 2</p>
<form action="/api/cart" method="POST">
<input type="hidden" name="product_id" value="2">
<button type="submit">Добавить в корзину</button>
</form>
</div>
</details>
</main>
</body>
</html>
Этот сайт полностью функционален без JavaScript:
Progressive Enhancement - подход, при котором базовая функциональность работает без JavaScript, а JavaScript добавляет дополнительную интерактивность:
<!-- Базовая форма - работает без JavaScript -->
<form action="/api/subscribe" method="POST" id="subscribe-form">
<input type="email" name="email" required>
<button type="submit">Подписаться</button>
</form>
<script>
// JavaScript улучшает UX - но не требуется для функционала
const form = document.getElementById('subscribe-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
// AJAX отправка для лучшего UX
fetch('/api/subscribe', {
method: 'POST',
body: new FormData(form)
})
.then(r => r.json())
.then(data => {
// Показ успешного сообщения через JavaScript
alert('Спасибо за подписку!');
});
});
</script>
По данным WebAIM, примерно 1-2% пользователей отключают JavaScript:
Многое работает без JavaScript:
Не работает:
Best practice - использовать Progressive Enhancement: убедись, что базовая функциональность работает без JavaScript, а JavaScript добавляет дополнительный UX.