request('http://api.randomuser.me/1.0/', {
results: 50,
nat: ['gb', 'us'],
inc: ['gender', 'name', 'location', 'email', 'phone', 'picture']
}).get(function (data) {
console.log(data);
}, function (error) {
console.log(error);
});
request('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
}).post(function (data) {
console.log(data);
}, function (error) {
console.log(error);
});
function request(link, params, setup) {
return {
get: function (success, error) {
return ajax(extend({}, {
url: link + (params ? '?' + param(params) : ''),
method: 'GET',
success: success || function () {},
error: error || function () {}
}, setup || {}));
},
post: function (success, error) {
return ajax(extend({}, {
url: link,
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
data: params,
success: success || function () {},
error: error || function () {}
}, setup || {}));
}
};
}
function ajax(params) {
var setting = extend({}, {
url: window.location.href,
method: 'GET',
async: true,
data: undefined,
headers: {
'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
success: function (data, xhr, params) {},
error: function (error, xhr, params) {}
}, params || {});
var setHeaders = function (headers) {
for (var name in headers) {
this.setRequestHeader(name, headers[name]);
}
};
var xhr = new XMLHttpRequest();
xhr.open(setting.method, setting.url, setting.async);
setHeaders.call(xhr, setting.headers);
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
var data = (function () {
try {
return JSON.parse(this.response);
} catch (error) {
return this.response;
}
}).call(this);
setting.success(data, this, setting);
} else {
setting.error(this.status, this, setting);
}
}
}
xhr.send(setting.data ? JSON.stringify(setting.data) : null);
return xhr;
}
function param(data) {
var result = '';
for (var name in data) {
result += name + '=' + (Array.isArray(data[name]) ? data[name].join(',') : data[name]) + '&';
}
return result.slice(0, -1);
}
function extend(output) {
output = output || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i]) continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) {
output[key] = arguments[i][key];
}
}
}
return output;
}var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture', true);
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
var data = JSON.parse(this.response);
console.log('Успех', data);
} else {
console.log('Ошибка', this);
}
}
}
xhr.send(null);let Temp = JSON.parse(JSON.stringify(matrix));
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?
Хотелось бы узнать что это за задачи(упомянутые вами 80%)
var NS = 'http://www.w3.org/2000/svg',
NSL = 'http://www.w3.org/1999/xlink',
elements = [
{
name: 'svg',
attr: {
'class': 'main'
},
children: [
{
name: 'symbol',
attr: {
id: 'square',
viewBox: '0 0 100 100'
},
children: [
{
name: 'rect',
attr: {
x: 0,
y: 0,
width: 100,
height: 100,
fill: 'rgba(51,102,204,1)'
}
}
]
},
{
name: 'symbol',
attr: {
id: 'circle',
viewBox: '0 0 100 100'
},
children: [
{
name: 'circle',
attr: {
cx: 50,
cy: 50,
r: 50,
fill: 'rgba(51,204,102,1)'
}
}
]
}
]
},
{
name: 'svg',
attr: {
'class': 'icon'
},
children: [
{
name: 'use',
attr: {
'xlink:href': '#square'
}
}
]
}
],
newElement = {
name: 'svg',
attr: {
'class': 'icon'
},
children: [
{
name: 'use',
attr: {
'xlink:href': '#circle'
}
}
]
};function createSVG (elem) {
var svgElement = document.createElementNS(NS, elem.name);
if (elem.attr) {
Object.keys(elem.attr).forEach(function (value) {
if (value.indexOf('xlink') < 0) {
svgElement.setAttribute(value, elem.attr[value]);
} else {
svgElement.setAttributeNS(NSL, value, elem.attr[value]);
}
});
}
if (elem.children) {
elem.children.forEach(function (value) {
svgElement.appendChild(createSVG(value));
});
}
return svgElement;
}elements.forEach(function (element) {
document.body.appendChild(createSVG(element));
});
document.body.appendChild(createSVG(newElement));.main {
display: none;
}
.icon {
width: 100px;
height: 100px;
}
function isLastChild(el) {
return el.parentNode.lastElementChild == el;
}
console.log(isLastChild(document.querySelectorAll('.tag')[0]));