Автор оригинала: FreeCodeCamp Community Member.
Кевином Кононенко
Если вы когда-нибудь посещали ходильный город, как Нью-Йорк, то вы можете понять, что HTML, CSS и JavaScript работают вместе.
Когда вы начинаете изучать веб-разработку, вы обычно можете попробовать серию основных задач на принципах HTML, CSS и JavaScript. Однако каждая задача происходит в среде песочницы и не проверяет вас на нескольких языках одновременно.
Например, учебник «Intro To JavaScript» обычно сосредоточится на основах, такими как петли, а также «если» заявления, а не используют JavaScript наряду с HTML.
После того, как вы проходите через эти предварительные упражнения, вы достигаете точки, где вам нужно настроить свой первый полный сайт. Даже если это одностраничное, персональный сайт, который вы никогда не собираетесь освободить, вы все еще сталкиваетесь с ряд новых проблем, таких как:
- Как связать три разных типа файлов?
- После того, как я подключаю их, как они будут работать вместе?
- Как я могу проверить все это на своем компьютере?
Подумав об этом на некоторое время, я понял, что эти кусочки работают вместе так же, как города все еще могут функционировать. Это относится, даже когда предприятия постоянно движутся или выходит из бизнеса, или разработчики недвижимости пересматривают определенные районы.
Итак, я собираюсь показать, как вы можете настроить свою первую среду разработки этих трех частей. Чтобы понять этот учебник, вам просто нужно знать основные части HTML, CSS и JavaScript.
Даже если вы не написали ни один код в своей жизни, вы все равно сможете понять, как связать три языка.
Различия между HTML, CSS и JavaScript
Давайте представим, что вы отвечате за планирование макета нового района в городе. Этот район будет иметь несколько жилых зданий, некоторые закусочные, филиал банка и торговый центр.
Это может показаться одномерным. Другими словами, каждое здание просто точка на карте, без нюанса. Но когда вы копаете немного глубже, вы можете увидеть, что каждое здание на самом деле имеет три части, которые вы можете изменить:
- Структура самого здания
- Интерьер и наружное украшение здания
- Фактические функции, которые посетители могут выполняться в каждом здании
Это соответствует трем различным типам файлов, которые вы можете использовать на вашем первом веб-сайте.
HTML-файл Содержит структуру самой страницы. Это как структура здания.
А CSS-файл содержит стиль страницы. Это позволяет вам менять цвета, позиционирование и многое другое. Это как дизайн сама здания.
А Файл JavaScript Определяет динамические и интерактивные элементы на странице. Он определяет, что произойдет, когда пользователи нажимают, зависят или введите в определенные элементы. Это вроде как функциональность здания.
Давайте возьмем пример одного из домов. Дом имеет две спальни, две ванные комнаты и две истории. Это HTML здания.
Он изготовлен из кирпича и имеет твердую деревянную дверь. Это соответствует CSS здания.
Что вы можете сделать в доме? Вы можете есть, спать, делать еду … все, что вы делаете дома, действительно! Это JavaScript здания.
Пример базового файлового каталога
Поскольку каждый из этих трех языков служит другому назначению, веб-разработчики обычно используют отдельные файлы для каждого. Эта идея называется « отделение проблем » – каждый файл должен иметь другую функцию на сайте в целом.
Хотя вы можете использовать весь код в один HTML-файл, который в конечном итоге приведет к повторяющемуся коду, поскольку вы выращиваете свой сайт.
Давайте посмотрим на код, необходимый для создания одного полного дома. Все три файла должны быть в одном каталог – Папка на вашем компьютере. В этом случае давайте назовем папку дом . В нашей папке домой у нас будет один файл каждого типа. Я позвоню основным HTML-файлом индекс , основной файл CSS Стили и основной файл JavaScript скрипты .
Теперь мы можем покрыть способ, которыми файлы связаны в коде.
Наш HTML-файл на самом деле имеет три отдельных раздела:
-
<онAD>, где вы можете включить метаданные и ссылки на услуги, такие как Google Fonts. -
-
Прямо сейчас все три файла содержатся в одной папке, поэтому пути файлов довольно просты в файле HTML.
И
Сценарий 1: новая цепь пиццы движется в (изменение файла CSS)
Давайте посмотрим на реальный пример. Представьте, что в этом районе один из зданий – магазин пиццы под названием «Пицца соседства». Но, пицца соседства борется, и Домино (огромная цепочка для пиццы) решает покупать недвижимость и вместо этого подавать окрестности.
Вы знаете, что это будет означать с точки зрения кода?
Ну, давайте подумаем через каждую из трех частей.
- Структура здания одинакова. Это то же самое место для пиццы. Это HTML.
- Функциональность здания одинакова. Это все еще существует для того, чтобы подавать пиццу, и когда приходят клиенты, это единственное, что они ожидают. Это JavaScript.
- Но стиль и брендинг здания отличается! Это означает, что CSS новый.
Итак, мы теперь создали новый файл CSS (давайте назовем это Dominosos.css ). Нам нужно создать папку под названием пицца Показать, что мы говорим о месте пиццы сейчас, и замените dominos.css для старого styles.csss файл.
Сценарий 2: новое жилое здание
Вот еще один пример. Допустим, ваш район претерпевает некоторые джентрификация . Это означает, что более состоятельные жители движутся, и строится более дорогостоящее жилье. Некоторые разработчики недвижимости решают много выкупить с домом на нем, снести дом и поставить в некоторые модные апартаменты.
Давайте подумаем о том, что это будет означать с точки зрения нашей файловой системы.
- Функциональность такое же. Это все еще дом. Это означает, что JavaScript одинаково.
- CSS должен быть другой, потому что нет никакого способа того, что жилое здание может быть одинаково, как дом!
- И файл HTML должен быть другим, потому что два здания имеют совершенно разные структуры.
Давайте назовем новое здание квартира .html и новые CSS будут Fancy.csss Отказ Поскольку у нас есть совершенно новый HTML-файл, мы не просто связываем новый файл CSS. Вся страница отличается. И это также связывается с новым файлом CSS.
Файлы CSS и JavaScript просто изменяют HTML. Их нужно ссылаться в HTML-файл, чтобы быть загруженным. Вот почему, на диаграмме выше, сама папка одинакова. Но файл HTML и код, который ссылается на него к другим файлам, разные.
Создание каталога файла с несколькими папками
До сих пор мы охватывали только один тип здания за раз. Но это как веб-сайт с одной страницей – очень необычно. Даже личный веб-сайт может иметь «о» страницу «о» странице «портфель» и так далее. Так что происходит, когда есть несколько зданий? Как вы можете структурировать свой каталог файлов?
Допустим, ваш район имеет банк, торговый центр и место пиццы. Это вроде как сайт с тремя страницами. Каждый файл HTML с файлом CSS и файлом JavaScript, связанным с ним.
Но обратите внимание, как мы не использовали три подпапки в большей папке соседства! Хотя мы, безусловно, могли бы сделать это, многие интерфейсные разработчики любят создавать отдельный Сценарии Папка для всех файлов JS и A Стили Папка для всех файлов CSS.
По мере роста вашего сайта вы обнаружите, что некоторые кусочки CSS и JavaScript являются повторно используемыми и могут быть связаны с несколькими файлами HTML. Папки сценариев и стилей позволяют организовать свои усилия и уменьшить резервный код.
В нашем примере вы можете заказать жирный кусочек пиццы как в торговом центре, так и в магазине пиццы. Итак, вы можете ожидать, что оба будут делиться одним файлом JavaScript, но также имеют уникальные функциональные возможности в своих собственных индивидуальных файлах JavaScript.
В любом случае, вот потенциальная планировка всего каталога файлов.
Обратите внимание, как HTML-файлы и папки являются одинаковым уровнем глубины в пределах большего Соседство папка. Чтобы ссылаться на файлы, которые находятся в папках на том же уровне, вам необходимо запустить свой FilePath с именем папки вместо имени файла. Итак, если вы хотите ссылаться на bank.css Файл изнутри bank.html, вы бы использовали Сценарии/BANK.CSS как путь к файлу.
Получите последние руководства
Вам понравилось это руководство? Дайте ему «хлопать» и дайте мне знать в комментариях. Или получите мои последние объяснения веб-разработки, подписав на мою рассылку: