JavaScript를 사용하여 API를 가져와 자체 셰익스피어 번역 웹 응용 프로그램 만들기
15865 단어 javascripttutorialwebdevcodenewbie
나는 셰익스피어가 어떻게 그의 말로 나의 생각을 표현할지 줄곧 궁금했다.너도??
그럼 잘 왔네, 내 친구!
이것은 vanillaJS 프로젝트로 https://funtranslations.com/ 의 API를 사용하여 영어 텍스트를 셰익스피어 영어로 번역한다.
선결 조건
HTML과 CSS에 대해 기본적으로 알고 있으며 자바스크립트가 무엇인지 알고 있습니다.
이것이 바로 우리가 구축하고자 하는 것이다.
Try out the app here
소스 코드
만약 네가 따라가다가 길을 잃었다면, 너는 잡을 수 있다. source code from here
시작합시다!
개시하다
먼저 VScode를 사용하여 코드를 작성합니다.이름 색인을 사용하여 첫 번째 파일을 만듭니다.html 코드를 작성하는 데 사용되는 html.
애플리케이션에는 다음과 같은 3가지 기본 요소가 있습니다.
HTML 코드 세그먼트 - 인덱스.html
<body>
<input type="textarea" id="inputTxt" placeholder="insert your text">
<button id="translateButton">Translate!</button>
<p id="outputTxt"></p>
<script src='/scripts/app.js'></script>
</body>
Note: < script > tag is being used to bind this HTML file with the JavaScript file app.js.
데이터 저장을 위한 변수 초기화
이 코드는 저장 프로그램이 사용할 데이터에 필요한 변수를 설정했다.
응용 프로그램에서js 파일, 다음 변수를 만듭니다.
JS 코드 세그먼트 - 응용 프로그램.js
let inputElement = document.querySelector("#inputTxt"); // input element
let translateBtnElement = document.querySelector("#translateButton"); // button element
let outputElement = document.querySelector("#outputTxt"); // output element
let url="https://shakespeare.p.mashape.com/shakespeare.json"; //API URL
inputElement, translateBtnElement, outputElement는 각각 HTML의 폼 텍스트 입력, 번역 단추와 출력 요소에 대한 인용을 저장하는 데 사용된다.마지막 변수
url는 번역된 데이터를 가져오는 서버의 API 호출 URL을 저장하는 데 사용됩니다.여기에서, 우리는
.querySelector() 함수를 사용하여 색인에 설정된 특정 id를 선택합니다.html 파일.감청 단추를 누르기 위해서 이벤트 처리 함수를 정의해야 합니다.
translateBtnElement.addEventListener("click", translateFunction);
click - 이벤트translateBtnElement - 사건 탐지기translateFunction - 이벤트 처리 프로그램/리셋 함수입니다.click에서 translateBtnElement 사건을 촉발한 후addEventListener() 방법은 호출translateFunction()을 통해 처리한다.translateFunction()를 정의하기 전에 API에 대한 기본 지식을 알아야 합니다.API란?
API는 응용 프로그램 프로그래밍 인터페이스를 나타내며 응용 프로그램이 데이터에 액세스하고 외부 소프트웨어 구성 요소, 운영 체제 또는 마이크로 서비스와 상호작용할 수 있도록 하는 함수입니다.
와!뭐?!
좋아요!간단한 언어로 설명해 드릴게요.만약 네가 한 식당에서 있다면, 너는 그 초콜릿 케이크를 얻기를 갈망할 것이다.설마 요리사에게 직접 가서 주문하는 건 아니겠지?종업원이 해줬어.이게 API야.그것은 응용 프로그램 간에 통신을 하는 인터페이스다.
여기,
따라서 웹 서버에서 데이터를 얻기 위해서는 API가 필요합니다.우리의 예시에서, 우리는 FunTranslationAPI 를 사용하여 JSON 형식 (키 값 쌍) 의 데이터를 얻었다.
API를 호출합시다!
API 가져오기
Fetch API는 웹 브라우저에서 서버에 HTTP 요청을 보내고 해당 URL로 보낼 수 있는 현대식 인터페이스입니다.
관련된 기본 구문:
fetch(url)
.then(response => {
// handle the response
})
.then(data => console.log(data))
.catch(error => {
// handle the error
});
fetch() 함수에서 데이터를 요청하는 리소스의 URL을 전달합니다.이것은 response 대상의 형식으로 데이터를 전달할 것이다.response 대상은 얻은 자원의 API 패키지로서 많은 유용한 속성과 방법을 가지고 응답을 검사한다.그런 다음 출력을 인쇄할 수 있는 이름data 변수에 전달합니다.이제 함수를 정의할 때가 되었다.
일부 작업에 대한 함수 정의()
코드가 역할을 발휘하도록 하기 위해서 우리는 몇 가지 함수를 정의해야 한다.
function translateFunction(event){
let inputValue = inputElement.value; //fetching input value
fetch(url) //Fetch API call
.then(response => response.json())
.then(data => {
outputElement.innerText = data;
})
.catch(() => alert("Shakespeare(Server) is busy! Try after sometime"))
inputElement값을 inputValue 변수에 추출할 것이다.fetch를 사용하여 url API 호출을 하고 response 대상을 추출한다.이것은 HTTP 응답일 뿐 실제 JSON이 아닙니다.응답에서 JSON의 본문 내용을 추출하기 위해 우리는 arrow 함수를 사용하여 json() 방법을 사용합니다.data 변수로 설정합니다.outputElement 함수를 사용하여 오류 처리를 합니다.콘솔에서
{
"error": {
"code": 400,
"message": "Bad Request: text is missing."
}
}
catch()를 정의할 것이다.function translatedURL(inputValue){
return `${url} ?text= ${inputValue}`;
}
translatedURL() 대신previous fetch(translatedURL(inputValue)) 로 호출하여 텍스트 메시지를 서버 API의 URL에 연결합니다.다음과 같은 출력이 제공됩니다.{
"success": {
"total": 1
},
"contents": {
"translated": "Good morrow. How art thee?",
"text": "Hi. How are you?",
"translation": "shakespeare"
}
}
여기,
번역 텍스트
우리는
fetch(url)를 통해 그것을 인용한다.현재 우리의 코드는 다음과 같아야 한다.function translatedURL(inputValue){
return `${url}?text=${inputValue}`;
}
function translateFunction(event){
let inputValue = inputElement.value;
let finalURL = translatedURL(inputValue);
fetch(finalURL)
.then(response => response.json())
.then(json => {
outputElement.innerText = json.contents.translated;
})
.catch(() => alert("Shakespeare(Server) is busy! Try after sometime"))
}
봐라!JavaScript에서 API를 가져와 자체 셰익스피어 번역 웹 응용 프로그램을 구축했습니다.
Note: Funtranslation APIs are free to use, hence they have a limitation of 5 calls/hour. Once it exceeds this limit, it would result in a failure with an error we've mentioned in the
catch()block.
이제 끝났어...
이렇게 멀리 간 걸 축하해!우리는 이미 DOM 스크립트에 대해 기본적인 이해를 얻었다. 예를 들어 브라우저의 JS, 서버 호출, 그곳에서 데이터 얻기, 사용자 입력과 사용자 출력 표시 등이다.
이제 남은 것은 CSS로 자신의 스타일을 디자인하는 것이다.너도 funtranslationsite에서 비슷한 프로그램을 볼 수 있다. 이 프로그램은 서로 다른 번역 언어를 사용한다.
Click here to check out the live project.
당신의 버전을 만들고 평론 부분에서 당신의 경험과 피드백을 공유해 보세요.
읽어주셔서 감사합니다!
Reference
이 문제에 관하여(JavaScript를 사용하여 API를 가져와 자체 셰익스피어 번역 웹 응용 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nayyyhaa/build-your-own-shakespeare-translation-web-app-with-javascript-fetch-api-loo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
