Введение в HTML, CSS, JavaScript

В данном курсе код JavaScript будет запускаться в среде браузера, поэтому для дальнейшей разработки необходимо иметь базовое представление о структуре веб-страницы. Типичная веб-страница представляет собой текстовый файл в формате HTML (HyperText Markup Language) - язык разметки, который используется для формирования структуры веб-страниц. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега ). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
<a href="http://www.example.com">Здесь элемент содержит атрибут href, то есть гиперссылку.</a>
А вот пример пустого элемента: <br>. Это тег переноса строки и поэтому у него нет ни содержания, ни закрывающего тега.

Разметка HTML позволяет располагать контент страницы в необходимом вам порядке. Базовый шаблон HTML страницы выглядит так

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Заголовок Страницы</title>
    </head>
    <body>
        Само содержание страницы
    </body>
</html>

Чтобы придать стиль отображения содержимому страницы, например, изменить цвет фона или размер шрифта, используется язык стилей CSS (Cascading Style Sheets, или каскадные таблицы стилей). Этот язык тоже имеет свой собственный синтаксис. Подробнее о HTML можно прочитать здесь, а о CSS — здесь. А JavaScript, в свою очередь, находит в браузерах широкое применение как язык сценариев для придания интерактивности веб-страницам.

Добавление JavaScript на страницу и запуск в браузере

Так как это курс сфокусирован на изучении самого языка JavaScript, понимание его основных концепций и тонкостей разработки на нём, то в рамках данного курса будет достаточно понимания того, каким образом можно добавить код JavaScript на HTML страницу, для дальнейшего его выполнения при запуске этой страницы в браузере. Код JavaScript можно встроить на HTML страницу с помощью тега <script>, например

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Заголовок Страницы</title>
    </head>
    <body>
        Само содержание страницы

        <script>
            alert( "Код JavaScript запустился!" );
        </script>
    </body>
</html>

В данном случае тег <script> содержит сам исполняемый код. Когда браузер доходит на странице до этого тега, он его не отображает, а выполняет. В данном коде вызывается встроенный в браузер метод alert("Сообщение"), который отображает на странице модальное окно с указанным сообщением.

Чаще всего, программа JavaScript, которую необходимо выполнить на странице, содержит в себе много кода. Поэтому вместе того, чтобы добавлять его напрямую на HTML страницу, его выносят в отдельный файл с расширением .js и отдельно подключают к странице следующим образом:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Заголовок Страницы</title>
    </head>
    <body>
        Само содержание страницы

        <script src="/path/script.js"></script>
    </body>
</html>

В данном случае подключение происходит тоже с помощью тега <script>, только в этом случае, вместо вставки в него кода, к нему добавляется атрибут src в котором прописывается путь к файлу JavaScript. Этот путь может быть как абсолютным, так и относительным к текущей странице. Когда браузер дойдет до этого тега, то сначала он загрузит этот файл, а потом выполнит. Исходники страниц с встроенным и внешним скриптом можно скачать по этой ссылке и потом запустить соответствующие HTML-страницы в браузере.

Базовый синтаксис JavaScript

Как и у других языков программирования, у JavaScript есть свой синтаксис. Исходный код скриптов сканируется слева направо и преобразуется в последовательность найденных элементов, которые несут в себе определенный смысл для языка JavaScript, например, ключевые слова (if, else,while, return и прочие), литералы (true, false, null и т.д.), пробелы, окончания строк или комментарии. А также JavaScript чувствителен к регистру и использует кодировку символов Unicode.

Каждая программа — это набор команд. В JavaScript команды разделяются точкой с запятой (;). Если в коде после той или иной инструкции не стоит точка с запятой, то во время разбора кода, они будут расставляться автоматически, что может привести к некоторым ошибкам или неочевидной работе программы.

Чтобы упросить чтение и понимание кода используются комментарии. С их помощью можно добавлять подсказки, заметки, предложения или предупреждения. Для оформления однострочных комментариев используются //, многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */.

// Это однострочный комментарий

alert("Привет!");

/* Этот комментарий располагается на нескольких линиях.
    Обратите внимание, что вам не нужно обрывать комментарий, пока вы его не закончите*/

alert("Пока!");

/*Такой комментарий тоже может быть однострочным*/

При этом нельзя вкладывать друг в друга комментарии, это приведет к синтаксической ошибке

/* Нельзя вкладывать /* комментарии */ друг в друга */

> Uncaught SyntaxError: Unexpected identifier

Дата изменения:

Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!

Оставить комментарий