- HTML JavaScript
- Пример HTML:
- Запуск скрипта
- Пример HTML:
- Подключение внешнего скрипта
- Пример HTML:
- Пример HTML:
- Возможности JavaScript
- JavaScript может менять HTML контент:
- JavaScript может менять значение HTML атрибута:
- JavaScript может менять стили:
- JavaScript может менять шрифты:
- Задачи
- Замена контента
- Задача HTML:
- Добавление фона
- Задача HTML:
- Изменение размера шрифта
- Задача HTML:
- Замена изображения
- Задача HTML:
- Урок 7. JavaScript в веб-разработке
HTML JavaScript
В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.
Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.
Для записи JavaScript-кода в HTML-документе используется тег . Сценарии часто помещаются внутри элемента . Это гарантирует, что сценарий готов к работе, когда он вызывается. Тем не менее, это не является обязательным требованием, и вы также можете поместить его в элемент , где он также будет прекрасно работать.
Вы также можете указать язык с помощью атрибута type (type=»text/javascript»). Тем не менее, когда вы используете язык JavaScript атрибут type можно опустить, т.к. JavaScript — значение атрибута type по умолчанию.
Синтаксис тега следующий:
В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:
Пример HTML:
Запуск скрипта
В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:
Пример HTML:
Нажмите на кнопку ниже, чтобы заданный скрипт выполнился.
function showMessage()Подключение внешнего скрипта
Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
JavaScript-код можно записать в отдельном файле с расширением .js , после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html .
Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:
Для подключения JS-файлов также используется тег . Однако, в отличие от подключения CSS-файлов, на этот раз следует использовать другой синтаксис:
Теперь давайте подключим внешний файл script.js к нашему следующему HTML-документу:
Пример HTML:
Элемент
Тег используется для отображения альтернативного текста пользователям, браузер которых не поддерживает скрипты и для тех пользователей, которые отключили JavaScript в своих браузерах.
Пример HTML:
Возможности JavaScript
Посмотрите несколько примеров того, что может делать JavaScript:
JavaScript может менять HTML контент:
JavaScript может менять значение HTML атрибута:
JavaScript может менять стили:
JavaScript может менять шрифты:
Задачи
Замена контента
Используя JavaScript замените текст внутри абзаца фразой «Привет, JavaScript!». Замена контента должна произойти при загрузке страницы. Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент
с нужным id.
Затем добавьте свойство innerHTML, чтобы изменить текст.
Задача HTML:
Этот текст будет заменен.
Добавление фона
Используя JavaScript добавьте зеленый фон («green») к элементу
Затем используйте свойство style.backgroundColor, чтобы добавить цвет фона.
Задача HTML:
Изменение размера шрифта
Используя JavaScript увеличте размер шрифта текста «Я люблю JavaScript!» до 45 пикселей. Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент
с нужным id.
Затем используйте свойство style.fontSize, чтобы изменить размер шрифта.
Задача HTML:
Я люблю JavaScript!
Замена изображения
Используя JavaScript сделайте так, чтобы при клике по кнопке вместо изображения auto.jpg появилось изображение camel.jpg. Подсказка Подсказка: Используйте метод document.getElementById(), чтобы найти элемент с нужным id.
Затем используйте свойство src, чтобы указать путь к картинке.
Задача HTML:
Урок 7. JavaScript в веб-разработке
Модели BOM и DOM. Навигация по элементам документа. Доступ к узлам и атрибутам страницы. Изменение структуры DOM. Основные браузерные события.
- Объект window
- Объект document — модель DOM
- Объектная модель браузера — BOM
- Подключение скриптов к сайт
- Создадим текстовый элемент и заголовок первого уровня в начале страницы .
- Копирование абзаца и добавление его после секции с заменой текст.
- Замена всех тегов на странице заголовками второго уровня.
- Добавление текста со специальными символами
- Вывод содержимого атрибута «class».
- Изменение классов
- Изменение атрибутов тегов
- Сброс стилей
- Обработка события через свойство тэга.
- Обработка события через выбор элемента в js-файле.
- Обработка события через специальные методы.
- Параметр event функции-обработчика.
- Этапы события (погружение, достижение цели, всплытие).
- Делегирование событий
Язык JavaScript создавался, в первую очередь, для работы с фронтендом, клиентской стороной пользовательского интерфейса. С его помощью HTML и CSS становятся максимально управляемыми, изменяемыми, с гарантией работы практически на всех устройствах.
Сегодня CSS обладает функционалом, способным заменить часть кода JavaScript, но этого все еще недостаточно, да и достигается существенно большими усилиями. JS-скрипты добавляют динамику на веб-страницы, делая их интерфейс предельно эргономичным и удобным для всех типов пользователей.
Возможности JavaScript уже не ограничены только лишь frontеnd’ом , его применяют на серверной стороне, разных платформах и устройствах. Наша задача: рассмотреть этот язык программирования в плане его использования в браузере, на пользовательской стороне.
Чтобы JavaScript получил возможность запуска (в браузере, операционной системе), необходимо предоставить ему определенную функциональность. Ее называют окружением. Окружение позволяет языку программирования получить доступ к своим объектам, функциям, переменным в дополнение к базовым инструментам JavaScript. В частности, браузер «разрешает» управлять web-страницами. Схема браузерного окружения приведена ниже: