lightanddesign.ru
You might also like
Очень трудно представить себе современный сайт без взаимодействия с пользователем. Тогда они никогда не взаимодействуют с нами, и каждый клик полностью перезагружает страницу. Это очень скучно, вы согласны?
Давайте рассмотрим, что представляет собой веб-сайт. HTML (HyperText Markup Language) отвечает за создание страниц (указание места меню сайта, заголовка, логотипа или статьи) и контента (различные тесты, списки, изображения и т.д.). CSS (Cascading Style Sheets) отвечает за визуальные аспекты страницы. Он определяет цвета и размеры определенных блоков, а также то, как они должны быть оформлены и представлены пользователю.
Положения существуют, но где взаимодействие? JavaScript присутствует. Виртуальный "диалог" с пользователем — от изменения частей содержимого сайта в ответ на действия до последней игры в браузере — осуществляется с помощью сценариев JavaScript. Этот язык программирования работает в браузере и позволяет взаимодействовать с сайтом в реальном времени, обеспечивая обратную связь с пользователем по всем действиям.
JavaScript имеет очень интересную историю. Это приложение стандарта ECMAScript и работает не только в браузере. Однако в этой статье мы рассмотрим только взаимодействие с браузером.
Создаём самый простой скрипт
Первую часть традиционно делают студенты при изучении языка программирования. Он должен отображать фразу "Hello, world". Это позволяет им попрактиковаться в самом важном аспекте — выходе информации к пользователю — и ознакомиться с основной структурой программы. Сделайте то же самое.
Существует много способов отобразить что-то в браузере, но выберите самый простой. Откройте инструменты разработки в браузере Chrome. Это можно сделать с помощью Ctrl + Shift + I или F12 (CMD + OPT + I MACOS) или в меню браузера. В Google Chrome нужно нажать три точки, но в других браузерах эта настройка может отличаться. Затем выберите Другие инструменты разработчика и Инструменты.
Появится следующее окно. Не имеет значения, какой сайт вы используете; вы также можете открыть GeekBrain.
Вас интересует вкладка Консоль. Он может содержать ошибки и предупреждения (красный или желтый текст) — не обращайте на них внимания, они нас не беспокоят. Выполните задание по выводу на экран слова ‘Hello, World’. Для этого нам нужна команда alert (). Экспортировать текст, переданный в скобках.
Обратите внимание на падеж — он здесь важен. Также не пропустите кавычки — каждый текст должен быть окружен двойными или простыми кавычками.
Вы выполнили свое первое задание с простым текстом на экране.
Учимся писать чуть более сложные скрипты
Перед вами статичный текст на экране, но это не очень интересно. Вам нужно больше взаимодействия с пользователем. Что произойдет, если вы спросите имя посетителя и обратитесь к нему?
Для этого вам необходимо познакомиться с понятием переменных в языках программирования. Переменная — это область памяти компьютера, в которой хранится некоторая цена. Их можно использовать по мере необходимости.
Для создания переменных в JavaScript необходимо использовать слово key. Есть и другие, но не будем слишком углубляться в детали.
Требования к имени переменной:.
- Имена переменных не могут начинаться с цифры.
- Имена переменных могут содержать только буквы, цифры и символы ‘$’ и ‘_’.
- Здравый смысл говорит о том, что имена переменных должны отражать суть того, что они содержат.
Создайте простые переменные с именами. Например, Иван.
Примечание: Мы объединили ‘Hello’ с переменной. Здесь подсчитывается каждый символ. Сначала идет уведомление, затем вводная скобка указывает на дальнейшие инструкции. Далее цитата окружает текст приветствия. Далее символ + указывает программе объединить текст справа от точки с текстом слева. Завершается все это закрытой скобкой.
Вы вывели имя из переменной на экран, но хотите отобразить его пользователю. Давайте изменим это. Требуется командная строка (). Задайте вопрос пользователю — поместите его в скобку. Мы храним результат команды prompt () в переменной.
Мы спрашиваем имя пользователя, и если он отвечает, мы приветствуем его. Ничего сложного.
Сохраняем наш первый скрипт
Мы написали программу (скрипт) в консоли браузера. Это было быстро и просто, но не очень практично — вы не можете поделиться такой программой с пользователем. Для этого сохраните программу в файле с расширением *.html. Вы можете назвать его по своему усмотрению. HTML предполагает определенную структуру контента, которой необходимо следовать в той или иной степени, чтобы он работал. Теги и.
Файлы сценариев можно редактировать и сохранять в любой программе редактирования текста. Самым простым и примитивным является блокнот, который входит в состав Microsoft Windows. Существуют также специальные обработчики кода, такие как Visual Studio code. В блоге была специальная подборка обработчиков кода JavaScript — выбирайте и продолжайте:)
В качестве альтернативы, если вы хотите получить максимальную отдачу от JavaScript, вы можете присоединиться к отделу разработки JavaScript FullStack в GeekBrains.
