Single page application

Baseline

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<script> // Тригер для первой кнопки btn-trigger-1 $("body").on("mouseover", '.btn-trigger-1', function(){ $('.img-switch-1').toggleClass("animation-step-1"); $('.img-switch-1').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-1', function(){ $('.img-switch-1').removeClass("animation-step-1"); $('.img-switch-1').toggleClass("animation-step-2"); }); var intervalId = window.setInterval(function(){ $('.img-switch-1').removeClass("animation-step-2"); }, 400); // Тригер для второй кнопки btn-trigger-2 $("body").on("mouseover", '.btn-trigger-2', function(){ $('.img-switch-2').toggleClass("animation-step-1"); $('.img-switch-2').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-2', function(){ $('.img-switch-2').removeClass("animation-step-1"); $('.img-switch-

§2

1. Setting up programming environment

JS: Single page application

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<script> // Тригер для первой кнопки btn-trigger-1 $("body").on("mouseover", '.btn-trigger-1', function(){ $('.img-switch-1').toggleClass("animation-step-1"); $('.img-switch-1').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-1', function(){ $('.img-switch-1').removeClass("animation-step-1"); $('.img-switch-1').toggleClass("animation-step-2"); }); var intervalId = window.setInterval(function(){ $('.img-switch-1').removeClass("animation-step-2"); }, 400); // Тригер для второй кнопки btn-trigger-2 $("body").on("mouseover", '.btn-trigger-2', function(){ $('.img-switch-2').toggleClass("animation-step-1"); $('.img-switch-2').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-2', function(){ $('.img-switch-2').removeClass("animation-step-1"); $('.img-switch-

2. AngularJS quick start

Infrastructure management

JS: Single page application

Cloud and VPS hosting, Introduction to Docker, Introduction to Kubernetes
Vagrant

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<script> // Тригер для первой кнопки btn-trigger-1 $("body").on("mouseover", '.btn-trigger-1', function(){ $('.img-switch-1').toggleClass("animation-step-1"); $('.img-switch-1').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-1', function(){ $('.img-switch-1').removeClass("animation-step-1"); $('.img-switch-1').toggleClass("animation-step-2"); }); var intervalId = window.setInterval(function(){ $('.img-switch-1').removeClass("animation-step-2"); }, 400); // Тригер для второй кнопки btn-trigger-2 $("body").on("mouseover", '.btn-trigger-2', function(){ $('.img-switch-2').toggleClass("animation-step-1"); $('.img-switch-2').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-2', function(){ $('.img-switch-2').removeClass("animation-step-1"); $('.img-switch-

3. Understanding API functionality

Infrastructure management

JS: Single page application

Cloud and VPS hosting, Introduction to Docker, Introduction to Kubernetes
Vagrant

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<script> // Тригер для первой кнопки btn-trigger-1 $("body").on("mouseover", '.btn-trigger-1', function(){ $('.img-switch-1').toggleClass("animation-step-1"); $('.img-switch-1').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-1', function(){ $('.img-switch-1').removeClass("animation-step-1"); $('.img-switch-1').toggleClass("animation-step-2"); }); var intervalId = window.setInterval(function(){ $('.img-switch-1').removeClass("animation-step-2"); }, 400); // Тригер для второй кнопки btn-trigger-2 $("body").on("mouseover", '.btn-trigger-2', function(){ $('.img-switch-2').toggleClass("animation-step-1"); $('.img-switch-2').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-2', function(){ $('.img-switch-2').removeClass("animation-step-1"); $('.img-switch-

4. Introducing Swagger

Infrastructure management

JS: Single page application

Cloud and VPS hosting, Introduction to Docker, Introduction to Kubernetes
Vagrant

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<script> // Тригер для первой кнопки btn-trigger-1 $("body").on("mouseover", '.btn-trigger-1', function(){ $('.img-switch-1').toggleClass("animation-step-1"); $('.img-switch-1').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-1', function(){ $('.img-switch-1').removeClass("animation-step-1"); $('.img-switch-1').toggleClass("animation-step-2"); }); var intervalId = window.setInterval(function(){ $('.img-switch-1').removeClass("animation-step-2"); }, 400); // Тригер для второй кнопки btn-trigger-2 $("body").on("mouseover", '.btn-trigger-2', function(){ $('.img-switch-2').toggleClass("animation-step-1"); $('.img-switch-2').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-2', function(){ $('.img-switch-2').removeClass("animation-step-1"); $('.img-switch-

5. Testing SPA applications

Infrastructure management

JS: Single page application

Cloud and VPS hosting, Introduction to Docker, Introduction to Kubernetes
Vagrant

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<script> // Тригер для первой кнопки btn-trigger-1 $("body").on("mouseover", '.btn-trigger-1', function(){ $('.img-switch-1').toggleClass("animation-step-1"); $('.img-switch-1').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-1', function(){ $('.img-switch-1').removeClass("animation-step-1"); $('.img-switch-1').toggleClass("animation-step-2"); }); var intervalId = window.setInterval(function(){ $('.img-switch-1').removeClass("animation-step-2"); }, 400); // Тригер для второй кнопки btn-trigger-2 $("body").on("mouseover", '.btn-trigger-2', function(){ $('.img-switch-2').toggleClass("animation-step-1"); $('.img-switch-2').removeClass("animation-step-2"); }); $("body").on("mouseout", '.btn-trigger-2', function(){ $('.img-switch-2').removeClass("animation-step-1"); $('.img-switch-

5. Deployment

Infrastructure management

JS: Single page application

Cloud and VPS hosting, Introduction to Docker, Introduction to Kubernetes
Vagrant

*
Простые уроки, которые входят в базовые знания и в них обязательно нужно разобраться.

Infrastructure management

JS: Single page application

Cloud and VPS hosting, Introduction to Docker, Introduction to Kubernetes
Vagrant

**
Уроки, с которыми сложно разобраться, не вникнув в базовые знания. Иногда может понадобиться пересмотреть простые уроки, для того, чтобы понять тему.

***
Сложные уроки, которые потребуют практики и реального применения. Их можно отложить до момента, пока знания из них не будут нужны в реальном проекте.