Знаете ли вы, что клиентский JavaScript - это действительно весело?
До недавнего времени мне не удавалось много с этим поиграть. Я так хорошо провел время, что хотел поделиться тем, что узнал. Не позволяйте JS запугать вас! Я долгое время избегал интерфейсной веб-разработки, потому что считал, что объем информации, необходимый мне для продуктивной работы, просто огромен и непомерно высок. Оказывается, основы совсем не так уж плохи.
Некоторые концепции:
Это будет иметь наибольший смысл, если вы хоть немного разбираетесь в HTML. Вот быстрое напоминание:
теги
JavaScript предоставляет возможность манипулировать тегами HTML (элементами, на языке JS) множеством способов. JS позволит вам получить тег, который уже существует на странице, или вы можете создать новый и прикрепить его туда, где хотите.
классы
Класс - это средство категоризации или группировки ваших тегов. Если ваши теги сгруппированы таким образом, вы можете легко выполнять аналогичные операции с несколькими тегами одновременно.
id
Напротив, идентификатор - это уникальный идентификатор тега. Использование идентификатора позволит вам получить конкретный тег, когда он вам понадобится. Это удобно, например, для ввода данных в определенные поля.
Давай попробуем
Нам понадобятся два файла. Если вам нужна среда для мгновенной разработки, попробуйте сделать ремикс this Glitch project! Вы также можете создавать и редактировать файлы на своем локальном компьютере. Выбирайте то, что вам удобнее.
index.htmlscript.js
Если вы пишете этот код как локальные файлы на своем компьютере, вот HTML-код, который вы можете вставить в index.html файл. Если вы редактируете в Glitch, я уже добавил HTML для вас.
<html>
<head>
<title>Hello!</title>
<!-- import the webpage's javascript file -->
<script src="script.js" defer></script>
</head>
<body>
<h1 id="header">Hi there!</h1>
</body>
</html>
Это простая оболочка страницы. Это будет выглядеть примерно так:
Если вы новичок в JavaScript, то важным элементом является тег script:
<script src="script.js" defer></script>
Этот тег сообщает браузеру, как получить доступ к нужному сценарию. defer просит браузер не выполнять сценарий до тех пор, пока не будет загружена вся страница. Это гарантирует, что все, что ожидается на странице, существует при ее запуске.
И это все, что касается HTML. Теперь о хороших моментах.
Изменение существующих элементов
Давайте изменим заголовок. Начните с добавления этого в script.js:
var header = document.getElementById("header");
getElementById() берет наш тег заголовка и сохраняет его в переменной header. Как только мы получим заголовок, его содержимое будет легко переустановить. Добавьте эту строку:
header.textContent = "HELLO I AM SPEAKING TO YOU VIA JAVASCRIPT";
Загрузите index.html (в Glitch нажмите «Показать»), и вас встретит яркий новый текст:
Бум! Вы разработчик JavaScript. Есть и другие функции для выполнения аналогичных задач:
document.getElementsByTagName()возвращает массив всех тегов с заданным именем. Если вы хотите воздействовать на все ссылки (a), вы можете сделать это таким образом.document.getElementsByClassName()предоставит вам массив всех тегов данного класса.
Создание новых элементов
Но это не ограничивается изменением существующего HTML. JavaScript также позволит вам создавать новые элементы. Мы создадим новый тег p с некоторым текстом:
var p = document.createElement("p");
p.textContent = "Maybe JavaScript isn't so scary after all.";
Давайте возьмем тег body…
var bodyTag = document.body;
И добавьте наш новый текст абзаца:
bodyTag.appendChild(p);
Когда мы проверяем нашу страницу, она должна выглядеть так:
Довольно круто, да? Имея всего несколько функций, у вас будет достаточно для создания динамических веб-страниц, управляемых сценариями. Вот ссылка на проект Glitch с готовым кодом для справки.
Удачи с новыми инструментами!
Подробнее:
Я в долгу перед этими руководствами, которые легли в основу моего ускоренного курса по фронтенду JS. Если вам понравилось это короткое вступление, обязательно попробуйте глубже.
Другие истории:
