Практическо ръководство за това как да създадете уеб приложение с помощта на HTML, CSS и JavaScript

Уеб разработката напредна до ерата на рамката. Интервюто обаче е опит с ограничено време. Често интервю за работа с преден интерфейс изисква изграждане на опростено уеб приложение с ограничен ресурс от HTML, CSS и JavaScript и евентуално без достъп до интернет за проверка на синтаксиса.

В тази статия използваме ограничен ресурс за изграждане на уеб приложение.

Подготовка на VSCode

Използваме VSCode, за да настроим работната среда за HTML, CSS и JavaScript.

  • Създайте директория, наречена js.
  • Създайте два празни файла в директорията: index.html и style.css.

Отворете празното index.html и въведете !. Изберете първия избор в изображението по-горе и ще се генерира HTML скеле:

Добавяме към горния шаблон.

На ред 7 се добавя връзка към style.css в секцията head. В случай, че не помните синтаксиса link, въведете link и въведете. VSCode ще генерира елемента link. Този метод работи за всички HTML тагове.

На ред 10 се добавя div от Hello, world! в секцията body.

Това е. Създадохме нашето Hello, world! уеб приложение!

Тогава как можем да видим уеб приложението?

Разширението VSCode, Live Server, може да помогне.

Изтеглете Live Server, който е локален сървър за разработка с функция за презареждане на живо за статични и динамични страници.

Щракнете с десния бутон върху index.html и изберете опцията Open with Live Server. Очаквано виждаме сесия на браузъра да се стартира с уеб приложението:

CSS оформления

Имахме Hello, world! в браузъра. Използването на CSS за стилизиране на оформлението на страницата вероятно е следващата стъпка от процеса на интервю.

Първи въпрос: как позволявате на Hello, world! да запълни целия екран?

Това може да се постигне с style.css:

На редове 3 - 4 задаваме width и height, за да накараме елемента body да запълни екрана.

На ред 5 margin: 0 заменя полето по подразбиране на браузъра.

Обикновено е добра идея да зададете box-sizing: border-box (ред 10) за включване на рамка и подложка в ширината и височината на елемента.

За елемента div обичайна практика е да се настроят width: 100% и height: 100vh да поемат целия изглед (редове 14 и 15). Опитайте да го промените на height: 100%. какво ще видиш Елементът div става тънка лента. Настройка background: yellow (ред 16) прави ефекта очевиден.

На редове 17 и 18 настройката display: grid и place-items: center центрира текста.

Отговорихме на първия въпрос. Сега правим малко повече.

container (редове 5 - 9) се добавя към раздела body и съдържа три елемента.

Наборите от правила се коригират съответно в style.css:

Идентификаторът container използва оформлението flex (ред 17).

Класът item задава width: 100px (ред 23).

Елементите са равномерно разпределени на екрана чрез декларацията на ред 19:

Вместо твърд код width, можем да направим ширината на елемента да отговаря на ширината на контейнера:

На ред 2 flex-grow е зададен на 1.

Досега сме използвали grid за центриране на текста. Дисплеят flex може да постигне същия ефект:

С един допълнителен ред, редове 6 - 8 също центрират текста.

Нека да разгледаме свойството flex на ред 2. Синтаксисът му е дефиниран, както следва:

  • none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
  • <’flex-grow’>: Дефинира flex-grow на гъвкавия елемент. Отрицателните стойности се считат за невалидни. По подразбиране е 1, когато е пропуснато.
  • <’flex-shrink’>: Дефинира flex-shrink на гъвкавия елемент. Отрицателните стойности се считат за невалидни. По подразбиране е 1, когато е пропуснато.
  • <’flex-basis’>: Дефинира flex-basis на гъвкавия елемент. Предпочитаният размер 0 трябва да има единица, за да се избегне тълкуването му като гъвкавост. По подразбиране е 0, когато е пропуснато.

Видяхме, че настройката на flex на 1 ще увеличи елементите. Това е стойността flex-grow.

Следните са потенциални въпроси за интервю:

Какво се случва, ако flex не е зададено, нито width?

След това ширината се задава на ширината на съдържанието. Следователно елемент Three е по-широк от елемент One.

Какво се случва, ако премахнем justify-content от container (ред 6) в кода по-долу?

Допълнителната ширина вече не се разпределя.

Какво се случва, ако зададем flex: 0 1 200px (ред 2) в кода по-долу?

С тази настройка flex-grow е 0, flex-shrink е 1, а flex-basis е 200px. Ширината на всеки елемент е фиксирана на 200px без да нараства.

Какво се случва, ако зададем flex: 1 1 200px (ред 2) в кода по-долу?

С тази настройка flex-grow е 1, flex-shrink е 1, а flex-basis е 200px. Елементите заемат цялата ширина.

Ами ако flex-basis е 500px (ред 2 в кода по-долу), където 3 елемента са по-широки от прозореца за изглед?

Когато контейнерът е зададен на flex-wrap: wrap, допълнителните елементи преминават към следващите редове. В този случай всички елементи се подреждат.

Ами ако изключим flex-grow на ред 2?

Тогава подредените елементи не растат.

Използвахме flex, за да изследваме различни оформления. Трябва да е достатъчно за изграждане на просто уеб приложение. Можем също да използваме оформлението на „решетката“, за да изпълним същата задача. Традиционните относителни или абсолютни позиции също могат да работят. Просто изберете начин, който ви е най-удобен.

Като част от практиката можете ли да създадете уеб приложение със следното оформление?

Лесно е, нали?

Ето го index.html:

Ето го style.css:

JavaScript действия

JavaScript се използва за програмиране на поведението на уеб страниците. Интервюто за уеб приложение обикновено се състои от някои интерактивни аспекти.

За предишното уеб приложение ще добавим интерактивната част. Когато се щракне върху всеки елемент, цветът на фона му ще се промени на син. След 1 секунда цветът ще се върне обратно към розов.

Има 4 стъпки за добавяне на интерактивната част:

  1. Създайте етикета script.
  2. Достъп до елементите в тага на скрипта.
  3. Внедрете манипулатори на събития.
  4. Добавете визуални индикации.

Създайте маркера на скрипта

Етикет за скрипт може да се добави към секцията head или body секцията. Къде да го поставим?

Поставете маркера на скрипта в секцията head, ако се изпълнява, когато бъде извикан, или когато се задейства събитие. В противен случай го поставете в body. Когато е в секцията body, поставете я в долната част на секцията body, за да не забавяте зареждането на HTML съдържанието.

Най-общо казано, препоръчително е да поставите всички скриптове в секцията head за по-лесно управление.

Достъп до елементите в тага на скрипта

Целевият елемент може да бъде извлечен от параметъра на манипулатора на събития. Или може да бъде извлечен от няколко API:

  • document.getElementById()
  • document.getElementsByClassName()
  • document.getElementsByName()
  • document.getElementsByTagName()

Методът document.getElementById() връща елемента, който има атрибут id с указаната стойност. Други API връщат колекция от всички елементи в документа с посочената функция. Колекцията е обект, подобен на „масив“. Трябва да се преобразува в масив за достъп до API на масив.

Елементът или елементите могат също да бъдат извлечени от CSS селектор(и):

  • document.querySelector()
  • document.querySelectorAll()

След като JavaScript извлече елемента x, той може да бъде достъпен за промяна на атрибути, като x.innerHTML = ‘New Value’ , x.style.color = ‘blue’ и т.н.

Внедрете манипулатори на събития

Има три начина за обработка на събития:

  • В HTML елемент може да се управлява от атрибута on<event>. Например <div class=”item” onclick=”myHandler(this)”> и <div class=”item” onclick=”myHandler(event.currentTarget)”>.
  • В JavaScript може да се създаде като on<event> функция за посочения елемент. Вземете елемента x като пример, манипулаторът на събитие може да бъде написан като x.onclick = event => {}.
  • В JavaScript методът addEventListener() прикачва манипулатор на събитие към посочения елемент. Вземете елемента x като пример, манипулаторът на събитие може да бъде написан като x.addEventListener(‘click’, event => {}, useCapture).

Добавете визуални индикации

Винаги е добра идея да предоставяте визуални индикации на потребителите. За това упражнение, когато мишката влезе в елемент, промяната му в показалец напомня на потребителите, че върху елемента може да се кликне. В кода по-долу ред 11 постига този ефект.

Обяснихме 4-те стъпки за добавяне на интерактивната част към уеб приложението. Готови ли сте да го изпробвате?

Решение 1: Използвайте атрибута onclick на HTML елемента

Манипулаторът на събитието, myHandler, е внедрен в секцията head (редове 9 - 14).

В редове 19, 28 и 33 атрибутът onclick се добавя към елемента div. “this” се предава като текущия елемент. Алтернативно, event.currentTarget работи по същия начин (ред 20).

Решение 2: Използвайте метода addEventListener() на JavaScript

В това решение атрибутът onclick на елемента се заменя с кода на редове 43 - 46 в секцията body.

Ако преместите JavaScript от раздела body в раздела head, той ще се оплаква, че елементите не са дефинирани, тъй като DOM не е зареден.

Въпреки това е трудно да се поддържа, когато кодът на JavaScript е разделен и в двете секции head и body. Има ли начин за разрешаване на проблема?

Решение 3: Използвайте метода window.onload на JavaScript

В редове 15 - 20 кодът за инициализация на JavaScript е обвит в window.onload, който се задейства, когато цялата страница се зареди.

Сега целият JavaScript код е добре изброен в секцията head.

Заключение

Настроихме уеб приложение, използващо HTML, CSS и JavaScript. Ще има още въпроси като:

  • Каква е разликата между window.onload и document.onload?
  • Как да предотвратите бълбукане на събития, ако има множество манипулатори на събития?
  • Как да приложим делегиране на събитие?

Това е отправна точка за типично интервю с продължителност 1 час. Практиката прави перфектния. Насладете се на кодирането.

Благодаря за четенето. Надявам се това да е било полезно. Можете да видите другите ми публикации в Medium тук.