Бібліотека jQuery.
Фронтенд розробка JavaScript. -> Бібліотека jQuery.
Бібліотека JQuery.
JSON (JavaScript Object Notation) - текстовий формат для зберігання та передачі даних по мережі. JSON - це представлення об’єктів JavaScript у текстовому форматі.
Для роботи з JSON форматом JavaScript є об’єкт JSON.
Основні функції це серіліазація та десеріалізація.
Серіалізація.
stringify() сериализует объекты в строку
У серіалізованому об’єкті повинно бути циклічних посилань.
Синтаксису.
JSON.stringify(value [, replacer[, space]])
Replacer — параметр, який дозволяє впливати на серіалізацію об’єкта. Значення параметра може бути функція, масив або null, якщо параметр не потрібний.
Функція параметра replace використовується, якщо нам необхідно визначити значення, які не будуть включатися до серіалізації за певною умовою.
function checkAge(key, value) {
if (key === "age" && value >= 18) {
return undefined;
}
return value;
}
І третій параметр функції JSON.stringify(value, replacer, space) - це space, який приймає рядок або число і дозволяє надати більш читаний вид рядку JSON, додаючи відступи.
alert(JSON.stringify(person, null, 2));
Десеріалізація.
Щоб рядок JSON перетворити на об’єкт, потрібно виконати з неї метод парсингу. Парсинг, у цьому У разі, означає процес десеріалізації рядка в об’єкт. Функція parse() - функція, яка десеріалізує JSON рядок і повертає JavaScript.
Синтаксису.
JSON.parse(str, [reviver])
Також є ще необов’язковий параметр reviver, з ним все практично те саме, що і функції stringify()
toJSON
Метод toJSON() може бути методом будь-якого об’єкта. Він дозволяє визначити власне уявлення об’єкта в JSON.
Таким чином, можна замінити стандартну поведінку серіалізації на власну.
let model = {
name: "BMW",
autopilot : undefined,
toJSON(){
let jsonStr = '{"name": "${this.name}",
"autopilot": ';
if(this.autopilot === undefined){
jsonStr += '"Not"}'
}
else{
jsonStr += '"${this.autopilot}"}'
}
return jsonStr;
}
}
Синхронні та асинхронні запити
Синхронні запити — запити під час надсилання яких потрібно дочекатися відповіді із сервера. Наприклад, при авторизації на сайті користувачу не потрібно виконувати інші дії на сторінці, і в цьому випадку можна використати синхронний запит.
Асинхронні запити — запити, які дозволяють не чекати на відповідь з сервера. Результат запиту буде оброблено в момент, як тільки відповідь буде прийнята із сервера.
Ajax – технологія для взаємодії з сервером без перезавантаження сторінки.
Для використання Ajax JavaSctript є спеціальний об’єкт XMLHttpRequest.
Для того, щоб надіслати запит, потрібно використовувати його методи open() та send().
Об’єкт FormData
FormData — дозволяє формувати дані з форм у парі ключ-значення автоматично.
let form = document.getElementById("form");
let formData = new FormData(form)
formData.append("date", new Date().toLocaleString());
Приклад низькорівневого відправлення форми.
let subbliBtn = document.getElementById("submit-btm");
subbliBtn.onclick = function () {
let form = document.getElementById("form");
let formData = new FormData(form)
formData.append("date", new Date().toLocaleString());
let request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST", "server.php");
request.onreadystatechange = function () {
if (request.readyState ==
4 && request.status == 200) {
alert("Здравствуйте " + nameValue +
"! Мы перезвоним вам через 1 минуту");
}
}
request.setRequestHeader('Content-Type',
'multipart/form-data');
request.send(formData);
}
Методи AJAX у JQuery.
Всі вони повертають обгортку навколо об’єкта XMLHTTPRequest (jqXHR) за допомогою промісів.
jQuery.ajax()
Низькрівневий запит із тонкою конфігурацією.
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
Це дозволяє робити запити синхронно.
var result = $.ajax({
type: "GET",
url: remote_url,
async: false
}).responseText
Запит GET
jQuery.get( url [, data ] [, success ] [, dataType ] )
Завантажує дані з сервера, використовуючи запит GET.
data - об’єкт або стоку, що надсилається серверу.
success – колбек, що приймає результат.
dataType – тип даних, очікуваних від сервера.
$.get( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
Т.к. jqXHR використовує проміси, це дозволяє будувати ланцюжки (конвейєри) та виконувати додаткові дії після запиту.
var jqxhr = $.get( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
Приклади.
Простий тест сторінки з ігнорування результату.
$.get( "test.php" );
З передачею параметрів.
$.get( "test.php", { name: "John", time: "2pm" } );
Висновок результату.
$.get( "test.php", function( data ) {
alert( "Data Loaded: " + data );
});
$.get( "test.cgi", { name: "John", time: "2pm" } )
.done(function( data ) {
alert( "Data Loaded: " + data );
});
$.post()
$.post(URL,data,callback);
Приклад надсилання запиту на кліку на кнопку.
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
Анімація, розваги.
Ефекти, що часто використовуються, вбудовані в jQuery як методи, які ви можете викликати для будь-якого об’єкта jQuery:
.show() - показати вибрані елементи;
.hide() — приховати вибрані елементи;
.fadeIn() - анімація прозорості вибраних елементів до 0%;
.fadeOut() - анімація прозорості вибраних елементів до 100%;
.slideDown() — відображення вибраних елементів за допомогою вертикального ковзного руху;
.slideUp() — приховування вибраних елементів за допомогою вертикального ковзного руху;
.slideToggle() — показати або приховати вибрані елементи з вертикальним ковзним рухом залежно від того, чи видні елементи в даний момент чи ні.
Можна використовувати певні аргументи, наприклад, швидкості.
$( '.hidden' ).show( 'slow' );
Можна перевстановити певну швидкість.
jQuery.fx.speeds.fast = 50;
Ви можете надати функцію зворотного дзвінка для методів анімації, якщо хочете вказати, що має статися після завершення ефекту
$( 'p.old' ).fadeOut( 300, function() {
$( this ).remove();
});
Довільні ефекти з .animate()
.animate(properties, [duration], [easing], [callback]):jQuery
Метод .animate() має кілька аргументів:
-
об’єкт, що визначає властивості анімації;
-
Тривалість анімації в мілісекундах;
-
easing — зміна швидкості анімації (буде вона сповільнюється до кінця виконання або навпаки прискориться).
-
функція зворотного дзвінка, яка буде викликатись після закінчення анімації.
Метод .animate() може анімувати до вказаного кінцевого значення або збільшити існуюче значення.
$( '.funtimes' ).animate({
left: '+=50', // збільшити на 50
opacity: 0.25,
fontSize: '12px'
},
300,
function() {
// виконується, коли анімація завершена
}
);
jQuery пропонує два важливі методи для управління анімацією.
.stop() — зупиняє анімацію для обраних елементів.
.delay() - пауза перед виконанням наступної анімації. Як аргумент передається бажаний час очікування в мілісекундах.
Приклад.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id="go">» З'їж пиріжок</button>
<div id="block">Аліса</div>
<script>
// Зробимо зміну кількох css-величин під час однієї анімації.
$("#go").click(function(){
$("#block").animate({
width: "70%", // ширина стане 70%
opacity: 0.4, // прозорість буде 40%
marginLeft: "0.6in", // відступ від лівого краю елемента стане рівним 6 дюймам
fontSize: "3em", // розмір шрифту збільшиться в 3 рази
borderWidth: "10px" // товщина рамки стане 10 пікселів
}, 1500); // анімація відбуватиметься 1,5 секунд
});
</script>
</body>
</html>
JQuery плагіни
https://www.jqueryscript.net/slider/nivo-slider.html