Aug 4, 2022 · May 24, 2022 · May 24, 2022 · May 25, 2022 · May 25, 2022 · May 25, 2022
diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md
diff --git a/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html b/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/facebook.html

 <body style="margin:10px;padding:10px">

  <input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
  <input type="button" onclick="alert('Лайк натиснуто на facebook.html!')" value="I LIKE IT !">

 </body>

diff --git a/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html b/3-frames-and-windows/06-clickjacking/clickjacking-visible.view/index.html
    }
  </style>

  <div>Click to get rich now:</div>
  <div>Натисніть, щоб розбагатіти:</div>

  <!--The url from the victim site -->
  <!--URL-адреса з сайту-жертви -->
  <iframe src="facebook.html"></iframe>

  <button>Click here!</button>
  <button>Натисніть тут!</button>

  <div>...And you're cool (I'm a cool hacker actually)!</div>
  <div>...І ти крутий (насправді я крутий хакер)!</div>

 </body>
 </html>
diff --git a/3-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html b/3-frames-and-windows/06-clickjacking/clickjacking.view/facebook.html

 <body style="margin:10px;padding:10px">

  <input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
  <input type="button" onclick="alert('Лайк натиснуто на facebook.html!')" value="I LIKE IT !">

 </body>

diff --git a/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html b/3-frames-and-windows/06-clickjacking/clickjacking.view/index.html
    }
  </style>

  <div>Click to get rich now:</div>
  <div>Натисніть, щоб розбагатіти:</div>

  <!--The url from the victim site -->
  <!--URL-адреса з сайту-жертви -->
  <iframe src="facebook.html"></iframe>

  <button>Click here!</button>
  <button>Натисніть тут!</button>

  <div>...And you're cool (I'm a cool hacker actually)!</div>
  <div>...І ти крутий (насправді я крутий хакер)!</div>

 </body>
 </html>
diff --git a/3-frames-and-windows/06-clickjacking/protector.view/iframe.html b/3-frames-and-windows/06-clickjacking/protector.view/iframe.html
 <body>

 <div id="protector">
  <a href="/" target="_blank">Go to the site</a>
  <a href="/" target="_blank">Перейти на сайт</a>
 </div>

 <script>

 </script>

 This text is always visible.
 Цей текст завжди видно.

 But if the page was open inside a document from another domain, thedivover it would prevent any actions.
 Але якщо сторінка була відкрита всередині документа з іншого домену,divнад нею завадить будь-яким діям.

  <button onclick="alert(1)">Click wouldn't work in that case</button>
  <button onclick="alert(1)">Клік у даному випадку не спрацює</button>

 </body>
 </html>
diff --git a/3-frames-and-windows/06-clickjacking/top-location.view/iframe.html b/3-frames-and-windows/06-clickjacking/top-location.view/iframe.html

 <body>

  <div>Changes top.locationto javascript.info</div>
  <div>Змінює top.locationна javascript.info</div>

  <script>
    top.location = 'https://javascript.info';
diff --git a/3-frames-and-windows/06-clickjacking/top-location.view/index.html b/3-frames-and-windows/06-clickjacking/top-location.view/index.html

      window.onbeforeunload = function() {
        window.onbeforeunload = null;
        return "Want to leave without learning all the secrets (he-he)?";
        return "Хочете піти, не дізнавшись усіх секретів (хе-хе)?";
      };

      document.body.insertAdjacentHTML('beforeend', '<iframe src="iframe.html">');

 <body>

  <p>After a click on the button the visitor gets a "strange" question about whether they want to leave.</p>
  <p>Після натискання на кнопку відвідувач отримує "дивне" запитання про те, чи хоче він піти.</p>

  <p>Probably they would respond "No",and the iframeprotection is hacked.</p>
  <p>Ймовірно, він відповів би "ні",а захист iframeзламано.</p>

  <button onclick="attack()">Add a "protected" iframe</button>
  <button onclick="attack()">Додайте "захищений" iframe</button>

 </body>
 </html>
diff --git a/5-network/12-server-sent-events/article.md b/5-network/12-server-sent-events/article.md
diff --git a/5-network/12-server-sent-events/eventsource.view/index.html b/5-network/12-server-sent-events/eventsource.view/index.html
 <script>
 let eventSource;

 function start() { //when "Start" button pressed
 function start() { //коли кнопку "Пуск" натиснуто
  if (!window.EventSource) {
    // IEor an old browser
    alert("The browser doesn't support EventSource.");
    //дляIEчи іншого старого браузера
    alert("Браузер не підтримує EventSource.");
    return;
  }

  eventSource = new EventSource('digits');

  eventSource.onopen = function(e) {
    log("Event: open");
    log("Подія: open");
  };

  eventSource.onerror = function(e) {
    log("Event: error");
    log("Подія: error");
    if (this.readyState == EventSource.CONNECTING) {
      log(`Reconnecting (readyState=${this.readyState})...`);
      log(`Повторне з’єднання (readyState=${this.readyState})...`);
    } else {
      log("Error has occured.");
      log("Сталася помилка.");
    }
  };

  eventSource.addEventListener('bye', function(e) {
    log("Event: bye,data: " + e.data);
    log("Подія: bye,дані: " + e.data);
  });

  eventSource.onmessage = function(e) {
    log("Event: message,data: " + e.data);
    log("Подія: message,дані: " + e.data);
  };
 }

 function stop() { //when "Stop" button pressed
 function stop() { //коли кнопку "Стоп" натиснуто
  eventSource.close();
  log("eventSource.close()");
 }
 }
 </script>

 <button onclick="start()">Start</button>Press the "Start" to begin.
 <button onclick="start()">Пуск</button>Натісніть "Пуск" для початку.
 <div id="logElem" style="margin: 6px 0"></div>

 <button onclick="stop()">Stop</button> "Stop" to finish.
 <button onclick="stop()">Стоп</button> "Стоп" для зупинки.
diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md
 ```

 - `name` -- рядок, ім’я бази даних.

 - `version` -- версія є цілим числом, типово `1` (пояснення нижче).

 У нас може бути багато баз даних з різними іменами, але всі вони існують лише в межах поточного вебсайту (протокол/домен/порт). Різні вебсайти не мають доступу до баз даних один одного.

 - **`query`** є ключем або діапазоном ключів, як і для `getAll`.
 - **`direction`** є необов’язковим аргументом, що вказує який порядок використовувати:
 - `"next"` -- типово, курсор піднімається від найнижчого ключа до найвищчого.
 - `"prev"` -- зворотний порядок: вниз від запису з найбільшим ключем.
 - `"nextunique"`, `"prevunique"` -- те саме, що й вище, але пропускає записи з тим же ключем, який вже був (лише для курсорів за індексами, наприклад, для кількох книг із ціною=5 буде повернута лише перша).
 - `"next"` -- типово, курсор піднімається від найнижчого ключа до найвищчого.
 - `"prev"` -- зворотний порядок: вниз від запису з найбільшим ключем.
 - `"nextunique"`, `"prevunique"` -- те саме, що й вище, але пропускає записи з тим же ключем, який вже був (лише для курсорів за індексами, наприклад, для кількох книг із ціною=5 буде повернута лише перша).

 **Основна відмінність курсору полягає в тому, що `request.onsuccess` запускається кілька разів: один раз для кожного результату.**

diff --git a/7-animation/2-css-animations/4-animate-circle-callback/task.md b/7-animation/2-css-animations/4-animate-circle-callback/task.md

 #Animated circle with callback
 #Коло анімоване за допомогою функції.

 In the task<info:task/animate-circle>an animated growing circle is shown.
 У завданні<info:task/animate-circle>показана анімація зростання кола.

 Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown),otherwise it would look ugly.
 Припустимо, що нам потрібно показати повідомлення всередині нього. Повідомлення має з’явитися *після* завершення анімації (коли коло повністю виросло),інакше це виглядатиме погано.

 In the solution of the task, the function`showCircle(cx, cy, radius)`draws the circle, but gives no way to track when it's ready.
 У вирішенні завдання функція`showCircle(cx, cy, radius)`малює коло, але не дає можливості відстежити, коли воно готове.

 Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle`<div>`as an argument.
 Додайте аргументом функцію зворотного виклику: `showCircle(cx, cy, radius, callback)`, яка буде викликатися після завершення анімації. Вона має отримувати коло`<div>`як аргумент.

 Here's the example:
 Ось приклад:

 ```js
 showCircle(150, 150, 100, div => {
 });
 ```

 Demo:
 Демо:

 [iframe src="solution" height=260]

 Take the solution of the task<info:task/animate-circle> as the base.
 За основу візьмемо рішення задачі<info:task/animate-circle>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@

		<body style="margin:10px;padding:10px">

		<input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
		<input type="button" onclick="alert('Лайк натиснуто на facebook.html!')" value="I LIKE IT !">

		</body>

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,14 +19,14 @@
		}
		</style>

		<div>Click to get rich now:</div>
		<div>Натисніть, щоб розбагатіти:</div>

		<!--The url from the victim site -->
		<!--URL-адреса з сайту-жертви -->
		<iframe src="facebook.html"></iframe>

		<button>Click here!</button>
		<button>Натисніть тут!</button>

		<div>...And you're cool (I'm a cool hacker actually)!</div>
		<div>...І ти крутий (насправді я крутий хакер)!</div>

		</body>
		</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,7 +20,7 @@
		<body>

		<div id="protector">
		<a href="/" target="_blank">Go to the site</a>
		<a href="/" target="_blank">Перейти на сайт</a>
		</div>

		<script>
Expand All		@@ -31,11 +31,11 @@

		</script>

		This text is always visible.
		Цей текст завжди видно.

		But if the page was open inside a document from another domain, thedivover it would prevent any actions.
		Але якщо сторінка була відкрита всередині документа з іншого домену,divнад нею завадить будь-яким діям.

		<button onclick="alert(1)">Click wouldn't work in that case</button>
		<button onclick="alert(1)">Клік у даному випадку не спрацює</button>

		</body>
		</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,7 @@

		<body>

		<div>Changes top.locationto javascript.info</div>
		<div>Змінює top.locationна javascript.info</div>

		<script>
		top.location = 'https://javascript.info';
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,7 +21,7 @@

		window.onbeforeunload = function() {
		window.onbeforeunload = null;
		return "Want to leave without learning all the secrets (he-he)?";
		return "Хочете піти, не дізнавшись усіх секретів (хе-хе)?";
		};

		document.body.insertAdjacentHTML('beforeend', '<iframe src="iframe.html">');
Expand All		@@ -31,11 +31,11 @@

		<body>

		<p>After a click on the button the visitor gets a "strange" question about whether they want to leave.</p>
		<p>Після натискання на кнопку відвідувач отримує "дивне" запитання про те, чи хоче він піти.</p>

		<p>Probably they would respond "No",and the iframeprotection is hacked.</p>
		<p>Ймовірно, він відповів би "ні",а захист iframeзламано.</p>

		<button onclick="attack()">Add a "protected" iframe</button>
		<button onclick="attack()">Додайте "захищений" iframe</button>

		</body>
		</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,38 +2,38 @@
		<script>
		let eventSource;

		function start() { //when "Start" button pressed
		function start() { //коли кнопку "Пуск" натиснуто
		if (!window.EventSource) {
		// IEor an old browser
		alert("The browser doesn't support EventSource.");
		//дляIEчи іншого старого браузера
		alert("Браузер не підтримує EventSource.");
		return;
		}

		eventSource = new EventSource('digits');

		eventSource.onopen = function(e) {
		log("Event: open");
		log("Подія: open");
		};

		eventSource.onerror = function(e) {
		log("Event: error");
		log("Подія: error");
		if (this.readyState == EventSource.CONNECTING) {
		log(`Reconnecting (readyState=${this.readyState})...`);
		log(`Повторне з’єднання (readyState=${this.readyState})...`);
		} else {
		log("Error has occured.");
		log("Сталася помилка.");
		}
		};

		eventSource.addEventListener('bye', function(e) {
		log("Event: bye,data: " + e.data);
		log("Подія: bye,дані: " + e.data);
		});

		eventSource.onmessage = function(e) {
		log("Event: message,data: " + e.data);
		log("Подія: message,дані: " + e.data);
		};
		}

		function stop() { //when "Stop" button pressed
		function stop() { //коли кнопку "Стоп" натиснуто
		eventSource.close();
		log("eventSource.close()");
		}
Expand All		@@ -44,7 +44,7 @@
		}
		</script>

		<button onclick="start()">Start</button>Press the "Start" to begin.
		<button onclick="start()">Пуск</button>Натісніть "Пуск" для початку.
		<div id="logElem" style="margin: 6px 0"></div>

		<button onclick="stop()">Stop</button> "Stop" to finish.
		<button onclick="stop()">Стоп</button> "Стоп" для зупинки.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,6 +35,7 @@ let openRequest = indexedDB.open(name, version);
		```

		- `name` -- рядок, ім’я бази даних.

astropsy999 marked this conversation as resolved. Show resolvedHide resolved
		- `version` -- версія є цілим числом, типово `1` (пояснення нижче).

		У нас може бути багато баз даних з різними іменами, але всі вони існують лише в межах поточного вебсайту (протокол/домен/порт). Різні вебсайти не мають доступу до баз даних один одного.
Expand DownExpand Up		@@ -660,9 +661,9 @@ let request = store.openCursor(query, [direction]);

		- `query` є ключем або діапазоном ключів, як і для `getAll`.
		- `direction` є необов’язковим аргументом, що вказує який порядок використовувати:
		- `"next"` -- типово, курсор піднімається від найнижчого ключа до найвищчого.
		- `"prev"` -- зворотний порядок: вниз від запису з найбільшим ключем.
		- `"nextunique"`, `"prevunique"` -- те саме, що й вище, але пропускає записи з тим же ключем, який вже був (лише для курсорів за індексами, наприклад, для кількох книг із ціною=5 буде повернута лише перша).
		- `"next"` -- типово, курсор піднімається від найнижчого ключа до найвищчого.
		- `"prev"` -- зворотний порядок: вниз від запису з найбільшим ключем.
		- `"nextunique"`, `"prevunique"` -- те саме, що й вище, але пропускає записи з тим же ключем, який вже був (лише для курсорів за індексами, наприклад, для кількох книг із ціною=5 буде повернута лише перша).

		Основна відмінність курсору полягає в тому, що `request.onsuccess` запускається кілька разів: один раз для кожного результату.

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,15 +1,15 @@

		#Animated circle with callback
		#Коло анімоване за допомогою функції.

		In the task<info:task/animate-circle>an animated growing circle is shown.
		У завданні<info:task/animate-circle>показана анімація зростання кола.

		Now let's say we need not just a circle, but to show a message inside it. The message should appear after the animation is complete (the circle is fully grown),otherwise it would look ugly.
		Припустимо, що нам потрібно показати повідомлення всередині нього. Повідомлення має з’явитися після завершення анімації (коли коло повністю виросло),інакше це виглядатиме погано.

		In the solution of the task, the function`showCircle(cx, cy, radius)`draws the circle, but gives no way to track when it's ready.
		У вирішенні завдання функція`showCircle(cx, cy, radius)`малює коло, але не дає можливості відстежити, коли воно готове.

		Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle`<div>`as an argument.
		Додайте аргументом функцію зворотного виклику: `showCircle(cx, cy, radius, callback)`, яка буде викликатися після завершення анімації. Вона має отримувати коло`<div>`як аргумент.

		Here's the example:
		Ось приклад:

		```js
		showCircle(150, 150, 100, div => {
Expand All		@@ -18,8 +18,8 @@ showCircle(150, 150, 100, div => {
		});
		```

		Demo:
		Демо:

		[iframe src="solution" height=260]

		Take the solution of the task<info:task/animate-circle> as the base.
		За основу візьмемо рішення задачі<info:task/animate-circle>