(this["webpackJsonpjs-docs"]=this["webpackJsonpjs-docs"]||[]).push([[0],{51:function(e,n,t){},86:function(e,n,t){"use strict";t.r(n);var a=t(1),i=t.n(a),s=t(9),c=t.n(s),o=(t(51),t(62)),j=t(33),r=t(125),l=t(124),d=t(129),b=t(130),y=t(127),u=t(120),p=t(122),w=t(123),z=t(61),x=t.n(z),g=t(126),O=t(49),m=t(119),h=t(11),k=t(0),f=300,v=Object(m.a)((function(e){return{root:{display:"flex"},drawer:Object(j.a)({},e.breakpoints.up("sm"),{width:f,flexShrink:0}),appColor:{backgroundColor:"#358622"},appBar:Object(j.a)({},e.breakpoints.up("sm"),{width:"calc(100% - ".concat(f,"px)"),marginLeft:f}),menuButton:Object(j.a)({marginRight:e.spacing(2)},e.breakpoints.up("sm"),{display:"none"}),toolbar:e.mixins.toolbar,drawerPaper:{width:f},content:{flexGrow:1,padding:e.spacing(3)}}}));var N=function(e){var n=e.window,t=v(),a=i.a.useState(!1),s=Object(o.a)(a,2),c=s[0],j=s[1],z=function(){j(!c)},m=Object(k.jsxs)("div",{children:[Object(k.jsx)("div",{className:t.toolbar}),Object(k.jsxs)(u.a,{children:[Object(k.jsx)(p.a,{children:Object(k.jsx)("b",{children:"Podstawy JavaScriptu"})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/adding-scripts",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Dodawanie skrypt\xf3w na stronie"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/comments",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Komentarze"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/output",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Wy\u015bwietlanie tre\u015bci"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/target-dom-elements",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Znajdowanie element\xf3w DOM"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/modify-dom-elements",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Manipulacja elementami DOM"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/good-practices",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Dobre praktyki"})," "]})}),Object(k.jsx)(p.a,{children:Object(k.jsx)("b",{children:"Przechowywanie i zmiana warto\u015bci"})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/variables",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Zmienne i sta\u0142e"})," "]})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/data-types",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Typy danych"})," "]})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/operators",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Operatory i dzia\u0142ania"})," "]})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/arrays",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Tablice"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/objects",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Obiekty"})," "]})}),Object(k.jsx)(p.a,{children:Object(k.jsx)("b",{children:"Wyra\u017cenia"})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/conditions",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Warunki"})," "]})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/loops",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"P\u0119tle"})})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/functions",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"Funkcje"})})}),Object(k.jsx)(p.a,{children:Object(k.jsx)("b",{children:"Programowanie obiektowe (OOP)"})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/oop-classes",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Klasy i instancje"})," "]})}),Object(k.jsx)(p.a,{children:Object(k.jsx)("b",{children:"AJAX"})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/ajax-fetch",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Fetch"})," "]})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/ajax-json",children:Object(k.jsxs)(p.a,{button:!0,disableGutters:!0,children:[Object(k.jsx)(w.a,{primary:"Biblioteka JSON"})," "]})}),Object(k.jsx)(p.a,{children:Object(k.jsx)("b",{children:"Debuggowanie"})}),Object(k.jsx)(h.b,{className:"menuLink",to:"/debugging",children:Object(k.jsx)(p.a,{button:!0,disableGutters:!0,children:Object(k.jsx)(w.a,{primary:"B\u0142\u0119dy"})})})]})]}),f=void 0!==n?function(){return n().document.body}:void 0;return Object(k.jsxs)("div",{className:t.root,children:[Object(k.jsx)(l.a,{}),Object(k.jsx)(r.a,{position:"fixed",classes:{colorPrimary:t.appColor},className:t.appBar,children:Object(k.jsxs)(g.a,{children:[Object(k.jsx)(y.a,{color:"inherit","aria-label":"open drawer",edge:"start",onClick:z,className:t.menuButton,children:Object(k.jsx)(x.a,{})}),Object(k.jsx)(O.a,{variant:"h6",noWrap:!0,children:"Kodilla - Poradnik JS"})]})}),Object(k.jsxs)("nav",{className:t.drawer,"aria-label":"mailbox folders",children:[Object(k.jsx)(b.a,{smUp:!0,implementation:"css",children:Object(k.jsx)(d.a,{container:f,anchor:"left",open:c,onClose:z,classes:{paper:t.drawerPaper},ModalProps:{keepMounted:!0},children:m})}),Object(k.jsx)(b.a,{xsDown:!0,implementation:"css",children:Object(k.jsx)(d.a,{classes:{paper:t.drawerPaper},variant:"permanent",open:!0,children:m})})]}),Object(k.jsxs)("main",{className:t.content,children:[Object(k.jsx)("div",{className:t.toolbar}),e.text]})]})},P=t(8);var S=function(e){return Object(k.jsx)("div",{children:function(n){switch(n){case"h1":return Object(k.jsx)("h1",{className:"header",id:e.text.toLowerCase().replace(" ","-"),children:e.text});case"h2":return Object(k.jsx)("h2",{className:"header",children:e.text});case"h3":return Object(k.jsx)("h3",{className:"header",children:e.text});case"h4":return Object(k.jsx)("h4",{className:"header",children:e.text});case"h5":return Object(k.jsx)("h5",{className:"header",children:e.text});default:return Object(k.jsx)("h1",{className:"header",children:e.text})}}(e.type)})};var M=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)(S,{type:"h1",text:"Poradnik JavaScript (ES6)"}),Object(k.jsx)("p",{children:"Witaj"}),Object(k.jsxs)("p",{children:["Materia\u0142y na tej stronie stanowi\u0105 uzupe\u0142nienie bootcampa ",Object(k.jsx)("b",{children:"Front-end: React"})," w Kodilli."]}),Object(k.jsx)("p",{children:"Pozwol\u0105 Ci one utrwali\u0107 zdobyt\u0105 wiedz\u0119 z zakresu JavaScriptu (ES6), a tak\u017ce pozna\u0107 kilka w\u0142a\u015bciwo\u015bci, kt\xf3re nie by\u0142y wspomniane podczas kursu."})]})},J=t(23),T=t(40),L=t(54);var D=function(e){var n=function(){return e.inline?Object(k.jsx)(T.a,Object(J.a)(Object(J.a)({},T.b),{},{theme:L.a,code:e.code,language:e.language,children:function(n){var t=n.className,a=n.style,i=n.tokens,s=n.getLineProps,c=n.getTokenProps;return Object(k.jsx)("pre",{className:e.inline?t+" inline":"",style:a,children:i.map((function(e,n){return Object(k.jsx)("span",Object(J.a)(Object(J.a)({},s({line:e,key:n})),{},{children:e.map((function(e,n){return Object(k.jsx)("span",Object(J.a)({},c({token:e,key:n})))}))}))}))})}})):Object(k.jsx)(T.a,Object(J.a)(Object(J.a)({},T.b),{},{theme:L.a,code:e.code,language:e.language,children:function(e){var n=e.className,t=e.style,a=e.tokens,i=e.getLineProps,s=e.getTokenProps;return Object(k.jsx)("pre",{className:n,style:t,children:a.map((function(e,n){return Object(k.jsx)("div",Object(J.a)(Object(J.a)({},i({line:e,key:n})),{},{children:e.map((function(e,n){return Object(k.jsx)("span",Object(J.a)({},s({token:e,key:n})))}))}))}))})}}))};return e.inline?Object(k.jsx)("span",{className:"codeBox",children:n()}):Object(k.jsx)("div",{className:"codeBox",children:n()})};var W=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)(S,{type:"h1",text:"Wprowadzenie"}),Object(k.jsx)("p",{children:"Istniej\u0105 dwie podstawowe metody dodawania skrypt\xf3w JS na stronie."}),Object(k.jsx)(S,{type:"h1",text:"Zewn\u0119trzny plik"}),Object(k.jsxs)("p",{children:["Aby podlinkowa\u0107 zewn\u0119trzny plik skrypt\xf3w na stronie, umie\u015b\u0107 poni\u017cszy tag (z odpowiedni\u0105 \u015bcie\u017ck\u0105 w ",Object(k.jsx)(D,{inline:!0,language:"markup",code:"src"}),") przed tagiem ",Object(k.jsx)(D,{inline:!0,language:"html",code:"</body>"}),":"]}),Object(k.jsx)(D,{language:"javascript",code:'<script src="script.js"><\/script>'}),Object(k.jsx)("p",{children:"Jest to standardowa i najbardziej polecana metoda."}),Object(k.jsx)(S,{type:"h1",text:"W kodzie HTML"}),Object(k.jsxs)("p",{children:["Mo\u017cna r\xf3wnie\u017c umieszcza\u0107 skrypty bezpo\u015brednio w kodzie HTML, owijaj\u0105c je w tag ",Object(k.jsx)(D,{inline:!0,language:"html",code:"<script>"}),":"]}),Object(k.jsx)(D,{language:"javascript",code:"\n<script>\n\n// scripts go here\n\n<\/script>\n"}),Object(k.jsx)("p",{children:"Tej metody nale\u017cy u\u017cywa\u0107 tylko w szczeg\xf3lnych przypadkach, kiedy nie ma mo\u017cliwo\u015bci u\u017cycia zewn\u0119trznego pliku."})]})};var E=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"W JavaScripcie istniej\u0105 dwa rodzaje komentarzy: liniowe i blokowe."}),Object(k.jsx)(S,{type:"h2",text:"Komentarz liniowy"}),Object(k.jsx)(D,{language:"javascript",code:"// A single line comment"}),Object(k.jsxs)("p",{children:["Zajmuje on jedn\u0105 lini\u0119 tekstu: ca\u0142a tre\u015b\u0107 od znak\xf3w ",Object(k.jsx)(D,{language:"html",inline:!0,code:"//"})," do ko\u0144ca wiersza b\u0119dzie ignorowana przez przegl\u0105dark\u0119."]}),Object(k.jsx)(S,{type:"h2",text:"Komentarz blokowy"}),Object(k.jsx)(D,{language:"javascript",code:"/* A multi-line\n    comment */"}),Object(k.jsx)("p",{children:"Mo\u017ce on zajmowa\u0107 wiele linii: ca\u0142a tre\u015b\u0107 mi\u0119dzy znakami /* oraz */ b\u0119dzie ignorowana przez przegl\u0105dark\u0119."})]})};var C=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"DOM oznacza Document Object Model, czyli Obiektowy model dokumentu. Kiedy plik .html zostanie otwarty w przegl\u0105darce, na jego podstawie zbuduje si\u0119 DOM. Dlatego div w pliku .html jest elementem HTML, za\u015b w przegl\u0105darce jest elementem DOM."}),Object(k.jsx)("p",{children:"Kiedy za pomoc\u0105 JavaScriptu b\u0119dziemy dodawa\u0107, usuwa\u0107 lub zmienia\u0107 jakie\u015b elementy strony, b\u0119d\u0105 to operacje na DOM, nie na HTML."}),Object(k.jsx)("p",{children:"Aby zmodyfikowa\u0107 element DOM za pomoc\u0105 JS, musimy go wskaza\u0107, co umo\u017cliwi\u0105 nam opisane poni\u017cej funkcje."}),Object(k.jsx)(S,{type:"h1",text:"getElementById"}),Object(k.jsx)("p",{children:"Ta funkcja umo\u017cliwia wskazanie elementu o konkretnym identyfikatorze (id)."}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"javascript",code:"const contentBox = document.getElementById('content-box');"}),Object(k.jsxs)("p",{children:["Powy\u017cszy kod wybierze z DOM element o id ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"content-box"})," i zapisze go w sta\u0142ej."]}),Object(k.jsx)(S,{type:"h1",text:"querySelector"}),Object(k.jsx)("p",{children:"Ta funkcja zwr\xf3ci pierwszy element w dokumencie o danej klasie."}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"javascript",code:"const mainHeader = document.querySelector('.main-header');"}),Object(k.jsxs)("p",{children:["Powy\u017cszy kod wybierze z DOM element o klasie ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"main-header"})," i zapisze go w sta\u0142ej."]}),Object(k.jsx)(S,{type:"h1",text:"querySelectorAll"}),Object(k.jsx)("p",{children:"Ta funkcja wyszuka wszystkie elementy, pasuj\u0105ce do selektora."}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"javascript",code:"const links = document.querySelectorAll('.titles a');"}),Object(k.jsxs)("p",{children:["owy\u017cszy kod wybierze z DOM wszystkie elementy pasuj\u0105ce do selektora ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:".titles a"})," i zapisze go w sta\u0142ej."]})]})};var R=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"JS pozwala na r\xf3\u017cne sposoby wy\u015bwietla\u0107 tre\u015b\u0107 na stronie. Poni\u017cszych technik mo\u017cna u\u017cywa\u0107 zar\xf3wno do sprawdzania dzia\u0142ania skrypt\xf3w, jak i komunikacji z u\u017cytkownikiem strony."}),Object(k.jsx)(S,{type:"h1",text:"console.log();"}),Object(k.jsx)("p",{children:"Ta funkcja wy\u015bwietla w konsoli wszystkie przekazane do niej parametry. W poni\u017cszy spos\xf3b mo\u017cemy drukowa\u0107 w konsoli zar\xf3wno teksty, jak i zmienne/sta\u0142e."}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"javascript",code:"console.log(x);"}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)("img",{width:"25%",alt:"debugging",src:"output.png"}),Object(k.jsx)(S,{type:"h1",text:"alert();"}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsxs)("p",{children:["Jest to funkcja podobna do ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"console.log()"}),", z t\u0105 r\xf3\u017cnic\u0105, \u017ce zamiast w konsoli, tre\u015b\u0107 wy\u015bwietlana jest w alercie (wyskakuj\u0105cym okienku)."]}),Object(k.jsx)(D,{language:"javascript",code:"alert(x);"}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)("p",{children:"Wynikiem wpisania w konsoli poni\u017cszego skryptu:"}),Object(k.jsx)(D,{language:"javascript",code:"\n    function getSum(a, b) {\n        const sum = a + b;\n        return sum;\n    }\n    \n    alert( getSum(5, 7) );\n    "}),Object(k.jsx)("p",{children:"b\u0119dzie nast\u0119puj\u0105cy alert:"}),Object(k.jsx)("img",{width:"45%",alt:"debugging",src:"output1.png"}),Object(k.jsx)(S,{type:"h1",text:"confirm();"}),Object(k.jsx)("p",{children:"Ta funkcja wy\u015bwietli na ekranie alert z dwoma przyciskami, umo\u017cliwiaj\u0105cymi potwierdzenie lub odrzucenie danej akcji."}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"javascript",code:'confirm("Are you sure?");'}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)("img",{width:"45%",alt:"debugging",src:"output2.png"}),Object(k.jsx)("p",{children:"Wynikiem wpisania w konsoli powy\u017cszego skryptu b\u0119dzie nast\u0119puj\u0105cy alert:"}),Object(k.jsx)(S,{type:"h1",text:"prompt();"}),Object(k.jsx)("p",{children:"Ta funkcja wy\u015bwietli na ekranie alert z inputem tekstowym i dwoma przyciskami."}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"javascript",code:'prompt("How old are you?","0");'}),Object(k.jsx)("p",{children:"Funkcja przyjmuje dwa argumenty: pierwszy to tre\u015b\u0107 wy\u015bwietlana w alercie, a drugi to domy\u015blna zawarto\u015b\u0107 pola tekstowego."}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)("p",{children:"Wynikiem wpisania w konsoli powy\u017cszego skryptu b\u0119dzie nast\u0119puj\u0105cy alert:"}),Object(k.jsx)("img",{width:"45%",alt:"debugging",src:"output3.png"})]})};var H=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"W poni\u017cszych przyk\u0142adach zak\u0142adamy, \u017ce znasz ju\u017c podstawowe informacje z zakresu wyszukiwania element\xf3w DOM."}),Object(k.jsx)(S,{type:"h1",text:"classList"}),Object(k.jsxs)("p",{children:["Parametr ",Object(k.jsx)(D,{language:"js",inline:!0,code:"classList"})," zawiera zestaw metod, kt\xf3re pozwalaj\u0105 na operacje na klasach danego elementu."]}),Object(k.jsx)(D,{language:"javascript",code:'<script src="script.js"><\/script>'}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Zastosowanie"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"add"})}),Object(k.jsx)("td",{children:"dodanie klasy"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"remove"})}),Object(k.jsx)("td",{children:"usuni\u0119cie klasy"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"toggle"})}),Object(k.jsx)("td",{children:"dodanie klasy je\u015bli jej nie by\u0142o, i vice versa"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"contains"})}),Object(k.jsx)("td",{children:"sprawdzenie czy element zawiera dan\u0105 klas\u0119"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ady:"}),Object(k.jsx)(D,{language:"js",code:"\n        const div = document.querySelector('#testing-div');\n\n        div.classList.add('active');\n        console.log(div.classList.contains('active')); // true\n        \n        div.classList.remove('active');\n        console.log(div.classList.contains('active')); // false\n        \n        div.classList.toggle('active');\n        console.log(div.classList.contains('active')); // true\n    "}),Object(k.jsx)(S,{type:"h1",text:"innerHTML"}),Object(k.jsx)(D,{language:"js",code:"\n        const div = document.querySelector('#testing-div');\n\n        console.log(div.innerHTML);\n        \n        div.innerHTML = '<strong>Hello world!</strong>';\n    "}),Object(k.jsx)(S,{type:"h1",text:"insertAdjacentHTML"}),Object(k.jsxs)("p",{children:["Metoda ",Object(k.jsx)(D,{language:"js",inline:!0,code:"insertAdjacentHTML"})," s\u0142u\u017cy do wstawiania kodu HTML bez usuwania zawarto\u015bci danego elementu. Jako pierwszy argument podaje si\u0119 tekst, kt\xf3ry decyduje o miejscu wstawienia kodu HTML."]}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Argument"}),Object(k.jsx)("th",{children:"Miejsce wstawienia kodu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"beforebegin"})}),Object(k.jsx)("td",{children:"przed elementem"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"afterbegin"})}),Object(k.jsx)("td",{children:"w elemencie, na pocz\u0105tku jego zawarto\u015bci"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"beforeend"})}),Object(k.jsx)("td",{children:"w elemencie, na ko\u0144cu jego zawarto\u015bci"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"afterend"})}),Object(k.jsx)("td",{children:"po elemencie"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia:"}),Object(k.jsx)(D,{language:"js",code:"\n        const div = document.querySelector('#testing-div');\n        const newCode = '<strong>Hello world!</strong>';\n        \n        div.insertAdjacentHTML('beforeend', newCode);\n    "}),Object(k.jsx)(S,{type:"h1",text:"createElement"}),Object(k.jsxs)("p",{children:["Tworzenie nowego elementu DOM mo\u017cna osi\u0105gn\u0105\u0107 za pomoc\u0105 metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"createElement"})," wykonanej na obiekcie ",Object(k.jsx)(D,{inline:!0,language:"js",code:"document"}),". Element zostanie jedynie stworzony i zwr\xf3cony \u2013 nie zostanie dodany na stronie."]}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia:"}),Object(k.jsx)(D,{language:"js",code:"const newDiv = document.createElement('div');"}),Object(k.jsx)(S,{type:"h1",text:"remove"}),Object(k.jsxs)("p",{children:["Usuni\u0119cie elementu z DOM mo\u017cna wykona\u0107 za pomoc\u0105 metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"remove"})," wykonanej na elemencie, kt\xf3ry ma zosta\u0107 usuni\u0119ty."]}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia:"}),Object(k.jsx)(D,{language:"js",code:"\n        const galleryDiv = document.querySelector('div.gallery');\n        galleryDiv.remove();\n    "})]})};var B=function(e){var n=["break","case","catch","class","const","continue","debugger","default","delete","do","else","enum","export","extends","false","finally","for","function","if","implements","import","in","instanceof","interface","let","new","null","package","private","protected","public","return","static","super","switch","this","throw","true","try","typeof","var","void","while","with","yield"];return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Poni\u017cej znajduje si\u0119 lista kilku dobrych praktyk, o kt\xf3rych warto pami\u0119ta\u0107 podczas pisania skrypt\xf3w."}),Object(k.jsx)(S,{type:"h1",text:"Nazwy"}),Object(k.jsx)("p",{children:"Dla nazw zmiennych i funkcji:"}),Object(k.jsxs)("ul",{children:[Object(k.jsxs)("li",{children:["u\u017cywaj formatu ",Object(k.jsx)(D,{language:"js",inline:!0,code:"camelCase"})," (bez spacji pomi\u0119dzy poszczeg\xf3lnymi s\u0142owami, ka\u017cde kolejne s\u0142owo zaczynaj\u0105c wielk\u0105 liter\u0105),"]}),Object(k.jsx)("li",{children:"u\u017cywaj tylko j\u0119zyka angielskiego,"}),Object(k.jsx)("li",{children:"u\u017cywaj tylko znak\xf3w alfanumerycznych (cyfr i liter, ale bez polskich znak\xf3w)."})]}),Object(k.jsx)(S,{type:"h1",text:"Spacje"}),Object(k.jsxs)("p",{children:["Wstawiaj spacj\u0119 przed i za operatorami (czyli znakami ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"="}),", ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"+"}),", ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"-"}),", ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"*"}),", ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"/"}),") oraz po przecinkach."]}),Object(k.jsx)(S,{type:"h1",text:"\u015aredniki"}),Object(k.jsx)("p",{children:"Wstawiaj \u015brednik na ko\u0144cu ka\u017cdej linii kodu, z wyj\u0105tkiem:"}),Object(k.jsxs)("ul",{children:[Object(k.jsxs)("li",{children:["deklaracji funkcji nazwanych, np. ",Object(k.jsx)(D,{language:"js",inline:!0,code:"function myFunc(){}"}),","]}),Object(k.jsxs)("li",{children:["blok\xf3w ",Object(k.jsx)(D,{language:"js",inline:!0,code:"if"}),", ",Object(k.jsx)(D,{language:"js",inline:!0,code:"else if"})," i ",Object(k.jsx)(D,{language:"js",inline:!0,code:"else"}),","]}),Object(k.jsx)("li",{children:"p\u0119tli."})]}),Object(k.jsx)(S,{type:"h1",text:"Wci\u0119cia"}),Object(k.jsx)("p",{children:"U\u017cywaj dw\xf3ch spacji, aby tworzy\u0107 wci\u0119cia w blokach kodu."}),Object(k.jsx)(S,{type:"h1",text:"Strict mode"}),Object(k.jsx)("p",{children:'Dobr\u0105 praktyk\u0105 jest uruchamianie kodu JS w "trybie \u015bcis\u0142ym" poprzez umieszczenie na pocz\u0105tku ka\u017cdego pliku ze skryptami nast\u0119puj\u0105cej linii:'}),Object(k.jsx)(D,{language:"js",code:"'use strict';"}),Object(k.jsx)("p",{children:"Dzi\u0119ki tej deklaracji pomy\u0142ki, kt\xf3re normalnie nie wywo\u0142a\u0142yby b\u0142\u0119du, b\u0119d\u0105 traktowane jak b\u0142\u0105d i wy\u015bwietlane na czerwono w konsoli."}),Object(k.jsx)(S,{type:"h1",text:"S\u0142owa zastrze\u017cone"}),Object(k.jsxs)("p",{children:["Poni\u017cszych s\u0142\xf3w ",Object(k.jsx)("b",{children:"nie mo\u017cna"})," u\u017cywa\u0107 jako nazw funkcji lub zmiennych, gdy\u017c maj\u0105 one swoje odg\xf3rnie zdefiniowane znaczenie w JS."]}),Object(k.jsx)("p",{children:n.map((function(e,t){return Object(k.jsxs)("span",{children:[Object(k.jsx)(D,{inline:!0,language:"js",code:e}),t===n.length-1?".":", "]})}))})]})};var F=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:'Zmienne i sta\u0142e to "kontenery", w kt\xf3rych przechowujemy pewne informacje lub warto\u015bci. Mo\u017cemy p\xf3\u017aniej odwo\u0142ywa\u0107 si\u0119 do tych warto\u015bci w kodzie, podaj\u0105c tylko nazw\u0119 zmiennej/sta\u0142ej.'}),Object(k.jsx)(S,{type:"h1",text:"Zmienna let"}),Object(k.jsxs)("p",{children:["Zmienna ",Object(k.jsx)(D,{language:"js",inline:!0,code:"let"})," s\u0142u\u017cy do przechowywania warto\u015bci, kt\xf3re mog\u0105 by\u0107 modyfikowane w kodzie. Zakres zmiennej ",Object(k.jsx)(D,{language:"js",inline:!0,code:"let"})," to najbli\u017cszy blok kodu, zamkni\u0119ty w nawiasy klamrowe ",Object(k.jsx)(D,{language:"js",inline:!0,code:"{ }"})]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)(D,{language:"js",code:"\n    function getDifference(a, b) {\n        let result = a - b;\n    \n        if(result < 0){\n            result = result * -1;\n        }\n    \n        return result;\n    }\n    \n    console.log( getDifference(5, 7) );\n    "}),Object(k.jsxs)("p",{children:["W powy\u017cszym przyk\u0142adzie zmienna ",Object(k.jsx)(D,{language:"js",inline:!0,code:"result"})," b\u0119dzie istnia\u0142a tylko wewn\u0105trz funkcji ",Object(k.jsx)(D,{language:"js",inline:!0,code:"getDifference"}),". Pr\xf3ba u\u017cycia jej poza t\u0105 funkcj\u0105 wywo\u0142a b\u0142\u0105d."]}),Object(k.jsx)(S,{type:"h1",text:"Sta\u0142a const"}),Object(k.jsxs)("p",{children:["Sta\u0142ych ",Object(k.jsx)(D,{language:"js",inline:!0,code:"const"})," u\u017cywamy dok\u0142adnie tak samo, jak zmiennych ",Object(k.jsx)(D,{language:"js",inline:!0,code:"let"}),". Jedyna r\xf3\u017cnica polega na tym, \u017ce do sta\u0142ej mo\u017cemy (i musimy) przypisa\u0107 warto\u015b\u0107 tylko i wy\u0142\u0105cznie w momencie jej deklaracji. Pr\xf3ba ponownego przypisania warto\u015bci spowoduje b\u0142\u0105d skryptu."]}),Object(k.jsx)(D,{language:"js",code:"\n    const name = 'John';\n\n    // this would be an error:\n    // name = 'Bob';\n    "}),Object(k.jsxs)("p",{children:["W przypadku u\u017cycia sta\u0142ej ",Object(k.jsx)(D,{language:"js",inline:!0,code:"const"}),", je\u017celi jej warto\u015b\u0107 jest tablic\u0105 b\u0105d\u017a obiektem, mo\u017cemy zmienia\u0107 ich zawarto\u015b\u0107."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)(D,{language:"js",code:"\n    const names = ['John', 'Mary', 'Jane'];\n    names.push('Adam');\n    \n    console.log(names);\n    "}),Object(k.jsx)("p",{children:"W powy\u017cszym przyk\u0142adzie warto\u015b\u0107 sta\u0142ej nie zmieni\u0142a si\u0119 \u2013 jest ni\u0105 ca\u0142y czas tablica names. Zmienili\u015bmy natomiast zawarto\u015b\u0107 samej tablicy, dodaj\u0105c do niej kolejny element, i nie spowodowa\u0142o to b\u0142\u0119du w kodzie."})]})};var A=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"W JavaScripcie istniej\u0105 dwa typy danych: proste i z\u0142o\u017cone (inaczej: referencyjne)."}),Object(k.jsx)(S,{type:"h1",text:"Typy proste"}),Object(k.jsx)("p",{children:"W poni\u017cszych typach danych, warto\u015bci przypisane s\u0105 bezpo\u015brednio do zmiennej/sta\u0142ej."}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Przyk\u0142ad"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"const myNumber = 1;"})}),Object(k.jsx)("td",{children:"liczba (integer)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:'const myText = "text";'})}),Object(k.jsx)("td",{children:"tekst (string)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"const myBool = true;"})}),Object(k.jsx)("td",{children:"logiczny \u2013 prawda/fa\u0142sz (boolean)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"const myNull = null;"})}),Object(k.jsx)("td",{children:"nic (null)"})]})]}),Object(k.jsx)(S,{type:"h1",text:"Typy z\u0142o\u017cone"}),Object(k.jsx)("p",{children:"W z\u0142o\u017conych typach danych, zmienne/sta\u0142e nie maj\u0105 bezpo\u015brednio przypisanej warto\u015bci. Zamiast tego, wskazuj\u0105 na miejsce w pami\u0119ci, gdzie przechowywane s\u0105 te dane."}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Przyk\u0142ad"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:'const myArr = ["one", "two", 3];'})}),Object(k.jsx)("td",{children:"tablica (array)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:'const myObj = {"one":1, 2:"two"};'})}),Object(k.jsx)("td",{children:"obiekt (object)"})]})]})]})};var G=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Na zmiennych i sta\u0142ych (lub bezpo\u015brednio na warto\u015bciach) mo\u017cemy wykonywa\u0107 r\xf3\u017cne operacje matematyczne i logiczne."}),Object(k.jsx)(S,{type:"h1",text:"Operatory arytmetyczne"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Operator"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b + c;"})}),Object(k.jsx)("td",{children:"dodawanie"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b \u2013 c;"})}),Object(k.jsx)("td",{children:"odejmowanie"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b * c;"})}),Object(k.jsx)("td",{children:"mno\u017cenie"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b / c;"})}),Object(k.jsx)("td",{children:"dzielenie"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = 10 % 4;"})}),Object(k.jsx)("td",{children:"modulo (reszta z dzielenia)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b ** c;"})}),Object(k.jsxs)("td",{children:["podniesienie do pot\u0119gi (",Object(k.jsx)(D,{language:"js",inline:!0,code:"b"})," do pot\u0119gi ",Object(k.jsx)(D,{language:"js",inline:!0,code:"c"}),")"]})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"++a;"})}),Object(k.jsx)("td",{children:"inkrementacja (zwi\u0119kszenie o 1) w tej samej linii kodu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a++;"})}),Object(k.jsx)("td",{children:"inkrementacja (zwi\u0119kszenie o 1) w nast\u0119pnej linii kodu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"--a;"})}),Object(k.jsx)("td",{children:"dekrementacja (zmniejszenie o 1) w tej samej linii kodu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a--;"})}),Object(k.jsx)("td",{children:"dekrementacja (zmniejszenie o 1) w nast\u0119pnej linii kodu"})]})]}),Object(k.jsx)("p",{children:"Tak jak w matematyce, mo\u017cemy w JS u\u017cywa\u0107 nawias\xf3w, aby zmodyfikowa\u0107 kolejno\u015b\u0107 wykonywanych dzia\u0142a\u0144:"}),Object(k.jsx)(D,{language:"javascript",code:"\n      console.log( 2 + (3 * 2) ); // 8\n      console.log( (2 + 3) * 2 ); // 10\n      "}),Object(k.jsx)(S,{type:"h1",text:"Operatory przypisania"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Operator"}),Object(k.jsx)("th",{children:"Przyk\u0142ad"}),Object(k.jsx)("th",{children:"R\xf3wnoznaczne z"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"="})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b"})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = b"})})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"+="})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a += b"})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = a + b"})})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"-="})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a -= b"})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = a - b"})})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"*="})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a *= b"})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = a * b"})})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"/="})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a /= b"})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = a / b"})})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"%="})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a %= b"})}),Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"a = a % b"})})]})]}),Object(k.jsx)(S,{type:"h1",text:"Operatory por\xf3wnania"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Operator"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"=="})}),Object(k.jsx)("td",{children:"r\xf3wna warto\u015b\u0107"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"==="})}),Object(k.jsx)("td",{children:"r\xf3wna warto\u015b\u0107 i typ danych"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"!="})}),Object(k.jsx)("td",{children:"r\xf3\u017cne warto\u015bci"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"!=="})}),Object(k.jsx)("td",{children:"r\xf3\u017cne warto\u015bci i typy danych"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:">"})}),Object(k.jsx)("td",{children:"wi\u0119ksze ni\u017c"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"<"})}),Object(k.jsx)("td",{children:"mniejsze ni\u017c"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:">="})}),Object(k.jsx)("td",{children:"wi\u0119ksze lub r\xf3wne"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"<="})}),Object(k.jsx)("td",{children:"mniejsze lub r\xf3wne"})]})]}),Object(k.jsx)(S,{type:"h1",text:"Operatory logiczne"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Operator"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"&&"})}),Object(k.jsx)("td",{children:"i (and)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"||"})}),Object(k.jsx)("td",{children:"lub (or)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"^"})}),Object(k.jsx)("td",{children:"jeden z, ale nie oba naraz (xor)"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"!"})}),Object(k.jsx)("td",{children:"negacja (not)"})]})]}),Object(k.jsx)(S,{type:"h1",text:"Operator warunkowy"}),Object(k.jsx)("p",{children:'Znany r\xf3wnie\u017c jako operator tr\xf3jcz\u0142onowy (conditional/ternary operator), potocznie nazywany cz\u0119sto "kr\xf3tkim ifem" (short if), s\u0142u\u017cy zwykle do przypisywania zmiennej/sta\u0142ej warto\u015bci zale\u017cnej od jakiego\u015b warunku.'}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"js",code:"condition ? valueIfTrue : valueIfFalse"}),Object(k.jsx)(S,{type:"h1",text:"Dzia\u0142ania matematyczne"}),Object(k.jsxs)("p",{children:["JavaScript udost\u0119pnia obiekt ",Object(k.jsx)(D,{language:"js",inline:!0,code:"Math()"}),", dzi\u0119ki kt\xf3remu z \u0142atwo\u015bci\u0105 mo\u017cemy przeprowadza\u0107 bardziej z\u0142o\u017cone operacje matematyczne."]}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Funkcja"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.round(a)"})}),Object(k.jsxs)("td",{children:["zaokr\u0105glenie standardowe \u2013 mniejsze od ",Object(k.jsx)(D,{inline:!0,language:"js",code:"0.5"})," w d\xf3\u0142, a ",Object(k.jsx)(D,{inline:!0,language:"js",code:"0.5"})," i wi\u0119ksze w g\xf3r\u0119"]})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.ceil(a)"})}),Object(k.jsx)("td",{children:" zaokr\u0105glenie w g\xf3r\u0119"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.floor(a)"})}),Object(k.jsx)("td",{children:"zaokr\u0105glenie w d\xf3\u0142"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.pow(a,b);"})}),Object(k.jsxs)("td",{children:["pot\u0119gowanie \u2013 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"a"})," do pot\u0119gi ",Object(k.jsx)(D,{inline:!0,language:"js",code:"b"})]})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.sqrt(a);"})}),Object(k.jsxs)("td",{children:["pierwiastek kwadratowy z ",Object(k.jsx)(D,{inline:!0,language:"js",code:"a"})]})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.min(a, b, c);"})}),Object(k.jsx)("td",{children:"najmniejsza z podanych warto\u015bci"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.max(a, b, c);"})}),Object(k.jsx)("td",{children:"najwi\u0119ksza z podanych warto\u015bci"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"Math.random();"})}),Object(k.jsxs)("td",{children:["losowa liczba z przedzia\u0142u od ",Object(k.jsx)(D,{inline:!0,language:"js",code:"0"})," do ",Object(k.jsx)(D,{inline:!0,language:"js",code:"1"})," (bez ",Object(k.jsx)(D,{inline:!0,language:"js",code:"1"}),", czyli od ",Object(k.jsx)(D,{inline:!0,language:"js",code:"0"})," do ",Object(k.jsx)(D,{inline:!0,language:"js",code:"0.999"}),"...)"]})]})]}),Object(k.jsxs)("p",{children:["Powy\u017csze dzia\u0142ania mo\u017cna \u0142\u0105czy\u0107 ze sob\u0105, np. aby uzyska\u0107 losow\u0105 liczb\u0119 ca\u0142kowit\u0105 z przedzia\u0142u od ",Object(k.jsx)(D,{inline:!0,language:"js",code:"1"})," do ",Object(k.jsx)(D,{inline:!0,language:"js",code:"10"}),":"]}),Object(k.jsx)(D,{language:"js",code:"const randomNumber = Math.floor(Math.random() * 10) + 1;"})]})};var Z=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Tablice (arrays) s\u0105 kontenerami danych, co znaczy, \u017ce mo\u017cna w nich umieszcza\u0107 wiele warto\u015bci. Zbi\xf3r warto\u015bci tablicy nazywamy elementami tablicy."}),Object(k.jsxs)("p",{children:["Ka\u017cdy element tablicy ma przypisany indeks, czyli numer reprezentuj\u0105cy jego pozycj\u0119 w tablicy. Indeksy liczymy od zera, czyli pierwszy element b\u0119dzie mia\u0142 indeks ",Object(k.jsx)(D,{language:"javascript",inline:!0,code:"0"}),". Co wa\u017cne, jest to aktualna pozycja w tablicy \u2013 przy zmianach zawarto\u015bci tablicy mog\u0105 zmienia\u0107 si\u0119 indeksy poszczeg\xf3lnych warto\u015bci."]}),Object(k.jsx)("p",{children:"Tablice stosujemy w sytuacjach, gdy potrzebujemy zbioru warto\u015bci, dla kt\xf3rych nie potrzebujemy sta\u0142ych kluczy (etykiet, nazw). Dobrym przyk\u0142adem b\u0119dzie ka\u017cda sytuacja, w kt\xf3rej b\u0119dziemy iterowa\u0107 p\u0119tl\u0105 przez wszystkie elementy tablicy, ale nigdy (poza p\u0119tl\u0105) nie b\u0119dziemy potrzebowali uzyska\u0107 dost\u0119pu do pojedynczego elementu tablicy."}),Object(k.jsx)(S,{type:"h1",text:"Tworzenie tablicy"}),Object(k.jsxs)("p",{children:["Tablic\u0119 tworzymy za pomoc\u0105 nawias\xf3w kwadratowych ",Object(k.jsx)(D,{inline:!0,language:"js",code:"[ ]"}),". Mo\u017cemy stworzy\u0107 pust\u0105 tablic\u0119, lub od razu zapisa\u0107 w niej elementy."]}),Object(k.jsx)(D,{language:"javascript",code:"\n        const categories = [];\n        console.log('categories:', categories); // categories: []\n\n        const keywords = ['travel', 'France'];\n        console.log('keywords:', keywords); // keywords: ['travel', 'France']\n        "}),Object(k.jsxs)("p",{children:["Standardowo tablic\u0119 b\u0119dziemy zapisywa\u0107 w sta\u0142ej ",Object(k.jsx)(D,{inline:!0,language:"js",code:"const"}),", aby przez przypadek nie nadpisa\u0107 ca\u0142ej tablicy. Nie jest to przeszkod\u0105, aby zmienia\u0107 zawarto\u015b\u0107 tablicy."]}),Object(k.jsx)(S,{type:"h1",text:"Dodawanie element\xf3w do tablicy"}),Object(k.jsxs)("p",{children:["Najcz\u0119stsz\u0105 metod\u0105 dodawania warto\u015bci do tablicy jest ",Object(k.jsx)(D,{inline:!0,language:"js",code:"push"}),", kt\xf3ra dodaje nowe warto\u015bci na ko\u0144cu tablicy."]}),Object(k.jsx)(D,{language:"js",code:"\n        categories.push('animals');\n        console.log('categories:', categories); // categories: ['animals']\n        \n        categories.push('travel');\n        console.log('categories:', categories); // categories: ['animals', 'travel']\n        \n        keywords.push('Paris');\n        console.log('keywords:', keywords); // keywords: ['travel', 'France', 'Paris']\n        "}),Object(k.jsx)(S,{type:"h1",text:"Liczba element\xf3w w tablicy"}),Object(k.jsxs)("p",{children:["Mo\u017cemy \u0142atwo sprawdzi\u0107, ile element\xf3w znajduje si\u0119 obecnie w tablicy za pomoc\u0105 w\u0142a\u015bciwo\u015bci ",Object(k.jsx)(D,{inline:!0,language:"js",code:"length"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n        const categoriesLength = categories.length;\n        console.log('categoriesLength:', categoriesLength); // categoriesLength: 2\n        \n        const keywordsLength = keywords.length;\n        console.log('keywordsLength:', keywordsLength); // keywordsLength: 3\n       "}),Object(k.jsx)(S,{type:"h1",text:"Odczytywanie element\xf3w tablicy"}),Object(k.jsxs)("p",{children:["Do odczytania pojedynczego elementu z tablicy u\u017cyjemy nazwy tablicy, do kt\xf3rej dodamy nawiasy kwadratowe ",Object(k.jsx)(D,{language:"js",inline:!0,code:"[ ]"})," z indeksem elementu, kt\xf3ry chcemy pobra\u0107."]}),Object(k.jsx)(D,{language:"js",code:"\n        const firstCategory = categories[0];\n        console.log('firstCategory:', firstCategory); // firstCategory: animals\n        "}),Object(k.jsxs)("p",{children:["Cz\u0119sto jednak indeks nie jest podawany bezpo\u015brednio, ale przechowywany w zmiennej. W tej sytuacji r\xf3wnie\u017c u\u017cywamy nawias\xf3w kwadratowych ",Object(k.jsx)(D,{language:"js",inline:!0,code:"[ ]"})," ."]}),Object(k.jsx)(D,{language:"js",code:"\n        const indexOfSecondCategory = 1;\n        const secondCategory = categories[indexOfSecondCategory];\n        console.log('secondCategory:', secondCategory); // secondCategory: travel\n        "}),Object(k.jsx)(S,{type:"h1",text:"Znajdowanie indeksu elementu"}),Object(k.jsxs)("p",{children:["Kiedy chcemy sprawdzi\u0107, jaki indeks ma pewna konkretna warto\u015b\u0107, mo\u017cemy to zrobi\u0107 za pomoc\u0105 metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"indexOf"})]}),Object(k.jsx)(D,{language:"js",code:"\n        const indexOfTravel = categories.indexOf('travel');\n        console.log('indexOfTravel:', indexOfTravel); // indexOfTravel: 1\n        console.log('value at indexOfTravel:', categories[indexOfTravel]); // value at indexOfTravel: travel\n        "}),Object(k.jsxs)("p",{children:["Metoda ",Object(k.jsx)(D,{inline:!0,language:"js",code:"indexOf"})," przydaje si\u0119 r\xf3wnie\u017c do sprawdzenia, czy jaka\u015b warto\u015b\u0107 znajduje si\u0119 ju\u017c w tablicy. Je\u015bli warto\u015b\u0107 nie zostanie znaleziona w tablicy, ",Object(k.jsx)(D,{inline:!0,language:"js",code:"indexOf"})," zwr\xf3ci ",Object(k.jsx)(D,{inline:!0,language:"js",code:"-1"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n        const indexOfCars = categories.indexOf('cars');\n        console.log('indexOfCars:', indexOfCars); // indexOfCars: -1\n        "}),Object(k.jsx)(S,{type:"h1",text:"Usuwanie elementu"}),Object(k.jsxs)("p",{children:["Jest kilka sposob\xf3w na usuni\u0119cie elementu z tablicy. Jednym z bardziej elastycznych jest metoda ",Object(k.jsx)(D,{inline:!0,language:"js",code:"splice"})]}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"js",code:"const allRemovedValues = myArray.splice(startAtIndex, numberOfElements);"}),Object(k.jsx)(D,{language:"js",code:"\n        categories.push('fruits');\n        categories.push('food');\n        categories.push('phones');\n        console.log('categories:', categories); // categories: ['animals', 'travel', 'fruits', 'food', 'phones']\n\n        const indexOfFruits = categories.indexOf('fruits');\n        console.log('indexOfFruits:', indexOfFruits); // indexOfFruits: 2\n\n        const removedValues = categories.splice(indexOfFruits, 1);\n        console.log('removedValues:', removedValues); // removedValues: ['fruits']\n        console.log('categories:', categories); // categories: ['animals', 'travel', 'food', 'phones']\n\n        const indexOfFood = categories.indexOf('food');\n        console.log('indexOfFood:', indexOfFood); // indexOfFood: 2\n\n        categories.splice(indexOfFood, 2);\n        console.log('categories:', categories); // categories: ['animals', 'travel']\n        "}),Object(k.jsx)(S,{type:"h1",text:"Generowanie tekstu z tablicy"}),Object(k.jsxs)("p",{children:["W prosty spos\xf3b mo\u017cemy wygenerowa\u0107 tekst, sk\u0142adaj\u0105cy si\u0119 z element\xf3w tablicy, po\u0142\u0105czonych ze sob\u0105 dowolnym ci\u0105giem tekstu (string). Wykorzystamy do tego metod\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"join"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n        const joinedText = keywords.join(', ');\n        console.log('joinedText:', joinedText); // joinedText: travel, France, Paris\n        "}),Object(k.jsxs)("p",{children:["Mo\u017cemy wykorzystywa\u0107 metod\u0119 join do szybkiego tworzenia kodu ",Object(k.jsx)(D,{language:"js",inline:!0,code:"HTML"}),", np.:"]}),Object(k.jsx)(D,{language:"js",code:"\n        const html = '<ul><li>' + keywords.join('</li><li>') + '</li></ul>';\n        console.log('html:', html);\n        // html: <ul><li>travel</li><li>France</li><li>Paris</li><li>Eiffel Tower</li></ul>\n      "}),Object(k.jsx)(S,{type:"h1",text:"Tworzenie tablicy z tekstu"}),Object(k.jsxs)("p",{children:["Operacj\u0105 odwrotn\u0105 do ",Object(k.jsx)(D,{language:"js",inline:!0,code:"join"})," jest ",Object(k.jsx)(D,{language:"js",inline:!0,code:"split"})," \u2013 dzieli tekst na elementy tablicy, u\u017cywaj\u0105c podanego ci\u0105gu znak\xf3w do podzielenia tekstu."]}),Object(k.jsx)(D,{language:"js",code:"\n        const subjects = 'cat, cactus, needle';\n        const subjectsArray = subjects.split(', ');\n        console.log('subjectsArray:', subjectsArray); // subjectsArray: ['cat', 'cactus', 'needle']\n      "}),Object(k.jsx)(S,{type:"h1",text:"Iterowanie po tablicy (p\u0119tle)"}),Object(k.jsxs)("p",{children:["Kiedy potrzebujemy wykona\u0107 jakie\u015b operacje dla wszystkich element\xf3w tablicy, mo\u017cemy wykorzysta\u0107 p\u0119tle ",Object(k.jsx)(D,{language:"js",inline:!0,code:"for"})," oraz ",Object(k.jsx)(D,{language:"js",inline:!0,code:"for...of"}),". G\u0142\xf3wnym czynnikiem wp\u0142ywaj\u0105cym na wyb\xf3r jednej z tych p\u0119tli jest kwestia indeksu \u2013 je\u015bli w p\u0119tli nie potrzebujemy korzysta\u0107 z indeksu elementu, wygodniej b\u0119dzie nam u\u017cy\u0107 p\u0119tli ",Object(k.jsx)(D,{language:"js",inline:!0,code:"for...of"}),"."]}),Object(k.jsx)("p",{children:"Przyk\u0142ady u\u017cycia p\u0119tli do iterowania po tablicach znajdziesz w rozdziale P\u0119tle."}),Object(k.jsx)(S,{type:"h1",text:"Tablice wielowymiarowe"}),Object(k.jsx)("p",{children:"Elementami tablicy mog\u0105 by\u0107 np. liczby czy teksty, ale mog\u0105 to by\u0107 r\xf3wnie\u017c obiekty i tablice. Przyk\u0142ad takiej wielopoziomowej struktury danych znajdziesz w rozdziale o Obiektach."}),Object(k.jsx)(S,{type:"h1",text:"Przydatne metody i w\u0142a\u015bciwo\u015bci"}),Object(k.jsx)(S,{type:"h5",text:"Rozmiar tablicy"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"length"})}),Object(k.jsx)("td",{children:"podaje liczb\u0119 element\xf3w w tablicy"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Znajdowanie indeksu elementu"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"indexOf()"})}),Object(k.jsx)("td",{children:"znajduje indeks podanego elementu"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Dodawanie i usuwanie element\xf3w"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"push()"})}),Object(k.jsx)("td",{children:"dodaje element na ko\u0144cu tablicy"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"pop()"})}),Object(k.jsx)("td",{children:"usuwa element z ko\u0144ca tablicy"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"shift()"})}),Object(k.jsx)("td",{children:"usuwa element z pocz\u0105tku tablicy"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"unshift()"})}),Object(k.jsx)("td",{children:"dodaje element na pocz\u0105tku tablicy"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Zmiana kolejno\u015bci element\xf3w"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"sort()"})}),Object(k.jsx)("td",{children:"sortuje elementy tablicy"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"reverse()"})}),Object(k.jsx)("td",{children:"odwraca kolejno\u015b\u0107 element\xf3w"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Modyfikacja tablicy"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"map()"})}),Object(k.jsx)("td",{children:"zmienia ka\u017cdy element tablicy za pomoc\u0105 funkcji"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"filter()"})}),Object(k.jsx)("td",{children:"filtruje elementy tablicy"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Dzielenie i \u0142\u0105czenie tablic"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"slice()"})}),Object(k.jsx)("td",{children:"tworzy now\u0105 tablic\u0119 z cz\u0119\u015bci element\xf3w"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"concat()"})}),Object(k.jsx)("td",{children:"tworzy now\u0105 tablic\u0119 z element\xf3w wielu tablic"})]})]}),Object(k.jsx)(S,{type:"h5",text:"Dzielenie i \u0142\u0105czenie tablic"}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda"}),Object(k.jsx)("th",{children:"Opis"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{inline:!0,language:"js",code:"join()"})}),Object(k.jsx)("td",{children:"\u0142\u0105czy elementy tablicy w tekst"})]})]})]})};var K=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Obiekty (objects) s\u0105 kontenerami danych, co oznacza, \u017ce mo\u017cna w nich umieszcza\u0107 wiele warto\u015bci. Zbi\xf3r warto\u015bci obiektu nazywamy w\u0142a\u015bciwo\u015bciami obiektu."}),Object(k.jsx)("p",{children:'Ka\u017cda w\u0142a\u015bciwo\u015b\u0107 musi mie\u0107 nadany unikalny klucz, kt\xf3ry jest "nazw\u0105" tej w\u0142a\u015bciwo\u015bci. Z tego wzgl\u0119du mo\u017cesz spotka\u0107 si\u0119 z okre\u015bleniem w\u0142a\u015bciwo\u015bci jako "pary klucz-warto\u015b\u0107" (key-value pair). Pod tym wzgl\u0119dem obiekt mo\u017cna por\xf3wna\u0107 do zbioru zmiennych, z kt\xf3rych ka\u017cda ma inn\u0105 nazw\u0119 i warto\u015b\u0107.'}),Object(k.jsx)("p",{children:"Obiekty stosujemy w sytuacjach, gdy chcemy, aby ka\u017cda warto\u015b\u0107 mia\u0142a przypisan\u0105 swoj\u0105 etykiet\u0119 (klucz). Cz\u0119stym zastosowaniem s\u0105 sytuacje, w kt\xf3rych potrzebujemy odwo\u0142ywa\u0107 si\u0119 do pojedynczej warto\u015bci poza p\u0119tl\u0105."}),Object(k.jsx)(S,{type:"h1",text:"Tworzenie obiektu"}),Object(k.jsxs)("p",{children:["Obiekt tworzymy za pomoc\u0105 nawias\xf3w klamrowych ",Object(k.jsx)(D,{language:"js",inline:!0,code:"{ }"}),". Mo\u017cemy stworzy\u0107 pusty obiekt, lub od razu zapisa\u0107 w nim w\u0142a\u015bciwo\u015bci."]}),Object(k.jsx)(D,{language:"js",code:"\n            const points = {};\n            console.log('points:', points); // points: {}\n\n            const playerColors = {eve: 'blue', bob: 'green'};\n            console.log('playerColors:', playerColors); // playerColors: {eve: 'blue', bob: 'green'}\n            "}),Object(k.jsx)("p",{children:"Standardowo obiekt b\u0119dziemy zapisywa\u0107 w sta\u0142ej const, aby przez przypadek nie nadpisa\u0107 ca\u0142ego obiektu. Nie jest to przeszkod\u0105, aby zmienia\u0107 zawarto\u015b\u0107 obiektu."}),Object(k.jsx)("p",{children:"Mo\u017cemy zamkn\u0105\u0107 klucz w cudzys\u0142owie, je\u015bli jest niestandardowy \u2013 np. zaczyna si\u0119 od liczby, zawiera spacje lub znaki interpunkcyjne, etc."}),Object(k.jsx)(D,{language:"javascript",code:"\n            const bestScores = {'!best!': 123, '777': 118, 'Mr. Dotts': 103};\n            console.log('bestScores:', bestScores); // bestScores: {!best!: 123, 777: 118, Mr. Dotts: 103}\n        "}),Object(k.jsx)(S,{type:"h1",text:"Dodawanie w\u0142a\u015bciwo\u015bci do obiektu"}),Object(k.jsxs)("p",{children:["Mo\u017cemy dodawa\u0107 nowe w\u0142a\u015bciwo\u015bci za pomoc\u0105 jednego z dw\xf3ch zapis\xf3w \u2013 wykorzystuj\u0105c kropk\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"."})," lub nawiasy kwadratowe ",Object(k.jsx)(D,{language:"js",inline:!0,code:"[ ]"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n            points.eve = 15;\n            points['bob'] = 17;\n            console.log('points:', points); // points: {eve: 15, bob: 17}\n        "}),Object(k.jsx)(S,{type:"h1",text:"Odczytywanie w\u0142a\u015bciwo\u015bci obiektu"}),Object(k.jsxs)("p",{children:["Odczytywanie w\u0142a\u015bciwo\u015bci z obiektu odbywa si\u0119 bardzo podobnie do ich zapisywania \u2013 r\xf3wnie\u017c do wyboru mamy kropk\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"."})," oraz nawiasy kwadratowe ",Object(k.jsx)(D,{language:"js",inline:!0,code:"[ ]"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n            const evesPoints = points.eve;\n            console.log('evesPoints:', evesPoints); // evesPoints: 15\n\n            const bobsPoints = points['bob'];\n            console.log('bobsPoints:', bobsPoints); // bobsPoints: 17\n            "}),Object(k.jsxs)("p",{children:["W przypadku, gdy klucz mamy zapisany w zmiennej, wykorzystujemy nawiasy kwadratowe ",Object(k.jsx)(D,{language:"js",inline:!0,code:"[ ]"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n            const bestScore777Key = '777';\n            const bestScore777 = bestScores[bestScore777Key];\n            console.log('bestScore777:', bestScore777); // bestScore777: 118\n            "}),Object(k.jsx)(S,{type:"h1",text:"Nadpisywanie w\u0142a\u015bciwo\u015bci"}),Object(k.jsxs)("p",{children:["Cz\u0119st\u0105 sytuacj\u0105 jest zmiana warto\u015bci dla pewnego klucza. W przyk\u0142adach u\u017cyli\u015bmy obiektu ",Object(k.jsx)(D,{inline:!0,language:"js",code:"points"})," \u2013 w poni\u017cszym przyk\u0142adzie zmienimy warto\u015bci punkt\xf3w."]}),Object(k.jsx)(D,{language:"js",code:"\n            points['eve'] = 19;\n            console.log('points:', points); // points: {eve: 19, bob: 17}\n\n            points.bob++;\n            console.log('points:', points); // points: {eve: 19, bob: 18}\n\n            const evesKey = 'eve';\n            colors[evesKey] = 'black';\n            console.log('playerColors:', playerColors); // playerColors: {eve: 'black', bob: 'green'}\n            "}),Object(k.jsx)(S,{type:"h1",text:"Czy w\u0142a\u015bciwo\u015b\u0107 istnieje"}),Object(k.jsxs)("p",{children:["Do sprawdzenia, czy istnieje w\u0142a\u015bciwo\u015b\u0107 o danej nazwie (kluczu), mo\u017cemy u\u017cy\u0107 metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"hasOwnProperty"}),", kt\xf3ra zwr\xf3ci prawd\u0119 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"true"})," lub fa\u0142sz ",Object(k.jsx)(D,{inline:!0,language:"js",code:"false"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n            const keyBobExists = points.hasOwnProperty('bob');\n            console.log('keyBobExists:', keyBobExists); // keyBobExists: true\n\n            const keyRobinExists = points.hasOwnProperty('robin');\n            console.log('keyRobinExists:', keyRobinExists); // keyRobinExists: false\n            "}),Object(k.jsx)(S,{type:"h1",text:"Iterowanie po obiekcie (p\u0119tle)"}),Object(k.jsxs)("p",{children:["Kiedy potrzebujemy wykona\u0107 jakie\u015b operacje dla wszystkich w\u0142a\u015bciwo\u015bci obiektu, mo\u017cemy wykorzysta\u0107 p\u0119tl\u0119 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"for...in"}),"."]}),Object(k.jsx)("p",{children:"Przyk\u0142ady u\u017cycia p\u0119tli do iterowania po obiekcie znajdziesz w rozdziale P\u0119tle."}),Object(k.jsx)(S,{type:"h1",text:"Metody obiektu"}),Object(k.jsx)("p",{children:"Do tej pory m\xf3wili\u015bmy o w\u0142a\u015bciwo\u015bciach obiektu. Przyj\u0119\u0142o si\u0119, \u017ce w\u0142a\u015bciwo\u015bci\u0105 nazywamy tylko tak\u0105 par\u0119 klucz-warto\u015b\u0107, w kt\xf3rej warto\u015b\u0107 nie jest funkcj\u0105."}),Object(k.jsx)("p",{children:"Dla odmiany, je\u015bli warto\u015b\u0107 jest funkcj\u0105, to tak\u0105 par\u0119 klucz-funkcja nazywamy metod\u0105. Przyk\u0142adem metody mo\u017ce by\u0107 np."}),Object(k.jsx)(D,{language:"js",code:"\n            const calculate = {\n                add: function(a, b){\n                    return a + b;\n                }\n            };\n            \n            const sumOfNumbers = calculate.add(3, 7);\n            console.log('sumOfNumbers:', sumOfNumbers); // sumOfNumbers: 10\n            "}),Object(k.jsxs)("p",{children:["Metodami s\u0105 r\xf3wnie\u017c np. ",Object(k.jsx)(D,{inline:!0,language:"js",code:"document.querySelector"}),", czy ",Object(k.jsx)(D,{inline:!0,language:"js",code:"Math.random"})," \u2013 s\u0105 one wbudowane w silnik JS przegl\u0105darki i nie musimy ich tworzy\u0107, ale r\xf3wnie\u017c je nazywamy metodami. Mo\u017cesz za\u0142o\u017cy\u0107, \u017ce metod\u0105 jest ka\u017cda funkcja, kt\xf3rej nazw\u0119 piszemy po kropce."]}),Object(k.jsx)(S,{type:"h1",text:"Obiekty wielowymiarowe"}),Object(k.jsx)("p",{children:"Warto\u015bciami w\u0142a\u015bciwo\u015bci obiektu mog\u0105 by\u0107 np. liczby czy teksty, ale r\xf3wnie\u017c obiekty i tablice. Dzi\u0119ki temu mo\u017cesz tworzy\u0107 wielopoziomowe struktury danych, takie jak:"}),Object(k.jsx)(D,{language:"js",code:"\n            const gameData = {\n                currentPlayer: 'eve',\n                players: {\n                    eve: {\n                        points: 17,\n                        color: 'blue',\n                    },\n                },\n                bestScores: [\n                    {\n                        player: '!best!',\n                        points: 123,\n                    },\n                    {\n                        player: '777',\n                        points: 118,\n                    },\n                    {\n                        player: 'Mr. Dotts',\n                        points: 103,\n                    },\n                ],\n            };\n            "}),Object(k.jsx)("p",{children:"Je\u015bli zastanawiasz si\u0119, czy w tym przyk\u0142adzie nie wstawili\u015bmy za du\u017co przecink\xf3w, przeczytaj nast\u0119pny rozdzia\u0142."}),Object(k.jsx)(S,{type:"h1",text:"Przecinki"}),Object(k.jsx)("p",{children:"W powy\u017cszym przyk\u0142adzie dodali\u015bmy przecinki nie tylko pomi\u0119dzy elementami tablic/obiekt\xf3w, ale r\xf3wnie\u017c po ostatnim z nich. Taki zapis jest poprawny w JS, i zalecany szczeg\xf3lnie w przypadku formatowania wieloliniowego, w kt\xf3rym tablica/obiekt zajmuje wi\u0119cej ni\u017c jedn\u0105 lini\u0105."}),Object(k.jsx)("p",{children:"Stawiaj\u0105c przecinek po ka\u017cdym elemencie, sprawiamy \u017ce wszystkie s\u0105 tak samo traktowane, wi\u0119c nie b\u0119dziemy mieli problemu dodaj\u0105c kolejny element lub zmieniaj\u0105c ich kolejno\u015b\u0107."}),Object(k.jsx)(S,{type:"h1",text:"Kopiowanie obiekt\xf3w"}),Object(k.jsx)("p",{children:"Cz\u0119stym problemem przy korzystaniu z obiekt\xf3w jest brak zrozumienia przypisania obiektu do sta\u0142ej/zmiennej. Sp\xf3jrz na poni\u017cszy przyk\u0142ad, w kt\xf3rym por\xf3wnujemy dwa przypadki \u2013 przypisywania liczb oraz obiekt\xf3w."}),Object(k.jsx)(D,{language:"js",code:"\n            let pointsEve = 5;\n            let pointsBob = pointsEve;\n            \n            pointsBob += 2;\n            \n            console.log('Eve:', pointsEve, 'Bob:', pointsBob); \n            // Eve: 5 Bob: 7;\n            \n            let eve = {name: 'Eve', points: 5};\n            let bob = eve;\n            \n            bob.name = 'Bob';\n            eve.points += 2;\n            \n            console.log(bob);\n            // {name: 'Bob', points: 7}\n            \n            console.log(eve);\n            // {name: 'Bob', points: 7}\n            "}),Object(k.jsxs)("p",{children:["To nie jest pomy\u0142ka \u2013 niezale\u017cnie od tego czy zmieniamy ",Object(k.jsx)(D,{inline:!0,language:"js",code:"eve"})," czy ",Object(k.jsx)(D,{inline:!0,language:"js",code:"bob"}),", zmieni\u0105 si\u0119 zar\xf3wno ",Object(k.jsx)(D,{inline:!0,language:"js",code:"eve"})," jak i ",Object(k.jsx)(D,{inline:!0,language:"js",code:"bob"}),"!"]}),Object(k.jsxs)("p",{children:["Wynika to z faktu, \u017ce w sta\u0142ej/zmiennej nie jest de facto zapisany obiekt, ale odwo\u0142anie do niego (pointer). Dlatego wyra\u017cenie ",Object(k.jsx)(D,{inline:!0,language:"js",code:"bob = eve"}),' "kopiuje" tylko odniesienie do obiektu, a nie ca\u0142y obiekt. Innymi s\u0142owy, nie mamy tutaj dw\xf3ch obiekt\xf3w, tylko jeden \u2013 do kt\xf3rego odnosi si\u0119 zar\xf3wno zmienna ',Object(k.jsx)(D,{inline:!0,language:"js",code:"eve"}),", jak i ",Object(k.jsx)(D,{inline:!0,language:"js",code:"bob"}),"."]}),Object(k.jsx)("p",{children:"W rezultacie, w obu zmiennych zapisane jest odniesienie do tego samego obiektu. Dlatego zmieniaj\u0105c kt\xf3rykolwiek z nich, zmieniamy obydwa."}),Object(k.jsx)("p",{children:'Mo\u017cemy poradzi\u0107 sobie z tym problemem klonuj\u0105c obiekt. W JS nie ma funkcji przeznaczonej stricte do klonowania obiekt\xf3w, dlatego musimy poradzi\u0107 sobie odrobin\u0119 "na oko\u0142o".'}),Object(k.jsx)(D,{language:"js",code:"\n            eve = JSON.parse(JSON.stringify(bob));\n\n            eve.name = 'Eve';\n            eve.points = 9;\n            \n            console.log(bob);\n            // {name: 'Bob', points: 7}\n            \n            console.log(eve);\n            // {name: 'Eve', points: 9}\n        "}),Object(k.jsxs)("p",{children:["Wykorzystali\u015bmy tutaj bibliotek\u0119 JSON do przekonwertowania obiektu ",Object(k.jsx)(D,{language:"js",inline:!0,code:"bob"})," na tekst (inaczej: ci\u0105g znak\xf3w, string) z danymi w formacie JSON. Nast\u0119pnie, natychmiast u\u017cyli\u015bmy ",Object(k.jsx)(D,{language:"js",inline:!0,code:"JSON.parse"})," do wygenerowania nowego obiektu, w oparciu o ten ci\u0105g znak\xf3w. W ten spos\xf3b uzyskali\u015bmy drugi obiekt, b\u0119d\u0105cy kopi\u0105 pierwszego."]}),Object(k.jsx)("p",{children:"Jest to tzw. g\u0142\u0119boka kopia (deep copy), czyli skopiuje nam obiekty na wszystkich poziomach \u2013 r\xf3wnie\u017c obiekty zapisane we w\u0142a\u015bciwo\u015bciach klonowanego obiektu."}),Object(k.jsx)(S,{type:"h1",text:"Rozszerzenie obiekt\xf3w"}),Object(k.jsxs)("p",{children:["JavaScript oferuje spos\xf3b na rozszerzanie obiekt\xf3w, tzn. \u0142\u0105czenie dw\xf3ch obiekt\xf3w w taki spos\xf3b, aby w\u0142a\u015bciwo\u015bci drugiego z nich zosta\u0142y dodane do pierwszego. S\u0142u\u017cy do tego metoda ",Object(k.jsx)(D,{language:"js",inline:!0,code:"Object.assign"}),"."]}),Object(k.jsx)(D,{language:"js",code:"\n            const favorites = {\n                food: 'hot-dog', \n                car: 'Mustang', \n                music: 'Pink Floyd',\n              };\n              \n              const newFavorites = {\n                food: 'salads', \n                sport: 'jogging',\n              };\n              \n              Object.assign(favorites, newFavorites);\n              \n              console.log(favorites);\n              /* \n              {\n                food: 'salads', \n                car: 'Mustang', \n                music: 'Pink Floyd',\n                sport: 'jogging'\n              }\n              */\n            "}),Object(k.jsxs)("p",{children:["Jak widzisz, w\u0142a\u015bciwo\u015bci kt\xf3rych nie by\u0142o w ",Object(k.jsx)(D,{language:"js",inline:!0,code:"newFavorites"})," pozosta\u0142y niezmienione, a pozosta\u0142e zosta\u0142y zmienione lub dodane."]}),Object(k.jsxs)("p",{children:["Metod\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"Object.assign"})," mo\u017cna te\u017c wykorzystywa\u0107 do tzw. p\u0142ytkiego kopiowania (shallow copy) obiekt\xf3w, je\u015bli pierwszym argumentem b\u0119dzie pusty obiekt ",Object(k.jsx)(D,{language:"js",inline:!0,code:"{ }"}),". R\xf3\u017cni si\u0119 ono od g\u0142\u0119bokiego kopiowania tym, \u017ce obiekty zapisane we w\u0142a\u015bciwo\u015bciach kopiowanego obiektu nie zostan\u0105 skopiowane. W rezultacie w\u0142a\u015bciwo\u015bci zar\xf3wno oryginalnego, jak i skopiowanego obiektu b\u0119d\u0105 wskazywa\u0107 na ten sam obiekt. Lepiej zrozumiesz to analizuj\u0105c poni\u017cszy przyk\u0142ad."]}),Object(k.jsx)(D,{language:"js",code:"\n            const johnsHouse = {\n                windows: 10, \n                rooms: {\n                  living: 1, \n                  bedroom: 3, \n                  bathroom: 2,\n                },\n              };\n              \n              const marksHouse = Object.assign({}, johnsHouse);\n              \n              marksHouse.windows = 15;\n              marksHouse.rooms.bedroom = 4;\n              \n              console.log(marksHouse);\n              /*\n              {\n                windows: 15, \n                rooms: {\n                  living: 1, \n                  bedroom: 4, \n                  bathroom: 2\n                }\n              }\n              */\n              \n              console.log(johnsHouse);\n              /*\n              {\n                windows: 10, \n                rooms: {\n                  living: 1, \n                  bedroom: 4, \n                  bathroom: 2\n                }\n              }\n              */\n            "}),Object(k.jsx)("p",{children:"W powy\u017cszym przyk\u0142adzie nie zmieniali\u015bmy \u017cadnych w\u0142a\u015bciwo\u015bci johnsHouse, wi\u0119c wydawa\u0142oby si\u0119, \u017ce powinny by\u0107 takie same jak w momencie deklaracji tego obiektu."}),Object(k.jsxs)("p",{children:["Niestety, poniewa\u017c ",Object(k.jsx)(D,{language:"js",inline:!0,code:"Object.assign"})," kopiuje p\u0142ytko, to ",Object(k.jsx)(D,{language:"js",inline:!0,code:"johnsHouse"})," i ",Object(k.jsx)(D,{language:"js",inline:!0,code:"marksHouse"})," s\u0105 dwoma osobnymi obiektami, ale ju\u017c ",Object(k.jsx)(D,{language:"js",inline:!0,code:"johnsHouse.rooms"})," i ",Object(k.jsx)(D,{language:"js",inline:!0,code:"marksHouse.rooms"})," wskazuj\u0105 na ten sam obiekt. Dlatego zmiana ",Object(k.jsx)(D,{language:"js",inline:!0,code:"marksHouse.rooms.bedroom"})," b\u0119dzie powodowa\u0107 jednoczesn\u0105 zmian\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"johnsHouse.rooms.bedroom"}),"."]})]})};var q=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Wyra\u017cenia warunkowe umo\u017cliwiaj\u0105 zdefiniowanie, jaka akcja ma zosta\u0107 wykonana, gdy zostanie spe\u0142niony (lub nie) dany warunek."}),Object(k.jsx)(S,{type:"h1",text:"If...else if...else"}),Object(k.jsxs)("p",{children:["Blok kodu wewn\u0105trz wyra\u017cenia ",Object(k.jsx)(D,{inline:!0,language:"js",code:"if"})," zostanie wykonany, gdy zostanie spe\u0142niony pierwszy warunek. Reszta warunk\xf3w nie zostanie wtedy sprawdzona. Je\u017celi pierwszy warunek nie zostanie spe\u0142niony, skrypt b\u0119dzie sprawdza\u0142 kolejne. Je\u017celi nie zostanie spe\u0142niony \u017caden z warunk\xf3w, zostanie wykonany blok kodu wewn\u0105trz wyra\u017cenia ",Object(k.jsx)(D,{inline:!0,language:"js",code:"else"}),"."]}),Object(k.jsxs)("p",{children:["Bloki ",Object(k.jsx)(D,{language:"js",inline:!0,code:"else if"})," i ",Object(k.jsx)(D,{language:"js",inline:!0,code:"else"})," s\u0105 opcjonalne."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)(D,{language:"js",code:"\n            if (condition1) {\n                // code to execute if condition1 is true\n            } else if (condition2) {\n                // code to execute if condition2 is true\n            } else {\n                // code to execute if no condition is true\n            }\n            "}),Object(k.jsx)(S,{type:"h1",text:"Short if"}),Object(k.jsx)("p",{children:"Tzw. short if nie jest wyra\u017ceniem, tylko operatorem. Jego pe\u0142na nazwa to operator warunkowy, lub operator tr\xf3jcz\u0142onowy (conditional/ternary operator). Informacje na jego temat znajdziesz w rozdziale dotycz\u0105cym operator\xf3w."}),Object(k.jsx)(S,{type:"h1",text:"Switch"}),Object(k.jsxs)("p",{children:["Wyra\u017cenie ",Object(k.jsx)(D,{language:"js",inline:!0,code:"switch"})," mo\u017cna rozumie\u0107 jako alternatywny zapis z\u0142o\u017conej instrukcji ",Object(k.jsx)(D,{language:"js",inline:!0,code:"if...else"}),". S\u0142u\u017cy on do sprawdzania ci\u0105gu warunk\xf3w i wykonania odpowiednich akcji w zale\u017cno\u015bci od ich wyniku."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)(D,{language:"js",code:"\n            const question = prompt('Do you like cats?');\n            switch (question) {\n                case 'Yes': // condition1\n                    alert('Great, me too!');  // instruction1\n                    break;\n                case 'No': // condition2\n                    alert('Really?');  // instruction2\n                    break;\n                default:\n                    alert('You did not give a clear answer.'); // instruction3\n            }\n            "}),Object(k.jsxs)("p",{children:["W powy\u017cszym kodzie wywo\u0142ujemy prompt (okienko) z pytaniem zdefiniowanym w sta\u0142ej ",Object(k.jsx)(D,{language:"js",inline:!0,code:"question"}),". Nast\u0119pnie skrypt por\xf3wnuje udzielon\u0105 odpowied\u017a ze zdefiniowanymi warunkami i podejmuje odpowiednie dzia\u0142anie:"]}),Object(k.jsxs)("ul",{children:[Object(k.jsxs)("li",{children:['je\u017celi udzielona odpowied\u017a jest r\xf3wna "Yes" (',Object(k.jsx)(D,{inline:!0,language:"js",code:"condition1"})," jest spe\u0142niony), to wykonuje ",Object(k.jsx)(D,{inline:!0,language:"js",code:"instruction1"})," i przerywa dalsze wykonywanie bloku ",Object(k.jsx)(D,{inline:!0,language:"js",code:"switch"})," (za przerwanie jest odpowiedzialna instrukcja ",Object(k.jsx)(D,{inline:!0,language:"js",code:"break"}),"),"]}),Object(k.jsxs)("li",{children:['je\u017celi udzielona odpowied\u017a jest r\xf3wna "No" (',Object(k.jsx)(D,{inline:!0,language:"js",code:"condition2"})," jest spe\u0142niony), to wykonuje ",Object(k.jsx)(D,{inline:!0,language:"js",code:"instruction2"})," i przerywa dalsze wykonywanie bloku ",Object(k.jsx)(D,{inline:!0,language:"js",code:"switch"}),","]}),Object(k.jsxs)("li",{children:["je\u017celi \u017caden warunek nie jest spe\u0142niony, wykonuje blok ",Object(k.jsx)(D,{inline:!0,language:"js",code:"default"})," (",Object(k.jsx)(D,{inline:!0,language:"js",code:"instruction3"}),") i ko\u0144czy blok ",Object(k.jsx)(D,{inline:!0,language:"js",code:"switch"}),"."]})]}),Object(k.jsxs)("p",{children:["Blok ",Object(k.jsx)(D,{inline:!0,language:"js",code:"default"})," jest opcjonalny."]})]})};var I=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"P\u0119tle (loops) pozwalaj\u0105 na wykonywanie tych samych czynno\u015bci w k\xf3\u0142ko okre\u015blon\u0105 liczb\u0119 razy, albo dla okre\u015blonego zestawu element\xf3w."}),Object(k.jsx)(S,{type:"h1",text:"P\u0119tla for"}),Object(k.jsxs)("p",{children:["P\u0119tla ",Object(k.jsx)(D,{language:"js",inline:!0,code:"for"})," pozwala wykonywa\u0107 fragment kodu wiele razy, np. 5 razy lub tyle razy, ile jest element\xf3w w tablicy."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad 1"}),Object(k.jsx)(D,{language:"js",code:"\n      for( let i = 0; i < 3; i++ ){\n        console.log('Loop iteration: ' + i);\n      }\n      "}),Object(k.jsx)("p",{children:"Powy\u017csza p\u0119tla wykona si\u0119 3 razy i tyle razy wy\u015bwietli w konsoli zdefiniowany tekst."}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad 2"}),Object(k.jsx)(D,{language:"js",code:"\n      const elementsList = ['lorem', 123, 3+'c', '999'];\n\n      for( let i = 0; i < elementsList.length; i++ ){\n        if(typeof(elementsList[i]) == 'string'){\n          console.log('Text from an element from elementsList at index ' + i + ' is: ' + elementsList[i]);\n        }\n      } \n      "}),Object(k.jsxs)("p",{children:["Powy\u017csza p\u0119tla wykona si\u0119 dla ka\u017cdego elementu w tablicy ",Object(k.jsx)(D,{language:"js",inline:!0,code:"elementsList"})," i wy\u015bwietli w konsoli warto\u015b\u0107 tego elementu."]}),Object(k.jsx)(S,{type:"h1",text:"P\u0119tla for...in"}),Object(k.jsxs)("p",{children:["P\u0119tla ",Object(k.jsx)(D,{inline:!0,language:"js",code:"for...in"})," umo\u017cliwia wykonywanie operacji dla ka\u017cdego elementu w obiekcie."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)(D,{language:"js",code:"\n      const person = {\n        name: 'John',\n        surname: 'Doe',\n        age: 35\n      };\n      \n      for( let key in person ){\n        console.log('Value at key \"' + key + '\" in person: ' + person[key]);\n      }\n      "}),Object(k.jsxs)("p",{children:["Powy\u017csza p\u0119tla wy\u015bwietli w konsoli warto\u015bci kolejnych element\xf3w obiektu ",Object(k.jsx)(D,{inline:!0,language:"js",code:"person"}),"."]}),Object(k.jsx)(S,{type:"h1",text:"P\u0119tla for...of"}),Object(k.jsxs)("p",{children:["P\u0119tla ",Object(k.jsx)(D,{inline:!0,language:"js",code:"for...of"})," umo\u017cliwia wykonywanie operacji na obiektach iterowalnych, takich jak tablice lub mapy."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad"}),Object(k.jsx)(D,{language:"js",code:"\n      const animals = ['Cat', 'Dog', 'Mouse', 'Bird'];\n\n      for( let animal of animals ){\n        console.log(animal);\n      }\n        "}),Object(k.jsxs)("p",{children:["Powy\u017csza p\u0119tla wy\u015bwietli w konsoli ka\u017cdy element zawarty w tablicy ",Object(k.jsx)(D,{inline:!0,language:"js",code:"animals"}),"."]}),Object(k.jsx)(S,{type:"h1",text:"P\u0119tla while"}),Object(k.jsxs)("p",{children:["P\u0119tla ",Object(k.jsx)(D,{language:"js",inline:!0,code:"while"})," za ka\u017cd\u0105 iteracj\u0105 sprawdza zdefiniowany warunek i wykonuje \u017c\u0105dany blok kodu tak d\u0142ugo, jak d\u0142ugo warunek jest prawdziwy."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad 1"}),Object(k.jsx)(D,{language:"js",code:"\n      let i = 0;\n\n      while (i < 10) {\n       console.log(i);\n       i++;\n      }\n      "}),Object(k.jsxs)("p",{children:["Powy\u017csza p\u0119tla b\u0119dzie iterowa\u0107 tylko tak d\u0142ugo, jak d\u0142ugo ",Object(k.jsx)(D,{language:"js",code:"i"})," b\u0119dzie mniejsze ni\u017c 10. W rezultacie wy\u015bwietli w konsoli liczby od 0 do 9."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad 2"}),Object(k.jsx)(D,{language:"js",code:"\n      let i = 15;\n\n      while (i < 10) {\n        console.log(i);\n        i++;\n      }\n      "}),Object(k.jsx)("p",{children:"W powy\u017cszej p\u0119tli warunek od razu zostanie uznany za fa\u0142szywy, wi\u0119c p\u0119tla nie zwr\xf3ci wyniku."}),Object(k.jsx)(S,{type:"h1",text:"P\u0119tla do...while"}),Object(k.jsxs)("p",{children:["P\u0119tla ",Object(k.jsx)(D,{language:"js",inline:!0,code:"do...while"})," jest podobna do powy\u017cszej \u2013 b\u0119dzie si\u0119 wykonywa\u0107 tak d\u0142ugo, jak d\u0142ugo zdefinowany warunek b\u0119dzie spe\u0142niony. R\xf3\u017cnica jest taka, \u017ce p\u0119tla ",Object(k.jsx)(D,{language:"js",inline:!0,code:"do...while"})," zawsze wykona si\u0119 przynajmniej raz, poniewa\u017c warunek (",Object(k.jsx)(D,{language:"js",inline:!0,code:"while"}),") jest sprawdzany po wykonaniu instrukcji (",Object(k.jsx)(D,{language:"js",inline:!0,code:"do"}),")."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad 1"}),Object(k.jsx)(D,{language:"js",code:"\n      let i = 0;\n\n      do {\n        console.log(i);\n        i++;\n      } while (i < 10);\n      "}),Object(k.jsxs)("p",{children:["Powy\u017csza p\u0119tla b\u0119dzie iterowa\u0107 tylko tak d\u0142ugo, jak d\u0142ugo ",Object(k.jsx)(D,{language:"js",inline:!0,code:"i"})," b\u0119dzie mniejsze ni\u017c 10. W rezultacie wy\u015bwietli w konsoli liczby od 0 do 9."]}),Object(k.jsx)(S,{type:"h5",text:"Przyk\u0142ad 2"}),Object(k.jsx)(D,{language:"js",code:"\n      let i = 15;\n\n      do {\n        console.log(i);\n        i++;\n      } while (i < 10);\n      "}),Object(k.jsxs)("p",{children:["Powy\u017csza p\u0119tla wykona jedn\u0105 iteracj\u0119 i wy\u015bwietli w konsoli wynik (warto\u015b\u0107 zmiennej ",Object(k.jsx)(D,{inline:!0,language:"js",code:"i"}),"). Nast\u0119pnie przerwie dzia\u0142anie."]})]})};var U=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Funkcje pozwalaj\u0105 na wydzielenie fragmentu kodu, kt\xf3ry mo\u017ce by\u0107 wykonywany wielokrotnie. Ka\u017cda funkcja mo\u017ce:"}),Object(k.jsxs)("ul",{children:[Object(k.jsx)("li",{children:"przyjmowa\u0107 argumenty,"}),Object(k.jsx)("li",{children:"wykonywa\u0107 jakie\u015b operacje,"}),Object(k.jsx)("li",{children:"zwraca\u0107 jak\u0105\u015b warto\u015b\u0107 w miejsce jej wykonania."})]}),Object(k.jsx)(S,{type:"h1",text:"Deklaracja funkcji"}),Object(k.jsxs)("p",{children:["Stworzenie funkcji nazywa si\u0119 jej ",Object(k.jsx)("b",{children:"deklaracj\u0105."})]}),Object(k.jsx)(S,{type:"h5",text:"Sk\u0142adnia"}),Object(k.jsx)(D,{language:"js",code:"\n        function sumThreeNumbers(firstNumber, secondNumber, thirdNumber){\n          const sum = firstNumber + secondNumber + thirdNumber;\n          return sum;\n        }\n        \n        function showWarning(message){\n          alert('Warning! ' + message);\n        }\n        "}),Object(k.jsx)("p",{children:"Wyja\u015bnienie sk\u0142adni:"}),Object(k.jsxs)("ul",{children:[Object(k.jsxs)("li",{children:[Object(k.jsx)(D,{language:"js",inline:!0,code:"exampleFunction"})," jest nazw\u0105 funkcji,"]}),Object(k.jsxs)("li",{children:["nawiasy okr\u0105g\u0142e ",Object(k.jsx)(D,{language:"js",inline:!0,code:"() )"})," okalaj\u0105 list\u0119 argument\xf3w (obowi\u0105zkowe, nawet je\u015bli nie nazywamy \u017cadnego z argument\xf3w),"]}),Object(k.jsxs)("li",{children:[Object(k.jsx)(D,{language:"js",inline:!0,code:"firstNumber"})," jest nazw\u0105 pierwszego argumentu funkcji,"]}),Object(k.jsxs)("li",{children:["analogicznie, ",Object(k.jsx)(D,{language:"js",inline:!0,code:"secondNumber"})," i ",Object(k.jsx)(D,{language:"js",inline:!0,code:"thirdNumber"})," s\u0105 kolejnymi argumentami funkcji,"]}),Object(k.jsxs)("li",{children:["nawiasy klamrowe ",Object(k.jsx)(D,{language:"js",inline:!0,code:"{ }"})," okalaj\u0105 kod wykonywany przez funkcj\u0119"]}),Object(k.jsxs)("li",{children:["warto\u015b\u0107 po s\u0142owie ",Object(k.jsx)(D,{language:"js",inline:!0,code:"return"})," zostanie zwr\xf3cona przez funkcj\u0119."]}),Object(k.jsx)("li",{children:"po deklaracji funkcji nie piszemy \u015brednika."})]}),Object(k.jsx)(S,{type:"h1",text:"Wywo\u0142anie funkcji"}),Object(k.jsx)("p",{children:"Deklaracja funkcji nie wykonuje \u017cadnych operacji \u2013 dopiero po wywo\u0142aniu funkcji zostanie wykonany zawarty w niej kod. Wywo\u0142uj\u0105c funkcj\u0119, mo\u017cemy przekaza\u0107 jej tak\u0105 liczb\u0119 argument\xf3w, jakiej spodziewa si\u0119 funkcja."}),Object(k.jsx)(D,{language:"js",code:"\n        const sumOfNumbers = sumThreeNumbers(7, 14, 21);\n        console.log('sumOfNumbers:', sumOfNumbers); // sumOfNumbers: 42\n        "}),Object(k.jsx)("p",{children:"Nie ka\u017cda funkcja b\u0119dzie zwraca\u0142a jakiekolwiek dane, lub zwracane przez ni\u0105 warto\u015bci mog\u0105 nie by\u0107 dla nas przydatne. W takim przypadku nie musimy zapisywa\u0107 (ani w inny spos\xf3b wykorzystywa\u0107) warto\u015bci zwracanych przez funkcj\u0119."}),Object(k.jsx)(D,{language:"js",code:"\n        showWarning('This site uses cookies!');\n        "}),Object(k.jsx)(S,{type:"h1",text:"Domy\u015blne warto\u015bci argument\xf3w"}),Object(k.jsx)("p",{children:"Czasami mo\u017cemy potrzebowa\u0107 funkcji, kt\xf3ra b\u0119dzie mia\u0142a domy\u015blne warto\u015bci argument\xf3w. Pozwoli nam to przewa\u017cnie wywo\u0142ywa\u0107 funkcj\u0119 bez argument\xf3w (lub z mniejsz\u0105 ich liczb\u0105), a tylko czasami podawa\u0107 wszystkie argumenty."}),Object(k.jsxs)("p",{children:["We\u017amy na przyk\u0142ad funkcj\u0119, kt\xf3ra liczy mar\u017c\u0119 doliczan\u0105 do ceny produktu. Domy\u015blnie mar\u017ca ma wynosi\u0107 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"10%"}),", ale w poszczeg\xf3lnych przypadkach mo\u017ce by\u0107 wi\u0119ksza lub mniejsza."]}),Object(k.jsx)(D,{language:"js",code:"\n        function addProfitMargin(price, profitMargin = 0.1){\n            return price + price * profitMargin;\n        }\n            \n            const applePrice = addProfitMargin(1);\n            const milkPrice = addProfitMargin(5, 0.05);\n            const chocolatePrice = addProfitMargin(10, 0.3);\n            \n            console.log('applePrice:', applePrice); // applePrice: 1.1\n            console.log('milkPrice:', milkPrice); // milkPrice: 5.25\n            console.log('chocolatePrice:', chocolatePrice); // chocolatePrice: 13\n        "}),Object(k.jsx)("p",{children:"Pami\u0119taj, \u017ce argumenty s\u0105 podawane po kolei, pocz\u0105wszy od pierwszego. W zwi\u0105zku z tym zwykle nie ma sensu podanie domy\u015blnej warto\u015bci np. dla pierwszego argumentu, podczas gdy kt\xf3ry\u015b z kolejnych argument\xf3w nie ma domy\u015blnej warto\u015bci."}),Object(k.jsx)(S,{type:"h1",text:"Funkcje anonimowe"}),Object(k.jsx)("p",{children:"Do tej pory prezentowali\u015bmy przyk\u0142ady funkcji nazwanych \u2013 w sk\u0142adni deklaracji funkcji wyst\u0119powa\u0142a jej nazwa. Cz\u0119sto w kodzie JS zdarzaj\u0105 si\u0119 sytuacje, w kt\xf3rych nie mamy potrzeby nazwania funkcji, poniewa\u017c u\u017cyjemy jej tylko raz. \u015awietnym przyk\u0142adem mo\u017ce by\u0107 handler eventu."}),Object(k.jsx)("p",{children:"Zobaczmy najpierw przyk\u0142ad handlera eventu zadeklarowanego jako funkcja nazwana:"}),Object(k.jsx)(D,{language:"js",code:"\n        const menuLink = document.querySelector('.menu-link');\n\n        function menuClickHandler(event){\n          event.preventDefault();\n          event.currentTarget.classList.toggle('active');\n        }\n        \n        menuLink.addEventListener('click', menuClickHandler);\n        "}),Object(k.jsx)("p",{children:"Wykorzystuj\u0105c funkcj\u0119 anonimow\u0105 mo\u017cemy zastosowa\u0107 bardziej zwi\u0119z\u0142\u0105 form\u0119:"}),Object(k.jsx)(D,{language:"js",code:"\n        const menuLink = document.querySelector('.menu-link');\n\n        menuLink.addEventListener('click', function(event){\n          event.preventDefault();\n          event.currentTarget.classList.toggle('active');\n        });\n        "}),Object(k.jsx)("p",{children:"Innym przyk\u0142adem zastosowania funkcji anonimowych mo\u017ce by\u0107 potraktowanie funkcji jako warto\u015bci, i przypisanie jej do zmiennej, sta\u0142ej, w\u0142a\u015bciwo\u015bci obiektu, lub jako element tablicy. Zobaczmy, jak wygl\u0105da\u0142by przyk\u0142ad przechowywania paru funkcji w obiekcie."}),Object(k.jsx)(D,{language:"js",code:"\n        const app = {};\n\n        app.init = function(){\n          app.initMenuLink();\n          app.cookieMessageTimeout();\n        };\n        \n        app.initMenuLink = function(){\n          const menuLink = document.querySelector('.menu-link');\n        \n          menuLink.addEventListener('click', function(event){\n            event.preventDefault();\n            event.currentTarget.classList.toggle('active');\n          });\n        };\n        \n        app.cookieMessageTimeout = function(){\n          const cookieMessage = document.querySelector('.cookie-message');\n        \n          setTimeout(function(){\n            cookieMessage.classList.remove('visible');\n          }, 5000);\n        };\n        \n        app.init();\n        "}),Object(k.jsxs)("p",{children:["W ten spos\xf3b uporz\u0105dkowali\u015bmy funkcje inicjuj\u0105ce dzia\u0142anie strony w jednym obiekcie ",Object(k.jsx)(D,{inline:!0,language:"js",code:"app"}),". Zwr\xf3\u0107 uwag\u0119, \u017ce dopiero ostatnia linia powy\u017cszego przyk\u0142adu \u2013 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"app.init();"})," \u2013 jest wywo\u0142aniem funkcji. Z kolei funkcja zapisana we w\u0142a\u015bciwo\u015bci ",Object(k.jsx)(D,{inline:!0,language:"js",code:"app.init"})," wykonuje pozosta\u0142e dwie funkcje."]}),Object(k.jsx)(S,{type:"h1",text:"Funkcje strza\u0142kowe"}),Object(k.jsxs)("p",{children:["Kolejnym uproszczeniem sk\u0142adni JS s\u0105 funkcje strza\u0142kowe. S\u0105 one bardzo podobne do funkcji anonimowych, z dwiema kluczowymi r\xf3\u017cnicami. Zacznijmy jednak od najprostszej formy \u2013 por\xf3wnajmy cztery przyk\u0142ady wykorzystania metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"filter"})," na tablicach. Ka\u017cdy z nich zadzia\u0142a tak samo i r\xf3\u017cni si\u0119 tylko zastosowan\u0105 sk\u0142adni\u0105."]}),Object(k.jsx)(D,{language:"js",code:"\n        const numbers = [1, 3, 4, 7, 8, 13, 16, 20];\n\n        // EXAMPLE 1\n        \n        function filteringFunction(item){\n          return item < 5;\n        };\n        \n        const smallNumbers1 = numbers.filter(filteringFunction);\n        \n        console.log('smallNumbers1:', smallNumbers1); // smallNumbers1: [1, 3, 4]\n        \n        // EXAMPLE 2\n        \n        const smallNumbers2 = numbers.filter(function(item){\n          return item < 5;\n        });\n        \n        console.log('smallNumbers2:', smallNumbers2); // smallNumbers2: [1, 3, 4]\n        \n        // EXAMPLE 3\n        \n        const smallNumbers3 = numbers.filter((item) => {\n          return item < 5;\n        });\n        \n        console.log('smallNumbers3:', smallNumbers3); // smallNumbers3: [1, 3, 4]\n        \n        // EXAMPLE 4\n        \n        const smallNumbers4 = numbers.filter(item => item < 5);\n        \n        console.log('smallNumbers4:', smallNumbers4); // smallNumbers4: [1, 3, 4]\n        "}),Object(k.jsx)("p",{children:"W powy\u017cszych przyk\u0142adach u\u017cyli\u015bmy:"}),Object(k.jsxs)("ul",{children:[Object(k.jsx)("li",{children:"przyk\u0142ad 1. \u2013 funkcja nazwana,"}),Object(k.jsx)("li",{children:"przyk\u0142ad 2. \u2013 funkcja anonimowa,"}),Object(k.jsx)("li",{children:"przyk\u0142ad 3. \u2013 funkcja strza\u0142kowa z blokiem operacji,"}),Object(k.jsx)("li",{children:"przyk\u0142ad 4. \u2013 funkcja strza\u0142kowa zwracaj\u0105ca warto\u015b\u0107."})]}),Object(k.jsxs)("p",{children:["Jak widzisz, przyk\u0142ady 2. i 3. tylko nieznacznie si\u0119 od siebie r\xf3\u017cni\u0105. Pozbyli\u015bmy si\u0119 s\u0142owa ",Object(k.jsx)(D,{language:"js",inline:!0,code:"function"}),", a dodali\u015bmy operator ",Object(k.jsx)(D,{language:"js",inline:!0,code:"=>"})," pomi\u0119dzy list\u0105 argument\xf3w, a blokiem operacji wykonywanych przez funkcj\u0119. Jest to jak najbardziej poprawne zastosowanie funkcji strza\u0142kowej. U\u017cywa si\u0119 go jednak g\u0142\xf3wnie w sytuacjach, kiedy funkcja ma wykonywa\u0107 jakie\u015b operacje inne ni\u017c samo zwr\xf3cenie warto\u015bci."]}),Object(k.jsx)("p",{children:"Dlatego w tym zastosowaniu najcz\u0119\u015bciej u\u017cywa si\u0119 sk\u0142adni zaprezentowanej w przyk\u0142adzie 4. Charakteryzuje j\u0105:"}),Object(k.jsxs)("ul",{children:[Object(k.jsx)("li",{children:"brak nawias\xf3w okr\u0105g\u0142ych, kt\xf3re mo\u017cna pomin\u0105\u0107, je\u015bli deklarujemy tylko i dok\u0142adnie jeden argument,"}),Object(k.jsxs)("li",{children:["brak nawias\xf3w klamrowych, kt\xf3rych pomini\u0119cie oznacza, \u017ce wynik operacji po ",Object(k.jsx)(D,{inline:!0,language:"js",code:"=>"})," ma zosta\u0107 zwr\xf3cony przez t\u0119 funkcj\u0119."]})]}),Object(k.jsx)("p",{children:"Funkcje strza\u0142kowe, podobnie jak anonimowe, r\xf3wnie\u017c mo\u017cna zapisywa\u0107 w zmiennych (lub sta\u0142ych, obiektach i tablicach) oraz wykorzystywa\u0107 domy\u015blne warto\u015bci argument\xf3w."}),Object(k.jsxs)("p",{children:["Sp\xf3jrz, jak mo\u017cemy zapisa\u0107 funkcj\u0119 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"addProfitMargin"})," z wcze\u015bniejszego przyk\u0142adu dotycz\u0105cego domy\u015blnych warto\u015bci argument\xf3w."]}),Object(k.jsx)(D,{language:"js",code:"\n        const addProfitMargin = (price, profitMargin = 0.1) => price + price * profitMargin;\n\n        console.log('10 * 1.1', addProfitMargin(10)); // 11\n        console.log('10 * 1.5', addProfitMargin(10, 0.5)); // 15\n        "}),Object(k.jsxs)("p",{children:["Tak wi\u0119c, funkcje strza\u0142kowe od anonimowych odr\xf3\u017cnia ",Object(k.jsx)("b",{children:"przede wszystkim sk\u0142adnia"}),". Mo\u017cemy zastosowa\u0107 zar\xf3wno sk\u0142adni\u0119 z blokiem operacji ",Object(k.jsx)(D,{language:"js",inline:!0,code:"{ }"}),", jak i skr\xf3tow\u0105 sk\u0142adni\u0119 zwracaj\u0105c\u0105 warto\u015b\u0107 po ",Object(k.jsx)(D,{language:"js",inline:!0,code:"=>"}),"."]}),Object(k.jsxs)("p",{children:[Object(k.jsx)("b",{children:"Drug\u0105 kluczow\u0105 r\xf3\u017cnic\u0105"})," jest znaczenie s\u0142owa ",Object(k.jsx)(D,{inline:!0,language:"js",code:"this"}),". Ka\u017cda funkcja, w tym funkcja anonimowa, zmienia obiekt zapisany w ",Object(k.jsx)(D,{inline:!0,language:"js",code:"this"}),". Funkcja strza\u0142kowa nie zmienia jego znaczenia. Jest to bardzo istotna r\xf3\u017cnica np. w przypadku handler\xf3w event\xf3w. Je\u015bli jest nim funkcja nazwana lub anonimowa, s\u0142owo ",Object(k.jsx)(D,{inline:!0,language:"js",code:"this"})," b\u0119dzie w niej oznacza\u0142o element, dla kt\xf3rego zosta\u0142 dodany ten handler. Je\u015bli natomiast u\u017cyjemy funkcji strza\u0142kowej, s\u0142owo ",Object(k.jsx)(D,{inline:!0,language:"js",code:"this"})," w handlerze b\u0119dzie oznacza\u0142o to samo, co poza handlerem."]})]})};var V=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Klasa (class) jest szablonem obiektu. Dzi\u0119ki niej mo\u017cemy stworzy\u0107 wiele instancji (instance), kt\xf3re b\u0119d\u0105 dzia\u0142a\u0107 wedle tego szablonu."}),Object(k.jsx)(S,{type:"h1",text:"Tworzenie klasy"}),Object(k.jsxs)("p",{children:["Klas\u0119 tworzymy za pomoc\u0105 s\u0142owa kluczowego ",Object(k.jsx)(D,{language:"js",inline:!0,code:"class"}),". Wewn\u0105trz jej definicji mo\u017cemy w skr\xf3towy spos\xf3b deklarowa\u0107 jej metody (methods) bez u\u017cycia s\u0142owa ",Object(k.jsx)(D,{language:"js",inline:!0,code:"function"}),", jak pokazali\u015bmy w poni\u017cszym przyk\u0142adzie."]}),Object(k.jsxs)("p",{children:["Przy tworzeniu klasy, kluczowe jest wykorzystanie obiektu ",Object(k.jsx)(D,{inline:!0,language:"js",code:"this"}),", kt\xf3ry reprezentuje pojedyncz\u0105 instancj\u0119, czyli obiekt stworzony na podstawie klasy. Dzi\u0119ki temu mo\u017cemy danej instancji przypisywa\u0107 w\u0142a\u015bciwo\u015bci (warto\u015bci, dane) oraz uruchamia\u0107 jej metody \u2013 zwykle odziedziczone z klasy. Dla \u0142atwiejszego zrozumienia przyk\u0142ad\xf3w b\u0119dziemy zapisywa\u0107 obiekt ",Object(k.jsx)(D,{inline:!0,language:"js",code:"this"})," w sta\u0142ej ",Object(k.jsx)(D,{inline:!0,language:"js",code:"thisEmployee"})," (ten pracownik)."]}),Object(k.jsxs)("p",{children:["Kolejnym charakterystycznym elementem klasy jest metoda ",Object(k.jsx)(D,{inline:!0,language:"js",code:"constructor"})," \u2013 ta funkcja jest uruchamiana zawsze w momencie tworzenia nowej instancji i s\u0142u\u017cy do jej zainicjowania. Argumenty przekazane przy tworzeniu nowej instancji s\u0105 dost\u0119pne wy\u0142\u0105cznie w konstruktorze \u2013 dlatego wa\u017cne jest, aby zapisa\u0107 je do w\u0142a\u015bciwo\u015bci instancji. Dzi\u0119ki temu, te warto\u015bci b\u0119d\u0105 dost\u0119pne w innych metodach."]}),Object(k.jsx)(D,{language:"js",code:"\n      class Employee{\n        constructor(name, age, yearlySalary){\n          const thisEmployee = this;\n      \n          thisEmployee.name = name;\n          thisEmployee.age = age;\n          thisEmployee.yearlySalary =yearlySalary;\n      \n          thisEmployee.calculateMonthlySalary();\n        }\n      \n        calculateMonthlySalary(){\n          const thisEmployee = this;\n      \n          thisEmployee.monthlySalary = thisEmployee.yearlySalary / 12;\n        }\n      \n        showDetails(){\n          const thisEmployee = this;\n      \n          console.log(thisEmployee.name, thisEmployee.age, thisEmployee.monthlySalary);\n        }\n      }\n      "}),Object(k.jsx)(S,{type:"h1",text:"Tworzenie instancji"}),Object(k.jsxs)("p",{children:["Instancj\u0119 klasy tworzymy za pomoc\u0105 s\u0142owa kluczowego ",Object(k.jsx)(D,{inline:!0,language:"js",code:"new"}),", nazwy klasy, oraz argument\xf3w przekazywanych do konstruktora klasy."]}),Object(k.jsx)(D,{language:"js",code:"\n      const john = new Employee('John Doe', 20, 12000);\n\n      console.log('john:', john);\n      // john: Employee {name: \"John Doe\", age: 20, yearlySalary: 12000, monthlySalary: 1000}\n      \n      console.log('john.age:', john.age);\n      // john.age: 20\n      \n      john.showDetails(); \n      // 'John Doe', 20, 1000\n      \n      const jane = new Employee('Jane Stevens', 35, 18000);\n      \n      console.log('jane:', jane); \n      // jane: Employee {name: \"Jane Stevens\", age: 35, yearlySalary: 18000, monthlySalary: 1500}\n      \n      console.log('jane.age:', jane.age);\n      // jane.age: 35\n      \n      jane.showDetails(); \n      // 'Jane Stevens', 35, 1500\n      "}),Object(k.jsx)(S,{type:"h1",text:"Zmiana w\u0142a\u015bciwo\u015bci instancji"}),Object(k.jsx)("p",{children:"Jak widzieli\u015bmy w powy\u017cszym przyk\u0142adzie, ka\u017cda instancja ma w\u0142asne w\u0142a\u015bciwo\u015bci. Mo\u017cemy je dowolnie zmienia\u0107, nie wp\u0142ywaj\u0105c na pozosta\u0142e instancje."}),Object(k.jsx)(D,{language:"js",code:"\n      console.log('john.age:', john.age);\n      // john.age: 20\n      console.log('jane.age:', jane.age);\n      // jane.age: 35\n      \n      john.age++;\n      \n      console.log('john.age:', john.age);\n      // john.age: 21 <== CHANGED\n      console.log('jane.age:', jane.age);\n      // jane.age: 35\n      "})]})};var X=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsxs)("p",{children:["Funkcja ",Object(k.jsx)(D,{language:"js",inline:!0,code:"fetch"})," s\u0142u\u017cy do wysy\u0142ania zapyta\u0144 do serwera. Dzi\u0119ki niej mo\u017cemy realizowa\u0107 po\u0142\u0105czenia AJAX, czyli kontaktowa\u0107 si\u0119 z serwerem bez prze\u0142adowania strony."]}),Object(k.jsx)(S,{type:"h1",text:"Metody zapyta\u0144"}),Object(k.jsx)("p",{children:"Istniej\u0105 r\xf3\u017cne metody zapyta\u0144, kt\xf3re r\xf3\u017cni\u0105 si\u0119 swoim przeznaczeniem. API zwykle rozpoznaje metod\u0119 zapytania, aby odpowiednio na nie zareagowa\u0107."}),Object(k.jsxs)("table",{children:[Object(k.jsxs)("tr",{children:[Object(k.jsx)("th",{children:"Metoda zapytania"}),Object(k.jsx)("th",{children:"Przeznaczenie"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"GET"})}),Object(k.jsxs)("td",{children:["pobieranie danych \u2013 ",Object(k.jsx)("b",{children:"domy\u015blna metoda"})]})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"POST"})}),Object(k.jsx)("td",{children:"tworzenie nowego elementu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"PUT"})}),Object(k.jsx)("td",{children:"nadpisanie elementu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"PATCH"})}),Object(k.jsx)("td",{children:"nadpisanie wybranych w\u0142a\u015bciwo\u015bci elementu"})]}),Object(k.jsxs)("tr",{children:[Object(k.jsx)("td",{children:Object(k.jsx)(D,{language:"js",inline:!0,code:"DELETE"})}),Object(k.jsx)("td",{children:"usuwanie elementu"})]})]}),Object(k.jsx)(S,{type:"h1",text:"Wysy\u0142anie zapytania"}),Object(k.jsxs)("p",{children:["Wykorzystuj\u0105c domy\u015blne parametry zapytania, mo\u017cemy u\u017cy\u0107 funkcji ",Object(k.jsx)(D,{inline:!0,language:"js",code:"fetch"})," podaj\u0105c wy\u0142\u0105cznie adres, z kt\xf3rego maj\u0105 by\u0107 pobrane dane."]}),Object(k.jsx)(D,{language:"js",code:"\n        const url = 'https://reqres.in/api/users';\n\n        const request = fetch(url);\n        "}),Object(k.jsxs)("p",{children:["W sta\u0142ej ",Object(k.jsx)(D,{inline:!0,language:"js",code:"request"}),' znajdzie si\u0119 tzw. Promise (obietnica). Nie zag\u0142\u0119biaj\u0105c si\u0119 za bardzo w temat Promise, wyja\u015bnimy tylko, \u017ce jest to obiekt s\u0142u\u017c\u0105cy do obs\u0142ugi kodu asynchronicznego. W naszym przypadku pos\u0142u\u017cy nam do "pod\u0142\u0105czenia" funkcji, kt\xf3ra wykona si\u0119 po otrzymaniu odpowiedzi z serwera.']}),Object(k.jsx)(S,{type:"h1",text:"Odczytywanie odpowiedzi serwera"}),Object(k.jsxs)("p",{children:["Kiedy serwer odpowie na nasze zapytanie, najcz\u0119\u015bciej b\u0119dziemy chcieli odczyta\u0107 jego odpowied\u017a. Mo\u017cemy to zrobi\u0107 za pomoc\u0105 funkcji przekazanej metodzie ",Object(k.jsx)(D,{inline:!0,language:"js",code:"then"}),", wykonanej na zapytaniu ",Object(k.jsx)(D,{inline:!0,language:"js",code:"request"}),". W tym celu, kontynuuj\u0105c poprzedni przyk\u0142ad, mo\u017cemy zareagowa\u0107 na zapytanie."]}),Object(k.jsxs)("p",{children:["Nale\u017cy pami\u0119ta\u0107, \u017ce odpowied\u017a jak\u0105 otrzymamy jest obiektem typu ",Object(k.jsx)(D,{inline:!0,language:"js",code:"Response"}),", kt\xf3rego nie mo\u017cemy wprost odczyta\u0107. Nale\u017cy na niej wykona\u0107 metod\u0119 ",Object(k.jsx)(D,{inline:!0,language:"js",code:"text"})," lub ",Object(k.jsx)(D,{inline:!0,language:"js",code:"json"}),", aby uzyska\u0107 warto\u015b\u0107 gotow\u0105 do odczytu. Te metody r\xf3wnie\u017c zwracaj\u0105 Promise, wi\u0119c ponownie musimy u\u017cy\u0107 metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"then"}),", aby odczyta\u0107 sparsowan\u0105 odpowied\u017a serwera."]}),Object(k.jsx)(D,{language:"js",code:"\n        const parseServerResponse = request.then(function(rawResponse){\n          return rawResponse.json();\n        })\n        \n        parseServerResponse.then(function(parsedResponse){\n          console.log(parsedResponse)\n        });\n        "}),Object(k.jsx)(S,{type:"h1",text:"Skr\xf3towy zapis fetch"}),Object(k.jsx)("p",{children:"W praktyce, developerzy raczej nie stosuj\u0105 powy\u017cszego zapisu, w kt\xf3rym zachowali\u015bmy ka\u017cdy Promise do osobnej sta\u0142ej/zmiennej. Zamiast tego, stosuje si\u0119 tzw. chaining, czyli \u0142\u0105czenie kilku metod ze sob\u0105 za pomoc\u0105 kropki. Dla zwi\u0119kszenia czytelno\u015bci, wszystkie metody maj\u0105 wi\u0119ksze wci\u0119cie w kodzie."}),Object(k.jsx)(D,{language:"js",code:"\n        const url = 'https://reqres.in/api/users';\n\n        fetch(url)\n          .then(function(rawResponse){\n            return rawResponse.json();\n          })\n          .then(function(parsedResponse){\n            console.log(parsedResponse)\n          });\n        "}),Object(k.jsxs)("p",{children:["Mo\u017cesz powy\u017cszy przyk\u0142ad wklei\u0107 do konsoli w narz\u0119dziach developerskich, aby zobaczy\u0107 co zostanie wy\u015bwietlone przez ",Object(k.jsx)(D,{language:"js",inline:!0,code:"console.log"}),". U\u017cywamy tutaj REQ RES, kt\xf3re podaje zmy\u015blone dane u\u017cytkownik\xf3w. S\u0142u\u017cy ono w\u0142a\u015bnie do tego celu, w jakim z niego korzystamy \u2013 do test\xf3w i nauki."]}),Object(k.jsx)("p",{children:"U\u017cywaj\u0105c tzw. funkcji strza\u0142kowych mo\u017cemy skr\xf3ci\u0107 powy\u017cszy przyk\u0142ad jeszcze bardziej:"}),Object(k.jsx)(D,{language:"js",code:"\n        const url = 'https://reqres.in/api/users';\n\n        fetch(url)\n          .then(rawResponse => rawResponse.json())\n          .then(parsedResponse => {\n            console.log(parsedResponse)\n          });\n        "}),Object(k.jsx)(S,{type:"h1",text:"Opcje fetch"}),Object(k.jsxs)("p",{children:["Opr\xf3cz domy\u015blnego zapytania metod\u0105 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"GET"}),", fetch umo\u017cliwia r\xf3wnie\u017c wysy\u0142anie innych rodzaj\xf3w zapyta\u0144, a tak\u017ce zmiany ich nag\u0142\xf3wk\xf3w. Mo\u017ce to by\u0107 potrzebne do poprawnej komunikacji z API."]}),Object(k.jsx)(D,{language:"js",code:"\n        const url = 'https://reqres.in/api/users';\n\n        const payload = {\n          name: 'Mack Tubby', \n          job: 'Top Cat',\n        };\n        \n        const options = {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify(payload),\n        };\n        \n        fetch(url, options)\n          .then(rawResponse => rawResponse.json())\n          .then(parsedResponse => {\n            console.log(parsedResponse)\n          });\n        "}),Object(k.jsxs)("p",{children:["Obiekt ",Object(k.jsx)(D,{inline:!0,language:"js",code:"payload"})," (\u0142adunek) zawiera dane, kt\xf3re chcemy wys\u0142a\u0107 do serwera. Obiekt ",Object(k.jsx)(D,{inline:!0,language:"js",code:"options"})," zawiera informacje:"]}),Object(k.jsxs)("ul",{children:[Object(k.jsxs)("li",{children:["o u\u017cyciu metody ",Object(k.jsx)(D,{inline:!0,language:"js",code:"POST"}),","]}),Object(k.jsx)("li",{children:"o dodaniu do nag\u0142\xf3wk\xf3w zapytania informacji, \u017ce b\u0119dziemy wysy\u0142a\u0107 dane w formacie JSON,"}),Object(k.jsx)("li",{children:"dane, kt\xf3re chcemy wys\u0142a\u0107, sformatowane jako JSON."})]}),Object(k.jsxs)("p",{children:["Serwer, po otrzymaniu tego zapytania, zapisze te informacje jako nowego u\u017cytkownika, dodaj\u0105c do przes\u0142anych informacji ",Object(k.jsx)(D,{language:"js",inline:!0,code:"id"})," oraz dat\u0119 utworzenia."]}),Object(k.jsx)(S,{type:"h1",text:"Wychwytywanie b\u0142\u0119d\xf3w po\u0142\u0105czenia"}),Object(k.jsxs)("p",{children:["Do ",Object(k.jsx)(D,{language:"js",inline:!0,code:"fetch"})," mo\u017cemy doda\u0107 r\xf3wnie\u017c metod\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"catch"}),", kt\xf3ra wykona przekazan\u0105 jej funkcj\u0119 w przypadku, kiedy nast\u0105pi b\u0142\u0105d po\u0142\u0105czenia \u2013 np. kiedy wpiszemy nieistniej\u0105c\u0105 domen\u0119, lub nasz komputer straci po\u0142\u0105czenie z internetem."]}),Object(k.jsx)(D,{language:"js",code:"\n        const urlWithBadDomain = 'https://not-really-a-website.nope/api/users';\n\n        fetch(urlWithBadDomain)\n          .then(rawResponse => rawResponse.json())\n          .then(parsedResponse => {\n            console.log(parsedResponse)\n          })\n          .catch((error) => {\n            console.warn('CONNECTION ERROR', error)\n          });\n        "}),Object(k.jsxs)("p",{children:["To jednak nie wystarczy, aby poprawnie obs\u0142u\u017cy\u0107 b\u0142\u0119dy, kiedy po\u0142\u0105czenie zosta\u0142o nawi\u0105zane, ale serwer zwr\xf3ci\u0142 np. kod ",Object(k.jsx)(D,{language:"js",inline:!0,code:"404"})," (nie znaleziono strony). W tym celu musimy u\u017cy\u0107 nieco bardziej skomplikowanego rozwi\u0105zania."]}),Object(k.jsx)(D,{language:"js",code:"\n        const urlWithBadDomain = 'https://reqres.in/wrong/page';\n\n        fetch(urlWithBadDomain)\n          .then(rawResponse => {\n            if (rawResponse.status >= 200 && rawResponse.status < 300) {\n              return rawResponse.json();\n            } else {\n              return Promise.reject(rawResponse.status + ' ' + rawResponse.statusText);\n            }\n          })\n          .then(parsedResponse => {\n            console.log(parsedResponse)\n          })\n          .catch((error)=>{\n            console.log('CONNECTION ERROR', error)\n          });\n        "}),Object(k.jsxs)("p",{children:["Taki zapis obs\u0142uguje wszystkie ",Object(k.jsx)("a",{className:"exampleLink",href:"https://pl.wikipedia.org/wiki/Kod_odpowiedzi_HTTP",target:"_blank",rel:"noreferrer",children:"kody odpowiedzi HTTP"}),", kt\xf3re informuj\u0105 o jakimkolwiek b\u0142\u0119dzie."]})]})};var Y=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsxs)("p",{children:["JSON jest formatem zapisu danych, cz\u0119sto u\u017cywanym w programowaniu JS. Z tego wzgl\u0119du posiada w\u0142asn\u0105 bibliotek\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"JSON"}),", kt\xf3ra pomaga nam w konwertowaniu tablicy lub obiektu na JSON i vice versa."]}),Object(k.jsx)(S,{type:"h1",text:"Generowanie JSONa"}),Object(k.jsxs)("p",{children:["Generujemy kod JSON wykonuj\u0105c metod\u0119 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"JSON.stringify"}),", podaj\u0105c jej za argument tablic\u0119 lub obiekt, kt\xf3ry ma by\u0107 przekonwertowany na JSON."]}),Object(k.jsx)(D,{language:"js",code:'\n      const products = [\n        {\n          id: 1, \n          name: \'Pencil\', \n          attributes: {\n            material: \'wood/graphite\',\n          }, \n        },\n        {\n          id: 2, \n          name: \'Pen\', \n          attributes: {\n            material: \'metal/plastic\',\n          },\n        },\n      ];\n      \n      const productsJSON = JSON.stringify(products);\n      console.log(productsJSON); // [{"id":1,"name":"Pencil","attributes":{"material":"wood/graphite"}},{"id":2,"name":"Pen","attributes":{"material":"metal/plastic"}}]\n      '}),Object(k.jsx)("p",{children:"Otrzymujemy w ten spos\xf3b ci\u0105g znak\xf3w w formacie JSON. Nie mo\u017cemy bezpo\u015brednio korzysta\u0107 z danych w tym formacie, czyli np. sprawdzi\u0107 nazwy pierwszego produktu. Mo\u017cemy za to dane w formacie JSON zapisa\u0107 lub wys\u0142a\u0107 jako tekst."}),Object(k.jsx)(S,{type:"h1",text:"Parsowanie JSONa"}),Object(k.jsxs)("p",{children:["Odwrotn\u0105 operacj\u0105 jest parsowanie \u2013 metodzie ",Object(k.jsx)(D,{language:"js",inline:!0,code:"JSON.parse"})," przekazujemy JSON, a zwraca on obiekt lub tablic\u0119 z danymi."]}),Object(k.jsx)(D,{language:"js",code:'\n      const productsParsed = JSON.parse(productsJSON);\n      console.log(productsParsed[0].name); // "Pencil"\n      '}),Object(k.jsx)("p",{children:"Parsujemy dane w sytuacji, kiedy otrzymali\u015bmy dane w formacie JSON i chcemy zacz\u0105\u0107 z nich korzysta\u0107."}),Object(k.jsx)(S,{type:"h1",text:'"\u0141adne" formatowanie JSONa'}),Object(k.jsx)("p",{children:"Czytanie danych w formacie JSON nie nale\u017cy do przyjemnych, kiedy s\u0105 one zapisane w domy\u015blnym, jedno-linijkowym formacie."}),Object(k.jsx)(D,{language:"js",code:'\n      console.log(JSON.stringify(products)); \n      // [{"id":1,"name":"Pencil","attributes":{"material":"wood/graphite"}},{"id":2,"name":"Pen","attributes":{"material":"metal/plastic"}}]\n      '}),Object(k.jsxs)("p",{children:["Je\u015bli jednak, metodzie ",Object(k.jsx)(D,{language:"js",inline:!0,code:"JSON.stringify"})," podamy jako drugi argument ",Object(k.jsx)(D,{language:"js",inline:!0,code:"null"}),", a jako trzeci \u2013 ci\u0105g znak\xf3w zawieraj\u0105cy dwie spacje ",Object(k.jsx)(D,{language:"js",inline:!0,code:"'  '"}),", to otrzymamy znacznie bardziej przyja\u017anie sformatowany JSON:"]}),Object(k.jsx)(D,{language:"js",code:'\n      console.log(JSON.stringify(products, null, \'  \')); \n      /*\n      [\n        {\n          "id": 1,\n          "name": "Pencil",\n          "attributes": {\n            "material": "wood/graphite"\n          }\n        },\n        {\n          "id": 2,\n          "name": "Pen",\n          "attributes": {\n            "material": "metal/plastic"\n          }\n        }\n      ]\n      */      \n      '}),Object(k.jsx)("p",{children:"To nadal jest ci\u0105g znak\xf3w zawieraj\u0105cy dane w formacie JSON, ale tym razem zosta\u0142 on przedstawiony w wielu liniach i z wci\u0119ciami, pozwalaj\u0105c na znacznie \u0142atwiejsze zapoznanie si\u0119 z jego zawarto\u015bci\u0105."}),Object(k.jsx)("p",{children:'Je\u015bli nie generujesz kodu JSON samodzielnie, tylko otrzymujesz go np. z serwera, mo\u017cesz znale\u017a\u0107 wiele narz\u0119dzi do zmiany formatu na bardziej czytelny, wpisuj\u0105c w Google fraz\u0119 "json beautifier".'})]})},_=t(128);var Q=function(e){return Object(k.jsxs)("div",{className:"section",children:[Object(k.jsx)("p",{children:"Jednym z filar\xf3w programowania jest umiej\u0119tno\u015b\u0107 wyszukiwania i naprawiania b\u0142\u0119d\xf3w."}),Object(k.jsx)(S,{type:"h1",text:"Google Developer Tools"}),Object(k.jsx)("p",{children:"Warto pozna\u0107 to narz\u0119dze, \u017ceby unikn\u0105\u0107 podstawowych bol\u0105czek m\u0142odego developera. W przegl\u0105darce zaczynamy od uruchomienia konsoli, co mo\u017cemy zrobi\u0107 na dwa sposoby:"}),Object(k.jsxs)("ul",{children:[Object(k.jsx)("li",{children:'klikaj\u0105c PPM (prawy przycisk myszy), a nast\u0119pnie wybieraj\u0105c opcj\u0119 "Zbadaj" (ang. Inspect),'}),Object(k.jsx)("li",{children:"u\u017cywaj\u0105c klawiaturowego skr\xf3tu \u2013 Ctrl+Shift+C w przypadku Windowsa i Linuksa oraz Command+Option+C, je\u017celi pracujemy na Macu."})]}),Object(k.jsx)("img",{width:"95%",alt:"debugging",src:"debugging1.png"}),Object(k.jsx)("p",{children:'Po uruchomieniu narz\u0119dzi developerskich zobaczymy zbi\xf3r wielu zak\u0142adek, nast\u0119pnie w g\u0142\xf3wnej cz\u0119\u015bci strony tzw. DOM, czyli "drzewo" dokumentu oraz kolumn\u0119, kt\xf3ra wy\u015bwietla style aktualnie wybranego elementu.'}),Object(k.jsx)("p",{children:"Zar\xf3wno wygenerowany kod HTML, jak i style poszczeg\xf3lnych cz\u0119\u015bci markupu (struktury strony) mo\u017cemy edytowa\u0107 na \u017cywo, \u015bledz\u0105c na bie\u017c\u0105co zmiany, kt\xf3re pojawiaj\u0105 si\u0119 na stronie."}),Object(k.jsx)(S,{type:"h1",text:"Debuggowanie kodu JS w konsoli"}),Object(k.jsxs)("p",{children:["Jednym z podstawowych narz\u0119dzi pomagaj\u0105cych w wykryciu b\u0142\u0119d\xf3w jest konsola w narz\u0119dziach developerskich przegl\u0105darki i obiekt ",Object(k.jsx)(D,{language:"js",inline:!0,code:"console"})," w naszym kodzie. Nie ogranicza si\u0119 on jedynie do metody ",Object(k.jsx)(D,{language:"js",inline:!0,code:"log()"})," w celu wy\u015bwietlania informacji. W\u015br\xf3d pozosta\u0142ych metod mo\u017cemy bowiem znale\u017a\u0107 (mi\u0119dzy innymi):"]}),Object(k.jsxs)("ul",{children:[Object(k.jsxs)("li",{children:[Object(k.jsxs)(_.a,{py:3,children:[Object(k.jsx)(D,{inline:!0,language:"js",code:"console.error(message);"}),"- kt\xf3ry wy\u015bwietli nam stringa wraz z przekazanymi argumentami w bardziej widocznym i znanym z JS-owych b\u0142\u0119d\xf3w formatowaniu:"]}),Object(k.jsx)("img",{width:"55%",alt:"debugging",src:"debugging2.png"})]}),Object(k.jsxs)("li",{children:[Object(k.jsxs)(_.a,{py:3,children:[Object(k.jsx)(D,{inline:!0,language:"js",code:"console.assert(assertion, obj1 [, obj2, ..., objN]);"}),"  - pozwalaj\u0105ce na przekazanie wiadomo\u015bci do konsoli, tylko je\u017celi warunek nie zostanie spe\u0142niony:"]}),Object(k.jsx)("img",{width:"70%",alt:"debugging",src:"debugging3.png"})]}),Object(k.jsxs)("li",{children:[Object(k.jsxs)(_.a,{py:3,children:[Object(k.jsx)(D,{inline:!0,language:"js",code:"console.time(timerName);"})," oraz ",Object(k.jsx)(D,{inline:!0,language:"js",code:"console.timeEnd(timerName)"}),' - wsp\xf3\u0142dzia\u0142aj\u0105ce ze sob\u0105 metody, kt\xf3re w milisekundach oblicz\u0105 czas od uruchomienia "stopera" o danej nazwie do jego zatrzymania:']}),Object(k.jsx)("img",{width:"35%",alt:"debugging",src:"debugging4.png"})]}),Object(k.jsxs)("li",{children:[Object(k.jsxs)(_.a,{py:3,children:[Object(k.jsx)(D,{inline:!0,language:"js",code:"console.trace()"})," - jedna z ciekawszych metod, zwracaj\u0105ca \u015bcie\u017ck\u0119 sprawdzanego stosu z danej lokalizacji:"]}),Object(k.jsx)("img",{width:"45%",alt:"debugging",src:"debugging5.png"})]})]}),Object(k.jsxs)("p",{children:["Nie oznacza to jednak, \u017ce musimy umy\u015blnie komplikowa\u0107 proces wy\u015bwietlania danych, poniewa\u017c w przewa\u017caj\u0105cej liczbie przypadk\xf3w ",Object(k.jsx)(D,{language:"js",inline:!0,code:"console.log()"})," w zupe\u0142no\u015bci nam wystarczy. Pami\u0119tajmy jedynie, \u017ce mo\u017cemy w pe\u0142ni wykorzysta\u0107 jego potencja\u0142 i jako argumenty przekazywa\u0107 informacje w postaci tablic, obiekt\xf3w czy nawet danych sformatowanych przy pomocy JS-owych metod!"]}),Object(k.jsx)(S,{type:"h1",text:"Linia po linii"}),Object(k.jsx)("p",{children:"Powy\u017csze rozwi\u0105zania i mo\u017cliwo\u015bci dostarczaj\u0105 nam potrzebnych informacji, nie przerywaj\u0105c dzia\u0142ania naszego kodu. Zastan\xf3wmy si\u0119 jednak co zrobi\u0107, je\u017celi chcieliby\u015bmy zatrzyma\u0107 si\u0119 w po\u0142owie naszej funkcji, linia po linii przeanalizowa\u0107 to, co si\u0119 tam dzieje i \u201ena \u017cywo\u201d podejrze\u0107 poszczeg\xf3lne zmienne? Jak si\u0119 pewnie domy\u015blasz, JavaScript oferuje nam tak\u0105 mo\u017cliwo\u015b\u0107 za pomoc\u0105 komendy debugger, kt\xf3rej przyk\u0142ad u\u017cycia mo\u017cesz prze\u015bledzi\u0107 w poni\u017cszym kodzie (uprzednio uruchamiaj\u0105c konsol\u0119):"}),Object(k.jsx)("ul",{children:Object(k.jsx)("li",{children:Object(k.jsx)("a",{className:"exampleLink",href:"https://codepen.io/kodilla/pen/f24e6a89c29b6f5d83d0886f214de08e/",target:"_blank",without:!0,rel:"noreferrer",children:"Przyk\u0142ad"})})}),Object(k.jsxs)("p",{children:["Jak widzisz, nasz kod zatrzyma si\u0119 dok\u0142adnie w tym miejscu, w kt\xf3rym u\u017cyli\u015bmy s\u0142owa kluczowego ",Object(k.jsx)(D,{inline:!0,language:"js",code:"debugger"})," i pozwoli nam przyjrze\u0107 si\u0119 wszystkim informacjom, do jakich mamy dost\u0119p w obr\u0119bie funkcji ",Object(k.jsx)(D,{inline:!0,language:"js",code:"displayPersonDetails"}),"(). Mo\u017cemy zatem sprawdzi\u0107 warto\u015bci, jakie przyjmuj\u0105 wszystkie argumenty oraz zmienne, kt\xf3rych instrukcje zd\u0105\u017cy\u0142y si\u0119 wykona\u0107 do momentu zatrzymania wykonywania kodu."]}),Object(k.jsx)("img",{width:"80%",alt:"debugging",src:"debugging6.png"}),Object(k.jsxs)("p",{children:["My jednak jeste\u015bmy ciekawi warto\u015bci, jak\u0105 przyjmuje zmienna ",Object(k.jsx)(D,{language:"js",inline:!0,code:"details"}),", dlatego pozwolimy silnikowi JavaScriptu wykona\u0107 kilka kolejnych instrukcji przy pomocy przycisku znajduj\u0105cego si\u0119 po prawej stronie narz\u0119dzi developerskich, a dok\u0142adniej strza\u0142ki Step over next function call:"]}),Object(k.jsx)("img",{width:"50%",alt:"debugging",src:"debugging7.jpg"}),Object(k.jsxs)("p",{children:["Jak zauwa\u017cysz, ka\u017cde klikni\u0119cie przeniesie Ci\u0119 do kolejnej instrukcji i b\u0119dziesz w stanie podejrze\u0107 kolejno warto\u015b\u0107 ",Object(k.jsx)(D,{language:"js",inline:!0,code:"personName"}),", ",Object(k.jsx)(D,{language:"js",inline:!0,code:"birthYear"}),", a nast\u0119pnie ",Object(k.jsx)(D,{language:"js",inline:!0,code:"details"}),"! Bardzo cz\u0119sto zdarzy si\u0119 jednak, \u017ce informacja, kt\xf3rej potrzebujemy, znajduje si\u0119 wiele linii kodu dalej lub nawet w innej funkcji i zamiast przeskakiwania po kolejnych instrukcjach, chcemy przej\u015b\u0107 od razu do kolejnego debuggera, a to z kolei umo\u017cliwia nam znajduj\u0105ca si\u0119 po lewej stronie od poprzedniego przycisku niebieska strza\u0142ka z opisem Resume scripts execution."]}),Object(k.jsx)("img",{width:"45%",alt:"debugging",src:"debugging8.jpg"}),Object(k.jsx)("p",{children:"Oznacza to, \u017ce po jej klikni\u0119ciu skrypt wznawia swoje dzia\u0142anie i zatrzyma si\u0119 dopiero, je\u017celi natrafi na kolejny debugger, b\u0105d\u017a tzw. breakpoint."}),Object(k.jsx)("p",{children:"Breakpoint to kolejna funkcjonalno\u015b\u0107 narz\u0119dzi developerskich, kt\xf3ra pozwoli Ci, podobnie jak w przypadku debuggera, wstrzyma\u0107 dzia\u0142anie kodu, jednak tym razem zmian\u0119 wprowadzimy jedynie po stronie przegl\u0105darki, a nasz kod pozostanie nietkni\u0119ty. Oznaczenie takiego punktu jest bardzo proste i polega na klikni\u0119ciu numeru linii, w kt\xf3rej chcemy si\u0119 zatrzyma\u0107:"}),Object(k.jsx)("img",{width:"95%",alt:"debugging",src:"debugging9.png"}),Object(k.jsxs)("p",{children:["Numer zaznaczonej linii pod\u015bwietli si\u0119 na kolor zielony lub niebieski (w zale\u017cno\u015bci od u\u017cywanej ciemnej lub jasnej wersji szablonu narz\u0119dzi developerskich), a my b\u0119dziemy wtedy mogli przywr\xf3ci\u0107 wykonywanie kodu, maj\u0105c pewno\u015b\u0107, \u017ce zatrzyma si\u0119 on dopiero w linii 8, przed wykonaniem instrukcji ",Object(k.jsx)(D,{language:"js",inline:!0,code:"return details;"}),"."]})]})};var $=function(){return Object(k.jsx)(h.a,{children:Object(k.jsxs)(P.c,{children:[Object(k.jsx)(P.a,{path:"/adding-scripts",children:Object(k.jsx)(N,{text:Object(k.jsx)(W,{})})}),Object(k.jsx)(P.a,{path:"/comments",children:Object(k.jsx)(N,{text:Object(k.jsx)(E,{})})}),Object(k.jsx)(P.a,{path:"/target-dom-elements",children:Object(k.jsx)(N,{text:Object(k.jsx)(C,{})})}),Object(k.jsx)(P.a,{path:"/output",children:Object(k.jsx)(N,{text:Object(k.jsx)(R,{})})}),Object(k.jsx)(P.a,{path:"/modify-dom-elements",children:Object(k.jsx)(N,{text:Object(k.jsx)(H,{})})}),Object(k.jsx)(P.a,{path:"/good-practices",children:Object(k.jsx)(N,{text:Object(k.jsx)(B,{})})}),Object(k.jsx)(P.a,{path:"/variables",children:Object(k.jsx)(N,{text:Object(k.jsx)(F,{})})}),Object(k.jsx)(P.a,{path:"/data-types",children:Object(k.jsx)(N,{text:Object(k.jsx)(A,{})})}),Object(k.jsx)(P.a,{path:"/operators",children:Object(k.jsx)(N,{text:Object(k.jsx)(G,{})})}),Object(k.jsx)(P.a,{path:"/arrays",children:Object(k.jsx)(N,{text:Object(k.jsx)(Z,{})})}),Object(k.jsx)(P.a,{path:"/objects",children:Object(k.jsx)(N,{text:Object(k.jsx)(K,{})})}),Object(k.jsx)(P.a,{path:"/conditions",children:Object(k.jsx)(N,{text:Object(k.jsx)(q,{})})}),Object(k.jsx)(P.a,{path:"/loops",children:Object(k.jsx)(N,{text:Object(k.jsx)(I,{})})}),Object(k.jsx)(P.a,{path:"/functions",children:Object(k.jsx)(N,{text:Object(k.jsx)(U,{})})}),Object(k.jsx)(P.a,{path:"/oop-classes",children:Object(k.jsx)(N,{text:Object(k.jsx)(V,{})})}),Object(k.jsx)(P.a,{path:"/ajax-fetch",children:Object(k.jsx)(N,{text:Object(k.jsx)(X,{})})}),Object(k.jsx)(P.a,{path:"/ajax-json",children:Object(k.jsx)(N,{text:Object(k.jsx)(Y,{})})}),Object(k.jsx)(P.a,{path:"/debugging",children:Object(k.jsx)(N,{text:Object(k.jsx)(Q,{})})}),Object(k.jsx)(P.a,{path:"",exact:!0,children:Object(k.jsx)(N,{text:Object(k.jsx)(M,{})})})]})})};c.a.render(Object(k.jsx)($,{}),document.getElementById("root"))}},[[86,1,2]]]);
//# sourceMappingURL=main.4251f343.chunk.js.map