JavaScript 101 - Анатомия Веб-страницы
Прежде, чем погрузиться в JavaScript, следует понять, как он соприкасается с другими веб-технологиями.
HTML для Контента
HTML - язык разметки, используемый, чтобы определить и описать контент. Будь то сообщение в блоге, результат поисковой системы или сайт электронной коммерции, базовый контент веб-страницы пишется на HTML. Семантическая разметка HTML используется, чтобы описать контент в универсальных терминах (заголовки, параграфы, изображения и т.д.)
CSS для Презентации
CSS - дополнительный язык, который применяет стиль к документам HTML. CSS призван сделать вида контента лучше, определяя шрифты, цвета и другую визуальную эстетику. Мощь CSS исходит из факта, что стилизация не смешивается с контентом. Это означает, что можно применять различные стили к тому же самому куску контента, что является критическим при создании быстро реагирующих веб-сайтов, которые хорошо выглядят для целого ряда устройств.
JavaScript для Интерактивности
В браузере JavaScript добавляет интерактивность к контенту HTML. Без JavaScript веб-страницы были бы статичными и скучными. JavaScript помогает вдохнуть жизнь в веб-страницу.
Взгляните на эту простую страницу HTML, которая включает CSS и JavaScript, чтобы увидеть, как все это совмещается:
Пример
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Привет Мир</title>
<!-- CSS для презентации. -->
<style>
h1 { font-size: 14px; color: hotpink; }
button { color: red; }
</style>
</head>
<body>
<h1>Привет Мир</h1>
<button>Кликни Меня!</button>
<!-- JavaScript для Интерактивности. -->
<script>
// Получить ссылку на первый
// элемент button в документе.
var button = document.querySelector( "button" );
// Нажмите кнопку, и я скажу привет!
button.addEventListener( "click", function( ev ) {
alert( "Привет!" );
}, false);
</script>
</body>
</html>
Попробуйте Сами »
В примере выше, HTML используется, чтобы описать контент. Текст "Привет Мир" описывается как заголовок в теге <h1>
и "Кликни Меня!" описывается как кнопка с тегом <button>
. Блок<style>
содержит CSS, который изменяет размер шрифта и цвет текста заголовка. Блок <script>
содержит JavaScript, который добавляет интерактивность к кнопке. Когда пользователь щелкнет по кнопке, появится сообщение, который говорит "Привет!"