WEB Flashcards
Какво е асинхронно програмиране?
То ни позволява много неща да се случват едновременно, заразлика от синхронното програмиране, където всичко става последователно. Асинхронността попзволява на програмата да продължи да работ след стартиране на някое действие. Когато действието приключи, програмата оплучава резултата. Ппозволява изразяване на сложни функции, но може да усложни някои линейни.
Кога е удачно да използваме асинхронното програмиране?
Когато се нуждаем от ефективно урпавление на задачи, които отнемат време, а не искаме програмата да спира, докато изчаква техния резултат.
Пример за такава задача е заявка от мрежата.
Какво са callbacks и как се изпълняват?
Изпълнява код в отговор на събитие.
Събитията могат да са кликвания на мишката или натискане на клавиш от потребителя.
Изпълнява се, когато друга функция вече е приключила изпълнението си.
Всяка функция, която се подава като аргумент на друга, за да може да бъде изпълнена в нея, се нарича callback function.
Какво е Event Loop?
Модел за изпълнение, събира и обработва събития и изпълнява опашкови задачи.
Това е постоянно работещ процес, който следи callback queue-то и call stack-а.
Той е ключът към асинхронното програмиране, тъй като изпълнява всички операции на един нишков процес, но създава илюзия за многонишков.
Стекът събира операции, които да се изпълнят и ги ппремахва, когато бъдат завършени.
Опашката изпраща нови функции към стека.
Какво са Promises и как ни помагат?
Позволява по-лесно справяне с асинхронен код и управление на последователността на операциите.
Представяме бъдещ резултат, който завършва успешно или с грешка.
Promise - ът е като обект, към който прикачаме callback.
Лесно управление на грешки, чрез ‘.catch()’.
Пишем асинхронен код, който прилича на синхронен.
Chaining е важен аспект от promises, който ни опзволява да изпълняваме последователни асинхронни операции по-четими.
Методът ‘.then()’ ни позволява да прикачим callback към promise. Връща нов promise, различен от оригинала. Той представлява завършването на promise-ът и функцията за успешно или неуспешно завършване. АКО към тези две изходни функции има прибавени други асинхронни операции, биват изпълнени след като е завършил първият promise.
Какво са ключовите думи ‘async’ и ‘await’?
Улесняват работата с promises.
Async - генератор на promise, създава го при извикване. Решава се или се отхвърля ако има Exception. (error)
Await - означава, че кодът ще изчака завършването на promise-ът, преди да продължи.
Този подход прави асинхронният код да изглежда като синхронен.
Как работи ‘async-await’?
Когато някоя функция е ‘async’, тя винаги връща promise.
Когато използваме ‘await’ преди promise-ът, се преустановява до момента, в който promise-ът бива решен (resolve) или отхвърлен (rejected).
Когато ‘await’ изчака решението на promise-ът, неговият резултат се връща на ‘await’ оператора и така кодът си ппродължава изпълнението с получения резултат.
В случай, че promise-ът бива отхвърлен, ‘await’ хвърля грешка, която можем да хванем с ‘try-catch’ блок.
Какво е WWW (World Wide Web)?
Информационна система, която позволява достъп до документи и други ресурси в интернет.
Информацията се предоставя чрез уеб сървъри и се достъпват чрез уеб браузър.
Идентифицират се и се намират чрез URL.
Какво е HTML (Hypertext Markup Language)?
Описателен език без логики.
Тип документ, който представлява уеб страница форматирана чрез този език.
Той поддържа текст, снимки, видео, аудио, скриптове, хипервръзки.
Информацията в уеба се ппредава поп интернет чрез HTTP (Hypertext Transfer Protocol)
Какво са уеб клиентите и сървърите?
Уеб съдържанието се намира на уеб сървър. Те използват HTTP.
Съхраняват данни и ги предоставят при поискване от HTTP клиент.
Клиентите изпращат HTTP заявки към сървърите, те връщат HTTP отговор.
Уеб клиентът - уеб браузър.
Какво е уеб браузърът и с какво е по-различен от Node.js?
Уеб браузърът ни позволява да сърфираме в уеба, а node - не.
Node-а е среда за изпълнение на JS.
Браузърът ни рендерира уеб страницата, а node изпълнява JS.
Браузърът има ‘window’ обект, а node - не.
Node поддържа модулна система.
Node обработва сървърни заявки и връща отговор, а браузърът изпраща заявки към сървър и обработва отговора.
Какво е семантичният HTML и как да го постигнем?
Отнася се до използването на HTML елементи, които имат смислово значение и опписват структура на уеб страницата. Тук се пподчертава смисъла на съдържанието, а не само визуализацията.
Помага на браузъра да интерпретира страницата по-ефективно.
Какво е CSS и какво проблеми разрешава?
Cascading Style Sheet е език за оформление на HTML документи. Определя как елементите в уеб страницата да се визуализират.
Разрешава няколко проблема:
-осигурява визуален стил, който лесно може да се променя;
-с помоща на класове, могат да се правят промени върху много елементи наведнъж;
-съвместим с браузърите;
-позволява респонсив дизайн, според големината на екрана на потребителя;
Кои са 3-те начина за добавяне на CSS в кода?
- Inline - чрез кл. дума ‘style’ в HTML елемента. Използваме го за прилагане на уникален стил към единичен елемент.
- Internal - чрез изпозлване на елемента ‘<style>' в секцията '<head>', може да го използваме за стил на единична страница.</style>
- External - в отделен ‘.css’ файл си пишем стиловете и чрез елемента ‘<link></link>’ в секцията ‘<head>’ свързваме външния файл с HTML-а.
Каква е разликата между ID и класовете? Кое кога да използваме в CSS?
Това са селектори, използват се за дизайн в CSS файла.
ID - уникално.
Class - много елементи, ако ще ползваме същият селектор много пъти.
Какви са типовете селектори, които можем да ползваме в CSS?
Типове, класови и идентификаторни селектори, които насичват HTML елемент - <h1>
Атрибутни селектори - избираме елемент в зависимост от наличието на определен атрибут върху него - a[title] {}
Псевдо-класове и елементи - според състоянието - a:hover {}
Комбинатори - комбинира селекторите и избираме всички селектори в конкретен елемент - article > p {}
Каква е йерархията на приоритета на селекторите в CSS?
Селекторите имат опрпеделен приоритет срямо вида и наличието на ID, CLASS, TYPE.
ID - най-висок приоритет 1-0-0 (#example)
CLASS - +атрибути и псевдо класове са второстепенни 0-1-0 (.myClass, :hover)
TYPE - +псевдо елементи са с най-нисък приоритет 0-0-1 (p, h1, ::before)
Селекторите, които не се броят са с приоритет 0-0-0
Каква е разликата между блок елементите и линейните елеменети в CSS?
Block elements:
-винаги започват на нов ред и заемат цялото налично пространство по широчина;
-автоматично си добавят марджин преди и след себе си;
-примери: <p> и <div>
Inline elements:
-не започват на нов ред, заемат колкото ширина им е нужна;
-не добавят марджин;
-не могат да съдържат блокове;
-примери: <a> <span></span></a>
Какво е Grid Layout в CSS?
Метод за организиране на HTML елементите в решетка, като се разополагат на колони и редове.
Parent element - grid container;
Child el. - grid items;
Родителският трябва да има стиловете: `display: grid/inline-grid’
Какво е DOM дървото?
Програмен интерфейс, представя уеб документи като дърво от нодове и обекти. Това позволява на други програми да променят структурата, стила и съдържанието на уеб страницата.
Какво са document и window обектите?
Document Object - заредена уеб страница в браузъра, ако го достъпим, можем да манипулираме елементите в HTML-а. Добавяме динамично съдържание към уеб страницата.
Window Object - най-горният обект в йерархията на DOM-а. Това са прозорците в браузъра, който показва съдържанието на страницата.
Какво са Events в DOM?
Сигнали за натиснат клавиш или натиснат бутон на мишка.
Мишката: click, contextmenu(десен бутон), mouseover / mouseout, mousedown/ mouseup, mousemove;
Клавиатура: keydown / keyup, submit, focus
Документ: DOMContentLoaded
CSS: transitionend
Каква е разликата между event bubbling и event capturing?
- когато настъпи event, заппочва от най-вложения ел., върху който се случва event-а. (event.target);
- следва засичане и възходящо разпространение (bubbling);
- повреме на засичането, евента се движи от root-a към event.target-a
- повреме на разпространението върви от event.target-a към root-a
event capturing - рядко, обратно
Какво е DOM API? Защо да го използваме?
DOM Application Programming Interface - дава инструменти, с които можем да контролираме уеб страниците и създаваме по-интерактвини и динамични уеб пприложения.
- позволява динамични промени в съдържанието;
- създаване на интерактивни уеб приложения чрез реагиране на евенти;
- дава достъп за манипулация на данни в страницата;
- създаване на съдържание динамично по време на изпълнение на JS
Какво е URL?
Uniform Resource Locator е местоположението на ресурс в компютърна мрежа и начин за достъпване на този ресурс. Показва местоположението на уеб страници, файлове и др. Това е път към КОНКРЕТЕН и уникален ресурс в мрежата.
Какво е network protocol?
Мрежовият протокол е набор от правила и конвенции, които определят как данните се изпращат и обменят в мрежата.
- Протокол за комуникация - установяват, поддържат и прекратяват сесии. TCP/IP, HTTP
- Протокол за управление - наблюдение и контрол на ресурсите на мрежата. ICMP - за диагностика; SNMP - за управление на рутери
- Протокол за сигурност - поверителност HTTPS, SFTP, SSL
HTTP - основа на мрежата
Какво е HTTP? Как работи?
Hyper Transfer Protocol - позволява обмен на данни в мрежата. Протокол за заявки и отговори. Как работи?
1. Заявка от потребител (GET, POST);
2. Обработка на завката;
3. Отговор от сървър (статус код)
4. Рендериране
Кои са HTTP методите?
Методите са начин, по които клиентите изпращат заявки към сървъра.
GET, POST (създаване), PUT (ъпдейт), DELETE, PATCH (частичен ъпдейт)
Статус кодове:
1xx - informational;
2хх - success;
3xx - redirect;
4xx - client error;
5xx - server error;
Какво е request body?
Данни от клиента към нашето API.
Response body - отговор от API-то към клиента.
GET/HEAD нямат body и връщат null
Какво е AJAX? Защо да го ползваме?
Asynchronous JavaScript and XML - добавя динамична структура, като следи кои неща искат обновления в реално време, докато потребителя е в сайта.
По това време XML, транспортира данните между клиента и сървъра.
Ползването на AJAX, позволява сайта да се ъпдейтва постоянно без да се презарежда.
Това е комбинация от:
XMLHttpRequest - обект, асинхронен обмен на данни;
JavaScript/DOM - показване и работа с инфото;
CSS - стил;
XML - форматира данни;
Какво е Fetch API?
Позволява на браузъра да прави HTTP заявки към сървър.
За заявка и респонс ползваме fetch(), приема като аргумент URL към ресурса, връща Promise, който се разрешава с РЕСПОНС на заявката. Връща статус код.
fetch() стартира извличане на ресурс от сървър и връща ПРОМИС, който се разрешава до РЕСПОНС обект.
Какво е SPA Model и защо да го ползваме?
Уеб страница, която работи на една HTML страница. Всички необходими ресурси се зареждат първо и динамично обновява съдържанието.
+
- бързи;
- респонсив;
-
- лошо SEO;
- проблеми със сигурността;
- ако има повече инфо на сайта, се натоварва;
- няма история;
Какво е React.js?
Библиотека, създава динамични потребителски интерфейси. Могат да променят данни без да зареждат страницата. Комбинира се с други библиотеки или фреймуърци.
- разделяме всичко на компоненти;
- пишем логиката на JS;
- по-лесно писане на респонсив интерфейси;
- декларативен метод на писане;
Как вкарваме React в нашия проект?
- Тагове - включваме РЕАКТ директно в HTML-а;
- Създаване на React App - настройва нов проект:
npx create-react-app my-app - Vite + React App
npm create vite@latest
Какво са елементите и компонентите в React?
Елемент - най-малкият строителен блок, може да е HTML таг (span, div…) има props (данни, които го конфигурират - стил, текст) и деца на елемент, които са вложени в текущия.
Компонентът - разделяме интерфейса на независими и лесни за преизползване части. Пишат се като функции, приемат “props” и връщат REACT ELEMENT.
Има функционални и класови компоненти.
Какво е JSX?
JavaScript XML е разширение базирано на ES6.
JSX създава React елементи, като можем да пишем експрешъни в { }.
Babel превежда JSX -> JS.
Какво е Virtual DOM?
Концепция в РЕАКТ, подобрява ефективността при обновяване на уеб интерфейса.
Всеки път като променяме състоянието на приложението, виртуални ДОМ се актуализира вместо реалния ДОМ. Виртуалния изчислява как да изпрати промените към реалния по най-бързия начин и така се намалява времето при актуализация.
ReactDOM ще актуализира само променените части на DOM чрез РЕКОНСИЛАЦИЯ.
промяна -> компонентите се изчисляват и се рендерира на ново -> старото дърво се сравнява с новото -> актуализация на реалния DOM.
Какво са “props”?
“props” входни параметри, които родителският компонент предава на детския, предават се към компонент, “state” се управлява ВЪВ компонента.
И двете съдържат информация, която влияе на изхода от рендерирането.
Типове:
- Stateless - имат само “props”, нямат “state”, лесни за проследяване, dumb components;
- Stateful - “props” + “state”, грижат се за комуникация между клиент и сървър, обработка на данни и реагиране на събития.
Какво е “props.children”?
Проп, който се предава автоматично на всеки компонент в РЕАКТ. Изобразява съдържанието между отварящ и затварящ таг при извикване на компонент.
Как си гарантираме “prop types”?
Външен механизъм за валидация на пропс, трябва да го изтеглим.
npm install prop-types
Какво е “state” в React?
Вътрешна променлива, когато се актуализира, променя изгледа на компонента.
Какво е HOOK?
Функция, към която закачаме други функции.
- useState - добавяме РЕАКТ състояние към функция.
Как да рендерираме компонент в зависимист от стейта?
Съхраняваме ги в променливи и ги преизползваме.
Как функцията ‘Map’ помага за преобразуване на списъци?
Преобразува данните в списъци и генерира нов списък с преобразуваните данни.
Защо са необходими ключове в списъците?
Това е уникална стойност, която помага да се идентифицира елементи.
Не е добре да използваме индекс на масив за ключ, защото ако се модифицира масива, индексът се променя.
Всички ключове ли са уникални за апликацията?
Трябва да са уникални само за частта на компонента, която рендерира колекцията от елементи.
Не се изисква за цялото приложение.
Може ли да имаме callback функция чрез props?
Да, евентите да са написани в camelCase.
Каква е ползата от писане на компоненти, вместо наследяване от тях?
Можем да преизползваме кода между компонентите и прави coupling-а по-слаб.
Как се пише React HOC?
React Higher-Order Component е функция, която приема компонент и връща нов с допълнителна функционалност.
Каква е разликата между ‘smart’ и ‘dumb’ компонент?
Smart - грижат се за това как работят нещата;
държат общото състояние между компонентите;
Dumb - нямат състояние, само рендерират.
Каква е целта на useEffect? Как функционира? Защо се извиква вътре в компонент? Изпълнява ли се след всеки рендър?
Позволява ни да правим странични ефекти вътре във функционални компоненти.
Чрез използването му, казваме на РЕАКТ, че този компонент трябва да прави нещо след рендериране. РЕАКТ помни подадената функция и я извиква след рендерирането.
Извикваме го вътре в компонента, защото ни позволява да достъпим променливи на състоянието директно от ефекта.
Изпълнява се след всеки рендър.
Каква е целта на зависимия масив на useEffect?
UseEffect ще стартира само когато един от елементите в масива се е променил. Ако не му се подадат елементи, ще се стартира всеки път.
Как да създадем персонален Hook?
Това са функции, които могат да се използват повторо. Персоналния хук се пише на JS и името му започва с ‘use’ и може да извиква други хукове.
Как работи useState hook, какво му подаваме като аргумент, какво ни връща?
Добавя състояние към функция.
- Декларираме променлива за състоянието и тя ще съдържа стойността на състоянието, което искаме.
- Подаваме начална стойност като аргумент.
- Ще ни върне масив с два елемента, текуща стойност и функция, с която да актуализираме състоянието.
- Когато използваме тази новодошла функция, РЕАКТ ще рендерира наново компонента и ще отрази състоянието.
Какви са правилата за работа с хукове?
Да се използват само в горния слой на компонента.
Да се извикват само в РЕАКТ функции.
Да не се ползват с цикли и if-statements.
Каква е разликата между клиентския и сървърния рутинг?
Начина по който се управляват адресите на уеб страниците.
При сървърния рутинг, като кликнем на линк, браузърът прави заявка към сървъра и той връща нова страница.
При клиентския, първоначално се зарежда цялото приложение от сървъра и всичко се зарежда без нуждата от заявки към сървъра.
Как да използваме ХУК, който достъпва URL?
Чрез ‘useParams’ хукът, можем да изпращаме допълнителни параметри по пътя и заявки към маршрута. Той връща обект с ключ/стойност.
Чрез ‘useNavigate’ хукът, можем да му подаваме път и да навигираме.
Какво е автентикация?
Процес на определяне дали някой или нещо е наистина това, за което се представя.
Има няколко типа:
потребител - user ID, нуждае се от парола;
Еднофакторна автентикация (SFA)
Какво е JWT?
JSON Web Token е отворен стандарт, чрез който споделяме инфо за сигурност между клиент и сървър. Например да си останем в профила, след като сме излезнали от страницата.
Съхранява се локално.
Как се споделя състояние между компонентите?
Може ли всеки компонент автоматично да използва контекст?
Кой хук предоставя контекст?
С помоща на Context API, той ни позволява да предаваме състояние в цялото приложение без props.
За да се използва автоматично, ще трябва да обгърнем контекста в ‘AuthContet.Provider’.
useContext - предоставя контекст.
Какви примери има за автентикация?
- С парола
- MFA - многоразов:
- код за достъп;
- CAPTCHA; - Цифров сертификат;
- Биометрични:
- лицево разпознаване;
- отпечатък;
- гласово;
- скенер на очи; - Токен с JWT;
- OAuth
Каква е разликата между клиентска и сървърна валидация?
Клиентската - ивършва се в браузъра - форми и данни.
Сървърна - след като данните са изпратени от клиента.
Какво са контролираните компоненти в РЕАКТ?
Контролираният компонент в React е такъв, който използва React’s state (състояние) за да управлява стойностите на входните елементи, като например текстови полета.
Какво е формулярното състояние и защо да го използваме?
Обект, съдържащ информация за цялото състояние на формуляра. Запазва, нулиране и валидиране на полета.
Защо да извикваме event.preventDefault() в събмита на формата?
За да се предотврати презареждането на страницата.
Как се валидират различни форми?
Управление на състоянието за валидация.
Добавяне на състояние за валидност на целия формуляр.
Деактивиране на начините за изпращане на невалидни данни.
