Były pytania z CSS oraz JavaScript i druga część. Aby jednak mieć komplet pytań technologicznych na Front-End developera, teraz pora na pytania rekrutacyjne z HTML, a dokładnie chodzi o pytania z HTML5.
Wydaje mi się, że raczej pytania na rozmowach rekrutacyjnych będą dotyczyły języków JavaScript oraz CSS. Tego typu pytania zadałbym jednak pewnie na rozmowie rekrutacyjnej na web mastera lub web designera. Więc może się komuś przydadzą.
W pytaniach zamieściłem dwie zagadki z kodem HTML. Są to ciekawostki na pograniczu HTML oraz JavaScript. Gdy rekrutujesz, na stanowisko programisty JavaScript, możesz zadać jedną z nich.
1. Czym różni się znacznik header od h1?
Header jest to jeden ze znaczników semantycznych, za jego pomocą możemy utworzyć nagłówek. Który np. ma w sobie h1 a pod sobą np. imię, nazwisko i datę. Można też w nim umieścić. Nawigacje. Natomiast h1 jak i inne znaczniki h1-h6 służą do tworzenia nagłówka do jakiegoś tekstu np. tytuł artykułu, lub sekcji.
2. Do czego służy znacznik main?
Według MDN jest to znacznik, który służy do umieszczenia głównej części strony. Powinien być tylko jeden taki znacznik na stronie (chociaż były o to spory to miedzy dwoma specyfikacjami, niestety nie mam żadnego źródła, jeśli znasz dodaj w komentarzu).
3. Wymień 3 nowe tagi w HTML5:
oto kilka: section, article, header, footer, main, video, audio, strong
4. Jak jest różnica między div a span?
div jest to element blokowy, którego szerokość wynosi 100% natomiast tag span jest to element
inline który można np. wstawić wewnątrz tekstu. Będzie się on zachować jak tekst, czyli można
np. zapisać:
foo <span>bar</span> bazBędzie to jedna linia, tak jakby elementu span nie było, można go jednak ostylować inaczej nadając mu np. kolor za pomocą CSS.
5. Wymień 5 technologii występujących w HTML5
Canvas, WebGL, History API, Storage, Drag & Drop, content editable, Wysyłanie wiadomości (czyli postMessage i zdarzenie message), tagi audio i video.
API które nie wchodzą do specyfikacji HTML5 to m.in. GEO Lokalizacja, WebRTC czy obsługa plików (File API, Directory API).
6. Jak zapisać kodowanie znaków i jakie najczęściej się stosuje?
Najczęściej stosuje się UTF-8, czyli kodowanie znaków Unicode. Na stronie wystarczy dodać:
<meta charset="utf8"/>w sekcji head. Jest to pozostałość po takim długim wpisie ze starego HTML4.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>Który nadal działa (jest to odpowiednik nagłówka HTTP na stronie HTML). Przeglądarki po prostu
rozpoznawały samą końcówkę charset=utf-8, więc wystarczyło wstawić je jako tag w html5.
7. Jak należy wskazać przeglądarce, że strona jest zapisana w HTML5?
Strona powinna mieć na początku typ dokumentu. Kiedyś był bardzo długi i zawsze trzeba było szukać, jak go zapisać, albo mieć zapisane szablony plików HTML. Oto przykład:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Dzisiaj wystarczy zapisać:
<!DOCTYPE html>I to wystarczy. Warto zawsze dodawać, ponieważ gdy go nie ma, strona może się dziwnie renderować. Jest to spowodowane tym że może przejść w tzw. quirks mode.
8. Czym się różni ol od ul?
- ol - czyli ordered list to lista z numerami
- ul - unordered list - lista puntów
9. [Zagadka] Co się stanie, gdy kliknie się ten przycisk?
Masz taki html:
<form>
<button onclick="x()">click</button>
</form>Zakładając, że nie ma żadnego pliku JavaScript, co się stanie, gdy klikniesz przycisk i dlaczego?
Odpowiedź zostanie wysłane zapytanie HTTP do tej samej strony ponieważ, przycisk button, jeśli nie ma
type="button", działa tak jak <input type="submit"/>. Przez ułamek sekundy pojawi się błąd w
konsoli, ale zniknie, jeśli nie ma włączonej specjalnej opcji (chodzi o preserve logs). Gdy nie mamy
konsoli deweloperskiej, jedyną zmianą będzie znak "?" na końcu URL. Gdy jest to plik html o nazwie
foo.html adres zmieni się na foo.html? (jest to spowodowane tym, że wysyłany jest Query String,
tylko pusty, ponieważ nie ma żadnych parametrów)
10. Do czego służy atrybut role?
Jest to znacznik, który określa znaczenie elementu. Głównie do celów dostępności (ang. accessibility). Jest częścią specyfikacji ARIA. Został też dodany do HTML5.
11. Jak dodać swój własny atrybut, aby był zgodny z HTML5?
Do html można dodawać dowolne atrybuty, przeglądarki nie będą miały z nimi problemu. Ale aby być
jednak zgodnym z HTML5, należy użyć atrybutu data-nazwa="wartość". Taki atrybut można potem pobrać
za pomocą element.dataset.nazwa. (Zadziała też starszy, działający w każdej przeglądarce,
getAttribute).
12. [Zagadka] Co się stanie, gdy kliknie się ten przycisk?
<button id="foo" onclick="foo.remove()">click</button>Przycisk zostanie usunięty, ponieważ każdy element, który ma atrybut id w html, zostanie dodany w
JavaScript jako zmienna globalna. Funkcja/metoda remove to nowe API, które działa jak starsze
foo.parentNode.removeChild(foo).
13. Jak utworzyć link do elementu tej samej strony?
Za pomocą atrybutu id oraz linku (kotwicy).
<a href="#foo">p</p>
<p id="foo">Jakiś Text</p>14. Jak ograniczyć liczbę znaków w polu tekstowym?
Służy do tego atrybut maxlength. wystarczy np. ustawić maxlength="100".
15. Jak dodać walidacje za pomocą samego HTML?
<form>
<input required pattern="x{2}y{2}"/>
</form>w powyższym formularzu mamy walidację, która wymaga aby pole input, było wypełnione, oraz aby
wartość w tym polu równała się xxyy za pomocą wyrażenia regularnego.
Więcej o walidacji w artykule: „Natywna walidacja formularzy HTML5”.
Komentarze
Hasło, które podasz umożliwi ponowne zalogowanie się i np. usunięcie komentarza, jest dobrowolne. Email jest szyfrowany i używany do wysyłania powiadomień o odpowiedziach do komentarzy oraz do pobierania awatara dzięki usłudze Gravatar.com.