Рубрика: Java script

javascript. Урок 3. Загрузка файла с помощью javascript + AJAX с отображением индикатора загрузки. Сжатие изображений стороне сервера.

Файл к уроку.

ajax-file-progress-bar.com

Видео к уроку.

18.06.2018
Javascript. Урок 2. AJAX JSON примеры программ. С чего начать работу с AJAX JSON

Файл с материалами урока.

ajax

Видео урока.

15.06.2018
Javascript. Урок 1. Уроки по программированию Javascript для новичков.

Материалы к уроку 1.

Урок 1

Видео к уроку.

11.06.2018

Задания на циклы

Задание:

Вывести в столбец значения от 0 до 100
Вывести в столбец значения от 100 до 0
Вывести в столбец значения от 60 до 100
Вывести в столбец значения от -39 до 100
Вывести в строку четные числа
Вывести в строку нечетные числа.
Вывести в строку ряд 100 200 300 …..
Вывести рисунки как на картинке ниже используя циклы

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

1 0 0 0 0 0 0 0 0
0 1 0 0 0 0 0 0 0
0 0 1 0 0 0 0 0 0
0 0 0 1 0 0 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 0 0 1 0 0 0
0 0 0 0 0 0 1 0 0
0 0 0 0 0 0 0 1 0
0 0 0 0 0 0 0 0 1

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1

0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1

1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0

0 1 1 1 1 1 1 1 1
0 0 1 1 1 1 1 1 1
0 0 0 1 1 1 1 1 1
0 0 0 0 1 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 0 0 1
0 0 0 0 0 0 0 0 0

1 1 1 1 1 1 1 1 0
1 1 1 1 1 1 1 0 0
1 1 1 1 1 1 0 0 0
1 1 1 1 1 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 0 0 0 0 0 0
1 1 0 0 0 0 0 0 0
1 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 1 1 1 1 1
0 0 0 1 1 1 1 1 1
0 0 1 1 1 1 1 1 1
0 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1
0 1 1 1 1 1 1 1 0
0 0 1 1 1 1 1 0 0
0 0 0 1 1 1 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 1 1 1 0 0 0
0 0 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 0
1 1 1 1 1 1 1 1 1

0 0 0 0 0 0 0 0 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 1 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 0 0 1

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 1 1 1 0 0 0
0 0 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 0

1 0 0 0 0 0 0 0 0
1 1 0 0 0 0 0 0 0
1 1 1 0 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 1 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 0 0 0 0 0 0
1 1 0 0 0 0 0 0 0
1 0 0 0 0 0 0 0 0

0 1 1 1 1 1 1 1 0
0 0 1 1 1 1 1 0 0
0 0 0 1 1 1 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

1 0 0 0 0 0 0 0 1
1 1 0 0 0 0 0 1 1
1 1 1 0 0 0 1 1 1
1 1 1 1 0 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 0 1 1 1 1
1 1 1 0 0 0 1 1 1
1 1 0 0 0 0 0 1 1
1 0 0 0 0 0 0 0 1

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 1
1 0 1 1 1 1 1 0 1
1 0 1 0 0 0 1 0 1
1 0 1 0 1 0 1 0 1
1 0 1 0 0 0 1 0 1
1 0 1 1 1 1 1 0 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 0 1
1 0 0 0 0 0 1 0 1
1 0 1 1 1 0 1 0 1
1 0 1 0 0 0 1 0 1
1 0 1 1 1 1 1 0 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

26.10.2017

dropzone

Простой скрипт загрузки файлов

dropzone

23.01.2017

Задания onkeypress, onkeyup, onkeydown и onfocus

Задание

Создать поле для ввода только цифр.
Сделать поле, что бы в котором при вводе буквы становились заглавными.
Написать функция для вывода сообщения при вводе символа в поле (нажатие клавиши)
Написать функция меняющую цвет поля при установки в нем курсора

Решение

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  Введите ваш возраст:
  <input type="text">
  <script>
    document.getElementsByTagName('input')[0].onkeypress = function(e) {
      e = e || event;
      if (e.ctrlKey || e.altKey || e.metaKey) return;
      var chr = getChar(e);
      // с null надо осторожно в неравенствах, т.к. например null >= '0' => true!
      // на всякий случай лучше вынести проверку chr == null отдельно
      if (chr == null) return;
      if (chr < '0' || chr > '9') {
        return false;
      }
    }
    function getChar(event) {
      if (event.which == null) {
        if (event.keyCode < 32) return null;
        return String.fromCharCode(event.keyCode) // IE
      }
      if (event.which != 0 && event.charCode != 0) {
        if (event.which < 32) return null;
        return String.fromCharCode(event.which) // остальные
      }
      return null; // специальная клавиша
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
имя: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction() {
    alert("функция выполнена");
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
имя: <input type="text" id="fname" onfocus="myFunction()">
<script>
function myFunction() {
    document.getElementById("fname").style.backgroundColor = "red";
}
</script>
</body>
</html>

21.07.2016

Задание на onmousemove и onmouseout

Задание

Написать счетчик, который будет считать движения мыши в блоке.
Написать программу для определения координат мыши в блоке.

Решение

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#demo {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}
p {
    background-color: white;
}
</style>
</head>
<body>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Наведите мышь</span></p>
</div>
<script>
var x = 0;
var y = 0;
var z = 0;
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    width: 500px;
    height: 500px;
    border: 1px solid black;
}
</style>
</head>
<body>
<p id="demo"></p>
<div onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<script>
function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "координаты: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
</script>
</body>
</html>

21.07.2016

Урок 8. Игра крестики нолики на javascript
СВОЙСТВА и МЕТОДЫ

Length свойство, устанавливает или возвращает количество элементов в массиве

Нестандартное свойство innerText. Всеми браузерами, кроме Firefox 44- (согласно CanIUse.Com), поддерживается нестандартное свойство innerText.

У него, в некотором роде, преимущество перед textContent в том, что оно по названию напоминает innerHTML, его проще запомнить.

Однако, свойство innerText не следует использовать, так как оно не стандартное и не будет стандартным.

Это свойство возвращает текст не в том виде, в котором он в DOM, а в том, в котором он виден – как если бы мы выбрали содержимое элемента мышкой и скопировали его. В частности, если элемент невидим, то его текст возвращён не будет. Это довольно странная особенность существует по историческим причинам и скорее мешает, чем помогает.

Впрочем, при записи значения innerText работает так же, как и textContent.

Метод querySelectorAll ( ) возвращает все элементы в документе , который соответствует заданному селектор (ы) CSS , как статический объект NodeList .

Объект NodeList представляет коллекцию узлов . Узлам могут быть доступны номера индексов . Индекс начинается с 0 .

КОД
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.cell { width: 50px; height: 50px; display: inline-block; border: 1px solid black; font-size: 50px; margin: 4px; padding: 0px; }
</style>
</head>
<body>
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
<script>
(function (d){ player = true; 
  function clsCells(arr) {
  for(var i = 0, len = arr.length;i < len; i++) { 
    arr[i].innerText = ""};
  }; 
  d.onclick = function (e) { 
  if ((e.target.className == "cell") && (e.target.innerText == "")) { 
    if (player){ e.target.innerText = "X"; player = false; } 
    else { e.target.innerText = "O"; player = true; } 
    var arr = d.querySelectorAll('.cell'), v = []; 
    for(var i = 0, len = arr.length;i < len; i++) { 
          v[i] = arr[i].innerText }; 
    if ((v[0] == "X" && v[1] == "X" && v[2] == "X") || (v[3] == "X" && v[4] == "X" && v[5] == "X") || (v[6] == "X" && v[7] == "X" && v[8] == "X") || (v[0] == "X" && v[3] == "X" && v[6] == "X") || (v[1] == "X" && v[4] == "X" && v[7] == "X") || (v[2] == "X" && v[5] == "X" && v[8] == "X") || (v[0] == "X" && v[4] == "X" && v[8] == "X") || (v[2] == "X" && v[4] == "X" && v[6] == "X")) {alert("X wins!"); clsCells(arr);} if ((v[0] == "O" && v[1] == "O" && v[2] == "O") || (v[3] == "O" && v[4] == "O" && v[5] == "O") || (v[6] == "O" && v[7] == "O" && v[8] == "O") || (v[0] == "O" && v[3] == "O" && v[6] == "O") || (v[1] == "O" && v[4] == "O" && v[7] == "O") || (v[2] == "O" && v[5] == "O" && v[8] == "O") || (v[0] == "O" && v[4] == "O" && v[8] == "O") || (v[2] == "O" && v[4] == "O" && v[6] == "O")) {alert("O wins!"); clsCells(arr);} } 
    }; 
    })
    (document);
</script>
</body>
</html>
```
21.07.2016
Урок 10. AJAX
AJAX выполняет обновление части веб-страницы, без перезагрузки всей страницы.

AJAX — метод для создания быстрых и динамических веб-страниц.

AJAX позволяет создание веб-страниц, которые будут обновляться асинхронно путем обмена небольшими объемами данных с сервером за кулисами. Это означает, что можно обновлять части веб-страницы, без перезагрузки всей страницы.

Классические веб-страниц, (которые не используют AJAX), перезагружают всю страницу, если содержание должно измениться.

Примеры приложений, использующих AJAX: Google Maps, Gmail, YouTube и Facebook.

Пример №1

СОБЫТИЯ

OnClick событие, выполнение JavaScript при щелчке по кнопке.

XMLHttpRequest () для чтения текстового файла.

Onreadystatechange событие, Когда запрос на сервер отправляется, мы хотим, чтобы выполнились некоторые действия, основанные на ответе.

Событие onreadystatechange срабатывает каждый раз, когда readyState изменения.

ReadyState свойство содержит статус XMLHttpRequest.

getElementById () Метод, возвращает элемент, который имеет атрибут ID с указанным значением.

Этот метод является одним из наиболее распространенных методов в HTML DOM, и используется почти каждый раз, когда вы хотите управлять, или получить информацию из, элемента на документе.

Возвращает NULL , если никакие элементы с указанным идентификатором не существует.

ID должно быть уникальным в пределах страницы. Тем не менее, если существует более одного элемента с указанным идентификатором, метод getElementById () возвращает первый элемент в исходном коде.

responseText свойство, Возвращает ответ сервера в виде строки.

КОД
```
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2> 
Пусть AJAX изменить этот текст</h2></div>
<button type="button" onclick="loadDoc()">Изменение содержимого </button>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>
</body>
</html>
```
Пример №2

СОБЫТИЯ

OnKeyUp Событие, происходит, когда пользователь отпускает клавишу (на клавиатуре).

InnerHTML свойство, возвращает содержимое HTML (внутренний HTML) элемента.

КОД
```
<!DOCTYPE html>
<html>
<body>
<h3>Начните вводить имя в поле ввода ниже:</h3>
<form action="">
Имя: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Предложения: <span id="txtHint"></span></p>
<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("txtHint").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "gethint.php?q="+str, true);
  xhttp.send();
}
</script>
</body>
</html>
```
21.07.2016

Урок 9. Игра змейка на javascript

АЛГОРИТМ

— клеточки змейки помечаются классом «s» а еда классом «f», по наличию этих классов и определяется коллизия со змеей или с едой

— каждая новая клетка змеи помечается атрибутом «data-n» который равен number++ (постоянно увеличивается)

— ищем div’ы с классом «s» (клетки змеи) и находим клетку с минимальным значением data-n и делаем ее обычной (удаляем/перемещаем хвост змеи)

СОБЫТИЯ и МЕТОДЫ

OnKeyDown Событие, выполнение JavaScript, когда пользователь нажимает клавишу.

setInterval () Метод, вызывает функцию или вычисляет выражение через определенные промежутки времени.

Метод setInterval () будет продолжать вызов функции до вызова clearInterval (), или при закрытии окна.

getElementsByClassName () Метод, возвращает коллекцию всех элементов в документе с указанным именем класса, как NodeList объекта.

Объект NodeList представляет коллекцию узлов. Узлами могут быть номера индексов. Индекс начинается с 0.

alert () Метод, Окно оповещения, отображает окно с предупреждением с заданным сообщением и кнопкой OK, часто используется, если вы хотите, убедиться, что информация доходит до пользователя.

SetAttribute () Метод, добавляет указанный атрибут к элементу, и придает ему определенное значение.

Если указанный атрибут уже существует, значение изменяется.

Math.round () Метод, округляет число до ближайшего целого числа.

Math.random() Метод, Возвращает случайное число в диапазоне от 0 (включительно) и 1 (включительно)

html

<div id="main" class="main">
<div class='line'><div data-n='1' class="0_0 s"></div><div class="0_1"></div><div class="0_2"></div><div class="0_3"></div><div class="0_4"></div><div class="0_5"></div><div class="0_6"></div><div class="0_7"></div><div class="0_8"></div><div class="0_9"></div></div>
<div class="line"><div class="1_0"></div><div class="1_1"></div><div class="1_2"></div><div class="1_3"></div><div class="1_4"></div><div class="1_5"></div><div class="1_6"></div><div class="1_7"></div><div class="1_8"></div><div class="1_9"></div></div><div class="line"><div class="2_0"></div><div class="2_1"></div><div class="2_2"></div><div class="2_3"></div><div class="2_4"></div><div class="2_5"></div><div class="2_6"></div><div class="2_7"></div><div class="2_8"></div><div class="2_9"></div></div>
<div class="line"><div class="3_0"></div><div class="3_1"></div><div class="3_2"></div><div class="3_3"></div><div class="3_4"></div><div class="3_5"></div><div class="3_6"></div><div class="3_7"></div><div class="3_8"></div><div class="3_9"></div></div><div class="line"><div class="4_0"></div><div class="4_1"></div><div class="4_2"></div><div class="4_3"></div><div class="4_4"></div><div class="4_5"></div><div class="4_6"></div><div class="4_7"></div><div class="4_8"></div><div class="4_9"></div></div>
<div class="line"><div class="5_0"></div><div class="5_1"></div><div class="5_2"></div><div class="5_3"></div><div class="5_4"></div><div class="5_5"></div><div class="5_6"></div><div class="5_7"></div><div class="5_8"></div><div class="5_9"></div></div><div class="line"><div class="6_0"></div><div class="6_1"></div><div class="6_2"></div><div class="6_3"></div><div class="6_4"></div><div class="6_5"></div><div class="6_6"></div><div class="6_7"></div><div class="6_8"></div><div class="6_9"></div></div>
<div class="line"><div class="7_0"></div><div class="7_1"></div><div class="7_2"></div><div class="7_3"></div><div class="7_4"></div><div class="7_5"></div><div class="7_6"></div><div class="7_7"></div><div class="7_8"></div><div class="7_9"></div></div><div class="line"><div class="8_0"></div><div class="8_1"></div><div class="8_2"></div><div class="8_3"></div><div class="8_4"></div><div class="8_5"></div><div class="8_6"></div><div class="8_7"></div><div class="8_8"></div><div class="8_9"></div></div>
<div class="line"><div class="9_0"></div><div class="9_1"></div><div class="9_2"></div><div class="9_3"></div><div class="9_4"></div><div class="9_5"></div><div class="9_6"></div><div class="9_7"></div><div class="9_8"></div><div class="9_9"></div></div>
</div>

style

.main .line {
    clear: both;
}
.main .line div {
    width: 20px;
    height: 20px;
    float: left;
    margin: 1px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color .5s;
}
.main .line div.s {
    background-color: #bbb;
    transition: background-color .5s;
}
.main .line div.f {
    background-color: green;
    transition: background-color 2s;
}

script

<script>
  (function(width, height, length, current, dx, dy, x, y, hasFood, newEl){     
    
document.body.onkeydown = function(e){
    dx = (e.keyCode - 38) % 2, dy = (e.keyCode - 39) % 2; // перемещение змейки по координатам при нажатии клавиш
};
    
var timer = setInterval(function () {
    x = (x + dx) < 0 ? width - 1 : (x + dx) % width; 
    y = (y + dy) < 0 ? height - 1 : (y + dy) % height;
    newEl = document.getElementsByClassName(y + '_' + x)[0]
    if(newEl.className.indexOf('s') > 0) {
    	clearInterval(timer), alert('Game Over! Score: ' + length) // завершении игры при попадении в часть змейки
    };
    if(newEl.className.indexOf('f') > 0) {
    	newEl.className = newEl.className.replace(' f', ''), length++, hasFood = false;
    }
    newEl.className += ' s', newEl.setAttribute('data-n', current++); // увеличении змейки при съедании бонуса

    for(var i = 0, min = Infinity, item, items = document.getElementsByClassName('s'), len = items.length; i < len && len > length; i++)
    	if(+items[i].getAttribute('data-n') < min)
    		min = +items[i].getAttribute('data-n'), item = items[i];

    if(!!item) item.className = item.className.replace(' s', '');

    for(var fItem, fX, fY; !hasFood; fX = Math.round(Math.random() * 10 % width), fY = Math.round(Math.random() * 10 % height)) // появление бонуса
    	if(!!fX && !!fY && document.getElementsByClassName(fY + '_' + fX)[0].className.indexOf('s') < 0)
    		hasFood = true, document.getElementsByClassName(fY + '_' + fX)[0].className += ' f';
}, 500); // скорость движения змейки

})(10, 10, 5, 1, 1, 0, 0, 0, false, null);
    </script>

21.07.2016

Рубрика: Java script

Видео к уроку.