\documentclass[10pt,a4paper]{article} % Packages \usepackage{fancyhdr} % For header and footer \usepackage{multicol} % Allows multicols in tables \usepackage{tabularx} % Intelligent column widths \usepackage{tabulary} % Used in header and footer \usepackage{hhline} % Border under tables \usepackage{graphicx} % For images \usepackage{xcolor} % For hex colours %\usepackage[utf8x]{inputenc} % For unicode character support \usepackage[T1]{fontenc} % Without this we get weird character replacements \usepackage{colortbl} % For coloured tables \usepackage{setspace} % For line height \usepackage{lastpage} % Needed for total page number \usepackage{seqsplit} % Splits long words. %\usepackage{opensans} % Can't make this work so far. Shame. Would be lovely. \usepackage[normalem]{ulem} % For underlining links % Most of the following are not required for the majority % of cheat sheets but are needed for some symbol support. \usepackage{amsmath} % Symbols \usepackage{MnSymbol} % Symbols \usepackage{wasysym} % Symbols %\usepackage[english,german,french,spanish,italian]{babel} % Languages % Document Info \author{sigeud} \pdfinfo{ /Title (javascript-basics.pdf) /Creator (Cheatography) /Author (sigeud) /Subject (JavaScript basics Cheat Sheet) } % Lengths and widths \addtolength{\textwidth}{6cm} \addtolength{\textheight}{-1cm} \addtolength{\hoffset}{-3cm} \addtolength{\voffset}{-2cm} \setlength{\tabcolsep}{0.2cm} % Space between columns \setlength{\headsep}{-12pt} % Reduce space between header and content \setlength{\headheight}{85pt} % If less, LaTeX automatically increases it \renewcommand{\footrulewidth}{0pt} % Remove footer line \renewcommand{\headrulewidth}{0pt} % Remove header line \renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit % This two commands together give roughly % the right line height in the tables \renewcommand{\arraystretch}{1.3} \onehalfspacing % Commands \newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour \newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols \newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns \newcommand{\tn}{\tabularnewline} % Required as custom column type in use % Font and Colours \definecolor{HeadBackground}{HTML}{333333} \definecolor{FootBackground}{HTML}{666666} \definecolor{TextColor}{HTML}{333333} \definecolor{DarkBackground}{HTML}{1F6E8C} \definecolor{LightBackground}{HTML}{F1F5F7} \renewcommand{\familydefault}{\sfdefault} \color{TextColor} % Header and Footer \pagestyle{fancy} \fancyhead{} % Set header to blank \fancyfoot{} % Set footer to blank \fancyhead[L]{ \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{C} \SetRowColor{DarkBackground} \vspace{-7pt} {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}} } \end{tabulary} \columnbreak \begin{tabulary}{11cm}{L} \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{JavaScript basics Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{sigeud} via \textcolor{DarkBackground}{\uline{cheatography.com/188214/cs/39251/}}} \end{tabulary} \end{multicols}} \fancyfoot[L]{ \footnotesize \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{LL} \SetRowColor{FootBackground} \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}} \\ \vspace{-2pt}sigeud \\ \uline{cheatography.com/sigeud} \\ \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Not Yet Published.\\ Updated 2nd July, 2023.\\ Page {\thepage} of \pageref{LastPage}. \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}} \\ \SetRowColor{white} \vspace{-5pt} %\includegraphics[width=48px,height=48px]{dave.jpeg} Measure your website readability!\\ www.readability-score.com \end{tabulary} \end{multicols}} \begin{document} \raggedright \raggedcolumns % Set font size to small. Switch to any value % from this page to resize cheat sheet text: % www.emerson.emory.edu/services/latex/latex_169.html \footnotesize % Small font. \begin{multicols*}{2} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Zmienne}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Deklaracja zmiennej:} \tn % Row Count 1 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{- {\bf{`var`}} `nazwa = wartość` – deklaruje zmienną o zakresie funkcyjnym \newline - {\bf{`let`}} `nazwa = wartość` – deklaruje zmienną o zakresie blokowym \newline - {\bf{`const`}} `nazwa = wartość` – deklaruje stałą o zakresie blokowym, nie może ulec zmianie} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Deklaracja funkcji}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{function addition(a,b) \{ \newline let result = a + b \newline console.log("Wynik dodawania: " + result)\} \newline \newline addition(1, 2) \newline addition(5, 2) \newline \newline function multiply(a,b) \{ \newline let result = a * b \newline return result\} \newline \newline console.log(multiply(5, 10))} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{3.44 cm} x{4.56 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Typy zmiennych - prymitywy}} \tn % Row 0 \SetRowColor{LightBackground} `let num = 7` & number \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} `let str = "tekst` & string \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} `let flag = true` & boolean \tn % Row Count 4 (+ 1) % Row 3 \SetRowColor{white} `let info` & null - specjalny prymityw, intencjonalnie nie zmienia wartości \tn % Row Count 7 (+ 3) % Row 4 \SetRowColor{LightBackground} `let mySymbol = Symbol("Sym")` & symbol \tn % Row Count 9 (+ 2) % Row 5 \SetRowColor{white} `let bigInt = 1n` & bigint do przechowywania liczb większych niż \seqsplit{`Number.MAX\_SAFE\_INTEGER`} \tn % Row Count 13 (+ 4) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{5.36 cm} x{2.64 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Typy zmiennych - złożone}} \tn % Row 0 \SetRowColor{LightBackground} `let obj = new Object()` & Object \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} `let arr = new Array()` & obiekt Array \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} `let date = new Date()` & obiekt Date \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} `let err = new Error()` & obiekt Error \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Sprawdzanie typów danych - typeof}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{typeof 42; // "number" \newline typeof "Hello"; // "string" \newline typeof true; // "boolean" \newline typeof {[}{]}; // "object" \newline typeof \{\}; // "object" \newline typeof null; // "object" \newline typeof undefined; // "undefined" \newline typeof function() \{\}; // "function"} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Sprawdzanie typów danych - instanceof}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{const arr = {[}{]}; \newline arr instanceof Array; // true \newline \newline const obj = \{\}; \newline obj instanceof Object; // true \newline \newline const today = new Date(); \newline today instanceof Date; // true} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Sprawdzanie typów danych: porównywanie}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{typeof 42 === "number"; // true \newline typeof "Hello" === "string"; // true \newline typeof true === "boolean"; // true} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Sprawdzanie typów danych - Array.isArray()}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Array.isArray({[}{]}); // true \newline Array.isArray(\{\}); // false \newline Array.isArray("hello"); // false} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{5.84 cm} x{2.16 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{NaN - Not a Number}} \tn % Row 0 \SetRowColor{LightBackground} `parseInt("hello")` & `NaN` \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} `Math.sqrt(-1)` & `NaN` \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} `Math.sqrt(-1)` & `NaN` \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} `isNaN(Number.NaN)` & `true` \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} `isNaN(NaN)` & `true` \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} `isNaN(78)` & `false` \tn % Row Count 6 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{formatowanie z backtickiami}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Wstawianie wartości zmiennych: \newline let name = "John"; \newline let age = 30; \newline let message = `My name is \$\{name\} and I am \$\{age\} years old.`; \newline console.log(message); // "My name is John and I am 30 years old." \newline \newline Wyrażenia matematyczne: \newline let a = 5; \newline let b = 3; \newline let sum = `\$\{a\} + \$\{b\} = \$\{a + b\}`; \newline console.log(sum); // "5 + 3 = 8" \newline \newline Wywoływanie funkcji: \newline function greet(name) \{ \newline return `Hello, \$\{name\}!`; \newline \} \newline \newline let person = "Alice"; \newline let greeting = greet(person); \newline console.log(greeting); // "Hello, Alice!" \newline \newline Warunkowe wyrażenia: \newline let num = 7; \newline let isEven = `\$\{num\} is \$\{num \% 2 === 0 ? "even" : "odd"\}`; \newline console.log(isEven); // "7 is odd"} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{String}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{const s = 'string w apostrofach' \newline const str = "string w cudzysłowie" \newline const txt = `string \newline w wielu \newline liniach`} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operacje na stringach}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Właściwość length: Zwraca liczbę znaków w ciągu znaków. \newline let str = "Hello, World!"; \newline console.log(str.length); // 13 \newline \newline Indeksowanie za pomocą nawiasów kwadratowych: Można uzyskać dostęp do poszczególnych \newline znaków ciągu znaków, odwołując się do ich indeksu za pomocą nawiasów kwadratowych \newline i liczby \newline całkowitej reprezentującej pozycję znaku w ciągu (indeksowanie zaczyna się od zera). \newline let str = "Hello"; \newline console.log(str{[}0{]}); // "H" \newline console.log(str{[}1{]}); // "e" \newline console.log(str{[}4{]}); // "o" \newline \newline \newline Metoda charAt(index): Zwraca znak znajdujący się na określonym indeksie w ciągu znaków. \newline let str = "Hello, World!"; \newline console.log(str.charAt(7)); // "W" \newline \newline Metoda charCodeAt(): Metoda charCodeAt() zwraca wartość kodu Unicode znaku na \newline określonym indeksie w ciągu znaków. \newline let str = "Hello"; \newline console.log(str.charCodeAt(0)); // 72 \newline console.log(str.charCodeAt(1)); // 101 \newline \newline \newline Metoda indexOf(searchValue, fromIndex): Znajduje indeks pierwszego wystąpienia \newline określonej wartości w ciągu znaków. \newline let str = "Hello World"; \newline console.log(str.indexOf("o")); // 4 \newline console.log(str.indexOf("o", 5)); // 7 (rozpoczyna wyszukiwanie od indeksu 5) \newline console.log(str.indexOf("o", 10)); // -1 (nie znaleziono, rozpoczyna wyszukiwanie \newline //od indeksu 10) \newline console.log(str.indexOf("World")); // 6 \newline console.log(str.indexOf("JavaScript")); // -1 (nie znaleziono) \newline \newline Metoda lastIndexOf(): Metoda lastIndexOf() znajduje ostatnie wystąpienie podciągu \newline w ciągu znaków i zwraca indeks pierwszego znaku tego podciągu. Jeśli podciąg nie \newline zostanie znaleziony, metoda zwraca -1. \newline let str = "Hello World"; \newline console.log(str.lastIndexOf("o")); // 7 \newline console.log(str.lastIndexOf("o", 7)); // 7 (rozpoczyna wyszukiwanie od indeksu 7 wstecz) \newline console.log(str.lastIndexOf("o", 3)); // 2 (rozpoczyna wyszukiwanie od indeksu 3 wstecz) \newline console.log(str.lastIndexOf("World")); // 6 \newline console.log(str.lastIndexOf("JavaScript")); // -1 (nie znaleziono) \newline \newline Metoda slice(startIndex, endIndex) zwraca fragment tekstu między dwoma indeksami \newline (startIndex i endIndex). slice() działa włączając startIndex, ale wyłączając endIndex. \newline Jeśli startIndex jest większy niż endIndex, metoda zamienia te wartości. Można również \newline podać tylko startIndex, wtedy slice() zwróci fragment od startIndex do końca tekstu. \newline Metoda slice() jest jedyną metodą, która obsługuje ujemne \newline indeksy w celu wycinania fragmentów tekstu od końca. substring() i substr() nie \newline obsługują indeksów ujemnych i zamieniają je na 0. \newline let str = 'Hello, world!'; \newline let sliced = str.slice(7, 12); \newline console.log(sliced); // "world" \newline \newline \newline Metoda substring(startIndex, endIndex): Zwraca fragment ciągu znaków od indeksu \newline startIndex do indeksu endIndex (bez końcowego indeksu). \newline Metoda substring(startIndex, endIndex) działa podobnie jak slice(), z tą różnicą, że \newline automatycznie zamienia wartości, jeśli startIndex jest większy niż endIndex. Tak samo \newline jak slice(), substring() zwraca fragment tekstu między indeksami, włączając startIndex, \newline ale wyłączając endIndex. Można również podać tylko startIndex, wtedy substring() zwróci \newline fragment od startIndex do końca tekstu. \newline let str = "Hello, World!"; \newline console.log(str.substring(7, 12)); // "World" \newline \newline Metoda substr(startIndex, length) zwraca fragment tekstu o określonej długości, \newline zaczynając od startIndex. Drugim argumentem jest length, który określa, ile znaków \newline ma zostać zwróconych. Jeśli length nie jest podane, substr() zwraca fragment tekstu \newline od startIndex do końca tekstu. \newline let str = 'Hello, world!'; \newline let substr = str.substr(7, 5); \newline console.log(substr); // "world" \newline \newline Metoda search() szuka dopasowania wzorca w ciągu znaków i zwraca indeks pierwszego \newline dopasowania. \newline let str = "Hello World"; \newline console.log(str.search(/lo/)); // 3 (znaleziono dopasowanie na indeksie 3) \newline console.log(str.search("World")); // 6 (znaleziono dopasowanie na indeksie 6) \newline console.log(str.search(/JavaScript/)); // -1 (nie znaleziono dopasowania) \newline \newline Metoda match() znajduje wszystkie dopasowania wzorca w ciągu znaków i zwraca \newline tablicę zawierającą dopasowania. \newline let str = "Hello World"; \newline console.log(str.match(/lo/)); // {[}"lo"{]} (znaleziono dopasowanie "lo") \newline console.log(str.match(/o/g)); // {[}"o", "o"{]} (znaleziono wszystkie dopasowania "o") \newline console.log(str.match(/JavaScript/)); // null (nie znaleziono dopasowania) \newline \newline Metoda trim() jest używana do usuwania białych znaków (spacje, tabulatory, znaki \newline nowej linii) z początku i końca ciągu znaków. Oto przykład użycia metody trim(): \newline let str = " Hello World "; \newline console.log(str.trim()); // "Hello World" (usunięcie białych znaków z początku i końca) \newline \newline let str2 = " Hello \textbackslash{}n World "; \newline console.log(str2.trim()); // "Hello \textbackslash{}n World" (białe znaki w środku nie są usuwane) \newline \newline Metoda toLowerCase(): Zmienia wszystkie znaki w ciągu znaków na małe litery. \newline let str = "Hello, World!"; \newline console.log(str.toLowerCase()); // "hello, world!" \newline \newline Metoda toUpperCase(): Zmienia wszystkie znaki w ciągu znaków na wielkie litery. \newline let str = "Hello, World!"; \newline console.log(str.toUpperCase()); // "HELLO, WORLD!" \newline \newline Metoda split(separator): \newline let str = 'Hello, world!'; \newline let splitted = str.split(', '); \newline console.log(splitted); // {[}"Hello", "world!"{]} \newline \newline Metoda replace(searchValue, replaceValue): \newline let str = 'Hello, world!'; \newline let replaced = str.replace('world', 'universe'); \newline console.log(replaced); // "Hello, universe!"} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Łączenie stringów}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Operator +: Można użyć operatora + do konkatenacji dwóch ciągów znaków. \newline let str1 = "Hello"; \newline let str2 = "World"; \newline let result = str1 + " " + str2; \newline console.log(result); // "Hello World" \newline \newline Metoda concat(): Metoda concat() pozwala na łączenie wielu ciągów znaków. \newline let str1 = "Hello"; \newline let str2 = "World"; \newline let result = str1.concat(" ", str2); \newline console.log(result); // "Hello World" \newline \newline Metoda join(): Metoda join() pozwala na łączenie elementów tablicy w jeden ciąg znaków, \newline używając określonego separatora. \newline let arr = {[}"Hello", "World"{]}; \newline let result = arr.join(" "); \newline console.log(result); // "Hello World"} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Wyrażenia regularne}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{1. Tworzenie wyrażeń regularnych: \newline Wyrażenia regularne można utworzyć za pomocą dwóch sposobów: za pomocą literałów \newline /pattern/ lub przy użyciu konstruktora RegExp('pattern'). \newline Na przykład: /hello/ lub new RegExp('hello'). \newline let regex1 = /hello/; // za pomocą literału \newline let regex2 = new RegExp('hello'); // za pomocą konstruktora RegExp \newline \newline \newline 2.Metody do pracy z wyrażeniami regularnymi: \newline Metody takie jak test(), exec(), match(), search(), replace(), split() itp. mogą być \newline wykorzystywane do interakcji z wyrażeniami regularnymi i manipulacji tekstami. \newline test(): \newline let regex = /hello/; \newline let text = 'Hello, world!'; \newline let result = regex.test(text); \newline console.log(result); // false \newline exec(): \newline let regex = /lorem/; \newline let text = 'Lorem ipsum dolor sit amet.'; \newline let result = regex.exec(text); \newline console.log(result); // {[}'lorem', index: 0, input: 'Lorem ipsum dolor sit amet.', \newline // groups: undefined{]} \newline split(): \newline let regex = /\textbackslash{}s+/; \newline let text = 'Hello world!'; \newline let result = text.split(regex); \newline console.log(result); // {[}'Hello', 'world!'{]} \newline \newline \newline 3.Składnia wzorców: \newline Wzorce wyrażeń regularnych składają się z literałów, znaków specjalnych i zestawów \newline znaków. Przykłady: /hello/ - dopasowuje bezpośrednio słowo "hello", /{[}aeiou{]}/ - \newline dopasowuje dowolny samogłoskę. \newline let regex = /hello/; \newline let text = 'Hello, world!'; \newline let result = regex.test(text); \newline console.log(result); // false \newline let regex = /{[}aeiou{]}/; \newline let text = 'Hello, world!'; \newline let result = text.match(regex); \newline console.log(result); // {[}'e', 'o', 'o'{]} \newline \newline \newline 4.Znaki specjalne: \newline Wyrażenia regularne wykorzystują znaki specjalne, takie jak \newline \textasciicircum{}, \$, ., {\emph{, +, ?, |, \textbackslash{}, (), {[}{]}, \{\}, itd., które mają specjalne znaczenie i służą \newline do definiowania różnych wzorców dopasowania. \newline \newline Znaki specjalne: \newline \newline Kropka .: Dopasowuje dowolny znak, z wyjątkiem nowej linii. \newline Znak zapytania ?: Oznacza, że poprzedni znak lub grupa może wystąpić zero \newline lub jeden raz. \newline Gwiazdka }}: Oznacza, że poprzedni znak lub grupa może wystąpić zero lub więcej razy. \newline Plus +: Oznacza, że poprzedni znak lub grupa musi wystąpić co najmniej raz. \newline Nawiasy (): Tworzą grupę dopasowania. \newline \newline 5. Modifikatory: \newline Modifikatory są dodawane do wzorca wyrażenia regularnego w celu wpływania na sposób \newline dopasowywania. \newline Przykłady: g - dopasowanie globalne (wszystkie wystąpienia), i - dopasowanie bez \newline względu na wielkość liter, m - wielolinijkowe dopasowanie.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{falsy values}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{" " // pusty string} \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{0, -0} \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{0n // 0 jako BigInt} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{NaN} \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{null} \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{undefined} \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{false} \tn % Row Count 7 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{To wartości, które poddane konwersji do boolean będą miały wartość false} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tablica}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{kolekcja elementów – obiekt, zmienna, w której są inne zmienne \newline % Row Count 2 (+ 2) {\bf{`let a}} = {[}3, „tekst", 99, 12{]}` \newline % Row Count 3 (+ 1) {\bf{`let b}} = new Array(10, 4, "txt")` \newline % Row Count 4 (+ 1) {\bf{`let c}} = Array(10, 4, "txt")` \newline % Row Count 5 (+ 1) {\bf{`let d}} = Array.of(5) // pojedyncza wartość traktowana jest jako jeden element, \newline % Row Count 7 (+ 2) a nie ustawienie wartości length` \newline % Row Count 8 (+ 1) {\bf{`tab{[}1{]}}} // element z tablicy, indeksy liczone są od 0` \newline % Row Count 10 (+ 2) Tablica (Array) jest jednym z podstawowych typów danych w języku JavaScript, \newline % Row Count 12 (+ 2) który służy do przechowywania kolekcji elementów w uporządkowany sposób. Oto kilka dodatkowych informacji o tablicach: \newline % Row Count 15 (+ 3) - Indeksowanie: Elementy w tablicy są indeksowane numerycznie, zaczynając od zera. \newline % Row Count 17 (+ 2) Możesz uzyskać dostęp do elementów za pomocą ich indeksów. \newline % Row Count 19 (+ 2) Przykład: \newline % Row Count 20 (+ 1) const fruits = {[}'apple', 'banana', 'orange'{]}; \newline % Row Count 21 (+ 1) console.log(fruits{[}0{]}); // "apple" \newline % Row Count 22 (+ 1) console.log(fruits{[}2{]}); // "orange" \newline % Row Count 23 (+ 1) - Długość tablicy: Właściwość length pozwala określić liczbę elementów w tablicy. \newline % Row Count 25 (+ 2) Przykład: \newline % Row Count 26 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 27 (+ 1) \seqsplit{console.log(numbers.length);} // 5 \newline % Row Count 28 (+ 1) - Dodawanie i usuwanie elementów: Tablice mają wiele metod, które umożliwiają dodawanie i usuwanie elementów. Niektóre z tych metod to: push(), pop(), shift(), unshift(), splice() itp. \newline % Row Count 32 (+ 4) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tablica (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Przykład (dodawanie elementu na koniec tablicy): \newline % Row Count 1 (+ 1) const fruits = {[}'apple', 'banana'{]}; \newline % Row Count 2 (+ 1) fruits.push('orange'); \newline % Row Count 3 (+ 1) console.log(fruits); // {[}"apple", "banana", "orange"{]} \newline % Row Count 5 (+ 2) Przykład (usuwanie elementu z początku tablicy): \newline % Row Count 7 (+ 2) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 8 (+ 1) numbers.shift(); \newline % Row Count 9 (+ 1) console.log(numbers); // {[}2, 3, 4, 5{]} \newline % Row Count 10 (+ 1) - Iteracja po tablicy: Możesz iterować po elementach tablicy za pomocą pętli, takich jak pętla for lub metody forEach(), map(), filter(), reduce() itp. \newline % Row Count 14 (+ 4) Przykład (użycie metody forEach()): \newline % Row Count 15 (+ 1) const fruits = {[}'apple', 'banana', 'orange'{]}; \newline % Row Count 16 (+ 1) fruits.forEach(fruit =\textgreater{} \{ \newline % Row Count 17 (+ 1) console.log(fruit); \newline % Row Count 18 (+ 1) \}); \newline % Row Count 19 (+ 1) - Metoda fill(value, start, end): Metoda fill() wypełnia wszystkie elementy tablicy określoną wartością. Można również określić opcjonalne parametry start i end, które wskazują zakres indeksów tablicy, które mają być wypełnione. \newline % Row Count 24 (+ 5) Przykład: \newline % Row Count 25 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 26 (+ 1) numbers.fill(0); \newline % Row Count 27 (+ 1) console.log(numbers); // {[}0, 0, 0, 0, 0{]} \newline % Row Count 28 (+ 1) const fruits = {[}'apple', 'banana', 'orange'{]}; \newline % Row Count 29 (+ 1) fruits.fill('pear', 1, 2); \newline % Row Count 30 (+ 1) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tablica (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{console.log(fruits); // {[}'apple', 'pear', 'orange'{]} \newline % Row Count 2 (+ 2) - Metoda find(callback): Metoda find() zwraca pierwszy element tablicy, który spełnia warunek zdefiniowany przez funkcję zwrotną (callback). \newline % Row Count 5 (+ 3) Przykład: \newline % Row Count 6 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 7 (+ 1) const found = numbers.find(num =\textgreater{} num \textgreater{} 3); \newline % Row Count 8 (+ 1) console.log(found); // 4 \newline % Row Count 9 (+ 1) - Metoda findIndex(callback): Metoda findIndex() zwraca indeks pierwszego elementu \newline % Row Count 11 (+ 2) tablicy, który spełnia warunek zdefiniowany przez funkcję zwrotną (callback). \newline % Row Count 13 (+ 2) Przykład: \newline % Row Count 14 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 15 (+ 1) const index = numbers.findIndex(num =\textgreater{} num \textgreater{} 3); \newline % Row Count 16 (+ 1) console.log(index); // 3 \newline % Row Count 17 (+ 1) - Metoda copyWithin(target, start, end): Metoda copyWithin() kopiuje elementy z \newline % Row Count 19 (+ 2) określonego zakresu tablicy i wkleja je na pozycję początkową wewnątrz tej samej tablicy. \newline % Row Count 21 (+ 2) Parametr target wskazuje pozycję docelową, a parametry start i end określają zakres \newline % Row Count 23 (+ 2) elementów do skopiowania. \newline % Row Count 24 (+ 1) Przykład: \newline % Row Count 25 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 26 (+ 1) numbers.copyWithin(0, 3, 5); \newline % Row Count 27 (+ 1) console.log(numbers); // {[}4, 5, 3, 4, 5{]} \newline % Row Count 28 (+ 1) - Metoda filter(callback): Metoda filter() tworzy nową tablicę zawierającą elementy, \newline % Row Count 30 (+ 2) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tablica (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{dla których funkcja zwrotna (callback) zwraca wartość true. \newline % Row Count 2 (+ 2) Przykład: \newline % Row Count 3 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 4 (+ 1) const evenNumbers = numbers.filter(num =\textgreater{} num \% 2 === 0); \newline % Row Count 6 (+ 2) \seqsplit{console.log(evenNumbers);} // {[}2, 4{]} \newline % Row Count 7 (+ 1) - Metoda reduce(callback, initialValue): Metoda reduce() wykonuje funkcję \newline % Row Count 9 (+ 2) zwrotną (callback) dla każdego elementu tablicy, redukując ją do pojedynczej \newline % Row Count 11 (+ 2) wartości. Parametr initialValue jest opcjonalny i określa początkową wartość akumulatora. \newline % Row Count 13 (+ 2) Przykład: \newline % Row Count 14 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 15 (+ 1) const sum = \seqsplit{numbers.reduce((accumulator}, currentValue) =\textgreater{} accumulator + currentValue, 0); \newline % Row Count 17 (+ 2) console.log(sum); // 15 \newline % Row Count 18 (+ 1) - Metoda map(callback): Metoda map() tworzy nową tablicę, zawierającą wyniki \newline % Row Count 20 (+ 2) działania funkcji zwrotnej (callback) na każdym elemencie tablicy. \newline % Row Count 22 (+ 2) Przykład: \newline % Row Count 23 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 24 (+ 1) const squaredNumbers = numbers.map(num =\textgreater{} num * num); \newline % Row Count 26 (+ 2) \seqsplit{console.log(squaredNumbers);} // {[}1, 4, 9, 16, 25{]} \newline % Row Count 27 (+ 1) - Metoda every(callback): Metoda every() sprawdza, czy wszystkie elementy tablicy spełniają warunek zdefiniowany przez funkcję zwrotną (callback). Zwraca wartość true, jeśli wszystkie elementy spełniają warunek, w przeciwnym razie zwraca false. \newline % Row Count 33 (+ 6) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Tablica (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Przykład: \newline % Row Count 1 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 2 (+ 1) const allEven = numbers.every(num =\textgreater{} num \% 2 === 0); \newline % Row Count 4 (+ 2) console.log(allEven); // false \newline % Row Count 5 (+ 1) - Metoda some(callback): Metoda some() sprawdza, czy przynajmniej jeden element \newline % Row Count 7 (+ 2) tablicy spełnia warunek zdefiniowany przez funkcję zwrotną (callback). Zwraca wartość \newline % Row Count 9 (+ 2) true, jeśli przynajmniej jeden element spełnia warunek, w przeciwnym razie zwraca false. \newline % Row Count 11 (+ 2) Przykład: \newline % Row Count 12 (+ 1) const numbers = {[}1, 2, 3, 4, 5{]}; \newline % Row Count 13 (+ 1) const hasEven = numbers.some(num =\textgreater{} num \% 2 === 0); \newline % Row Count 15 (+ 2) console.log(hasEven); // true \newline % Row Count 16 (+ 1) - Inne metody tablicowe: Tablice mają wiele innych przydatnych metod, które ułatwiają \newline % Row Count 18 (+ 2) manipulację i przetwarzanie danych. Niektóre z tych metod to: join(), slice(), concat(), sort(), reverse() itp. \newline % Row Count 21 (+ 3) Przykład (użycie metody join()): \newline % Row Count 22 (+ 1) const fruits = {[}'apple', 'banana', 'orange'{]}; \newline % Row Count 23 (+ 1) const joinedFruits = fruits.join(', '); \newline % Row Count 24 (+ 1) \seqsplit{console.log(joinedFruits);} // "apple, banana, orange"% Row Count 26 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operacje na tablicach}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{length: Zwraca liczbę elementów w tablicy. - można też w tem sposób zmniejszyć \newline wielkość tablicy \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline console.log(fruits.length); // Wyświetli: 3 \newline \newline let a = {[}1,2,3,4,5,6,7,8,9{]} \newline a.length = 3 \newline console.log(a) // {[}1, 2, 3{]} \newline \newline push(): Dodaje jeden lub więcej elementów na koniec tablicy i zwraca jej nową \newline długość. \newline let fruits = {[}"apple", "banana"{]}; \newline fruits.push("orange"); \newline console.log(fruits); // Wyświetli: {[}"apple", "banana", "orange"{]} \newline \newline pop(): Usuwa ostatni element z tablicy i zwraca ten element. \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline let removedFruit = fruits.pop(); \newline console.log(removedFruit); // Wyświetli: "orange" \newline console.log(fruits); // Wyświetli: {[}"apple", "banana"{]} \newline \newline delete: Usuwa określony element z tablicy, pozostawiając na jego miejscu pustą \newline wartość (undefined). \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline delete fruits{[}1{]}; \newline console.log(fruits); // Wyświetli: {[}"apple", undefined, "orange"{]} \newline \newline concat(): Łączy dwie tablice lub więcej tablic i zwraca nową tablicę. \newline let fruits1 = {[}"apple", "banana"{]}; \newline let fruits2 = {[}"orange", "grape"{]}; \newline let combinedFruits = fruits1.concat(fruits2); \newline console.log(combinedFruits); // Wyświetli: {[}"apple", "banana", "orange", "grape"{]} \newline \newline join(): Łączy wszystkie elementy tablicy w jeden ciąg znaków, używając \newline podanego separatora. \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline let joinedString = fruits.join(", "); \newline console.log(joinedString); // Wyświetli: "apple, banana, orange" \newline \newline indexOf(): Znajduje indeks pierwszego wystąpienia podanego elementu w \newline tablicy. Zwraca -1, jeśli element nie jest obecny. \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline let index = \seqsplit{fruits.indexOf("banana");} \newline console.log(index); // Wyświetli: 1 \newline \newline fill: Wypełnia wszystkie elementy tablicy określoną wartością. \newline let numbers = {[}1, 2, 3, 4, 5{]}; \newline numbers.fill(0); \newline console.log(numbers); // Wyświetli: {[}0, 0, 0, 0, 0{]} \newline \newline forEach: Wykonuje podaną funkcję dla każdego elementu tablicy. \newline let numbers = {[}1, 2, 3, 4, 5{]}; \newline numbers.forEach(function(number) \{ \newline console.log(number); \newline \}); \newline // Wyświetli: \newline // 1 \newline // 2 \newline // 3 \newline // 4 \newline // 5 \newline \newline reverse: Odwraca kolejność elementów w tablicy. \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline fruits.reverse(); \newline console.log(fruits); // Wyświetli: {[}"orange", "banana", "apple"{]} \newline \newline shift: Usuwa pierwszy element z tablicy i zwraca ten element. \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline let shiftedFruit = fruits.shift(); \newline console.log(shiftedFruit); // Wyświetli: "apple" \newline console.log(fruits); // Wyświetli: {[}"banana", "orange"{]} \newline \newline unshift: Dodaje jeden lub więcej elementów na początek tablicy i zwraca jej nową \newline długość. \newline let fruits = {[}"banana", "orange"{]}; \newline fruits.unshift("apple"); \newline console.log(fruits); // Wyświetli: {[}"apple", "banana", "orange"{]} \newline \newline splice(start, deleteCount, item1, item2...): Modyfikuje zawartość tablicy, usuwając, \newline zamieniając lub dodając elementy. \newline let fruits = {[}"apple", "banana", "orange"{]}; \newline fruits.splice(1, 1, "kiwi"); \newline console.log(fruits); // Wyświetli: {[}"apple", "kiwi", "orange"{]}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Typy zdarzeń DOM}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Przeglądarka wywołuje wiele zdarzeń. Pełna lista jest dostępna na MDN, ale poniżej możesz znaleźć te najpopularniejsze: \newline % Row Count 3 (+ 3) zdarzenia myszki (MouseEvent): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu \newline % Row Count 6 (+ 3) zdarzenia dotykowe (TouchEvent): touchstart, touchmove, touchend, touchcancel \newline % Row Count 8 (+ 2) zdarzenia klawiatury (KeyboardEvent): keydown, keypress, keyup \newline % Row Count 10 (+ 2) zdarzenia formularzy: focus, blur, change, submit \newline % Row Count 11 (+ 1) zdarzenia okna przeglądarki: scroll, resize, hashchange, load, unload \newline % Row Count 13 (+ 2) \{\{link="https://pl.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/a/dom-event-types"\}\}Khan Academy\{\{/link\}\}% Row Count 16 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Fetch - pobieranie danych z serwera}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{\seqsplit{fetch("https://swapi.dev/api/people/3/")} \newline .then(response =\textgreater{} response.json()) \newline .then(processData) \newline \newline function processData(data) \{ \newline console.log(data); \newline console.log("Imię:",data.name); \newline \seqsplit{console.log("Wysokość:"}, data.height); \newline console.log("Masa:", data.mass); \newline console.log("Kolor oczu:", data.eye\_color); \newline \}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Obiekt window i event handler}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{onload: \newline window.onload = function() \{ \newline // Kod wykonywany po załadowaniu strony \newline \}; \newline Ten event handler jest wywoływany po załadowaniu całej strony. \newline \newline onresize: \newline window.onresize = function() \{ \newline // Kod wykonywany po zmianie rozmiaru okna przeglądarki \newline \}; \newline Ten event handler jest wywoływany po zmianie rozmiaru okna przeglądarki. \newline \newline onscroll: \newline window.onscroll = function() \{ \newline // Kod wykonywany podczas przewijania strony \newline \}; \newline Ten event handler jest wywoływany podczas przewijania strony. \newline \newline onkeydown: \newline window.onkeydown = function(event) \{ \newline // Kod wykonywany po wciśnięciu klawisza \newline if (event.key === 'Enter') \{ \newline // Wykonaj pewną akcję po wciśnięciu klawisza Enter \newline \} \newline \}; \newline Ten event handler jest wywoływany po wciśnięciu klawisza na klawiaturze. \newline \newline onbeforeunload: \newline window.onbeforeunload = function(event) \{ \newline // Kod wykonywany przed zamknięciem strony \newline return 'Czy na pewno chcesz opuścić tę stronę?'; \newline \}; \newline Ten event handler jest wywoływany przed zamknięciem strony.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Obiekt window i zdarzenia}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Zdarzenie load: \newline window.addEventListener('load', function() \{ \newline // Kod wykonywany po załadowaniu strony \newline \}); \newline Ten event listener jest wywoływany po załadowaniu całej strony. \newline \newline Zdarzenie resize: \newline window.addEventListener('resize', function() \{ \newline // Kod wykonywany po zmianie rozmiaru okna przeglądarki \newline \}); \newline Ten event listener jest wywoływany po zmianie rozmiaru okna przeglądarki. \newline \newline Zdarzenie scroll: \newline window.addEventListener('scroll', function() \{ \newline // Kod wykonywany podczas przewijania strony \newline \}); \newline Ten event listener jest wywoływany podczas przewijania strony. \newline \newline Zdarzenie keydown: \newline window.addEventListener('keydown', function(event) \{ \newline // Kod wykonywany po wciśnięciu klawisza \newline if (event.key === 'Enter') \{ \newline // Wykonaj pewną akcję po wciśnięciu klawisza Enter \newline \} \newline \}); \newline Ten event listener jest wywoływany po wciśnięciu klawisza na klawiaturze. \newline \newline Zdarzenie beforeunload: \newline window.addEventListener('beforeunload', function(event) \{ \newline // Kod wykonywany przed zamknięciem strony \newline event.returnValue = 'Czy na pewno chcesz opuścić tę stronę?'; \newline \}); \newline Ten event listener jest wywoływany przed zamknięciem strony.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Zdarzenia myszy}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{\textless{}!DOCTYPE html\textgreater{} \newline \textless{}html\textgreater{} \newline \textless{}head\textgreater{} \newline \textless{}title\textgreater{}Zdarzenia myszy\textless{}/title\textgreater{} \newline \textless{}/head\textgreater{} \newline \textless{}body\textgreater{} \newline \textless{}p id="my-paragraph"\textgreater{}Najedź na ten paragraf i kliknij go!\textless{}/p\textgreater{} \newline \newline \textless{}script\textgreater{} \newline const paragraph = \seqsplit{document.getElementById('my-paragraph');} \newline \newline // Obsługa zdarzenia najechania myszą \newline \seqsplit{paragraph.addEventListener('mouseenter'}, function(event) \{ \newline \seqsplit{paragraph.style.backgroundColor} = 'yellow'; \newline \}); \newline \newline // Obsługa zdarzenia opuszczenia myszy \newline \seqsplit{paragraph.addEventListener('mouseleave'}, function(event) \{ \newline \seqsplit{paragraph.style.backgroundColor} = 'white'; \newline \}); \newline \newline // Obsługa zdarzenia kliknięcia myszą \newline \seqsplit{paragraph.addEventListener('click'}, function(event) \{ \newline paragraph.textContent = 'Kliknięto!'; \newline \}); \newline \newline // Obsługa zdarzenia poruszania myszą \newline \seqsplit{paragraph.addEventListener('mousemove'}, function(event) \{ \newline const x = event.clientX; \newline const y = event.clientY; \newline paragraph.textContent = `X: \$\{x\}, Y: \$\{y\}`; \newline \}); \newline \newline \textless{}/script\textgreater{} \newline \textless{}/body\textgreater{} \newline \textless{}/html\textgreater{}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Obiekt window}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{alert(message): Wyświetla okno dialogowe z podaną wiadomością. \newline window.alert("Hello!"); \newline \newline confirm(message): Wyświetla okno dialogowe z pytaniem i zwraca wartość logiczną \newline w zależności od wyboru użytkownika. \newline const result = window.confirm("Czy jesteś pewien?"); \newline console.log(result); // true jeśli kliknięto OK, false jeśli kliknięto Anuluj \newline \newline prompt(message, default): Wyświetla okno dialogowe z pytaniem o wprowadzenie \newline danych i zwraca wprowadzoną wartość jako ciąg znaków. \newline const name = window.prompt("Jak masz na imię?"); \newline console.log(name); // Wprowadzona wartość zostanie wyświetlona w konsoli \newline \newline setTimeout(callback, delay): Wywołuje funkcję (callback) po określonym opóźnieniu \newline (w milisekundach). \newline function greet() \{ \newline console.log("Hello!"); \newline \} \newline \newline window.setTimeout(greet, 2000); // Wywołuje funkcję greet po 2 sekundach \newline setInterval(callback, interval): Wywołuje funkcję (callback) co określony interwał \newline (w milisekundach), powtarzając ją w nieskończoność. \newline function printTime() \{ \newline console.log(new Date()); \newline \} \newline \newline window.setInterval(printTime, 1000); // Wywołuje funkcję printTime co sekundę \newline window.location: Obiekt dostarcza informacje o aktualnym adresie URL strony. \newline console.log(window.location.href); // Zwraca pełny adres URL strony \newline console.log(window.location.pathname); // Zwraca ścieżkę URL \newline console.log(window.location.host); // Zwraca nazwę hosta (np. www.example.com) \newline \newline innerWidth i innerHeight: Właściwości innerWidth i innerHeight zwracają \newline szerokość i wysokość obszaru widocznego w oknie przeglądarki, bez \newline uwzględniania paska przewijania i innych elementów interfejsu przeglądarki. \newline console.log(window.innerWidth); // Zwraca szerokość obszaru widocznego w pikselach \newline console.log(window.innerHeight); // Zwraca wysokość obszaru widocznego w pikselach \newline \newline pageXOffset i pageYOffset: Właściwości pageXOffset i pageYOffset zwracają \newline przesunięcie strony w poziomie i pionie względem początku dokumentu. Są one \newline przydatne do określania aktualnego położenia przewijania strony. \newline console.log(window.pageXOffset); // Zwraca przesunięcie strony w poziomie \newline console.log(window.pageYOffset); // Zwraca przesunięcie strony w pionie \newline \newline prompt(message, default): Metoda prompt wyświetla okno dialogowe z pytaniem \newline o wprowadzenie danych. Przyjmuje dwa argumenty: wiadomość wyświetlaną w oknie \newline dialogowym i wartość domyślną. Zwraca wprowadzoną wartość jako ciąg znaków lub \newline null, jeśli użytkownik kliknie Anuluj. \newline const result = window.prompt("Podaj swoje imię:", "Anonim"); \newline console.log(result); // Zawiera wprowadzoną wartość lub null} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Przedrostek new}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Przedrostek new jest używany w JavaScript do tworzenia nowych instancji obiektów \newline na podstawie funkcji konstruktora. Gdy używasz słowa kluczowego new przed \newline wywołaniem funkcji konstruktora, oznacza to, że chcesz utworzyć nowy obiekt \newline na podstawie tego konstruktora. \newline \newline Kiedy używamy new przed funkcją konstruktora, następuje kilka ważnych rzeczy: \newline \newline 1. Tworzony jest nowy pusty obiekt. \newline 2. this wewnątrz funkcji konstruktora odnosi się do tego nowego obiektu. \newline 3. Właściwości i metody są dodawane do tego obiektu przy użyciu składni \newline this.propertyName lub this.methodName. \newline 4. Jeśli funkcja konstruktora nie zwraca żadnej wartości, to automatycznie zwracany \newline jest ten nowy obiekt. \newline 5. Jeśli funkcja konstruktora zwraca inny obiekt (np. poprzez użycie instrukcji \newline return), to zamiast nowego obiektu zwracany jest ten inny obiekt. \newline \newline Bez przedrostka new funkcja konstruktora będzie po prostu zwykłą funkcją, \newline a nie zostanie utworzony nowy obiekt. W takim przypadku, this wewnątrz funkcji \newline konstruktora odnosić się będzie do globalnego obiektu (np. window w przypadku \newline przeglądarki) lub do kontekstu wywołania, w zależności od tego, w jakim kontekście \newline zostanie wywołana.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Obiekty}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{1. Object: Reprezentuje ogólny obiekt i jest podstawowym typem dla wszystkich innych \newline obiektów JavaScript. \newline const obj = \{ name: 'John', age: 30 \}; \newline \newline 2. Array: Przechowuje dane w uporządkowanej sekwencji i zapewnia wiele funkcji do \newline manipulacji tablicami. \newline const arr = {[}1, 2, 3, 4, 5{]}; \newline \newline 3. String: Reprezentuje sekwencję znaków tekstowych i zapewnia wiele funkcji do \newline manipulacji tekstami. \newline const str = 'Hello, World!'; \newline \newline 4. Number: Reprezentuje wartość liczbową i zapewnia wiele funkcji matematycznych. \newline const num = 42; \newline \newline 5. Boolean: Reprezentuje wartość logiczną true lub false. \newline const bool = true; \newline \newline 6. Date: Reprezentuje datę i czas. \newline const currentDate = new Date(); \newline console.log(currentDate); // Wyświetli aktualną datę i czas \newline \newline 7. Math: Dostarcza funkcje matematyczne i stałe. \newline const result = Math.sqrt(25); \newline \newline 8. RegExp: Reprezentuje wyrażenie regularne, używane do dopasowywania i \newline manipulowania tekstami. \newline const regex = /hello/gi; \newline \newline 9. Function: Reprezentuje funkcję w JavaScript. \newline function greet(name) \{ \newline console.log(`Hello, \$\{name\}!`); \newline \} \newline \newline 10. Error: Reprezentuje błąd wykonania programu. \newline const error = new Error('Something went wrong.'); \newline \newline 11. JSON: Zapewnia funkcje do przekształcania danych JavaScript na format \newline JSON (JavaScript Object Notation) i vice versa. \newline const data = JSON.parse('\{"name":"John","age":30\}'); \newline \newline 12. Map: Przechowuje pary klucz-wartość i zapewnia różne metody do \newline manipulacji mapą. \newline const map = new Map(); \newline map.set('key', 'value'); \newline \newline 13. Set: Przechowuje unikalne wartości i zapewnia różne metody do \newline manipulacji zbiorami. \newline const set = new Set(); \newline set.add(1); \newline \newline 14. Promise: Reprezentuje asynchroniczne wykonanie operacji i obsługę \newline wyników lub błędów. \newline const promise = new Promise((resolve, reject) =\textgreater{} \{ \newline setTimeout(() =\textgreater{} \{ \newline resolve('Done'); \newline \}, 1000); \newline \}); \newline \newline 15. ArrayBuffer: Przechowuje sekwencję bajtów i zapewnia interfejs do manipulacji \newline binarnymi danymi. \newline const buffer = new ArrayBuffer(16); \newline \newline 16. DataView: Pozwala na odczyt i zapis danych binarnych w ArrayBuffer. \newline const buffer = new ArrayBuffer(16); \newline const view = new DataView(buffer); \newline \newline 17. XMLHttpRequest: służy do wykonywania asynchronicznych żądań HTTP \newline w języku JavaScript. Umożliwia komunikację z serwerem i pobieranie danych \newline w tle bez konieczności przeładowywania strony. Pozwala na wysyłanie żądań \newline HTTP, odbieranie odpowiedzi, zarządzanie nagłówkami, przesyłanie danych i \newline obsługę różnych typów odpowiedzi (np. tekst, JSON, XML). \newline const xhr = new XMLHttpRequest(); \newline \newline 18. Window: reprezentuje globalne okno przeglądarki, w którym wyświetlana \newline jest strona internetowa. Dostarcza wiele funkcji i właściwości związanych z \newline interakcją użytkownika, manipulacją strukturą dokumentu, zarządzaniem \newline historią przeglądarki itp. Udostępnia interfejs do operacji na elementach DOM, \newline obsługę zdarzeń, manipulację historią przeglądarki, tworzenie nowych okien i \newline ram, zarządzanie czasem (np. setTimeout, setInterval) oraz wiele innych funkcjonalności. \newline window.alert('Hello, World!'); \newline \newline 19.Document: reprezentuje aktualnie załadowany dokument HTML w przeglądarce. \newline Zapewnia dostęp do elementów DOM na stronie, takich jak elementy HTML, \newline style, zdarzenia itp. Udostępnia metody do manipulacji zawartością dokumentu, \newline takie jak tworzenie, usuwanie i modyfikowanie elementów HTML, manipulowanie \newline styli, dodawanie i usuwanie zdarzeń. Pozwala na dostęp do różnych kolekcji \newline elementów, takich jak elementy po tagu, po klasie, po identyfikatorze itp. \newline const element = \seqsplit{document.createElement('div');}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Serializacja danych}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Serializacja danych to proces konwersji struktur danych, takich jak obiekty, \newline tablice, liczby, ciągi znaków itp., na format, który można przesłać lub przechować, \newline na przykład w formie ciągu znaków. Najczęściej używane formaty serializacji \newline danych to JSON (JavaScript Object Notation) i XML (eXtensible Markup Language). \newline \newline Serializacja danych jest użyteczna w wielu przypadkach, takich jak: \newline \newline Przesyłanie danych przez sieć: Serializacja danych umożliwia przesłanie struktur \newline danych między aplikacjami lub serwerami za pomocą protokołów komunikacyjnych, \newline takich jak HTTP. Dane mogą być zamieniane na tekstowe reprezentacje, które są \newline łatwe do przesłania i odczytania. \newline \newline Przechowywanie danych: Serializacja danych umożliwia zapisanie struktur danych \newline na dysku lub w bazie danych w celu późniejszego odczytania. Przechowywanie \newline danych w formie serializowanej jest przydatne do utrwalania stanu aplikacji lub \newline przechowywania danych persystentnych. \newline \newline Współpraca z innymi językami programowania: Serializacja danych pozwala na \newline wymianę danych między aplikacjami napisanymi w różnych językach programowania. \newline Dzięki temu można zintegrować aplikacje działające na różnych platformach. \newline W JavaScript jednym z najczęściej używanych formatów serializacji danych jest \newline JSON. JavaScript dostarcza funkcje JSON.stringify() do konwersji obiektów na \newline JSON i JSON.parse() do konwersji JSON z powrotem na obiekty JavaScript. Przykład użycia: \newline \newline const obj = \{ name: 'John', age: 30 \}; \newline \newline // Serializacja obiektu do formatu JSON \newline const json = JSON.stringify(obj); \newline console.log(json); // \{"name":"John","age":30\} \newline \newline // Deserializacja JSON do obiektu JavaScript \newline const parsedObj = JSON.parse(json); \newline console.log(parsedObj); // \{ name: 'John', age: 30 \} \newline Serializacja danych jest powszechnie stosowaną techniką w programowaniu, \newline która umożliwia efektywną wymianę i przechowywanie danych w różnych formatach.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Error}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{W JavaScript obiekty typu Error są wykorzystywane do reprezentowania błędów i \newline wyjątków. Obiekt Error zawiera informacje o błędzie, takie jak wiadomość opisująca \newline rodzaj błędu oraz stos wywołań. \newline \newline Przykład użycia obiektu Error: \newline \newline try \{ \newline // Kod, który może generować błąd \newline throw new Error('To jest jakiś błąd'); \newline \} catch (error) \{ \newline // Obsługa błędu \newline \seqsplit{console.log(error.message);} // 'To jest jakiś błąd' \newline \} \newline W powyższym przykładzie używamy słowa kluczowego throw, aby wygenerować nowy \newline obiekt Error z określoną wiadomością. Następnie używamy bloku catch do \newline przechwycenia błędu i obsługi go. W tym przypadku po prostu wypisujemy \newline wiadomość błędu na konsoli. \newline \newline Obiekty Error mogą być dziedziczone przez konkretne typy błędów, takie jak \newline TypeError, ReferenceError, SyntaxError itp. Na przykład: \newline \newline try \{ \newline // Kod, który może generować błąd typu TypeError \newline throw new TypeError('To jest błąd typu TypeError'); \newline \} catch (error) \{ \newline // Obsługa błędu \newline console.log(error instanceof TypeError); // true \newline \seqsplit{console.log(error.message);} // 'To jest błąd typu TypeError' \newline \} \newline \newline W powyższym przykładzie używamy obiektu TypeError do reprezentowania błędu \newline typu TypeError. Możemy sprawdzić typ błędu za pomocą operatora instanceof oraz \newline uzyskać jego wiadomość za pomocą właściwości message. \newline \newline Obiekty Error posiadają również inne właściwości, takie jak name (nazwa błędu) i \newline stack (stos wywołań), które zawierają dodatkowe informacje diagnostyczne dotyczące \newline błędu. \newline \newline Błędy i wyjątki są ważnym elementem w zarządzaniu błędami w JavaScript, \newline pozwalając na łatwiejszą identyfikację i obsługę różnych sytuacji błędnych w kodzie. \newline \newline W języku JavaScript istnieje kilka wbudowanych typów błędów (errors), które dziedziczą \newline o klasie Error. Oto niektóre z najczęściej spotykanych typów błędów: \newline \newline - Error: Podstawowy typ błędu. Może być używany jako ogólny typ błędu. \newline - SyntaxError: Występuje, gdy w kodzie występuje błąd składniowy. Na przykład, \newline nieprawidłowe użycie składni języka JavaScript. \newline - ReferenceError: Występuje, gdy odwołujemy się do nieistniejącej zmiennej lub obiektu. \newline Na przykład, próba odwołania się do niezadeklarowanej zmiennej. \newline - TypeError: Występuje, gdy wykonywane jest nieprawidłowe działanie na typie danych. \newline Na przykład, próba wykonania działania matematycznego na wartości niebędącej liczbą. \newline - RangeError: Występuje, gdy wartość znajduje się poza zakresem, który jest dozwolony. \newline Na przykład, próba utworzenia tablicy o zbyt dużym rozmiarze. \newline - EvalError: Występuje, gdy wystąpi błąd w funkcji eval(). \newline - URIError: Występuje, gdy URI (Uniform Resource Identifier) nie jest poprawnie \newline zakodowany. \newline - AggregateError: Występuje w przypadku wielu błędów zgromadzonych w jednym \newline obiekcie. Jest używany w przypadku obsługi wielu promisów. \newline \newline Warto zauważyć, że możemy również tworzyć własne typy błędów, dziedzicząc po \newline klasie Error. Tworzenie niestandardowych typów błędów może być przydatne w celu \newline lepszego zorganizowania obsługi błędów w naszym kodzie. \newline \newline Przykład użycia niestandardowego typu błędu: \newline \newline class CustomError extends Error \{ \newline constructor(message) \{ \newline super(message); \newline this.name = 'CustomError'; \newline \} \newline \} \newline \newline try \{ \newline throw new CustomError('To jest niestandardowy błąd'); \newline \} catch (error) \{ \newline console.log(error instanceof CustomError); // true \newline \seqsplit{console.log(error.message);} // 'To jest niestandardowy błąd' \newline \} \newline \newline W powyższym przykładzie tworzymy niestandardowy typ błędu o nazwie \newline CustomError, który dziedziczy po klasie Error. Możemy go obsługiwać podobnie \newline jak inne wbudowane typy błędów.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{XMLHttpRequest}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{XMLHttpRequest jest obiektem wbudowanym w przeglądarki internetowe, \newline które umożliwia komunikację z serwerem za pomocą protokołu HTTP lub HTTPS. \newline Służy do wysyłania asynchronicznych żądań HTTP i odbierania odpowiedzi w \newline formacie tekstowym, XML lub JSON. \newline \newline Główne kroki w użyciu XMLHttpRequest obejmują: \newline \newline Tworzenie obiektu XMLHttpRequest: \newline const xhr = new XMLHttpRequest(); \newline \newline Konfiguracja żądania HTTP: \newline xhr.open(method, url, async); \newline method: Metoda HTTP, np. "GET", "POST", "PUT", "DELETE". \newline url: Adres URL, do którego wysyłane jest żądanie. \newline async (opcjonalne): Określa, czy żądanie ma być asynchroniczne (domyślnie true) lub \newline synchroniczne (false). \newline \newline Ustalenie funkcji obsługującej zdarzenie readyStateChange: \newline xhr.onreadystatechange = function () \{ \newline if (xhr.readyState === 4 \&\& xhr.status === 200) \{ \newline // Obsługa zakończonego żądania \newline \} \newline \}; \newline \newline readyState reprezentuje stan obiektu XMLHttpRequest i może przyjmować różne \newline wartości od 0 do 4. Wartość 4 oznacza, że żądanie zostało zakończone i odpowiedź \newline jest gotowa do odczytu. \newline Wysłanie żądania: \newline xhr.send(data); \newline data (opcjonalne) reprezentuje dane, które mogą być przesłane wraz z żądaniem, \newline np. w przypadku metod POST lub PUT. \newline Obsługa odpowiedzi: \newline xhr.responseText; // Odpowiedź jako tekst \newline xhr.responseXML; // Odpowiedź jako dokument XML \newline xhr.status; // Kod stanu odpowiedzi HTTP \newline Odpowiedź z serwera jest dostępna za pomocą właściwości responseText lub responseXML. Właściwość status zawiera kod stanu odpowiedzi HTTP, np. 200 oznacza sukces. \newline \newline XMLHttpRequest dostarcza również inne funkcje i metody, takie jak \newline setRequestHeader(), która umożliwia ustawianie nagłówków żądania HTTP, oraz \newline abort(), która służy do anulowania żądania w trakcie trwania. \newline \newline Warto również zaznaczyć, że wraz z pojawieniem się nowszych standardów w \newline JavaScript, takich jak Fetch API i XMLHttpRequest zostało zastąpione przez te \newline bardziej nowoczesne metody obsługi żądań HTTP.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Iteracja po elementach kolekcji}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{W języku JavaScript istnieje kilka sposobów iteracji po elementach kolekcji, takich jak \newline tablice lub obiekty. Oto kilka popularnych sposobów iteracji: \newline \newline - Pętla for: Tradycyjna pętla for pozwala na iterację po indeksach kolekcji. Jest szczególnie \newline przydatna do iteracji po tablicach. \newline Przykład: \newline const tablica = {[}1, 2, 3, 4{]}; \newline \newline for (let i = 0; i \textless{} tablica.length; i++) \{ \newline console.log(tablica{[}i{]}); \newline \} \newline \newline - Pętla for...of: Pętla for...of umożliwia iterację po elementach kolekcji, takich jak tablice \newline lub obiekty iterowalne, bez konieczności odwoływania się do indeksów. \newline Przykład: \newline const tablica = {[}1, 2, 3, 4{]}; \newline \newline for (let element of tablica) \{ \newline console.log(element); \newline \} \newline \newline - Metoda forEach: Metoda forEach jest dostępna dla tablic i pozwala na wykonanie \newline określonej funkcji dla każdego elementu tablicy. \newline Przykład: \newline const tablica = {[}1, 2, 3, 4{]}; \newline \newline tablica.forEach((element) =\textgreater{} \{ \newline console.log(element); \newline \}); \newline \newline - Metoda map: Metoda map również jest dostępna dla tablic i pozwala na wykonanie \newline określonej funkcji dla każdego elementu tablicy, a następnie zwrócenie nowej tablicy \newline zawierającej wyniki. \newline Przykład: \newline const tablica = {[}1, 2, 3, 4{]}; \newline \newline const nowaTablica = tablica.map((element) =\textgreater{} \{ \newline return element * 2; \newline \}); \newline \newline console.log(nowaTablica); \newline \newline - Pętla for...in: Pętla for...in umożliwia iterację po nazwach właściwości obiektu. \newline Jest szczególnie przydatna do iteracji po obiektach. \newline Przykład: \newline const obiekt = \{ a: 1, b: 2, c: 3 \}; \newline \newline for (let key in obiekt) \{ \newline console.log(key, obiekt{[}key{]}); \newline \}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Klasa}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Klasy są wprowadzone w języku JavaScript w standardzie ECMAScript 2015 (ES6) \newline jako syntaktyczny cukier nad prototypami, umożliwiający definiowanie obiektów i ich \newline właściwości oraz metody w bardziej deklaratywny sposób. Klasy pozwalają na tworzenie \newline obiektów o podobnej strukturze i zachowaniu. \newline \newline Oto kilka kluczowych cech klas w JavaScript: \newline \newline Deklaracja klasy: Klasa może być zadeklarowana za pomocą słowa kluczowego class, \newline po którym podajemy nazwę klasy. \newline Przykład: \newline class Klasa \{ \newline // Ciało klasy \newline \} \newline \newline Konstruktor: Konstruktor jest specjalną metodą w klasie, która jest wywoływana \newline podczas tworzenia nowego obiektu na podstawie klasy. Może być używany do \newline inicjalizacji właściwości obiektu. \newline Przykład: \newline class Klasa \{ \newline constructor(parametr) \{ \newline this.wlascowosc = parametr; \newline \} \newline \} \newline \newline const obiekt = new Klasa('wartość'); \newline \newline Metody: Metody to funkcje zdefiniowane wewnątrz klasy, które wykonują określone \newline operacje na obiekcie. Mogą być używane do manipulacji właściwościami obiektu lub \newline wykonywania innych operacji. \newline Przykład: \newline class Klasa \{ \newline metoda() \{ \newline console.log('Wywołanie metody'); \newline \} \newline \} \newline \newline const obiekt = new Klasa(); \newline obiekt.metoda(); \newline \newline Dziedziczenie: Klasa może dziedziczyć właściwości i metody z innej klasy za pomocą \newline słowa kluczowego extends. Dziedziczenie pozwala na tworzenie hierarchii klas i ponowne \newline wykorzystanie kodu. \newline Przykład: \newline class KlasaPodstawowa \{ \newline metoda() \{ \newline console.log('Metoda z klasy podstawowej'); \newline \} \newline \} \newline \newline class KlasaPochodna extends KlasaPodstawowa \{ \newline // Klasa pochodna dziedziczy metody z klasy podstawowej \newline \} \newline \newline const obiekt = new KlasaPochodna(); \newline obiekt.metoda(); // Wywołanie metody z klasy podstawowej \newline \newline Słowo kluczowe super w języku JavaScript jest używane w kontekście dziedziczenia klas, \newline aby odwoływać się do właściwości i metod z klasy nadrzędnej (klasy bazowej). Pozwala to \newline na rozszerzanie funkcjonalności klasy nadrzędnej w klasie pochodnej oraz wywoływanie \newline konstruktora klasy nadrzędnej. \newline \newline Oto kilka zastosowań słowa kluczowego super: \newline \newline Wywołanie konstruktora klasy nadrzędnej: Przy dziedziczeniu klas, konstruktor klasy \newline pochodnej może wywołać konstruktor klasy nadrzędnej za pomocą super(). Pozwala to \newline na inicjalizację właściwości klasy nadrzędnej przed zainicjalizowaniem właściwości klasy \newline pochodnej. \newline Przykład: \newline class KlasaNadrzedna \{ \newline constructor(parametr) \{ \newline this.wlascowoscNadrzedna = parametr; \newline \} \newline \} \newline \newline class KlasaPochodna extends KlasaNadrzedna \{ \newline constructor(parametr1, parametr2) \{ \newline super(parametr1); // Wywołanie konstruktora klasy nadrzędnej \newline this.wlascowoscPochodna = parametr2; \newline \} \newline \} \newline \newline const obiekt = new \seqsplit{KlasaPochodna('wartość1'}, 'wartość2'); \newline console.log(obiekt.wlascowoscNadrzedna); // wartość1 \newline console.log(obiekt.wlascowoscPochodna); // wartość2 \newline \newline Odwoływanie się do metody klasy nadrzędnej: Słowo kluczowe super może być \newline używane do odwoływania się do metody z klasy nadrzędnej w klasie pochodnej. \newline Umożliwia to rozszerzanie funkcjonalności metody z klasy nadrzędnej lub nadpisywanie \newline jej zachowania. \newline Przykład: \newline class KlasaNadrzedna \{ \newline metoda() \{ \newline console.log('Metoda z klasy nadrzędnej'); \newline \} \newline \} \newline \newline class KlasaPochodna extends KlasaNadrzedna \{ \newline metoda() \{ \newline super.metoda(); // Wywołanie metody klasy nadrzędnej \newline console.log('Metoda z klasy pochodnej'); \newline \} \newline \} \newline \newline const obiekt = new KlasaPochodna(); \newline obiekt.metoda(); \newline // Wyjście: \newline // Metoda z klasy nadrzędnej \newline // Metoda z klasy pochodnej \newline \newline Słowo kluczowe super jest używane do odwoływania się do elementów klasy \newline nadrzędnej w kontekście dziedziczenia. Dzięki temu możliwe jest rozszerzanie i dostęp \newline do funkcjonalności klasy nadrzędnej w klasie pochodnej. \newline \newline Klasy w JavaScript zapewniają bardziej zwięzłą i deklaratywną składnię do tworzenia \newline obiektów i zarządzania ich zachowaniem. Mogą być używane do implementacji \newline obiektowo zorientowanego programowania w JavaScript. \newline \newline let Animal = class BasicAnimal \{ \newline constructor(name) \{ \newline this.name = name \newline this.\_age = 1; \newline \newline if (Animal.count === undefined) Animal.count = 0; \newline Animal.count++; // emulujemy statyczne property w ES6 \newline \} \newline \newline getName = () =\textgreater{} \{ \newline return this.name; \newline \} \newline \newline set age(value) \{ \newline if (value \textgreater{} 0) this.\_age = value; \newline \} \newline \newline get age() \{ \newline return this.\_age; \newline \} \newline \newline static getNewAnimal() \{ \newline return new Animal("Default animal"); \newline \} \newline \newline static getAnimalCount() \{ \newline return Animal.count; \newline \} \newline \} \newline \newline const animal1 = new Animal("Tiger"); \newline console.log( animal1.getName() ); // "Tiger" \newline console.log( Animal.name ); // BasicAnimal \newline animal1.age = 10; \newline // animal1.\_age = 22; // można zmodyfikować, nie ma private w ES6 \newline console.log( animal1.age ); // 10 \newline \newline const animal2 = Animal.getNewAnimal(); \newline \seqsplit{console.log(animal2.getName());} // Default animal \newline \newline console.dir(Animal); \newline console.log( Animal.getAnimalCount() ); // 2} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Closures}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Closures (domknięcia) są ważnym konceptem w języku JavaScript. Oznaczają one \newline zdolność funkcji do zapamiętania i uzyskiwania dostępu do zmiennych ze swojego \newline otoczenia, nawet po opuszczeniu tego otoczenia. \newline \newline Oto prosty przykład, który demonstruje closures: \newline \newline function outer() \{ \newline var outerVariable = 'Hello'; \newline \newline function inner() \{ \newline var innerVariable = 'World'; \newline \seqsplit{console.log(outerVariable} + ' ' + innerVariable); \newline \} \newline \newline return inner; \newline \} \newline \newline var closureFn = outer(); \newline closureFn(); // Wynik: "Hello World" \newline \newline W tym przykładzie funkcja inner jest zagnieżdżona w funkcji outer. Funkcja \newline inner ma dostęp do zmiennej outerVariable z funkcji outer, nawet po tym jak \newline funkcja outer zakończyła swoje działanie i została wywołana. \newline \newline Closures są przydatne w wielu sytuacjach, takich jak tworzenie prywatnych \newline zmiennych, implementacja funkcji zwrotnych (callback) i zarządzanie stanem \newline w programowaniu asynchronicznym. Pozwalają one na utrzymanie stanu i \newline zapamiętywanie danych między różnymi wywołaniami funkcji. \newline \newline Warto zauważyć, że closures w języku JavaScript mogą mieć znaczący wpływ na \newline zarządzanie pamięcią. Jeśli closure nadal utrzymuje referencję do obiektów lub \newline zmiennych, które nie są już potrzebne, może to prowadzić do wycieków pamięci.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Currying}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Currying to technika programistyczna, która polega na przekształceniu funkcji o wielu \newline argumentach w sekwencję funkcji o pojedynczych argumentach. Pozwala to na tworzenie \newline bardziej elastycznych i modułowych funkcji. \newline \newline W curryingu funkcja przyjmuje jeden argument i zwraca nową funkcję, która również \newline przyjmuje jeden argument, a tak dalej, aż wszystkie argumenty zostaną dostarczone i \newline funkcja zostanie ostatecznie wywołana. \newline \newline Oto prosty przykład: \newline \newline function add(a) \{ \newline return function(b) \{ \newline return a + b; \newline \} \newline \} \newline \newline var add5 = add(5); // Zwraca funkcję, która dodaje 5 do przekazanego argumentu \newline \newline console.log(add5(2)); // Wynik: 7 \newline console.log(add5(10)); // Wynik: 15 \newline W powyższym przykładzie funkcja add jest funkcją currying. Przyjmuje ona argument \newline a i zwraca funkcję, która dodaje przekazany argument b do a. Wywołanie add(5) zwraca \newline funkcję, która dodaje 5 do przekazanego argumentu. Następnie możemy wielokrotnie \newline wywoływać zwróconą funkcję, przekazując różne argumenty. \newline \newline Currying jest przydatne w wielu sytuacjach, szczególnie przy tworzeniu funkcji \newline cząstkowych (partial functions) i kompozycji funkcji. Umożliwia tworzenie bardziej \newline elastycznych funkcji, które można łatwo dostosować do różnych przypadków użycia. \newline \newline Warto również wspomnieć, że w języku JavaScript można używać metod takich jak \newline bind() do osiągnięcia efektu podobnego do currying. Metoda bind() pozwala na utworzenie \newline nowej funkcji, która jest związana z określonym kontekstem i zestawem argumentów.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2021 (ES12)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{- Private Fields and Methods (Pola i metody prywatne): \newline ES12 wprowadza możliwość definiowania pól i metod prywatnych w klasach \newline za pomocą prefixu \#. Przykład: \newline class MyClass \{ \newline \#privateField = 10; \newline \newline \#privateMethod() \{ \newline return this.\#privateField; \newline \} \newline \newline getPrivateFieldValue() \{ \newline return this.\#privateField; \newline \} \newline \} \newline \newline const myObject = new MyClass(); \newline console.log(myObject.getPrivateFieldValue()); // 10 \newline console.log(myObject.privateField); // undefined \newline console.log(myObject.privateMethod()); // Error: privateMethod is not a function \newline \newline - Logical Assignment Operators (Operatorzy logiczne przypisania): \newline ES12 wprowadza skrócone zapisy operacji logicznych z przypisaniem, takie jak \newline ||=, \&\&=, ??=. Pozwalają one na wykonanie operacji logicznej i przypisania wartości \newline w jednym kroku. Przykład: \newline let x = 5; \newline x ||= 10; // Jeśli x jest fałszywe (falsy), przypisz mu wartość 10 \newline console.log(x); // 5 \newline \newline let y = null; \newline y ??= 'Hello'; // Jeśli y jest null lub undefined, przypisz mu wartość 'Hello' \newline console.log(y); // 'Hello' \newline \newline - Numeric Separator (Separator numeryczny): \newline ES12 wprowadza możliwość stosowania podkreślenia \_ jako separatora w liczbach, \newline aby ułatwić czytanie i zrozumienie dużych liczb. Przykład: \newline const bigNumber = 1\_000\_000; \newline console.log(bigNumber); // 1000000 \newline \newline - Promise.any(): \newline ES12 wprowadza funkcję Promise.any(), która przyjmuje tablicę obiektów Promise i \newline zwraca pierwszy rozwiązany Promise. Przykład: \newline const promises = {[} \newline \seqsplit{fetch('https://api.example.com/data1')}, \newline \seqsplit{fetch('https://api.example.com/data2')}, \newline \seqsplit{fetch('https://api.example.com/data3')} \newline {]}; \newline \newline Promise.any(promises) \newline .then(response =\textgreater{} console.log(response)) \newline .catch(error =\textgreater{} console.error(error)); \newline \newline - WeakRef to nowa funkcjonalność wprowadzona w ECMAScript 2021 (ES12). \newline Służy do tworzenia słabych referencji do obiektów, co umożliwia bardziej elastyczne \newline zarządzanie pamięcią w JavaScript. \newline \newline Słabe referencje są szczególnie przydatne w sytuacjach, gdy chcemy monitorować \newline obiekty, ale jednocześnie pozwolić na ich automatyczne usuwanie przez mechanizm \newline zarządzania pamięcią, jeśli nie są już używane. Słabe referencje nie zatrzymują \newline automatycznie obiektów przed usunięciem przez garbage collector. \newline \newline Oto prosty przykład użycia WeakRef: \newline \newline \newline let obj = \{ data: "Hello" \}; \newline const ref = new WeakRef(obj); \newline \newline // Sprawdzanie, czy obiekt wciąż istnieje \newline console.log(ref.deref()); // \{ data: "Hello" \} \newline \newline obj = null; // Usunięcie referencji do obiektu \newline \newline // Sprawdzanie, czy obiekt został usunięty \newline console.log(ref.deref()); // null \newline \newline W powyższym przykładzie tworzymy obiekt obj, a następnie tworzymy słabą \newline referencję ref do tego obiektu za pomocą konstruktora WeakRef. Możemy użyć \newline metody deref() na obiekcie ref, aby sprawdzić, czy obiekt wciąż istnieje. \newline Po usunięciu referencji do obiektu poprzez przypisanie null do zmiennej obj, \newline ponowne wywołanie deref() zwraca null, co oznacza, że obiekt został usunięty. \newline \newline Słabe referencje są szczególnie przydatne w przypadku tworzenia pamięciochłonnych \newline obiektów, które mogą być dynamicznie usuwane, gdy nie są już potrzebne.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2019 (ES10)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Oto lista niektórych nowych funkcji i zasad wprowadzonych w ECMAScript 2019 (ES10): \newline \newline - Array.flat() i Array.flatMap(): Metoda flat() służy do spłaszczania tablicy, usuwając \newline zagnieżdżone tablice i łącząc je w jedną płaską tablicę. Metoda flatMap() pozwala na \newline jednoczesne spłaszczenie tablicy i zastosowanie funkcji do każdego elementu. \newline Przykład: \newline const nestedArray = {[}1, {[}2, 3{]}, {[}4, {[}5, 6{]}{]}{]}; \newline const flattenedArray = nestedArray.flat(); \newline console.log(flattenedArray); // {[}1, 2, 3, 4, {[}5, 6{]}{]} \newline \newline const numbers = {[}1, 2, 3{]}; \newline const doubledArray = numbers.flatMap(num =\textgreater{} {[}num, num * 2{]}); \newline console.log(doubledArray); // {[}1, 2, 2, 4, 3, 6{]} \newline \newline - String.trimStart() i String.trimEnd(): Metody trimStart() i trimEnd() służą do usuwania \newline spacji na początku i końcu łańcucha znaków. Zastępują one metody trimLeft() i trimRight() \newline używane wcześniej. Przykład: \newline const text = ' Hello World '; \newline console.log(text.trimStart()); // 'Hello World ' \newline console.log(text.trimEnd()); // ' Hello World' \newline \newline - Optional Catch Binding: Pozwala na użycie pustego identyfikatora w bloku catch, \newline jeśli nie jest potrzebny dostęp do błędu. Przykład: \newline try \{ \newline // kod generujący błąd \newline \} catch \{ \newline console.log('Wystąpił błąd'); \newline \} \newline \newline - Object.fromEntries(): Metoda fromEntries() przekształca listę par klucz-wartość \newline na obiekt. Przykład: \newline const entries = {[}{[}'a', 1{]}, {[}'b', 2{]}, {[}'c', 3{]}{]}; \newline const obj = \seqsplit{Object.fromEntries(entries);} \newline console.log(obj); // \{ a: 1, b: 2, c: 3 \} \newline \newline - Symbol Description Accessor: Umożliwia uzyskanie dostępu do opisu symbolu za \newline pomocą metody description. Przykład: \newline const symbol = Symbol('My Symbol'); \newline console.log(symbol.description); // 'My Symbol'} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2017 (ES8)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Oto kilka nowości wprowadzonych w ECMAScript 2017 (ES8) wraz z przykładami: \newline \newline - Async Functions: Wprowadzono asynchroniczne funkcje, które ułatwiają pracę z \newline asynchronicznym kodem. Wykorzystuje się do tego słowo kluczowe async oraz await. \newline Przykład: \newline async function fetchData() \{ \newline try \{ \newline const response = await \seqsplit{fetch('https://api.example.com/data');} \newline const data = await response.json(); \newline return data; \newline \} catch (error) \{ \newline console.error('Error:', error); \newline \} \newline \} \newline \newline - Object.values(): Metoda Object.values() zwraca tablicę zawierającą wartości wszystkich właściwości obiektu. Przykład: \newline const obj = \{ a: 1, b: 2, c: 3 \}; \newline const values = Object.values(obj); \newline console.log(values); // {[}1, 2, 3{]} \newline \newline - Object.entries(): Metoda Object.entries() zwraca tablicę zawierającą tablice składające \newline się z klucza i wartości każdej właściwości obiektu. Przykład: \newline const obj = \{ a: 1, b: 2, c: 3 \}; \newline const entries = Object.entries(obj); \newline console.log(entries); // {[}{[}"a", 1{]}, {[}"b", 2{]}, {[}"c", 3{]}{]} \newline \newline - String padding: Dodano możliwość wyrównywania łańcucha znaków poprzez \newline uzupełnianie go odpowiednią ilością znaków. Wykorzystuje się do tego metody \newline padStart() i padEnd(). Przykład: \newline \newline const str = 'Hello'; \newline console.log(str.padStart(10, '{\emph{')); // "{\bf{}}}}Hello" \newline console.log(str.padEnd(10, '-')); // "Hello-{}-{}-{}--" \newline \newline - \seqsplit{Object.getOwnPropertyDescriptors():} Metoda \seqsplit{Object.getOwnPropertyDescriptors()} \newline zwraca wszystkie deskryptory właściwości obiektu. Przykład: \newline const obj = \{ \newline name: 'John', \newline age: 30 \newline \}; \newline \newline const descriptors = \seqsplit{Object.getOwnPropertyDescriptors(obj);} \newline console.log(descriptors); \newline /{\emph{ \newline \{ \newline name: \{ value: 'John', writable: true, enumerable: true, configurable: true \}, \newline age: \{ value: 30, writable: true, enumerable: true, configurable: true \} \newline \} \newline }}/ \newline \newline - SharedArrayBuffer i Atomics: Wprowadzono nowe obiekty SharedArrayBuffer i Atomics \newline do obsługi współdzielonych buforów pomiędzy wątkami w środowisku wielowątkowym. \newline \newline -Async Iteration: Wprowadzono możliwość iteracji asynchronicznej przy użyciu pętli \newline for-await-of, co ułatwia pracę z asynchronicznymi operacjami. Przykład: \newline async function* asyncGenerator() \{ \newline yield 1; \newline yield 2; \newline yield 3; \newline \} \newline \newline (async () =\textgreater{} \{ \newline for await (const num of asyncGenerator()) \{ \newline console.log(num); \newline \} \newline \})();} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2016 (ES7)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{ES7, również znany jako ECMAScript 2016, wprowadził niewiele nowych funkcji w \newline porównaniu do poprzednich wersji języka JavaScript. Poniżej znajduje się lista kilku \newline zmian wprowadzonych w ES7 wraz z przykładami: \newline \newline - Includes: \newline Metoda includes została dodana do prototypu tablic w celu sprawdzania, czy dany element \newline istnieje w tablicy. Zwraca wartość logiczną true, jeśli element istnieje, lub false, jeśli \newline nie istnieje. Przykład: \newline const numbers = {[}1, 2, 3, 4, 5{]}; \newline console.log(numbers.includes(3)); // true \newline console.log(numbers.includes(6)); // false \newline \newline - Potęgowanie: \newline Operator potęgowania {\bf{ został wprowadzony w ES7 do obliczania potęgi liczby. \newline Przykład: \newline console.log(2 }} 3); // 8 \newline console.log(5 ** 2); // 25 \newline \newline - Rest Properties: \newline W ES7 dodano obsługę reszty właściwości w destrukturyzacji obiektów. Umożliwia \newline to zbieranie pozostałych właściwości obiektu do jednej zmiennej. Przykład: \newline const \{ name, age, ...rest \} = \{ name: 'John', age: 30, gender: 'male', city: 'New York' \}; \newline console.log(name); // 'John' \newline console.log(age); // 30 \newline console.log(rest); // \{ gender: 'male', city: 'New York' \} \newline \newline - Async Functions: \newline W ES7 wprowadzono słowo kluczowe async, które umożliwia tworzenie funkcji \newline asynchronicznych. Funkcje asynchroniczne obsługują Promise i umożliwiają korzystanie \newline z await wewnątrz funkcji, co ułatwia programowanie asynchroniczne. Przykład: \newline async function fetchData() \{ \newline const response = await \seqsplit{fetch('https://api.example.com/data');} \newline const data = await response.json(); \newline return data; \newline \} \newline \newline - Shared Memory i Atomics (Atomics API): \newline ES7 wprowadza obsługę pamięci współdzielonej i wprowadza nowe API Atomics do \newline wykonywania operacji atomowych na pamięci współdzielonej. Ta funkcjonalność jest \newline szczególnie przydatna w programowaniu równoległym i wielowątkowym, ale wymaga \newline bardziej zaawansowanych technik programistycznych. \newline \newline Warto zauważyć, że ES7 nie wprowadził dużej liczby nowych funkcji, ale skupił się głównie \newline na poprawie i rozszerzeniu istniejących funkcjonalności języka JavaScript.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Instrukcje warunkowe: if else if}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{`if (temperature \textless{} 0) console.log("Bierzemy kurtkę")` \newline % Row Count 2 (+ 2) `else if (temperature == 0) console.log("Bierzemy lekką kurtkę")` \newline % Row Count 4 (+ 2) `else if (temperature \textgreater{}= 0) console.log("Bierzemy krótki rękaw")` \newline % Row Count 6 (+ 2) `else console.log("Zostajemy w domu")`% Row Count 7 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{switch case}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{switch (data3) \{ \newline case 0: \newline console.log("data równe 0") \newline break \newline case 1: \newline console.log("data równe 1") \newline break \newline case 3: \newline console.log("data równe 3") \newline break \newline case 5: \newline console.log("data równe 5") \newline break \newline default: \newline console.log("data równe jest dokładnie:", data3) \newline \}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{while}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{while ( i \textless{} 3) \{console.log("while oraz wartość i: " + i) \newline i = i + 1 \}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{do while}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{do \{console.log("do while oraz wartość b:", b) \newline b++ // to samo co b = b + 1 \newline \} while (b \textless{} 4)} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{for}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{for (let c = 0; c \textless{} 5; c++) \{ \newline console.log("pętla c, wartość c:", c)\}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{5.44 cm} x{2.56 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Number - bezpieczne zakresy}} \tn % Row 0 \SetRowColor{LightBackground} \seqsplit{`Number.MAX\_SAFE\_INTEGER`} & \seqsplit{`9007199254740991`} \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} \seqsplit{`Number.MIN\_SAFE\_INTEGER`} & \seqsplit{`-9007199254740991`} \tn % Row Count 4 (+ 2) % Row 2 \SetRowColor{LightBackground} `Number.isSafeInteger( Math.pow(2,53) - 1)` & `true` \tn % Row Count 6 (+ 2) % Row 3 \SetRowColor{white} `Number.isSafeInteger( Math.pow(2,53) )` & `false` \tn % Row Count 8 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{5.36 cm} x{2.64 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Infinity}} \tn % Row 0 \SetRowColor{LightBackground} `console.log(1 / 0)` & `Infinity` \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} `console.log(-1 / 0)` & `-Infinity` \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} `Number.isFinite(35)` & `true` \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} `Number.isFinite(1/0)` & `false` \tn % Row Count 4 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}--} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Numbers - właściwości i funkcje}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{\seqsplit{console.log(Number.MAX\_VALUE);} // 1.7976931348623157e+308 \newline console.log(Number.MIN\_VALUE); // 5e-324 \newline \newline Funkcja Number.parseInt(): Konwertuje ciąg znaków na liczbę całkowitą. \newline console.log(Number.parseInt("42")); // 42 \newline console.log(Number.parseInt("3.14")); // 3 \newline console.log(Number.parseInt("abc")); // NaN \newline \newline Funkcja Number.parseFloat(): Konwertuje ciąg znaków na liczbę zmiennoprzecinkową. \newline console.log(Number.parseFloat("3.14")); // 3.14 \newline console.log(Number.parseFloat("42.0")); // 42 \newline console.log(Number.parseFloat("abc")); // NaN \newline \newline Funkcja Number.isInteger(): Sprawdza, czy wartość jest liczbą całkowitą. \newline console.log(Number.isInteger(42)); // true \newline console.log(Number.isInteger(3.14)); // false \newline console.log(Number.isInteger("42")); // false \newline console.log(Number.isInteger(NaN)); // false \newline \newline Metoda Number.toFixed(): Określa liczbę miejsc dziesiętnych po przecinku dla liczby \newline zmiennoprzecinkowej i zwraca wynik jako ciąg znaków. \newline let num = 3.14159; \newline console.log(num.toFixed(2)); // "3.14" \newline console.log(num.toFixed(0)); // "3" \newline console.log(num.toFixed(5)); // "3.14159" \newline \newline Uwaga: Number.toFixed() zwraca wynik jako string, a nie jako liczbę. \newline Jeśli chcesz uzyskać liczbę z ustaloną ilością miejsc dziesiętnych, można \newline użyć parseFloat() lub Number(). \newline let num = 3.14159; \newline console.log(parseFloat(num.toFixed(2))); // 3.14 \newline console.log(Number(num.toFixed(2))); // 3.14} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Zaokrąglanie liczb}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Metoda Math.round(): Zaokrągla liczbę do najbliższej wartości całkowitej. \newline console.log(Math.round(3.7)); // 4 \newline console.log(Math.round(3.2)); // 3 \newline \newline Metoda Math.floor(): Zaokrągla liczbę w dół do najbliższej wartości całkowitej \newline mniejszej lub równej danej liczbie. \newline console.log(Math.floor(3.7)); // 3 \newline console.log(Math.floor(3.2)); // 3 \newline \newline Metoda Math.ceil(): Zaokrągla liczbę w górę do najbliższej wartości całkowitej \newline większej lub równej danej liczbie. \newline console.log(Math.ceil(3.7)); // 4 \newline console.log(Math.ceil(3.2)); // 4 \newline \newline Metoda Math.trunc(): Zwraca tylko całkowitą część liczby, odrzucając jej \newline część dziesiętną. \newline console.log(Math.trunc(3.7)); // 3 \newline console.log(Math.trunc(3.2)); // 3 \newline \newline Metoda Number.toFixed(): Zaokrągla liczbę do określonej liczby miejsc \newline dziesiętnych i zwraca wynik jako ciąg znaków. \newline console.log((3.14159).toFixed(2)); // "3.14" \newline console.log((3.14159).toFixed(0)); // "3" \newline \newline Metody Math.floor(), Math.ceil(), Math.trunc() można także wykorzystać w połączeniu \newline z mnożeniem i dzieleniem, aby zaokrąglić liczbę do określonej dokładności miejsc \newline dziesiętnych. \newline let num = 3.14159; \newline let roundedNum = Math.floor(num * 100) / 100; \newline console.log(roundedNum); // 3.14} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operatory przypisania}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{+= - Dodawanie i przypisanie \newline Przykład: x += 2; // równoważne zapisowi: x = x + 2; \newline \newline -= - Odejmowanie i przypisanie \newline Przykład: x -= 3; // równoważne zapisowi: x = x - 3; \newline \newline {\emph{= - Mnożenie i przypisanie \newline Przykład: x }}= 4; // równoważne zapisowi: x = x {\emph{ 4; \newline \newline /= - Dzielenie i przypisanie \newline Przykład: x /= 2; // równoważne zapisowi: x = x / 2; \newline \newline \%= - Reszta z dzielenia i przypisanie \newline Przykład: x \%= 3; // równoważne zapisowi: x = x \% 3; \newline \newline {\bf{= - Potęgowanie i przypisanie \newline Przykład: x }}= 2; // równoważne zapisowi: x = x }}* 2; \newline \newline \textless{}\textless{}= - Przesunięcie bitowe w lewo i przypisanie \newline Przykład: x \textless{}\textless{}= 3; // równoważne zapisowi: x = x \textless{}\textless{} 3; \newline \newline \textgreater{}\textgreater{}= - Przesunięcie bitowe w prawo (ze znakiem) i przypisanie \newline Przykład: x \textgreater{}\textgreater{}= 2; // równoważne zapisowi: x = x \textgreater{}\textgreater{} 2; \newline \newline \textgreater{}\textgreater{}\textgreater{}= - Przesunięcie bitowe w prawo (bez znaku) i przypisanie \newline Przykład: x \textgreater{}\textgreater{}\textgreater{}= 4; // równoważne zapisowi: x = x \textgreater{}\textgreater{}\textgreater{} 4; \newline \newline \&= - Bitowe AND i przypisanie \newline Przykład: x \&= 5; // równoważne zapisowi: x = x \& 5; \newline \newline |= - Bitowe OR i przypisanie \newline Przykład: x |= 8; // równoważne zapisowi: x = x | 8; \newline \newline \textasciicircum{}= - Bitowe XOR i przypisanie \newline Przykład: x \textasciicircum{}= 3; // równoważne zapisowi: x = x \textasciicircum{} 3;} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operatory arytmetyczne}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{+ - Dodawanie \newline Przykład: 2 + 3 // wynik: 5 \newline \newline - - Odejmowanie \newline Przykład: 5 - 2 // wynik: 3 \newline \newline {\emph{ - Mnożenie \newline Przykład: 2 }} 3 // wynik: 6 \newline \newline / - Dzielenie \newline Przykład: 6 / 2 // wynik: 3 \newline \newline \% - Reszta z dzielenia (modulo) \newline Przykład: 7 \% 3 // wynik: 1 \newline \newline {\bf{ - Potęgowanie \newline Przykład: 2 }} 3 // wynik: 8 \newline \newline ++ - Inkrementacja (zwiększenie o 1) \newline Przykład: let x = 5; x++; // x będzie miało wartość 6 \newline \newline -{}- - Dekrementacja (zmniejszenie o 1) \newline Przykład: let x = 5; x-{}-; // x będzie miało wartość 4} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operatory porównania (relacyjne)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{== - Równy wartości (konwertuje typy) \newline Przykład: 2 == '2' // wynik: true \newline === - Równy wartości i typu (nie konwertuje typów) \newline Przykład: 2 === '2' // wynik: false \newline != - Nie równy wartości (konwertuje typy) \newline Przykład: 2 != '3' // wynik: true \newline !== - Nie równy wartości i typu (nie konwertuje typów) \newline Przykład: 2 !== '3' // wynik: true \newline \textgreater{} - Większy niż \newline Przykład: 5 \textgreater{} 3 // wynik: true \newline \textless{} - Mniejszy niż \newline Przykład: 3 \textless{} 5 // wynik: true \newline \textgreater{}= - Większy lub równy \newline Przykład: 5 \textgreater{}= 5 // wynik: true \newline \textless{}= - Mniejszy lub równy \newline Przykład: 3 \textless{}= 5 // wynik: true \newline \newline Operatory porównania z obiektami (== i ===) porównują referencje obiektów, \newline a nie ich wartości. Dlatego dla dwóch różnych obiektów o identycznym zewnętrznym \newline wyglądzie, operator porównania zwróci false, chyba że obiekt jest bezpośrednio \newline porównywany z samym sobą. \newline \newline let obj1 = \{ value: 5 \}; \newline let obj2 = \{ value: 5 \}; \newline let obj3 = obj1; \newline \newline console.log(obj1 == obj2); // false \newline console.log(obj1 === obj2); // false \newline console.log(obj1 === obj3); // true} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operatory logiczne}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{\&\& - Operator logiczny "i" (AND) \newline Zwraca true, jeśli oba wyrażenia są prawdziwe, w przeciwnym razie zwraca false. \newline Przykład: true \&\& false // wynik: false \newline \newline || - Operator logiczny "lub" (OR) \newline Zwraca true, jeśli przynajmniej jedno z wyrażeń jest prawdziwe, w przeciwnym razie \newline zwraca false. \newline Przykład: true || false // wynik: true \newline \newline ! - Operator logiczny "nie" (NOT) \newline Zwraca wartość przeciwną do wartości wyrażenia, czyli true zamienia na false \newline i vice versa. \newline Przykład: !true // wynik: false \newline \newline Operatory logiczne \&\& i || wykorzystują "short-circuit evaluation" (ocenianie \newline krótkiego obwodu). Oznacza to, że jeśli wynik można określić na podstawie \newline pierwszego wyrażenia, drugie wyrażenie nie jest oceniane. \newline let a = 5; \newline let b = 10; \newline \newline if (a \textgreater{} 0 \&\& b \textgreater{} 0) \{ \newline console.log("Oba warunki są spełnione"); \newline \} else \{ \newline console.log("Co najmniej jeden warunek nie jest spełniony"); \newline \} \newline \newline W tym przypadku, jeśli a i b są większe od zera, to oba warunki są spełnione i \newline zostanie wyświetlony odpowiedni komunikat. Jeśli przynajmniej jeden z warunków \newline nie jest spełniony, zostanie wyświetlony inny komunikat.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Operatory bitowe}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{\& - Operator bitowy AND \newline Wykonuje operację logicznego AND bit po bicie na dwóch operandach. \newline Przykład: 5 \& 3 // wynik: 1 (binarnie: 0101 \& 0011 = 0001) \newline \newline | - Operator bitowy OR \newline Wykonuje operację logicznego OR bit po bicie na dwóch operandach. \newline Przykład: 5 | 3 // wynik: 7 (binarnie: 0101 | 0011 = 0111) \newline \newline \textasciicircum{} - Operator bitowy XOR (exclusive OR) \newline Wykonuje operację logicznego XOR bit po bicie na dwóch operandach. \newline Przykład: 5 \textasciicircum{} 3 // wynik: 6 (binarnie: 0101 \textasciicircum{} 0011 = 0110) \newline \newline \textasciitilde{} - Operator bitowy NOT (negacja) \newline Wykonuje negację bitową na jednym operancie. Odwraca bity. \newline Przykład: \textasciitilde{}5 // wynik: -6 (binarnie: \textasciitilde{}0101 = 1010) \newline \newline \textless{}\textless{} - Operator bitowy przesunięcia w lewo \newline Przesuwa bity w lewo o określoną ilość pozycji. \newline Przykład: 5 \textless{}\textless{} 2 // wynik: 20 (binarnie: 0101 \textless{}\textless{} 2 = 10100) \newline \newline \textgreater{}\textgreater{} - Operator bitowy przesunięcia w prawo ze znakiem \newline Przesuwa bity w prawo o określoną ilość pozycji, zachowując znak liczby. \newline Przykład: 5 \textgreater{}\textgreater{} 1 // wynik: 2 (binarnie: 0101 \textgreater{}\textgreater{} 1 = 0010) \newline \newline \textgreater{}\textgreater{}\textgreater{} - Operator bitowy przesunięcia w prawo bez znaku \newline Przesuwa bity w prawo o określoną ilość pozycji, wypełniając zerami z lewej strony. \newline Przykład: 5 \textgreater{}\textgreater{}\textgreater{} 1 // wynik: 2 (binarnie: 0101 \textgreater{}\textgreater{}\textgreater{} 1 = 0010)} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Inne operatory}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Operator warunkowy (ternarny, trójargumentowy, trójelementowy): \newline Przykład: let result = condition ? value1 : value2; \newline \newline Operator konkatenacji (dla łączenia stringów): \newline Przykład: let fullName = "John" + " " + "Doe"; \newline \newline Operator dostępu do właściwości: \newline Przykład: let length = array.length; \newline \newline Operator przecinka ,: \newline Operator przecinka w JavaScript służy do oddzielenia wielu wyrażeń i wykonywania \newline ich sekwencyjnie. Wykonuje się wyrażenie po lewej stronie przecinka, a następnie \newline wyrażenie po prawej stronie przecinka. Operator przecinka zwraca wartość \newline ostatniego wyrażenia. \newline let a = 1, b = 2, c = 3; \newline console.log(a, b, c); // wynik: 1 2 3 \newline \newline Operator jednoargumentowy (unary): \newline Operator jednoargumentowy działa na jednym argumencie. Przykładami operatorów \newline jednoargumentowych w JavaScript są: \newline \newline + - Konwersja na liczbę dodatnią \newline - - Negacja liczby \newline ++ - Inkrementacja \newline -{}- - Dekrementacja \newline ! - Negacja logiczna (NOT) \newline \newline let a = 5; \newline console.log(-a); // wynik: -5 \newline console.log(++a); // wynik: 6 \newline console.log(!true); // wynik: false} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Pierwszeństwo operatorów}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{W języku JavaScript istnieje hierarchia lub priorytet operatorów, która określa \newline kolejność wykonywania operacji. Poniżej przedstawiam przykładową listę operatorów \newline według priorytetu, od najwyższego do najniższego: \newline \newline Nawiasy: () \newline Operator indeksowania: {[}{]} \newline Operator wywołania funkcji: () \newline Postinkrementacja (++) i postdekrementacja (-{}-) \newline Preinkrementacja (++) i predekrementacja (-{}-) \newline Unarne operatory arytmetyczne: +, - \newline Unarne operatory logiczne: !, typeof, void, delete \newline Potęgowanie: {\bf{ \newline Mnożenie: {\emph{, dzielenie: /, reszta z dzielenia: \% \newline Dodawanie: +, odejmowanie: - \newline Operatory porównania: \textgreater{}, \textless{}, \textgreater{}=, \textless{}=, instanceof, in \newline Operatory równości: ==, !=, ===, !== \newline Operatory logiczne: \&\&, || \newline Operator warunkowy (ternarny): ? : \newline Operator przypisania: =, +=, -=, }}=, /=, \%=, }}=, \textless{}\textless{}=, \textgreater{}\textgreater{}=, \textgreater{}\textgreater{}\textgreater{}=, \&=, |=, \textasciicircum{}= \newline \newline W przypadku wyrażeń z operatorem o tym samym poziomie priorytetu, wykonywane są \newline od lewej do prawej.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Konwersja typów}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{W języku JavaScript istnieją dwa główne rodzaje konwersji typów: niejawna \newline (automatyczna) konwersja typów i jawna (ręczna) konwersja typów. \newline \newline Niejawna (automatyczna) konwersja typów: \newline Niejawna konwersja typów w JavaScript zachodzi automatycznie w pewnych sytuacjach, \newline gdy wartości są używane w kontekście, który oczekuje innych typów danych. Np. przy \newline dodawaniu liczby do stringa, JavaScript automatycznie zamienia liczbę na string i \newline wykonuje konkatenację. \newline Przykład niejawnej konwersji: \newline let a = 5; \newline let b = "10"; \newline \newline let result = a + b; // Wartość result będzie "510", ponieważ liczba 5 zostanie \newline skonwertowana na string i nastąpi konkatenacja. \newline Jawna (ręczna) konwersja typów: \newline Jawna konwersja typów w JavaScript polega na ręcznym zmienianiu typu wartości \newline za pomocą odpowiednich funkcji i operacji. \newline Przykłady jawnej konwersji: \newline Konwersja na liczbę: \newline let a = "5"; \newline let b = Number(a); // jawna konwersja na liczbę \newline \newline console.log(typeof b); // "number"} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Funkcje}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Deklaracja funkcji: \newline Funkcje w JavaScript mogą być deklarowane za pomocą słowa kluczowego function. \newline Przykład deklaracji funkcji: \newline function greet(name) \{ \newline console.log("Hello, " + name + "!"); \newline \} \newline \newline Wyrażenie funkcyjne: \newline Funkcje w JavaScript mogą być przypisywane do zmiennych lub wartości. \newline Przykład wyrażenia funkcyjnego: \newline const greet = function(name) \{ \newline console.log("Hello, " + name + "!"); \newline \}; \newline \newline Wywołanie funkcji: \newline Funkcje są wywoływane poprzez podanie nazwy funkcji i nawiasów () z odpowiednimi \newline argumentami. \newline Przykład wywołania funkcji: \newline greet("John"); // Wywołanie funkcji greet z argumentem "John" \newline \newline Funkcje strzałkowe: \newline Funkcje strzałkowe to skrócona składnia do tworzenia funkcji anonimowych. \newline Przykład funkcji strzałkowej: \newline const greet = (name) =\textgreater{} \{ \newline console.log("Hello, " + name + "!"); \newline \}; \newline \newline Zasięg (scope) zmiennych: \newline Funkcje w JavaScript mają własne zasięgi zmiennych. Zmienne zdefiniowane wewnątrz \newline funkcji są lokalne dla funkcji i nie są dostępne poza nią. Zmienne zdefiniowane poza \newline funkcją są globalne lub mają zasięg zdefiniowany przez blok kodu (w przypadku bloków \newline takich jak if czy for). \newline \newline Wartość zwracana: \newline Funkcje w JavaScript mogą zwracać wartość za pomocą słowa kluczowego return. \newline Zwrócona wartość może być przypisana do zmiennej lub używana bezpośrednio w \newline innym kontekście. \newline Przykład zwracania wartości: \newline function add(a, b) \{ \newline return a + b; \newline \} \newline \newline const sum = add(2, 3); // Przypisanie zwracanej wartości do zmiennej \newline console.log(sum); // Wyświetlenie wartości 5 \newline \newline Metoda call(): \newline Metoda call() pozwala na wywołanie funkcji i przekazanie innego obiektu jako jej \newline kontekstu (this). \newline Przykład użycia metody call(): \newline const person = \{ \newline name: "John", \newline greet: function() \{ \newline console.log("Hello, " + this.name + "!"); \newline \} \newline \}; \newline \newline const anotherPerson = \{ \newline name: "Jane" \newline \}; \newline \newline person.greet.call(anotherPerson); // Wywołanie metody greet z kontekstem anotherPerson \newline \newline Metoda apply(): \newline Metoda apply() działa podobnie do metody call(), ale argumenty są przekazywane \newline jako tablica. \newline Przykład użycia metody apply(): \newline const person = \{ \newline name: "John", \newline greet: function(greeting) \{ \newline console.log(greeting + ", " + this.name + "!"); \newline \} \newline \}; \newline \newline const greetings = {[}"Hello", "Bonjour", "Hola"{]}; \newline \newline person.greet.apply(person, greetings); // Wywołanie metody greet z kontekstem person \newline i przekazanie tablicy greetings jako argumentów \newline \newline Rekurencja: \newline Rekurencja to technika polegająca na wywoływaniu funkcji samej siebie. Jest często \newline używana do rozwiązywania problemów, które można zdefiniować w sposób rekurencyjny. \newline Przykład rekurencji: \newline function countdown(n) \{ \newline if (n === 0) \{ \newline console.log("Lift off!"); \newline \} else \{ \newline console.log(n); \newline countdown(n - 1); \newline \} \newline \} \newline \newline countdown(5); // Wywołanie funkcji countdown z argumentem 5 \newline \newline Funkcje przekazywane jako argument do funkcji (funkcje zwrotne lub funkcje \newline wyższego rzędu) pozwalają na wykonanie pewnych działań wewnątrz funkcji \newline na podstawie logiki zawartej w przekazanej funkcji. \newline \newline Oto przykład, który ilustruje przekazywanie funkcji jako argumentów: \newline \newline function sayHello() \{ \newline console.log("Hello!"); \newline \} \newline \newline function runCallback(callback) \{ \newline console.log("Running callback..."); \newline callback(); // Wywołanie przekazanej funkcji \newline \} \newline \newline runCallback(sayHello); // Przekazanie funkcji sayHello jako argument do funkcji \newline runCallback \newline \newline W powyższym przykładzie funkcja sayHello jest przekazywana jako argument do funkcji \newline runCallback. Gdy funkcja runCallback jest wywoływana, przekazana funkcja sayHello jest \newline wywoływana wewnątrz funkcji runCallback. To umożliwia wykonanie dodatkowych działań \newline wewnątrz runCallback, takich jak logowanie, przed lub po wywołaniu przekazanej funkcji. \newline \newline Funkcje anonimowe w języku JavaScript to funkcje, które nie posiadają nazwy. \newline Są one definiowane bez podawania nazwy funkcji i mogą być przypisywane do \newline zmiennych lub przekazywane jako argumenty do innych funkcji. Funkcje anonimowe \newline są często wykorzystywane w przypadkach, gdy potrzebujemy jednorazowej funkcji lub \newline gdy chcemy przekazać logikę funkcji bez konieczności nadawania jej nazwy. \newline \newline Przypisanie funkcji anonimowej do zmiennej: \newline const sayHello = function() \{ \newline console.log("Hello!"); \newline \}; \newline \newline sayHello(); // Wywołanie funkcji anonimowej \newline \newline Przekazanie funkcji anonimowej jako argumentu: \newline function runCallback(callback) \{ \newline console.log("Running callback..."); \newline callback(); // Wywołanie przekazanej funkcji anonimowej \newline \} \newline \newline runCallback(function() \{ \newline console.log("Hello from anonymous function!"); \newline \}); \newline \newline Wykorzystanie funkcji anonimowej bezpośrednio w wyrażeniu: \newline setTimeout(function() \{ \newline console.log("Delayed message"); \newline \}, 2000);} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Obiekt document}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{getElementById(): \newline const element = \seqsplit{document.getElementById('myElement');} \newline Ta funkcja zwraca element DOM o określonym identyfikatorze. Przykład pokazuje \newline pobranie elementu o identyfikatorze "myElement". \newline \newline getElementsByClassName(): \newline const elements = \seqsplit{document.getElementsByClassName('myClass');} \newline Ta funkcja zwraca kolekcję elementów DOM, które mają określoną klasę. Przykład \newline pokazuje pobranie elementów o klasie "myClass". \newline \newline getElementsByTagName(): \newline const elements = \seqsplit{document.getElementsByTagName('p');} \newline Ta funkcja zwraca kolekcję elementów DOM, które mają określony tag HTML. Przykład \newline pokazuje pobranie wszystkich elementów \textless{}p\textgreater{}. \newline \newline querySelector(): \newline const element = \seqsplit{document.querySelector('\#myElement} .myClass'); \newline Ta funkcja zwraca pierwszy element DOM, który pasuje do podanego selektora CSS. \newline Przykład pokazuje pobranie pierwszego elementu, który ma identyfikator "myElement" i \newline klasę "myClass". \newline \newline querySelectorAll(): \newline const elements = \seqsplit{document.querySelectorAll('.myClass');} \newline Ta funkcja zwraca wszystkie elementy DOM, które pasują do podanego selektora CSS. \newline Przykład pokazuje pobranie wszystkich elementów o klasie "myClass". \newline \newline createElement(): \newline const element = \seqsplit{document.createElement('div');} \newline Ta funkcja tworzy nowy element DOM o podanym tagu HTML. Przykład pokazuje \newline utworzenie nowego elementu \textless{}div\textgreater{}. \newline \newline appendChild(): \newline parentElement.appendChild(newElement); \newline Ta funkcja dodaje nowy element jako dziecko do określonego elementu DOM. \newline Przykład pokazuje dodanie nowego elementu jako dziecka do elementu nadrzędnego. \newline \newline removeChild(): \newline parentElement.removeChild(childElement); \newline Ta funkcja usuwa określony element potomny z danego elementu DOM. \newline Przykład pokazuje usunięcie określonego elementu potomnego z elementu nadrzędnego. \newline \newline prepend(): \newline parentElement.prepend(newElement); \newline Ta funkcja dodaje nowy element jako pierwsze dziecko do określonego elementu DOM. \newline Przykład pokazuje dodanie nowego elementu jako pierwszego dziecka do elementu \newline nadrzędnego. \newline \newline const parentElement = \seqsplit{document.getElementById('myElement');} \newline const newElement = \seqsplit{document.createElement('div');} \newline newElement.textContent = 'Hello, World!'; \newline parentElement.prepend(newElement); \newline \newline createElement(): \newline const element = \seqsplit{document.createElement('div');} \newline Ta funkcja tworzy nowy element DOM o podanym tagu HTML. Można również użyć tej \newline funkcji do tworzenia innych rodzajów elementów, takich jak \textless{}p\textgreater{}, \textless{}span\textgreater{}, \textless{}img\textgreater{}, itp. \newline Przykład pokazuje tworzenie nowego elementu \textless{}div\textgreater{}. \newline \newline const element = \seqsplit{document.createElement('p');} \newline element.textContent = 'Hello, World!'; \newline Funkcja createElement() jest używana w połączeniu z innymi funkcjami, takimi jak \newline appendChild() lub prepend(), aby dodać nowo utworzony element do drzewa DOM.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Manipulowanie elementami html i css}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{setAttribute(): \newline element.setAttribute('attributeName', 'attributeValue'); \newline Ta funkcja ustawia wartość określonego atrybutu na elemencie. Może być używana \newline do ustawienia dowolnego atrybutu, na przykład class, id, src, href itp. \newline \newline style: \newline element.style.property = 'value'; \newline Można użyć właściwości style na elemencie, aby zmieniać jego style CSS. Właściwości \newline style odzwierciedlają style inline dla danego elementu. \newline \newline classList: \newline element.classList.add('className'); \newline element.classList.remove('className'); \newline element.classList.toggle('className'); \newline Właściwość classList umożliwia manipulowanie klasami elementu. Można użyć metod \newline add(), remove() i toggle() do dodawania, usuwania i przełączania klas na elemencie. \newline \newline innerHTML obiektu document służy do odczytywania i modyfikowania zawartości HTML \newline danego elementu. Przechowuje ona kod HTML znajdujący się wewnątrz danego elementu. \newline \newline Przykład użycia innerHTML do odczytania zawartości HTML elementu: \newline const element = \seqsplit{document.getElementById('myElement');} \newline const htmlContent = element.innerHTML; \newline console.log(htmlContent); \newline \newline Przykład użycia innerHTML do modyfikowania zawartości HTML elementu: \newline const element = \seqsplit{document.getElementById('myElement');} \newline element.innerHTML = '\textless{}p\textgreater{}Nowa zawartość\textless{}/p\textgreater{}';} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Własne funkcje konstruujące}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{W JavaScript możemy tworzyć własne funkcje konstruktory, które służą do tworzenia \newline nowych obiektów na podstawie określonego wzorca. Funkcje konstruktory są używane \newline do definiowania "klas" obiektów i tworzenia instancji tych obiektów. \newline \newline Aby zdefiniować własną funkcję konstruktora, stosujemy zasadę CamelCase dla nazwy \newline funkcji (zaczynamy wielką literą) i definiujemy jej ciało. Funkcja konstruktora może \newline zawierać parametry, które są przekazywane przy tworzeniu nowej instancji obiektu. \newline Wewnątrz funkcji konstruktora możemy definiować właściwości obiektu, które będą różne \newline dla każdej instancji, oraz metody, które będą współdzielone przez wszystkie instancje. \newline \newline function Person(name, age) \{ \newline this.name = name; \newline this.age = age; \newline \newline this.greet = function() \{ \newline console.log(`Hello, my name is \$\{this.name\} and I'm \$\{this.age\} years old.`); \newline \}; \newline \} \newline \newline // Tworzenie nowej instancji obiektu za pomocą funkcji konstruktora \newline const person1 = new Person('John', 25); \newline const person2 = new Person('Jane', 30); \newline \newline // Wywoływanie metody na instancjach obiektu \newline person1.greet(); // Hello, my name is John and I'm 25 years old. \newline person2.greet(); // Hello, my name is Jane and I'm 30 years old.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{call apply bind}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{call, apply i bind to metody, które pozwalają na manipulację kontekstem (this) \newline funkcji w JavaScript. Oto ich krótkie wyjaśnienie: \newline \newline - call: Metoda call pozwala na wywołanie funkcji z określonym kontekstem (this) \newline oraz przekazanie argumentów osobno. \newline \newline function sayHello() \{ \newline console.log(`Hello, \$\{this.name\}!`); \newline \} \newline \newline const person = \{ name: 'John' \}; \newline sayHello.call(person); // Wywołanie funkcji sayHello z kontekstem person \newline \newline - apply: Metoda apply działa podobnie do call, ale przekazuje argumenty jako tablicę. \newline \newline function sayHello(greeting) \{ \newline console.log(`\$\{greeting\}, \$\{this.name\}!`); \newline \} \newline \newline const person = \{ name: 'John' \}; \newline sayHello.apply(person, {[}'Hello'{]}); // Wywołanie funkcji sayHello z kontekstem person \newline i argumentem 'Hello' \newline \newline - bind: Metoda bind tworzy nową funkcję, która ma przypisany określony kontekst (this), \newline ale nie jest natychmiast wywoływana. Zamiast tego zwraca funkcję, która może być \newline wywołana później. \newline \newline function sayHello() \{ \newline console.log(`Hello, \$\{this.name\}!`); \newline \} \newline \newline const person = \{ name: 'John' \}; \newline const greetPerson = sayHello.bind(person); // Utworzenie nowej funkcji greetPerson \newline z przypisanym kontekstem person \newline \newline greetPerson(); // Wywołanie funkcji greetPerson \newline \newline Metody call i apply są używane, gdy chcemy natychmiastowo wywołać funkcję z \newline określonym kontekstem i argumentami. Metoda bind jest przydatna, gdy chcemy \newline utworzyć nową funkcję, która będzie miała przypisany kontekst i będzie mogła być \newline wywołana w przyszłości. \newline \newline Te trzy metody są często używane do manipulacji kontekstem (this) w JavaScript i \newline pozwalają na większą elastyczność w programowaniu.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Object}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Właściwości obiektu: \newline - \seqsplit{Object.prototype.constructor:} Zwraca referencję do funkcji konstruktora, \newline która została użyta do utworzenia obiektu. \newline - \seqsplit{Object.prototype.hasOwnProperty():} Sprawdza, czy dany obiekt posiada \newline własność o podanej nazwie. \newline - \seqsplit{Object.prototype.propertyIsEnumerable():} Sprawdza, czy dana własność \newline obiektu jest wyliczalna. \newline \newline Funkcje obiektu: \newline - Object.assign(): Kopiuje wartości wszystkich wyliczalnych własności z jednego \newline lub więcej obiektów źródłowych do obiektu docelowego. \newline - Object.keys(): Zwraca tablicę zawierającą nazwy wszystkich wyliczalnych \newline własności obiektu. \newline - Object.values(): Zwraca tablicę zawierającą wartości wszystkich wyliczalnych \newline własności obiektu. \newline - Object.entries(): Zwraca tablicę zawierającą tablice {[}klucz, wartość{]} dla \newline wszystkich wyliczalnych własności obiektu. \newline - Object.freeze(): Zamraża obiekt, uniemożliwiając zmianę jego własności. \newline - Object.seal(): Zapieczętowuje obiekt, uniemożliwiając dodawanie i usuwanie \newline własności, ale umożliwiając modyfikację istniejących własności. \newline - Object.create(): Tworzy nowy obiekt z określonym prototypem i opcjonalnymi \newline własnościami. \newline \newline Metody prototypu obiektu: \newline - toString(): Zwraca ciąg znaków reprezentujący obiekt. \newline - hasOwnProperty(): Sprawdza, czy obiekt ma daną własność jako własną, \newline a nie odziedziczoną. \newline - valueOf(): Zwraca wartość pierwotną obiektu. \newline \newline Poniżej znajduje się przykład użycia niektórych z tych właściwości i funkcji: \newline \newline const obj = \{ name: 'John', age: 30 \}; \newline \newline console.log(Object.keys(obj)); // Output: {[}'name', 'age'{]} \newline console.log(Object.values(obj)); // Output: {[}'John', 30{]} \newline console.log(Object.entries(obj)); // Output: {[}{[}'name', 'John'{]}, {[}'age', 30{]}{]} \newline \newline const newObj = Object.assign(\{\}, obj); \newline console.log(newObj); // Output: \{ name: 'John', age: 30 \} \newline \newline const sealedObj = Object.seal(obj); \newline sealedObj.name = 'Jane'; \newline delete sealedObj.age; \newline console.log(sealedObj); // Output: \{ name: 'Jane', age: 30 \} \newline \newline const frozenObj = Object.freeze(obj); \newline frozenObj.name = 'Jane'; \newline console.log(frozenObj); // Output: \{ name: 'John', age: 30 \} \newline \newline console.log(obj.hasOwnProperty('name')); // Output: true \newline console.log(obj.hasOwnProperty('toString')); // Output: false \newline \newline Gettery i settery to specjalne metody używane w języku JavaScript do kontroli \newline dostępu do właściwości obiektów. Pozwalają na bardziej elastyczne zarządzanie \newline właściwościami obiektu i umożliwiają wykonanie dodatkowej logiki podczas \newline odczytu i zapisu wartości. \newline \newline Getter jest metodą, która zwraca wartość właściwości obiektu. Jest definiowany \newline za pomocą słowa kluczowego get i nazwy właściwości. Kiedy odwołujemy się do \newline tej właściwości, getter jest automatycznie wywoływany i zwraca oczekiwany wynik. \newline \newline Setter jest metodą, która ustawia wartość właściwości obiektu. Jest definiowany \newline za pomocą słowa kluczowego set i nazwy właściwości. Kiedy przypisujemy wartość \newline do tej właściwości, setter jest automatycznie wywoływany, co pozwala na wykonanie \newline określonych operacji lub walidację przed zapisaniem wartości. \newline \newline Oto przykład użycia gettera i settera: \newline \newline const person = \{ \newline firstName: '', \newline lastName: '', \newline \newline get fullName() \{ \newline return this.firstName + ' ' + this.lastName; \newline \}, \newline \newline set fullName(name) \{ \newline const {[}firstName, lastName{]} = name.split(' '); \newline this.firstName = firstName; \newline this.lastName = lastName; \newline \} \newline \}; \newline \newline person.fullName = 'John Doe'; // Wywołanie settera \newline console.log(person.firstName); // Wyświetli "John" \newline console.log(person.lastName); // Wyświetli "Doe" \newline console.log(person.fullName); // Wyświetli "John Doe", getter automatycznie wywołany \newline \newline Object.defineProperty() jest metodą wbudowaną w JavaScript, która służy do \newline definiowania nowej właściwości na obiekcie lub modyfikowania istniejącej właściwości \newline na obiekcie. Metoda ta umożliwia dokładne kontrolowanie konfiguracji właściwości, \newline takich jak możliwość zapisu (writable), możliwość konfiguracji (configurable), możliwość \newline wyliczania (enumerable) itd. \newline \newline Przykład użycia Object.defineProperty(): \newline \newline const obj = \{\}; \newline \newline // Definiowanie nowej właściwości "name" na obiekcie \newline Object.defineProperty(obj, 'name', \{ \newline value: 'John', \newline writable: false, // Wartość nie może być zmieniana \newline enumerable: true, // Właściwość jest wyliczalna \newline configurable: true // Właściwość może być modyfikowana lub usunięta \newline \}); \newline \newline console.log(obj.name); // John \newline obj.name = 'Jane'; // Nie spowoduje zmiany, ponieważ writable jest ustawione na false \newline console.log(obj.name); // John \newline \newline // Modyfikowanie istniejącej właściwości \newline Object.defineProperty(obj, 'name', \{ \newline value: 'Jane' // Zmiana wartości \newline \}); \newline \newline console.log(obj.name); // Jane} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Enumeracja}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Enumeracja obiektu w języku JavaScript polega na przejściu przez wszystkie \newline jego właściwości. Istnieją różne metody umożliwiające iterację po właściwościach \newline obiektu i wykonanie określonych operacji dla każdej z nich. \newline \newline Najpopularniejszymi metodami iteracji po właściwościach obiektu są: \newline \newline Pętla for...in: Pętla for...in iteruje po wszystkich wyliczalnych właściwościach obiektu \newline (w tym również w łaściwościach dziedziczonych). Dla każdej właściwości można \newline wykonać określone operacje. \newline const obj = \{ a: 1, b: 2, c: 3 \}; \newline \newline for (const prop in obj) \{ \newline console.log(prop + ': ' + obj{[}prop{]}); \newline \} \newline \newline // Wynik: \newline // a: 1 \newline // b: 2 \newline // c: 3 \newline \newline Metoda Object.keys(): Metoda Object.keys() zwraca tablicę zawierającą wszystkie \newline własne właściwości wyliczalne obiektu. Można na niej iterować za pomocą pętli for...of. \newline const obj = \{ a: 1, b: 2, c: 3 \}; \newline \newline for (const prop of Object.keys(obj)) \{ \newline console.log(prop + ': ' + obj{[}prop{]}); \newline \} \newline \newline // Wynik: \newline // a: 1 \newline // b: 2 \newline // c: 3 \newline \newline Metoda Object.entries(): Metoda Object.entries() zwraca tablicę zawierającą \newline tablice {[}klucz, wartość{]} dla każdej wyliczalnej własnej właściwości obiektu. Można \newline na niej iterować za pomocą pętli for...of. \newline const obj = \{ a: 1, b: 2, c: 3 \}; \newline \newline for (const {[}key, value{]} of Object.entries(obj)) \{ \newline console.log(key + ': ' + value); \newline \} \newline \newline // Wynik: \newline // a: 1 \newline // b: 2 \newline // c: 3 \newline \newline \newline Te metody iteracji pozwalają na dostęp do właściwości obiektu i wykonanie operacji \newline na nich. Warto zauważyć, że kolejność iteracji nie jest gwarantowana, więc nie należy \newline polegać na porządku, w jakim właściwości są zwracane.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Proxy API}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Proxy API to funkcjonalność dostępna w języku JavaScript, która umożliwia \newline przechwytywanie i dostosowywanie zachowań podstawowych operacji na obiektach. \newline API to dostarcza możliwość tworzenia proxy (osłonki) wokół istniejących obiektów i \newline definiowania niestandardowych operacji, które mają być wykonywane przy różnych \newline interakcjach z tymi obiektami. \newline \newline Oto kilka cech i przykładów użycia Proxy API: \newline \newline - Przechwytywanie dostępu do właściwości: \newline Proxy pozwala przechwycić próby odczytu (get) i zapisu (set) właściwości obiektu \newline oraz reagować na nie. Przykład: \newline const obj = \{ \newline name: "John", \newline age: 30 \newline \}; \newline \newline const proxy = new Proxy(obj, \{ \newline get(target, property) \{ \newline console.log(`Odczytano wartość właściwości "\$\{property\}"`); \newline return target{[}property{]}; \newline \}, \newline \newline set(target, property, value) \{ \newline console.log(`Ustawiono wartość właściwości "\$\{property\}" na "\$\{value\}"`); \newline target{[}property{]} = value; \newline \} \newline \}); \newline \newline console.log(proxy.name); // Odczytano wartość właściwości "name", wynik: "John" \newline proxy.age = 40; // Ustawiono wartość właściwości "age" na "40" \newline \newline - Przechwytywanie wywołań metod: \newline Proxy pozwala przechwycić wywołania metod na obiekcie i dostosować ich zachowanie. \newline Przykład: \newline const obj = \{ \newline greet(name) \{ \newline console.log(`Witaj, \$\{name\}!`); \newline \} \newline \}; \newline \newline const proxy = new Proxy(obj, \{ \newline apply(target, thisArg, argumentsList) \{ \newline console.log(`Wywołano metodę "\$\{argumentsList{[}0{]}\}"`); \newline return target.apply(thisArg, argumentsList); \newline \} \newline \}); \newline \newline proxy.greet("John"); // Wywołano metodę "greet", wynik: "Witaj, John!" \newline \newline - Inne operacje i przechwytywanie zdarzeń: \newline Proxy umożliwia przechwytywanie innych operacji, takich jak sprawdzanie istnienia \newline właściwości (has), iteracja (enumerate), usuwanie właściwości (deleteProperty) itp. \newline Można również przechwycić zdarzenia dotyczące proxy za pomocą specjalnych metod, \newline takich jak getPrototypeOf, setPrototypeOf, isExtensible, preventExtensions, getOwnPropertyDescriptor, defineProperty, ownKeys itp. \newline \newline Proxy API dostarcza potężny mechanizm do tworzenia niestandardowych zachowań dla \newline obiektów w języku JavaScript. Można go wykorzystać do wprowadzania walidacji, filtrowania, \newline zabezpieczeń, śledzenia zmian i wielu innych operacji na obiektach.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Reflect API}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Reflect API to zestaw metod i funkcji, które dostarczają interfejsu programistycznego do operacji na obiektach w języku JavaScript. API to umożliwia wykonywanie różnych operacji na obiektach, takich jak tworzenie, modyfikacja, usuwanie właściwości, wywoływanie funkcji itp. \newline % Row Count 6 (+ 6) Oto kilka cech i przykładów użycia Reflect API: \newline % Row Count 8 (+ 2) 1. Metody do tworzenia i manipulowania obiektami: \newline % Row Count 9 (+ 1) - \seqsplit{`Reflect.construct(target}, argumentsList)`: Tworzy nowy obiekt na podstawie danego konstruktora i argumentów. \newline % Row Count 12 (+ 3) - \seqsplit{`Reflect.getPrototypeOf(object)`:} Zwraca prototyp danego obiektu. \newline % Row Count 14 (+ 2) - \seqsplit{`Reflect.setPrototypeOf(object}, prototype)`: Ustawia nowy prototyp dla danego obiektu. \newline % Row Count 16 (+ 2) 2. Metody do manipulacji właściwościami obiektów: \newline % Row Count 18 (+ 2) - `Reflect.get(object, propertyKey)`: Zwraca wartość właściwości danego obiektu. \newline % Row Count 20 (+ 2) - `Reflect.set(object, propertyKey, value)`: Ustawia wartość właściwości danego obiektu. \newline % Row Count 22 (+ 2) - `Reflect.has(object, propertyKey)`: Sprawdza, czy dany obiekt zawiera właściwość o podanym kluczu. \newline % Row Count 25 (+ 3) - \seqsplit{`Reflect.deleteProperty(object}, propertyKey)`: Usuwa właściwość z danego obiektu. \newline % Row Count 27 (+ 2) 3. Metody do wywoływania funkcji: \newline % Row Count 28 (+ 1) - `Reflect.apply(target, thisArgument, argumentsList)`: Wywołuje daną funkcję z podanym kontekstem (`this`) i listą argumentów. \newline % Row Count 31 (+ 3) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Reflect API (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{ - \seqsplit{`Reflect.construct(target}, argumentsList, newTarget)`: Wywołuje konstruktor z podanymi argumentami i opcjonalnie nowym obiektem docelowym. \newline % Row Count 3 (+ 3) 4. Obsługa zdarzeń: \newline % Row Count 4 (+ 1) - `Reflect.get(target, propertyKey, receiver)`: Obsługuje pobieranie wartości właściwości, umożliwiając działanie na pośredniku (`receiver`). \newline % Row Count 8 (+ 4) - `Reflect.set(target, propertyKey, value, receiver)`: Obsługuje ustawianie wartości właściwości, umożliwiając działanie na pośredniku (`receiver`). \newline % Row Count 12 (+ 4) Reflect API dostarcza bardziej jednolitej i przejrzystej składni do operacji na obiektach w porównaniu do tradycyjnych operacji, takich jak `obj.property` lub `obj{[}"property"{]}`. Zapewnia również większą elastyczność i kontrolę nad operacjami na obiektach, umożliwiając manipulację właściwościami, wywoływanie funkcji i zarządzanie prototypami.% Row Count 20 (+ 8) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Generatory}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Generatory w języku JavaScript to specjalny rodzaj funkcji, które pozwalają na \newline wznawialne wykonywanie się kodu. Generator jest tworzony przy użyciu słowa kluczowego \newline function, ale zamiast zwykłego return, używa się instrukcji yield, która zwraca wartość, \newline ale nie kończy działania funkcji. \newline \newline Oto kilka cech generatorów: \newline \newline Wznawialne wykonanie: Główną cechą generatorów jest możliwość wznawialnego \newline wykonania kodu. Po wywołaniu generatora, nie jest on uruchamiany od początku do końca, \newline ale zatrzymuje się na każdej instrukcji yield, zwracając wartość i zapamiętując swój stan. \newline Kolejne wywołanie generatora wznawia jego wykonanie od momentu, w którym został \newline zatrzymany. \newline \newline Wydajne zarządzanie pamięcią: Generatory pozwalają na leniwe generowanie wartości, \newline co oznacza, że nie muszą generować wszystkich wartości od razu. Mogą generować \newline wartości na żądanie, co jest szczególnie przydatne w przypadku generowania dużych kolekcji danych. \newline \newline Iterator: Generatory są jednocześnie iteratorami. Implementują protokół iteratora, co \newline oznacza, że można ich używać w pętlach for...of lub wykorzystywać do iteracji po danych. \newline \newline Potokowe przetwarzanie danych: Generatory mogą być łączone w tzw. potoki, co \newline umożliwia przetwarzanie danych w sposób sekwencyjny. Wynik jednego generatora \newline może być przekazywany do innego generatora, co pozwala na składanie różnych \newline operacji na danych. \newline \newline Przykład użycia generatora: \newline \newline function* generateNumbers() \{ \newline let number = 1; \newline while (true) \{ \newline yield number; \newline number++; \newline \} \newline \} \newline \newline const numberGenerator = generateNumbers(); \newline \newline console.log(numberGenerator.next().value); // 1 \newline console.log(numberGenerator.next().value); // 2 \newline console.log(numberGenerator.next().value); // 3 \newline \newline W powyższym przykładzie mamy generator generateNumbers, który generuje kolejne \newline liczby naturalne. Po każdym wywołaniu numberGenerator.next(), otrzymujemy obiekt z \newline wartością generowaną przez generator. Dzięki temu możemy generować kolejne liczby w \newline nieskończoność, zatrzymując się i wznawiając wykonanie generatora w dowolnym \newline momencie. \newline \newline Generatory są użytecznym narzędziem do manipulacji danymi i zarządzania ich \newline przepływem. Pozwalają na bardziej elastyczną kontrolę nad generowaniem i \newline przetwarzaniem danych w języku JavaScript.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Moduły}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Moduły w języku JavaScript są mechanizmem, który umożliwia podział kodu na \newline mniejsze, samodzielne jednostki. Pozwala to na lepszą organizację i zarządzanie \newline kodem, a także ułatwia jego ponowne wykorzystanie. \newline \newline W JavaScript istnieją różne metody implementacji modułów, takie jak moduły CommonJS, \newline moduły AMD (Asynchronous Module Definition) i moduły ES6 (ECMAScript 6). \newline Moduły ES6 są wbudowanym mechanizmem języka od wersji ES6, który zapewnia \newline prostą i wydajną składnię do definiowania i eksportowania modułów. \newline \newline Główne cechy modułów ES6 to: \newline \newline Deklaracja modułu: Moduł jest tworzony poprzez utworzenie pliku z rozszerzeniem \newline ".js", który zawiera kod JavaScript. Moduł jest oddzielną jednostką, która posiada swoje \newline własne zakresy i niezależność od innych modułów. \newline \newline Eksportowanie danych: Eksportowanie danych z modułu odbywa się za pomocą \newline słowa kluczowego export. Możemy eksportować funkcje, zmienne, stałe, klasy i wiele innych. \newline Przykład eksportu funkcji: \newline export function sayHello() \{ \newline console.log('Hello!'); \newline \} \newline Importowanie danych: Importowanie danych z innego modułu odbywa się za pomocą \newline słowa kluczowego import. Importujemy określone elementy z modułu i przypisujemy je do \newline zmiennych. \newline Przykład importu funkcji: \newline import \{ sayHello \} from './module.js'; \newline sayHello(); // Wywołanie funkcji z innego modułu \newline Domyślne eksportowanie: Możemy także domyślnie eksportować jedno element z \newline modułu. Może to być funkcja, klasa lub inny obiekt. \newline Przykład domyślnego eksportu klasy: \newline export default class MyClass \{ \newline constructor() \{ \newline // Konstruktor klasy \newline \} \newline \} \newline \newline Moduły w JavaScript umożliwiają tworzenie modularnej struktury kodu, gdzie poszczególne \newline części aplikacji są łatwo odizolowane i mogą być używane i modyfikowane niezależnie od siebie. \newline Jest to przydatne w większych projektach, które wymagają modularności i skalowalności.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{isin}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Jeśli chodzi o sprawdzenie, czy określona wartość jest obecna w danym tekście, \newline obiekcie lub innym zbiorze danych, istnieje kilka sposobów: \newline \newline - Metoda includes(): Metoda includes() jest dostępna dla typów danych takich jak ciągi \newline znaków (stringi) i tablice. Służy do sprawdzenia, czy dana wartość jest zawarta w danym \newline ciągu znaków lub tablicy. Zwraca wartość logiczną true lub false. \newline Przykład (użycie na stringu): \newline const text = "Lorem ipsum dolor sit amet"; \newline console.log(text.includes("ipsum")); // true \newline console.log(text.includes("foo")); // false \newline \newline - Operator in: Operator in jest używany do sprawdzenia, czy dany klucz istnieje w \newline obiekcie. Może być stosowany na obiektach i tablicach. Zwraca wartość logiczną true \newline lub false. \newline Przykład (użycie na obiekcie): \newline const person = \{ name: "John", age: 30 \}; \newline console.log("name" in person); // true \newline console.log("address" in person); // false \newline \newline - Metoda indexOf(): Metoda indexOf() jest dostępna dla ciągów znaków (stringów) i \newline tablic. Służy do znalezienia indeksu pierwszego wystąpienia danej wartości w ciągu \newline znaków lub tablicy. Jeśli wartość nie jest znaleziona, zwraca -1. \newline Przykład (użycie na stringu): \newline const text = "Lorem ipsum dolor sit amet"; \newline console.log(text.indexOf("dolor")); // 12 \newline console.log(text.indexOf("foo")); // -1 \newline \newline - Metoda hasOwnProperty(): Metoda hasOwnProperty() jest dostępna dla obiektów. \newline Służy do sprawdzenia, czy obiekt posiada określony klucz jako własność. Zwraca wartość \newline logiczną true lub false. \newline Przykład (użycie na obiekcie): \newline const person = \{ name: "John", age: 30 \}; \newline console.log(person.hasOwnProperty("name")); // true \newline console.log(person.hasOwnProperty("address")); // false \newline \newline - Metoda match(): Metoda match() jest dostępna dla ciągów znaków (stringów) i służy do znalezienia dopasowań do określonego wzorca za pomocą wyrażenia regularnego. \newline Jeśli dopasowanie jest znalezione, zwraca tablicę dopasowanych wartości; w przeciwnym \newline razie zwraca null. \newline Przykład (użycie na stringu): \newline const text = "Lorem ipsum dolor sit amet"; \newline console.log(text.match(/ipsum/)); // {[}"ipsum"{]} \newline console.log(text.match(/foo/)); // null \newline \newline - Metoda find(): Metoda find() jest dostępna dla tablic i służy do znalezienia pierwszego \newline elementu, który spełnia określony warunek w funkcji zwrotnej. Zwraca wartość znalezionego elementu lub undefined, jeśli nie znaleziono pasującego elementu. \newline Przykład (użycie na tablicy): \newline const numbers = {[}1, 2, 3, 4, 5{]}; \newline const found = numbers.find(num =\textgreater{} num \textgreater{} 3); \newline console.log(found); // 4 \newline \newline - Operator some() (dla tablic): Operator some() działa na tablicach i sprawdza, czy \newline przynajmniej jeden element w tablicy spełnia określony warunek w funkcji zwrotnej. \newline Zwraca wartość logiczną true lub false. \newline Przykład (użycie na tablicy): \newline const numbers = {[}1, 2, 3, 4, 5{]}; \newline const hasEvenNumber = numbers.some(num =\textgreater{} num \% 2 === 0); \newline console.log(hasEvenNumber); // true} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Symbol}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Symbol jest jednym z typów danych w języku JavaScript, wprowadzonym w \newline ECMAScript 2015 (ES6). Jest to wartość unikalna i niezmienna, która może być używana \newline jako klucz identyfikujący właściwości obiektów. Symbole są przydatne w kontekście \newline tworzenia i zarządzania własnymi właściwościami obiektów, które są ukryte i niekolidują \newline z innymi właściwościami. \newline \newline Oto kilka cech i zastosowań symboli: \newline \newline Unikalność: Każdy symbol jest unikalny i różni się od innych symboli. Nawet jeśli dwa \newline symbole mają taką samą nazwę, są one od siebie różne. \newline \newline Prywatność: Symbole są przydatne do tworzenia ukrytych lub prywatnych właściwości \newline obiektów. Można je wykorzystać do dodania własności do obiektu, które nie będą \newline konfliktować z innymi właściwościami i nie będą przypadkowo nadpisywane. \newline \newline Użycie jako klucze: Symbole mogą być używane jako klucze w obiektach. \newline Dzięki temu można tworzyć niestandardowe właściwości, które nie zostaną \newline przypadkowo nadpisane lub skonfliktowane z innymi właściwościami. \newline Oto przykładowe użycie symboli: \newline \newline // Tworzenie symbolu \newline const symbol = Symbol(); \newline \newline // Używanie symbolu jako klucza \newline const obj = \{ \newline {[}symbol{]}: 'Wartość symbolu' \newline \}; \newline \newline // Dostęp do wartości za pomocą symbolu \newline console.log(obj{[}symbol{]}); // Wyświetli: 'Wartość symbolu' \newline \newline // Porównywanie symboli \newline const symbol1 = Symbol('Symbol'); \newline const symbol2 = Symbol('Symbol'); \newline console.log(symbol1 === symbol2); // false \newline console.log(symbol1 == symbol2); // false \newline \newline Symbole są przydatne w przypadkach, gdy potrzebujemy dodatkowej warstwy \newline prywatności, unikalnych identyfikatorów lub niestandardowych właściwości obiektów. \newline \newline let obj = \{ \newline a: 10 \newline \}; \newline \newline obj{[}symbol1{]} = 1000; \newline \newline console.log(obj{[}symbol1{]}); // 1000 \newline \newline for (const v in obj) console.log(v); // a \newline \newline console.log( \seqsplit{Object.getOwnPropertySymbols(obj)} );} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Promise}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Obiekt Promise w języku JavaScript jest używany do obsługi asynchronicznych \newline operacji i zarządzania ich wynikami. Promise reprezentuje wartość, która może być \newline dostępna teraz, w przyszłości lub nigdy. Jest to sposób eleganckiego rozwiązania \newline problemów związanych z asynchronicznością, takich jak pobieranie danych z serwera, wykonywanie żądań sieciowych czy operacje na plikach. \newline \newline Główne cechy Promise: \newline \newline Stan: Promise może znajdować się w jednym z trzech stanów: \newline - Pending (oczekujący): Początkowy stan, w którym Promise oczekuje na wykonanie. \newline - Fulfilled (zrealizowany): Stan, w którym Promise został z powodzeniem zakończony i \newline zwraca wartość. \newline - Rejected (odrzucony): Stan, w którym Promise zakończył się niepowodzeniem i \newline zwraca błąd. \newline \newline Metody: Promise udostępnia kilka przydatnych metod do obsługi asynchroniczności: \newline - then(): Wykonuje się, gdy Promise zostanie zrealizowany, i obsługuje wynik sukcesu. \newline - catch(): Wykonuje się, gdy Promise zostanie odrzucony, i obsługuje błąd. \newline - finally(): Wykonuje się bez względu na wynik Promise, zarówno po zrealizowaniu, \newline jak i odrzuceniu. \newline - Promise.all(): Pozwala na równoczesne wykonywanie wielu Promise i czeka na \newline ich zakończenie. \newline - Promise.race(): Czeka na zakończenie dowolnego z podanych Promise. \newline \newline Przykład użycia Promise: \newline \newline const fetchData = () =\textgreater{} \{ \newline return new Promise((resolve, reject) =\textgreater{} \{ \newline setTimeout(() =\textgreater{} \{ \newline const data = 'Przykładowe dane'; \newline // Symulacja sukcesu \newline resolve(data); \newline // Symulacja błędu \newline // reject(new Error('Wystąpił błąd')); \newline \}, 2000); \newline \}); \newline \}; \newline \newline fetchData() \newline .then((data) =\textgreater{} \{ \newline console.log('Pomyślnie pobrane dane:', data); \newline \}) \newline .catch((error) =\textgreater{} \{ \newline \seqsplit{console.error('Wystąpił} błąd:', error); \newline \}) \newline .finally(() =\textgreater{} \{ \newline console.log('Operacja zakończona'); \newline \}); \newline \newline W tym przykładzie tworzymy funkcję fetchData, która zwraca Promise. Wewnątrz \newline Promise symulujemy opóźnienie za pomocą funkcji setTimeout. W zależności od \newline rezultatu symulujemy sukces lub błąd, używając funkcji resolve i reject. \newline \newline Następnie używamy metody then() do obsługi wyniku sukcesu i metody catch() do \newline obsługi błędu. Metoda finally() jest wywoływana bez względu na wynik Promise. \newline \newline Dzięki obiektowi Promise możemy w łatwy sposób zarządzać asynchronicznymi \newline operacjami, a także w ładny sposób obsługi.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Destrukturyzacja}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Destrukturyzacja (destrukcyjne przypisanie) to składnia w JavaScript, która umożliwia \newline wygodne i eleganckie wyciąganie wartości z obiektów i tablic oraz przypisywanie ich do \newline zmiennych. Dzięki destrukturyzacji można łatwo dostępować do właściwości obiektów lub elementów tablicy bez konieczności odwoływania się do nich za pomocą tradycyjnych notacji. \newline \newline Destrukturyzacja obiektów: \newline \newline const person = \{ name: 'John', age: 30 \}; \newline \newline // Wyciąganie wartości z obiektu do zmiennych \newline const \{ name, age \} = person; \newline console.log(name); // 'John' \newline console.log(age); // 30 \newline \newline Destrukturyzacja tablic: \newline \newline const numbers = {[}1, 2, 3, 4, 5{]}; \newline \newline // Wyciąganie wartości z tablicy do zmiennych \newline const {[}first, second, ...rest{]} = numbers; \newline console.log(first); // 1 \newline console.log(second); // 2 \newline console.log(rest); // {[}3, 4, 5{]} \newline \newline Destrukturyzacja może być również stosowana w bardziej złożonych przypadkach, \newline takich jak destrukturyzacja zagnieżdżonych obiektów lub tablic, przypisywanie \newline domyślnych wartości, ignorowanie niektórych elementów itp. \newline \newline Przykład destrukturyzacji zagnieżdżonych obiektów: \newline \newline const person = \{ name: 'John', age: 30, address: \{ city: 'New York', country: 'USA' \} \}; \newline \newline // Wyciąganie zagnieżdżonych wartości \newline const \{ name, address: \{ city \} \} = person; \newline console.log(name); // 'John' \newline console.log(city); // 'New York' \newline \newline Przykład destrukturyzacji z domyślnymi wartościami: \newline \newline const person = \{ name: 'John' \}; \newline \newline // Przypisanie domyślnych wartości, jeśli nie ma odpowiedniego klucza w obiekcie \newline const \{ name, age = 30 \} = person; \newline console.log(name); // 'John' \newline console.log(age); // 30 \newline Destrukturyzacja jest bardzo przydatnym narzędziem w JavaScript, które pozwala \newline na bardziej ekspresywny i zwięzły kod, szczególnie przy manipulacji obiektami i tablicami.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 6 (ES6)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{- Zmienne let i const: \newline let x = 5; \newline const PI = 3.14; \newline \newline - Bloki z zakresem (block scope): \newline if (true) \{ \newline let x = 10; \newline console.log(x); // 10 \newline \} \newline console.log(x); // Error: x is not defined \newline \newline - Szablony łańcuchowe (Template literals): \newline const name = 'John'; \newline const message = `Hello, \$\{name\}!`; \newline console.log(message); // Hello, John! \newline \newline - Funkcje strzałkowe (Arrow functions): \newline const add = (a, b) =\textgreater{} a + b; \newline console.log(add(2, 3)); // 5 \newline \newline - Parametry domyślne: \newline function greet(name = 'Guest') \{ \newline console.log(`Hello, \$\{name\}!`); \newline \} \newline greet(); // Hello, Guest! \newline greet('John'); // Hello, John! \newline \newline - Domyślne wartości obiektów: \newline function getUserInfo(\{ name = 'Anonymous', age = 0 \} = \{\}) \{ \newline console.log(`Name: \$\{name\}, Age: \$\{age\}`); \newline \} \newline getUserInfo(); // Name: Anonymous, Age: 0 \newline getUserInfo(\{ name: 'John', age: 25 \}); // Name: John, Age: 25 \newline \newline - Destrukturyzacja (Destructuring): \newline const person = \{ \newline name: 'John', \newline age: 30, \newline country: 'USA' \newline \}; \newline const \{ name, age \} = person; \newline console.log(name); // John \newline console.log(age); // 30 \newline \newline - Moduły (Modules): \newline // file1.js \newline export const PI = 3.14; \newline export function multiply(a, b) \{ \newline return a * b; \newline \} \newline \newline // file2.js \newline import \{ PI, multiply \} from './file1.js'; \newline console.log(PI); // 3.14 \newline console.log(multiply(2, 3)); // 6 \newline \newline - Klasy (Classes): \newline class Person \{ \newline constructor(name) \{ \newline this.name = name; \newline \} \newline \newline sayHello() \{ \newline console.log(`Hello, \$\{this.name\}!`); \newline \} \newline \} \newline \newline const person = new Person('John'); \newline person.sayHello(); // Hello, John! \newline \newline - Rest parameters: umożliwia przekazywanie dowolnej liczby argumentów do funkcji \newline w postaci tablicy. Pozwala to na bardziej elastyczne i dynamiczne definiowanie funkcji. \newline \newline function sum(...numbers) \{ \newline return numbers.reduce((acc, num) =\textgreater{} acc + num, 0); \newline \} \newline console.log(sum(1, 2, 3)); // 6 \newline \newline Kiedy funkcja zostanie wywołana, wszystkie przekazane argumenty zostaną zebrane \newline w tablicę i przypisane do parametru parametry. Ta tablica może mieć dowolną liczbę \newline elementów, w zależności od liczby przekazanych argumentów. \newline \newline Przykład użycia rest parameters: \newline \newline function sumuj(...liczby) \{ \newline let suma = 0; \newline for (let liczba of liczby) \{ \newline suma += liczba; \newline \} \newline return suma; \newline \} \newline \newline console.log(sumuj(1, 2, 3, 4)); // Output: 10 \newline console.log(sumuj(5, 10, 15)); // Output: 30 \newline console.log(sumuj(2)); // Output: 2 \newline console.log(sumuj()); // Output: 0 \newline \newline Rest parameters można również wykorzystać w połączeniu z innymi parametrami \newline funkcji. Jednak rest parameters musi być ostatnim parametrem w definicji funkcji, \newline ponieważ zbiera wszystkie pozostałe argumenty. \newline \newline function foo(a, b, ...rest) \{ \newline console.log('a:', a); \newline console.log('b:', b); \newline console.log('reszta:', rest); \newline \} \newline \newline foo(1, 2, 3, 4, 5); \newline // Output: \newline // a: 1 \newline // b: 2 \newline // reszta: {[}3, 4, 5{]} \newline \newline - Spread operator: Operator rozproszenia (spread operator) w JavaScript jest oznaczony \newline trzema kropkami (...) i służy do rozwinięcia (rozproszenia) elementów z kolekcji (np. tablicy) \newline lub obiektu w miejscach, gdzie oczekiwane są oddzielne elementy. Operator rozproszenia umożliwia wygodne kopiowanie, łączenie i rozszerzanie danych. \newline \newline Oto kilka przykładów zastosowania operatora rozproszenia: \newline \newline Rozproszenie tablicy: \newline const numbers = {[}1, 2, 3{]}; \newline const copiedNumbers = {[}...numbers{]}; \newline console.log(copiedNumbers); // {[}1, 2, 3{]} \newline \newline Łączenie tablic: \newline const arr1 = {[}1, 2, 3{]}; \newline const arr2 = {[}4, 5, 6{]}; \newline const combinedArray = {[}...arr1, ...arr2{]}; \newline console.log(combinedArray); // {[}1, 2, 3, 4, 5, 6{]} \newline \newline Rozproszenie obiektu: \newline const person = \{ name: 'John', age: 30 \}; \newline const copiedPerson = \{ ...person \}; \newline console.log(copiedPerson); // \{ name: 'John', age: 30 \} \newline \newline Przekazanie argumentów do funkcji: \newline const numbers = {[}1, 2, 3, 4, 5{]}; \newline const maxNumber = Math.max(...numbers); \newline console.log(maxNumber); // 5 \newline \newline Tworzenie kopii obiektu z modyfikacją: \newline const person = \{ name: 'John', age: 30 \}; \newline const modifiedPerson = \{ ...person, age: 40 \}; \newline console.log(modifiedPerson); // \{ name: 'John', age: 40 \} \newline Operator rozproszenia jest potężnym narzędziem, które umożliwia łatwe manipulowanie \newline danymi w JavaScript. Może być stosowany na różnych typach danych, takich jak tablice, \newline obiekty, stringi itp. \newline \newline - Rest parameters i spread operator to dwie różne funkcjonalności w języku JavaScript, \newline ale mają podobną składnię i korzystają z tych samych symboli: trzech kropek (...). \newline \newline Rest parameters (...) używane jest w definicji funkcji do zbierania dowolnej liczby \newline argumentów i pakowania ich w tablicę. \newline \newline Spread operator (...) używany jest w miejscu wywołania funkcji, tablicy lub obiektu \newline do rozwinięcia jego elementów i przekazania ich jako pojedyncze argumenty lub \newline elementy do innej funkcji, tablicy lub obiektu.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2018 (ES9)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{- Rest/Spread Properties: Rest/Spread Properties umożliwiają rozwinięcie i zbieranie \newline właściwości obiektów. Przykład: \newline const person = \{ name: 'John', age: 30, city: 'New York' \}; \newline const \{ name, ...rest \} = person; \newline console.log(name); // "John" \newline console.log(rest); // \{ age: 30, city: 'New York' \} \newline \newline - Promise.finally(): Dodano metodę finally() do obiektu Promise, która pozwala zdefiniować \newline blok kodu, który zostanie wykonany niezależnie od tego, czy Promise zakończy się sukcesem, \newline czy odrzuceniem. Przykład: \newline fetch('https://api.example.com/data') \newline .then(response =\textgreater{} response.json()) \newline .then(data =\textgreater{} console.log(data)) \newline .catch(error =\textgreater{} console.error(error)) \newline .finally(() =\textgreater{} console.log('Zakończono żądanie')); \newline \newline - Asynchroniczne iterowanie po obiektach: Wprowadzono możliwość asynchronicznego \newline iterowania po obiektach przy użyciu pętli for-await-of. Przykład: \newline const obj = \{ a: 1, b: 2, c: 3 \}; \newline \newline (async () =\textgreater{} \{ \newline for await (const value of Object.values(obj)) \{ \newline console.log(value); \newline \} \newline \})(); \newline \newline - Obiekty RegExp z grupami named capture: Dodał możliwość nazwanych grup \newline przechwytywania w wyrażeniach regularnych. Przykład: \newline const regex = /(?\textless{}year\textgreater{}\textbackslash{}d\{4\})-(?\textless{}month\textgreater{}\textbackslash{}d\{2\})-(?\textless{}day\textgreater{}\textbackslash{}d\{2\})/; \newline const match = \seqsplit{regex.exec('2021-09-30');} \newline console.log(match.groups.year); // "2021" \newline console.log(match.groups.month); // "09" \newline console.log(match.groups.day); // "30" \newline \newline - Async Iteration: Umożliwia iterację po obiektach asynchronicznych, takich jak obiekty \newline generujące asynchroniczne wartości. Wykorzystuje nowy interfejs Symbol.asyncIterator i \newline for-await-of do obsługi iteracji. Przykład: \newline async function* getData() \{ \newline yield await fetchData1(); \newline yield await fetchData2(); \newline yield await fetchData3(); \newline \} \newline \newline (async () =\textgreater{} \{ \newline for await (const data of getData()) \{ \newline console.log(data); \newline \} \newline \})();} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2020 (ES11)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{Oto lista niektórych nowych funkcji i zasad wprowadzonych w ECMAScript 2020 (ES11): \newline \newline - Optional Chaining (Optional Property Access): Operator ?. pozwala na bezpieczne \newline odwoływanie się do właściwości obiektu, nawet jeśli wcześniejsze właściwości są \newline undefined lub null. Przykład: \newline const user = \{ \newline name: 'John', \newline address: \{ \newline city: 'New York' \newline \} \newline \}; \newline \newline console.log(user.address?.city); // 'New York' \newline console.log(user.address?.street); // undefined \newline \newline - Nullish Coalescing Operator: Operator ?? pozwala na wybór wartości domyślnej tylko \newline wtedy, gdy wartość jest null lub undefined, a nie w przypadku innych "fałszywych" \newline wartości, takich jak false, 0 czy pusty łańcuch. Przykład: \newline const name = null; \newline const defaultName = 'John'; \newline \newline console.log(name ?? defaultName); // 'John' \newline \newline const count = 0; \newline const defaultCount = 10; \newline \newline console.log(count ?? defaultCount); // 0 \newline \newline - BigInt: Typ danych BigInt został dodany do języka JavaScript, umożliwiając obsługę \newline liczb całkowitych o dowolnej precyzji. Przykład: \newline const bigNumber = \seqsplit{BigInt(1234567890123456789012345678901234567890);} \newline console.log(bigNumber); // \seqsplit{1234567890123456789012345678901234567890n} \newline \newline - Promise.allSettled(): Metoda Promise.allSettled() pozwala na oczekiwanie na \newline zakończenie wykonania wszystkich obietnic bez względu na ich rezultat (sukces, \newline odrzucenie lub wyjątek). Przykład: \newline const promises = {[} \newline \seqsplit{Promise.resolve('Success')}, \newline Promise.reject('Error'), \newline Promise.resolve('Another success') \newline {]}; \newline \newline Promise.allSettled(promises) \newline .then(results =\textgreater{} \{ \newline results.forEach(result =\textgreater{} \{ \newline \seqsplit{console.log(result.status);} // 'fulfilled' lub 'rejected' \newline \seqsplit{console.log(result.value);} // wartość lub powód odrzucenia \newline \}); \newline \}); \newline \newline - String.matchAll(): Metoda matchAll() służy do iteracji po wszystkich dopasowaniach \newline wzorca w łańcuchu znaków z wykorzystaniem wyrażeń regularnych. Przykład: \newline javascript \newline Copy code \newline const text = 'Hello World!'; \newline const regex = /{[}a-z{]}/g; \newline \newline const matches = text.matchAll(regex); \newline for (const match of matches) \{ \newline console.log(match); // kolejne dopasowania \newline \} \newline \newline - globalThis: Obiekt globalThis dostarcza odniesienie do globalnego obiektu niezależnie \newline od środowiska (przeglądarka, Node.js itp.). Dzięki temu można jednolicie odwoływać się \newline do globalnego obiektu bez względu na kontekst. Na przykład: \newline console.log(globalThis.setTimeout === setTimeout); // true \newline import() dynamiczne importowanie: import() to asynchroniczna metoda, która umożliwia dynamiczne importowanie modułów w czasie wykonywania. Umożliwia to dynamiczną \newline załadowanie kodu modułu na żądanie. Przykład: \newline const module = await import('./module.js'); \newline \newline - \seqsplit{String.prototype.replaceAll():} Metoda replaceAll() zastępuje wszystkie wystąpienia podanej \newline frazy w łańcuchu inną wartością. Przykład: \newline const text = 'Hello World!'; \newline const newText = text.replaceAll('l', 'X'); \newline console.log(newText); // 'HeXXo WorXd!'} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript 2022 (ES13)}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{- Deklaracja pól klas \newline \newline Do tej pory jeśli chcieliśmy zdefiniować pole klasy, mogliśmy to zrobić tylko poprzez konstruktor. Czyli … \newline \newline class Cat \{ \newline constructor() \{ \newline this.name = 'Szarek'; \newline this.age = 1; \newline \} \newline \} \newline w ES13 możemy to zrobić w bardziej intuicyjny sposób. Możemy więc napisać: \newline \newline class Cat \{ \newline name = 'Szarek'; \newline age = 1; \newline \} \newline \newline - Prywatne metody i pola klasy \newline \newline W JavaScript przy posługiwaniu się klasami nie mieliśmy możliwości tworzenia prywatnych \newline pól klas ani prywatnych metod. Można było stosować konwencję, która mówiła, że prywatne \newline "rzeczy" wyróżniamy przedrostkiem \_. Wyglądało to w ten sposób: \newline \newline class Cat \{ \newline \_name = 'Szarek'; \newline \_age = 1; \newline \newline \_getName() \{ \newline return this.\_name; \newline \} \newline \} \newline \newline Jednak w zachowaniu kodu nie miało to żadnego odzwierciedlenia. Więc jeśli spróbowaliśmy \newline pobrać wartość bezpośrednio z pola klasy: \newline \newline const cat = new Cat(); \newline console.log(cat.\_name); // -\textgreater{} 'Szarek' \newline … dostaliśmy bez problemu wartość pola. Z pomocą śpieszy nam oczywiście \newline ECMAScript 2022. Wprowadza ona prywatne pola klas oraz prywatne metody! \newline \newline Prywatne metody oraz prywatne pola klas definiujemy od tej wersji za pomocą przedrostka \newline \# Czyli nasz kod wyglądałby w ten sposób: \newline \newline class Cat \{ \newline \#name = 'Szarek'; \newline \#age = 1; \newline \newline \#getName() \{ \newline return this.\#name; \newline \} \newline \newline getAge() \{ \newline return this.\#age; \newline \} \newline \} \newline \newline I teraz jeśli próbujemy się dostać do prywatnego pola klasy: \newline \newline console.log(cat.\#name); // -\textgreater{} SyntaxError: Private name \#name is not defined. \newline do metody prywatnej: \newline \newline console.log(cat.getName()); // -\textgreater{} TypeError: cat.getName is not a function \newline no i do metody publicznej: \newline \newline console.log(cat.getAge()); // -\textgreater{} 1 \newline … tak jak byśmy tego oczekiwali, dostajemy wartość. \newline \newline - Operator await w najwyższym scope'ie \newline \newline Temat dotyczy kombinacji operatorów async - await. W skrócie - operatora await nie \newline mogliśmy używać poza funkcją oznaczoną operatorem async. Więc taki zapis generował \newline błąd: \newline \newline const waitPrmise = () =\textgreater{} \{ \newline return new Promise((resolve) =\textgreater{} \{ \newline setTimeout(() =\textgreater{} \{ \newline resolve('RESOLVE!'); \newline \}, 5000); \newline \}); \newline \}; \newline \newline await waitPrmise(); // -\textgreater{} // SyntaxError: await is only valid in async functions \newline Nowa wersja, znosi takie ograniczenie i przykład powyżej będzie w niej działał poprawnie. \newline \newline 4. Statyczne pola klas oraz statyczne prywatne metody \newline \newline Od wersji ES13 możemy definiować statyczne prywatne pola klas oraz statyczne \newline prywatne metody klas. Statyczne metody mają dostęp do innych statycznych \newline (prywatnych i publicznych) metod poprzez this. \newline \newline class Pet \{ \newline static \#count = 0; \newline \newline static getCount() \{ \newline return this.\#count; \newline \} \newline constructor() \{ \newline \seqsplit{this.constructor.\#incrementCount();} \newline \} \newline static \#incrementCount() \{ \newline this.\#count++; \newline \} \newline \} \newline \newline const pet1 = new Pet(); \newline const ppet2 = new Pet(); \newline \newline console.log(Pet.getCount()); // -\textgreater{} 2 \newline \newline - Statyczne bloki klas \newline \newline ECMSScript 2022 pozwala nam definiować stateczne bloki kodu wewnątrz klasy. \newline Deklarujemy je za pomocą: static \{\}. Statyczne bloki kodu są wykonywane tylko raz \newline podczas inicjalizacji klasy. \newline \newline Klasa może posiadać dowolną ilość statycznych bloków kodu. Bloki te będą wykonywane \newline zgodnie z kolejnością ich deklaracji. \newline \newline class Pet \{ \newline static count = 0; \newline \newline static \{ \newline this.count++; \newline \} \newline \newline static \{ \newline this.count++; \newline \} \newline \} \newline \newline console.log(Pet.count); // -\textgreater{} 2 \newline \newline - Metoda at() dla tablic, stringów oraz obiektów TypedArray: \newline \newline Jeśli chcemy pobrać element z tablicy o konkretnym indeksie to z reguły używamy w tym celu nawiasów kwadratowych {[}{]}, w ten sposób: \newline \newline const letters = {[}'a', 'b', 'c', 'd', 'e'{]}; \newline console.log(letters{[}2{]}); // -\textgreater{} c \newline Pamiętamy, że indeksy zaczynają się od 0. Jeżeli chcemy pobrać ostatni element tablicy, \newline to musimy zrobić takie fiku-miku: \newline \newline console.log(letters{[}letters.length - 1{]}); // -\textgreater{} e \newline letters.lenght zwróci nam długość tablicy 5 i od tego odejmujemy 1, żeby zgodził się indeks. \newline \newline Dzięki nowej metodzie at() możemy wyciągać wartości z tablic w bardziej naturalny sposób. \newline \newline console.log(letters.at(0)); // -\textgreater{} a \newline console.log(letters.at(1)); // -\textgreater{} b \newline console.log(letters.at(-1)); // -\textgreater{} e \newline console.log(letters.at(-2)); // -\textgreater{} d \newline Jak widzisz pobieranie ostatniego elementu tablicy zostało uproszczone. Wystarczy, że do metody przekażemy ujemną liczbę, a pozycje będą brane od końca tablicy. \newline \newline Metoda at() oprócz tablic została dodana także do string'ów oraz tablic typu TypedArray. \newline \newline 7. Metoda Object.hasOwn() \newline \newline Kto wie jak sprawdzić czy klasa posiada jakieś pole? Możemy to zrobić używając metody hasOwnProperty w ten sposób: \newline \newline class Cat \{ \newline name = 'Szarek'; \newline \} \newline \newline const cat = new Cat(); \newline \newline cat.hasOwnProperty('name'); // -\textgreater{} true \newline cat.hasOwnProperty('age'); // -\textgreater{} false \newline \newline Problem polega na tym, że tą metodę można w bardzo prosty sposób nadpisać i \newline kompletnie zmienić jej logikę, więc nie powinniśmy takiego rozwiązania stosować w \newline naszym kodzie. \newline \newline Rozwiązaniem tego problemu jest skorzystanie z metody call na prototypie: \seqsplit{Object.prototype.hasOwnProperty.call(obj}, propertyKey) i tutaj jesteśmy już bardziej \newline bezpieczni. \newline \newline Jednak w najnowszej wersji JavaScript pojawiło się lepsze i bardziej eleganckie \newline rozwiązanie. Dostaliśmy do dyspozycji metodę Object.hasOwn(), która wykonuje taką \newline samą pracę jak \seqsplit{Object.prototype.hasOwnProperty.call(obj}, propertyKey). \newline \newline class Cat \{ \newline name = 'Szarek'; \newline \} \newline \newline const cat = new Cat(); \newline \newline Object.hasOwn(cat, 'name'); // -\textgreater{} true \newline Object.hasOwn(cat, 'age'); // -\textgreater{} false \newline \newline - Metody findLast oraz findLastIndex \newline \newline Teraz dostaliśmy do kolekcji dwie nowe metody tego typu, czyli findLast i findLastIndex. \newline Działają one tak samo, ale zwracają co innego: \newline \newline const letters = {[} \newline \{ value: 'a' \}, \newline \{ value: 'b' \}, \newline \{ value: 'c' \}, \newline \{ value: 'b' \}, \newline \{ value: 'd' \}, \newline {]}; \newline \newline letters.findLast((element) =\textgreater{} element.value === 'b'); // -\textgreater{} \{ value: 'b' \} \newline letters.findLastIndex((element) =\textgreater{} element.value === 'b'); // -\textgreater{} 3 \newline W odróżnieniu od find i findIndex, nowe metody szukają od końca tablicy. \newline Więc znajdą ostatni pasujący element. \newline \newline Metoda findLast zwróci znaleziony element, natomiast metoda findLastIndex zwróci indeks znalezionego elementu.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}