171 examples/js13-14/js/main.js
View file
@@ -0,0 +1,171 @@
'use strict';

(()=>{

function genDiv (parentElem, divClass) {
var Div = document.createElement('div');
Div.className = divClass;
parentElem.appendChild(Div);
return Div;
}
function genOl (parentElem) {
var olInBlock = document.createElement('ol');
parentElem.appendChild(olInBlock);
return olInBlock;
}
function genUl (parentElem) {
var ulInBlock = document.createElement('ul');
parentElem.appendChild(ulInBlock);
return ulInBlock;
}

function blockTitle (parent, child) {
parent.appendChild(child);
child.innerHTML = "Тест по программированию";
}

var questionNum = 0;
var questionText = 'Вопрос №';
function blockQuestion (parentElem) {
var question = document.createElement('li');
question.className = "listItem" +questionNum;
question.innerHTML = questionText + questionNum;
parentElem.appendChild(question);
}

var answerNum = 0;
var answerText = 'Вариант ответа №';
function blockAnswer (parentElem) {
var answerLi = document.createElement('li');
parentElem.appendChild(answerLi);
var answerCheck = document.createElement('input');
answerCheck.type = "checkbox";
answerCheck.id = "ques" + questionNum + "answ" + answerNum;
answerLi.appendChild(answerCheck);
var answerLab = document.createElement('label');
answerLab.className = "list-tem__label";
answerLab.innerHTML = answerText + answerNum;
answerLab.setAttribute('for','ques' + questionNum + 'answ' + answerNum);
answerLi.appendChild(answerLab);
}

function blockButton (parentElem) {
var button = document.createElement('button');
button.innerHTML = "Проверить мои результаты";
parentElem.appendChild(button);
}

var wrapper = genDiv (document.body, "wrapper");
var h = document.querySelector('div');
var h1 =document.createElement('h1');
blockTitle(h, h1);

var questOl = genOl(wrapper);
for (var i = 0; i < 3; i++){
questionNum = i+1;
blockQuestion(questOl);

var answerUl = genUl(questOl);
for (var j = 0; j < 3; j++){
answerNum = j+1;
blockAnswer(answerUl);
}
}
blockButton(wrapper);
(()=>{

var answ = {
listItem1: "ques1answ1",
listItem2: "ques2answ2",
listItem3: "ques3answ3"
};
localStorage.setItem('answer', JSON.stringify(answ));
})();
})();


(()=>{
function removeModal () {
$('.result').attr( 'style', 'display: none');
$('.modalBlock').remove();

}
function check () {

$(function() {
var html = $('#modal').html();
var answer = JSON.parse(localStorage.getItem('answer'));
var mack = 0;
var input = $('input[type="checkbox"]');
var q = 0;
var fps = 1;
var margin = 500;

function find (elemName) {
var Elem;
return Elem = document.getElementById( elemName );
}

if ( find(answer.listItem1).checked ) {
mack += 1;
};
if ( find(answer.listItem2).checked ) {
mack += 1;
};
if ( find(answer.listItem3).checked ) {
mack += 1;
};

for (var i = 0; i < input.length; i++) {
if( input[i].checked ) {q++}
}

var info = [
{
header: 'Слабак... Держи ответы!',
text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
firstquest: 'Вариант ответа №1',
secondquest: 'Вариант ответа №2',
thirdquest: 'Вариант ответа №3'
}
];
info[0].header = (mack == 3) ? "Хорошая работа, все верно!" :
( mack == 2 ) ? "Неплохо, но чютка не дотянул!" :
( mack == 1 ) ? "Слабовато, пройди материал еще разок!" :
'Слабак... Держи ответы!';

if ( q > 3 ) {
info[0].header ='На каждый вопрос есть только 1 правильный ответ!'
info[0].text ='...'
info[0].firstquest = 'nope';
info[0].secondquest = 'nope';
info[0].thirdquest = 'nope';
}

var content = tmpl(html, {
data: info
});

$('.result').attr( 'style', 'display: block');
$('.result').append(content);
$('.result').on('click', removeModal);

(function anim() {
margin = margin - 10;
$('.modalBlock').css('margin-top', '-' + margin + 'px');
if (margin > 150) setTimeout(anim, fps);
}());

});
// return value;
};
$(function() {
var button = document.querySelector('button');
$(button).click( check )
});
})();





53 examples/js14-15/css/style.css
View file
@@ -0,0 +1,53 @@
* {
margin: 0;
padding: 0;
}

.wrapper {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.search {
margin-top: 100px;
width: 80%;
height: 60px;
display: flex;
justify-content: center;
}
.search .form {
width: 80%;
height: 48px;
display: flex;
align-self: center;
justify-content: space-between;
align-items: center;
}
.search input {
width: 80%;
height: 32px;
}
.search .button {
width: 10%;
height: 32px;
}
.result img {
width: 23%;
height: 250px;
display: block;
margin: 1%;
float: left;
}
.test {
display: none;
height: 80px;
}
.test p:hover {
background: lightgray;
padding: 1px;
}

43 examples/js14-15/index.html
View file
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imgSecher</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>

<div class="wrapper">
<div class="prepare__test">
<input type="button" class="newTest" value="newTest">
<input type="button" class="showTest" value="showTest">
</div>

<div class="test">
<h3 id="question"></h3>
<p id="var1"></p>
<p id="var2"></p>
<p id="var3"></p>
<p id="var4"></p>
<input type="button" value="newTest" class="newTest">
<input type="button" class="showTest" value="showTest">
<input type="button" class="hideTest" value="hideTest">

</div>

<div class="search">
<div class="form">
<input type="text" id="search">
<input type="button" class="button" value="search">
</div>
</div>
<div class="result">

</div>
</div>


</body>
</html>
85 examples/js14-15/js/main.js
View file
@@ -0,0 +1,85 @@
'use strict'

$(function() {
var xhr = new XMLHttpRequest();
var result;

$( '.button' ).click(search)

function search () {
$('.resultBlock').remove();
var name = $('#search').val();
xhr.open('Get', 'https://pixabay.com/api/?key=5737438-5f42dbf912aaadd3f8f83083f&q=' + name, true )
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
result = JSON.parse(xhr.responseText).hits;
$('.result').append('<div class="resultBlock"></div>')
for (var i = 0; i < 20; i++) {
$('.resultBlock').append('<img src='+ result[i].webformatURL +' alt="">');
}
};
};
xhr.send();
}

document.onkeyup = function (e) {
e = e || window.event;
if (e.keyCode === 13) search();
return false;
}

});

$(function () {

var data_array = [];
var answer_array = $('.test').find('p');

$('.newTest').on('click', newTest);
$('.showTest').click(showTest);
$('.hideTest').click(hideTest);

function newTest () {

data_array[0] = prompt( 'введите вопрос: ', '');

data_array[1] = prompt( [1] + ' вариант ответа: ', '' )
data_array[2] = prompt( [2] + ' вариант ответа: ', '' )
data_array[3] = prompt( [3] + ' вариант ответа: ', '' )
data_array[4] = prompt( [4] + ' вариант ответа: ', '' )

data_array[5] = Number(prompt('введите № верного ответа: ', '' ))
};

function showTest () {
if(data_array[0] == undefined || null) {
alert('Введите вопрос и все варианты ответов!');
return false
};

$('.prepare__test').attr('style','display: none;');
$('.test').attr('style','display: block');

document.getElementById('question').innerHTML= data_array[0];
document.getElementById('var1').innerHTML='1. ' + data_array[1];
document.getElementById('var2').innerHTML='2. ' + data_array[2];
document.getElementById('var3').innerHTML='3. ' + data_array[3];
document.getElementById('var4').innerHTML='4. ' + data_array[4];

for (var i = 1; i <= 4; i++) {
document.getElementById('var' + i).addEventListener('click', check);
};
};

function check(e) {
e = event.currentTarget;
if ( e == answer_array[(data_array[5] - 1 )]) {
alert('Верно!');
} else alert('Неправильный ответ!');
};

function hideTest () {
$('.test').attr('style', 'display: none');
$('.prepare__test').attr('style', 'display: block');
}
});
1 examples/js7-8
Submodule js7-8 added at 0c10da
BIN +414 KB examples/js9-10/img/cat1.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +7.81 KB examples/js9-10/img/cat2.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +124 KB examples/js9-10/img/cat3.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +7.85 KB examples/js9-10/img/cat4.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +4.91 KB examples/js9-10/img/cat5.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 examples/js9-10/index.html
View file
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="wrapper col-md-8">
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src='img/cat1.jpg' width="600" height="400" alt=""></li>
<li><img src="img/cat2.jpg" width="600" height="400" alt=""></li>
<li><img src="img/cat3.jpg" width="600" height="400" alt=""></li>
<li><img src="img/cat4.jpg" width="600" height="400" alt=""></li>
<li><img src="img/cat5.jpg" width="600" height="400" alt=""></li>
<li><img src="img/cat1.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
<a href="#" class="next next-stage"><span>&rsaquo;</span></a>
</div>

<div class="navigation">
<a href="#" class="prev prev-navigation">&lsaquo;</a>
<a href="#" class="next next-navigation">&rsaquo;</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src='img/cat1.jpg' width="50" height="50" alt=""></li>
<li><img src="img/cat2.jpg" width="50" height="50" alt=""></li>
<li><img src="img/cat3.jpg" width="50" height="50" alt=""></li>
<li><img src="img/cat4.jpg" width="50" height="50" alt=""></li>
<li><img src="img/cat5.jpg" width="50" height="50" alt=""></li>
<li><img src="img/cat1.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">

</div>







<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jcarousel/0.3.5/jquery.jcarousel.min.js'></script>
<script src='main.js'></script>
</body>
</html>
209 examples/js9-10/main.css
View file
@@ -0,0 +1,209 @@


body {
background: #F0EFE7;
margin: 0;
padding: 0;
font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #4E443C;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}


pre {
border:1px solid #000;
overflow-x:auto;
background: #222;
color: #fff;
text-shadow: none;
}


/** Stage container **/


.connected-carousels .stage {
width: 620px;
margin: 20px auto;
position: relative;
}

.connected-carousels .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}

.connected-carousels .photo-credits a {
color: #fff;
}

/** Navigation container **/

.connected-carousels .navigation {
width: 260px;
margin: 20px auto;
position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
overflow: hidden;
position: relative;
}

.connected-carousels .carousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}

.connected-carousels .carousel li {
float: left;
}

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
height: 400px;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}

/** Navigation carousel specific styles **/

.connected-carousels .carousel-navigation {
height: 60px;
width: 240px;
background: #fff;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}

.connected-carousels .carousel-navigation li {
cursor: pointer;
}

.connected-carousels .carousel-navigation li img {
display: block;
border: 5px solid #fff;
}

.connected-carousels .carousel-navigation li.active img {
border-color: #ccc;
}

/** Stage carousel controls **/

.connected-carousels .prev-stage,
.connected-carousels .next-stage {
display: block;
position: absolute;
top: 0;
width: 305px;
height: 410px;
color: #fff;
}

.connected-carousels .prev-stage {
left: 0;
}

.connected-carousels .next-stage {
right: 0;
}

.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
display: none;
}

.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
display: none;
position: absolute;
top: 50%;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-stage span {
left: 20px;
}

.connected-carousels .next-stage span {
right: 20px;
}

.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
display: block;
}

/** Navigation carousel controls **/

.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
display: block;
position: absolute;
width: 30px;
height: 30px;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 16px/29px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-navigation {
left: -35px;
top: 22px;
text-indent: 6px;
}

.connected-carousels .next-navigation {
right: -15px;
top: 22px;
text-indent: 20px;
}

.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
opacity: .5;
cursor: default;
}
90 examples/js9-10/main.js
View file
@@ -0,0 +1,90 @@
'use strict'

$(function() {
// This is the connector function.
// It connects one item from the navigation carousel to one item from the
// stage carousel.
// The default behaviour is, to connect items with the same index from both
// carousels. This might _not_ work with circular carousels!
var connector = function(itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};

$(function() {
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();

// We loop through the items of the navigation carousel and set it up
// as a control for an item from the stage carousel.
carouselNavigation.jcarousel('items').each(function() {
var item = $(this);

// This is where we actually connect to items.
var target = connector(item, carouselStage);

item
.on('jcarouselcontrol:active', function() {
carouselNavigation.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function() {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage
});
});

// Setup controls for the stage carousel
$('.prev-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});

$('.next-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});

// Setup controls for the navigation carousel
$('.prev-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});

$('.next-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$( "a" ).click(function( event ) {
event.preventDefault();
});
});
});

1 examples/sec
Submodule sec added at 2304c0
17 presentation.js
View file
@@ -89,7 +89,8 @@ console.log(typeof typeof 1);
// 8. Что будет

console.log(10 + '10' - 10)

console.log('10' + 10 - 10)
console.log(10 - '10' + 10)



@@ -111,12 +112,14 @@ function logValue() {

logValue.bind(a).bind(b)();



// 10. Необходимо, чтобы этот код выводил в лог числа 0, 1, 2, 3 в указанном порядке,
// но он этого не делает (Однажды вы столкнётесь с этой ошибкой. Некоторые люди любят
// задавать этот вопрос на собеседованиях).

for (var i = 0; i < 4; i++) {
setTimeout(() => console.log(i), 0)
setTimeout( () => console.log(i), 0 )
}


@@ -197,7 +200,7 @@ var arr1 = "john".split('');
var arr2 = arr1.reverse();
var arr3 = "jones".split('');
arr2.push(arr3);
console.log(arr2);
// console.log(arr2);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

@@ -267,7 +270,7 @@ console.log((function f(n) { return ((n > 1) ? n * f(n - 1) : n) })(10));

// 21. What would the following lines of code output to the console?

console.log("0 || 1 = "+(0 || 1));
console.log("1 || 2 = "+(1 || 2));
console.log("0 && 1 = "+(0 && 1));
console.log("1 && 2 = "+(1 && 2));
console.log("0 || 1 = " + (0 || 1));
console.log("1 || 2 = " + (1 || 2));
console.log("0 && 1 = " + (0 && 1));
console.log("1 && 2 = " + (1 && 2));