JavaScript 5.11.2025
Box Model
Jak elementy są renderowane w przeglądarce - jako prostokąt
- Content rzeczywista treść (widthxheight) - rzeczywista treść, obrazy, inne elementy dzieci które zawierają się w tym. Szerokośc i wysokośc są określone przez właściwości w CSS, jeśeli ustawimi je na konkretną wartość, np 200px tzn ze przy standarodowym renderowaniu to 200 px bedzie ten obszar
- Padding przestrzeń wewnętrzna wokół contentu - odstęp od brzegu contentu, do kolejnego elementu, jeśli content ma 200x100 to padding ma 240 x 140 (content i padding z obu str), padding moze być różny dla różnych kierunków, ale można ustawić taki sam dla wszystkich, wartości zaczynają się od góry i zgodznie z kierunkiem ruchu zegarka padding 10px 20px 15px 25px lub padding 20px
- Border Obramowanie wokół paddingu, rozmiar całkowity 250x150px, border ma 3 właściwości, np border: 5px solid orange lub border-width: 5px, border-style: solid, border-color:
- Margin kompletny box, margin tworzy przestrzeń wokół całego boxa (widoczna jako pattern), odstęp od border, jest przeźroczysty, pokazuje tło jakie będzie mieć rodzic, moze byc definiowany tak samo jak padding, czyli margin 20px lub margin-top, margin-right, margin-bottom, margin-left. Margin nie sumuje sie do rozmiaru boxa
Collapse - sąsiednie elementy np. dwie ramki z marginesem 20 to nie będzie między nimi 40 tylko 20, a jak są różne dwie to bierze tą większa, margin: 20px wtedy sie nie collapsuje a jak zrobimy margin:20px 0; to ta wartość nie będzie sumowana
Box-sizing: content box vs border box
Standardowo obiekt jest wymiarowany do content boxu, to oznacza, że content box jest tym głównym rozmiarem, a reszta jest wypadkowa padding i margin.
Możemy ustawić tryb wymiarowania na border box, co oznacza, że nie wymiarujemy do contentu, tylko do ramki - bordera.
Border-box jest lepsze, bo jeśli ustawisz width na 50% (szerokości okna, rodzica itd), element będzie dokładnie 50% szeroki - niezależnie od padding czy border. Nie trzeba bawić się w kalkulacje wymiaru na zewnatrz bo bedzie od razu wiadomo jaki jest wymiar.
Container: 400px, to content box wyłazi, a jesli border box to on sie dostosuje czyli bedzie na 50% , nie będzie wystawał
Best practice: reset który ustawia wszystkie elementy box-sizing, border box
*, *::before, *::after {
box-sizing: border-box;
}Reset - jak tworzysz plik html i nie wskażesz wartości dla marginesów, paddingu, ramki, to każda przeglądarka ma domyślne wartości, jak sobie weźmiemy pusty dokument, wpiszesz cokolwiek to to nie będzie w pkt 0,0 tylko bedzie troche od 0,0, ale jeśli wklei się ten reset, to wtedy pozycja tego aaa będzie taka jak ustawi ten reset. Te resety dają nam pewność, ze każdy z tych elementów koty będzie w body bedzie miał margin, padding itd plus każdy element jesli nie ma zdefiniowanych tych wartości to będzie się ustawiał wg tego resetu.
max-width: 300px; max-height:300px określa max lub min wartości dla naszych obiektów, jak będziemy manipulować okienkiem, to jak mamy ten parametr ustawiony to okienko zatrzyma się na danym elemencie. Jeśli nam zależy by dany element nie zmniejszał się niż, nie zwiększał się niż to używamy tego, pozwala stworzyć bardziej przewidywalny layout. Np na ekranach telefonów itd żeby nie było np. zbyt małe. Max-width pozwala nam kontrolować jak strona ma zachowywać się nawet na b. dużych ekranach
Narzędzie deweloperskie - zakładka element, computed -pokazuje nam nasz box model wraz ze wszystkimi właściwościami.
min-height 100vh - viewport height, zawsze ma wysokość naszego viewport
Display/Position
Responsive grid z min-width
min-width dobre bo minimalny rozmiar a jak sie rusza okienkiem to sie układają względem siebie ale zachowują swój min rozmiar
display: block; jak paragraf, div, ten element ma być jak element blokowy, tak sie zachowywać
display: grid;
grid-template-colums: repeat ma sie powtarzać (autofit, minmax 200px,1fr)
gap: jaka odległość ma być między elementami w grid
margin: 20px 0 - nie sumuje sie, nie ma overlapingu
jeśli to miałaby być galeria i chcemy umieszczać obrazki, i chcemy aby te obrazki ładnie się układały potrzebujemy nie minmax ale minwidth, maxwidth
Block element- ma taka szerokość jakie ma okno
inline zajmuje tyle ile ma zawartości
inlineblock- rozpycha się ale umie sie ulozyc wobec innych elementów
Absolute postion class="absolute" .absolute postion: absolute top right - gdzie tego używać: elementy na str. niezależnie od tego jakiej szerokości jest wyswietlaja ikonki do SM, ale jest podatny na przewijanie, czyli znika
fixed position - zawsze będzie w tym samym miejscu, nie znika
overflow - scrollbar w okienku, paski przewijania można stylować w css
można na elemencie zrobić display none i manipulować np. formularzem z JS
Flexbox
musimy mieć div który trzyma taka sekcje
display: flex - będzie wykorzystywał system flex do tego żeby w środku układać sobie elementy, gap, border, padding
flex-item background, padding, flex1 - flex 1 oznacza ze wszystkie elementy maja być sprawiedliwe rozkładane, a jak mamy flex
Jak zrobić responsywne obrazki .responsiveimg { width: 100% height: auto (skalowanie responsywne) potrzeba tez min-width żeby się bardziej nie zmniejszył } - bierze szerokość i wysokość z rodzica czyli z tego diva np. wiec jak img wpiszemy musimy mu dać klase .responsiveimg
flex-direction row, default, horizontal - domyślnie flex działa jako wiersze, ale możemy wybrać colum (vertical) wtedy w dr str układa się ten layout
justify-content: center main axis alignment, flex-start, flex-end, center, space-between (równy spacing)
align-items: center; elementy mogą być ułożone też za pomocą tego, stretch(default) flex-start, flex-end, center, baseline
gap- przerwa miedzy elementami, rozswuaja sie o stała ilosc px, gap pokazuje tło gospodarza (rodzica)
Display: grid;
grid-template-colum repeat (autofit, mimax 200 1fr określa ilość kolumn, można ustalić np. na 200px, 200px, 200px - wtedy to wymusza 3 kolumny, (3 1 fr) oznacza żeby były 3 kolumny i 1fr żeby były one równe, autofit tyle ile elementów się zmieści, auto auto auto - nie zalecane
grid-template-rows: możemy ustawić to samo j.w.
fr-fractional unit miara częściowa za pomocą takiego unitu jesteśmy w stanie definiować kolumny, 1fr, 2fr pierwsza kolumna będzie dwa razy mniejsza od drugiej
gap- działa jak we flexie
grid-auto-flow row columns
Responsywność
@media (max-width: 768px) rozmiar ekranu i zachowanie grida np single column on mobil, breakpoints 480 768 1280 1600 JAKI LAYOUT DLA JAKIEJ ROZDZIELCZOŚCI
Dobra praktyka - zaczynać od breakpoint który zaczyna się od urządzeń mobilnych, mobile first, 40% ruchu w necie to urządzenia mobilne
mniejszy obrazek szybciej się ładuje, jeśli w 5 sekund użytkownik nie widzi ze strona się załadowała to albo robi refresh albo idzie gdzie indziej, zaleca się mieć dwie wersje obrazków 1 pod urządzenia mobilne i wersje pod desktop, zaleca się również umieszczanie miniatur
Tekst też chcemy by zachowywał się jak obrazki, w sensie aby na dużym ekranie był większy a na mniejszym - mniejszy FLUID TYPOGRAPHY
.fontstyle font-size: 16px to fix, zawsze bedzie takie samo NIE JEST REPONSYWNE, ŻEBY BYŁO RESPONSYWNE font-size clamp(1rem, 2vm, 2rem) 1rem czcionka mniejsza, 2vw czcionka w normalnych warunkach, 2 rem jak powiększymy, zmniejsza się o 1 pkt, zwiększa się o 2 pkt, frameworki np bootstrap ma w sobie już takiego clampa, nie trzeba się tam przejmować tym i np. media queries
page-grid
grid-template-areas: header header sidebar main footer footer ustaw takie 3 gridy, ustaw odległości miedzy nimi na 10px a całe musza zmieścić się na 100 viewport, trzeba ustawić klasy grid area dla tych elementów TWORZENIE LAYOUT
layout po wierszach lub kolumnach: display flex
layout pływający: display grid
jednostki z v z przodu -responsywne obrazki, odnoszące się do viewportu
JAVA SCRIPT
3 sposoby na uruchamianie JS w przeglądarce
- W kodzie HTML mamy sekcje<script></script> wszystko co napiszemy w środku, przeglądarka zinterpretuje jako javascript
console.log("Hello World");
consol.log do naszej konsoli w przeglądarce wyświetla informacje, możemy wyświetlać wiele rzeczy w consol.log, nie tylko wartości tekstowe, można rozdzielać przecinkami, wtedy przeglądarka sobie to ogarnie
console.log("aaa", 45, true, "tekst")
console.log("Wynik: " + (4+5));
const name = "Jan"; const age = 25; console.log(4. Cześć ${name}, masz ${age} lat);
Konsola sama w sobie jest interpreterem JS, możemy w konsoli też coś napisać - i zostanie to zrobione, możemy też wyszukiwać w niej
console.group możemy zgrupować logi by nie śmiecić sobie zbyt dużą ilością
// komenatrz
/* komentarz wielowątkowy */
Dobrze jest tworzyć komentarze do kodu, opisywać funkcje itd
//=========================
// bleble
//====================
/*
*ble ble
*bleblbelbe
*belbelbe
* */
Dobry komentarz mówi dlaczego to robimy, za dużo komentarzy to też źle
