바닐라 자바스크립트 데이터 가져오기

16987 단어 vanillawebdevfetcjavascript
VanillaJS는 jQuery와 같은 추가 라이브러리 없이 일반 JavaScript를 사용하는 것을 지칭하는 이름입니다.

바닐라 자바스크립트 기초를 왜 알아야 할까요?

모든 앱 개발에는 이유를 알 수 없는 무언가가 예상대로 작동하지 않는 날이 있습니다. 그것이 당신이 파기 시작해야 할 때입니다. 제대로 문서화되지 않고 복잡하고 일반적이며 순수한 JavaScript 코드를 통해 검색을 시작하려면 JS에 대한 깊은 이해가 필요합니다. 그렇지 않으면 멋진 프레임워크를 사용하여 절약한 소중한 시간을 모두 잃게 될 것이라고 확신합니다.

바닐라 JavaScript를 알면 실제로 JS 프레임워크를 이해하고 필요할 때 올바른 프레임워크를 선택하는 데 도움이 됩니다.

이 가이드는 간단한 Vanilla.js 앱을 빌드하고 실행하는 방법을 보여줍니다. 가져오기(기본 제공 비동기 메서드)를 사용하여 데이터에 도달하고 인쇄합니다.

앱은 세 개의 파일로 나뉩니다.
index.html, index.css 및 index.js(바닐라 js)

먼저 html에서 다음과 같이 index.css의 "head"와 index.js의 "body"를 참조합니다.

<!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>


You will need a server to run the code, if you're usin VScode, you can use 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(바닐라 자바스크립트)

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

The Fetch API allows you to asynchronously request for a resource. Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.

The forEach() (is a built-in array method) executes a provided function once for each array element.



// 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();


도움이 되었기를 바랍니다.
【PyCaret1.0】앙상블 학습(블렌딩)의 Fold수를 조정하는 것만으로 Titanic 적당히 좋은 스코어(0.80382)
단순 img 마이크로프론트엔드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage