{"id":475,"date":"2024-09-04T12:28:48","date_gmt":"2024-09-04T10:28:48","guid":{"rendered":"https:\/\/merkulova.thkit.ee\/wp20\/?page_id=475"},"modified":"2024-09-04T14:10:17","modified_gmt":"2024-09-04T12:10:17","slug":"harjutused","status":"publish","type":"page","link":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/","title":{"rendered":"Harjutused"},"content":{"rendered":"\n

Harjutused 2-8\/10-12<\/h1>\n\n\n\n

<\/p>\n\n\n\n

    \n
  1. Harjutused 2-8\/10-12<\/a><\/li>\n<\/ol>\n\n\n\n

    Harjutus 2 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 codesandbox<\/h1>\n\n\n\n
    \nhttps:\/\/github.com\/MihhailLastovski\/Harjutus2Codesandbox\n<\/div><\/figure>\n\n\n\n

    \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c CodeSandbox
    \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d Vanilla Js
    \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 index.mjs \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u043c\u0438 \u043c\u0430\u0448\u0438\u043d<\/p>\n\n\n\n

    1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<\/td>import<\/code>\".\/styles.css\"<\/code>;<\/code>const myjson = [<\/code>  <\/code>{<\/code>    <\/code>Car: {<\/code>      <\/code>Color: <\/code>\"Rose red\"<\/code>,<\/code>      <\/code>\"Tinted windows\"<\/code>: <\/code>false<\/code>,<\/code>      <\/code>Wheels: 4,<\/code>      <\/code>\"Roof Cargo\"<\/code>: <\/code>null<\/code>,<\/code>      <\/code>Entertainment: [<\/code>\"Fm Radio\"<\/code>, <\/code>\"MP3, MP4 and MKV player\"<\/code>, <\/code>\"harman\/kardon speakers\"<\/code>],<\/code>      <\/code>Accessories: [<\/code>\"satnav\"<\/code>,<\/code>\"cruise control\"<\/code>]<\/code>    <\/code>},<\/code>    <\/code>Car2:{<\/code>      <\/code>Color: <\/code>\"Navy blue\"<\/code>,<\/code>      <\/code>\"Tinted windows\"<\/code>: <\/code>true<\/code>,<\/code>      <\/code>Wheels: 4,<\/code>      <\/code>\"Roof Cargo\"<\/code>: <\/code>\"Thule\"<\/code>,<\/code>      <\/code>Entertainment: [<\/code>\"Fm Radio\"<\/code>, <\/code>\"Apple CarPlay\/Android Auto\"<\/code>, <\/code>\"Bowers & Wilkins Premium Sound speakers\"<\/code>],<\/code>      <\/code>Accessories: [<\/code>\"self drive system\"<\/code>,<\/code>\"lugagge cover\"<\/code>]<\/code>    <\/code>}<\/code>  <\/code>}<\/code>];<\/code>document.getElementById(<\/code>\"app\"<\/code>).innerHTML = `<\/code><div id = <\/code>\"json\"<\/code>><\/code>  <\/code><h1>Car properties <\/h1><\/code>  <\/code><p>Color: ${myjson[0].Car.Color}<\/p><\/code>  <\/code><p>Tinted windows: ${myjson[0].Car[<\/code>\"Tinted windows\"<\/code>]}<\/p><\/code>  <\/code><p>Wheels: ${myjson[0].Car.Wheels}<\/p><\/code>  <\/code><p>Roof Cargo: ${myjson[0].Car[<\/code>\"Roof Cargo\"<\/code>]}<\/p><\/code>  <\/code><p>Entertainment: ${myjson[0].Car.Entertainment}<\/p><\/code>  <\/code><p>Accessories: ${myjson[0].Car.Accessories}<\/p><\/code><\/div><\/code><table><\/code>      <\/code><tr style=<\/code>\"border: 1pt solid black\"<\/code>><\/code>        <\/code><th>Property<\/th><\/code>        <\/code><th>Car0<\/th><\/code>        <\/code><th>Car1<\/th><\/code>      <\/code><\/tr><\/code>      <\/code>${Object.keys(myjson[0].Car).map(property => `<\/code>        <\/code><tr><\/code>          <\/code><td>${property}<\/td><\/code>          <\/code><td>${myjson[0].Car[property]}<\/td><\/code>          <\/code><td>${myjson[0].Car2[property]}<\/td><\/code>        <\/code><\/tr><\/code>      <\/code>`).join(<\/code>''<\/code>)}<\/code> <\/code><\/table><\/code><style><\/code> <\/code>table, tr, td{<\/code>  <\/code>border: 2pt solid black<\/code> <\/code>}<\/code><\/style><\/code>  <\/code>`;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Harjutus 3 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 session storage<\/h1>\n\n\n\n
      \n
    1. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0432 chrome \u0438 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/li>\n\n\n\n
    2. sessionStorage<\/code> \u2013 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u0435\u0430\u043d\u0441\u043e\u0432<\/li>\n\n\n\n
    3. sessionStorage.setItem('color','enda lemmikv\u00e4rv')<\/code>\u2013 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u0435\u0430\u043d\u0441\u043e\u0432<\/li>\n\n\n\n
    4. sessionStorage.getItem('color')<\/code> \u2013 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/li>\n<\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      \u0412 application -> Session Storage \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Harjutus 4 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 local storage<\/h1>\n\n\n\n
        \n
      1. localStorage<\/code> \u2013 \u043a\u043e\u043c\u0430\u043d\u043b\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/li>\n\n\n\n
      2. localStorage.setItem('car','audi')<\/code> \u2013 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/li>\n\n\n\n
      3. localStorage.getItem('car')<\/code> \u2013 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/li>\n<\/ol>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        \u0412 application -> Local Storage \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Harjutus 5 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0430\u0439\u043b\u044b cookie<\/h1>\n\n\n\n

        .\\xh.exe -h https:\/\/www.youtube.com \u2013 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a\u0438\u0435 cookie \u0444\u0430\u0439\u043b\u044b \u0431\u0435\u0440\u0435\u0442 youtube.com<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Harjutus 6 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a api \u043d\u0430 js<\/h1>\n\n\n\n
          \n
        1. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c codesandbox \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d static (HTML)<\/li>\n\n\n\n
        2. \u041f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b index.html<\/li>\n<\/ol>\n\n\n\n
          123456789101112131415161718192021222324<\/td><!<\/code>DOCTYPE<\/code>html><\/code><<\/code>html<\/code>lang<\/code>=<\/code>\"en\"<\/code>><\/code>  <\/code><<\/code>head<\/code>><\/code>    <\/code><<\/code>meta<\/code>charset<\/code>=<\/code>\"UTF-8\"<\/code>\/><\/code>    <\/code><<\/code>meta<\/code>name<\/code>=<\/code>\"viewport\"<\/code>content<\/code>=<\/code>\"width=device-width, initial-scale=1.0\"<\/code>\/><\/code>    <\/code><<\/code>meta<\/code>http-equiv<\/code>=<\/code>\"X-UA-Compatible\"<\/code>content<\/code>=<\/code>\"ie=edge\"<\/code>\/><\/code>    <\/code><<\/code>title<\/code>>Static Template<\/<\/code>title<\/code>><\/code>  <\/code><\/<\/code>head<\/code>><\/code>  <\/code><<\/code>body<\/code>><\/code>    <\/code><<\/code>button<\/code>type<\/code>=<\/code>\"button\"<\/code>onclick<\/code>=<\/code>\"loadDoc()\"<\/code>>Request bacon<\/<\/code>button<\/code>><\/code>    <\/code><<\/code>p<\/code>id<\/code>=<\/code>\"demo\"<\/code>><\/<\/code>p<\/code>><\/code>    <\/code><<\/code>script<\/code>><\/code>      <\/code>function loadDoc() {<\/code>        <\/code>const xhttp = new XMLHttpRequest();<\/code>        <\/code>xhttp.onload = function () {<\/code>          <\/code>document.getElementById(\"demo\").innerHTML = this.responseText;<\/code>        <\/code>};<\/code>        <\/code>xhttp.open(\"GET\", \"https:\/\/baconipsum.com\/api\/?type=all-meat<\/a>\");<\/code>        <\/code>xhttp.send();<\/code>      <\/code>}<\/code>    <\/code><\/<\/code>script<\/code>><\/code>  <\/code><\/<\/code>body<\/code>><\/code><\/<\/code>html<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

          3. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u0441 API<\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n

          Harjutus 7 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 api github<\/h1>\n\n\n\n

          \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c codesandbox, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d JS Vanilla<\/p>\n\n\n\n

          \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 index.mjs<\/p>\n\n\n\n

          123456789101112131415161718192021222324252627282930313233343536373839404142<\/td>let<\/code>profile = <\/code>\"\"<\/code>;<\/code>let<\/code>profileName = <\/code>\"\"<\/code>;<\/code>let<\/code>profileID = <\/code>\"\"<\/code>;<\/code>let<\/code>profileLink = <\/code>\"\"<\/code>;<\/code>let<\/code>profileRepos = <\/code>\"\"<\/code>;<\/code> <\/code>function<\/code>renderPage(){<\/code>  <\/code>document.getElementById(<\/code>\"app\"<\/code>).innerHTML = `<\/code>  <\/code><div><\/code>  <\/code><h1>Github<\/h1><\/code>  <\/code><p>Please enter profile name: <\/p><\/code>  <\/code><input \/><\/code>  <\/code><div <\/code>class<\/code>=<\/code>\"content\"<\/code>><\/code>  <\/code><h1 id=<\/code>\"name\"<\/code>>Name: ${profileName}<\/h1><\/code>  <\/code><p id=<\/code>\"id\"<\/code>>Id: ${profileID}<\/p><\/code>  <\/code><p id=<\/code>\"repos\"<\/code>>Repos: ${profileRepos}<\/p><\/code>  <\/code><p id=<\/code>\"profileurl\"<\/code>>Link: ${profileLink}<\/code>  <\/code><a href=${profileName}<\/code>\" target=\"<\/code>_blank<\/code>\"><\/a><\/p><\/code>  <\/code><\/div><\/code>  <\/code><\/div><\/code>  <\/code>`;<\/code>}<\/code>let fetchProfile = async () => {<\/code>  <\/code>let fetchedData;<\/code> <\/code>  <\/code>await fetch(`https:\/\/api.github.com\/users\/<\/a>${profile}`)<\/code>  <\/code>.then((response) => response.json())<\/code>  <\/code>.then((data) => (fetchedData = data));<\/code>  <\/code>profileName = fetchedData.login ;<\/code>  <\/code>profileID = fetchedData.id ;<\/code>  <\/code>profileLink = fetchedData.html_url  ;<\/code>  <\/code>profileRepos = fetchedData.public_repos  ;<\/code> <\/code>  <\/code>renderPage();<\/code>};<\/code>renderPage();<\/code>const input = document.querySelector(\"<\/code>input<\/code>\");<\/code>input.addEventListener(\"<\/code>change\",updateValue);<\/code>function<\/code>updateValue(e){<\/code>  <\/code>profile = e.target.value;<\/code>  <\/code>fetchProfile();<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

          \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439 GitHub, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e API GitHub<\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n

          Harjutus 8 \u0432\u044b\u0432\u043e\u0434 xml \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e js<\/h1>\n\n\n\n

          \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430<\/p>\n\n\n\n

          \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b games.xml \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u0434<\/p>\n\n\n\n

          function<\/code>loadXMLDoc() {<\/code><\/p>\n\n\n\n

            <\/code>let<\/code>xmlhttp = <\/code>new<\/code>XMLHttpRequest();<\/code><\/p>\n\n\n\n

            <\/code>xmlhttp.onreadystatechange = <\/code>function<\/code>() {<\/code><\/p>\n\n\n\n

              <\/code>if<\/code>(<\/code>this<\/code>.readyState === 4 && <\/code>this<\/code>.status === 200) {<\/code><\/p>\n\n\n\n

                <\/code>getGameDetails(<\/code>this<\/code>);<\/code><\/p>\n\n\n\n

              <\/code>}<\/code><\/p>\n\n\n\n

            <\/code>};<\/code><\/p>\n\n\n\n

            <\/code>xmlhttp.open(<\/code>\"GET\"<\/code>, <\/code>\"src\/games.xml\"<\/code>, <\/code>true<\/code>);<\/code><\/p>\n\n\n\n

            <\/code>xmlhttp.send();<\/code><\/p>\n\n\n\n

          }<\/code><\/p>\n\n\n\n

          function<\/code>getGameDetails(xml) {<\/code><\/p>\n\n\n\n

            <\/code>const xmlDoc = xml.responseXML;<\/code><\/p>\n\n\n\n

            <\/code>let<\/code>tableRows = <\/code>\"<tr><th>Title<\/th><th>Price<\/th><th>Platforms<\/th><\/tr>\"<\/code>;<\/code><\/p>\n\n\n\n

            <\/code>let<\/code>gameElements = xmlDoc.getElementsByTagName(<\/code>\"game\"<\/code>);<\/code><\/p>\n\n\n\n

            <\/code>for<\/code>(<\/code>let<\/code>i = 0; i < gameElements.length; i++) {<\/code><\/p>\n\n\n\n

              <\/code>tableRows +=<\/code><\/p>\n\n\n\n

                <\/code>\"<tr><td>\"<\/code>+<\/code><\/p>\n\n\n\n

                <\/code>gameElements[i].getElementsByTagName(<\/code>\"title\"<\/code>)[0].childNodes[0].nodeValue +<\/code><\/p>\n\n\n\n

                <\/code>\"<\/td><td>\"<\/code>+<\/code><\/p>\n\n\n\n

                <\/code>gameElements[i].getElementsByTagName(<\/code>\"price\"<\/code>)[0].childNodes[0].nodeValue +<\/code><\/p>\n\n\n\n

                <\/code>\"<\/td><td>\"<\/code>;<\/code><\/p>\n\n\n\n

              <\/code>let<\/code>platforms = gameElements[i].getElementsByTagName(<\/code>\"platform\"<\/code>);<\/code><\/p>\n\n\n\n

              <\/code>for<\/code>(<\/code>let<\/code>j = 0; j < platforms.length; j++) {<\/code><\/p>\n\n\n\n

                <\/code>tableRows += platforms[j].childNodes[0].nodeValue + <\/code>\"\/\"<\/code>;<\/code><\/p>\n\n\n\n

              <\/code>}<\/code><\/p>\n\n\n\n

              <\/code>tableRows += <\/code>\"<\/td><\/tr>\"<\/code>;<\/code><\/p>\n\n\n\n

            <\/code>}<\/code><\/p>\n\n\n\n

            <\/code>document.getElementById(<\/code>\"xmlTable\"<\/code>).innerHTML = tableRows;<\/code><\/p>\n\n\n\n

          }<\/code><\/p>\n\n\n\n

          document.getElementById(<\/code>\"app\"<\/code>).innerHTML = `<table id=<\/code>\"xmlTable\"<\/code>><\/table>`;<\/code><\/p>\n\n\n\n

          loadXMLDoc();<\/code><\/p>\n\n\n\n

          <\/td><?<\/code>xml<\/code>version<\/code>=<\/code>\"1.0\"<\/code>encoding<\/code>=<\/code>\"UTF-8\"<\/code>?><\/code><<\/code>gameslist<\/code>><\/code>    <\/code><<\/code>game<\/code>><\/code>        <\/code><<\/code>title<\/code>lang<\/code>=<\/code>\"en\"<\/code>>Hearthstone<\/<\/code>title<\/code>><\/code>        <\/code><<\/code>price<\/code>>Free<\/<\/code>price<\/code>><\/code>    <\/code><\/<\/code>game<\/code>><\/code>    <\/code><<\/code>game<\/code>><\/code>        <\/code><<\/code>title<\/code>lang<\/code>=<\/code>\"en\"<\/code>>Dota 2<\/<\/code>title<\/code>><\/code>        <\/code><<\/code>price<\/code>>Life<\/<\/code>price<\/code>><\/code>    <\/code><\/<\/code>game<\/code>><\/code>    <\/code><<\/code>game<\/code>><\/code>        <\/code><<\/code>title<\/code>lang<\/code>=<\/code>\"en\"<\/code>>Elden ring<\/<\/code>title<\/code>><\/code>        <\/code><<\/code>price<\/code>>60$<\/<\/code>price<\/code>><\/code>    <\/code><\/<\/code>game<\/code>><\/code><\/<\/code>gameslist<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

          \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b index.mjs \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434<\/p>\n\n\n\n

            \n
          1. function<\/strong> loadXMLDoc(){<\/li>\n\n\n\n
          2.   let xmlhttp =new<\/strong> XMLHttpRequest();<\/li>\n\n\n\n
          3.   xmlhttp.onreadystatechange=function<\/strong>(){<\/li>\n\n\n\n
          4. if<\/strong>(this<\/strong>.readyState===4&&this<\/strong>.status===200){<\/li>\n\n\n\n
          5.       getGameDetails(this<\/strong>);<\/li>\n\n\n\n
          6. }<\/li>\n\n\n\n
          7. };<\/li>\n\n\n\n
          8.   xmlhttp.open(“GET”,”src\/games.xml”,true<\/strong>);<\/li>\n\n\n\n
          9.   xmlhttp.send();<\/li>\n\n\n\n
          10. }<\/li>\n\n\n\n
          11. <\/li>\n\n\n\n
          12. function<\/strong> getGameDetails(xml){<\/li>\n\n\n\n
          13. const<\/strong> xmlDoc = xml.responseXML;<\/li>\n\n\n\n
          14.   let tableRows =”<tr><th>Title<\/th><th>Price<\/th><th>Platforms<\/th><\/tr>”;<\/li>\n\n\n\n
          15.   let gameElements = xmlDoc.getElementsByTagName(“game”);<\/li>\n\n\n\n
          16. for<\/strong>(let i =0; i < gameElements.length; i++){<\/li>\n\n\n\n
          17.     tableRows +=<\/li>\n\n\n\n
          18. “<tr><td>”+<\/li>\n\n\n\n
          19.       gameElements[i].getElementsByTagName(“title”)[0].childNodes[0].nodeValue+<\/li>\n\n\n\n
          20. “<\/td><td>”+<\/li>\n\n\n\n
          21.       gameElements[i].getElementsByTagName(“price”)[0].childNodes[0].nodeValue+<\/li>\n\n\n\n
          22. “<\/td><td>”;<\/li>\n\n\n\n
          23.     let platforms = gameElements[i].getElementsByTagName(“platform”);<\/li>\n\n\n\n
          24. for<\/strong>(let j =0; j < platforms.length; j++){<\/li>\n\n\n\n
          25.       tableRows += platforms[j].childNodes[0].nodeValue+”\/”;<\/li>\n\n\n\n
          26. }<\/li>\n\n\n\n
          27.     tableRows +=”<\/td><\/tr>”;<\/li>\n\n\n\n
          28. }<\/li>\n\n\n\n
          29.   document.getElementById(“xmlTable”).innerHTML= tableRows;<\/li>\n\n\n\n
          30. }<\/li>\n\n\n\n
          31. <\/li>\n\n\n\n
          32. document.getElementById(“app”).innerHTML= `<table id=”xmlTable”><\/table>`;<\/li>\n\n\n\n
          33. <\/li>\n\n\n\n
          34. loadXMLDoc();<\/li>\n<\/ol>\n\n\n\n

            \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b index.html \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434<\/p>\n\n\n\n

            1234567891011121314151617181920212223<\/td><!<\/code>DOCTYPE<\/code>html><\/code><<\/code>html<\/code>lang<\/code>=<\/code>\"en\"<\/code>><\/code><<\/code>head<\/code>><\/code>    <\/code><<\/code>meta<\/code>charset<\/code>=<\/code>\"UTF-8\"<\/code>\/><\/code>    <\/code><<\/code>title<\/code>>Title<\/<\/code>title<\/code>><\/code><\/<\/code>head<\/code>><\/code><<\/code>body<\/code>><\/code><<\/code>div<\/code>id<\/code>=<\/code>\"app\"<\/code>><\/<\/code>div<\/code>><\/code><\/<\/code>body<\/code>><\/code><<\/code>script<\/code>src<\/code>=<\/code>\"index.mjs\"<\/code>><\/<\/code>script<\/code>><\/code><\/<\/code>html<\/code>><\/code><<\/code>style<\/code>><\/code>    <\/code>table{<\/code>        <\/code>border: 2pt solid black;<\/code>        <\/code>border-radius: 20px;<\/code>        <\/code>font-size: large;<\/code>        <\/code>width: 300px;<\/code>        <\/code>height: 300px;<\/code>    <\/code>}<\/code>    <\/code>td{<\/code>        <\/code>border: 2pt solid black;<\/code>    <\/code>}<\/code><\/<\/code>style<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

            \u0414\u043e\u043b\u0436\u043d\u044b \u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0433\u0440\u044b \u0438\u0437 xml \u0444\u0430\u0439\u043b\u0430 \u0438 \u0432\u044b\u0432\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            Harjutus 10 \u043f\u0438\u0441\u044c\u043c\u043e \u043f\u0440\u0438 github push<\/h1>\n\n\n\n

            \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e
            git clone https:\/\/github.com\/MihhailLastovski\/harjutus10.git<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0438 .github\/workflows
            \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b mail-on-push.yml
            \u0412 \u043d\u0435\u0433\u043e \u043f\u0438\u0448\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434<\/p>\n\n\n\n

            12345678910111213141516171819202122232425262728<\/td>name:<\/code>Mail <\/code>on<\/code>Push<\/code>on:<\/code>  <\/code>push:<\/code>    <\/code>branches:<\/code>      <\/code>-<\/code>main<\/code>jobs:<\/code>  <\/code>send-mail:<\/code>    <\/code>runs-on:<\/code>ubuntu-latest<\/code>    <\/code>steps:<\/code>    <\/code>-<\/code>name<\/code>:<\/code>Checkout Repo<\/code>      <\/code>uses:<\/code>actions\/checkout@v2<\/code>    <\/code>    <\/code>-<\/code>name<\/code>:<\/code>Send Email<\/code>      <\/code>uses:<\/code>dawidd6\/action-send-mail@v3<\/code>      <\/code>with:<\/code>        <\/code>server_address:<\/code>smtp.gmail.com<\/code>        <\/code>server_port:<\/code>465<\/code>        <\/code>username:<\/code>$<\/code>{<\/code>{<\/code>secrets.MAIL_USERNAME <\/code>}<\/code>}<\/code>        <\/code>password:<\/code>$<\/code>{<\/code>{<\/code>secrets.MAIL_PASSWORD <\/code>}<\/code>}<\/code>        <\/code>subject:<\/code>\"Push to Repository: ${{ github.repository }}\"<\/code>        <\/code>to:<\/code>\"your@gmail.com\"<\/code>        <\/code>body:<\/code>|<\/code>          <\/code>Kehtestuse looja nimi<\/code>:<\/code>$<\/code>{<\/code>{<\/code>github.event.pusher.name <\/code>}<\/code>}<\/code>          <\/code>Kehtestuse s\u00f5num<\/code>:<\/code>$<\/code>{<\/code>{<\/code>github.event.head_commit.message <\/code>}<\/code>}<\/code>        <\/code>from:<\/code>Github actions<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

            \u041d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0432\u0435 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445
            \u0412 MAIL_USERNAME \u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u043f\u043e\u0447\u0442\u0443
            \u0412 MAIL_PASSWORD \u043f\u0438\u0448\u0435\u043c \u043f\u0430\u0440\u043e\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0441\u0442\u043e\u0438\u0442 \u0434\u0432\u0443\u0445\u044d\u0442\u0430\u043f\u043d\u0430\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f
            \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 google\/\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c\/\u0434\u0432\u0443\u0445\u044d\u0442\u0430\u043f\u043d\u0430\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\/\u043f\u0430\u0440\u043e\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            \u0414\u0430\u043b\u0435\u0435 \u0434\u0435\u043b\u0430\u0435\u043c push \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 github \u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u0447\u0442\u0443<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            \u0418 \u0432 github\/actions<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            Harjutus 11 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/h1>\n\n\n\n
            \nhttps:\/\/github.com\/MihhailLastovski\/serverMessage.git\n<\/div><\/figure>\n\n\n\n

            \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: index.html; server.js
            \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0438\u0445 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n\n\n\n

            123456789101112131415161718192021222324252627282930313233343536373839<\/td><!<\/code>doctype<\/code>html><\/code><<\/code>form<\/code>name<\/code>=<\/code>\"publish\"<\/code>><\/code>    <\/code><<\/code>input<\/code>type<\/code>=<\/code>\"text\"<\/code>name<\/code>=<\/code>\"message\"<\/code>maxlength<\/code>=<\/code>\"50\"<\/code>\/><\/code>    <\/code><<\/code>input<\/code>type<\/code>=<\/code>\"submit\"<\/code>value<\/code>=<\/code>\"Send\"<\/code>\/><\/code><\/<\/code>form<\/code>><\/code><<\/code>div<\/code>id<\/code>=<\/code>\"messages\"<\/code>><\/<\/code>div<\/code>><\/code><<\/code>script<\/code>><\/code>    <\/code>let url = location.host == 'localhost' ?<\/code>        <\/code>'ws:\/\/localhost:8080\/ws' : location.host == 'javascript.local' ?<\/code>            <\/code>`ws:\/\/javascript.local\/article\/websocket\/chat\/ws` : \/\/ dev integration with local site<\/code>            <\/code>`wss:\/\/javascript.info\/article\/websocket\/chat\/ws`; \/\/ prod integration with javascript.info<\/code>    <\/code>\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u043e\u043c<\/code>    <\/code>let socket = new WebSocket(url);<\/code>    <\/code>\/\/ \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443<\/code>    <\/code>document.forms.publish.onsubmit = function() {<\/code>        <\/code>let outgoingMessage = this.message.value;<\/code>        <\/code>socket.send(outgoingMessage);<\/code>        <\/code>return false;<\/code>    <\/code>};<\/code>    <\/code>\/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/code>    <\/code>socket.onmessage = function(event) {<\/code>        <\/code>let incomingMessage = event.data;<\/code>        <\/code>showMessage(incomingMessage);<\/code>    <\/code>};<\/code>    <\/code>\/\/\u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043a\u0440\u044b\u0442 \u0441\u043e\u043a\u0435\u0442, \u0442\u043e \u043f\u0438\u0448\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438<\/code>    <\/code>socket.onclose = event => console.log(`Closed ${event.code}`);<\/code>    <\/code>\/\/ \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 div#messages<\/code>    <\/code>function showMessage(message) {<\/code>        <\/code>let messageElem = document.createElement('div');<\/code>        <\/code>messageElem.textContent = message;<\/code>        <\/code>document.getElementById('messages').prepend(messageElem);<\/code>    <\/code>}<\/code><\/<\/code>script<\/code>><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
            12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<\/td>const http = require(<\/code>'http'<\/code>);<\/code>const fs = require(<\/code>'fs'<\/code>);<\/code>const ws = <\/code>new<\/code>require(<\/code>'ws'<\/code>)<\/code>\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440<\/code>const wss = <\/code>new<\/code>ws.Server({noServer: <\/code>true<\/code>});<\/code>\/\/\u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043d\u0430 \u0430\u0434\u0440\u0435\u0441\u0441 \/ws, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u043a \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0443<\/code>function<\/code>accept(req, res){<\/code>    <\/code>if<\/code>(req.url === <\/code>'\/ws'<\/code>&& req.headers.upgrade &&<\/code>        <\/code>req.headers.upgrade.toLowerCase() === <\/code>'websocket'<\/code>&&<\/code>        <\/code>req.headers.connection.match(\/\\bupgrade\\b\/i)){<\/code>        <\/code>wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);<\/code>    <\/code>} <\/code>else<\/code>if<\/code>(req.url === <\/code>'\/'<\/code>){<\/code>        <\/code>fs.createReadStream(<\/code>'.\/index.html'<\/code>).pipe(res);<\/code>    <\/code>} <\/code>else<\/code>{<\/code>        <\/code>res.writeHead(404);<\/code>        <\/code>res.end()<\/code>    <\/code>}<\/code>}<\/code>\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0435\u0442 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432<\/code>const clients = <\/code>new<\/code>Set();<\/code>\/\/\u043f\u0440\u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0438 \u043a \u0441\u043e\u043a\u0435\u0442\u0443, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u0432\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0432\u0448\u0435\u043c\u0443\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e<\/code>function<\/code>onSocketConnect(ws){<\/code>    <\/code>clients.add(ws)<\/code>\/\/\u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/code>    <\/code>ws.on(<\/code>'message'<\/code>, <\/code>function<\/code>(message){<\/code>        <\/code>message = message.slice(0, 50);<\/code>        <\/code>for<\/code>(<\/code>let<\/code>client of clients) {clients.send(message);}<\/code>    <\/code>});<\/code>\/\/\u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u043e\u043a\u0435\u0442\u0430<\/code>    <\/code>ws.on(<\/code>'close'<\/code>, <\/code>function<\/code>(){<\/code>        <\/code>log(<\/code>'connection closed'<\/code>);<\/code>        <\/code>clients.<\/code>delete<\/code>(ws);<\/code>    <\/code>})<\/code>}<\/code>let<\/code>log;<\/code>if<\/code>(!module[<\/code>\"parent\"<\/code>]){<\/code>    <\/code>log = console.log();<\/code>\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440<\/code>    <\/code>http.createServer(accept).listen(8080);<\/code>} <\/code>else<\/code>{<\/code>    <\/code>log = <\/code>function<\/code>() {};<\/code>    <\/code>exports.accept = accept;<\/code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

            \u0412 \u043f\u0430\u043f\u043a\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0438\u0448\u0435\u043c npm init \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c vestlusruum<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/p>\n\n\n\n

            Harjutus 12 \u0441\u043e\u043b\u044c \u0438 \u0445\u0435\u0448 \u043f\u0430\u0440\u043e\u043b\u044f<\/h1>\n\n\n\n
            \nhttps:\/\/github.com\/MihhailLastovski\/passwordHash.git\n<\/div><\/figure>\n\n\n\n

            \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: generateHash.js \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434<\/p>\n\n\n\n

            123456789101112<\/td>const bcrypt = require(<\/code>'bcrypt'<\/code>);<\/code>const myPassword = <\/code>''<\/code>;<\/code>console.time(<\/code>'Time to generate salt'<\/code>);<\/code>const salt = bcrypt.genSaltSync(10);<\/code>console.log(<\/code>'This is your salt: '<\/code>+ salt);<\/code>console.timeEnd(<\/code>'Time to generate salt'<\/code>);<\/code>console.time(<\/code>'Time to generate hash'<\/code>);<\/code>const  hashedPassword = bcrypt.hashSync(myPassword, salt);<\/code>console.log(myPassword + <\/code>' is your passwod & this your password after hashing it: '<\/code>+ hashedPassword);<\/code>console.timeEnd(<\/code>'Time to generate hash'<\/code>);<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

            \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u0434 \u0438\u043b\u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c ctrl + shift + F10
            \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u201c\u0441\u043e\u043b\u044c\u201d \u0438 \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u043e\u043b\u0438<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            Password salting<\/strong> \u2013 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0434\u043e \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0430\u0440\u043e\u043b\u044f \u043f\u0435\u0440\u0435\u0434 \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0440\u043e\u043b\u044c
            Password hashing<\/strong> \u2013 \u044d\u0442\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043f\u0430\u0440\u043e\u043b\u044c \u0432 \u0437\u0430\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n\n\n\n

            Minu telefoninumber: +372 53630434\nMinu post: lastovskim@gmail.com<\/code><\/pre>\n\n\n\n
            Copyright – OceanWP Theme by OceanWP<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
            Harjutused 2-8\/10-12 Harjutus 2 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 codesandbox \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c CodeSandbox\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d Vanilla Js\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 index.mjs \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u043c\u0438 \u043c\u0430\u0448\u0438\u043d 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 import”.\/styles.css”;const myjson = [  {    Car: {      Color: “Rose red”,      “Tinted windows”: false,      Wheels: 4,      “Roof Cargo”: null,      Entertainment: [“Fm Radio”, “MP3, MP4 and MKV player”, “harman\/kardon speakers”],      Accessories: [“satnav”,”cruise control”]    },    Car2:{      Color: “Navy blue”,      “Tinted windows”: true,      Wheels: 4,      “Roof Cargo”: “Thule”,      Entertainment: [“Fm […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-475","page","type-page","status-publish","hentry"],"yoast_head":"\nHarjutused - Irina Merkulova õpimapp | portfoolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Harjutused - Irina Merkulova õpimapp | portfoolio\" \/>\n<meta property=\"og:description\" content=\"Harjutused 2-8\/10-12 Harjutus 2 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 codesandbox \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c CodeSandbox\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d Vanilla Js\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 index.mjs \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u043c\u0438 \u043c\u0430\u0448\u0438\u043d 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 import".\/styles.css";const myjson = [  {    Car: {      Color: "Rose red",      "Tinted windows": false,      Wheels: 4,      "Roof Cargo": null,      Entertainment: ["Fm Radio", "MP3, MP4 and MKV player", "harman\/kardon speakers"],      Accessories: ["satnav","cruise control"]    },    Car2:{      Color: "Navy blue",      "Tinted windows": true,      Wheels: 4,      "Roof Cargo": "Thule",      Entertainment: ["Fm […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/\" \/>\n<meta property=\"og:site_name\" content=\"Irina Merkulova õpimapp | portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-04T12:10:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"13 minutit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/\",\"url\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/\",\"name\":\"Harjutused - Irina Merkulova õpimapp | portfoolio\",\"isPartOf\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lastovski21.thkit.ee\/wp\/wp-content\/uploads\/2023\/09\/pilt-11.png\",\"datePublished\":\"2024-09-04T10:28:48+00:00\",\"dateModified\":\"2024-09-04T12:10:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#primaryimage\",\"url\":\"https:\/\/lastovski21.thkit.ee\/wp\/wp-content\/uploads\/2023\/09\/pilt-11.png\",\"contentUrl\":\"https:\/\/lastovski21.thkit.ee\/wp\/wp-content\/uploads\/2023\/09\/pilt-11.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/merkulova.thkit.ee\/wp20\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Harjutused\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#website\",\"url\":\"https:\/\/merkulova.thkit.ee\/wp20\/\",\"name\":\"Veebirakenduse portfoolio\",\"description\":\"Noorem Tarkvaraarendaja eriala\",\"publisher\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/merkulova.thkit.ee\/wp20\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/merkulova.thkit.ee\/wp20\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Harjutused - Irina Merkulova õpimapp | portfoolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/","og_locale":"et_EE","og_type":"article","og_title":"Harjutused - Irina Merkulova õpimapp | portfoolio","og_description":"Harjutused 2-8\/10-12 Harjutus 2 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 codesandbox \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c CodeSandbox\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d Vanilla Js\u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 index.mjs \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u043c\u0438 \u043c\u0430\u0448\u0438\u043d 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 import\".\/styles.css\";const myjson = [  {    Car: {      Color: \"Rose red\",      \"Tinted windows\": false,      Wheels: 4,      \"Roof Cargo\": null,      Entertainment: [\"Fm Radio\", \"MP3, MP4 and MKV player\", \"harman\/kardon speakers\"],      Accessories: [\"satnav\",\"cruise control\"]    },    Car2:{      Color: \"Navy blue\",      \"Tinted windows\": true,      Wheels: 4,      \"Roof Cargo\": \"Thule\",      Entertainment: [\"Fm […]","og_url":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/","og_site_name":"Irina Merkulova õpimapp | portfoolio","article_modified_time":"2024-09-04T12:10:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"13 minutit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/","url":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/","name":"Harjutused - Irina Merkulova õpimapp | portfoolio","isPartOf":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#website"},"primaryImageOfPage":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#primaryimage"},"image":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#primaryimage"},"thumbnailUrl":"https:\/\/lastovski21.thkit.ee\/wp\/wp-content\/uploads\/2023\/09\/pilt-11.png","datePublished":"2024-09-04T10:28:48+00:00","dateModified":"2024-09-04T12:10:17+00:00","breadcrumb":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#primaryimage","url":"https:\/\/lastovski21.thkit.ee\/wp\/wp-content\/uploads\/2023\/09\/pilt-11.png","contentUrl":"https:\/\/lastovski21.thkit.ee\/wp\/wp-content\/uploads\/2023\/09\/pilt-11.png"},{"@type":"BreadcrumbList","@id":"https:\/\/merkulova.thkit.ee\/wp20\/harjutused\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/merkulova.thkit.ee\/wp20\/"},{"@type":"ListItem","position":2,"name":"Harjutused"}]},{"@type":"WebSite","@id":"https:\/\/merkulova.thkit.ee\/wp20\/#website","url":"https:\/\/merkulova.thkit.ee\/wp20\/","name":"Veebirakenduse portfoolio","description":"Noorem Tarkvaraarendaja eriala","publisher":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/merkulova.thkit.ee\/wp20\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"},{"@type":["Person","Organization"],"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae","name":"admin","image":{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g","caption":"admin"},"logo":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/merkulova.thkit.ee\/wp20"]}]}},"_links":{"self":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":4,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages\/475\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages\/475\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/media?parent=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}