JavaScript 101 - Анатомия Веб-страницы

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

HTML для Контента

HTML - язык разметки, используемый, чтобы определить и описать контент. Будь то сообщение в блоге, результат поисковой системы или сайт электронной коммерции, базовый контент веб-страницы пишется на HTML. Семантическая разметка HTML используется, чтобы описать контент в универсальных терминах (заголовки, параграфы, изображения и т.д.)

CSS для Презентации

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

JavaScript для Интерактивности

В браузере JavaScript добавляет интерактивность к контенту HTML. Без JavaScript веб-страницы были бы статичными и скучными. JavaScript помогает вдохнуть жизнь в веб-страницу.

Взгляните на эту простую страницу HTML, которая включает CSS и JavaScript, чтобы увидеть, как все это совмещается:

Пример

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Привет Мир</title>

    
    <style>
    h1 { font-size: 14px; color: hotpink; }
    button { color: red; }
    </style>
</head>
<body>
    <h1>Привет Мир</h1>
    <button>Кликни Меня!</button>

    
    <script>

    // Получить ссылку на первый
    // элемент button в документе.
    var button = document.querySelector( "button" );

    // Нажмите кнопку, и я скажу привет!
    button.addEventListener( "click", function( ev ) {
        alert( "Привет!" );
    }, false);

    </script>
</body>
</html>

Попробуйте Сами »

В примере выше, HTML используется, чтобы описать контент. Текст "Привет Мир" описывается как заголовок в теге <h1> и "Кликни Меня!" описывается как кнопка с тегом <button>. Блок<style> содержит CSS, который изменяет размер шрифта и цвет текста заголовка. Блок <script> содержит JavaScript, который добавляет интерактивность к кнопке. Когда пользователь щелкнет по кнопке, появится сообщение, который говорит "Привет!"

Далее: jQuery Метод $( document ).ready()

Смотрите также

Комментарии

Написать