Связь между HTML, CSS и JavaScript объясняется путем построения города

1656622456 svyaz mezhdu html css i javascript obyasnyaetsya putem postroeniya goroda

Кевин Кононенко

1*4jvOC7UafUwx4f1xEWMQiA

Если вы когда-нибудь посещали такой город, как Нью-Йорк, то вы можете понять, как это HTML, CSS и JavaScript работает вместе.

Когда вы начинаете учить веб-разработку, вы обычно можете попробовать серию основных задач на принципах HTML, CSS и JavaScript. Однако каждый вызов происходит в песочнице и не проверяет вас на нескольких языках одновременно.

Например, учебник «Введение в JavaScript» обычно сосредотачивается на таких принципах, как циклы и операторы «if» вместо использования JavaScript вместе с HTML.

После того как вы выполните эти предыдущие упражнения, вы достигнете точки, когда вам нужно настроить свой первый полноценный веб-сайт. Даже если это одностраничный персональный сайт, который вы никогда не собираетесь выпускать, вы все равно столкнетесь с рядом новых проблем, таких как:

  1. Как подключить три разных типа файлов?
  2. После того, как я подключу их, как они будут работать вместе?
  3. Как проверить все это на своем компьютере?

Подумав об этом некоторое время, я понял, что эти части работают вместе так же, как города все еще могут работать. Это касается даже тех случаев, когда предприятия постоянно переезжают или закрываются или девелоперы перерабатывают определенные районы.

Итак, я собираюсь показать, как вы можете настроить свою первую среду разработки с помощью этих трех частей. Чтобы понять этот учебник вам просто нужно знать основные части HTML, CSS и JavaScript.

Даже если вы не написали ни одного кода в своей жизни, вы все равно сможете понять, как связать три языка.

Различия между HTML, CSS и JavaScript

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

0*87frx07SsrDA4UZl
Планировка нашего района

Это может показаться одномерным. Другими словами, каждое здание – это лишь точка на карте, без нюансов. Но если копнуть глубже, то можно увидеть, что каждое здание действительно состоит из трех частей, которые можно изменить:

  1. Конструкция самого здания
  2. Внутренняя и внешняя отделка здания
  3. Фактические функции, которые посетители могут выполнять в каждом здании

Это соответствует трем разным типам файлов, которые можно использовать на своем первом веб-сайте.

An HTML файл Содержит структуру самой страницы. Это сродни структуре здания.

А CSS файл содержит стиль страницы. Это позволяет изменять цвет, расположение и т.д. Это сродни дизайну самого здания.

А файл JavaScript определяет динамические и интерактивные элементы на странице. Он определяет, что происходит, когда пользователи щелкают, наводят курсор или вводят в определенных элементах. Это сродни функциональности здания.

Возьмем, например, один из домов. В доме две спальни, две ванные комнаты, два этажа. Это HTML строения.

Он сделан из кирпича и имеет дверь из массива дерева. Это соответствует CSS зданию.

Что можно делать дома? Вы можете есть, спать, готовить еду… все, что вы делаете дома, действительно! Это JavaScript здания.

1*3GaOb3tSGoZe4DjTZg9VXQ
1*5GAPClpa09DmNcCslMA23Q

Пример основного каталога файлов

Поскольку каждый из этих трех языков предназначен для различных целей, веб-разработчики обычно используют отдельные файлы для каждого из них. Эта идея называется «разделение проблем» – каждый файл должен выполнять различные функции на сайте в целом.

Хотя технически вы можете включить весь код в один HTML файл, это в конечном итоге приведет к повторяемости кода, когда вы будете развивать свой сайт.

Давайте посмотрим на код, необходимый для создания одного цельного дома. Все три файла должны быть в одном каталог – папка на компьютере. В этом случае вызовем папку дом. В нашей домашней папке у нас будет по одному файлу каждого типа. Я буду называть основной файл HTML индексосновной файл CSS стилейи основной файл JavaScript сценарии.

1*YZOpTO65ASByn5i29VDmRQ
1*18ZU8N-2YsccoCU8z9uWOw

Теперь мы можем рассмотреть способ связывания файлов в коде.

Наш HTML-файл на самом деле имеет три раздела:

  1. The <head>, где можно включать метаданные и ссылки на такие службы, как Google Fonts.
  2. The <body>, где вы включаете фактические элементы HTML.
  3. The <script>, которые могут ссылаться на файлы Google Analytics и JavaScript

Все три файла находятся в одной папке, поэтому пути к файлам в файле HTML достаточно просты.

1*pOBUVpf8jG1SMvlv7R4E9g

The <liТег nk> позволит вам создать отдельную таблицу стилей для использования со всеми кирпичными домами.g стильs.css файл.

И <scriТег pt> позволяет создать набор функций, применяемых к любому типу home in the scriфайл pts.js.

Сценарий 1: появляется новая сеть пиццы (изменение файла CSS)

Давайте посмотрим на реальный пример. Представьте себе, что в этом районе одно из зданий есть пиццерия под названием Neighborhood Pizza (замечательное название). Но Neighborhood Pizza испытывает затруднения, и Domino’s (крупная сеть пиццерий) решает купить недвижимость и вместо этого обслуживать окрестности.

0*HM67ZGkZ913HLLqu

Знаете, что это означает с точки зрения кода?

Что ж, давайте продумаем каждую из трех частей.

  1. Конструкция постройки такая же. Это все та же пиццерия. Это HTML.
  2. Функционал постройки такой же. Он все еще существует для того, чтобы подавать пиццу, и когда клиенты заходят, это единственное, что они ожидают. Это JavaScript.
  3. Но стиль и брендинг здания разный! Это означает, что CSS новый.

Итак, мы создали новый файл CSS (назовем его Dominos.css). Нам нужно создать папку под названием пицца чтобы показать, мы сейчас говорим о пиццерии и заменителе dominos.css для старых styles.css файл.

1*Cbrhmfv7aXM-LkfrfL2JUQ
1*1YOCfrsFIWq-bJRYioaaFQ

Сценарий 2: новый жилой дом

Вот еще один пример. Скажем, в вашем районе происходит некоторая джентрификация. Это значит, что сюда приезжают более богатые жители, а жилье строится дороже. Некоторые застройщики решают выкупить участок с домом, снести дом и установить шикарные квартиры.

0*_PA4fk1-hIzyQRc2

Давайте подумаем, что это означает с точки зрения нашей файловой системы.

  1. Функциональность одна и та же. Это все еще дом. Это означает, что JavaScript одинаков.
  2. CSS должно отличаться, потому что многоквартирный дом не может быть оформлен так же, как и дом!
  3. И файл HTML должен быть другим, поскольку два здания имеют совершенно разные структуры.

Позвоним в новостройку квартира.htmlа новый CSS будет fancy.css. Поскольку у нас есть совершенно новый HTML файл, мы не просто связываем новый файл CSS. Вся страница другая. А также ссылку на новый файл CSS.

1*T8leHgkgP-X8L_wcsM2kCQ
1*aKoiZBHRCzjLCPp6weEwWA

Файлы CSS и JavaScript просто изменяют HTML. Для загрузки на них необходимо указать ссылку в файле HTML. Вот почему на схеме выше самая папка такая же. Но файл HTML и код, связывающий его с другими файлами, отличаются.

Создание каталога файлов с несколькими папками

Пока мы рассматривали только один тип построек за раз. Но это похоже на сайт только с одной страницей – очень необычно. Даже личный веб-сайт может иметь страницу обо мне, страницу Портфолио и т.д. Итак, что происходит, когда есть несколько построек? Как можно структурировать свой каталог файлов?

Скажем, в вашем районе есть банк, торговый центр и пиццерия. Это что-то вроде веб-сайта с тремя страницами. Каждый из них является HTML-файлом с файлом CSS и JavaScript, связанным с ним.

1*nXl1p_RnKNh3_iOD7fPXhw
1*tUpDr4vgMsncf2XgHRv5Yg

Но обратите внимание, что мы не использовали три вложенных папок в папке большего соседства! Хотя мы, безусловно, могли бы это сделать, многие разработчики интерфейса любят создавать отдельную сценарии папку для всех файлов JS, а стилей папку для всех CSS файлов.

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

В нашем примере вы можете заказать жирный кусочек пиццы как в торговом центре, так и в пиццерии. Следовательно, вы можете ожидать, что оба будут использовать один файл JavaScript, но будут иметь уникальную функциональность в своих отдельных файлах JavaScript.

В любом случае, вот потенциальный макет всего каталога файлов.

0*6ADmIY53-wQGVP9M

Обратите внимание, как файлы и папки HTML имеют одинаковый уровень глубины в пределах большего окрестности папку. Чтобы ссылаться на файлы, находящиеся в папках на одном уровне, необходимо начать путь к файлу из имени папки вместо имени файла. Итак, если вы хотите ссылаться на bank.css файл из bank.html, который вы бы использовали scripts/bank.css как путь к файлу

Получите новейшие пособия

Вам понравился этот урок? Дайте ему «хлопок» и сообщите мне об этом в комментариях. Или получите мои последние пояснения относительно веб-разработки, подписавшись на мою рассылку:

Добавить комментарий

Ваш адрес email не будет опубликован.