7. 자바스크립트
5893 단어 awsjavascript
CountAPI를 사용하여 내 website의 왼쪽 섹션에 방문 카운터가 있습니다. 이것을 구현하려면 JavaScript 를 약간 작성해야 했습니다. 모든 안구가 중요하기 때문에 방문자의 피드백 데이터(좋아요/싫어요)를 내 JS 기능callAPI에 푸시하는 약간의 스크립팅도 있습니다.힘내: https://github.com/jicoing/git-komlalebu
CountAPI
index.html
JS - CountAPI
This API allows you to create simple numeric counters.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function cb(response) {
document.getElementById('visits').innerText
= response.value;
}
</script>
<script async
src="https://api.countapi.xyz/hit/
blog.komlalebu.com/visits?callback=cb">
</script>
</head>
HTML
<div
id="visits">...</div>
JS - CountAPI
This API allows you to create simple numeric counters.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function cb(response) {
document.getElementById('visits').innerText
= response.value;
}
</script>
<script async
src="https://api.countapi.xyz/hit/
blog.komlalebu.com/visits?callback=cb">
</script>
</head>
HTML
<div
id="visits">...</div>
Visitor count로 표시됩니다. 
호출 API
callAPI - Function to make API calls to AWS Lambda( ).
함수에는 visitorCount 및 visitorResponse 두 개의 매개변수가 있습니다.visitorCount - div 요소 ID가 countAPI JS인 visits에서 가져온 JSON 개체입니다. 가져온 카운트 값입니다.
visitorResponse - API를 호출하는 좋아요 또는 싫어요 버튼(버튼 태그에 선언됨)에 전달되는('YES' 또는 'NO') 문자열 값입니다onclicking.
>Like:
callAPI(document.getElementById('visits').innerText,'YES')
>Dislike:
callAPI(document.getElementById('visits').innerText,'NO')
API를 호출하는 HTML 본문 태그에 선언된onload 이벤트 중에 callAPI 함수가 호출될 때 일반적으로 빈 문자열 ''입니다.
<body onscroll="changeImage3()" onload =
"callAPI(document.getElementById('visits')
.innerText,'')">
</body>
varraw - 메서드 본문에 대한 문자열로 구문 분석된 JSON 값을 보유합니다.
fetch(URL,requestOptions) - 함수가 요청 옵션이 선언된 상태에서 ( ) API URL을 호출합니다. (메소드 유형은 POST , 헤더는 myHeaders , 본문은 raw ).
단추
사용자가 피드백을 제공하고 onclick 이벤트를 사용하여 callAPI 함수를 호출할 수 있는 HTML 버튼 태그도 있습니다.
HTML for like button.
<form>
<button type="button" style="color: #555555"
onclick="callAPI(document.
getElementById('visits').
innerText,'YES');changeImage1()">
Like</button>
</form>
HTML for dislike button.
<form>
<button type="button" style="color: #555555"
onclick="callAPI(document.
getElementById('visits').
innerText,'NO');changeImage1()">
Like</button>
</form>
Reference
이 문제에 관하여(7. 자바스크립트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/jicoing/7-javascript-13h8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
callAPI - Function to make API calls to AWS Lambda( ).
>Like:
callAPI(document.getElementById('visits').innerText,'YES')
>Dislike:
callAPI(document.getElementById('visits').innerText,'NO')
<body onscroll="changeImage3()" onload =
"callAPI(document.getElementById('visits')
.innerText,'')">
</body>
사용자가 피드백을 제공하고 onclick 이벤트를 사용하여 callAPI 함수를 호출할 수 있는 HTML 버튼 태그도 있습니다.
HTML for like button.
<form>
<button type="button" style="color: #555555"
onclick="callAPI(document.
getElementById('visits').
innerText,'YES');changeImage1()">
Like</button>
</form>
HTML for dislike button.
<form>
<button type="button" style="color: #555555"
onclick="callAPI(document.
getElementById('visits').
innerText,'NO');changeImage1()">
Like</button>
</form>
Reference
이 문제에 관하여(7. 자바스크립트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jicoing/7-javascript-13h8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
