VanillaJS — это название для обозначения использования обычного JavaScript без дополнительных библиотек, таких как jQuery.
Почему я должен знать основы Vanilla javascript?
При разработке любого приложения наступает день, когда что-то работает не так, как ожидалось, и вы не знаете почему. Вот тогда-то и приходится начинать копать. Когда вы начинаете копаться в плохо документированном, сложном, общем, чистом коде JavaScript, вам понадобится глубокое понимание JS. В противном случае, я могу гарантировать, что вы потеряете все то драгоценное время, которое сэкономили, используя свой модный фреймворк.
Знание ванильного JavaScript поможет вам действительно понять JS-фреймворки и выбрать правильный, когда он вам понадобится.
Это руководство покажет вам, как создать и запустить простое приложение Vanilla.js. Использование fetch (встроенный асинхронный метод) для получения данных и их печати.
Приложение разделено на три файла:
index.html, index.css и index.js (vanilla js).
Сначала в нашем html ссылаемся в «head» на наш index.css и в «body» на наш index.js, вот так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="blog">
<div class="container">
<h1>Blog</h1>
<div id="blog" class="w-block"></div>
</div>
</section>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>
Вам понадобится сервер для запуска кода, если вы используете VScode, вы можете использовать Live server
index.css
body {
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
h1,
h2 {
color: #d98e04;
}
a {
display: block;
margin-top: 30px;
color: #f2b705;
}
.w-block {
display: block;
max-width: 550px;
margin: 5rem auto;
line-height: 1.5rem;
}
.w-block .university-feed {
list-style-type: none !important;
}
.w-block .university-feed li a {
text-decoration: none;
transition: all 250ms;
}
.w-block .university-feed li a:hover {
color: #2563eb;
}
.w-block h2 {
margin: 1rem 0;
}
.w-link {
margin: 1.5rem 0;
}
.w-link a {
margin: 0 1rem 0 0;
display: inline;
text-align: center;
}
index.js (Vanilla JavaScript)
Метод документа querySelector() возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null.
Метод appendChild() интерфейса Node добавляет узел в конец списка дочерних узлов указанного родительского узла.
API Fetch позволяет асинхронно запрашивать ресурс. Используйте метод fetch(), чтобы вернуть обещание, которое преобразуется в объект Response. Чтобы получить фактические данные, вы вызываете один из методов объекта Response, например, text() или json(). Эти методы преобразуются в фактические данные.
Метод forEach() (это встроенный метод массива) выполняет предоставленную функцию один раз для каждого элемента массива.
// DOM element where are adding more Nodes with extracted data
const universitiesList = document.querySelector("#university");
// Check url - http://universities.hipolabs.com/search?country=United+Kingdom
// We have splitted in variables in case we want to change the url that supports different routes (get APIs)
const country = "United+Kingdom";
const api = "http://universities.hipolabs.com/search?country=";
/* Helper functions */
// Create elements
function createNode(element) {
return document.createElement(element);
}
// function append element
function append(parent, child) {
return parent.appendChild(child);
}
// Adding "ul" Node element
const ul = createNode("ul");
ul.classList.add("university-feed");
// build url
function buildURL() {
return `${api}${country}`;
}
// @parameter _amount defines how many universities we want to show
// if you don't pass the "_amount" parameter into the function, its parameters will have the default values of 6
const showUniversities = (_amount = 6) => {
fetch(buildURL())
.then((response) => response.json())
.then((universities) => {
// inside "universities" array, we've 100 objects and all of them has same properties: country, name, web_pages (and few more)
// We're cutting json array to first "_amount" objects
universities.length = _amount;
console.log(universities[0] /* json[0].web_pages */);
universities.forEach((university) => {
// creating node elements
let li = createNode("li"),
a = createNode("a"),
h2 = createNode("h2"),
hr = createNode("hr");
// specifying value, attributes and className
h2.innerText = university.name;
a.innerText = university.web_pages[0];
a.target = "_blank";
a.rel = "noreferrer";
a.href = university.web_pages[0];
//appending
// append(li, h4);
append(li, h2);
append(h2, a);
append(ul, li);
append(ul, hr);
});
// appending to university university to feed
append(universitiesList, ul);
}).catch(function (error) {
console.log("Error during fetch: " + error.message);
});
};
showUniversities();
Надеюсь, это было полезно.