JavaScript&JQuery
-
$.getJSON 방식으로 외부 URL에서 meta tag(타이틀, 썸네일, 내용) 가져오기JavaScript&JQuery 2023. 3. 17. 15:48
카카오톡에서 인터넷기사나 또는 웹페이지 링크를 보내면 썸네일 형식의 대표 이미지와 타이틀과 간략한 내용을 가져오는기능이 있습니다. 오늘은 이 기능을 구현해보겠습니다. *관련이슈: 크로스도메인(Cross Domain), 동일 출처 정책(Same Origin Policy) 일단 구현하고자 하는 기능이 카카오톡에 있는 기능과 유사하여 관련 문서를 찾아봤습니다. https://developers.kakao.com/tool/debugger/sharing 카카오계정 accounts.kakao.com 저는 Open Graph를 이용해서 meta tag를 가져올 계획이라 일단 카카오 관리자 페이지에서 공유 디버거 페이지에 검색했습니다. 제가 가져오고자하는 페이지에서는 다음과 같은 Open Graph 정보가 제공되는지 ..
-
YouTube 썸네일, 플레이어를 가져오기JavaScript&JQuery 2023. 3. 14. 11:22
카카오톡이나 웹페이지를 이용하다 보면 링크를 걸었을때 썸네일 화면이 보이거나 특정 youtube 영상을 해당 페이지에서 재생하는 플레이어가 있다. 오늘은 이 YouTube 페이지를 여러 방식으로 사용해보자 1. YouTube 재생하기 기능을 가져오기 먼저, 나의 페이지에서 재생하기 원하는 유튜브 주소로 이동해서 공유 -> 퍼가기를 누른다. 퍼가기로 이동하면 다음과 같이 태그로 감싸진 내용이 있는데, 이를 복사한다. 이것을 태그에 넣어주고 나의 페이지를 열어보자. 이렇게 나의 페이지에서 재생할 수 있다. 태그 안에 존재하는 변수를 통해 자동재생이나, 자막 기본 표시 여부를 설정할 수 있다. 이는 YouTube IFrame Player API 페이지를 통해 확인할 수 있다. https://developers..
-
Billboard.js Chart 사용해보기JavaScript&JQuery 2022. 3. 31. 10:19
+ 코드는 리플잇에서 HTML 리포트에서 https://replit.com/ The collaborative browser based IDE Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages. replit.com + https://naver.github.io/billboard.js/demo/ billboard.js - examples Sample code • Try it out by editing below code or click right sided buttons. *for ESM imports u..
-
JQuery 기본 이벤트 예제 프로그램JavaScript&JQuery 2022. 3. 18. 10:41
업로드 히스토리 : 2022.03.18 / 2022.03.22 + 리플잇에서 HTML 리포트를 생성해서 붙여넣으면 된다. https://replit.com The collaborative browser based IDE Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages. replit.com + 소스코드===================================================================== JQuery 이벤트를 알아보자 초기화 무슨 기능이 있을까요? 한번 알아봅시다 버..