Структура, стыль, працэваясць: як HTML, CSS і JavaScript дзельняць задачы
Карта, падатліва для пачаткуючых, яка паказывае, што самэўсёдзе HTML, CSS і JavaScript на веб-сторанцы, якім чынам ўзаеднаюцца, і якія распашчытныя памылкі затуманююць межы між імі.
Кожная веб-сторанка, яку вы ачынаеце, складаецца з трох языкаў, якія можуць быць плутаныя для новачкаў: HTML, CSS і JavaScript. Яны зазвычай выкорыстоўваюцца разам, але кожны з іх адпавядае за аднае заведамства стосова сторанкі. Калі вы зразумеете, який язык відпавядае за калія заведамства, вы зможаце выбраць, дзе трэба вносіць змяны, шырэй находзіць багі і ухіліцца ад напісання коду на неправильным роўні.
Адна сторанка, трыя абавязкі
Прыдатны ментальны модэль — гарадзіння. HTML — это план будовы і стэны: ён вяршыць, што тут є кухня, вораты і трох вакнаў. CSS — это дэзайн інтэр’ера: фарбы, распаложэнне мебліў, размер вакнаў і спосаб аранжавання кімнат. JavaScript — это электрычныя і водопрацесныя сістэмы: дзвонак, які звучыць, калі хтось яго нажмае, і лямпы, якія запалююцца, калі вы заходзіце.
Практычна ўсе інтэрактывныя сайты, якія вы викорыстоўваеце, апынаюцца пад залежнасцю ад усіх трох варшаў адразу, але концэптуальна яны застаюцца разнымі. Чыстая дзеякосць гэтай разніцы ёсць адной з базавых умоў для всего, што будзе пасля.
HTML: што гэта і які ў тым сенс
HTML (HyperText Markup Language) — гэта не мова програмавання у звычным сэнсе. Це мова маркапінгу: вы кладзеце контэнт у элементы, якія паведамляюць браузеру, што ўключае кожны фрагмент контэнту. Тыповыя елементы включаюць:
- загаловкі і параграфы
- яе і супакінанні
- кнапкі і формы
- упорядкованыя та неупорядкованыя спісы
Ключовым словам ёсць значэнне. Тэг h2 адзначае "галоўка разделу", тэг button — "это тое, што можа быць актываравана корыстнікам". HTML не адпавядае за тое, каб усё выглядала прыемна або каб элементы рэагавалі; яго задача — структура документа і семантыка його зместу. Самэльчына большасць курсаў пачынаецца звярху: без зместу і структуры іншыя два слоі не маюць чаго робіць. Якщо вы хочаце глыбэй разабрацца з выборам правильных элементаў, наша інструкцыя па пераходу ад простых элементаў да семантычнага маркапу детальна распаведвае пра семантычны HTML.
CSS: як выглядае ўсё
CSS (Cascading Style Sheets) берае элементы, якія заявлены ў HTML, і вяршыць, як яны будуць прадставлены. Ён керуе:
- кольорамі і шрыфтамі
Возьмімо звычную кнопку. HTML дазволяе яе стварыць; CSS можа яе падгуляць, скарыгаваць канты, задаць колер брэнда і разместіць яе там, дзе таго трэба за дизайнам.
Найбольшая практычная перадача — раздзел наявных кантэнтаў і ўпрадасткавання. Пакалі стайлінг знаходзіцца на сваёй сябрэйскай складовай, каманда часта можа цэлыя сторунку перадзеясніць, не чапаючыся за HTML. Частка «каскадны» у назве адносіцца да таго, як прыстрой пераканае суперсучасныя правілы з разных джэрел, што варта выучыць, калі базавыя прыемы стануць зрозумелымі.
JavaScript: што выканаецца, калі корыстувальнікі дзейнуюць
JavaScript — это цэлыя язык программавання. У прыстрое ён дадае логіку і рэагуе на такія падзеі, як:
- нажатыя на кнопкі
- адасланне форм
- введэнне через клавіатуру
- рух мышы
- скроллінг
Ён таксама можа чытаць і перапісваць HTML і CSS сторанкі пад час яе роботы, за дапамою DOM (жывага представлення дакумента браузерам). Уявіце кантактную пляшчыку з называм "Паказваць іншую факт". Маркап ставяе пляшчыку на сторанку, шаблон стилю визначае яе выгляд, а скрыпт вырашае, што самэўсёлкі ўрабляе клік, напрыклад, заменяючы факт на новы.
Прагляд маленькага прыкладу
Разглядзім маленькую картку з інформацыяй. Маркап нижэй адзначае контейнер з заголовкам, короткім абзацам і кантактной пляшчыкой. Зверніце ўвагу на атрыбут class="card": ён сам по сабе нічога не робіць, але ён дае CSS і JavaScript можлівасць знаходзіць гэты элемент пазней.
<div class="card">
<h2>Did You Know?</h2>
<p>Click the button to see another fact.</p>
<button>Show Another Fact</button>
</div>
Калэктуя сама по сабе, гэты фрагмент адразумеваецца правільна, але выглядае проста, таму што браузер вяртаецца да сваіх стандартных стыляў. Наступны крок — це шаблон стылю, які нацэльваны на .card, каб дадаць заполненне, рамку, кольоры і кращую типаграфіку. Апошні крок — це скрыпт, які стежыць за здарэнням нажатча на кнопку і заменяе тэкст параграфа на ўсё новы. Кожны слой будуецца на тым, што ўжо є, не зменшаючы свайго завадзявання.
Табліца стыляў і скрыпт — два слаі, якіх чакала разметка. CSS не мяняе сказ, а скрыпт не задае колер.
.card {
max-width: 28rem;
padding: 1.25rem;
border: 1px solid #d0d5dd;
border-radius: 12px;
}
.card h2 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.card button {
margin-top: 0.75rem;
}const facts = [
'The button stays a button even if this file never loads.',
'CSS can restyle the card without this script knowing.',
];
const card = document.querySelector('.card');
const text = card?.querySelector('p');
const button = card?.querySelector('button');
button?.addEventListener('click', () => {
if (!text) return;
const next = facts[Math.floor(Math.random() * facts.length)];
text.textContent = next;
});Паралельна
Компактны спосаб прыглядзецца да трох канфігурацый:
- HTML адпавядае за структуру і контэнт, такі як загаловкі, параграфы і кнопкі.
- CSS адпавядае за выгляд і макет, такі як кольоры, абстацыі і шрыфты.
- JavaScript адпавядае за прыемы і логіку, такія як обработчыкі нажатча і дынамічны контэнт.
Стандартныя расшырэнні файлаў — .html, .css і .js. Для маленькіх дэманстрацый можна таксама залучыць усё ў адны файл HTML, размістіўшы стылі ў элементе <style> і код у элементе <script>. Гэта зручна для експерыментаў; у рэальных проектах окремыя файлы лёгкія да кэшавання, падзворачвання і адтрымкі.
Як шары залежаць адзін ад другога
Сконцентруйце кожную мову на аднам пытанні:
- HTML: які контэнт тут існуе?
- CSS: як прадстаўляецца гэты контэнт?
- JavaScript: як ён реагуе на корыстніка?
Шары выканаляюцца способам, які ўзгодны з практычным выкарыстаннем. Якщо адключыць CSS, кантактная пляшчыка застаецца, проста без стылю. Якщо адключыць JavaScript, кантактная пляшчыка застаецца видна, але больш не выконвае жадных дзейсціб. Кожны відсутні шар адзьёмляе ўмоžнасць, якую можа бачыць або выкарыстоўваць корыстнік, але контэнт застаецца цілае, калі HTML правільны. Гэта і є сутнісць прагрэсіўнага павышэння: пачынаюць з моцных маркапаў і пасля дадаюць элементы візуальнага адображэння і функцыйнасці.
Дзе заканчываецца фронтэнд і пачынаецца бэкэнд
Гэтыя тры мовы ёсць ядром разработкі фронтэнду — тай часткай прыемлі, якая работае ў браузеры і яку корыстнікі можаць бачыць і касацца безпосередна: контэнт, інтерфейс, макет і взаімадзеяння.
Бэкэнд — это адзіны шар, який работае на серверах. Яго звычайна выкарыстоўваюць для:
- баз дадзенаў
- аутэнтыфікаціі
- логіки з боку сервера
- API-ў
- практыкі дадзеных
У першы дзень вам не патрэбны навыкі роботы з бэкендам. Моцныя асабліванні ў HTML, CSS і JavaScript — граматычны першы крок, які спакойна дапамага пазнайоміцца з концэпцыямі бэкенду пазней.
Памылкі, якія размываюць межы
Частая памылка — спроба выкорыстоўваць JavaScript першым. Эфекты наведення курсора, пераходы, адповідныя до размеру екрана макеты і багато анімацый — це задача CSS; ўтратачваць іх у скрыптах зазвычай значыць больш коду, больш багоў і часта гorsую працэздатнась.
Іншая памылка — ігнораванне семантычнага HTML. Выкорыстоўванне справжніх заголовкаў, элементаў nav, section і button заместо універсальных контэйнераў спакойна робіць сторанку лёгкай у адтрыманні і значна болей доступной для скрын-чытальнікаў і пошуковых систем.
Троець зусім спрабоўваюць выучыць усе тры адразу, не розумяючы, для чаго кожны з іх патрэбен. Болей стабільны падход — пошаговы: спачатку адчуваеце ся як у HTML, потым дадаеце CSS, а пасля пазнаёмаете JavaScript через маленькія інтэрактыўныя проекты.
Выучэнне пашагова, зміняючы кожную деталь
Тлумачэнняя можа дапамагчы толькі часткова; панявленні застаюцца, калі вы правілі рэальны код. Зробіце адну змяну, паглядзіце на рэзультат, а потым — наступную:
- зменіце кольор у файле стылю
- скорэктуйце відстані межа
- пераструктуруйце маркап
- зменіце тое, што робіць скрыпт пад клік
Ведама адразу пасля кожной змяны дапамагае зрозумець, якая мова керуе якой часткай стораніцы. Для гэтага падходзяе будь-яка среда для тэставання на базе браузера або локальны файл, ачыненый у браузеры.
Галоўныя выводы
- HTML, CSS і JavaScript — это взаімадопамагаючыя элементы, а не конкурэнты.