przykład - Kurs HTML i CSS
- Układ elastyczny CSS / Kolejność {order}
...W ten sposób potrzeby obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...w pionie CSS? Aby wyśrodkować zawartość w pionie za pomocą CSS, można użyć właściwości align-items z wartością center w kontenerze flexbox. Oto przykład: .kontener { display: flex; align-items: center; /* Wyśrodkowanie w pionie */ }.
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...tła oraz tekstu na całej stronie, najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład: body { background-color: black; color: white; } ustawi czarny kolor tła i biały kolor tekstu. Jak ustawić kolor RGB w CSS? W języku CSS możemy stosować takie same kolory jak w HTML. Na przykład aby ustawić na całej stronie czarny kolor tła i biały kolor tekstu w notacji heksadecymalnej, wystarczy w arkuszu stylów wstawić...
- CSS dla zielonych / Kolor odsyłaczy CSS {color} :hover
...Odsyłacz odwiedzony, Aktywacja, Wskazanie myszką. Pytania i odpowiedzi {color} :hover Jak zmienić kolor odnośnika w CSS? Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie były koloru czerwonego, to w arkuszu stylów wystarczy wstawić następujący kod: a { color: red; }. Jak działa hover CSS? Słowo kluczowe :hover (z dwukropkiem na początku) to tzw. pseudoklasa CSS. Dzięki niej możemy określić, jak ma się zmienić wygląd elementu po wskazaniu go myszką...
- Indeks, wyszukiwarka / Wyszukiwarka
Bardzo pomocne dla użytkowników może okazać się wstawienie formularza wyszukiwania na wszystkich stronach serwisu. Aby to zrobić, należy wstawić w nagłówku strony (<head>...</head>) odwołanie do pliku indeks.js: <script src="indeks.js"></script> Nie trzeba natomiast wstawiać odwołania do skryptu indeks_hasla.js, w którym znajduje się lista haseł. Następnie w wybranym miejscu strony wystarczy wkleić: <script> var indeks = new Indeks('indeks'); indeks.wstawWyszukiwarke('adres'); </script>...
- Globalne obiekty w JavaScript / Przekształcanie wartości w parseInt - parseInt
...Pozwala przekształcić podany tekst na liczbę całkowitą. O tym, w jakim systemie jest zapisana liczba, decyduje podstawa systemu liczbowego. Na przykład w systemie heksadecymalnym (szesnastkowym) mamy do dyspozycji 16 cyfr: cyfry arabskie 0-9 i litery A-F (wielkość znaków nie ma znaczenia). Literze A odpowiada wartość 10, B - 11 itd. Innym popularnym systemem liczbowym jest system oktalny (ósemkowy) - podstawa 8. Natomiast na co dzień posługujemy się systemem decymalnym (dziesiętnym)...
- Alternatywne sposoby definiowania funkcji w JavaScript - Function / Dynamiczne tworzenie funkcji w JavaScript - new Function
Spis treści new Function new Function length new Function new Function() new Function(body) new Function(p1, p2... pn, body) Parametry: String body - ciało (kod źródłowy) funkcji String p1, String p2... String pn - lista nazw argumentów funkcji; możliwe jest również łączenie kilku nazw argumentów w jednej zmiennej tekstowej rozdzielając je przecinkami - dlatego konstrukcja: "p1", "p2", "p3", "p4" jest równoważna: "p1,p2, p3", "p4" Wartość: Function - nowa instancja funkcji...
- Dynamiczne wywoływanie funkcji w JavaScript - Function.prototype / Ustawianie właściwej instancji obiektu w metodzie - bind
...próba wywołania na obiekcie, który nie jest funkcją W asynchronicznych językach programowania bardzo często używa się tzw. funkcji zwrotnej. Na przykład możemy spróbować pobrać dane z zewnętrznego źródła, ale ponieważ odpowiedź nie pojawi się natychmiast, program kontynuuje normalnie dalsze działanie. Dzięki temu interfejs użytkownika nie zacina się w oczekiwaniu na odpowiedź z zewnętrznego źródła. Kiedy odpowiedź nadejdzie, zostanie wywołana właśnie wcześniej zdefiniowana funkcja...
- Zastosowanie tablic w JavaScript - Array / Tworzenie instancji tablicy w JavaScript - new Array
Spis treści new Array new Array length new Array new Array() new Array(len) new Array(item0) new Array(item0, item1...) Parametry Number len - liczba elementów tablicy item0, item1... - lista elementów tablicy Wartość: Array - nowa instancja tablicy Wyjątki: RangeError - wartość len nie jest liczbą naturalną Tablica jest rodzajem kolekcji (pojemnika) do przechowywania innych elementów. Elementy tablicy są ponumerowane tzw. indeksami. Pierwszy element otrzymuje indeks 0, drugi...
- Operacje na tablicach w JavaScript - Array.prototype / Przekształcanie tablicy na tekst w rodzimym języku - toLocaleString
...jak Array.prototype.toString, ale przekształca każdy element tablicy na tekst, zgodnie z ustawieniami rodzimego języka użytkownika systemu. Na przykład w języku polskim liczby rzeczywiste zapisujemy z użyciem znaku przecinka, podczas gdy angielskim - z użyciem kropki. Dodatkowo w języku polskim dla poprawy czytelności kolejne tysiące liczby możemy oddzielać od siebie znakiem spacji. Zwykle również inaczej zapisujemy daty z kalendarza. Przykład Array.prototype.toLocaleString new...